/* Arcade at night: warm actions, cool scores, eight-pixel spacing. */
.social-app{--bg:#080b18;--surface:#141b30;--ink:#ffffff;--dim:#9aa6c4;--lime:#c9ff3d;--mint:#4de3c1;--violet:#9b7bff;--line:#ffffff1f;background:radial-gradient(ellipse at 80% 0%,#9b7bff1f,transparent 60%),radial-gradient(ellipse at 0% 100%,#c9ff3d14,transparent 55%),var(--bg)}
.social-app h1,.social-app h2,.brand{font-family:'Arial Black','Trebuchet MS',system-ui,sans-serif}
.social-app button,.social-app a,.social-app summary{touch-action:manipulation}
.social-app button,.social-app summary{min-height:48px}
.social-app button{transition:transform 180ms,background 180ms,border-color 180ms}
.social-app button:active{transform:scale(.97)}
.social-app .primary{background:var(--lime);color:#251b0c}
.social-app .primary:hover{background:#ffd297}
.social-app .app-page>section{margin-bottom:24px}
.topbar{height:72px}.top-note{display:none}.avatar-button{margin-left:auto;min-width:48px}
.app-layout{max-width:960px}
.contest-strip{background:var(--surface);border-color:#ffbb6455;padding:20px 24px;margin:0 0 12px;position:relative;overflow:hidden}
.contest-strip:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,#ffbb6409 50%,transparent 65%);animation:pool-light 5s ease-in-out infinite}
.contest-strip-pool strong{font:800 clamp(40px,7vw,64px)/1.15 ui-monospace,monospace;letter-spacing:-.06em;color:var(--lime)}
.contest-strip-top3{max-width:45%}.contest-chip{border-radius:8px}
#contest-resets{font:12px ui-monospace,monospace;font-variant-numeric:tabular-nums}
.lobby-status{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:8px 0}
.lobby-status>div{display:flex;flex-direction:column;gap:4px}
.lobby-status strong{font:700 18px ui-monospace,monospace;color:var(--mint);overflow-wrap:anywhere}
.lobby-status span{font-size:10px;color:var(--dim)}
.lobby-status p{grid-column:1/-1;margin:8px 0 0;border-top:1px solid var(--line);padding-top:8px;min-height:28px}
.play-hero{gap:24px;padding:0;grid-template-columns:1fr 1fr}
.hero-demo{background:var(--surface);border-color:var(--line);transform:none;box-shadow:none}
.hero-copy>.eyebrow,.hero-foot{display:none}
.hero-copy .big{width:100%}
.arcade-shortcuts{display:flex;justify-content:space-between;gap:16px}
.arc-pool{background:var(--surface);padding:16px}.arc-pool-amount{font-size:18px}
.daily-card,.daily-card:nth-child(2),.daily-card:nth-child(3),.friends-callout,.one-line-spotlight,.feed-launch,.duel-callout,.result-duel,.result-card{background:var(--surface);border-color:var(--line)}
.daily-card .game-icon{color:var(--mint)}
.catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.catalog-card{min-height:190px}.catalog-card strong{font-size:16px}
.catalog-face{background:var(--surface)}.preview-scrim{background:linear-gradient(transparent,#101211f5)}
.catalog-info{padding:16px}.catalog-type{letter-spacing:.05em}
.new-badge{display:inline-block;font-size:10px;color:#251b0c;background:var(--lime);padding:2px 6px;border-radius:5px;margin-top:4px}
.bottom-nav{background:var(--surface);padding:6px;width:min(440px,calc(100% - 24px));bottom:calc(8px + env(safe-area-inset-bottom))}
.bottom-nav button{padding:4px 8px;min-width:0;flex:1}
.bottom-nav button.active{background:#ffbb6412;border-radius:12px}
.round-hud strong{font:800 40px ui-monospace,monospace;color:var(--mint)}
#round-time{color:var(--ink)}
#round-time.urgent{color:var(--lime);animation:clock-pulse 800ms ease-in-out infinite}
.social-app.is-playing{padding:env(safe-area-inset-top) 12px env(safe-area-inset-bottom)}
.social-app.is-playing .topbar{display:none}
#page-round{padding-top:8px}.round-top{margin-bottom:8px}
.result-number{position:relative;color:var(--mint);font-family:ui-monospace,monospace;letter-spacing:-.06em}
.best-burst{position:absolute;left:50%;top:50%;height:7px;width:5px;background:var(--lime);pointer-events:none;animation:best-burst 700ms ease-out forwards}
.best-burst:nth-child(even){background:var(--mint)}
.board-row strong{color:var(--mint)}.board-row.is-me{background:#75deeb12}
.board-self{position:sticky;bottom:calc(90px + env(safe-area-inset-bottom));display:flex;gap:16px;justify-content:space-between;padding:16px;margin-top:16px;background:var(--surface);border:1px solid var(--mint);border-radius:14px;font-size:13px}
.board-self strong{color:var(--mint)}
.social-app dialog{background:var(--surface)}
.social-app summary{padding:12px 0}
@keyframes clock-pulse{50%{transform:scale(1.1)}}
@keyframes best-burst{to{transform:translate(var(--x),var(--y)) rotate(var(--turn));opacity:0}}
@keyframes pool-light{50%{transform:translateX(30%)}}
@media(max-width:700px){
.social-app{padding-left:16px;padding-right:16px}.topbar{height:64px}.brand{font-size:21px}
.contest-strip{padding:16px;margin-top:0}.contest-strip-top3{max-width:42%}.contest-chip{font-size:10px}
.contest-strip-pool strong{font-size:42px}
.social-app .lobby-status{margin-bottom:12px}
.play-hero{display:flex;flex-direction:column;gap:12px}
.hero-demo{order:-1;width:100%;height:180px}.hero-demo canvas{height:200px}
.hero-copy{width:100%}.hero-copy .big{min-height:56px}
.arcade-shortcuts{margin-top:0;font-size:12px}
.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.catalog-card{min-height:184px}.catalog-info strong{font-size:15px}.catalog-info small{font-size:11px}
.daily-card{min-height:156px}.section-heading{margin-bottom:16px}
.round-hud{grid-template-columns:72px 1fr 72px}.round-hud h1{font-size:20px}.round-hud strong{font-size:36px}
.flagship-canvas{max-height:62dvh}.result-card{margin:12px auto;padding:24px 16px}
}
@media(prefers-reduced-motion:reduce){.social-app *,.social-app *:after{animation:none!important;transition:none!important}}
#lobby-rank{font-size:13px;line-height:21px;overflow-wrap:normal}

.result-card{position:relative;overflow:hidden}

/* Result actions stay within thumb reach; secondary tools share one disclosure. */
#page-result .result-card{display:flex;flex-direction:column;min-height:min(640px,calc(100dvh - 150px))}
#page-result .result-actions{margin-top:auto;padding-top:24px}
#result-more{text-align:center}#result-more summary,#share-more summary{cursor:pointer;padding:12px;min-height:44px;box-sizing:border-box}
#result-more[open]>*:not(summary){margin-top:16px}
#page-result .versus{animation:result-comparison-in .35s ease-out both}
#challenge-friend:active{transform:scale(.97)}
@keyframes result-comparison-in{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#page-result .versus{animation:none}}

#page-result .versus strong{color:var(--ink)}