/* Shared look for the Brainy Labs counting games (Count & Glow, 123 Pop!, Tap Math).
   Same family as Brainy Pitch Adventure: bright gradient, frosted glass, chunky buttons. */
:root { --ink: #231a4f; --glass: rgba(255,255,255,.34); --glass-line: rgba(255,255,255,.7); --accent: #fde047; --spring: cubic-bezier(.3,1.6,.5,1); }
* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
html, body { height: 100%; overflow: hidden; font-family: 'Fredoka', system-ui, sans-serif; color: var(--ink); background: linear-gradient(170deg, #5eead4 0%, #8b5cf6 55%, #ec4899 100%); }
body.sky { background: linear-gradient(170deg, #38bdf8 0%, #6366f1 55%, #c084fc 100%); }
body.sunset { background: linear-gradient(170deg, #fbbf24 0%, #f472b6 55%, #8b5cf6 100%); }
#app { height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 44px; padding-top: max(12px, env(safe-area-inset-top)); position: relative; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 10px; z-index: 10; flex-wrap: wrap; row-gap: 6px; }
.side { flex: 1 1 0; display: flex; gap: 8px; align-items: center; min-width: 0; }
.side.right { justify-content: flex-end; }
a.chip { text-decoration: none; }
.chip { font: 700 1rem Fredoka, sans-serif; color: var(--ink); border: 2px solid var(--glass-line); background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 999px; padding: 9px 18px; cursor: pointer; white-space: nowrap; box-shadow: 0 4px 14px rgba(35,26,79,.12); transition: transform .12s var(--spring); }
.chip:active { transform: scale(.94); }
.me { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); background: var(--glass); border: 2px solid var(--glass-line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 999px; padding: 3px 14px 3px 3px; box-shadow: 0 4px 14px rgba(35,26,79,.12); }
.me img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top; background: #fff; border: 2px solid #fff; }
.title { flex: 0 1 auto; text-align: center; font-size: clamp(1.4rem, 3.6vw, 2.2rem); font-weight: 700; line-height: 1.05; color: #fff; letter-spacing: .5px; text-shadow: 0 2px 0 #db2777, 0 4px 0 #7c3aed, 0 10px 18px rgba(35,26,79,.4); }
.title span { color: var(--accent); }
.stars-badge { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 1.15rem; background: rgba(255,255,255,.85); padding: 5px 14px 5px 10px; border-radius: 999px; box-shadow: 0 4px 12px rgba(35,26,79,.15); }
.stars-badge svg { width: 22px; height: 22px; }
.stars-badge.bump { animation: bump .5s var(--spring); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.35) rotate(-5deg); } 100% { transform: scale(1); } }
@media (max-width: 560px) { .me span { display: none; } .me { padding: 2px; } .title { order: -1; flex-basis: 100%; } .chip { padding: 7px 13px; font-size: .9rem; } }

.pills { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pills button { font: 700 1rem Fredoka, sans-serif; color: var(--ink); border: 2px solid var(--glass-line); background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 999px; padding: 8px 18px; cursor: pointer; box-shadow: 0 4px 0 rgba(35,26,79,.18); transition: transform .12s var(--spring); }
.pills button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(35,26,79,.18); }
.pills button.on { background: #fff; color: #7c3aed; border-color: #fff; box-shadow: 0 4px 0 rgba(35,26,79,.25), 0 0 18px rgba(255,255,255,.7); }

main { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
#prompt { font-size: clamp(1.25rem, 3.6vw, 2rem); font-weight: 700; text-align: center; color: #fff; text-shadow: 0 2px 0 rgba(124,58,237,.7), 0 6px 14px rgba(35,26,79,.35); min-height: 1.3em; }
#prompt.pop { animation: pop .35s ease-out; }
@keyframes pop { 0% { transform: scale(.94); opacity: .5; } 60% { transform: scale(1.04); } 100% { transform: scale(1); opacity: 1; } }
#note { font-size: .95rem; color: #fff; opacity: .92; font-weight: 600; text-align: center; max-width: 560px; line-height: 1.35; text-shadow: 0 1px 4px rgba(35,26,79,.4); }

.board { position: relative; flex: 1; min-height: 240px; width: min(96vw, 820px); max-height: 560px; border-radius: 32px; background: var(--glass); border: 2px solid var(--glass-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 14px 30px rgba(35,26,79,.2), inset 0 2px 0 rgba(255,255,255,.5); overflow: hidden; }

.big { font: 700 clamp(1.1rem, 2.6vw, 1.45rem) Fredoka, sans-serif; color: #fff; border: 0; border-radius: 24px; padding: 14px 30px; cursor: pointer; background: linear-gradient(170deg, #fb7185, #e11d48); box-shadow: 0 7px 0 #9f1239, 0 14px 22px rgba(35,26,79,.25), inset 0 2px 0 rgba(255,255,255,.35); transition: transform .12s var(--spring), box-shadow .12s; animation: nudge 1.6s ease-in-out infinite; }
.big:active { transform: translateY(5px); box-shadow: 0 2px 0 #9f1239, inset 0 2px 0 rgba(255,255,255,.35); }
@keyframes nudge { 0%, 100% { transform: none; } 50% { transform: translateY(-3px) scale(1.03); } }
.hidden, [hidden] { display: none !important; }

/* Round picture tokens: the art fills the whole circle, no square corners */
.token { position: absolute; translate: -50% -50%; width: clamp(66px, 12.5vmin, 104px); aspect-ratio: 1; border: 0; padding: 0; border-radius: 50%; background: none; cursor: pointer; transition: transform .22s var(--spring), filter .25s, opacity .3s; filter: drop-shadow(0 8px 8px rgba(35,26,79,.35)); }
.token .face { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--rim-bg, radial-gradient(circle at 35% 28%, #fff, #c4b5fd)); box-shadow: 0 0 0 4px var(--rim, #fff), inset 0 -8px 12px rgba(35,26,79,.22), inset 0 6px 8px rgba(255,255,255,.55); }
.token .face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.token .face .emo { font-size: clamp(2rem, 7vmin, 3.4rem); line-height: 1; }
.token .face::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 22%, rgba(255,255,255,.55), rgba(255,255,255,0) 42%); pointer-events: none; }
.token .badge { position: absolute; right: -6px; bottom: -6px; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font: 700 1.15rem Fredoka, sans-serif; color: #fff; background: linear-gradient(170deg, #a78bfa, #6d28d9); border: 3px solid #fff; box-shadow: 0 3px 8px rgba(35,26,79,.35); transform: scale(0); transition: transform .3s var(--spring); }
.token .badge.show { transform: scale(1); }
.token:active { transform: scale(.93); }
.token.lit { transform: scale(1.1); filter: drop-shadow(0 0 18px rgba(255,255,255,.95)) drop-shadow(0 8px 8px rgba(35,26,79,.3)); }
.token.lit .face { box-shadow: 0 0 0 5px #fde047, inset 0 -8px 12px rgba(35,26,79,.18), inset 0 6px 8px rgba(255,255,255,.55); }
.token.done { pointer-events: none; }
.token.dim { opacity: .5; filter: grayscale(.4) drop-shadow(0 4px 4px rgba(35,26,79,.2)); }
.token.held { transform: scale(1.14); z-index: 6; cursor: grabbing; transition: transform .12s, filter .25s; }
.token.glide { transition: left .45s var(--spring), top .45s var(--spring), transform .22s var(--spring); }
.token.wrong { animation: shake .4s; }
@keyframes shake { 0%,100% { translate: -50% -50%; } 25% { translate: calc(-50% - 8px) -50%; } 75% { translate: calc(-50% + 8px) -50%; } }
.halo { position: absolute; translate: -50% -50%; border-radius: 50%; pointer-events: none; border: 4px solid #fff; animation: halo .7s ease-out forwards; }
@keyframes halo { from { width: 40px; height: 40px; opacity: .9; } to { width: 190px; height: 190px; opacity: 0; } }

.eq { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: clamp(1.8rem, 6vw, 3rem); color: #fff; background: rgba(35,26,79,.32); border: 2px solid rgba(255,255,255,.4); border-radius: 26px; padding: 4px 22px; text-shadow: 0 3px 0 rgba(35,26,79,.35); }
.eq .q { color: var(--accent); min-width: 1.2ch; text-align: center; }
.eq .q.ok { animation: bump .5s var(--spring); }
.answers { display: flex; gap: 14px; justify-content: center; }
.ans { font: 700 2rem Fredoka, sans-serif; width: 84px; height: 84px; border-radius: 26px; border: 0; color: #fff; cursor: pointer; background: linear-gradient(170deg, #a78bfa, #6d28d9); box-shadow: 0 7px 0 #4c1d95, 0 12px 18px rgba(35,26,79,.25), inset 0 2px 0 rgba(255,255,255,.35); transition: transform .12s var(--spring), box-shadow .12s; }
.ans:active { transform: translateY(5px); box-shadow: 0 2px 0 #4c1d95; }
.ans.bad { animation: shake2 .4s; background: linear-gradient(170deg, #cbd5e1, #94a3b8); box-shadow: 0 7px 0 #64748b; }
.ans.good { background: linear-gradient(170deg, #4ade80, #16a34a); box-shadow: 0 7px 0 #166534; animation: bump .5s var(--spring); }
@keyframes shake2 { 0%,100% { transform: none; } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

.ver { position: fixed; right: 10px; bottom: 10px; z-index: 99; display: flex; gap: 8px; align-items: center; font: 600 12px system-ui, sans-serif; color: #231a4f; background: rgba(255,255,255,.8); border: 1px solid rgba(35,26,79,.2); border-radius: 999px; padding: 5px 10px; }
.ver button { font: 600 12px system-ui, sans-serif; color: #fff; background: #4338ca; border: 0; border-radius: 999px; padding: 4px 10px; cursor: pointer; }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
.cheer { position: fixed; left: 50%; top: 42%; translate: -50% -50%; z-index: 61; pointer-events: none; font-size: clamp(5rem, 22vmin, 11rem); filter: drop-shadow(0 12px 18px rgba(35,26,79,.4)); animation: cheer 1.4s var(--spring) forwards; }
@keyframes cheer { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 35% { transform: scale(1.1) rotate(8deg); opacity: 1; } 70% { transform: scale(1) rotate(-4deg); opacity: 1; } 100% { transform: scale(1.05) translateY(-30px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .big, .cheer, .halo { animation: none; } }