@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Roboto+Mono:wght@400;500;700&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

:root{
  /* ── Carbón / Navy ── */
  --n9:#0b1117;--n8:#1c1f26;--n7:#2a2e38;--n6:#3a3f4c;--n5:#5a5e68;
  --n4:#7a7e88;--n3:#9a9ea8;--n2:#bfc3cc;--n1:#dde0e6;--n0:#f1f3f5;
  /* ── Gold (solo en variables, NO se usa en UI) ── */
  --g9:#5c3a00;--g8:#7a5000;--g7:#9a6800;--g6:#c8860a;--g5:#d9a030;
  --g4:#e6b84e;--g3:#f0cc72;--g2:#f5dda0;--g1:#faeece;--g0:#fdf7ea;
  /* ── Superficies light ── */
  --bg:#e8eaed;--panel:#ffffff;--panel-alt:#f1f3f5;
  --border:#d0d4da;--border-lt:#e2e5ea;
  /* ── Semánticos ── */
  --grn:#2d8a4e;--grn-bg:#e6f4ec;--grn-border:#b4dcc4;
  --red:#b82a2a;--red-bg:#fce8e8;--red-border:#e4b0b0;
  --yel:#9a7b1a;--yel-bg:#faf3e0;--yel-border:#e0d0a0;
  --blue:#2a6cb8;--blue-bg:#e8f1fd;
  --accent:#5cb83c;--accent-dim:#4a9a30;
  --mag:#a030c0;
  /* ── Tipo ── */
  --txt:#1a1c20;--txt2:#5a5e68;--txt3:#8a8e96;--txt-inv:#dde0e6;--muted:#9a9ea8;
  --fh:'Rajdhani','Arial Narrow',sans-serif;
  --fm:'Roboto Mono','Courier New',monospace;
  --fs:1.4;
}

html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--txt);font-family:var(--fm);font-size:calc(13px * var(--fs));}
#app{width:100vw;height:100vh;display:flex;flex-direction:column;padding:6px;gap:5px;overflow:hidden;}
button{touch-action:manipulation;outline:none;cursor:pointer;border-radius:4px;font-weight:600;transition:filter .08s,transform .05s;border:1px solid var(--border);}
button:active{transform:scale(.97);filter:brightness(.93);}

/* ══════════════════════════════════════
   HEADER
   ══════════════════════════════════════ */
#hdr{
  flex:0 0 auto;min-height:60px;
  background:var(--n8);border:none;border-radius:8px;
  display:flex;align-items:center;padding:0 12px;gap:8px;
  flex-wrap:nowrap;overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.28);
  border-bottom:1px solid var(--n6);
}
.t-block{display:flex;align-items:center;gap:8px;min-width:0;flex:0 0 auto;}
.t-logo{
  width:calc(40px * var(--fs));height:calc(40px * var(--fs));
  border-radius:6px;border:2px solid var(--n6);background:var(--n7);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;
  background-size:contain;background-position:center;background-repeat:no-repeat;
}
.t-logo svg{width:100%;height:100%;}
.t-names{display:flex;flex-direction:column;min-width:0;}
.t-name{font-family:var(--fh);font-size:calc(14px * var(--fs));font-weight:700;letter-spacing:.5px;color:var(--n1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.t-rhe{font-size:calc(10px * var(--fs));color:var(--n3);letter-spacing:.3px;}

/* Line Score */
.ls-wrap{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;overflow-x:auto;}
.ls-tbl{border-collapse:collapse;font-family:var(--fm);font-size:calc(10px * var(--fs));}
.ls-tbl th{color:var(--n3);font-weight:600;padding:1px 6px;text-align:center;font-size:calc(9px * var(--fs));border-bottom:1px solid var(--n6);letter-spacing:.3px;}
.ls-tbl th.rhe-h{color:var(--n2);border-left:1px solid var(--n6);}
.ls-tbl td{padding:2px 6px;text-align:center;font-weight:700;color:var(--n1);font-size:calc(10px * var(--fs));}
.ls-tbl td.t-abbr{color:var(--n2);font-family:var(--fh);font-size:calc(12px * var(--fs));letter-spacing:1px;padding-right:8px;}
.ls-tbl td.rhe-v{color:var(--n1);font-size:calc(11px * var(--fs));border-left:1px solid var(--n6);font-weight:700;}
.ls-tbl td.inn-cur{background:rgba(255,255,255,.12);border-radius:2px;}
.ls-tbl th.inn-cur{background:rgba(255,255,255,.12);}
.ls-tbl td.dash{color:var(--n5);font-size:calc(9px * var(--fs));}

/* Inning Block */
.inn-blk{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;padding:0 6px;border-left:1px solid var(--n6);border-right:1px solid var(--n6);}
.inn-tri{width:0;height:0;border-left:calc(10px * var(--fs)) solid transparent;border-right:calc(10px * var(--fs)) solid transparent;border-top:calc(14px * var(--fs)) solid var(--n2);}
.inn-tri.top-half{transform:rotate(180deg);}
.inn-text{font-family:var(--fh);font-size:calc(11px * var(--fs));font-weight:700;color:var(--n1);letter-spacing:1px;white-space:nowrap;}

/* BSO */
.bso-blk{display:flex;flex-direction:column;gap:3px;padding:0 4px;}
.bso-row{display:flex;align-items:center;gap:3px;}
.bso-lbl{font-family:var(--fh);font-size:calc(11px * var(--fs));font-weight:700;color:var(--n3);margin-right:2px;}
.bso-dot{width:calc(11px * var(--fs));height:calc(11px * var(--fs));border-radius:50%;border:1.5px solid var(--n5);background:transparent;transition:all .15s;}
.bso-dot.b-on{background:var(--grn);border-color:var(--grn);box-shadow:0 0 5px rgba(45,138,78,.55);}
.bso-dot.s-on{background:var(--n2);border-color:var(--n2);}
.bso-dot.o-on{background:var(--red);border-color:var(--red);box-shadow:0 0 5px rgba(184,42,42,.55);}

/* ══════════════════════════════════════
   MAIN GRID
   ══════════════════════════════════════ */
#main{flex:1;min-height:0;display:grid;grid-template-columns:1.4fr 1.3fr 1.3fr;gap:5px;overflow:hidden;}

/* ══════════════════════════════════════
   ZONE 2 — LINEUPS
   ══════════════════════════════════════ */
#z2{background:var(--panel);border:1px solid var(--border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;color:var(--txt);box-shadow:0 1px 4px rgba(0,0,0,.08);}
.lu-tabs{display:flex;border-bottom:2px solid var(--n8);flex-shrink:0;}
.lu-tab{flex:1;padding:10px 2px;font-family:var(--fh);font-size:calc(12px * var(--fs));font-weight:700;letter-spacing:.5px;text-align:center;background:var(--panel-alt);color:var(--n4);border:none;transition:all .15s;min-height:calc(36px * var(--fs));}
.lu-tab.act{background:var(--n8);color:var(--n1);}
.lu-hdr{display:flex;align-items:center;gap:7px;padding:4px 8px;border-bottom:1px solid var(--border);background:var(--panel-alt);flex-shrink:0;}
.lu-logo{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--n8);background:var(--n8);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;background-size:contain;background-position:center;background-repeat:no-repeat;}
.lu-logo svg{width:100%;height:100%;}
.lu-title{font-family:var(--fh);font-size:calc(13px * var(--fs));font-weight:700;color:var(--n8);letter-spacing:1px;}
.lu-cols{display:grid;grid-template-columns:1.2em .6em 1fr 2em 3em 3em 2em;gap:2px;padding:2px 8px;font-size:calc(8px * var(--fs));font-weight:700;color:var(--txt3);letter-spacing:.4px;border-bottom:1px solid var(--border);background:var(--panel-alt);flex-shrink:0;}
.lu-list{flex:1;overflow-y:auto;overflow-x:hidden;}
.lu-list::-webkit-scrollbar{width:3px;}
.lu-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
.lu-row{display:grid;grid-template-columns:1.2em .6em 1fr 2em 3em 3em 2em;gap:2px;padding:10px 8px;align-items:center;border-bottom:1px solid var(--border-lt);cursor:pointer;transition:background .1s;}
.lu-row:hover{background:var(--panel-alt);}
.lu-row.cur{background:var(--n0);border-left:3px solid var(--n5);padding-left:5px;}
.r-n{font-size:calc(9px * var(--fs));color:var(--txt3);font-weight:600;}
.r-c{font-size:calc(10px * var(--fs));color:var(--n5);font-weight:700;}
.r-nm{font-size:calc(10px * var(--fs));font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lu-row.cur .r-nm{color:var(--n8);font-weight:700;}
.r-p{font-size:calc(9px * var(--fs));color:var(--txt3);font-weight:600;}
.r-av,.r-op{font-size:calc(9px * var(--fs));color:var(--txt2);font-weight:600;}
.r-hr{font-size:calc(10px * var(--fs));font-weight:700;color:var(--txt);}

/* ══════════════════════════════════════
   ZONE 3 — ACTION CENTRAL
   ══════════════════════════════════════ */
#z3{background:var(--panel);border:1px solid var(--border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;color:var(--txt);box-shadow:0 1px 4px rgba(0,0,0,.08);}
.zt-bar{padding:4px 10px;font-family:var(--fh);font-weight:700;letter-spacing:2px;text-align:center;flex-shrink:0;font-size:calc(12px * var(--fs));}
.zt-bar.c-m{background:var(--n8);border-bottom:2px solid var(--n6);color:var(--n1);}
.zt-bar.c-p{background:var(--n8);border-bottom:2px solid var(--n6);color:var(--n1);}

/* Matchup Area */
.mu-area{display:flex;align-items:center;padding:5px 8px;gap:6px;border-bottom:1px solid var(--border);background:var(--panel-alt);flex-shrink:0;}
.p-ava{width:calc(38px * var(--fs));height:calc(38px * var(--fs));border-radius:50%;border:2px solid var(--border);background:var(--panel-alt);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;position:relative;background-size:160%;background-position:top center;background-repeat:no-repeat;}
.p-ava .mug-placeholder{width:100%;height:100%;}
.mu-inf{flex:1;min-width:0;}
.mu-lbl{font-size:calc(8px * var(--fs));color:var(--txt3);font-weight:700;letter-spacing:.4px;}
.mu-nm{font-family:var(--fh);font-size:calc(12px * var(--fs));font-weight:700;color:var(--n8);white-space:nowrap;}
.mu-st{font-size:calc(8px * var(--fs));color:var(--txt2);}
.mu-vs{font-size:calc(18px * var(--fs));color:var(--n5);font-weight:700;padding:0 3px;flex-shrink:0;font-family:var(--fh);}

/* Strike Zone + Pitch Type */
.z-content{flex:1;min-height:0;display:flex;overflow:hidden;}
.sz-sec{flex:1;display:flex;flex-direction:column;align-items:center;padding:5px 5px 3px;gap:2px;border-right:1px solid var(--border);}
.sz-lbl{font-family:var(--fh);font-size:calc(10px * var(--fs));font-weight:700;color:var(--txt2);letter-spacing:1px;}

.sz-outer{position:relative;width:90%;max-width:240px;aspect-ratio:0.52;margin:0 auto;cursor:crosshair;flex-shrink:0;border:1.5px dashed var(--border);border-radius:6px;background:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(0,0,0,.012) 5px,rgba(0,0,0,.012) 10px);}
#sz{position:absolute;left:18%;top:10%;width:64%;height:52%;pointer-events:none;aspect-ratio:unset;max-width:unset;margin:0;cursor:crosshair;}
.sz-zone{position:absolute;left:0;top:0;width:100%;height:100%;border:2px solid var(--n6);background:rgba(255,255,255,.82);pointer-events:none;}
.szl{position:absolute;pointer-events:none;}
.szl.h1{left:0;width:100%;top:33.33%;height:1px;background:var(--border);}
.szl.h2{left:0;width:100%;top:66.66%;height:1px;background:var(--border);}
.szl.v1{top:0;height:100%;left:33.33%;width:1px;background:var(--border);}
.szl.v2{top:0;height:100%;left:66.66%;width:1px;background:var(--border);}
.sz-plate{position:absolute;bottom:4%;left:50%;transform:translateX(-50%);width:55%;display:flex;flex-direction:column;align-items:center;pointer-events:none;}
.sz-plate svg{width:60%;max-width:80px;}
.sz-plate svg polygon{fill:var(--panel);stroke:var(--border);}
.sz-plate-label{font-family:var(--fh);font-size:calc(8px * var(--fs));color:var(--txt3);letter-spacing:1.5px;font-weight:700;margin-top:1px;}
.sz-tag{position:absolute;font-family:var(--fh);font-size:calc(7px * var(--fs));font-weight:700;color:var(--txt3);letter-spacing:.5px;pointer-events:none;opacity:.6;left:50%;transform:translateX(-50%);}
.sz-tag-top{top:2px;}
.sz-tag-bot{bottom:2px;}
.pdot{position:absolute;width:calc(20px * var(--fs));height:calc(20px * var(--fs));border-radius:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;font-size:calc(8px * var(--fs));font-weight:700;color:white;border:1.5px solid rgba(255,255,255,.6);pointer-events:none;z-index:10;font-family:var(--fm);}
.pm{position:absolute;width:calc(14px * var(--fs));height:calc(14px * var(--fs));border-radius:50%;transform:translate(-50%,-50%);border:2px dashed var(--border);background:rgba(90,94,104,.08);pointer-events:none;z-index:5;}

/* Pitch Type Panel */
.pt-sec{flex:0 0 auto;display:flex;flex-direction:column;padding:5px;gap:4px;min-width:0;}
.pt-lbl{font-family:var(--fh);font-size:calc(9px * var(--fs));font-weight:700;color:var(--txt2);letter-spacing:1px;text-align:center;}
.pt-grid{display:grid;grid-template-columns:1fr;gap:3px;}
.pt-btn{padding:5px 2px;font-family:var(--fh);font-size:calc(14px * var(--fs));font-weight:700;border:1.5px solid var(--border);background:var(--panel);color:var(--txt2);border-radius:4px;text-align:center;transition:all .15s;}
.pt-btn:hover{background:var(--panel-alt);border-color:var(--n5);}
.pt-btn.act{border-color:var(--n8);background:var(--n8);color:var(--n1);box-shadow:0 1px 6px rgba(0,0,0,.18);}

/* Velocity Gauge */
.velo-sec{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:2px;}
.velo-w{position:relative;width:82px;height:48px;cursor:ew-resize;user-select:none;touch-action:none;}
#vsvg{width:82px;height:48px;}
#vsvg path:first-of-type{stroke:var(--border);}
#vsvg path:nth-of-type(2){stroke:var(--n5);}
#vsvg line{stroke:var(--n8);}
#vsvg circle{fill:var(--n8);}
.velo-ov{position:absolute;bottom:0;left:0;right:0;text-align:center;font-family:var(--fh);font-size:calc(16px * var(--fs));font-weight:700;color:var(--txt);line-height:1;}
.velo-u{font-size:calc(8px * var(--fs));color:var(--txt3);font-weight:600;}
.velo-ctl{display:flex;gap:4px;}
.v-btn{width:calc(24px * var(--fs));height:calc(18px * var(--fs));border:1.5px solid var(--border);background:var(--panel);color:var(--txt2);font-size:calc(14px * var(--fs));border-radius:4px;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--fm);transition:all .1s;line-height:.8;}
.v-btn:hover{border-color:var(--n5);color:var(--n8);background:var(--panel-alt);}

/* ══════════════════════════════════════
   RESULT BUTTONS
   ══════════════════════════════════════ */
.res-area{padding:6px 7px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:4px;flex-shrink:0;background:var(--panel-alt);}
.res-r1{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:4px;}
.rb{padding:12px 3px;font-family:var(--fh);font-size:calc(13px * var(--fs));font-weight:700;border:none;border-radius:5px;text-align:center;line-height:1.15;transition:all .12s;letter-spacing:.3px;position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;}
.rb:active{transform:scale(.97);filter:brightness(.93);}
.rb-ball{background:var(--grn-bg);color:var(--grn);border:1.5px solid var(--grn-border);}
.rb-ball:hover{background:#d4eede;border-color:var(--grn);}
.rb-str{background:var(--yel-bg);color:var(--yel);border:1.5px solid var(--yel-border);}
.rb-str:hover{background:#f0e8cc;border-color:var(--yel);}
.rb-fo{background:var(--panel-alt);color:var(--txt);border:1.5px solid var(--border);}
.rb-fo:hover{background:var(--border-lt);border-color:var(--n5);}
.rb-out{background:var(--red-bg);color:var(--red);border:1.5px solid var(--red-border);}
.rb-out:hover{background:#f5d4d4;border-color:var(--red);}
.rb-bip{width:100%;padding:10px;background:var(--n8);color:var(--n1);border:1.5px solid var(--n7);border-radius:5px;font-family:var(--fh);font-size:calc(14px * var(--fs));font-weight:700;letter-spacing:4px;transition:all .12s;box-shadow:0 2px 6px rgba(0,0,0,.15);}
.rb-bip:hover{background:var(--n7);}
.rb-bip:active{transform:scale(.98);}
.swipe-hint{position:absolute;top:0;left:0;right:0;background:rgba(0,0,0,.45);color:#fff;font-size:calc(9px * var(--fs));padding:3px;text-align:center;transform:translateY(-100%);transition:transform .2s;pointer-events:none;border-radius:4px 4px 0 0;font-family:var(--fh);letter-spacing:.5px;}
.rb.swiping .swipe-hint{transform:translateY(0);}
.rb.swiped{filter:brightness(1.1);}

/* ══════════════════════════════════════
   ZONE 4 — FIELD + PBP
   ══════════════════════════════════════ */
#z4{background:var(--panel);border:1px solid var(--border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;color:var(--txt);box-shadow:0 1px 4px rgba(0,0,0,.08);}
.field-w{overflow: hidden;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:3px;overflow:hidden;}
#fsvg{max-width:100%;max-height:100%;}

/* Hit type bar */
#hit-bar{flex-shrink:0;padding:4px 8px;border-bottom:1px solid var(--border);background:var(--panel-alt);display:flex;align-items:center;gap:5px;}
.ht-lbl{font-family:var(--fh);font-size:calc(10px * var(--fs));font-weight:700;color:var(--txt2);letter-spacing:1px;white-space:nowrap;margin-right:2px;}
.ht-btn{padding:5px 6px;font-family:var(--fh);font-size:calc(14px * var(--fs));font-weight:700;border:1.5px solid var(--border);background:var(--panel);color:var(--txt2);border-radius:4px;transition:all .15s;display:flex;align-items:center;justify-content:center;flex:1;min-width:0;}
.ht-btn.act{color:var(--n8);background:var(--n0);border-color:var(--n5);font-weight:800;}
.ht-tip{font-family:var(--fm);font-size:calc(9px * var(--fs));color:var(--txt3);margin-left:auto;white-space:nowrap;}

/* ══════════════════════════════════════
   PLAY-BY-PLAY
   ══════════════════════════════════════ */
.pbp-area{flex:1 1 0;min-height:0;display:flex;flex-direction:column;border-top:1px solid var(--border);overflow:hidden;}
.pbp-h{font-family:var(--fh);font-size:calc(11px * var(--fs));font-weight:700;color:var(--n8);letter-spacing:1px;padding:4px 10px;flex-shrink:0;background:var(--panel-alt);border-bottom:1px solid var(--border-lt);}
.pbp-scroll{flex:1;overflow-y:auto;overflow-x:hidden;}
.pbp-scroll::-webkit-scrollbar{width:3px;}
.pbp-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
.ab-item{border-bottom:1px solid var(--border-lt);}
.ab-hdr{display:flex;align-items:center;gap:5px;padding:4px 8px;cursor:pointer;user-select:none;transition:background .1s;}
.ab-hdr:hover{background:var(--panel-alt);}
.ab-idx{font-size:calc(9px * var(--fs));color:var(--txt3);min-width:14px;flex-shrink:0;font-weight:600;}
.ab-name{font-size:calc(10px * var(--fs));font-weight:700;color:var(--txt);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ab-pos{font-size:calc(9px * var(--fs));color:var(--txt3);flex-shrink:0;}
.ab-res{font-size:calc(9px * var(--fs));font-weight:700;padding:1px 5px;border-radius:3px;flex-shrink:0;}
.ab-res.out{background:var(--red-bg);color:var(--red);}
.ab-res.hit{background:var(--grn-bg);color:var(--grn);}
.ab-res.bb{background:var(--blue-bg);color:var(--blue);}
.ab-res.k{background:var(--yel-bg);color:var(--yel);}
.ab-pc{font-size:calc(9px * var(--fs));color:var(--txt3);flex-shrink:0;}
.ab-toggle{font-size:calc(11px * var(--fs));font-weight:700;color:var(--txt3);flex-shrink:0;width:13px;text-align:center;}
.ab-body{padding:2px 6px 4px 22px;display:flex;flex-direction:column;gap:1.5px;}
.ab-body.closed{display:none;}
.p-row{display:flex;align-items:center;gap:6px;padding:1.5px 0;}
.p-num{font-size:calc(9px * var(--fs));color:var(--txt3);font-weight:600;min-width:14px;}
.p-type{font-family:var(--fh);font-size:calc(10px * var(--fs));font-weight:700;min-width:24px;}
.p-velo{font-size:calc(9px * var(--fs));color:var(--txt2);min-width:38px;}
.p-dot{width:calc(7px * var(--fs));height:calc(7px * var(--fs));border-radius:50%;flex-shrink:0;}
.p-dot.ball{background:var(--grn);}
.p-dot.str{background:var(--n4);}
.p-dot.foul{background:var(--yel);}
.p-dot.bip{background:var(--blue);}
.p-res{font-size:calc(9px * var(--fs));color:var(--txt2);}
.ab-item.ab-live,.ab-item-live{border:1.5px solid var(--n4);border-radius:5px;margin:3px 5px 2px;background:var(--n0);}
.ab-live .ab-hdr,.ab-item-live .ab-hdr{cursor:default;}
.ab-live .ab-hdr:hover,.ab-item-live .ab-hdr:hover{background:transparent;}
.ab-live-badge{font-size:calc(8px * var(--fs));font-weight:700;color:var(--grn);background:var(--grn-bg);padding:1px 5px;border-radius:3px;letter-spacing:.5px;flex-shrink:0;animation:livepulse 1.5s ease-in-out infinite;}
@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.4}}
.ab-count{font-size:calc(9px * var(--fs));color:var(--txt2);flex-shrink:0;font-family:var(--fm);}
.ab-waiting{font-size:calc(9px * var(--fs));color:var(--txt3);padding:2px 0;font-style:italic;}

/* ══════════════════════════════════════
   FOOTER
   ══════════════════════════════════════ */
#ftr{flex:0 0 auto;min-height:40px;background:var(--n8);border:none;border-radius:8px;display:flex;align-items:center;padding:0 10px;gap:10px;z-index:100;flex-shrink:0;box-shadow:0 -1px 6px rgba(0,0,0,.18);border-top:1px solid var(--n6);}
.undo-btn{padding:6px 14px;font-family:var(--fh);font-size:calc(13px * var(--fs));font-weight:700;letter-spacing:1px;background:var(--n6);color:var(--n1);border:1px solid var(--n5);border-radius:4px;transition:all .12s;flex-shrink:0;}
.undo-btn:hover{background:var(--n5);border-color:var(--n4);}
.undo-btn:active{transform:scale(.97);}
.la-txt{flex:1;font-family:var(--fh);font-size:calc(11px * var(--fs));font-weight:600;color:var(--n2);letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.la-lbl{color:var(--n4);font-weight:500;font-size:calc(10px * var(--fs));margin-right:5px;}
.gear-btn{width:calc(28px * var(--fs));height:calc(28px * var(--fs));border-radius:50%;border:1.5px solid var(--n5);background:transparent;color:var(--n3);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;font-size:calc(16px * var(--fs));}
.gear-btn:hover{border-color:var(--n3);color:var(--n1);}

/* ══════════════════════════════════════
   SETTINGS MODAL
   ══════════════════════════════════════ */
.modal-overlay{position:fixed;inset:0;background:rgba(28,31,38,.55);z-index:1000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.modal-overlay.open{display:flex;}
.modal{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:22px;min-width:320px;max-width:90vw;color:var(--txt);box-shadow:0 8px 32px rgba(0,0,0,.22);}
.modal h2{font-family:var(--fh);font-size:calc(16px * var(--fs));margin-bottom:16px;color:var(--n8);letter-spacing:2px;}
.modal label{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:calc(11px * var(--fs));font-family:var(--fh);color:var(--txt);}
.modal input[type=range]{flex:1;accent-color:var(--n6);}
.modal .fs-val{font-family:var(--fm);color:var(--n6);font-weight:700;min-width:3em;text-align:center;font-size:calc(12px * var(--fs));}
.modal-close{padding:8px 20px;font-family:var(--fh);font-size:calc(12px * var(--fs));font-weight:700;background:var(--n8);color:var(--n1);border:none;border-radius:4px;cursor:pointer;letter-spacing:1px;margin-top:8px;transition:all .12s;}
.modal-close:hover{background:var(--n7);}

/* ══════════════════════════════════════
   CLOUDGFX LOGO
   ══════════════════════════════════════ */
.cgfx-logo{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:6px 8px;border-top:1px solid var(--border);background:var(--panel-alt);}
.cgfx-logo svg{height:calc(16px * var(--fs));width:auto;display:block;}

/* ══════════════════════════════════════
   SWIPE TOAST
   ══════════════════════════════════════ */
.swipe-toast{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:5px;font-family:var(--fh);font-size:calc(11px * var(--fs));font-weight:700;letter-spacing:1px;pointer-events:none;z-index:20;animation:swipeToastIn 1.2s ease-out forwards;}
.swipe-toast.st-ball{background:rgba(45,138,78,0.92);color:#e6f4ec;box-shadow:0 0 14px rgba(45,138,78,.4);border:1.5px solid rgba(180,220,196,.3);}
.swipe-toast.st-strike{background:rgba(58,63,76,0.96);color:var(--n1);box-shadow:0 0 14px rgba(0,0,0,.3);border:1.5px solid var(--n5);}
@keyframes swipeToastIn{0%{opacity:0;transform:scale(.92) translateY(6px)}12%{opacity:1;transform:scale(1.03) translateY(0)}22%{transform:scale(1) translateY(0)}70%{opacity:1;transform:scale(1) translateY(0)}100%{opacity:0;transform:scale(.97) translateY(-4px)}}
.rb{position:relative;overflow:hidden;}

/* ══════════════════════════════════════
   STATUS LEDs
   ══════════════════════════════════════ */
.status-leds{display:flex;gap:5px;align-items:center;}
.led{font-family:var(--fh);font-size:calc(8px * var(--fs));font-weight:700;letter-spacing:.5px;padding:2px 6px;border-radius:3px;background:var(--n6);color:var(--n2);transition:background .3s,color .3s;}
.led-ws-open{background:var(--grn-bg);color:var(--grn);}
.led-ws-connecting{background:var(--yel-bg);color:var(--yel);}
.led-ws-reconnecting{background:var(--yel-bg);color:var(--yel);animation:livepulse 1s ease-in-out infinite;}
.led-ws-closed{background:var(--red-bg);color:var(--red);}
.led-radar-waiting{background:var(--n6);color:var(--n3);}
.led-radar-active{background:var(--grn-bg);color:var(--grn);}
.led-radar-timeout{background:var(--red-bg);color:var(--red);animation:livepulse 1.2s ease-in-out infinite;}
.led-sync-ok{background:var(--panel-alt);color:var(--txt3);}
.led-sync-pending{background:var(--yel-bg);color:var(--yel);animation:livepulse 1s ease-in-out infinite;}
.led-cloud-connected{background:var(--grn-bg);color:var(--grn);}
.led-cloud-authenticating{background:var(--yel-bg);color:var(--yel);animation:livepulse 1s ease-in-out infinite;}
.led-cloud-disconnected{background:var(--n6);color:var(--n3);}
.led-cloud-disabled{background:var(--n6);color:var(--n3);}

/* ══════════════════════════════════════
   FLOW OVERLAY — LOGIN + GAME SELECTOR
   ══════════════════════════════════════ */
.flow-overlay{position:fixed;inset:0;z-index:900;background:rgba(11,17,23,0.96);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:16px;}
.flow-overlay.active{display:flex;}
.flow-step{display:none;width:100%;justify-content:center;}
.flow-step.active{display:flex;}
.flow-card{background:var(--n8);border:1px solid var(--n6);border-radius:10px;padding:28px 28px 24px;width:100%;max-width:360px;display:flex;flex-direction:column;gap:14px;box-shadow:0 16px 48px rgba(0,0,0,.55);}
.flow-card-wide{max-width:600px;}
.flow-header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.flow-logout-btn{width:calc(28px * var(--fs));height:calc(28px * var(--fs));border-radius:50%;border:1.5px solid var(--n5);background:transparent;color:var(--n4);font-size:calc(13px * var(--fs));display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;}
.flow-logout-btn:hover{border-color:var(--red);color:var(--red);}
.flow-logo{display:flex;justify-content:center;margin-bottom:4px;}
.flow-cgfx-img{height:calc(44px * var(--fs));width:auto;display:block;}
.flow-title{font-family:var(--fh);font-size:calc(20px * var(--fs));font-weight:700;letter-spacing:3px;color:var(--n1);text-align:center;}
.flow-subtitle{font-family:var(--fh);font-size:calc(10px * var(--fs));letter-spacing:2px;color:var(--n3);text-align:center;margin-top:-10px;}
.flow-field{display:flex;flex-direction:column;gap:4px;}
.flow-lbl{font-family:var(--fh);font-size:calc(9px * var(--fs));font-weight:700;letter-spacing:1px;color:var(--n3);}
.flow-inp{padding:calc(10px * var(--fs)) calc(12px * var(--fs));font-family:var(--fm);font-size:calc(14px * var(--fs));color:var(--n1);background:var(--n7);border:1.5px solid var(--n5);border-radius:5px;outline:none;transition:border-color .15s;min-height:calc(44px * var(--fs));}
.flow-inp:focus{border-color:var(--n3);background:var(--n6);}
.flow-inp::placeholder{color:var(--n4);}
.flow-btn{padding:calc(13px * var(--fs)) 0;font-family:var(--fh);font-size:calc(15px * var(--fs));font-weight:700;letter-spacing:3px;background:var(--n5);color:var(--n0);border:1px solid var(--n4);border-radius:5px;transition:all .12s;min-height:calc(48px * var(--fs));}
.flow-btn:hover{background:var(--n4);}
.flow-btn:active{transform:scale(.98);}
.flow-btn:disabled{opacity:.5;pointer-events:none;}
.flow-err{font-family:var(--fm);font-size:calc(10px * var(--fs));color:#e06060;background:rgba(184,42,42,.12);border:1px solid rgba(184,42,42,.25);border-radius:4px;padding:8px 10px;}
.flow-loading{display:flex;align-items:center;gap:10px;padding:12px 0;justify-content:center;font-family:var(--fh);font-size:calc(11px * var(--fs));color:var(--n3);letter-spacing:1px;}
.flow-spinner{width:calc(16px * var(--fs));height:calc(16px * var(--fs));border:2px solid var(--n5);border-top-color:var(--n2);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0;}
@keyframes spin{to{transform:rotate(360deg)}}
.flow-date-row{display:flex;align-items:center;gap:6px;}
.flow-date-nav{width:calc(36px * var(--fs));height:calc(36px * var(--fs));border:1.5px solid var(--n5);background:var(--n7);color:var(--n2);font-size:calc(18px * var(--fs));border-radius:5px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .12s;font-family:var(--fh);}
.flow-date-nav:hover{border-color:var(--n3);color:var(--n1);}
.flow-date-inp{flex:1;padding:calc(8px * var(--fs)) calc(10px * var(--fs));font-family:var(--fm);font-size:calc(13px * var(--fs));color:var(--n1);background:var(--n7);border:1.5px solid var(--n5);border-radius:5px;outline:none;text-align:center;min-height:calc(40px * var(--fs));}
.flow-date-inp:focus{border-color:var(--n3);}
.games-list{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow-y:auto;padding-right:2px;}
.games-list::-webkit-scrollbar{width:3px;}
.games-list::-webkit-scrollbar-thumb{background:var(--n5);border-radius:2px;}
.games-empty{font-family:var(--fh);font-size:calc(11px * var(--fs));color:var(--n4);text-align:center;padding:20px 0;letter-spacing:.5px;}
.game-card{display:flex;align-items:center;justify-content:space-between;padding:calc(12px * var(--fs)) calc(14px * var(--fs));border:1.5px solid var(--n6);border-radius:7px;background:var(--n7);cursor:pointer;transition:all .12s;min-height:calc(56px * var(--fs));gap:10px;}
.game-card:hover{border-color:var(--n4);background:var(--n6);}
.game-card:active{transform:scale(.99);}
.gc-teams{display:flex;align-items:center;gap:8px;flex:1;}
.gc-team{font-family:var(--fh);font-size:calc(16px * var(--fs));font-weight:700;color:var(--n1);letter-spacing:1px;}
.gc-vs{font-size:calc(11px * var(--fs));color:var(--n4);font-family:var(--fh);}
.gc-meta{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.gc-status{font-family:var(--fh);font-size:calc(9px * var(--fs));font-weight:700;letter-spacing:1px;padding:2px 6px;border-radius:3px;background:var(--n6);color:var(--n3);}
.gc-status.live{background:var(--grn-bg);color:var(--grn);animation:livepulse 1.5s ease-in-out infinite;}
.gc-status.final{background:var(--n9);color:var(--n4);}
.gc-time{font-family:var(--fm);font-size:calc(10px * var(--fs));color:var(--n3);}
.gc-venue{font-family:var(--fh);font-size:calc(9px * var(--fs));color:var(--n4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;}
.flow-legal{font-family:var(--fm);font-size:calc(9px * var(--fs));color:var(--n3);text-align:center;line-height:1.5;}
.flow-legal-link{color:var(--n2);text-decoration:none;font-weight:600;}
.flow-legal-link:hover{text-decoration:underline;}
.flow-powered{font-family:var(--fh);font-size:calc(9px * var(--fs));color:var(--n4);text-align:center;letter-spacing:1px;padding-top:4px;border-top:1px solid var(--n6);}
.flow-powered strong{color:var(--n3);}

/* ══════════════════════════════════════
   LEGAL MODAL
   ══════════════════════════════════════ */
.modal-legal{max-width:560px;max-height:80vh;display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;}
.legal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border);flex-shrink:0;}
.legal-header h2{font-family:var(--fh);font-size:calc(15px * var(--fs));font-weight:700;letter-spacing:2px;color:var(--n8);margin:0;}
.modal-close-x{width:calc(28px * var(--fs));height:calc(28px * var(--fs));border-radius:50%;border:1.5px solid var(--border);background:transparent;color:var(--txt3);font-size:calc(12px * var(--fs));display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;flex-shrink:0;}
.modal-close-x:hover{border-color:var(--red);color:var(--red);}
.legal-body{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:6px;}
.legal-body::-webkit-scrollbar{width:3px;}
.legal-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
.legal-date{font-family:var(--fm);font-size:calc(9px * var(--fs));color:var(--txt3);margin-bottom:4px;}
.legal-section-title{font-family:var(--fh);font-size:calc(11px * var(--fs));font-weight:700;color:var(--txt);letter-spacing:.5px;margin-top:10px;margin-bottom:2px;}
.legal-para{font-family:var(--fm);font-size:calc(10px * var(--fs));color:var(--txt2);line-height:1.6;}
.modal-legal .modal-close{margin:0;border-radius:0 0 10px 10px;border-top:1px solid var(--border);padding:12px;font-size:calc(11px * var(--fs));}

/* ══════════════════════════════════════
   LAST GAME BANNER
   ══════════════════════════════════════ */
#last-game-banner{margin-bottom:6px;}
.last-game-card{display:flex;align-items:center;gap:8px;background:var(--n8);border:1.5px solid var(--n5);border-radius:7px;padding:8px 12px;margin-bottom:4px;}
.lg-icon{font-size:calc(16px * var(--fs));color:var(--n2);flex-shrink:0;}
.lg-label{flex:1;font-family:var(--fh);font-size:calc(11px * var(--fs));color:var(--n3);letter-spacing:.5px;}
.lg-label strong{color:var(--n1);font-weight:800;}
.lg-btn{padding:6px 14px;font-family:var(--fh);font-size:calc(11px * var(--fs));font-weight:700;letter-spacing:1px;background:var(--n5);color:var(--n0);border:1px solid var(--n4);border-radius:4px;cursor:pointer;flex-shrink:0;min-height:44px;transition:filter .12s;}
.lg-btn:hover{filter:brightness(1.15);}
.lg-btn:active{transform:scale(.97);}

/* ══════════════════════════════════════
   SETTINGS — divider + logout
   ══════════════════════════════════════ */
.settings-divider{border:none;border-top:1px solid var(--border);margin:12px 0 8px;}
.modal-logout-btn{display:block;width:100%;margin-top:6px;padding:9px 20px;font-family:var(--fh);font-size:calc(11px * var(--fs));font-weight:700;letter-spacing:1px;background:transparent;color:var(--red);border:1.5px solid var(--red);border-radius:4px;cursor:pointer;min-height:44px;transition:all .15s;}
.modal-logout-btn:hover{background:rgba(184,42,42,.1);}
.modal-logout-btn:active{transform:scale(.97);}
.settings-group{margin-bottom:4px;}
.settings-label{font-family:var(--fh);font-size:calc(10px * var(--fs));color:var(--txt3);letter-spacing:1px;text-transform:uppercase;display:block;margin-bottom:6px;}
/* ── Radar settings ─────────────────────────────────── */
.radar-hdr{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.radar-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;}
.radar-toggle input[type=checkbox]{width:16px;height:16px;accent-color:var(--n6);cursor:pointer;}
.radar-toggle-label{font-family:var(--fh);font-size:calc(10px * var(--fs));font-weight:700;letter-spacing:1px;color:var(--txt);}
.radar-state-lbl{font-family:var(--fm);font-size:calc(10px * var(--fs));color:var(--txt3);margin-left:auto;}
.radar-state-lbl.on{color:var(--n6);}
.radar-cfg{display:flex;gap:6px;align-items:center;opacity:.4;pointer-events:none;transition:opacity .15s;}
.radar-cfg.enabled{opacity:1;pointer-events:auto;}
.radar-select{flex:1;padding:5px 6px;border-radius:4px;border:1px solid var(--border);background:var(--n2);color:var(--txt);font-family:var(--fh);font-size:calc(10px * var(--fs));cursor:pointer;}
.radar-input{flex:1;padding:5px 6px;border-radius:4px;border:1px solid var(--border);background:var(--n2);color:var(--txt);font-family:var(--fm);font-size:calc(10px * var(--fs));}
.radar-connect-btn{padding:5px 12px;border-radius:4px;background:var(--n6);color:var(--n1);border:none;font-family:var(--fh);font-size:calc(10px * var(--fs));font-weight:700;letter-spacing:.5px;cursor:pointer;white-space:nowrap;transition:all .12s;}
.radar-connect-btn:hover{background:var(--n7);}

/* ══════════════════════════════════════
   BIP PANEL
   ══════════════════════════════════════ */
#bip-panel{display:none;position:fixed;top:74px;left:6px;right:6px;bottom:54px;z-index:800;background:rgba(28,31,38,0.97);border:1px solid var(--n6);border-radius:10px;backdrop-filter:blur(6px);flex-direction:column;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.55);}
#bip-panel.open{display:flex;}
.bip-header{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--n8);border-bottom:2px solid var(--n6);flex-shrink:0;}
.bip-title{flex:1;font-family:var(--fh);font-size:calc(14px * var(--fs));font-weight:700;color:var(--n1);letter-spacing:2px;}
.bip-step-lbl{font-size:calc(9px * var(--fs));color:var(--n3);font-weight:500;letter-spacing:1px;margin-left:8px;}
.bip-cancel{padding:6px 12px;font-family:var(--fh);font-size:calc(11px * var(--fs));font-weight:700;background:transparent;color:var(--red);border:1.5px solid var(--red);border-radius:4px;cursor:pointer;min-height:36px;transition:all .12s;flex-shrink:0;}
.bip-cancel:hover{background:rgba(184,42,42,.12);}
.bip-back{padding:6px 12px;font-family:var(--fh);font-size:calc(12px * var(--fs));font-weight:700;background:transparent;color:var(--n3);border:1.5px solid var(--n5);border-radius:4px;cursor:pointer;min-height:36px;transition:all .12s;flex-shrink:0;}
.bip-back:hover{border-color:var(--n3);color:var(--n1);}
.bip-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 14px;display:flex;flex-direction:column;gap:12px;}
.bip-body::-webkit-scrollbar{width:3px;}
.bip-body::-webkit-scrollbar-thumb{background:var(--n5);border-radius:2px;}
.bip-group{display:flex;flex-direction:column;gap:6px;}
.bip-group-lbl{font-family:var(--fh);font-size:calc(10px * var(--fs));font-weight:700;letter-spacing:2px;padding-bottom:3px;border-bottom:1px solid var(--n6);}
.bip-section-hdr{font-family:var(--fh);font-size:calc(9px * var(--fs));font-weight:700;letter-spacing:3px;color:var(--n4);padding:8px 0 4px;border-bottom:2px solid var(--n6);text-transform:uppercase;}
.bip-stat-btn{opacity:.92;}
.bip-grid{display:flex;flex-wrap:wrap;gap:6px;}
.bip-play-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:calc(60px * var(--fs));min-height:52px;padding:6px 10px;background:var(--n7);border:2px solid var(--n6);border-radius:6px;cursor:pointer;transition:all .12s;gap:2px;}
.bip-play-btn:hover{background:var(--n6);filter:brightness(1.1);}
.bip-play-btn:active{transform:scale(.96);}
.bip-code{font-family:var(--fh);font-size:calc(16px * var(--fs));font-weight:800;color:var(--n1);letter-spacing:.5px;line-height:1;}
.bip-sub{font-family:var(--fm);font-size:calc(8px * var(--fs));color:var(--n3);white-space:nowrap;}
.bip-body-s2{flex-direction:row;gap:12px;padding:10px 14px;overflow:hidden;}
.bip-s2-left{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0;}
.bip-s2-right{flex:0 0 160px;display:flex;flex-direction:column;gap:8px;}
.bip-s2-lbl{font-family:var(--fh);font-size:calc(9px * var(--fs));font-weight:700;color:var(--n4);letter-spacing:1.5px;flex-shrink:0;}
.bip-field-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;cursor:crosshair;border:1.5px solid var(--n6);border-radius:8px;overflow:hidden;background:var(--n9);}
#bip-fsvg,#bip-assist-svg{width:100%;height:100%;max-height:100%;display:block;cursor:crosshair;}
.bip-traj-grid{display:flex;flex-direction:column;gap:5px;flex:1;}
.bip-traj-btn{display:flex;flex-direction:row;align-items:center;gap:8px;padding:8px 10px;background:var(--n7);border:2px solid var(--n6);border-radius:5px;cursor:pointer;transition:all .12s;min-height:44px;}
.bip-traj-btn:hover{background:var(--n6);}
.bip-traj-btn:active{transform:scale(.97);}
.bip-traj-btn.act{background:var(--n6);}
.bip-traj-code{font-family:var(--fh);font-size:calc(14px * var(--fs));font-weight:800;color:var(--n1);min-width:28px;}
.bip-traj-name{font-family:var(--fm);font-size:calc(9px * var(--fs));color:var(--n3);}
.bip-confirm-btn{padding:12px;font-family:var(--fh);font-size:calc(14px * var(--fs));font-weight:700;letter-spacing:2px;background:var(--n5);color:var(--n0);border:1px solid var(--n4);border-radius:6px;cursor:pointer;min-height:48px;transition:all .12s;flex-shrink:0;}
.bip-confirm-btn:hover{filter:brightness(1.15);}
.bip-confirm-btn:active{transform:scale(.97);}
.bip-confirm-btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none;}
.bip-confirm-full{width:100%;margin-top:8px;}
.bip-body-s3{flex:1;display:flex;flex-direction:column;gap:8px;padding:10px 14px;overflow:hidden;}
.bip-s3-seq-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--n7);border:1.5px solid var(--n6);border-radius:6px;flex-shrink:0;}
.bip-s3-seq-lbl{font-family:var(--fh);font-size:calc(10px * var(--fs));font-weight:700;color:var(--n3);letter-spacing:1px;}
.bip-s3-seq-val{flex:1;font-family:var(--fh);font-size:calc(20px * var(--fs));font-weight:800;color:var(--n1);letter-spacing:3px;}
.bip-s3-clear{padding:5px 12px;font-family:var(--fh);font-size:calc(10px * var(--fs));font-weight:700;background:transparent;color:var(--red);border:1.5px solid var(--red);border-radius:4px;cursor:pointer;min-height:36px;transition:all .12s;flex-shrink:0;}
.bip-s3-clear:hover{background:rgba(184,42,42,.12);}
.bip-s3-hint{font-family:var(--fm);font-size:calc(9px * var(--fs));color:var(--n4);text-align:center;flex-shrink:0;}
.bip-field-wrap-s3{flex:1;min-height:0;cursor:pointer;}
#bip-assist-svg{cursor:pointer;}
.fielder-hit-area{cursor:pointer;}
.fielder-hit-area:hover circle:nth-child(2){filter:brightness(1.3);}

/* ══════════════════════════════════════
   BASE RUNNER CONTEXT PANEL
   ══════════════════════════════════════ */
#base-ctx-panel{display:none;position:fixed;top:74px;left:6px;right:6px;bottom:54px;z-index:800;background:rgba(28,31,38,0.97);border:1px solid var(--n6);border-radius:10px;backdrop-filter:blur(6px);flex-direction:column;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.55);}
#base-ctx-panel.open{display:flex;}
.bctx-hdr{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--n8);border-bottom:2px solid var(--n6);flex-shrink:0;}
.bctx-title{flex:1;font-family:var(--fh);font-size:calc(13px * var(--fs));font-weight:700;color:var(--n1);letter-spacing:1.5px;}
.bctx-num{color:#00ffaa;}
.bctx-cancel{padding:6px 12px;font-family:var(--fh);font-size:calc(11px * var(--fs));font-weight:700;background:transparent;color:var(--red);border:1.5px solid var(--red);border-radius:4px;cursor:pointer;min-height:36px;transition:all .12s;flex-shrink:0;}
.bctx-cancel:hover{background:rgba(184,42,42,.12);}
.bctx-back{padding:6px 12px;font-family:var(--fh);font-size:calc(14px * var(--fs));font-weight:700;background:transparent;color:var(--n3);border:1.5px solid var(--n5);border-radius:4px;cursor:pointer;min-height:36px;transition:all .12s;flex-shrink:0;}
.bctx-back:hover{border-color:var(--n3);color:var(--n1);}
.bctx-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 14px;display:flex;flex-direction:column;gap:10px;}
.bctx-body::-webkit-scrollbar{width:3px;}
.bctx-body::-webkit-scrollbar-thumb{background:var(--n5);border-radius:2px;}
.bctx-sec-lbl{font-family:var(--fh);font-size:calc(10px * var(--fs));font-weight:700;letter-spacing:2px;padding-bottom:4px;border-bottom:1.5px solid var(--n6);}
.bctx-lbl-out{color:#e06060;}
.bctx-lbl-reach{color:#00ccaa;}
.bctx-grid{display:flex;flex-wrap:wrap;gap:7px;}
.bctx-btn{min-width:calc(52px * var(--fs));min-height:44px;padding:6px 10px;font-family:var(--fh);font-size:calc(15px * var(--fs));font-weight:800;border-radius:6px;cursor:pointer;transition:all .12s;letter-spacing:.5px;}
.bctx-btn:active{transform:scale(.94);}
.bctx-btn-out{background:rgba(184,42,42,.12);color:#e06060;border:1.5px solid rgba(184,42,42,.4);}
.bctx-btn-out:hover{background:rgba(184,42,42,.22);border-color:#e06060;}
.bctx-btn-reach{background:rgba(0,204,170,.1);color:#00d4aa;border:1.5px solid rgba(0,204,170,.35);}
.bctx-btn-reach:hover{background:rgba(0,204,170,.2);border-color:#00d4aa;}
.bctx-body-def{flex:1;display:flex;flex-direction:column;gap:8px;padding:10px 14px;overflow:hidden;}
.bctx-field-wrap{flex:1;min-height:0;cursor:pointer;}
#bctx-assist-svg{width:100%;height:100%;max-height:100%;display:block;cursor:pointer;}
/* Defensive step */
.bctx-seq-row{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--n7);border:1.5px solid var(--n6);border-radius:6px;flex-shrink:0;}
.bctx-seq-lbl{font-family:var(--fh);font-size:calc(10px * var(--fs));font-weight:700;color:var(--n3);letter-spacing:1px;flex-shrink:0;}
.bctx-seq-val{flex:1;font-family:var(--fh);font-size:calc(20px * var(--fs));font-weight:800;color:var(--n1);letter-spacing:3px;}
.bctx-clr{padding:5px 12px;font-family:var(--fh);font-size:calc(10px * var(--fs));font-weight:700;background:transparent;color:var(--red);border:1.5px solid var(--red);border-radius:4px;cursor:pointer;min-height:32px;transition:all .12s;flex-shrink:0;}
.bctx-clr:hover{background:rgba(184,42,42,.12);}
.bctx-def-hint{font-family:var(--fm);font-size:calc(9px * var(--fs));color:var(--n4);text-align:center;flex-shrink:0;}
.bctx-confirm{padding:12px;width:100%;font-family:var(--fh);font-size:calc(14px * var(--fs));font-weight:700;letter-spacing:2px;background:var(--n5);color:var(--n0);border:1px solid var(--n4);border-radius:6px;cursor:pointer;min-height:48px;transition:all .12s;flex-shrink:0;margin-top:auto;}
.bctx-confirm:hover{filter:brightness(1.15);}
.bctx-confirm:active{transform:scale(.97);}
.bctx-confirm:disabled{opacity:.35;cursor:not-allowed;pointer-events:none;}