:root { --dock-bottom-padding:max(20px,env(safe-area-inset-bottom)) }
.topbar-actions { display:flex; align-items:center; gap:9px }
.topbar-actions .cast-launcher { width:38px; height:38px; margin:0 }
.hero { position:relative }
.hero-cast-hint { position:relative; color:var(--ink)!important }
.hero-cast-pointer { position:fixed; top:74px; right:68px; z-index:13; width:max-content; color:var(--yellow); font-size:12px; font-weight:950; letter-spacing:.03em; pointer-events:none; filter:drop-shadow(0 0 5px #071536); animation:cast-overlay-hide .01s 2.8s forwards }
.cast-arrow-overlay { position:fixed; inset:0; z-index:12; width:100vw; height:100dvh; overflow:visible; pointer-events:none; filter:drop-shadow(0 0 5px #32d5ff77); animation:cast-overlay-hide .01s 2.8s forwards }
.cast-arrow-overlay path,.cast-arrow-overlay polyline { fill:none; stroke:var(--yellow); stroke-width:3.5; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round }
.cast-arrow-overlay path { stroke-dasharray:1; stroke-dashoffset:1; animation:cast-arrow-draw 2.6s ease-in-out 1 }
.cast-arrow-overlay polyline { opacity:0; animation:cast-arrow-head 2.6s ease-in-out 1 }
@keyframes cast-arrow-draw { 0%,8%{stroke-dashoffset:1} 76%,100%{stroke-dashoffset:0} }
@keyframes cast-arrow-head { 0%,74%{opacity:0} 80%,100%{opacity:1} }
@keyframes cast-overlay-hide { to{visibility:hidden;opacity:0} }
.setup-page-shell { height:100%; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) }
.setup-card { min-height:0; display:flex; flex-direction:column; max-height:none; padding-bottom:0; overflow:hidden }
.setup-player-list { flex:1 1 auto; min-height:120px; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding-right:4px }
.setup-add-player { flex:0 0 auto; padding-top:12px; background:var(--panel) }
.setup-start-bar { flex:0 0 auto; z-index:3; margin:0 -18px; padding:12px 18px var(--dock-bottom-padding); background:linear-gradient(180deg,#151f2900,#151f29 18%); border-radius:0 0 20px 20px }
@media(max-width:600px){main:has(.setup-page-shell){height:100%;padding-top:14px;padding-bottom:0;overflow:hidden}.setup-head{margin-top:0}.setup-player-list{min-height:0}}
.score-card.collapsed .score-card-head { margin-bottom:9px }
.score-entry-shell { display:flex; flex-direction:column; min-height:0; max-height:calc(100dvh - 120px); overflow:hidden }
.score-entry-head { flex:0 0 auto }
.score-entry-shell .mode-tabs { flex:0 0 auto; margin-bottom:10px }
.score-player-list { flex:1 1 auto; min-height:120px; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:2px 4px 2px 0 }
.score-save-bar { flex:0 0 auto; display:flex; gap:9px; z-index:3; padding:12px 0 var(--dock-bottom-padding); background:linear-gradient(180deg,#0b111700,#0b1117 18%) }
.score-save-bar .button { flex:1 }
.score-player-list .score-card { padding:12px 14px; margin-bottom:8px; border-radius:16px }
.score-player-list .score-card { position:relative; isolation:isolate; overflow:hidden; transition:border-color .25s,box-shadow .25s,background .25s }
.score-card>*:not(.score-card-fx) { position:relative; z-index:2 }
.score-row.hot-next-round { position:relative; isolation:isolate; overflow:hidden; border-color:#ff784f88 }
.score-row.hot-next-round>*:not(.score-card-fx) { position:relative; z-index:2 }
.score-row.hot-next-round .score-card-fx { z-index:1 }
.round-hot-badge { display:block; width:max-content; margin-top:3px; padding:2px 6px; border:1px solid #ff784f88; border-radius:999px; color:#ffd3a8; background:#a733224d; font-size:9px; font-weight:900; letter-spacing:.05em; text-transform:uppercase }
.score-card-fx { position:absolute; inset:0; z-index:1; overflow:hidden; border-radius:inherit; pointer-events:none }
.score-card-fx>span,.score-card-fx>svg { position:absolute; inset:0 }
.fx-sprite { position:absolute; inset:0; background-repeat:no-repeat; background-size:100% 100%; transform:translateZ(0); contain:paint }
.fx-sprite::before,.fx-sprite::after { content:""; position:absolute; inset:0; background-repeat:no-repeat; background-size:100% 100%; pointer-events:none }
.fx-fire { background-image:url("assets/fire-v3.webp"); opacity:.9; animation:round-fire-fade 5s linear forwards }
.fx-fire::before { background:radial-gradient(ellipse at 18% 82%,#fff5b866,transparent 14%),radial-gradient(ellipse at 68% 78%,#ffd36b52,transparent 16%); animation:fire-local-left .72s steps(3,end) infinite }
.fx-fire::after { background:radial-gradient(ellipse at 42% 86%,#fff3ad50,transparent 13%),radial-gradient(ellipse at 88% 80%,#ffbe4750,transparent 15%); animation:fire-local-right .91s steps(4,end) infinite }
.fx-frost-art { background-image:url("assets/frost-v3.webp"); opacity:.84 }
.fx-frost-art::before { background:linear-gradient(110deg,transparent 38%,#efffff55 46%,transparent 54%); opacity:.42; transform:translateX(-75%); animation:frost-specular 4.8s ease-in-out infinite }
.fx-frost-art::after { inset:auto -8% -18% -8%; height:46%; background:radial-gradient(ellipse at 28% 50%,#b8efff16,transparent 42%),radial-gradient(ellipse at 72% 58%,#d9f8ff12,transparent 40%); animation:frost-mist 7s ease-in-out infinite alternate }
.fx-electric-art { opacity:.9 }
.fx-electric-art::before { background-image:url("assets/electric-v3a.webp"); opacity:0; animation:electric-burst-a 4.7s linear infinite }
.fx-electric-art::after { background-image:url("assets/electric-v3b.webp"); opacity:0; animation:electric-burst-b 4.7s linear infinite }
.fx-flip-cards { perspective:180px; background:radial-gradient(ellipse at 34% 28%,#ffd95a38,transparent 46%) }
.fx-flip-cards i { position:absolute; left:calc(8% + var(--i) * 8.5%); top:7px; width:15px; height:21px; border:1px solid #ffe684; border-radius:3px; background:linear-gradient(145deg,#fff4b0,#d9a51c 58%,#76500c); box-shadow:0 0 5px #ffe477,0 0 12px #ffc62966; transform-style:preserve-3d; animation:visible-card-flip 2.25s cubic-bezier(.45,0,.2,1) infinite; animation-delay:calc(var(--i) * .13s) }
.fx-flip-cards i::after { content:"7"; position:absolute; inset:0; display:grid; place-items:center; color:#533800; font-size:10px; font-weight:1000 }
.score-player-list .score-card-head { margin-bottom:7px }
.score-player-list .score-card-head h3 { font-size:18px }
.score-player-list .score-card-head>div { min-width:0 }
.score-player-list .score-value { font-size:23px; line-height:1 }
.score-player-list .compact-score-actions { gap:7px }
.score-player-list .quick-score { padding:10px 12px }
.score-player-list .calculator-controls { margin-top:10px }
.score-player-list .specials { margin-top:9px }
@media(max-width:600px){main:has(.score-entry-shell,.game-shell){height:100%;min-height:0;padding-top:10px;padding-bottom:0;overflow:hidden}.score-entry-shell{height:100%;min-height:0;max-height:100%}.score-entry-head{margin:0 0 9px}.score-entry-head h1{font-size:26px}.score-entry-head .subtle{font-size:12px}.score-player-list .chip{min-height:40px}}
.score-card-error { border-color:var(--red)!important; box-shadow:0 0 0 2px #ff6b6b55,0 18px 50px #0006!important; background:linear-gradient(145deg,#382027,var(--panel))!important }
.score-required { display:none; margin:9px 0 0; color:#ff9a9a; font-size:13px; font-weight:850 }
.score-card-error .score-required { display:block }
.compact-score-actions { display:flex; gap:9px; align-items:center }
.compact-score-actions>* { flex:1 }
.calculator-controls { margin-top:14px }
.score-effects { display:flex; flex-wrap:wrap; gap:4px; min-height:0; margin-top:4px }
.effect-badge { display:inline-block; padding:2px 6px; border-radius:999px; font-size:9px; font-weight:950; letter-spacing:.08em }
.effect-badge.gold { color:#ffe88c; background:#7a570055; border:1px solid #ffd45a88 }
.effect-badge.ice { color:#dffaff; background:#2fbce833; border:1px solid #91eaff99 }
.effect-badge.fire { color:#ffd2a1; background:#c33b253d; border:1px solid #ff784f99 }
.effect-badge.double { color:#eadcff; background:#763dcc44; border:1px solid #bd8cff99 }
.effect-badge.electric { color:#d8fbff; background:#087f9d44; border:1px solid #4ee9ff99 }
.chip.frozen.active { color:#061722; background:linear-gradient(135deg,#e9fbff,#6dddf5); border-color:#bdf5ff; box-shadow:0 0 14px #65dcff77 }
.score-card.effect-flip7 { border-color:#ffd45aaa; box-shadow:0 0 0 1px #ffd45a44,0 0 24px #ffca3a33,var(--shadow); animation:score-gold-aura 1.8s ease-in-out infinite alternate }
.score-card.effect-flip7 .score-card-head h3 { color:#fff2b0; text-shadow:0 0 5px #ffe784,0 0 15px #ffc62f }
.score-card.effect-frozen { background:radial-gradient(circle at 15% 0,#dffaff30,transparent 42%),linear-gradient(145deg,#17425a,var(--panel)); border-color:#8deaffaa }
.score-card.effect-frozen::after { content:"❄  ·  ❅  ·  ❄"; position:absolute; right:12px; bottom:7px; color:#bcefff35; font-size:16px; letter-spacing:5px; z-index:-1; animation:frost-drift 3.2s ease-in-out infinite alternate }
.score-card.effect-hot { outline:1px solid #ff6d3e88; background:radial-gradient(ellipse at 50% 115%,#ff4d003d,transparent 55%),linear-gradient(145deg,var(--panel2),var(--panel)); animation:score-fire-aura 1.15s ease-in-out infinite alternate }
.score-card.effect-near { outline:1px solid #4ee9ff88; box-shadow:inset 0 0 10px #24dfff14,0 0 7px #24dfff2e,var(--shadow) }
.score-card-fx .fx-near-electric { opacity:1; filter:saturate(.82) contrast(1.1) drop-shadow(0 0 4px #4ee9ff); -webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0),linear-gradient(#000 0 0),linear-gradient(#000 0 0); -webkit-mask-size:100% 12px,100% 12px,12px 100%,12px 100%; -webkit-mask-position:top,bottom,left,right; -webkit-mask-repeat:no-repeat; mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0),linear-gradient(#000 0 0),linear-gradient(#000 0 0); mask-size:100% 12px,100% 12px,12px 100%,12px 100%; mask-position:top,bottom,left,right; mask-repeat:no-repeat }
.score-card-fx .fx-near-electric::before,.score-card-fx .fx-near-electric::after { animation-duration:3.7s }
.score-card.effect-double-pulse { animation:score-double-pulse .8s cubic-bezier(.2,.75,.2,1) 1 }
@keyframes score-gold-aura { to { box-shadow:0 0 0 1px #ffe37a88,0 0 34px #ffc62e70,var(--shadow) } }
@keyframes frost-drift { to { transform:translate(-8px,-3px); opacity:.75 } }
@keyframes score-fire-aura { to { filter:drop-shadow(0 0 8px #ff5a30aa); outline-color:#ffb24fbb } }
@keyframes score-double-pulse { 0%{transform:scale(1);box-shadow:0 0 0 0 #a970ff99,var(--shadow)} 45%{transform:scale(1.015);box-shadow:0 0 0 8px #a970ff22,0 0 28px #9a5cff99,var(--shadow)} 100%{transform:scale(1);box-shadow:0 0 0 16px #a970ff00,var(--shadow)} }
@keyframes visible-card-flip { 0%,16%,100%{transform:translateY(8px) rotateY(0) scale(.82);opacity:.18} 38%{transform:translateY(0) rotateY(180deg) scale(1);opacity:.95} 62%{transform:translateY(0) rotateY(360deg) scale(1);opacity:.95} 82%{transform:translateY(8px) rotateY(360deg) scale(.82);opacity:.18} }
@keyframes round-fire-fade { 0%,58%{opacity:1} 100%{opacity:0} }
@keyframes fire-local-left { 0%,100%{opacity:.12;transform:translate3d(0,1px,0)} 33%{opacity:.56;transform:translate3d(1px,-1px,0)} 67%{opacity:.28;transform:translate3d(-1px,0,0)} }
@keyframes fire-local-right { 0%,100%{opacity:.42;transform:translate3d(0,0,0)} 25%{opacity:.16;transform:translate3d(-1px,-1px,0)} 50%{opacity:.52;transform:translate3d(1px,0,0)} 75%{opacity:.24;transform:translate3d(0,1px,0)} }
@keyframes frost-specular { 0%,14%{transform:translateX(-75%);opacity:0} 24%{opacity:.42} 47%,100%{transform:translateX(75%);opacity:0} }
@keyframes frost-mist { to{transform:translate3d(2.5%,1px,0);opacity:.55} }
@keyframes electric-burst-a { 0%,8%,12%,16%,49%,54%,58%,100%{opacity:0} 9%,11%{opacity:.98} 13%{opacity:.32} 14.5%{opacity:.82} 50%,53%{opacity:.9} 55%{opacity:.25} }
@keyframes electric-burst-b { 0%,28%,32%,73%,79%,100%{opacity:0} 29%,31%{opacity:.9} 74%,76%{opacity:.96} 77.5%{opacity:.3} }
.winner>.button { margin:5px 2px }
.winner { position:relative; overflow:hidden }
.winner-crown { position:relative; z-index:1; font-size:76px; line-height:1; filter:drop-shadow(0 8px 12px #0007); animation:winner-pop .8s ease-out }
.victory-cards { height:76px; display:flex; align-items:center; justify-content:center; gap:clamp(3px,1.2vw,10px); perspective:700px; margin-bottom:4px }
.victory-cards i { display:grid; place-items:center; width:38px; height:54px; border-radius:7px; border:2px solid #fff7; background:repeating-linear-gradient(45deg,#32d5ff 0 7px,#ff6b6b 7px 14px); box-shadow:inset 0 0 0 4px #17120a55,0 8px 18px #0007; animation:card-flip 1.8s cubic-bezier(.4,0,.2,1) infinite; animation-delay:calc(var(--i) * -0.16s) }
.flying-crowns { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0 }
.flying-crowns i { position:absolute; left:-18%; top:calc(6% + var(--i) * 12%); font-style:normal; font-size:clamp(24px,7vw,48px); filter:drop-shadow(0 5px 7px #0008); opacity:0; animation:crown-fly 5.4s linear infinite; animation-delay:calc(var(--i) * -.68s) }
.winner>h2,.winner>.subtle,.winner-leaderboard,.winner>.button { position:relative; z-index:1 }
.winner-leaderboard { max-width:520px; margin:22px auto; display:grid; gap:7px; text-align:left }
.winner-row { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:9px; padding:10px 13px; border-radius:12px; background:#0c151c; border:1px solid var(--line) }
.winner-row span { color:var(--muted) }
.winner-row b { font-size:20px; color:var(--yellow) }
.winner-row.champion { border-color:#32d5ff99; background:#32d5ff12 }
@keyframes winner-pop { 0%{transform:scale(.5);opacity:0} 70%{transform:scale(1.15)} 100%{transform:scale(1);opacity:1} }
@keyframes card-flip { 0%,18%{transform:rotateY(0) translateY(0)} 45%{transform:rotateY(180deg) translateY(-13px)} 72%,100%{transform:rotateY(360deg) translateY(0)} }
@keyframes crown-fly { 0%{transform:translateX(0) rotate(-25deg) scale(.7);opacity:0} 10%{opacity:.9} 50%{transform:translateX(66vw) rotate(15deg) scale(1.1)} 90%{opacity:.9} 100%{transform:translateX(135vw) rotate(40deg) scale(.75);opacity:0} }
@media(prefers-reduced-motion:reduce){.score-card.effect-flip7,.score-card.effect-hot,.score-card.effect-frozen::after,.score-card.effect-double-pulse,.fx-flip-cards i{animation:none}.fx-sprite{display:none}}
.toast { top:calc(76px + env(safe-area-inset-top)); bottom:auto; max-width:calc(100vw - 28px); transform:translate(-50%,-16px); text-align:center; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s,transform .2s,visibility 0s .2s }
.toast.show { transform:translate(-50%,0); opacity:1; visibility:visible; transition:opacity .2s,transform .2s,visibility 0s }
.app-footer { text-align:center; margin-top:18px }
.app-footer a { color:var(--muted) }
.app-footer span { margin:0 8px; color:var(--muted) }
.edition-intro { max-width:610px; margin:0 0 18px; line-height:1.5 }
.edition-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }
.edition-card { min-height:190px; border:1px solid #32d5ff55; color:var(--ink); cursor:pointer; text-align:left; display:flex; flex-direction:column; justify-content:flex-end; gap:8px }
.edition-card strong { font-size:clamp(25px,5vw,34px); line-height:1.02 }
.edition-card>span:last-child { color:var(--muted); line-height:1.45 }
.edition-card.vengeance { background:radial-gradient(circle at 90% 0,#d84b4b38,transparent 45%),linear-gradient(145deg,#30202a,var(--panel)); border-color:#ff6b6b77 }
.edition-kicker { align-self:flex-start; padding:4px 8px; border-radius:999px; color:#061722; background:var(--yellow); font-size:10px; font-weight:950; letter-spacing:.13em }
.edition-card.vengeance .edition-kicker { background:var(--red); color:#250606 }
.edition-pill { margin-top:7px }
.calculator-note { flex-basis:100%; margin:4px 0 0; color:var(--muted); font-size:12px; line-height:1.4 }
.effect-badge.vengeance { color:#ffd7d7; background:#a52b3f44; border:1px solid #ff6b6b88 }
.chip.penalty.active,.chip.divided.active,.chip.special-zero.active,.chip.unlucky-seven.active,.chip.lucky-thirteen.active { background:#ff6b6b; border-color:#ff9c9c; color:#260606 }
@media(max-width:560px){.edition-grid{grid-template-columns:1fr}.edition-card{min-height:145px}}
.game-shell { height:100%; min-height:0; display:grid; grid-template-rows:minmax(0,1fr) auto }
.game-scroll { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding-right:2px }
.privacy-page { height:100dvh; min-height:0 }
.privacy-main { position:fixed; inset:68px 0 0; width:min(920px,100%); height:auto; min-height:0; padding-bottom:0; overflow:hidden }
.privacy-card { height:100%; min-height:0; max-width:760px; margin:0 auto; padding-bottom:0; display:grid; grid-template-rows:minmax(0,1fr) auto }
.privacy-scroll { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding-right:3px }
.privacy-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.privacy-heading h1 { margin:0 }
.version-pill { display:inline-block; padding:5px 9px; border:1px solid #32d5ff55; border-radius:999px; color:#bcefff; background:#32d5ff12; font-size:12px; font-weight:850 }
.privacy-actions { z-index:3; margin:0 -18px; padding:14px 18px var(--dock-bottom-padding); background:linear-gradient(180deg,#151f2900,#151f29 20%); border-radius:0 0 20px 20px }
.privacy-actions { display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:9px }
.privacy-actions .button { display:block; width:100%; text-align:center; text-decoration:none }
.analytics-choice { display:flex; align-items:flex-start; gap:9px; margin:14px 0; padding:12px; border:1px solid var(--line); border-radius:12px; color:var(--ink); font-weight:750 }
.analytics-choice input { width:18px; height:18px; margin-top:1px; accent-color:var(--cyan) }
.game-actions { position:relative; bottom:auto; margin:0; border-radius:17px 17px 0 0; padding:12px 10px var(--dock-bottom-padding) }
@media(max-width:600px){main:not(.privacy-main):not(:has(.setup-page-shell,.score-entry-shell,.game-shell)){padding-bottom:24px}}
@media(max-width:560px){.privacy-main{top:60px;padding-top:14px;padding-bottom:0}.privacy-card{padding:15px 15px 0}.privacy-card p{line-height:1.48}.privacy-actions{margin-left:-15px;margin-right:-15px;padding-left:15px;padding-right:15px}}