/* Tiro ao Alvo — mesma cara dos outros jogos (ceu azul, botoes brancos, botao verde) + a barraca de parque.
   Base (menu, janela, tela final) copiada do Estoura-bolhas; a barraca veio do prototipo (_fontes/prototipo). */
:root {
  --sky-top: #5bb8f5; --sky-bottom: #c9ecff; --ink: #213047; --ink-soft: #4d6079; --paper: #fff;
  --yellow: #ffd23f; --green: #3cc76a; --green-dark: #23a04f; --orange: #ff8a3d; --blue: #2f8fd8; --red: #ff5a5f; --purple: #8a5cf6;
  --c1: #ff8a3d; --c2: #9b6cff; --c3: #ff5fa2; --c4: #2fbfa8; --c5: #3d9bff; --c6: #ffb626; --c7: #7bc943;
  --shadow: 0 6px 0 rgba(33,48,71,.18), 0 10px 24px rgba(33,48,71,.16);
  --radius: 22px;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --wood: #d9954f; --wood-dark: #a8642c; --wood-light: #f0b878;
  --bw: min(calc(100vw - 20px - var(--sal) - var(--sar)), 1000px);
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --counter-h: clamp(96px, 17vh, 130px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { font-family: var(--font); color: var(--ink); font-weight: 800; background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom) 75%);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
body.playing { touch-action: none; cursor: none; }
button { appearance: none; -webkit-appearance: none; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
[hidden] { display: none !important; }

/* ---------- parque ao fundo ---------- */
#park { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.cloud { position: absolute; background: #fff; border-radius: 999px; opacity: .75; }
.cloud::after { content: ""; position: absolute; width: 55%; height: 140%; left: 18%; bottom: 30%; background: #fff; border-radius: 50%; }
#wheel { position: absolute; left: max(-140px, calc(50vw - var(--bw) / 2 - 300px)); bottom: 8vh; width: min(70vh, 560px); }
#wheel .spin { transform-origin: 200px 200px; animation: spin 30s linear infinite; }
#wheel .cab { animation: spin 30s linear infinite reverse; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes spin { to { transform: rotate(360deg); } }
#tent { position: absolute; right: max(-120px, calc(50vw - var(--bw) / 2 - 260px)); bottom: 9vh; width: min(52vh, 420px); }
#hills { position: absolute; left: -10vw; right: -10vw; bottom: 0; height: 30vh; background: radial-gradient(60% 100% at 25% 100%, #7fd37a 60%, transparent 61%), radial-gradient(60% 100% at 80% 100%, #69c56a 60%, transparent 61%); }
#bunting { position: absolute; left: 0; right: 0; top: 0; height: 90px; }
/* passarinhos ao longe (no lugar dos baloes: nao parecem com os baloes que valem ponto) */
.bird { position: absolute; width: 26px; height: 12px; animation: fly linear forwards; opacity: .55; }
.bird svg { width: 100%; height: 100%; animation: flap .35s ease-in-out infinite alternate; transform-origin: 50% 60%; }
@keyframes fly { to { transform: translateX(var(--dx)); } }
@keyframes flap { to { transform: scaleY(.45); } }

/* ---------- topo ---------- */
#app { position: fixed; inset: 0; z-index: 2; display: flex; flex-direction: column; }
#topbar { position: relative; z-index: 30; flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: calc(8px + var(--sat)) calc(10px + var(--sar)) 6px calc(10px + var(--sal)); height: calc(66px + var(--sat)); }
#topbar .spacer { flex: 1; }
body.playing #topbar, body.playing #topbar * { cursor: pointer; }
.round-btn { width: 52px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; background: var(--paper); border-radius: 50%; box-shadow: var(--shadow); transition: transform .08s; }
.round-btn:active { transform: translateY(3px) scale(.96); }
.round-btn svg { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.home-icon { stroke-width: 1.4 !important; }
.home-icon .chimney { fill: #c4513a; } .home-icon .wall { fill: #ffe29a; } .home-icon .roof { fill: #ff5a5f; } .home-icon .door { fill: var(--orange); }
.gear-icon { stroke-width: 2.2 !important; }
.snd-icon .spk { fill: var(--ink); stroke-width: 2; } .snd-icon .wave { stroke: var(--blue); }
.snd-icon .x { display: none; stroke: var(--red); stroke-width: 3; }
.muted .snd-icon .wave { display: none; } .muted .snd-icon .x { display: inline; } .muted .snd-icon .spk { opacity: .55; }
.fs-icon .fs-exit { display: none; } .is-fs .fs-icon .fs-enter { display: none; } .is-fs .fs-icon .fs-exit { display: inline; }
.pill-box { height: 52px; padding: 0 18px 0 10px; display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 999px; box-shadow: var(--shadow); font-size: 26px; font-weight: 900; }
.pill-box .st { font-size: 30px; filter: drop-shadow(0 2px 0 rgba(33,48,71,.25)); }

/* ---------- menu e telas ---------- */
#screen { flex: 1 1 auto; min-height: 0; position: relative; display: flex; flex-direction: column; align-items: center; padding: 4px calc(16px + var(--sar)) calc(8px + var(--sab)) calc(16px + var(--sal)); }
#screen:empty { display: none; }
.screen-in { animation: pop-in .35s ease-out; }
@keyframes pop-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
h1, h2 { margin: 0; text-align: center; }
.big-title { font-size: clamp(34px, 8vmin, 64px); font-weight: 900; color: #fff; text-shadow: 0 4px 0 var(--blue), 0 8px 14px rgba(0,0,0,.18); letter-spacing: .5px; }
.subtitle { font-size: clamp(18px, 3.6vmin, 26px); font-weight: 800; color: var(--ink); text-align: center; margin: 6px 0 12px; }
.big-btn { min-height: 76px; padding: 0 34px; border-radius: 999px; background: linear-gradient(180deg, #55d985, var(--green)); color: #fff; font-size: clamp(24px, 5vmin, 34px); font-weight: 900;
  box-shadow: 0 7px 0 var(--green-dark), 0 12px 24px rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.45); display: inline-flex; align-items: center; justify-content: center; gap: 12px; transition: transform .1s; }
.big-btn:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--green-dark); }
.big-btn.secondary { background: linear-gradient(180deg, #5db0ee, var(--blue)); box-shadow: 0 7px 0 #1d6fae, 0 12px 24px rgba(0,0,0,.18); }
.center-col { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.menu { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; min-height: 0; }
.cat-grid { flex: 1; min-height: 0; width: 100%; max-width: 1100px; overflow-y: auto; -webkit-overflow-scrolling: touch; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; padding: 8px 4px 16px; align-content: start; }
.cat-card { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 5px solid var(--cc, var(--c1)); transition: transform .1s; position: relative; }
.cat-card:active { transform: scale(.96); }
.cat-card .cat-pic { width: 100%; aspect-ratio: 1; display: grid; place-items: center; font-size: 64px; border-radius: 14px; }
.cat-card .cat-pic img { width: 100%; height: 100%; object-fit: contain; }
.cat-card .cat-name { font-size: 20px; font-weight: 900; }
.cat-card .cat-sub { font-size: 15px; font-weight: 700; color: var(--ink-soft); }
.cat-card.locked { filter: grayscale(1); opacity: .55; cursor: default; }
.cat-card .soon { position: absolute; top: 8px; right: 8px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 999px; }
.cat-card .best { position: absolute; top: 6px; left: 6px; background: var(--yellow); font-size: 13px; font-weight: 900; padding: 2px 8px; border-radius: 999px; box-shadow: 0 2px 0 rgba(33,48,71,.2); }
.cat-card.picking { transform: scale(1.06); box-shadow: 0 0 0 6px var(--yellow), var(--shadow); }
.cat-card.picked { animation: wiggle .5s ease-in-out 2; }
.random-card .dice span { display: inline-block; font-size: 64px; }
.random-card.rolling .dice span { animation: spin .5s linear infinite; }
@keyframes wiggle { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.menu-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; padding: 4px 0 2px; }
.small-btn { background: var(--paper); border-radius: 999px; padding: 10px 18px; font-weight: 900; box-shadow: var(--shadow); font-size: 16px; }
.lang-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.lang-opt { background: #eef3f9; border: 4px solid transparent; border-radius: 999px; padding: 10px 16px; font-weight: 800; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.lang-opt.on { border-color: var(--green); background: #e9fbef; }
.lang-flag { width: 28px; height: 21px; border-radius: 3px; flex: none; display: block; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
#modal { position: fixed; inset: 0; z-index: 80; background: rgba(20,30,50,.55); display: grid; place-items: center; padding: 16px; cursor: auto; }
.modal-box { background: var(--paper); border-radius: 26px; max-width: 440px; max-height: 92vh; overflow-y: auto; padding: 24px; text-align: center; box-shadow: var(--shadow); font-size: 19px; font-weight: 700; line-height: 1.4; }
.modal-box h2 { margin-bottom: 8px; font-size: 26px; }
.modal-box .big-btn { margin-top: 16px; min-height: 60px; font-size: 24px; }
#splash { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom)); transition: opacity .45s ease; }
#splash.out { opacity: 0; pointer-events: none; }
.splash-dots, #loading { display: flex; gap: 18px; }
.splash-dots i, #loading i { width: 30px; height: 30px; border-radius: 50%; background: var(--c1); box-shadow: var(--shadow); animation: hop .9s ease-in-out infinite; }
.splash-dots i:nth-child(2), #loading i:nth-child(2) { background: var(--c2); animation-delay: .15s; }
.splash-dots i:nth-child(3), #loading i:nth-child(3) { background: var(--c3); animation-delay: .3s; }
@keyframes hop { 50% { transform: translateY(-22px); } }
#loading { position: fixed; inset: 0; z-index: 85; align-items: center; justify-content: center; pointer-events: none; }

/* tela final */
.win { gap: 8px; justify-content: safe center; overflow-y: auto; min-height: 0; padding-bottom: 8px; }
.win .big-title { font-size: clamp(30px, 6.5vmin, 56px); }
.grade { display: flex; gap: 10px; font-size: clamp(44px, 10vmin, 80px); line-height: 1; margin: 4px 0; }
.grade span { animation: grade-in .5s ease-out both; }
.grade .off { filter: grayscale(1); opacity: .3; }
@keyframes grade-in { from { opacity: 0; transform: scale(.2) rotate(-40deg); } to { transform: none; } }
.score-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 22px; }
.record { font-size: clamp(18px, 3.4vmin, 24px); font-weight: 900; }
.record.new { color: #b26b00; display: inline-block; animation: wiggle 1s ease-in-out 3; }
.learned { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; width: min(100%, 760px); }
.learned button { background: var(--paper); border-radius: 16px; box-shadow: var(--shadow); padding: 4px 4px 6px; display: flex; flex-direction: column; align-items: center; font-weight: 900; font-size: clamp(13px, 2.6vmin, 18px); border: 4px solid var(--cc, var(--c1)); }
.learned img { width: 100%; aspect-ratio: 1; object-fit: contain; }

/* ---------- jogo: barraca ---------- */
#play { position: fixed; inset: 0; z-index: 1; }
#booth { position: absolute; z-index: 2; left: 50%; width: var(--bw); margin-left: calc(var(--bw) / -2); top: calc(70px + var(--sat)); bottom: 0; }
#sign { position: absolute; z-index: 6; left: 50%; top: 0; display: flex; align-items: center; gap: 12px; padding: 10px 30px 10px 12px; min-width: 240px; justify-content: center;
  background: linear-gradient(180deg, #ffe27a, #ffc42e); border: 6px solid #e2432f; border-radius: 22px; box-shadow: 0 6px 0 #a82b1d, 0 14px 26px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.7);
  font-size: clamp(30px, 6vmin, 46px); font-weight: 900; white-space: nowrap; cursor: pointer; }
#sign .sign-spk { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 4px 0 #c98f12; }
#sign .sign-spk svg { width: 30px; height: 30px; fill: none; stroke-width: 2.6; stroke-linecap: round; }
#sign::before, #sign::after { content: ""; position: absolute; top: 100%; width: 8px; height: 22px; background: #8b5a2b; }
#sign::before { left: 22%; } #sign::after { right: 22%; }
#sign.talk .sign-spk { animation: talk .6s ease-in-out; }
@keyframes talk { 30% { transform: scale(1.15); } 60% { transform: scale(.95); } }
#awning { position: absolute; left: -16px; right: -16px; height: 50px; z-index: 4; border-radius: 16px 16px 0 0;
  background: repeating-linear-gradient(90deg, var(--red) 0 46px, #fff 46px 92px); box-shadow: 0 6px 0 rgba(33,48,71,.15); }
#awning::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 20px;
  background: radial-gradient(circle at 23px 0, var(--red) 22px, transparent 23px) 0 0 / 92px 20px repeat-x, radial-gradient(circle at 69px 0, #fff 22px, transparent 23px) 0 0 / 92px 20px repeat-x;
  filter: drop-shadow(0 4px 0 rgba(33,48,71,.12)); }
#frame { position: absolute; left: 0; right: 0; bottom: 0; border: 16px solid var(--wood); border-bottom: 0; box-shadow: inset 0 0 0 4px var(--wood-dark), var(--shadow); z-index: 3; pointer-events: none; }
#frame .bulb { position: absolute; width: 11px; height: 11px; margin: -5.5px; border-radius: 50%; background: #fff6c4; box-shadow: 0 0 8px 3px rgba(255,220,90,.95); animation: chase .9s steps(1) infinite; }
@keyframes chase { 33%, 66% { background: #b9913f; box-shadow: none; } }
#lanes { position: absolute; left: 16px; right: 16px; bottom: 0; overflow: hidden; z-index: 2; background: radial-gradient(ellipse at 50% 45%, #3a8fd6, #1d4f86 75%); }
#sun { position: absolute; left: 50%; top: 55%; width: 260vmax; height: 260vmax; margin: -130vmax; opacity: .55; background: repeating-conic-gradient(rgba(255,255,255,.14) 0 9deg, transparent 9deg 18deg); animation: spin 80s linear infinite; }
#lanes::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), transparent 14%), radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(10,20,50,.45)); pointer-events: none; z-index: 9; }
.row { position: absolute; left: 0; right: 0; perspective: 800px; perspective-origin: 50% 0%; }
.rail { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; border-radius: 4px; z-index: 3; background: linear-gradient(180deg, var(--wood-light), var(--wood) 45%, var(--wood-dark)); box-shadow: 0 5px 0 rgba(0,0,0,.22); }
.rail::after { content: ""; position: absolute; inset: 5px 0 auto; height: 2px; background: repeating-linear-gradient(90deg, rgba(120,60,20,.35) 0 22px, transparent 22px 40px); }
.waves { position: absolute; left: -120px; right: -120px; bottom: 0; z-index: 4; animation: waves 3s linear infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cpath d='M0 30 Q15 4 30 30 T60 30 T90 30 T120 30 V60 H0Z' fill='%2340b0f0' stroke='%23213047' stroke-width='4'/%3E%3Cpath d='M10 26 Q15 16 22 20' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M70 26 Q75 16 82 20' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x bottom / auto 100%; }
.waves.back { z-index: 0; bottom: 14%; filter: brightness(.8); animation-duration: 4.5s; animation-direction: reverse; }
@keyframes waves { to { transform: translateX(120px); } }
.target { position: absolute; bottom: 8px; left: 0; z-index: 1; }
.flip { transform-origin: 50% 100%; position: relative; }
.pic { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 1; filter: drop-shadow(0 8px 6px rgba(0,0,0,.3)); }
/* o palito sobe por tras da figura: sempre encaixado */
.stick { position: absolute; z-index: 0; left: 50%; bottom: 0; transform: translateX(-50%); width: 12%; min-width: 10px; background: linear-gradient(90deg, var(--wood-dark), var(--wood-light) 40%, var(--wood)); border-radius: 3px; border: 2px solid rgba(33,48,71,.4); }
.target.gold .pic { filter: drop-shadow(0 0 4px #ffd23f) drop-shadow(0 0 14px #ffb300) drop-shadow(0 8px 6px rgba(0,0,0,.3)); }
.target .spark { position: absolute; z-index: 2; font-size: 22px; pointer-events: none; }
.target.glow .pic { animation: hint .8s ease-in-out infinite; }
@keyframes hint { 50% { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 20px #ffd23f) drop-shadow(0 0 30px #ffd23f); transform: scale(1.08); } }
.splat { position: absolute; z-index: 5; pointer-events: none; overflow: visible; filter: drop-shadow(0 3px 2px rgba(0,0,0,.25)); }
.balloon { position: absolute; left: 0; top: 0; z-index: 8; width: 68px; height: 150px; pointer-events: none; }
.balloon svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 4px rgba(0,0,0,.25)); }

/* balcao: premios da etapa */
#counter { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; height: calc(var(--counter-h) + var(--sab));
  background: linear-gradient(180deg, var(--wood-light), var(--wood) 18%, var(--wood-dark)); border-top: 6px solid #f6cf98; box-shadow: 0 -8px 18px rgba(0,0,0,.25); }
#counter::before { content: ""; position: absolute; inset: 14px 0 0; background: repeating-linear-gradient(90deg, transparent 0 120px, rgba(90,40,10,.25) 120px 124px); }
#slots { position: absolute; left: 50%; width: var(--bw); margin-left: calc(var(--bw) / -2); top: 10px; display: flex; justify-content: space-between; padding: 0 10px; }
#slots .side { display: flex; gap: clamp(4px, 1.2vw, 14px); }
.slot { width: clamp(40px, 7.4vmin, 74px); aspect-ratio: 1; border-radius: 50%; background: rgba(90,40,10,.35); box-shadow: inset 0 4px 0 rgba(0,0,0,.25), 0 2px 0 rgba(255,255,255,.35); display: grid; place-items: center; position: relative; }
.slot::after { content: "⭐"; font-size: 40%; opacity: .35; filter: grayscale(1); }
.slot.full::after { display: none; }
.slot img { position: absolute; width: 125%; height: 125%; bottom: 0; }
#gun { position: absolute; z-index: 8; left: 50%; bottom: calc(-4vh + var(--sab)); width: clamp(96px, 16vmin, 150px); transform-origin: 50% 85%; margin-left: calc(clamp(96px, 16vmin, 150px) / -2); pointer-events: none; }
#gun svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 10px rgba(0,0,0,.3)); overflow: visible; }
#gun.hot svg { filter: drop-shadow(0 0 10px #ffd23f) drop-shadow(0 0 22px #ff8a3d) drop-shadow(0 10px 10px rgba(0,0,0,.3)); }
#ammo { font-family: var(--font); }
#ammo.low { fill: #ffd23f; }
#combo { position: absolute; z-index: 9; left: 50%; bottom: calc(var(--counter-h) + 40px); margin-left: clamp(60px, 11vmin, 100px); font-size: clamp(26px, 5vmin, 40px); font-weight: 900; color: #fff;
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); white-space: nowrap; pointer-events: none; opacity: 0; transform-origin: 0 50%; }
#combo small { display: block; font-size: 50%; color: var(--yellow); }
#shot { position: fixed; z-index: 7; left: 0; top: 0; width: 34px; height: 34px; margin: -17px; border-radius: 50%; pointer-events: none; opacity: 0; box-shadow: 0 0 0 3px rgba(33,48,71,.55) inset; }
#aim { position: fixed; z-index: 40; left: 0; top: 0; width: 64px; height: 64px; margin: -32px; pointer-events: none; }
.pill { position: absolute; z-index: 9; left: calc(10px + var(--sal)); bottom: calc(6px + var(--sab)); background: linear-gradient(180deg, #a787ff, var(--purple)); color: #fff; font-size: clamp(16px, 3.2vmin, 22px); font-weight: 900; padding: 3px 14px; border-radius: 99px; box-shadow: 0 3px 0 rgba(33,48,71,.25); pointer-events: none; white-space: nowrap; }

/* canvas dos efeitos (PixiJS): por cima da barraca, abaixo dos textos grandes */
#fxc { position: fixed; inset: 0; z-index: 25; pointer-events: none; }
.plus { position: fixed; z-index: 26; left: 0; top: 0; pointer-events: none; font-size: 44px; font-weight: 900; color: var(--yellow); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); white-space: nowrap; }
#praise, #banner { position: fixed; z-index: 26; left: 50%; top: 45%; font-size: clamp(50px, 12vmin, 110px); font-weight: 900; color: var(--yellow);
  -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); pointer-events: none; opacity: 0; white-space: nowrap; text-align: center; translate: -50% -50%; }
#banner small { display: block; font-size: 45%; color: #fff; }
#flash { position: fixed; inset: 0; z-index: 24; background: #fff; opacity: 0; pointer-events: none; }

@media (max-width: 560px) {
  .pill-box { padding: 0 14px 0 8px; font-size: 22px; height: 48px; }
  .round-btn { width: 48px; height: 48px; }
  #topbar { gap: 8px; }
  #sign { padding: 8px 22px 8px 8px; min-width: 200px; } #sign .sign-spk { width: 50px; height: 50px; }
  .cat-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
}