*{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;
}
/* 모바일 브라우저에서 height:100% 는 **주소창이 숨겨진 큰 뷰포트** 기준으로 잡힌다.
   주소창이 떠 있으면 그만큼 아래가 화면 밖으로 밀리는데 body 가 overflow:hidden 이라
   스크롤도 안 된다 → 하단 패널의 「다음」·「치기」가 브라우저 UI 뒤에 깔려 안 눌린다.
   Capacitor 앱에는 주소창이 없어서 이 버그가 안 보인다 — 웹에서만 난다.
   dvh 는 실제로 보이는 높이를 따라가므로 주소창이 뜨든 말든 버튼이 화면 안에 남는다. */
html,body{height:100%}
html,body{height:100dvh}          /* dvh 되는 곳은 이쪽이 이긴다 */
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
}

/* 파워 게이지 — 오른쪽 세로, 위아래로 왕복 */
/* 누르는 게이지라 손가락에 맞게 넓다. touch-action:none 이라야 끌 때 화면이 안 밀린다. */
#gauge{
  position:absolute;right:8px;top:12%;bottom:12%;width:46px;
  border:2px solid var(--line);border-radius:23px;background:rgba(0,0,0,.35);
  display:flex;align-items:flex-end;overflow:hidden;touch-action:none;cursor:pointer
}
#gaugeFill{width:100%;height:0;background:linear-gradient(0deg,#2bd4a8,#ffd166 60%,#ff6b5b)}
/* 고른 세기를 숫자로 — 눈금만으로는 몇 %인지 모른다 */
#gaugeVal{
  position:absolute;right:60px;top:50%;transform:translateY(-50%);
  font-size:15px;font-weight:800;color:var(--fg);text-shadow:0 1px 3px #000;
  background:rgba(6,14,12,.72);border:1px solid var(--line);border-radius:8px;padding:3px 8px
}

/* ── 하단 패널 ── */
#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,#thickOverlay{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}
/* 두께 뷰는 공 두 개가 옆으로 늘어서니 가로로 길다 */
#thickCanvas{width:100%;aspect-ratio:16/10;touch-action:none}
#thickInfo2{font-size:16px;font-weight:800;color:var(--accent)}
/* 공 크기는 "남는 세로 − 조작부(정보+버튼+여백 ≈ 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}