@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: #1d2a22; --leaf: #2f6a3a; --sun: #ffd84a; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #2f6a3a; color: #fff; font-family: var(--font); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
#view { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }
button { font: inherit; border: 0; cursor: pointer; }
[hidden] { display: none !important; }

/* ── lobby */
#lobby { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 35%, #0000 0, #0008 80%); overflow: auto; padding: 2vh 16px; }
.lobby-card { text-align: center; width: min(1200px, 100%); }
.logo { margin: 0; line-height: .82; font-weight: 900; text-transform: uppercase; letter-spacing: -1px; filter: drop-shadow(0 6px 0 #0006); }
.logo span { display: block; }
.logo span:first-child { font-size: clamp(44px, 12vh, 120px); color: var(--sun); -webkit-text-stroke: 3px #6a4208; paint-order: stroke fill; }
.logo span:last-child { font-size: clamp(32px, 8vh, 82px); color: #8ee06a; -webkit-text-stroke: 3px #143a1a; paint-order: stroke fill; }
.lobby-hint { font-size: clamp(16px, 3.2vh, 28px); text-shadow: 0 2px 4px #000a; margin: 1.6vh 0; }
.lobby-hint b, .seat b { color: var(--sun); }
.seats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5vw; }
.seat { background: #0007; border: 4px dashed #fff5; border-radius: 22px; padding: 1.2vh 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 24vh; transition: transform .15s; }
.seat.in { border: 5px solid var(--c); background: color-mix(in srgb, var(--c) 22%, #000a); }
.seat.ready { transform: scale(1.04); box-shadow: 0 0 0 4px #fff, 0 0 30px var(--c); }
.seat canvas { width: 100%; max-width: 240px; height: auto; aspect-ratio: 240 / 170; max-height: 17vh; object-fit: contain; }
.seat b { font-size: clamp(15px, 2.8vh, 26px); color: #fff; line-height: 1.1; }
.seat small { font-size: clamp(12px, 2vh, 17px); opacity: .9; margin-top: 3px; }
.seat .empty { font-size: 9vh; opacity: .5; }
.lobby-btns { display: flex; gap: 12px; justify-content: center; margin: 1.8vh 0 1vh; }
.lobby-btns .big { background: var(--sun); color: #3a2400; font-size: clamp(20px, 3.6vh, 32px); font-weight: 900; padding: .5em 2em; border-radius: 999px; box-shadow: 0 5px 0 #a0700a; }
.lobby-btns .big:disabled { opacity: .45; cursor: default; }
.lobby-btns .small { background: #fff3; color: #fff; font-size: clamp(14px, 2.4vh, 20px); padding: .5em 1.2em; border-radius: 999px; }
.book-title { margin: 1vh 0 .6vh; font-size: clamp(14px, 2.4vh, 20px); text-shadow: 0 2px 3px #000a; }
.book { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 1100px; margin: 0 auto; }
.bk { width: clamp(28px, 4.2vh, 56px); aspect-ratio: 72 / 54; background: #0006; border-radius: 8px; padding: 1px; }
.bk.has { background: #fff3; }
.bk canvas { width: 100%; height: 100%; display: block; }
.lobby-small { font-size: clamp(11px, 1.8vh, 15px); opacity: .75; cursor: pointer; margin-top: 1.4vh; }
.back-home { position: fixed; left: 14px; top: 10px; color: #fffa; font-size: 14px; text-decoration: none; }

/* ── hud */
#hud { position: fixed; inset: 0; pointer-events: none; }
.top { position: absolute; top: 1.2vh; left: 1.2vw; display: flex; gap: 10px; }
.top span { background: #000a; border-radius: 999px; padding: .2em .8em; font-size: clamp(16px, 3vh, 30px); font-weight: 900; }
#quest { position: absolute; top: 1.2vh; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: #2a1e00e0; border: 4px solid var(--sun); border-radius: 20px; padding: 4px 18px 4px 6px; animation: bob 2s ease-in-out infinite; }
#quest canvas { width: clamp(70px, 11vh, 120px); height: auto; }
#quest small { display: block; font-size: clamp(12px, 2vh, 18px); color: #ffe9a0; }
#quest b { font-size: clamp(18px, 3.6vh, 34px); color: #fff; }
@keyframes bob { 50% { transform: translateX(-50%) translateY(4px); } }
#card { position: absolute; left: 50%; top: 14vh; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; background: #fff; color: var(--ink); border-radius: 26px; padding: 10px 24px 10px 10px; box-shadow: 0 10px 0 #0004; max-width: min(92vw, 820px); }
#card.go { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1), fade 6s linear forwards; }
#card canvas { width: clamp(120px, 22vh, 220px); height: auto; background: #e8f4d8; border-radius: 18px; }
#card small { display: block; font-size: clamp(14px, 2.4vh, 22px); color: #2f8a3a; font-weight: 900; }
#card b { display: block; font-size: clamp(24px, 5vh, 46px); line-height: 1.05; }
#card p { margin: 6px 0 0; font-size: clamp(14px, 2.6vh, 24px); line-height: 1.25; }
@keyframes pop { from { transform: translateX(-50%) scale(.4); } }
@keyframes fade { 85% { opacity: 1; } to { opacity: 0; } }
#chips { position: absolute; left: 0; right: 0; bottom: 1vh; display: flex; justify-content: center; gap: 1vw; padding: 0 1vw; }
.chip { position: relative; flex: 0 1 25%; display: flex; align-items: center; gap: 8px; background: #000b; border: 4px solid var(--c); border-radius: 18px; padding: 4px 10px 4px 4px; min-width: 0; }
.chip canvas { width: clamp(54px, 8vh, 96px); height: auto; flex: none; }
.chip div { min-width: 0; }
.chip b { display: block; font-size: clamp(13px, 2.4vh, 22px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip .carry { display: block; font-size: clamp(14px, 2.6vh, 24px); min-height: 1.2em; }
.chip .carry i { font-size: .7em; opacity: .6; font-style: normal; }
.chip small { display: block; font-size: clamp(9px, 1.5vh, 14px); opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip em { position: absolute; inset: 0; display: grid; place-items: center; background: #000c; border-radius: 14px; font-style: normal; font-size: clamp(12px, 2.2vh, 20px); }
@media (max-aspect-ratio: 1/1) { .seats { grid-template-columns: repeat(2, 1fr); } #chips { flex-wrap: wrap; } .chip { flex-basis: 45%; } }

/* ── lobby: tap to join, arrows for touch and mouse players, the book by era */
.seat { position: relative; }
.seat.tap { cursor: pointer; }
.seat.tap:hover { border-color: #fffa; }
.seat .arrow { position: absolute; top: 22%; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--ink); font-size: 17px; font-weight: 900; box-shadow: 0 3px 0 #0005; }
.seat .arrow.l { left: 6px; } .seat .arrow.r { right: 6px; }
.book { flex-direction: column; align-items: center; gap: 6px; }
.book .row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; }
.book .row > b { font-size: clamp(11px, 1.8vh, 15px); color: var(--sun); min-width: 6.5em; text-align: right; margin-right: 6px; text-shadow: 0 2px 3px #000a; }

/* ── time machine: pick an era */
#eras { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2vw; width: min(96vw, 1300px); }
#eras .era { background: #0d2238f7; border: 4px solid #4ae0ff55; border-radius: 22px; padding: 1.4vh 1vw; text-align: center; transition: transform .15s; }
#eras .era.on { border-color: #4ae0ff; transform: scale(1.06); box-shadow: 0 0 40px #4ae0ff88; background: #0f3150f0; }
#eras .era b { display: block; font-size: clamp(18px, 3.6vh, 36px); color: var(--sun); }
#eras .era small { display: block; font-size: clamp(11px, 1.8vh, 16px); color: #bff4ff; }
#eras .era .stars { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 1vh 0; }
#eras .era .stars canvas { width: 100%; height: auto; }
#eras .era .stars canvas.sil { filter: brightness(2.6) saturate(.6); opacity: .8; }
#eras .era p { margin: 0 0 .6vh; font-size: clamp(12px, 2vh, 19px); line-height: 1.2; }
#eras .era span { font-size: clamp(11px, 1.8vh, 16px); opacity: .85; }
#eras .era-help { grid-column: 1 / -1; text-align: center; font-size: clamp(14px, 2.6vh, 24px); background: #000a; border-radius: 999px; padding: .3em 1em; justify-self: center; }
@media (max-aspect-ratio: 1/1) { #eras { grid-template-columns: 1fr 1fr; } }

/* ── touch controls */
#touch { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#stickzone { position: absolute; left: 0; bottom: 0; width: 50%; height: 75%; pointer-events: auto; touch-action: none; }
#stickzone .hint { position: absolute; left: 6vw; bottom: 5vh; font-size: 14px; opacity: .55; text-shadow: 0 1px 3px #000; }
#stickbase { position: absolute; width: 22vmin; height: 22vmin; margin: -11vmin 0 0 -11vmin; border-radius: 50%; background: #fff3; border: 3px solid #fff8; }
#stickknob { position: absolute; left: 50%; top: 50%; width: 9vmin; height: 9vmin; border-radius: 50%; background: #fffe; box-shadow: 0 3px 0 #0005; transform: translate(-50%, -50%); }
#tbtns { position: absolute; right: max(3vw, env(safe-area-inset-right)); bottom: max(4vh, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(2, 15vmin); grid-template-rows: repeat(2, 15vmin); gap: 2.5vmin; pointer-events: auto; }
#tbtns button { border-radius: 50%; font-size: 6vmin; font-weight: 900; color: #fff; border: 4px solid #0006; box-shadow: 0 5px 0 #0006; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; touch-action: none; }
#tbtns button small { font-size: 2.4vmin; font-weight: 700; opacity: .9; }
#tbtns button.down { transform: translateY(4px); box-shadow: 0 1px 0 #0006; }
#tbtns .a { background: #2fbf5f; } #tbtns .b { background: #e8392a; } #tbtns .x { background: #2a9df4; } #tbtns .y { background: #ffb02e; }
body.touching #chips { bottom: auto; top: 1vh; left: auto; right: 1vw; justify-content: flex-end; }
body.touching #chips .chip { flex-basis: auto; }
body.touching #chips .chip small { display: none; }
body.touching #quest { top: 8vh; }

/* ── tall phones: everything sized to the narrow side so Play stays on screen */
@media (max-aspect-ratio: 1/1) {
  .logo span:first-child { font-size: min(12vh, 17vw); }
  .logo span:last-child { font-size: min(8vh, 12vw); }
  .lobby-hint { font-size: min(3.2vh, 4.6vw); margin: 1vh 0; }
  .seats { gap: 2.5vw; }
  .seat { min-height: 0; padding: 1vh 6px; border-width: 3px; }
  .seat canvas { max-height: 11vh; }
  .seat .empty { font-size: 6vh; }
  .seat b { font-size: min(2.8vh, 4.6vw); }
  .seat small { font-size: min(2vh, 3.4vw); }
  .lobby-btns .big { font-size: min(3.6vh, 6vw); }
  .lobby-btns .small { font-size: min(2.4vh, 4vw); }
  #tbtns { grid-template-columns: repeat(2, 17vmin); grid-template-rows: repeat(2, 17vmin); }
  .top { flex-wrap: wrap; gap: 6px; right: 1.2vw; }
  .top span { font-size: min(3vh, 4.6vw); }
  body.touching #chips { top: calc(2vh + min(3vh, 4.6vw) * 2.2); left: 1vw; right: auto; justify-content: flex-start; }
  #card { top: 22vh; }
}