@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Serif+SC:wght@500;700&display=swap');

:root {
  --night: #06191a;
  --deep: #082526;
  --pine: #174b42;
  --moss: #3f7255;
  --paper: #e8e0c8;
  --muted: #91a99b;
  --lamp: #f6d77a;
  --ember: #e89b54;
  --line: rgba(193, 220, 195, .22);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--paper);
  background:
    radial-gradient(circle at 60% 20%, rgba(34, 92, 76, .18), transparent 38%),
    #031112;
  font-family: "DM Mono", monospace;
  overflow-x: hidden;
}
button, a { font: inherit; }
button { color: inherit; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.shell { width: min(1440px, 100%); min-height: 100vh; margin: auto; display: grid; grid-template-rows: 68px 1fr 48px; }
.topbar, footer { display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(18px, 4vw, 58px); }
.topbar { border-bottom: 1px solid var(--line); font-size: 12px; letter-spacing: .12em; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 500; }
.brand-mark { width: 27px; height: 27px; display: grid; place-items: center; color: var(--night); background: var(--paper); box-shadow: 4px 4px 0 #31534a; }
.brand-dim, #clock { color: var(--muted); }
.top-actions { display: flex; align-items: center; gap: 20px; }
.icon-button { border: 0; background: transparent; padding: 12px 0; cursor: pointer; font-size: 10px; letter-spacing: .1em; }
.icon-button:hover, .icon-button:focus-visible { color: var(--lamp); }

.game-frame { position: relative; min-height: 0; overflow: hidden; background: var(--night); }
canvas { width: 100%; height: 100%; min-height: 520px; display: block; outline: none; image-rendering: pixelated; }
canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--lamp); }

.intro { position: absolute; z-index: 4; top: 13%; left: clamp(24px, 7vw, 100px); max-width: 560px; transition: opacity .5s ease, transform .5s ease; }
.intro.hidden { opacity: 0; transform: translateY(-14px); pointer-events: none; }
.eyebrow { margin: 0 0 18px; color: #9fb7a7; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
h1, h2 { margin: 0; font-family: "Noto Serif SC", serif; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(38px, 6vw, 76px); letter-spacing: .08em; text-shadow: 0 4px 30px rgba(0,0,0,.4); }
.intro > p:not(.eyebrow) { color: #b8c8b9; margin: 20px 0 30px; font-family: "Noto Serif SC", serif; font-size: 14px; }
.intro button { border: 1px solid rgba(246,215,122,.62); padding: 12px 16px; background: rgba(6,25,26,.72); cursor: pointer; box-shadow: 4px 4px 0 rgba(246,215,122,.18); }
.intro button:hover, .intro button:focus-visible { color: var(--night); background: var(--lamp); }
kbd { border: 1px solid currentColor; padding: 2px 5px; font-size: .72em; box-shadow: 2px 2px 0 currentColor; }

.hint { position: absolute; z-index: 3; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(8px); display: flex; align-items: center; gap: 10px; padding: 9px 12px; color: var(--paper); background: rgba(3,17,18,.9); border: 1px solid var(--line); font-size: 10px; letter-spacing: .08em; opacity: 0; transition: .2s ease; pointer-events: none; }
.hint.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.hint-key { display: grid; place-items: center; width: 24px; height: 24px; color: var(--night); background: var(--lamp); font-weight: 700; }

.story-panel { position: absolute; z-index: 6; top: 0; right: 0; width: min(460px, 100%); height: 100%; padding: clamp(56px, 8vw, 100px) clamp(28px, 5vw, 64px); background: rgba(5, 26, 27, .96); border-left: 1px solid rgba(246,215,122,.26); transform: translateX(102%); transition: transform .42s cubic-bezier(.2,.8,.2,1); box-shadow: -24px 0 80px rgba(0,0,0,.38); }
.story-panel.open { transform: translateX(0); }
.story-panel h2 { font-size: clamp(30px, 4vw, 48px); margin-bottom: 26px; }
.story-panel #panelBody { color: #b8c8b9; font-family: "Noto Serif SC", serif; font-size: 16px; line-height: 1.95; }
.story-panel a { color: var(--lamp); text-underline-offset: 5px; }
.close { position: absolute; right: 24px; top: 20px; width: 44px; height: 44px; border: 0; background: transparent; font-size: 28px; cursor: pointer; }
.panel-foot { position: absolute; bottom: 24px; color: var(--muted); font-size: 10px; }

.mobile-controls { display: none; }
footer { color: #718a7f; border-top: 1px solid var(--line); font-size: 9px; letter-spacing: .12em; }

@media (max-width: 720px) {
  .shell { grid-template-rows: 58px minmax(600px, 1fr) 42px; }
  .brand-dim, #clock, footer span:nth-child(2), footer span:nth-child(3) { display: none; }
  .topbar { padding-inline: 16px; }
  .game-frame { min-height: 600px; }
  canvas { min-height: 600px; }
  .intro { top: 9%; left: 22px; right: 22px; }
  h1 { font-size: clamp(40px, 12vw, 58px); }
  .mobile-controls { position: absolute; z-index: 5; display: flex; align-items: end; justify-content: space-between; left: 18px; right: 18px; bottom: 18px; pointer-events: none; }
  .mobile-controls button { pointer-events: auto; border: 1px solid rgba(232,224,200,.28); background: rgba(3,17,18,.75); backdrop-filter: blur(5px); min-width: 48px; min-height: 48px; touch-action: none; }
  .dpad { width: 146px; display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(2, 48px); gap: 2px; }
  .dpad button:nth-child(1) { grid-column: 2; }
  .dpad button:nth-child(2) { grid-column: 1; }
  .dpad button:nth-child(3) { grid-column: 2; }
  .dpad button:nth-child(4) { grid-column: 3; }
  .interact { width: 62px; height: 62px; border-radius: 50%; color: var(--night); background: var(--lamp) !important; font-weight: 700; }
  .hint { bottom: 102px; }
  .story-panel { border-left: 0; padding-top: 76px; }
  footer { padding-inline: 16px; }
}

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