/* PassKeeper — shared game styles (used by the canonical client, served or offline). */
:root{
  --bg:#0a0e14; --panel:#121826; --panel2:#0e141f; --line:#1e2838;
  --ink:#e7eef7; --muted:#7d8aa0; --us:#22d3ee; --us2:#0891b2;
  --them:#f43f5e; --them2:#9f1239; --gold:#fbbf24; --green:#22c55e;
  --pitch1:#1f7a3d; --pitch2:#1b6e37;
  --ctl:46px;                /* standard control height — comfortable tap target */
  --r:12px;                  /* standard radius */
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; height:100%;}
body{background:
    radial-gradient(140% 100% at 50% -20%, #1c3b56 0%, #0c1422 45%, var(--bg) 80%),
    radial-gradient(80% 60% at 50% 120%, #10243a 0%, #0000 60%);
  color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  display:flex; gap:18px; align-items:center; justify-content:center; min-height:100%; overflow:hidden;}
.ic{width:1em; height:1em; display:inline-block; vertical-align:-0.125em; stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto;}
#app{width:100%; max-width:468px; height:100vh; height:100dvh; max-height:980px; display:flex; flex-direction:column;
  position:relative; border-radius:20px; overflow:hidden;
  background:linear-gradient(180deg,#0d1424,#0a0e14); box-shadow:0 30px 80px -30px #000, 0 0 0 1px #ffffff0a;}
/* ---- top bar ---- */
.topbar{display:flex; align-items:center; gap:6px; padding:8px 12px 4px;}
.brand{font-weight:800; letter-spacing:.3px; font-size:19px; margin-right:auto;} .brand span{color:var(--us);}
.iconbtn{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; font-size:18px;
  background:#ffffff08; border:1px solid var(--line); border-radius:10px; color:var(--ink); cursor:pointer;
  transition:background .15s, border-color .15s, opacity .15s; padding:0;}
.iconbtn:hover{background:#ffffff14; border-color:#2f3d52;} .iconbtn:active{transform:translateY(1px);}
.iconbtn.kit{padding:0;} .iconbtn.kit .swatch{width:18px; height:18px; border-radius:50%; box-shadow:0 0 0 2px #ffffff22;}
.iconbtn.off{opacity:.4;}
.sndbtn{ /* legacy alias kept for any old refs */ }
.streak{font-size:12px; font-weight:800; color:var(--gold); opacity:0; transition:opacity .2s; min-width:0;}
.streak.on{opacity:1;}
.balance{display:flex; flex-direction:column; align-items:flex-end; margin-left:8px; padding-left:12px; border-left:1px solid var(--line); min-width:0;}
.balance b{font-variant-numeric:tabular-nums; font-size:18px; line-height:1.15; white-space:nowrap;}
.balance b::before{content:"●"; color:var(--gold); font-size:9px; vertical-align:2px; margin-right:5px; opacity:.9;}
.balance small{color:var(--muted); font-size:9px; letter-spacing:.5px; text-transform:uppercase; white-space:nowrap; max-width:150px; overflow:hidden; text-overflow:ellipsis;}
/* ---- progressive jackpot ticker ---- */
.jpbar{display:flex; align-items:center; justify-content:center; gap:7px; margin:0 12px 6px; padding:5px 10px;
  border-radius:11px; color:var(--gold); background:linear-gradient(90deg,#160f02,#3e310c,#160f02);
  border:1px solid #fbbf2455; font-size:12px; letter-spacing:1px; box-shadow:0 0 24px -8px #fbbf2455 inset;}
.jpbar .ic{width:15px; height:15px;}
.jpbar .jplabel{font-size:9px; letter-spacing:3px; text-transform:uppercase; opacity:.85;}
.jpbar b{font-size:17px; font-variant-numeric:tabular-nums; text-shadow:0 0 14px #fbbf2466; margin-left:2px;}
.jpbar.bump{animation:jpbump .45s ease-out;}
@keyframes jpbump{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
/* ---- recent multipliers ---- */
.history{display:flex; gap:6px; padding:0 14px 8px; overflow-x:auto; scrollbar-width:none;}
.history::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto; font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px;
      font-variant-numeric:tabular-nums; border:1px solid var(--line); background:#0b1018a0;}
.chip.lo{color:#7dd3fc; border-color:#1e3a5f;} .chip.mid{color:#c084fc; border-color:#4c2d6b;}
.chip.hi{color:var(--gold); border-color:#6b531a;} .chip.bust{color:var(--them); border-color:#5b1f2c;}
.chip.goal{color:#052e16; background:var(--gold); border-color:var(--gold);}
/* ---- pitch / stage ---- */
.stage{flex:1; min-height:240px; position:relative; margin:0 12px; border-radius:16px; overflow:hidden;
       border:1px solid #163a22; box-shadow:0 20px 50px -20px #000 inset, 0 0 0 1px #0006;}
.pitch{position:absolute; inset:-40px 0; background-color:var(--pitch2);
  background-image:
    repeating-linear-gradient(0deg, #ffffff00 0 calc(11% - 2px), #ffffff44 calc(11% - 2px) 11%),
    repeating-linear-gradient(0deg, var(--pitch1) 0 9%, var(--pitch2) 9% 18%);
  background-size:100% 90px, 100% 200px;}
.goalzone{position:absolute; top:-2px; left:0; right:0; height:54px; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,#0b3a1c 0%, #0b3a1c00 100%); border-bottom:2px dashed #ffffff55;}
.goalzone::after{content:"▼ GOAL ZONE"; position:absolute; top:7px; left:0; right:0; text-align:center;
  font-size:10px; letter-spacing:3px; font-weight:800; color:#ffffffcc;}
.goalzone.score{animation:gscore .5s ease-out;}
@keyframes gscore{0%{box-shadow:inset 0 30px 30px -10px var(--gold)}100%{box-shadow:none}}
.vignette{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 45%, #0000 50%, #00000066 100%);}
#field,#trails{position:absolute; inset:0; pointer-events:none;}
.player{position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800;
  color:#04121a; box-shadow:0 5px 12px #0008, 0 0 0 2px #ffffff22; z-index:4; will-change:left,top;}
.player.us{background:radial-gradient(circle at 35% 30%, var(--us), var(--us2));}
.player.them{background:radial-gradient(circle at 35% 30%, #fb7185, var(--them2)); color:#fff;}
.player.has{box-shadow:0 6px 16px #000a, 0 0 0 3px #fff, 0 0 18px var(--us); z-index:6;}
.player.scorer{box-shadow:0 0 0 4px var(--gold), 0 0 28px var(--gold)!important;}
@keyframes shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(-5px)}50%{transform:translateX(5px)}40%,60%{transform:translateX(4px)}}
.stage.shake{animation:shake .4s;}
@keyframes punch{0%{transform:scale(1)}30%{transform:scale(1.03)}100%{transform:scale(1)}}
.stage.punch{animation:punch .5s ease-out;}
.trail{position:absolute; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%;
  background:#fff; z-index:3; pointer-events:none;}
.ball{position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; z-index:7; will-change:left,top;
  font-size:21px; line-height:22px; text-align:center; filter:drop-shadow(0 2px 3px #0009);}
.mult{position:absolute; top:58px; left:0; right:0; text-align:center; z-index:8; pointer-events:none;}
.mult .x{font-size:56px; font-weight:900; line-height:1; letter-spacing:-1px;
  font-variant-numeric:tabular-nums; text-shadow:0 4px 22px #000d; transition:color .15s;}
.mult .label{font-size:10px; letter-spacing:3px; text-transform:uppercase; color:#dbeafe; opacity:.85;}
.mult.warm .x{color:#fff;} .mult.hot .x{color:var(--gold);} .mult.fire .x{color:#fb923c;} .mult.danger .x{color:var(--them);}
.pressure{position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0; box-shadow:inset 0 0 60px 10px var(--them); transition:opacity .12s;}
.feed{position:absolute; top:8px; left:8px; width:152px; z-index:6; pointer-events:none; display:flex; flex-direction:column; gap:3px;}
.feed .hd{font-size:9px; letter-spacing:.5px; color:#cfe3ff; opacity:.75; margin-bottom:1px;}
.feed .row{font-size:10px; font-weight:700; background:#0b1018b0; border:1px solid #ffffff14; border-radius:7px;
  padding:2px 6px; display:flex; justify-content:space-between; gap:6px; animation:fin .2s ease-out;}
.feed .row .nm{color:#aeb9cc; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.feed .row .v{font-variant-numeric:tabular-nums;} .feed .row.win .v{color:var(--green);}
.feed .row.big .v{color:var(--gold);} .feed .row.you{border-color:var(--us);} .feed .row.you .nm{color:var(--us);}
@keyframes fin{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
/* scrolling soccer-field markings (touchlines, centre circle, penalty boxes) */
.lines{position:absolute; inset:-40px 0; z-index:1; pointer-events:none; opacity:.5;
  background-repeat:repeat-y; background-size:100% 360px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 160' preserveAspectRatio='none'><g fill='none' stroke='white' stroke-width='0.6'><line x1='4' y1='0' x2='4' y2='160'/><line x1='96' y1='0' x2='96' y2='160'/><line x1='4' y1='80' x2='96' y2='80'/><circle cx='50' cy='80' r='12'/><circle cx='50' cy='80' r='0.9'/><rect x='28' y='0' width='44' height='20'/><rect x='28' y='140' width='44' height='20'/><rect x='40' y='0' width='20' height='8'/><rect x='40' y='152' width='20' height='8'/></g></svg>");}
/* ====================== LEFT LIVE BOARD (desktop) ====================== */
/* Always full height, fixed frame; the list scrolls INSIDE so adding/removing players never reflows the panel. */
.rail{width:286px; height:100vh; height:100dvh; max-height:980px; background:linear-gradient(180deg,#0e1626,#0b1019);
  border:1px solid var(--line); border-radius:20px; padding:14px 12px; display:flex; flex-direction:column;
  overflow:hidden; box-shadow:0 30px 80px -30px #000, 0 0 0 1px #ffffff0a;}
.rail .tabs{display:flex; gap:4px; margin-bottom:10px; background:#0b1018; border-radius:11px; padding:4px; flex:0 0 auto;}
.rail .tab{flex:1; font-size:11px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--muted);
  background:none; border:none; border-radius:8px; padding:8px 0; cursor:pointer; transition:background .15s,color .15s;}
.rail .tab:hover{color:#c6d2e2;} .rail .tab.on{background:var(--panel); color:#e7eef7; box-shadow:0 1px 0 #ffffff12 inset;}
.rail .railhd{display:flex; align-items:center; gap:7px; font-size:11px; letter-spacing:.4px; color:var(--muted);
  margin-bottom:8px; padding:0 4px; flex:0 0 auto;}
.rail .railhd .dot{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green);}
.rail .railhd b{color:#e7eef7;} .rail .railhd .watch{margin-left:auto; color:var(--muted);}
.rail .railhd .won{color:var(--green); font-variant-numeric:tabular-nums;}
/* the scrolling lists fill the remaining height */
#feedlist,#prevpane,#toppane{flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:#2a3850 transparent;}
#feedlist::-webkit-scrollbar,#toppane::-webkit-scrollbar{width:6px;} #feedlist::-webkit-scrollbar-thumb,#toppane::-webkit-scrollbar-thumb{background:#2a3850; border-radius:3px;}
#feedlist{display:flex; flex-direction:column; gap:5px;}
#prevpane{flex-wrap:wrap; gap:5px; align-content:flex-start;}
#toppane{display:flex; flex-direction:column; gap:5px;}
.topw{font-size:11px; font-weight:700; background:#0b1018b0; border:1px solid #ffffff12; border-radius:9px; padding:8px 10px; display:flex; justify-content:space-between; gap:8px; flex:0 0 auto;}
.topw .tn{color:#aeb9cc; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .topw .tv{color:var(--gold); font-variant-numeric:tabular-nums; white-space:nowrap;}
/* a player row: [chip] name | stake | status@x | win */
.prow{font-size:12px; font-weight:700; background:#0b1018b0; border:1px solid #ffffff10; border-radius:10px;
  padding:8px 9px; display:grid; grid-template-columns:auto minmax(0,1fr) auto auto auto; gap:8px; align-items:center;
  animation:fin .16s ease-out; flex:0 0 auto;}
.prow .av{width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; color:#04121a; background:linear-gradient(135deg,#5b6b85,#39465c);}
.prow .pn{color:#c6d2e2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.prow .pb{color:#9fb0c6; font-variant-numeric:tabular-nums; font-size:11px;}
.prow .pb::before{content:"€"; opacity:.5; margin-right:1px;}
.prow .cm{justify-self:end; font-variant-numeric:tabular-nums; font-size:11px; color:var(--muted);}
.prow .cm.win{color:#34d399;} .prow .cm.lost{color:#6b7689;}
.prow .cw{justify-self:end; min-width:42px; text-align:right; color:var(--green); font-variant-numeric:tabular-nums;}
.prow.in{border-color:#22d3ee2e;} .prow.in .cm{color:var(--us);}
.prow.in .av{background:linear-gradient(135deg,var(--us),var(--us2));}
.prow.cashed{background:#0c1f18b0; border-color:#10b98140;} .prow.cashed .av{background:linear-gradient(135deg,#34d399,#0f9d6b);}
.prow.lost{opacity:.5;} .prow.lost .av{background:linear-gradient(135deg,#5b6472,#3a4150);}
.prow.watching{opacity:.62; background:#0b10186b; border-style:dashed; border-color:#ffffff0e;}
.prow.watching .av{background:#2a3344; color:#8a96aa;}
.prow.you{border-color:var(--us); background:#0b1626b0; box-shadow:0 0 0 1px #22d3ee33;} .prow.you .pn{color:var(--us);}
.prow .tag{font-size:8.5px; letter-spacing:1px; text-transform:uppercase; color:#7d8aa0; justify-self:end;}
@keyframes fin2{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (max-width:919px){ .rail{display:none;} }      /* phone: rail hidden, in-pitch feed shows */
@media (min-width:920px){ #feed{display:none;} }      /* desktop: clean pitch, board in the rail */
/* ---- banners / overlays ---- */
.banner{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  z-index:9; pointer-events:none; opacity:0; transition:opacity .25s; padding:0 18px; text-align:center;}
.banner.show{opacity:1;} .banner .big{font-size:40px; font-weight:900; letter-spacing:1px;}
.banner .sub{font-size:13px; margin-top:6px; opacity:.95;}
.banner.win .big{color:var(--green); text-shadow:0 0 30px #22c55e99;}
.banner.lose .big{color:var(--them); text-shadow:0 0 30px #f43f5e99;}
.banner.jackpot .big{color:var(--gold); text-shadow:0 0 40px #fbbf24cc;}
.banner .big.pop{animation:bpop .55s cubic-bezier(.2,1.4,.4,1);}
@keyframes bpop{0%{transform:scale(.4);opacity:0}55%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
/* jackpot split reveal: shows N ways + per-share chips animating in */
.split{display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:12px;}
.split .ways{font-size:12px; letter-spacing:2px; text-transform:uppercase; color:#fde68a;}
.split .ways.golden{font-size:20px; font-weight:900; letter-spacing:0; text-transform:none; color:var(--gold); text-shadow:0 0 18px #fbbf2466;}
.split .shares{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; max-width:340px;}
.split .share{font-size:12px; font-weight:800; color:#1a1205; background:linear-gradient(180deg,#fde047,#f59e0b);
  border-radius:999px; padding:4px 11px; font-variant-numeric:tabular-nums; opacity:0; transform:translateY(8px) scale(.8);
  animation:shin .4s ease-out forwards;}
.split .share.you{box-shadow:0 0 0 2px #fff, 0 0 16px #fbbf24;}
@keyframes shin{to{opacity:1; transform:none;}}
/* betting overlay: prominent "place your bets" + countdown during the bet window */
.betov{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  z-index:8; pointer-events:none; opacity:0; transition:opacity .25s;
  background:radial-gradient(ellipse at center, #0a0e1455 0%, #0a0e14cc 100%);}
.betov.show{opacity:1;}
.betov .boTitle{font-size:24px; font-weight:900; letter-spacing:2px; text-transform:uppercase; color:#fff; text-shadow:0 0 24px #22d3ee99;}
.betov .boCount{font-size:74px; font-weight:900; line-height:1; margin:6px 0; color:var(--gold);
  text-shadow:0 0 30px #fbbf2466; font-variant-numeric:tabular-nums;}
.betov .boSub{font-size:11px; letter-spacing:3px; text-transform:uppercase; color:#dbeafe; opacity:.8;}
.flash{position:absolute; inset:0; z-index:8; pointer-events:none; opacity:0;}
.flash.win{background:radial-gradient(circle,#22c55e55,#0000 70%);} .flash.lose{background:radial-gradient(circle,#f43f5e66,#0000 70%);}
.flash.gold{background:radial-gradient(circle,#fbbf2466,#0000 70%);}
@keyframes flashAnim{0%{opacity:.9}100%{opacity:0}} .flash.go{animation:flashAnim .5s ease-out;}
/* transient toast: a slim pill at the TOP of the pitch (never over the multiplier / play area) */
.toast{position:absolute; top:10px; left:50%; transform:translate(-50%,-14px); z-index:10;
  background:#0b1018ee; border:1px solid #ffffff22; color:#fff; font-weight:800; font-size:13px;
  padding:7px 14px; border-radius:999px; opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; white-space:nowrap; box-shadow:0 10px 26px -8px #000; max-width:90%; overflow:hidden; text-overflow:ellipsis;}
.toast.show{opacity:1; transform:translate(-50%,0);}
/* persistent status: over the field at the bottom of the pitch, on a soft scrim (no hard bar above the controls) */
.status{position:absolute; bottom:0; left:0; right:0; z-index:8; text-align:center; font-size:12px; font-weight:600;
  color:#eaf2fb; padding:20px 14px 8px; pointer-events:none; text-shadow:0 1px 4px #000a;
  background:linear-gradient(180deg, #0000 0%, #0a0e14cc 78%);}
.status b{color:var(--us);}
/* recent-results row + "…" expander */
.histrow{display:flex; align-items:center; gap:6px; padding:0 12px 6px;}
.histrow .history{flex:1; padding:0;}
.histmore{flex:0 0 auto; width:30px; height:24px; border-radius:8px; border:1px solid var(--line); background:#0b1018a0; color:var(--muted); cursor:pointer; font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center;}
.histmore:hover{color:#c6d2e2;} .history.open{flex-wrap:wrap;}
/* Previous / Top panes */
.panehd{font-size:11px; color:var(--muted); padding:2px 4px 8px; letter-spacing:.3px;}
.panehd b{font-variant-numeric:tabular-nums;} .panehd .rgoal{color:var(--gold);} .panehd .rhi{color:#c084fc;} .panehd .rlo{color:#7dd3fc;}
.emptyp{font-size:12px; color:var(--muted); text-align:center; padding:22px 0;}
.subtabs{display:flex; gap:4px; margin-bottom:8px; flex:0 0 auto;}
.subtabs button{flex:1; font-size:10px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); background:#0b1018; border:1px solid var(--line); border-radius:8px; padding:7px 0; cursor:pointer;}
.subtabs button.on{background:var(--panel); color:#e7eef7; border-color:#2f3d52;}
.toprow{display:grid; grid-template-columns:auto auto minmax(0,1fr) auto auto; gap:8px; align-items:center; font-size:12px; font-weight:700;
  background:#0b1018b0; border:1px solid #ffffff10; border-radius:10px; padding:7px 9px; margin-bottom:5px;}
.toprow .rk{color:var(--muted); font-size:11px; width:16px; text-align:center;} .toprow.medal .rk{color:var(--gold);}
.toprow .tn{color:#c6d2e2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.toprow .tx{color:#7dd3fc; font-variant-numeric:tabular-nums;} .toprow .tv{color:var(--gold); font-variant-numeric:tabular-nums; justify-self:end;}
/* ====================== BET CONTROLS ====================== */
.controls{padding:8px 12px calc(8px + env(safe-area-inset-bottom)); display:flex; gap:10px;}
.betpanel{flex:1; background:linear-gradient(180deg,#0f1626,#0c1220); border:1px solid var(--line); border-radius:16px; padding:8px;}
.amtrow{display:flex; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; height:var(--ctl);}
.amtrow button{width:44px; height:100%; background:none; border:none; color:var(--ink); font-size:22px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.amtrow button:hover{background:#ffffff0d;} .amtrow button:active{background:#ffffff18;}
.amtrow input{flex:1; width:100%; min-width:0; background:none; border:none; color:var(--ink); text-align:center; font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; outline:none;}
.optrow{display:flex; align-items:center; gap:8px; margin:6px 0; font-size:11px; color:var(--muted);}
/* custom auto-cashout toggle (the checkbox becomes a pill switch) */
.optrow label.sw{display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none; white-space:nowrap;}
.optrow .sw input{position:absolute; opacity:0; width:0; height:0;}
.optrow .sw .track{width:38px; height:22px; border-radius:999px; background:#26324a; position:relative; transition:background .15s; flex:0 0 auto;}
.optrow .sw .track::after{content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#aab6c8; transition:transform .15s, background .15s;}
.optrow .sw input:checked + .track{background:var(--us2);} .optrow .sw input:checked + .track::after{transform:translateX(16px); background:#eaffff;}
.optrow input[type=number]{width:62px; height:36px; background:var(--panel); border:1px solid var(--line); color:var(--ink); border-radius:9px; padding:0 8px; font-weight:800; font-size:14px; font-variant-numeric:tabular-nums; text-align:center; outline:none;}
.optrow input[type=number]:focus{border-color:var(--us2);}
.optrow .ab{margin-left:auto; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; border:1px solid var(--line); background:var(--panel); color:var(--muted); cursor:pointer; font-size:16px;}
.optrow .ab:hover{color:#c6d2e2;} .optrow .ab.on{background:var(--us2); color:#eaffff; border-color:var(--us);}
.optrow .ab .ic{width:17px; height:17px;}
.act{width:100%; height:50px; border:none; border-radius:14px; font-size:17px; font-weight:900; letter-spacing:.4px;
  cursor:pointer; color:#04121a; transition:transform .08s, filter .15s; background:linear-gradient(180deg,#34d399,#10b981); box-shadow:0 10px 24px -8px #10b981aa; display:flex; align-items:center; justify-content:center; gap:8px;}
.act .ic{width:18px; height:18px;}
.act:hover{filter:brightness(1.05);} .act:active{transform:translateY(2px);}
.act.placed{background:linear-gradient(180deg,#475569,#334155); color:#e2e8f0; box-shadow:none;}
.act.bank{background:linear-gradient(180deg,#fde047,#f59e0b); color:#3a2606; box-shadow:0 10px 26px -6px #f59e0bcc; animation:pulse 1s infinite;}
.act.disabled{background:#1a2335; color:#586781; box-shadow:none; cursor:default;}
@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.14)}}
.slotinfo{height:13px; text-align:center; font-size:11px; font-weight:700; color:var(--muted); margin-top:3px; font-variant-numeric:tabular-nums;}
.fair{display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; text-align:center; font-size:10px; color:#5b6679; padding:2px 8px 4px;}
.fair .ic{width:12px; height:12px;} .fair .ok{color:var(--green);} .fair .bad{color:var(--them);}