@font-face{font-family:"Pretendard GX";src:url("../assets/font/Pretendard-subset.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}
/* 활바람 — 다크 네이비 + 금빛. 글자·터치 타깃은 전부 DOM(44 px 이상, 대비 4.5:1 이상). */
:root{
  --bg:#0a1020; --bg2:#121c33; --ink:#eaf0fb; --dim:#a9b7d0; --gold:#f2c14e; --red:#e05a47;
  --blue:#3d7bd6; --green:#43c47a; --line:rgba(255,255,255,.14); --tap:44px;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font-family:"Pretendard GX",Pretendard,system-ui,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  overscroll-behavior:none;-webkit-user-select:none;user-select:none;touch-action:none}
#app{position:fixed;inset:0;overflow:hidden}
canvas#stage{position:absolute;inset:0;width:100%;height:100%;display:block}
canvas.overlay{position:absolute;inset:0;pointer-events:none}
.hidden{display:none !important}

/* ── HUD ───────────────────────────────────────────── */
#hud{position:absolute;inset:0;pointer-events:none}
#top{position:absolute;top:calc(8px + var(--safe-t));left:8px;right:8px;display:flex;gap:8px;align-items:flex-start;justify-content:space-between}
#board{display:flex;flex-direction:column;gap:4px;background:rgba(8,14,28,.72);border:1px solid var(--line);border-radius:12px;padding:6px 10px;backdrop-filter:blur(6px)}
.pl{display:flex;align-items:center;gap:6px;font-size:14px;line-height:1.3;opacity:.72}
.pl.cur{opacity:1}
.pl.cur .nm{color:var(--gold);font-weight:700}
.dot{width:10px;height:10px;border-radius:50%;flex:none}
.nm{min-width:4.5em}
.sp{font-weight:800;font-variant-numeric:tabular-nums;min-width:1.6em;text-align:center;background:rgba(255,255,255,.1);border-radius:6px;padding:0 4px}
.arrows{display:flex;gap:3px}
.arrows b{font-size:11px;font-weight:700;background:rgba(255,255,255,.12);border-radius:4px;padding:1px 4px}
.arrows b.g{background:var(--gold);color:#201800}
.arrows b.x{background:#fff;color:#201800}
.arrows b.m{background:rgba(224,90,71,.35)}
.wind{display:flex;align-items:center;gap:6px;background:rgba(8,14,28,.72);border:1px solid var(--line);border-radius:12px;padding:6px 10px;font-variant-numeric:tabular-nums;font-size:14px}
.wind svg{width:22px;height:22px;fill:var(--gold);transition:transform .25s ease}
.wind.gusty svg{fill:var(--red)}
#banner{position:absolute;top:34%;left:0;right:0;text-align:center;font-size:clamp(26px,9vw,44px);font-weight:900;
  letter-spacing:-.02em;opacity:0;transform:scale(.9);transition:opacity .18s,transform .18s;text-shadow:0 4px 18px rgba(0,0,0,.6)}
#banner.on{opacity:1;transform:scale(1)}
#banner.gold{color:var(--gold)} #banner.bad{color:var(--red)} #banner.good{color:var(--green)}
#subtitle{position:absolute;top:47%;left:0;right:0;text-align:center;font-size:clamp(15px,4.4vw,20px);font-weight:700;color:var(--ink);
  opacity:0;transition:opacity .2s;text-shadow:0 2px 10px rgba(0,0,0,.7)}
#subtitle.on{opacity:1}
#reticle{position:absolute;left:0;top:0;width:0;height:0;opacity:0;transition:opacity .12s}
#reticle.on{opacity:1}
#reticle i{position:absolute;left:-13px;top:-13px;width:26px;height:26px;border-radius:50%;border:2px solid var(--green);
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 10px rgba(67,196,122,.6)}
#reticle i::after{content:"";position:absolute;left:11px;top:11px;width:4px;height:4px;border-radius:50%;background:#fff}
#reticle[data-q="settling"] i{border-color:var(--red);border-style:dashed;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
#reticle[data-q="diverging"] i{border-color:#f39c2d;border-style:dotted;width:34px;height:34px;left:-17px;top:-17px}
#reticle[data-q="diverging"] i::after{left:15px;top:15px}
#hold-ring{position:absolute;left:-21px;top:-21px;width:42px;height:42px;border-radius:50%;
  background:conic-gradient(var(--gold) calc(var(--f,0)*360deg), rgba(255,255,255,.08) 0);
  -webkit-mask:radial-gradient(circle, transparent 17px, #000 18px);mask:radial-gradient(circle, transparent 17px, #000 18px)}
#bottom{position:absolute;left:8px;right:8px;bottom:calc(8px + var(--safe-b));display:flex;align-items:flex-end;gap:8px}
#stamina{position:relative;flex:1;height:var(--tap);border-radius:12px;background:rgba(8,14,28,.72);border:1px solid var(--line);overflow:hidden}
#stamina span{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--dim);z-index:1}
#stamina-fill{position:absolute;inset:0;width:100%;background:linear-gradient(90deg,#2b7a4b,#43c47a);transition:width .12s linear}
#stamina.low #stamina-fill{background:linear-gradient(90deg,#8a2f23,#e05a47)}
#btn-pause{pointer-events:auto;min-width:var(--tap);min-height:var(--tap);border-radius:12px;background:rgba(8,14,28,.72);
  border:1px solid var(--line);color:var(--ink);font-size:18px}
#draw-zone{position:absolute;left:0;right:0;bottom:calc(60px + var(--safe-b));height:0;text-align:center;opacity:0;transition:opacity .3s}
#draw-zone.wide span{max-width:92vw}
#draw-zone.on{opacity:.85}
#draw-zone span{display:inline-block;transform:translateY(-8px);font-size:13px;color:var(--dim);background:rgba(8,14,28,.7);
  padding:6px 12px;border-radius:999px;border:1px solid var(--line)}
#toast{position:absolute;left:50%;bottom:calc(120px + var(--safe-b));transform:translateX(-50%) translateY(8px);
  background:rgba(8,14,28,.92);border:1px solid var(--line);border-radius:999px;padding:10px 16px;font-size:14px;
  opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;max-width:86vw;text-align:center}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#assist-ring{position:absolute;pointer-events:none}

/* ── 화면 ──────────────────────────────────────────── */
.screen{position:absolute;inset:0;display:none;flex-direction:column;justify-content:center;align-items:center;gap:14px;scroll-padding-bottom:80px;
  padding:calc(18px + var(--safe-t)) 18px calc(18px + var(--safe-b));overflow-y:auto;
  background:linear-gradient(180deg,rgba(10,16,32,.96),rgba(10,16,32,.99));z-index:5}
.screen.on{display:flex}
.screen.dim{background:rgba(6,10,20,.82);backdrop-filter:blur(4px)}
.screen h1,.screen h2{margin:0;text-align:center}
.logo{font-size:clamp(40px,13vw,68px);font-weight:900;letter-spacing:-.04em}
.logo span{color:var(--gold)}
.tag{margin:0;color:var(--dim);font-size:15px;text-align:center;max-width:22em}
.menu{display:flex;flex-direction:column;gap:10px;width:min(420px,92vw)}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:min(420px,92vw)}
.row.end{margin-top:6px;justify-content:space-between}
/* 🔴 가로 화면(844×390)에서는 내용이 스크롤되어 «설정 완료»가 화면 밖으로 밀린다 —
   행동 버튼 줄은 화면 아래에 붙여 언제나 닿게 한다(실측: 이 줄이 없으면 가로에서 경기를 시작할 수 없었다). */
.screen .row.end{position:sticky;bottom:calc(-4px - var(--safe-b));z-index:2;
  background:linear-gradient(180deg,rgba(10,16,32,0),rgba(10,16,32,.92) 22%);
  padding:10px 0 calc(6px + var(--safe-b));width:min(460px,94vw)}
button{font:inherit;min-height:var(--tap);padding:10px 16px;border-radius:14px;border:1px solid var(--line);
  background:var(--bg2);color:var(--ink);cursor:pointer;transition:transform .08s,background .15s}
button:active{transform:scale(.98)}
button.big{width:100%;font-size:19px;font-weight:800;padding:16px;text-align:left;
  background:linear-gradient(135deg,#17233f,#101a30)}
button.big small{display:block;font-size:13px;font-weight:500;color:var(--dim);margin-top:3px}
button.big.alt{background:linear-gradient(135deg,#1d2a20,#14211a)}
button.go{background:linear-gradient(135deg,#a8791d,#f2c14e);color:#1b1400;font-weight:800;border-color:transparent}
button.ghost{background:transparent}
button.danger{background:#3a1713;border-color:#6d2a22;color:#ffd7d0}
.panel{display:flex;flex-direction:column;gap:12px;width:min(360px,90vw);background:var(--bg2);border:1px solid var(--line);
  border-radius:20px;padding:20px}
.opts{display:flex;flex-direction:column;gap:14px;width:min(460px,94vw);padding-bottom:6px}
.opt{display:flex;flex-direction:column;gap:6px}
.opt>label{font-size:14px;color:var(--dim)}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{flex:1 1 auto;min-width:72px;font-size:15px}
.seg button[aria-pressed="true"]{background:var(--gold);color:#1b1400;border-color:transparent;font-weight:800}
.fine{color:var(--dim);font-size:13px;max-width:30em;text-align:center;line-height:1.6}
.fine b{color:var(--ink)}
.lic{width:min(460px,94vw);color:var(--dim);font-size:12px}
.lic summary{min-height:var(--tap);display:flex;align-items:center;cursor:pointer}
.help{width:min(460px,94vw);line-height:1.7;font-size:15px;color:var(--ink);padding-left:1.2em}
.help b.g{color:var(--green)}
.card .card-in{display:flex;flex-direction:column;align-items:center;gap:18px;width:min(420px,92vw)}
.who{font-size:clamp(22px,7vw,32px);font-weight:900;display:flex;align-items:center;gap:10px}
#card-note{margin:0;color:var(--dim)}
.slider{position:relative;width:100%;height:56px;border-radius:999px;background:linear-gradient(90deg,rgba(242,193,78,.25) calc(var(--p,0)*100%),rgba(255,255,255,.07) 0);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;touch-action:none}
.slider span{color:var(--dim);font-size:15px;pointer-events:none}
.knob{position:absolute;left:4px;top:4px;width:48px;height:46px;border-radius:999px;background:var(--gold);color:#1b1400;
  display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;touch-action:none;cursor:grab}
.afk{height:4px;width:100%;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.afk::after{content:"";display:block;height:100%;width:var(--afk,0%);background:var(--red);transition:width .3s linear}
#result-body{width:min(460px,94vw);display:flex;flex-direction:column;gap:10px}
.settable{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.settable th,.settable td{border-bottom:1px solid var(--line);padding:7px 6px;text-align:center;font-size:14px}
.settable td.win{color:var(--gold);font-weight:800}
.big-score{font-size:clamp(30px,10vw,48px);font-weight:900;text-align:center}
.boot{background:var(--bg);gap:18px}
.spin{width:44px;height:44px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--gold);animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.ach{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;width:min(460px,94vw)}
.ach div{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:8px;font-size:12px;text-align:center;opacity:.45}
.ach div.on{opacity:1;border-color:var(--gold)}
@media (orientation:landscape) and (max-height:520px){
  .logo{font-size:38px} .menu{width:min(520px,80vw)} .screen{gap:8px}
  #banner{top:24%} #subtitle{top:40%}
}