:root{--ink:#0a0a08;--ink2:#15130f;--mag:#e0246f;--magd:#c8185e;--teal:#3aa3bd;--org:#ff8a35;--cream:#f6ecdf;--mut:#b4a998;--r:22px}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--cream);font:17px/1.65 "DM Sans",system-ui,sans-serif;overflow-x:hidden;min-height:100vh;
background-image:radial-gradient(60vw 50vh at 85% -5%,rgba(var(--mr),.28),transparent 70%),radial-gradient(55vw 55vh at -10% 45%,rgba(var(--tr),.2),transparent 70%),radial-gradient(50vw 40vh at 90% 100%,rgba(var(--or),.14),transparent 70%);background-attachment:fixed}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.14;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3{font-family:"Rozha One",Georgia,serif;font-weight:400;line-height:1;color:var(--cream)}
h2{font-size:clamp(3.2rem,14vw,7rem);color:var(--mag);letter-spacing:-.01em;margin-bottom:.15em;text-shadow:0 0 40px rgba(var(--mr),.35)}
.lede{color:var(--mut);font-size:1.2rem;max-width:36ch;margin-bottom:2.2rem}
a{color:inherit}
:focus-visible{outline:3px solid var(--org);outline-offset:3px}
.wrap{position:relative;z-index:2;width:min(1040px,100% - 6.5rem);margin-inline:auto}
@media(min-width:900px){.wrap{width:min(1040px,100% - 10rem)}}
.sr{position:absolute;left:-9999px}
/* nav */
nav{position:sticky;top:.8rem;z-index:30;display:flex;justify-content:center;padding:0 .8rem}
nav ul{display:flex;gap:.2rem;list-style:none;padding:.35rem;border-radius:999px;background:rgba(21,19,15,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1.5px solid rgba(246,236,223,.14);box-shadow:0 10px 40px rgba(0,0,0,.5);overflow-x:auto;scrollbar-width:none;max-width:100%}
nav a{display:block;padding:.5rem 1rem;border-radius:999px;text-decoration:none;font-weight:500;font-size:.95rem;white-space:nowrap;transition:background .2s,color .2s}
nav a:hover{background:rgba(246,236,223,.1)}
nav a.on{background:var(--mag);color:#fff}
nav .bolt{display:flex;align-items:center;padding:0 .6rem}
nav .bolt svg{width:14px;height:20px;fill:var(--org)}
/* views */
.view{display:none;padding:3.5rem 0 5rem;min-height:80vh}
.view.on{display:block;animation:in .55s ease both}
@keyframes in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* hero */
.hero{text-align:center;padding-top:1rem}
.hero .logo{width:min(860px,100%);border-radius:var(--r);display:block;margin:0 auto;box-shadow:0 0 90px rgba(var(--mr),.28),0 30px 80px rgba(0,0,0,.6)}
.hero .tag{font-family:"Rozha One",serif;font-size:clamp(1.5rem,5vw,2.4rem);margin:2.2rem auto 1.4rem;max-width:20ch;line-height:1.15}
.btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:.85rem 1.7rem;border-radius:999px;font:700 1rem "DM Sans",sans-serif;text-decoration:none;border:2px solid var(--org);cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.btn.pri{background:var(--org);color:var(--ink)}
.btn.sec{background:transparent;color:var(--org)}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(var(--or),.35)}
.tiles{display:grid;gap:1rem;margin-top:3rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));text-align:left}
.tile{position:relative;overflow:hidden;border-radius:var(--r);padding:1.6rem;min-height:150px;text-decoration:none;background:linear-gradient(160deg,rgba(var(--mr),.2),rgba(21,19,15,.9) 60%);border:1.5px solid rgba(246,236,223,.14);display:flex;flex-direction:column;justify-content:flex-end;transition:transform .25s,border-color .25s}
.tile:hover{transform:translateY(-5px) rotate(-.6deg);border-color:var(--org)}
.tile h3{font-size:2rem}
.tile p{color:var(--mut);font-size:.95rem}
.tile svg{position:absolute;right:-18px;top:-18px;width:110px;height:110px;color:var(--teal);opacity:.35;transition:transform .5s}
.tile:hover svg{transform:rotate(45deg) scale(1.1)}
/* photo slots */
.slot{position:relative;border-radius:var(--r);overflow:hidden;background:var(--ink2);border:1.5px solid rgba(246,236,223,.14);display:grid;place-items:center;text-align:center;color:var(--mut);aspect-ratio:var(--ar,4/3)}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot .ph{display:grid;gap:.4rem;justify-items:center;font-size:.9rem;border:2px dashed rgba(var(--tr),.6);border-radius:14px;margin:.8rem;width:calc(100% - 1.6rem);height:calc(100% - 1.6rem);align-content:center;padding:1rem}
.slot .ph svg{width:44px;height:44px;color:var(--teal)}
.slot.has .ph{display:none}
.banner{--ar:21/9;margin-top:3rem}
@media(max-width:640px){.banner{--ar:4/3}}
/* shows */
.shows{display:grid;gap:.9rem}
.show{display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem;align-items:center;border-radius:var(--r);padding:1.1rem 1.4rem;background:rgba(21,19,15,.78);backdrop-filter:blur(6px);border:1.5px solid rgba(246,236,223,.14);transition:border-color .25s,transform .25s}
.show:hover{border-color:var(--teal);transform:translateX(4px)}
.date{font-family:"Rozha One",serif;text-align:center;color:var(--org);line-height:1;min-width:3.6rem}
.date b{display:block;font-size:2.4rem;font-weight:400}
.show h3{font-size:1.5rem}
.show p{color:var(--mut);font-size:.95rem}
.show.empty{grid-template-columns:1fr;text-align:center;border-style:dashed}
@media(max-width:560px){.show{grid-template-columns:auto 1fr}
.show .btn{grid-column:1/-1;text-align:center}}
/* gallery */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.9rem}
.grid .slot{--ar:1;cursor:pointer;transition:transform .3s}
.grid .slot.has:hover{transform:scale(1.025) rotate(-.5deg)}
.grid .slot.big{grid-column:span 2;--ar:2/1}
dialog{background:var(--ink);border:1.5px solid var(--mag);border-radius:var(--r);padding:.8rem;max-width:min(940px,94vw);color:var(--cream)}
dialog::backdrop{background:rgba(0,0,0,.9)}
dialog img{max-width:100%;max-height:78vh;display:block;margin:auto;border-radius:12px}
dialog button{float:right;margin-bottom:.5rem}
/* about */
.about{display:grid;gap:2.5rem;align-items:start}
@media(min-width:820px){.about{grid-template-columns:1.1fr .9fr}}
.about .slot{--ar:4/5}
.about p+p{margin-top:1rem}
.player,.card{border-radius:var(--r);padding:1.6rem;background:rgba(21,19,15,.8);backdrop-filter:blur(6px);border:1.5px solid rgba(246,236,223,.14)}
.player{display:grid;place-items:center;text-align:center;color:var(--mut);min-height:200px;border-color:rgba(var(--tr),.5)}
.player iframe{width:100%;height:352px;border:0;border-radius:14px}
.card h3{font-size:2rem;color:var(--mag);margin-bottom:.4rem}
form{display:grid;gap:.8rem;margin-top:1rem}
label{font-weight:500;font-size:.95rem}
input,textarea{width:100%;padding:.85rem 1.1rem;border-radius:14px;border:1.5px solid rgba(246,236,223,.2);background:var(--ink);color:var(--cream);font:inherit;transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus{border-color:var(--org);outline:none;box-shadow:0 0 0 4px rgba(var(--or),.18)}
.row{display:flex;gap:.7rem;flex-wrap:wrap}
.row input{flex:1 1 220px}
.msg{min-height:1.4em;font-weight:500}
.msg.ok{color:#7ad69a}
.msg.err{color:#ff8a8a}
.hp{position:absolute;left:-9999px}
.two{display:grid;gap:1.2rem}
@media(min-width:820px){.two{grid-template-columns:1fr 1fr}}
/* social + footer */
.social{display:flex;gap:.8rem;flex-wrap:wrap;list-style:none;padding:0;justify-content:center}
.social a{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(246,236,223,.3);background:rgba(21,19,15,.8);transition:.25s}
.social a:hover{background:var(--mag);border-color:var(--mag);transform:translateY(-4px) rotate(-8deg);box-shadow:0 10px 28px rgba(var(--mr),.5)}
.social svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.social .f{fill:currentColor;stroke:none}
footer{position:relative;z-index:2;padding:2.5rem 0 3rem;text-align:center;color:var(--mut)}
footer .social{margin-bottom:1rem}
/* growing vines */
.vines{position:fixed;inset:0;pointer-events:none;z-index:1}
.vine{position:absolute;top:0;bottom:0;width:clamp(56px,11vw,150px);height:100%}
.vine.l{left:0}
.vine.r{right:0;transform:scaleX(-1)}
.vp{fill:none;stroke-linecap:round;transition:stroke-dashoffset .5s ease-out}
.fl{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .7s cubic-bezier(.3,1.6,.5,1)}
.fl.on{transform:scale(1)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
html{scroll-behavior:auto}
.fl{transform:scale(1)}}
/* ---- premium pass ---- */
.hero .logo{height:auto;max-width:100%;box-shadow:none;border-radius:20px}
.poster{width:min(900px,100%);margin:0 auto;border-radius:24px;padding:10px;background:linear-gradient(145deg,rgba(246,236,223,.28),rgba(246,236,223,.04) 40%,rgba(var(--mr),.4));box-shadow:0 0 120px rgba(var(--mr),.3),0 40px 90px rgba(0,0,0,.7);transition:transform .25s ease-out;will-change:transform;animation:rise 1.1s .1s cubic-bezier(.2,.8,.2,1) both}
.hero .tag{animation:rise 1s .45s cubic-bezier(.2,.8,.2,1) both;font-size:clamp(1.7rem,6vw,3rem);max-width:16ch;margin:2.6rem auto 1.6rem}
.hero .btns{animation:rise 1s .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(34px) scale(.98)}to{opacity:1;transform:none}}
.view.on{animation:in .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes in{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.vine{width:clamp(70px,15vw,180px)}
.tile,.card,.show,.player{--mx:50%;--my:0;position:relative;overflow:hidden}
.tile::before,.card::before,.show::before,.player::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(320px circle at var(--mx) var(--my),rgba(var(--or),.16),transparent 70%)}
.tile:hover::before,.card:hover::before,.show:hover::before,.player:hover::before{opacity:1}
.tile{min-height:170px;border-radius:26px}
.tile h3{font-size:2.3rem;color:var(--cream)}
.tile::after{content:"↗";position:absolute;right:1.3rem;bottom:1.3rem;font-size:1.4rem;color:var(--org);transition:transform .3s}
.tile:hover::after{transform:translate(4px,-4px)}
nav ul{box-shadow:0 14px 50px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1)}
h2{background:linear-gradient(180deg,#ff4f8f,var(--magd));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 28px rgba(var(--mr),.35))}
.show{border-radius:0;border:0;border-bottom:1.5px solid rgba(246,236,223,.16);background:transparent;backdrop-filter:none;padding:1.5rem .2rem}
.show:hover{transform:none;background:linear-gradient(90deg,rgba(var(--mr),.18),transparent)}
.show h3{font-size:clamp(1.6rem,5vw,2.6rem)}
.date b{font-size:3rem}
.show.empty{border:1.5px dashed rgba(246,236,223,.2);border-radius:var(--r);padding:2rem}
.grid{grid-auto-flow:dense;gap:1rem}
.grid .slot:nth-child(5n+3){grid-row:span 2;--ar:auto}
.slot{border-radius:24px}
footer{padding-top:4rem;border-top:1px solid rgba(246,236,223,.1);overflow:hidden}
.mark{font-family:"Rozha One",serif;font-size:clamp(3.2rem,15vw,10rem);line-height:.9;color:transparent;-webkit-text-stroke:1.5px rgba(var(--mr),.6);margin-bottom:2.2rem;text-wrap:balance}
/* ---- v4: behind-the-page vines, print texture, gig-poster vibe ---- */
body{background-image:radial-gradient(70vw 55vh at 90% -8%,rgba(var(--mr),.3),transparent 70%),radial-gradient(60vw 60vh at -12% 50%,rgba(var(--tr),.22),transparent 70%),radial-gradient(55vw 45vh at 95% 105%,rgba(var(--or),.16),transparent 70%)}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(rgba(246,236,223,.09) 1.2px,transparent 1.6px) 0 0/11px 11px,radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.65))}
body::after{opacity:.24}
.vines{z-index:-1;opacity:.95}
.vine{width:clamp(130px,34vw,440px)}
.fl{transform-box:fill-box;transform-origin:50% 100%}
.fl.on{transform:scale(1)}
h2,.tile h3,.card h3{text-shadow:3px 3px 0 var(--teal),6px 8px 30px rgba(var(--mr),.35)}
h2{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--mag);filter:none}
.hero .tag{text-shadow:2px 2px 0 var(--teal)}
.sticker{position:absolute;right:-12px;top:-30px;width:clamp(92px,23vw,150px);filter:drop-shadow(0 8px 20px rgba(0,0,0,.6));transform:rotate(12deg);z-index:3}
.sticker .spin{transform-origin:60px 60px;animation:spin 22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.poster{position:relative}
.hero .logo{display:block}
.card,.player,.tile,.item{background-color:rgba(18,16,12,.86)}
.grid .slot{overflow:visible;background:#efe3d2;border:0;padding:0;border:10px solid #efe3d2;border-bottom-width:42px;border-radius:3px;box-shadow:0 14px 34px rgba(0,0,0,.55);transform:rotate(-1.6deg)}
.grid .slot:nth-child(even){transform:rotate(1.3deg)}
.grid .slot:nth-child(3n){transform:rotate(-.6deg)}
.grid .slot.has:hover{transform:rotate(0) scale(1.04);z-index:4}
.grid .slot::before,.about .slot::before{content:"";position:absolute;top:-19px;left:50%;width:74px;height:24px;margin-left:-37px;background:rgba(246,236,223,.5);transform:rotate(-3deg);z-index:3}
.grid .slot img{border-radius:0}
.grid .slot .ph{margin:0;width:100%;height:100%;border-color:rgba(10,10,8,.35);color:#4a4338;border-radius:0}
.about .slot{overflow:visible;border:10px solid #efe3d2;border-bottom-width:50px;border-radius:3px;background:#efe3d2;transform:rotate(1.8deg);box-shadow:0 20px 50px rgba(0,0,0,.6)}
.about .slot .ph{color:#4a4338;border-color:rgba(10,10,8,.35);margin:0;width:100%;height:100%;border-radius:0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;margin:1.2rem 0}
.item{position:relative;display:block;overflow:hidden;text-decoration:none;border-radius:22px;border:1.5px solid rgba(246,236,223,.14);transition:transform .3s,border-color .3s}
.item:hover{transform:translateY(-5px);border-color:var(--org)}
.item img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.item div{padding:1rem 1.2rem}
.item h3{font-size:1.5rem}
.item p{color:var(--mut);font-size:.95rem}
/* ---- v5: slot machine + themeable colours ---- */
:root{--mr:224,36,111;--tr:58,163,189;--or:255,138,53}
.vp[stroke="#3aa3bd"]{stroke:var(--teal)}
.vp[stroke="#e0246f"]{stroke:var(--mag)}
.fl[fill="#3aa3bd"]{fill:var(--teal)}
.fl[fill="#e0246f"]{fill:var(--mag)}
.sticker>circle:first-child{fill:var(--org)}
.machine{position:relative;width:min(640px,100%);margin:1rem auto 1.5rem;aspect-ratio:1180/1050;filter:drop-shadow(0 30px 50px rgba(0,0,0,.6))}
.machine>img{width:100%;height:100%;display:block;pointer-events:none}
.reel{position:absolute;top:37.9%;width:15.6%;height:21.1%;background:#efe3d2;overflow:hidden;border-radius:6px;box-shadow:inset 0 0 16px rgba(0,0,0,.5);color:#14130f}
.reel::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.4),transparent 28%,transparent 72%,rgba(0,0,0,.4));pointer-events:none}
.strip{height:4000%;will-change:transform}
.cell{height:2.5%;display:grid;place-items:center}
.cell svg{width:68%;height:68%;fill:currentColor}
.lever{position:absolute;left:81.4%;top:31%;width:17.4%;height:20.7%;padding:0;border:0;background:none;cursor:pointer;transform-origin:14.6% 98%;transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.lever img{width:100%;height:100%;display:block;pointer-events:none}
.lever:hover{transform:rotate(7deg)}
.lever.pull{transform:rotate(92deg);transition-duration:.25s}
.spinbtn{position:absolute;left:56.8%;top:74.8%;width:16.1%;aspect-ratio:1;border-radius:50%;border:0;background:none;cursor:pointer}
.spinbtn:active{background:rgba(255,255,255,.12)}
.machine.spinning{animation:rumble .12s linear infinite}
@keyframes rumble{50%{transform:translate(1px,-1px)}}
.result{text-align:center;font-family:"Rozha One",serif;font-size:clamp(1.4rem,5vw,2rem);min-height:1.4em;margin-bottom:1.2rem;color:var(--org)}
html.flash main{animation:flash .7s ease-out}
@keyframes flash{0%{filter:brightness(2.4) saturate(2)}100%{filter:none}}
body[data-fx=flicker] h2{animation:flk 3s infinite}
@keyframes flk{0%,88%,100%{opacity:1}90%{opacity:.35}93%{opacity:1}96%{opacity:.5}}
body[data-fx=float] .tile,body[data-fx=float] .card{animation:bob 4s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-7px)}}
body[data-fx=glitch] h2,body[data-fx=glitch] .tag{animation:gl .8s steps(2) infinite}
@keyframes gl{50%{transform:translate(-3px,1px);text-shadow:-4px 0 var(--teal),4px 0 var(--org)}}
/* ---- v6: drastic themes ---- */
h1,h2,h3,.tag,.result,.date,.mark{font-family:var(--hf,"Rozha One"),Georgia,serif}
body{font-family:var(--bf,"DM Sans"),system-ui,sans-serif}
.mast{font-size:clamp(2.8rem,13vw,6.4rem);color:var(--mag);line-height:.95;margin:.3rem 0 .8rem;text-shadow:3px 3px 0 var(--teal),6px 8px 30px rgba(var(--mr),.4)}
.hero .tag{margin:.4rem auto 1.2rem}
.decor{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.d{position:absolute;opacity:.55}
.d svg{display:block;width:100%;height:auto;fill:currentColor}
.d.clip{opacity:.85;color:#161411!important;background:#e8dfc9;font:900 italic 1.05rem/1.1 "Playfair Display",serif;text-transform:uppercase;padding:.55em .75em;box-shadow:0 6px 18px rgba(0,0,0,.6);text-align:left}
.d.clip:nth-child(3n){background:#f4efe3;font-family:"Special Elite",monospace;font-style:normal}
.d.clip:nth-child(4n){background:#d8cdb2;transform:skewX(-3deg)}
@keyframes fl{from{transform:translate(0,0) rotate(var(--r))}to{transform:translate(var(--dx),var(--dy)) rotate(calc(var(--r) + 28deg))}}
@keyframes fall{from{transform:translateY(-115vh) rotate(0)}to{transform:translateY(115vh) rotate(var(--rr))}}
@keyframes spn{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes pop{0%,82%,100%{opacity:0}86%{opacity:.95}90%{opacity:.1}94%{opacity:.8}}
i.rn{font-style:normal;display:inline-block;padding:.02em .12em;margin:0 .025em;line-height:1.05;box-shadow:2px 3px 7px rgba(0,0,0,.55);text-shadow:none}
i.rn.r0{background:#efe3d2;color:#111;font-family:"Playfair Display",serif;font-weight:900}
i.rn.r1{background:#111;color:#f1f1f1;font-family:"Special Elite",monospace;outline:2px solid #efe3d2}
i.rn.r2{background:var(--mag);color:#fff;font-family:"Rye",serif}
i.rn.r3{background:#f2c14e;color:#111;font-family:"Rozha One",serif}
i.rn.r4{background:#d8cdb2;color:#a3121f;font-family:"Playfair Display",serif;font-style:italic!important;font-weight:900}
.w{display:inline-block;white-space:nowrap;margin:.04em .1em}
/* ---- v7: full skins, living machine ---- */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
.machine{--gl:var(--mr);animation:bob 5s ease-in-out infinite}
.machine.spinning{animation:rumble .12s linear infinite}
@keyframes bob{50%{transform:translateY(-5px)}}
.machine::before{content:"";position:absolute;inset:-14%;z-index:-1;background:radial-gradient(closest-side,rgba(var(--gl),.5),rgba(var(--gl),.14) 62%,transparent);filter:blur(12px);animation:breathe 4s ease-in-out infinite}
@keyframes breathe{50%{opacity:.55;transform:scale(1.06)}}
.machine::after{content:"";position:absolute;left:8%;right:8%;bottom:-5%;height:9%;z-index:-1;background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent);filter:blur(7px)}
.machine.win::before{opacity:1;animation:breathe .3s infinite}
.rays{position:absolute;left:50%;top:48%;width:170%;aspect-ratio:1;margin:-85% 0 0 -85%;z-index:-1;border-radius:50%;opacity:0;transition:opacity .4s;pointer-events:none;background:repeating-conic-gradient(rgba(var(--gl),.3) 0 6deg,transparent 6deg 18deg);-webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent);animation:spn 10s linear infinite}
.machine.win .rays{opacity:1}
.bulbs{position:absolute;inset:0;pointer-events:none}
.bulb{position:absolute;width:1.9%;aspect-ratio:1;margin:-.95% 0 0 -.95%;border-radius:50%;background:var(--lite,var(--org));box-shadow:0 0 10px 3px var(--lite,var(--org));animation:bb 1.4s ease-in-out infinite}
@keyframes bb{0%,100%{opacity:.2}50%{opacity:1}}
.machine.spinning .bulb{animation-duration:.3s}
.machine.win .bulb{animation-duration:.16s}
.reel{box-shadow:inset 0 0 16px rgba(0,0,0,.5),0 0 16px rgba(var(--gl),.4)}
.reel::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.4),transparent 34%,transparent 70%,rgba(255,255,255,.14))}
.machine.spinning .strip{filter:blur(1.6px)}
.machine.spinning .lever{animation:none}
.lever{animation:lp 2.2s ease-in-out infinite}
@keyframes lp{50%{filter:drop-shadow(0 0 14px var(--lite,#ff8a35))}}
.part{position:absolute;left:50%;top:48%;width:9px;height:9px;border-radius:50%;pointer-events:none;animation:burst 1.1s ease-out forwards}
@keyframes burst{to{transform:translate(var(--x),var(--y)) scale(.2);opacity:0}}
/* shared skin plumbing */
body[data-theme] :is(.card,.player,.item,.tile){background:var(--card);border:1.5px solid var(--bd);box-shadow:var(--bs,none)}
body[data-theme] nav ul{background:var(--navbg);border-color:var(--bd)}
body[data-theme] nav a.on{background:var(--mag);color:var(--on,#fff)}
/* CROWN: gold glitter + black ink */
body[data-w=crown]{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .86  0 0 0 0 .4  0 0 0 3.2 -1.35'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .55  0 0 0 0 .38  0 0 0 0 .05  0 0 0 2.4 -.9'/%3E%3C/filter%3E%3Crect width='256' height='256' fill='%23c99a24'/%3E%3Crect width='256' height='256' filter='url%28%23b%29'/%3E%3Crect width='256' height='256' filter='url%28%23a%29'/%3E%3C/svg%3E"),#b8891c;--cream:#0b0a06;--ink:#f2c14e;--mut:#3a2c08;--on:#f2c14e;--card:rgba(240,200,90,.5);--bd:#0b0a06;--navbg:rgba(233,195,90,.88);--lite:#fff1a8;--gl:255,226,130}body[data-m=crown] .machine{--cream:#0b0a06;--ink:#f2c14e;--mut:#3a2c08;--on:#f2c14e;--card:rgba(240,200,90,.5);--bd:#0b0a06;--navbg:rgba(233,195,90,.88);--lite:#fff1a8}body[data-f=crown] :is(nav,.btn,.tile,.card,.item,.player,.slot,.social a,input,textarea,.inkbox){--cream:#0b0a06;--ink:#f2c14e;--mut:#3a2c08;--on:#f2c14e;--card:rgba(240,200,90,.5);--bd:#0b0a06;--navbg:rgba(233,195,90,.88);--lite:#fff1a8;--gl:255,226,130}
body[data-m=crown] :is(h2,.mast,.tag,h3:not(*)),body[data-f=crown] :is(h2:not(*),.mast:not(*),.tag:not(*),h3){text-shadow:1px 1px 0 rgba(255,236,170,.8)}
body[data-w=crown]::before{background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.4) 50%,transparent 60%) 0 0/250% 100%;animation:sweep 6s linear infinite}
@keyframes sweep{to{background-position:-250% 0}}
body[data-m=crown] :is(.machine>img,.lever img){filter:url(#ink)}
body[data-m=crown] .reel{background:rgba(255,226,130,.45)}
body[data-m=crown] .machine{filter:drop-shadow(0 16px 20px rgba(70,45,0,.5))}
/* SKULL: engraving on parchment */
body[data-w=skull]{background:radial-gradient(130% 100% at 50% 40%,#ecdcb0 35%,#cdb27a 75%,#9c7a42),#d9c294;--cream:#1d1a3a;--ink:#ecdcb0;--mut:#4a4668;--on:#ecdcb0;--card:rgba(236,220,178,.82);--bd:#2b2a6b;--navbg:rgba(236,220,178,.92);--lite:#d9a441;--gl:217,164,65}body[data-m=skull] .machine{--cream:#1d1a3a;--ink:#ecdcb0;--mut:#4a4668;--on:#ecdcb0;--card:rgba(236,220,178,.82);--bd:#2b2a6b;--navbg:rgba(236,220,178,.92);--lite:#d9a441}body[data-f=skull] :is(nav,.btn,.tile,.card,.item,.player,.slot,.social a,input,textarea,.inkbox){--cream:#1d1a3a;--ink:#ecdcb0;--mut:#4a4668;--on:#ecdcb0;--card:rgba(236,220,178,.82);--bd:#2b2a6b;--navbg:rgba(236,220,178,.92);--lite:#d9a441;--gl:217,164,65}
body[data-w=skull]::before,body[data-w=dagger]::before{background:radial-gradient(120% 90% at 50% 40%,transparent 50%,rgba(60,35,10,.45))}
body[data-m=skull] :is(h2,.mast,.tag,h3:not(*)),body[data-f=skull] :is(h2:not(*),.mast:not(*),.tag:not(*),h3){text-shadow:none;font-weight:900}
body[data-w=skull] .d{opacity:.16}
body[data-f=skull] :is(.card,.tile,.item,.player){outline:1px solid rgba(43,42,107,.5);outline-offset:-7px}
/* BOLT: embossed chrome foil */
body[data-w=bolt]{background:linear-gradient(rgba(214,220,230,.38),rgba(214,220,230,.38)),url(assets/foil-tile.jpg) 0 0/640px auto,#c9d0d8;--cream:#141a22;--mut:#3b4652;--card:rgba(205,212,222,.62);--bd:#6b7682;--navbg:rgba(205,212,222,.8);--bs:inset 0 1px 0 #fff,inset 0 -2px 5px rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.35);--lite:#7fd0ff;--gl:120,190,255}body[data-m=bolt] .machine{--cream:#141a22;--mut:#3b4652;--card:rgba(205,212,222,.62);--bd:#6b7682;--navbg:rgba(205,212,222,.8);--bs:inset 0 1px 0 #fff,inset 0 -2px 5px rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.35);--lite:#7fd0ff}body[data-f=bolt] :is(nav,.btn,.tile,.card,.item,.player,.slot,.social a,input,textarea,.inkbox){--cream:#141a22;--mut:#3b4652;--card:rgba(205,212,222,.62);--bd:#6b7682;--navbg:rgba(205,212,222,.8);--bs:inset 0 1px 0 #fff,inset 0 -2px 5px rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.35);--lite:#7fd0ff;--gl:120,190,255}
body[data-w=bolt]::before{background:linear-gradient(115deg,rgba(255,0,150,.16),rgba(0,255,220,.16),rgba(255,230,0,.16),rgba(120,80,255,.16)) 0 0/300% 300%;animation:hs 10s ease-in-out infinite alternate}
@keyframes hs{to{background-position:100% 100%}}
body[data-m=bolt] :is(h2,.mast){background:linear-gradient(180deg,#fff,#aab4c0 45%,#f4f7fa 55%,#707c8a);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
body[data-m=bolt] :is(.machine>img,.lever img){filter:grayscale(1) contrast(1.15) brightness(1.5)}
body[data-m=bolt] .reel{background:linear-gradient(#f2f5f8,#aab4c0)}
/* UFO: classified file */
body[data-w=ufo]{--cream:#b9ffc0;--card:rgba(0,22,8,.82);--bd:#4dff6a;--navbg:rgba(0,20,6,.88);--lite:#7cff6b;--gl:124,255,107}body[data-m=ufo] .machine{--cream:#b9ffc0;--card:rgba(0,22,8,.82);--bd:#4dff6a;--navbg:rgba(0,20,6,.88);--lite:#7cff6b}body[data-f=ufo] :is(nav,.btn,.tile,.card,.item,.player,.slot,.social a,input,textarea,.inkbox){--cream:#b9ffc0;--card:rgba(0,22,8,.82);--bd:#4dff6a;--navbg:rgba(0,20,6,.88);--lite:#7cff6b;--gl:124,255,107}
body[data-w=ufo]::before{background:linear-gradient(transparent,rgba(124,255,107,.14),transparent) 0 0/100% 14vh no-repeat;animation:scan 5s linear infinite}
@keyframes scan{from{background-position:0 -20vh}to{background-position:0 110vh}}
/* DAGGER: ransom + newsprint */
body[data-w=dagger]{--cream:#111;--ink:#efe7d2;--mut:#4a4333;--on:#efe7d2;--card:#f3ecd9;--bd:#111;--navbg:#f3ecd9;--lite:#c4121a;--gl:196,18,26}body[data-m=dagger] .machine{--cream:#111;--ink:#efe7d2;--mut:#4a4333;--on:#efe7d2;--card:#f3ecd9;--bd:#111;--navbg:#f3ecd9;--lite:#c4121a}body[data-f=dagger] :is(nav,.btn,.tile,.card,.item,.player,.slot,.social a,input,textarea,.inkbox){--cream:#111;--ink:#efe7d2;--mut:#4a4333;--on:#efe7d2;--card:#f3ecd9;--bd:#111;--navbg:#f3ecd9;--lite:#c4121a;--gl:196,18,26}
body[data-f=dagger] :is(.card,.tile,.item,.player){clip-path:polygon(0 2%,6% 0,14% 2%,26% 0,40% 2%,55% 0,70% 2%,85% 0,100% 2%,100% 98%,90% 100%,72% 98%,55% 100%,38% 98%,20% 100%,8% 98%,0 100%)}
/* DAISY: linocut garden */
body[data-w=daisy]{--cream:#f6e9d4;--card:rgba(226,105,77,.2);--bd:rgba(240,217,181,.55);--navbg:rgba(60,26,16,.88);--lite:#f08a5d;--gl:240,138,93}body[data-m=daisy] .machine{--cream:#f6e9d4;--card:rgba(226,105,77,.2);--bd:rgba(240,217,181,.55);--navbg:rgba(60,26,16,.88);--lite:#f08a5d}body[data-f=daisy] :is(nav,.btn,.tile,.card,.item,.player,.slot,.social a,input,textarea,.inkbox){--cream:#f6e9d4;--card:rgba(226,105,77,.2);--bd:rgba(240,217,181,.55);--navbg:rgba(60,26,16,.88);--lite:#f08a5d;--gl:240,138,93}
/* DICE: casino felt */
body[data-w=dice]{--cream:#f5efe0;--card:rgba(4,40,22,.86);--bd:#d4af37;--navbg:rgba(4,40,22,.92);--lite:#ffd24a;--gl:212,175,55}body[data-m=dice] .machine{--cream:#f5efe0;--card:rgba(4,40,22,.86);--bd:#d4af37;--navbg:rgba(4,40,22,.92);--lite:#ffd24a}body[data-f=dice] :is(nav,.btn,.tile,.card,.item,.player,.slot,.social a,input,textarea,.inkbox){--cream:#f5efe0;--card:rgba(4,40,22,.86);--bd:#d4af37;--navbg:rgba(4,40,22,.92);--lite:#ffd24a;--gl:212,175,55}
body[data-m=dice] :is(h2,.mast),body[data-m=seven] :is(h2,.mast){background:linear-gradient(#fff3b0,#d4af37 55%,#8a6a10);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 3px 0 rgba(0,0,0,.5))}
/* LUCKY 7: marquee bulbs */
body[data-w=seven]{--cream:#fff4d6;--card:rgba(30,4,4,.9);--bd:#ffd24a;--navbg:rgba(30,4,4,.92);--lite:#ffd24a;--gl:255,210,74}body[data-m=seven] .machine{--cream:#fff4d6;--card:rgba(30,4,4,.9);--bd:#ffd24a;--navbg:rgba(30,4,4,.92);--lite:#ffd24a}body[data-f=seven] :is(nav,.btn,.tile,.card,.item,.player,.slot,.social a,input,textarea,.inkbox){--cream:#fff4d6;--card:rgba(30,4,4,.9);--bd:#ffd24a;--navbg:rgba(30,4,4,.92);--lite:#ffd24a;--gl:255,210,74}
body[data-f=seven] :is(.card,.tile,.item,.player),body[data-f=seven] nav ul{border:5px dotted var(--bd);animation:bulb 1s steps(1) infinite}
@keyframes bulb{50%{border-color:#ff2d2d}}
/* LOGO x3: stitched embroidery on woven cloth */
.wv{position:absolute;inset:0;pointer-events:none;display:none;-webkit-mask:url(assets/machine.webp) center/100% 100% no-repeat;mask:url(assets/machine.webp) center/100% 100% no-repeat}
.wv.a{background:#14505a;mix-blend-mode:lighten}
.wv.b{background:repeating-linear-gradient(45deg,rgba(255,255,255,.24) 0 1px,transparent 1px 3px),repeating-linear-gradient(-45deg,rgba(0,0,0,.4) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
body[data-m=logo] .wv{display:block}
body[data-w=logo]{background:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px),radial-gradient(120% 90% at 50% 30%,#2a2a2a,#111);
 --mag:#d9468f;--mr:217,70,143;--teal:#3b8f9a;--tr:59,143,154;--org:#f08a4a;--or:240,138,74;--card:#1c1c1c;--bd:#2d2d2d;--navbg:#1b1b1b;--lite:#c040e8;--gl:192,64,232;--bs:0 8px 18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07)}body[data-m=logo] .machine{--mag:#d9468f;--mr:217,70,143;--teal:#3b8f9a;--tr:59,143,154;--org:#f08a4a;--or:240,138,74;--card:#1c1c1c;--bd:#2d2d2d;--navbg:#1b1b1b;--lite:#c040e8;--bs:0 8px 18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07)}body[data-f=logo] :is(nav,.btn,.tile,.card,.item,.player,.slot,.social a,input,textarea,.inkbox){--mag:#d9468f;--mr:217,70,143;--teal:#3b8f9a;--tr:59,143,154;--org:#f08a4a;--or:240,138,74;--card:#1c1c1c;--bd:#2d2d2d;--navbg:#1b1b1b;--lite:#c040e8;--gl:192,64,232;--bs:0 8px 18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07)}
body[data-w=logo]::before{inset:8px;z-index:40;border:6px solid #b3195f;border-radius:20px;background:none;box-shadow:inset 0 0 0 2px rgba(255,160,200,.25),0 0 0 2px rgba(0,0,0,.5);outline:2px dashed rgba(255,190,220,.55);outline-offset:-14px}
body[data-m=logo] :is(h2,.mast){background:repeating-linear-gradient(60deg,rgba(255,255,255,.2) 0 1px,transparent 1px 3px),linear-gradient(#e24c94,#a8175c);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 1px 0 rgba(255,170,210,.55)) drop-shadow(0 3px 2px rgba(0,0,0,.8))}
body[data-m=logo] :is(.tag,.result,.lede:not(*)),body[data-w=logo] :is(.tag:not(*),.result:not(*),.lede){color:#e0689e;font-weight:700;text-shadow:0 1px 0 rgba(255,255,255,.12),0 -1px 0 rgba(0,0,0,.7)}
body[data-f=logo] :is(.card,.tile,.item,.player),body[data-f=logo] nav ul{outline:2px dashed rgba(240,138,74,.5);outline-offset:-7px}
body[data-f=logo] .btn{background:#1d1d1d;color:#e0689e;border:2px solid #2f2f2f;box-shadow:0 4px 0 #0a0a0a,0 8px 14px rgba(0,0,0,.6);outline:2px dashed rgba(224,104,158,.5);outline-offset:-6px;text-transform:uppercase;letter-spacing:.05em}
body[data-f=logo] .btn.pri{color:#f08a4a}
body[data-f=logo] .btn:hover{box-shadow:0 2px 0 #0a0a0a,0 4px 10px rgba(0,0,0,.6);transform:translateY(2px)}
body[data-m=logo] .reel{color:#a3185f;background:linear-gradient(#f6eee1,#d9cdb8)}
body[data-w=logo] .vp{filter:drop-shadow(0 1px 1px rgba(0,0,0,.7))}
/* stitched alphabet */
.gl{display:inline-block;background:url(assets/glyphs.webp) no-repeat;margin:0 .03em}
.gw{display:inline-block;white-space:nowrap}
.gf{font:700 .8em/1 "Young Serif",Georgia,serif;font-style:normal}
body[data-w=logo]{--bf:"Young Serif"}body[data-m=logo] .machine{--bf:"Young Serif"}body[data-f=logo] :is(nav,.btn,.tile,.card,.item,.player,.slot,.social a,input,textarea,.inkbox){--bf:"Young Serif"}
body[data-w=logo] :is(p,label){color:#d9759f;text-shadow:0 1px 0 rgba(255,255,255,.1),0 -1px 0 rgba(0,0,0,.7)}
body[data-f=logo] nav a{color:#e0689e}
body[data-f=logo] nav a.on{background:#2a2a2a;box-shadow:inset 0 0 0 2px rgba(240,138,74,.6)}
body[data-f=logo] .btn.pri .gl{filter:hue-rotate(55deg) saturate(1.2)}
/* stitched machine (cut from your mockup) */
.r1{left:18.8%}
.r2{left:36.7%}
.r3{left:54.7%}
.m2,.lv2{display:none}
body[data-m=logo] .machine{aspect-ratio:970/820}
body[data-m=logo] .machine>img:not(.m2),body[data-m=logo] .lever img:not(.lv2){display:none}
body[data-m=logo] .m2,body[data-m=logo] .lv2{display:block;width:100%;height:100%}
body[data-m=logo] .wv{display:none}
body[data-m=logo] .reel{top:39.6%;height:20.7%;width:14.5%}
body[data-m=logo] .r1{left:23.4%}
body[data-m=logo] .r2{left:39.9%}
body[data-m=logo] .r3{left:57.2%}
body[data-m=logo] .lever{left:84%;top:33.5%;width:12.9%;height:22.3%;transform-origin:4% 93%}
body[data-m=logo] .spinbtn{left:59%;top:76%;width:16%}
body[data-m=logo] .bulbs{inset:auto;left:4.96%;top:1.64%;width:95.5%;height:99.6%}
/* v8: locked layout, separate stitched flourishes */
html,body{overflow-x:hidden;overscroll-behavior-x:none;max-width:100%}
body{touch-action:pan-y pinch-zoom}
.view{overflow-x:clip}
nav a{display:flex;align-items:center;height:2.5rem;padding-top:0;padding-bottom:0}
.hero{padding-top:0}
.flr{display:none;position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.flr i{position:absolute;top:0;bottom:0;width:clamp(120px,30vw,330px);background-repeat:repeat-y;background-size:100% auto;background-position:0 var(--sy,0);opacity:.95;animation:sway 8s ease-in-out infinite alternate}
.flr .l{left:-6px;background-image:url(assets/flr-l.webp)}
.flr .r{right:-6px;background-image:url(assets/flr-r.webp);animation-direction:alternate-reverse}
@keyframes sway{to{transform:translateX(7px)}}
body[data-w=logo] .flr{display:block}
body[data-w=logo] .vines{display:none}
.machine{aspect-ratio:1255/1050;animation:none}
.machine.spinning{animation:rumble .12s linear infinite}
.r1{left:20.64%}
.r2{left:37.45%}
.r3{left:54.34%}
.reel{top:37.9%;height:21.14%;width:14.66%}
.lever{left:79.44%;top:30.95%;width:16.33%;height:20.67%;transform-origin:14.6% 98%}
.spinbtn{left:56.33%;top:74.76%;width:15.14%}
body[data-m=logo] .r1{left:26.02%}
body[data-m=logo] .r2{left:42.35%}
body[data-m=logo] .r3{left:59.49%}
body[data-m=logo] .reel{top:38.17%;height:21.22%;width:15.31%}
body[data-m=logo] .lever{left:86.22%;top:32.32%;width:12.76%;height:22.32%;transform-origin:4.0% 92.9%}
body[data-m=logo] .spinbtn{left:61.73%;top:73.78%;width:15.31%}
body[data-m=logo] .bulbs{inset:auto;left:5.04%;top:0.41%;width:100.52%;height:99.65%}
body[data-m=logo] .machine{aspect-ratio:1255/1050}
/* fix: only one machine and one lever image shows at a time */
.machine>img.m2,.lever img.lv2{display:none!important}
body[data-m=logo] .machine>img:not(.m2),body[data-m=logo] .lever img:not(.lv2){display:none!important}
body[data-m=logo] .machine>img.m2,body[data-m=logo] .lever img.lv2{display:block!important;width:100%;height:100%}
.machine>img.m2{position:absolute;inset:0}
/* v9: body-centred machines */
.machine{aspect-ratio:1300/1050}
.r1{left:26.31%}
.r2{left:42.54%}
.r3{left:58.85%}
.reel{top:37.9%;height:21.14%;width:14.15%}
.lever{left:83.08%;top:30.95%;width:15.77%;height:20.67%}
.spinbtn{left:60.77%;top:74.76%;width:14.62%}
body[data-m=logo] .machine{aspect-ratio:1300/1050}
body[data-m=logo] .r1{left:26.31%}
body[data-m=logo] .r2{left:42.07%}
body[data-m=logo] .r3{left:58.62%}
body[data-m=logo] .reel{top:38.17%;height:21.22%;width:14.78%}
body[data-m=logo] .lever{left:84.43%;top:32.32%;width:12.32%;height:22.32%}
body[data-m=logo] .spinbtn{left:60.79%;top:73.78%;width:14.78%}
body[data-m=logo] .bulbs{inset:auto;left:-0.37%;top:0.41%;width:100.53%;height:99.65%}
body[data-w=logo]::before{outline:none;box-shadow:none}
body[data-m=logo] .lever{left:84.43%;top:31.46%;width:14.78%;height:23.17%;transform-origin:3.3% 93.2%}
/* TRIPLE CROWN: thorny vines, crown on the machine, glitch crown noise */
.th{display:none}
.mcrown{display:none}
.ctex{display:none}
body[data-w=crown] .th{display:block}
body[data-w=crown] .vines .fl:not(.th){display:none}
body[data-w=crown] .vp{stroke:#0b0a06!important;stroke-width:6px!important}
body[data-w=crown] .decor{display:none}
body[data-m=crown] .reel{background:linear-gradient(#f4dc8c,#d6ae46)}
body[data-m=crown] .mcrown{display:block;position:absolute;left:51%;top:-13%;width:40%;transform:rotate(13deg);z-index:3;pointer-events:none;filter:drop-shadow(0 5px 6px rgba(70,45,0,.45))}
body[data-w=crown] .ctex{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;background:url(assets/crown-tex.webp) 0 0/560px;opacity:.1;animation:cg 7s steps(1) infinite}
body[data-w=crown] .ctex::after{content:"";position:absolute;inset:0;background:inherit;clip-path:inset(30% 0 62% 0);transform:translateX(16px);animation:cg2 5s steps(1) infinite}
@keyframes cg{0%,89%,100%{background-position:0 0}90%{background-position:23px -9px}92%{background-position:-17px 12px}94%{background-position:40px 4px}96%{background-position:0 0}}
@keyframes cg2{0%,70%,100%{clip-path:inset(30% 0 62% 0);transform:translateX(16px)}75%{clip-path:inset(62% 0 25% 0);transform:translateX(-24px)}85%{clip-path:inset(8% 0 84% 0);transform:translateX(30px)}}
/* crown fixes: crown keeps its shape, machine hides the vines behind it, softer thorny vines with shadow */
.mback{display:none}
body[data-m=crown] .mback{display:block;position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .86  0 0 0 0 .4  0 0 0 3.2 -1.35'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .55  0 0 0 0 .38  0 0 0 0 .05  0 0 0 2.4 -.9'/%3E%3C/filter%3E%3Crect width='256' height='256' fill='%23c99a24'/%3E%3Crect width='256' height='256' filter='url%28%23b%29'/%3E%3Crect width='256' height='256' filter='url%28%23a%29'/%3E%3C/svg%3E"),#b8891c;-webkit-mask:url(assets/machine.webp) center/100% 100% no-repeat;mask:url(assets/machine.webp) center/100% 100% no-repeat}
body[data-m=crown] .machine>img.mcrown{height:auto;filter:drop-shadow(0 5px 6px rgba(70,45,0,.45))}
body[data-w=crown] .vp{stroke-width:3.5px!important}
body[data-w=crown] .vines{filter:drop-shadow(3px 6px 4px rgba(70,45,0,.5))}
/* fix: the crown picture only exists in the crown theme (it was showing, stretched, in every theme) */
.machine>img.mcrown{display:none!important}
body[data-m=crown] .machine>img.mcrown{display:block!important;position:absolute;left:51%;top:-13%;width:40%;height:auto}
/* ---- DAY-OF-THE-DEAD STITCHED HOME ---- */
.bunting,.orn,.tile .sk{display:none}
body[data-w=logo] .bunting{display:block;height:74px;margin:0 -1rem .6rem;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22360%22 height=%2274%22 viewBox=%220 0 360 74%22%3E%3Cpath d=%22M0 6Q180 34 360 6%22 fill=%22none%22 stroke=%22%23b98a6a%22 stroke-width=%222.4%22/%3E%3Cpath d=%22M12 11.0h48v34l-24-9-24 9z%22 fill=%22%23e97a1f%22/%3E%3Cg fill=%22%23161616%22%3E%3Ccircle cx=%2225%22 cy=%2220.0%22 r=%223.2%22/%3E%3Ccircle cx=%2247%22 cy=%2220.0%22 r=%223.2%22/%3E%3Ccircle cx=%2236%22 cy=%2225.0%22 r=%223.2%22/%3E%3Cpath d=%22M36 33.0l3 4-3 4-3-4z%22/%3E%3C/g%3E%3Cpath d=%22M84 17.8h48v34l-24-9-24 9z%22 fill=%22%237b2f9e%22/%3E%3Cg fill=%22%23161616%22%3E%3Ccircle cx=%2297%22 cy=%2226.8%22 r=%223.2%22/%3E%3Ccircle cx=%22119%22 cy=%2226.8%22 r=%223.2%22/%3E%3Ccircle cx=%22108%22 cy=%2231.8%22 r=%223.2%22/%3E%3Cpath d=%22M108 39.8l3 4-3 4-3-4z%22/%3E%3C/g%3E%3Cpath d=%22M156 20.0h48v34l-24-9-24 9z%22 fill=%22%232b9aa6%22/%3E%3Cg fill=%22%23161616%22%3E%3Ccircle cx=%22169%22 cy=%2229.0%22 r=%223.2%22/%3E%3Ccircle cx=%22191%22 cy=%2229.0%22 r=%223.2%22/%3E%3Ccircle cx=%22180%22 cy=%2234.0%22 r=%223.2%22/%3E%3Cpath d=%22M180 42.0l3 4-3 4-3-4z%22/%3E%3C/g%3E%3Cpath d=%22M228 17.8h48v34l-24-9-24 9z%22 fill=%22%23c2306f%22/%3E%3Cg fill=%22%23161616%22%3E%3Ccircle cx=%22241%22 cy=%2226.8%22 r=%223.2%22/%3E%3Ccircle cx=%22263%22 cy=%2226.8%22 r=%223.2%22/%3E%3Ccircle cx=%22252%22 cy=%2231.8%22 r=%223.2%22/%3E%3Cpath d=%22M252 39.8l3 4-3 4-3-4z%22/%3E%3C/g%3E%3Cpath d=%22M300 11.0h48v34l-24-9-24 9z%22 fill=%22%23e97a1f%22/%3E%3Cg fill=%22%23161616%22%3E%3Ccircle cx=%22313%22 cy=%2220.0%22 r=%223.2%22/%3E%3Ccircle cx=%22335%22 cy=%2220.0%22 r=%223.2%22/%3E%3Ccircle cx=%22324%22 cy=%2225.0%22 r=%223.2%22/%3E%3Cpath d=%22M324 33.0l3 4-3 4-3-4z%22/%3E%3C/g%3E%3C/svg%3E") 0 0/360px 74px repeat-x;animation:swayb 7s ease-in-out infinite alternate}
@keyframes swayb{to{background-position:16px 0}}
body[data-m=logo] .orn{display:block;width:min(340px,86%);margin:1.6rem auto -.4rem;color:#d9468f}
body[data-m=logo] .orn path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-dasharray:7 5}
body[data-f=logo] .tile{border:3px solid #a9583f;border-radius:30px;min-height:176px;padding:1.9rem 1.7rem 1.4rem;box-shadow:inset 0 0 0 6px #1a1a1a,inset 0 0 0 8px rgba(169,88,63,.7),0 10px 22px rgba(0,0,0,.55);outline:2px dashed rgba(240,138,74,.55);outline-offset:-15px;
 background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22 viewBox=%220 0 40 40%22%3E%3Cg fill=%22%23e8782a%22%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%280 20 20%29%22/%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%2845 20 20%29%22/%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%2890 20 20%29%22/%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%28135 20 20%29%22/%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%28180 20 20%29%22/%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%28225 20 20%29%22/%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%28270 20 20%29%22/%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%28315 20 20%29%22/%3E%3C/g%3E%3Ccircle cx=%2220%22 cy=%2220%22 r=%226%22 fill=%22%23c2306f%22/%3E%3Ccircle cx=%2220%22 cy=%2220%22 r=%222.4%22 fill=%22%232a1020%22/%3E%3C/svg%3E") left 9px top 9px/34px no-repeat,url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22 viewBox=%220 0 40 40%22%3E%3Cg fill=%22%23e8782a%22%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%280 20 20%29%22/%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%2845 20 20%29%22/%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%2890 20 20%29%22/%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%28135 20 20%29%22/%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%28180 20 20%29%22/%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%28225 20 20%29%22/%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%28270 20 20%29%22/%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%28315 20 20%29%22/%3E%3C/g%3E%3Ccircle cx=%2220%22 cy=%2220%22 r=%226%22 fill=%22%23c2306f%22/%3E%3Ccircle cx=%2220%22 cy=%2220%22 r=%222.4%22 fill=%22%232a1020%22/%3E%3C/svg%3E") right 9px top 9px/34px no-repeat,url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22 viewBox=%220 0 40 40%22%3E%3Cg fill=%22%23e8782a%22%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%280 20 20%29%22/%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%2845 20 20%29%22/%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%2890 20 20%29%22/%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%28135 20 20%29%22/%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%28180 20 20%29%22/%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%28225 20 20%29%22/%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%28270 20 20%29%22/%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%28315 20 20%29%22/%3E%3C/g%3E%3Ccircle cx=%2220%22 cy=%2220%22 r=%226%22 fill=%22%23c2306f%22/%3E%3Ccircle cx=%2220%22 cy=%2220%22 r=%222.4%22 fill=%22%232a1020%22/%3E%3C/svg%3E") left 9px bottom 9px/34px no-repeat,url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22 viewBox=%220 0 40 40%22%3E%3Cg fill=%22%23e8782a%22%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%280 20 20%29%22/%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%2845 20 20%29%22/%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%2890 20 20%29%22/%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%28135 20 20%29%22/%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%28180 20 20%29%22/%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%28225 20 20%29%22/%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%28270 20 20%29%22/%3E%3Cellipse cx=%2220%22 cy=%228%22 rx=%224.2%22 ry=%228%22 transform=%22rotate%28315 20 20%29%22/%3E%3C/g%3E%3Ccircle cx=%2220%22 cy=%2220%22 r=%226%22 fill=%22%23c2306f%22/%3E%3Ccircle cx=%2220%22 cy=%2220%22 r=%222.4%22 fill=%22%232a1020%22/%3E%3C/svg%3E") right 9px bottom 9px/34px no-repeat,url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22 viewBox=%220 0 48 48%22%3E%3Cpath fill=%22%23cf9272%22 d=%22M24 3C13 3 7 11 7 21c0 6 3 9 6 11v9h22v-9c3-2 6-5 6-11C41 11 35 3 24 3z%22/%3E%3Cg fill=%22%231a1a1a%22%3E%3Ccircle cx=%2217%22 cy=%2222%22 r=%225.5%22/%3E%3Ccircle cx=%2231%22 cy=%2222%22 r=%225.5%22/%3E%3Cpath d=%22M24 28l-3 6h6z%22/%3E%3C/g%3E%3Cpath d=%22M18 41v-6M24 41v-5M30 41v-6%22 stroke=%22%231a1a1a%22 stroke-width=%221.6%22/%3E%3C/svg%3E") center 6px/38px no-repeat,#1b1b1b}
body[data-f=logo] .tile>svg:not(.sk){opacity:1;color:#2a9a9a;width:128px;height:128px;right:-4px;top:-16px}
body[data-f=logo] .tile .sk{display:block;position:absolute;right:30px;top:28px;width:36px;height:36px;color:#f0dcc4;opacity:1;transform:none}
body[data-f=logo] .tile:hover .sk{transform:none}
body[data-f=logo] .btn{background:linear-gradient(#6b4a3a,#3a2a22);border:2px solid #2a1c16;outline:2px dashed rgba(240,138,74,.6)}
body[data-f=logo] nav a.on{background:#3d2380;box-shadow:inset 0 0 0 2px rgba(240,138,74,.6)}
nav .bolt .b2{display:none}
body[data-f=logo] nav .bolt .b1{display:none}
body[data-f=logo] nav .bolt .b2{display:block;width:24px;height:24px;color:#efd6b8;fill:currentColor}
body[data-w=logo]::before{outline:2px solid rgba(217,70,143,.7);outline-offset:-15px}
body[data-w=logo] .d{color:#e6cfb4!important;opacity:.7}
/* ---- art cut straight from the mockups ---- */
body[data-w=logo] .bunting{aspect-ratio:560/96;height:auto;margin:0 -.4rem .5rem;background:url(assets/bunting.webp) center/100% 100% no-repeat;animation:none}
body[data-m=logo] .orn{display:none!important}
body[data-f=logo] .tile{aspect-ratio:550/255;min-height:0;padding:0 9% 9% 21%;border:0;border-radius:0;outline:none;box-shadow:none;overflow:visible;background:url(assets/tile-frame.webp) 0 0/100% 100% no-repeat}
body[data-f=logo] .tile>svg{display:none!important}
body[data-f=logo] .tile::after{right:11%;bottom:15%}
body[data-w=logo] .decor{display:none}
.flr .l{width:clamp(70px,21vw,210px)}
.flr .r{width:clamp(48px,14vw,140px)}
/* crown v3: new gold crown on the machine, vines pushed to the back and faded */
body[data-m=crown] .machine>img.mcrown{left:35%;top:-21%;width:30%;height:auto;transform:rotate(-5deg);filter:drop-shadow(0 6px 7px rgba(70,45,0,.5))}
body[data-w=crown] .vines{z-index:-3;opacity:.38}
/* TRIPLE CROWN: engraved machine skin with thorn crown + sceptre handle */
.machine>img.m3,.lever img.lv3{display:none!important}
.machine>img.m3{position:absolute;inset:0}
body[data-m=crown] .machine>img:not(.m3),body[data-m=crown] .lever img:not(.lv3){display:none!important}
body[data-m=crown] .machine>img.m3,body[data-m=crown] .lever img.lv3{display:block!important;width:100%;height:100%;filter:none}
body[data-m=crown] .r1{left:30.92%}
body[data-m=crown] .r2{left:44.0%}
body[data-m=crown] .r3{left:57.54%}
body[data-m=crown] .reel{top:48.38%;height:18.29%;width:12.46%}
body[data-m=crown] .lever{left:77.54%;top:28.76%;width:18.92%;height:37.33%;transform-origin:4.9% 96.9%}
body[data-m=crown] .lever.pull{transform:rotate(78deg)}
body[data-m=crown] .spinbtn{left:59.38%;top:78.86%;width:11.69%}
body[data-m=crown] .bulbs{inset:auto;left:14.88%;top:20.22%;width:79.44%;height:77.82%}
/* stitched home: centred frames, soft side art, title ornaments from the mockup */
body[data-f=logo] .tile{aspect-ratio:600/255;padding:0 9% 15% 18.5%}
body[data-f=logo] .tile::after{right:15%;bottom:17%}
.flr .l{width:clamp(90px,26vw,260px)}
.flr .r{width:clamp(70px,20vw,200px)}
.ttl{position:relative;margin-top:2.2rem}
.ta{display:none}
body[data-m=logo] .ttl{padding-top:clamp(2.2rem,11vw,3.4rem)}
body[data-m=logo] .ta{display:block;position:absolute;pointer-events:none}
body[data-m=logo] .ta.t{left:2%;top:0;width:96%;height:auto}
body[data-m=logo] .ta.l{left:-2%;top:22%;width:17%;height:auto}
body[data-m=logo] .ta.r{right:-2%;top:14%;width:19%;height:auto}
/* crown skin v2: scaled to match the other machines, clean sceptre, no backing patch */
.machine>img.m3{left:-7.5%;top:-15%;width:115%;height:115%;inset:auto}
body[data-m=crown] .mback{display:none}
.machine>img.m3{left:-7.5%;top:-15%;width:115%;height:115%}
body[data-m=crown] .r1{left:28.06%}
body[data-m=crown] .r2{left:43.1%}
body[data-m=crown] .r3{left:58.67%}
body[data-m=crown] .reel{top:40.64%;height:21.03%;width:14.33%}
body[data-m=crown] .lever{left:82.38%;top:18.95%;width:21.05%;height:37.68%;transform-origin:7.6% 91.9%}
body[data-m=crown] .spinbtn{left:60.79%;top:75.69%;width:13.45%}
body[data-m=crown] .bulbs{inset:auto;left:9.61%;top:8.25%;width:91.37%;height:89.49%}
/* crown skin: the art really is drawn 115% size (a higher-priority rule had been forcing 100%) */
body[data-m=crown] .machine>img.m3{left:-7.5%;top:-15%;width:115%!important;height:115%!important}
/* social icons stay visible on every theme (they were dark-on-dark on the gold page) */
body[data-theme] .social a{background:var(--navbg,rgba(21,19,15,.8));border:2px solid var(--bd,rgba(246,236,223,.3));color:var(--cream)}
body[data-theme] .social a:hover{background:var(--mag);border-color:var(--mag);color:var(--on,#fff)}
body[data-f=crown] .social a{background:rgba(242,193,78,.75);border-color:#0b0a06;color:#0b0a06;box-shadow:0 4px 10px rgba(70,45,0,.35)}
body[data-f=crown] .social a:hover{background:#0b0a06;color:#f2c14e}
/* crown bulbs: ring now matches the window (constants taken from the script) */
body[data-m=crown] .bulbs{inset:auto;left:3.57%;top:8.25%;width:94.65%;height:89.49%}
/* crown: marquee lights re-fitted around the window frame */
body[data-m=crown] .bulbs{inset:auto;left:3.57%;top:8.25%;width:94.65%;height:89.49%}
/* TRIPLE DAISY: botanical cream paper skin */
body[data-w=daisy]{--cream:#4a3426;--ink:#f6efe1;--mut:#7a6552;--on:#fff;--card:rgba(255,250,240,.88);--bd:#c98a62;--navbg:rgba(250,238,220,.94);--lite:#ffe9a8;--gl:233,196,120}body[data-m=daisy] .machine{--cream:#4a3426;--ink:#f6efe1;--mut:#7a6552;--on:#fff;--card:rgba(255,250,240,.88);--bd:#c98a62;--navbg:rgba(250,238,220,.94);--lite:#ffe9a8}body[data-f=daisy] :is(nav,.btn,.tile,.card,.item,.player,.slot,.social a,input,textarea,.inkbox){--cream:#4a3426;--ink:#f6efe1;--mut:#7a6552;--on:#fff;--card:rgba(255,250,240,.88);--bd:#c98a62;--navbg:rgba(250,238,220,.94);--lite:#ffe9a8;--gl:233,196,120}
body[data-w=daisy]::before{background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(150,110,70,.22))}
body[data-w=daisy] .vines{display:none}
body[data-w=daisy] .flr{display:block}
.flr .l.dz{background-image:url(assets/flr-daisy-l.webp)}
body[data-w=daisy] .flr .l{background-image:url(assets/flr-daisy-l.webp)}
body[data-w=daisy] .flr .r{background-image:url(assets/flr-daisy-r.webp)}
body[data-f=daisy] .btn.pri{background:#c9795a;border-color:#c9795a;color:#fff}
body[data-f=daisy] .btn.sec{color:#4a3426;border-color:#c98a62;background:rgba(255,250,240,.6)}
body[data-w=daisy] .d{color:#c9a24a!important;opacity:.85}
body[data-m=daisy] .reel{color:#8a5a3a;background:linear-gradient(#fffaf0,#efe2cf)}
.gl.b{background-image:url(assets/glyphs-bot.webp)}
.machine>img.m4,.lever img.lv4{display:none!important}
.machine>img.m4{position:absolute}
body[data-m=daisy] .machine>img:not(.m4),body[data-m=daisy] .lever img:not(.lv4){display:none!important}
body[data-m=daisy] .machine>img.m4,body[data-m=daisy] .lever img.lv4{display:block!important;filter:none}
body[data-m=daisy] .machine>img.m4{left:-6.0%;top:-12.0%;width:112.0%!important;height:112.0%!important}
body[data-m=daisy] .r1{left:25.59%}
body[data-m=daisy] .r2{left:42.05%}
body[data-m=daisy] .r3{left:58.7%}
body[data-m=daisy] .reel{top:36.5%;height:23.43%;width:15.51%}
body[data-m=daisy] .lever{left:83.86%;top:9.79%;width:23.08%;height:42.18%;transform-origin:9.0% 97.2%}
body[data-m=daisy] .lever.pull{transform:rotate(80deg)}
body[data-m=daisy] .spinbtn{left:63.05%;top:73.52%;width:16.08%}
body[data-m=daisy] .bulbs{inset:auto;left:-2.09%;top:-1.67%;width:104.97%;height:103.00%}
/* botanical letters: dark rim + soft shadow so they read on cream paper */
body[data-m=daisy] :is(h1.mast,h2,h3:not(*),.tag,.result,.lede:not(*),nav a:not(*)),body[data-f=daisy] :is(h1.mast:not(*),h2:not(*),h3,.tag:not(*),.result:not(*),.lede:not(*),nav a),body[data-w=daisy] :is(h1.mast:not(*),h2:not(*),h3:not(*),.tag:not(*),.result:not(*),.lede,nav a:not(*)){filter:drop-shadow(.7px 0 0 #4a3426) drop-shadow(-.7px 0 0 #4a3426) drop-shadow(0 .7px 0 #4a3426) drop-shadow(0 -.7px 0 #4a3426) drop-shadow(0 2px 3px rgba(60,40,20,.4))}
body[data-f=daisy] nav a.on{background:rgba(201,121,90,.28)}
/* ===== v10: stability fixes ===== */
/* bigger machine on phones, always centred on the page */
.machine{width:min(640px,calc(100vw - 2rem));margin:1rem 0 1.5rem 50%;translate:-50% 0}
/* the bunting space is kept on every theme, so the machine never jumps up or down when the theme changes */
.hero>.bunting:first-child{display:block;visibility:hidden;aspect-ratio:560/96;height:auto;margin:0 -.4rem .5rem}
body[data-w=logo] .hero>.bunting:first-child{visibility:visible}
/* Lucky 7: dotted lights drawn as an outline so the nav keeps the same height */
body[data-f=seven] nav ul{border:1.5px solid var(--bd);outline:4px dotted var(--bd);outline-offset:2px;animation:bulbo 1s steps(1) infinite}
@keyframes bulbo{50%{outline-color:#ff2d2d}}
/* Bolt: readable buttons and result text on the silver foil */
body[data-f=bolt] .btn.sec{color:#141a22;border-color:#3b4652;background:rgba(255,255,255,.4)}
body[data-m=bolt] .result{color:#1d4f9a}
.cell{position:relative}
.eimg{display:none}
/* ===== TRIPLE EYE: holographic melt (cut from your mockup) ===== */
body[data-w=eye]{background:radial-gradient(rgba(255,255,255,.07) 1.2px,transparent 1.6px) 0 0/16px 16px,radial-gradient(70vw 50vh at 85% 12%,rgba(150,70,210,.35),transparent 70%),linear-gradient(100deg,#7a3049,#5c1f55 50%,#4a1d66);background-attachment:fixed;
 --cream:#fff;--mut:#f3dcf2;--card:#2c0d3c;--bd:#e9a8ff;--navbg:rgba(42,12,58,.86);--lite:#ffe14d;--gl:255,120,220;--on:#fff}body[data-m=eye] .machine{--cream:#fff;--mut:#f3dcf2;--card:#2c0d3c;--bd:#e9a8ff;--navbg:rgba(42,12,58,.86);--lite:#ffe14d;--on:#fff}body[data-f=eye] :is(nav,.btn,.tile,.card,.item,.player,.slot,.social a,input,textarea,.inkbox){--cream:#fff;--mut:#f3dcf2;--card:#2c0d3c;--bd:#e9a8ff;--navbg:rgba(42,12,58,.86);--lite:#ffe14d;--gl:255,120,220;--on:#fff}
body[data-w=eye]::before{background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(20,0,30,.5))}
@keyframes holo{to{background-position:260px 130px}}
body[data-m=eye] :is(h1.mast,h2,.tile h3:not(*),.card h3:not(*),.item h3:not(*),.show h3:not(*)),body[data-f=eye] :is(h1.mast:not(*),h2:not(*),.tile h3,.card h3,.item h3,.show h3){font-family:"Titan One",var(--hf),sans-serif;text-transform:uppercase;letter-spacing:.02em;background:url(assets/holo.webp) 0 0/260px;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:.03em #3b0d3f;text-shadow:none;filter:drop-shadow(0 3px 0 #2a0830) drop-shadow(0 6px 12px rgba(0,0,0,.4));animation:holo 14s linear infinite}
body[data-m=eye] h1.mast{font-size:clamp(2.6rem,12vw,6rem);line-height:1}
body[data-m=eye] .result{font-family:"Titan One",sans-serif;text-transform:uppercase;color:#ffd84d;-webkit-text-stroke:.04em #3b0d3f;text-shadow:0 3px 0 #2a0830;margin-top:2.4rem;letter-spacing:.03em}
body[data-m=eye] .tag{color:#fff;text-shadow:0 2px 0 #2a0830,0 0 14px rgba(255,120,220,.5)}
body[data-w=eye] :is(p,.lede,label){text-shadow:0 1px 2px rgba(30,0,40,.7)}
/* nav: holographic bar with chrome drips */
body[data-f=eye] nav ul{background:url(assets/holo.webp) 0 0/320px;border:1.5px solid #e785c4;box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 6px rgba(120,60,140,.35)}
body[data-f=eye] nav a{color:#fff;font-weight:700;text-shadow:0 1px 2px rgba(60,10,70,.9),0 0 6px rgba(60,10,70,.5)}
body[data-f=eye] nav a.on{background:#e8409a;text-shadow:none}
body[data-f=eye] nav .bolt svg{fill:#ffd23f}
body[data-f=eye] nav::after{content:"";position:absolute;left:1.2rem;right:1.2rem;top:calc(100% - 8px);height:62px;background:url(assets/drip-nav.webp) 0 0/100% 100% no-repeat;pointer-events:none}
@media(min-width:820px){body[data-f=eye] nav::after{display:none}
body[data-f=eye] nav ul{overflow:visible;position:relative}
body[data-f=eye] nav ul::after{content:"";position:absolute;left:3%;right:3%;top:calc(100% - 6px);height:62px;background:url(assets/drip-nav.webp) 0 0/100% 100% no-repeat;pointer-events:none}}
/* panels: dark glass with a holographic rim, so text stays readable */
body[data-f=eye] :is(.card,.player,.item,.tile){background:linear-gradient(var(--card),var(--card)) padding-box,url(assets/holo.webp) 0 0/240px border-box;border:3px solid transparent;box-shadow:0 12px 30px rgba(0,0,0,.4)}
body[data-f=eye] .show{border-bottom-color:rgba(233,168,255,.35)}
/* buttons: holographic pills, chrome drips under the secondary ones (plain lettering, as you asked) */
body[data-f=eye] .btn{position:relative;background:url(assets/holo.webp) 0 0/220px;color:#1a0a22;border:3px solid #eef0f6;box-shadow:inset 0 2px 0 #fff,inset 0 -3px 5px rgba(90,70,120,.35),0 6px 14px rgba(0,0,0,.35);font-weight:800}
body[data-f=eye] .btn:hover{box-shadow:inset 0 2px 0 #fff,0 10px 24px rgba(255,120,220,.45)}
body[data-f=eye] .btn.sec{border-color:#c9ccd6;margin-bottom:24px}
body[data-f=eye] .btn.sec::after{content:"";position:absolute;left:3%;right:3%;top:calc(100% - 5px);height:30px;background:url(assets/drip-btn.webp) 0 0/100% 100% no-repeat;pointer-events:none}
/* neon holographic vines */
body[data-w=eye] .vp{stroke:url(#holo)}
body[data-w=eye] .vine{filter:drop-shadow(0 0 5px rgba(170,235,255,.75))}
/* floating pocket watches */
.d img{display:block;width:100%;height:auto}
body[data-w=eye] .d{opacity:.92}
/* the machine */
.machine>img.m5,.lever img.lv5{display:none!important}
.machine>img.m5{position:absolute}
body[data-m=eye] .machine>img:not(.m5),body[data-m=eye] .lever img:not(.lv5){display:none!important}
body[data-m=eye] .machine>img.m5,body[data-m=eye] .lever img.lv5{display:block!important;filter:none}
body[data-m=eye] .machine>img.m5{left:10.68%;top:1.07%;width:79.47%!important;height:108.16%!important}
body[data-m=eye] .r1{left:26.31%}
body[data-m=eye] .r2{left:42.54%}
body[data-m=eye] .r3{left:58.85%}
body[data-m=eye] .reel{top:37.9%;height:21.14%;width:14.15%}
body[data-m=eye] .reel{background:#2a0a36;color:#ff7ad0;border-radius:8px;box-shadow:inset 0 0 14px rgba(0,0,0,.6),0 0 14px rgba(255,120,220,.5)}
body[data-m=eye] .eimg{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body[data-m=eye] .lever{left:83.18%;top:32.07%;width:14.31%;height:19.58%;transform-origin:9.2% 95.2%}
body[data-m=eye] .lever.pull{transform:rotate(95deg)}
body[data-m=eye] .spinbtn{left:21.4%;top:65.4%;width:16.9%}
body[data-m=eye] .bulbs{inset:auto;left:.04%;top:3.05%;width:99.2%;height:94.3%}
body[data-f=eye] .social a{background:url(assets/holo.webp) 0 0/160px;border-color:#eef0f6;color:#2a0a36}
/* fix: the nav bar stays pinned to the top again (body was acting as its own scroll box, which switched sticky off) */
html{overflow-x:hidden}
body{overflow:visible;overflow-x:clip}
@media(min-width:640px){.hero>.bunting:first-child{width:560px;max-width:100%;margin:0 auto .5rem}}
/* fix: mixed results had see-through tiles and nav (their colours were never set) */
:root{--card:rgba(18,16,12,.86);--bd:rgba(246,236,223,.16);--navbg:rgba(21,19,15,.78)}
/* fix: mixed results on a light background (skull, dagger or daisy in the middle reel) switch to dark text */
/* ===== TRIPLE DICE: street-wall grunge (cut from your two mockups) ===== */
.mscene,.dimg{display:none}
body[data-w=dice]{background:linear-gradient(rgba(0,0,0,.14),rgba(0,0,0,.14)),url(assets/concrete.webp) 0 0/300px auto,#5f5d58;
 --cream:#efe8de;--mut:#d3cbbf;--card:#2c2a27;--bd:#151412;--navbg:rgba(28,26,24,.84);--lite:#d8302a;--gl:216,48,42;--on:#f3e9e0;
 --rivets:radial-gradient(circle at 10px 10px,#c9c1b4 0 1.4px,#5d574f 2.4px,rgba(0,0,0,.55) 3.4px,transparent 4.4px),radial-gradient(circle at calc(100% - 10px) 10px,#c9c1b4 0 1.4px,#5d574f 2.4px,rgba(0,0,0,.55) 3.4px,transparent 4.4px),radial-gradient(circle at 10px calc(100% - 10px),#c9c1b4 0 1.4px,#5d574f 2.4px,rgba(0,0,0,.55) 3.4px,transparent 4.4px),radial-gradient(circle at calc(100% - 10px) calc(100% - 10px),#c9c1b4 0 1.4px,#5d574f 2.4px,rgba(0,0,0,.55) 3.4px,transparent 4.4px)}body[data-m=dice] .machine{--cream:#efe8de;--mut:#d3cbbf;--card:#2c2a27;--bd:#151412;--navbg:rgba(28,26,24,.84);--lite:#d8302a;--on:#f3e9e0;--rivets:radial-gradient(circle at 10px 10px,#c9c1b4 0 1.4px,#5d574f 2.4px,rgba(0,0,0,.55) 3.4px,transparent 4.4px),radial-gradient(circle at calc(100% - 10px) 10px,#c9c1b4 0 1.4px,#5d574f 2.4px,rgba(0,0,0,.55) 3.4px,transparent 4.4px),radial-gradient(circle at 10px calc(100% - 10px),#c9c1b4 0 1.4px,#5d574f 2.4px,rgba(0,0,0,.55) 3.4px,transparent 4.4px),radial-gradient(circle at calc(100% - 10px) calc(100% - 10px),#c9c1b4 0 1.4px,#5d574f 2.4px,rgba(0,0,0,.55) 3.4px,transparent 4.4px)}body[data-f=dice] :is(nav,.btn,.tile,.card,.item,.player,.slot,.social a,input,textarea,.inkbox){--cream:#efe8de;--mut:#d3cbbf;--card:#2c2a27;--bd:#151412;--navbg:rgba(28,26,24,.84);--lite:#d8302a;--gl:216,48,42;--on:#f3e9e0;--rivets:radial-gradient(circle at 10px 10px,#c9c1b4 0 1.4px,#5d574f 2.4px,rgba(0,0,0,.55) 3.4px,transparent 4.4px),radial-gradient(circle at calc(100% - 10px) 10px,#c9c1b4 0 1.4px,#5d574f 2.4px,rgba(0,0,0,.55) 3.4px,transparent 4.4px),radial-gradient(circle at 10px calc(100% - 10px),#c9c1b4 0 1.4px,#5d574f 2.4px,rgba(0,0,0,.55) 3.4px,transparent 4.4px),radial-gradient(circle at calc(100% - 10px) calc(100% - 10px),#c9c1b4 0 1.4px,#5d574f 2.4px,rgba(0,0,0,.55) 3.4px,transparent 4.4px)}
body[data-w=dice]::before{background:radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(0,0,0,.6))}
body[data-w=dice] :is(.vines,.decor,.flr){display:none}
/* graffiti headings, typewriter paper tagline */
body[data-m=dice] :is(h1.mast,h2,h3:not(*)),body[data-f=dice] :is(h1.mast:not(*),h2:not(*),h3){font-family:"Permanent Marker",var(--hf),sans-serif;font-weight:400;background:none;-webkit-text-fill-color:currentColor;filter:none}
body[data-m=dice] :is(h1.mast,h2){color:#d8302a;text-shadow:0 0 2px rgba(216,48,42,.7),0 0 10px rgba(216,48,42,.3),2px 3px 0 rgba(0,0,0,.45);transform:rotate(-2deg)}
body[data-m=dice] h1.mast{font-size:clamp(2.8rem,13vw,6.2rem);line-height:.95}
body[data-f=dice] h3{color:#efe8de;text-shadow:0 0 2px rgba(255,255,255,.35),2px 2px 0 rgba(0,0,0,.6)}
body[data-m=dice] .tag{display:block;width:fit-content;max-width:min(20ch,90%);font:1.15rem/1.35 "Special Elite",monospace;color:#161411;background:#e8dfc9;padding:.7em 1em;transform:rotate(1.5deg);box-shadow:0 6px 16px rgba(0,0,0,.55);text-shadow:none}
body[data-w=dice] :is(.lede,p){text-shadow:0 1px 2px rgba(0,0,0,.8)}
body[data-m=dice] .tag,body[data-f=dice] .card p,body[data-f=dice] .tile p{text-shadow:none}
/* ransom-note result */
body[data-m=dice] .result{font-size:clamp(1.5rem,7vw,2.3rem);margin-top:1.2rem}
body[data-m=dice] i.rn{background:#e8dfc9;color:#141210;outline:none;box-shadow:1px 3px 6px rgba(0,0,0,.6)}
body[data-m=dice] i.rn.r1{background:#f6f2e8;color:#141210;font-family:"Rozha One",serif}
body[data-m=dice] i.rn.r2{background:#d8cdb2;color:#141210;font-family:"Special Elite",monospace}
body[data-m=dice] i.rn.r3{background:#e3d8bf;color:#7a1410}
body[data-m=dice] i.rn.r4{background:#ece4d0;color:#141210}
/* smoked nav with a rust tab */
body[data-f=dice] nav ul{background:rgba(28,26,24,.84);border-color:rgba(255,255,255,.08)}
body[data-f=dice] nav a{color:#d9d1c6}
body[data-f=dice] nav a.on{background:#7a4436;color:#f3e9e0}
body[data-f=dice] nav .bolt svg{fill:#d8302a}
/* riveted steel plates */
body[data-f=dice] :is(.card,.player,.item,.tile){background:var(--rivets),radial-gradient(ellipse at 88% 100%,rgba(150,70,30,.4),transparent 55%),radial-gradient(ellipse at 8% 0,rgba(150,70,30,.25),transparent 45%),linear-gradient(170deg,#3f3d39,#262422);border:2px solid #151412;border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -2px 0 rgba(0,0,0,.4),0 10px 24px rgba(0,0,0,.5)}
body[data-f=dice] .tile>svg{display:none}
body[data-f=dice] .show{border-bottom-color:rgba(255,255,255,.18)}
/* buttons: steel plates, red spray, red and green stencil frames */
body[data-f=dice] .btn{border-radius:4px;background:var(--rivets),linear-gradient(175deg,#4a4844,#2c2a27);border:2px solid #141210;color:#efe8de;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 4px 0 #111,0 8px 16px rgba(0,0,0,.5);padding:.95rem 1.9rem}
body[data-f=dice] .btn.pri{background:var(--rivets),radial-gradient(ellipse 62% 48% at 50% 52%,rgba(214,44,38,.97),rgba(214,44,38,.7) 58%,transparent 78%),linear-gradient(175deg,#4a4844,#2c2a27);color:#140806}
body[data-f=dice] .btn.sec{color:#e8483d;outline:2px solid #c9302a;outline-offset:-7px;text-shadow:0 0 6px rgba(216,48,42,.35)}
body[data-f=dice] #mute{color:#7bd894;outline-color:#4fa864;text-shadow:0 0 6px rgba(80,170,100,.35)}
body[data-f=dice] .btn:hover{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 2px 0 #111,0 4px 10px rgba(0,0,0,.5)}
body[data-f=dice] .social a{background:var(--rivets),linear-gradient(175deg,#4a4844,#2c2a27);background-size:auto;border-color:#141210;color:#efe8de}
body[data-m=dice] .mark{-webkit-text-stroke:1.5px rgba(216,48,42,.55);font-family:"Permanent Marker",sans-serif}
/* the machine + the poster wall behind it */
.machine>img.m6,.lever img.lv6{display:none!important}
.machine>img.m6{position:absolute}
body[data-m=dice] .machine>img:not(.m6),body[data-m=dice] .lever img:not(.lv6){display:none!important}
body[data-m=dice] .machine>img.m6,body[data-m=dice] .lever img.lv6{display:block!important}
body[data-m=dice] .machine{filter:none}
body[data-m=dice] .machine>img.m6{left:11.48%;top:2.84%;width:75.34%!important;height:98.04%!important;filter:drop-shadow(0 16px 16px rgba(0,0,0,.6))}
body[data-m=dice] .lever img.lv6{filter:drop-shadow(0 8px 6px rgba(0,0,0,.5))}
body[data-w=dice] .mscene{display:block;position:absolute;left:-18%;top:-49.6%;width:135.6%;height:159.4%;z-index:-2;pointer-events:none;background:url(assets/wall-scene.webp) center/100% 100% no-repeat;
 -webkit-mask:linear-gradient(transparent,#000 14%,#000 84%,transparent),linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-composite:source-in;
 mask:linear-gradient(transparent,#000 14%,#000 84%,transparent),linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-composite:intersect}
body[data-m=dice] .machine::before{opacity:.25}
body[data-m=dice] .bulbs{display:none}
body[data-m=dice] .r1{left:26.31%}
body[data-m=dice] .r2{left:42.54%}
body[data-m=dice] .r3{left:58.85%}
body[data-m=dice] .reel{top:37.9%;height:21.14%;width:14.15%}
body[data-m=dice] .reel{background:#141210;color:#c9c1b4;border-radius:5px;box-shadow:inset 0 0 12px rgba(0,0,0,.8)}
body[data-m=dice] .reel::before{background:linear-gradient(115deg,rgba(255,255,255,.14),transparent 34%)}
body[data-m=dice] .dimg{display:block;position:absolute;inset:4% 3%;width:94%;height:92%;object-fit:cover;border-radius:6px}
body[data-m=dice] .lever{left:85.67%;top:31.7%;width:13.87%;height:20.04%;transform-origin:2.8% 94%;animation:none}
body[data-m=dice] .lever.pull{transform:rotate(88deg)}
body[data-m=dice] .spinbtn{left:20.5%;top:64.1%;width:22%}
/* ===== TRIPLE UFO: Project Blue Book case file (cut from your mockup) ===== */
.mbb,.mact,.uimg,.evid{display:none}
body[data-w=ufo]{background:url(assets/paper.webp) 0 0/512px,#eddcac;
 --cream:#1d1a14;--mut:#4a4234;--card:#f6eed6;--bd:rgba(80,60,20,.35);--navbg:#e2cc90;--lite:#5dff6a;--gl:93,255,106;--on:#1d1a14;--ink:#f6eed6;
 --grunge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -9 6.2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E")}body[data-m=ufo] .machine{--cream:#1d1a14;--mut:#4a4234;--card:#f6eed6;--bd:rgba(80,60,20,.35);--navbg:#e2cc90;--lite:#5dff6a;--on:#1d1a14;--ink:#f6eed6;--grunge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -9 6.2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E")}body[data-f=ufo] :is(nav,.btn,.tile,.card,.item,.player,.slot,.social a,input,textarea,.inkbox){--cream:#1d1a14;--mut:#4a4234;--card:#f6eed6;--bd:rgba(80,60,20,.35);--navbg:#e2cc90;--lite:#5dff6a;--gl:93,255,106;--on:#1d1a14;--ink:#f6eed6;--grunge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -9 6.2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E")}
body[data-w=ufo]::before{background:radial-gradient(130% 100% at 50% 40%,transparent 50%,rgba(120,80,20,.35)),linear-gradient(90deg,rgba(110,75,20,.18),transparent 6%,transparent 94%,rgba(110,75,20,.18))}
body[data-w=ufo]::after{opacity:.1}
body[data-w=ufo] :is(.vines,.decor,.flr){display:none}
body[data-w=ufo] :is(p,label,.lede,input:not(*),textarea:not(*)),body[data-f=ufo] :is(p:not(*),label:not(*),.lede:not(*),input,textarea){font-family:"Courier Prime","Special Elite",monospace}
/* folder-tab nav with code names */
body[data-f=ufo] nav ul{background:#e2cc90;border:1.5px solid rgba(80,60,20,.35);border-radius:12px 12px 6px 6px;box-shadow:0 8px 18px rgba(60,40,10,.28),inset 0 1px 0 rgba(255,255,255,.5)}
body[data-f=ufo] nav a{font-size:0;color:#1d1a14;padding-inline:.7rem}
body[data-f=ufo] nav a::before{content:attr(data-ufo);white-space:pre;text-align:center;font:700 .74rem/1.15 "Courier Prime",monospace;letter-spacing:.02em}
body[data-f=ufo] nav a.on{background:#f6eed6;color:#1d1a14;box-shadow:inset 0 0 0 1.5px rgba(80,60,20,.4)}
body[data-f=ufo] nav .bolt svg{fill:#a8231d}
/* typewriter + rubber stamp lettering */
body[data-m=ufo] :is(h1.mast,h3:not(*)),body[data-f=ufo] :is(h1.mast:not(*),h3){font-family:"Courier Prime",monospace;font-weight:700;text-transform:uppercase;color:#1d1a14;text-shadow:none;background:none;filter:none;letter-spacing:.01em}
body[data-m=ufo] h1.mast{font-size:clamp(2.2rem,10vw,5rem);line-height:1.05}
body[data-m=ufo] h2{display:inline-block;font-family:"Alfa Slab One",serif;text-transform:uppercase;color:#a8231d;font-size:clamp(2.4rem,11vw,5.2rem);border:.08em solid #a8231d;border-radius:.12em;padding:.06em .25em;transform:rotate(-3deg);text-shadow:none;background:none;filter:none;-webkit-mask:var(--grunge);mask:var(--grunge);margin-bottom:.4em}
body[data-m=ufo] .tag{font:700 1.2rem/1.4 "Courier Prime",monospace;color:#1d1a14;text-shadow:none}
body[data-m=ufo] .mark{font-family:"Alfa Slab One",serif;-webkit-text-stroke:1.5px rgba(168,35,29,.5)}
/* the result line: declassified + redaction bars */
body[data-m=ufo] .result{font:700 clamp(1.15rem,5.2vw,1.8rem)/1.25 "Courier Prime",monospace;color:#1d1a14;max-width:30ch;margin:1.6rem auto 1.4rem;position:relative}
body[data-m=ufo] .result .dc{display:block;width:fit-content;margin:0 auto .25em;color:#a8231d;font-size:1.15em;letter-spacing:.06em;text-transform:uppercase}
body[data-m=ufo] .result .dc::before{content:"[ "}
body[data-m=ufo] .result .dc::after{content:" ]"}
.rdb{display:inline-block;width:2.6em;height:.8em;vertical-align:-.05em;background:#111;border-radius:40% 30% 45% 35%/60% 50% 55% 45%;transform:rotate(-2deg)}
body[data-m=ufo] .result::after{content:"REDACTED";position:absolute;right:-.2rem;top:-.4rem;font:700 .7rem/1 "Courier Prime",monospace;background:#111;color:#f6eed6;padding:.35em .6em;transform:rotate(-6deg)}
/* stamps on the page */
body[data-w=ufo] .hero>.bunting:first-child{visibility:visible;background:url(assets/stamp-eyes.webp) center/contain no-repeat;animation:none;transform:rotate(-1deg)}
body[data-w=ufo] .mbb{display:block;position:absolute;left:-5.86%;top:7.23%;width:22.56%;height:43.49%;z-index:-1;background:url(assets/stamp-bluebook.webp) center/100% 100% no-repeat;pointer-events:none}
body[data-m=ufo] .mact{display:block;position:absolute;left:86%;top:22%;font:700 clamp(.6rem,2.6vw,.95rem)/1 "Courier Prime",monospace;letter-spacing:.06em;text-transform:uppercase;color:#1d1a14;transform:rotate(38deg);pointer-events:none}
/* paper sheets */
body[data-f=ufo] :is(.card,.player,.item,.tile){background:#f6eed6;border:1px solid rgba(80,60,20,.3);border-radius:3px;box-shadow:0 1px 0 #fff inset,0 8px 18px rgba(60,40,10,.25)}
body[data-f=ufo] .tile{transform:rotate(-.6deg)}
body[data-f=ufo] .tile:nth-child(even){transform:rotate(.7deg)}
body[data-f=ufo] .tile>svg{display:none}
body[data-f=ufo] .tile::before{content:"CONFIDENTIAL";inset:auto;right:.9rem;top:.9rem;opacity:.85;background:none;border:2px solid #a8231d;color:#a8231d;font:700 .72rem/1 "Courier Prime",monospace;letter-spacing:.08em;padding:.3em .45em;transform:rotate(6deg);-webkit-mask:var(--grunge);mask:var(--grunge)}
body[data-f=ufo] .tile::after{color:#a8231d}
body[data-f=ufo] .show{border-bottom:1px dashed rgba(80,60,20,.45)}
body[data-f=ufo] .slot{background:#f6eed6;border-color:rgba(80,60,20,.3)}
body[data-f=ufo] .slot .ph{border-color:rgba(80,60,20,.4);color:#4a4234}
body[data-f=ufo] :is(input,textarea){background:#fffaf0;color:#1d1a14;border-color:rgba(80,60,20,.35)}
/* buttons: red file button with wax seal, pill buttons with hanging dog tags */
body[data-f=ufo] .btn{font:700 1rem "Courier Prime",monospace;border-radius:999px;border:3px solid #1d1a14;background:#fbf5e4;color:#1d1a14;box-shadow:0 4px 0 rgba(60,40,10,.35)}
body[data-f=ufo] .btn.pri{background:#b3261e;border-color:#7d1712;color:#fbf5e4}
body[data-f=ufo] #share{position:relative;padding-right:3.6rem}
body[data-f=ufo] #share::after{content:"";position:absolute;right:-1.1rem;top:50%;width:70px;height:66px;margin-top:-33px;background:url(assets/wax-seal.webp) center/contain no-repeat;transform:rotate(-10deg);filter:drop-shadow(0 4px 4px rgba(0,0,0,.35))}
body[data-f=ufo] :is(#reset,#mute){position:relative;margin-bottom:62px}
body[data-f=ufo] :is(#reset,#mute)::after{position:absolute;left:50%;top:calc(100% + 14px);translate:-50% 0;width:max-content;max-width:150px;padding:.9em .8em .55em;border-radius:9px;font:700 .72rem/1.15 "Courier Prime",monospace;color:#1d1a14;text-align:center;white-space:pre;
 background:radial-gradient(circle at 50% 7px,#6d6f73 0 2.5px,#d6d8dc 3.5px,transparent 4.5px),linear-gradient(160deg,#f0f1f3,#b8bcc2 55%,#e4e6e9);border:1px solid #8d9096;box-shadow:inset 0 1px 0 #fff,0 4px 8px rgba(0,0,0,.3);transform:rotate(-4deg)}
body[data-f=ufo] #reset::after{content:"ARCHIVE: CLASSIC\A(DEPRECATED)";background:linear-gradient(to top right,transparent calc(50% - 1.2px),#1d1a14 calc(50% - 1.2px) calc(50% + 1.2px),transparent calc(50% + 1.2px)),linear-gradient(to bottom right,transparent calc(50% - 1.2px),#1d1a14 calc(50% - 1.2px) calc(50% + 1.2px),transparent calc(50% + 1.2px)),radial-gradient(circle at 50% 7px,#6d6f73 0 2.5px,#d6d8dc 3.5px,transparent 4.5px),linear-gradient(160deg,#f0f1f3,#b8bcc2 55%,#e4e6e9)}
body[data-f=ufo] #mute::after{content:"AUDIO INTEL:\A" attr(data-tag);transform:rotate(3deg)}
/* evidence photo */
body[data-w=ufo] .evid{display:grid;grid-template-columns:auto;justify-items:center;gap:.6rem;margin:1.6rem auto .4rem;max-width:520px}
body[data-w=ufo] .evid .ph2{width:min(240px,66vw);aspect-ratio:378/322;background:url(assets/alien-photo.webp) center/cover;border:8px solid #f4f0e6;box-shadow:0 10px 22px rgba(60,40,10,.35);transform:rotate(-2deg);position:relative}
body[data-w=ufo] .evid .ph2::before{content:"";position:absolute;top:-16px;left:50%;width:70px;height:22px;margin-left:-35px;background:rgba(240,232,205,.75);transform:rotate(-4deg);box-shadow:0 1px 2px rgba(0,0,0,.15)}
body[data-w=ufo] .evid p{font:700 .78rem/1.35 "Courier Prime",monospace;text-transform:uppercase;color:#1d1a14;max-width:34ch}
/* the machine */
.machine>img.m7,.lever img.lv7{display:none!important}
.machine>img.m7{position:absolute}
body[data-m=ufo] .machine>img:not(.m7),body[data-m=ufo] .lever img:not(.lv7){display:none!important}
body[data-m=ufo] .machine>img.m7,body[data-m=ufo] .lever img.lv7{display:block!important}
body[data-m=ufo] .machine{filter:drop-shadow(0 18px 18px rgba(60,40,10,.4))}
body[data-m=ufo] .machine>img.m7{left:15.77%;top:7.23%;width:70.81%!important;height:87.66%!important;filter:none}
body[data-m=ufo] .machine::before{opacity:.12}
body[data-m=ufo] .r1{left:26.31%}
body[data-m=ufo] .r2{left:42.54%}
body[data-m=ufo] .r3{left:58.85%}
body[data-m=ufo] .reel{top:37.9%;height:21.14%;width:14.15%}
body[data-m=ufo] .reel{background:#1a1c16;color:#cfd2c4;border-radius:4px;box-shadow:inset 0 0 12px rgba(0,0,0,.8)}
body[data-m=ufo] .reel::before{background:linear-gradient(115deg,rgba(255,255,255,.18),transparent 34%)}
body[data-m=ufo] .uimg{display:block;position:absolute;inset:2%;width:96%;height:96%;object-fit:cover;filter:contrast(1.05)}
body[data-m=ufo] .bulbs{inset:0}
body[data-m=ufo] .bulb{width:1.7%;margin:-.85% 0 0 -.85%}
body[data-m=ufo] .bulb:not(:nth-child(1),:nth-child(3),:nth-child(5),:nth-child(7),:nth-child(10),:nth-child(12),:nth-child(14),:nth-child(17),:nth-child(19),:nth-child(21),:nth-child(23)){display:none}
body[data-m=ufo] .lever{left:85.29%;top:33.33%;width:12.57%;height:17.62%;transform-origin:8% 96%}
body[data-m=ufo] .lever.pull{transform:rotate(80deg)}
body[data-m=ufo] .spinbtn{left:61.2%;top:77%;width:12.9%}
body[data-f=ufo] .social a{background:#f6eed6;border-color:#1d1a14;color:#1d1a14}
body[data-f=ufo] .hero .btns{margin-inline:-1.6rem;gap:.7rem}
body[data-f=ufo] .hero .btns .btn{padding:.75rem 1.25rem;font-size:.95rem}
body[data-f=ufo] #share{padding-right:3.4rem}
body[data-m=ufo] .result::after{right:0;top:-1.7rem}
body[data-w=ufo] .hero>.bunting:first-child{transform:rotate(-1deg) scale(1.25)}
/* ===== TRIPLE DAGGER: newspaper clipping wall (cut from your mockup) ===== */
.machine>img.m8,.lever img.lv8{display:none!important}
.machine>img.m8{position:absolute}
.gimg{display:none}
body[data-w=dagger]{background:linear-gradient(rgba(70,55,30,.1),rgba(70,55,30,.1)),url(assets/newsprint.webp) 0 0/250px auto,#e6e0d2;
 --cream:#141210;--mut:#3e3a33;--card:#efe9dc;--bd:#141210;--navbg:#ece6d8;--lite:#c4121a;--gl:120,20,20;--on:#efe9dc;--ink:#efe9dc}body[data-m=dagger] .machine{--cream:#141210;--mut:#3e3a33;--card:#efe9dc;--bd:#141210;--navbg:#ece6d8;--lite:#c4121a;--on:#efe9dc;--ink:#efe9dc}body[data-f=dagger] :is(nav,.btn,.tile,.card,.item,.player,.slot,.social a,input,textarea,.inkbox){--cream:#141210;--mut:#3e3a33;--card:#efe9dc;--bd:#141210;--navbg:#ece6d8;--lite:#c4121a;--gl:120,20,20;--on:#efe9dc;--ink:#efe9dc}
body[data-w=dagger]::before{background:radial-gradient(130% 100% at 50% 40%,transparent 45%,rgba(40,30,15,.45))}
body[data-w=dagger]::after{opacity:.12}
body[data-w=dagger] :is(.flr){display:none}
/* floating headline clippings */
body[data-w=dagger] .d.clip{font:700 1.15rem/1.05 "Oswald","Playfair Display",sans-serif;font-style:normal;text-transform:uppercase;letter-spacing:.01em;color:#141210!important;background:#ece6d6;padding:.45em .7em;box-shadow:0 6px 14px rgba(30,20,10,.35);opacity:.92;transform:none}
body[data-w=dagger] .d.clip:nth-child(3n){background:#f2eee4;font-family:"Oswald",sans-serif}
body[data-w=dagger] .d.clip:nth-child(4n){background:#ddd5c2;font-family:"Special Elite",monospace;text-transform:none}
/* black thorn vines */
body[data-w=dagger] .vp{stroke:#151412!important;stroke-width:2.6px!important}
body[data-w=dagger] .vines .fl{fill:#151412}
body[data-w=dagger] .vines use{color:#151412!important}
body[data-w=dagger] .th{display:block}
body[data-w=dagger] .vines{filter:drop-shadow(1px 2px 1px rgba(0,0,0,.25))}
/* lettering */
body[data-m=dagger] h1.mast{font-family:"UnifrakturMaguntia","Playfair Display",serif;font-weight:400;color:#141210;text-shadow:none;background:none;filter:none;font-size:clamp(2.8rem,13vw,6.4rem);line-height:1}
body[data-m=dagger] :is(h2,h3:not(*)),body[data-f=dagger] :is(h2:not(*),h3){font-family:"Oswald","Playfair Display",sans-serif;font-weight:700;text-transform:uppercase;color:#141210;text-shadow:none;background:none;filter:none;letter-spacing:.01em}
body[data-m=dagger] h2{display:inline-block;background:#f2ede0;padding:.08em .35em;transform:rotate(-1.5deg);box-shadow:0 6px 14px rgba(30,20,10,.3);font-size:clamp(2.6rem,12vw,5.6rem);line-height:1.05}
body[data-w=dagger] :is(p,label,.lede,input:not(*),textarea:not(*),.tag:not(*)),body[data-f=dagger] :is(p:not(*),label:not(*),.lede:not(*),input,textarea,.tag:not(*)),body[data-m=dagger] :is(p:not(*),label:not(*),.lede:not(*),input:not(*),textarea:not(*),.tag){font-family:"Special Elite","Courier Prime",monospace}
body[data-m=dagger] .tag{color:#141210;text-shadow:none;font-size:1.25rem;line-height:1.4}
body[data-m=dagger] .result{font:1.6rem/1.2 "Special Elite",monospace;color:#141210;text-shadow:0 0 12px rgba(236,230,214,.9)}
body[data-m=dagger] .mark{font-family:"UnifrakturMaguntia",serif;-webkit-text-stroke:1.5px rgba(20,18,16,.45)}
/* nav: newspaper strip */
body[data-f=dagger] nav ul{background:#ece6d8;border:1.5px solid #141210;outline:.5px solid #141210;box-shadow:0 8px 18px rgba(30,20,10,.3)}
body[data-f=dagger] nav a{font-family:"Special Elite",monospace;color:#141210}
body[data-f=dagger] nav a.on{background:#141210;color:#ece6d8}
body[data-f=dagger] nav .bolt svg{fill:#a3121a}
/* buttons: black ink pill + cream pills with heavy outline */
body[data-f=dagger] .btn{font:1.05rem "Special Elite",monospace;border-radius:999px;border:3px solid #141210;background:#e8e0cc;color:#141210;box-shadow:0 4px 0 rgba(20,18,16,.85),0 8px 16px rgba(30,20,10,.25)}
body[data-f=dagger] .btn.pri{background:#141210;color:#ece6d8}
body[data-f=dagger] .btn:hover{transform:translateY(2px);box-shadow:0 2px 0 rgba(20,18,16,.85)}
/* clipping tiles */
body[data-f=dagger] :is(.card,.player,.item,.tile){background:#efe9dc;border:0;box-shadow:none;filter:drop-shadow(0 6px 10px rgba(30,20,10,.3))}
body[data-f=dagger] .tile>svg{display:none}
body[data-f=dagger] .tile{transform:rotate(-.8deg)}
body[data-f=dagger] .tile:nth-child(even){transform:rotate(.9deg)}
body[data-f=dagger] .tile::after{color:#a3121a}
body[data-f=dagger] .show{border-bottom:1px solid rgba(20,18,16,.35)}
body[data-f=dagger] :is(input,textarea){background:#fbf8f0;color:#141210;border-color:rgba(20,18,16,.4)}
body[data-f=dagger] .slot{background:#efe9dc;border-color:rgba(20,18,16,.3)}
body[data-f=dagger] .slot .ph{border-color:rgba(20,18,16,.4);color:#3e3a33}
body[data-f=dagger] .social a{background:#ece6d8;border-color:#141210;color:#141210}
/* machine, crank and clipping wall behind it */
body[data-m=dagger] .machine>img:not(.m8),body[data-m=dagger] .lever img:not(.lv8){display:none!important}
body[data-m=dagger] .machine>img.m8,body[data-m=dagger] .lever img.lv8{display:block!important}
body[data-m=dagger] .machine{filter:none}
body[data-m=dagger] .machine>img.m8{left:9.02%;top:16.02%;width:81.82%!important;height:89.32%!important;filter:drop-shadow(0 16px 14px rgba(30,20,10,.45))}
body[data-m=dagger] .lever img.lv8{filter:drop-shadow(0 6px 5px rgba(30,20,10,.4))}
body[data-w=dagger] .mscene{display:block;position:absolute;left:-15.53%;top:-69.38%;width:130.9%;height:131.9%;z-index:-2;pointer-events:none;background:url(assets/clip-scene.webp) center/100% 100% no-repeat;
 -webkit-mask:linear-gradient(transparent,#000 12%,#000 80%,transparent),linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;
 mask:linear-gradient(transparent,#000 12%,#000 80%,transparent),linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
body[data-m=dagger] .machine::before{opacity:.15}
body[data-m=dagger] .bulbs{display:none}
body[data-m=dagger] .r1{left:26.31%}
body[data-m=dagger] .r2{left:42.54%}
body[data-m=dagger] .r3{left:58.85%}
body[data-m=dagger] .reel{top:37.9%;height:21.14%;width:14.15%;border-radius:4px;box-shadow:inset 0 0 14px rgba(0,0,0,.7)}
body[data-m=dagger] .r1{background:#1a1816;color:#efe9dc}
body[data-m=dagger] .r2{background:#8f1a17;color:#f3ebe0}
body[data-m=dagger] .r3{background:#e4dbc9;color:#141210}
body[data-m=dagger] .gimg{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body[data-m=dagger] .reel::before{background:linear-gradient(115deg,rgba(255,255,255,.12),transparent 34%)}
body[data-m=dagger] .lever{left:87.3%;top:35.36%;width:12.64%;height:26.7%;transform-origin:28.7% 84%;animation:none}
body[data-m=dagger] .lever:hover{transform:rotate(12deg)}
body[data-m=dagger] .lever.pull{transform:rotate(100deg)}
body[data-m=dagger] .spinbtn{left:23.5%;top:72.2%;width:15%}
/* ===== TRIPLE LUCKY 7: casino jackpot with a coin waterfall ===== */
.coins{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;display:none}
.coins.back{z-index:-1}
.coins.front{z-index:55}
body.coins-on .coins.back,.coins.front.on{display:block}
body[data-w=seven]{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg opacity='.5'%3E%3Ctext x='18' y='92' font-family='Georgia,serif' font-weight='bold' font-size='74' fill='%23421215'%3E7%3C/text%3E%3Cg transform='translate(140 30)'%3E%3Cpath d='M18 0q-4 18-14 30M18 0q10 14 22 26' stroke='%2318381c' stroke-width='3' fill='none'/%3E%3Ccircle cx='4' cy='38' r='11' fill='%23401013'/%3E%3Ccircle cx='38' cy='34' r='11' fill='%23401013'/%3E%3C/g%3E%3Cpath d='M150 130l26 0 14 16-27 34-27-34z' fill='none' stroke='%2318303f' stroke-width='3'/%3E%3Ctext x='40' y='200' font-family='Georgia,serif' font-weight='bold' font-size='58' fill='%23421215' transform='rotate(-8 60 180)'%3E7%3C/text%3E%3C/g%3E%3C/svg%3E") 0 0/220px,radial-gradient(120% 80% at 50% 30%,#1c1215,#0a0809);background-attachment:fixed;
 --cream:#f3e3cc;--mut:#c9b49a;--card:#160f11;--bd:#9a6136;--navbg:rgba(14,10,11,.88);--lite:#ffd24a;--gl:255,170,60;--on:#fff}body[data-m=seven] .machine{--cream:#f3e3cc;--mut:#c9b49a;--card:#160f11;--bd:#9a6136;--navbg:rgba(14,10,11,.88);--lite:#ffd24a;--on:#fff}body[data-f=seven] :is(nav,.btn,.tile,.card,.item,.player,.slot,.social a,input,textarea,.inkbox){--cream:#f3e3cc;--mut:#c9b49a;--card:#160f11;--bd:#9a6136;--navbg:rgba(14,10,11,.88);--lite:#ffd24a;--gl:255,170,60;--on:#fff}
body[data-w=seven] :is(.decor,.flr){display:none}
/* bronze machine (your original art, re-metalled) with multicolour bulbs */
body[data-m=seven] .machine>img:first-of-type,body[data-m=seven] .lever img:first-child{filter:sepia(.85) saturate(1.5) hue-rotate(-14deg) brightness(.95) contrast(1.15)}
body[data-m=seven] .wv.b{display:block;mix-blend-mode:overlay;background:linear-gradient(115deg,transparent 35%,rgba(255,236,190,.55) 48%,transparent 60%) 0 0/260% 100%;animation:sweep 5s linear infinite}
body[data-m=seven] .machine{filter:drop-shadow(0 0 30px rgba(255,160,60,.25)) drop-shadow(0 24px 24px rgba(0,0,0,.7))}
body[data-m=seven] .bulb{background:var(--bc);box-shadow:0 0 10px 3px var(--bc)}
body[data-m=seven] .bulb:nth-child(4n+1){--bc:#3aa0ff}
body[data-m=seven] .bulb:nth-child(4n+2){--bc:#ff2b3a}
body[data-m=seven] .bulb:nth-child(4n+3){--bc:#2bff6a}
body[data-m=seven] .bulb:nth-child(4n){--bc:#fff3c2}
body[data-m=seven] .reel{color:#17110c;background:repeating-linear-gradient(45deg,rgba(150,120,70,.12) 0 1px,transparent 1px 9px),repeating-linear-gradient(-45deg,rgba(150,120,70,.12) 0 1px,transparent 1px 9px),linear-gradient(#fdf8ec,#e6dbc2)}
body[data-m=seven] .cell svg{stroke:#c9962e;stroke-width:1.2px;paint-order:stroke}
/* nav: poker-chip tab and neon links */
body[data-f=seven] nav ul,body[data-f=seven] :is(.card,.tile,.item,.player){animation:none}
body[data-f=seven] nav ul{background:rgba(14,10,11,.88);border:1.5px solid #9a6136;outline:none;box-shadow:0 10px 30px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,210,140,.12)}
body[data-f=seven] nav a{color:#8fd6ff;text-shadow:0 0 6px rgba(42,162,255,.9),0 0 16px rgba(42,162,255,.5)}
body[data-f=seven] nav a.on{color:#fff;text-shadow:0 1px 2px #000;background:radial-gradient(closest-side,#b3121a 0 70%,transparent 72%),repeating-conic-gradient(#f5efe6 0 12deg,#b3121a 12deg 36deg);box-shadow:0 0 0 2px #f2c14e,0 0 16px rgba(242,193,78,.75)}
body[data-f=seven] nav .bolt svg{fill:#ff2b3a;filter:drop-shadow(0 0 5px #ff2b3a)}
/* gold lettering */
body[data-m=seven] :is(h1.mast,h2,.result,.tile h3:not(*),.card h3:not(*),.item h3:not(*)),body[data-f=seven] :is(h1.mast:not(*),h2:not(*),.result:not(*),.tile h3,.card h3,.item h3){font-family:"Playfair Display",Georgia,serif;font-weight:900;background:linear-gradient(#fff6c8,#f2c14e 42%,#b37a1a 58%,#ffe69a);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 2px 0 #3a1d05) drop-shadow(0 0 12px rgba(255,140,40,.55))}
body[data-m=seven] .result{font-size:clamp(1.7rem,7.5vw,2.6rem)}
body[data-m=seven] .tag{color:#f3e3cc;text-shadow:0 2px 6px #000}
body[data-w=seven] :is(p,.lede){text-shadow:0 1px 3px rgba(0,0,0,.8)}
/* buttons: pearl-rimmed copper jackpot button, copper-lined dark pills */
body[data-f=seven] .btn{border-radius:999px;border:1.5px solid #b5793f;background:rgba(14,10,11,.75);color:#f0dcc4;box-shadow:0 6px 16px rgba(0,0,0,.6)}
body[data-f=seven] .btn.pri{border:5px solid transparent;background:linear-gradient(#bd7a4c,#7a4426) padding-box,conic-gradient(#fbf6ff,#d8e6ff,#ffe6f2,#e2fff2,#fff6dc,#fbf6ff) border-box;color:#f6e2cc;text-shadow:0 1px 0 #3a1d0a;box-shadow:0 0 0 1px #6a3f22,0 0 18px rgba(255,190,120,.35),0 6px 16px rgba(0,0,0,.6)}
body[data-f=seven] .btn:hover{box-shadow:0 0 0 1px #6a3f22,0 0 24px rgba(255,190,120,.6)}
/* velvet + copper panels */
body[data-f=seven] :is(.card,.player,.item,.tile){background:radial-gradient(120% 90% at 30% 0,#2a1a1e,#120c0e);border:1.5px solid #9a6136;outline:none;box-shadow:inset 0 0 0 4px #120c0e,inset 0 0 0 5px rgba(242,193,78,.35),0 10px 26px rgba(0,0,0,.6)}
body[data-f=seven] .tile>svg{color:#9a6136;opacity:.25}
body[data-f=seven] .tile::after{color:#f2c14e}
body[data-f=seven] .social a{background:rgba(14,10,11,.85);border-color:#9a6136;color:#f2c14e}
body[data-m=seven] .mark{-webkit-text-stroke:1.5px rgba(242,193,78,.5)}
/* copper filigree vines with jewelled flowers */
body[data-w=seven] .vp{stroke:url(#copper)!important;stroke-width:3px!important}
body[data-w=seven] .vines .fl{fill:#b5793f}
body[data-w=seven] .vines use{color:#f6dbe6!important}
body[data-w=seven] .vines{filter:drop-shadow(0 0 4px rgba(255,200,150,.35))}
body[data-m=dagger] .tag{display:block;width:fit-content;max-width:min(22ch,92%);background:#f2ede0;padding:.55em .9em;transform:rotate(1deg);box-shadow:0 6px 14px rgba(30,20,10,.3);margin-inline:auto}
body[data-m=dagger] .result{display:block;width:fit-content;margin-inline:auto;background:#f2ede0;padding:.2em .7em;box-shadow:0 6px 14px rgba(30,20,10,.3);transform:rotate(-1deg);text-shadow:none}
/* ===== performance: shadows live on the (still) machine pictures, not on the box whose lights blink ===== */
body[data-theme] .machine{filter:none}
.machine>img{filter:drop-shadow(0 22px 26px rgba(0,0,0,.55))}
body[data-m=crown] .machine>img.m3{filter:drop-shadow(0 16px 20px rgba(70,45,0,.5))}
body[data-m=bolt] :is(.machine>img,.lever img){filter:grayscale(1) contrast(1.15) brightness(1.5) drop-shadow(0 20px 22px rgba(0,0,0,.4))}
body[data-m=seven] .machine>img:first-of-type{filter:sepia(.85) saturate(1.5) hue-rotate(-14deg) brightness(.95) contrast(1.15) drop-shadow(0 0 26px rgba(255,160,60,.3)) drop-shadow(0 22px 22px rgba(0,0,0,.7))}
body[data-m=eye] .machine>img.m5{filter:drop-shadow(0 20px 24px rgba(30,0,40,.55))}
body[data-m=ufo] .machine>img.m7{filter:drop-shadow(0 18px 18px rgba(60,40,10,.4))}
body[data-m=eye] :is(h1.mast,h2,.tile h3:not(*),.card h3:not(*),.item h3:not(*),.show h3:not(*)),body[data-f=eye] :is(h1.mast:not(*),h2:not(*),.tile h3,.card h3,.item h3,.show h3){animation:none}
.bulb{will-change:opacity}
body[data-m=daisy] .machine>img.m4{filter:drop-shadow(0 18px 20px rgba(90,60,30,.35))}
/* reel symbols: the round DRC badge and the gold-rimmed lucky 7 */
.limg{display:block;width:84%;height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
body[data-m=seven] .cell svg{stroke:none}
/* ===== TRIPLE SKULL: ink-soaked wall (cut from your mockup) ===== */
.machine>img.m9,.lever img.lv9{display:none!important}
.machine>img.m9{position:absolute}
.inkbox,.mglow,.mdrops,.kimg,.kglow{display:none}
body[data-w=skull]{background:url(assets/wall-grey.webp) 0 0/512px,#8f8d88;
 --cream:#141414;--mut:#363636;--card:#ebe8e1;--bd:#111;--navbg:#ece8df;--lite:#ff2a1a;--gl:255,40,30;--on:#efece6;--ink:#efece6}body[data-m=skull] .machine{--cream:#141414;--mut:#363636;--card:#ebe8e1;--bd:#111;--navbg:#ece8df;--lite:#ff2a1a;--on:#efece6;--ink:#efece6}body[data-f=skull] :is(nav,.btn,.tile,.card,.item,.player,.slot,.social a,input,textarea,.inkbox){--cream:#141414;--mut:#363636;--card:#ebe8e1;--bd:#111;--navbg:#ece8df;--lite:#ff2a1a;--gl:255,40,30;--on:#efece6;--ink:#efece6}
body[data-w=skull]::before{background:radial-gradient(130% 100% at 50% 40%,transparent 50%,rgba(0,0,0,.35))}
body[data-w=skull] :is(.vines,.decor,.flr){display:none}
body[data-m=skull] :is(h1.mast,h2,h3:not(*)),body[data-f=skull] :is(h1.mast:not(*),h2:not(*),h3){font-family:"Rubik Wet Paint","Permanent Marker",sans-serif;font-weight:400;color:#111;text-shadow:none;background:none;filter:none;-webkit-text-fill-color:currentColor}
body[data-m=skull] h1.mast{font-size:clamp(2.6rem,12.5vw,6rem);line-height:1}
body[data-m=skull] .tag{font-weight:700;color:#141414;text-shadow:0 1px 0 rgba(255,255,255,.35)}
body[data-w=skull] :is(p,.lede){text-shadow:0 1px 0 rgba(255,255,255,.3)}
body[data-m=skull] .mark{font-family:"Rubik Wet Paint",sans-serif;-webkit-text-stroke:1.5px rgba(17,17,17,.4)}
/* ransom result (shared with dice) */
body[data-m=skull] .result{font-size:clamp(1.5rem,7vw,2.3rem);margin-top:1.4rem}
body[data-m=skull] i.rn{background:#e8dfc9;color:#141210;outline:none;box-shadow:1px 3px 6px rgba(0,0,0,.45)}
body[data-m=skull] i.rn.r1{background:#f6f2e8;font-family:"Rozha One",serif}
body[data-m=skull] i.rn.r2{background:#d8cdb2;font-family:"Special Elite",monospace}
body[data-m=skull] i.rn.r3{background:#e3d8bf;color:#6e0f0b}
body[data-m=skull] i.rn.r4{background:#ece4d0}
/* nav: brushed bar with oozing ink and falling drops */
body[data-f=skull] nav ul{background:#ece8df;border:1.5px solid #111;outline:2px solid #111;outline-offset:0;border-radius:6px 14px 4px 12px;box-shadow:0 8px 16px rgba(0,0,0,.25)}
body[data-f=skull] nav a{color:#111;font-weight:700}
body[data-f=skull] nav a.on{background:#111;color:#efece6;border-radius:40% 30% 45% 35%/60% 50% 55% 45%}
body[data-f=skull] nav .bolt svg{fill:#111}
body[data-f=skull] .inkbox{display:block;position:absolute;left:1rem;right:1rem;top:calc(100% - 12px);aspect-ratio:664/352;background:url(assets/ink-nav.webp) 0 0/100% 100% no-repeat;pointer-events:none;transform-origin:top;transition:transform .6s cubic-bezier(.3,.7,.3,1),opacity .6s;animation:ooze 7s ease-in-out infinite alternate}
@keyframes ooze{from{scale:1 .93}to{scale:1 1.05}}
body[data-f=skull].scrolled .inkbox{transform:scaleY(.32);opacity:.9}
@media(min-width:820px){body[data-f=skull] .inkbox{left:50%;right:auto;width:640px;translate:-50% 0}}
.inkbox i,.mdrops i{position:absolute;width:7px;height:9px;margin-left:-3.5px;border-radius:50% 50% 50% 50%/60% 60% 42% 42%;background:#0d0d0d;opacity:0;animation:dropfall 5s cubic-bezier(.55,0,1,.45) infinite}
@keyframes dropfall{0%{opacity:0;transform:translateY(-6px) scale(.3)}18%{opacity:1;transform:translateY(0) scale(1)}40%{transform:translateY(0) scale(1,1.15)}100%{opacity:0;transform:translateY(240px) scale(.9,1.2)}}
.inkbox i:nth-child(1){left:6.9%;top:96%}
.inkbox i:nth-child(2){left:19.4%;top:55%;animation-delay:-1.3s}
.inkbox i:nth-child(3){left:45.4%;top:55%;animation-delay:-2.9s}
.inkbox i:nth-child(4){left:76.7%;top:55%;animation-delay:-.6s}
.inkbox i:nth-child(5){left:90.1%;top:77%;animation-delay:-3.8s}
/* buttons: ink brush strokes that keep dripping */
body[data-f=skull] .btn{position:relative;background:url(assets/brush-b.webp) center/100% 100% no-repeat;border:0;border-radius:0;color:#efece6;box-shadow:none;padding:1.05rem 2.1rem;font-weight:700}
body[data-f=skull] .btn.pri{background-image:url(assets/brush-a.webp)}
body[data-f=skull] .btn:hover{transform:translateY(-2px) rotate(-.5deg)}
body[data-f=skull] .btn::after{content:"";position:absolute;left:3%;right:3%;top:calc(100% - 9px);height:58px;background:url(assets/ink-drip-a.webp) 0 0/100% 100% no-repeat;transform-origin:top;animation:ooze 6s ease-in-out infinite alternate;pointer-events:none}
body[data-f=skull] .btn.pri::after{height:20px;background-image:url(assets/ink-drip-c.webp);animation-duration:5s}
body[data-f=skull] #mute::after{height:46px;background-image:url(assets/ink-drip-b.webp);animation-delay:-2s}
body[data-f=skull] .btn::before{content:"";position:absolute;left:61%;top:calc(100% + 46px);width:7px;height:9px;margin-left:-3.5px;border-radius:50% 50% 50% 50%/60% 60% 42% 42%;background:#0d0d0d;opacity:0;animation:dropfall 4.4s cubic-bezier(.55,0,1,.45) infinite;pointer-events:none}
body[data-f=skull] .btn.pri::before{top:calc(100% + 9px);left:52%;animation-delay:-1.7s}
body[data-f=skull] #mute::before{left:56%;top:calc(100% + 32px);animation-delay:-3s}
body[data-f=skull] .btn.sec{margin-bottom:44px}
body[data-f=skull] .btn.pri{margin-bottom:16px}
/* paper panels with brushed ink edges */
body[data-f=skull] :is(.card,.player,.item,.tile){background:#ebe8e1;border:3px solid #111;border-radius:18px 6px 20px 8px/8px 18px 6px 16px;box-shadow:5px 7px 0 rgba(0,0,0,.18)}
body[data-f=skull] .tile>svg{display:none}
body[data-f=skull] .tile::after{color:#111}
body[data-f=skull] .show{border-bottom:2px solid rgba(17,17,17,.35)}
body[data-f=skull] :is(input,textarea){background:#f5f3ee;color:#141414;border-color:#111}
body[data-f=skull] .slot{background:#ebe8e1;border-color:#111}
body[data-f=skull] .slot .ph{border-color:rgba(17,17,17,.45);color:#363636}
body[data-f=skull] .social a{background:#111;border-color:#111;color:#efece6}
/* the floor with ink puddles under the footer */
body[data-w=skull] footer{padding-bottom:calc(34.4vw + 1rem);border-top:0}
body[data-w=skull] footer::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34.4vw;background:url(assets/floor-ink.webp) center bottom/100% 100% no-repeat;-webkit-mask:linear-gradient(transparent,#000 12%);mask:linear-gradient(transparent,#000 12%);z-index:-1;pointer-events:none}
/* machine, lever, glowing red eyes */
body[data-m=skull] .machine>img:not(.m9),body[data-m=skull] .lever img:not(.lv9){display:none!important}
body[data-m=skull] .machine>img.m9,body[data-m=skull] .lever img.lv9{display:block!important}
body[data-m=skull] .machine>img.m9{left:12.59%;top:3.99%;width:75.32%!important;height:107.84%!important;filter:drop-shadow(0 18px 18px rgba(0,0,0,.45))}
body[data-m=skull] .lever img.lv9{filter:drop-shadow(0 6px 5px rgba(0,0,0,.35))}
body[data-m=skull] .machine::before{opacity:.18}
body[data-m=skull] .bulbs{display:none}
body[data-m=skull] .r1{left:26.31%}
body[data-m=skull] .r2{left:42.54%}
body[data-m=skull] .r3{left:58.85%}
body[data-m=skull] .reel{top:37.9%;height:21.14%;width:14.15%;background:#d9d4c8;color:#1a1a1a;border-radius:6px;box-shadow:inset 0 0 12px rgba(0,0,0,.55)}
body[data-m=skull] .kimg{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body[data-m=skull] .kglow{display:block;position:absolute;inset:0;mix-blend-mode:screen;pointer-events:none;background:radial-gradient(circle at 27.7% 51%,#ff4a2a 0 3.5%,rgba(255,30,10,.75) 6%,rgba(255,0,0,.25) 10%,transparent 14%),radial-gradient(circle at 72.3% 51%,#ff4a2a 0 3.5%,rgba(255,30,10,.75) 6%,rgba(255,0,0,.25) 10%,transparent 14%);animation:eyes 2.4s ease-in-out infinite}
@keyframes eyes{0%,100%{opacity:.55}50%{opacity:1}}
body[data-m=skull] .mglow{display:block;position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen}
body[data-m=skull] .mglow i{position:absolute;width:4.2%;aspect-ratio:1;margin:-2.1% 0 0 -2.1%;border-radius:50%;background:radial-gradient(circle,#ff5a3a 0 22%,rgba(255,20,0,.75) 42%,transparent 70%);animation:eyes 2.4s ease-in-out infinite -1.2s}
body[data-m=skull] .mglow i:nth-child(1){left:30.4%;top:77.4%}
body[data-m=skull] .mglow i:nth-child(2){left:37.9%;top:74.2%}
body.flare .kglow,body.flare .mglow i{animation:flare .45s ease-in-out 4 alternate}
@keyframes flare{from{opacity:.6;filter:brightness(1)}to{opacity:1;filter:brightness(1.8) saturate(1.4)}}
body[data-m=skull] .mdrops{display:block;position:absolute;inset:0;pointer-events:none}
body[data-m=skull] .mdrops i:nth-child(1){left:22%;top:110%;animation-delay:-.8s}
body[data-m=skull] .mdrops i:nth-child(2){left:51%;top:111.5%;animation-delay:-2.6s}
body[data-m=skull] .mdrops i:nth-child(3){left:77%;top:110.5%;animation-delay:-4s}
body[data-m=skull] .lever{left:87.53%;top:34.12%;width:11.78%;height:19.13%;transform-origin:3% 90%}
body[data-m=skull] .lever.pull{transform:rotate(80deg)}
body[data-m=skull] .spinbtn{left:50.5%;top:84.3%;width:14%}
/* eye theme: the reel eyes blink when an eye lands */
body.blink .eimg{animation:blink .65s ease-in-out 2}
@keyframes blink{0%,100%{transform:scaleY(1)}45%,55%{transform:scaleY(.08)}}
/* ufo: the declassified stamp slams down */
body[data-m=ufo] .result .dc{animation:slam .45s cubic-bezier(.3,1.6,.5,1) both}
@keyframes slam{from{transform:scale(2.4) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
/* ===== layering fix: landing animations and nav ink sit BEHIND the machine, buttons and text ===== */
.coins.front{z-index:-1}
body[data-f=eye] nav::after,body[data-f=eye] nav ul::after{content:none;display:none}
.inkbox{position:fixed!important;z-index:-1;left:var(--navl,1rem)!important;right:auto!important;width:var(--navw,calc(100% - 2rem))!important;top:var(--navb,60px)!important;translate:none!important}
body[data-f=skull] .inkbox{aspect-ratio:auto;height:min(calc(var(--navw,358px)*.53),230px)}
body[data-f=skull].scrolled .inkbox{transform:none;opacity:1}
body[data-f=eye] .inkbox{display:block;height:62px;background:url(assets/drip-nav.webp) 0 0/100% 100% no-repeat;pointer-events:none;transform-origin:top;animation:ooze 7s ease-in-out infinite alternate}
body[data-f=eye] .inkbox i{display:none}
/* side vines frame the page edges and fade out before they reach the text and buttons */
.vine{-webkit-mask:linear-gradient(90deg,#000 42%,transparent 90%);mask:linear-gradient(90deg,#000 42%,transparent 90%)}
@media(min-width:900px){.vine{-webkit-mask:linear-gradient(90deg,#000 55%,transparent 95%);mask:linear-gradient(90deg,#000 55%,transparent 95%)}}
/* ===== TRIPLE BOLT: dark brick wall lit by neon signs, electric vines, stray sparks ===== */
.vg,.vz{display:none;fill:none;stroke-linecap:round}
body[data-w=bolt]{background:radial-gradient(70vw 45vh at 50% 24%,rgba(40,120,255,.2),transparent 70%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='68'%3E%3Cpath d='M0 1H88M0 35H88M1 1V35M45 35V68' stroke='rgba(150,180,220,.08)' stroke-width='2' fill='none'/%3E%3C/svg%3E") 0 0/88px 68px,linear-gradient(#0a0e18,#05070d);background-attachment:fixed;
 --cream:#e8f6ff;--mut:#a7bdd2;--card:rgba(7,11,20,.86);--bd:#7fd8ff;--navbg:rgba(7,11,20,.88);--lite:#9fe6ff;--gl:60,170,255;--on:#04121f;--ink:#e8f6ff;--nc:79,195,255}body[data-m=bolt] .machine{--cream:#e8f6ff;--mut:#a7bdd2;--card:rgba(7,11,20,.86);--bd:#7fd8ff;--navbg:rgba(7,11,20,.88);--lite:#9fe6ff;--on:#04121f;--ink:#e8f6ff;--nc:79,195,255}body[data-f=bolt] :is(nav,.btn,.tile,.card,.item,.player,.slot,.social a,input,textarea,.inkbox){--cream:#e8f6ff;--mut:#a7bdd2;--card:rgba(7,11,20,.86);--bd:#7fd8ff;--navbg:rgba(7,11,20,.88);--lite:#9fe6ff;--gl:60,170,255;--on:#04121f;--ink:#e8f6ff;--nc:79,195,255}
body[data-w=bolt]::before{background:radial-gradient(120% 90% at 50% 35%,transparent 40%,rgba(0,0,0,.75));animation:none}
body[data-w=bolt] :is(.decor,.flr){display:none}
@keyframes neon{0%,88%,100%{opacity:1}89%{opacity:.45}90%{opacity:1}92%{opacity:.62}93.5%{opacity:1}}
/* neon lettering */
body[data-m=bolt] :is(h1.mast,h2,h3:not(*),.result,.tag),body[data-f=bolt] :is(h1.mast:not(*),h2:not(*),h3,.result:not(*),.tag:not(*)){font-family:"Tilt Neon","DM Sans",sans-serif;font-weight:400;background:none;-webkit-text-fill-color:currentColor;filter:none}
body[data-m=bolt] h1.mast{color:#ffe9f8;text-shadow:0 0 3px #fff,0 0 10px #ff3cc8,0 0 22px #ff1fb4,0 0 44px rgba(255,31,180,.7);animation:neon 7.3s infinite}
body[data-m=bolt] h2{color:#eaf8ff;text-shadow:0 0 3px #fff,0 0 10px #4fc3ff,0 0 24px #1e90ff,0 0 46px rgba(30,100,255,.7);animation:neon 9.1s infinite -3s}
body[data-m=bolt] .result{color:#fff6c8;font-size:clamp(1.7rem,7.5vw,2.6rem);text-shadow:0 0 3px #fff,0 0 10px #ffd400,0 0 24px #ffb000,0 0 44px rgba(255,170,0,.6);animation:neon 5.7s infinite -1s}
body[data-m=bolt] .tag{color:#d4f1ff;text-shadow:0 0 8px rgba(79,195,255,.7)}
body[data-w=bolt] :is(p,.lede){text-shadow:0 1px 3px #000}
body[data-m=bolt] .mark{color:transparent;-webkit-text-stroke:1.5px #7fd8ff;text-shadow:0 0 18px rgba(79,195,255,.55);font-family:"Tilt Neon",sans-serif}
/* neon-tube frames, each sign its own colour */
body[data-f=bolt] nav ul{background:rgba(7,11,20,.88);border:1.5px solid #c9efff;box-shadow:0 0 4px #4fc3ff,0 0 16px rgba(30,144,255,.75),inset 0 0 9px rgba(79,195,255,.45);animation:neon 11s infinite -6s}
body[data-f=bolt] nav a{color:#cfeeff;text-shadow:0 0 6px rgba(79,195,255,.9)}
body[data-f=bolt] nav a.on{background:rgba(255,60,200,.14);color:#fff;box-shadow:0 0 0 1.5px #ffc2ef,0 0 12px #ff3cc8,inset 0 0 8px rgba(255,60,200,.5);text-shadow:0 0 6px #ff3cc8}
body[data-f=bolt] nav .bolt svg{fill:#ffe14d;filter:drop-shadow(0 0 4px #ffd400)}
body[data-f=bolt] :is(.card,.player,.item,.tile){background:rgba(7,11,20,.86);border:1.5px solid rgb(var(--nc));border-color:color-mix(in srgb,rgb(var(--nc)) 45%,#fff);box-shadow:0 0 4px rgb(var(--nc)),0 0 18px rgba(var(--nc),.65),inset 0 0 12px rgba(var(--nc),.4);outline:none;animation:neon 10s infinite}
body[data-f=bolt] :is(.tile,.card):nth-child(4n+2){--nc:255,60,200;animation-duration:13s;animation-delay:-4s}
body[data-f=bolt] :is(.tile,.card):nth-child(4n+3){--nc:120,255,190;animation-duration:8.5s;animation-delay:-2s}
body[data-f=bolt] :is(.tile,.card):nth-child(4n){--nc:170,120,255;animation-duration:12s;animation-delay:-7s}
body[data-f=bolt] :is(.tile,.card) h3{color:#f2fbff;text-shadow:0 0 5px rgb(var(--nc)),0 0 16px rgba(var(--nc),.85)}
body[data-f=bolt] .tile>svg{color:rgb(var(--nc));opacity:.14}
body[data-f=bolt] .tile::after{color:rgb(var(--nc));text-shadow:0 0 8px rgb(var(--nc))}
body[data-f=bolt] .show{border-bottom:1px solid rgba(79,195,255,.35);box-shadow:0 1px 6px -2px rgba(79,195,255,.6)}
body[data-f=bolt] :is(input,textarea){background:rgba(4,8,16,.9);color:#e8f6ff;border-color:#7fd8ff;box-shadow:0 0 8px rgba(79,195,255,.35)}
body[data-f=bolt] .slot{background:rgba(7,11,20,.86);border-color:#7fd8ff;box-shadow:0 0 14px rgba(79,195,255,.45)}
body[data-f=bolt] .slot .ph{border-color:rgba(127,216,255,.5);color:#a7bdd2}
/* buttons: neon outlines */
body[data-f=bolt] .btn{background:rgba(7,11,20,.7);border:2px solid #c9efff;color:#e8f6ff;text-shadow:0 0 6px #4fc3ff;box-shadow:0 0 4px #4fc3ff,0 0 16px rgba(30,144,255,.7),inset 0 0 9px rgba(79,195,255,.45)}
body[data-f=bolt] .btn.pri{border-color:#ffc2ef;color:#fff;text-shadow:0 0 6px #ff3cc8;box-shadow:0 0 4px #ff3cc8,0 0 18px rgba(255,31,180,.75),inset 0 0 10px rgba(255,60,200,.5);animation:neon 8.2s infinite -2.5s}
body[data-f=bolt] .btn:hover{box-shadow:0 0 6px #fff,0 0 26px rgba(79,195,255,.9),inset 0 0 12px rgba(79,195,255,.6)}
body[data-f=bolt] .social a{background:rgba(7,11,20,.8);border-color:#c9efff;color:#cfeeff;box-shadow:0 0 4px #4fc3ff,0 0 14px rgba(30,144,255,.6)}
/* power surge: everything brightens for a blink when a spark goes */
body[data-f=bolt].surge :is(nav ul,.tile,.card,.btn,h1.mast:not(*),h2:not(*)),body[data-m=bolt].surge :is(nav ul:not(*),.tile:not(*),.card:not(*),.btn:not(*),h1.mast,h2){filter:brightness(1.45)}
body[data-m=bolt].surge .machine::before{opacity:1}
/* the machine: dark steel with a neon edge */
body[data-m=bolt] :is(.machine>img,.lever img){filter:grayscale(1) brightness(.5) contrast(1.4) drop-shadow(0 0 1.5px #c9efff) drop-shadow(0 0 9px #2a9bff) drop-shadow(0 0 24px rgba(30,110,255,.55))}
body[data-m=bolt] .machine::before{opacity:.7}
body[data-m=bolt] .reel{background:linear-gradient(#0f1a2c,#060a12);color:#8fe0ff;box-shadow:inset 0 0 14px rgba(79,195,255,.35),0 0 10px rgba(79,195,255,.45)}
body[data-m=bolt] .bulb{box-shadow:0 0 10px 3px #4fc3ff}
/* electric vines */
body[data-w=bolt] .vines{opacity:1;filter:none}
body[data-w=bolt] .vp{stroke:#8fdcff!important;stroke-width:2.6px!important;filter:none}
body[data-w=bolt] .vg{display:inline;stroke:rgba(60,170,255,.24)!important;stroke-width:13px!important}
body[data-w=bolt] .vz{display:inline;stroke-dasharray:26 474;animation:zap 2.4s linear infinite;transition:opacity .4s}
.vz.h{stroke:rgba(160,225,255,.6);stroke-width:8px}
.vz.c{stroke:#fff;stroke-width:2.2px}
@keyframes zap{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
body[data-w=bolt] .vines path.fl{fill:#123a66}
body[data-w=bolt] .vines use{color:#ff6fd8!important}
body[data-f=bolt] .btn.sec{background:rgba(7,11,20,.7);border-color:#c9efff;color:#e8f6ff}
/* ===== TRIPLE CROWN: tilt-to-shine (phone tilt or mouse) ===== */
.glint{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;display:none}
body[data-w=crown].tilt-on .glint{display:block}
.gsheen,.tiltbtn{display:none}
body[data-w=crown]{--tx:0;--ty:0}
/* the machine turns slightly with the phone, like a 3D photo */
body[data-m=crown].tilt-on .machine:not(.spinning){transform:perspective(1100px) rotateY(calc(var(--tx)*10deg)) rotateX(calc(var(--ty)*-8deg));will-change:transform}
/* a band of light slides across the gold as you tilt */
body[data-m=crown].tilt-on .gsheen{display:block;position:absolute;z-index:4;left:-7.5%;top:-15%;width:115%;height:115%;pointer-events:none;mix-blend-mode:overlay;
 -webkit-mask:url(assets/machine-crown.webp) center/100% 100% no-repeat;mask:url(assets/machine-crown.webp) center/100% 100% no-repeat;
 background:linear-gradient(115deg,transparent 32%,rgba(255,240,190,.5) 42%,#fff 49%,#fff 51%,rgba(255,236,170,.55) 58%,transparent 68%) no-repeat;background-size:300% 100%;
 background-position:calc(50% - var(--tx)*55%) 0;opacity:.95}
body[data-m=crown].tilt-on .lever img.lv3{filter:brightness(calc(1 + var(--tx)*.18))}
/* the page-wide shine and the side art follow the tilt at different depths */
body[data-w=crown].tilt-on::before{animation:none;background-position:calc(50% + var(--tx)*70%) 0}
body[data-w=crown].tilt-on .vines{transform:translate(calc(var(--tx)*-16px),calc(var(--ty)*-12px))}
body[data-w=crown].tilt-on .ctex{transform:translate(calc(var(--tx)*10px),calc(var(--ty)*8px))}
body[data-m=crown].tilt-on .hero h1.mast{transform:translate(calc(var(--tx)*4px),calc(var(--ty)*3px))}
/* iPhone asks permission before a site can read the tilt */
body.tilt-on .tiltbtn:not([hidden]){display:inline-flex;align-items:center;gap:.4em;margin:-.6rem auto 1.2rem;padding:.5rem 1rem;border-radius:999px;border:1.5px solid #0b0a06;background:rgba(255,236,170,.7);color:#0b0a06;font:600 .85rem "DM Sans",sans-serif;cursor:pointer;animation:tiltpulse 2.4s ease-in-out infinite}
@keyframes tiltpulse{50%{box-shadow:0 0 0 6px rgba(255,236,170,.35)}}

/* ===== reel symbols: every symbol always shows its own theme's art, whichever machine it is in ===== */
.cell{overflow:hidden}
.cell.c-logo{background:linear-gradient(#f6eee1,#d9cdb8)}
.cell.c-crown{background:linear-gradient(#f4dc8c,#d6ae46);color:#0b0a06}
.cell.c-daisy{background:linear-gradient(#fffaf0,#efe2cf);color:#8a5a3a}
.cell.c-seven{background:repeating-linear-gradient(45deg,rgba(150,120,70,.12) 0 1px,transparent 1px 9px),repeating-linear-gradient(-45deg,rgba(150,120,70,.12) 0 1px,transparent 1px 9px),linear-gradient(#fdf8ec,#e6dbc2)}
.cell.c-bolt{background:linear-gradient(#0f1a2c,#060a12);color:#8fe0ff}.cell.c-bolt svg{filter:drop-shadow(0 0 3px #4fc3ff) drop-shadow(0 0 8px rgba(30,144,255,.8))}
.cell.c-dice{background:#141210}.cell.c-eye{background:#2a0a36}.cell.c-ufo{background:#1a1c16}.cell.c-skull{background:#d9d4c8}
.cell.c-dagger{background:#1a1816}
body .cell :is(.eimg,.dimg,.uimg,.gimg,.kimg,.kglow){display:block}
body .cell .dimg{position:absolute;inset:4% 3%;width:94%;height:92%;object-fit:cover;border-radius:6px}
body .cell :is(.eimg,.gimg,.kimg){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body .cell .uimg{position:absolute;inset:2%;width:96%;height:96%;object-fit:cover}
body .cell .kglow{position:absolute;inset:0;mix-blend-mode:screen;pointer-events:none;background:radial-gradient(circle at 27.7% 51%,#ff4a2a 0 3.5%,rgba(255,30,10,.75) 6%,rgba(255,0,0,.25) 10%,transparent 14%),radial-gradient(circle at 72.3% 51%,#ff4a2a 0 3.5%,rgba(255,30,10,.75) 6%,rgba(255,0,0,.25) 10%,transparent 14%);animation:eyes 2.4s ease-in-out infinite}
body .cell:is(.c-eye,.c-dice,.c-ufo,.c-dagger,.c-skull) svg{display:none}
body .cell.c-seven svg{stroke:none}
.cell{box-shadow:inset 0 0 10px rgba(0,0,0,.28)}

/* ===== mixed results: keep the lettering readable when the machine's lettering and the world clash ===== */
.reel::before{z-index:2}.reel::after{z-index:3}

body :is(.pl-l,.pl-d){position:relative;isolation:isolate;width:fit-content;max-width:100%;margin-inline:auto}
body :is(.pl-l,.pl-d)::before{content:"";position:absolute;inset:-.12em -.5em;border-radius:.35em;z-index:-1;pointer-events:none;-webkit-backdrop-filter:blur(9px) saturate(1.2);backdrop-filter:blur(9px) saturate(1.2);box-shadow:0 8px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.35)}
body .pl-l::before{background:rgba(255,250,240,.34);border:1px solid rgba(255,255,255,.45)}body .pl-d::before{background:rgba(10,9,8,.36);border:1px solid rgba(255,255,255,.16)}

/* gradient lettering (gold, holographic) on a light world gets a dark halo instead of a plate */
body .pl-o{filter:drop-shadow(0 0 1px rgba(20,10,0,.95)) drop-shadow(0 0 2px rgba(20,10,0,.85)) drop-shadow(0 3px 8px rgba(0,0,0,.55))!important}

/* ===== v20 polish: levers tuck in behind their machine so every joint is clean ===== */
.machine>img:first-of-type{position:relative}
body:is([data-m=bolt],[data-m=seven],[data-m=""],:not([data-m])) .lever{left:80.05%;top:30.95%;width:18.86%;height:25.75%;transform-origin:28.5% 78.6%}
body[data-m=logo] .lever{left:80.52%;top:31.53%;width:18.70%;height:28.22%;transform-origin:23.2% 76.5%}

/* ===== v20: lettering rework ===== */
/* Daisy: flower capitals for the big lettering only; an elegant serif for everything small */
html body[data-m=daisy] :is(h1.mast,h2,.result){filter:drop-shadow(0 1px 0 rgba(74,52,38,.55)) drop-shadow(0 3px 4px rgba(60,40,20,.3))}
html body[data-m=daisy] h1.mast{font-size:clamp(3.2rem,15.5vw,6.6rem);line-height:1.02}
html body[data-m=daisy] h2{font-size:clamp(3rem,14vw,6rem);line-height:1.05}
html body[data-m=daisy] .result{font-size:clamp(2.1rem,10vw,3.2rem);line-height:1.1}
html body[data-m=daisy] :is(h1.mast,h2,.result) .gl{margin:0 .01em}
html body[data-m=daisy] .tag{filter:none;font:italic 600 clamp(1.35rem,5.6vw,1.7rem)/1.3 "Cormorant Garamond","Playfair Display",Georgia,serif;color:#5a3d2b;text-shadow:0 1px 0 rgba(255,250,240,.7);letter-spacing:.01em}
html body[data-w=daisy] .lede{filter:none;font:italic 600 1.25rem/1.45 "Cormorant Garamond",Georgia,serif;color:#5a3d2b}
html body[data-f=daisy] :is(nav a,h3){filter:none;font-family:"Cormorant Garamond","Playfair Display",Georgia,serif;font-weight:700;letter-spacing:.02em}
html body[data-f=daisy] nav a{font-size:1.12rem;color:#5a3d2b}
html body[data-f=daisy] nav a.on{background:#7a4a36;color:#fff7ea}
html body[data-f=daisy] :is(.tile,.card,.item) h3{font-size:1.9rem;color:#5a3d2b;text-shadow:none}
html body[data-f=daisy] .btn{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:1.15rem;letter-spacing:.02em}
/* Dagger: headlines cut out of newspaper, one letter at a time */
.cl{display:inline-block;font-family:"Alfa Slab One","Rozha One",Georgia,serif;font-weight:400;font-style:normal;line-height:1;color:#141210;margin:.04em .04em;padding:.03em .08em .05em;background:#e9e3d3;box-shadow:.03em .06em .08em rgba(20,14,8,.55);text-shadow:none;-webkit-text-fill-color:currentColor}
.cl.c1{background:#f4f0e6;font-family:"Oswald","Alfa Slab One",sans-serif;font-weight:700;padding-inline:.12em}
.cl.c2{background:#141210;color:#ece6d6}
.cl.c3{background:#d9d0ba url(assets/newsprint.webp) 30% 40%/260px;color:#141210}
.cl.c4{background:#ded6c2;font-family:"Rozha One","Alfa Slab One",serif}
.cl.c5{background:#efe9dc;clip-path:polygon(4% 0,100% 3%,97% 100%,0 96%)}
.cl.c6{background:#e3dccb;clip-path:polygon(0 4%,96% 0,100% 95%,3% 100%)}
html body[data-m=dagger] :is(h1.mast,h2,.result){font-family:"Alfa Slab One",serif;background:none;box-shadow:none;padding:0;transform:none;text-transform:none;display:block;width:auto}
html body[data-m=dagger] h1.mast{font-size:clamp(2.5rem,12vw,5.6rem);line-height:1.12}
html body[data-m=dagger] h2{font-size:clamp(2.3rem,11vw,5rem);line-height:1.12}
html body[data-m=dagger] .result{font-size:clamp(1.5rem,7vw,2.3rem);line-height:1.2;margin-top:1.4rem}
/* ===== v20: looks-found row ===== */
.found{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.28rem;margin:1.3rem auto 0;width:min(21rem,100%);padding:.55rem .7rem;border-radius:16px;background:rgba(12,10,8,.72);border:1px solid rgba(255,255,255,.14);box-shadow:0 6px 18px rgba(0,0,0,.3)}
.found .fnl{display:block;width:100%;flex:0 0 100%;-webkit-text-fill-color:currentColor;filter:none;background:none;font:600 .72rem/1 "DM Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#e9e2d6;opacity:.85;margin-bottom:.15rem;text-shadow:none}
.fc{width:1.62rem;height:1.62rem;padding:.22rem;border-radius:8px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#f4ecdf;display:grid;place-items:center;cursor:pointer;opacity:.28;transition:transform .15s,opacity .2s}
.fc svg,.fc img{width:100%;height:100%;display:block;fill:currentColor;object-fit:contain;border-radius:50%}
.fc.on{opacity:1;background:rgba(255,255,255,.12)}.fc.on:hover{transform:translateY(-2px) scale(1.08)}
.fc.cur{border-color:#ffd24a;box-shadow:0 0 0 1px #ffd24a,0 0 10px rgba(255,210,74,.5)}
.fc:disabled{cursor:default}
body[data-f=ufo] .found{margin-top:.2rem}

html body[data-m=daisy] .tag{text-shadow:none;font-weight:600}
.found{gap:.2rem;width:fit-content;max-width:100%}.found .fc{flex:none;width:1.4rem;height:1.4rem;padding:.18rem}
body[data-f=logo] .btn .gl{filter:brightness(1.55) saturate(1.1)}
body[data-f=logo] .btn.pri .gl{filter:hue-rotate(55deg) saturate(1.2) brightness(1.5)}


/* ===== v21 ===== */
.btns{align-items:flex-start}
/* gallery: two even, centred columns on phones; frames follow the theme */
.grid{justify-content:center}
.slot:nth-child(5n+3){grid-row:auto;--ar:4/5}
.slot .ph{overflow:hidden}.slot .ph span{overflow-wrap:anywhere;max-width:100%}
@media(max-width:640px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem .8rem}.slot.big{grid-column:1/-1;--ar:3/2}.slot{border-width:7px;border-bottom-width:30px}.slot .ph{font-size:.72rem;padding:.4rem}.slot .ph svg{width:30px;height:30px}}
body[data-f] .slot::before{display:none}
body[data-f=logo] .slot{background:#3a2418;border:8px solid #6b4630;border-bottom-width:8px;border-radius:14px;outline:2px dashed #e9a15c;outline-offset:-6px;box-shadow:0 10px 24px rgba(0,0,0,.55)}
body[data-f=bolt] .slot{background:#070b14;border:2px solid #c9efff;border-radius:14px;box-shadow:0 0 5px #4fc3ff,0 0 20px rgba(30,144,255,.7),inset 0 0 12px rgba(79,195,255,.4)}
body[data-f=bolt] .slot:nth-child(even){border-color:#ffc2ef;box-shadow:0 0 5px #ff3cc8,0 0 20px rgba(255,31,180,.7),inset 0 0 12px rgba(255,60,200,.4)}
body[data-f=ufo] .slot{background:#f6eed6;border:8px solid #f4f0e6;border-bottom-width:30px;border-radius:2px;box-shadow:0 8px 18px rgba(60,40,10,.35)}
body[data-f=ufo] .slot::after{content:"EVIDENCE";position:absolute;right:4px;bottom:-24px;font:700 .68rem "Courier Prime",monospace;color:#a8231d;border:1.5px solid #a8231d;padding:.1em .3em;transform:rotate(-4deg)}
body[data-f=dagger] .slot{background:#efe9dc url(assets/newsprint.webp) 0 0/250px;border:8px solid #efe9dc;border-bottom-width:8px;border-radius:0;clip-path:polygon(1% 0,99% 2%,100% 98%,2% 100%);box-shadow:none;filter:drop-shadow(0 6px 10px rgba(30,20,10,.4))}
body[data-f=crown] .slot{background:#0b0a06;border:7px solid transparent;border-radius:6px;background:linear-gradient(#0b0a06,#0b0a06) padding-box,linear-gradient(135deg,#fff1a8,#d6a936 30%,#8a5a10 50%,#f2c14e 70%,#fff1a8) border-box;box-shadow:0 10px 26px rgba(70,45,0,.5)}
body[data-f=skull] .slot{background:#ebe8e1;border:4px solid #111;border-radius:18px 6px 20px 8px/8px 18px 6px 16px;box-shadow:5px 7px 0 rgba(0,0,0,.2)}
body[data-f=daisy] .slot{background:#fffaf0;border:8px solid #fffaf0;border-bottom-width:8px;border-radius:10px;outline:1.5px solid #c98a62;outline-offset:-5px;box-shadow:0 10px 24px rgba(90,60,30,.25)}
body[data-f=dice] .slot{background:var(--rivets),linear-gradient(170deg,#3f3d39,#262422);border:6px solid #2c2a27;border-radius:6px;outline:2px solid #151412;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 24px rgba(0,0,0,.55)}
body[data-f=eye] .slot{border:6px solid transparent;border-radius:18px;background:linear-gradient(#2c0d3c,#2c0d3c) padding-box,url(assets/holo.webp) 0 0/240px border-box;box-shadow:0 12px 30px rgba(0,0,0,.45)}
body[data-f=seven] .slot{background:#160f11;border:5px solid transparent;border-radius:10px;background:radial-gradient(120% 90% at 30% 0,#2a1a1e,#120c0e) padding-box,linear-gradient(135deg,#e9b07a,#9a5a2e 45%,#f2c14e 60%,#9a5a2e) border-box;box-shadow:0 0 0 1px #3a1d0a,0 10px 26px rgba(0,0,0,.6)}
body:is([data-f=logo],[data-f=bolt],[data-f=crown],[data-f=dice],[data-f=eye],[data-f=seven]) .slot .ph{color:#e9e2d6;border-color:rgba(255,255,255,.3)}
body[data-f] .slot,body[data-f] .slot:nth-child(even),body[data-f] .slot:nth-child(3n){transform:rotate(-1deg)}
body[data-f] .slot:nth-child(even){transform:rotate(.9deg)}
body:is([data-f=bolt],[data-f=crown],[data-f=dice],[data-f=eye],[data-f=seven],[data-f=logo]) .slot{transform:none!important}
/* Eye: the holographic surfaces slide and flash as the phone tilts */
body[data-w=eye].tilt-on .glint{display:block}
body[data-m=eye].tilt-on .machine:not(.spinning){transform:perspective(1100px) rotateY(calc(var(--tx)*9deg)) rotateX(calc(var(--ty)*-7deg));will-change:transform}
body[data-f=eye].tilt-on :is(nav ul,.btn,.social a){background-position:calc(var(--tx)*90px) calc(var(--ty)*60px);filter:brightness(calc(1 + var(--tx)*var(--tx)*.22 + var(--ty)*var(--ty)*.12)) saturate(calc(1 + var(--tx)*var(--tx)*.5))}
body[data-f=eye].tilt-on :is(.card,.player,.item,.tile,.slot){background-position:0 0,calc(var(--tx)*110px) calc(var(--ty)*70px)}
body[data-m=eye].tilt-on :is(h1.mast,h2){background-position:calc(var(--tx)*120px) calc(var(--ty)*80px)}
body[data-f=eye].tilt-on .btn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%) no-repeat;background-size:300% 100%;background-position:calc(50% - var(--tx)*60%) 0;mix-blend-mode:soft-light}
.grid .slot:nth-child(n){grid-row:auto;--ar:4/5}.grid .slot.big{--ar:3/2}
body .pl-l::before{background:rgba(255,250,240,.56);-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1)}
body .pl-d::before{background:rgba(10,9,8,.46)}

/* flower lettering: dark edge + soft shadow so it reads on any background */
html body [data-gk=b]{filter:drop-shadow(0 0 .6px #2e1c10) drop-shadow(0 0 1px #2e1c10) drop-shadow(0 1px 0 rgba(46,28,16,.9)) drop-shadow(0 4px 7px rgba(40,24,10,.55))!important}
html body [data-gk=b] .gl{filter:saturate(1.25) contrast(1.12) brightness(.93)}

/* About: the line-up */
.lu-h{margin:1.6rem 0 .6rem}
.lineup{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.lineup li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.7rem 1rem;border-radius:12px;background:var(--card);border:1.5px solid var(--bd);color:var(--cream)}
.lineup b{font-weight:700}.lineup span{color:var(--mut);font-size:.92rem;text-align:right}
body[data-w=dagger] .about>div:first-child>p{background:rgba(242,237,224,.93);padding:.7rem .9rem;box-shadow:0 6px 14px rgba(30,20,10,.25);color:#141210}
body[data-w=dagger] .view>.wrap>.lede{background:rgba(242,237,224,.93);padding:.4rem .8rem;width:fit-content;color:#141210}

/* ===== Daisy lettering v3: crisp serif letters filled with the flower art ===== */
html body[data-m=daisy] :is(h1.mast,h2,.result){font-family:"Playfair Display","Cormorant Garamond",Georgia,serif;font-weight:900;font-style:normal;letter-spacing:.01em;text-transform:none;background:url(assets/floral.webp) 0 0/210px;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.2px #3b2415;text-shadow:none;filter:drop-shadow(0 1px 0 #3b2415) drop-shadow(0 4px 6px rgba(50,30,12,.4))!important}
html body[data-m=daisy] h1.mast{font-size:clamp(2.9rem,13.5vw,6rem);line-height:1.04}
html body[data-m=daisy] h2{font-size:clamp(2.8rem,13vw,5.6rem);line-height:1.05}
html body[data-m=daisy] .result{font-size:clamp(1.9rem,8.6vw,2.9rem);line-height:1.12}