:root{--bg:#060812;--s1:#0e1525;--s2:#131d2e;--s3:#1c2840;--bd:#26364f;--bd2:#334a68;--accent:#00e676;--red:#ff4444;--gold:#ffd740;--tm1:#e31837;--tm2:#8b5cf6;--tx:#e8f0ff;--mt:#607090;--felt:#07120f}

/* ═══ Press feedback + motion tokens (polish P1/P2, 2026-08-07) ═══
   Professional-standard interaction feel: every tappable surface reacts
   the frame it's touched. Hover doesn't exist on phones — :active is all
   a touch player feels. touch-action:manipulation kills double-tap-zoom
   tap delay; the webkit tap highlight is replaced by our own feedback. */
:root{
  /* Durations scale by the settings Animation Speed multiplier
     (slow 1.5 / normal 1 / fast .5 / off 0 — js/settings.ts sets the
     var). P2's tokenization is what makes this a real setting: every
     transition in the game reads these four values. */
  --anim-speed-multiplier:1;
  --t-tap:calc(80ms * var(--anim-speed-multiplier));
  --t-fast:calc(150ms * var(--anim-speed-multiplier));
  --t-med:calc(250ms * var(--anim-speed-multiplier));
  --t-fly:calc(550ms * var(--anim-speed-multiplier));
  --ease-out:cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-toss:cubic-bezier(0.22,0.61,0.36,1); /* flyers: quick release, soft landing */
}
html{-webkit-tap-highlight-color:transparent}
button,.ac,.mc,.pc,.chkbtn,.hbtn,.fold-btn,.dbl-btn,.dbtn,.dbtn-mini,
.db-tile,.db-zb,.dsc-btn,.dsc-cancel,.dsc-card,.ff-no,.ff-yes,.game-menu-btn,
.gm-item,.gpicker-card,.gpicker-close,.htp-back-mini,.lobbyCancel,.peek-card,
.pf-back,.pf-bal-btn,.pf-edit,.pick-oppcard-slot,.pick-card-slot,.pp,.qp-back,
.qp-game,.qp-wait-cancel,.tagmod-save,.wbtn,.pa-profile-link,.pa-signout{
  touch-action:manipulation}
/* Generic press state — composes via a filter dip + tiny scale so it works
   on inline-styled buttons too. Surfaces with their own transform get a
   composed rule below instead of this scale. */
button:active,.chkbtn:active,.fold-btn:active,.dbl-btn:active,
.dbtn:active,.dbtn-mini:active,.db-tile:active,.db-zb:active,.dsc-btn:active,
.dsc-cancel:active,.ff-no:active,.ff-yes:active,.game-menu-btn:active,
.gm-item:active,.gpicker-card:active,.gpicker-close:active,
.htp-back-mini:active,.lobbyCancel:active,.pf-back:active,.pf-bal-btn:active,
.pf-edit:active,.pp:active,.qp-back:active,.qp-game:active,
.qp-wait-cancel:active,.tagmod-save:active,.wbtn:active,
.pa-profile-link:active,.pa-signout:active{
  transform:scale(.97);filter:brightness(.88);
  transition:transform var(--t-tap) var(--ease-out),filter var(--t-tap) var(--ease-out)}
/* Hand cards keep their fan transform — compose the press into it. */
.ac:active{transform:rotate(var(--a,0deg)) translateY(calc(var(--y,0px) - 6px)) scale(.96);
  filter:brightness(.88)}
/* Mini cards / peek cards / pick slots: brightness dip only (their hover
   already scales; double-scaling reads as jitter). */
.mc:active,.peek-card:active,.dsc-card:active,
.pick-oppcard-slot:active,.pick-card-slot:active{filter:brightness(.85)}

*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;font-family:'Barlow Condensed',system-ui,sans-serif;margin:0;padding:0;height:100vh;height:100dvh;overflow:hidden}
.gr{color:var(--tx);background:var(--bg);width:100%;height:100vh;height:calc(var(--vh, 1vh) * 100);height:100dvh;max-width:480px;position:relative;overflow:hidden;border-radius:0;border:1px solid var(--bd);box-shadow:0 0 80px rgba(0,0,0,.8)}
@media (min-width:481px){.gr{border-radius:12px}}
@media (max-width:480px){
  .gr{border:none;box-shadow:none}
  body{padding:0;margin:0}
  /* Apply safe area padding to bottom elements */
  .hand{padding-bottom:env(safe-area-inset-bottom, 15px)!important}
  .dfoo{padding-bottom:calc(12px + env(safe-area-inset-bottom, 15px))!important}
  /* Small padding for grid */
  .pgr{padding-bottom:10px!important}
}
.lw{display:flex;align-items:baseline;gap:6px;flex-shrink:0}
.lsd{font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:5px;background:linear-gradient(to bottom,#fff,#9bb4d0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.lff{font-family:Georgia,serif;font-style:italic;color:#4ade80;text-shadow:0 0 8px rgba(0,230,118,.8),0 0 22px rgba(0,230,118,.35)}
/* Draft */
#gDr{position:absolute;inset:0;z-index:100;background:var(--bg);display:none;flex-direction:column;overflow:hidden}
.dh{padding:8px 16px;background:var(--s1);border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:8px}
.db{flex:1;overflow:hidden;display:flex;flex-direction:column;padding:10px 16px 0}
.sr{display:flex;gap:6px;flex-shrink:0;margin-bottom:8px}
.sl{flex:1;height:68px;border-radius:6px;border:1.5px dashed var(--bd2);background:var(--s2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;transition:var(--t-fast);position:relative;overflow:hidden;padding:12px 4px 0 4px}
.sl.f{border-style:solid;border-color:var(--accent);background:rgba(0,230,118,.05)}
.sl.f::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent)}
.slp{font-size:15px;letter-spacing:3px;color:#5a7090;font-family:'Bebas Neue',Impact,sans-serif;text-align:center;width:100%;line-height:1}.sln{font-family:'Bebas Neue',Impact,sans-serif;font-size:14px}.slt{font-size:7px;color:#a0b4cc}.sle{font-size:15px;letter-spacing:3px;color:#5a7090;font-family:'Bebas Neue',Impact,sans-serif;text-align:center;width:100%;line-height:1;margin-top:2px}
.slx{display:none}
.plbl{font-size:7px;letter-spacing:3px;color:var(--mt);text-transform:uppercase;flex-shrink:0;margin-bottom:6px}.dlbl{text-align:center;color:#c0cfe0;font-size:8px}
.pgr{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:4px;padding-bottom:5px;min-height:0;align-content:start}
.pgr::-webkit-scrollbar{width:2px}.pgr::-webkit-scrollbar-thumb{background:var(--bd)}
.pp{height:68px;border-radius:5px;background:var(--s2);border:1.5px solid var(--bd);padding:7px 8px;display:flex;flex-direction:column;gap:2px;cursor:pointer;transition:var(--t-fast);position:relative;overflow:hidden}
.pp::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tc,var(--bd))}
/* Mirror the right column */
.pgr .pp:nth-child(even)::before{left:auto;right:0}
.pgr .pp:nth-child(even).sel::after{left:6px;right:auto}
.pp:hover{border-color:var(--tc);transform:translateY(-2px)}.pp.sel{border-color:var(--accent);background:rgba(0,230,118,.07)}
.pp.sel::after{content:'✓';position:absolute;top:4px;right:6px;color:var(--accent);font-size:12px;font-weight:700}
.ppt{display:flex;align-items:center;gap:4px}.ppos{font-family:'IBM Plex Mono',monospace;font-size:7px;font-weight:700;padding:1px 3px;border-radius:2px;background:var(--s3);color:#a0b4cc}.ptm{font-size:7px;color:#a0b4cc}.pnm{font-family:'Bebas Neue',Impact,sans-serif;font-size:14px}.ppr{font-family:'IBM Plex Mono',monospace;font-size:8px;color:var(--mt)}
/* Jersey mode — draft layout */
.jersey-mode .db{padding:6px 16px 2px!important}
.jersey-mode .pgr{grid-auto-rows:1fr!important;gap:4px!important;padding-bottom:4px!important;overflow-y:auto!important;min-height:0!important;align-content:stretch!important}
.jersey-mode .pp{height:auto!important;padding:2px 10px 2px!important;overflow:hidden!important;gap:0!important}
.jersey-mode .pp .ppt{display:none!important}
.jersey-mode .pp .pnm{font-size:13px!important;text-align:center!important}
.jersey-mode .pp:hover{transform:none!important}
.pp-jersey{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0}
.pp-jersey canvas{max-height:100%;max-width:100%;display:block}
/* Jersey mode — draft slots */
.jersey-mode .sl{padding:2px 4px!important;align-items:stretch!important;justify-content:flex-start!important;overflow:hidden!important}
body:not(.jersey-mode) .sl:not(.f){padding-top:12px!important}
body:not(.jersey-mode) .sl.f{padding:4px!important;justify-content:flex-start!important;align-items:center!important;gap:3px!important}
body:not(.jersey-mode) .sl.f .slp{font-size:7px;letter-spacing:2px;color:#a0b4cc;font-family:inherit;line-height:normal;text-align:left;width:auto;position:absolute;top:4px;left:4px}
body:not(.jersey-mode) .sl.f .slt{position:absolute;top:4px;right:4px;font-size:7px;letter-spacing:2px}
.sl-header{display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.sl-jersey{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0}
.sl-jersey canvas{height:38px;width:auto;display:block}
/* Jersey mode — game roster row */
.pc-jersey{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0;max-height:46px}
.pc-jersey canvas{height:46px;width:auto;display:block}
.pc-jersey+.pcn{display:none}
.dfoo{flex-shrink:0;padding:12px 16px;background:var(--bg);border-top:1px solid var(--bd);display:flex;align-items:stretch;justify-content:center;gap:10px}
.dfoo .dbtn{flex:1}
.dbtn-mini{flex-shrink:0;width:48px;background:transparent;color:var(--accent);border:1.5px solid var(--accent);border-radius:6px;font-family:'Bebas Neue',Impact,sans-serif;font-size:24px;line-height:1;cursor:pointer;transition:background var(--t-fast);padding:0}
.dbtn-mini:hover{background:rgba(0,230,118,.08)}
@media (max-width:420px){.dbtn-mini{width:44px;font-size:22px}}

/* Game-screen menu (top-right ⋮ → Settings / Exit Game). Positioned
   inside #gGm so it's only visible during play. */
.game-menu-btn{position:absolute;top:8px;right:8px;z-index:300;width:36px;height:36px;background:rgba(6,8,18,.85);border:1px solid var(--bd);border-radius:6px;color:var(--accent);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--t-fast),border-color var(--t-fast);padding:0}
.game-menu-btn:hover{background:rgba(0,230,118,.1);border-color:var(--accent)}
.game-menu{position:absolute;top:48px;right:8px;z-index:301;background:var(--s1,#0e1525);border:1px solid var(--bd);border-radius:6px;flex-direction:column;min-width:170px;box-shadow:0 8px 24px rgba(0,0,0,.6);overflow:hidden}
.gm-item{padding:11px 14px;background:transparent;border:none;color:var(--tx);font-family:'Bebas Neue',Impact,sans-serif;font-size:13px;letter-spacing:2px;text-align:left;cursor:pointer;transition:background var(--t-fast);border-bottom:1px solid var(--bd)}
.gm-item:last-child{border-bottom:none}
.gm-item:hover{background:rgba(0,230,118,.08)}
.gm-exit{color:#fca5a5}
.gm-exit:hover{background:rgba(252,165,165,.08)}
.dbtn{background:var(--accent);color:#000;border:none;padding:11px;border-radius:6px;font-family:'Bebas Neue',Impact,sans-serif;font-size:16px;letter-spacing:4px;cursor:pointer;transition:var(--t-fast);opacity:.35;pointer-events:none;width:100%}.dbtn.on{opacity:1;pointer-events:auto}
/* Game */
#gGm{position:absolute;inset:0;display:none;flex-direction:column;height:100%}
.brd{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;position:relative}
.pz{flex-shrink:0;height:48px;display:flex;align-items:flex-start;justify-content:center;gap:4px;padding:0 13px 4px 13px;overflow:visible}
.pz::-webkit-scrollbar{height:2px}.pz::-webkit-scrollbar-thumb{background:var(--bd)}
.opz{background:rgba(255,255,255,.01);align-items:flex-start;padding:0 13px 0 13px;position:relative;z-index:0}
.ypz{border-top:1px solid var(--bd);background:rgba(0,230,118,.015);align-items:flex-start;position:relative;z-index:0}
.pze{font-size:10px;letter-spacing:3px;color:var(--mt);opacity:.7;text-transform:uppercase;white-space:nowrap;width:100%;text-align:center;display:flex;align-items:center;justify-content:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.mc{width:48px;height:64px;border-radius:4px;background:var(--s2);border:1.5px solid var(--mcb,var(--bd));position:relative;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;flex-shrink:0;transition:transform var(--t-fast)}
.mc:hover{transform:scale(1.18);z-index:100!important;position:relative}
.opz:has(.mc:hover){z-index:100!important}
.ypz:has(.mc:hover){z-index:200!important}
.mc::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2.5px;background:var(--mcb,var(--bd));z-index:1}
.mca{height:27px;overflow:hidden;flex-shrink:0}.mca svg{width:100%;height:auto;display:block}
.mcn{font-family:'Bebas Neue',Impact,sans-serif;font-size:5.5px;padding:1px 3px 1px 5px;color:var(--mt);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;line-height:1.5;background:rgba(0,0,0,.25)}
/* In-flight card states */
@keyframes mcPulse{0%,100%{box-shadow:0 0 4px var(--mcb,rgba(107,114,128,.3))}50%{box-shadow:0 0 14px var(--mcb,rgba(107,114,128,.7))}}
.mc.mc-inflight{animation:mcPulse 1.5s ease-in-out infinite}
.mc-countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.75);font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;color:#e8f0ff;z-index:10;border-radius:3px;pointer-events:none;text-shadow:0 0 6px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.8)}
.mc.mc-flip .mc-countdown{}
.mc.mc-inflight-opp .mcn{filter:blur(3px)}
.mc.mc-inflight-opp .mca{opacity:.7}
@keyframes mcReveal{0%{box-shadow:0 0 0 rgba(255,255,255,0);transform:scale(1)}35%{box-shadow:0 0 16px rgba(255,255,255,.5);transform:scale(1.15)}100%{box-shadow:none;transform:scale(1)}}
@keyframes mcRevealFlip{0%{box-shadow:0 0 0 rgba(255,255,255,0);transform:scale(1)}35%{box-shadow:0 0 16px rgba(255,255,255,.5);transform:scale(1.15)}100%{box-shadow:none;transform:scale(1)}}
.mc.mc-resolved{animation:mcReveal .7s ease-out}
.mc.mc-resolved.mc-flip{animation:mcRevealFlip .7s ease-out}
.mc.mc-resolved:hover{transform:scale(1.18)!important}
.mc.mc-resolved.mc-flip:hover{transform:scale(1.18)!important}
.or,.yr{flex-shrink:0;height:88px;display:flex;align-items:center;gap:6px;padding:4px 13px;position:relative;transition:background var(--t-fast)}
.or{background:var(--bg);border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);position:relative;z-index:1}.yr{background:rgba(0,230,118,.018);border-top:1px solid var(--bd);position:relative;z-index:1}
.or::before{display:none}
.yr::before{display:none}
.pc{flex:1;height:79px;border-radius:6px;background:var(--s2);border:1px solid var(--bd);position:relative;overflow:hidden;display:flex;flex-direction:column;transition:border-color var(--t-med),box-shadow var(--t-med),opacity var(--t-med)}
.pc.pnd{border-color:rgba(255,215,64,.5);box-shadow:0 0 8px rgba(255,215,64,.08)}.pc.dbf{border-color:rgba(255,68,68,.5);box-shadow:0 0 8px rgba(255,68,68,.08)}
.pc.bnch{border-color:rgba(220,38,38,.5)}
.pc.bnch .pcb{visibility:hidden}
.pc.bnch::after{content:'';position:absolute;inset:0;border-radius:5px;background:url('../Artwork/explodingBrick.png') center 70%/250% auto no-repeat;background-color:rgba(10,10,20,.95);z-index:5}
/* Effect animations — designed for easy replacement with professional animations */
@keyframes fx-brick-icon{0%{transform:scale(5);opacity:0}18%{transform:scale(1.15);opacity:1}35%{transform:scale(0.95);opacity:1}55%{transform:scale(1);opacity:1}60%{transform:scale(1.5);opacity:.6}65%{transform:scale(2.5);opacity:0}100%{transform:scale(2.5);opacity:0}}
@keyframes fx-brick-shake{0%,100%{transform:translateX(0)}10%{transform:translateX(-5px)}20%{transform:translateX(5px)}30%{transform:translateX(-4px)}40%{transform:translateX(4px)}50%{transform:translateX(-3px)}60%{transform:translateX(3px)}70%{transform:translateX(-2px)}80%{transform:translateX(2px)}90%{transform:translateX(-1px)}}
.fx-brick-icon{position:absolute;inset:-2px;display:flex;align-items:center;justify-content:center;z-index:10;pointer-events:none;animation:fx-brick-icon 1.4s ease-out forwards;overflow:hidden;border-radius:5px;background:rgba(10,10,20,.95);transform-origin:center 70%}
.fx-brick-icon img{width:110%;height:110%;object-fit:cover;mix-blend-mode:screen}
.pc.fx-shaking{animation:fx-brick-shake .6s ease-out!important}
@keyframes fx-revealed-pulse{0%,100%{box-shadow:0 0 6px rgba(255,255,255,.25)}50%{box-shadow:0 0 18px rgba(255,255,255,.7)}}
.ac.fx-revealed{animation:fx-revealed-pulse 1s ease-in-out 2!important;border-color:rgba(255,255,255,.6)!important;box-shadow:0 0 6px rgba(255,255,255,.3)}
.pc.swapped{}
@keyframes cycleSpin{0%{transform:scaleX(1)}16.6%{transform:scaleX(-1)}33.3%{transform:scaleX(1)}50%{transform:scaleX(-1)}66.6%{transform:scaleX(1)}83.3%{transform:scaleX(-1)}100%{transform:scaleX(1)}}
.pc.cycling{animation:cycleSpin .8s ease-in-out!important}
/* Position-card flash for copy/steal-FP family. Source = gold,
 * target = accent green; both expand briefly with a glow ring. */
@keyframes pcFlashSource{0%{transform:scale(1);box-shadow:0 0 0 rgba(255,215,64,0)}35%{transform:scale(1.12);box-shadow:0 0 22px rgba(255,215,64,.9),0 0 40px rgba(255,215,64,.4)}100%{transform:scale(1);box-shadow:0 0 0 rgba(255,215,64,0)}}
@keyframes pcFlashTarget{0%{transform:scale(1);box-shadow:0 0 0 rgba(0,230,118,0)}35%{transform:scale(1.12);box-shadow:0 0 22px rgba(0,230,118,.9),0 0 40px rgba(0,230,118,.4)}100%{transform:scale(1);box-shadow:0 0 0 rgba(0,230,118,0)}}
@keyframes pcFlashHalved{0%{transform:scale(1);box-shadow:0 0 0 rgba(220,38,38,0)}35%{transform:scale(1.12);box-shadow:0 0 22px rgba(220,38,38,.9),0 0 40px rgba(220,38,38,.4)}100%{transform:scale(1);box-shadow:0 0 0 rgba(220,38,38,0)}}
.pc.pc-flash-source{animation:pcFlashSource 900ms ease-in-out;z-index:20;position:relative}
.pc.pc-flash-target{animation:pcFlashTarget 900ms ease-in-out;z-index:20;position:relative}
.pc.pc-flash-halved{animation:pcFlashHalved 900ms ease-in-out;z-index:20;position:relative}
.pc.lckd{border-color:rgba(180,180,180,.5);box-shadow:0 0 8px rgba(180,180,180,.12);background-image:repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(180,180,180,.06) 4px,rgba(180,180,180,.06) 8px)}
.pcs{height:3px;flex-shrink:0}.pcb{flex:1;display:flex;flex-direction:column;padding:3px 6px 4px;gap:1px}
.pct{display:flex;align-items:center;justify-content:space-between}
.pcpos{font-family:'IBM Plex Mono',monospace;font-size:6px;font-weight:700;color:var(--mt)}.pctm{font-size:6px;color:var(--mt)}
.pcn{font-family:'Bebas Neue',Impact,sans-serif;font-size:11px;letter-spacing:1px;line-height:1.2;margin:1px 0;text-align:center;height:27px;flex-shrink:0;overflow:hidden}.pcn span{display:block}
.pcpr{display:flex;align-items:baseline;gap:2px;margin-top:auto;height:17px;flex-shrink:0}
.pcpt{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:700;color:var(--tx)}.pcpl{font-size:6px;color:var(--mt)}
.ctr{flex:1;display:flex;flex-direction:column;background:var(--felt);overflow:hidden;min-height:0}
/* Scoreboard */
.spb{flex-shrink:0;height:56px;display:flex;align-items:stretch;border-bottom:1px solid var(--bd);background:rgba(0,0,0,.2)}
.spy,.spo{transition:background var(--t-med),border-bottom var(--t-med),box-shadow var(--t-med)}
.spy.active{background:rgba(0,230,118,.07);border-left:2px solid rgba(0,230,118,.7);box-shadow:-4px 0 18px rgba(0,230,118,.15);}
.spo.active{background:rgba(148,163,184,.07);border-right:2px solid rgba(148,163,184,.6);box-shadow:4px 0 18px rgba(148,163,184,.12);}
.spy.winner,.spo.winner{animation:winGlow 1.2s ease-out;background:rgba(34,197,94,.18)!important;box-shadow:inset 0 0 45px rgba(34,197,94,.38)!important}
.spy.loser,.spo.loser{animation:loseGlow 1.2s ease-out;background:rgba(239,68,68,.16)!important;box-shadow:inset 0 0 45px rgba(239,68,68,.34)!important}
.spy.tie,.spo.tie{animation:tieGlow 1.2s ease-out;background:rgba(251,191,36,.18)!important;box-shadow:inset 0 0 42px rgba(251,191,36,.36)!important}
@keyframes winGlow{0%{background:rgba(34,197,94,.04);box-shadow:inset 0 0 10px rgba(34,197,94,.12)}50%{background:rgba(34,197,94,.30);box-shadow:inset 0 0 55px rgba(34,197,94,.55)}100%{background:rgba(34,197,94,.18);box-shadow:inset 0 0 45px rgba(34,197,94,.38)}}
@keyframes loseGlow{0%{background:rgba(239,68,68,.04);box-shadow:inset 0 0 10px rgba(239,68,68,.12)}50%{background:rgba(239,68,68,.26);box-shadow:inset 0 0 55px rgba(239,68,68,.5)}100%{background:rgba(239,68,68,.16);box-shadow:inset 0 0 45px rgba(239,68,68,.34)}}
@keyframes tieGlow{0%{background:rgba(251,191,36,.04);box-shadow:inset 0 0 10px rgba(251,191,36,.12)}50%{background:rgba(251,191,36,.28);box-shadow:inset 0 0 50px rgba(251,191,36,.52)}100%{background:rgba(251,191,36,.18);box-shadow:inset 0 0 42px rgba(251,191,36,.36)}}
/* Winner score flash — runs in lockstep with winGlow (1.2s ease-out, peak
 * at 50%). Transform-origin centers the scale so the digits don't drift. */
.spgm.score-winner-flash{animation:scoreWinnerFlash 1.2s ease-out;transform-origin:center}
@keyframes scoreWinnerFlash{0%{transform:scale(1)}50%{transform:scale(1.35)}100%{transform:scale(1)}}
/* min-width:0 lets each side shrink to its equal flex share instead of
   expanding to fit a long username — keeps the center POT box dead-centered
   (a 12-char name was pushing it toward the opponent). The name truncates
   inside via .spun's ellipsis. */
.spy{flex:1;min-width:0;display:flex;align-items:center;gap:6px;padding:0 8px;border-right:1px solid var(--bd)}
.spo{flex:1;min-width:0;display:flex;align-items:center;gap:6px;padding:0 8px}
.spav{flex-shrink:0;width:42px;height:48px;display:flex;align-items:flex-end;overflow:hidden;border-radius:4px}.spav svg{width:42px;height:48px;display:block}.spav img{width:42px;height:48px;object-fit:cover;object-position:center top;display:block;border-radius:4px}
.sppi{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.spo .sppi{align-items:flex-end}
/* nowrap + overflow:ellipsis force the name onto ONE line and truncate it at the
   cell width — a custom username (up to 12 chars) can never wrap or grow the
   fixed 56px scoreboard height (which clipped the name top + round score bottom).
   max-width:100% makes it truncate on the right-aligned OPPONENT side too. */
/* letter-spacing trimmed 2px→1px so a max-length (12-char) username + the
   first-play bolt both fit inside the side's flex share without ellipsis. */
.spun{font-family:'Bebas Neue',Impact,sans-serif;font-size:11px;letter-spacing:1px;color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sp1st{display:inline-block;width:8px;height:10px;vertical-align:middle;opacity:0;transition:opacity var(--t-med);margin:0 1px;flex-shrink:0}
.sp1st.vis{opacity:1}
.spsr{display:flex;align-items:center;gap:5px}.spo .spsr{flex-direction:row-reverse}
.spgm{font-family:'IBM Plex Mono',monospace;font-size:21px;font-weight:700;color:var(--tx);transition:transform var(--t-fast)}
@keyframes handDeal{0%{transform:translateY(0) scale(1)}20%{transform:translateY(-3px) scale(1.18)}50%{transform:translateY(1px) scale(.94)}75%{transform:translateY(-1px) scale(1.05)}100%{transform:translateY(0) scale(1)}}
@keyframes handPlay{0%{transform:rotate(0) scale(1)}20%{transform:rotate(-12deg) scale(.85)}55%{transform:rotate(8deg) scale(.92)}80%{transform:rotate(-4deg) scale(1.04)}100%{transform:rotate(0) scale(1)}}
.spsub{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;color:var(--mt);transition:color var(--t-med);height:14px;line-height:14px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:clip}
.spsub.BLUE{color:#60a5fa}.spsub.YELLOW{color:#fcd34d}.spsub.RED{color:#fca5a5}
/* Narrow-screen scoreboard fit: iPhone SE (375), Galaxy S8+ (360), and
   anything below 400px. Tighten avatar, label, and bolt so the YOU/
   OPPONENT label + lightning bolt + score + round-score all fit
   without clipping. The .sppi flex:1; min-width:0 already lets things
   shrink, but the avatar is fixed and chipping in too much. */
@media (max-width:400px){
  .spav{width:36px;height:42px}
  .spav svg,.spav img{width:36px;height:42px}
  .spy,.spo{gap:4px;padding:0 6px}
  .spun{font-size:10px;letter-spacing:.8px}
  .sp1st{width:7px;height:9px;margin:0 1px}
  .spgm{font-size:18px}
  .spsub{font-size:9px}
  .spdk{width:38px}
  .sppt{min-width:48px;padding:0 6px}
  .sppl{font-size:7px}
  .sppn{font-size:20px}
}
.spdk{flex-shrink:0;width:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:2px;border-left:1px solid var(--bd);transition:transform var(--t-fast)}
@keyframes deckFling{0%{transform:rotate(0) scale(1)}15%{transform:rotate(-8deg) scale(1.1) translateY(-3px)}45%{transform:rotate(4deg) scale(.95) translateY(1px)}70%{transform:rotate(-2deg) scale(1.03)}100%{transform:rotate(0) scale(1)}}
.spdk.dealing{animation:deckFling .55s cubic-bezier(.22,1,.36,1) both}
.spdk.od{border-right:1px solid var(--bd)}
.spdl{font-size:5px;letter-spacing:2px;color:#7a90aa;text-transform:uppercase}
.spdc{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700;color:var(--tx);transition:color var(--t-med),transform var(--t-fast)}
@keyframes deckDeal{0%{transform:translateY(0) scale(1)}20%{transform:translateY(-4px) scale(1.25)}55%{transform:translateY(1px) scale(.92)}80%{transform:translateY(-1px) scale(1.06)}100%{transform:translateY(0) scale(1)}}
.spdc.dealing{animation:deckDeal .5s cubic-bezier(.22,1,.36,1) both}
.sppt{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 8px;border-left:1px solid var(--bd);border-right:1px solid var(--bd);min-width:56px;background:rgba(255,215,64,.03)}
.sppl{font-size:8px;letter-spacing:3px;color:var(--gold);text-transform:uppercase}.sppn{font-family:'IBM Plex Mono',monospace;font-size:24px;font-weight:700;color:var(--gold);transition:transform var(--t-med)}
/* Stage bar */
.stb{flex-shrink:0;display:flex;flex-direction:column;border-bottom:1px solid var(--bd);transition:background var(--t-med)}
.stbt{display:flex;align-items:center;justify-content:space-between;padding:0 13px;height:24px;flex-shrink:0}
.stbpd{font-size:11px;letter-spacing:3px;flex:1}.stbpd.BLUE{color:#93c5fd}.stbpd.YELLOW{color:#fcd34d}.stbpd.RED{color:#fca5a5}

.stbr{display:flex;align-items:center;gap:6px;flex-shrink:0}
.stbtm{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:700;min-width:28px;text-align:right;color:var(--mt)}
.stbtm.BLUE{color:#93c5fd}.stbtm.YELLOW{color:#fcd34d}.stbtm.RED{color:#fca5a5}
.stbtm.urg{color:var(--red)!important;animation:blink .5s infinite}
/* Card deal animation */

.tpb{height:2px;background:var(--bd)}.tpf{height:100%;transition:width .9s linear}
.tpf.BLUE{background:#3b82f6}.tpf.YELLOW{background:#d97706}.tpf.RED{background:#dc2626}
/* NFL panel */
.nw{position:relative;flex-shrink:0;overflow:hidden}
#gTO{position:absolute;left:0;right:0;top:0;height:80px;z-index:800;background:rgba(4,6,16,.95);border-bottom:2px solid var(--gold);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transform:translateY(-100%);transition:transform var(--t-med) var(--ease-out);pointer-events:none;text-align:center}
#gTO.vis{transform:translateY(0)}
.to-main{display:flex;align-items:center;gap:8px}
.toi{font-size:16px;flex-shrink:0}.tom{font-family:'Bebas Neue',Impact,sans-serif;font-size:16px;letter-spacing:4px;color:var(--gold);flex-shrink:0}.tos{font-size:9px;color:var(--mt)}
.nsb{flex-shrink:0;height:80px;display:flex;align-items:stretch;border-bottom:1px solid var(--bd);background:var(--s1)}
.nsd{flex-shrink:0;width:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0 4px}
.nsa{font-family:'Bebas Neue',Impact,sans-serif;font-size:15px;letter-spacing:2px}
.nsp{font-family:'IBM Plex Mono',monospace;font-size:24px;font-weight:700;color:var(--tx)}
.nsbl{font-size:9px;height:10px;line-height:10px;opacity:0;transition:opacity var(--t-med)}.nsbl.on{opacity:1}
.nctr{flex:1;display:flex;flex-direction:column;padding:4px 4px 3px;gap:2px}
.nf{flex:1;border-radius:3px;overflow:hidden}.nf svg{display:block;width:100%;height:100%}
.nck{display:flex;align-items:center;justify-content:center;gap:5px;flex-shrink:0;height:13px}
.nq{font-size:6px;letter-spacing:2px;color:var(--accent);font-family:'IBM Plex Mono',monospace}
.nc{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700}
.ndot{font-size:7px;color:var(--mt)}
.ndn{font-family:'IBM Plex Mono',monospace;font-size:8px;color:var(--tx);font-weight:600;letter-spacing:.5px}
/* Feed */
.feed{flex:1;overflow-y:auto;padding:2px 11px;display:flex;flex-direction:column;gap:2px}
.feed::-webkit-scrollbar{width:2px}.feed::-webkit-scrollbar-thumb{background:var(--bd)}
.fi{display:flex;align-items:flex-start;gap:5px;padding:2px 7px;border-radius:4px;border:1px solid var(--bd);background:var(--s2);font-size:9px;flex-shrink:0}
.fi.tm1{border-color:color-mix(in srgb,var(--tm1) 55%,transparent);background:color-mix(in srgb,var(--tm1) 7%,transparent)}.fi.tm2{border-color:color-mix(in srgb,var(--tm2) 50%,transparent);background:color-mix(in srgb,var(--tm2) 7%,transparent)}.fi.bust{border-color:rgba(255,68,68,.3);background:rgba(255,68,68,.04)}.fi.timeout{border-color:rgba(255,215,64,.25);background:rgba(255,215,64,.03)}.fi.card{border-color:rgba(179,136,255,.25);background:rgba(179,136,255,.03)}.fi.mycard{border-color:rgba(0,230,118,.45);background:rgba(0,230,118,.05)}.fi.fold{border-color:rgba(220,38,38,.4);background:rgba(220,38,38,.05)}
.ft{font-family:'IBM Plex Mono',monospace;font-size:6px;font-weight:700;letter-spacing:1px;padding:1px 3px;border-radius:2px;flex-shrink:0;margin-top:1px}
.ftp{background:var(--s3);color:var(--mt)}.ftt{background:rgba(255,215,64,.14);color:var(--gold)}.fty{background:rgba(0,230,118,.15);color:var(--accent)}.fto{background:rgba(255,255,255,.05);color:#94a3b8}.ftd{background:rgba(255,68,68,.1);color:var(--red)}.ftn{background:rgba(255,215,64,.1);color:var(--gold)}.ftto{background:rgba(255,215,64,.14);color:var(--gold)}.ftf{background:rgba(220,38,38,.2);color:#f87171}
.fid{flex:1;color:var(--tx);line-height:1.3}.fip{font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:700;flex-shrink:0}.fup{color:var(--accent)}.fdn{color:var(--red)}.fopp{color:#94a3b8}
/* Pot pill in feed lines — gold like the scoreboard POT, dark text, one
   color for both signs (the +/- carries direction). Replaces "[pot +2]".
   Sits RIGHT-ALIGNED in the row's points slot (a flex child after .fid),
   mirroring the fantasy-point numbers — Sean's pick 2026-08-07. */
.fpot{display:inline-block;flex-shrink:0;background:var(--gold);color:#161006;font-family:'IBM Plex Mono',monospace;font-size:8px;font-weight:700;line-height:12px;padding:0 4px;border-radius:6px;align-self:center}
/* Card dealing animation — cards fly from deck icon (#sDeck) to their fan slot */
/* Card dealing: clone-based (JS), real card stays opacity:0 until clone lands */
.ac.dealing{opacity:0!important;}
.opp-ac.opp-ac-dealing{opacity:0!important;}
/* Hand */
/* Opponent facedown hand — fanned upside-down, falling off top */
.opp-hand{flex-shrink:0;height:80px;overflow:visible;padding:0 13px;display:flex;align-items:flex-start;justify-content:center;background:var(--s1);position:relative;z-index:2}
.opp-crow{position:relative;height:62px;overflow:visible;width:100%;margin-bottom:2px}
.opp-ac{width:64px;height:96px;border-radius:5px;background:linear-gradient(160deg,#243450,#161f33);border:1.5px solid #3d5878;position:absolute;bottom:0;overflow:hidden;transform-origin:bottom center;transform:rotate(var(--a,0deg)) translateY(var(--y,0px));transition:transform var(--t-fast);display:flex;flex-direction:column;align-items:center;justify-content:center}
/* Card-back legibility (2026-08-11 mobile audit): the old flat --s3 fill
   + .03-alpha pattern read as a shadow on phone screens — 'how many cards
   does the opponent hold' shouldn't require squinting. Gradient fill +
   stronger weave + brighter border keep the dark aesthetic but separate
   the backs from the background. */
.opp-ac::after{content:'';position:absolute;inset:4px;border-radius:3px;border:1px solid #2e4059;background:repeating-linear-gradient(135deg,transparent,transparent 3px,rgba(255,255,255,.055) 3px,rgba(255,255,255,.055) 6px)}
.opp-ac:hover{transform:rotate(var(--a,0deg)) translateY(calc(var(--y,0px) + 10px));z-index:15!important}
.opp-ac.opp-ac-revealed{background:var(--s2);padding:3px 4px}
.opp-ac.opp-ac-revealed::after{display:none}
.opp-ac.opp-ac-revealed::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--stc,var(--bd));border-radius:5px 0 0 5px}
.opp-ac-face{transform:rotate(180deg);width:100%;height:100%;display:flex;flex-direction:column;gap:1px;overflow:hidden}
@keyframes revealFlash{0%{box-shadow:0 0 0 transparent}30%{box-shadow:0 0 12px rgba(255,255,255,.5)}100%{box-shadow:none}}
.opp-ac.opp-ac-just-revealed{animation:revealFlash .6s ease-out}
/* Player hand — reduced height so cards peek from bottom */
.hand{flex-shrink:0;height:120px;background:var(--s1);border-top:1.5px solid rgba(0,230,118,.2);padding:2px 13px 0;position:relative;z-index:2}
.hh{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px;height:18px;flex-shrink:0}
.hst{display:flex;align-items:center;gap:8px}
.chkbtn{display:none;background:transparent;border:1px solid rgba(255,255,255,.25);color:#cbd5e1;padding:3px 10px;border-radius:4px;font-family:'Bebas Neue',Impact,sans-serif;font-size:11px;letter-spacing:2px;cursor:pointer;transition:var(--t-fast);white-space:nowrap}
.chkbtn:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.4)}.chkbtn.vis{display:block}
.crow{position:relative;height:82px;overflow:visible}
/* Discard Piles */
.discard-pile{position:absolute;width:36px;height:48px;z-index:10}
.dp-player{bottom:8px;right:8px}
.dp-opp{top:8px;left:8px}
.dp-stack{position:absolute;width:100%;height:100%;background:#0a0f1a;border:1px solid #2a3a50;border-radius:3px;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.dp-stack:before,.dp-stack:after{content:'';position:absolute;width:100%;height:100%;background:#0a0f1a;border:1px solid #2a3a50;border-radius:3px;z-index:-1}
.dp-stack:before{top:-2px;left:-2px}
.dp-stack:after{top:-4px;left:-4px}
.dp-top{position:absolute;width:100%;height:100%;border-radius:3px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:6px;color:#607090;background:#0f1525}
.dp-top canvas{width:100%!important;height:100%!important}
/* Flyers move via transform ONLY (GPU-composited — left/top animation
   forced a layout+paint every frame, the residual choppiness after the
   reflow fix). left/top are set once as the origin; motion is a
   translate() delta with an ease-out that reads as a card being tossed. */
.flying-card{position:fixed;width:60px;height:80px;border-radius:4px;z-index:9999;pointer-events:none;transition:transform var(--t-fly) var(--ease-toss),opacity var(--t-med) var(--ease-out);will-change:transform,opacity;opacity:1}
.flying-card canvas{width:100%!important;height:100%!important}
/* Action cards */
.ac{width:84px;height:126px;border-radius:6px;background:var(--s2);padding:4px 5px;display:flex;flex-direction:column;gap:2px;position:absolute;top:0;overflow:hidden;cursor:pointer;user-select:none;transform-origin:top center;transform:rotate(var(--a,0deg)) translateY(var(--y,0px));transition:transform var(--t-med);border:2px solid var(--bd)}
.ac::before{display:none}
.ac.ac-canvas{border:none!important;background:transparent!important;padding:0!important}
.ac.ac-canvas.ac-dim{filter:saturate(.4) brightness(.6)}
.ac-cv{width:100%;height:100%;display:block;border-radius:6px;pointer-events:none}
.mc.mc-canvas{border:none!important;background:transparent!important}.mc.mc-canvas::before{display:none}
.mc.mc-flip:hover{transform:scale(1.18);z-index:100!important}
.opp-ac.opp-ac-canvas{border:none!important;background:transparent!important;padding:0!important}
.opp-ac-cv{width:100%;height:100%;display:block;border-radius:5px;pointer-events:none;transform:rotate(180deg)}
.mc-cv{width:100%;height:100%;display:block;border-radius:3px;pointer-events:none}
.ac.sb,.ac.sy,.ac.sr,.ac.sa{border-color:transparent}
.ac:hover{transform:rotate(var(--a,0deg)) translateY(calc(var(--y,0px) - 12px));z-index:15!important}
.ac.pl:hover{transform:rotate(var(--a,0deg)) translateY(calc(var(--y,0px) - 18px)) scale(1.04);z-index:20!important;box-shadow:0 12px 36px rgba(0,0,0,.85),0 0 18px var(--sg,transparent)}
.aclk{position:absolute;inset:0;background:rgba(6,8,18,.6);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;font-size:7px;letter-spacing:1px;color:var(--mt);border-radius:8px;pointer-events:none;text-align:center;padding:4px;line-height:1.4}
/* Drag zone visual feedback */
.yr.drag-ready{border-top:2px dashed rgba(0,230,118,.5)!important;border-left:2px dashed rgba(0,230,118,.5)!important;border-right:2px dashed rgba(0,230,118,.5)!important}
.ypz.drag-ready{border-bottom:2px dashed rgba(0,230,118,.5)!important;border-left:2px dashed rgba(0,230,118,.5)!important;border-right:2px dashed rgba(0,230,118,.5)!important}
.yr.dz,.ypz.dz{background:rgba(0,230,118,.1)!important}
/* Picker system */
@keyframes pickPulse{0%,100%{outline:2px solid rgba(0,230,118,.3);outline-offset:0px}50%{outline:3px solid rgba(0,230,118,.8);outline-offset:2px}}
.pick-glow{animation:pickPulse 1s ease-in-out infinite!important;cursor:pointer!important;border-color:rgba(0,230,118,.5)!important;outline:2px solid rgba(0,230,118,.3);z-index:10}
.pick-glow:hover{transform:scale(1.05)!important;outline:3px solid rgba(0,230,118,.9)!important;outline-offset:2px}
/* Overlays */
/* Card modal */
#gCM{position:absolute;inset:0;z-index:4500;background:rgba(6,8,18,.88);display:none;align-items:center;justify-content:center}
#gCM.on{display:flex}
#gCMC{display:flex;flex-direction:column;align-items:center;gap:8px}
/* Fold/Double inline buttons (replace CHECK during YELLOW→RED pause) */
.fold-wrap{display:none;gap:6px;align-items:center}
.fold-wrap.vis{display:flex}
.fold-btn{background:transparent;border:1px solid var(--gold);color:var(--gold);padding:3px 10px;border-radius:4px;font-family:'Bebas Neue',Impact,sans-serif;font-size:11px;letter-spacing:2px;cursor:pointer;transition:var(--t-fast);white-space:nowrap}
.fold-btn:hover{background:rgba(255,215,64,.1)}
.dbl-btn{background:transparent;border:1px solid var(--red);color:var(--red);padding:3px 10px;border-radius:4px;font-family:'Bebas Neue',Impact,sans-serif;font-size:11px;letter-spacing:2px;cursor:pointer;transition:var(--t-fast);white-space:nowrap}
.dbl-btn:hover{background:rgba(255,68,68,.1)}
/* Discard modal */
#gDsc{position:absolute;inset:0;z-index:4200;background:rgba(6,8,18,.95);display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px}
#gDsc.on{display:flex}
.dsc-t{font-family:'Bebas Neue',Impact,sans-serif;font-size:22px;letter-spacing:5px;color:var(--accent)}
.dsc-sub{font-size:9px;letter-spacing:2px;color:var(--mt);text-transform:uppercase}
.dsc-cards{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.dsc-card{width:72px;height:82px;border-radius:6px;background:var(--s2);border:2px solid var(--bd);padding:4px;cursor:pointer;transition:var(--t-fast);position:relative;overflow:hidden;display:flex;flex-direction:column}
.dsc-card.sel{border-color:var(--red);background:rgba(255,68,68,.08)}
.dsc-card.sel::after{content:'✗';position:absolute;top:3px;right:4px;color:var(--red);font-size:12px;font-weight:700}
/* Peek selection modal */
#gPeek{position:absolute;inset:0;z-index:4200;background:rgba(6,8,18,.95);display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px}
#gPeek.on{display:flex}
.peek-t{font-family:'Bebas Neue',Impact,sans-serif;font-size:20px;letter-spacing:4px;color:var(--gold)}
.peek-sub{font-size:9px;letter-spacing:2px;color:var(--mt);text-transform:uppercase}
.peek-cards{display:flex;gap:12px;justify-content:center}
.peek-card{width:108px;border-radius:8px;background:var(--s2);border:2px solid var(--bd);padding:6px;cursor:pointer;transition:var(--t-fast);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:3px}
.peek-card:hover{border-color:var(--accent);transform:scale(1.04);box-shadow:0 0 14px rgba(0,230,118,.3)}
.peek-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.peek-card .pk-cls{font-size:8px;letter-spacing:1px;font-weight:700;text-transform:uppercase}
.peek-card .pk-name{font-family:'Bebas Neue',Impact,sans-serif;font-size:13px;letter-spacing:.5px}
.peek-card .pk-desc{font-size:8px;color:#8899bb;line-height:1.4}
.peek-card .pk-pv{font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:700;color:var(--gold);text-align:right}
.peek-timer{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;color:var(--accent);opacity:.7}
.dsc-art{height:42px;overflow:hidden;flex-shrink:0;border-radius:3px}.dsc-art svg{width:100%;height:42px;display:block}
.dsc-nm{font-family:'Bebas Neue',Impact,sans-serif;font-size:7px;padding:2px;color:var(--mt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;line-height:1.4}
.dsc-btn{background:var(--accent);color:var(--bg);border:none;padding:8px 24px;border-radius:6px;font-family:'Bebas Neue',Impact,sans-serif;font-size:14px;letter-spacing:3px;cursor:pointer;transition:var(--t-fast)}
.dsc-btn:hover{transform:scale(1.04)}
.dsc-cancel{background:transparent;border:1px solid var(--mt);color:var(--mt);padding:6px 18px;border-radius:6px;font-family:'Bebas Neue',Impact,sans-serif;font-size:12px;letter-spacing:2px;cursor:pointer}
/* Wild split animation */
#gWS2{position:absolute;inset:0;z-index:4100;background:rgba(6,8,18,.95);display:none;align-items:center;justify-content:center;flex-direction:column;gap:12px}
#gWS2.on{display:flex}
.ws-t{font-family:'Bebas Neue',Impact,sans-serif;font-size:24px;letter-spacing:5px;color:var(--gold)}
.ws-split{display:flex;gap:24px;align-items:center}
.ws-side{display:flex;flex-direction:column;align-items:center;gap:4px}
.ws-lbl{font-size:8px;letter-spacing:3px;color:var(--mt);text-transform:uppercase}
.ws-pts{font-family:'IBM Plex Mono',monospace;font-size:42px;font-weight:700;color:var(--gold);transition:all var(--t-tap)}
.ws-vs{font-family:'Bebas Neue',Impact,sans-serif;font-size:20px;color:var(--mt)}
/* Round end */


/* Announce */

/* Card play burst */
#gOv{position:absolute;inset:0;z-index:3000;pointer-events:none;display:flex;align-items:center;justify-content:center;opacity:0}
#gOv.go{animation:ovan 1.6s ease forwards}
@keyframes ovan{0%{opacity:0;transform:scale(.35) rotate(-12deg)}22%{opacity:1;transform:scale(1.06) rotate(0)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
/* Win screen */
#gWn{position:absolute;inset:0;z-index:5000;display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;background:rgba(6,8,18,.95);text-align:center}
#gWn.on{display:flex}
/* Win-by-forfeit overlay — reuses .wt/.wss/.wbtn from the win screen. */
#gFf{position:absolute;inset:0;z-index:5000;display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;background:rgba(6,8,18,.95);text-align:center}
#gFf.on{display:flex}
/* Forfeit confirm dialog (EXIT GAME during a live PvP match). */
#gFfC{position:absolute;inset:0;z-index:5200;display:none;align-items:center;justify-content:center;background:rgba(6,8,18,.78)}
#gFfC.on{display:flex}
.ff-box{background:var(--s1);border:1px solid var(--bd);border-radius:12px;padding:26px 30px;max-width:340px;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.ff-q{font-size:15px;line-height:1.4;margin-bottom:20px;color:var(--tx)}
.ff-btns{display:flex;gap:12px;justify-content:center}
.ff-no{background:transparent;border:1px solid var(--mt);color:var(--mt);padding:8px 20px;border-radius:6px;font-family:'Bebas Neue',Impact,sans-serif;font-size:13px;letter-spacing:2px;cursor:pointer;transition:var(--t-fast)}
.ff-no:hover{border-color:var(--tx);color:var(--tx)}
.ff-yes{background:#dc2626;color:#fff;border:none;padding:8px 20px;border-radius:6px;font-family:'Bebas Neue',Impact,sans-serif;font-size:13px;letter-spacing:2px;cursor:pointer;transition:var(--t-fast)}
.ff-yes:hover{background:#ef4444}
.wt{font-family:'Bebas Neue',Impact,sans-serif;font-size:68px;letter-spacing:8px;line-height:1}.wss{font-size:9px;letter-spacing:4px;color:var(--mt);text-transform:uppercase}
.wr2{display:flex;gap:18px;align-items:center}.wb{background:var(--s1);border:1px solid var(--bd);border-radius:8px;padding:10px 22px;text-align:center}.wbn{font-family:'Bebas Neue',Impact,sans-serif;font-size:13px;letter-spacing:2px}.wbp{font-family:'IBM Plex Mono',monospace;font-size:26px;font-weight:700}
.wvs{font-family:'Bebas Neue',Impact,sans-serif;font-size:26px;color:var(--mt)}.wbtn{background:var(--accent);color:var(--bg);border:none;padding:8px 32px;border-radius:6px;font-family:'Bebas Neue',Impact,sans-serif;font-size:16px;letter-spacing:4px;cursor:pointer;transition:var(--t-fast);margin-top:4px}.wbtn:hover{transform:scale(1.04)}

/* ── Intro Screen ── */
/* Stadium wallpaper (Sean 2026-08-11, task #291): center-weighted
   night-bowl illustration; cover auto-crops the same file for phone
   portrait (the bowl lives in the center strip). Sean's v2: instead of
   a uniform dim, the art stays vivid up top (floodlights/sky) and
   fades down into var(--bg) where the CTAs live — anchored `top` so
   the lights stay in frame on every aspect ratio; the bottom of the
   art is sacrificed to the fade anyway. var(--bg) doubles as the
   fallback while the JPEG loads.
   Source PNG: Artwork/wallpaper/stadium_homeScreen.png */
#gIntro{position:absolute;inset:0;z-index:200;background:linear-gradient(180deg,rgba(6,8,18,.06) 0%,rgba(6,8,18,.30) 42%,rgba(6,8,18,.82) 72%,#060812 96%),url('../Artwork/wallpaper/stadium_homeScreen_web.jpg?v=1') top center/cover no-repeat var(--bg);display:flex;flex-direction:column;overflow:hidden}
.ih{flex-shrink:0;padding:18px 20px 10px;display:flex;flex-direction:column;align-items:center;gap:4px;border-bottom:1px solid var(--bd)}
.ih .lw{display:flex;flex-direction:row;align-items:baseline;gap:7px}
.beta-chip{align-self:center;font-family:'Bebas Neue',Impact,sans-serif;font-size:10px;letter-spacing:2px;color:var(--accent);border:1px solid var(--accent);border-radius:3px;padding:2px 6px 1px;opacity:.85}
/* Beta footer — pinned under the CTA stack in the darkest fade band. */
.ih-foot{position:absolute;bottom:5px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:6px;font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:2px;color:var(--mt);z-index:1}
.ih-foot-sep{opacity:.6}
.ih-foot-link{color:var(--mt);text-decoration:none;border-bottom:1px dotted var(--mt);cursor:pointer;transition:color var(--t-fast)}
.ih-foot-link:hover{color:var(--accent)}

/* ── Beta bug reporter ── */
/* FAB rides above every screen (screens are z-index 200) but below the
   modal. Semi-transparent at rest so it never fights the match UI. */
/* Header's right corner on EVERY screen (Sean v3) — z 250 rides above
   the overlay screens (z 200). In-game (.fab-ingame, toggled by
   initBugFab's observer) it slides beneath the three-dots menu, which
   owns top-right there (36px btn at top 8 → 8+36+8). */
.bug-fab{position:absolute;top:12px;right:12px;z-index:250;width:28px;height:28px;border-radius:50%;background:rgba(6,8,18,.72);border:1px solid var(--bd);color:var(--mt);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.55;transition:opacity var(--t-fast),color var(--t-fast),border-color var(--t-fast);padding:0}
.bug-fab.fab-ingame{top:52px;right:8px}

/* ── Desktop: full-window shell (Sean 2026-08-12) ──
   The deckbuilder set the precedent — every screen now uses the whole
   window on wide displays instead of the 480px phone frame in a void.
   Pattern: backgrounds bleed edge-to-edge, CONTENT stays a centered
   readable column. The match board + draft keep a centered 480 column
   for now — a board DESIGNED for wide layouts is its own task (#297).
   Phones/small windows (<700px) keep the frame exactly as before. */
@media (min-width:700px){
  .gr{max-width:none;border:none;border-radius:0;box-shadow:none}
  /* Home: wallpaper full-bleed; CTA stack + account row stay a column */
  .iauth{width:100%;max-width:480px;align-self:center}
  /* How-to-Play + Quick Play: content columns */
  .htp-bd{width:100%;max-width:560px;align-self:center}
  .htp-foot{width:100%;max-width:560px;align-self:center}
  .qp-bd{width:100%;max-width:560px;align-self:center}
  /* Match board + draft: centered phone column with subtle edges until
     the wide-board design exists (#297) */
  #gGm,#gDr{max-width:480px;margin:0 auto;border-left:1px solid var(--bd);border-right:1px solid var(--bd)}
  /* In-game FAB tracks the centered board column's right edge, not the
     window edge (the three-dots it sits under lives in the column) */
  .bug-fab.fab-ingame{right:calc(50% - 232px)}
}
/* Deckbuilder (viewport-fixed, z 9000): re-anchor above it. Stays
   below its modals (zoom/summary/exit — z 9500+). */
.bug-fab.fab-db{position:fixed;top:14px;right:14px;z-index:9100}
.bug-fab:hover{opacity:1;color:var(--accent);border-color:var(--accent)}
.bug-modal{position:absolute;inset:0;z-index:500;background:rgba(3,5,10,.72);display:flex;align-items:center;justify-content:center;padding:20px}
.bug-box{width:min(360px,92%);background:#0a1020;border:1.5px solid var(--accent);border-radius:8px;padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:0 0 40px rgba(0,230,118,.15)}
.bug-title{font-family:'Bebas Neue',Impact,sans-serif;font-size:16px;letter-spacing:4px;color:var(--accent);text-align:center}
.bug-sub{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:1px;color:var(--mt);text-align:center}
.bug-box textarea{min-height:96px;resize:vertical;background:rgba(255,255,255,.04);border:1px solid var(--bd);border-radius:6px;color:#dfe7f5;font-family:'Barlow Condensed',sans-serif;font-size:14px;padding:10px;outline:none}
.bug-box textarea:focus{border-color:var(--accent)}
.bug-status{font-family:'Barlow Condensed',sans-serif;font-size:12px;color:var(--mt);text-align:center;min-height:14px}
.bug-actions{display:flex;gap:10px}
.bug-cancel{flex:1;background:transparent;color:var(--mt);border:1px solid var(--bd);border-radius:6px;padding:10px;font-family:'Bebas Neue',Impact,sans-serif;font-size:13px;letter-spacing:3px;cursor:pointer}
.bug-send{flex:1;background:var(--accent);color:#000;border:1.5px solid var(--accent);border-radius:6px;padding:10px;font-family:'Bebas Neue',Impact,sans-serif;font-size:13px;letter-spacing:3px;font-weight:700;cursor:pointer}
.bug-send:disabled{opacity:.5;cursor:default}
/* Moderate shrink for medium-small heights: Galaxy S8+ at 740px,
   etc. The whole intro should fit without scrolling. */
@media (max-height:780px){
  .itxt,.ipot-tx,.iwin-tx{font-size:12px;line-height:1.45}
  .isect-hd{font-size:12px;letter-spacing:2.5px}
  .isect{gap:5px}
  .istg span{height:60px;width:50px;font-size:9px;padding-top:6px}
  .idivider{margin:0 auto;height:1px;width:32px}
}
/* Aggressive shrink for very small heights: iPhone SE at 667px. */
@media (max-height:700px){
  .itxt,.ipot-tx,.iwin-tx{font-size:10px;line-height:1.3}
  .isect-hd{font-size:10px;letter-spacing:2px}
  .isect{gap:3px}
  .istg span{height:46px;width:38px;font-size:7px;padding-top:4px}
  .idivider{display:none}
  .ih{padding:10px 20px 6px!important}
}
.gold{color:var(--gold)!important}
.red{color:var(--red)!important}
.isect{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.isect-hd{font-family:'Bebas Neue',Impact,sans-serif;font-size:14px;letter-spacing:3px;color:var(--accent)}
.idivider{width:40px;height:1px;background:rgba(255,255,255,.1);margin:0 auto}
.itxt{font-size:14px;color:#b8cce0;line-height:1.6;max-width:360px}
.itxt strong{color:#e8f0fa}
.istg{display:flex;gap:6px;justify-content:center}
.istg span{font-family:'Bebas Neue',Impact,sans-serif;font-size:11px;letter-spacing:2px;height:72px;width:60px;border-radius:6px;display:inline-flex;align-items:flex-start;justify-content:center;padding-top:8px;box-sizing:border-box;flex-shrink:0}
.istg .ip-b{background:rgba(59,130,246,.15);color:#60a5fa;border:1px solid rgba(59,130,246,.3)}
.istg .ip-y{background:rgba(217,119,6,.15);color:#d97706;border:1px solid rgba(217,119,6,.3)}
.istg .ip-r{background:rgba(220,38,38,.15);color:#ef4444;border:1px solid rgba(220,38,38,.3)}
.istg .ip-g{background:rgba(148,163,184,.1);color:#94a3b8;border:1px solid rgba(148,163,184,.2)}
.ipot-tx{font-size:14px;color:#b8cce0;line-height:1.7;text-align:center;max-width:360px}.ipot-tx strong{color:#ffd740}
.iwin-tx{font-size:14px;color:#b8cce0;line-height:1.7;text-align:center;max-width:360px}.iwin-tx strong{color:#e8f0fa}

/* Phase 3 home: three-button pre-auth landing (Showdown TCG model). */
/* Bottom-anchored (Sean 2026-08-11): CTAs sit in the darkest band of
   the wallpaper fade; the open middle showcases the stadium bowl. */
.iauth{flex:1;padding:24px 28px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px;align-items:stretch;justify-content:flex-end}
/* Logged-out home (Sean 2026-08-12): only 3 buttons — lift them a bit
   off the floor so the sparse layout feels placed, not sunk. */
#gIntroPreAuth.iauth{padding-bottom:calc(9vh + env(safe-area-inset-bottom,0px))}
.iauth-spacer{flex:0 0 8px}
.hbtn{padding:14px 12px;border-radius:6px;font-family:'Bebas Neue',Impact,sans-serif;font-size:17px;letter-spacing:4px;cursor:pointer;transition:opacity var(--t-fast),transform var(--t-tap),background var(--t-fast);border:1.5px solid transparent;text-align:center}
.hbtn:hover{opacity:.88}
.hbtn:active{transform:translateY(1px)}
.hbtn-primary{background:var(--accent);color:#000;border-color:var(--accent);font-weight:700;box-shadow:0 0 24px rgba(0,230,118,.18)}
.hbtn-primary:hover{background:#22f08b;box-shadow:0 0 32px rgba(0,230,118,.28)}
.hbtn-secondary{background:transparent;color:var(--accent);border-color:var(--accent)}
.hbtn-secondary:hover{background:rgba(0,230,118,.08)}

/* How-to-Play screen — full-screen dedicated view (replaces the old
   inline <details> dropdown). Reached via HOW TO PLAY button on the
   logged-out Home. */
/* Constrained to the parent .gr mobile-frame. Content fits without
   scroll at any reasonable viewport — fonts/gaps/paddings clamp on
   vh so they compress on shorter screens (per Sean 2026-05-21). */
#gHowToPlay{position:absolute;inset:0;background:var(--bg,#060812);z-index:200;display:flex;flex-direction:column;overflow:hidden}
.htp-hd{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:clamp(8px,1.4vh,14px) 16px;border-bottom:1px solid var(--bd)}
.htp-title{font-family:'Bebas Neue',Impact,sans-serif;font-size:clamp(13px,1.8vh,16px);letter-spacing:4px;color:var(--accent)}
.htp-bd{flex:1;min-height:0;overflow:hidden;padding:clamp(10px,2vh,20px) 18px;display:flex;flex-direction:column;gap:clamp(8px,1.8vh,18px);justify-content:space-evenly}
.htp-bd .isect-hd{font-size:clamp(11px,1.6vh,14px)}
/* Paragraphs: balance line breaks so the first paragraph doesn't
   split mid position-list (RB, WR, TE, and DEF) and the last
   paragraph doesn't strand a single word on its own line. */
.htp-bd .itxt,
.htp-bd .ipot-tx,
.htp-bd .iwin-tx{font-size:clamp(11px,1.55vh,14px);line-height:1.5;text-wrap:balance;max-width:340px}
.htp-bd .istg span{height:clamp(48px,7vh,68px);font-size:clamp(10px,1.4vh,11px);padding-top:6px}
.htp-bd .idivider{display:none}
.htp-foot{flex-shrink:0;display:flex;gap:10px;padding:clamp(10px,1.6vh,16px) 18px clamp(14px,2vh,20px);border-top:1px solid var(--bd);background:var(--bg,#060812)}
.htp-back-mini{flex-shrink:0;width:48px;background:transparent;color:var(--accent);border:1.5px solid var(--accent);border-radius:6px;font-family:'Bebas Neue',Impact,sans-serif;font-size:24px;line-height:1;cursor:pointer;transition:background var(--t-fast);padding:0}
.htp-back-mini:hover{background:rgba(0,230,118,.08)}
.htp-foot .hbtn-primary{flex:1}

@media (max-width:420px){
  .iauth{padding:20px 20px 20px;gap:10px}
  .hbtn{padding:13px 10px;font-size:16px;letter-spacing:3px}
  .htp-back-mini{width:44px;font-size:22px}
}
@media (max-height:700px){
  .iauth{padding:16px 22px 16px;gap:9px}
  .iauth-spacer{flex:0 0 4px}
  .hbtn{padding:11px;font-size:15px}
  .ih{padding:14px 20px 8px}
}

/* Phase 3 (2/?): post-auth home surface — account widget + CTAs +
   below-the-fold cards. Lives inside the existing #gIntro overlay so
   the page-shell handles overflow / scrolling already. */
.post-auth{gap:14px}
.pa-account{display:flex;align-items:center;gap:12px;padding:10px 4px 12px;border-bottom:1px solid var(--bd)}
.pa-profile-link{flex:1;min-width:0;display:flex;align-items:center;gap:12px;cursor:pointer;padding:4px 6px;margin-left:-6px;border-radius:6px;transition:background var(--t-fast)}
.pa-profile-link:hover{background:rgba(0,230,118,.06)}
.pa-profile-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pa-avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--accent),#22aa66);box-shadow:0 0 12px rgba(0,230,118,.25)}
.pa-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pa-name{font-family:'Bebas Neue',Impact,sans-serif;font-size:15px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-mmr{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:2px;color:var(--mt);text-transform:uppercase}
.pa-signout{background:transparent;border:1px solid #fca5a5;color:#fca5a5;font-family:'Bebas Neue',Impact,sans-serif;font-size:11px;letter-spacing:2px;padding:6px 10px;border-radius:4px;cursor:pointer;transition:background var(--t-fast)}
.pa-signout:hover{background:rgba(252,165,165,.08)}
.pa-ctas{display:flex;flex-direction:column;gap:clamp(10px,1.6vh,16px)}
.pa-ctas .hbtn{padding:clamp(16px,3.4vh,30px) 12px;font-size:clamp(17px,2.4vh,21px)}
/* Over the wallpaper, transparent outline buttons lose their green
   text against the field art (Sean 2026-08-11 v4). Frosted dark fill
   keeps the house green-on-dark recipe legible over any pixel of the
   art; text-shadow cuts the edge where the fill is most translucent.
   Scoped to the Home stacks — hbtn-secondary elsewhere is unchanged;
   the logged-out PRACTICE primary (black-on-green) never needed help. */
.iauth .hbtn-secondary{background:rgba(6,8,18,.42);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);text-shadow:0 1px 6px rgba(0,0,0,.85)}
.iauth .hbtn-secondary:hover{background:rgba(6,20,14,.55)}
.pa-result{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:1.5px;padding:6px 8px;border-radius:4px;text-transform:uppercase;display:flex;justify-content:flex-start;gap:8px}
.pa-result + .pa-result{margin-top:4px}
.pa-result.pa-win{color:var(--accent);background:rgba(0,230,118,.06)}
.pa-result.pa-loss{color:#fca5a5;background:rgba(252,165,165,.06)}
.pa-result.pa-tie{color:var(--mt);background:rgba(255,255,255,.04)}
@media (max-width:420px){
  .pa-avatar{width:36px;height:36px}
}

/* Profile screen — reached by tapping the avatar/name on the post-auth
   Home. Owned by js/profile.ts. Mirrors the How-to-Play layout
   (constrained to the mobile-frame, slim header, scrollable body). */
#gProfile{position:absolute;inset:0;background:var(--bg,#060812);z-index:200;display:flex;flex-direction:column;overflow:hidden}
.pf-hd{flex-shrink:0;display:flex;align-items:center;padding:12px 14px;border-bottom:1px solid var(--bd);gap:10px}
.pf-back{flex-shrink:0;width:42px;height:36px;background:transparent;color:var(--accent);border:1.5px solid var(--accent);border-radius:6px;font-family:'Bebas Neue',Impact,sans-serif;font-size:22px;line-height:1;cursor:pointer;transition:background var(--t-fast);padding:0}
.pf-back:hover{background:rgba(0,230,118,.08)}
.pf-title{flex:1;text-align:center;font-family:'Bebas Neue',Impact,sans-serif;font-size:16px;letter-spacing:4px;color:var(--accent);padding-right:42px}
.pf-bd{flex:1;overflow-y:auto;padding:20px 18px 24px;display:flex;flex-direction:column;gap:18px}

.pf-id-block{display:flex;flex-direction:column;align-items:center;gap:6px;padding-bottom:8px;border-bottom:1px solid var(--bd)}
.pf-avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#22aa66);box-shadow:0 0 18px rgba(0,230,118,.3)}
.pf-name-row{display:flex;align-items:center;gap:8px;margin-top:8px}
.pf-name{font-family:'Bebas Neue',Impact,sans-serif;font-size:22px;letter-spacing:3px;color:var(--accent);text-transform:uppercase}
.pf-edit{background:transparent;border:1px solid var(--bd);color:var(--mt);width:30px;height:30px;border-radius:6px;font-size:14px;cursor:pointer;transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast);display:flex;align-items:center;justify-content:center;padding:0}
.pf-edit:hover{color:var(--accent);border-color:var(--accent);background:rgba(0,230,118,.06)}
.pf-meta-row{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:1.5px;color:var(--mt);text-transform:uppercase;margin-top:2px}
.pf-meta-val{color:#b8cce0;font-weight:600}

.pf-section{background:rgba(255,255,255,.02);border:1px solid var(--bd);border-radius:8px;padding:10px 14px;display:flex;flex-direction:column;gap:8px}
.pf-stat-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.pf-stat-row:last-child{border-bottom:none}
.pf-stat-icon{font-size:22px;flex-shrink:0;width:28px;text-align:center}
.pf-stat-icon-sm{font-size:14px}
.pf-stat-label{flex:1;font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:1.5px;color:#b8cce0;text-transform:uppercase}
.pf-stat-val{font-family:'Bebas Neue',Impact,sans-serif;font-size:18px;color:var(--accent);min-width:36px;text-align:right}

.pf-balance{gap:10px}
.pf-bal-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pf-bal-label{font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:2px;color:#b8cce0;text-transform:uppercase}
.pf-bal-val{font-family:'Bebas Neue',Impact,sans-serif;font-size:20px;color:var(--gold)}
.pf-bal-actions{display:flex;gap:8px}
.pf-bal-btn{flex:1;padding:9px;background:transparent;border:1.5px solid var(--accent);color:var(--accent);font-family:'Bebas Neue',Impact,sans-serif;font-size:12px;letter-spacing:2px;border-radius:6px;cursor:pointer;transition:background var(--t-fast)}
.pf-bal-btn:hover{background:rgba(0,230,118,.08)}
.pf-bal-refresh{flex:0 0 44px;font-size:18px;padding:0}

/* Tag-edit modal — opened from the ✎ button on Profile. Replaces
   v0's prompt()/alert() so server-side errors (taken / profane /
   invalid) can surface inline. */
.tagmod-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:10500;display:flex;align-items:center;justify-content:center;padding:20px}
.tagmod{background:#1a1a1a;border:1px solid var(--accent);border-radius:8px;padding:22px;width:min(90vw,360px);box-shadow:0 8px 32px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:12px}
.tagmod-title{font-family:'Bebas Neue',Impact,sans-serif;font-size:18px;letter-spacing:3px;color:var(--accent)}
.tagmod-sub{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:1px;color:var(--mt)}
.tagmod-input{padding:11px 12px;background:#0a0a0a;border:1px solid #444;color:#fff;border-radius:4px;font-family:'Bebas Neue',Impact,sans-serif;font-size:18px;letter-spacing:3px;text-transform:none;outline:none;transition:border-color var(--t-fast)}
.tagmod-input:focus{border-color:var(--accent)}
.tagmod-counter{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:1px;color:var(--mt);text-align:right;margin-top:-6px}
/* Reserve the error's height ALWAYS (min-height) and make the empty state
   invisible (:empty → transparent box) so a message appearing/clearing never
   shifts the input box up. Same approach as the deckbuilder zoom note. */
.tagmod-error{font-family:'Barlow Condensed',sans-serif;font-size:13px;color:#fca5a5;background:rgba(252,165,165,.08);border:1px solid rgba(252,165,165,.3);border-radius:4px;padding:8px 10px;min-height:36px;display:flex;align-items:center}
.tagmod-error:empty{background:transparent;border-color:transparent}
.tagmod-actions{display:flex;gap:10px;margin-top:6px}
.tagmod-cancel,.tagmod-save{flex:1;padding:11px;border-radius:6px;font-family:'Bebas Neue',Impact,sans-serif;font-size:14px;letter-spacing:3px;cursor:pointer;border:1.5px solid transparent;transition:opacity var(--t-fast),background var(--t-fast)}
.tagmod-cancel{background:transparent;color:#ccc;border-color:#444}
.tagmod-cancel:hover{background:rgba(255,255,255,.04)}
.tagmod-save{background:var(--accent);color:#000;font-weight:700}
.tagmod-save:hover{background:#22f08b}
.tagmod-save:disabled{opacity:.5;cursor:wait}

/* Quick Play screen — live NFL game picker with per-game waiting
   counts. Reached by the QUICK PLAY button on the post-auth Home.
   Same constrained-column pattern as How-to-Play / Profile. */
#gQuickPlay{position:absolute;inset:0;background:var(--bg,#060812);z-index:200;display:flex;flex-direction:column;overflow:hidden}
.qp-hd{flex-shrink:0;display:flex;align-items:center;padding:12px 14px;border-bottom:1px solid var(--bd);gap:10px}
.qp-back{flex-shrink:0;width:42px;height:36px;background:transparent;color:var(--accent);border:1.5px solid var(--accent);border-radius:6px;font-family:'Bebas Neue',Impact,sans-serif;font-size:22px;line-height:1;cursor:pointer;transition:background var(--t-fast);padding:0}
.qp-back:hover{background:rgba(0,230,118,.08)}
.qp-title{flex:1;text-align:center;font-family:'Bebas Neue',Impact,sans-serif;font-size:16px;letter-spacing:4px;color:var(--accent);padding-right:42px}
.qp-bd{flex:1;overflow-y:auto;padding:18px 18px 24px;display:flex;flex-direction:column;gap:12px}
.qp-sub{font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:1px;color:var(--mt);text-align:center;text-transform:uppercase;margin-bottom:4px}
/* Engaged-deck indicator (P-lobby #260) — just the deck NAME, centered; tap to
   open the switcher modal. */
.qp-deck{display:flex;justify-content:center;}
.qp-deckname{display:inline-flex;align-items:center;gap:9px;background:#0f1e35;border:1px solid #24395a;
  border-radius:999px;padding:8px 18px;cursor:pointer;}
.qp-deckname:hover{border-color:#00e676;}
.qp-deckname-val{font-size:15px;font-weight:700;color:#e8f0fb;}
.qp-deckname-caret{color:#7e93b2;font-size:12px;}
/* Deck switcher modal — centered. */
.qp-dm{position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,.78);display:flex;
  align-items:center;justify-content:center;padding:20px;}
.qp-dm-box{position:relative;background:#0c1830;border:1px solid #2e4a6a;border-radius:14px;width:100%;
  max-width:360px;padding:18px;display:flex;flex-direction:column;gap:9px;text-align:center;}
.qp-dm-title{font-family:'Barlow Condensed',sans-serif;font-size:14px;letter-spacing:2px;
  color:#bcd0ea;text-transform:uppercase;font-weight:700;margin-bottom:2px;}
.qp-dm-list{display:flex;flex-direction:column;gap:8px;}
.qp-dm-deck{display:flex;flex-direction:column;align-items:center;gap:2px;
  background:#142840;border:1px solid #2e4a6a;border-radius:9px;padding:11px 12px;cursor:pointer;}
.qp-dm-deck:hover:not(.qp-dm-deck-on):not(.qp-dm-deck-off){border-color:#3a5a80;}
.qp-dm-deck-on{background:#163a2a;border-color:#00e676;}
.qp-dm-deck-off{opacity:.45;cursor:not-allowed;}
.qp-dm-deck-name{font-size:15px;font-weight:700;color:#e8f0fb;}
.qp-dm-deck-meta{font-size:11px;color:#7e93b2;letter-spacing:.5px;}
.qp-dm-build{background:#163a2a;border:1px solid #00e676;color:#00e676;border-radius:8px;padding:10px;
  font-size:12px;font-weight:700;letter-spacing:1px;cursor:pointer;margin-top:4px;}
.qp-dm-build:hover{background:#00e676;color:#06210f;}
/* Close ✕ pinned to the box's top-right corner (was a CLOSE button below). */
.qp-dm-x{position:absolute;top:8px;right:8px;z-index:2;width:30px;height:30px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;background:#142840;border:1px solid #2e4a6a;
  color:#cfe0f5;font-size:14px;font-weight:700;line-height:1;cursor:pointer;}
.qp-dm-x:hover{background:#1c3a5e;border-color:#00e676;color:#fff;}
.qp-list{display:flex;flex-direction:column;gap:10px}
.qp-empty{font-family:'Barlow Condensed',sans-serif;font-size:13px;color:var(--mt);text-align:center;font-style:italic;padding:24px 12px}
.qp-game{background:rgba(255,255,255,.03);border:1px solid var(--bd);border-radius:8px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast);text-align:left;font-family:inherit}
.qp-game:hover{background:rgba(0,230,118,.06);border-color:var(--accent)}
.qp-matchup{font-family:'Bebas Neue',Impact,sans-serif;font-size:18px;letter-spacing:3px;color:var(--tx);text-transform:uppercase}
.qp-status-line{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:1px;text-transform:uppercase}
.qp-waiting{color:var(--gold);font-weight:600}
.qp-waiting-none{color:var(--mt)}
/* Sandbox demo card — distinct outline so the user can tell it apart
   from live NFL games. Always first in the solo-mode list. */
.qp-game-sandbox{border-color:rgba(0,230,118,.4);background:rgba(0,230,118,.04)}
.qp-game-sandbox:hover{background:rgba(0,230,118,.10);border-color:var(--accent)}
.qp-game-sandbox .qp-matchup{color:var(--accent)}

/* Quick Play "waiting for opponent" overlay — covers the screen
   while polling /matchmaking/status after the user joined a queue. */
.qp-wait{position:absolute;inset:0;background:rgba(0,0,0,.75);z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px}
.qp-wait-box{background:#1a1a1a;border:1px solid var(--accent);border-radius:8px;padding:24px;text-align:center;width:min(90vw,320px);display:flex;flex-direction:column;align-items:center;gap:12px}
.qp-wait-title{font-family:'Bebas Neue',Impact,sans-serif;font-size:18px;letter-spacing:3px;color:var(--accent)}
.qp-wait-spinner{width:42px;height:42px;border-radius:50%;border:3px solid rgba(0,230,118,.2);border-top-color:var(--accent);animation:qp-spin 1s linear infinite}
@keyframes qp-spin{to{transform:rotate(360deg)}}
.qp-wait-sub{font-family:'Barlow Condensed',sans-serif;font-size:13px;color:#b8cce0;letter-spacing:1px}
.qp-wait-cancel{margin-top:6px;padding:9px 18px;background:transparent;border:1px solid #fca5a5;color:#fca5a5;font-family:'Bebas Neue',Impact,sans-serif;font-size:12px;letter-spacing:2px;border-radius:4px;cursor:pointer;transition:background var(--t-fast)}
.qp-wait-cancel:hover{background:rgba(252,165,165,.08)}

/* Selected-game indicator below the CTA stack. Tells the user which
 * game's data drives their next Practice / Find Opponent match. */

/* Game picker modal — live-only NFL games. Triggered by the
 * "PICK NFL GAME" CTA on the post-auth home. */
.gpicker{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:10000;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;padding:20px}
.gpicker-box{background:#1a1a1a;border:1px solid var(--accent);border-radius:8px;padding:20px;width:min(92vw,440px);max-height:80vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 32px rgba(0,0,0,.6)}
.gpicker-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-shrink:0}
.gpicker-title{font-family:'Bebas Neue',Impact,sans-serif;font-size:18px;letter-spacing:3px;color:var(--accent)}
.gpicker-close{background:none;border:none;color:#888;font-size:24px;cursor:pointer;padding:0;line-height:1}
.gpicker-close:hover{color:#fff}
.gpicker-bd{overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-right:4px}
.gpicker-loading,.gpicker-empty{text-align:center;font-style:italic;color:var(--mt);padding:32px 16px;font-size:14px}
.gpicker-card{background:rgba(255,255,255,.04);border:1px solid var(--bd);border-radius:6px;padding:12px;display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast)}
.gpicker-card:hover{background:rgba(0,230,118,.06);border-color:rgba(0,230,118,.5)}
.gpicker-card.is-selected{border-color:var(--accent);background:rgba(0,230,118,.1)}
.gpicker-matchup{font-family:'Bebas Neue',Impact,sans-serif;font-size:16px;letter-spacing:2px;color:#e8f0fa}
.gpicker-meta{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:1px;color:var(--mt);text-transform:uppercase;display:flex;gap:12px}
.gpicker-status-live{color:#f87171}
.gpicker-status-pre{color:#fcd34d}

/* PvP lobby overlay — shown while waiting for the second player.
   Styled to match the green-modal matchmaking wait (.qp-wait*) so PvP
   waiting surfaces look consistent regardless of who waited first
   (Sean 2026-06-02). Class names are KEPT — game.ts queries .lobbyTitle
   / .lobbySpinner / .lobbyCancel / #gLobbySub for watchdog status. */
#gLobby{position:absolute;inset:0;z-index:300;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;padding:20px}
.lobbyBox{background:#1a1a1a;border:1px solid var(--accent);border-radius:8px;padding:24px;text-align:center;width:min(90vw,320px);display:flex;flex-direction:column;align-items:center;gap:12px}
.lobbyTitle{font-family:'Bebas Neue',Impact,sans-serif;font-size:18px;letter-spacing:3px;color:var(--accent)}
.lobbySpinner{width:42px;height:42px;border-radius:50%;border:3px solid rgba(0,230,118,.2);border-top-color:var(--accent);animation:lobbySpin 1s linear infinite}
@keyframes lobbySpin{to{transform:rotate(360deg)}}
.lobbySub{font-family:'Barlow Condensed',sans-serif;font-size:13px;color:#b8cce0;letter-spacing:1px;text-align:center;max-width:280px;line-height:1.5}
.lobbyCancel{margin-top:6px;padding:9px 18px;background:transparent;border:1px solid #fca5a5;color:#fca5a5;font-family:'Bebas Neue',Impact,sans-serif;font-size:12px;letter-spacing:2px;border-radius:4px;cursor:pointer;transition:background var(--t-fast)}
.lobbyCancel:hover{background:rgba(252,165,165,.08)}

/* Discard piles */
.discard-pile{position:absolute;width:40px;height:53px}
.dp-stack{position:absolute;inset:0;background:rgba(15,30,53,.4);border:1px solid rgba(58,82,120,.3);border-radius:4px}
.dp-stack::before{content:'';position:absolute;top:-2px;left:2px;right:-2px;bottom:2px;background:rgba(15,30,53,.35);border:1px solid rgba(58,82,120,.25);border-radius:4px;z-index:-1}
.dp-stack::after{content:'';position:absolute;top:-4px;left:4px;right:-4px;bottom:4px;background:rgba(15,30,53,.3);border:1px solid rgba(58,82,120,.2);border-radius:4px;z-index:-2}
.dp-top{position:absolute;inset:0;border-radius:4px;overflow:hidden}
.dp-top canvas{width:100%!important;height:100%!important}

/* Positioning */
.dp-player{bottom:10px;right:10px}
.dp-opp{top:10px;left:10px}

/* Flying card animation */
/* (duplicate .flying-card rule consolidated into the canonical one above) */
.flying-card canvas{border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.5)}

/* Pick modal — the centered green-bordered box every picker uses (Sean
 * 2026-06-09: true-modal treatment, matching the qp-wait house style).
 * Lives inside .brd so it's bounded by the play area; the overlay dims
 * the whole board underneath. */
#pickOverlay{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9000;
  background:rgba(2,5,12,.78);
  padding:16px;
}
#pickOverlay.pick-active{display:flex}
.pick-modal{
  background:#101626;
  border:1px solid var(--accent);
  border-radius:10px;
  box-shadow:0 0 28px rgba(0,230,118,.18);
  padding:18px 20px;
  width:min(92%,560px);
  max-height:88%;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.pick-modal-prompt{
  font-family:'Bebas Neue',Impact,sans-serif;
  font-size:19px;
  letter-spacing:3px;
  color:var(--accent);
  text-align:center;
  line-height:1.2;
}
.pick-modal-hint{
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;
  letter-spacing:1.5px;
  color:#7e8aa6;
  margin-top:-8px;
}
.pick-modal-body{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  align-items:center;
}
.pick-modal-foot{
  /* Clock above, SKIP underneath (Sean 2026-06-10: side-by-side "looks
     weird"). */
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.pick-modal-skip{
  padding:9px 26px;
  background:#1c2840;
  border:1px solid #3a5a80;
  color:#e8f0ff;
  border-radius:7px;
  cursor:pointer;
  font-family:'Bebas Neue',Impact,sans-serif;
  font-size:15px;
  letter-spacing:3px;
  transition:background var(--t-fast);
}
.pick-modal-skip:hover{background:#27395c}
.pick-modal-timer{
  font-family:'IBM Plex Mono',monospace;
  font-size:14px;
  color:#fcd34d;
  letter-spacing:1px;
}
/* Glow effect for selectable positions/cards */
.pick-glow{
  animation:pickGlow 1s ease-in-out infinite;
  cursor:pointer !important;
}
@keyframes pickGlow{
  0%,100%{box-shadow:0 0 8px rgba(0,230,118,0.6)}
  50%{box-shadow:0 0 20px rgba(0,230,118,0.9),0 0 30px rgba(0,230,118,0.4)}
}

/* ── Settings (Phase 3 5/?) ──────────────────────────────────────── */

/* Reduced-motion: kill transitions + animations globally. Respects OS
   preference via the @media query AND the body class set by user
   choice (settings.ts). Game-mechanic-critical animations are exempted
   below — without them the user can't see flight resolution timers
   or other gameplay-essential feedback. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; }
  /* Re-enable the flight pulse so the 15s in-flight period is visible. */
  .mc.mc-inflight { animation-duration: 1.5s !important; animation-iteration-count: infinite !important; }
}
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after {
  animation-duration: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
}
body.reduced-motion .mc.mc-inflight {
  animation-duration: 1.5s !important;
  animation-iteration-count: infinite !important;
}

/* Color-blind palettes — shift greens/reds to safer hues. Targets the
   small set of accent vars; full UI recolor is a polish item. */
body.cb-deuteranopia { --accent: #4a9cf0; --gold: #f2c640; }
body.cb-protanopia   { --accent: #3aa0e8; --gold: #f5cf3a; }
body.cb-tritanopia   { --accent: #6dd07a; --gold: #ff8a3a; }

/* Settings modal-specific rows (reuse .gpicker container). */
.set-row { padding:14px 0; border-bottom:1px solid #1a2030; }
.set-row:last-of-type { border-bottom:none; }
.set-lbl { display:block; font-family:'Bebas Neue',Impact,sans-serif; font-size:14px; letter-spacing:2px; color:var(--accent); margin-bottom:8px; }
.set-ctl { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.set-val { display:inline-block; min-width:32px; text-align:right; font-family:'IBM Plex Mono',monospace; font-size:13px; color:#cfd6e0; }
.set-inline { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#cfd6e0; cursor:pointer; }
.set-radios { gap:14px; }
.set-radios label { display:inline-flex; align-items:center; gap:5px; font-size:13px; color:#cfd6e0; cursor:pointer; }
.set-help { font-size:11px; color:#7a8597; margin-top:6px; }
.set-err { padding:8px; background:#3a1a1a; border:1px solid #844; color:#faa; font-size:13px; border-radius:4px; margin-top:12px; }
.set-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; padding-top:14px; border-top:1px solid #1a2030; }
.set-btn { padding:8px 18px; font-family:'Bebas Neue',Impact,sans-serif; font-size:14px; letter-spacing:2px; border:1px solid var(--accent); background:transparent; color:var(--accent); cursor:pointer; border-radius:3px; }
.set-btn-save { background:var(--accent); color:#000; }
.set-btn:hover { opacity:.85; }
.set-btn-cancel { border-color:#555; color:#aaa; }

/* Gear icon button in account widget. */
.pa-settings { background:transparent; border:1px solid #444; color:#cfd6e0; width:32px; height:32px; border-radius:4px; cursor:pointer; font-size:16px; line-height:1; padding:0; margin-right:8px; }
.pa-settings:hover { border-color:var(--accent); color:var(--accent); }

/* Slider native styling reset for dark theme. */
#gSettingsVolume { flex:1; min-width:160px; max-width:280px; }

/* ─── DECKBUILDER (#251) ───────────────────────────────────────────────── */
#gDeckbuilder{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;
  background:#0a1322;color:#e8eef7;font-family:'Barlow Condensed',sans-serif;}
.db-top{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid #1c2c45;
  background:#0c1830;flex-wrap:wrap;}
.db-back{background:none;border:1px solid #2e4a6a;color:#9fb6d4;border-radius:6px;padding:6px 12px;
  font-weight:700;letter-spacing:.5px;cursor:pointer;font-size:13px;}
.db-back:hover{border-color:#00e676;color:#00e676;}
/* Slot tabs share the header row and truncate — never wrap to a second row
   (long deck names used to push them onto a second line). */
.db-slots{display:flex;gap:6px;flex:1;flex-wrap:nowrap;min-width:0;}
.db-slot{flex:1 1 0;min-width:0;background:#142840;border:1px solid #2e4a6a;color:#bcd0ea;border-radius:6px;
  padding:6px 10px;font-weight:600;cursor:pointer;font-size:13px;max-width:160px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;}
.db-slot-on{background:#1c3a5e;border-color:#00e676;color:#fff;}
.db-body{flex:1;display:flex;min-height:0;}
.db-rail{width:280px;flex-shrink:0;border-right:1px solid #1c2c45;background:#0b1526;
  display:flex;flex-direction:column;padding:12px;gap:10px;overflow-y:auto;}
/* Title row: deck name (grows) + N/30 count, inline. position:relative anchors
   the profanity error so it overlays (doesn't push the fields below down). */
.db-name-row{position:relative;display:flex;align-items:center;gap:8px;}
.db-name{flex:1;min-width:0;background:#0f1e35;border:1px solid #2e4a6a;color:#fff;border-radius:6px;
  padding:8px 10px;font-size:16px;font-weight:700;font-family:inherit;}
/* Rides the right end of the CLASSES row. */
.db-count{margin-left:auto;font-size:14px;font-weight:800;letter-spacing:.5px;white-space:nowrap;flex-shrink:0;}
.db-count-ok{color:#00e676;} .db-count-low{color:#9fb6d4;} .db-count-over{color:#ff5252;}
.db-classes{display:flex;flex-wrap:wrap;gap:5px;align-items:center;}
.db-classes-lbl{font-size:10px;color:#6e86a6;letter-spacing:1px;width:100%;}
.db-chip-empty{border-style:dashed;color:#5e7390;border-color:#2e4a6a;}
/* No visible scrollbar — mobile game, swipe to scroll (the bar covered the PV). */
.db-list{display:flex;flex-direction:column;gap:3px;overflow-y:auto;scrollbar-width:none;}
.db-list::-webkit-scrollbar{display:none;}
.db-list-empty{color:#6e86a6;font-size:13px;line-height:1.4;padding:8px 2px;}
/* TCG sidebar row: class-icon (stage color) | count | title | pot value */
/* Row: the colored areas (class cell + pv) reach the row edges like the card.
   overflow:hidden + radius clips them; the cell/pv stretch to full row height. */
.db-li{display:flex;align-items:center;gap:8px;background:#0f1e35;border:1px solid #18283f;
  border-radius:4px;overflow:hidden;min-height:34px;cursor:pointer;}
.db-li:hover{background:#14233c;border-color:#2e4a6a;}
.db-cls-ic{width:18px;height:18px;flex-shrink:0;display:block;}
/* Class-icon cell — stage-colored area (flush to the left edge) + accent edge
   + light icon, like the card's stage bar. */
.db-li-cls{align-self:stretch;display:flex;align-items:center;justify-content:center;width:34px;
  border-left:3px solid #6b7280;flex-shrink:0;}
.db-li-cls .db-cls-ic{width:18px;height:18px;}
/* Bigger text WITHOUT a taller row — the line box fills more of the fixed 34px
   row, so the vertical padding shrinks. Row height (and the 32px clip offset
   below) is unchanged, so the 45° pv diagonal is preserved. */
.db-li-cnt{font-weight:800;color:#cfe0f5;font-size:16px;min-width:22px;}
.db-li-name{flex:1;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
/* PV badge — the card's STYLIZED pv-corner look. The colored area is flush to
   the right edge; its LEFT edge is a 45° diagonal (clip x-offset == badge height,
   row 34px border-box → 32px content, slope 1 = 45°). Accents (both from the
   card): a thin white edge line ALONG the diagonal (1px drop-shadow on the
   clipped silhouette, offset down-left so only the hypotenuse shows it), and
   "speed lines" — discrete streaks parallel to the diagonal, on ::before, in a
   brighter shade of the value color, faded so they read as motion. The number
   (.db-pv-n) is IBM Plex Mono (matching the card), enlarged, floated above the
   streaks. Padding stays tight so the colored area doesn't grow. --pv is set
   inline by dbPvHtml. */
/* Wrapper: holds the clipped colored badge (.db-pv) PLUS the speed lines, which
   live to the LEFT of the colored area (not inside it). */
.db-pvw{position:relative;align-self:stretch;flex-shrink:0;display:flex;}
/* Speed lines — inline SVG (two short streaks) painted BEHIND .db-pv, anchored
   just left of the badge so they sit in the diagonal notch + a touch into the
   row. Faded at the outer (upper-left) end via a mask, like the card's gradient
   streaks. The badge (z-index 1) covers any part that would fall in the fill. */
.db-pv-fx{position:absolute;z-index:0;top:0;left:-12px;overflow:visible;pointer-events:none;
  -webkit-mask-image:linear-gradient(135deg,transparent 12%,#000 90%);
          mask-image:linear-gradient(135deg,transparent 12%,#000 90%);}
/* Fixed width (border-box) so the colored area is UNIFORM regardless of the
   number ("+20" is the widest pv at 3 chars; content box 72−28−6 = 38px fits
   it). The number is centered; left pad 28 keeps even "+20" clear of the
   diagonal. Width only extends the RIGHT side — the diagonal + speed lines are
   anchored at the badge's left, so this doesn't disturb them. */
.db-pv{position:relative;z-index:1;align-self:stretch;width:72px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:20px;
  padding:0 6px 0 28px;clip-path:polygon(0 0,100% 0,100% 100%,32px 100%);
  background:var(--pv);filter:drop-shadow(-1px 1px 0 rgba(255,255,255,.45));}
.db-cls-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
  border:1px solid #2e4a6a;border-radius:4px;padding:2px 7px;color:#cfe0f5;letter-spacing:.5px;}
.db-cls-chip .db-cls-ic{width:16px;height:16px;}
/* min-height:0 lets the grid scroll inside .db-main on mobile (the stacked
   column layout makes height the main axis; default min-height:auto would let
   the 96-card grid expand past the fixed-height screen instead of scrolling). */
.db-main{flex:1;min-height:0;display:flex;flex-direction:column;min-width:0;padding:12px;gap:10px;}
.db-filter{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;align-items:center;}
.db-ftab{background:#142840;border:1px solid #2e4a6a;color:#bcd0ea;border-radius:6px;padding:5px 12px;
  font-weight:600;cursor:pointer;font-size:12px;letter-spacing:.5px;}
.db-ftab-on{background:#1c3a5e;border-color:#00e676;color:#fff;}
/* Class filter — icon buttons (filter the grid to one class; click to clear).
   Grouped so they wrap together; no divider (the gap separates them cleanly). */
.db-fgroup{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
.db-fcls{background:#142840;border:1px solid #2e4a6a;border-radius:6px;padding:0;
  width:32px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
/* Active filter matches the active stage tab (blue fill + green border) so the
   solid-green ring stays unique to "card is in your deck". */
.db-fcls-on{background:#1c3a5e;border-color:#00e676;}
.db-fcls .db-cls-ic{width:20px;height:20px;}
/* Each grid tile is a FULL card render (renderCardArt), not cropped art. */
.db-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px;
  overflow-y:auto;align-content:start;padding:2px;scrollbar-width:none;}
.db-grid::-webkit-scrollbar{display:none;}
.db-tile{position:relative;cursor:pointer;transition:transform var(--t-tap);border-radius:10px;}
.db-tile:hover{transform:translateY(-3px);}
/* True card proportions (300×400 = 3:4) so the card text isn't squished. */
.db-tile-cv{width:100%;aspect-ratio:3/4;display:block;border-radius:10px;}
.db-tile-dim{opacity:.3;filter:grayscale(.6);}
.db-tile-in .db-tile-cv{box-shadow:0 0 0 3px #00e676;}
/* Count badge — only appears when a card is maxed (2); single copies show the
   green ring alone (see _dbSyncGrid). */
/* Add (+) / remove (−) buttons over the card's description field (~77.5% down
   the 3:4 card): − left, + right, mobile-sized tap targets. */
.db-tile-add,.db-tile-rem{position:absolute;top:77.5%;transform:translateY(-50%);
  border:2px solid #0a1322;border-radius:50%;width:40px;height:40px;font-size:26px;font-weight:800;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 9px rgba(0,0,0,.55);}
.db-tile-add{right:7px;background:#00e676;color:#06210f;}
.db-tile-rem{left:7px;background:#ff5252;color:#2a0808;}
.db-tile-add:hover{background:#22ff8c;}
.db-tile-rem:hover{background:#ff7676;}
/* "+" disabled (locked/maxed/full): greyed, taps fall through so the card still
   opens the zoom. "−" with nothing to remove: just hidden. */
.db-tile-add:disabled{background:rgba(20,30,46,.8);border-color:#3a4a60;color:#5f7390;
  cursor:not-allowed;box-shadow:none;pointer-events:none;}
.db-tile-rem:disabled{display:none;}
.db-zoom{position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,.8);display:flex;
  align-items:center;justify-content:center;padding:20px;}
.db-zoom-box{position:relative;background:transparent;border:none;max-width:280px;width:100%;
  padding:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-height:92vh;}
/* Close button — centered below the +/− action bar (no longer over the card). */
.db-zoom-x{padding:8px 26px;border-radius:8px;background:#0c1830;border:1px solid #2e4a6a;
  color:#cfe0f5;font-size:13px;font-weight:700;letter-spacing:1.5px;cursor:pointer;}
.db-zoom-x:hover{background:#1c3a5e;border-color:#00e676;color:#fff;}
.db-zc-canvas{width:250px;height:333px;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.6);}
.db-zoom-actions{display:flex;align-items:center;justify-content:center;gap:16px;
  background:#0c1830;border:1px solid #2e4a6a;border-radius:40px;padding:8px 18px;}
.db-zb{width:44px;height:44px;border-radius:50%;font-size:24px;font-weight:800;cursor:pointer;line-height:1;}
.db-zb-add{background:#163a2a;border:1.5px solid #00e676;color:#00e676;}
.db-zb-add:hover:not([disabled]){background:#00e676;color:#06210f;}
.db-zb-rem{background:#3a2020;border:1.5px solid #ff5252;color:#ff7676;}
.db-zb-rem:hover:not([disabled]){background:#ff5252;color:#fff;}
.db-zb[disabled]{opacity:.35;cursor:not-allowed;}
/* Exit save/discard prompt (draft model) — centered. */
.db-exit{position:fixed;inset:0;z-index:9600;background:rgba(0,0,0,.8);display:flex;
  align-items:center;justify-content:center;padding:20px;}
.db-exit-box{background:#0c1830;border:1px solid #2e4a6a;border-radius:14px;width:100%;max-width:320px;
  padding:20px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
.db-exit-title{font-size:17px;font-weight:800;color:#e8f0fb;letter-spacing:.3px;}
.db-exit-actions{display:flex;gap:10px;width:100%;}
.db-exit-discard,.db-exit-save{flex:1;border-radius:8px;padding:11px;font-size:13px;font-weight:800;
  letter-spacing:1px;cursor:pointer;}
.db-exit-discard{background:#3a2020;border:1px solid #ff5252;color:#ff7676;}
.db-exit-discard:hover{background:#ff5252;color:#fff;}
.db-exit-save{background:#163a2a;border:1px solid #00e676;color:#00e676;}
.db-exit-save:hover{background:#00e676;color:#06210f;}
.db-exit-cancel{background:transparent;border:none;color:#7e93b2;font-size:12px;font-weight:700;
  letter-spacing:1px;cursor:pointer;padding:2px 8px;}
.db-exit-cancel:hover{color:#cfe0f5;}
.db-zb-count{font-size:18px;font-weight:800;min-width:48px;text-align:center;}
/* "+" disabled reason — its own centered line under the −/+ pill (never reshapes
   the pill). Hidden when there's no reason. */
/* Reserve one line ALWAYS (no :empty collapse) so a message appearing/clearing
   never changes the box height — the enlarged card stays anchored in place. */
.db-zoom-note{font-size:12px;font-weight:600;color:#ff7676;text-align:center;line-height:1.4;max-width:240px;
  min-height:1.4em;}

/* Summary button beside the deck-name input. */
.db-name-sum{flex-shrink:0;align-self:stretch;display:flex;align-items:center;justify-content:center;
  padding:0 11px;background:#142840;border:1px solid #2e4a6a;border-radius:6px;color:#9fb6d4;cursor:pointer;}
.db-name-sum:hover{border-color:#00e676;color:#00e676;}
/* Compact PV badge (deck summary) — width fits the number instead of the fixed
   72px row badge, so it fits a tight 3-column list. */
.db-pvw-sm .db-pv{width:auto;padding:0 5px 0 26px;}

/* Deck summary modal */
.db-sum{position:fixed;inset:0;z-index:9550;background:rgba(0,0,0,.85);display:flex;
  align-items:center;justify-content:center;padding:14px;}
.db-sum-box{position:relative;background:#0b1526;border:1px solid #2e4a6a;border-radius:12px;width:100%;
  max-width:640px;max-height:92vh;overflow:hidden;display:flex;flex-direction:column;}
/* The content scrolls inside the box (only if it must); the ✕ is pinned to the
   box corner so it never scrolls away. */
/* Tight horizontal padding (6px) so the 2 card columns stretch wide enough to
   fit most card names without truncating; generous top/bottom keeps it airy. */
.db-sum-scroll{overflow-y:auto;padding:18px 6px;display:flex;flex-direction:column;align-items:center;gap:14px;}
.db-sum-x{position:absolute;top:9px;right:9px;z-index:2;width:32px;height:32px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;background:#0c1830;border:1px solid #2e4a6a;
  color:#cfe0f5;font-size:15px;font-weight:700;cursor:pointer;line-height:1;}
.db-sum-x:hover{background:#1c3a5e;border-color:#00e676;color:#fff;}
.db-sum-head{display:flex;flex-direction:column;align-items:center;gap:7px;}
.db-sum-icons{display:flex;gap:12px;}
.db-sum-icons .db-cls-ic{width:30px;height:30px;}
.db-sum-name{font-family:'Bebas Neue',Impact,sans-serif;font-size:30px;letter-spacing:1px;color:#fff;
  text-align:center;line-height:1;}
.db-sum-count{font-size:15px;font-weight:700;color:#9fb6d4;}
.db-sum-stages{display:flex;gap:16px;}
.db-sum-stg{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:800;color:#cfe0f5;}
.db-sum-sq{width:15px;height:15px;border-radius:3px;}
/* 2 columns (3 cut card names off), filled top-to-bottom (balanced). */
.db-sum-grid{column-count:2;column-gap:8px;width:100%;}
.db-sum-li{display:flex;align-items:center;background:#0f1e35;border:1px solid #18283f;border-radius:4px;
  overflow:hidden;min-height:34px;break-inside:avoid;margin-bottom:5px;}
.db-sum-li .db-li-cls{width:30px;}
/* Let the name overlap the PV speed-lines zone (negative margin pulls it ~18px
   into the badge wrapper's left notch) so long names fit without truncating. The
   name sits ABOVE the speed lines (z-index 1 > 0) but BELOW the badge number
   (z-index 2), so the text lays lightly over the decorative lines, not the pv. */
.db-sum-li .db-li-name{flex:1;font-size:13px;padding-left:6px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-weight:600;position:relative;z-index:1;margin-right:-18px;}
.db-sum-li .db-pv{z-index:2;}
@media(max-width:640px){
  .db-body{flex-direction:column;} .db-rail{width:auto;max-height:38vh;border-right:none;border-bottom:1px solid #1c2c45;}
  .db-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));}
}

/* Overlaid just under the title input — floats over the CLASSES area instead of
   pushing it down. The dark backing keeps it readable. */
.db-name-err{position:absolute;top:calc(100% + 3px);left:0;right:0;z-index:6;
  color:#ff7676;font-size:11px;font-weight:600;background:#0b1526;border:1px solid #5a3a3a;
  border-radius:4px;padding:3px 7px;display:none;}

/* On-board position picking (Sean 2026-08-07): slim prompt pill docked at
   the target row; eligible .pc cards glow in place, ineligible dim. */
.pick-pos-pill{position:fixed;left:50%;transform:translateX(-50%);z-index:1200;
  display:flex;align-items:center;gap:10px;padding:7px 14px;border-radius:9px;
  background:rgba(6,10,18,.94);border:1.5px solid var(--accent,#4ade80);
  box-shadow:0 4px 18px rgba(0,0,0,.55);pointer-events:auto;top:12px}
.ppp-prompt{font-family:'Bebas Neue',Impact,sans-serif;font-size:14px;
  letter-spacing:2.5px;color:var(--accent,#4ade80);white-space:nowrap}
.ppp-timer{font-size:12px;color:#fbbf24;min-width:26px;text-align:center}
.ppp-skip{background:transparent;border:1px solid var(--mt,#64748b);
  color:var(--mt,#94a3b8);padding:4px 10px;border-radius:6px;
  font-family:'Bebas Neue',Impact,sans-serif;font-size:12px;
  letter-spacing:2px;cursor:pointer}
.pick-pos-dim{opacity:.35;filter:saturate(.5)}

/* Feed recedes while a position-pick pill is active so the prompt +
   glowing lineup carry the eye (Sean 2026-08-11 phone session). */
.fd-dimmed{opacity:.3;filter:saturate(.4);pointer-events:none;transition:opacity .25s ease}

/* ── STATS screen (community dashboard, 2026-08-11) ── */
.st-tabs{display:flex;gap:8px;justify-content:center;margin:6px 0 14px}
.st-tab{background:transparent;border:1px solid var(--bd);color:var(--mt);padding:7px 22px;border-radius:8px;font-family:'Bebas Neue',Impact,sans-serif;font-size:15px;letter-spacing:3px;cursor:pointer}
.st-tab.on{border-color:var(--accent);color:var(--accent)}
.st-body{max-width:340px;margin:0 auto}
.st-row{display:flex;justify-content:space-between;align-items:baseline;padding:9px 2px;border-bottom:1px solid rgba(148,163,184,.12)}
.st-label{color:var(--mt);font-size:13px;letter-spacing:1px;text-transform:uppercase}
.st-val{color:var(--tx);font-family:'Bebas Neue',Impact,sans-serif;font-size:18px;letter-spacing:1px}
.st-sub{color:var(--accent);font-family:'Bebas Neue',Impact,sans-serif;font-size:14px;letter-spacing:3px;margin:16px 0 2px;text-align:center}
.st-loading,.st-empty{color:var(--mt);text-align:center;padding:22px 0;font-size:13px;letter-spacing:1px}