/* VORS MODE — local fonts and lightweight, static light effects. */
:root {
 color-scheme: dark; --bg:#101018; --surface:#1b1b28; --surface-raised:#242435;
 --primary:#a58bff; --pink:#ff83c6; --cyan:#75e2eb; --text:#f7f5ff; --muted:#b8b5ca;
 --border:#3d3a50; --danger:#ff9cae; --success:#87e1b3; --radius:1.3rem;
 --shadow:0 16px 45px #0004; --space:1rem; --font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 --duration:180ms; font-family:var(--font); color:var(--text); background:var(--bg); line-height:1.5;
}
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; min-height:100svh; background:radial-gradient(ellipse at 80% 0,#552d7826,transparent 50%),var(--bg); }
.page { width:100%; max-width:64rem; margin:auto; padding: max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(2rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left)); overflow-wrap:anywhere; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(2.1rem,7vw,3.7rem); letter-spacing:-.055em; line-height:1.08; margin-bottom:1.25rem; }
h2 { font-size:1.5rem; line-height:1.25; letter-spacing:-.025em; }
h3 { font-size:1.25rem; }
p { font-size:1rem; line-height:1.65; }
a { color:var(--primary); text-underline-offset:4px; }
a,button { min-height:48px; }
button,a.wide { display:inline-flex; align-items:center; justify-content:center; padding:.8rem 1rem; border:1px solid var(--border); border-radius:.85rem; font:inherit; font-weight:650; text-align:center; text-decoration:none; }
button { background:var(--surface-raised); color:var(--text); cursor:pointer; transition:background var(--duration),transform var(--duration); }
button:active,a.game-link:active { transform:translateY(1px); }
button:disabled { opacity:.43; cursor:default; }
.primary { color:#171124; background:var(--primary); border-color:transparent; font-weight:750; box-shadow:0 4px 20px #a58bff15; }
.danger { color:var(--danger); background:transparent; }
.wide { width:100%; margin-block:.65rem; }
.row { display:flex; flex-wrap:wrap; gap:.6rem; }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(1rem,4vw,1.6rem); margin:1rem 0; box-shadow:var(--shadow); min-width:0; }
.panel > :last-child { margin-bottom:0; }
.game-screen { max-width:40rem; margin:auto; --primary:#a58bff; }
.theme-snus { --primary:#f79bd4; }
.theme-imposter { --primary:#75e2eb; }
.theme-ring { --primary:#ffcc87; }
.game-nav { display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem; }
.game-nav a { display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--muted); }
.nav-brand { margin-left:auto; font-weight:900; font-size:1.4rem; letter-spacing:-.08em; }
.nav-brand span { color:var(--primary); margin-left:.2rem; }
.game-heading { margin-block:1rem 1.5rem; }
.eyebrow { font-size:.78rem; font-weight:750; text-transform:uppercase; letter-spacing:.11em; color:var(--primary); margin-bottom:.6rem; }
.hint { color:var(--muted); font-size:.9rem; }
input,textarea { width:100%; min-width:0; min-height:48px; padding:.75rem; font:inherit; color:var(--text); background:#11111c; border:1px solid #605b77; border-radius:.7rem; }
textarea { resize:vertical; }
input[type=checkbox],input[type=radio] { accent-color:var(--primary); }
label { display:block; font-weight:650; margin-block:.5rem; }
legend { padding:0 .5rem; font-weight:750; }
.players { list-style:none; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
.players li { background:var(--surface); border:1px solid var(--border); border-radius:1rem; padding:.85rem; }
.players label { margin-top:0; font-size:.85rem; color:var(--muted); }
.players .row { margin-top:.4rem; }
.players button { background:transparent; border:0; color:var(--muted); font-size:.85rem; padding:.25rem; }
.error { border:1px solid #b95371; border-radius:1rem; padding:1rem; background:#391d2a; color:#ffd4de; }
.current-player { font-size:clamp(1.75rem,7vw,2.5rem); margin:0; }
.current-player + p { color:var(--muted); margin:.35rem 0 1rem; }
.feedback { border-left:3px solid var(--primary); padding:.75rem 1rem; background:#ffffff05; border-radius:0 .75rem .75rem 0; }
.feedback p:last-child { margin-bottom:0; }
.outcome-incorrect { border-color:var(--danger); background:#ff6b8a12; }
.outcome-incorrect > p:first-child { color:#ffb4c3; font-size:1.35rem; }
.outcome-correct,.outcome-distributed { border-color:var(--success); }
.comparison { text-align:center; margin:1.5rem 0; }
.comparison p { color:var(--muted); margin-bottom:.65rem; }
.guesses { flex-wrap:nowrap; }
.guesses button { flex:1; min-height:58px; font-size:1.15rem; }
.guesses button:first-child { background:#a5e6c3; color:#102e20; }
.guesses button:last-child { background:#d8b5fc; color:#29123c; }
.allocation { display:grid; grid-template-columns:minmax(0,1fr) 5rem; gap:1rem; align-items:center; }
summary { min-height:48px; padding:.75rem 0; cursor:pointer; font-weight:650; color:var(--primary); }
details { border-bottom:1px solid var(--border); margin-block:1rem; }
details.panel { box-shadow:none; }
.snus-modes label { display:flex; align-items:center; gap:.8rem; padding:.8rem; border:1px solid transparent; border-radius:.85rem; cursor:pointer; font-size:1rem; }
.snus-modes label:has(input:checked) { background:#ffffff09; border-color:var(--primary); }
.snus-modes input { width:1.25rem; min-height:1.25rem; flex:0 0 1.25rem; }
.snus-modes small { display:block; color:var(--muted); font-weight:400; margin-top:.2rem; }
.snus-question { min-height:20rem; display:flex; flex-direction:column; justify-content:center; background:radial-gradient(ellipse at top right,#93396940,transparent 75%),#241b30; border-color:#70435f; position:relative; }
.snus-question::before { content:'“'; color:#f79bd44d; font-size:6rem; line-height:.6; font-family:Georgia,serif; margin-top:1rem; }
.snus-question h2 { font-size:clamp(1.65rem,6vw,2.5rem); line-height:1.25; margin:.7rem 0; }
.snus-next { min-height:60px; font-size:1.15rem; }
.custom-questions { padding:0; list-style:none; }
.custom-questions li { display:flex; gap:.75rem; align-items:center; justify-content:space-between; border-top:1px solid var(--border); padding:.75rem 0; }
.custom-questions span { min-width:0; }
.imposter-stage { background:radial-gradient(ellipse at top,#23526045,transparent 80%),#171d29; border-color:#36616b; text-align:center; padding-block:2rem; }
.imposter-secret { color:var(--cyan); padding:1.5rem .5rem; border-block:1px solid #75e2eb40; }
.imposter-stage ul { list-style:none; padding:0; font-size:1.5rem; font-weight:700; color:var(--primary); }
.ring-rule { border-left:3px solid #b17c49; box-shadow:none; }
.ring-rule h2 { color:#ffcc87; font-size:1.2rem; }
/* A single 5:7 deck, from inline results to the main card stage. */
.playing-card { --card-width:3.5rem; display:inline-block; position:relative; isolation:isolate; width:var(--card-width); aspect-ratio:5/7; flex:0 0 auto; border-radius:calc(var(--card-width) * .065); border:1px solid #d8d0c8; background:#fffaf2; color:#202333; box-shadow:0 6px 12px #0004; vertical-align:middle; overflow:hidden; font-family:Georgia,serif; container-type:inline-size; }
.playing-card.red { color:#bf2646; }
.card-corner { position:absolute; z-index:2; top:4%; left:7%; font-size:18cqw; font-weight:700; line-height:.95; display:flex; flex-direction:column; align-items:center; }
.card-corner span { font-size:15cqw; margin-top:1cqw; }
.card-corner.bottom { inset:auto 7% 4% auto; transform:rotate(180deg); }
.card-pips { position:absolute; inset:18% 23%; display:grid; grid-template-columns:1fr 1fr; align-items:center; justify-items:center; font-size:25cqw; line-height:1; }
.pips-1,.pips-2,.pips-3,.pips-0 { grid-template-columns:1fr; }
.pips-1 { font-size:55cqw; }
.pips-5 span:last-child,.pips-7 span:last-child,.pips-9 span:last-child { grid-column:1/-1; }
.pips-8,.pips-9,.pips-10 { font-size:20cqw; }
.comparison-seven { font-size:65cqw; color:#665084; }
.card-royal { position:absolute; inset:17% 19%; width:62%; height:66%; object-fit:contain; border:1px solid currentColor; border-radius:35% 35% 5% 5%; background:#efe6d3; }
.royal-suit { position:absolute; bottom:17%; left:43%; font-size:22cqw; line-height:1; filter:drop-shadow(0 1px #fff); }
.card-back { background:repeating-linear-gradient(45deg,#ffffff08 0 1px,transparent 1px 9px),#40245d; border:5px solid #e7ddec; color:#f4c9ff; }
.back-orbit { position:absolute; inset:10%; border:1px solid #d7a0ed; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; transform:rotate(-20deg); }
.back-orbit > span { font:900 34cqw var(--font); letter-spacing:-.1em; }
.back-orbit small { font:600 6cqw var(--font); letter-spacing:.12em; }
.comparison .playing-card { --card-width:clamp(8rem,35vw,10.5rem); animation:card-arrive var(--duration) ease-out; }
.table-cards { display:flex; flex-wrap:wrap; gap:.5rem; }
.table-cards .playing-card { --card-width:3.2rem; }
@keyframes card-arrive { from { opacity:.6; transform:translateY(6px) rotate(-2deg); } to { opacity:1; transform:none; } }
/* The four locally drawn cover illustrations share geometry, not stock imagery. */
.home-brand { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-block:.5rem; font-size:1.3rem; font-weight:850; letter-spacing:-.06em; }
.brand-star { color:var(--pink); margin-left:.3rem; }
.edition { font-size:.65rem; letter-spacing:.15em; color:var(--muted); border:1px solid var(--border); padding:.4rem .6rem; border-radius:2rem; white-space:nowrap; }
.home-hero { padding:clamp(2.5rem,6vw,4rem) 0 2rem; }
.home-hero h1 { font-size:clamp(2.35rem,6.5vw,4.4rem); max-width:55rem; }
.home-hero h1 span { color:#c3a7ff; }
.home-hero > p:last-child { color:var(--muted); max-width:30rem; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; }
.section-heading h2 { margin:0; font-size:1.2rem; }
.section-heading > span { color:var(--muted); font-size:.8rem; }
.game-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem; }
.game-link { display:flex; flex-direction:column; overflow:hidden; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface); text-decoration:none; color:var(--text); transition:border-color var(--duration); }
.game-link-copy { padding:1.25rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.game-link-copy .eyebrow { margin:0; color:var(--muted); font-size:.68rem; }
.game-link strong { font-size:1.6rem; letter-spacing:-.035em; order:-1; }
.game-link-copy > span { color:var(--muted); font-size:.95rem; }
.game-link-copy .game-enter { color:var(--text); display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--border); padding-top:.8rem; margin-top:auto; font-weight:700; }
.game-enter > span { color:var(--primary); font-size:1.4rem; }
.game-art { height:160px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.art-cards { background:radial-gradient(ellipse at 50% 100%,#7651a4,#302343); }
.mini-card { display:flex; flex-direction:column; line-height:1; font-family:Georgia,serif; font-weight:700; font-size:1.5rem; width:70px; height:98px; border-radius:7px; padding:8px; background:#fff8ec; color:#292134; transform:rotate(-16deg); box-shadow:0 6px 20px #0005; }
.mini-card span { align-self:center; font-size:2.5rem; }
.mini-card + .mini-card { color:#b7244c; transform:translate(-8px,8px) rotate(12deg); }
.art-spark { position:absolute; right:15%; top:20%; color:#e1c4ff; font-size:2rem; transform:rotate(12deg); }
.art-snus { background:radial-gradient(ellipse at 50% 100%,#9a4878,#442239); }
.snus-tin { width:108px; height:108px; border-radius:50%; border:6px solid #e9a6d1; box-shadow:4px 9px 0 #652750,8px 14px 22px #0004; background:#efb3db; color:#592241; font-size:1.5rem; font-weight:900; line-height:1.05; display:grid; place-content:center; text-align:center; transform:rotate(-13deg); }
.art-imposter { background:radial-gradient(ellipse at 50% 100%,#306778,#162f42); }
.mystery-mask { display:flex; gap:15px; width:132px; height:77px; border:2px solid #72d4e3; border-radius:35% 35% 50% 50%; justify-content:center; align-items:center; transform:rotate(-9deg); background:#132333; box-shadow:0 0 30px #75e2eb33; }
.mystery-mask i { width:32px; height:13px; background:#8ceaf0; border-radius:50%; transform:rotate(12deg); }
.mystery-mask i + i { transform:rotate(-12deg); }
.art-imposter .art-spark { color:#8ceaf0; }
.art-ring { background:radial-gradient(ellipse at 50% 100%,#995536,#42252b); }
.royal-ring { display:grid; place-items:center; width:108px; height:108px; border:6px double #ffcb83; outline:1px solid #ffcb8350; outline-offset:9px; border-radius:50%; color:#ffcb83; font-size:4rem; box-shadow:0 0 25px #ffab5140,inset 0 0 25px #ffab5120; transform:rotate(12deg); }
.art-ring .art-spark { color:#ffcc87; }
.home-footer { text-align:center; color:var(--muted); margin-top:2.5rem; padding:1.5rem 0; border-top:1px solid var(--border); font-size:.9rem; }
.home-footer > span { color:var(--text); font-weight:650; }
.home-footer p { margin:.4rem 0 0; font-size:.85rem; }
:focus-visible { outline:3px solid var(--cyan); outline-offset:4px; }
.skip-link { position:fixed; top:-100px; left:1rem; z-index:100; background:var(--surface); padding:1rem; }
.skip-link:focus { top:1rem; }
#blazor-error-ui { display:none; position:fixed; inset:auto 0 0; background:#391d2a; color:var(--text); padding:1rem; z-index:1000; }
#blazor-error-ui a { display:inline-flex; padding:.7rem; }
@media (hover:hover) { button:not(:disabled):hover { filter:brightness(1.1); } .game-link:hover { border-color:#ad8be3; } }
@media (max-width:540px) { .game-grid { grid-template-columns:1fr; } .game-link { flex-direction:row; } .game-art { width:100px; height:auto; min-height:200px; flex:0 0 100px; } .game-link-copy { padding:1rem; } .game-link strong { font-size:1.3rem; } .game-link-copy > span { font-size:.85rem; } .game-art > :not(.art-spark) { scale:.75; } .mini-card { position:absolute; left:8px; } .mini-card + .mini-card { left:32px; } .art-spark { right:8%; top:12%; font-size:1.5rem; } .section-heading > span { font-size:.7rem; } }
@media (max-width:350px) { .game-art { width:78px; flex-basis:78px; } .game-link-copy { padding:.8rem; } .players { gap:.5rem; } .players li { padding:.6rem; } }
@media (min-width:768px) { .page { padding:2rem 3rem 3rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

.ring-intro-art { text-align:center; margin:2rem 0; }
.ring-intro-art .playing-card { --card-width:9rem; transform:rotate(7deg); }
.leave-confirmation { border-color:var(--danger); }

/* Blazor focuses the heading after route changes; interactive focus stays visible. */
h1[tabindex="-1"]:focus { outline:none; }