@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: #6a4ab8; --sun: #ffd84a; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #6a4ab8; 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: #ff8fcf; -webkit-text-stroke: 3px #5a1a4a; paint-order: stroke fill; }
.logo span:last-child { font-size: clamp(32px, 8vh, 82px); color: var(--sun); -webkit-text-stroke: 3px #6a4208; 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; }
#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: #f0e8ff; border-radius: 18px; }
#card small { display: block; font-size: clamp(18px, 3vh, 28px); color: #8a4ac8; 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; } }
@media (max-aspect-ratio: 1/1) { .seats { grid-template-columns: repeat(2, 1fr); } }

/* ── 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; }

/* ── touch controls */
#touch { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#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; }

/* ── 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); }
  #card { top: 22vh; }
}

/* ── brain brots */
.seat canvas { aspect-ratio: 220 / 200; }
.bk { width: clamp(40px, 6vh, 72px); aspect-ratio: 1; }
.letters { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 6px; }
.letters span { width: clamp(26px, 4.4vh, 44px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #0005; color: #fff4; font-size: clamp(16px, 3vh, 28px); font-weight: 700; }
.letters span.on { background: #4aa8ff; color: #fff; cursor: pointer; }
.letters span.got { background: #2fbf5f; color: #fff; cursor: pointer; }
#touch .hint { position: absolute; left: 4vw; bottom: 4vh; font-size: 15px; opacity: .6; text-shadow: 0 1px 3px #000; }
#tbtns button small { font-size: 3.4vmin; }
#card b { font-size: clamp(30px, 6vh, 56px); }
#card { top: 7vh; padding: 6px 20px 6px 6px; gap: 10px; }
#card canvas { width: clamp(70px, 14vh, 140px); }
#card b { font-size: clamp(22px, 4.5vh, 44px); }
#card small { font-size: clamp(16px, 2.6vh, 24px); }
@media (max-aspect-ratio: 1/1) { #card { top: 8vh; } }