@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:ital,wght@0,500;0,700;0,800;1,600&family=Pixelify+Sans:wght@400;500;600;700&display=swap');

/* Lantern Crawl — a storybook adventure for the whole couch.
   Bright sky, rolling hills, cream pages with chunky ink outlines like the hero art,
   berry red for action, grass green for life, sunny gold for treasure. */
:root {
  --stone: #2f63c9; --stone-deep: #23409c; --stone-edge: #4a7fe0;
  --parch: #fff5df; --parch-shade: #ffe7b3; --parch-dark: #f0c674;
  --ink: #3b2412; --ink-soft: #7a5638;
  --gilt: #ffb627; --gilt-hi: #ffd85c;
  --blood: #e5484d; --moss: #43b047; --sky: #2d9cdb;
  --display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --body: 'Nunito', system-ui, sans-serif;
  --noise: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh; color: var(--parch); font: 600 18px/1.5 var(--body);
  background-color: var(--stone);
  background-image:
    radial-gradient(130% 38% at 18% 112%, #52b84a 0 60%, transparent 60.4%),
    radial-gradient(120% 44% at 88% 118%, #3e9c41 0 60%, transparent 60.4%),
    radial-gradient(10% 6% at 14% 14%, rgba(255,255,255,.55) 0 60%, transparent 62%),
    radial-gradient(14% 7% at 19% 16%, rgba(255,255,255,.45) 0 60%, transparent 62%),
    radial-gradient(12% 6% at 82% 9%, rgba(255,255,255,.4) 0 60%, transparent 62%),
    radial-gradient(9% 5% at 88% 12%, rgba(255,255,255,.35) 0 60%, transparent 62%),
    linear-gradient(180deg, #4a8ef0 0%, #2f63c9 55%, #2a4fae 100%);
  background-attachment: fixed;
}
h1, h2, h3, .display { font-family: var(--display); font-weight: 600; letter-spacing: 0; margin: 0; line-height: 1.08; }
button { font: 700 18px/1.2 var(--body); cursor: pointer; border: 0; touch-action: manipulation; color: inherit; background: none; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 4px solid var(--gilt-hi); outline-offset: 3px; }
input, textarea { font: 700 18px/1.4 var(--body); width: 100%; padding: 12px 14px; border-radius: 12px; border: 3px solid var(--ink); background: #fff; color: var(--ink); }
textarea { resize: none; min-height: 92px; }
.ico { width: 1em; height: 1em; fill: currentColor; display: inline-block; vertical-align: -0.14em; flex: none; }

/* Primary action: a chunky toy button */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 13px 26px; border-radius: 16px; font: 600 24px/1 var(--display);
  color: #fff; background: var(--blood); border: 3px solid var(--ink);
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.18), inset 0 3px 0 rgba(255,255,255,.35), 0 6px 0 var(--ink);
  text-shadow: 0 2px 0 rgba(0,0,0,.2);
  transition: transform .08s, box-shadow .08s;
}
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), inset 0 3px 0 rgba(255,255,255,.35), 0 2px 0 var(--ink); }
.btn:disabled { filter: grayscale(.7); opacity: .55; cursor: default; }
.btn.quiet { background: rgba(255,255,255,.12); color: #fff; border: 3px solid rgba(255,255,255,.7); box-shadow: none; font-family: var(--body); font-size: 17px; font-weight: 800; padding: 10px 16px; text-shadow: none; }
.btn.quiet:active { transform: none; }

/* Cream storybook page with an ink outline */
.parch {
  color: var(--ink); background: var(--parch);
  border: 3px solid var(--ink); border-radius: 18px;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.8), 0 6px 0 rgba(43,26,12,.45), 0 16px 30px rgba(20,30,80,.28);
}
.parch .muted { color: var(--ink-soft); }
.muted { color: rgba(255,255,255,.8); }
.err { color: #ffd0cc; min-height: 1.3em; }
.parch .err { color: var(--blood); }

/* Health: a rounded bar with grass fill */
.hp { height: 11px; border: 2px solid var(--ink); border-radius: 8px; background: rgba(59,36,18,.15); overflow: hidden; }
.hp > i { display: block; height: 100%; background: linear-gradient(#6fd36a, var(--moss)); transform-origin: left; border-radius: 6px; }
.hp.enemy { height: 14px; }
.hp.enemy > i { background: linear-gradient(#ff7a7e, var(--blood)); }

.chips { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 16px; }
.chips span { opacity: .55; }
.chips span.done { opacity: 1; }
.chips span.done::before { content: '✓ '; color: var(--gilt); }
.chips span.out { text-decoration: line-through; opacity: .35; }

/* Living maps: torches flicker, light breathes, fireflies drift */
.flame { animation: flame .35s ease-in-out infinite alternate; }
@keyframes flame { from { transform: scale(1, 1); } to { transform: scale(.88, 1.12) skewX(3deg); } }
.torchlight { animation: torchlight 1.7s ease-in-out infinite alternate; }
@keyframes torchlight { from { opacity: .75; } to { opacity: 1; } }
.mote { animation: mote 9s ease-in-out infinite; opacity: 0; }
@keyframes mote { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .9; } 50% { transform: translate(30px, -26px); opacity: .5; } 80% { opacity: .9; } 100% { opacity: 0; transform: translate(-10px, -60px); } }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
/* ---------- pixel skin (party mode): pixel type, hard pixel outlines, a living pixel countryside ---------- */
:root { --display: 'Pixelify Sans', 'Fredoka', system-ui, sans-serif; }
body { background: #3878d4; }
.btn { border-radius: 0; border: 0; box-shadow: 0 0 0 3px var(--ink), inset 0 -5px 0 rgba(0,0,0,.22), inset 0 3px 0 rgba(255,255,255,.35), 0 6px 0 3px var(--ink); }
.btn:active:not(:disabled) { box-shadow: 0 0 0 3px var(--ink), inset 0 -3px 0 rgba(0,0,0,.22), inset 0 3px 0 rgba(255,255,255,.35), 0 2px 0 3px var(--ink); }
.btn.quiet { border-radius: 0; border: 0; box-shadow: 0 0 0 3px rgba(255,255,255,.8); }
.parch { border-radius: 0; border: 0; box-shadow: 0 0 0 4px var(--ink), inset 0 0 0 3px #fff, inset 0 -6px 0 rgba(240,198,116,.45), 8px 8px 0 4px rgba(20,30,80,.35); }
input, textarea { border-radius: 0; border: 0; box-shadow: 0 0 0 3px var(--ink); }
.hp { border-radius: 0; } .hp > i { border-radius: 0; background: #43b047; box-shadow: inset 0 -3px 0 #2e8a34, inset 0 2px 0 #7ad860; }
#embers, #glow { display: none; }