/* TAECHORA WEB v2 · ORBIT — 원형 판 시안 톤(짙은 금빛 밤 · 금빛 고리·바퀴살 · 상아색과 흑요석 원 · 금빛 가운데).
   공통 틀은 ../shell.css. 여기서는 색 변수와 오르빗 전용 HUD(대국 칩·형세 막대·힌트·배우기 카드·온라인 로비)만 정한다. */
:root{
  --void:#05060b;
  --acc:#e8c46a;--acc2:#f6efdc;--accGlow:rgba(232,196,106,.24);
  --panelA:rgba(44,32,12,.95);--panelB:rgba(10,8,6,.97);--chip:rgba(30,22,10,.72);
  --line:rgba(246,239,220,.14);--line2:rgba(246,239,220,.28);
  --logoA:#ffffff;--logoB:#f6efdc;--logoC:#e8c46a;
  --mute:#c6b796;--dim:#86775a;
}
.screen.title{background:linear-gradient(180deg,rgba(5,6,11,.1) 0%,rgba(5,6,11,.2) 28%,rgba(5,6,11,.66) 46%,rgba(5,6,11,.72) 78%,rgba(5,6,11,.5) 100%)}
.screen.title .ko,.screen.title .tag,.screen.title .keys{text-shadow:0 1px 10px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.9)}
.levels{display:flex;justify-content:center;gap:8px;margin:-6px 0 18px}
.lv{height:36px;min-width:72px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:var(--chip);font:700 13px var(--f-ui);color:var(--mute)}
.lv[aria-checked=true]{color:var(--ink);background:var(--acc);border-color:var(--acc)}
.cta2{margin-top:14px;gap:10px}

/* ---------- 대국 HUD ---------- */
.hud-top{right:64px}
.pausebtn{position:absolute;top:calc(14px + env(safe-area-inset-top));right:12px;pointer-events:auto}
.pchip{position:relative;display:flex;align-items:center;gap:7px;height:46px;padding:0 12px;border-radius:12px;background:var(--chip);border:1px solid var(--line);transition:border-color .2s,box-shadow .2s}
.pchip b{font-size:24px;line-height:1;color:#fff;min-width:22px;text-align:center}
.pchip b.pop{animation:nPop .22s ease-out}
.pchip b.hit{animation:nHit .3s ease-out}
@keyframes nPop{from{transform:scale(1.35);color:var(--gold2)}}
@keyframes nHit{from{transform:scale(.8);color:#ff9a8a}}
.pchip .clk{font-size:12px;color:var(--mute);letter-spacing:.06em}
.pchip .clk.low{color:#ff8a7a}
.pchip.on{border-color:var(--acc);box-shadow:0 0 0 2px rgba(232,196,106,.25),0 0 22px rgba(232,196,106,.25)}
.pchip .nm{position:absolute;top:calc(100% + 4px);font-size:11px;line-height:1.2;color:var(--mute);white-space:nowrap;max-width:46vw;overflow:hidden;text-overflow:ellipsis}
.pchip.me .nm{left:4px}
.pchip.ai .nm{right:4px;text-align:right}
.aib{display:inline-block;margin-left:5px;padding:1px 6px 0;border-radius:6px;background:var(--acc);color:var(--ink);font:700 10px/1.5 var(--f-ui);vertical-align:1px}
.stone{display:block;width:18px;height:18px;border-radius:50%;border:2px solid var(--acc)}
.stone.ivory{background:radial-gradient(circle at 35% 30%,#ffffff,#f6efdc 55%,#d9ccaa)}
.stone.onyx{background:radial-gradient(circle at 35% 30%,#4a3f2c,#17130c 60%);border-color:#8a7442}
.turn{font:700 16px/1.2 var(--f-ui);color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.6);white-space:nowrap}
.hud-mid{min-width:0}
.sub2{margin-top:5px;max-width:100%;font-size:11px;color:var(--mute);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 형세 막대: 흰 원(나)의 몫 */
.tug{position:absolute;left:50%;top:calc(84px + env(safe-area-inset-top));transform:translateX(-50%);width:min(380px,calc(100vw - 40px));height:6px;border-radius:99px;background:linear-gradient(90deg,#2a2114,#0d0b07);border:1px solid rgba(232,196,106,.32);overflow:hidden}
.tug i{position:absolute;left:0;top:0;bottom:0;width:50%;background:linear-gradient(90deg,#d9ccaa,#fffaf0);box-shadow:0 0 12px rgba(255,250,235,.55)}
.tug em{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(232,196,106,.8)}
.notice{position:absolute;left:12px;right:12px;bottom:calc(66px + env(safe-area-inset-bottom));margin:0;text-align:center;font:600 14px/1.5 var(--f-ui);color:var(--mute);min-height:21px;text-shadow:0 1px 8px rgba(0,0,0,.85)}
.notice b{color:var(--gold2);font-weight:700}
.acts{position:absolute;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom));display:flex;justify-content:center;gap:10px}
.pill{pointer-events:auto;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line2);background:rgba(24,18,8,.86);font:700 14px var(--f-ui);color:var(--ivory);display:inline-flex;align-items:center;gap:8px}
.pill b{min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--acc);color:var(--ink);font-size:12px;line-height:20px;text-align:center}
.pill[disabled]{opacity:.38;cursor:default}
.pill.glow{border-color:var(--acc);box-shadow:0 0 0 2px rgba(232,196,106,.3),0 0 22px rgba(232,196,106,.4);animation:pillGlow 1.4s ease-in-out infinite}
@keyframes pillGlow{50%{box-shadow:0 0 0 5px rgba(232,196,106,.12),0 0 30px rgba(232,196,106,.6)}}
.banner{top:calc(var(--bannerY,30vh))}
.banner small{text-shadow:0 2px 10px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.9)}
/* 배우기 카드 */
.guide{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(520px,calc(100vw - 24px));padding:12px 16px 14px;border-radius:16px;background:linear-gradient(160deg,rgba(44,32,12,.95),rgba(10,8,6,.97));border:1px solid var(--line2);box-shadow:0 14px 40px rgba(0,0,0,.55);pointer-events:auto;text-align:left}
.guide small{font-size:12px;letter-spacing:.12em;color:var(--acc)}
.guide b{display:block;margin-top:3px;font:700 17px/1.35 var(--f-ui);color:#fff}
.guide p{margin:5px 0 0;font-size:14px;line-height:1.6;color:var(--acc2)}
.guide p em{font-style:normal;color:var(--gold2);font-weight:700}
.gcta{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.gcta .pill:first-child{background:var(--acc);color:var(--ink);border-color:var(--acc)}
.gskip{position:absolute;top:8px;right:10px;height:30px;padding:0 10px;border:0;border-radius:8px;background:none;font:600 12px var(--f-ui);color:var(--dim)}
.gskip:hover{color:var(--ivory)}
body.learn .acts,body.learn .notice{display:none}
body.review .hud .notice{color:#fff}
body.review .tug{opacity:.6}

/* ---------- 결과·처음 ---------- */
.over .cta{gap:10px 12px}
.over .btn{min-width:128px}
.first .panel-in{max-width:440px}
.first h2{font-size:21px}

/* ---------- 온라인 로비 ---------- */
.lobby .panel-in{max-width:440px}
.lobby h2{margin-top:12px}
.lbox{display:flex;flex-direction:column;gap:12px;align-items:stretch;margin:6px 0 4px}
.lbox .btn{min-width:0}
.lnote{margin:0;font-size:13px;line-height:1.6;color:var(--mute)}
.lnote b{color:var(--gold2)}
.join{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:2px}
.join input{width:156px;height:50px;border-radius:12px;border:1px solid var(--line2);background:rgba(0,0,0,.35);color:#fff;font:400 22px var(--f-disp);letter-spacing:.16em;text-align:center;text-transform:uppercase;user-select:text;-webkit-user-select:text;touch-action:manipulation}
.join input::placeholder{font:500 14px var(--f-ui);letter-spacing:0;color:var(--dim);text-transform:none}
.join input:focus{outline:2px solid var(--acc);outline-offset:1px}
.join .btn{min-width:96px;height:50px}
.wtitle{margin:4px 0 0;font:700 17px var(--f-ui);color:#fff}
.wtitle::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.code{display:block;font-size:46px;letter-spacing:.16em;color:var(--gold2);text-shadow:0 0 26px rgba(232,196,106,.35);user-select:text;-webkit-user-select:text}
.code:empty{display:none}
.err{margin:12px 0 0;min-height:20px;font-size:13px;color:#ff9a8a}

@media (max-width:420px){.pchip{padding:0 9px;gap:5px}.pchip b{font-size:20px}.turn{font-size:14px}.sub2{font-size:10px}.pill{height:38px;padding:0 13px;font-size:13px}}
@media (min-width:900px){.tug{top:calc(88px + env(safe-area-inset-top))}}
@media (max-height:520px){
  .levels{margin:-2px 0 10px}
  .cta2{margin-top:8px}
  .pchip .nm{display:none}
  .tug{top:calc(64px + env(safe-area-inset-top))}
  .notice{left:auto;right:12px;width:min(40vw,300px);bottom:calc(60px + env(safe-area-inset-bottom));font-size:12px;text-align:right}
  .acts{left:auto;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));justify-content:flex-end}
  .guide{left:auto;right:10px;transform:none;width:min(320px,42vw);bottom:10px;padding:10px 12px}
  .guide p{font-size:12.5px}
  .banner{font-size:34px}
}