* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #0d0c08; color: #f3ead2; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; }
button { font: inherit; cursor: pointer; }
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; }

#lobby { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; overflow-y: auto; touch-action: auto;
  background: radial-gradient(ellipse at 30% 20%, rgba(255,110,40,.18), transparent 60%), radial-gradient(ellipse at 70% 80%, rgba(60,160,255,.18), transparent 60%), #14120c; }
h1 { margin: 0; font-size: clamp(30px, 7vw, 54px); letter-spacing: 2px; text-align: center; text-shadow: 0 3px 0 #000; }
h1 small { display: block; font-size: .45em; color: #d8c58e; letter-spacing: 8px; margin-top: 4px; }
.tf { color: #ff7a3a; } .ti { color: #5ec8ff; } .amp { color: #d8c58e; margin: 0 .2em; font-size: .7em; }
.card { background: rgba(40,36,24,.92); border: 2px solid #5c522f; border-radius: 18px; padding: 18px; width: min(460px, 100%); display: flex; flex-direction: column; gap: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.roomrow { display: flex; align-items: center; gap: 10px; font-size: 18px; color: #d8c58e; }
.roomrow input { flex: 1; min-width: 0; font-size: 26px; text-align: center; letter-spacing: 6px; padding: 8px; border-radius: 10px; border: 2px solid #5c522f; background: #1b1810; color: #fff; user-select: text; -webkit-user-select: text; }
.roles { display: flex; gap: 10px; }
.role { flex: 1; border: 0; border-radius: 14px; padding: 14px 6px; font-size: 19px; font-weight: bold; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: 0 5px 0 rgba(0,0,0,.4); }
.role b { font-size: 34px; }
.role:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.4); }
.role.fire { background: linear-gradient(#ff8a3d, #d9381a); }
.role.ice { background: linear-gradient(#6fd2ff, #1f74d6); }
.hint { margin: 0; text-align: center; font-size: 14px; color: #bfb08a; line-height: 1.6; }
.ghost { background: transparent; color: #bfb08a; border: 1px dashed #5c522f; border-radius: 10px; padding: 10px; font-size: 14px; }
.err { margin: 0; min-height: 1.2em; text-align: center; color: #ff8a7a; font-size: 15px; }

#game { background: #0d0c08; }
#wrap { position: absolute; }
#cv { display: block; width: 100%; height: 100%; image-rendering: auto; }
#hud { position: absolute; left: 0; right: 0; top: 0; height: 5%; min-height: 26px; display: flex; align-items: center; justify-content: space-between; padding: 0 1.2%; pointer-events: none; font-size: clamp(11px, 2.2vh, 18px); font-weight: bold; text-shadow: 0 1px 2px #000; }
#hudName { color: #f1dfa6; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hudStat { flex: 1; text-align: center; white-space: nowrap; }
#hudStat .r { color: #ff7a5a; } #hudStat .b { color: #6fd2ff; }
.hudBtns { flex: 1; display: flex; justify-content: flex-end; gap: 6px; pointer-events: auto; }
.hudBtns button { background: rgba(0,0,0,.45); color: #f1dfa6; border: 1px solid rgba(241,223,166,.35); border-radius: 8px; height: clamp(22px, 4.2vh, 34px); min-width: clamp(28px, 5vh, 42px); font-size: clamp(13px, 2.4vh, 20px); padding: 0 6px; }
#banner { position: absolute; left: 50%; top: 9%; transform: translateX(-50%); max-width: 80%; background: rgba(20,18,12,.85); border: 1px solid #8c7e4f; color: #fff2c8; padding: 8px 16px; border-radius: 12px; font-size: clamp(13px, 2.8vh, 20px); text-align: center; pointer-events: none; opacity: 0; transition: opacity .5s; }
#banner.show { opacity: 1; }

#controls { position: fixed; inset: 0; pointer-events: none; }
.pad { position: absolute; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; gap: 10px; align-items: flex-end; pointer-events: auto; touch-action: none; }
.pad.left { left: max(10px, env(safe-area-inset-left)); }
.pad.right { right: max(10px, env(safe-area-inset-right)); }
.btn { width: 16vh; height: 16vh; max-width: 100px; max-height: 100px; min-width: 56px; min-height: 56px; border-radius: 50%; background: rgba(255,255,255,.12); border: 3px solid rgba(255,255,255,.35); color: rgba(255,255,255,.85); display: flex; align-items: center; justify-content: center; font-size: 6vh; touch-action: none; transition: background .05s, transform .05s; }
.btn.on { background: rgba(255,255,255,.38); transform: scale(.94); }
.pad.fire .btn { border-color: rgba(255,130,70,.7); background: rgba(255,100,40,.16); }
.pad.ice .btn { border-color: rgba(100,200,255,.7); background: rgba(60,160,255,.16); }
.pad.fire .btn.on { background: rgba(255,120,60,.45); } .pad.ice .btn.on { background: rgba(90,190,255,.45); }
.btn.big { width: 20vh; height: 20vh; max-width: 130px; max-height: 130px; }
.dual .btn { width: 15vh; height: 15vh; min-width: 50px; min-height: 50px; font-size: 6vh; }
.pad .col { display: flex; flex-direction: column; gap: 10px; align-items: center; }

#overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 12px; z-index: 5; }
#panel { background: #2a2618; border: 3px solid #8c7e4f; border-radius: 18px; padding: 18px 24px; text-align: center; max-width: 92vw; max-height: 92vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
#panel h2 { margin: 0 0 8px; font-size: clamp(20px, 5vh, 34px); color: #ffe08a; }
#panel p { margin: 6px 0; font-size: clamp(14px, 3vh, 18px); color: #e8dcb8; line-height: 1.5; }
#panel .big { font-size: clamp(22px, 6vh, 40px); letter-spacing: 6px; color: #fff; font-weight: bold; }
#panel .who { display: flex; justify-content: center; gap: 18px; margin: 10px 0; font-size: clamp(14px, 3vh, 18px); }
#panel .who span { padding: 6px 12px; border-radius: 10px; background: #1b1810; opacity: .45; }
#panel .who span.ok { opacity: 1; }
#panel .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
#panel button { border: 0; border-radius: 12px; padding: 10px 18px; font-size: clamp(15px, 3.2vh, 20px); font-weight: bold; color: #2a2618; background: #ffd23f; box-shadow: 0 4px 0 #a1801a; }
#panel button.sec { background: #8c7e4f; color: #fff; box-shadow: 0 4px 0 #574d2d; }
#panel button:active { transform: translateY(2px); box-shadow: 0 2px 0 #574d2d; }
#panel .lv { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; min-width: min(520px, 80vw); }
#panel .lv button { background: #4a4229; color: #fff2c8; box-shadow: 0 4px 0 #2a2618; font-size: clamp(14px, 3vh, 17px); }
#panel .lv button.cur { background: #ffd23f; color: #2a2618; }
#panel .link { font-size: 13px; color: #bfb08a; word-break: break-all; user-select: text; -webkit-user-select: text; }

#rotate { display: none; position: fixed; inset: 0; z-index: 10; background: #14120c; color: #f1dfa6; font-size: 26px; text-align: center; align-items: center; justify-content: center; line-height: 2; }
@media (orientation: portrait) and (pointer: coarse) { body.ingame #rotate { display: flex; } }