:root {
  color-scheme: dark;
  --ink: #f9f3df;
  --muted: #b7c4b9;
  --forest: #1c315c;
  --forest-deep: #0b1731;
  --mint: #9ce7f1;
  --gold: #ffd36d;
  --danger: #ff7c71;
  --panel: rgba(16, 34, 66, .9);
  font-family: ui-rounded, "SF Pro Rounded", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  min-width: 320px;
  overflow: hidden;
  overscroll-behavior: none;
  color: var(--ink);
  background:
    radial-gradient(circle at 13% -8%, rgba(106, 192, 229, .29), transparent 33%),
    radial-gradient(circle at 87% 9%, rgba(255, 161, 69, .23), transparent 27%),
    linear-gradient(158deg, #273d70 0%, #172a52 48%, #0b1731 100%);
}

button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 3px solid #ffe196; outline-offset: 3px; }
[hidden] { display: none !important; }

.game-app {
  width: min(100%, 570px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.game-header {
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand-lockup { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-lockup p, .brand-lockup h1 { margin: 0; }
.brand-lockup p { color: #a8e4f0; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.brand-lockup h1 { margin-top: 1px; font-family: Georgia, "Songti SC", serif; font-size: 22px; letter-spacing: .035em; line-height: 1; }

.brand-orb {
  width: 39px;
  height: 39px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(236, 253, 211, .55);
  border-radius: 50%;
  background: radial-gradient(circle at 31% 27%, #fff9ba 0 7%, #ffcf62 13%, #f18333 42%, #27547f 70%);
  box-shadow: inset -5px -6px 10px rgba(13, 38, 79, .4), 0 4px 13px rgba(5, 14, 38, .32);
}
.brand-orb i { width: 10px; height: 10px; display: block; border-radius: 50%; background: #fff4bb; box-shadow: 0 0 9px #fff7c7; }

.header-actions { display: flex; gap: 8px; }
.icon-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(229, 247, 222, .23);
  border-radius: 13px;
  color: #eaffdc;
  font-weight: 900;
  font-size: 17px;
  background: rgba(7, 39, 33, .36);
  box-shadow: inset 0 1px rgba(255, 255, 255, .12);
  cursor: pointer;
}
.icon-button:active { transform: translateY(1px); background: rgba(6, 28, 24, .7); }

.hud-card {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(112px, 1.5fr) 1px 1fr 1px .85fr;
  align-items: center;
  border: 1px solid rgba(216, 245, 211, .16);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(115deg, rgba(47, 77, 131, .78), rgba(19, 42, 83, .75));
  box-shadow: 0 7px 22px rgba(3, 24, 18, .2), inset 0 1px rgba(255, 255, 255, .1);
}
.level-readout, .hud-stat { min-width: 0; padding: 8px 12px; }
.hud-stat { text-align: center; }
.hud-label { display: block; color: #9fc9ad; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.level-readout strong, .hud-stat strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; letter-spacing: .02em; }
.hud-stat strong { margin-top: 1px; color: #fff2bf; font-variant-numeric: tabular-nums; font-size: 15px; }
.lives-stat strong { color: #ffaba0; }
.hud-divider { align-self: stretch; margin: 10px 0; background: rgba(224, 244, 213, .15); }

.play-area {
  position: relative;
  isolation: isolate;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(221, 244, 208, .18);
  border-radius: 28px;
  background: #101f42;
  box-shadow: 0 17px 31px rgba(3, 12, 35, .43), inset 0 2px 1px rgba(255, 255, 255, .13);
  touch-action: none;
}

#maze-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.canvas-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 43px rgba(2, 19, 14, .44); }

.run-note {
  position: absolute;
  z-index: 4;
  top: 14px;
  left: 50%;
  max-width: calc(100% - 32px);
  transform: translate(-50%, -10px);
  padding: 7px 12px;
  border: 1px solid rgba(255, 241, 183, .4);
  border-radius: 999px;
  color: #fff8d8;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  background: rgba(19, 41, 80, .82);
  box-shadow: 0 5px 16px rgba(3, 12, 36, .3);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.run-note.is-visible { opacity: 1; transform: translate(-50%, 0); }
.run-note.is-danger { border-color: rgba(255, 156, 143, .72); background: rgba(96, 42, 39, .86); }

.route-meter {
  position: absolute;
  z-index: 4;
  top: 52px;
  left: 13px;
  display: grid;
  grid-template-columns: auto 76px auto;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  padding: 5px 8px;
  border: 1px solid rgba(201, 243, 255, .34);
  border-radius: 999px;
  color: #dffaff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  background: rgba(17, 43, 84, .78);
  box-shadow: 0 4px 12px rgba(3, 14, 39, .24);
  pointer-events: none;
}
.route-meter i { width: 76px; height: 5px; display: block; overflow: hidden; border-radius: 999px; background: rgba(200, 229, 251, .2); }
.route-meter b { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #73e6ff, #ffe076); box-shadow: 0 0 8px rgba(111, 224, 255, .8); transition: width .18s ease; }
.route-meter strong { min-width: 25px; color: #ffedaf; font-variant-numeric: tabular-nums; text-align: right; }

.recalibrate-button {
  position: absolute;
  z-index: 4;
  top: 13px;
  right: 13px;
  padding: 7px 9px;
  border: 1px solid rgba(225, 252, 213, .24);
  border-radius: 999px;
  color: #dff1d6;
  font-size: 10px;
  font-weight: 800;
  background: rgba(18, 39, 77, .74);
  cursor: pointer;
}
.recalibrate-button:active { transform: scale(.97); }

.touch-joystick {
  position: absolute;
  z-index: 5;
  right: 18px;
  bottom: 17px;
  display: grid;
  justify-items: center;
  gap: 4px;
  color: rgba(250, 255, 226, .78);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  pointer-events: none;
}
.joystick-base {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(235, 250, 215, .34);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(238, 255, 219, .12), rgba(7, 36, 29, .35));
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .28), 0 7px 17px rgba(0, 0, 0, .18);
}
.joystick-knob {
  width: 36px;
  height: 36px;
  display: block;
  border: 1px solid rgba(255, 255, 224, .6);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #fbffe9, #a9d6aa 42%, #427d67 100%);
  box-shadow: inset -3px -4px 7px rgba(11, 53, 39, .4), 0 2px 7px rgba(0, 0, 0, .28);
  transform: translate(0, 0);
  will-change: transform;
}

.control-hint {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #b8cfbc;
  font-size: 11px;
  font-weight: 650;
  text-align: center;
}
.hint-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 9px rgba(144, 231, 178, .85); }

.overlay {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 22px max(18px, env(safe-area-inset-bottom));
  background: rgba(4, 13, 33, .7);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .23s ease, visibility .23s ease;
}
.overlay.is-visible { opacity: 1; visibility: visible; }
.overlay[hidden] { display: none !important; }

.panel {
  width: min(100%, 390px);
  max-height: min(760px, calc(100dvh - 36px));
  overflow: auto;
  padding: 28px 24px 23px;
  border: 1px solid rgba(243, 255, 222, .26);
  border-radius: 28px;
  text-align: center;
  background:
    radial-gradient(circle at 85% 8%, rgba(255, 215, 111, .18), transparent 28%),
    linear-gradient(145deg, rgba(55, 86, 145, .98), rgba(18, 39, 80, .99));
  box-shadow: 0 26px 70px rgba(0, 10, 7, .55), inset 0 1px rgba(255, 255, 255, .16);
}
.panel h2 { margin: 7px 0 11px; color: #fff7d8; font-family: Georgia, "Songti SC", serif; font-size: clamp(27px, 7vw, 34px); letter-spacing: .025em; line-height: 1.14; }
.panel p { margin: 0; color: #d0dfcd; font-size: 14px; line-height: 1.72; }
.eyebrow { display: block; color: #a8e3bd; font-size: 10px; font-weight: 900; letter-spacing: .17em; }

.panel-illustration { position: relative; width: 126px; height: 79px; margin: 0 auto 14px; }
.mini-board { position: absolute; inset: 12px 4px 5px; border: 5px solid #be7947; border-radius: 18px; background: repeating-linear-gradient(25deg, #d69c67 0 7px, #e3af74 7px 14px); box-shadow: 0 9px 0 #824c34, 0 13px 13px rgba(0, 14, 9, .3), inset 0 0 0 2px #f2c48b; transform: perspective(180px) rotateX(26deg); }
.mini-ball { position: absolute; z-index: 1; top: 25px; left: 37px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 30% 24%, #fff, #b0e3d0 29%, #438a78 70%, #245b50); box-shadow: 3px 7px 0 rgba(42, 65, 44, .25); }
.mini-hole { position: absolute; z-index: 1; right: 26px; bottom: 19px; width: 19px; height: 11px; border: 2px solid #6f442f; border-radius: 50%; background: #26352c; box-shadow: inset 0 3px 3px #09130e; }

.stage-preview { display: flex; align-items: center; gap: 11px; margin: 19px 0 15px; padding: 11px 13px; border: 1px solid rgba(235, 255, 215, .18); border-radius: 15px; text-align: left; background: rgba(8, 42, 33, .38); }
.stage-preview-icon { display: grid; width: 29px; height: 29px; place-items: center; flex: none; border-radius: 50%; color: #fbffdb; background: #5b9e78; }
.stage-preview strong, .stage-preview small { display: block; }
.stage-preview strong { color: #fff4c9; font-size: 14px; }
.stage-preview small { margin-top: 2px; color: #b4cdb7; font-size: 11px; }

.primary-button, .secondary-button, .text-button, .stage-choice { cursor: pointer; }
.primary-button, .secondary-button {
  width: 100%;
  min-height: 47px;
  border-radius: 15px;
  font-weight: 900;
  letter-spacing: .02em;
}
.primary-button { border: 1px solid #fff2ad; color: #35542f; background: linear-gradient(180deg, #fff4af, #f2c867); box-shadow: inset 0 1px rgba(255,255,255,.8), 0 5px 0 #ad7838, 0 10px 18px rgba(3, 26, 18, .28); }
.primary-button span { margin-left: 5px; font-size: 18px; }
.primary-button:active { transform: translateY(3px); box-shadow: inset 0 1px rgba(255,255,255,.8), 0 2px 0 #ad7838, 0 5px 12px rgba(3, 26, 18, .26); }
.secondary-button { margin-top: 11px; border: 1px solid rgba(232, 252, 218, .33); color: #e9f5d9; background: rgba(13, 54, 42, .62); }
.secondary-button:active { background: rgba(7, 33, 26, .8); }
.text-button { margin: 13px auto 0; padding: 4px 9px; border: 0; color: #b9e8c2; font-size: 12px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; background: transparent; }
.permission-note { margin-top: 16px !important; color: #a7c4ac !important; font-size: 11px !important; line-height: 1.5 !important; }

.stage-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.stage-choice { min-height: 37px; padding: 4px 7px; border: 1px solid rgba(229, 250, 218, .22); border-radius: 11px; color: #c8d9c4; font-size: 11px; font-weight: 800; background: rgba(8, 41, 32, .46); }
.stage-choice.is-selected { border-color: rgba(255, 227, 132, .84); color: #fff3bf; background: rgba(116, 102, 46, .34); }

.compact-panel { padding-top: 31px; }
.compact-panel h2 { margin-bottom: 20px; }
.range-row { display: flex; justify-content: space-between; margin: 2px 2px 8px; color: #cbdccb; font-size: 13px; font-weight: 700; }
.range-row output { color: #ffe699; }
#sensitivity-range { width: 100%; accent-color: #f6d776; margin: 0 0 19px; }

.result-symbol { width: 61px; height: 61px; display: grid; place-items: center; margin: 0 auto 13px; border: 1px solid rgba(255, 239, 162, .75); border-radius: 50%; color: #fff4b3; font-size: 32px; background: radial-gradient(circle, #f2c35c, #a46940 72%); box-shadow: 0 0 30px rgba(255, 210, 104, .28), inset 0 2px 5px rgba(255, 255, 220, .55); }
.result-symbol.is-loss { color: #ffe2d3; border-color: rgba(255, 148, 132, .65); background: radial-gradient(circle, #d97d6e, #7f393a 74%); }
.result-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0 17px; }
.result-stats div { padding: 11px 7px; border: 1px solid rgba(232, 250, 215, .14); border-radius: 14px; background: rgba(8, 38, 30, .35); }
.result-stats span, .result-stats strong { display: block; }
.result-stats span { color: #a9c5ac; font-size: 10px; font-weight: 800; }
.result-stats strong { margin-top: 3px; color: #fff1b7; font-size: 15px; font-variant-numeric: tabular-nums; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }

@media (max-height: 680px) {
  .game-app { gap: 8px; padding-top: max(8px, env(safe-area-inset-top)); }
  .game-header { min-height: 42px; }
  .brand-orb { width: 34px; height: 34px; }
  .brand-lockup h1 { font-size: 19px; }
  .icon-button { width: 34px; height: 34px; }
  .hud-card { min-height: 51px; }
  .level-readout, .hud-stat { padding-top: 5px; padding-bottom: 5px; }
  .control-hint { min-height: 18px; }
}

@media (min-width: 650px) and (min-height: 700px) {
  .game-app { padding-bottom: 18px; }
  .play-area { flex: 0 1 680px; min-height: 480px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}