*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* display:flex 가 hidden 속성의 display:none 을 이긴다. 이거 없으면 오버레이가
   숨겨진 채로 화면 전체를 덮어 버튼이 안 눌린다. */
[hidden]{display:none!important}
:root{
  --bg:#0d1b18; --panel:#132622; --line:#26433c; --fg:#e8f2ee; --dim:#8fada5;
  --accent:#20b7ad; --warn:#ffb347;
}
html,body{height:100%}
body{
  background:var(--bg); color:var(--fg); overflow:hidden;
  font:15px/1.4 system-ui,-apple-system,"Noto Sans KR",sans-serif;
  display:flex; flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  user-select:none; touch-action:manipulation;
}

/* ── 상단 HUD ── */
#hud{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line)}
#menuBtn{background:none;border:0;color:var(--fg);font-size:22px;padding:2px 6px}
.hudText{flex:1;min-width:0}
#hudMain{font-size:17px;font-weight:700;letter-spacing:.3px}
#hudSub{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#risk{font-size:12px;font-weight:700;color:var(--warn);white-space:nowrap}

/* ── 테이블 ── */
#tableWrap{flex:1;position:relative;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
#table{display:block}
#toast{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.72);padding:6px 16px;border-radius:20px;font-weight:700;
  opacity:0;transition:opacity .2s;pointer-events:none
}

/* 파워 게이지 — 오른쪽 세로, 위아래로 왕복 */
#gauge{
  position:absolute;right:8px;top:12%;bottom:12%;width:26px;
  border:2px solid var(--line);border-radius:13px;background:rgba(0,0,0,.35);
  display:flex;align-items:flex-end;overflow:hidden
}
#gaugeFill{width:100%;height:0;background:linear-gradient(0deg,#2bd4a8,#ffd166 60%,#ff6b5b)}

/* ── 하단 패널 ── */
#panel{background:var(--panel);border-top:1px solid var(--line);padding:8px 10px 10px}
/* 네이티브 배너는 화면 맨 아래에 겹쳐 뜬다. 그만큼 본문을 미리 줄여
   테이블·버튼이 배너에 가리지 않게 한다 (조준 중 가림 = 억울한 실수). */
body.hasBanner{padding-bottom:calc(env(safe-area-inset-bottom) + 56px)}
#stageRow{display:flex;align-items:center;gap:10px}
#stageName{flex:1;font-weight:700}
#panel button{
  background:#1d3b34;color:var(--fg);border:1px solid var(--line);
  border-radius:9px;padding:9px 14px;font-size:14px;font-weight:600
}
#panel button:active{background:#265147}
#nextBtn,#fireBtn{background:var(--accent);border-color:var(--accent);color:#04201c}
#fireBtn{font-size:16px;padding:10px 22px}
#thickBar{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap}
#thickInfo{flex:1;text-align:center;font-size:13px;color:var(--dim);min-width:110px}
#bankPanel{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:13px}
#bankPanel input{flex:1}
#bankAdvice{margin-top:6px;font-size:13px;color:var(--warn)}

/* ── 당점 측면뷰 (전체화면 오버레이) ── */
#tipOverlay{position:fixed;inset:0;background:rgba(6,14,12,.93);display:flex;align-items:center;justify-content:center;z-index:20;padding:10px;overflow:auto}
/* 공 크기는 "남는 세로 − 조작부(정보+버튼+여백 ≈ 150px)" 로 잡는다.
   min(86vw,86vh) 로 두면 공이 세로를 86% 먹고 버튼이 화면 밖으로 밀려서
   세로 607px 미만(폰 가로·짧은 브라우저 창)에서 당점 단계에 영영 갇힌다. 실제로 갇혔다.
   margin:auto 는 넘칠 때 위쪽이 잘려 못 잡게 되는 걸 막는다(안전 중앙정렬). */
.tipBox{width:clamp(180px,min(86vw,100vh - 150px),560px);margin:auto;
  display:flex;flex-direction:column;align-items:center;gap:10px}
.tipBox{width:clamp(180px,min(86vw,100svh - 150px),560px)}   /* svh 되는 곳은 이쪽이 이긴다 */
#tipCanvas{width:100%;aspect-ratio:1;touch-action:none}
#tipInfo{font-size:15px;font-weight:700;color:var(--accent)}
/* 오버레이가 하단 패널을 덮으니 다음/뒤로를 여기에도 둔다 */
.tipBtns{display:flex;gap:10px;width:100%}
.tipBtns button{flex:1;background:#1d3b34;color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:12px;font-size:15px;font-weight:700}
.tipBtns #tipDone{flex:3;background:var(--accent);border-color:var(--accent);color:#04201c}

/* ── 메뉴 ── */
#menu{position:fixed;inset:0;background:rgba(6,14,12,.94);display:flex;align-items:center;justify-content:center;z-index:30;padding:16px}
.menuBox{width:min(420px,100%);display:flex;flex-direction:column;gap:12px}
.menuBox h2{font-size:20px;text-align:center;color:var(--accent)}
.menuBox .row{display:flex;gap:8px}
.menuBox .row button{flex:1}
.menuBox button{background:#1d3b34;color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:12px 8px;font-size:14px;font-weight:600}
.menuBox label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--dim)}
.menuBox select{background:#12241f;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:10px;font-size:14px}
.hint{font-size:12px;color:var(--dim);text-align:center;line-height:1.6}