:root{
  --bg:#080810;--panel:#10101a;--card-bg:#14141f;
  --a1:#ff2d55;--a2:#ffd60a;--a3:#30d158;--a4:#0a84ff;--a5:#bf5af2;--a6:#ff6b35;
  --text:#f0f0f5;--muted:#777;--bd:#1e1e2e;
  --t0:#30d158;--t1:#0a84ff;--t2:#f97316;--t3:#a855f7;--t4:#ff2d55;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--text);font-family:'Barlow Condensed',sans-serif;min-height:100vh;overflow-x:hidden;}
body::before{content:'';position:fixed;inset:0;
  background:radial-gradient(ellipse at 15% 40%,rgba(255,45,85,.06) 0%,transparent 55%),
  radial-gradient(ellipse at 85% 15%,rgba(255,214,10,.04) 0%,transparent 50%),
  radial-gradient(ellipse at 55% 85%,rgba(191,90,242,.04) 0%,transparent 50%);
  pointer-events:none;z-index:0;}
body::after{content:'';position:fixed;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.01) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.01) 1px,transparent 1px);
  background-size:48px 48px;pointer-events:none;z-index:0;}
#app{position:relative;z-index:1;}
.screen{display:none;min-height:100vh;}
.screen.active{display:flex;flex-direction:column;}

/* RULES PAGE */
.rules-section{background:var(--card-bg);border:1px solid var(--bd);border-left:3px solid var(--a1);padding:18px 20px;margin-bottom:14px;max-width:680px;width:100%;}
.rules-heading{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:3px;color:var(--a1);margin-bottom:12px;}

#title-screen{align-items:center;justify-content:center;text-align:center;padding:28px 20px;}
.scissor{font-size:64px;animation:spn 5s linear infinite;display:block;margin-bottom:4px;}
@keyframes spn{to{transform:rotate(360deg);}}
.gtitle{font-family:'Bebas Neue',sans-serif;font-size:clamp(50px,13vw,110px);line-height:.88;letter-spacing:4px;
  background:linear-gradient(135deg,#ff2d55,#ffd60a,#ff2d55);background-size:200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:gsh 3s ease infinite;filter:drop-shadow(0 0 24px rgba(255,45,85,.4));}
@keyframes gsh{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
.gtagline{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:5px;color:var(--a2);margin:6px 0 20px;}

.tier-ladder{display:flex;flex-direction:column;gap:4px;max-width:680px;width:100%;margin-bottom:18px;}
.tier-lbl{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:3px;color:var(--muted);text-align:left;padding:0 2px;margin-bottom:2px;}
.tier-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--card-bg);border:1px solid var(--bd);border-left:4px solid;}
.tr-num{font-family:'Space Mono',monospace;font-size:11px;color:var(--muted);min-width:48px;}
.tr-name{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:2px;flex:1;text-align:left;}
.tr-cost{font-family:'Space Mono',monospace;font-size:12px;padding:2px 8px;border:1px solid;border-radius:1px;white-space:nowrap;}
.tr-desc{font-size:13px;color:var(--muted);flex:2;text-align:left;}

.rl{list-style:none;counter-reset:r;}
.rl li{counter-increment:r;display:flex;gap:10px;font-size:15px;line-height:1.55;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04);color:#ccc;}
.rl li:last-child{border:none;}
.rl li::before{content:counter(r,decimal-leading-zero);font-family:'Space Mono',monospace;font-size:11px;color:var(--a1);min-width:26px;padding-top:2px;}
.rp{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;padding-top:10px;border-top:1px solid var(--bd);}
.rpill{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:2px;padding:3px 9px;border-radius:2px;}
.rarity-list{display:flex;flex-direction:column;gap:8px;}
.rarity-row{display:flex;align-items:center;gap:12px;}
.rarity-desc{font-size:13px;color:#bbb;line-height:1.5;}

.psetup{display:flex;gap:14px;max-width:680px;width:100%;margin-bottom:14px;}
.pg{flex:1;display:flex;flex-direction:column;gap:6px;}
.pl{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:2px;text-transform:uppercase;}
.pl.p1{color:var(--a1)}.pl.p2{color:var(--a4);}
input[type=text]{background:var(--card-bg);border:1px solid var(--bd);color:var(--text);font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:2px;padding:11px 14px;outline:none;width:100%;transition:border-color .2s;border-radius:8px;}
input[type=text]:focus{border-color:var(--a1);}

.rrow{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.rrow label{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:2px;color:var(--muted);}
.ropts{display:flex;gap:7px;flex-wrap:wrap;}
.ropt{padding:8px 18px;font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:2px;background:var(--card-bg);border:1px solid var(--bd);color:var(--muted);cursor:pointer;transition:all .15s;}
.ropt.sel{background:var(--a1);color:#fff;border-color:var(--a1);} .ropt{border-radius:6px;} .ropt:hover{border-color:var(--a1);color:var(--text);}

.btn{font-family:'Bebas Neue',sans-serif;font-size:21px;letter-spacing:3px;padding:14px 44px;border:none;cursor:pointer;transition:all .15s;border-radius:8px;}
.btn-p{background:var(--a1);color:#fff;}
.btn-confirm{background:var(--a3);color:#000;font-size:18px;padding:12px 40px;letter-spacing:2px;width:100%;}
.btn-confirm:hover{background:#4cde7a;box-shadow:0 0 24px rgba(48,209,88,.4);}
.btn-p:hover{background:#ff4d6d;box-shadow:0 0 28px rgba(255,45,85,.4);transform:translateY(-2px);}
.btn-s{background:transparent;color:var(--a2);border:1px solid var(--a2);}
.btn-s:hover{background:rgba(255,214,10,.07);}
.btn-sm{font-size:15px;padding:9px 22px;letter-spacing:2px;}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none!important;box-shadow:none!important;}

/* GAME MODE PICKER */
.gmode-row{display:flex;flex-direction:column;gap:8px;max-width:680px;width:100%;margin-bottom:16px;}
.gmode-lbl{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:2px;color:var(--muted);margin-bottom:2px;}
.gmode-opts{display:flex;gap:8px;flex-wrap:wrap;}
.gmopt{flex:1;min-width:160px;padding:12px 14px;background:var(--card-bg);border:1px solid var(--bd);cursor:pointer;transition:all .15s;text-align:left;border-radius:10px;}
.gmopt:hover{border-color:rgba(255,45,85,.4);background:rgba(255,45,85,.04);}
.gmopt.sel{border-color:var(--a1);background:rgba(255,45,85,.08);}
.gmopt-name{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:2px;color:var(--text);margin-bottom:3px;}
.gmopt.sel .gmopt-name{color:var(--a1);}
.gmopt-desc{font-size:11px;color:var(--muted);line-height:1.4;}

/* WILDCARD BANNER */
.wildcard-banner{display:none;background:linear-gradient(135deg,rgba(255,45,85,.15),rgba(255,214,10,.15));border:2px solid var(--a2);padding:12px 18px;text-align:center;animation:wcpulse 1.5s ease infinite alternate;}
.wildcard-banner.active{display:block;}
@keyframes wcpulse{from{border-color:var(--a1);}to{border-color:var(--a2);}}
.wc-title{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:4px;color:var(--a2);}
.wc-sub{font-family:'Space Mono',monospace;font-size:11px;color:var(--a1);letter-spacing:2px;margin-top:2px;}


/* ESCALATION */
.esc-badge{display:none;background:rgba(48,209,88,.12);border:1px solid var(--a3);padding:6px 14px;text-align:center;}
.esc-badge.show{display:block;animation:escpop .4s ease;}
@keyframes escpop{0%{transform:scale(.8);opacity:0;}60%{transform:scale(1.05);}100%{transform:scale(1);opacity:1;}}
.esc-text{font-family:'Bebas Neue',sans-serif;font-size:17px;letter-spacing:3px;color:var(--a3);}

/* VETO & NEGOTIATE buttons in modal */
.btn-veto{background:rgba(255,45,85,.15);color:var(--a1);border:1px solid var(--a1);font-size:13px;padding:9px 18px;letter-spacing:2px;}
.btn-veto:hover{background:rgba(255,45,85,.3);}
.btn-veto:disabled{opacity:.3;cursor:not-allowed;}
.btn-neg{background:rgba(255,214,10,.12);color:var(--a2);border:1px solid var(--a2);font-size:13px;padding:9px 18px;letter-spacing:2px;}
.btn-neg:hover{background:rgba(255,214,10,.25);}
.btn-neg:disabled{opacity:.3;cursor:not-allowed;}

/* NEGOTIATE MODAL */
.neg-slider-row{display:flex;align-items:center;gap:12px;margin:12px 0;}

/* TRIPLE THREAT MODAL */
.tt-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:2000;align-items:center;justify-content:center;flex-direction:column;padding:20px;}
.tt-overlay.open{display:flex;}
.tt-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(44px,10vw,80px);letter-spacing:6px;color:var(--a2);text-align:center;filter:drop-shadow(0 0 30px rgba(255,214,10,.7));animation:ttglow 1.5s ease infinite alternate;margin-bottom:6px;}
@keyframes ttglow{from{filter:drop-shadow(0 0 20px rgba(255,214,10,.5));}to{filter:drop-shadow(0 0 50px rgba(255,214,10,1));}}
.tt-sub{font-family:'Space Mono',monospace;font-size:13px;letter-spacing:4px;color:var(--a1);text-align:center;margin-bottom:32px;}
.tt-cards{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:28px;}
.tt-card{width:190px;background:var(--card-bg);border:2px solid var(--bd);padding:16px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;opacity:0;transform:translateY(40px) rotate(-3deg);animation:ttdrop .5s ease forwards;}
.tt-card:nth-child(1){animation-delay:.1s;}
.tt-card:nth-child(2){animation-delay:.3s;}
.tt-card:nth-child(3){animation-delay:.5s;}
@keyframes ttdrop{to{opacity:1;transform:translateY(0) rotate(0deg);}}
.tt-card:hover{border-color:var(--a2);transform:translateY(-6px) scale(1.04);box-shadow:0 12px 40px rgba(255,214,10,.3);}
.tt-card.tt-selected{border-color:var(--a1);box-shadow:0 0 40px rgba(255,45,85,.6);transform:translateY(-8px) scale(1.06);}
.tt-card .tt-tier{font-family:'Bebas Neue',sans-serif;font-size:12px;letter-spacing:2px;padding:2px 8px;border:1px solid;display:inline-block;margin-bottom:8px;}
.tt-card .tt-name{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:1px;line-height:1.1;margin-bottom:6px;}
.tt-card .tt-desc{font-size:11px;color:#999;line-height:1.4;margin-bottom:10px;}
.tt-card .tt-pts{font-family:'Space Mono',monospace;font-size:11px;color:var(--a3);font-weight:700;}
.tt-actions{display:flex;gap:12px;justify-content:center;}
.tt-particle{position:fixed;pointer-events:none;font-size:18px;z-index:3000;animation:ttparticle .9s ease forwards;}
@keyframes ttparticle{0%{opacity:1;transform:translate(0,0) scale(1);}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0);}}
.neg-slider-row input[type=range]{flex:1;accent-color:var(--a2);}
.neg-dp-val{font-family:'Bebas Neue',sans-serif;font-size:32px;letter-spacing:2px;color:var(--a2);min-width:60px;text-align:center;}
#game-screen{padding:0;}
.gh{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:12px 18px;border-bottom:1px solid var(--bd);background:rgba(8,8,16,.95);backdrop-filter:blur(14px);position:sticky;top:0;z-index:100;}
.ps{display:flex;flex-direction:column;}
.ps.r{text-align:right;align-items:flex-end;}
.sn{font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:2px;}
.spts{font-family:'Space Mono',monospace;font-size:28px;font-weight:700;line-height:1;}
.spts.p1{color:var(--a1)}.spts.p2{color:var(--a4);}
.sdp{font-family:'Space Mono',monospace;font-size:14px;font-weight:700;color:var(--a2);}
.slbl{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:2px;color:var(--muted);}
.hub{text-align:center;}
.hub .hl{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:3px;color:var(--muted);}
.hub .hv{font-family:'Bebas Neue',sans-serif;font-size:32px;letter-spacing:2px;color:var(--a2);}

/* TIER METER */
.tier-meter{padding:8px 18px;background:rgba(8,8,16,.8);border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:10px;}
.tm-lbl{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:2px;color:var(--muted);white-space:nowrap;}
.tm-wrap{flex:1;position:relative;height:10px;background:var(--bd);}
.tm-fill{position:absolute;top:0;left:0;height:100%;transition:width .5s,background .5s;}
.tm-ticks{position:absolute;inset:0;display:flex;}
.tm-tick{flex:1;border-right:2px solid rgba(0,0,0,.7);}
.tm-tick:last-child{border:none;}
.tier-badge{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:2px;padding:2px 10px;white-space:nowrap;}
.pbar{height:2px;background:var(--bd);}
.pfill{height:100%;background:linear-gradient(90deg,var(--a1),var(--a2));transition:width .5s;}

/* TURN BANNER */
.turn-banner{border-radius:12px;overflow:hidden;border:1px solid rgba(255,45,85,.2);animation:turnpop .35s ease;background:transparent;}
.turn-banner-bg{padding:20px 20px 16px;background:linear-gradient(135deg,rgba(255,45,85,.08) 0%,transparent 60%);position:relative;overflow:hidden;}
.turn-banner-bg::before{content:'✂️';position:absolute;right:-10px;top:50%;transform:translateY(-50%);font-size:100px;opacity:.04;pointer-events:none;}
.turn-banner-left{flex:1;}
.turn-banner-right{display:flex;flex-direction:column;gap:6px;flex-shrink:0;margin-top:10px;}
.tb-opt{font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:2px;padding:9px 14px;border-radius:8px;border:1px solid var(--bd);background:transparent;color:var(--muted);cursor:pointer;transition:all .15s;text-align:center;min-width:140px;}
.tb-opt.cut{border-color:var(--a1);color:var(--a1);background:rgba(255,45,85,.06);}
.tb-opt.dare{border-color:var(--a5);color:var(--a5);background:rgba(191,90,242,.06);}
.tb-opt.cut.on{background:rgba(255,45,85,.15);}
.tb-opt.dare.on{background:rgba(191,90,242,.15);}
.tb-opt:hover{opacity:.8;}
@media(min-width:500px){.turn-banner-bg{display:flex;align-items:center;gap:16px;}.turn-banner-right{margin-top:0;}}
@keyframes turnpop{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.turn-name{font-family:'Bebas Neue',sans-serif;font-size:clamp(22px,5vw,38px);letter-spacing:4px;line-height:1;color:var(--text);}
.turn-sub{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1px;color:var(--muted);margin-top:6px;line-height:1.7;max-width:300px;}
.turn-banner.p1{border-color:rgba(255,45,85,.25);}
.turn-banner.p2{border-color:rgba(10,132,255,.25);}
.turn-banner.p2 .turn-banner-bg{background:linear-gradient(135deg,rgba(10,132,255,.08) 0%,transparent 60%);}
.turn-banner.p2 .turn-banner-bg::before{content:'✂️';}
.turn-banner.phase-confirm .turn-banner-bg{background:linear-gradient(135deg,rgba(48,209,88,.08) 0%,transparent 60%);}
.turn-banner.phase-confirm{border-color:rgba(48,209,88,.25);}

/* GAME MAIN */
.gm{flex:1;padding:16px;display:flex;flex-direction:column;gap:14px;max-width:980px;margin:0 auto;width:100%;}

.pbanner{padding:13px 16px;background:var(--card-bg);border:1px solid var(--bd);border-left:4px solid var(--a2);display:flex;flex-direction:column;gap:4px;}
.ptit{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:3px;color:var(--a2);}
.pdesc{font-size:17px;font-weight:600;}
.aptag{display:inline-flex;align-items:center;gap:5px;padding:5px 13px;font-family:'Bebas Neue',sans-serif;font-size:17px;letter-spacing:2px;margin-top:3px;align-self:flex-start;}
.aptag.p1{background:rgba(255,45,85,.1);color:var(--a1);border:1px solid rgba(255,45,85,.25);}
.aptag.p2{background:rgba(10,132,255,.1);color:var(--a4);border:1px solid rgba(10,132,255,.25);}

.mode-row{display:flex;gap:8px;align-items:stretch;width:100%;}
.mode-lbl{display:none;}
.mbtn{padding:12px 16px;font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:2px;background:var(--card-bg);border:1px solid var(--bd);color:var(--muted);cursor:pointer;transition:all .15s;border-radius:10px;flex:1;}
.mbtn.on{color:#fff;}
.mbtn[data-m=cut].on{background:var(--a1);border-color:var(--a1);}
.mbtn[data-m=action].on{background:var(--a5);border-color:var(--a5);}

.tier-locks{display:flex;gap:5px;flex-wrap:wrap;}
.tlock{display:flex;align-items:center;gap:4px;padding:4px 10px;font-family:'Space Mono',monospace;font-size:11px;border:1px solid;border-radius:20px;}

.cf{display:flex;gap:5px;flex-wrap:wrap;}
.cfb{padding:5px 12px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase;background:var(--card-bg);border:1px solid var(--bd);color:var(--muted);cursor:pointer;transition:all .15s;}
.cfb.on{color:#fff;}
.cfb[data-c=all].on{background:#444;border-color:#444;}
.cfb[data-c=points].on{background:#30d158;border-color:#30d158;color:#000;}
.cfb[data-c=creative].on{background:#ffd60a;border-color:#ffd60a;color:#000;}
.cfb[data-c=kink].on{background:#bf5af2;border-color:#bf5af2;}
.cfb[data-c=cape].on{background:#e8c37a;border-color:#e8c37a;color:#000;}
.cfb[data-c=roleplay].on{background:#ff375f;border-color:#ff375f;color:#fff;}
.cfb[data-c=colour].on{background:#ff6b35;border-color:#ff6b35;}

.dr{display:flex;gap:9px;flex-wrap:wrap;}
.dchip{display:flex;align-items:center;gap:5px;font-family:'Space Mono',monospace;font-size:11px;color:var(--muted);padding:4px 10px;background:var(--card-bg);border:1px solid var(--bd);border-radius:20px;}
.dchip b{color:var(--text);}

.zt{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:3px;color:var(--muted);padding:7px 0 6px;border-bottom:1px solid var(--bd);margin-bottom:10px;}
.cg{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:8px;}

/* CARD */
.pcard{background:var(--bg);border:1px solid var(--bd);padding:13px;cursor:pointer;transition:all .18s;position:relative;overflow:hidden;user-select:none;border-radius:10px;}
.pcard:hover:not(.locked-card){border-color:rgba(255,214,10,.4);transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.5);}
.pcard.sel{border-color:var(--a1);box-shadow:0 0 26px rgba(255,45,85,.4);}
.pcard.locked-card{opacity:.4;cursor:not-allowed;filter:grayscale(.8);}
.pcard.locked-card::after{content:'🔒';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:28px;opacity:.6;}
.cstripe{position:absolute;top:0;left:0;right:0;height:3px;}
.ctop{display:flex;justify-content:space-between;align-items:flex-start;margin-top:8px;gap:4px;flex-wrap:wrap;}
.cname{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:.5px;line-height:1.1;margin-top:5px;}
.cdesc{font-size:13px;color:#aaa;margin-top:4px;line-height:1.4;}
.cfoot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:7px;border-top:1px solid var(--bd);gap:3px;flex-wrap:wrap;}
.cpts{font-family:'Space Mono',monospace;font-size:11px;color:var(--a3);font-weight:700;}
.cdp{font-family:'Space Mono',monospace;font-size:11px;color:var(--a2);font-weight:700;}
.ccost{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;padding:2px 6px;border:1px solid;}
.dtag{font-family:'Space Mono',monospace;font-size:10px;padding:2px 5px;border:1px solid;}
.dtag.y{color:var(--a2);border-color:rgba(255,214,10,.35);}
.dtag.n{color:var(--muted);border-color:var(--bd);}
.rtag{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.5px;padding:2px 6px;border-radius:1px;}
.cattag{font-family:'Space Mono',monospace;font-size:10px;padding:2px 5px;border:1px solid;}

.r-common{color:#999;border:1px solid rgba(153,153,153,.2);background:rgba(153,153,153,.05);}
.r-uncommon{color:#4a9eff;border:1px solid rgba(74,158,255,.25);background:rgba(74,158,255,.06);}
.r-rare{color:#a855f7;border:1px solid rgba(168,85,247,.25);background:rgba(168,85,247,.06);}
.r-epic{color:#f97316;border:1px solid rgba(249,115,22,.25);background:rgba(249,115,22,.06);}
.r-mythic{color:#ec4899;border:1px solid rgba(236,72,153,.25);background:rgba(236,72,153,.06);}
.r-divine{color:#ffd60a;border:1px solid rgba(255,214,10,.25);background:rgba(255,214,10,.06);}

.s-uncommon{background:#4a9eff;}.s-rare{background:#a855f7;}.s-epic{background:#f97316;}
.s-mythic{background:#ec4899;}.s-divine{background:#ffd60a;}.s-common{background:#666;}
.s-colour{background:linear-gradient(90deg,#ff6b35,#ec4899,#0a84ff);}
.s-t0{background:var(--t0);}.s-t1{background:var(--t1);}.s-t2{background:var(--t2);}.s-t3{background:var(--t3);}.s-t4{background:var(--t4);}
.c-points{color:#30d158;border-color:rgba(48,209,88,.3);}
.c-creative{color:#ffd60a;border-color:rgba(255,214,10,.3);}
.c-kink{color:#bf5af2;border-color:rgba(191,90,242,.3);}
.c-cape{color:#e8c37a;border-color:rgba(232,195,122,.3);}
.c-colour{color:#ff6b35;border-color:rgba(255,107,53,.3);}
.c-cutting{color:#0a84ff;border-color:rgba(10,132,255,.3);}
.c-roleplay{color:#ff375f;border-color:rgba(255,55,95,.3);}
.solo-ok-badge{font-family:'Space Mono',monospace;font-size:10px;color:var(--a3);border:1px solid rgba(48,209,88,.35);padding:2px 5px;white-space:nowrap;}
.cfb[data-c=cutting].on{background:#0a84ff;border-color:#0a84ff;}

/* DICE */
.dbox{background:var(--card-bg);border:1px solid var(--bd);padding:18px;text-align:center;}
/* Casino Felt dice */
.dface{
  width:80px;height:80px;
  background:#f5f5f0;
  border-radius:12px;
  display:grid;place-items:center;
  box-shadow:0 4px 16px rgba(0,0,0,.5),
             inset 0 1px 0 rgba(255,255,255,.9),
             inset 0 -2px 4px rgba(0,0,0,.15);
  cursor:pointer;
  transition:all .2s;
  flex-shrink:0;
}
.dface.roll{animation:dr .5s cubic-bezier(.175,.885,.32,1.275);}
@keyframes dr{0%{transform:rotate(-20deg) scale(.6);opacity:.2;}60%{transform:rotate(8deg) scale(1.1);}100%{transform:rotate(0) scale(1);opacity:1;}}
.dface-grid{display:grid;width:54px;height:54px;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:5px;}
.dface-dot{border-radius:50%;background:#111;box-shadow:inset 0 1px 0 rgba(255,255,255,.1);}
.dtxt{font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:2px;color:var(--a2);min-height:26px;}

.arow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.glog{background:var(--card-bg);border:1px solid var(--bd);padding:10px 14px;max-height:100px;overflow-y:auto;font-family:'Space Mono',monospace;font-size:11px;color:var(--muted);}
.le{padding:3px 0;border-bottom:1px solid rgba(255,255,255,.025);line-height:1.5;}
.le:last-child{border:none;}
.lt{color:var(--a1);margin-right:6px;}
.lh{color:var(--a2);}

/* MODAL */
.moverlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:1000;align-items:center;justify-content:center;padding:20px;}
.moverlay.open{display:flex;}
.mdialog{background:var(--panel);border:1px solid var(--bd);border-top:4px solid var(--a1);max-width:560px;width:100%;padding:28px;animation:mi .25s ease;}
@keyframes mi{from{transform:scale(.9) translateY(14px);opacity:0;}to{transform:scale(1) translateY(0);opacity:1;}}
.mtitle{font-family:'Bebas Neue',sans-serif;font-size:32px;letter-spacing:3px;color:var(--a1);}
.msub{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:2px;color:var(--muted);margin-bottom:14px;}
.mcard{background:var(--bg);border:1px solid var(--bd);padding:16px;margin-bottom:12px;}
.mname{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:2px;margin-bottom:6px;}
.mdesc{font-size:15px;line-height:1.55;color:#bbb;}
.minstr{border-left:3px solid var(--a2);padding:11px 15px;font-size:14px;line-height:1.6;color:var(--a2);margin-bottom:14px;white-space:pre-line;}
.mbtns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;}

/* MODAL STRUCTURED CONTENT */
.minstr-rule{background:var(--bg);border-left:3px solid var(--a2);padding:10px 14px;font-size:14px;line-height:1.6;color:#ccc;margin-bottom:10px;}
.minstr-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.minstr-tag{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:2px;padding:3px 9px;border:1px solid;border-radius:2px;}
.minstr-tag.gold{color:var(--a2);border-color:var(--a2);background:rgba(255,214,10,.08);}
.minstr-tag.red{color:var(--a1);border-color:var(--a1);background:rgba(255,45,85,.08);}
.minstr-tag.green{color:var(--a3);border-color:var(--a3);background:rgba(48,209,88,.08);}
.minstr-tag.purple{color:var(--a5);border-color:var(--a5);background:rgba(191,90,242,.08);}
.minstr-outcome{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;}
.minstr-player{background:var(--bg);border:1px solid var(--bd);padding:10px 12px;}
.minstr-pname{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:2px;color:var(--muted);margin-bottom:6px;}
.minstr-pname.p1c{color:var(--a1);}.minstr-pname.p2c{color:var(--a4);}
.minstr-stat{display:flex;justify-content:space-between;align-items:center;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.04);}
.minstr-stat:last-child{border:none;}
.minstr-slbl{font-size:12px;color:#888;}
.minstr-sval{font-family:'Space Mono',monospace;font-size:13px;font-weight:700;}
.minstr-sval.pos{color:var(--a3);}.minstr-sval.neg{color:var(--a1);}.minstr-sval.neu{color:var(--muted);}
#modal-nodp .mdialog{border-top-color:var(--a6);}
#modal-nodp .mtitle{color:var(--a6);}

/* POINTS POP */
.ptspop{position:fixed;pointer-events:none;font-family:'Bebas Neue',sans-serif;font-size:42px;letter-spacing:2px;z-index:2000;animation:pf 1.6s ease forwards;}
@keyframes pf{0%{opacity:1;transform:translateY(0) scale(1);}50%{opacity:1;transform:translateY(-58px) scale(1.3);}100%{opacity:0;transform:translateY(-115px) scale(.7);}}

/* END */
#end-screen{align-items:center;justify-content:center;text-align:center;padding:32px 20px;}
.crown{font-size:70px;animation:bc 1s ease infinite alternate;display:block;margin-bottom:6px;}
@keyframes bc{from{transform:translateY(0);}to{transform:translateY(-15px);}}
.wt{font-family:'Bebas Neue',sans-serif;font-size:clamp(20px,5vw,40px);letter-spacing:4px;color:var(--a2);}
.wn{font-family:'Bebas Neue',sans-serif;font-size:clamp(40px,11vw,86px);letter-spacing:4px;line-height:.9;
  background:linear-gradient(135deg,var(--a1),var(--a2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 24px rgba(255,45,85,.5));margin-bottom:26px;}
.fscores{display:flex;gap:16px;margin-bottom:22px;flex-wrap:wrap;justify-content:center;}
.fsc{background:var(--card-bg);border:1px solid var(--bd);padding:20px 24px;min-width:140px;}
.fsc.win{border-color:var(--a2);box-shadow:0 0 16px rgba(255,214,10,.3);}
.fp{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:2px;color:var(--muted);}
.fn{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:2px;}
.fpts{font-family:'Space Mono',monospace;font-size:40px;font-weight:700;}
.fpts.p1{color:var(--a1)}.fpts.p2{color:var(--a4);}
.fdp{font-family:'Space Mono',monospace;font-size:13px;color:var(--a2);}
.hbox{background:var(--card-bg);border:1px solid var(--bd);padding:16px;max-width:600px;width:100%;text-align:left;margin-bottom:24px;max-height:210px;overflow-y:auto;}
.hi{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.03);color:#aaa;}
.hi:last-child{border:none;}
.hpts{font-family:'Space Mono',monospace;font-size:11px;color:var(--a3);}
.hdp{font-family:'Space Mono',monospace;font-size:11px;color:var(--a2);}

::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--bd);}
.empty-h{text-align:center;padding:24px;color:var(--muted);font-family:'Space Mono',monospace;font-size:12px;letter-spacing:2px;border:1px dashed var(--bd);}

/* HAIR LENGTH PICKER */
.hair-pick-label{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:2px;color:var(--muted);text-transform:uppercase;margin-top:10px;margin-bottom:6px;}
.hair-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;}
.hpopt{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px;background:var(--bg);border:1px solid var(--bd);cursor:pointer;transition:all .15s;text-align:center;border-radius:8px;}
.hpopt:hover{border-color:var(--a1);background:rgba(255,45,85,.06);}
.hpopt.sel{border-color:var(--a1);background:rgba(255,45,85,.1);}
.hpopt.sel .hpname{color:var(--a1);}
.hpicon{font-size:22px;line-height:1;}
.hpname{font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:1px;color:var(--text);}
.hpsub{font-family:'Space Mono',monospace;font-size:10px;color:var(--muted);}
/* hair length badge on cards */
.hair-req{font-family:'Space Mono',monospace;font-size:10px;padding:2px 5px;border:1px solid rgba(255,214,10,.3);color:var(--a2);white-space:nowrap;}
.hair-req.blocked{border-color:rgba(255,45,85,.4);color:var(--a1);}
.pcard.hair-blocked{cursor:not-allowed;}
.pcard.hair-blocked .cname{opacity:.4;}
.pcard.hair-blocked .cdesc{opacity:.3;}
.pcard.hair-blocked::after{content:'✂️ NEEDS MORE HAIR';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:1px;color:var(--a1);background:rgba(8,8,16,.75);z-index:2;}

@media(max-width:600px){
  .psetup{flex-direction:column;}
  .gh{grid-template-columns:1fr 1fr;gap:6px;}
  .hub{grid-column:1/-1;order:-1;}
}

/* ── ONLINE MULTIPLAYER ─────────────────────────── */
.waiting-overlay{background:rgba(8,8,16,.97);position:fixed;inset:0;z-index:500;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;overflow-y:auto;}
.waiting-overlay-sub{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:3px;color:var(--muted);}
/* Waiting overlay inner card */
.wo-inner{width:100%;max-width:480px;display:flex;flex-direction:column;gap:8px;}
.wo-banner{border-radius:14px;overflow:hidden;border:1px solid rgba(255,45,85,.2);position:relative;}
.wo-banner-bg{padding:24px 20px;background:linear-gradient(135deg,rgba(255,45,85,.1) 0%,rgba(255,45,85,.03) 50%,transparent 100%);position:relative;overflow:hidden;}
.wo-banner-bg::before{content:'✂️';position:absolute;right:-20px;top:50%;transform:translateY(-50%);font-size:120px;opacity:.04;pointer-events:none;animation:woscissor 6s ease-in-out infinite;}
@keyframes woscissor{0%,100%{transform:translateY(-50%) rotate(-10deg);}50%{transform:translateY(-50%) rotate(10deg);}}
.wo-tag{font-size:9px;letter-spacing:4px;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:8px;}
.wo-blink{width:7px;height:7px;border-radius:50%;background:var(--a1);flex-shrink:0;animation:woblink 1.3s ease-in-out infinite;}
@keyframes woblink{0%,100%{opacity:1;}50%{opacity:.1;}}
.wo-name{font-family:'Bebas Neue',sans-serif;font-size:clamp(28px,7vw,48px);letter-spacing:5px;color:var(--muted);line-height:1;margin-bottom:6px;}
.wo-status{font-size:11px;letter-spacing:3px;color:var(--muted);display:flex;align-items:center;gap:8px;}
.wo-dots{display:flex;gap:4px;}
.wo-dot{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:wodot 1.4s ease infinite;}
.wo-dot:nth-child(2){animation-delay:.2s;}.wo-dot:nth-child(3){animation-delay:.4s;}
@keyframes wodot{0%,80%,100%{opacity:.2;}40%{opacity:1;}}
/* DP bar */
.wo-dp{background:var(--panel);border:1px solid var(--bd);border-radius:12px;padding:14px 16px;}
.wo-dp-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.wo-dp-lbl{font-size:11px;letter-spacing:3px;color:var(--muted);text-transform:uppercase;}
.wo-dp-val{font-family:'Bebas Neue',sans-serif;font-size:42px;letter-spacing:2px;color:var(--a2);line-height:1;}
.wo-dp-track{height:6px;background:var(--bg);border-radius:3px;border:1px solid var(--bd);overflow:hidden;margin-bottom:6px;}
.wo-dp-fill{height:100%;border-radius:3px;background:var(--a2);transition:width .6s ease;}
.wo-tier-labels{display:flex;justify-content:space-between;margin-bottom:6px;}
.wo-tier-lbl{font-size:10px;letter-spacing:2px;color:var(--muted);transition:color .3s;white-space:nowrap;}
.wo-tier-lbl.reached{color:var(--muted);}
.wo-tier-lbl.t0.reached{color:#30d158!important;}
.wo-tier-lbl.t1.reached{color:#0a84ff!important;}
.wo-tier-lbl.t2.reached{color:#f97316!important;}
.wo-tier-lbl.t3.reached{color:#a855f7!important;}
.wo-tier-lbl.t4.reached{color:#ff2d55!important;}
.wo-dp-sub{font-size:13px;letter-spacing:1px;color:var(--muted);margin-top:8px;}
/* Tip bar */
.wo-tip{border-radius:12px;overflow:hidden;border:1px solid var(--bd);}
.wo-tip-row{display:flex;align-items:stretch;background:var(--panel);transition:all .35s ease;}
.wo-tip-icon{width:54px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:26px;background:rgba(255,214,10,.06);border-right:1px solid var(--bd);}
.wo-tip-body{padding:16px 18px;flex:1;}
.wo-tip-lbl{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:3px;color:var(--a2);margin-bottom:6px;}
.wo-tip-txt{font-size:13px;color:var(--muted);line-height:1.9;}
.wo-tip-txt strong{color:var(--text);}
.wo-tip-footer{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;border-top:1px solid var(--bd);background:var(--bg);}
.wo-tip-dots{display:flex;gap:7px;align-items:center;}
.wo-tip-dot{width:6px;height:6px;border-radius:50%;background:var(--bd);cursor:pointer;transition:all .3s;}
.wo-tip-dot.on{background:var(--a1);box-shadow:0 0 6px rgba(255,45,85,.5);}
.wo-tip-nav{display:flex;gap:2px;}
.wo-tip-btn{background:none;border:1px solid var(--bd);color:var(--muted);cursor:pointer;font-size:14px;padding:2px 8px;border-radius:5px;transition:all .15s;}
.wo-tip-btn:hover{color:var(--a1);border-color:var(--a1);}
.wo-tip-row.green .wo-tip-icon{background:rgba(48,209,88,.06);}
.wo-tip-row.green .wo-tip-lbl{color:var(--a3);}
.wo-tip-row.purple .wo-tip-icon{background:rgba(191,90,242,.06);}
.wo-tip-row.purple .wo-tip-lbl{color:var(--a5);}
.wo-tip-row.red .wo-tip-icon{background:rgba(255,45,85,.06);}
.wo-tip-row.red .wo-tip-lbl{color:var(--a1);}
@keyframes pulse{0%,100%{opacity:.4;}50%{opacity:1;}}
.conn-bar{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:2px;padding:4px 12px;text-align:center;}
.conn-bar.connected{background:rgba(48,209,88,.1);color:var(--a3);border-bottom:1px solid rgba(48,209,88,.3);}
.conn-bar.waiting{background:rgba(255,214,10,.1);color:var(--a2);border-bottom:1px solid rgba(255,214,10,.3);}
/* LOBBY */
.page-wrap{max-width:680px;margin:0 auto;padding:16px 16px 60px;width:100%;}
.hero-htp{display:inline-flex;align-items:center;gap:6px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:2px;color:#fff;text-decoration:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);padding:8px 18px;border-radius:8px;margin-bottom:24px;transition:all .2s;}
.hero-htp:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);}
.lobby-card{
  display:flex;flex-direction:column;gap:12px;
  background:var(--panel);border:1px solid var(--bd);
  padding:16px;margin-bottom:12px;width:100%;
  border-radius:12px;transition:border-color .2s;
}
.lobby-card:hover{border-color:rgba(255,45,85,.2);}
.lobby-card-title{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:3px;margin-bottom:14px;}
.finput{width:100%;background:var(--bg);border:1px solid var(--bd);color:var(--text);font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:2px;padding:11px 14px;outline:none;border-radius:8px;transition:border-color .2s;box-sizing:border-box;}
.finput:focus{border-color:var(--a1);box-shadow:0 0 0 3px rgba(255,45,85,.12);}
.flabel{display:block;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:2px;color:var(--muted);margin-bottom:8px;}
.fgroup{margin-bottom:0;}
@media(max-width:520px){.lobby-card{padding:18px;border-radius:10px;}}
 .or-div::before,.or-div::after{content:'';flex:1;height:1px;background:var(--bd);}
/* WAITING ROOM */
.room-code-big{font-family:'Bebas Neue',sans-serif;font-size:clamp(32px,9vw,64px);letter-spacing:6px;color:var(--a1);text-align:center;filter:drop-shadow(0 0 24px rgba(255,45,85,.55));padding:8px 0;}
/* ── NEON VERSUS connection slots ── */
.nv-slots{margin:16px 0;}
.nv-wrap{
  display:flex;align-items:stretch;
  border:1px solid var(--bd);border-radius:12px;overflow:hidden;
  background:rgba(16,16,26,.85);backdrop-filter:blur(12px);
}
.nv-p{flex:1;padding:14px 16px;}
.nv-p.p2side{text-align:right;}
.nv-p.p1side{border-right:none;}
.nv-lbl{font-family:'Space Mono',monospace;font-size:7px;letter-spacing:4px;color:var(--muted);}
.nv-name{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:2px;color:var(--text);line-height:1;margin-top:3px;}
.nv-status{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:1px;margin-top:5px;}
.nv-connected{color:var(--a3);}
.nv-waiting{color:var(--muted);animation:nvwait 1.5s ease infinite;}
@keyframes nvwait{0%,100%{opacity:1;}50%{opacity:.3;}}
.nv-mid{
  padding:12px 14px;flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-left:1px solid var(--bd);border-right:1px solid var(--bd);
  background:rgba(16,16,26,.6);
  gap:3px;
}
.nv-vs{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:3px;color:var(--muted);}
.nv-room-lbl{font-family:'Space Mono',monospace;font-size:7px;letter-spacing:2px;color:var(--muted);}
/* active player colouring */
#slot-p1.joined .nv-name{color:var(--a1);}
#slot-p2.joined .nv-name{color:var(--a4);}
/* keep old pslot-status class working for JS that sets it */
.pslot-status{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:1px;margin-top:5px;}
/* LOBBY ERROR */
.lobby-err{display:none;font-family:'Space Mono',monospace;font-size:11px;color:var(--a1);text-align:center;padding:12px 16px;background:rgba(255,45,85,.08);border:1px solid rgba(255,45,85,.2);border-radius:10px;margin-bottom:12px;width:100%;max-width:480px;}

/* ── DRAMATIC ANIMATIONS ─────────────────────────────── */
.drama-overlay{position:fixed;inset:0;z-index:900;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;pointer-events:none;}
.drama-overlay.seat{background:radial-gradient(ellipse at center,rgba(255,45,85,.15) 0%,rgba(8,8,16,.97) 70%);}
.drama-overlay.dare{background:radial-gradient(ellipse at center,rgba(191,90,242,.15) 0%,rgba(8,8,16,.97) 70%);}
.drama-overlay.tool{background:radial-gradient(ellipse at center,rgba(10,132,255,.15) 0%,rgba(8,8,16,.97) 70%);}
.drama-emoji{font-size:clamp(80px,20vw,140px);animation:dramapop .6s cubic-bezier(.175,.885,.32,1.275) forwards;}
.drama-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(32px,8vw,64px);letter-spacing:6px;text-align:center;opacity:0;animation:dramafade .4s ease .3s forwards;}
.drama-overlay.seat .drama-title{color:var(--a1);}
.drama-overlay.dare .drama-title{color:var(--a5);}
.drama-overlay.tool .drama-title{color:var(--a4);}
.drama-sub{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--muted);opacity:0;animation:dramafade .4s ease .5s forwards;text-align:center;}
@keyframes dramapop{0%{transform:scale(0) rotate(-15deg);opacity:0;}70%{transform:scale(1.2) rotate(5deg);}100%{transform:scale(1) rotate(0);opacity:1;}}
@keyframes dramafade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* ── LOBBY HERO ──────────────────────────────────────── */
.page-hero{
  padding:40px 0 0;
  text-align:center;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,45,85,.08) 0%,transparent 70%);
  position:relative;
  overflow:hidden;
  /* margin-bottom:8px; */
}
.page-hero::before{
  content:'✂️';position:absolute;font-size:260px;opacity:.03;
  top:50%;left:50%;transform:translate(-50%,-50%);
  pointer-events:none;
}
.hero-tag{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:4px;color:var(--a1);margin-bottom:12px;}
.hero-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(52px,12vw,88px);
  letter-spacing:8px;line-height:.9;
  color:var(--text);
  filter:drop-shadow(0 0 40px rgba(255,45,85,.3));
}
.hero-title span{color:var(--a1);}
.hero-title.hero-room-code{
  color:var(--a1);
  word-break:break-word;
}
.hero-sub{
  font-family:'Space Mono',monospace;
  font-size:11px;letter-spacing:3px;color:var(--muted);
  margin-top:16px;max-width:480px;margin-left:auto;margin-right:auto;
  line-height:1.8;
}
.hero-pills{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:20px;}
.hero-pill{
  font-family:'Space Mono',monospace;
  font-size:10px;letter-spacing:2px;padding:5px 12px;
  border:1px solid var(--bd);color:var(--muted);border-radius:20px;
}
button.hero-pill{
  background:transparent;cursor:pointer;font:inherit;line-height:inherit;
  transition:color .15s,border-color .15s;
}
button.hero-pill:hover{color:var(--text);border-color:var(--a1);}
.hero-pill.copied{color:var(--a3);border-color:var(--a3);}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.hero-title{animation:fadeUp .5s ease both;}
.hero-sub{animation:fadeUp .5s ease .1s both;}
.hero-pills{animation:fadeUp .5s ease .2s both;}
/* Lobby timeout warning */
.lobby-timeout-bar{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:999;
  background:#1a0a04;border-top:2px solid var(--a6);
  padding:12px 20px;
  display:none;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
}
.lobby-timeout-bar.show{display:flex;}
.lobby-timeout-txt{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1px;color:var(--a6);}
.lobby-timeout-extend{font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:2px;padding:6px 16px;background:var(--a6);color:#000;border:none;cursor:pointer;border-radius:4px;}

/* site-header defined in shared section below */
.back-btn{
  position:absolute;left:20px;
  font-family:'Space Mono',monospace;font-size:10px;letter-spacing:2px;
  color:var(--muted);text-decoration:none;padding:6px 12px;
  border:1px solid var(--bd);border-radius:6px;transition:all .15s;
}
.back-btn:hover{color:var(--text);border-color:var(--a1);}
.ham-btn{display:none;}

/* ── ROOM CODE SHARE BLOCK ─────────────────────── */
.room-code-val{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(28px,8vw,48px);
  letter-spacing:6px;color:var(--a1);
  filter:drop-shadow(0 0 16px rgba(255,45,85,.4));
  margin-bottom:12px;
}
.room-code-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.rc-btn{
  font-family:'Space Mono',monospace;font-size:9px;letter-spacing:2px;
  padding:8px 14px;border:1px solid var(--bd);background:transparent;
  color:var(--muted);cursor:pointer;border-radius:8px;
  transition:all .15s;display:flex;align-items:center;gap:6px;
}
.rc-btn:hover{color:var(--text);border-color:var(--a1);}
.rc-btn.copied{color:var(--a3);border-color:var(--a3);}

/* ── FOOTER ──────────────────────────────────────── */

/* ── GUARD ROW HAIR PICKER ── */
.hg-row{
  display:flex;gap:5px;padding:10px 12px;flex-wrap:wrap;
}
.hg-opt{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 4px;border:1px solid var(--bd);border-radius:20px;
  cursor:pointer;transition:all .15s;text-align:center;background:var(--bg);
}
.hg-opt:hover{border-color:rgba(255,45,85,.4);}
.hg-opt.sel{background:var(--a1);border-color:var(--a1);}
.hg-icon{display:none;}
.hg-name{font-family:"Bebas Neue",sans-serif;font-size:11px;letter-spacing:1px;color:var(--text);}
.hg-opt.sel .hg-name{color:#fff;}
.hg-sub{font-family:"Space Mono",monospace;font-size:8px;color:var(--muted);}
.hg-opt.sel .hg-sub{color:rgba(255,255,255,.7);}
.hg-detail{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:var(--card-bg);
}
.hg-d-emoji{font-size:28px;flex-shrink:0;}
.hg-d-name{font-family:"Bebas Neue",sans-serif;font-size:18px;letter-spacing:2px;color:var(--a1);}
.hg-d-desc{font-size:9px;color:var(--muted);line-height:1.7;margin-top:3px;}
/* keep old hpopt working for local game title screen */
.hair-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;}

/* ══ SHARED SITE HEADER ══ */
.site-header{
  position:sticky;top:0;z-index:200;
  background:rgba(8,8,16,.97);
  border-bottom:1px solid var(--bd);
  backdrop-filter:blur(12px);
  padding:0 24px;
  display:flex;align-items:center;justify-content:center;
  height:60px;
}
.site-logo{
  font-family:'Bebas Neue',sans-serif;font-size:28px;
  letter-spacing:5px;color:var(--text);text-decoration:none;
}
.site-logo span{color:var(--a1);}
.back-btn{
  position:absolute;left:24px;
  font-family:'Space Mono',monospace;font-size:10px;letter-spacing:2px;
  color:var(--muted);text-decoration:none;padding:6px 12px;
  border:1px solid var(--bd);border-radius:6px;transition:all .15s;
}
.back-btn:hover{color:var(--text);border-color:var(--a1);}
.ham-btn{
  display:none;position:absolute;right:20px;
  background:none;border:1px solid var(--bd);
  color:var(--text);font-size:18px;padding:6px 10px;
  cursor:pointer;border-radius:6px;line-height:1;
}
/* ══ SHARED SITE NAV ══ */
.site-nav{
  background:rgba(16,16,26,.85);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--bd);
  padding:0 24px;display:flex;gap:0;justify-content:center;flex-wrap:wrap;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  position:relative;z-index:1;
}
.site-nav::-webkit-scrollbar{display:none;}
.site-nav-link{
  font-family:'Space Mono',monospace;
  font-size:10px;letter-spacing:2px;color:var(--muted);text-decoration:none;
  padding:14px 14px;white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:all .15s;
}
.site-nav-link:hover{color:var(--text);border-bottom-color:var(--a1);}
.site-nav-link.active{color:var(--a1);border-bottom-color:var(--a1);font-weight:700;}
.site-nav-mobile{
  display:none;flex-direction:column;
  background:var(--panel);border-bottom:1px solid var(--bd);
  padding:8px 0;
}
.site-nav-mobile a{
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:2px;
  color:var(--muted);text-decoration:none;padding:12px 24px;
  border-left:2px solid transparent;transition:all .15s;display:block;
}
.site-nav-mobile a:hover{color:var(--text);border-left-color:var(--a1);}
.site-nav-mobile.open{display:flex;}
@media(max-width:700px){
  .site-nav{display:none;}
  .ham-btn{display:block;}
}


/* ══ ARCADE PAGE ══ */
/* arcade-wrap → page-wrap (unified above) */

/* Status strip */
.status-strip{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;background:var(--panel);border:1px solid var(--bd);border-radius:12px;
  margin-bottom:20px;
}
.status-blink{width:8px;height:8px;border-radius:50%;background:var(--a3);flex-shrink:0;animation:sblink 1.5s ease infinite;}
@keyframes sblink{0%,100%{opacity:1;}50%{opacity:.2;}}
.status-text{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:2px;color:var(--text);flex:1;}
.status-bar-wrap{width:120px;height:6px;background:var(--bd);border-radius:20px;overflow:hidden;flex-shrink:0;}
.status-bar-fill{height:100%;background:var(--a3);border-radius:20px;width:0%;transition:width .6s;}
.status-count{font-family:'Bebas Neue',sans-serif;font-size:18px;color:var(--text);flex-shrink:0;}
.status-max{font-size:11px;color:var(--muted);}

/* Section header */
.section-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.section-title{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:3px;color:var(--text);}
.refresh-btn{
  font-family:'Space Mono',monospace;font-size:9px;letter-spacing:2px;
  padding:5px 12px;border:1px solid var(--bd);background:transparent;color:var(--muted);
  cursor:pointer;border-radius:20px;transition:all .15s;
}
.refresh-btn:hover{border-color:var(--a1);color:var(--a1);}
.refresh-btn.spinning{animation:spin .6s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* Game room cards */
.rooms-grid{display:flex;flex-direction:column;gap:10px;}
.room-card{
  padding:16px;border:1px solid var(--bd);border-radius:12px;
  background:var(--panel);cursor:pointer;transition:all .18s;
  display:flex;align-items:center;gap:14px;
}
.room-card:hover{border-color:var(--a1);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.4);}
.room-icon{
  width:48px;height:48px;border-radius:10px;background:rgba(255,45,85,.1);
  border:1px solid rgba(255,45,85,.2);display:flex;align-items:center;justify-content:center;
  font-size:24px;flex-shrink:0;
}
.room-info{flex:1;min-width:0;}
.room-host{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:3px;color:var(--text);}
.room-meta{font-family:'Space Mono',monospace;font-size:9px;color:var(--muted);margin-top:3px;letter-spacing:1px;}
.room-tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap;}
.room-tag{font-family:'Space Mono',monospace;font-size:8px;letter-spacing:1px;padding:2px 8px;border:1px solid;border-radius:20px;}
.room-tag.mode-classic{color:var(--a4);border-color:rgba(10,132,255,.3);}
.room-tag.mode-wildcard{color:var(--a2);border-color:rgba(255,214,10,.3);}
.room-tag.waiting{color:var(--a3);border-color:rgba(48,209,88,.3);}
.room-join{
  font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:2px;
  padding:10px 18px;background:var(--a1);color:#fff;border:none;
  border-radius:8px;cursor:pointer;flex-shrink:0;transition:all .15s;
}
.room-join:hover{background:#ff4d6a;}

/* Empty state */
.empty-state{
  text-align:center;padding:50px 20px;border:1px dashed var(--bd);
  border-radius:12px;background:var(--panel);
}
.empty-emoji{font-size:48px;margin-bottom:12px;}
.empty-title{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:3px;color:var(--muted);}
.empty-sub{font-family:'Space Mono',monospace;font-size:10px;color:var(--muted);margin-top:8px;line-height:1.7;}

/* Full state */
.full-state{
  text-align:center;padding:20px;border:1px solid rgba(255,45,85,.3);
  border-radius:12px;background:rgba(255,45,85,.06);margin-bottom:20px;
}
.full-title{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:3px;color:var(--a1);}
.full-sub{font-family:'Space Mono',monospace;font-size:10px;color:var(--muted);margin-top:4px;line-height:1.7;}

/* Join modal */
.join-overlay{
  position:fixed;inset:0;background:rgba(8,8,16,.92);z-index:200;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.join-overlay.open{display:flex;}
.join-dialog{
  background:var(--panel);border:1px solid var(--bd);border-radius:16px;
  padding:28px;max-width:400px;width:100%;position:relative;
}
.join-close{
  position:absolute;top:16px;right:16px;
  width:28px;height:28px;border-radius:50%;
  background:transparent;border:none;
  font-size:18px;color:var(--a1);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;line-height:1;
}
.join-close:hover{background:rgba(255,45,85,.12);}
.join-title{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:3px;color:var(--text);margin-bottom:4px;}
.join-host{font-family:'Space Mono',monospace;font-size:10px;color:var(--muted);margin-bottom:20px;}
.join-label{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:3px;color:var(--muted);margin-bottom:8px;display:block;}
.join-input{
  width:100%;background:var(--bg);border:1px solid var(--bd);color:var(--text);
  font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:2px;padding:12px 14px;
  outline:none;border-radius:8px;margin-bottom:16px;
}
.join-input:focus{border-color:var(--a1);}
.join-input::placeholder{color:var(--muted);}
.join-btns{display:flex;gap:8px;}
.join-go{flex:1;padding:13px;background:var(--a1);color:#fff;border:none;font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:3px;cursor:pointer;border-radius:8px;}
.join-cancel{display:none;}

/* Back link */
.back-link{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Space Mono',monospace;font-size:9px;letter-spacing:2px;color:var(--muted);
  text-decoration:none;margin-bottom:20px;padding:6px 12px;
  border:1px solid var(--bd);border-radius:20px;transition:all .15s;
}
.back-link:hover{color:var(--text);border-color:var(--text);}

/* Auto-refresh indicator */
.auto-tag{font-family:'Space Mono',monospace;font-size:8px;letter-spacing:2px;color:var(--muted);}