:root{
  --blue:#00B4BC;--blue-hi:#49e3e9;--blue-lo:#007F85;
  --blue-soft:rgba(0,180,188,0.09);--blue-soft2:rgba(0,180,188,0.16);
  --pink:#00C9A0;--pink-lo:#009E7D;
  --pink-soft:rgba(0,201,160,0.09);--pink-soft2:rgba(0,201,160,0.16);
  --ink:#0A0A12;--ink2:#1E1E2E;--ink3:#4A4A60;--ink4:#7A7A94;
  --bg:#EFF3F4;--bg2:#E0E8EA;--surface:#FFFFFF;--surface2:#F3F8F9;
  --border:rgba(0,0,0,0.09);--border2:rgba(0,0,0,0.16);
  --shadow-sm:0 1px 4px rgba(0,0,0,0.07);--shadow-md:0 3px 14px rgba(0,0,0,0.10);
  --green-stat:#007A6A;--blue-border:rgba(73,227,233,0.2);
  --header-height: calc(62px + max(env(safe-area-inset-top), 20px));}
body.dark{--blue:#49e3e9;--blue-hi:#6FECF0;--blue-lo:#2DC8CE;--blue-soft:rgba(73,227,233,0.12);--blue-soft2:rgba(73,227,233,0.20);--pink:#1ffccf;--pink-lo:#10DDAF;--pink-soft:rgba(31,252,207,0.10);--pink-soft2:rgba(31,252,207,0.20);--ink:#F0F2F8;--ink2:#D8DCF0;--ink3:#A8AECE;--ink4:#848BB0;--bg:#080C10;--bg2:#0F1518;--surface:#111820;--surface2:#182028;--border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.12);--shadow-sm:0 1px 4px rgba(0,0,0,0.4);--shadow-md:0 3px 14px rgba(0,0,0,0.5);--green-stat:#1ffccf;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:"DM Sans",sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;-webkit-tap-highlight-color:transparent;}

/* ── Empty-state shell ─────────────────────────────────────────────────
   Every screen's "no data yet" placeholder renders through _noDataHTML()
   and lands inside .empty-state-host / .empty-state-card so positioning,
   max-width, padding, and visual weight stay identical across lineup,
   pitching, speed, bunt, x-factor, and roll call. Don't wrap call sites
   in extra padding — the host handles all of it. */
.empty-state-host{display:flex;align-items:flex-start;justify-content:center;padding:32px 16px 24px;width:100%;box-sizing:border-box;}
.empty-state-card{background:var(--surface);border:1.5px solid var(--border);border-radius:20px;padding:32px 20px 28px;text-align:center;width:100%;max-width:380px;}
.empty-state-icon{font-size:48px;line-height:1;margin-bottom:14px;animation:thinkingDot 2.4s ease-in-out infinite;}
.empty-state-title{font-family:"Bebas Neue",sans-serif;font-size:22px;letter-spacing:0.06em;color:var(--ink);margin-bottom:8px;}
.empty-state-sub{font-size:13px;color:var(--ink4);max-width:240px;margin:0 auto 22px;line-height:1.6;}




body::before{content:"";position:fixed;inset:0;background-image:linear-gradient(rgba(0,180,188,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,180,188,0.04) 1px,transparent 1px);background-size:36px 36px;pointer-events:none;z-index:0;}
body.dark::before{background-image:linear-gradient(rgba(73,227,233,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(73,227,233,0.06) 1px,transparent 1px);}
/* ── Global App Header ─────────────────────────────────────────────────── */
.app-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  min-height:var(--header-height);
  background:#080C10;
  display:flex;align-items:center;
  padding:0;gap:0;
}
.app-header-right{position:absolute;right:0;top:max(env(safe-area-inset-top),20px);bottom:0;padding-right:16px;padding-top:6px;display:flex;align-items:flex-start;}

.page{position:relative;z-index:1;max-width:580px;margin:0 auto;padding:var(--header-height) 1rem 5rem;}
/* ── HOME SCREEN ── */
#homeScreen{display:none;}
.home-greeting{font-family:"Bebas Neue",sans-serif;font-size:28px;letter-spacing:0.06em;color:var(--ink);margin-bottom:6px;}
.home-sub{font-size:13px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink4);margin-bottom:28px;}
.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px;}
.home-tile{background:var(--surface);border:1.5px solid var(--border2);border-radius:18px;padding:24px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;cursor:pointer;transition:all 0.15s;-webkit-tap-highlight-color:transparent;box-shadow:var(--shadow-sm);}
.home-tile:hover,.home-tile:active{border-color:var(--blue);background:var(--blue-soft);transform:scale(0.98);}
.home-tile-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;}
.home-tile-label{font-family:"Bebas Neue",sans-serif;font-size:22px;letter-spacing:0.06em;color:var(--ink);line-height:1;}
.home-tile-sub{font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink4);margin-top:-6px;}
.home-tile.settings .home-tile-icon{background:rgba(168,174,206,0.12);}

/* ── Support / FAQ rows ─────────────────────────────────────────── */
.faq-item{
  padding:14px 16px;
  border-bottom:1px solid var(--border);
}
.faq-item:last-child{border-bottom:none;}
.faq-q{
  font-family:'DM Sans',sans-serif;
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  line-height:1.45;
  margin-bottom:6px;
}
.faq-a{
  font-family:'DM Sans',sans-serif;
  font-size:13px;
  font-weight:400;
  color:var(--ink4);
  line-height:1.6;
}
.faq-a strong{color:var(--ink);font-weight:600;}

/* ── Hamburger nav popup (right-anchored dropdown menu) ────────── */
.nav-popup{
  position:fixed;
  top:calc(var(--header-height) - 6px);
  right:12px;
  z-index:1500;
  min-width:240px;
  background:var(--surface);
  border:1.5px solid rgba(73,227,233,0.25);
  border-radius:14px;
  box-shadow:0 18px 48px rgba(0,0,0,0.45), 0 0 0 1px rgba(73,227,233,0.05);
  padding:8px 0;
  opacity:0;
  pointer-events:none;
  transform:translateY(-8px) scale(0.96);
  transform-origin:top right;
  transition:opacity 0.16s ease, transform 0.16s ease;
  -webkit-tap-highlight-color:transparent;
}
.nav-popup.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);}
.nav-popup-item{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;
  text-decoration:none;
  color:var(--ink);
  font-family:'Bebas Neue',sans-serif;
  font-size:17px;letter-spacing:0.06em;
  cursor:pointer;
  transition:background 0.12s;
}
.nav-popup-item svg{flex-shrink:0;color:rgba(73,227,233,0.85);}
.nav-popup-item:hover{background:rgba(73,227,233,0.06);}
.nav-popup-item:active{background:rgba(73,227,233,0.12);}
.nav-popup-item--danger{color:#FF4757;}
.nav-popup-item--danger svg{color:#FF4757;}
.nav-popup-item--danger:hover{background:rgba(255,71,87,0.07);}
.nav-popup-divider{height:1px;background:var(--border);margin:6px 14px;}

/* ── Home header (greeting block + action buttons) ──────────────── */
.home-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px;}
.home-header-actions{flex-shrink:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.home-action-btn{
  flex-shrink:0;
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;
  border-radius:999px;
  background:transparent;
  font-family:'Bebas Neue',sans-serif;
  font-size:13px;letter-spacing:0.12em;text-transform:uppercase;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color 0.15s, background 0.15s, border-color 0.15s;
  white-space:nowrap;
}
.home-action-btn svg{flex-shrink:0;}

/* Upload Stats — aqua text + tint with a dim aqua border so the
   button reads as branded without screaming for attention. */
.home-action-btn.import{
  border:1.5px solid rgba(73,227,233,0.22);
  color:#49e3e9;
  background:rgba(73,227,233,0.06);
}
.home-action-btn.import:hover{background:rgba(73,227,233,0.12);border-color:rgba(73,227,233,0.45);}
.home-action-btn.import:active{background:rgba(73,227,233,0.18);}

/* Settings — neutral secondary, brighter white accent so it still pops */
.home-action-btn.settings{
  border:1.5px solid rgba(255,255,255,0.32);
  color:rgba(255,255,255,0.95);
}
.home-action-btn.settings:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.55);color:#fff;}
.home-action-btn.settings:active{background:rgba(255,255,255,0.14);}

/* ── Coming-soon tile state (used by Roll Call until Phase 2 lands) ── */
.home-tile.coming-soon{position:relative;opacity:0.72;}
.home-tile.coming-soon:hover,.home-tile.coming-soon:active{
  border-color:var(--border2);
  background:var(--surface);
  transform:scale(0.99);
}
.home-tile-badge{
  position:absolute;top:10px;right:10px;
  font-family:'Bebas Neue',sans-serif;font-size:10px;letter-spacing:0.16em;
  background:rgba(52,211,153,0.16);color:#34D399;
  border:1px solid rgba(52,211,153,0.32);
  padding:3px 8px;border-radius:6px;
  text-transform:uppercase;
}

/* Home button in nav */
.nav-home-btn{flex-shrink:0;width:56px;height:56px;margin-top:-18px;border-radius:50%;background:#080C10;border:2.5px solid #49e3e9;box-shadow:0 0 0 3px var(--surface),0 0 6px rgba(255,255,255,0.9),0 0 14px rgba(255,255,255,0.4),0 0 28px rgba(73,227,233,0.5);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.15s;position:relative;z-index:2;}
.nav-home-btn:active{transform:scale(0.93);}
.nav-home-btn.active{background:#49e3e9;box-shadow:0 0 0 3px var(--surface),0 0 10px rgba(255,255,255,0.7),0 0 30px rgba(73,227,233,0.8);}
.nav-home-btn.active svg path{fill:#080C10;}
/* Settings page */
#settingsScreen{display:none;}
.settings-header{font-family:"Bebas Neue",sans-serif;font-size:26px;letter-spacing:0.06em;color:var(--ink);margin-bottom:20px;display:flex;align-items:center;gap:10px;}
.settings-section{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:16px;}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border);gap:12px;}
.settings-row:last-child{border-bottom:none;}
.settings-row-label{font-size:15px;font-weight:600;color:var(--ink);}
.settings-row-sub{font-size:12px;color:var(--ink4);margin-top:2px;}
.toggle-switch{width:48px;height:28px;border-radius:14px;background:var(--bg2);border:1.5px solid var(--border2);position:relative;cursor:pointer;transition:background 0.2s,border-color 0.2s;flex-shrink:0;}
.toggle-switch.on{background:var(--blue);border-color:var(--blue);}
.toggle-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform 0.2s;box-shadow:0 1px 4px rgba(0,0,0,0.2);}
.toggle-switch.on .toggle-knob{transform:translateX(20px);}

.dark-toggle{margin-left:auto;background:none;border:1.5px solid var(--border2);border-radius:8px;padding:7px 9px;cursor:pointer;line-height:0;color:var(--ink3);transition:border-color 0.2s,color 0.2s;display:flex;align-items:center;flex-shrink:0;}
.dark-toggle:hover{border-color:var(--blue);color:var(--blue);}
.dark-toggle .toggle-label{font-family:"DM Sans",sans-serif;font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;}
.logo-wrap{width:46px;height:46px;border-radius:12px;flex-shrink:0;background:#000;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.logo-m{font-family:Georgia,"Times New Roman",serif;font-size:32px;font-weight:700;font-style:italic;color:#000;line-height:1;user-select:none;}
body.dark .logo-m{color:#111;}




header{display:flex;align-items:center;padding:1rem 0 0.9rem;border-bottom:2px solid var(--blue);margin-bottom:1.1rem;gap:12px;}
.brand-text h1{font-family:"Bebas Neue",sans-serif;font-size:36px;letter-spacing:0.05em;color:var(--ink);line-height:1;}
.brand-text h1 span{color:var(--pink);}
.brand-text p{font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink4);margin-top:2px;}
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:10px;box-shadow:var(--shadow-sm);}
.toolbar-group{display:flex;align-items:center;gap:6px;}
.toolbar-divider{width:1px;height:24px;background:var(--border2);flex-shrink:0;}
.btn{font-family:"DM Sans",sans-serif;font-size:14px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;padding:8px 15px;border-radius:7px;border:1.5px solid transparent;cursor:pointer;transition:all 0.13s ease;white-space:nowrap;display:flex;align-items:center;gap:5px;}
.btn-ghost{background:var(--surface2);border-color:var(--border2);color:var(--ink3);}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);}
.btn-pink{background:var(--pink);color:#fff;border-color:var(--pink);}
.btn-pink:hover{background:var(--pink-lo);}
.btn-reset{background:var(--pink);color:#000;border-color:var(--pink);display:none;}
.btn-reset:hover{background:var(--pink-lo);}
.size-label{font-size:14px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink4);white-space:nowrap;}
/* position:relative so child .size-btn offsetLeft is measured relative
   to THIS scroll container — required for the scroll-active-into-view
   math in initSizeBtns / initBullpenBtns to compute correctly. */
.size-btns{position:relative;display:flex;gap:3px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;max-width:172px;scroll-behavior:smooth;cursor:grab;}
.size-btns::-webkit-scrollbar{display:none;}
.size-btns.dragging{cursor:grabbing;scroll-behavior:auto;}
.size-btn{font-family:"Bebas Neue",sans-serif;font-size:20px;width:38px;height:35px;flex:0 0 38px;border-radius:6px;border:1.5px solid var(--border2);background:var(--surface2);color:var(--ink3);cursor:pointer;transition:background 0.12s,border-color 0.12s,color 0.12s;display:flex;align-items:center;justify-content:center;}
.size-btn:hover{border-color:var(--blue);color:var(--blue);}
.size-btn.active{background:var(--blue);border-color:var(--blue);color:#000;font-weight:800;}
input[type="file"]{display:none;}
.stats-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:10px;box-shadow:var(--shadow-sm);}
.stat-card{padding:11px 6px;text-align:center;border-right:1px solid var(--border);position:relative;}
.stat-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--blue);}

.stat-card:last-child{border-right:none;}
.stat-val{font-family:"Bebas Neue",sans-serif;font-size:36px;color:var(--ink);display:block;line-height:1;}

.stat-lbl{font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink3);display:block;margin-top:6px;}
#importZone{background:var(--surface);border:2px dashed rgba(26,79,204,0.22);border-radius:12px;padding:2rem 1.25rem;text-align:center;box-shadow:var(--shadow-sm);transition:border-color 0.2s,background 0.2s;}
#importZone.drag-active{border-color:var(--pink);background:var(--pink-soft);}
.import-icon{width:56px;height:56px;background:var(--blue-soft2);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 0.9rem;font-size:24px;}
#importZone h2{font-family:"Bebas Neue",sans-serif;font-size:24px;letter-spacing:0.06em;color:var(--blue);margin-bottom:5px;}
#importZone p{font-size:13px;color:var(--ink3);margin-bottom:1rem;line-height:1.6;max-width:340px;margin-left:auto;margin-right:auto;}
.csv-note{font-family:"DM Mono",monospace;font-size:11px;background:var(--surface2);border:1px solid var(--border2);border-radius:7px;padding:9px 14px;display:inline-block;text-align:left;color:var(--ink3);margin-bottom:1rem;line-height:1.9;}
.csv-note strong{color:var(--blue);}
.import-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
#mainContent{display:block;max-width:580px;margin:0 auto;}
.lineup-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-md);}
.lineup-header{background:var(--blue);padding:11px 16px;display:flex;align-items:center;justify-content:space-between;}
.lineup-header h3{font-family:"Bebas Neue",sans-serif;font-size:22px;letter-spacing:0.1em;color:#000;}
.lineup-header .hd-left{display:flex;align-items:baseline;gap:10px;min-width:0;}
.lineup-header .hd-right{display:flex;align-items:center;gap:12px;}
.lineup-header .hd-count{font-family:"DM Mono",monospace;font-size:14px;color:rgba(0,0,0,0.7);font-weight:600;}
.clear-link{font-size:11px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:rgba(0,0,0,0.55);background:none;border:none;cursor:pointer;text-decoration:underline;font-family:"DM Sans",sans-serif;padding:0;}
.clear-link:hover{color:#fff;}
/* Reset — refined navy pill shown in the (aqua) Batting Order header
   when the coach has made manual changes. Solid navy reads as a crisp,
   intentional action against the bright header; the circular-refresh
   icon reinforces "revert to recommendation". */
.reset-link{display:inline-flex;align-items:center;gap:6px;font-family:"Bebas Neue",sans-serif;font-size:15px;letter-spacing:0.08em;color:#fff;background:var(--blue-lo,#007F85);border:none;border-radius:8px;padding:5px 13px;cursor:pointer;-webkit-tap-highlight-color:transparent;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,0.22);transition:background 0.12s,transform 0.1s;line-height:1;}
.reset-link svg{flex-shrink:0;opacity:0.9;}
.reset-link:hover{background:#006A6F;}
.reset-link:active{transform:scale(0.95);}
.lineup-slot{display:flex;align-items:center;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.15s ease;position:relative;user-select:none;-webkit-user-select:none;}
.lineup-slot:last-of-type{border-bottom:none;}
.lineup-slot:active:not(.dragging){background:var(--blue-soft);}
.lineup-slot.dragging{opacity:0.22;transform:scale(0.97);}
.lineup-slot.drag-target{background:rgba(26,79,204,0.08);outline:2px solid var(--blue);outline-offset:-2px;}
@keyframes swapFlash{0%{background:rgba(26,79,204,0.18);}100%{background:transparent;}}
.lineup-slot.swapped{animation:swapFlash 0.45s ease forwards;}
.slot-num{font-family:"Bebas Neue",sans-serif;font-size:30px;line-height:1;color:var(--blue);width:48px;text-align:center;flex-shrink:0;padding:10px 0 10px;background:var(--surface2);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;}
.slot-num.overridden{cursor:pointer;}
.slot-was{display:inline-flex;align-items:center;justify-content:center;gap:2px;margin-top:0;width:38px;height:20px;border-radius:6px;font-size:11px;font-weight:400;font-family:"DM Mono",monospace;white-space:nowrap;cursor:pointer;}
.slot-was-good{background:rgba(0,255,126,0.2);border:1.5px solid #00C45E;color:#00FF7E;}
.slot-was-neutral{background:rgba(168,174,206,0.18);border:1.5px solid rgba(168,174,206,0.5);color:#A8AECE;}
.slot-was-bad{background:rgba(255,60,60,0.2);border:1.5px solid #FF3C3C;color:#FF7070;}
.slot-num.overridden{color:var(--pink);}
.slot-content{flex:1;display:flex;align-items:center;gap:10px;padding:12px 14px;min-width:0;}
.slot-text{flex:1;min-width:0;}
.slot-name{font-size:21px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.slot-fire{font-size:15px;vertical-align:middle;}
.slot-jersey{font-weight:400;color:var(--ink4);font-size:14px;margin-left:5px;}
.slot-stats{font-family:"DM Mono",monospace;font-size:14px;color:var(--ink3);margin-top:4px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.slot-avg{font-size:14px;font-weight:600;color:var(--pink);font-family:"DM Mono",monospace;}
.dot{color:var(--border2);}
body.dark .dot{color:rgba(255,255,255,0.22);}
.undo-badge{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:700;color:var(--blue);background:var(--blue-soft2);border:1px solid rgba(73,227,233,0.45);border-radius:20px;padding:3px 9px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background 0.12s;}
.undo-badge:hover{background:var(--blue-soft2);}
.slot-rec{font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:3px 8px;border-radius:20px;white-space:nowrap;flex-shrink:0;font-family:"DM Sans",sans-serif;border:1px solid transparent;}
.slot-handle{color:var(--ink4);font-size:18px;cursor:grab;padding:0 4px;flex-shrink:0;}
.streak-btn{background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:2px;padding:4px 6px;border-radius:8px;flex-shrink:0;font-size:16px;line-height:1;transition:background 0.12s;-webkit-tap-highlight-color:transparent;}
.streak-btn:hover{background:var(--bg2);}
.streak-count{font-size:11px;font-weight:800;color:var(--ink);font-family:"DM Mono",monospace;line-height:1;}
.streak-btn.active .streak-count{color:#B45309;}
.slot-empty{flex:1;padding:14px 16px;font-size:16px;color:var(--ink4);font-style:italic;}
.bench-section{border-top:2px solid var(--blue-soft2);background:var(--surface2);}
.bench-section.bench-drop-active{background:rgba(26,79,204,0.06);outline:2px dashed var(--blue);outline-offset:-2px;border-radius:0 0 12px 12px;}
.bench-header{padding:10px 14px 7px;display:flex;align-items:center;justify-content:space-between;}
.bench-label{font-size:12px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink4);}
.bench-hint{font-size:12px;color:var(--ink4);}
.bench-row{display:flex;align-items:center;padding:12px 14px 12px 0;border-top:1px solid var(--border);cursor:pointer;transition:background 0.12s;}
.bench-row:hover{background:var(--blue-soft);}
.bench-num{font-family:"Bebas Neue",sans-serif;font-size:22px;color:var(--ink4);width:46px;text-align:center;flex-shrink:0;}
.bench-info{flex:1;min-width:0;}
.bench-name{font-size:18px;font-weight:600;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bench-stats{font-family:"DM Mono",monospace;font-size:13px;color:var(--ink4);margin-top:3px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.bench-avg{font-size:13px;font-weight:600;color:var(--pink);font-family:"DM Mono",monospace;}
.bench-rec{font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:3px 10px;border-radius:20px;white-space:nowrap;font-family:"DM Sans",sans-serif;border:1px solid transparent;margin-left:8px;}
.bench-add{font-size:22px;color:var(--blue);flex-shrink:0;padding:0 6px;font-weight:300;line-height:1;}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.7);display:flex;align-items:flex-end;justify-content:center;z-index:1100;padding:0;opacity:0;pointer-events:none;transition:opacity 0.22s ease;}
.modal-backdrop.open{opacity:1;pointer-events:all;}
.modal{background:var(--surface);border-radius:24px 24px 0 0;border:3.5px solid rgba(73,227,233,0.65);border-bottom:none;padding:0;width:100%;max-width:100%;max-height:92vh;height:auto;overflow:hidden;display:flex;flex-direction:column;box-shadow:inset 0 0 0 1px rgba(73,227,233,0.1),0 0 40px rgba(73,227,233,0.15);transform:translateY(100%);transition:transform 0.28s cubic-bezier(0.32,0.72,0,1);opacity:1;}
.modal-header{position:sticky;top:0;z-index:10;background:var(--surface);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding-right:8px;}
body.modal-open{overflow:hidden;position:fixed;width:100%;left:0;right:0;}
.modal-backdrop.open .modal{transform:translateY(0);}
@keyframes slideUp{from{transform:translateY(100%);opacity:0;}to{transform:translateY(0);opacity:1;}}
@keyframes slideDown{from{transform:translateY(0);opacity:1;}to{transform:translateY(100%);opacity:0;}}
.modal.closing{animation:slideDown 0.22s cubic-bezier(0.32,0.72,0,1) forwards;}
.modal-back{display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:22px 18px 18px;color:var(--blue);font-size:17px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;cursor:pointer;background:none;border:none;font-family:"DM Sans",sans-serif;-webkit-tap-highlight-color:transparent;}
.modal-back svg{flex-shrink:0;width:28px;height:28px;}
/* 3-dot menu lives on the right side of the modal header. The dropdown
   anchors below the kebab and is closed by default; togglePlayerKebab()
   in ui.js flips its .open state and document-level click handler closes
   it on outside-click. */
.modal-kebab{position:relative;display:flex;align-items:center;justify-content:center;padding:14px 14px;background:transparent;border:none;cursor:pointer;color:var(--ink2);border-radius:10px;-webkit-tap-highlight-color:transparent;transition:background 0.15s,color 0.15s;}
.modal-kebab:hover{background:var(--blue-soft);color:var(--blue);}
.modal-kebab svg{width:20px;height:20px;}
.modal-kebab-menu{display:none;position:absolute;top:58px;right:10px;background:var(--surface);border:1.5px solid var(--border);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,0.18);padding:6px;z-index:30;min-width:200px;}
.modal-kebab-menu.open{display:block;animation:slideUp 0.16s cubic-bezier(0.32,0.72,0,1);}
.modal-kebab-item{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;background:transparent;border:none;border-radius:10px;font-family:"DM Sans",sans-serif;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent;transition:background 0.12s;}
.modal-kebab-item:hover{background:var(--blue-soft);}
.modal-kebab-item--danger{color:#E03A4A;}
.modal-kebab-item--danger:hover{background:rgba(224,58,74,0.08);}

/* In-modal "Remove from Team?" confirm view. Lives as a sibling to
   .modal-body/.modal-footer; when shown, body+footer are hidden via
   JS so the SAME modal flips between detail-view and confirm-view
   — no second modal opens, the back button still bails out. */
.modal-confirm-view{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px 28px 28px;animation:slideUp 0.22s cubic-bezier(0.32,0.72,0,1);}
.modal-confirm-icon{width:64px;height:64px;border-radius:50%;background:rgba(224,58,74,0.10);color:#E03A4A;display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.modal-confirm-icon svg{width:30px;height:30px;}
.modal-confirm-title{font-family:"Bebas Neue",sans-serif;font-size:26px;letter-spacing:0.06em;color:var(--ink);margin-bottom:10px;}
.modal-confirm-sub{font-size:14px;color:var(--ink3);line-height:1.6;max-width:320px;margin:0 auto 28px;}
.modal-confirm-actions{display:flex;gap:10px;width:100%;max-width:320px;}
.modal-confirm-btn{flex:1;padding:14px 18px;border-radius:12px;font-family:"Bebas Neue",sans-serif;font-size:18px;letter-spacing:0.06em;cursor:pointer;border:none;-webkit-tap-highlight-color:transparent;transition:opacity 0.12s,transform 0.1s;}
.modal-confirm-btn:active{transform:scale(0.97);}
.modal-confirm-btn--cancel{background:transparent;border:1.5px solid var(--border2);color:var(--ink2);}
.modal-confirm-btn--cancel:hover{background:var(--surface2);}
.modal-confirm-btn--remove{background:#E03A4A;color:#fff;}
.modal-confirm-btn--remove:hover{background:#C42E3D;}
.modal-confirm-btn:disabled{opacity:0.6;cursor:wait;}
/* overflow-x:hidden is explicit — when only overflow-y is set, the browser
   defaults overflow-x to auto, which pops a horizontal scrollbar for the
   single frame the verdict reveal animation pushes a child a sub-pixel
   wider than the body. Explicit hidden kills that flash. */
.modal-body{padding:2rem 2rem 1rem;flex:1;overflow-y:auto;overflow-x:hidden;}
.modal-footer{padding:16px 20px calc(28px + env(safe-area-inset-bottom,0px));display:flex;gap:12px;flex-shrink:0;}
.modal-cancel-btn{flex:1;padding:16px;border-radius:14px;background:transparent;border:2px solid rgba(73,227,233,0.5);font-family:"Bebas Neue",sans-serif;font-size:22px;letter-spacing:0.06em;color:var(--blue);cursor:pointer;}
.modal-undo-btn{flex:1;padding:16px;border-radius:14px;background:rgba(255,45,138,0.15);border:1.5px solid #FF2D8A;font-family:"Bebas Neue",sans-serif;font-size:20px;letter-spacing:0.04em;color:#FF2D8A;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;}
/* modal-top stacks chip strip ABOVE the player name — chips right-aligned,
   name fills width below. Chips fly in from the right; name flies in from
   the left. The two opposite-direction entrances make the modal open feel
   alive without the user being able to put their finger on what moved. */
.modal-top{display:flex;flex-direction:column;align-items:stretch;margin-bottom:1.1rem;gap:8px;padding:0;}
.modal-chip-strip{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;justify-content:flex-end;overflow:hidden;}
.modal-chip-strip .modal-chip{
  /* Each chip flies in from the right, staggered. animation-delay set inline
     by openModal so we can space the three chips out with one shared keyframe. */
  animation:chipFlyInRight 220ms cubic-bezier(0.2,0.65,0.3,1.05) both;
}
.modal-player-name{
  animation:nameFlyInLeft 220ms cubic-bezier(0.2,0.65,0.3,1.05) both;
  animation-delay:40ms;
}
@keyframes chipFlyInRight{
  from{opacity:0;transform:translateX(36px);}
  to  {opacity:1;transform:translateX(0);}
}
@keyframes nameFlyInLeft{
  from{opacity:0;transform:translateX(-32px);}
  to  {opacity:1;transform:translateX(0);}
}
/* Compact chip — used in the strip under the player name. Smaller font /
   tighter padding so all three (lineup + 2 X Factor) fit one row on phones
   as narrow as ~320px. */
.modal-chip-strip .modal-chip{
  font-size:10px;letter-spacing:0.06em;
  padding:3px 8px;border-radius:14px;
  flex-shrink:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* X Factor chip variant — paints its archetype color via inline style. */
.modal-chip--xf{border:1px solid currentColor;}
.modal-player-name{font-size:25px;font-weight:600;color:var(--ink);line-height:1.2;}
.modal-chip{font-size:12px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;padding:4px 11px;border-radius:20px;white-space:nowrap;flex-shrink:0;margin-top:3px;font-family:"DM Sans",sans-serif;border:1px solid transparent;}

.modal-stats-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px;flex-direction:column;}
.modal-stats-hero{display:flex;gap:10px;}
.modal-stats-sub{display:flex;gap:8px;}
/* Stat tiles get a visible aqua stroke so they read as containers, not
   floating numbers. Hero variant gets a bolder 2px stroke + slightly stronger
   inner glow to anchor the headline AVG and Hits values. */
.modal-stat{
  flex:1;min-width:52px;
  background:var(--surface2);
  border:1.5px solid rgba(73,227,233,0.22);
  border-radius:10px;
  padding:8px 6px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  box-shadow:inset 0 0 0 1px rgba(73,227,233,0.04);
}
.modal-stat--hero{
  padding:14px 8px;border-radius:14px;gap:4px;
  border-width:2px;
  border-color:rgba(73,227,233,0.32);
  box-shadow:inset 0 0 0 1px rgba(73,227,233,0.08), 0 0 18px rgba(73,227,233,0.06);
}
.modal-stat--hero .modal-stat-val{font-size:36px;}
.modal-stat--hero .modal-stat-lbl{font-size:11px;}
.modal-stat-val{font-family:'Bebas Neue',sans-serif;font-size:22px;line-height:1;color:var(--ink1);font-variant-numeric:tabular-nums;}
.modal-stat-lbl{font-size:10px;font-weight:600;color:var(--ink4);letter-spacing:0.04em;text-transform:uppercase;}
body:not(.dark) .modal-stat{border-color:rgba(26,79,204,0.18);}
body:not(.dark) .modal-stat--hero{border-color:rgba(26,79,204,0.28);}
/* .modal-divider was the line below the stats row; removed for a cleaner
   look. Keeping the rule with no visual so any stale references render
   nothing rather than re-introducing the border. */
.modal-divider{display:none;}
.modal-section-label{font-size:12px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink4);margin-bottom:8px;display:block;}
.modal-reasoning-text{font-size:18px;color:var(--ink2);line-height:1.72;}
.modal-verdict{margin-top:1.2rem;padding:14px 16px;border-radius:11px;font-size:18px;line-height:1.68;position:relative;}
.modal-verdict.agree{background:rgba(15,138,110,0.08);border:1px solid rgba(15,138,110,0.22);color:#065F46;}
.modal-verdict.neutral{background:var(--bg2);border:1px solid var(--border2);color:var(--ink3);}
.modal-verdict.disagree{background:rgba(200,30,30,0.07);border:1px solid rgba(200,30,30,0.25);color:#B91C1C;}
body.dark .modal-verdict.agree{background:rgba(52,211,153,0.12);border-color:rgba(52,211,153,0.35);color:#4ECCA3;}
body.dark .modal-verdict.neutral{background:rgba(168,174,206,0.08);border-color:rgba(168,174,206,0.2);color:#A8AECE;}
body.dark .modal-verdict.disagree{background:rgba(255,79,160,0.12);border-color:rgba(255,79,160,0.35);color:#FF7EC0;}
.verdict-label{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:6px;display:block;}
#toast{position:fixed;top:0;left:0;right:0;transform:translateY(-100%);background:#0D1F1E;color:#1ffccf;font-size:16px;font-weight:700;letter-spacing:0.04em;padding:18px 24px;padding-top:max(18px,env(safe-area-inset-top,0px));text-align:center;opacity:0;pointer-events:none;transition:opacity 0.22s,transform 0.22s;z-index:9999;white-space:normal;box-shadow:0 4px 24px rgba(0,0,0,0.5),0 0 0 1px rgba(31,252,207,0.2);border-bottom:2px solid rgba(31,252,207,0.35);}
#toast.show{opacity:1;transform:translateY(0);}
.btn-blue{background:var(--blue);color:#fff;border-color:var(--blue);}
.btn-blue:hover{background:var(--blue-hi);}
#welcomeBackdrop{opacity:0;pointer-events:none;transition:opacity 0.3s ease;}
#welcomeBackdrop.open{opacity:1;pointer-events:all;}
#welcomeBackdrop.open .modal{transform:translateY(0) scale(1);opacity:1;}

/* ── BOTTOM NAV ── */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:200;background:var(--surface);border-top:2px solid var(--blue);display:flex;align-items:center;padding:0 0 env(safe-area-inset-bottom,0px);box-shadow:0 -4px 20px rgba(0,0,0,0.18);}
.nav-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:11px 0 14px;font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink4);background:none;border:none;cursor:pointer;transition:all 0.15s;font-family:"DM Sans",sans-serif;border-top:3px solid transparent;margin-top:-2px;}
.nav-tab.active{color:var(--blue);border-top-color:var(--blue);background:var(--blue-soft);}
.nav-tab svg{opacity:0.5;transition:opacity 0.15s;}
.nav-tab.active svg{opacity:1;}
/* ── PITCHING CARD ── */
.pitch-role-header{padding:8px 14px 5px;font-size:12px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink4);background:var(--bg2);border-bottom:1px solid var(--border);}
.pitch-row{display:flex;align-items:center;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.12s;padding:0;}
.pitch-row:hover{background:var(--blue-soft);}
.pitch-num{font-family:"Bebas Neue",sans-serif;font-size:22px;color:var(--ink4);width:46px;text-align:center;flex-shrink:0;padding:14px 0;background:var(--surface2);border-right:1px solid var(--border);}
.pitch-info{flex:1;padding:10px 10px 10px 12px;min-width:0;}
.pitch-name{font-size:18px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pitch-stats{font-family:"DM Mono",monospace;font-size:14px;color:var(--ink3);margin-top:3px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.pitch-record{font-weight:600;color:var(--blue);}
.pitch-so{color:var(--pink);font-weight:600;}
.pitch-key-stats{display:flex;gap:6px;flex-shrink:0;padding:0 8px;}
.pitch-era-wrap{text-align:center;}
.pitch-era{font-family:"Bebas Neue",sans-serif;font-size:20px;color:var(--ink);display:block;line-height:1;}
.pitch-whip{font-family:"Bebas Neue",sans-serif;font-size:22px;color:var(--ink);display:block;line-height:1;}
.pitch-era-lbl{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink4);}
.pitch-role-badge{font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:3px 9px;border-radius:20px;white-space:nowrap;flex-shrink:0;margin-right:10px;border:1px solid transparent;font-family:"DM Sans",sans-serif;}
.pitch-footer{padding:10px 14px;font-size:13px;color:var(--ink4);text-align:center;font-style:italic;background:var(--surface2);}
/* ── ROLE BADGES ── */
.role-starter{background:rgba(26,79,204,0.12);color:var(--blue-lo);border-color:rgba(26,79,204,0.28);}
.role-bullpen{background:rgba(255,45,138,0.10);color:var(--pink-lo);border-color:rgba(255,45,138,0.28);}
.role-closer{background:rgba(155,31,204,0.12);color:#6B0FAA;border-color:rgba(155,31,204,0.28);}
body.dark .role-starter{background:rgba(74,127,255,0.18);color:#7AABFF;border-color:rgba(74,127,255,0.4);}
body.dark .role-bullpen{background:rgba(255,79,160,0.18);color:#FF7EC0;border-color:rgba(255,79,160,0.4);}
body.dark .role-closer{background:rgba(200,100,255,0.18);color:#D580FF;border-color:rgba(200,100,255,0.4);}
/* ── ROLE SELECTOR ── */
.role-selector{display:flex;gap:8px;margin-top:1rem;}
.role-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 6px;border-radius:10px;border:1.5px solid var(--border2);background:var(--surface2);cursor:pointer;font-family:"DM Sans",sans-serif;font-size:14px;font-weight:600;color:var(--ink3);transition:all 0.15s;}
.role-btn:hover{border-color:var(--blue);color:var(--blue);}
.role-btn.active{border-color:var(--blue);background:var(--blue-soft2);color:var(--blue);}
.role-btn-icon{font-size:20px;}


@keyframes fingerBounce{0%,100%{transform:translateY(-50%) translateX(0);}50%{transform:translateY(-60%) translateX(-4px);}}

/* ── Chip Colors (single source of truth) ── */

/* ── Chip Colors — single source of truth ── */
/* Dark mode (default) */
.rec-best{background:rgba(52,211,153,0.15) !important;color:#34d399 !important;border:1.5px solid rgba(52,211,153,0.55) !important;font-weight:900;text-shadow:0 0 10px rgba(52,211,153,0.35);}
.rec-cleanup{background:rgba(52,211,153,0.15) !important;color:#34d399 !important;border:1.5px solid rgba(52,211,153,0.55) !important;font-weight:900;text-shadow:0 0 10px rgba(52,211,153,0.35);}
.rec-leadoff{background:rgba(106,239,103,0.12) !important;color:#6aef67 !important;border:1.5px solid rgba(106,239,103,0.5) !important;font-weight:800;text-shadow:0 0 8px rgba(106,239,103,0.25);}
.rec-power{background:rgba(52,211,153,0.15) !important;color:#34d399 !important;border:1.5px solid rgba(52,211,153,0.55) !important;font-weight:800;text-shadow:0 0 10px rgba(52,211,153,0.35);}
.rec-contact{background:rgba(73,227,233,0.12) !important;color:#49e3e9 !important;border:1.5px solid rgba(73,227,233,0.5) !important;font-weight:700;}
.rec-onbase{background:rgba(180,140,255,0.12) !important;color:#b89fff !important;border:1.5px solid rgba(180,140,255,0.5) !important;font-weight:700;text-shadow:0 0 6px rgba(180,140,255,0.2);}
.rec-potential{background:rgba(160,160,180,0.08) !important;color:#A0A0B4 !important;border:1px solid rgba(160,160,180,0.35) !important;font-weight:600;}
/* Light mode overrides — darker saturated versions (applied whenever .dark is absent) */
body:not(.dark) .rec-best{background:rgba(20,140,100,0.1) !important;color:#148c64 !important;border-color:rgba(20,140,100,0.4) !important;text-shadow:none;}
body:not(.dark) .rec-cleanup{background:rgba(20,140,100,0.1) !important;color:#148c64 !important;border-color:rgba(20,140,100,0.4) !important;text-shadow:none;}
body:not(.dark) .rec-leadoff{background:rgba(60,160,60,0.1) !important;color:#3a9c38 !important;border-color:rgba(60,160,60,0.4) !important;text-shadow:none;}
body:not(.dark) .rec-power{background:rgba(20,140,100,0.1) !important;color:#148c64 !important;border-color:rgba(20,140,100,0.4) !important;text-shadow:none;}
body:not(.dark) .rec-contact{background:rgba(0,150,160,0.1) !important;color:#008fa0 !important;border-color:rgba(0,150,160,0.4) !important;text-shadow:none;}
body:not(.dark) .rec-onbase{background:rgba(120,90,200,0.1) !important;color:#7a5cd4 !important;border-color:rgba(120,90,200,0.45) !important;text-shadow:none;}
body:not(.dark) .rec-potential{background:rgba(100,100,120,0.08) !important;color:#606070 !important;border-color:rgba(100,100,120,0.3) !important;text-shadow:none;}


.no-data-wrap{display:none;flex-direction:column;min-height:calc(100svh - 180px);}
/* Screen name header */
.no-data-header{padding:18px 16px 0;flex-shrink:0;}
.no-data-screen-name{font-family:'Bebas Neue',sans-serif;font-size:28px;
  letter-spacing:0.08em;color:var(--ink);line-height:1;}
.no-data-rule{height:3px;border-radius:2px;background:#49e3e9;margin-top:8px;}
/* Back button bar */
.no-data-backbar{padding:12px 14px;flex-shrink:0;}
.no-data-backbtn{width:100%;padding:14px;border-radius:14px;
  background:rgba(73,227,233,0.08);border:1.5px solid rgba(73,227,233,0.3);
  cursor:pointer;color:#49e3e9;font-family:'Bebas Neue',sans-serif;
  font-size:22px;letter-spacing:0.06em;display:flex;align-items:center;
  justify-content:center;gap:8px;}
/* Body centred below the back button */
.no-data-body{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:0 16px 20px;}
/* Shared card — .no-data-screen used by all 5 empty states */
.no-data-screen{width:100%;max-width:380px;background:var(--surface2);
  border:1.5px solid var(--border);border-radius:20px;padding:36px 24px;
  display:flex;flex-direction:column;align-items:center;text-align:center;}
.no-data-icon{font-size:56px;margin-bottom:14px;}
.no-data-title{font-family:'Bebas Neue',sans-serif;font-size:24px;
  letter-spacing:0.06em;color:var(--ink);margin-bottom:8px;}
.no-data-sub{font-size:13px;color:var(--ink4);margin-bottom:22px;
  line-height:1.65;max-width:220px;}
.no-data-btn{padding:13px 0;border-radius:13px;background:#49e3e9;border:none;
  font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:0.06em;
  color:#080C10;cursor:pointer;width:100%;}

/* ── Unified 580 px container: drill screens match home/settings width ── */
#speedResultsModal > *,
#buntResultsModal > *,
#itfactorScreen > *,
#rollCallScreen > * {
  max-width:580px;
  width:100%;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}

/* ── C5: Restore grid texture on fixed drill screens ──────────────────────
   Inline style="background:var(--bg)" sets background-image:none, blocking
   body::before. Override with !important so the grid shows through.        */
#speedScreen,#speedResultsModal,
#buntScreen,#buntResultsModal,
#itfactorScreen,#itModal,#rollCallScreen {
  background-image:
    linear-gradient(rgba(0,180,188,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,180,188,0.04) 1px,transparent 1px) !important;
  background-size:36px 36px !important;
}
body.dark #speedScreen,body.dark #speedResultsModal,
body.dark #buntScreen,body.dark #buntResultsModal,
body.dark #itfactorScreen,body.dark #itModal,body.dark #rollCallScreen {
  background-image:
    linear-gradient(rgba(73,227,233,0.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(73,227,233,0.06) 1px,transparent 1px) !important;
}

/* ── C6: Brand bar shared across drill/result screens ──────────────────── */
.drill-brand-bar {
  display:flex;align-items:center;gap:12px;
  padding:10px 16px 10px;
  border-bottom:2px solid var(--blue);
  flex-shrink:0;
  /* keep bar opaque so grid shows behind content, not through bar */
  background:var(--bg);
  position:relative;z-index:1;
}
.drill-brand-bar .brand-text h1 { font-size:26px; }
.drill-brand-bar .brand-text p  { margin-top:1px; }

/* ── M3: Safe-area — drill screen bottoms grow with nav ─────────────────── */
#speedScreen,#speedResultsModal,
#buntScreen,#buntResultsModal,
#itfactorScreen,#itModal,#uploadScreen,#rollCallScreen {
  bottom: calc(82px + env(safe-area-inset-bottom,0px)) !important;
}

/* ── Header clearance: push fixed screens below the 60px+2px global header ─ */
#speedScreen,#speedResultsModal,
#buntScreen,#buntResultsModal,
#itfactorScreen,#uploadScreen,#rollCallScreen {
  top: var(--header-height) !important;
}

/* ── M8: Fix #itBeyondBox overflow (width:100% + inline margin = overflow) ─ */
#itBeyondBox {
  width: calc(100% - 32px) !important;
  max-width: calc(580px - 32px) !important;
  margin: 10px auto 12px !important;
  box-sizing: border-box;
}

/* ── Grade Modal ──────────────────────────────────────────────────────────── */
.grade-modal-backdrop{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.82);
  z-index:99998;
  align-items:flex-end;justify-content:center;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.grade-modal-backdrop.open{display:flex;}
.grade-modal{
  background:var(--surface);
  border-radius:24px 24px 0 0;
  width:100%;max-width:480px;
  max-height:92vh;overflow-y:auto;
  padding-bottom:env(safe-area-inset-bottom,16px);
  animation:gradeSlideUp 0.3s cubic-bezier(0.34,1.4,0.64,1);
}
.grade-modal.closing{animation:gradeSlideDown 0.22s ease forwards;}
@keyframes gradeSlideUp{from{transform:translateY(100%);opacity:0;}to{transform:translateY(0);opacity:1;}}
@keyframes gradeSlideDown{from{transform:translateY(0);opacity:1;}to{transform:translateY(100%);opacity:0;}}

.grade-modal-back{
  display:flex;align-items:center;gap:5px;
  background:none;border:none;
  color:var(--ink4);font-size:14px;font-weight:600;letter-spacing:0.02em;
  padding:18px 20px 0;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.grade-hero-section{
  text-align:center;padding:16px 24px 18px;
  border-bottom:1px solid var(--border);
}
.grade-letter{
  font-family:'Bebas Neue',sans-serif;font-size:96px;line-height:1;
  transition:color 0.08s,text-shadow 0.08s;
}
.grade-label-text{
  font-family:'Bebas Neue',sans-serif;font-size:18px;
  letter-spacing:0.07em;color:var(--ink4);margin-top:2px;min-height:22px;
}
.grade-runs-section{
  text-align:center;padding:18px 24px;
  border-bottom:1px solid var(--border);
}
.grade-runs-number{
  font-family:'Bebas Neue',sans-serif;font-size:72px;
  line-height:1;letter-spacing:0.02em;
  transition:color 0.08s;
}
.grade-runs-meta{
  font-size:11px;font-weight:700;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--ink4);margin-top:6px;
}
.grade-runs-sub{
  font-size:12px;color:var(--ink4);opacity:0.5;margin-top:4px;
}
.grade-factors-section{padding:16px 20px;border-bottom:1px solid var(--border);}
.grade-factors-title{
  font-size:11px;font-weight:700;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--ink4);margin-bottom:14px;
}
.grade-factor-row{
  display:flex;align-items:center;gap:10px;margin-bottom:13px;
}
.grade-factor-row:last-child{margin-bottom:0;}
.grade-factor-label{
  font-size:13px;color:var(--ink);flex:0 0 auto;
  min-width:158px;white-space:nowrap;
}
.grade-factor-track{
  flex:1;height:6px;
  background:rgba(255,255,255,0.08);border-radius:3px;overflow:hidden;
}
body:not(.dark) .grade-factor-track{background:rgba(0,0,0,0.08);}
.grade-factor-fill{height:100%;border-radius:3px;width:0;}
.grade-factor-score{
  font-size:13px;font-weight:600;
  min-width:28px;text-align:right;
}
.grade-desc-text{
  padding:14px 20px;font-size:14px;color:var(--ink3);
  line-height:1.65;border-bottom:1px solid var(--border);
}
.grade-action-section{
  padding:16px 20px;display:flex;flex-direction:column;gap:10px;
}
.grade-trust-msg{
  font-size:14px;font-weight:600;text-align:center;
  color:#6aef67;padding:4px 0 6px;
}
.grade-recommend-btn{
  width:100%;padding:14px;background:#49e3e9;border:none;
  border-radius:14px;font-family:'Bebas Neue',sans-serif;
  font-size:20px;letter-spacing:0.06em;color:#080C10;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.grade-close-btn{
  width:100%;padding:13px;background:transparent;
  border:1.5px solid rgba(255,255,255,0.12);border-radius:14px;
  font-family:'Bebas Neue',sans-serif;font-size:18px;
  letter-spacing:0.06em;color:var(--ink4);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
body:not(.dark) .grade-close-btn{border-color:rgba(0,0,0,0.12);}

/* ── Skeleton shimmer (used during lineup / pitching / drill cold load) ──
   Pulses from a deep slate to a brighter band; same animation drives every
   skeleton placeholder so the page reads as one synchronized "loading state." */
@keyframes skeletonShimmer{
  0%{background-position:-340px 0;}
  100%{background-position:340px 0;}
}
.skeleton{
  background:linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(73,227,233,0.10) 50%,
    rgba(255,255,255,0.04) 100%);
  background-size:680px 100%;
  animation:skeletonShimmer 1.4s ease-in-out infinite;
  border-radius:6px;
}
body:not(.dark) .skeleton{
  background:linear-gradient(90deg,
    rgba(8,12,16,0.05) 0%,
    rgba(26,79,204,0.10) 50%,
    rgba(8,12,16,0.05) 100%);
  background-size:680px 100%;
}
.skeleton-row{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-bottom:1px solid var(--border);
}
.skeleton-row:last-child{border-bottom:none;}
.skeleton-num{width:36px;height:30px;flex-shrink:0;}
.skeleton-name{height:18px;flex:1;max-width:160px;}
.skeleton-stat{height:14px;width:48px;flex-shrink:0;}
.skeleton-card-wrap{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:18px;overflow:hidden;margin:0 16px;
}

/* ── AI thinking bar (above lineup card during recompute) ──────────────
   "Reading the room…" with an animated sweep. Mounted always-present in
   markup; toggled with .visible so it can fade in/out without layout jump. */
.ai-thinking-bar{
  display:flex;align-items:center;gap:10px;
  margin:6px 16px 4px;padding:8px 14px;
  background:linear-gradient(90deg,
    rgba(73,227,233,0.0) 0%,
    rgba(73,227,233,0.12) 50%,
    rgba(73,227,233,0.0) 100%);
  background-size:200% 100%;
  border:1px solid rgba(73,227,233,0.22);
  border-radius:12px;
  font-family:'DM Sans',sans-serif;font-size:12px;letter-spacing:0.04em;
  color:#49e3e9;text-transform:uppercase;font-weight:700;
  opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;
  border-color:transparent;
  overflow:hidden;
  transition:opacity 0.18s ease, max-height 0.22s ease, padding 0.22s ease,
             margin 0.22s ease, border-color 0.22s ease;
  pointer-events:none;
}
.ai-thinking-bar.visible{
  opacity:1;max-height:44px;
  padding-top:8px;padding-bottom:8px;
  margin-top:6px;margin-bottom:4px;
  border-color:rgba(73,227,233,0.22);
  animation:thinkingSweep 1.6s linear infinite;
}
@keyframes thinkingSweep{
  0%  {background-position:120% 0;}
  100%{background-position:-120% 0;}
}
.ai-thinking-bar .ai-thinking-dot{
  width:6px;height:6px;border-radius:50%;background:#49e3e9;flex-shrink:0;
  box-shadow:0 0 8px rgba(73,227,233,0.7);
  animation:thinkingDot 1s ease-in-out infinite;
}
@keyframes thinkingDot{
  0%,100%{transform:scale(0.7);opacity:0.45;}
  50%    {transform:scale(1.15);opacity:1;}
}
.ai-thinking-bar .ai-thinking-spark{
  flex:1;height:14px;display:block;opacity:0.85;
}

/* ── Verdict reveal: 3 staggered beats inside the player modal ──────────
   Beat 1: chip slides in from the left (label badge).
   Beat 2: verdict label "stamps" — quick scale-down + fade in.
   Beat 3: each phrase of the verdict fades up in sequence.
   Total budget: ≤ 600ms. Triggered by adding .anim-enter on modal open;
   class is removed and re-added (with an rAF gap) so the keyframe replays
   even when the same modal is reopened for a different player. */
@keyframes chipSlideIn{
  from{opacity:0;transform:translateX(-12px);}
  to  {opacity:1;transform:translateX(0);}
}
@keyframes labelStamp{
  0%  {opacity:0;transform:scale(1.18);letter-spacing:0.18em;}
  60% {opacity:1;}
  100%{opacity:1;transform:scale(1);letter-spacing:0.1em;}
}
@keyframes phraseReveal{
  from{opacity:0;transform:translateY(6px);}
  to  {opacity:1;transform:translateY(0);}
}
.modal-chip.anim-enter{animation:chipSlideIn 220ms ease-out both;}
/* Default the verdict's label + phrases to opacity:0 inside the modal so the
   transition from "innerHTML just inserted" → "anim-enter class applied next
   frame" doesn't flash visible content. Animation fill-mode 'both' holds the
   reveal end state (opacity:1) after the keyframe completes.
   Label is its own line — the verdict text never runs together with it. */
.modal-verdict .verdict-label{display:block;opacity:0;margin-bottom:8px;}
.modal-verdict .verdict-phrase{display:inline;opacity:0;}
.modal-verdict.anim-enter .verdict-label{
  animation:labelStamp 260ms cubic-bezier(0.2,0.9,0.3,1.2) both;
  animation-delay:120ms;
}
.modal-verdict.anim-enter .verdict-phrase{
  animation:phraseReveal 240ms ease-out both;
}
/* Reasoning text gets the same gentle reveal (one beat after the verdict). */
.modal-reasoning-text{opacity:1;}
.modal-reasoning-text.anim-enter{
  animation:phraseReveal 280ms ease-out both;
  animation-delay:380ms;
}
/* Spot-line at the bottom of the modal body: "AI had #X · You chose #Y".
   Only shown on overrides. Borderless so the modal stays clean. */
.modal-spot-line{
  font-family:'DM Sans',sans-serif;
  font-size:12px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--ink4);text-align:center;
  margin:18px 0 4px;
}

/* Verdict loading state — during the 2–4s "thinking" window the styled
   verdict container disappears and the animated loader gif sits centered
   on the plain modal-body background. min-height is sized to roughly
   match a typical verdict block so the modal layout doesn't pop bigger
   when the colored container takes over.
   When the verdict text is ready the .is-loading class is removed and
   the styled container reappears with the verdict reveal animation. */
.modal-verdict.is-loading{
  /* Neutral placeholder container during the "thinking" pause. Same
     padding + border-radius as the loaded state so the container
     dimensions stay stable when .is-loading is removed and the colored
     agree/disagree/neutral styling takes over. The verdict text is
     rendered invisibly inside this container during loading (verdict-
     label and verdict-phrase default to opacity:0 inside .modal-verdict),
     so the container claims its final text-driven height up front and
     there's no height pop when the Lottie loader gives way. */
  background:rgba(255,255,255,0.02) !important;
  border:1.5px solid rgba(73,227,233,0.22) !important;
  box-shadow:none !important;
  /* Padding matches the default .modal-verdict so loaded state has the
     same internal box as loading state. */
  padding:14px 16px;
  border-radius:11px;
  /* Position relative anchors the absolutely-positioned loader overlay. */
  position:relative;
}
body:not(.dark) .modal-verdict.is-loading{
  background:rgba(0,0,0,0.02) !important;
  border-color:rgba(26,79,204,0.18) !important;
}
/* Loader overlay — sits absolutely over the reserved verdict text height.
   pointer-events:none so taps still reach the modal underneath. */
.verdict-loader-overlay{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  transition:opacity 220ms ease;
}
/* Top-anchored variant for the grade/summary modal — verdict text there
   tends to be long enough that a centered loader lands below the fold.
   Pinning the loader near the top of the verdict box keeps it visible
   on open. The label gets pushed by the loader's own padding offset. */
.verdict-loader-overlay--top{
  align-items:flex-start;
  padding-top:8px;
}
.verdict-loader-anim{
  /* Container for the Lottie loader. Player paints an inline SVG that
     fills this box. 240px reads as a clear centerpiece; on short
     verdicts the loaded container will be smaller than this (slight
     pop) — accepted trade-off for visual prominence per design call. */
  width:240px;height:240px;display:block;
  filter:drop-shadow(0 0 22px rgba(73,227,233,0.45));
}
.verdict-loader-anim > svg{display:block;width:100%;height:100%;}