:root {
  color-scheme: dark;
  --navy: #07101f;
  --blue: #4e83c8;
  --ice: #f7f6ef;
  --ink: #080b12;
  --paper: #f5f1e8;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 50% 12%, #253250 0, #10172b 30%, #060810 72%),
    #060810;
  color: var(--ice);
  font-family: "Courier New", ui-monospace, monospace;
}

.page {
  width: min(1100px, calc(100% - 28px));
  min-height: 100svh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(20px, 4vh, 46px) 0 24px;
}

.game-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9.5;
  min-height: 570px;
  overflow: hidden;
  isolation: isolate;
  outline: none;
  border: 4px solid #e4e9f0;
  box-shadow:
    0 0 0 7px #090d17,
    0 0 0 10px #415170,
    0 28px 80px rgba(0,0,0,.62),
    inset 0 0 70px rgba(6,10,20,.38);
  background:
    radial-gradient(ellipse at 28% 18%, rgba(255,255,255,.72), transparent 34%),
    radial-gradient(ellipse at 76% 72%, rgba(255,255,255,.48), transparent 40%),
    radial-gradient(circle at 48% 48%, #99a5b6 0, #65748a 47%, #35445d 100%);
}

.game-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .42;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, rgba(0,0,0,.06) 2px 4px),
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(9,18,34,.08) 5px 7px);
  image-rendering: pixelated;
}

.game-screen::after {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 8;
  pointer-events: none;
  border: 2px solid rgba(238,245,255,.28);
  box-shadow: inset 0 0 44px rgba(0,0,0,.46);
}

.screen-noise {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: .24;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.26) 3px 4px);
  mix-blend-mode: multiply;
}

.pixel-title {
  position: absolute;
  z-index: 3;
  top: 8%;
  left: 7%;
  width: 68%;
  text-align: left;
}

.pixel-title img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  filter:
    drop-shadow(3px 0 0 #111622)
    drop-shadow(0 3px 0 #111622)
    drop-shadow(7px 7px 0 rgba(4,8,16,.42));
}

.pixel-title p {
  margin: 18px 0 0 17%;
  color: #fbf9f1;
  font-size: clamp(.78rem, 1.65vw, 1.18rem);
  font-weight: 700;
  letter-spacing: .21em;
  text-shadow: 2px 2px 0 #111622, 4px 4px 0 rgba(10,17,31,.38);
}

.game-stage {
  position: absolute;
  z-index: 2;
  left: 7%;
  right: 6%;
  top: 34%;
  bottom: 8%;
  display: grid;
  grid-template-columns: 44% 56%;
}

.game-menu {
  align-self: center;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(11px, 1.8vw, 20px);
  translate: 4% 15%;
}

.game-menu button {
  border: 0;
  padding: 2px 4px;
  color: #fffdf5;
  background: transparent;
  font: 800 clamp(1rem, 2.15vw, 1.55rem)/1.1 "Courier New", monospace;
  letter-spacing: .08em;
  text-align: left;
  text-shadow: 2px 2px 0 #0b101a, 4px 4px 0 rgba(18,27,42,.52);
  cursor: pointer;
}

.game-menu button span {
  display: inline-block;
  width: 1.2em;
  color: transparent;
  text-shadow: none;
}

.game-menu button.selected span,
.game-menu button:hover span,
.game-menu button:focus-visible span {
  color: #fffdf5;
  filter: drop-shadow(2px 2px 0 #101521);
}

.game-menu button:focus-visible { outline: 2px dashed #fff; outline-offset: 4px; }

.hero-area {
  position: relative;
  min-width: 0;
  height: 100%;
}

.character {
  display: none;
  position: absolute;
  z-index: 2;
  right: 5%;
  bottom: 0;
  max-width: 72%;
  max-height: 78%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(6px 8px 0 rgba(8,12,22,.25));
  transform-origin: bottom center;
}

.state-awake .character-awake,
.state-doze .character-doze,
.state-sleep .character-sleep { display: block; }

.state-doze .character { max-height: 76%; }
.state-sleep .character {
  right: -2%;
  max-width: 94%;
  max-height: 64%;
}

.pose-alt .character { animation: nudge .17s steps(2, end); }

.speech {
  position: absolute;
  z-index: 4;
  top: -3%;
  right: 0;
  width: min(88%, 355px);
  min-height: 92px;
  display: grid;
  place-items: center;
  padding: 16px 20px;
  color: #0c1018;
  background: var(--paper);
  border: 4px solid #0d111a;
  box-shadow: 7px 7px 0 rgba(8,13,23,.58), inset -3px -3px 0 #c5c3bd;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: clamp(.92rem, 1.65vw, 1.2rem);
  font-weight: 800;
  line-height: 1.55;
  text-align: left;
}

.speech::after {
  content: "";
  position: absolute;
  left: 45%;
  bottom: -25px;
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, var(--paper) 0 48%, #0d111a 49% 64%, transparent 65%);
  transform: rotate(45deg);
}

.state-sleep .speech { display: none; }

.sleep-glyph {
  display: none;
  position: absolute;
  z-index: 4;
  top: 7%;
  right: 8%;
  color: #e7f1ff;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 900;
  text-shadow: 4px 4px 0 #203c67;
  animation: float-z 2.2s steps(5, end) infinite;
}

.state-sleep .sleep-glyph { display: block; }

.game-copyright {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 2.6%;
  color: #f5f3ec;
  font-size: clamp(.63rem, 1.15vw, .86rem);
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
  text-shadow: 2px 2px 0 #151b28;
}

.formal-brand {
  width: min(390px, 76vw);
  margin-top: clamp(24px, 4vh, 42px);
  padding: 9px 14px;
  background: #fff;
  box-shadow: 0 8px 25px rgba(0,0,0,.28);
}

.formal-brand img {
  display: block;
  width: 100%;
  height: auto;
}

.dev-panel {
  display: none;
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  translate: -50% 0;
  gap: 5px;
  padding: 6px;
  border: 2px solid #8998b1;
  background: rgba(5,8,16,.94);
  box-shadow: 0 8px 28px #000;
}

.dev-panel.visible { display: flex; }

.dev-panel button {
  min-width: 42px;
  min-height: 36px;
  border: 1px solid #4f607b;
  color: #b9c8df;
  background: #111a2c;
  font: 700 .72rem/1 "Courier New", monospace;
  cursor: pointer;
}

.dev-panel button.active { color: #07101f; background: #e9f2ff; border-color: #fff; }

@keyframes nudge {
  0% { transform: translateX(0); }
  50% { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}

@keyframes float-z {
  0% { transform: translate(0, 8px) scale(.8); opacity: 0; }
  35%, 70% { opacity: 1; }
  100% { transform: translate(12px, -18px) scale(1.1); opacity: 0; }
}

@media (max-width: 720px) {
  .page { width: min(100% - 16px, 590px); padding-top: 16px; }
  .game-screen { aspect-ratio: auto; min-height: 650px; }
  .pixel-title { top: 7%; left: 5%; width: 90%; text-align: center; }
  .pixel-title img { width: 100%; }
  .pixel-title p { margin: 14px auto 0; font-size: clamp(.64rem, 2.9vw, .9rem); letter-spacing: .11em; }
  .game-stage { left: 4%; right: 4%; top: 29%; bottom: 9%; grid-template-columns: 39% 61%; }
  .game-menu { justify-self: start; translate: 0 27%; gap: 16px; }
  .game-menu button { font-size: clamp(.72rem, 3.35vw, 1rem); letter-spacing: .015em; white-space: nowrap; }
  .speech { top: 1%; right: 0; width: 100%; min-height: 86px; padding: 12px; font-size: clamp(.78rem, 3.4vw, 1rem); }
  .character { right: -2%; bottom: 3%; max-width: 95%; max-height: 66%; }
  .state-doze .character { max-height: 63%; }
  .state-sleep .character { right: -7%; max-width: 112%; max-height: 54%; }
  .game-copyright { font-size: .58rem; letter-spacing: .02em; }
  .formal-brand { width: min(330px, 78vw); margin-top: 24px; }
}

@media (max-height: 690px) and (orientation: landscape) {
  .page { padding: 18px 0; }
  .game-screen { width: min(900px, 93vw); min-height: 500px; }
  .formal-brand { width: 310px; margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}