:root {
  color-scheme: dark;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --ink: #243027;
  --paper: #e9e0c7;
  --gold: #d6ae66;
  --night: #111813;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow: hidden;
  background: #0a0f0c;
  color: #f4eedc;
}

button, input { font: inherit; }
button { cursor: pointer; }

.game {
  position: relative;
  width: 100vw;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 67% 68%, rgba(222, 145, 61, .15), transparent 15%),
    linear-gradient(#111927 0%, #26372f 54%, #121b14 100%);
}

.sky, .mountains, .grass, .fireflies { position: absolute; inset: 0; pointer-events: none; }
.sky { z-index: 0; background: linear-gradient(180deg, rgba(8, 13, 25, .4), transparent 70%); transition: opacity 1.4s ease; }

.city-layer {
  position: absolute; inset: 0; z-index: 2;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(93, 219, 255, .055) 1px, transparent 1px),
    linear-gradient(rgba(93, 219, 255, .035) 1px, transparent 1px),
    radial-gradient(circle at 60% 46%, rgba(50, 180, 230, .16), transparent 26%),
    linear-gradient(135deg, #06131e 0%, #0b2635 58%, #102f3c 100%);
  background-size: 90px 90px, 90px 90px, auto, auto;
  transition: opacity 1.5s ease, filter 1.5s ease;
}
.game.border-mode .city-layer { opacity: 0; filter: blur(16px); }
.game:not(.border-mode) .mountains,
.game:not(.border-mode) .grass,
.game:not(.border-mode) .moon,
.game:not(.border-mode) .fire,
.game:not(.border-mode) .fireflies { opacity: 0; }
.mountains, .grass, .moon, .fire, .fireflies { transition: opacity 1.8s ease; }

.office-ceiling {
  position: absolute; inset: 0 0 auto; height: 17%;
  background: linear-gradient(180deg, #102b38, rgba(5,16,25,.3));
  border-bottom: 1px solid rgba(103, 218, 255, .16);
}
.office-ceiling i { position: absolute; top: 26%; width: 25%; height: 5px; background: #c9f7ff; box-shadow: 0 0 18px #63d9ff; transform: skewX(-25deg); opacity: .75; }
.office-ceiling i:nth-child(1) { left: -3%; }
.office-ceiling i:nth-child(2) { left: 38%; }
.office-ceiling i:nth-child(3) { right: -4%; }

.city-windows {
  position: absolute; inset: 16% 4% 17%;
  border: 1px solid rgba(122, 218, 247, .13);
  background:
    repeating-linear-gradient(90deg, transparent 0 15.7%, rgba(112,208,238,.16) 15.8% 16%),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(132,222,250,.14) 19px 20px),
    linear-gradient(180deg, rgba(1,8,16,.65), rgba(8,31,43,.36));
  box-shadow: inset 0 0 70px rgba(0,0,0,.55);
  clip-path: polygon(0 0, 100% 0, 100% 77%, 0 100%);
}

.glass-desk {
  position: absolute; left: 7%; right: 5%; bottom: -16%; height: 42%;
  border: 2px solid rgba(117, 229, 255, .45);
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, rgba(94,201,231,.28), rgba(13,72,94,.58));
  box-shadow: 0 -5px 30px rgba(80,216,255,.22), inset 0 6px 20px rgba(172,241,255,.18);
}

.empty-citizen { position: absolute; left: 66%; bottom: 16%; width: 120px; height: 210px; opacity: .42; filter: drop-shadow(0 0 16px #3ccef5); }
.empty-citizen i { position: absolute; top: 0; left: 36px; width: 50px; height: 50px; border: 1px solid #78e5ff; border-radius: 50%; background: radial-gradient(circle, rgba(107,224,255,.2), transparent 70%); }
.empty-citizen b { position: absolute; top: 55px; left: 15px; width: 92px; height: 148px; border: 1px solid #78e5ff; border-radius: 44% 44% 15% 15%; background: repeating-linear-gradient(105deg, rgba(100,220,250,.17) 0 1px, transparent 2px 8px); }

.holo-panels { position: absolute; left: 7%; bottom: 25%; display: grid; grid-template-columns: repeat(2, minmax(150px, 230px)); gap: 12px; perspective: 700px; }
.holo-panels span {
  min-height: 76px; padding: 17px 19px;
  border: 1px solid rgba(117, 229, 255, .65);
  color: rgba(199,245,255,.72); background: rgba(17,81,105,.24);
  box-shadow: inset 0 0 24px rgba(63,203,242,.08), 0 0 14px rgba(49,181,220,.08);
  font: 11px/1.5 system-ui, sans-serif; letter-spacing: .09em;
  transform: rotateY(8deg);
}
.holo-panels strong { display: block; margin-top: 4px; color: #c9f8ff; font-size: 22px; font-weight: 400; }
.data-bit { position: absolute; color: rgba(109,225,255,.7); font: 9px/1 monospace; text-shadow: 0 0 8px #4ad7ff; animation: dataFloat 7s linear infinite; }
@keyframes dataFloat { from { transform: translateY(40px); opacity: 0; } 20%,80% { opacity: .8; } to { transform: translateY(-110px); opacity: 0; } }

.moon {
  position: absolute;
  top: 8%; right: 13%;
  width: 84px; aspect-ratio: 1;
  border-radius: 50%;
  background: #efe5c6;
  box-shadow: 0 0 55px rgba(240, 226, 182, .28);
  opacity: .8;
}

.star { position: absolute; width: 2px; height: 2px; background: #fff; border-radius: 50%; opacity: .6; }
.star-a { left: 16%; top: 18%; box-shadow: 130px 42px #fff, 310px -18px #fff, 590px 62px #fff; }
.star-b { left: 32%; top: 9%; box-shadow: 240px 78px #fff, 520px 22px #fff, 760px 84px #fff; }
.star-c { left: 8%; top: 31%; box-shadow: 190px -48px #fff, 430px 14px #fff, 820px -70px #fff; }

.mountains-back {
  z-index: 1;
  top: 28%;
  background: #26382f;
  clip-path: polygon(0 49%, 12% 31%, 23% 47%, 37% 18%, 50% 48%, 65% 29%, 79% 52%, 91% 22%, 100% 42%, 100% 100%, 0 100%);
  opacity: .78;
}

.mountains-front {
  z-index: 1;
  top: 42%;
  background: #15251c;
  clip-path: polygon(0 41%, 15% 20%, 31% 45%, 47% 29%, 61% 57%, 77% 24%, 88% 43%, 100% 28%, 100% 100%, 0 100%);
}

.grass {
  z-index: 2;
  top: 65%;
  background:
    repeating-linear-gradient(78deg, transparent 0 16px, rgba(111, 132, 74, .25) 17px 18px, transparent 19px 30px),
    linear-gradient(180deg, #17281b, #09110c);
}

.fire {
  position: absolute;
  left: 67%; top: 71%;
  width: 70px; height: 92px;
  filter: drop-shadow(0 0 28px rgba(235, 133, 43, .65));
  transform-origin: bottom center;
  animation: breathe 2.2s ease-in-out infinite;
}
.fire i, .fire b, .fire em {
  position: absolute; bottom: 0; left: 50%;
  display: block; border-radius: 55% 45% 60% 40%;
  transform: translateX(-50%) rotate(45deg);
}
.fire i { width: 54px; height: 54px; background: #d7642f; }
.fire b { width: 38px; height: 38px; bottom: 4px; background: #efaa48; }
.fire em { width: 20px; height: 20px; bottom: 7px; background: #ffe39c; }
@keyframes breathe { 50% { transform: scale(.94, 1.08) rotate(-1deg); } }

.firefly {
  position: absolute;
  width: 4px; height: 4px; border-radius: 50%;
  background: #e8d888;
  box-shadow: 0 0 8px #dec970;
  animation: drift 8s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate(35px, -45px); opacity: .25; } }

.topbar {
  position: absolute; z-index: 5; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 26px clamp(24px, 5vw, 72px);
}
.eyebrow { margin: 0 0 4px; font: 10px/1.2 system-ui, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.5); }
h1 { margin: 0; font-size: clamp(19px, 2vw, 30px); font-weight: 500; letter-spacing: .18em; }
.icon-button { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: #fff; background: rgba(0,0,0,.15); }
.icon-button.active { color: #1a211a; background: var(--gold); }

.screen { position: absolute; inset: 0; z-index: 3; transition: opacity .7s ease; }
.hidden { visibility: hidden; opacity: 0; pointer-events: none; }

.start-screen, .ending-screen { display: grid; place-items: center; padding: 96px 24px 34px; background: rgba(4, 9, 7, .25); }
.paper {
  position: relative;
  width: min(620px, 92vw);
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(96, 72, 43, .06) 1px, transparent 1px),
    linear-gradient(var(--paper), #ded3b9);
  background-size: 17px 100%, auto;
  box-shadow: 0 18px 70px rgba(0,0,0,.38);
  padding: clamp(34px, 6vw, 70px);
  transform: rotate(-.35deg);
}
.paper::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(60, 52, 37, .18); pointer-events: none; }
.small-title { margin: 0 0 22px; font-size: 12px; letter-spacing: .2em; opacity: .62; }
.paper h2 { margin: 0 0 24px; font-weight: 500; font-size: clamp(32px, 5vw, 55px); line-height: 1.35; letter-spacing: .08em; }
.paper p { line-height: 2; }
.primary-button {
  display: block;
  margin: 32px 0 0 auto;
  padding: 13px 21px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  letter-spacing: .12em;
}

.system-paper {
  width: min(670px, 92vw);
  color: #d8f7ff;
  background:
    linear-gradient(90deg, rgba(113,225,255,.05) 1px, transparent 1px),
    linear-gradient(rgba(17, 64, 80, .82), rgba(5, 25, 37, .9));
  background-size: 24px 100%, auto;
  border: 1px solid rgba(116, 227, 255, .48);
  box-shadow: 0 0 50px rgba(56,190,229,.15), inset 0 0 40px rgba(66,204,240,.07);
  transform: none;
  backdrop-filter: blur(14px);
}
.system-paper::before { border-color: rgba(132,228,255,.16); }
.system-paper h2 { color: #ebfcff; text-shadow: 0 0 26px rgba(85,218,255,.22); }
.system-paper .small-title { font-family: system-ui, sans-serif; color: #82dff7; }
.system-paper .primary-button { color: #dffaff; border-color: #6edbf5; }
.system-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 25px; font: 10px/1.4 system-ui, sans-serif; letter-spacing: .08em; color: rgba(200,242,250,.6); }
.system-metrics span { padding: 9px; border: 1px solid rgba(113,221,248,.19); }
.system-metrics i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #64e0ff; box-shadow: 0 0 7px #64e0ff; }
.system-metrics .warning { color: rgba(247,187,159,.8); }
.system-metrics .warning i { background: #ef8e70; box-shadow: 0 0 7px #ef8e70; }

.play-screen { padding: 110px clamp(24px, 6vw, 90px) 45px; }
.scene-copy { max-width: 46%; }
.time-label { margin: 0 0 16px; color: var(--gold); font-size: 12px; letter-spacing: .22em; }
.scene-text { margin: 0; font-size: clamp(18px, 2vw, 28px); line-height: 1.8; text-shadow: 0 2px 10px #000; }

.question-card {
  position: absolute;
  right: clamp(24px, 6vw, 90px); bottom: clamp(34px, 7vh, 78px);
  width: min(430px, 42vw);
  padding: 25px 28px 22px;
  color: var(--ink);
  background: rgba(234, 225, 201, .96);
  box-shadow: 0 16px 55px rgba(0,0,0,.35);
}

.query-machine {
  position: absolute; left: 43%; top: 46%;
  width: 150px; height: 250px;
  border: 1px solid rgba(169,205,174,.25);
  border-radius: 48% 48% 18% 18% / 18% 18% 10% 10%;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 15% 85%, rgba(255,255,255,.06)),
    linear-gradient(180deg, #273d30, #111e17);
  box-shadow: 0 20px 45px rgba(0,0,0,.55), inset 0 0 25px rgba(0,0,0,.35), 0 0 35px rgba(218,162,70,.08);
}
.query-machine::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: -17px; height: 24px; border-radius: 50%; background: #0c120e; box-shadow: 0 5px 10px #000; }
.machine-eye { position: absolute; left: 50%; top: 35px; width: 48px; height: 48px; transform: translateX(-50%); border: 1px solid #d2aa64; border-radius: 50%; background: radial-gradient(circle, #f4d789 0 8%, #ad8144 10% 18%, #101a13 20% 100%); box-shadow: 0 0 20px rgba(234,188,102,.25); }
.machine-slot { position: absolute; left: 31px; right: 31px; top: 104px; height: 7px; border-radius: 5px; background: #070b08; box-shadow: inset 0 1px 2px #000; }
.machine-label { position: absolute; left: 0; right: 0; bottom: 45px; color: rgba(205,219,201,.35); font: 9px/1.5 system-ui, sans-serif; letter-spacing: .18em; text-align: center; }

.dial-card { width: min(360px, 36vw); padding: 20px 24px 19px; background: rgba(24, 40, 30, .95); color: #eef0dc; border: 1px solid rgba(198,211,170,.18); }
.dial-card .question-heading { color: rgba(228,235,207,.72); }
.dial-display {
  margin: 15px 0 13px;
  padding: 9px 12px;
  border: 1px solid rgba(185,200,158,.18);
  color: #d9bc79;
  background: #0c1710;
  box-shadow: inset 0 0 13px rgba(0,0,0,.55);
  font: 24px/1.2 ui-monospace, "SFMono-Regular", monospace;
  letter-spacing: .35em;
  text-align: center;
}
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px 13px; padding: 3px 15px 12px; }
.keypad button {
  justify-self: center;
  width: 48px; height: 48px;
  border: 1px solid rgba(215,222,187,.32);
  border-radius: 50%;
  color: #e9ebd7;
  background: radial-gradient(circle at 38% 30%, #61705b, #263328 65%, #18211a);
  box-shadow: 0 4px 7px rgba(0,0,0,.55), inset 0 1px 3px rgba(255,255,255,.16);
  font: 20px/1 system-ui, sans-serif;
  text-shadow: 0 1px 2px #000;
  transition: transform .08s, filter .08s;
}
.keypad button:active { transform: translateY(2px); filter: brightness(.8); }
.keypad button:disabled { opacity: .3; cursor: default; }
.dial-note { min-height: 3.3em; color: rgba(230,235,213,.62); }
.dial-note strong { color: #d9bc79; font-family: ui-monospace, monospace; letter-spacing: .12em; }
.token-counter i { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid rgba(218,188,121,.55); border-radius: 50%; color: #d9bc79; background: #263329; font: 8px/1 system-ui, sans-serif; transform: none; }
.token-counter i.used { transform: scale(.65); opacity: .12; }
.dialogue-heading { display: flex; justify-content: space-between; align-items: center; }
.dialogue-heading .speaker { margin-bottom: 11px; }
.dialogue-heading span { color: rgba(255,255,255,.38); font: 10px/1 system-ui, sans-serif; letter-spacing: .1em; }
.question-heading { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: .18em; opacity: .7; }
.ink-counter { display: flex; gap: 7px; }
.ink-counter i { width: 11px; height: 15px; display: block; border-radius: 60% 40% 58% 42%; transform: rotate(45deg); background: #243027; transition: opacity .4s, transform .4s; }
.ink-counter i.used { opacity: .13; transform: rotate(45deg) scale(.6); }
.question-card blockquote { margin: 18px 0; padding: 0 0 0 16px; border-left: 2px solid rgba(36,48,39,.3); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.8; }
.instruction, .input-note { margin: 0; font-size: 11px; line-height: 1.7; opacity: .62; }
.word-form { display: flex; margin: 15px 0 13px; border-bottom: 1px solid rgba(36,48,39,.45); }
.word-form input { flex: 1; min-width: 0; padding: 12px 4px; border: 0; outline: 0; color: var(--ink); background: transparent; }
.word-form button { border: 0; padding: 0 7px; color: var(--ink); background: transparent; }
.hint-row { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-bottom: 12px; }
.hint-row button { border: 0; border-bottom: 1px dashed rgba(36,48,39,.35); padding: 3px 0; color: rgba(36,48,39,.7); background: transparent; font-size: 11px; }
.hint-row button:disabled { text-decoration: line-through; opacity: .25; cursor: default; }

.dialogue-panel {
  position: absolute; left: clamp(24px, 6vw, 90px); bottom: clamp(45px, 9vh, 100px);
  width: min(510px, 48vw);
  padding: 24px 27px;
  background: rgba(7, 14, 10, .82);
  border-left: 2px solid var(--gold);
  backdrop-filter: blur(9px);
}
.speaker { margin: 0 0 11px; color: var(--gold); font-size: 12px; letter-spacing: .16em; }
.dialogue-text { min-height: 5.6em; margin: 0; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.85; }
.text-button { display: block; margin: 16px 0 0 auto; border: 0; color: rgba(255,255,255,.7); background: transparent; }

.ending-paper { width: min(700px, 92vw); max-height: calc(100svh - 130px); overflow: auto; }
.collected-words { font-size: 12px; letter-spacing: .22em; opacity: .55; }
.ending-paper h2 { font-size: clamp(27px, 4vw, 43px); }
.final-answer { padding: 14px 18px; border-left: 2px solid rgba(36,48,39,.35); font-size: clamp(15px, 1.5vw, 19px); }
.ending-dialogue { margin-top: 20px; line-height: 1.9; font-size: 14px; opacity: .8; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 760px) {
  .game { min-height: 680px; }
  .topbar { padding: 18px 20px; }
  .eyebrow { display: none; }
  .play-screen { padding: 90px 20px 24px; }
  .scene-copy { max-width: 100%; }
  .question-card { right: 18px; left: auto; bottom: 18px; width: 260px; padding: 14px 16px; }
  .dialogue-panel { left: 18px; right: 18px; bottom: 340px; width: auto; }
  .moon { width: 55px; top: 12%; }
  .fire { left: 65%; top: 54%; transform: scale(.75); }
  .hint-row { gap: 3px 11px; }
  .keypad { gap: 5px 11px; padding: 2px 10px 7px; }
  .keypad button { width: 38px; height: 38px; font-size: 16px; }
  .dial-display { margin: 8px 0; padding: 5px 8px; font-size: 18px; }
  .dial-note { font-size: 9px; }
  .query-machine { left: 12%; top: 38%; transform: scale(.65); transform-origin: top left; }
  .holo-panels { left: 5%; right: 5%; bottom: 22%; grid-template-columns: 1fr 1fr; }
  .holo-panels span { min-height: 62px; padding: 11px; }
  .holo-panels strong { font-size: 17px; }
  .empty-citizen { left: 62%; transform: scale(.7); transform-origin: bottom center; }
  .system-metrics { grid-template-columns: 1fr; }
}