/* Crude Fortune — luminous stadium cabinet */
:root{background:#020e20;color:#fff5d5}.game{width:min(100vw,57dvh);max-width:520px;background:#031d3a}.backdrop{background:radial-gradient(ellipse at top,#0a74ba,#020b1c 72%);filter:none}.scenery{background-image:url('assets/hero.png');background-size:100% 100%}.scenery:after{background:linear-gradient(transparent 24%,#02172c33 40%,#02172ccc 75%)}.ambient{background:radial-gradient(ellipse at 20% 18%,#1ba7ee33,transparent 40%)}
.topbar{top:max(1.3cqh,env(safe-area-inset-top));left:4%;right:4%}.topbar:after{content:'MATCHDAY MAYHEM';position:absolute;left:20%;right:20%;text-align:center;font-size:2cqw;letter-spacing:.5cqw;font-weight:900;color:#d5edff;pointer-events:none}.small-button{width:34px!important;height:34px!important;border:1px solid #e7c77b;background:linear-gradient(145deg,#16658c,#051f40);box-shadow:inset 0 1px 0 #a4eaff66,0 3px 8px #00101aaa}
.hero{top:5%;height:25%;overflow:visible}.wordmark{left:3%;top:28%;width:51%;transform:rotate(-7deg);filter:drop-shadow(0 4px 0 #001e39)}.wordmark>span{font-size:4.9cqw;letter-spacing:-.1cqw;line-height:1.15;color:#fff;background:none;-webkit-text-stroke:.4px #175580}.wordmark>strong{font-size:15cqw;line-height:.96;letter-spacing:-.7cqw;background:linear-gradient(#fffdeb,#fff5a6 35%,#ffc849 48%,#d58b1c 51%,#fff3a3 85%);background-clip:text;-webkit-background-clip:text;-webkit-text-stroke:.6px #9e6017;text-shadow:none}.wordmark>small{margin-top:1.2cqh;font-size:1.85cqw;letter-spacing:.2cqw;color:#d0efff;line-height:1.4}
.cabinet{top:31%;height:38%;left:3.5%;right:3.5%;padding:0}.cabinet-crown{display:flex;top:-2.7cqh;height:3.1cqh;z-index:5}.cabinet-crown i{display:none}.cabinet-crown span{font-family:inherit;font-style:normal;font-size:2.15cqw;letter-spacing:.5cqw;line-height:1;background:linear-gradient(#215979,#082745);padding:.8cqh 6cqw;border:1px solid #f4cd72;border-radius:20px;color:#fff2b9;-webkit-text-stroke:0;text-shadow:none;box-shadow:0 3px 7px #0008}.frame{padding:2.5cqw;border-radius:5cqw;border:1px solid #fff3b0;background:linear-gradient(110deg,#ad6318 0%,#fff1a4 4%,#d59026 7%,#fff2b0 10%,#f1bd52 45%,#bd781b 70%,#ffed9b 94%,#ab6415);box-shadow:inset 0 0 0 3px #fff2ac88,inset 0 0 0 5px #80531d,0 5px 0 #724416,0 8px 0 #061c30,0 12px 25px #0009,0 0 23px #21c8f544}.frame:before,.frame:after{display:block;width:3px;top:9%;bottom:9%;background:linear-gradient(#fff4c8,#e6a62c,#fff4c8);border:0;box-shadow:0 0 6px #fff2a0}.frame:before{left:1cqw}.frame:after{right:1cqw}.reel-window{border:2px solid #654b27;border-radius:2.7cqw;background:#e7b859;gap:2px;box-shadow:inset 0 4px 12px #50380566}.reel{background:linear-gradient(90deg,#dceff1,#fffef2 30%,#fffef2 70%,#dceff1);box-shadow:none}.cell{padding:0;border:0;border-radius:0;background:none;overflow:hidden}.cell:not(:last-child){border-bottom:1px solid #c6b77855}.cell .symbol{height:97%;width:auto;max-width:none;aspect-ratio:1;align-self:center;margin:0;background-image:url('assets/symbols.png');filter:drop-shadow(0 3px 2px #203b4833);background-size:300% 200%}.symbol{background-image:url('assets/symbols.png')}.symbol-caption{display:none}.reel-shade{inset:2.5cqw;background:linear-gradient(#183d5722,transparent 10%,transparent 88%,#173b5522)}.paylines{inset:2.5cqw;width:calc(100% - 5cqw);height:calc(100% - 5cqw)}.cell.winner:after{border:2px solid #ffcf38;inset:3%;box-shadow:inset 0 0 20px #ffdb5077,0 0 12px #ffda59}.cell.winner .symbol{animation:premiumSymbol .85s ease-in-out 2;filter:drop-shadow(0 0 8px #ffb900)}
.message-plaque{top:70.5%;height:5%;left:5%;right:5%;padding:0 12px;border:1px solid #e7c57d;border-radius:50px;background:linear-gradient(#166587,#052c49);box-shadow:inset 0 2px 0 #96dcf744,0 3px 0 #001b30}.message{font-size:clamp(10px,2.9cqw,15px);color:#eafaff;line-height:1.2}.message strong{display:block;font-size:min(6cqw,2.7cqh);line-height:1}.message small{font-size:clamp(7px,1.9cqw,10px);margin-top:1px;line-height:1.1}.message-plaque.active .message strong{color:#092846;text-shadow:none}
.dashboard{top:77%;height:23%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:.8cqh;padding:1cqh 4% max(.8cqh,env(safe-area-inset-bottom));background:linear-gradient(#0a3857dd,#031b35 70%);border-top:1px solid #68c9e977;box-shadow:0 -4px 20px #031e3388}.meters{display:grid;grid-template-columns:1.15fr .8fr 1.05fr;gap:1.2cqw}.meters>div,.bet-meter{border:1px solid #62a9c566;border-radius:2cqw;background:linear-gradient(#031b32,#083b5d);padding:.65cqh 1px;box-shadow:inset 0 1px 5px #0006;min-width:0}.meters span{font-size:clamp(8px,2cqw,11px);line-height:1.3;letter-spacing:.4px;color:#a7d5e9}.meters strong{font-size:clamp(13px,3.9cqw,20px);line-height:1.15;color:#fff1b9}.last-return{border-color:#d9b96988!important}.play-controls{height:auto;min-height:0;display:grid;grid-template-columns:1fr 1fr 1.7fr 1fr 1fr;justify-items:center;gap:1cqw;padding:0}.spin{width:min(23cqw,9.7cqh);height:min(23cqw,9.7cqh);max-width:100%;max-height:100%;padding:4px;border:1px solid #fff7c9;box-shadow:0 4px 0 #a06419,0 6px 0 #021c30,0 0 22px #ffc54855}.spin-inner{background:radial-gradient(ellipse at 30% 15%,#fff4a6,#ffc642 42%,#d58210 85%);border:1px solid #b96c12}.spin:before{inset:-5%;border:1px solid #eed88f88;box-shadow:0 0 12px #ffe08433}.spin svg{width:58%;height:58%;margin-top:-8%}.spin-label{font-size:2.1cqw;bottom:14%;letter-spacing:.2cqw}.utility,.adjust{width:clamp(32px,9cqw,44px);height:clamp(32px,9cqw,44px);min-width:0;min-height:0;border:1px solid #66b8d188;background:linear-gradient(#155378,#062a49);box-shadow:inset 0 1px 0 #8bd7ee66,0 3px 0 #00172b;color:#d8f5ff}.adjust{font-size:6cqw;border-color:#d5bd7588}.utility svg{width:4.5cqw;height:4.5cqw}footer{position:static;font-size:clamp(7px,1.8cqw,9px);line-height:1.2;gap:2px;letter-spacing:.2px;color:#79a6bd}footer span:first-child{font-size:clamp(8px,2cqw,10px);line-height:1.2;color:#edd39a}
.loader{background:linear-gradient(0deg,#011a35 5%,#032947bb 45%,transparent 75%),url('assets/hero.png') center top/100% 100%;background-color:#032947}.splash-logo{top:37%;left:3%;width:94%}.splash-logo span{font-size:7cqw;letter-spacing:.2cqw;color:#e6faff}.splash-logo strong{font-size:23cqw;letter-spacing:-1cqw;color:#ffdf73;text-shadow:0 3px 0 #ad661b,0 7px 0 #05233f}.splash-logo small{font-size:2.3cqw;letter-spacing:.35cqw}.splash-gem{display:none}.splash-base{bottom:5%;left:9%;right:9%}.splash-tag{font-size:2.65cqw;letter-spacing:.15cqw}.loader #enterGame{min-height:8cqh;font-size:6cqw}.loader p{font-size:2.5cqw}.splash-base small{font-size:2cqw}
.game.won .celebration{inset:26% 6% auto;height:14%;min-height:0;background:linear-gradient(135deg,#145579f5,#041e3af5);border:2px solid #ffde83;border-radius:5cqw;box-shadow:0 5px 0 #87531e,0 0 35px #ffcb5744;gap:0;padding:1cqh}.game.won .celebration strong{font-size:6cqw;line-height:1.2;-webkit-text-stroke:.5px #a56b1a;text-shadow:0 3px 0 #513414;color:#ffdf72}.game.won .celebration b{font-size:9cqw;line-height:1.1;text-shadow:0 3px 0 #835919}.celebration-kicker{font-size:2cqw;letter-spacing:.2cqw;margin-bottom:.5cqh}.trump-reaction{top:40%;height:30%}.trump-bubble{padding:2cqw;border:2px solid #153a58;top:4%;border-radius:4cqw 4cqw 4cqw 0;box-shadow:0 4px 0 #041b30}.trump-bubble b{font-size:4.5cqw}.trump-bubble span{font-size:3.3cqw}
@keyframes premiumSymbol{50%{transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.cell.winner .symbol{animation:none}}
.scenery{background-size:100% 92%;background-color:#031c35}
.topbar:after{display:none}
/* Matchday opening screen */
.loader{background:linear-gradient(0deg,#02162d 0%,#042844f5 35%,#04284400 69%),url('assets/hero.png') center top/100% 94% no-repeat;isolation:isolate}
.loader:after{content:'';position:absolute;inset:1.5cqw;border:1px solid #b5e8ff33;border-radius:4cqw;pointer-events:none;z-index:5}
.lobby-edition{position:absolute;left:6%;top:7%;width:45%;text-align:left;transform:rotate(-5deg);z-index:2}.lobby-edition>span{display:inline-block;padding:1cqh 1.5cqw;border-block:1px solid #c0a967aa;color:#f5d48b;font-size:1.8cqw;letter-spacing:.18cqw;font-weight:900}.lobby-edition>b{display:block;font-size:5cqw;line-height:1.05;font-style:italic;font-weight:900;color:#e9faff;margin:1.4cqh 0;text-shadow:0 3px 0 #072542}.lobby-edition>i{font-size:2.6cqw;font-style:normal;color:#8bd9ff;line-height:1.4}
.splash-logo{top:33%;left:3%;width:94%;transform:rotate(-3deg);filter:drop-shadow(0 7px 0 #001a2c)}.splash-logo>span{font-size:6.3cqw;letter-spacing:.8cqw;font-style:normal;line-height:1.2}.splash-logo>strong{font-size:24cqw;line-height:1.03;font-weight:900;letter-spacing:-.9cqw;background:linear-gradient(#ffffd7,#fff0a0 35%,#e4a83d 52%,#ffdf7c 80%);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:none;-webkit-text-stroke:.6px #dfa83b}.splash-logo>small{font-size:2.05cqw;letter-spacing:.4cqw;margin-top:.8cqh;color:#a5ddfa}
.lobby-line{position:absolute;top:51.5%;left:10%;right:10%;display:flex;align-items:center;gap:8px;color:#f8dc94;font-size:2cqw;font-weight:900;letter-spacing:.18cqw;white-space:nowrap}.lobby-line:before,.lobby-line:after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,#c29d53)}.lobby-line:after{transform:rotate(180deg)}
.lobby-symbols{position:absolute;left:6%;right:6%;top:55%;height:17%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5cqw;align-items:center}.lobby-symbols>div{height:90%;min-width:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at top,#287599,#072a48 80%);border:1px solid #71bee588;border-radius:3cqw;box-shadow:inset 0 1px 0 #d2f2ff55,0 5px 0 #011b30;transform:rotate(-5deg)}.lobby-symbols>div:nth-child(2){height:100%;transform:translateY(-.7cqh);border-color:#edca7a;box-shadow:inset 0 1px 0 #fff3bf66,0 5px 0 #6b4b1c,0 0 20px #ffc74022}.lobby-symbols>div:last-child{transform:rotate(5deg)}.lobby-symbols .symbol{width:100%;height:auto;aspect-ratio:1;max-height:85%;flex:1;min-height:0;background-size:300% 200%;filter:drop-shadow(0 3px 2px #0005)}.lobby-symbols b{font-size:1.9cqw;letter-spacing:.1cqw;color:#dff5ff;padding-bottom:1cqh;white-space:nowrap}
.splash-base{left:9%;right:9%;bottom:3%;display:flex;flex-direction:column;align-items:center}.lobby-ticket{width:100%;margin-bottom:1.6cqh;text-align:center}.lobby-ticket>span{display:block;font-size:1.7cqw;letter-spacing:.35cqw;color:#83b9d4;font-weight:900;margin-bottom:.3cqh}.lobby-ticket>strong{font-size:5cqw;color:#ffdf86;font-weight:900;line-height:1.1}.lobby-ticket strong small{font-size:2.3cqw;color:#f3dda6;letter-spacing:.15cqw}.loader #enterGame{width:100%;min-height:7.8cqh;border-radius:3cqw;font-size:6cqw;letter-spacing:.3cqw;gap:5cqw;position:relative;overflow:hidden}.loader #enterGame:after{content:'';position:absolute;top:-70%;left:-50%;width:15%;height:220%;background:linear-gradient(90deg,transparent,#fff9,transparent);transform:rotate(25deg);animation:lobbyShine 6s ease-in-out infinite}.loader #enterGame b{font-size:5cqw}.loader .loading-track{margin:1.5cqh auto 0;height:3px}.loader p{margin:.4cqh 0 .8cqh;font-size:2.3cqw;color:#acd5ea}.splash-base>small{font-size:1.8cqw;letter-spacing:.2cqw}.loader.loaded .loading-track{display:none}.loader.loaded p{margin:1.5cqh 0 1cqh;color:#acd5ea}
@keyframes lobbyShine{0%,65%{left:-50%}90%,100%{left:140%}}
@media(prefers-reduced-motion:reduce){.loader #enterGame:after{animation:none;display:none}}
@media(max-height:650px){.splash-logo{top:32%}.splash-logo>strong{font-size:20.5cqw}.splash-logo>span{font-size:5.5cqw}.splash-logo>small{font-size:1.8cqw;letter-spacing:.25cqw}.lobby-edition>i{display:none}}
/* Labelled parody symbols; the other original symbols stay untouched. */
.symbol.s1,.symbol.s2,.symbol.s3,.cell .symbol.s1,.cell .symbol.s2,.cell .symbol.s3{background-image:url('assets/symbols.png')}
/* Give the punchline its own headline, without competing straplines. */
.loader .splash-logo>small{display:none}
.lobby-line{top:48.5%;left:5%;right:5%;height:7.5%;display:flex;flex-direction:column;justify-content:center;gap:.35cqh;white-space:normal;text-align:center;letter-spacing:.15cqw;font-style:italic;line-height:1.08;text-shadow:0 2px 0 #001a30}
.lobby-line:before,.lobby-line:after{display:none}
.lobby-line span{font-size:3.5cqw;font-weight:900;color:#dff5ff}
.lobby-line strong{display:block;font-size:5.2cqw;font-weight:900;color:#ffe093;letter-spacing:-.08cqw;white-space:nowrap}
.lobby-symbols{top:58%;height:16%}
@media(max-height:650px){.lobby-line{top:48%;height:7.5%}.lobby-symbols{top:57%;height:16%}}
