/* Ungly: grass green and lemon, hard black shadows, hip-hop colour blocks. */

@font-face { font-family: 'Dela Gothic One'; src: url('../fonts/dela-gothic-one-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('../fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }


:root {
  --grass: #1e8f3e;
  --grass-d: #0f5e2b;
  --lemon: #ffe23b;
  --ink: #0a0a0a;
  --cream: #fff6dc;
  --pink: #ff3d8b;
  --cyan: #17d4f5;
  --purple: #5a2cb8;
  --orange: #ff7a1a;
  --red: #e5243b;
  --display: 'Dela Gothic One', 'Arial Black', Impact, sans-serif;
  --body: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --spring: cubic-bezier(0.3, 1.6, 0.5, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--body);
  font-weight: 500;
  color: var(--ink);
  background: var(--grass);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.grow { flex: 1; }

/* ---------- background ---------- */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, #23a047 0%, var(--grass) 45%, var(--grass-d) 100%); }
.blk { position: absolute; display: block; transition: opacity 0.5s; opacity: 0.28; }
.b1 { background: var(--pink); top: -8%; left: -30%; width: 95%; height: 52%; clip-path: polygon(0 0, 100% 0, 58% 100%, 0 72%); }
.b2 { background: var(--cyan); top: 22%; right: -35%; width: 90%; height: 44%; clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 78%); }
.b3 { background: var(--purple); bottom: -6%; left: -25%; width: 85%; height: 40%; clip-path: polygon(0 30%, 100% 0, 78% 100%, 0 100%); }
.b4 { background: var(--orange); bottom: 8%; right: -22%; width: 70%; height: 30%; clip-path: polygon(0 20%, 12% 0, 24% 20%, 36% 0, 48% 20%, 60% 0, 72% 20%, 84% 0, 100% 16%, 100% 100%, 0 100%); }
body[data-screen='home'] .blk { opacity: 0.95; }
.crowd {
  position: absolute; inset: 0; opacity: 0.1;
  background:
    radial-gradient(circle at 50% 30%, #fff 0 9px, transparent 10px),
    radial-gradient(ellipse at 50% 90%, #fff 0 20px, transparent 21px);
  background-size: 44px 58px;
}
.grain {
  position: absolute; inset: 0; opacity: 0.14; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* ---------- layout ---------- */
.topbar { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; max-width: 1040px; margin: 0 auto; padding: calc(12px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 4px max(14px, env(safe-area-inset-left)); }
.logo-mini { font-family: var(--display); font-size: 1.35rem; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; letter-spacing: 0.01em; transform: rotate(-3deg); }
#app { position: relative; z-index: 1; }
.screen {
  display: none; flex-direction: column; gap: 16px;
  max-width: 1040px; margin: 0 auto;
  padding: 8px max(14px, env(safe-area-inset-right)) calc(76px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  min-height: calc(100vh - 60px);
  min-height: calc(100dvh - 60px);
}
.screen > * { min-width: 0; max-width: 100%; }
.screen.on { display: flex; }
#s-home { padding-top: 12px; min-height: 100vh; min-height: 100dvh; }

/* ---------- type ---------- */
.page-title { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 11vw, 4.6rem); line-height: 0.95; margin: 6px 0 2px; color: #fff; -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; text-shadow: 5px 6px 0 var(--ink); transform: rotate(-2deg); transform-origin: left; }
.page-title em { font-style: normal; color: var(--lemon); }
.page-title.sm { font-size: clamp(2.2rem, 9vw, 3.4rem); }
.label { font-weight: 800; font-size: 1rem; margin: 0 0 8px; }
.hint { margin: 8px 0 0; font-size: 0.95rem; line-height: 1.4; color: #2b2b2b; max-width: 46ch; }
.hint.center { text-align: center; margin-inline: auto; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55); font-weight: 700; }
.fine { margin: 0; font-size: 0.82rem; text-align: center; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); font-weight: 600; }
.err { margin: 8px 0 0; font-weight: 800; color: var(--red); font-size: 0.95rem; }
.notice { background: var(--cream); border: 3px solid var(--ink); border-radius: 14px; padding: 12px 14px; font-weight: 700; box-shadow: 4px 4px 0 var(--ink); }

/* ---------- controls ---------- */
.btn {
  font-weight: 800; font-size: 1.05rem; line-height: 1.1;
  background: var(--lemon); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 16px; padding: 0.8em 1.15em;
  box-shadow: 5px 5px 0 var(--ink); cursor: pointer; touch-action: manipulation;
  transition: transform 0.14s var(--spring), box-shadow 0.14s var(--spring);
}
.btn:hover { transform: translate(-1px, -2px) rotate(-0.7deg); box-shadow: 7px 7px 0 var(--ink); }
.btn:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--ink); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: 2px 2px 0 var(--ink); filter: grayscale(0.35); }
.btn-lemon { background: var(--lemon); }
.btn-pink { background: var(--pink); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); }
.btn-cyan { background: var(--cyan); }
.btn-white { background: #fff; }
.btn-xl { font-size: 1.3rem; padding: 0.9em 1.1em; width: 100%; }
.btn-block { width: 100%; }
.link-btn { background: none; border: 0; padding: 8px; font-weight: 800; font-size: 1rem; color: #fff; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55); cursor: pointer; align-self: center; }
.icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; background: var(--lemon); border: 3px solid var(--ink); border-radius: 13px; box-shadow: 3px 3px 0 var(--ink); font-weight: 800; font-size: 1.25rem; cursor: pointer; transition: transform 0.12s var(--spring); }
.icon-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.icon-btn.sm { width: 34px; height: 34px; font-size: 1.3rem; border-radius: 10px; box-shadow: 2px 2px 0 var(--ink); }
.icon-btn .cross { display: none; }
.icon-btn[aria-pressed='true'] .wave { display: none; }
.icon-btn[aria-pressed='true'] .cross { display: inline; }
:focus-visible { outline: 4px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 8px var(--ink); }
.btn:focus-visible, .icon-btn:focus-visible { box-shadow: 5px 5px 0 var(--ink), 0 0 0 8px var(--ink); }

.pill { display: inline-block; background: var(--lemon); border: 3px solid var(--ink); border-radius: 999px; padding: 4px 12px; font-weight: 800; font-size: 0.85rem; box-shadow: 3px 3px 0 var(--ink); white-space: nowrap; }
.sticker { display: inline-block; background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 6px 12px; font-weight: 800; font-size: 0.9rem; box-shadow: 4px 4px 0 var(--ink); transform: rotate(-4deg); }

.panel { background: var(--cream); border: 3px solid var(--ink); border-radius: 22px; box-shadow: 6px 6px 0 var(--ink); padding: 16px; }
.panel .label:not(:first-child) { margin-top: 16px; }
.panel { min-width: 0; max-width: 100%; }
.panel.two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.panel.two > *, .join-row, .join-row > * { min-width: 0; }
.panel form { margin: 0; min-width: 0; }
.or { text-align: center; font-family: var(--display); font-size: 1.1rem; }

.seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; background: #fff; }
.seg-btn { border: 0; background: #fff; padding: 12px 6px; font-weight: 800; cursor: pointer; }
.seg-btn + .seg-btn { border-left: 3px solid var(--ink); }
.seg-btn.on { background: var(--pink); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); }

.avatar-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.av { position: relative; background: #fff; border: 3px solid var(--ink); border-radius: 18px; padding: 8px 8px 10px; cursor: pointer; text-align: center; font-weight: 800; box-shadow: 3px 3px 0 var(--ink); transition: transform 0.14s var(--spring), background 0.2s; }
.av svg { width: 100%; height: auto; max-height: 150px; display: block; }
.av[aria-checked='true'] { background: var(--lemon); transform: rotate(-2deg) translateY(-2px); box-shadow: 5px 6px 0 var(--ink); }
.av[aria-checked='true']::after { content: '✓'; position: absolute; top: -10px; right: -8px; width: 30px; height: 30px; display: grid; place-items: center; background: var(--pink); color: #fff; border: 3px solid var(--ink); border-radius: 50%; font-size: 1rem; }

.join-row { display: flex; gap: 10px; }
.join-row .btn { flex: 0 0 auto; }
.code-input { flex: 1 1 0; width: 0; min-width: 0; font-family: var(--display); font-size: 1.5rem; letter-spacing: 0.18em; text-transform: uppercase; text-align: center; padding: 10px 8px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; }
.code-input::placeholder { color: #bbb; }

/* ---------- home ---------- */
.home-top { display: flex; justify-content: space-between; align-items: center; }
.hero { margin: 10px 0 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hero-cut { position: relative; isolation: isolate; display: inline-block; transform: rotate(-5deg); animation: slam 0.7s var(--spring) both; }
.hero-word { position: relative; display: block; font-family: var(--display); font-weight: 400; font-size: clamp(3.8rem, 19.5vw, 9.5rem); line-height: 0.95; letter-spacing: -0.01em; color: #fff; -webkit-text-stroke: 14px var(--purple); paint-order: stroke fill; padding: 0 0.06em; }
.hero-cut::before { content: 'UNGLY'; position: absolute; z-index: -1; left: 0; top: 0; transform: translate(7px, 9px); font-family: var(--display); font-size: clamp(3.8rem, 19.5vw, 9.5rem); line-height: 0.95; letter-spacing: -0.01em; padding: 0 0.06em; color: var(--ink); -webkit-text-stroke: 26px var(--ink); paint-order: stroke fill; }
.hero-sub { background: var(--lemon); border: 3px solid var(--ink); border-radius: 12px; padding: 6px 14px; font-weight: 800; font-size: clamp(0.95rem, 3.6vw, 1.25rem); box-shadow: 4px 4px 0 var(--ink); transform: rotate(2deg); }
.home-cast { display: flex; justify-content: space-between; align-items: flex-end; margin: -6px -2px -34px; pointer-events: none; }
.cast { width: min(46vw, 250px); }
.cast svg { width: 100%; height: auto; display: block; filter: drop-shadow(6px 7px 0 rgba(0, 0, 0, 0.45)); }
.cast-l { transform: rotate(-3deg); }
.cast-r { transform: rotate(3deg); }
.home-actions { display: grid; gap: 14px; position: relative; max-width: 460px; width: 100%; margin: 0 auto; }
.chips-row { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chips-row li { background: rgba(10, 10, 10, 0.82); color: var(--lemon); border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: 0.82rem; }

#s-solo, #s-friend { max-width: 560px; }
#s-cam, #s-lobby { max-width: 620px; }

/* ---------- camera setup ---------- */
.cam-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 52vh; max-height: 52dvh; margin: 0 auto; border: 3px solid var(--ink); border-radius: 24px; overflow: hidden; background: #0e2a17; box-shadow: 7px 7px 0 var(--ink); }
.cam-frame video, .cam-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.cam-state { position: absolute; inset: auto 0 0 0; padding: 10px 12px; background: rgba(10, 10, 10, 0.78); color: #fff; font-weight: 700; text-align: center; font-size: 0.95rem; }
.cam-state.ok { background: rgba(23, 212, 245, 0.92); color: var(--ink); }
.cam-state.bad { background: var(--red); color: #fff; }
.see-pill { position: absolute; top: 10px; left: 10px; background: var(--lemon); border: 3px solid var(--ink); border-radius: 999px; padding: 4px 12px; font-weight: 800; box-shadow: 3px 3px 0 var(--ink); }
.see-pill b { font-family: var(--display); font-size: 1.15rem; margin-left: 2px; }
.gesture-guide { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.g { background: var(--cream); border: 3px solid var(--ink); border-radius: 12px; padding: 6px 2px 5px; text-align: center; transition: transform 0.15s var(--spring), background 0.2s; }
.g b { display: block; font-family: var(--display); font-size: 1.5rem; line-height: 1.05; }
.g span { display: block; font-size: 0.62rem; font-weight: 700; line-height: 1.1; }
.g.seen { background: var(--lemon); }
.g.seen b::after { content: ' ✓'; font-size: 0.8rem; }
.g.now { background: var(--cyan); transform: translateY(-5px) rotate(-3deg); box-shadow: 3px 4px 0 var(--ink); }
.cam-actions { display: grid; gap: 8px; max-width: 460px; width: 100%; margin: 0 auto; }

/* ---------- lobby ---------- */
.code-card { background: var(--cream); border: 3px solid var(--ink); border-radius: 22px; box-shadow: 6px 6px 0 var(--ink); padding: 16px; text-align: center; }
.code-card .label { margin-bottom: 2px; }
.code-big { font-family: var(--display); font-size: clamp(2.8rem, 15vw, 4.6rem); letter-spacing: 0.14em; padding-left: 0.14em; line-height: 1.1; }
.code-actions { display: flex; gap: 10px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.lobby-players { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.lp { background: var(--cream); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 5px 5px 0 var(--ink); padding: 8px 8px 12px; text-align: center; }
.lp-art svg { width: 100%; max-height: 150px; height: auto; display: block; }
.lp.waiting .lp-art { opacity: 0.35; filter: grayscale(1); }
.lp-name { margin: 2px 0 0; font-weight: 800; }
.lp-state { margin: 2px 0 0; font-size: 0.9rem; font-weight: 700; }
.lp.ready .lp-state { color: #0d7a2e; }
.vs { font-family: var(--display); font-size: 1.6rem; color: var(--lemon); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; transform: rotate(-8deg); }

/* ---------- match ---------- */
.board { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.score { display: flex; align-items: baseline; gap: 8px; background: var(--lemon); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--ink); padding: 4px 14px; transform: rotate(-1.5deg); }
.score .runs { font-family: var(--display); font-size: 2.4rem; line-height: 1; }
.score .balls { font-weight: 800; font-size: 0.9rem; }
.role-pill { background: var(--cyan); }
.target-pill { background: var(--pink); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
.arena { position: relative; display: grid; gap: 14px; }
.tile { position: relative; border: 3px solid var(--ink); border-radius: 22px; overflow: hidden; box-shadow: 6px 6px 0 var(--ink); height: clamp(150px, 26vh, 250px); height: clamp(150px, 26dvh, 250px); }
.tile.them { background: linear-gradient(135deg, var(--purple), var(--pink)); }
.tile.me { background: linear-gradient(135deg, #0e3a20, #165a31); }
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.tile.me video { transform: scaleX(-1); }
.tile video { display: none; }
.tile.has-video video { display: block; }
.tile video[hidden] { display: none !important; }
.tile-art { position: absolute; inset: 8% 0 0 0; display: grid; place-items: end center; }
.tile-art svg { height: 100%; width: auto; max-width: 100%; display: block; }
.tile-art.small { inset: auto 6px 0 auto; width: 30%; height: 62%; place-items: end end; pointer-events: none; }
.tile-art.small svg { filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.5)); }
.tile.has-video .tile-art:not(.small) { display: none; }
.tile.me:not(.has-video) .tile-art.small { inset: 8% 0 0 0; width: auto; height: auto; place-items: end center; }
.tag { position: absolute; left: 10px; top: 10px; z-index: 3; background: var(--lemon); border: 3px solid var(--ink); border-radius: 999px; padding: 3px 11px; font-weight: 800; font-size: 0.8rem; box-shadow: 3px 3px 0 var(--ink); }
.tag.bat::before { content: '🏏 '; }
.tag.bowl::before { content: '⚾ '; }
.vid-status { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; text-align: center; background: rgba(10, 10, 10, 0.82); color: var(--lemon); border: 3px solid var(--lemon); border-radius: 12px; padding: 5px 10px; font-weight: 700; font-size: 0.82rem; }
.lock { position: absolute; right: 10px; top: 10px; z-index: 3; background: var(--cyan); border: 3px solid var(--ink); border-radius: 999px; padding: 3px 11px; font-weight: 800; font-size: 0.8rem; box-shadow: 3px 3px 0 var(--ink); animation: pop 0.3s var(--spring); }
.see-pill.live { z-index: 3; top: auto; bottom: 10px; left: 10px; }
.center-stage { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 6; }
.count { font-family: var(--display); font-size: clamp(6rem, 34vw, 11rem); line-height: 1; color: var(--lemon); -webkit-text-stroke: 14px var(--ink); paint-order: stroke fill; text-shadow: 8px 9px 0 var(--ink); animation: slam 0.45s var(--spring) both; }
.count.go { color: #fff; font-size: clamp(3.2rem, 16vw, 7rem); transform: rotate(-4deg); }
.reveal { display: grid; justify-items: center; gap: 8px; animation: pop 0.35s var(--spring) both; }
.reveal-row { display: flex; align-items: center; gap: 10px; }
.rcard { min-width: 92px; background: #fff; border: 4px solid var(--ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--ink); text-align: center; padding: 6px 12px 4px; }
.rcard small { display: block; font-weight: 800; font-size: 0.72rem; }
.rcard b { display: block; font-family: var(--display); font-size: clamp(3.2rem, 16vw, 5rem); line-height: 1; }
.rcard.me { background: var(--lemon); transform: rotate(-4deg); }
.rcard.them { background: var(--cyan); transform: rotate(4deg); }
.rvs { font-family: var(--display); font-size: 1.3rem; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.verdict { font-family: var(--display); font-size: clamp(2.2rem, 11vw, 4rem); line-height: 1; padding: 6px 16px 4px; border: 4px solid var(--ink); border-radius: 14px; box-shadow: 6px 6px 0 var(--ink); transform: rotate(-3deg); background: var(--lemon); }
.verdict.out { background: var(--red); color: #fff; animation: shake 0.5s both; }
.verdict.six { background: var(--pink); color: #fff; }
.verdict.dot { background: #fff; }
.toss-line { font-weight: 800; background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 4px 12px; box-shadow: 4px 4px 0 var(--ink); }
.actions { display: grid; gap: 10px; margin-top: 4px; justify-items: center; }
.prompt { font-family: var(--display); font-size: clamp(1.3rem, 6vw, 1.8rem); color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-align: center; line-height: 1.05; margin: 2px 0; text-shadow: 3px 4px 0 var(--ink); }
.prompt.small { font-size: 1.1rem; -webkit-text-stroke: 5px var(--ink); }
.two-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 460px; }
.tap-pad { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 460px; }
.tap { font-family: var(--display); font-size: 1.6rem; padding: 12px 0; background: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); cursor: pointer; touch-action: manipulation; transition: transform 0.12s var(--spring); }
.tap:active, .tap.on { background: var(--lemon); transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.tap:disabled { opacity: 0.5; }

/* reactions on the character art */
.tile .shades { transform-box: fill-box; transform-origin: center; transition: transform 0.4s var(--spring); }
.tile.react-out .shades { transform: translateY(70px) rotate(18deg); opacity: 0; transition: transform 0.5s ease-in, opacity 0.5s ease-in; }
.tile.react-out .tile-art svg { filter: saturate(0.35) brightness(0.9); }
.tile.react-six .tile-art svg, .tile.react-win .tile-art svg { animation: jump 0.7s var(--spring) 2; }
.tile.react-run .tile-art svg { animation: nod 0.5s ease-out; }
.tile.react-lose .tile-art svg { animation: sag 0.8s ease-out both; }
.tile .sparkle { transform-box: fill-box; transform-origin: center; animation: twinkle 2.8s ease-in-out infinite; }
.tile .s2, .lp .s2, .av .s2 { animation-delay: 1.1s; }
.char .sparkle { transform-box: fill-box; transform-origin: center; animation: twinkle 2.8s ease-in-out infinite; }
.char .s2 { animation-delay: 1.1s; }
body.shake .arena { animation: shake 0.5s both; }

/* ---------- result ---------- */
#s-result { align-items: center; text-align: center; max-width: 620px; }
.res-title { font-family: var(--display); font-weight: 400; font-size: clamp(3.6rem, 19vw, 7.5rem); line-height: 0.95; margin: 8px 0 0; color: var(--lemon); -webkit-text-stroke: 14px var(--ink); paint-order: stroke fill; text-shadow: 7px 9px 0 var(--ink); transform: rotate(-4deg); animation: slam 0.6s var(--spring) both; }
.res-title.lose { color: #fff; }
.res-title.tie { color: var(--cyan); }
.res-sub { margin: 0; font-weight: 800; font-size: 1.15rem; background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 6px 14px; box-shadow: 4px 4px 0 var(--ink); }
.res-cast { width: min(62vw, 270px); }
.res-cast svg { width: 100%; height: auto; display: block; filter: drop-shadow(6px 7px 0 rgba(0, 0, 0, 0.45)); }
.res-cast.lose svg { filter: saturate(0.4) drop-shadow(6px 7px 0 rgba(0, 0, 0, 0.45)); animation: sag 0.9s ease-out both; }
.res-cast.win svg { animation: jump 0.8s var(--spring) 2; }
.scorecard { width: 100%; background: var(--cream); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 6px 6px 0 var(--ink); padding: 8px 14px; text-align: left; }
.sc-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px 0; align-items: center; }
.sc-row + .sc-row { border-top: 3px dashed rgba(10, 10, 10, 0.35); }
.sc-row b { font-family: var(--display); font-size: 1.7rem; font-weight: 400; }
.sc-row small { display: block; font-weight: 700; color: #3a3a3a; }
.sc-row .who { font-weight: 800; }
.res-actions { display: grid; gap: 12px; width: 100%; max-width: 460px; }

/* ---------- ticker ---------- */
.ticker { position: fixed; left: -3%; right: -3%; bottom: calc(6px + env(safe-area-inset-bottom)); z-index: 10; height: 36px; background: var(--ink); color: var(--lemon); overflow: hidden; transform: rotate(-1.3deg); border-block: 3px solid var(--lemon); pointer-events: none; }
.ticker-track { display: flex; width: max-content; height: 100%; align-items: center; white-space: nowrap; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; animation: tape 34s linear infinite; }
.ticker-track span { padding-right: 2.2em; }
.ticker-track span::before { content: '✦'; margin-right: 2.2em; color: var(--pink); }

/* ---------- dialog / toast / confetti ---------- */
dialog { border: 3px solid var(--ink); border-radius: 22px; padding: 0; width: calc(100% - 28px); max-width: 560px; max-height: 88vh; max-height: 88dvh; box-shadow: 8px 8px 0 var(--ink); background: #fff; color: var(--ink); overflow: hidden; }
dialog[open] { display: flex; flex-direction: column; }
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.dlg-bar { display: flex; align-items: center; gap: 7px; background: var(--lemon); border-bottom: 3px solid var(--ink); padding: 8px 10px 8px 14px; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.12em; }
.dlg-bar i { width: 13px; height: 13px; border: 2.5px solid var(--ink); border-radius: 50%; background: #fff; }
.dlg-bar span { flex: 1; margin-left: 6px; }
.dlg-body { overflow: auto; padding: 4px 20px 22px; }
.dlg-body h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1; margin: 16px 0 10px; }
.dlg-body h3 { font-size: 0.95rem; margin: 18px 0 8px; font-weight: 800; }
.dlg-body p { line-height: 1.45; margin: 0 0 6px; }
.throw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.throw-grid div { background: var(--cream); border: 3px solid var(--ink); border-radius: 10px; padding: 10px 12px; }
.rules-list { padding-left: 20px; margin: 0; display: grid; gap: 8px; line-height: 1.4; }
.toast { position: fixed; z-index: 30; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-weight: 700; border: 3px solid var(--lemon); border-radius: 14px; padding: 10px 16px; max-width: calc(100% - 28px); text-align: center; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); animation: pop 0.3s var(--spring); }
#confetti { position: fixed; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
#confetti i { position: absolute; top: -20px; width: 12px; height: 18px; border: 2px solid var(--ink); border-radius: 3px; animation: fall linear forwards; }

/* ---------- motion ---------- */
@keyframes slam { 0% { transform: scale(2.2) rotate(-12deg); opacity: 0; } 60% { transform: scale(0.94) rotate(-3deg); opacity: 1; } 100% { transform: scale(1) rotate(var(--rot, 0deg)); opacity: 1; } }
.hero-cut { --rot: -5deg; }
.res-title { --rot: -4deg; }
@keyframes pop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes shake { 0%, 100% { transform: translateX(0) rotate(var(--r, 0deg)); } 15% { transform: translateX(-10px) rotate(-2deg); } 35% { transform: translateX(9px) rotate(2deg); } 55% { transform: translateX(-6px); } 75% { transform: translateX(4px); } }
@keyframes jump { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-16px) rotate(-2deg); } 70% { transform: translateY(0) rotate(1deg); } }
@keyframes nod { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(8px); } }
@keyframes sag { to { transform: translateY(12px) scale(0.97); } }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(0.55) rotate(25deg); opacity: 0.6; } }
@keyframes tape { to { transform: translateX(-50%); } }
@keyframes fall { to { transform: translateY(112vh) rotate(720deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .ticker-track { animation: none; }
}

/* ---------- bigger screens ---------- */
@media (min-width: 860px) {
  .arena { grid-template-columns: 1fr 1fr; gap: 22px; }
  .tile { height: clamp(260px, 44vh, 430px); height: clamp(260px, 44dvh, 430px); }
  .home-cast { margin-bottom: -50px; }
  .cast { width: 260px; }
  .avatar-pick .av svg { max-height: 190px; }
  .gesture-guide .g b { font-size: 1.8rem; }
  .gesture-guide .g span { font-size: 0.72rem; }
}
@media (max-width: 380px) {
  .btn { font-size: 0.98rem; }
  .g span { display: none; }
  .tap { font-size: 1.3rem; }
}

/* ---------- small phones ---------- */
@media (max-width: 420px) {
  .panel { padding: 14px; }
  .code-input { font-size: 1.35rem; letter-spacing: 0.12em; }
  .join-row .btn { padding-inline: 1em; }
  .board { gap: 8px; }
  .score .runs { font-size: 2rem; }
  .rcard { min-width: 80px; padding-inline: 8px; }
  .throw-grid { grid-template-columns: 1fr; }
  .dlg-body { padding-inline: 14px; }
}
@media (max-width: 340px) {
  .btn-xl { font-size: 1.12rem; }
  .gesture-guide { gap: 4px; }
  .g b { font-size: 1.25rem; }
  .code-actions .btn { flex: 1 1 100%; }
}

/* ---------- phones turned sideways ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  .screen { gap: 10px; padding-top: 4px; padding-bottom: calc(52px + env(safe-area-inset-bottom)); min-height: 0; }
  #s-home { min-height: 0; }
  .arena { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tile { height: clamp(120px, 42vh, 190px); }
  .cam-frame { max-height: 60vh; width: auto; height: 60vh; max-width: 100%; }
  .home-cast { display: none; }
  .hero-word, .hero-cut::before { font-size: clamp(3rem, 14vh, 5rem); }
  .count { font-size: clamp(4rem, 30vh, 7rem); }
  .count.go { font-size: clamp(2.6rem, 20vh, 5rem); }
  .res-cast { width: min(26vh, 150px); }
  .res-title { font-size: clamp(2.6rem, 16vh, 4.4rem); }
  .ticker { height: 28px; }
  .avatar-pick .av svg { max-height: 90px; }
  .lp-art svg { max-height: 90px; }
}

/* ---------- friend video freeze ---------- */
.freeze { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; background: #000; filter: saturate(0.6) brightness(0.85); }
.freeze[hidden] { display: none !important; }
.frozen-pill { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4; text-align: center; background: var(--cyan); color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; padding: 4px 10px; font-weight: 800; font-size: 0.8rem; box-shadow: 3px 3px 0 var(--ink); }
.frozen-pill[hidden] { display: none !important; }
.tile.frozen { outline: 4px solid var(--cyan); outline-offset: -4px; }

/* ---------- milestone celebration (50, 100, 150, 200 ...) ---------- */
.milestone { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; pointer-events: none; padding: 0 14px; }
.milestone[hidden] { display: none !important; }
.ms-card { display: grid; justify-items: center; gap: 6px; text-align: center; max-width: 100%; animation: msin 0.55s var(--spring) both; }
.ms-card small { background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 4px 12px; font-weight: 800; font-size: 0.95rem; box-shadow: 4px 4px 0 var(--ink); transform: rotate(-3deg); }
.ms-card b { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 12vw, 6rem); line-height: 1; color: var(--lemon); -webkit-text-stroke: 10px var(--ink); paint-order: stroke fill; text-shadow: 6px 8px 0 var(--ink); transform: rotate(-4deg); max-width: 100%; overflow-wrap: normal; }
.ms-card span { background: var(--pink); color: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: 4px 16px; font-weight: 800; box-shadow: 4px 4px 0 var(--ink); text-shadow: 0 2px 0 rgba(0,0,0,0.4); }
.milestone.big .ms-card b { color: var(--cyan); }
.milestone.huge .ms-card b { color: var(--pink); }
.milestone.big::before, .milestone.huge::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,226,59,0.5), transparent 65%); animation: glow 2.4s ease-out both; }
@keyframes msin { 0% { transform: scale(0.3) rotate(-14deg); opacity: 0; } 60% { transform: scale(1.12) rotate(2deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes glow { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
.tile:not(.has-video) .freeze, .tile:not(.has-video) .frozen-pill { display: none !important; }

/* ---------- teach mode ---------- */
.gesture-guide.teach .g { cursor: pointer; outline: 3px dashed var(--lemon); outline-offset: 2px; }
.g.taught::before { content: '★'; position: absolute; top: -9px; right: -6px; font-size: 0.95rem; color: var(--pink); text-shadow: 0 0 0 var(--ink), 1px 1px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); }
.g { position: relative; }
.g.teaching { background: var(--pink); animation: pop 0.3s var(--spring); }

/* ---------- train the reader ---------- */
#s-train { max-width: 560px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; margin: 12px 0 4px; cursor: pointer; }
.check input { width: 24px; height: 24px; flex: 0 0 24px; margin: 1px 0 0; accent-color: var(--pink); }
.hint.small { font-size: 0.85rem; margin: 6px 0 14px; }
.link-btn.dark { color: var(--ink); text-shadow: none; display: block; margin: 10px auto 0; }
#train-frame { margin-bottom: 4px; }
.train-card { display: grid; gap: 8px; }
.train-step { margin: 0; font-weight: 800; font-size: 0.85rem; }
.train-row { display: flex; align-items: center; gap: 14px; }
.train-num { font-family: var(--display); font-weight: 400; font-size: 4rem; line-height: 1; min-width: 1.1em; text-align: center; background: var(--lemon); border: 4px solid var(--ink); border-radius: 18px; padding: 6px 10px 2px; box-shadow: 4px 4px 0 var(--ink); }
.train-how { margin: 0; font-weight: 800; font-size: 1.15rem; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.train-bar { height: 16px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; overflow: hidden; }
.train-bar i { display: block; height: 100%; width: 0; background: var(--pink); transition: width 0.1s linear; }
.train-card.rec .train-bar i { background: var(--cyan); }
.train-card.rec .train-num { background: var(--pink); color: #fff; }
.train-card.ok .train-num { background: #7cf29a; }
#train-frame { max-height: 34vh; max-height: 34dvh; }
.train-num { font-size: 3rem; }
@media (min-width: 600px) { #train-frame { max-height: 50dvh; } }