/* A reversible presentation layer; original styles remain untouched. */
.studio-shell{display:none;pointer-events:none}.look-switch{position:absolute;left:50%;transform:translateX(-50%);min-height:30px;padding:5px 11px;border-radius:20px;background:#140c2cda;border:1px solid #e9cf8480;color:#fff;font:800 11px/1.2 'Nunito Sans',Arial,sans-serif;letter-spacing:.1px;white-space:nowrap;z-index:30;box-shadow:0 2px 5px #0005}.topbar>span{display:none}.look-switch:disabled{opacity:.5}.lobby-look-switch{position:absolute;top:1.5%;left:50%;transform:translateX(-50%);z-index:30}.look-switch:focus-visible{outline:3px solid #fff;outline-offset:2px}
html[data-look=studio]{--ink:#210c44;--panel:#4b0b80;--light:#a552cf;--accent:#ecb82c;--cream:#fbefd6;--inner:#18062e;--button1:#ad50df;--button2:#531b9b}
html[data-look=studio][data-theme=manchester]{--ink:#061d38;--panel:#075285;--light:#239acf;--inner:#03243f;--button1:#46c9f2;--button2:#1169ab;--cream:#f2ecdf}
html[data-look=studio][data-theme=zebra]{--ink:#072a25;--panel:#046d53;--light:#2aac79;--inner:#013b2f;--button1:#71e597;--button2:#129863;--cream:#fff0cf}
html[data-look=studio] .game{width:min(100vw,60dvh);max-width:520px;height:100dvh;max-height:960px;background:var(--ink);box-shadow:0 0 90px #0009}
html[data-look=studio] .ambient,html[data-look=studio] .sun-aura,html[data-look=studio] .hero-dust{display:none}
html[data-look=studio] .scenery{background-size:100% 72%;background-position:center -2cqh;background-repeat:no-repeat;background-color:var(--ink)}html[data-look=studio] .scenery:after{background:linear-gradient(transparent 17%,var(--ink) 31%)}
html[data-look=studio] .topbar{top:max(.7cqh,env(safe-area-inset-top));left:3%;right:3%;height:4cqh;z-index:15}html[data-look=studio] .small-button{width:32px!important;height:32px!important;background:var(--inner);border:1px solid #e1be5d;box-shadow:0 2px 0 #0007;backdrop-filter:none;color:#fff2b0}
html[data-look=studio] .hero{top:0;height:23%;overflow:hidden;z-index:2}html[data-look=studio] .wordmark{left:4%;top:29%;width:42%;transform:rotate(-5deg);filter:drop-shadow(0 3px 0 #0008)}html[data-look=studio] .wordmark>span{font-size:4.3cqw}html[data-look=studio] .wordmark>strong{font-size:11cqw}html[data-look=studio] .wordmark>small{display:none}
html[data-look=studio] .studio-shell{display:block;position:absolute;left:0;top:21%;width:100%;height:79%;object-fit:fill;z-index:3}
html[data-look=studio] .cabinet{top:24%;height:48%;left:6.8%;right:6.8%;z-index:4;padding:0}
html[data-look=studio] .cabinet-crown,html[data-look=studio] .frame-foot,html[data-look=studio] .line-label{display:none}
html[data-look=studio] .frame{padding:0;border:0;border-radius:3px;background:none;box-shadow:none;height:100%;overflow:visible}
html[data-look=studio] .frame:before,html[data-look=studio] .frame:after{display:none}
html[data-look=studio] .reel-window{border:2px solid #895718;border-radius:2px;background:#9c7026;gap:2px;box-shadow:inset 0 5px 8px #452a3333;height:100%;overflow:hidden}
html[data-look=studio] .reel{background:linear-gradient(90deg,#dbc398,var(--cream) 15%,var(--cream) 85%,#dfc99f);box-shadow:none}
html[data-look=studio] .cell{height:33.333333%;padding:0;border:0;background:transparent;border-radius:0;display:grid;place-items:center;overflow:visible}
html[data-look=studio] .cell:not(:last-child){border:0}
html[data-look=studio] .cell .symbol{width:100%;height:auto;max-width:none;max-height:none;aspect-ratio:1;align-self:center;margin:0;background-size:300% 200%;filter:drop-shadow(0 4px 2px #563d2430)}
html[data-look=studio] .symbol-caption{display:none}
html[data-look=studio] .cell.dim .symbol{filter:brightness(.67) saturate(.82)}
html[data-look=studio] .reel.moving .symbol{filter:blur(1.2px)}
html[data-look=studio] .reel-shade{display:block;inset:0;border-radius:0;background:linear-gradient(#4f2e3822,transparent 9%,transparent 91%,#4f2e3822);z-index:3}
html[data-look=studio] .paylines{inset:0;width:100%;height:100%}html[data-look=studio] .paylines path{stroke:#fff5a8;stroke-width:2;filter:drop-shadow(0 0 3px #ed9500)}
html[data-look=studio] .cell.winner:after{inset:2%;border:2px solid #ffd140;border-radius:5px;box-shadow:inset 0 0 14px #ffc63f88,0 0 10px #ffe152aa}
html[data-look=studio] .cell.winner .symbol{animation:studioWin .7s ease-in-out 2;filter:drop-shadow(0 0 5px #e69d13)}
html[data-look=studio] .gold-flash{inset:-1%;border-radius:2px;box-shadow:0 0 18px #ffcf49,inset 0 0 15px #ffcf4966}
html[data-look=studio] .message-plaque{top:73.2%;height:5.2%;left:8%;right:8%;padding:0 4px;background:none;border:0;border-radius:0;box-shadow:none;z-index:5}
html[data-look=studio] .message{font-size:clamp(12px,3.1cqw,16px);color:#fff1bc;text-shadow:0 2px 0 #0008;line-height:1.15;font-weight:900}
html[data-look=studio] .message strong,html[data-look=studio] .message-plaque.active .message strong{font:900 min(6cqw,3cqh)/1 'Nunito Sans',sans-serif;color:#ffeb82;text-shadow:0 2px 0 #351a00}
html[data-look=studio] .message small{font-size:clamp(8px,2cqw,11px);color:#fff6d2;line-height:1.1;margin-top:2px}
html[data-look=studio] .dashboard{top:79%;height:21%;padding:0 8% max(.5cqh,env(safe-area-inset-bottom));display:grid;grid-template-rows:4.3cqh minmax(0,1fr) 2.8cqh;gap:.5cqh;background:none;border:0;box-shadow:none;z-index:5}
html[data-look=studio] .dashboard:before{display:none}
html[data-look=studio] .meters{display:grid;grid-template-columns:1.1fr .8fr 1.05fr;gap:1cqw;align-items:stretch}
html[data-look=studio] .meters>div,html[data-look=studio] .bet-meter{display:flex;flex-direction:column;justify-content:center;background:var(--inner);border:1px solid #f0c87666;border-radius:30px;padding:.2cqh 1px;box-shadow:inset 0 2px 3px #0005;min-width:0}
html[data-look=studio] .meters span{font:800 clamp(8px,2.05cqw,11px)/1.2 'Nunito Sans',sans-serif;letter-spacing:0;color:#f6e2b8;white-space:nowrap}
html[data-look=studio] .meters strong{font:900 clamp(13px,4cqw,21px)/1.15 'Nunito Sans',sans-serif;color:#ffe281;white-space:nowrap;text-shadow:0 1px 0 #0008}
html[data-look=studio] .play-controls{height:auto;display:grid;grid-template-columns:1fr 1fr 1.9fr 1fr 1fr;gap:1cqw;padding:0;align-items:center;justify-items:center;min-height:0}
html[data-look=studio] .utility,html[data-look=studio] .adjust{width:clamp(30px,8.3cqw,43px);height:clamp(30px,8.3cqw,43px);border-radius:50%;background:var(--inner);color:#fff2bd;border:1px solid #e5b65377;box-shadow:0 3px 0 #0005,inset 0 1px 0 #fff2;min-width:0;min-height:0;max-height:none}
html[data-look=studio] .adjust{font-size:6cqw}html[data-look=studio] .utility svg{width:4.7cqw;height:4.7cqw}
html[data-look=studio] .spin{width:min(25cqw,11cqh);height:min(25cqw,11cqh);max-width:none;max-height:none;border:2px solid #fff3a3;background:conic-gradient(#9b5510,#ffe87a,#b9740e,#fff0a2,#b96c0d,#ffe780,#9b5510);padding:5px;box-shadow:0 4px 0 #874805,0 7px 0 #0005}
html[data-look=studio] .spin-inner{background:radial-gradient(ellipse at 30% 20%,var(--button1),var(--button2) 78%);border:2px solid #e8ba48;box-shadow:inset 0 3px 2px #fff7,inset 0 -4px 4px #0005}
html[data-look=studio] .spin:before{inset:-4%;border:1px solid #ffe68788;box-shadow:none}
html[data-look=studio] .spin svg{width:62%;height:62%;margin-top:-7%;stroke:#fff1a4;stroke-width:5;filter:drop-shadow(0 2px 0 #0005)}html[data-look=studio] .spin .arrow{fill:#fff1a4}
html[data-look=studio] .spin-label{bottom:12%;font-size:2.2cqw;font-weight:900;letter-spacing:.1cqw;color:#fff3b9;text-shadow:0 1px 0 #0008}
html[data-look=studio] .dashboard footer{position:static;font-size:clamp(7px,1.85cqw,10px);line-height:1.2;color:#f3e3c3;letter-spacing:.1px;gap:2px;padding:0;justify-content:center}
html[data-look=studio] footer span:first-child{font-size:2cqw;color:#fff0ba;line-height:1.15}
html[data-look=studio] .celebration,html[data-look=studio] .game.won .celebration{inset:31% 8% auto;height:18%;padding:1cqh;background:linear-gradient(135deg,var(--panel),var(--inner));border:2px solid #ffdf7d;border-radius:4cqw;box-shadow:0 4px 0 #8a5819,0 0 25px #ffbe4344;gap:0}
html[data-look=studio] .celebration>strong,html[data-look=studio] .game.won .celebration strong{font:900 6.5cqw/1.15 'Nunito Sans',sans-serif;color:#ffe386;-webkit-text-stroke:0;text-shadow:0 2px 0 #663b08}
html[data-look=studio] .celebration>b,html[data-look=studio] .game.won .celebration b{font-size:10cqw;line-height:1.15;color:#fff4bc}
html[data-look=studio] .celebration-kicker{font-size:2.1cqw;letter-spacing:.1cqw;line-height:1.2}
html[data-look=studio] .pep-reaction,html[data-look=studio] .trump-reaction{top:48%;height:28%;z-index:12}
html[data-look=studio] .pep-bubble,html[data-look=studio] .trump-bubble{top:7%;background:#fff8dd;border-color:var(--inner);color:var(--ink)}
html[data-look=studio][data-theme=zebra] .hero{top:0;height:24%;z-index:2}html[data-look=studio][data-theme=zebra] .mascot,html[data-look=studio][data-theme=zebra] .mascot[data-state]{top:2cqh;right:2%;height:96%;width:auto;aspect-ratio:1;filter:drop-shadow(0 3px 0 #25180455)}html[data-look=studio][data-theme=zebra] .wordmark{left:4%;top:24%;width:46%;height:61%}
html[data-look=studio][data-theme=crude] .scenery{background-size:100% 69%;background-position:center -1.2cqh}
html[data-look=studio][data-theme=manchester] .scenery{background-size:100% 68%;background-position:center -1.5cqh}
html[data-look=studio] .loader{z-index:20}
@keyframes studioWin{50%{transform:scale(1.08) translateY(-2px)}}
@media(max-height:650px){html[data-look=studio] .dashboard{grid-template-rows:4.8cqh minmax(0,1fr) 2.5cqh}html[data-look=studio] .meters span{font-size:7px}html[data-look=studio] .meters strong{font-size:12px}html[data-look=studio] .look-switch{min-height:26px;font-size:10px;padding:4px 9px}html[data-look=studio] .message{font-size:11px}}
@media(prefers-reduced-motion:reduce){html[data-look=studio] .cell.winner .symbol{animation:none}}
html[data-look=studio] .cabinet{top:23.5%;height:51%;left:7.6%;right:7.6%}
html[data-look=studio] .message-plaque{top:75.8%;height:4.5%}
html[data-look=studio] .dashboard{top:81.5%;height:17%;grid-template-rows:3.8cqh minmax(0,1fr) 2.1cqh;gap:.3cqh;padding-bottom:0}
html[data-look=studio] .spin{width:min(23cqw,9.6cqh);height:min(23cqw,9.6cqh)}
html[data-look=studio] .cell .symbol{width:118%;max-height:100%;aspect-ratio:1}
html[data-look=studio][data-theme=crude] .cell .s3,html[data-look=studio][data-theme=crude] .cell .s5{width:108%}
html[data-look=studio] .dashboard footer{font-size:1.8cqw}
@media(max-height:650px){html[data-look=studio] .dashboard{grid-template-rows:4cqh minmax(0,1fr) 2.5cqh}html[data-look=studio] .spin{width:9cqh;height:9cqh}}
html[data-look=studio] .cell{display:flex;align-items:center;justify-content:center}
html[data-look=studio] .cell .symbol{flex:none;max-height:none}
html[data-look=studio] .cell .symbol{width:min(118%,16.5cqh);height:auto;clip-path:inset(1% 0 2%)}
html[data-look=studio][data-theme=crude] .cell .s3,html[data-look=studio][data-theme=crude] .cell .s5{width:min(108%,16.5cqh)}
html[data-look=studio][data-theme=manchester] .scenery{background-position:center 0}
html[data-look=studio][data-theme=zebra] .cell .s2{clip-path:inset(0 0 8%)}
html[data-look=studio] .dashboard footer{font-size:clamp(8px,1.9cqw,10px)}
html[data-look=studio] footer span:first-child{font-size:clamp(8px,2cqw,11px)}

/* Separate the character from the scenery so neither is stretched. */
html[data-look=studio][data-theme=crude] .scenery{background-image:url('assets/skyline-only.png');background-size:100% auto;background-position:center top}
html[data-look=studio][data-theme=crude] .scenery:after{background:linear-gradient(transparent 21%,var(--ink) 29%)}
html[data-look=studio][data-theme=crude] .hero{height:23%;overflow:hidden}
html[data-look=studio][data-theme=crude] #mascot{display:block;position:absolute;top:2cqh;right:2%;width:20.5cqh;height:20.5cqh;max-width:none;aspect-ratio:1;background:url('assets/sheikh-atlas.png') 0 0/200% 200% no-repeat;transform:none;animation:none;filter:drop-shadow(0 3px 2px #43201744)}

/* Match Zebra's winning-cell treatment and leave the symbols room to move. */
html[data-look=studio][data-theme=crude] .cell.winner:after{inset:2%;border:2px solid #ffc94c;border-radius:13%;box-shadow:0 0 16px #ffbf27,inset 0 0 19px #ffb42c;animation:lineGlow .8s ease-in-out infinite alternate}
html[data-look=studio][data-theme=crude] .cell .symbol{transition:filter .18s ease-out;transform-origin:50% 55%}
@media(prefers-reduced-motion:reduce){html[data-look=studio][data-theme=crude] .cell .symbol{transition:none}html[data-look=studio][data-theme=crude] .cell.winner:after{animation:none}}