:root {
  color-scheme: dark;
  --night: #07171b;
  --panel: #10252a;
  --panel-soft: #163139;
  --ink: #eef7e8;
  --muted: #a9bfba;
  --warm: #ffc96b;
  --warm-deep: #d89a45;
  --focus: #8fe9dc;
  --danger: #ff786b;
  font-family: Inter, ui-rounded, "Segoe UI", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--night);
}

body {
  min-width: 300px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(rgba(2, 13, 16, .42), rgba(2, 13, 16, .68)),
    url('../assets/images/page-backdrop.png') center / cover fixed no-repeat,
    #061317;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: '';
  background:
    radial-gradient(circle at 50% 34%, rgba(58, 112, 126, .08), transparent 34rem),
    linear-gradient(90deg, rgba(2, 10, 12, .12), transparent 28%, transparent 72%, rgba(2, 10, 12, .14));
  pointer-events: none;
}

button { font: inherit; }

button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 50;
  left: 1rem;
  top: -5rem;
  padding: .7rem 1rem;
  color: #07171b;
  background: var(--focus);
  border-radius: .5rem;
}

.skip-link:focus { top: 1rem; }

.app-shell {
  width: min(100%, 1050px);
  margin: 0 auto;
  padding: clamp(.6rem, 2vw, 1.25rem);
  filter: drop-shadow(0 1.5rem 3rem rgba(0, 0, 0, .25));
}

.topbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .7rem;
}

.eyebrow {
  margin: 0 0 .16rem;
  color: var(--warm);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(1.45rem, 4vw, 2.15rem);
  line-height: 1;
  letter-spacing: -.04em;
}

.top-actions { display: flex; gap: .5rem; }

.quiet-button,
.text-button {
  min-height: 44px;
  padding: .6rem .85rem;
  border: 1px solid rgba(201, 231, 222, .24);
  border-radius: .75rem;
  color: var(--ink);
  background: rgba(20, 48, 54, .78);
  cursor: pointer;
}

.quiet-button:hover,
.text-button:hover { background: #21454c; }

.hud {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .45rem;
  margin-bottom: .6rem;
}

.hud-item {
  min-width: 0;
  padding: .48rem .6rem;
  border: 1px solid rgba(177, 215, 204, .12);
  border-radius: .75rem;
  background: linear-gradient(145deg, rgba(20, 48, 54, .9), rgba(7, 26, 31, .82));
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 .45rem 1.1rem rgba(0, 0, 0, .18);
  backdrop-filter: blur(12px) saturate(1.2);
}

.hud-item > span:first-child {
  display: block;
  color: var(--muted);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hud-item strong {
  display: block;
  overflow: hidden;
  margin-top: .14rem;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.level-item { grid-column: span 2; }
.level-item strong { font-size: .82rem; }
.paws { display: flex !important; gap: .14rem; min-height: 1.12rem; }
.paw-icon {
  display: inline-block;
  width: 1.08rem;
  height: 1.08rem;
  background: url('../assets/images/ui-icons.svg') left center / 3.24rem 1.08rem no-repeat;
  filter: sepia(.2) saturate(1.25) drop-shadow(0 0 .25rem rgba(255, 201, 107, .35));
}
.timer-item { grid-column: span 2; }
.goals-item { grid-column: span 2; }

.time-track {
  display: block;
  height: .55rem;
  margin-top: .4rem;
  overflow: hidden;
  border-radius: 999px;
  background: #071519;
}

#time-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #66d4b1, #b7e088);
  transition: width .1s linear, background .3s ease;
}

#time-fill.is-low { background: linear-gradient(90deg, var(--danger), var(--warm)); }

.goal-marks { display: flex; gap: .25rem; margin-top: .13rem; }
.goal-mark { color: #95aaa4; font-style: normal; }
.goal-mark.is-filled { color: var(--warm); text-shadow: 0 0 9px rgba(255, 201, 107, .7); }

.play-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.game-frame {
  position: relative;
  width: min(100%, calc((100vh - 13.2rem) * 2 / 3), 640px);
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(216, 240, 226, .38);
  border-radius: 1.25rem;
  background: #0b292e;
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, .58), 0 0 4rem rgba(86, 162, 151, .1), inset 0 1px rgba(255, 255, 255, .14);
  isolation: isolate;
}

.game-frame::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(125deg, rgba(189, 239, 229, .09), transparent 18%, transparent 78%, rgba(255, 196, 103, .045)),
    radial-gradient(circle at 50% -5%, rgba(155, 226, 224, .08), transparent 38%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 -2rem 4rem rgba(0, 8, 11, .16);
  content: '';
  pointer-events: none;
}

#game-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
}

.game-overlay {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: linear-gradient(rgba(3, 18, 21, .48), rgba(3, 18, 21, .86));
  backdrop-filter: blur(4px);
}

.game-overlay[hidden] { display: none; }

.overlay-card {
  width: min(100%, 30rem);
  padding: clamp(1.2rem, 4vw, 2.2rem);
  text-align: center;
  border: 1px solid rgba(255, 219, 151, .4);
  border-radius: 1.5rem;
  background: linear-gradient(145deg, rgba(12, 42, 48, .93), rgba(4, 21, 26, .9));
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .5), inset 0 1px rgba(255, 255, 255, .08);
  backdrop-filter: blur(18px) saturate(1.25);
}

.moon-mark { margin: 0; color: var(--warm); font-size: 2.5rem; }
.overlay-card h2 { margin: .2rem 0 .75rem; font-size: clamp(1.35rem, 4.6vw, 2rem); }
.overlay-card p { color: #c7d8d3; line-height: 1.45; }

.primary-button {
  min-height: 48px;
  padding: .72rem 1.15rem;
  border: 0;
  border-radius: .8rem;
  color: #17201e;
  font-weight: 850;
  background: linear-gradient(180deg, #ffdc91, var(--warm));
  box-shadow: 0 .35rem 1rem rgba(255, 184, 82, .22);
  cursor: pointer;
}

.primary-button:hover { background: #ffe3a3; }
.overlay-card .text-button { display: block; margin: .7rem auto 0; border: 0; background: transparent; text-decoration: underline; }
.key-hint { margin-bottom: 0; font-size: .74rem; }

.mobile-controls {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(3, 3.7rem);
  grid-template-rows: repeat(2, 3.7rem);
  gap: .4rem;
  touch-action: none;
  user-select: none;
}

.direction-button {
  min-width: 48px;
  min-height: 48px;
  border: 1px solid rgba(187, 225, 214, .28);
  border-radius: 1.15rem;
  color: var(--ink);
  font-size: 1.25rem;
  background: linear-gradient(145deg, rgba(47, 94, 101, .94), rgba(14, 46, 54, .92));
  box-shadow: 0 .65rem 1.4rem rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .16);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: transform .12s ease, color .15s ease, background .15s ease, box-shadow .15s ease;
}

.direction-button:hover,
.direction-button.is-pressed {
  color: var(--warm);
  background: #2d5960;
  transform: translateY(2px);
  box-shadow: inset 0 2px .45rem rgba(0, 0, 0, .35);
}

.direction-button.up { grid-column: 2; grid-row: 1; }
.direction-button.left { grid-column: 1; grid-row: 2; }
.direction-button.down { grid-column: 2; grid-row: 2; }
.direction-button.right { grid-column: 3; grid-row: 2; }
.pause-status { min-height: 1.4em; margin: .4rem 0 0; text-align: center; color: var(--warm); font-weight: 800; }

.site-footer {
  display: flex;
  justify-content: center;
  gap: .65rem;
  width: min(100%, 1050px);
  margin: 0 auto;
  padding: .15rem 1rem max(1rem, env(safe-area-inset-bottom));
  color: rgba(221, 237, 231, .7);
  font-size: .78rem;
}

.site-footer a {
  color: inherit;
  text-underline-offset: .2em;
}

.site-footer a:hover { color: var(--warm); }

.instructions-dialog {
  width: min(calc(100% - 2rem), 38rem);
  max-height: calc(100vh - 2rem);
  padding: 0;
  overflow: auto;
  color: var(--ink);
  border: 1px solid rgba(211, 237, 225, .23);
  border-radius: 1.1rem;
  background: #10282e;
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, .65);
}

.instructions-dialog::backdrop { background: rgba(2, 12, 14, .78); backdrop-filter: blur(5px); }
.dialog-content { padding: clamp(1.3rem, 5vw, 2.3rem); }
.dialog-content h2 { margin-top: .2rem; }
.dialog-content li, .dialog-content p { color: #c9dad4; line-height: 1.55; }
.dialog-content li + li { margin-top: .4rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 760px), (orientation: portrait) {
  body { background-attachment: scroll; }
  .app-shell { padding: max(.55rem, env(safe-area-inset-top)) max(.55rem, env(safe-area-inset-right)) max(.55rem, env(safe-area-inset-bottom)) max(.55rem, env(safe-area-inset-left)); }
  .hud { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .level-item, .timer-item, .goals-item { grid-column: span 2; }
  .play-layout { flex-direction: column; gap: .6rem; }
  .game-frame { width: min(100%, calc((100vh - 22rem) * 2 / 3), 560px); min-width: 260px; }
  .mobile-controls { grid-template-columns: repeat(3, 3.5rem); grid-template-rows: repeat(2, 3.5rem); }
}

@media (max-height: 700px) and (orientation: landscape) {
  .app-shell { width: 100%; padding: .35rem .7rem; }
  .topbar { margin-bottom: .3rem; }
  .eyebrow { display: none; }
  .hud { margin-bottom: .35rem; }
  .hud-item { padding: .3rem .45rem; }
  .game-frame { width: min(100%, calc((100vh - 7.7rem) * 2 / 3)); }
  .pause-status { display: none; }
}

@media (max-width: 440px) {
  .topbar { align-items: center; }
  .top-actions { gap: .25rem; }
  .quiet-button { min-height: 40px; padding: .45rem .6rem; font-size: .78rem; }
  .hud { gap: .3rem; }
  .hud-item { padding: .38rem .42rem; }
  .hud-item strong { font-size: .82rem; }
  .game-frame { width: min(100%, calc((100vh - 21rem) * 2 / 3)); }
  .overlay-card { padding: 1rem .85rem; border-radius: 1.1rem; }
  .overlay-card h2 { font-size: clamp(1.2rem, 7vw, 1.6rem); }
  .key-hint { display: none; }
}

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