/* Racing edition: original flat artwork, compact HUD, uninterrupted two-lane race. */
.game-shell:before{background-image:url('./assets/pool-v2.png');opacity:1}
.game-shell:after{background:linear-gradient(#a9eade66,#9ddfcb16 50%,#b6e7ca88)}
.mascot{background:none!important;filter:none;display:inline-block;overflow:hidden}
.mascot>svg{width:100%;height:100%;display:block;overflow:hidden}
.home-lead{position:absolute;width:min(53%,220px);height:95%;left:15%;top:0;animation:bob 3.5s ease-in-out infinite;z-index:2}
.home-friend{position:absolute;width:40%;height:68%;left:49%;top:29%;transform:rotate(8deg);animation:bob 3s ease-in-out infinite;animation-delay:-1.2s;z-index:3}
.home-little{position:absolute;width:23%;height:42%;left:2%;top:50%;transform:rotate(-8deg);animation:bob 3.2s ease-in-out infinite;animation-delay:-.6s;z-index:1}
.home-screen .hero-art:before{background:#347e6328;filter:blur(6px);height:15px;bottom:3px}
.avatar-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.avatar-option{width:auto;min-width:0;padding:5px 1px 4px;border-radius:11px;gap:5px}
.avatar-option .mascot{width:39px;height:39px}
.avatar-option span:last-child{font-size:.75rem}
.avatar-option.active{border-color:#946a40;background:#ffedb3}
.modal-inner:has(.avatar-options) .modal-intro{display:none}
.modal-inner:has(.avatar-options) .form-label{margin-top:12px}
.matching-crew{gap:10px}
.matching-crew .mascot{width:76px;height:76px}
.result-dot.unplayed{background:#eef0e2;color:#9fa895}

.game-shell.is-racing:before{background-image:url('./assets/pool-v2.png');background-repeat:repeat-y;background-size:100% 768px;background-position:50% 0;animation:pool-travel 6.8s linear infinite;opacity:1;will-change:background-position}
.game-shell.is-racing:after{background:linear-gradient(#8fdfd315,transparent 30%,transparent 85%,#9bded22b)}
.race-screen{height:100dvh;min-height:580px;padding:16px 17px 20px;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(18px,env(safe-area-inset-bottom));gap:0;animation:none;overflow:hidden}
.race-hud{height:57px;min-height:57px;display:flex;justify-content:space-between;align-items:center;gap:10px;position:relative;z-index:8}
.race-hud .icon-btn{width:34px;height:34px;color:#fff;background:#286b709e;border:2px solid #28585be0;box-shadow:0 2px 0 #1e55552b}
.race-hud .icon-btn svg{width:18px;height:18px;stroke-width:2.5}
.race-question-count,.race-population{font-family:OceanSans,sans-serif;font-size:1.2rem;line-height:1;font-weight:900;color:white;-webkit-text-stroke:3px #213334;paint-order:stroke fill;white-space:nowrap}
.race-question-count small{font-size:.8rem;margin-left:2px;-webkit-text-stroke:2.5px #213334;opacity:.95}
.race-population{display:flex;gap:5px;align-items:center;min-width:43px}
.race-population svg{stroke:#fff;stroke-width:2.7;filter:drop-shadow(1px 0 #233737) drop-shadow(-1px 0 #233737) drop-shadow(0 1px #233737);width:20px;height:20px}
.race-question{z-index:6;position:relative;margin:10px 0 0;padding:12px 14px;background:#287e828c;border:2px solid #275d6199;border-radius:15px;box-shadow:0 3px 0 #275c6130;flex-shrink:0}
.race-question h2{margin:0;color:#fff;font-size:clamp(1.125rem,5.1vw,1.45rem);line-height:1.42;font-weight:900;letter-spacing:.6px;text-align:left;-webkit-text-stroke:3.2px #202b2d;paint-order:stroke fill;text-shadow:0 2px 0 #183239;overflow-wrap:anywhere}
.race-arena{position:relative;flex:1;min-height:305px;margin:0 -11px;isolation:isolate;overflow:hidden;contain:layout;--racer-size:39px}
.lane-symbols{position:absolute;top:13px;left:0;right:0;display:flex;justify-content:space-around;pointer-events:none;z-index:0}
.lane-symbols span{display:grid;place-items:center;width:28px;height:26px;border-radius:9px;background:#ffffff4a;border:1px solid #fff7;color:#266966}
.lane-symbols svg{width:18px;height:18px;stroke-width:3}
.racer{width:var(--racer-size);height:var(--racer-size);display:block;z-index:2;transform:translate(-50%,-50%);transition:left .65s cubic-bezier(.18,.68,.28,1),top .6s ease;will-change:left,top}
.racer-body{position:relative;display:block;width:100%;height:100%;z-index:2}
.racer .mascot{width:100%;height:100%;animation:race-swim .9s ease-in-out infinite;animation-delay:var(--swim-delay,0s);filter:drop-shadow(0 2px 0 #274f582b)}
.racer:after{content:'';position:absolute;z-index:-1;left:13%;right:13%;height:7px;border:2px solid #eefffaa8;border-top:0;border-radius:0 0 60% 60%;bottom:-2px;animation:swim-wake .9s ease-out infinite;animation-delay:var(--swim-delay,0s)}
.racer.me{width:61px;height:61px;z-index:4}
.racer.me .mascot{width:100%;height:100%;filter:drop-shadow(1.5px 0 #fff6ae) drop-shadow(-1.5px 0 #fff6ae) drop-shadow(0 2px #fff6ae)}
.racer.me:before{content:'';position:absolute;inset:-3px;border-radius:50%;background:#fff0a527;border:2px dashed #fff0bc9c;z-index:-1;animation:player-ring 2.6s linear infinite}
.player-pointer{position:absolute;left:50%;top:-18px;width:0;height:0;transform:translateX(-50%);border-left:8px solid transparent;border-right:8px solid transparent;border-top:12px solid #ffdb6b;filter:drop-shadow(0 2px 0 #4c5547);z-index:5}
.lane-result{position:absolute;inset:0 50% 0 0;pointer-events:none;z-index:0}
.lane-result.lane-false{inset:0 0 0 50%}
.blocked-lane{animation:lane-warning .4s ease-in-out 2}
.race-controls{margin:6px 3px 0;display:flex;justify-content:space-between;gap:32px;position:relative;z-index:8;flex-shrink:0}
.race-controls .answer-btn{height:78px;min-height:78px;width:calc(50% - 16px);border:3px solid #2e6555;background:#97d876;border-radius:23px;box-shadow:0 5px 0 #396b54,0 7px 0 #fff3;position:relative;transition:transform .15s,box-shadow .15s}
.race-controls .answer-btn.false{border-color:#825443;background:#f8aa7b;box-shadow:0 5px 0 #916247,0 7px 0 #fff3}
.race-controls .answer-btn:before{content:'';position:absolute;left:12px;right:12px;top:5px;height:4px;background:#fff6;border-radius:10px}
.race-controls .answer-btn svg{width:46px;height:46px;color:white;stroke-width:4;filter:drop-shadow(1.8px 0 #274c3b) drop-shadow(-1.8px 0 #274c3b) drop-shadow(0 1.8px #274c3b) drop-shadow(0 -1.8px #274c3b)}
.race-controls .answer-btn.false svg{filter:drop-shadow(1.8px 0 #643f32) drop-shadow(-1.8px 0 #643f32) drop-shadow(0 1.8px #643f32) drop-shadow(0 -1.8px #643f32)}
.race-controls .answer-btn.selected{box-shadow:0 0 0 3px #fff6b8,0 5px 0 #396b54;transform:translateY(-2px)}
.race-controls .answer-btn.false.selected{box-shadow:0 0 0 3px #fff6b8,0 5px 0 #916247}
.race-controls .answer-btn:disabled{opacity:.63}
.race-obstacle{display:none;position:absolute;z-index:5;width:50%;height:37%;left:0;top:-40%;pointer-events:none;filter:drop-shadow(0 8px 0 #30514b20)}
.race-obstacle span{display:block;position:absolute;inset:0 -1%;background-image:url('./assets/obstacles-v2.png');background-repeat:no-repeat;background-size:300% 100%;background-position:0 0}
.race-obstacle.obstacle-1 span{background-position:50% 0}
.race-obstacle.obstacle-2 span{background-position:100% 0}
.race-obstacle.sweeping{display:block;animation:obstacle-sweep 2.8s linear both}
.splash-ring{position:absolute;inset:-5px;border:5px solid #effffd;border-radius:50%;z-index:3;opacity:0;pointer-events:none}
.racer.eliminated{z-index:6}
.racer.eliminated .racer-body{animation:race-knockout 1.2s linear both;animation-delay:calc(var(--hit-delay,1s) - var(--elapsed,0s))}
.racer.eliminated .splash-ring{animation:collision-splash .55s ease-out both;animation-delay:calc(var(--hit-delay,1s) - var(--elapsed,0s))}
.racer.eliminated:after,.racer.eliminated:before,.racer.eliminated .player-pointer{animation:fade-out .2s both;animation-delay:calc(var(--hit-delay,1s) - var(--elapsed,0s))}
@keyframes pool-travel{from{background-position:50% 0}to{background-position:50% 768px}}
@keyframes race-swim{0%,100%{transform:translateY(1px) rotate(-5deg)}50%{transform:translateY(-3px) rotate(5deg)}}
@keyframes swim-wake{0%{opacity:.8;transform:translateY(0) scaleX(.7)}100%{opacity:0;transform:translateY(15px) scaleX(1.5)}}
@keyframes timer-pulse{50%{transform:scale(1.06)}}
@keyframes player-ring{to{transform:rotate(360deg)}}
@keyframes lane-warning{50%{background:#fd9e7040}}
@keyframes obstacle-sweep{0%{top:-38%;transform:scale(.78)}13%{transform:scale(1.07)}100%{top:118%;transform:scale(1)}}
@keyframes race-knockout{0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}10%{opacity:1;transform:translate(0,7px) rotate(-12deg) scale(1.18,.8)}35%{opacity:1;transform:translate(calc(var(--fly-x)*.3),-105px) rotate(calc(var(--fly-spin)*.35)) scale(1.22)}65%{opacity:1;transform:translate(calc(var(--fly-x)*.7),-125px) rotate(calc(var(--fly-spin)*.7)) scale(.95)}85%{opacity:.8;transform:translate(calc(var(--fly-x)*.9),-75px) rotate(var(--fly-spin)) scale(.6)}100%{opacity:0;transform:translate(var(--fly-x),-20px) rotate(var(--fly-spin)) scale(.2)}}
@keyframes collision-splash{0%{opacity:1;transform:scale(.35)}100%{opacity:0;transform:scale(2.1)}}
@keyframes fade-out{to{opacity:0}}
@media(min-width:600px){.race-screen{height:min(900px,calc(100dvh - 62px));min-height:740px}.game-shell:has(.race-screen){min-height:0}}
@media(max-height:740px) and (max-width:599px){.race-screen{padding:10px 13px 15px;min-height:570px}.race-hud{height:47px;min-height:47px}.race-question{margin-top:8px;padding:10px 12px}.race-question h2{font-size:clamp(1.05rem,5vw,1.25rem);line-height:1.4}.race-arena{min-height:295px;margin:0 -6px}.race-controls{margin-top:0}.race-controls .answer-btn{height:67px;min-height:67px}.race-controls .answer-btn svg{width:39px;height:39px}.racer.me{width:52px;height:52px}}
@media(max-width:359px){.race-hud{gap:6px}.race-hud .icon-btn{width:30px;height:30px}.race-question-count,.race-population{font-size:1rem}.race-question h2{letter-spacing:0}.race-controls{gap:25px;margin-left:4px;margin-right:4px}.avatar-option .mascot{width:32px;height:32px}.avatar-option span:last-child{font-size:.6875rem}}
@media(prefers-reduced-motion:reduce){.game-shell.is-racing:before{animation:none}.racer .mascot,.racer:after,.racer.me:before{animation:none}.race-obstacle.sweeping{animation:none;top:40%;opacity:.95}.racer.eliminated .racer-body,.racer.eliminated:before,.racer.eliminated:after,.racer.eliminated .player-pointer{animation:none;opacity:0}.racer.eliminated .splash-ring{animation:none;opacity:0}}

/* Home: quiet solid surfaces keep the pool illustration behind the cast only. */
.game-shell:has(.home-screen){background:#f1f5ea}
.game-shell:has(.home-screen):before,.game-shell:has(.home-screen):after{display:none}
.home-screen{gap:0;min-height:720px;padding:20px 22px}
.home-screen .topbar{min-height:36px}
.home-screen .brand{color:#174e51}
.home-screen .icon-btn{background:#fff;border:1px solid #d6e4dc}
.home-screen .stats{margin-top:15px;gap:10px}
.home-screen .stat-pill{background:#fff;border:1px solid #dbe7dc;box-shadow:none;border-radius:15px;min-width:0;padding:10px}
.home-showcase{display:flex;flex-direction:column;flex:1;min-height:320px;margin:16px 0;background:#17666a;border:1px solid #13585b;border-radius:26px;overflow:hidden;position:relative;isolation:isolate;box-shadow:0 5px 0 #173f4210}
.home-showcase:before{content:'';position:absolute;inset:43% 0 0;z-index:-1;background:linear-gradient(#17666a,transparent 50%),url('./assets/pool-v2.png') center 60%/cover;opacity:.24}
.home-screen .title-block{margin:0;padding:19px 12px 0}
.home-screen .game-title{font-size:clamp(2.5rem,10.5vw,3.1rem);margin:0;transform:none;filter:none;-webkit-text-stroke:0;color:#fff9df;line-height:1.08;letter-spacing:3px;text-shadow:0 3px 0 #104c50}
.home-screen .game-title span{font-size:.73em;color:#ffda83;margin-top:5px;letter-spacing:8px}
.home-screen .title-sub{color:#d6eee5;font-size:.75rem;letter-spacing:1px;margin-top:10px}
.home-screen .hero-art{flex:1;min-height:132px;max-height:210px;margin:4px 13px 0}
.home-screen .hero-art .bubble{display:none}
.home-screen .crew-strip{margin:4px 12px 15px;gap:5px}
.home-screen .region-pill{background:#e6f4e8;color:#194f52;border:0;max-width:100%}
.home-screen .home-buttons{gap:11px}
.home-screen .primary-btn{border:2px solid #d9714a;background:#ff855f;box-shadow:0 4px 0 #d76c49;min-height:57px}
.home-screen .secondary-btn{border:1px solid #ccded3;background:#fff;box-shadow:0 3px 0 #d9e5da;min-height:46px}
.home-screen .home-rule{color:#58716a;font-size:.6875rem;line-height:1.8;margin:13px 0 11px}
.home-screen .home-rule .text-link{color:#23655e}
.home-screen .supply{background:#fff;border:1px solid #d8e4d5;box-shadow:none;padding:12px;border-radius:17px}
.home-screen .supply-copy p{color:#627c70}
.home-screen .home-footer{color:#72857a;font-size:.625rem;margin-top:12px;letter-spacing:1px}
@media(min-width:600px){.home-screen{height:846px;padding:22px}}
@media(max-width:599px) and (max-height:740px){.home-screen{padding:13px 16px;min-height:690px}.home-showcase{margin:12px 0;min-height:295px}.home-screen .title-block{padding-top:14px}.home-screen .game-title{font-size:2.5rem}.home-screen .title-sub{margin-top:7px}.home-screen .stats{margin-top:11px}.home-screen .hero-art{min-height:115px}.home-screen .home-footer{margin-top:9px}}
@media(max-width:359px){.home-screen{padding-left:13px;padding-right:13px}.home-screen .stat-pill{padding:8px 6px;gap:5px}.home-screen .stat-pill .stat-icon{width:25px;height:28px}.home-screen .stat-label{font-size:.6875rem}.home-screen .stat-help{width:20px}.home-screen .game-title{font-size:2.4rem}}

/* Choice feedback mirrors the player's lane; the clock stays at screen center. */
.race-screen{position:relative}
.race-clock{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:7}
.lane-symbols{z-index:4}
.lane-symbols span{transition:background .15s,color .15s,box-shadow .15s,transform .15s}
.lane-symbols span.selected{color:#fff;border:2px solid #fff6bc;transform:scale(1.16);box-shadow:0 0 0 3px #fff5b955,0 0 16px #fff4aecc}
.lane-symbols [data-lane="true"].selected{background:#219558}
.lane-symbols [data-lane="false"].selected{background:#e47548}

/* Generated transparent digit artwork: no badge, frame or background. */
.race-clock .race-timer{display:flex;align-items:center;justify-content:center;gap:0;position:relative;width:auto;height:auto;border:0;border-radius:0;background:none;box-shadow:none}
.race-clock .race-timer:before{content:none}
.countdown-digit{display:block;width:clamp(74px,22vw,94px);height:clamp(74px,22vw,94px);background-image:url('./assets/countdown-digits.png');background-repeat:no-repeat;background-size:500% 200%;flex-shrink:0}
.race-clock .race-timer.urgent{animation:timer-pulse .8s ease-in-out infinite}

.race-revealing .race-clock{visibility:hidden}
.race-revealing .racer.eliminated .mascot{animation:none}

/* Survivors hold their slots through collisions and until their next choice. */
.racer.waiting .mascot,.racer.waiting:after,.racer.waiting.me:before{animation:none}
.racer.waiting:after{opacity:0}
.race-revealing .racer:not(.eliminated){transition:none}

.matching-progress{height:10px;margin:12px 18px 18px;border-radius:20px;background:#deece1;overflow:hidden}
.matching-progress span{display:block;height:100%;width:100%;background:linear-gradient(90deg,#45bfb0,#f4cb70);border-radius:inherit;transform-origin:left;animation:matching-fill 3s ease-out both}
.matching small{display:block;margin-top:13px;color:#6f907c;font-size:.6875rem}
@keyframes matching-fill{from{transform:scaleX(.03)}to{transform:scaleX(1)}}

/* Document revision: compact sharing and rule entries beneath My Score. */
.home-extras{display:grid;grid-template-columns:minmax(0,1fr) 86px;gap:10px;margin-top:16px;flex-shrink:0}
.home-extras .supply{gap:7px;margin:0;padding:12px 10px;min-width:0}
.home-extras .supply-icon{width:32px;height:36px;border-radius:10px;flex-shrink:0}
.home-extras .supply-icon svg{width:21px;height:21px}
.home-extras .supply-copy{min-width:0;flex:1}
.home-extras .supply-copy strong{font-size:.8rem;white-space:nowrap}
.home-extras .supply-copy p{font-size:.625rem;white-space:nowrap;margin-top:4px}
.home-extras .supply-btn{padding:8px 7px;font-size:.75rem;white-space:nowrap}
.rules-entry{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:1px solid #d5e2d3;border-radius:17px;background:#fff;color:#23655e;font-size:.8rem;font-weight:700}
.score-cache-note{font-size:.75rem;color:#658172;line-height:1.7;margin-top:16px}
.avatar-option:disabled,.region-option:disabled{cursor:default}
.avatar-option.active:disabled,.region-option.active:disabled{opacity:1}
@media(max-width:359px){.home-extras{grid-template-columns:minmax(0,1fr) 70px;gap:7px}.home-extras .supply{padding:10px 7px;gap:5px}.home-extras .supply-icon{display:none}.rules-entry{font-size:.75rem}.home-extras .supply-copy strong{font-size:.75rem}}
.rank-update{text-align:center;margin-top:9px;font-size:.7rem;color:#346d65;letter-spacing:.3px}