/* Soft Quest website — the app's own look: same palette, same two
   fonts (Press Start 2P for titles, buttons and CAPS labels; Roboto
   Mono for prose), same 2px pixel borders, same Haze. */
@font-face {
  font-family: 'Press Start 2P';
  src: url('/fonts/PressStart2P-Regular.ttf') format('truetype');
  font-display: swap;
}
:root {
  --cream:#ece7df; --cream-light:#f6f1e8; --cream-dark:#d4cec3; --paper:#faf6ed;
  --wood:#5d564e; --wood-light:#8a847a; --wood-dark:#3a342d; --wood-darker:#1d1a16;
  --ink:#1a1611; --ink-soft:#4a423a;
  --ember:#ff4000; --ember-light:#ff7040; --ember-dark:#b32d00;
  --px:2px;
  --display:'Press Start 2P', ui-monospace, monospace;
  --body:'Roboto Mono', ui-monospace, 'SF Mono', Menlo, 'Courier New', monospace;
}
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:var(--body); }

/* The Haze: the app's dithered fog, behind everything. */
canvas.haze { position:fixed; inset:0; width:100%; height:100%; opacity:.42;
  image-rendering:pixelated; image-rendering:crisp-edges; pointer-events:none; z-index:0; }

main { position:relative; z-index:1; min-height:100vh; min-height:100dvh; display:flex;
  flex-direction:column; align-items:center; justify-content:center;
  padding:28px 16px calc(env(safe-area-inset-bottom, 0px) + 56px); text-align:center; }

/* ---- Masthead: the intro's line-up, title, tagline ---- */
.hero { display:flex; justify-content:center; margin:8px 0 4px; min-height:72px; }
.mage { display:inline-block; animation:bob 2200ms ease-in-out infinite; }
.mage i { display:block; width:54px; height:72px; background-repeat:no-repeat;
  background-size:200% 100%; image-rendering:pixelated; image-rendering:crisp-edges;
  animation:idle 1.4s steps(1) infinite; }
@keyframes bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
@keyframes idle { 0%,49% { background-position:0 0; } 50%,100% { background-position:100% 0; } }

h1 { font-family:var(--display); font-weight:normal; font-size:25px; letter-spacing:2px;
  text-indent:2px; line-height:1; color:var(--ember); margin:20px 0 14px; }
.tag { font-size:14px; letter-spacing:6px; text-indent:6px; text-transform:uppercase;
  white-space:nowrap; color:var(--wood-dark); }

/* Things arrive in order, as in the intro. */
.reveal { opacity:0; animation:reveal 700ms ease-out forwards; }
.r-title { animation-delay:400ms; }
.r-tag { animation-delay:1700ms; }
.r-body { animation-delay:2700ms; }
.r-foot { animation-delay:3200ms; }
@keyframes reveal { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

/* ---- The app's panel, label, prose, buttons ---- */
.panel { width:100%; max-width:360px; margin-top:26px; text-align:left; background:var(--paper);
  padding:14px 14px 16px; border:var(--px) solid var(--wood-dark);
  box-shadow: inset var(--px) var(--px) 0 var(--cream-light),
    inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--cream-dark),
    var(--px) var(--px) 0 var(--wood-dark); }
.panel-title { font-family:var(--display); font-size:11px; letter-spacing:1px; line-height:1.1;
  text-transform:uppercase; color:var(--wood-dark); margin:0 0 10px; }
.prose { font-size:12px; line-height:1.55; color:var(--ink-soft); margin:0; }
.label { font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-soft); }

.code-row { display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:12px 0 2px; padding:10px 12px; background:var(--cream-light);
  border:var(--px) solid var(--wood-dark); box-shadow: inset var(--px) var(--px) 0 var(--cream-dark); }
.code { font-family:var(--display); font-size:15px; letter-spacing:3px; color:var(--ink); }

.btn { display:flex; align-items:center; justify-content:center; width:100%; margin-top:10px;
  font-family:var(--display); font-size:11px; letter-spacing:1px; line-height:1.3;
  padding:12px 14px; text-decoration:none; text-align:center; cursor:pointer;
  border:var(--px) solid var(--wood-darker); transition:transform 80ms; }
.btn:active { transform:translate(1px, 1px); }
.btn-primary { background:var(--wood); color:var(--paper);
  box-shadow: inset var(--px) var(--px) 0 var(--wood-light),
    inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--wood-darker),
    var(--px) var(--px) 0 var(--wood-darker); }
.btn-ghost { background:var(--cream-light); color:var(--wood-dark); border-color:var(--wood-dark);
  box-shadow: inset var(--px) var(--px) 0 var(--paper),
    inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--cream-dark),
    var(--px) var(--px) 0 var(--wood-dark); }

.rule { height:var(--px); background:var(--cream-dark); margin:16px 0 12px; }
ol.steps { margin:8px 0 0; padding-left:20px; font-size:12px; line-height:1.6; color:var(--ink-soft); }

footer { position:fixed; left:0; right:0; bottom:calc(env(safe-area-inset-bottom, 0px) + 16px);
  z-index:1; text-align:center; font-size:11px; color:var(--ink-soft); }
footer a { color:var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .mage, .mage i { animation:none; }
  .reveal { animation:none; opacity:1; }
}

/* ---- Nap Trap Games additions ---- */
/* Soft Quest's Dream purple for the studio title. */
h1.studio { font-size:19px; letter-spacing:2px; text-indent:2px; line-height:1.3; color:#a570ff; }
@media (min-width: 480px) { h1.studio { font-size:25px; } }
.tag.studio { font-size:12px; letter-spacing:4px; text-indent:4px; white-space:normal; }
.panel + .panel { margin-top:14px; }
.prose + .prose { margin-top:8px; }
.prose a, .doc a { color:var(--ink); }
.game { display:flex; align-items:center; gap:12px; margin-top:4px; }
.game .mage { animation:none; }
.game-name { font-family:var(--display); font-size:11px; letter-spacing:1px; color:var(--ember); }
/* No mages on this site: the title leads. */
main > h1.studio:first-child { margin-top:8px; }

/* The legal line: plain, always visible at the foot of the page. */
footer.legal { position:static; margin-top:28px; padding:0 16px; font-size:11px; line-height:1.7;
  color:var(--ink-soft); text-align:center; }
footer.legal a { color:var(--ink); }

/* Long-form pages (privacy). */
main.page { justify-content:flex-start; padding-top:36px; }
.doc { width:100%; max-width:640px; text-align:left; }
.doc h2 { font-family:var(--display); font-size:11px; letter-spacing:1px; line-height:1.4;
  color:var(--wood-dark); margin:22px 0 8px; }
.doc p, .doc li { font-size:13px; line-height:1.65; color:var(--ink-soft); }
.doc p { margin:0 0 10px; }
.doc ul { margin:0 0 10px; padding-left:20px; }
.doc strong { color:var(--ink); }
.back { display:inline-block; margin-bottom:14px; font-size:12px; color:var(--ink); }
.panel.doc { max-width:640px; }