/* Base: fonts, scaling unit, stage, shared components. 1rem = 10 design px on a 1920×1200 canvas. */
@font-face { font-family: 'Orbitron'; src: url(../fonts/Orbitron-VariableFont_wght.woff2) format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url(../fonts/SpaceGrotesk-VariableFont_wght.woff2) format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Big Shoulders'; src: url(../fonts/BigShoulders.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Bungee'; src: url(../fonts/Bungee-Regular.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Oswald'; src: url(../fonts/Oswald-VariableFont_wght.woff2) format('woff2'); font-weight: 200 700; font-display: swap; }
@font-face { font-family: 'Unbounded'; src: url(../fonts/Unbounded-VariableFont_wght.woff2) format('woff2'); font-weight: 200 900; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url(../fonts/Outfit-VariableFont_wght.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

:root { --u: min(calc(100vw / 1920), calc(100dvh / 1200)); font-size: calc(var(--u) * 10); }
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; background: var(--page); color: var(--text); font-family: var(--font-body); overflow: hidden; overscroll-behavior: none; }
body { font-size: 3rem; user-select: none; -webkit-user-select: none; -webkit-font-smoothing: antialiased; }
img { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; touch-action: manipulation; }
button:focus-visible { outline: 0.5rem solid var(--accent); outline-offset: 0.4rem; }
[hidden] { display: none !important; }
.panel, .btn, .key, .f { position: relative; }

#app { position: fixed; inset: 0; overflow: clip; }
.screen { position: absolute; inset: 0; overflow: hidden; overflow: clip; }
.bg { position: absolute; inset: 0; background: var(--bg-img) center / cover no-repeat, var(--page); }
.screen:not(.home) .bg { filter: var(--bg-game-filter); transform: scale(1.06); }
.shade { position: absolute; inset: 0; pointer-events: none; }
.grain { position: absolute; inset: 0; pointer-events: none; background: url(../assets/grain.webp); opacity: var(--grain, .05); z-index: 50; }
.stage { position: absolute; left: 50%; top: 50%; width: 192rem; height: 120rem; transform: translate(-50%, -50%); }

/* top bar */
.topbar { position: absolute; left: 5.6rem; right: 5.6rem; top: 3.6rem; height: 12rem; display: flex; align-items: center; gap: 2.2rem; z-index: 5; }
.sp { flex: 1; }
.ttl { position: absolute; left: 50%; top: 0; height: 12rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; white-space: nowrap; }
.btn { position: relative; height: 12rem; min-width: 12rem; padding: 0 4.2rem; display: inline-flex; align-items: center; justify-content: center; gap: 1.4rem; font-size: 3.4rem; font-weight: 700; white-space: nowrap; transition: transform .12s ease, filter .12s ease; }
.btn:active, .card:active, .key:active, .ans:active, .plate:active, .f:active, .padk:active, .pick:active { transform: scale(.96); }
.chip { height: 12rem; padding: 0 3.6rem; display: flex; align-items: center; gap: 1.4rem; font-size: 3.2rem; font-weight: 600; white-space: nowrap; }

/* theme switcher button */
.theme-btn .theme-dot { width: 4.4rem; height: 4.4rem; border-radius: 50%; flex: none; background: conic-gradient(#00E5FF 0 33%, #E8562A 0 66%, #3D5AFE 0); box-shadow: inset 0 0 0 .4rem rgba(255,255,255,.7), 0 .4rem 1rem rgba(0,0,0,.3); }
.theme-btn.compact { padding: 0 3.4rem; }

/* overlays */
.overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(5, 8, 14, .55); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s ease; }
.overlay.open { opacity: 1; }
.sheet { width: min(110rem, 92vw); max-height: 92dvh; overflow: auto; padding: 5rem 5.6rem; transform: translateY(4rem) scale(.97); transition: transform .22s ease; }
.overlay.open .sheet, .overlay.open .picker-box { transform: none; }
.sheet-title { font-family: var(--font-display); font-size: 5.6rem; line-height: 1.1; margin-bottom: 2.4rem; }
.sheet-body { font-size: 3.4rem; line-height: 1.4; display: flex; flex-direction: column; gap: 2rem; }
.sheet-actions { display: flex; gap: 2.4rem; margin-top: 4rem; justify-content: flex-end; flex-wrap: wrap; }
.help-tiles { display: flex; align-items: center; gap: 2.4rem; }
.help-tiles .tile { width: 9rem; height: 9rem; }
.res-line { font-size: 4rem; font-weight: 700; }
.res-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
.res-stats b { display: block; font-family: var(--font-display); font-size: 7rem; line-height: 1.1; }
.res-stats span { font-size: 2.6rem; opacity: .7; }
.dist { display: flex; flex-direction: column; gap: 1rem; }
.dist-row { display: flex; align-items: center; gap: 1.6rem; font-size: 2.8rem; }
.dist-row > span { width: 3rem; text-align: right; }
.dist-row i { font-style: normal; display: block; text-align: right; padding: 0.4rem 1.4rem; border-radius: 1rem; background: var(--miss); color: var(--miss-ink); font-weight: 700; }
.dist-row i.on { background: var(--ok); color: var(--ok-ink); }
.res-next { font-size: 3rem; opacity: .85; }

.toast { position: fixed; left: 50%; top: 18rem; z-index: 120; transform: translate(-50%, -2rem); opacity: 0; pointer-events: none; padding: 2.4rem 4.4rem; font-size: 3.4rem; font-weight: 700; transition: opacity .2s, transform .2s; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* theme picker */
.picker-box { width: min(176rem, 96vw); max-height: 96dvh; overflow: auto; padding: 4.4rem; border-radius: 4.8rem; background: rgba(12, 14, 20, .78); backdrop-filter: blur(20px); color: #fff; box-shadow: 0 4rem 10rem rgba(0,0,0,.5), inset 0 0 0 .2rem rgba(255,255,255,.12); transform: translateY(4rem) scale(.97); transition: transform .22s ease; text-align: center; }
.picker-title { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 6rem; letter-spacing: -.2rem; margin-bottom: 3.6rem; }
.picker-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
.pick { position: relative; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 1.4rem; padding: 0 0 3.4rem; min-height: 12rem; border-radius: 3.6rem; overflow: hidden; background: #1a1d26; box-shadow: inset 0 0 0 .3rem rgba(255,255,255,.12); transition: transform .12s, box-shadow .2s; }
.pick.on { box-shadow: inset 0 0 0 .6rem #fff, 0 0 4rem rgba(255,255,255,.35); }
.pick-art { width: 100%; height: 26rem; background-size: cover; background-position: center; }
.pick-vixen .pick-art { background-image: url(../assets/nc-bg.webp); }
.pick-diva .pick-art { background-image: url(../assets/or-bg.webp); background-position: center 30%; }
.pick-bougie .pick-art { background-image: url(../assets/pp-bg.webp); background-color: #FAFAF7; background-position: right top; }
.pick-sw { display: flex; gap: 1rem; padding: 0 3.4rem; }
.pick-sw i { width: 4.4rem; height: 4.4rem; border-radius: 1.2rem; box-shadow: inset 0 0 0 .2rem rgba(255,255,255,.3); }
.pick-name { padding: 0 3.4rem; font-size: 5rem; line-height: 1.05; }
.pick-vixen .pick-name { font-family: 'Orbitron'; font-weight: 900; color: #00E5FF; text-shadow: 0 0 2rem rgba(0,229,255,.7); font-size: 4.4rem; }
.pick-diva .pick-name { font-family: 'Bungee'; color: #fff; text-shadow: 0 0 .6rem #fff, 0 0 1.8rem #FF4F8B, 0 0 4rem #FF4F8B; }
.pick-bougie .pick-name { font-family: 'Unbounded'; font-weight: 800; letter-spacing: -.2rem; color: #fff; }
.pick-tag { padding: 0 3.4rem; font-family: 'Outfit'; font-size: 2.8rem; line-height: 1.3; opacity: .75; }
.pick-on { margin: .6rem 3.4rem 0; height: 6.4rem; padding: 0 2.6rem; display: inline-flex; align-items: center; border-radius: 3.2rem; font-family: 'Outfit'; font-weight: 700; font-size: 2.6rem; background: rgba(255,255,255,.12); }
.pick.on .pick-on { background: #fff; color: #111; }
.picker-close { margin-top: 3.6rem; color: #fff; border-radius: 6rem; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 .2rem rgba(255,255,255,.2); }

/* celebration overlay (full screen; skins choose which pieces show) */
.celebrate { position: absolute; inset: 0; z-index: 60; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.celebrate > * { position: absolute; }
.cel-confetti, .cel-boltwrap, .cel-medal { display: none; }
.celebrate > * { will-change: transform, opacity; }
.cel-card { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 4rem 7rem; animation: cel-pop .55s cubic-bezier(.2, 1.6, .4, 1) both; }
.cel-pts { font-family: var(--font-display); font-size: 14rem; line-height: 1; }
.cel-line { font-size: 4rem; font-weight: 700; }
.celebrate.out { opacity: 0; transition: opacity .35s ease; }
@keyframes cel-pop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cel-burst { from { transform: scale(.2) rotate(-40deg); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1.15) rotate(8deg); opacity: 1; } }
@keyframes cel-jump { 0% { transform: translateY(30rem) scale(.6); } 60% { transform: translateY(-4rem) scale(1.05); } 100% { transform: none; } }

/* rubber stamp (plates + trivia) */
.stamp { position: absolute; right: -9%; top: -30%; width: 43%; aspect-ratio: 1; transform: rotate(-14deg); mix-blend-mode: multiply; pointer-events: none; z-index: 3; }
.stamp img { width: 100%; height: 100%; filter: var(--stamp-filter, none); }
.stamp-t { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-52%); text-align: center; font-family: 'Bungee'; font-size: 2.4rem; color: var(--stamp-ink); opacity: .95; }
.stamp.slam { will-change: transform, opacity; animation: slam .42s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes slam { 0% { transform: rotate(-30deg) scale(2.4); opacity: 0; } 55% { opacity: 1; } 75% { transform: rotate(-12deg) scale(.92); } 100% { transform: rotate(-14deg) scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Performance: game screens sit on an already-blurred background, so live backdrop blur adds cost, not looks. */
.screen:not(.home) .panel, .screen:not(.home) .btn, .screen:not(.home) .key, .screen:not(.home) .f, .screen:not(.home) .chip, .screen:not(.home) .rw-score { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
[data-theme=vixen] .screen:not(.home) .panel:not(.ok):not(.no), [data-theme=vixen] .screen:not(.home) .btn:not(.primary):not(.accent), [data-theme=vixen] .screen:not(.home) .f:not(.on) { background: linear-gradient(160deg, rgba(44,64,96,.72), rgba(12,18,34,.8)); }
[data-theme=vixen] .screen:not(.home) .key:not(.ok):not(.near):not(.miss):not(.enter) { background: linear-gradient(180deg, rgba(74,96,136,.92), rgba(32,44,70,.95)); }
[data-theme=diva] .screen:not(.home) .f:not(.on), [data-theme=diva] .screen:not(.home) .rw-score { background: rgba(30,12,4,.72); }