:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* Layout: 로비(왼쪽: 제목·레벨·규칙·이어하기·전적 / 오른쪽: 난이도 탭·상대 카드) → 게임(상대 칸 · 나무 바둑판 · 남은 시간·내 정보) */
:root{
  --bg:#EEF4FF; --surface:#FFFFFF; --surface-2:#F4F8FF; --ink:#17213A; --muted:#56627F; --line:rgba(23,33,58,.13);
  --board:#F3C66E; --board-2:#E3A646; --board-ink:#6A4116; --board-shadow:rgba(106,65,22,.35);
  --stone-b1:#4A4F5C; --stone-b2:#07080C; --stone-w1:#FFFFFF; --stone-w2:#D5DAE4;
  --accent:#FF7A1A; --accent-ink:#2B1300; --pop:#FF3E8A; --me:#2F7BFF; --ok:#14A36A; --bad:#E5483B; --warn:#F2A20C;
  --tier0:#1FA36A; --tier1:#E39A0C; --tier2:#E0453A;
  --f-display:"Jua","Gothic A1",system-ui,sans-serif;
  --f-body:"Gothic A1",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-num:"Archivo Black","Arial Black",system-ui,sans-serif;
  --bs:360px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0F1528; --surface:#19223B; --surface-2:#141C31; --ink:#E8EDF8; --muted:#A1ACC6; --line:rgba(232,237,248,.14);
  --board:#D7A658; --board-2:#B98236; --board-ink:#4A2B0B; --board-shadow:rgba(0,0,0,.5);
  --accent:#FF8A33; --me:#5C98FF; --pop:#FF5C9C; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0F1528; --surface:#19223B; --surface-2:#141C31; --ink:#E8EDF8; --muted:#A1ACC6; --line:rgba(232,237,248,.14);
  --board:#D7A658; --board-2:#B98236; --board-ink:#4A2B0B; --board-shadow:rgba(0,0,0,.5);
  --accent:#FF8A33; --me:#5C98FF; --pop:#FF5C9C; color-scheme:dark}
html,body{background:var(--bg);color:var(--ink)}
body{font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-tap-highlight-color:transparent}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--f-display);font-weight:400;text-wrap:balance;margin:0}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1440px;margin:0 auto;box-sizing:border-box;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:14px 8px}

/* ---------- 공통 버튼 ---------- */
.btn{border:2px solid var(--line);background:var(--surface);border-radius:14px;padding:9px 16px;font-weight:800;box-shadow:0 3px 0 var(--line);transition:transform .1s}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 60%,#000)}
.btn.ghost{background:transparent;box-shadow:none;border-color:transparent;padding-inline:8px}
.btn.small{padding:6px 12px;font-size:13px;border-radius:11px}
.btn.off{visibility:hidden}
.sndbtn,.instbtn{height:42px;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:13px;border:2px solid var(--line);background:var(--surface);box-shadow:0 3px 0 var(--line)}
.sndbtn{width:42px}
.sndbtn svg,.instbtn svg{width:22px;height:22px}
.instbtn{padding:0 12px;font-weight:800;font-size:14px}
.instbtn.ready{background:var(--me);border-color:var(--me);color:#fff;animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,80%,100%{transform:none}86%{transform:rotate(-4deg)}92%{transform:rotate(4deg)}}
.gi{width:1.15em;height:1.15em;vertical-align:-.2em;display:inline-block}

/* ---------- 바둑돌 ---------- */
.st{display:block;border-radius:50%;width:88%;height:88%;margin:6%;pointer-events:none;position:relative}
.st.b{background:radial-gradient(circle at 34% 30%,var(--stone-b1),var(--stone-b2) 62%);box-shadow:0 2px 3px rgba(0,0,0,.45)}
.st.w{background:radial-gradient(circle at 34% 30%,var(--stone-w1) 30%,var(--stone-w2) 90%);box-shadow:0 2px 3px rgba(0,0,0,.35),inset 0 -1px 2px rgba(0,0,0,.12)}
.mini{display:inline-block;width:1em;height:1em;border-radius:50%;vertical-align:-.12em;flex:none}
.mini.b{background:radial-gradient(circle at 34% 30%,var(--stone-b1),var(--stone-b2) 62%)}
.mini.w{background:radial-gradient(circle at 34% 30%,#fff 30%,#cfd5e0 90%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}

/* ---------- 로비 ---------- */
.hero{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px}
.logo{font-size:clamp(34px,8vw,48px);line-height:1;display:flex;align-items:center;gap:4px}
.logo .lt{display:inline-grid;place-items:center;width:1.2em;height:1.2em;border-radius:50%;font-size:.78em;animation:drop .6s cubic-bezier(.3,1.5,.5,1) both}
.logo .lt.b{background:radial-gradient(circle at 34% 30%,var(--stone-b1),var(--stone-b2) 62%);color:#fff}
.logo .lt.w{background:radial-gradient(circle at 34% 30%,#fff 30%,#d6dbe5 90%);color:#17213A;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.logo .lt:nth-child(2){animation-delay:.12s}
.logo .vs{margin-left:8px;color:var(--accent);animation:drop .6s .26s cubic-bezier(.3,1.5,.5,1) both}
@keyframes drop{0%{transform:translateY(-26px) scale(.6);opacity:0}100%{transform:none;opacity:1}}
.tag{color:var(--muted);margin:8px 0 0;font-size:14px}
.hero-r{display:flex;gap:8px;align-items:center;flex:none}
.bk .sm{display:none}
.saved{font-size:12px;color:var(--muted)}
.lvcard{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:12px 14px;border-radius:18px;background:var(--surface);border:2px solid var(--line)}
.lv-badge{width:56px;height:62px;border-radius:16px;background:linear-gradient(160deg,var(--accent),var(--pop));color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--f-num);font-size:26px;line-height:1}
.lv-badge small{font-family:var(--f-display);font-size:13px;opacity:.9}
.lv-top{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:14px}
.lv-top span{color:var(--muted);font-size:13px}
.lv-bar{height:12px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden;margin:6px 0 4px}
.lv-bar i{display:block;height:100%;width:100%;transform-origin:left;background:linear-gradient(90deg,var(--accent),var(--pop));border-radius:99px;transition:transform .6s}
.lv-sub{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.rules{padding:10px 14px;border-radius:16px;background:var(--surface-2);border:1px dashed var(--line);font-size:13px}
.rules h3{font-size:16px;margin-bottom:4px;display:flex;justify-content:space-between;align-items:center}
.rules ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:auto 1fr;gap:2px 10px}
.rules li{display:contents}
.rules li span{color:var(--muted)}
.rules li b{font-weight:800}
.duo{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;text-align:left;padding:10px 14px;border-radius:16px;border:2px solid color-mix(in srgb,var(--me) 45%,transparent);background:color-mix(in srgb,var(--me) 10%,var(--surface));box-shadow:0 3px 0 color-mix(in srgb,var(--me) 30%,transparent);transition:transform .12s}
.duo:hover{transform:translateY(-2px)}
.duo:active{transform:translateY(1px)}
.duo-ic{width:40px;height:40px;border-radius:12px;background:var(--me);display:grid;place-items:center;font-size:22px}
.duo b{display:block;font-family:var(--f-display);font-weight:400;font-size:19px;line-height:1.2}
.duo small{color:var(--muted);font-size:12px}
.duo-go{font-family:var(--f-num);color:var(--me);font-size:18px}
.duo-names{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:center;margin-top:12px}
.duo-names label{display:flex;align-items:center;gap:6px;font-weight:800;font-size:14px;white-space:nowrap}
.duo-names label .mini{width:1.2em;height:1.2em}
.duo-names input{font:inherit;font-size:16px;padding:9px 12px;border-radius:12px;border:2px solid var(--line);background:var(--surface-2);color:var(--ink);min-width:0}
.duo-names input:focus{outline:none;border-color:var(--me)}
.pp{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;border-radius:14px;padding:6px;margin:-6px;transition:box-shadow .2s}
.pp .ava{width:50px;height:50px;border-radius:14px}
.pp .who b{display:block;font-weight:800;font-size:15px;line-height:1.25;word-break:keep-all}
.pp .who small{color:var(--muted);font-size:12px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.pava{background:color-mix(in srgb,var(--board) 55%,var(--surface))!important}
.pava .mini{width:30px;height:30px}
.oppcell.mine{background:color-mix(in srgb,var(--me) 10%,var(--surface));border-color:color-mix(in srgb,var(--me) 45%,transparent)}
.oppcell.mine small{color:var(--me)}
.opp-pane.on,.pp.on{box-shadow:0 0 0 3px var(--accent),0 0 18px -2px color-mix(in srgb,var(--accent) 60%,transparent)}
.who .tw{color:var(--bad);font-weight:800}
.me-row.now{background:color-mix(in srgb,var(--me) 12%,transparent);border-radius:10px;margin-inline:-6px;padding:2px 6px}
.pill.v{background:var(--me)}
.resume{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:16px;background:var(--me);color:#fff}
.resume .btn{border-color:#fff;color:var(--ink)}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tab{border:2px solid var(--line);background:var(--surface);border-radius:14px;padding:8px 10px;text-align:left;display:flex;flex-direction:column;gap:0}
.tab .big{font-family:var(--f-display);font-size:22px;line-height:1.15;display:flex;align-items:center;gap:8px}
.tab .big i{width:12px;height:12px;border-radius:50%;background:var(--tc)}
.tab small{color:var(--muted);font-size:12px}
.tab[aria-pressed="true"]{border-color:var(--tc);background:color-mix(in srgb,var(--tc) 12%,var(--surface))}
.tierdesc{margin:0;color:var(--muted);font-size:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;align-content:start}
.opp{border:2px solid var(--line);background:var(--surface);border-radius:14px;padding:8px 10px;text-align:left;display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:center;min-width:0;transition:transform .12s,border-color .12s}
.opp:hover{border-color:var(--tc);transform:translateY(-2px)}
.ava{width:38px;height:38px;border-radius:12px;background:color-mix(in srgb,var(--tc) 18%,var(--surface));display:grid;place-items:center;font-size:23px;line-height:1;flex:none}
.opp .nm{min-width:0}
.opp .nm b{display:block;font-weight:800;font-size:13.5px;line-height:1.25;word-break:keep-all}
.opp .nm small{font-size:11.5px;color:var(--muted)}
.opp .rec{grid-column:1/-1;display:flex;justify-content:space-between;gap:6px;font-size:11.5px;color:var(--muted);border-top:1px dashed var(--line);padding-top:4px;margin-top:2px}
.opp .rec .w{color:var(--ok);font-weight:800}
.opp .rec .no{display:none}
.sec h2{font-size:20px;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.hist{list-style:none;padding:0;margin:0}
.hist li{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:7px 2px;border-bottom:1px solid var(--line);font-size:13px}
.hist small{color:var(--muted);display:block;font-size:11.5px}
.pill{font-family:var(--f-display);font-size:14px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff}
.pill.w{background:var(--ok)}.pill.l{background:var(--bad)}.pill.d{background:var(--muted)}
.empty{color:var(--muted);font-size:13px;padding:8px 2px}
.linkbtn{background:none;border:0;padding:0;color:var(--muted);font-size:12px;text-decoration:underline;text-underline-offset:3px}

/* 휴대폰: 상대 고르기가 먼저 보이게 순서 조정 */
.lobby{display:flex;flex-direction:column;gap:12px}
.lobby .lcol,.lobby .rcol{display:contents}
.lobby .hero{order:1}.lobby .lvcard{order:2}.lobby .duo{order:3}.lobby .resume{order:3}.lobby .tabs{order:4;margin-top:6px}.lobby .tierdesc{order:5}.lobby .grid{order:6}.lobby .rules{order:7;margin-top:10px}.lobby .sec{order:8;margin-top:6px}

/* ---------- 게임 ---------- */
.gbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.gleft,.gright{display:flex;align-items:center;gap:8px}
.lvmini{font-family:var(--f-num);font-size:13px;padding:4px 9px;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--pop));color:#fff}
.clock{display:flex;flex-direction:column;align-items:flex-end;line-height:1.05}
.clock small{font-size:11px;color:var(--muted)}
.clock b{font-family:var(--f-num);font-size:18px;font-weight:400}
.garea{display:grid;gap:12px;margin-top:10px;grid-template-columns:minmax(0,1fr);grid-template-areas:"timer" "opp" "board" "me"}
.pane{background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:12px 14px;min-width:0;box-sizing:border-box}
.timer{grid-area:timer;position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;padding:8px 14px;box-shadow:0 6px 16px -10px rgba(0,0,0,.35)}
.timer .tnum{grid-row:1/3;font-family:var(--f-num);font-size:44px;line-height:1;min-width:2.1ch;text-align:center;color:var(--tcol,var(--ok))}
.timer .tnum.hurry{animation:hurry .5s ease-in-out infinite alternate}
@keyframes hurry{to{transform:scale(1.12)}}
.timer .tlab{display:flex;justify-content:space-between;gap:8px;font-weight:800;font-size:14px;align-items:center}
.timer .tlab span{color:var(--muted);font-weight:600;font-size:12px}
.tbar{height:14px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.tbar i{display:block;height:100%;width:100%;transform-origin:left;background:var(--tcol,var(--ok));border-radius:99px}
.opp-pane{grid-area:opp;display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center}
.opp-pane .ava{width:50px;height:50px;font-size:30px;border-radius:14px}
.opp-pane .who b{display:block;font-weight:800;font-size:15px;line-height:1.25;word-break:keep-all}
.opp-pane .who small{color:var(--muted);font-size:12px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.oppcell{text-align:center;min-width:112px;padding:6px 10px;border-radius:14px;background:color-mix(in srgb,var(--pop) 10%,var(--surface));border:2px solid color-mix(in srgb,var(--pop) 45%,transparent)}
.oppcell small{display:block;font-size:12px;font-weight:800;color:var(--pop)}
.oppcell .mv{font-family:var(--f-num);font-size:38px;line-height:1.05;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--ink)}
.oppcell .mv .mini{width:.62em;height:.62em}
.oppcell .mvn{font-size:11.5px;color:var(--muted)}
.oppcell.flash .mv{animation:mvpop .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes mvpop{0%{transform:scale(.4);opacity:.2}100%{transform:none;opacity:1}}
.thinking{grid-column:1/-1;font-size:13px;color:var(--muted);height:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.thinking .dots i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--pop);margin-left:3px;animation:dot 1s infinite}
.thinking .dots i:nth-child(2){animation-delay:.15s}.thinking .dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,100%{opacity:.2}50%{opacity:1}}
.moves,.tip{display:none}
.moves h3{font-size:15px;margin:0 0 6px;color:var(--muted)}
.moves ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:4px}
.moves li{font-size:12px;padding:2px 6px;border-radius:8px;background:var(--surface-2);display:flex;align-items:center;gap:4px;white-space:nowrap}
.moves li em{font-style:normal;color:var(--muted);min-width:1.6em;text-align:right}
.moves li.ai{background:color-mix(in srgb,var(--pop) 10%,var(--surface))}
.moves li.new{outline:2px solid var(--pop)}
.tip{font-size:13px;color:var(--muted);border-top:1px dashed var(--line);margin-top:8px;padding-top:6px}
.tip b{color:var(--accent)}
.me-pane{grid-area:me;display:flex;flex-direction:column;gap:8px}
.me-row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}
.me-row b{font-weight:800}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:12px;padding:3px 9px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);white-space:nowrap}
.chip.warn{background:color-mix(in srgb,var(--bad) 14%,var(--surface));border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.log{font-size:13.5px;min-height:2.9em;line-height:1.45;color:var(--ink);background:var(--surface-2);border-radius:12px;padding:6px 10px;overflow:hidden}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
.boardbox{grid-area:board;display:flex;align-items:flex-start;justify-content:center;min-width:0;min-height:0}
.board{position:relative;width:var(--bs);height:var(--bs);flex:none;border-radius:14px;background:radial-gradient(120% 90% at 30% 20%,color-mix(in srgb,var(--board) 85%,#fff),var(--board) 55%,var(--board-2));box-shadow:0 10px 26px -10px var(--board-shadow),inset 0 0 0 2px color-mix(in srgb,var(--board-2) 70%,#000 10%);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.board svg.lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.board svg line{stroke:var(--board-ink);stroke-width:.035;stroke-linecap:square}
.board svg circle{fill:var(--board-ink)}
.board svg text{font-family:var(--f-num);font-size:.34px;fill:var(--board-ink);text-anchor:middle;opacity:.7}
.cells{position:absolute;left:calc(var(--bs)/32);top:calc(var(--bs)/32);width:calc(var(--bs)*15/16);height:calc(var(--bs)*15/16);display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr)}
.cell{border:0;background:transparent;padding:0;margin:0;position:relative;border-radius:50%;min-width:0;min-height:0}
.cell:focus-visible{outline:2px solid var(--me);outline-offset:-2px}
.cell.ghost::after{content:"";position:absolute;inset:6%;border-radius:50%;opacity:.45;background:var(--gst)}
@media (hover:hover){.board.myturn:not(.pick) .cell:empty:hover::after{content:"";position:absolute;inset:6%;border-radius:50%;opacity:.38;background:var(--gst)}}
.board.pick .cell.ghost::after{opacity:.6;box-shadow:0 0 0 3px var(--me)}
.cell .st{animation:place .28s cubic-bezier(.25,1.5,.5,1)}
.cell.old .st{animation:none}
@keyframes place{0%{transform:scale(1.35) translateY(-8%);opacity:.3}100%{transform:none;opacity:1}}
.cell.last-ai::before{content:"";position:absolute;inset:-6%;border-radius:50%;border:3px solid var(--pop);z-index:2;animation:ring 1.2s ease-out 3}
.cell.last-ai .st::after,.cell.last-me .st::after{content:"";position:absolute;left:50%;top:50%;width:26%;height:26%;margin:-13% 0 0 -13%;border-radius:50%;background:var(--pop)}
.cell.last-me .st::after{background:var(--me)}
@keyframes ring{0%{transform:scale(1.6);opacity:0}40%{opacity:1}100%{transform:scale(1);opacity:1}}
.cell.win .st{box-shadow:0 0 0 3px var(--accent),0 0 16px 4px var(--accent);animation:winglow .9s ease-in-out infinite alternate}
@keyframes winglow{to{box-shadow:0 0 0 4px var(--accent),0 0 26px 8px var(--accent)}}

/* ---------- 모달 · 토스트 ---------- */
#modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:rgba(10,16,32,.48);animation:fade .18s}
#modal .card{width:min(460px,100%);max-height:100%;overflow:auto;box-sizing:border-box;background:var(--surface);color:var(--ink);border-radius:22px;padding:20px;box-shadow:0 20px 50px rgba(0,0,0,.35);animation:pop .3s cubic-bezier(.3,1.4,.5,1)}
#modal h2{font-size:28px;margin-bottom:6px}
#modal p{margin:6px 0}
#modal .row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px}
#modal .row.sticky{position:sticky;bottom:-20px;background:var(--surface);margin-inline:-20px;padding:10px 20px 14px;border-top:1px solid var(--line);margin-bottom:-20px}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{transform:scale(.85);opacity:0}}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.seg button{border:2px solid var(--line);background:var(--surface);border-radius:14px;padding:10px;display:flex;align-items:center;gap:8px;justify-content:center;font-weight:800}
.seg button .mini{width:1.3em;height:1.3em}
.seg button[aria-pressed="true"]{border-color:var(--me);background:color-mix(in srgb,var(--me) 12%,var(--surface))}
.bigtime{font-family:var(--f-num);font-size:40px;line-height:1.1;text-align:center;margin-top:8px}
dl.res{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:12px 0 0;font-size:14px}
dl.res dt{color:var(--muted)}dl.res dd{margin:0;font-weight:700;text-align:right}
.xpbox{margin-top:12px;padding:10px 12px;border-radius:14px;background:var(--surface-2);font-size:13.5px}
.xpbox div{display:flex;justify-content:space-between}
.xpbox .tot{border-top:1px dashed var(--line);margin-top:4px;padding-top:4px;font-weight:800}
.lvup{margin-top:10px;font-family:var(--f-display);font-size:26px;color:var(--pop);text-align:center;animation:lvpop .7s cubic-bezier(.3,1.6,.5,1)}
.lvup small{display:block;font-size:15px;color:var(--ink)}
@keyframes lvpop{0%{transform:scale(.4) rotate(-6deg);opacity:0}100%{transform:none;opacity:1}}
.badge{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:99px;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:13px}
.res-head{text-align:center}
.res-head .face{font-size:44px;line-height:1}
#toast{position:fixed;left:50%;bottom:max(20px,calc(env(safe-area-inset-bottom,0px) + 14px));transform:translateX(-50%);z-index:60;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:14px;font-weight:700;font-size:14px;max-width:calc(100% - 40px);box-sizing:border-box;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.3);animation:toastin .25s}
@keyframes toastin{from{transform:translate(-50%,16px);opacity:0}}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:70}
.gsteps{padding-left:22px;margin:8px 0}.gsteps li{margin:6px 0}
.gdev{font-size:13px;color:var(--muted)}
.gnote{font-size:13px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--warn) 16%,var(--surface));word-break:break-all}
.gnote.ok{background:color-mix(in srgb,var(--ok) 16%,var(--surface))}
.ispin{width:34px;height:34px;margin:14px auto;border-radius:50%;border:4px solid var(--line);border-top-color:var(--me);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 바닥글 ---------- */
.notice,.chant-footer{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));text-align:center;color:var(--muted)}
.notice{margin-top:28px;padding-block:12px 4px;border-top:1px solid var(--line)}
.notice p,.chant-footer p{margin:0;font-size:12px;line-height:1.6}
.chant-footer{padding-block:2px 14px}
.chant-footer p{font-size:11.5px;opacity:.9}
.chant-footer a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.chant-footer a:hover{opacity:.7}

/* ---------- 태블릿·노트북: 한 화면에 맞추기 ---------- */
@media (min-width:700px) and (min-height:560px){
  html,body{height:100%}
  body{display:flex;flex-direction:column}
  #app{flex:1 1 auto;min-height:0}
  .notice{margin-top:0;padding-block:5px 0}
  .chant-footer{padding-block:0 6px}
  .notice p,.chant-footer p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px}
  .wrap{height:100%;min-height:500px;display:flex;flex-direction:column;padding-block:12px 6px}
  .lobby{display:grid!important;grid-template-columns:minmax(290px,370px) minmax(0,1fr);gap:16px 20px}
  .lobby .lcol,.lobby .rcol{display:flex;flex-direction:column;gap:12px;min-height:0}
  .lobby .tabs,.lobby .rules,.lobby .sec{margin-top:0}
  .lobby .lcol{overflow:auto;padding:2px}
  .lobby .rcol .grid{flex:1;min-height:0;overflow:auto;padding:2px 4px 2px 2px;grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
  .lobby .sec{display:flex;flex-direction:column;min-height:120px;flex:1}
  .lobby .opp{padding:6px 8px;align-items:start}
  .lobby .opp .ava{width:34px;height:34px;font-size:20px;grid-row:1/3}
  .lobby .opp .rec{grid-column:2;border:0;padding:0;margin:0;justify-content:space-between;gap:6px}
  .lobby .opp .nm small{display:none}
  .lobby .opp .rec .no{display:inline}
  .lobby .opp .ava{grid-row:auto}
  .lobby .rcol .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important}
  .lobby .sec .hist{overflow:auto;min-height:0;flex:1}
  .game .garea{flex:1;min-height:0;margin-top:10px;grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"timer timer" "board board" "opp me"}
  .game .timer{position:static;box-shadow:none}
  .game .boardbox{align-items:center}
  .game .me-pane .log{flex:1}
}
@media (min-width:700px) and (min-height:560px) and (min-aspect-ratio:11/10){
  .game .garea{grid-template-columns:minmax(210px,1fr) var(--bs) minmax(210px,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"opp board timer" "opp board me";gap:14px}
  .game .opp-pane{align-self:start;grid-template-columns:auto 1fr;align-content:start}
  .game .oppcell{grid-column:1/-1;padding:14px 10px}
  .game .oppcell .mv{font-size:clamp(44px,5vw,64px)}
  .game .opp-pane .thinking{order:0}
  .game .timer{grid-template-columns:1fr;text-align:left}
  .game .timer .tnum{grid-row:auto;font-size:clamp(48px,5.2vw,68px);text-align:left}
  .game .me-pane{min-height:0;overflow:hidden}
  .game .opp-pane{align-self:stretch;grid-template-rows:auto auto auto minmax(0,1fr);min-height:0}
  .game .moves{display:flex;flex-direction:column;grid-column:1/-1;min-height:0;border-top:1px dashed var(--line);padding-top:8px}
  .game .moves ol{overflow:auto;min-height:0;align-content:start}
  .game .log{display:flex;flex-direction:column}
  .game .tip{display:block;margin-top:auto}
}
@media (min-width:700px) and (min-height:560px) and (max-aspect-ratio:11/10){
  .lobby{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto minmax(0,1fr)}
  .lobby .lcol{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"hero rules" "lv rules" "duo sec" "resume sec";overflow:visible;gap:10px 16px;align-items:start}
  .lobby .hero{grid-area:hero}.lobby .lvcard{grid-area:lv}.lobby .rules{grid-area:rules;align-self:stretch}.lobby .resume{grid-area:resume}.lobby .duo{grid-area:duo}
  .lobby .sec{grid-area:sec;max-height:132px;min-height:0;flex:none}
  .lobby .lcol .resume:empty{display:none}
}
@media (max-width:420px){
  .bk .sm{display:inline}
  .wrap{padding-block:10px 6px}
  .instbtn{padding:0 9px;font-size:13px;gap:4px}
  .hero{flex-wrap:nowrap}
  .hero>div:first-child{min-width:0}
  .bk .lg{display:none}
  .gleft{gap:4px}
  .clock b{font-size:16px}
  .timer .tnum{font-size:38px}
  .oppcell{min-width:96px;padding:4px 8px}
  .oppcell .mv{font-size:32px}
  .opp-pane{padding:10px 12px;gap:2px 10px}
  .opp-pane .ava{width:42px;height:42px;font-size:25px}
  .grid{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}