/* Switch Day 포스터 모양 (P7): 검정 바탕에 옅은 스티커 무늬, 아주 굵은 흰 글자, 색은 역할별로 쓴다.
   초록: 시작·열림, 하늘: 링크·관전, 노랑: 시간·점수·안내, 빨강: 틀림·멈춤, 보라: 꾸밈. 값은 결재라인 style.css와 같다.
   지도 그림, 오프닝 장면 그림, 도트 캐릭터는 그대로 두고 그 위에 놓인 것만 바꾼다. */
:root{
  /* 화면 크기와 safe area는 변수로 쓴다: 세로 휴대폰에서 셸을 돌려 그리면(html.rot, docs/spec.md D11) 가로·세로와 네 변이 서로 바뀐다 */
  --W:100vw; --H:100vh;
  --sa-t:env(safe-area-inset-top,0px); --sa-r:env(safe-area-inset-right,0px); --sa-b:env(safe-area-inset-bottom,0px); --sa-l:env(safe-area-inset-left,0px);
  --u:min(calc(var(--H)/100),calc(var(--W)*.0048));   /* 기준 단위: 가로 화면 높이의 1% */
  --kbd-left:var(--sa-l); --kbd-right:var(--sa-r); --kbd-bottom:var(--sa-b);   /* 화면 안 키보드(web/kbd.js)의 safe area */
  --green:#19d27c; --sky:#18a8ff; --orange:#ff6b1f; --purple:#9a63ff; --yellow:#ffd21f; --red:#ff4d4d;
  --panel:#17171b; --panel2:#212127; --chip:#2a2a31; --line:#303038; --line2:#3d3d47; --field:#0f0f12;
  --text:#f4f4f6; --muted:#a3a3b0; --ok-bg:#0f2a1d; --hud:rgba(11,11,13,.92);
  --brand:var(--font);
  --body:var(--font);
  color-scheme:dark;
}
/* iPhone Safari의 1vh는 주소창이 숨은 높이라, 주소창이 보이면 글자가 화면보다 커져 겹친다. 보이는 높이(dvh)를 쓴다 */
@supports (height:1dvh){:root{--H:100dvh}}
/* web/index.html ROTATE=true일 때만(기본은 false라 세로 터치 화면에 안내 .rotate를 덮음, D11): 세로 터치 화면(html.rot, head가 기기 방향으로 정함)이면
   body를 90° 돌려 가로 화면을 그린다. 화면 위쪽이 휴대폰 오른쪽에
   오므로 휴대폰을 왼쪽으로 눕히면 바로 보인다. 돌린 body가 position:fixed의 기준이 되어 화면(.scr), 시트, 토스트도 함께 돈다.
   가로 폭은 휴대폰의 세로 길이, 높이는 가로 길이이고, 내용의 왼쪽 변은 휴대폰 위(노치), 오른쪽 변은 아래(홈 바)다 */
html.rot{--W:100vh; --H:100vw; --sa-t:env(safe-area-inset-right,0px); --sa-r:env(safe-area-inset-bottom,0px); --sa-b:env(safe-area-inset-left,0px); --sa-l:env(safe-area-inset-top,0px)}
@supports (height:1dvh){html.rot{--W:100dvh}}
html.rot body{position:fixed;top:0;left:0;width:var(--W);height:var(--H);transform-origin:0 0;transform:translateX(100vw) rotate(90deg)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#000;color:var(--text);font:500 16px/1.4 var(--body);
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;-webkit-touch-callout:none}
button:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.hidden{display:none!important}
[hidden]{display:none!important}   /* a hidden attribute wins over a class's display (the menu's 「우리 팀」 and its head line) */
.scr{position:fixed;inset:0;overflow:hidden}

/* 바탕: 포스터 스티커가 옅게 녹아 있는 검정(무늬 위에 86% 검정을 덮음). 창과 카드는 그 위에 꽉 찬 색 */
#title,#bye,#opening,#select,.pass-scr,.rotate{background:linear-gradient(rgba(0,0,0,.86),rgba(0,0,0,.86)),url(/assets/brand/pattern.6b523c35f2.webp) 0 0/calc(var(--u)*92) repeat,#000}
.stk{position:absolute;z-index:1;display:block;width:calc(var(--u)*34);aspect-ratio:1;background:center/contain no-repeat;pointer-events:none}
.s-switch{background-image:url(/assets/brand/switch.6fe8ec3da9.webp)}
.s-lock{background-image:url(/assets/brand/lock.2b1fc1ac85.webp)}
.s-heart{background-image:url(/assets/brand/heart.7797f71a43.webp)}
.s-box{background-image:url(/assets/brand/box.a0c2c89ce9.webp)}
.coinone{display:inline-flex;align-items:center;gap:calc(var(--u)*1.2);font:900 calc(var(--u)*4.4)/1 var(--brand);letter-spacing:-.03em;color:#fff}
.cmark{flex:none;width:calc(var(--u)*4.2);height:calc(var(--u)*4.2);border:calc(var(--u)*1.25) solid #fff;border-right-color:transparent;border-radius:50%}

/* ================= 세로 안내 ================= */
/* 세로 터치 화면(html.norot, web/index.html head가 기기 방향으로 정함)에 덮는다. ROTATE=true로 돌려 그리는 판에서는 뜨지 않는다.
   우리 키보드(web/kbd.js .sdk, z-index 2147483000)가 열린 채 세로로 돌리면 안내 위에 남아 안 보이는 칸에 글자가 들어가므로 숨긴다(다시 가로로 들면 그대로 보임) */
.rotate{display:none;position:fixed;inset:0;z-index:9999;background-size:auto,360px;align-items:center;justify-content:center;flex-direction:column;gap:14px;text-align:center;padding:24px;color:#fff}
.rotate .ph{font-size:64px;animation:rot 1.8s ease-in-out infinite}
.rotate b{font:900 24px/1.25 var(--brand);letter-spacing:-.03em} .rotate span{font:600 14px/1.4 var(--body);color:var(--muted)}
@keyframes rot{0%,25%{transform:rotate(0)}55%,100%{transform:rotate(-90deg)}}
html.norot .rotate{display:flex}
html.norot .sdk{display:none}

/* ================= 공통 버튼 ================= */
/* 누르는 자리는 v0.7.1보다 작아지지 않게 높이 바닥을 둔다 */
.pbtn{min-height:max(44px,calc(var(--u)*12.6));border:0;border-radius:calc(var(--u)*3);padding:calc(var(--u)*2.8) calc(var(--u)*5.4);font:900 calc(var(--u)*4.2)/1.2 var(--brand);letter-spacing:-.01em;white-space:nowrap;
  color:#000;background:var(--green);box-shadow:0 calc(var(--u)*.9) 0 #0b8f52;transition:transform .08s}
.pbtn:active{transform:translateY(calc(var(--u)*.6));box-shadow:0 calc(var(--u)*.3) 0 #0b8f52}
.pbtn:disabled{background:var(--chip);color:var(--muted);box-shadow:none;transform:none;cursor:default}
.gbtn{min-height:max(44px,calc(var(--u)*12));border:1px solid var(--line2);border-radius:calc(var(--u)*3);padding:calc(var(--u)*2.6) calc(var(--u)*4.4);font:800 calc(var(--u)*3.8)/1.2 var(--brand);white-space:nowrap;background:var(--panel2);color:var(--text)}
.gbtn:active{background:var(--chip)}
.ibtn{width:calc(var(--u)*13);height:calc(var(--u)*13);border:2px solid var(--line2);border-radius:calc(var(--u)*3.4);display:grid;place-items:center;padding:0;font-size:calc(var(--u)*6);background:var(--hud)}
.ibtn:active{transform:scale(.94)}

/* ================= 타이틀 (포스터) ================= */
#title{transition:opacity .4s}
#title.out{opacity:0;pointer-events:none}
#title .edition{position:absolute;z-index:3;top:max(calc(var(--u)*5),var(--sa-t));left:max(6%,var(--sa-l));display:flex;align-items:center;gap:calc(var(--u)*3);font:800 calc(var(--u)*2.6)/1 var(--brand);letter-spacing:.12em;color:var(--muted)}
#title .t-main{position:absolute;z-index:3;left:max(6%,var(--sa-l));top:54%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-start;max-width:56%}
.t-k{display:flex;align-items:center;gap:calc(var(--u)*2);font:800 calc(var(--u)*3.6)/1 var(--brand);color:#fff}
#title .t-k>span{width:2px;height:calc(var(--u)*3.6);background:#fff;opacity:.7}
#title .logo{margin:calc(var(--u)*2.6) 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u)*1.8)}
#title .logo img{display:block;height:calc(var(--u)*26);width:auto}
#title .logo .w2{font:900 calc(var(--u)*6.6)/1 var(--brand);letter-spacing:-.04em;color:var(--green)}
.title-copy{margin:calc(var(--u)*2.6) 0 0;font:600 calc(var(--u)*3)/1.6 var(--body);color:var(--muted)}
#title .t-menu{display:flex;align-items:center;gap:calc(var(--u)*3);margin-top:calc(var(--u)*4)}
#title .t-menu .pbtn{display:flex;align-items:center;gap:calc(var(--u)*2.6);min-width:max(190px,calc(var(--u)*50));padding:calc(var(--u)*3) calc(var(--u)*5);font-size:calc(var(--u)*4.8)}
#title .t-menu .pbtn small{margin-left:auto;font:900 calc(var(--u)*2.2)/1 var(--brand);letter-spacing:.16em;opacity:.55}
.start-marker{font-size:calc(var(--u)*3)}
.t-press{margin-top:calc(var(--u)*2.4);font:700 calc(var(--u)*2.7)/1.3 var(--body);color:var(--muted)}
.t-hint{margin-top:calc(var(--u)*1.4);padding:calc(var(--u)*1) 0;border:0;background:none;font:800 calc(var(--u)*3)/1.3 var(--body);color:var(--yellow);text-decoration:underline;text-underline-offset:3px}
/* 홈 화면 추가 안내(처음 한 번, 타이틀 위). 카드는 다른 안내 카드(.arrival-pass)와 같은 모양 */
.a2hs{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:calc(var(--u)*3) max(calc(var(--u)*4),var(--sa-r)) calc(var(--u)*3) max(calc(var(--u)*4),var(--sa-l));background:rgba(0,0,0,.78)}
.a2hs-box{display:flex;flex-direction:column;gap:calc(var(--u)*1.6);width:min(100%,calc(var(--u)*150));max-height:100%;overflow:auto;padding:calc(var(--u)*4) calc(var(--u)*6);
  border:2px solid var(--line);border-radius:calc(var(--u)*6);background:var(--panel);text-align:left}
.a2hs-box small{font:900 calc(var(--u)*2.7)/1.2 var(--brand);letter-spacing:.14em;color:var(--yellow)}
.a2hs-box h2{margin:0;font:900 calc(var(--u)*6.4)/1.15 var(--brand);letter-spacing:-.04em}
.a2hs-why,.a2hs-note{margin:0;font:600 calc(var(--u)*3)/1.4 var(--body);color:var(--muted)}
.a2hs-who{font:900 calc(var(--u)*3.4)/1.2 var(--brand);color:var(--green)}
.a2hs-steps{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:calc(var(--u)*1);font:700 calc(var(--u)*3.4)/1.4 var(--body);color:var(--text)}
.a2hs-steps b{color:var(--yellow)}
.a2hs-btns{display:flex;flex-wrap:wrap;gap:calc(var(--u)*2);margin-top:calc(var(--u)*1)}
.a2hs-btns .pbtn,.a2hs-btns .gbtn{margin:0}
#parade{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.5;image-rendering:pixelated}
#title .s-switch{left:56%;top:4%;width:calc(var(--u)*36);transform:rotate(-9deg)}
#title .s-lock{right:-3%;top:9%;width:calc(var(--u)*40);transform:rotate(11deg)}
#title .s-heart{left:59%;bottom:-6%;width:calc(var(--u)*38);transform:rotate(-12deg)}
#title .s-box{right:4%;bottom:5%;width:calc(var(--u)*40);transform:rotate(7deg)}

/* ================= 종료 ================= */
#bye{display:flex;align-items:center;justify-content:center;text-align:center}
#bye .t-main{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*2.4)}
#bye .t-k{font-size:calc(var(--u)*3);letter-spacing:.2em;color:var(--yellow)}
#bye h2{margin:0;font:900 calc(var(--u)*9)/1.1 var(--brand);letter-spacing:-.04em}
#bye p{margin:0;font:600 calc(var(--u)*4)/1.4 var(--body);color:var(--muted)}
#bye .t-menu{margin-top:calc(var(--u)*3)}
#bye .s-heart{left:-2%;bottom:-8%;transform:rotate(-12deg)}
#bye .s-switch{right:2%;top:4%;transform:rotate(8deg)}

/* ================= 오프닝 (장면 그림은 그대로, 둘레만 포스터) ================= */
#opening{display:flex;flex-direction:column;gap:calc(var(--u)*2.2);padding:calc(var(--u)*3) max(calc(var(--u)*5),var(--sa-r)) calc(var(--u)*2.6) max(calc(var(--u)*5),var(--sa-l))}
.opening-top{display:flex;align-items:center;justify-content:space-between;font:900 calc(var(--u)*2.8)/1 var(--brand);letter-spacing:.14em;color:var(--yellow)}
.opening-top .gbtn{min-width:max(100px,calc(var(--u)*26));padding:calc(var(--u)*2.2) calc(var(--u)*4);font-size:calc(var(--u)*3.4)}
.intro-art{position:relative;flex:1;min-height:0;overflow:hidden;border:2px solid var(--line2);border-radius:calc(var(--u)*4.4);background:#0b0b0d;cursor:pointer}
.intro-scene{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .45s;pointer-events:none;background-repeat:no-repeat;image-rendering:pixelated}
.intro-scene.active{opacity:1}
.y-room{background-image:var(--y-indoors);background-size:200% 200%;background-position:0 0}
.y-entry{background-image:var(--y-indoors);background-size:200% 200%;background-position:100% 0}
.y-city{background-image:var(--y-city);background-size:cover;background-position:center}
.scene-clock{position:absolute;top:calc(var(--u)*4);left:calc(var(--u)*4);padding:calc(var(--u)*2) calc(var(--u)*3.4);border:1px solid var(--line2);border-radius:calc(var(--u)*2.4);background:rgba(0,0,0,.82);
  font:900 calc(var(--u)*6.4)/1 var(--brand);letter-spacing:-.01em;color:var(--yellow);font-variant-numeric:tabular-nums}
.scene-clock small{display:block;margin-top:calc(var(--u)*1.2);font:800 calc(var(--u)*2.2)/1 var(--brand);letter-spacing:.16em;color:var(--muted)}
.y-notify::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.story-phone{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(calc(var(--u)*100),70%);padding:calc(var(--u)*4) calc(var(--u)*5);border:3px solid #fff;border-radius:calc(var(--u)*5);
  background:#0b0b0d;color:var(--text);text-align:left;box-shadow:0 calc(var(--u)*3) calc(var(--u)*8) rgba(0,0,0,.6)}
.story-phone small{font:900 calc(var(--u)*2.4)/1 var(--brand);letter-spacing:.16em;color:var(--green)}
.story-phone b{display:block;margin:calc(var(--u)*1.8) 0;font:900 calc(var(--u)*6)/1.15 var(--brand);letter-spacing:-.04em}
.story-phone p{margin:0 0 calc(var(--u)*2.4);font:600 calc(var(--u)*3.4)/1.6 var(--body);color:var(--muted)}
.story-phone span{display:block;padding:calc(var(--u)*1.8);border-radius:calc(var(--u)*2);background:var(--green);color:#000;font:900 calc(var(--u)*2.6)/1 var(--brand);letter-spacing:.12em;text-align:center}
.intro-dialog{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*5);min-height:calc(var(--u)*19);padding:calc(var(--u)*2.4) calc(var(--u)*3) calc(var(--u)*2.4) calc(var(--u)*4.4);
  border:2px solid var(--line);border-radius:calc(var(--u)*4.4);background:var(--panel)}
.intro-dialog small{font:900 calc(var(--u)*2.6)/1 var(--brand);letter-spacing:.08em;color:var(--yellow)}
.intro-dialog p{margin:calc(var(--u)*1.6) 0 0;min-height:1.45em;font:800 calc(var(--u)*4.2)/1.45 var(--body)}
.intro-dialog .pbtn{flex:none;min-width:max(88px,calc(var(--u)*24))}
.intro-progress{display:flex;justify-content:center;gap:calc(var(--u)*1.6)}
.intro-progress i{width:calc(var(--u)*9);height:calc(var(--u)*1.1);border-radius:999px;background:var(--chip)}
.intro-progress i.on{background:var(--green)}

/* ================= 카드 화면: 로그인, 안내, 도착, 최종장 대기 ================= */
.pass-scr{display:grid;place-items:center;text-align:center;padding:calc(var(--u)*3) max(calc(var(--u)*4),var(--sa-r)) calc(var(--u)*3) max(calc(var(--u)*4),var(--sa-l))}
.arrival-pass{position:relative;z-index:2;width:min(100%,calc(var(--u)*150));max-height:100%;overflow:auto;padding:calc(var(--u)*4.4) calc(var(--u)*7);
  border:2px solid var(--line);border-radius:calc(var(--u)*6.4);background:var(--panel);color:var(--text)}
.arrival-pass small{display:block;font:900 calc(var(--u)*2.7)/1.2 var(--brand);letter-spacing:.14em;color:var(--yellow)}
.arrival-pass h2{margin:calc(var(--u)*1.4) 0 calc(var(--u)*1.6);font:900 calc(var(--u)*7.6)/1.1 var(--brand);letter-spacing:-.04em}
.arrival-pass p{margin:calc(var(--u)*1.2) 0;font:600 calc(var(--u)*3.5)/1.5 var(--body);color:var(--muted)}
.arrival-pass .pbtn,.arrival-pass .gbtn{margin:calc(var(--u)*1.2) calc(var(--u)*.8) 0}
.pass-scr .s-lock{left:-3%;top:-5%;transform:rotate(12deg)}
.pass-scr .s-switch{right:-2%;bottom:-3%;transform:rotate(-10deg)}
.pass-scr .s-box{right:0;bottom:-4%;transform:rotate(8deg)}
.pass-scr .s-heart{left:-2%;bottom:-6%;transform:rotate(-12deg)}
/* 로그인: 세 칸을 한 줄로(가로 화면에서 키보드가 올라와도 짧게) */
.login-pass{display:flex;flex-direction:column;gap:calc(var(--u)*2.2);width:min(100%,calc(var(--u)*170));text-align:left}
.login-pass small,.login-pass h2{text-align:center}
.login-pass h2{margin:0}
.l-row{display:grid;grid-template-columns:.55fr 1.2fr 1.2fr;gap:calc(var(--u)*2.4)}
.login-pass label{display:flex;flex-direction:column;gap:calc(var(--u)*1.2);min-width:0;font:800 calc(var(--u)*3)/1.2 var(--brand);color:var(--muted)}
.login-pass input{width:100%;min-width:0;padding:calc(var(--u)*2.4) calc(var(--u)*3);border:2px solid var(--line2);border-radius:calc(var(--u)*3);background:var(--field);color:var(--text);
  font:700 calc(var(--u)*4)/1.2 var(--body);-webkit-user-select:text;user-select:text}
.login-pass input::placeholder{color:#8a8a96}
.login-pass input:focus,.login-pass input.sdk-on{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(25,210,124,.25)}
/* 화면 안 키보드(web/kbd.js)가 열려 있으면 카드를 위로 붙이고 제목 줄을 접는다. 아래 절반은 키보드다(--sdk-h는 kbd.js가 잰 높이) */
#login.kbd{place-items:start center;padding-bottom:calc(var(--sdk-h,50%) + var(--u)*2)}
#login.kbd .login-pass small,#login.kbd .login-pass h2{display:none}
/* 키보드가 열려 있으면 줄 아래 팀 버튼이 들어설 자리를 위해 빈 안내 줄을 접고 간격을 줄인다 */
#login.kbd .login-pass{gap:calc(var(--u)*1.4)}
#login.kbd .l-err:empty{display:none}
.login-pass .pbtn{align-self:center;min-width:calc(var(--u)*44);margin:0}
.login-pass .l-err{min-height:calc(var(--u)*4);margin:0;font:800 calc(var(--u)*3.3)/1.2 var(--body);color:var(--red);text-align:center}
/* 명단이 있으면 팀 번호 칸 대신 팀 이름 검색 칸과 [▾](팀 목록), 줄 아래에 맞는 팀 버튼(정해진 팀은 초록). 팀 칸을 넓히고 실명 칸을 줄인다(실명은 짧고 코드 칸은 안내 글이 길다) */
.l-row.find{grid-template-columns:1.2fr .8fr 1fr}
.l-pick{display:flex;flex-direction:column;gap:calc(var(--u)*1.2);min-width:0;font:800 calc(var(--u)*3)/1.2 var(--brand);color:var(--muted)}
.l-find{display:flex;gap:calc(var(--u)*1.2);min-width:0}
.login-pass .l-find input{flex:1;width:auto}
.l-list{flex:none;width:calc(var(--u)*11);border:2px solid var(--line2);border-radius:calc(var(--u)*3);background:var(--panel2);color:var(--text);font:800 calc(var(--u)*3.6)/1 var(--body)}
.l-hits{display:flex;align-items:center;gap:calc(var(--u)*1.4);min-height:calc(var(--u)*9);margin-top:calc(var(--u)*-.8);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.l-hit{flex:none;display:flex;align-items:center;gap:calc(var(--u)*1.2);min-height:max(36px,calc(var(--u)*9));padding:calc(var(--u)*.8) calc(var(--u)*2.2) calc(var(--u)*.8) calc(var(--u)*.8);
  border:2px solid var(--line2);border-radius:calc(var(--u)*2.4);background:var(--field);color:var(--text);font:800 calc(var(--u)*3.2)/1.2 var(--body);white-space:nowrap}
.l-hit .tc-sym{width:calc(var(--u)*6.4);font-size:calc(var(--u)*1.7);box-shadow:none;border-radius:calc(var(--u)*1.4)}
.l-hit.on{border-color:var(--green);background:var(--ok-bg);color:var(--green)}
.l-hits-note{flex:none;font:800 calc(var(--u)*3)/1.2 var(--body);color:var(--muted)}
.mini-sym{flex:none;display:inline-block;width:calc(var(--u)*7);height:calc(var(--u)*7);font-size:calc(var(--u)*1.9)}
.mini-sym .tc-sym,.list .av .tc-sym{width:100%;height:100%;border-radius:calc(var(--u)*1.4);box-shadow:none}
.l-teams{position:fixed;inset:0;z-index:30;display:grid;grid-template-rows:minmax(0,100%);place-items:center;padding:calc(var(--u)*3) max(calc(var(--u)*4),var(--sa-r)) calc(var(--u)*3) max(calc(var(--u)*4),var(--sa-l));background:rgba(0,0,0,.72)}
.l-teams-box{display:flex;flex-direction:column;width:min(100%,calc(var(--u)*190));max-height:100%;padding:calc(var(--u)*3) calc(var(--u)*4);border:2px solid var(--line);border-radius:calc(var(--u)*5);background:#141417}
.l-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*40),1fr));gap:calc(var(--u)*1.6);overflow:auto;-webkit-overflow-scrolling:touch}
.l-tile{display:flex;align-items:center;gap:calc(var(--u)*2);min-width:0;min-height:max(44px,calc(var(--u)*13));padding:calc(var(--u)*1.2) calc(var(--u)*2);
  border:1px solid var(--line2);border-radius:calc(var(--u)*3);background:var(--panel2);color:var(--text);text-align:left;font-size:calc(var(--u)*2.4)}
.l-tile .tc-sym{width:calc(var(--u)*10);box-shadow:none;border-radius:calc(var(--u)*2)}
.l-tile b{min-width:0;font:800 calc(var(--u)*3.6)/1.2 var(--body);overflow-wrap:anywhere}
.l-tile.on{border:2px solid var(--green);background:var(--ok-bg)}
/* 우리 팀 카드(web/team-card.js, 넓은 모양): 로그인 뒤 처음 한 번과 메뉴 「우리 팀」 */
.team-pass{width:min(100%,calc(var(--u)*176));display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*1.6);padding:calc(var(--u)*3.4) calc(var(--u)*5)}
.team-pass h2{margin:0}
.team-pass small{color:var(--green)}
.tv-card{align-self:stretch;--tc-size:calc(var(--u)*3.6);text-align:left}
.tv-card .tc-wide .tc-sym{width:min(34%,calc(var(--u)*46))}
.tv-card .tc-chip{font-size:.85em}
.team-pass .pbtn{margin:0}
.m-team{display:flex;align-items:center;gap:calc(var(--u)*2);margin:0 0 calc(var(--u)*2.4);font:900 calc(var(--u)*4.4)/1.2 var(--brand)}
.m-team .mini-sym{width:calc(var(--u)*9);height:calc(var(--u)*9)}
.m-team b{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-line .mini-sym{width:calc(var(--u)*5.4);height:calc(var(--u)*5.4);margin-right:calc(var(--u)*1.4);vertical-align:middle;font-size:calc(var(--u)*1.4)}
#kicked small{color:var(--red)}
#kicked .arrival-pass p{margin:calc(var(--u)*1) 0 calc(var(--u)*2.4)}
.final-pass small{color:var(--sky)}
.f-team{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--u)*3);margin:calc(var(--u)*2.4) 0}
.f-team figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*1.2)}
.f-team img{width:calc(var(--u)*11);height:calc(var(--u)*11);border:2px solid var(--line2);border-radius:50%;background:var(--chip);image-rendering:pixelated}
.f-team figcaption{font:800 calc(var(--u)*3)/1.2 var(--brand)}
/* 스테이지 대기: 최종장 대기와 같은 카드에 소리·메뉴, 팀 접속 현황, 버튼 줄 */
#stage .s-switch{left:-2%;top:-4%;right:auto;bottom:auto;transform:rotate(-10deg)}
.stage-pass{width:min(100%,calc(var(--u)*140))}
.stage-pass small{color:var(--green)}
.stage-pass h2{margin-bottom:calc(var(--u)*.6)}
.st-icons{position:absolute;top:calc(var(--u)*2.4);right:calc(var(--u)*2.4);display:flex;gap:calc(var(--u)*1.4)}
.st-icons .ibtn{width:max(40px,calc(var(--u)*10));height:max(40px,calc(var(--u)*10));font-size:calc(var(--u)*4.6)}
.stage-pass .f-team{margin:calc(var(--u)*1.6) 0}
.f-team figure.off{opacity:.38}   /* 미접속: 흐리게(접속 수는 아래 줄) */
.arrival-pass .st-line{margin:0;font:800 calc(var(--u)*3)/1.4 var(--body);color:var(--yellow)}
.arrival-pass .st-line.off{color:var(--red)}
/* 확정 줄과 마지막 공지(대기 화면은 문구 아래, 지도는 위 HUD 아래 가운데: 정류장 이름과 카드를 가리지 않게) */
.notes{display:flex;flex-direction:column;gap:calc(var(--u)*.6);margin:calc(var(--u)*1.2) 0 0;font:800 calc(var(--u)*3)/1.35 var(--body);color:var(--yellow)}
.notes span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-notes{position:absolute;z-index:5;left:50%;top:calc(max(calc(var(--u)*3),var(--sa-t)) + var(--u)*17);transform:translateX(-50%);width:max-content;max-width:min(calc(var(--u)*150),calc(var(--W)*.66));margin:0;
  padding:calc(var(--u)*1.4) calc(var(--u)*3);border:2px solid var(--line2);border-radius:calc(var(--u)*3);background:var(--hud);box-sizing:border-box}
.st-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--u)*2);margin-top:calc(var(--u)*2.4)}
.arrival-pass .st-btns .pbtn,.arrival-pass .st-btns .gbtn{margin:0}
#arrival small{color:var(--green)}
#arrival h2{font-size:calc(var(--u)*6.8)}
#arrivalAvatar img{display:block;height:calc(var(--u)*19);width:auto;margin:0 auto;image-rendering:pixelated}
.arrival-stamp{display:inline-block;margin:calc(var(--u)*1) 0;padding:calc(var(--u)*1) calc(var(--u)*4);border:4px double var(--green);border-radius:calc(var(--u)*2);color:var(--green);font:900 calc(var(--u)*4.2)/1.2 var(--brand);transform:rotate(-6deg)}

/* ================= 캐릭터 선택 ================= */
#select{display:grid;grid-template-columns:38% 1fr;gap:calc(var(--u)*3.4);padding:calc(var(--u)*3.4) max(calc(var(--u)*4),var(--sa-r)) calc(var(--u)*3.4) max(calc(var(--u)*4),var(--sa-l));transition:opacity .35s}
.s-stage{position:relative;overflow:hidden;border:3px solid var(--purple);border-radius:calc(var(--u)*5);
  background:radial-gradient(60% 45% at 50% 80%,rgba(154,99,255,.4),transparent 72%),linear-gradient(180deg,#17171b,#0b0b0d)}
.s-spot{position:absolute;left:50%;bottom:12%;width:64%;height:8%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(154,99,255,.6),transparent)}
.s-fig{position:absolute;left:0;right:0;bottom:14%;height:60%;display:flex;align-items:flex-end;justify-content:center;filter:drop-shadow(0 4px 0 rgba(0,0,0,.55))}
.s-fig img{height:100%;image-rendering:pixelated;transform-origin:50% 100%;animation:breath 2.4s ease-in-out infinite}
.s-fig.in img{animation:sIn .3s cubic-bezier(.2,1.4,.4,1),breath 2.4s ease-in-out .3s infinite}
.s-fig.ok img{animation:sOk .32s ease-in-out 2}
.s-p1{position:absolute;left:calc(var(--u)*4);top:calc(var(--u)*3.6);z-index:2;font:900 calc(var(--u)*2.7)/1 var(--brand);letter-spacing:.16em;color:var(--yellow)}
.s-no{position:absolute;right:calc(var(--u)*4);top:calc(var(--u)*3.4);z-index:2;font:900 calc(var(--u)*3.2)/1 var(--brand);color:#fff;font-variant-numeric:tabular-nums}
.pass-footer{position:absolute;left:0;right:0;bottom:calc(var(--u)*3.4);display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*1.8);font:800 calc(var(--u)*2.6)/1 var(--brand);color:var(--muted)}
.pass-footer img{display:block;height:calc(var(--u)*3.4);width:auto}
.s-ready{position:absolute;inset:0;z-index:3;display:grid;place-items:center;font:900 calc(var(--u)*13) var(--brand);letter-spacing:-.03em;color:var(--yellow);
  text-shadow:0 calc(var(--u)*.8) 0 #000,0 0 calc(var(--u)*4) rgba(0,0,0,.8);opacity:0;pointer-events:none}
.s-ready.show{animation:ready .7s ease-out forwards}
.s-right{display:flex;flex-direction:column;gap:calc(var(--u)*2.4);min-width:0;min-height:0}
.s-head{display:flex;align-items:baseline;justify-content:space-between;gap:calc(var(--u)*3)}
.s-head h2{margin:0;white-space:nowrap;font:900 calc(var(--u)*5.6)/1.1 var(--brand);letter-spacing:-.04em;color:#fff}
.s-head span{font:700 calc(var(--u)*3.2)/1 var(--body);color:var(--muted);white-space:nowrap}
.s-head span b{color:var(--yellow)}
.s-grid{flex:1;min-height:0;display:grid;grid-auto-rows:max-content;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*13.5),1fr));gap:calc(var(--u)*1.6);align-content:start;overflow:auto;
  padding:calc(var(--u)*2);border-radius:calc(var(--u)*4);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);-webkit-overflow-scrolling:touch}
.tile{position:relative;display:block;border:0;padding:0;border-radius:calc(var(--u)*2.4);overflow:hidden;background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line2)}
.tile::before{content:"";display:block;padding-top:100%}   /* 칸이 많아도 항상 정사각형 */
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.tile[aria-selected="true"]{background:var(--ok-bg);box-shadow:inset 0 0 0 3px var(--green);z-index:1}
.tile[aria-selected="true"]::after{content:"1P";position:absolute;left:3px;top:3px;padding:0 calc(var(--u)*1);border-radius:calc(var(--u)*1.2);background:var(--green);color:#000;font:900 calc(var(--u)*2.6)/1.4 var(--brand)}
.tile.taken img{opacity:.22;filter:grayscale(1)}   /* 다른 사람이 고른 캐릭터(명단이 있든 없든) */
.tile.taken::after{content:"골랐음";position:absolute;left:0;right:0;bottom:3px;text-align:center;font:900 calc(var(--u)*2.2)/1.2 var(--brand);color:var(--muted)}
.tile.rand::after{content:"?";position:absolute;inset:0;display:grid;place-items:center;font:900 calc(var(--u)*8) var(--brand);color:var(--yellow)}
.s-ctrl{display:flex;gap:calc(var(--u)*2);align-items:center}
.s-who{flex:1;min-width:0;font:900 calc(var(--u)*4)/1.2 var(--brand);letter-spacing:-.02em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-ctrl .gbtn{min-width:calc(var(--u)*16);padding-left:calc(var(--u)*3.4);padding-right:calc(var(--u)*3.4)}
@keyframes breath{50%{transform:scaleY(1.02)}} @keyframes sIn{0%{transform:translateX(-25%) scale(.92);opacity:0}100%{transform:none;opacity:1}}
@keyframes sOk{50%{transform:translateY(-8%) scale(1.04)}} @keyframes ready{0%{opacity:0;transform:scale(1.6)}35%,100%{opacity:1;transform:scale(1)}}

/* ================= 월드맵: 그림은 그대로, 위에 놓인 것만 ================= */
/* 지도 위 길·노드·글자의 색과 글꼴은 여기서만 정한다. 노드 상태는 app.js renderMap이 켜는 .lock .done .cur .sel */
#world{background:#000}
#map{position:absolute;inset:0;width:100%;height:100%;display:block}
#map>text{fill:#fff;font-family:var(--brand);font-weight:900;letter-spacing:-.02em;paint-order:stroke;stroke:#000;stroke-width:4px;stroke-linejoin:round}
#map>path:first-of-type{stroke:#000}
#map>path:nth-of-type(2){stroke:#fff;opacity:.55}
#prog{stroke:var(--green)}
.node{cursor:pointer}
.node .ring{fill:#0b0b0d;stroke:var(--green);stroke-width:4px}
.node.lock .ring{fill:#1d1d23;stroke:#6b6b78}
.node.done .ring{stroke:var(--sky)}
.node.sel .ring{stroke:var(--yellow);stroke-width:5px}
.node .num{fill:#fff;font-family:var(--brand);font-weight:900}
.node.lock .num{fill:#8a8a96}
.node:last-of-type .num{fill:var(--yellow)}
.node .pulse{stroke:var(--green)}
.node.cur .pulse{animation:pulse 1.4s ease-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes pulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
.node .lbg{fill:rgba(11,11,13,.9);stroke:var(--line2);stroke-width:2px}
.node.sel .lbg{fill:#000;stroke:var(--yellow)}
.node .lbl{fill:#fff;font-family:var(--brand);font-weight:800}
#me{position:absolute;z-index:3;pointer-events:none;transform:translate(-50%,-100%);filter:drop-shadow(0 4px 0 rgba(0,0,0,.3))}
#me img{display:block;height:calc(var(--u)*17);image-rendering:pixelated}
#me .tag{position:absolute;left:50%;top:calc(var(--u)*-6.4);transform:translateX(-50%);white-space:nowrap;padding:calc(var(--u)*.7) calc(var(--u)*2.6);border:2px solid var(--green);border-radius:999px;
  background:#000;color:#fff;font:900 calc(var(--u)*3.2)/1.2 var(--brand)}

/* HUD (지도 위, 꽉 찬 검정) */
.hud-l{position:absolute;z-index:5;top:max(calc(var(--u)*3),var(--sa-t));left:max(calc(var(--u)*3),var(--sa-l));display:flex;gap:calc(var(--u)*2)}
.chip{display:flex;align-items:center;gap:calc(var(--u)*2.4);min-width:calc(var(--u)*45);max-width:calc(var(--u)*82);padding:calc(var(--u)*1.2) calc(var(--u)*4) calc(var(--u)*1.2) calc(var(--u)*1.2);border:2px solid var(--line2);border-radius:999px;text-align:left;background:var(--hud)}
.chip>span:last-child{min-width:0}
.chip .pf{width:calc(var(--u)*11);height:calc(var(--u)*11);border:2px solid var(--green);border-radius:50%;overflow:hidden;background:var(--chip);flex:none}
.chip .pf img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.chip b{display:block;font:900 calc(var(--u)*4.4)/1.15 var(--brand);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip small{display:block;font:800 calc(var(--u)*3)/1.25 var(--body);color:var(--yellow);white-space:nowrap}
.pill{align-self:center;padding:calc(var(--u)*1.8) calc(var(--u)*3.4);border:2px solid var(--line2);border-radius:999px;background:var(--hud);font:900 calc(var(--u)*3)/1 var(--brand);letter-spacing:.06em;color:var(--yellow);white-space:nowrap}
.pill.off{border-color:var(--red);color:var(--red);letter-spacing:0}
.hud-r{position:absolute;z-index:5;top:max(calc(var(--u)*3),var(--sa-t));right:max(calc(var(--u)*3),var(--sa-r));display:flex;gap:calc(var(--u)*2)}
.card{position:absolute;z-index:5;left:50%;bottom:max(calc(var(--u)*3),var(--sa-b));transform:translateX(-50%);width:min(calc(var(--u)*150),calc(var(--W)*.92));
  display:flex;align-items:center;gap:calc(var(--u)*3.4);padding:calc(var(--u)*2.4) calc(var(--u)*2.4) calc(var(--u)*2.4) calc(var(--u)*2.4);border:2px solid var(--line2);border-radius:calc(var(--u)*5);background:var(--panel)}
.card .no{flex:none;display:grid;place-items:center;width:calc(var(--u)*13);height:calc(var(--u)*13);border-radius:calc(var(--u)*3);background:var(--orange);color:#000;box-shadow:inset 0 0 0 2px #000;text-align:center;font:900 calc(var(--u)*6)/1 var(--brand)}
.card .no small{display:block;margin-bottom:calc(var(--u)*.6);font-size:calc(var(--u)*2.1);letter-spacing:.1em}
.card .tx{flex:1;min-width:0}
.card .tx b{display:block;font:900 calc(var(--u)*5.4)/1.2 var(--brand);letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .tx small{display:flex;gap:calc(var(--u)*2);align-items:center;margin-top:calc(var(--u)*.6);font:700 calc(var(--u)*3.2)/1.2 var(--body);color:var(--muted);white-space:nowrap}
.card .tx small>span:first-child{overflow:hidden;text-overflow:ellipsis}
.st{flex:none;padding:calc(var(--u)*.5) calc(var(--u)*2);border-radius:999px;font:900 calc(var(--u)*2.8)/1.2 var(--brand)}
.st.cur{background:var(--green);color:#000} .st.done{background:var(--sky);color:#000} .st.lock{background:var(--chip);color:var(--muted)}
.card .pbtn{flex:none;min-width:calc(var(--u)*52)}

/* 옆에서 열리는 창 (순위·메뉴·대기실·대진표) */
.dim{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .2s}
.dim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;z-index:21;top:0;bottom:0;right:0;width:min(calc(var(--u)*120),calc(var(--W)*.62));display:flex;flex-direction:column;
  padding:max(calc(var(--u)*3.4),var(--sa-t)) max(calc(var(--u)*4),var(--sa-r)) calc(var(--u)*3) calc(var(--u)*4);
  background:#141417;border-left:2px solid var(--line);border-radius:calc(var(--u)*6) 0 0 calc(var(--u)*6);box-shadow:-8px 0 30px rgba(0,0,0,.5);transform:translateX(105%);transition:transform .25s cubic-bezier(.2,.9,.3,1)}
.sheet.on{transform:none}
.sh-h{display:flex;align-items:center;gap:calc(var(--u)*3);margin-bottom:calc(var(--u)*2.4)}
.sh-h h3{flex:1;min-width:0;margin:0;font:900 calc(var(--u)*5.6)/1.15 var(--brand);letter-spacing:-.03em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x{flex:none;width:calc(var(--u)*11);height:calc(var(--u)*11);border:1px solid var(--line2);border-radius:50%;padding:0;background:var(--panel2);font-size:calc(var(--u)*4.6)}
.seg{display:flex;gap:4px;padding:4px;margin-bottom:calc(var(--u)*2.4);border-radius:999px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.seg button{flex:1;min-height:calc(var(--u)*9);border:0;border-radius:999px;padding:calc(var(--u)*1.8);font:800 calc(var(--u)*3.8)/1.2 var(--brand);background:transparent;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--green);color:#000}
.list{flex:1;min-height:0;overflow:auto;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:calc(var(--u)*1.4);-webkit-overflow-scrolling:touch}
.list li{display:grid;grid-template-columns:calc(var(--u)*8) calc(var(--u)*10) 1fr auto;align-items:center;gap:calc(var(--u)*2.4);padding:calc(var(--u)*1.4) calc(var(--u)*3) calc(var(--u)*1.4) calc(var(--u)*1.8);
  border:1px solid var(--line);border-radius:calc(var(--u)*3);background:var(--panel2);font:800 calc(var(--u)*3.8)/1.2 var(--body)}
.list li.me{border:2px solid var(--green);background:var(--ok-bg)}
.list .rn{justify-self:center;display:grid;place-items:center;min-width:calc(var(--u)*7);height:calc(var(--u)*7);padding:0 calc(var(--u)*1);border-radius:999px;background:var(--chip);font:900 calc(var(--u)*3.4)/1 var(--brand);font-variant-numeric:tabular-nums}
#rankList li:nth-child(1) .rn{background:var(--yellow);color:#000} #rankList li:nth-child(2) .rn{background:#d9dce3;color:#000} #rankList li:nth-child(3) .rn{background:var(--orange);color:#000}
.list .av{width:calc(var(--u)*10);height:calc(var(--u)*10);border-radius:50%;overflow:hidden;background:var(--chip);display:grid;place-items:center;font:900 calc(var(--u)*3.6)/1 var(--brand);color:#fff}
.list .av img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.list .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list .pt{font:900 calc(var(--u)*4.6)/1 var(--brand);color:var(--yellow);font-variant-numeric:tabular-nums}
.list .gap,.list .empty{display:block;padding:calc(var(--u)*1.4);border:0;background:none;text-align:center;color:var(--muted)}
.foot{margin-top:calc(var(--u)*2);font:600 calc(var(--u)*2.9)/1.3 var(--body);color:var(--muted);text-align:right}
.foot.off{color:var(--red)}
.menu{display:flex;flex-direction:column;gap:calc(var(--u)*2)}
.menu button{min-height:max(48px,calc(var(--u)*14.6));display:flex;align-items:center;gap:calc(var(--u)*3);padding:calc(var(--u)*2.8) calc(var(--u)*4);border:1px solid var(--line);border-radius:calc(var(--u)*3.4);background:var(--panel2);font:800 calc(var(--u)*4.2)/1.2 var(--brand);text-align:left}
.menu button:active{background:var(--chip)}
.menu button i{font-style:normal;font-size:calc(var(--u)*5.6)}
/* 메뉴 창은 명단이 있으면 팀 머리와 「우리 팀」이 더해져 낮은 화면에서 넘친다: 창 전체가 스크롤 */
#shMenu{overflow-y:auto;-webkit-overflow-scrolling:touch} #shMenu>*{flex:none}
.tscode{margin:calc(var(--u)*3) 0 0;font:700 calc(var(--u)*3.6)/1.35 var(--brand);color:var(--muted);overflow-wrap:anywhere}
.w-text{margin:0 0 calc(var(--u)*2);font:600 calc(var(--u)*3.4)/1.5 var(--body);color:var(--muted)}
.w-btns{display:flex;gap:calc(var(--u)*2);justify-content:flex-end;margin-top:calc(var(--u)*2)}
.w-btns .gbtn{min-width:calc(var(--u)*32)}
/* grid: 라운드 열이 모두 가장 긴 열 높이가 되어(짧으면 창 높이로 늘어남) sticky 라운드 제목이 끝까지 내려와도 남는다 */
.bracket{flex:1;min-height:0;display:grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:calc(var(--u)*2);overflow:auto;padding-bottom:calc(var(--u)*1)}
.b-round{display:flex;flex-direction:column;gap:calc(var(--u)*1.4);min-width:calc(var(--u)*30)}
.b-round>b{position:sticky;top:0;z-index:1;padding-bottom:calc(var(--u)*.8);background:#141417;font:900 calc(var(--u)*3)/1.2 var(--brand);letter-spacing:.04em;color:var(--yellow)}
.b-match{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:calc(var(--u)*1);padding:calc(var(--u)*1.6) calc(var(--u)*2);border:1px solid var(--line);border-radius:calc(var(--u)*2.4);
  background:var(--panel2);color:#fff;font:800 calc(var(--u)*3.3)/1.2 var(--brand);text-align:center}
.b-match small{grid-column:1/-1;font:700 calc(var(--u)*2.6)/1.2 var(--body);color:var(--muted)}
.b-match .win{color:var(--green);font-weight:900}
.b-match.live{border:2px solid var(--green)}
.b-match.live small{color:var(--green)}
.b-match.mine{border-color:var(--sky);background:#0d2a3d}
.b-match:disabled{opacity:.85;cursor:default}
/* 동시 판(renderRuns): 열 대신 팀 판 격자 */
.bracket.runs{display:block}
.bracket.runs>b{display:block;position:sticky;top:0;z-index:1;padding-bottom:calc(var(--u)*.8);background:#141417;font:900 calc(var(--u)*3)/1.2 var(--brand);letter-spacing:.04em;color:var(--yellow)}
.b-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*24),1fr));gap:calc(var(--u)*1.4)}
.b-match.run{grid-template-columns:1fr}

/* 알림 */
#toast{position:fixed;z-index:70;left:50%;top:max(calc(var(--u)*3.4),var(--sa-t));transform:translate(-50%,-160%);width:max-content;max-width:min(calc(var(--W)*.80),calc(var(--u)*170));padding:calc(var(--u)*2.4) calc(var(--u)*5);
  border:1px solid var(--green);border-radius:calc(var(--u)*3);background:var(--ok-bg);color:#c8f6de;font:800 calc(var(--u)*3.6)/1.35 var(--body);text-align:center;
  box-shadow:0 10px 24px rgba(0,0,0,.5);transition:transform .25s,opacity .25s;opacity:0;pointer-events:none}
#toast.on{transform:translate(-50%,0);opacity:1}

/* ================= 게임 화면 ================= */
#game{z-index:40;background:#000}
@supports (width:1cqw){ #game{container-type:size} }
#game iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
/* 돌려 그린 셸(html.rot)에서는 게임 frame을 왼쪽(휴대폰 위, 노치·상태 막대)과 오른쪽(홈 바) safe area 안에 둔다. 게임 안의 env()는
   돌기 전 휴대폰의 네 변을 말하므로 그 값으로는 맞게 비울 수 없다(docs/spec.md D11) */
html.rot #game iframe{left:var(--sa-l);width:calc(100% - var(--sa-l) - var(--sa-r))}
/* ◀는 게임 카드 모서리 안쪽에 놓고(이구동성 카드 모서리에 걸치지 않게) 누르는 자리는 둘레까지 넓힌다 */
#gBack{position:absolute;z-index:2;top:max(calc(var(--u)*4),var(--sa-t));left:max(calc(var(--u)*4),var(--sa-l));width:calc(var(--u)*9.4);height:calc(var(--u)*9.4);
  padding:0;border:2px solid #fff;border-radius:50%;background:rgba(0,0,0,.78);color:#fff;font-size:calc(var(--u)*3.6);line-height:1;box-shadow:0 2px 0 rgba(0,0,0,.35)}
#gBack::before{content:"";position:absolute;inset:calc(var(--u)*-1.2 - 2px);border-radius:50%}   /* 테두리 밖까지 */
/* 대전 게임 실전·관전에서 1.5초 넘게 끊기면(app.js renderNetBand) 위 가운데 띠. 누름은 게임으로 지나감 */
#gNet{position:absolute;z-index:3;top:max(calc(var(--u)*4),var(--sa-t));left:50%;transform:translateX(-50%);max-width:calc(var(--W)*.70);pointer-events:none;
  padding:calc(var(--u)*1.6) calc(var(--u)*4);border:2px solid var(--red);border-radius:calc(var(--u)*3);background:rgba(20,8,8,.92);color:#ffd9d9;
  font:800 calc(var(--u)*3.6)/1.3 var(--body);text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.5)}
/* 눈싸움은 팀 체력 줄(snow.html의 .hud, 화면 크기와 상관없이 위에서 약 38px까지)이 왼쪽 위에 있어 그 아래로 */
#game[data-game="snow"] #gBack{top:max(calc(var(--u)*4 + 30px),var(--sa-t))}
/* 대난투 HUD는 노치 없는 폰의 ◀ 자리만 비워 둔다. 노치 폰에서는 ◀가 inset만큼 밀려 「생존」 칸을 가리므로 HUD 아래로 */
#game[data-game="brawl"] #gBack{top:max(calc(var(--u)*4 + 30px),var(--sa-t))}
/* 이구동성은 960×440 판을 frame에 맞춰 줄이므로(igu.html fitStage) ◀도 그 판의 문제 번호 앞 빈 칸(.qhead 왼쪽 46px)에 맞춘다.
   게임은 safe area를 모르므로 frame을 safe area 안으로 줄이고, 크기는 frame과 같은 기준(#game 컨테이너, 없으면 vw·vh)으로 잰다 */
#game[data-game="igu"] iframe{left:var(--sa-l);width:calc(100% - var(--sa-l) - var(--sa-r))}
#game[data-game="igu"] #gBack{--gw:calc(var(--W) - var(--sa-l) - var(--sa-r));--gh:var(--H);--fs:min(var(--gw)/960,var(--gh)/440);
  left:max(calc(var(--sa-l) + (var(--gw) - var(--fs)*960)/2 + var(--fs)*28),var(--sa-l));top:max(calc((var(--gh) - var(--fs)*440)/2 + var(--fs)*18),var(--sa-t));
  width:calc(var(--fs)*38);height:calc(var(--fs)*38);font-size:calc(var(--fs)*15)}
@supports (width:1cqw){ #game[data-game="igu"] #gBack{--gw:calc(100cqw - var(--sa-l) - var(--sa-r));--gh:100cqh} }
#game[data-game="igu"] #gBack::before{inset:min(-8px,calc((var(--fs)*38 - var(--u)*11 - 6px)/2))}   /* 판이 작아져도 누르는 자리는 11u 이상 */
.confirm{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(0,0,0,.66)}
.confirm>div{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*4);max-width:calc(var(--W)*.90);padding:calc(var(--u)*6) calc(var(--u)*8);border:2px solid var(--line);border-radius:calc(var(--u)*6);background:var(--panel);text-align:center}
.confirm b{font:900 calc(var(--u)*5.4)/1.25 var(--brand);letter-spacing:-.03em}
.confirm .r{display:flex;gap:calc(var(--u)*3)}
#halt{background:#0b0b0d}   /* 불투명: 게임 안 멈춤 카드가 비쳐 두 안내가 겹치지 않게 */
#halt>div{border-color:var(--red)}
#halt b{color:var(--red)}
#halt p{margin:0;font:600 calc(var(--u)*3.6)/1.4 var(--body);color:var(--muted)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}