/* סיבוב אש – עיצוב "משחק" מבריק: מסגרות זהב, כפתורים תלת-ממדיים, גלגל צבעוני עם נורות */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
:root{
  --bg1:#9a1f3f;--bg2:#2a0620;--bg3:#ff6a00;
  --fg:#fff;--mut:rgba(255,236,220,.82);
  --rim1:#ffe27a;--rim2:#ffb300;--rim3:#a85d00;
  --btn1:#ffc93c;--btn2:#ff7a00;--btn3:#a83a00;
  --sec1:#c157ff;--sec2:#7b22e0;--sec3:#3f0a86;
  --fire1:#ffb02e;--fire2:#ff4d00;--fire3:#9e2300;
  --panel1:#5c1550;--panel2:#2e0830;
  --ac:#ffb300;--ac2:#ffe27a;--chip1:#8b2bd9;--chip2:#5a12a3;
  --s0:#e8213a;--s1:#ff8a00;--s2:#ffc400;--s3:#9b30ff;--s4:#1e7bff;--s5:#ff2e93;--s6:#18b86b;--s7:#6a1bd1;
  --disp:"Rubik","Secular One","Heebo",system-ui,sans-serif;
  --body:"Heebo","Rubik",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --r:20px
}
html,body{margin:0;min-height:100%}
body{background:radial-gradient(90% 60% at 50% 30%,var(--bg1),var(--bg2) 75%) fixed,var(--bg2);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.5;overflow-x:hidden;transition:background .5s}
/* confetti + embers */
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0}
body::before{opacity:.55;background:
  radial-gradient(3px 7px at 8% 12%,var(--s2),transparent 70%),radial-gradient(3px 7px at 22% 6%,var(--s4),transparent 70%),
  radial-gradient(4px 4px at 85% 9%,var(--s5),transparent 70%),radial-gradient(3px 8px at 93% 22%,var(--s6),transparent 70%),
  radial-gradient(4px 4px at 4% 40%,var(--s3),transparent 70%),radial-gradient(3px 7px at 96% 48%,var(--s2),transparent 70%),
  radial-gradient(4px 4px at 12% 70%,var(--s5),transparent 70%),radial-gradient(3px 8px at 90% 76%,var(--s4),transparent 70%),
  radial-gradient(4px 4px at 30% 92%,var(--s2),transparent 70%),radial-gradient(3px 7px at 70% 95%,var(--s3),transparent 70%)}
body::after{background:
  radial-gradient(2px 2px at 10% 100%,#ffd36b,transparent),radial-gradient(2px 2px at 30% 100%,#ff8a2b,transparent),
  radial-gradient(3px 3px at 55% 100%,#ffd36b,transparent),radial-gradient(2px 2px at 75% 100%,#ff6a00,transparent),
  radial-gradient(2px 2px at 90% 100%,#ffe9a8,transparent),
  radial-gradient(120% 40% at 50% 110%,rgba(255,106,0,.45),transparent 60%);
  background-size:100% 100%;animation:embers 7s linear infinite}
@keyframes embers{0%{background-position:0 0,0 0,0 0,0 0,0 0,0 0}100%{background-position:20px -110vh,-30px -120vh,10px -100vh,-15px -115vh,25px -105vh,0 0}}
.screen{max-width:560px;margin:0 auto;min-height:100vh;min-height:100dvh;padding:0 16px calc(24px + env(safe-area-inset-bottom));position:relative;z-index:1}
main{padding-top:6px;display:flex;flex-direction:column;gap:13px}
main.center{align-items:center;text-align:center}
h1,h2,.pname-big,.timer,.big18{font-family:var(--disp);font-weight:900;margin:0;line-height:1.15;text-shadow:0 2px 0 rgba(0,0,0,.45),0 0 14px rgba(0,0,0,.35)}
h1{font-size:28px}h2{font-size:22px}
.sec{font-size:19px;margin-top:6px;color:var(--ac2)}
p{margin:0}.muted{color:var(--mut);font-size:15px}.center-t{text-align:center}
button,input,a.btn{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:3px solid #fff;outline-offset:3px}
.skip{position:absolute;right:-999px}.skip:focus{right:8px;top:8px;z-index:99;background:#fff;color:#000;padding:8px;border-radius:8px}

/* shared "gold rim" + gloss */
.rim{border:3px solid var(--rim2);box-shadow:0 0 0 2px var(--rim3),inset 0 0 0 2px rgba(255,255,255,.18),0 10px 24px rgba(0,0,0,.4)}

/* top bar */
.top{display:flex;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top)) 0 8px;position:sticky;top:0;z-index:5}
.brand{flex:1;text-align:center}
.mini-logo{font-family:var(--disp);font-weight:900;font-size:24px;background:linear-gradient(180deg,#fff8c0,#ffc400 50%,#ff7a00);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #5a0b00) drop-shadow(0 0 1px #5a0b00)}
.ib{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 50% 30%,var(--chip1),var(--chip2));border:2px solid var(--rim2);box-shadow:0 3px 0 var(--rim3),0 6px 12px rgba(0,0,0,.35);font-size:18px;display:grid;place-items:center;cursor:pointer;padding:0;flex:none;color:#fff}
.ib:active{transform:translateY(2px);box-shadow:0 1px 0 var(--rim3)}
.ib.ghost{visibility:hidden}.ib.sm{width:32px;height:32px;font-size:13px}

/* buttons */
.btn{position:relative;display:block;width:100%;text-align:center;text-decoration:none;padding:14px 18px;border-radius:999px;cursor:pointer;font-family:var(--disp);font-weight:800;font-size:18px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35);
  background:linear-gradient(180deg,var(--sec1),var(--sec2));border:2px solid var(--rim2);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.18),0 5px 0 var(--sec3),0 9px 18px rgba(0,0,0,.4);transition:transform .1s,box-shadow .1s,filter .2s;overflow:hidden}
.btn::after{content:"";position:absolute;inset:2px 10% 52% 10%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0));pointer-events:none}
.btn:active{transform:translateY(4px);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 1px 0 var(--sec3),0 3px 8px rgba(0,0,0,.4)}
.btn:disabled{filter:grayscale(.7) brightness(.8);cursor:not-allowed}
.btn.primary{background:linear-gradient(180deg,var(--btn1),var(--btn2));box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(0,0,0,.15),0 5px 0 var(--btn3),0 9px 18px rgba(0,0,0,.4)}
.btn.primary:active{box-shadow:0 1px 0 var(--btn3)}
.btn.ghost{background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 4px 0 rgba(0,0,0,.35);font-weight:700;font-size:16px}
.btn.ghost::after{display:none}
.btn.danger{background:linear-gradient(180deg,#ff5a5a,#c4001a);box-shadow:0 5px 0 #6b000e}
.btn.sm{width:auto;padding:9px 16px;font-size:15px}
.btn.huge{font-size:24px;padding:17px;font-weight:900}
.linkbtn{background:none;border:0;padding:0;color:var(--ac2);text-decoration:underline;cursor:pointer;font-weight:700}
.link{color:var(--ac2);text-align:center;font-weight:700}
.credit{display:block;text-align:center;color:var(--mut);font-size:14px;margin:16px 0 4px;text-decoration:none}
.err{color:#ffd0c8;min-height:1.4em;font-size:15px;text-align:center;font-weight:700}

/* logo */
.hero{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.logo{position:relative;padding-top:58px;margin-top:2px}
.flames{position:absolute;left:50%;top:-6px;width:360px;height:140px;transform:translateX(-50%);overflow:visible;filter:drop-shadow(0 0 10px rgba(255,120,0,.8))}
.fl{transform-box:fill-box;transform-origin:50% 100%;animation:flick 1.1s ease-in-out infinite alternate}
@keyframes flick{0%{scale:1 1}50%{scale:.92 1.12}100%{scale:1.06 .94}}
.logo-plate{position:relative;padding:6px 26px 10px;border-radius:22px;background:linear-gradient(180deg,#a3171f,#5a0712);border:4px solid var(--rim2);box-shadow:0 0 0 3px var(--rim3),inset 0 3px 0 rgba(255,255,255,.25),0 12px 26px rgba(0,0,0,.5)}
.logo-t{position:relative;font-size:58px;line-height:1.05;text-shadow:none;letter-spacing:.5px}
.logo-t::before{content:attr(data-t);position:absolute;inset:0;-webkit-text-stroke:12px #3d0500;color:#3d0500;z-index:0;filter:drop-shadow(0 5px 0 #2a0300)}
.logo-t span{position:relative;z-index:1;background:linear-gradient(180deg,#fffbd0 5%,#ffd23a 45%,#ff8f00 75%,#ff5a00);-webkit-background-clip:text;background-clip:text;color:transparent}
.ribbon{position:relative;margin:-14px auto 0;width:max-content;padding:4px 22px;border-radius:999px;background:linear-gradient(180deg,var(--sec1),var(--sec2));border:3px solid var(--rim2);font-family:var(--disp);font-weight:900;font-size:21px;box-shadow:0 4px 0 var(--sec3);text-shadow:0 2px 0 rgba(0,0,0,.4)}
.tag{color:var(--mut);font-weight:700}

/* wheel */
.wheel{pointer-events:none;position:relative;width:min(86vw,50vh,430px);aspect-ratio:1;margin:8px auto 2px}
.wheel.deco{width:min(62vw,34vh,280px)}
.wframe{position:absolute;inset:-5%;width:110%;height:110%;z-index:2;filter:drop-shadow(0 10px 16px rgba(0,0,0,.5))}
.bulb{fill:#fff6c8;filter:drop-shadow(0 0 3px #ffe27a)}
.wheel .bulb{animation:bulb 1.2s steps(1) infinite}.wheel .bulb.b2{animation-delay:.6s}
.wheel.running .bulb{animation-duration:.25s}.wheel.running .bulb.b2{animation-delay:.12s}
.wheel.won .bulb{animation:bulb .35s steps(1) 6}
@keyframes bulb{0%{fill:#fff6c8}50%{fill:#b36b00}}
.wrot{position:absolute;inset:0;z-index:1}
.spin-slow{animation:slowspin 24s linear infinite}
@keyframes slowspin{to{transform:rotate(360deg)}}
.wsvg{width:100%;height:100%}
.seg{stroke:rgba(255,255,255,.85);stroke-width:1.4}
.seg.s0{fill:var(--s0)}.seg.s1{fill:var(--s1)}.seg.s2{fill:var(--s2)}.seg.s3{fill:var(--s3)}.seg.s4{fill:var(--s4)}.seg.s5{fill:var(--s5)}.seg.s6{fill:var(--s6)}.seg.s7{fill:var(--s7)}
.segi{font-size:19px;font-weight:900;fill:#fff;paint-order:stroke;stroke:rgba(0,0,0,.45);stroke-width:2.5px;font-family:var(--disp)}
.segt{font-size:13px;font-weight:900;fill:#fff;font-family:var(--disp);paint-order:stroke;stroke:rgba(0,0,0,.55);stroke-width:3px}
.whub{position:absolute;left:50%;top:50%;width:26%;height:26%;transform:translate(-50%,-50%);z-index:3;border-radius:50%;background:radial-gradient(circle at 40% 30%,#fff3b0,var(--rim2) 45%,var(--rim3));box-shadow:0 0 0 3px rgba(0,0,0,.3),0 6px 14px rgba(0,0,0,.5);display:grid;place-items:center}
.whub .bottle{width:46%;height:92%;transform:rotate(35deg);filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.pointer{position:absolute;left:50%;top:-9%;transform:translateX(-50%);width:15%;aspect-ratio:.8;z-index:4;background:linear-gradient(180deg,#fff6c0,var(--rim2) 50%,var(--rim3));clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 4px 3px rgba(0,0,0,.5))}

/* home style tiles */
.styles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.style-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;text-align:center;padding:12px 6px 10px;border-radius:18px;cursor:pointer;min-height:132px;color:#fff;
  background:linear-gradient(180deg,var(--tc1,#7b2bd0),var(--tc2,#3d0d7a));border:3px solid var(--rim2);box-shadow:0 0 0 2px var(--rim3),inset 0 3px 0 rgba(255,255,255,.3),0 6px 0 rgba(0,0,0,.35),0 10px 18px rgba(0,0,0,.35);transition:transform .12s;overflow:hidden}
.style-card::after{content:"";position:absolute;inset:3px 8% 60% 8%;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent);pointer-events:none}
.style-card:active{transform:translateY(3px) scale(.98)}
.si{font-size:34px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.4))}
.sn{font-family:var(--disp);font-weight:900;font-size:17px;text-shadow:0 2px 0 rgba(0,0,0,.45)}
.sd{font-size:11.5px;line-height:1.3;color:rgba(255,255,255,.85)}
.b18{position:absolute;top:6px;left:6px;background:#e0102f;color:#fff;border:2px solid #fff;border-radius:8px;padding:0 5px;font-size:12px;font-weight:900}
.t-family{--tc1:#ffb422;--tc2:#e8620c}.t-friends{--tc1:#ff4fc4;--tc2:#9b1ac9}.t-icebreak{--tc1:#3ec7ff;--tc2:#1a63d8}
.t-couple{--tc1:#ff6f9a;--tc2:#c0134f}.t-custom{--tc1:#5ad48a;--tc2:#138a55}.t-sexy{--tc1:#e0102f;--tc2:#5c0012}.t-wild{--tc1:#ff7a00;--tc2:#8a1600}
.how{background:linear-gradient(180deg,var(--panel1),var(--panel2));border:2px solid var(--rim3);border-radius:var(--r);padding:12px 14px;font-size:15px;color:var(--mut)}
.how b{color:#fff}

/* panels */
.prow,.mode,.lvl,.clist li,.title-c,.mbox{background:linear-gradient(180deg,var(--panel1),var(--panel2));border:2px solid var(--rim2);box-shadow:0 0 0 2px var(--rim3),inset 0 2px 0 rgba(255,255,255,.15),0 6px 14px rgba(0,0,0,.35)}
.plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.prow{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;border-radius:var(--r);padding:10px}
.prow .ok{grid-column:1/-1;font-size:14px;display:flex;align-items:center;gap:8px;color:var(--mut)}
.prow .ok input,.like input{width:22px;height:22px;accent-color:var(--btn2)}
.pname,.addrow input{width:100%;min-width:0;padding:11px 14px;border-radius:999px;border:2px solid rgba(0,0,0,.25);background:#fff;color:#2a0620;font-size:17px;font-weight:700;box-shadow:inset 0 3px 6px rgba(0,0,0,.18)}
.gsw{display:flex;border-radius:999px;overflow:hidden;border:2px solid var(--rim2);background:rgba(0,0,0,.25)}
.gsw button{border:0;background:transparent;padding:9px 12px;cursor:pointer;font-size:15px;font-weight:700;color:#fff}
.gsw button.on{background:linear-gradient(180deg,var(--btn1),var(--btn2));color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.clist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.clist li{display:flex;gap:8px;align-items:center;justify-content:space-between;border-radius:14px;padding:8px 12px;font-size:15px}
.clist li.muted{box-shadow:none;border-style:dashed;background:transparent}
.addrow{display:flex;gap:8px;align-items:center}

/* board (bottle) */
.board{position:relative;width:min(92vw,58vh,520px);aspect-ratio:1;margin:4px auto}
.board.small{width:min(84vw,46vh,420px)}
.ring{position:absolute;inset:11%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.1),rgba(0,0,0,.25) 70%);border:2px dashed rgba(255,255,255,.3)}
.ring.gold{border:10px solid var(--rim2);box-shadow:0 0 0 3px var(--rim3),inset 0 0 0 3px var(--rim3),inset 0 0 40px rgba(0,0,0,.45),0 0 30px rgba(255,170,0,.35)}
.ring.gold::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:4px dotted #fff6c8;filter:drop-shadow(0 0 3px #ffe27a);animation:dots 2s linear infinite}
@keyframes dots{to{transform:rotate(15deg)}}
.chip{position:absolute;transform:translate(-50%,-50%);padding:7px 14px;border-radius:999px;background:linear-gradient(180deg,var(--chip1),var(--chip2));border:2px solid var(--rim2);box-shadow:0 3px 0 rgba(0,0,0,.35);font-weight:800;font-size:15px;white-space:nowrap;cursor:pointer;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.chip.sel{background:linear-gradient(180deg,var(--btn1),var(--btn2))}
.chip.seat{cursor:default}
.chip.hit{background:linear-gradient(180deg,var(--btn1),var(--btn2));box-shadow:0 0 0 5px rgba(255,226,122,.35),0 0 24px var(--btn1);animation:pop .6s ease}
@keyframes pop{0%{scale:1}40%{scale:1.35}100%{scale:1.15}}
.mid{position:absolute;inset:0;display:grid;place-items:center;font-size:40px;color:rgba(255,255,255,.3);pointer-events:none}
.spinner{pointer-events:none;position:absolute;left:50%;top:50%;width:21%;height:62%;margin:-31% 0 0 -10.5%;transform-origin:50% 50%;filter:drop-shadow(0 10px 14px rgba(0,0,0,.55))}
.spinner svg,.mi svg{width:100%;height:100%}
.scores{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;font-size:13px}
.scores span{background:rgba(0,0,0,.3);border:1px solid var(--rim3);border-radius:999px;padding:3px 10px}
.scores b{color:var(--ac2)}

/* modes */
.modes{display:grid;gap:14px}
.mode{display:grid;grid-template-columns:70px 1fr;grid-template-rows:auto auto;column-gap:12px;text-align:right;align-items:center;padding:14px;border-radius:var(--r);cursor:pointer;color:#fff}
.mode:active{transform:translateY(2px)}
.mode .mi{grid-row:1/3;height:92px;display:grid;place-items:center}.mode .mi.big{font-size:46px}
.mode b{font-family:var(--disp);font-weight:900;font-size:20px}.mode small{color:var(--mut)}

/* levels */
.lvls{display:flex;flex-direction:column;gap:9px}
.lvl{display:flex;gap:12px;align-items:center;text-align:right;padding:10px 12px;border-radius:16px;cursor:pointer;color:#fff}
.lvl>b{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;font-family:var(--disp);font-weight:900;font-size:21px;background:radial-gradient(circle at 40% 30%,#fff3b0,var(--rim2) 50%,var(--rim3));color:#4a1b00;box-shadow:0 3px 0 rgba(0,0,0,.35)}
.lvl span{display:flex;flex-direction:column}.lvl small{color:var(--mut);font-size:13px}
.lvl.on{background:linear-gradient(180deg,var(--btn1),var(--btn2))}.lvl.on small{color:#fff}
.likes{display:flex;flex-wrap:wrap;gap:8px}
.like{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:linear-gradient(180deg,var(--chip1),var(--chip2));border:2px solid var(--rim2);cursor:pointer;font-weight:700}
.big18{font-size:84px;color:#ff2340}

/* choice orbs */
.whose{color:var(--mut);font-size:16px;font-weight:700}
.pname-big{font-size:48px;background:linear-gradient(180deg,#fffbd0,#ffd23a 50%,#ff8f00);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 3px 0 #3d0500)}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;margin-top:4px}
.pick{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;cursor:pointer;padding:0;color:#fff}
.orb{position:relative;width:min(40vw,170px);aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:6px solid var(--rim2);box-shadow:0 0 0 3px var(--rim3),inset 0 -10px 20px rgba(0,0,0,.3),inset 0 8px 14px rgba(255,255,255,.35),0 8px 0 rgba(0,0,0,.35),0 14px 26px rgba(0,0,0,.45);transition:transform .12s}
.orb::after{content:"";position:absolute;inset:6% 18% 55% 18%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.55),transparent)}
.pick:active .orb{transform:translateY(5px) scale(.97)}
.pick.secret .orb{background:radial-gradient(circle at 50% 35%,var(--sec1),var(--sec2) 70%,var(--sec3))}
.pick.fire .orb{background:radial-gradient(circle at 50% 35%,var(--fire1),var(--fire2) 70%,var(--fire3))}
.orb i{font-style:normal;font-family:var(--disp);font-weight:900;font-size:56px;line-height:1;text-shadow:0 4px 0 rgba(0,0,0,.35)}
.orb b{font-family:var(--disp);font-weight:900;font-size:30px;line-height:1.1;text-shadow:0 3px 0 rgba(0,0,0,.45)}
.pick small{font-size:13px;color:var(--mut);font-weight:700}

/* card */
.card{position:relative;width:100%;background:linear-gradient(180deg,var(--panel1),var(--panel2));color:#fff;border-radius:24px;padding:30px 20px 22px;text-align:center;border:4px solid var(--rim2);box-shadow:0 0 0 3px var(--rim3),inset 0 3px 0 rgba(255,255,255,.2),0 14px 30px rgba(0,0,0,.5);margin-top:16px}
.card.flip{animation:flip .6s ease both}
@keyframes flip{0%{transform:perspective(800px) rotateY(90deg);opacity:0}100%{transform:perspective(800px) rotateY(0);opacity:1}}
.ctype{position:absolute;top:-20px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:3px 20px;border-radius:999px;font-family:var(--disp);font-weight:900;font-size:20px;background:linear-gradient(180deg,var(--fire1),var(--fire2));border:3px solid var(--rim2);box-shadow:0 4px 0 var(--fire3);text-shadow:0 2px 0 rgba(0,0,0,.35)}
.card.t-s .ctype{background:linear-gradient(180deg,var(--sec1),var(--sec2));box-shadow:0 4px 0 var(--sec3)}
.lv{font-family:var(--body);font-size:12px;background:#fff;color:#7a0016;border-radius:8px;padding:1px 7px;vertical-align:middle;text-shadow:none}
.ctext{font-size:23px;font-weight:800;line-height:1.45;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.with{margin-top:12px;font-weight:900;color:var(--ac2)}.props{margin-top:8px;font-size:14px;opacity:.8}
.acts{display:flex;flex-direction:column;gap:12px;width:100%}
.pickp,.consent{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.timer{font-size:88px;background:linear-gradient(180deg,#fffbd0,#ffd23a 50%,#ff8f00);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 4px 0 #3d0500);font-variant-numeric:tabular-nums}
.timer.done{animation:blink 1s infinite}
@keyframes blink{50%{opacity:.3}}

/* end */
.titles{display:grid;gap:10px;width:100%}
.title-c{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;text-align:right;border-radius:var(--r);padding:10px 14px;align-items:center}
.title-c span{grid-row:1/3;font-size:36px}.title-c b{color:var(--ac2)}.title-c em{font-style:normal;font-weight:900;font-size:20px}
.rank{width:100%;margin:0;padding:0;list-style:none;counter-reset:r}
.rank li{counter-increment:r;display:flex;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.15);font-weight:700}
.rank li::before{content:counter(r) ".";color:var(--mut);margin-left:10px}
.rank li span{flex:1;text-align:right}.rank b{color:var(--ac2)}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:grid;place-items:center;z-index:50;padding:16px}
.mbox{color:#fff;border-radius:22px;padding:20px;max-width:520px;width:100%;max-height:85vh;overflow:auto;display:flex;flex-direction:column;gap:10px}
.mbtns{display:flex;gap:10px;margin-top:6px}.mbtns .btn{flex:1}
.disc{padding-inline-start:20px;margin:0;display:flex;flex-direction:column;gap:6px;font-size:15px}

/* style switch wipe */
.wipe{position:fixed;inset:0;z-index:60;pointer-events:none;background:radial-gradient(circle,#fff6c0,var(--btn1) 25%,var(--btn2) 50%,var(--bg2) 80%);animation:wipe .9s ease forwards}
@keyframes wipe{0%{clip-path:circle(0% at 50% 50%)}45%{clip-path:circle(80% at 50% 50%)}55%{clip-path:circle(80% at 50% 50%);opacity:1}100%{clip-path:circle(80% at 50% 50%);opacity:0}}

/* ===== THEMES: same game look, different palette ===== */
body[data-theme=family]{--bg1:#4cc3ff;--bg2:#1b3fb8;--panel1:#3d6ff0;--panel2:#2340b0;--chip1:#ff8a00;--chip2:#e35a00;
  --sec1:#7dd3ff;--sec2:#2d7bf0;--sec3:#0d3a9a;--s0:#ff3b5c;--s1:#ffb300;--s2:#ffe14d;--s3:#30d17c;--s4:#2d9bff;--s5:#ff6fd1;--s6:#ff7a1a;--s7:#8b5cff;--mut:rgba(255,255,255,.88)}
body[data-theme=friends]{--bg1:#7a1fd1;--bg2:#13042f;--panel1:#4b168c;--panel2:#22074d;--chip1:#ff3ec8;--chip2:#a0129a;
  --btn1:#4ff7e6;--btn2:#00b7c7;--btn3:#00616e;--sec1:#ff5fd6;--sec2:#c4129f;--sec3:#5e0750;
  --s0:#ff2bd6;--s1:#22f0e0;--s2:#b7ff3c;--s3:#7b2cff;--s4:#ff2bd6;--s5:#22f0e0;--s6:#ffe14d;--s7:#7b2cff}
body[data-theme=icebreak]{--bg1:#3fd0ff;--bg2:#0b3f9a;--panel1:#1e7fe0;--panel2:#0c4aa8;--chip1:#45b8ff;--chip2:#1663d6;
  --rim1:#ffffff;--rim2:#d8ecff;--rim3:#6d93c4;--btn1:#ffffff;--btn2:#bfe4ff;--btn3:#5a86b8;--sec1:#5ad1ff;--sec2:#1b7ae0;--sec3:#0a3f8a;
  --s0:#1e88e5;--s1:#4fc3f7;--s2:#b3e5fc;--s3:#0d47a1;--s4:#26c6da;--s5:#81d4fa;--s6:#1565c0;--s7:#00acc1}
body[data-theme=icebreak] .btn.primary{color:#0b3f9a;text-shadow:0 1px 0 #fff}
body[data-theme=couple]{--bg1:#e0266a;--bg2:#4a0525;--panel1:#a3124a;--panel2:#5e0a2c;--chip1:#ff6f9a;--chip2:#c0134f;
  --rim1:#ffe0d0;--rim2:#f5b9a0;--rim3:#a35c4a;--btn1:#ffb3c8;--btn2:#ff4f86;--btn3:#9e0f3d;--sec1:#ff8fb3;--sec2:#d81b60;--sec3:#6d0a2f;
  --s0:#ff4f86;--s1:#ff8fb3;--s2:#ffd1dc;--s3:#c2185b;--s4:#ff6f61;--s5:#f8bbd0;--s6:#ad1457;--s7:#ff80ab}
body[data-theme=sexy]{--bg1:#8a0019;--bg2:#100005;--panel1:#5a0012;--panel2:#22000a;--chip1:#b3001f;--chip2:#5c0010;
  --btn1:#ff4060;--btn2:#c4001f;--btn3:#5c000e;--sec1:#6a1030;--sec2:#2e0516;--sec3:#120008;--fire1:#ff4060;--fire2:#b3001c;--fire3:#4a0009;
  --s0:#c4001f;--s1:#1a0006;--s2:#e8b04a;--s3:#7a0016;--s4:#c4001f;--s5:#1a0006;--s6:#e8b04a;--s7:#7a0016}
body[data-theme=wild]{--bg1:#c43a00;--bg2:#120200;--panel1:#6e1500;--panel2:#2a0600;--chip1:#ff6a00;--chip2:#a82400;
  --sec1:#3a3a3a;--sec2:#141414;--sec3:#000;--s0:#ff3d00;--s1:#ffb300;--s2:#141414;--s3:#ff6a00;--s4:#ffd000;--s5:#c41200;--s6:#141414;--s7:#ff8a00}
body[data-theme=wild]::after{background:radial-gradient(2px 2px at 10% 100%,#ffd36b,transparent),radial-gradient(3px 3px at 30% 100%,#ff8a2b,transparent),radial-gradient(3px 3px at 55% 100%,#ffd36b,transparent),radial-gradient(2px 2px at 75% 100%,#ff6a00,transparent),radial-gradient(3px 3px at 90% 100%,#ffe9a8,transparent),radial-gradient(120% 55% at 50% 110%,rgba(255,80,0,.75),transparent 65%);animation-duration:4s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:360px){.styles{grid-template-columns:1fr 1fr}.ctext{font-size:20px}.logo-t{font-size:46px}}