:root {
  color-scheme: dark;
  font-family: "Pretendard", "Noto Sans KR", system-ui, sans-serif;
  background: #0c130e;
  color: #f3eed8;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: radial-gradient(circle at 50% 35%, #253526, #0b120d 72%); }
button, kbd { font: inherit; }

#game-shell { position: relative; width: 100%; height: 100%; min-height: 480px; overflow: hidden; }
#game { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }

#hud {
  position: absolute; inset: max(20px, env(safe-area-inset-top)) 22px auto;
  display: grid; grid-template-columns: minmax(180px, 1fr) minmax(150px, 260px) minmax(150px, 260px);
  gap: 16px; align-items: start; pointer-events: none;
}
.xp-card { grid-column: 2 / 4; justify-self: end; width: min(360px, 100%); padding: 8px 12px; border: 1px solid #ffffff18; background: #111a14c9; }
.xp-card > span { float: left; margin-right: 10px; color: #f0c469; font-size: 12px; font-weight: 900; }
.xp-card .meter { margin: 4px 0; height: 5px; }
.xp-card .meter i { width: 0; background: linear-gradient(90deg, #5bb9aa, #83e1d0); }
.xp-card small { display: block; clear: both; color: #8fa69e; font-size: 9px; text-align: right; }

.brand { display: flex; flex-direction: column; text-shadow: 0 2px 10px #000; }
.brand strong { font-size: clamp(20px, 2.2vw, 31px); letter-spacing: -.04em; }
.eyebrow { color: #f0bb58; font-size: 11px; font-weight: 800; letter-spacing: .18em; }

.meter-card { padding: 11px 14px; border: 1px solid #ffffff24; background: #111a14d9; box-shadow: 0 8px 24px #0005; backdrop-filter: blur(8px); }
.meter-label { display: flex; justify-content: space-between; margin-bottom: 7px; color: #ced6c6; font-size: 12px; }
.meter-label b { color: #fff3c6; }
.meter { height: 7px; background: #ffffff16; overflow: hidden; }
.meter i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #89b34c, #d3dc72); transition: width .15s; }
.durability .meter i { width: 100%; background: linear-gradient(90deg, #e0503f, #efba50 45%, #9bc66d); }

#status-pill {
  position: absolute; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  padding: 8px 16px; border: 1px solid #ffffff20; border-radius: 999px; background: #101912d9;
  color: #d6ddce; font-size: 12px; letter-spacing: .08em; pointer-events: none;
}

#sound-toggle, #settings-button {
  position: absolute; right: 22px; bottom: max(24px, env(safe-area-inset-bottom)); padding: 8px 13px;
  border: 1px solid #ffffff20; border-radius: 999px; background: #101912d9; color: #d6ddce;
  font-size: 12px; cursor: pointer; backdrop-filter: blur(8px);
}
#sound-toggle[aria-pressed="true"] { color: #899087; text-decoration: line-through; }
#settings-button { right: auto; left: 22px; cursor: pointer; }

#message {
  position: absolute; left: 50%; top: 20%; transform: translate(-50%, -10px); opacity: 0;
  padding: 10px 16px; background: #251b12d9; border-left: 3px solid #ecad45; color: #ffe8b4;
  font-weight: 800; transition: .2s; pointer-events: none;
}
#message.show { opacity: 1; transform: translate(-50%, 0); }

.panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%) scale(.98); width: min(520px, calc(100% - 32px));
  padding: clamp(28px, 5vw, 54px); background: linear-gradient(145deg, #1b271df2, #111912f5); border: 1px solid #d4c78938;
  box-shadow: 0 30px 90px #000b; opacity: 0; visibility: hidden; transition: .25s; text-align: center;
}
.panel.visible { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.stamp { display: inline-block; padding: 4px 8px; border: 1px solid #d7a64c; color: #e9b95c; font-size: 11px; font-weight: 900; letter-spacing: .2em; transform: rotate(-2deg); }
.panel h1, .panel h2 { margin: 20px 0 12px; font-size: clamp(30px, 5vw, 48px); line-height: 1.12; letter-spacing: -.055em; }
.panel p { margin: 0 auto 26px; max-width: 410px; color: #bfc8ba; font-size: 14px; line-height: 1.75; }
.controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 26px; }
.controls div { padding: 12px 6px; background: #ffffff09; border: 1px solid #ffffff10; }
.controls kbd { display: block; color: #f0c469; font-size: 12px; font-weight: 900; }
.controls span { display: block; margin-top: 4px; color: #98a292; font-size: 11px; }
.stage-picker { margin: 20px 0; padding: 14px; border: 1px solid #ffffff18; background: #0c140e80; text-align: left; }
.stage-picker-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 10px; }
.stage-picker-head strong { color: #f2d17e; font-size: 13px; }
.stage-picker-head small { color: #84917f; font-size: 10px; }
.stage-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.panel .stage-card { min-height: 74px; padding: 10px 7px; border: 1px solid #ffffff16; background: #202c20; color: #dbe3d5; box-shadow: none; text-align: center; }
.panel .stage-card:hover { transform: none; }
.panel .stage-card.selected { border-color: #e5b653; background: #3a3b21; color: #fff1bd; box-shadow: inset 0 0 0 1px #e5b65355; }
.stage-card span { display: block; font-size: 21px; line-height: 1; }
.stage-card b { display: block; margin-top: 7px; font-size: 11px; }
.stage-card small { display: block; margin-top: 3px; color: #91a08b; font-size: 9px; }
.panel .stage-description { min-height: 36px; margin: 10px 2px 0; color: #b9c5b4; font-size: 11px; line-height: 1.55; }
.panel button {
  width: 100%; padding: 15px 20px; border: 0; background: #e4b050; color: #172016; font-weight: 900; cursor: pointer;
  box-shadow: inset 0 -3px #a86d28; transition: transform .12s, filter .12s;
}
.panel button:hover { filter: brightness(1.1); transform: translateY(-1px); }
.settings-panel { width: min(480px, calc(100% - 32px)); text-align: left; z-index: 20; }
.settings-panel h2 { text-align: center; }
.setting-row { margin: 22px 0; padding: 16px; border: 1px solid #ffffff12; background: #ffffff08; }
.setting-copy { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.setting-copy label { color: #f3eed8; font-weight: 900; }
.setting-copy output { color: #f0c469; font-weight: 900; }
.setting-row input[type="range"] { width: 100%; height: 32px; accent-color: #e4b050; cursor: pointer; }
.setting-row small { display: block; color: #98a292; font-size: 11px; line-height: 1.55; }
.toggle-row { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 24px; padding: 14px 16px; border: 1px solid #ffffff12; background: #ffffff08; cursor: pointer; }
.toggle-row b { display: block; font-size: 13px; }
.toggle-row small { display: block; margin-top: 4px; color: #98a292; font-size: 10px; }
.toggle-row input { width: 24px; height: 24px; accent-color: #e4b050; }
.levelup-panel { width: min(760px, calc(100% - 32px)); z-index: 30; }
.levelup-panel > p { margin-bottom: 20px; }
.upgrade-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.upgrade-card { min-height: 180px; padding: 20px 14px !important; border: 1px solid #e4b05055 !important; background: linear-gradient(160deg, #263325, #151e16) !important; color: #f3eed8 !important; box-shadow: none !important; text-align: left; }
.upgrade-card .upgrade-icon { display: block; margin-bottom: 14px; font-size: 30px; }
.upgrade-card strong { display: block; color: #f2c96f; font-size: 17px; }
.upgrade-card span { display: block; margin-top: 8px; color: #aeb9aa; font-size: 12px; line-height: 1.55; }
.upgrade-card small { display: block; margin-top: 12px; color: #7fd1c2; font-weight: 800; }
.result-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 28px 0; }
.result-grid div { padding: 16px 6px; background: #ffffff09; }
.result-grid span { display: block; color: #9ba596; font-size: 11px; }
.result-grid b { display: block; margin-top: 7px; color: #f4cf79; font-size: 24px; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.panel .result-actions #next-stage-button { background: #6fc0ad; box-shadow: inset 0 -3px #347c6f; }
.panel .result-actions #next-stage-button[hidden] { display: none; }
.result-actions:has(#next-stage-button[hidden]) { grid-template-columns: 1fr; }

#touch-controls { display: none; position: absolute; left: 18px; bottom: max(18px, env(safe-area-inset-bottom)); pointer-events: none; }
.stick { position: relative; width: 108px; height: 108px; border: 1px solid #ffffff26; border-radius: 50%; background: #0d150e80; pointer-events: auto; touch-action: none; }
.stick i { position: absolute; left: 34px; top: 34px; width: 40px; height: 40px; border-radius: 50%; background: #e7d58d80; }

@media (pointer: coarse) {
  #touch-controls { display: block; }
  #status-pill { bottom: 24px; }
}
@media (max-width: 700px) {
  #hud { grid-template-columns: 1fr 1fr; inset-inline: 12px; gap: 8px; }
  .brand { grid-column: 1 / -1; }
  .meter-card { padding: 8px 10px; }
  .xp-card { grid-column: 1 / -1; width: 100%; }
  .controls { grid-template-columns: 1fr; }
  .controls div { display: flex; justify-content: space-between; padding: 8px 12px; }
  .controls span { margin: 0; }
  #start-panel { max-height: calc(100% - 24px); overflow-y: auto; padding: 24px 18px; }
  #start-panel h1 { margin-top: 14px; font-size: 29px; }
  #start-panel > p { margin-bottom: 14px; }
  .stage-choices { grid-template-columns: repeat(2, 1fr); }
  .panel .stage-card { min-height: 62px; }
  #sound-toggle { right: 12px; top: 118px; bottom: auto; }
  #settings-button { left: 12px; top: 118px; bottom: auto; }
  .result-grid { grid-template-columns: repeat(2, 1fr); }
  .upgrade-choices { grid-template-columns: 1fr; max-height: 54vh; overflow-y: auto; }
  .upgrade-card { min-height: 110px; }
}