@font-face { font-family: 'andika'; src: url('../munch/fonts/andika-bold.woff2') format('woff2'); font-weight: 700 900; font-display: block; }
:root {
  --font: 'andika', 'Century Gothic', system-ui, sans-serif;
  --ink: #140c1c; --paper: #f4f0e8; --bg: #0c0a14; --face: 256px;
  --glow: #ffd36e;
}
[data-era="dawn"] { --glow: #f4c86a; --tint: #3a2530; }
[data-era="machines"] { --glow: #7fe0c8; --tint: #16303a; }
[data-era="deep"] { --glow: #a99cff; --tint: #211c40; }
[data-era="games"] { --glow: #ffd36e; --tint: #1a3022; }
[data-era="attention"] { --glow: #5fd7ff; --tint: #0f1c30; }
[data-era="boom"] { --glow: #ff7fd0; --tint: #2a1238; }
[data-era="giants"] { --glow: #8cf27a; --tint: #161c20; }
[data-era="fair"] { --glow: #c8f08a; --tint: #22301a; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--paper); font-family: var(--font); font-weight: 700; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; }
canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
button { font: inherit; cursor: pointer; }
kbd { font: inherit; font-size: .7em; padding: 0 .35em; border-radius: 4px; background: rgba(255,255,255,.14); }
#view { position: fixed; inset: 0; margin: auto; display: block; }

/* ── hud */
#hud { position: fixed; inset: 0 0 auto 0; display: flex; justify-content: space-between; align-items: flex-start; padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left)); pointer-events: none; z-index: 5; }
#hud .tl, #hud .tr { display: flex; gap: 8px; align-items: center; }
#hud .tl > * { background: rgba(12,10,20,.78); border: 2px solid var(--ink); padding: 3px 10px; border-radius: 8px; font-size: 15px; }
#hud .tl > *:empty { display: none; }
#stars { color: #ffd36e; letter-spacing: 2px; }
#hud button { pointer-events: auto; background: rgba(12,10,20,.82); color: var(--paper); border: 2px solid #3a3050; border-radius: 10px; padding: 5px 10px; font-size: 15px; }
#hud button:hover { border-color: #ffd36e; }

/* ── toast */
#toast { position: fixed; top: 54px; left: 50%; transform: translateX(-50%); z-index: 8; display: flex; align-items: center; gap: 10px; background: #1a1428; border: 3px solid #ffd36e; border-radius: 12px; padding: 6px 16px 6px 6px; font-size: 18px; box-shadow: 0 6px 0 rgba(0,0,0,.35); max-width: 92vw; }
#toast canvas { width: 48px; height: 48px; border-radius: 6px; }
#toast:not(:has(canvas)) { padding: 8px 16px; }
#toast.go { animation: pop .3s ease-out; }
@keyframes pop { from { transform: translateX(-50%) scale(.6); opacity: 0; } }

/* ── dialogue: a big pixel portrait and the words */
#talk { position: fixed; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(1120px, calc(100vw - 20px)); z-index: 6;
  display: grid; grid-template-columns: var(--face) 1fr; gap: 14px; align-items: end; }
.pframe { width: var(--face); height: var(--face); border: 4px solid var(--ink); outline: 3px solid var(--glow); outline-offset: -1px; border-radius: 4px; background: var(--tint, #222); box-shadow: 0 8px 0 rgba(0,0,0,.45); }
.pframe canvas { width: 100%; height: 100%; display: block; }
#talk.mystery .pframe { outline-color: #fff; }
.tbody { position: relative; background: #f6f1e6; color: #1e1828; border: 4px solid var(--ink); border-radius: 10px; padding: 14px 20px 18px; min-height: calc(var(--face) * .62); box-shadow: inset 0 -5px 0 #ddd3c0, 0 8px 0 rgba(0,0,0,.45); }
.who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: -32px 0 8px -6px; }
.who b { background: var(--ink); color: var(--glow); padding: 4px 14px; border-radius: 8px; font-size: clamp(17px, 2.2vw, 24px); border: 3px solid var(--glow); }
.who small { color: #6a5e74; font-size: clamp(13px, 1.5vw, 16px); padding-top: 22px; }
.who b:empty { display: none; }
#ttext { margin: 0; font-size: clamp(17px, 2.15vw, 25px); line-height: 1.38; white-space: pre-line; min-height: 2.7em; }
.more { position: absolute; right: 14px; bottom: 6px; color: #e8743a; font-size: 18px; opacity: 0; }
#talk.waiting .more { opacity: 1; animation: bob .7s steps(2) infinite; }
@keyframes bob { 50% { transform: translateY(3px); } }
#choices { display: grid; gap: 8px; margin-top: 12px; }
#choices[hidden] { display: none; }
.choice { display: flex; align-items: center; gap: 10px; text-align: left; background: #fff; color: #1e1828; border: 3px solid #cfc3ad; border-radius: 10px; padding: 6px 12px; font-size: clamp(15px, 1.8vw, 20px); }
.choice canvas { width: 44px; height: 44px; border-radius: 4px; flex: none; }
.choice canvas.ic { width: 36px; height: 36px; }
.choice kbd { background: #eee4d0; color: #8a7a60; }
.choice.on, .choice:hover { border-color: var(--ink); background: #fff7d6; box-shadow: 0 0 0 3px var(--glow); }
@media (min-width: 900px) { #choices:has(.choice:nth-child(3)) { grid-template-columns: 1fr 1fr 1fr; } #choices:not(:has(.choice:nth-child(3))) { grid-template-columns: 1fr 1fr; } }
@media (max-height: 520px) { .tbody { padding: 10px 14px 12px; } #ttext { font-size: 15px; } .choice { padding: 3px 8px; font-size: 14px; } .choice canvas { width: 30px; height: 30px; } #choices { grid-template-columns: 1fr 1fr 1fr; gap: 5px; margin-top: 6px; } }
@media (max-width: 640px) and (orientation: portrait) { #talk { grid-template-columns: 1fr; justify-items: center; } }

/* ── the who's who book */
#album { position: fixed; inset: 0; z-index: 9; background: rgba(10,8,18,.96); overflow-y: auto; padding: 16px max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left)); touch-action: pan-y; }
#album header { display: flex; align-items: center; gap: 14px; max-width: 1100px; margin: 0 auto 6px; }
#album h2 { margin: 0; color: #ffd36e; font-size: 30px; }
#acount { color: #a89cb8; }
#aclose { margin-left: auto; background: none; border: 2px solid #3a3050; color: var(--paper); border-radius: 10px; font-size: 20px; padding: 2px 12px; }
#agrid { max-width: 1100px; margin: 0 auto; }
#agrid h3 { color: var(--glow); margin: 18px 0 8px; font-size: 18px; }
.arow { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.tile { background: var(--tint); border: 3px solid #2a2238; border-radius: 10px; padding: 6px 6px 8px; color: var(--paper); display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 14px; }
.tile canvas { width: 96px; height: 96px; border-radius: 4px; }
.tile.locked canvas { opacity: .8; }
.tile.locked span { color: #6a6078; }
.tile:focus-visible, .tile:hover { outline: none; border-color: var(--glow); }
#acard { position: fixed; inset: 0; margin: auto; width: min(860px, 94vw); max-height: 90vh; overflow-y: auto; background: #f6f1e6; color: #1e1828; border: 4px solid var(--ink); outline: 4px solid var(--glow); border-radius: 12px; padding: 22px; display: grid; grid-template-columns: minmax(160px, 256px) 1fr; gap: 22px; align-items: start; z-index: 10; touch-action: pan-y; }
#acard[hidden] { display: none; }
#acard > canvas { width: 100%; aspect-ratio: 1; border: 4px solid var(--ink); border-radius: 4px; }
.cinfo h2 { margin: 0; font-size: 30px; color: #1e1828; }
.crole { margin: 2px 0 10px; color: #6a5e74; }
.cinfo h4 { margin: 10px 0 4px; }
.cmade { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.cmade li { display: flex; align-items: center; gap: 6px; }
.cmade canvas { width: 36px; height: 36px; background: #2a2236; border-radius: 4px; }
.clines p { font-size: 18px; line-height: 1.4; margin: 10px 0; font-weight: 400; }
.cclose { position: absolute; right: 12px; top: 10px; background: none; border: 2px solid #cfc3ad; border-radius: 8px; font-size: 18px; padding: 0 10px; color: #1e1828; }
@media (max-width: 640px) { #acard { grid-template-columns: 1fr; } #acard > canvas { width: 50%; justify-self: center; } }

/* ── touch */
#touch { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
#stickzone { position: absolute; left: 0; top: 60px; bottom: 0; width: 50%; pointer-events: auto; }
#stickbase { position: fixed; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; background: rgba(255,255,255,.12); border: 3px solid rgba(255,255,255,.3); }
#stickknob { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(255,255,255,.55); }
#btn-a { position: absolute; right: max(22px, env(safe-area-inset-right)); bottom: max(26px, env(safe-area-inset-bottom)); width: 78px; height: 78px; border-radius: 50%; border: 4px solid var(--ink); background: #e8743a; color: #fff; font-size: 30px; pointer-events: auto; box-shadow: 0 5px 0 rgba(0,0,0,.4); }
body:has(#talk:not([hidden])) #btn-a, body:has(#album:not([hidden])) #touch { display: none; }

/* ── lobby */
#lobby { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; overflow-y: auto; padding: 20px; background: radial-gradient(ellipse at 50% 30%, #2a1e44, #0c0a14 70%); touch-action: pan-y; }
.lobby-card { text-align: center; max-width: 760px; }
.logo { margin: 0 0 6px; }
#logo { width: min(720px, 90vw); height: auto; }
.tag { font-size: clamp(18px, 2.6vw, 26px); margin: 4px 0 16px; color: #e8e0f0; }
#cast { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
#cast canvas { width: clamp(64px, 11vw, 96px); height: auto; aspect-ratio: 1; border: 3px solid var(--ink); outline: 2px solid #ffd36e55; border-radius: 4px; }
.lobby-btns { display: flex; gap: 12px; justify-content: center; align-items: center; margin-bottom: 14px; }
.big { font-size: 30px; padding: 12px 54px; border-radius: 14px; border: 4px solid var(--ink); background: #ffd36e; color: var(--ink); box-shadow: 0 6px 0 #a8702a; }
.big:hover { transform: translateY(-2px); }
.small { font-size: 16px; padding: 10px 16px; border-radius: 12px; border: 3px solid #3a3050; background: #1a1428; color: var(--paper); }
.lobby-small { color: #b8acc8; font-size: 15px; margin: 6px auto; max-width: 600px; font-weight: 400; }
.lobby-small.dim { color: #887c98; font-size: 13px; }
.back-home { position: fixed; left: 14px; bottom: 12px; color: #a89cb8; text-decoration: none; font-size: 14px; }