@font-face {
  font-family: "GalmuriSub";
  src: url("assets/galmuri11-bold-sub.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #0f3321; color: #fff;
  font-family: "GalmuriSub", system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }

#hudBtns { position: fixed; right: max(8px, env(safe-area-inset-right)); top: max(8px, env(safe-area-inset-top)); display: flex; gap: 6px; z-index: 5; }
.iconbtn { width: 38px; height: 38px; border-radius: 10px; border: 2px solid rgba(255,255,255,.55); background: rgba(0,0,0,.35); padding: 6px; cursor: pointer; }
.iconbtn svg { width: 100%; height: 100%; fill: #fff; display: block; }
.iconbtn .off { display: none; }
.iconbtn[aria-pressed="true"] .on { display: none; }
.iconbtn[aria-pressed="true"] .off { display: block; }

.overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 10; background: rgba(8, 30, 18, .55); padding: 12px; }
.overlay.show { display: flex; }
.panel {
  background: #fbf7ee; color: #262626; border: 3px solid #262626; border-radius: 18px;
  box-shadow: 0 6px 0 #262626; text-align: center;
  width: min(92vw, 420px); max-height: 96vh; overflow: hidden;
  padding: clamp(10px, 3vmin, 22px) clamp(12px, 4vmin, 26px);
  display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 1.4vmin, 10px);
}
.bot { width: auto; height: clamp(64px, 22vmin, 150px); }
h1, h2 { margin: 0; font-size: clamp(22px, 7.4vmin, 38px); line-height: 1.1; letter-spacing: -.5px; }
h1 b { color: #c62828; }
h2 { font-size: clamp(20px, 6.4vmin, 32px); color: #c62828; }
.rule, .how, .detail, .msg { margin: 0; font-size: clamp(12px, 3.6vmin, 17px); line-height: 1.45; }
.how { color: #555; font-size: clamp(11px, 3.1vmin, 14px); }
.rule b, .how b { color: #c62828; }
.big {
  font: inherit; font-size: clamp(18px, 5.6vmin, 26px); color: #fff; background: #d92b2b;
  border: 3px solid #262626; border-radius: 14px; box-shadow: 0 4px 0 #262626;
  padding: clamp(8px, 2.2vmin, 14px) clamp(18px, 6vmin, 36px); cursor: pointer;
  animation: pulse 1.4s ease-in-out infinite;
}
.big:active { transform: translateY(3px); box-shadow: 0 1px 0 #262626; }
@keyframes pulse { 50% { transform: scale(1.05); } }
.stars { margin: 0; font-size: clamp(24px, 8vmin, 40px); color: #f2b705; letter-spacing: 4px; -webkit-text-stroke: 1px #7a5a00; }
.stars .dim { color: #ddd; -webkit-text-stroke: 1px #aaa; }
.big-num { margin: 0; font-size: clamp(18px, 5vmin, 24px); }
.big-num span { font-size: clamp(34px, 11vmin, 56px); color: #c62828; }
.msg { color: #444; }
@media (max-height: 380px) { .how { display: none; } .bot { height: clamp(48px, 18vmin, 90px); } }
@media (prefers-reduced-motion: reduce) { .big { animation: none; } }

/* ---------- v2: 스테이지 선택 · 결과 버튼 ---------- */
.panel.sel { width: min(96vw, 560px); gap: clamp(4px, 1.2vmin, 10px); }
.sum { margin: 0; font-size: clamp(14px, 4vmin, 20px); color: #b8860b; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(5px, 1.4vmin, 10px); width: 100%; }
.stg {
  font: inherit; color: #262626; background: #fff; border: 2px solid #262626; border-radius: 12px; box-shadow: 0 3px 0 #262626;
  padding: clamp(4px, 1.2vmin, 8px) 2px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0;
}
.stg:active { transform: translateY(2px); box-shadow: 0 1px 0 #262626; }
.stg:focus-visible { outline: 3px solid #d92b2b; outline-offset: 2px; }
.stg .no { font-size: clamp(16px, 5vmin, 24px); color: #c62828; line-height: 1; }
.stg .nm { font-size: clamp(10px, 2.7vmin, 13px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.stg .st { font-size: clamp(12px, 3.4vmin, 16px); letter-spacing: 1px; color: #ddd; }
.stg .st .on { color: #f2b705; }
.stg .st i { font-style: normal; }
.stg .bs { font-size: clamp(9px, 2.3vmin, 11px); color: #666; white-space: nowrap; }
.stg.clear { background: #effbe9; }
.stg.locked { background: #e6e2d8; color: #8a867c; box-shadow: 0 3px 0 #8a867c; border-color: #8a867c; cursor: default; }
.stg.locked .no { color: #8a867c; }
.row { display: flex; gap: 8px; }
.mid {
  font: inherit; font-size: clamp(14px, 4.2vmin, 19px); color: #262626; background: #fff;
  border: 3px solid #262626; border-radius: 12px; box-shadow: 0 3px 0 #262626; padding: clamp(5px, 1.6vmin, 9px) clamp(12px, 4vmin, 22px); cursor: pointer;
}
.mid:active { transform: translateY(2px); box-shadow: 0 1px 0 #262626; }
@media (max-aspect-ratio: 3/5) { .grid { grid-template-columns: repeat(2, 1fr); } .stg { flex-direction: row; justify-content: space-between; padding: 8px 10px; } .stg .bs { display: none; } }
@media (max-height: 380px) { .panel.sel .how { display: none; } }
/* v2: 낮은 화면(X 카드 480×480 등)에서 결과 창 아래 버튼이 잘리지 않게 */
.overlay .panel { overflow-y: auto; }
@media (max-height: 560px) {
  #result .panel { gap: clamp(2px, .8vmin, 6px); }
  #result .bot { height: clamp(40px, 12vmin, 80px); }
  #result .stars { font-size: clamp(20px, 6.4vmin, 34px); }
  #result .big-num span { font-size: clamp(28px, 9vmin, 44px); }
  #result .msg { font-size: clamp(11px, 3vmin, 15px); }
}