:root{
  --ink:#16121e; --panel:#221a30; --panel2:#2c2240;
  --gold:#ffce46; --pink:#ff60b0; --cyan:#82eeff; --green:#5ab46a;
  --red:#e23c3c; --txt:#efeaf6; --dim:#a8a2bc;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
html,body{height:100%;background:var(--ink);overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  color:var(--txt);overscroll-behavior:none;touch-action:none;}
#game{position:fixed;inset:0;}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;
  image-rendering:crisp-edges;background:#0c0a14;}
.hidden{display:none !important;}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;
  padding:max(12px,env(safe-area-inset-top)) 14px 0;}
.hud-top{display:flex;align-items:flex-start;gap:12px;}
.meter-wrap{flex:1;max-width:60%;}
.meter-label{font-size:11px;font-weight:800;letter-spacing:2px;color:var(--dim);margin:0 0 3px 2px;}
.meter{height:18px;background:#0e0a16;border:2px solid #000;border-radius:11px;overflow:hidden;
  box-shadow:0 2px 0 rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.05);}
.meter-fill{height:100%;width:100%;border-radius:9px;
  background:linear-gradient(90deg,#ff9a3c,#ffce46);transition:width .15s linear;}
.meter-fill.low{background:linear-gradient(90deg,#e23c3c,#ff7a3c);animation:pulse .6s infinite;}
.meter.hp{height:13px;margin-top:5px;}
.meter-label.hp-label{margin-top:6px;color:#ff9a9a;}
.meter-fill.health{background:linear-gradient(90deg,#e23c3c,#ff6a6a);}
.meter-fill.health.low{background:linear-gradient(90deg,#8a1010,#e23c3c);animation:pulse .5s infinite;}
@keyframes pulse{50%{opacity:.55;}}
.stats{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin-top:42px;}
.stat{font-weight:800;font-size:17px;text-shadow:0 2px 0 #000;background:rgba(20,16,28,.6);
  padding:3px 9px;border-radius:9px;}
#moneyStat{color:var(--green);}
.badge{position:absolute;left:50%;transform:translateX(-50%);top:54px;
  font-weight:800;font-size:13px;letter-spacing:1px;padding:5px 12px;border-radius:20px;
  background:linear-gradient(180deg,#3a2d56,#241a36);border:1px solid #000;box-shadow:0 3px 0 rgba(0,0,0,.5);}
.badge.cop{top:88px;background:linear-gradient(180deg,#b53030,#7a1f1f);animation:pulse .5s infinite;}
.toast{position:absolute;left:50%;bottom:38%;transform:translateX(-50%);
  background:rgba(16,12,24,.92);border:1px solid #000;padding:9px 16px;border-radius:12px;
  font-weight:700;font-size:15px;text-align:center;box-shadow:0 4px 0 rgba(0,0,0,.5);max-width:80%;
  transition:opacity .25s, transform .25s;}

/* ---------- Touch controls ---------- */
#controls{position:absolute;inset:0;pointer-events:none;}
#stickZone{position:absolute;left:0;bottom:0;width:50%;height:55%;pointer-events:auto;}
#stickBase{position:absolute;width:128px;height:128px;border-radius:50%;
  background:radial-gradient(circle,rgba(60,48,86,.35),rgba(30,24,44,.45));
  border:2px solid rgba(255,255,255,.12);left:30px;bottom:30px;opacity:.5;
  transition:opacity .15s;touch-action:none;}
#stickBase.active{opacity:.95;}
#stickKnob{position:absolute;width:58px;height:58px;left:35px;top:35px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#6a5a92,#3a2d56);border:2px solid rgba(255,255,255,.2);
  box-shadow:0 3px 6px rgba(0,0,0,.5);}
#buttons{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:34px;
  display:flex;flex-direction:column;gap:16px;align-items:center;pointer-events:auto;}
.btn{pointer-events:auto;border:none;font-family:inherit;font-weight:800;color:#fff;
  border-radius:50%;box-shadow:0 5px 0 rgba(0,0,0,.45);position:relative;
  active:scale(.95);transition:transform .05s;}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.45);}
.btn.action{width:104px;height:104px;font-size:19px;letter-spacing:.5px;
  background:radial-gradient(circle at 38% 30%,#ff8a4c,#e2502a);border:3px solid #1a0f0a;}
.btn.action.buy{background:radial-gradient(circle at 38% 30%,#62d07a,#2f8a4a);}
.btn.action.rob{background:radial-gradient(circle at 38% 30%,#ff5a8a,#b52050);}
.btn.action:disabled{background:radial-gradient(circle at 38% 30%,#4a4458,#322a40);color:#7a7390;}
.btn.drink{width:74px;height:74px;font-size:24px;
  background:radial-gradient(circle at 38% 30%,#ffd95a,#caa030);border:3px solid #4a3a10;color:#3a2a00;}
.btn.drink span{position:absolute;right:-2px;top:-2px;background:#e23c3c;color:#fff;
  font-size:13px;min-width:22px;height:22px;line-height:22px;border-radius:11px;border:2px solid #1a0f0a;}
.btn.drink:disabled{filter:grayscale(.7) brightness(.7);}

/* ---------- Screens ---------- */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;padding:30px;text-align:center;z-index:20;
  background:radial-gradient(circle at 50% 30%,#241a38,#0c0a14 80%);}
.title-art h1{font-size:clamp(40px,13vw,76px);line-height:.92;font-weight:900;letter-spacing:1px;
  text-shadow:0 4px 0 #000,0 0 24px rgba(255,96,176,.4);}
.title-art h1 span{color:var(--pink);text-shadow:0 4px 0 #000,0 0 28px rgba(255,96,176,.7);}
.tag{color:var(--cyan);font-weight:700;font-size:15px;letter-spacing:.5px;}
.bigbtn{margin-top:8px;background:linear-gradient(180deg,#ff8a4c,#e2502a);color:#fff;font-weight:900;
  font-size:21px;letter-spacing:1px;border:3px solid #1a0f0a;border-radius:16px;padding:16px 34px;
  box-shadow:0 6px 0 rgba(0,0,0,.5);font-family:inherit;animation:bob 1.6s ease-in-out infinite;}
@keyframes bob{50%{transform:translateY(-5px);}}
.bigbtn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.5);}
.linkbtn{background:none;border:none;color:var(--dim);font-family:inherit;font-size:14px;
  text-decoration:underline;font-weight:600;}
.howto{max-width:440px;background:rgba(16,12,24,.7);border:1px solid #3a2d56;border-radius:14px;
  padding:16px 18px;display:flex;flex-direction:column;gap:9px;font-size:14px;line-height:1.4;color:#d8d2e6;text-align:left;}
.howto b{color:var(--gold);} .mk{color:var(--gold);font-weight:900;}
.go{font-size:clamp(34px,11vw,60px);font-weight:900;color:var(--red);text-shadow:0 4px 0 #000;}
.go-sub{color:var(--dim);font-size:15px;margin-top:-8px;}
.score{display:flex;gap:34px;margin:6px 0;}
.score span{display:block;font-size:30px;font-weight:900;}
.score div:nth-child(1) span{color:var(--cyan);} .score div:nth-child(2) span{color:var(--green);}
.score small{display:block;color:var(--dim);font-size:12px;letter-spacing:1px;text-transform:uppercase;}
.rank{color:var(--gold);font-weight:800;font-size:18px;min-height:22px;}
.spinner{width:42px;height:42px;border:5px solid #3a2d56;border-top-color:var(--pink);border-radius:50%;
  animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
#loading p{color:var(--dim);margin-top:14px;font-size:14px;}

/* ---------- install gate ---------- */
.install-card{max-width:420px;background:rgba(16,12,24,.7);border:1px solid #3a2d56;border-radius:16px;
  padding:20px;display:flex;flex-direction:column;gap:14px;font-size:15px;line-height:1.5;color:#dcd6ea;}
.install-card b{color:var(--gold);} .ic{font-size:18px;}
.install-note{color:var(--dim);font-size:13px;max-width:360px;}

/* ---------- dialogue ---------- */
#dialogue{position:absolute;inset:0;z-index:30;display:flex;align-items:flex-end;
  justify-content:center;padding:0 12px env(safe-area-inset-bottom);
  background:linear-gradient(180deg,rgba(8,6,14,0) 40%,rgba(8,6,14,.55));}
.dlg-box{width:100%;max-width:520px;margin-bottom:18px;background:linear-gradient(180deg,#2a2040,#1c1530);
  border:2px solid #000;border-radius:18px;box-shadow:0 8px 0 rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06) inset;
  padding:14px 16px 16px;animation:dlgin .18s ease-out;}
@keyframes dlgin{from{transform:translateY(20px);opacity:0;}}
.dlg-head{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.dlg-portrait{width:62px;height:62px;border-radius:12px;background:#15101f;border:2px solid #000;
  display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto;}
.dlg-portrait img{width:108px;height:108px;image-rendering:pixelated;margin-top:14px;}
.dlg-name{font-weight:900;font-size:19px;color:var(--gold);text-shadow:0 2px 0 #000;}
.dlg-text{font-size:16px;line-height:1.45;color:#efeaf6;min-height:48px;padding:2px 2px 4px;}
.dlg-choices{display:flex;flex-direction:column;gap:9px;margin-top:6px;}
.dlg-choice{pointer-events:auto;font-family:inherit;font-weight:800;font-size:15px;color:#fff;text-align:left;
  background:linear-gradient(180deg,#3a2d56,#2a2040);border:2px solid #000;border-radius:12px;padding:12px 14px;
  box-shadow:0 4px 0 rgba(0,0,0,.45);}
.dlg-choice:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.45);}
.dlg-choice.good{background:linear-gradient(180deg,#2f8a4a,#236b39);}
.dlg-choice.bad{background:linear-gradient(180deg,#b52050,#7e1538);}
.dlg-choice.dim{opacity:.65;}

/* ---------- objective arrow handled on canvas ---------- */

/* ---------- casino ---------- */
.call-beer{position:absolute;top:max(50px,calc(env(safe-area-inset-top) + 44px));left:50%;transform:translateX(-50%);
  z-index:17;pointer-events:auto;background:linear-gradient(180deg,#ffd95a,#caa030);color:#3a2a00;border:3px solid #4a3a10;
  border-radius:14px;font-family:inherit;font-weight:900;font-size:14px;padding:8px 16px;box-shadow:0 4px 0 rgba(0,0,0,.45);}
.call-beer:active{transform:translateX(-50%) translateY(2px);}
.cas-overlay{position:absolute;inset:0;z-index:38;display:flex;align-items:center;justify-content:center;
  padding:16px;background:radial-gradient(circle at 50% 30%,rgba(60,20,30,.7),rgba(8,6,14,.92));}
.cas-box{position:relative;width:min(460px,94vw);background:linear-gradient(180deg,#2a1622,#160d16);border:3px solid #caa030;
  border-radius:18px;padding:16px;box-shadow:0 10px 0 rgba(0,0,0,.5),0 0 30px rgba(202,160,48,.3);}
.cas-beer{position:absolute;top:12px;right:12px;background:linear-gradient(180deg,#ffd95a,#caa030);color:#3a2a00;
  border:3px solid #4a3a10;border-radius:12px;font-family:inherit;font-weight:900;font-size:18px;
  padding:6px 12px;box-shadow:0 4px 0 rgba(0,0,0,.45);}
.cas-beer:active{transform:translateY(2px);}
.toast{z-index:46;}
.cas-title{font-weight:900;font-size:20px;color:var(--gold);text-align:center;letter-spacing:1px;text-shadow:0 2px 0 #000;}
.cas-rule{display:block;font-size:11px;color:var(--dim);font-weight:700;letter-spacing:.5px;margin-top:2px;}
.bj-area{display:flex;align-items:center;gap:8px;margin-top:12px;min-height:64px;}
.bj-label{font-size:11px;font-weight:800;color:var(--dim);width:54px;letter-spacing:1px;}
.cards{display:flex;gap:5px;flex:1;flex-wrap:wrap;}
.card{width:38px;height:54px;border-radius:6px;background:#f6f4ee;border:2px solid #000;display:flex;
  align-items:center;justify-content:center;font-weight:900;font-size:17px;box-shadow:0 2px 0 rgba(0,0,0,.4);}
.card.red{color:#d22;} .card.blk{color:#222;}
.card.back{background:repeating-linear-gradient(45deg,#3a2d56,#3a2d56 5px,#2a2040 5px,#2a2040 10px);border-color:#000;}
.val{font-weight:900;font-size:16px;color:#fff;min-width:30px;text-align:right;}
.bj-msg,.slot-msg{text-align:center;font-weight:800;font-size:15px;color:var(--cyan);margin:12px 0;min-height:20px;}
.bj-msg.win,.slot-msg.win{color:#7be07a;} .bj-msg.lose{color:#ff7a7a;}
.bj-bet{display:flex;align-items:center;justify-content:center;gap:14px;margin:8px 0;}
.bj-bet span{font-weight:900;font-size:20px;color:var(--green);min-width:64px;text-align:center;}
.chip{width:42px;height:42px;border-radius:50%;border:3px solid #1a0f0a;background:radial-gradient(circle at 38% 30%,#6a5a92,#3a2d56);
  color:#fff;font-size:22px;font-weight:900;font-family:inherit;box-shadow:0 4px 0 rgba(0,0,0,.45);}
.chip:active{transform:translateY(2px);}
.bj-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:6px;}
.cas-btn{background:linear-gradient(180deg,#62d07a,#2f8a4a);color:#fff;border:3px solid #173d22;border-radius:12px;
  font-family:inherit;font-weight:800;font-size:16px;padding:11px 18px;box-shadow:0 4px 0 rgba(0,0,0,.45);}
.cas-btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.45);}
.cas-btn:disabled{filter:grayscale(.6) brightness(.7);}
.cas-leave{display:block;margin:14px auto 0;background:none;border:none;color:var(--dim);font-family:inherit;
  font-weight:700;font-size:13px;text-decoration:underline;}
.slot-reels{display:flex;gap:10px;justify-content:center;margin:16px 0;}
.slot-reels span{width:78px;height:90px;border-radius:12px;background:#0e0a16;border:3px solid #caa030;
  display:flex;align-items:center;justify-content:center;font-size:46px;box-shadow:inset 0 0 14px rgba(0,0,0,.6);}
.slot-reels span.spin{animation:reelspin .12s linear infinite;}
@keyframes reelspin{50%{transform:translateY(-4px);opacity:.7;}}
.slot-pay{margin-top:12px;font-size:11px;line-height:1.5;color:var(--dim);text-align:center;}
.slot-pay b{color:var(--gold);}

/* ===================== PIXEL UI THEME ===================== */
:root{ --font-body:'VT323', ui-monospace, monospace; --font-head:'Silkscreen','VT323', monospace; }
html, body{ font-family:var(--font-body); }
.title-art h1, .go, .cas-title, .dlg-name, .tut-title, .meter-label, .fname, .cas-rule,
.pause-title, .stat, .bigbtn, .cas-btn, .tut-next, .pause-btn, .badge{ font-family:var(--font-head); }
img, canvas{ image-rendering:pixelated; }
.tut-img, .dlg-portrait img{ image-rendering:pixelated; }
/* blocky corners */
.bigbtn,.btn,.fbtn,.cas-btn,.chip,.pedal,.dlg-choice,.tut-next,.pause-btn,.call-beer,.cas-beer,
.linkbtn,.meter,.meter-fill,.stat,.badge,.toast,.cas-box,.dlg-box,.howto,.install-card,
.fhp,.fhpfill,.chp,#carHpFill,.card,.tut-card,#tutRing,.table-bar{ border-radius:3px !important; }
/* readable sizes for the pixel body font */
.dlg-text,.tut-text,.bj-msg,.slot-msg{ font-size:20px; letter-spacing:.5px; }
.howto,.install-card{ font-size:18px; }
.cas-rule{ font-size:9px; } .meter-label{ font-size:9px; }
.tag{ font-family:var(--font-head); font-size:11px; }

/* ---------- first-person table control bars ---------- */
.table-overlay{position:absolute;inset:0;z-index:38;pointer-events:none;}
.table-bar{position:absolute;left:0;right:0;bottom:0;pointer-events:auto;
  background:linear-gradient(180deg,rgba(16,10,18,0),rgba(14,9,16,.96) 32%);
  padding:18px 14px max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:9px;}
.table-bar .bj-bet{margin:0;}
.table-bar .cas-beer{position:static;}
.cas-btn.big{font-size:20px;padding:14px 46px;}

/* ---------- driving controls ---------- */
#driveUI{position:absolute;inset:0;pointer-events:none;z-index:16;}
#wheelZone{position:absolute;left:0;bottom:0;width:50%;height:46%;pointer-events:auto;touch-action:none;}
#wheel{position:absolute;left:30px;bottom:30px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#2c2440 38%,#15101f 60%);border:9px solid #3a3550;
  box-shadow:0 5px 12px rgba(0,0,0,.55);transition:transform .04s;}
#wheel::before{content:'';position:absolute;left:50%;top:6px;width:9px;height:34px;background:#e2502a;
  transform:translateX(-50%);border-radius:4px;}
#wheel::after{content:'';position:absolute;left:12px;top:50%;width:106px;height:11px;background:#3a3550;
  transform:translateY(-50%);border-radius:6px;}
#pedals{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:32px;display:flex;flex-direction:column;gap:14px;pointer-events:auto;}
.pedal{pointer-events:auto;width:98px;height:76px;border:3px solid #1a0f0a;border-radius:18px;font-family:inherit;
  font-weight:900;font-size:17px;color:#fff;box-shadow:0 5px 0 rgba(0,0,0,.45);}
.pedal.gas{background:radial-gradient(circle at 40% 30%,#62d07a,#2f8a4a);}
.pedal.brake{background:radial-gradient(circle at 40% 30%,#ff8a7a,#c23030);}
.pedal:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.45);}
.exit-car{position:absolute;left:50%;transform:translateX(-50%);bottom:max(12px,env(safe-area-inset-bottom));
  pointer-events:auto;background:rgba(28,22,40,.85);color:#fff;border:2px solid #000;border-radius:12px;
  font-family:inherit;font-weight:800;font-size:13px;padding:8px 16px;box-shadow:0 3px 0 rgba(0,0,0,.45);}

/* ---------- pause ---------- */
.pause-btn{position:absolute;top:max(10px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));
  z-index:22;pointer-events:auto;width:46px;height:34px;border-radius:10px;border:2px solid #000;
  background:rgba(28,22,40,.8);color:var(--txt);font-size:13px;font-weight:900;letter-spacing:1px;
  box-shadow:0 3px 0 rgba(0,0,0,.45);}
.pause-btn:active{transform:translateY(2px);}
.pause-title{color:var(--gold);}
#pauseMenu{z-index:35;gap:14px;}
#pauseMenu .linkbtn{font-size:15px;}

/* ---------- interactive tutorial ---------- */
#tutorial{position:absolute;inset:0;z-index:40;}
#tutScrim{position:absolute;inset:0;background:rgba(8,6,14,.74);pointer-events:auto;}
#tutRing{position:absolute;border:3px solid var(--gold);border-radius:14px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(8,6,14,.0), 0 0 18px rgba(255,206,70,.8), inset 0 0 12px rgba(255,206,70,.4);
  transition:left .25s,top .25s,width .25s,height .25s;}
#tutArrow{position:absolute;font-size:34px;color:var(--gold);pointer-events:none;
  text-shadow:0 2px 0 #000,0 0 12px rgba(255,206,70,.8);animation:tbob 0.9s ease-in-out infinite;}
@keyframes tbob{50%{transform:translateY(-7px);}}
#tutCard{position:absolute;left:50%;top:54%;transform:translateX(-50%);width:min(440px,92vw);
  background:linear-gradient(180deg,#2a2040,#1c1530);border:2px solid #000;border-radius:18px;
  box-shadow:0 8px 0 rgba(0,0,0,.5);padding:16px 18px;pointer-events:auto;
  transition:top .25s, bottom .25s;}
.tut-img{display:block;margin:0 auto 8px;width:64px;height:64px;image-rendering:pixelated;}
.tut-title{font-weight:900;font-size:20px;color:var(--gold);text-align:center;text-shadow:0 2px 0 #000;margin-bottom:6px;}
.tut-text{font-size:15px;line-height:1.5;color:#efeaf6;text-align:center;min-height:46px;}
.tut-text b{color:var(--cyan);}
.tut-row{display:flex;align-items:center;gap:8px;margin-top:14px;}
.tut-count{flex:1;text-align:center;color:var(--dim);font-size:12px;font-weight:700;}
.tut-mini{background:none;border:none;color:var(--dim);font-family:inherit;font-weight:700;font-size:13px;text-decoration:underline;}
.tut-next{background:linear-gradient(180deg,#ff8a4c,#e2502a);color:#fff;font-family:inherit;font-weight:800;
  font-size:15px;border:2px solid #1a0f0a;border-radius:12px;padding:10px 16px;box-shadow:0 4px 0 rgba(0,0,0,.45);}
.tut-next:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.45);}

/* ---------- car health ---------- */
.carhp{position:absolute;left:14px;top:56px;display:flex;align-items:center;gap:6px;}
.carhp span{font-size:16px;}
.chp{width:150px;height:12px;background:#0e0a16;border:2px solid #000;border-radius:7px;overflow:hidden;}
#carHpFill{height:100%;width:100%;background:linear-gradient(90deg,#5ab46a,#9be07a);transition:width .12s;}

/* ---------- fight UI ---------- */
#fightUI{position:absolute;inset:0;pointer-events:none;z-index:18;}
.fbars{position:absolute;top:max(12px,env(safe-area-inset-top));left:0;right:0;display:flex;gap:12px;padding:0 14px;}
.fbar{flex:1;}
.fname{font-size:12px;font-weight:800;letter-spacing:1px;color:var(--gold);margin-bottom:3px;text-shadow:0 1px 0 #000;}
.fbar:last-child{text-align:right;} .fbar:last-child .fname{color:#ff7a7a;}
.fhp{height:16px;background:#0e0a16;border:2px solid #000;border-radius:9px;overflow:hidden;box-shadow:0 2px 0 rgba(0,0,0,.5);}
.fhpfill{height:100%;transition:width .12s;}
.fhpfill.me{background:linear-gradient(90deg,#3fb56a,#9be07a);}
.fhpfill.foe{background:linear-gradient(270deg,#e23c3c,#ff8a4c);float:right;}
.fbanner{position:absolute;left:50%;top:34%;transform:translateX(-50%);font-size:clamp(34px,12vw,64px);
  font-weight:900;color:#fff;text-shadow:0 4px 0 #000,0 0 24px rgba(255,96,176,.6);letter-spacing:2px;}
.fbtns{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:30px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;pointer-events:auto;}
.fbtn{pointer-events:auto;width:84px;height:64px;border:3px solid #1a0f0a;border-radius:16px;font-family:inherit;
  font-weight:800;font-size:15px;color:#fff;box-shadow:0 5px 0 rgba(0,0,0,.45);
  background:radial-gradient(circle at 38% 30%,#5a6a86,#3a4458);position:relative;}
.fbtn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.45);}
.fbtn.pun{background:radial-gradient(circle at 38% 30%,#ff8a4c,#e2502a);}
.fbtn.kik{background:radial-gradient(circle at 38% 30%,#ff5a8a,#b52050);}
.fbtn.beer{background:radial-gradient(circle at 38% 30%,#ffd95a,#caa030);color:#3a2a00;}
.fbtn.beer span{position:absolute;right:-3px;top:-3px;background:#e23c3c;color:#fff;font-size:12px;
  min-width:20px;height:20px;line-height:20px;border-radius:10px;border:2px solid #1a0f0a;}
.fbtn:disabled{filter:grayscale(.6) brightness(.7);}

/* ---------------- multiplayer ---------------- */
.mp-input{ font-family:var(--font-body,inherit); font-size:20px; text-align:center; text-transform:uppercase;
  background:#0d0a14; color:#ffe24a; border:3px solid #3a3450; border-radius:3px; padding:12px 14px; margin:6px 0; width:230px; outline:none; }
.mp-input::placeholder{ color:#6a6480; }
.bigbtn.small{ padding:12px 18px; font-size:18px; width:auto; }
.mp-join{ display:flex; gap:8px; align-items:center; margin:6px 0; }
.mp-join .mp-input{ width:150px; margin:0; }
.mp-code{ font-family:var(--font-head,inherit); color:#9fb0ff; letter-spacing:2px; margin:6px 0 14px; }
#mpRoomCode{ color:#ffe24a; font-size:1.3em; }
.mp-players{ display:flex; flex-direction:column; gap:8px; margin:4px 0 16px; min-width:240px; }
.mp-row{ display:flex; align-items:center; gap:10px; background:#15101f; border:2px solid #2a2440; border-radius:3px; padding:9px 12px; }
.mp-dot{ width:14px; height:14px; border-radius:3px; box-shadow:0 0 8px currentColor; }
.mp-row .nm{ flex:1; text-align:left; font-family:var(--font-body,inherit); font-size:18px; color:#e8e2f0; }
.mp-row .rd{ font-size:13px; color:#6ade7a; } .mp-row .rd.no{ color:#6a6480; }
.mp-row .hostTag{ font-size:12px; color:#ffd24a; }
#spectateBar{ position:absolute; top:max(12px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); z-index:24;
  background:rgba(20,10,24,.9); border:2px solid #b8262c; border-radius:3px; color:#ff9aa6;
  font-family:var(--font-head,inherit); font-size:13px; padding:6px 14px; white-space:nowrap; }
#mpMenu, #mpLobby, #mpOver{ z-index:26; }
.mpbj-seats{ display:flex; gap:6px; justify-content:center; margin:6px 0; flex-wrap:wrap; }
.mpbj-seat{ background:#15101f; border:2px solid #2a2440; border-radius:3px; padding:5px 8px; min-width:64px; text-align:center; }
.mpbj-seat.you{ border-color:#ffd24a; } .mpbj-seat.turn{ box-shadow:0 0 10px #ffd24a; border-color:#ffd24a; }
.mpbj-seat .sn{ font-size:12px; color:#9fb0ff; display:block; } .mpbj-seat .sc{ font-size:18px; color:#fff; } .mpbj-seat .sb{ font-size:11px; color:#caa030; }

/* ---------------- single-player intro quote ---------------- */
#introScreen{ position:absolute; inset:0; z-index:60; background:#000; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:0 30px; opacity:1; transition:opacity .9s ease; }
.intro-wrap{ max-width:600px; text-align:center; }
.intro-quote{ font-family:var(--font-body,inherit); color:#efe8d6; font-size:27px; line-height:1.45; min-height:1.45em; white-space:pre-wrap; }
.intro-quote.typing::after{ content:'▍'; color:#ffd24a; animation:introblink 1s steps(1) infinite; }
.intro-by{ margin-top:20px; font-family:var(--font-head,inherit); color:#ffd24a; font-size:15px; letter-spacing:2px; opacity:0; transition:opacity .5s ease; }
.intro-skip{ position:absolute; bottom:max(22px,env(safe-area-inset-bottom)); left:0; right:0; text-align:center;
  font-family:var(--font-body,inherit); color:#555; font-size:14px; letter-spacing:1px; }
@keyframes introblink{ 50%{ opacity:0; } }

/* ---------------- multiplayer end-of-match recap ---------------- */
.mp-end-list{ display:flex; flex-direction:column; gap:7px; margin:6px 0 18px; width:min(330px,86vw); }
.mp-end-row{ display:flex; align-items:center; gap:9px; background:#15101f; border:2px solid #2a2440; border-radius:3px; padding:9px 11px; }
.mp-end-row.win{ border-color:#ffd24a; background:#241d10; }
.mp-end-row.me .nm{ color:#7be0a0; }
.mp-end-row .mp-rank{ font-family:var(--font-head,inherit); font-size:14px; color:#6a6480; width:16px; text-align:center; }
.mp-end-row .nm{ flex:1; text-align:left; font-family:var(--font-body,inherit); font-size:18px; color:#e8e2f0; }
.mp-end-row .st{ text-align:right; display:flex; flex-direction:column; line-height:1.1; }
.mp-end-row .st b{ font-family:var(--font-head,inherit); font-size:15px; color:#ffd24a; font-weight:normal; }
.mp-end-row .st small{ font-size:12px; color:#9a93ac; }
#mpEnd{ z-index:27; }