@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Barlow:wght@400;500;600&display=swap');
:root{
  --bg:#0a0e1a;--bg2:#111827;--bg3:#1e2a3a;--card:#162032;
  --border:#243347;--accent:#00d4ff;--accent2:#ff6b35;
  --green:#22c55e;--red:#ef4444;--yellow:#f59e0b;
  --blue:#3b82f6;--purple:#a855f7;
  --text:#e2e8f0;--text2:#94a3b8;--text3:#64748b;--r:10px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
body{font-family:'Barlow',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;}
h1,h2,h3,h4{font-family:'Barlow Condensed',sans-serif;}
.screen{display:none;min-height:100vh;flex-direction:column;}
.screen.active{display:flex;}

/* TOPBAR */
.topbar{background:var(--bg2);border-bottom:2px solid var(--accent);padding:10px 12px;display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:100;flex-shrink:0;}
.topbar h2{font-size:1.1rem;flex:1;letter-spacing:1px;text-transform:uppercase;}
.score-display{font-family:'Barlow Condensed',sans-serif;font-size:1.5rem;font-weight:900;color:var(--accent);letter-spacing:2px;}

/* MATCH ACTION BAR */
.mab{background:var(--bg2);border-bottom:1px solid var(--border);padding:6px 10px;display:flex;align-items:center;gap:5px;flex-shrink:0;}
.mab .sbig{font-family:'Barlow Condensed',sans-serif;font-size:1.3rem;font-weight:900;flex:1;text-align:center;}
.mab .sbig .us{color:var(--accent);}
.mab .sbig .them{color:var(--red);}

/* BUTTONS */
.btn{font-family:'Barlow Condensed',sans-serif;font-size:1rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;border:none;border-radius:var(--r);padding:10px 16px;cursor:pointer;transition:all 0.15s;user-select:none;touch-action:manipulation;}
.btn:active{transform:scale(0.96);}
.btn-primary{background:var(--accent);color:#0a0e1a;}
.btn-secondary{background:#243348;color:var(--text);border:1px solid #3d5270;}
.btn-danger{background:var(--red);color:#fff;}
.btn-success{background:var(--green);color:#0a0e1a;}
.btn-yellow{background:var(--yellow);color:#0a0e1a;}
.btn-ghost{background:transparent;border:1px solid #3d5270;color:var(--text);}
.btn-sm{padding:7px 12px;font-size:0.82rem;}
.btn-lg{padding:14px 22px;font-size:1.15rem;}
.btn-block{width:100%;display:block;}
.btn-back{background:transparent;border:none;color:var(--text2);font-size:1.3rem;padding:2px 6px;}
.btn-mab{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;border:none;border-radius:6px;padding:5px 8px;font-size:0.73rem;cursor:pointer;touch-action:manipulation;}
.btn-home{background:transparent;border:1px solid var(--border);color:var(--text2);}
.btn-fin{background:rgba(239,68,68,0.15);border:1px solid rgba(239,68,68,0.4);color:var(--red);}
.btn-stats{background:rgba(0,212,255,0.15);border:1px solid rgba(0,212,255,0.35);color:var(--accent);}

/* INPUTS */
.ig{margin-bottom:14px;}
.ig label{display:block;font-size:0.75rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text2);margin-bottom:5px;}
input[type="text"],input[type="date"],select{width:100%;background:#243348;border:1px solid #3d5270;border-radius:var(--r);color:var(--text);padding:11px 13px;font-family:'Barlow',sans-serif;font-size:1rem;}
input:focus,select:focus{outline:2px solid var(--accent);border-color:transparent;}

/* LAYOUT */
.cnt{padding:14px;flex:1;}
.sec{background:var(--card);border-radius:var(--r);padding:14px;margin-bottom:14px;border:1px solid var(--border);}
.stit{font-size:0.75rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}

/* PLAYER CHIPS */
.pgrid{display:flex;flex-wrap:wrap;gap:7px;}
.chip{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.92rem;letter-spacing:0.5px;padding:8px 14px;border-radius:20px;cursor:pointer;border:2px solid #3d5270;background:#243348;color:var(--text);transition:all 0.15s;user-select:none;touch-action:manipulation;}
.chip:active{transform:scale(0.94);}
.chip.sel{background:var(--accent);color:#0a0e1a;border-color:var(--accent);}
.chip.onfield{background:var(--green);color:#0a0e1a;border-color:var(--green);}
.chip.hasdisc{background:var(--accent2);color:#fff;border-color:var(--accent2);box-shadow:0 0 12px rgba(255,107,53,0.5);}
.chip.puller{background:var(--purple);color:#fff;border-color:var(--purple);}
.chip.defhl{background:rgba(245,158,11,0.2);color:var(--yellow);border-color:var(--yellow);}

/* ATTACK players — bigger for fast taps */
.attack-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:9px;padding:4px;}
.attack-chip{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.05rem;letter-spacing:0.5px;padding:16px 10px;border-radius:12px;cursor:pointer;border:2px solid #3d5270;background:#243348;color:var(--text);transition:all 0.12s;user-select:none;touch-action:manipulation;text-align:center;min-height:56px;display:flex;align-items:center;justify-content:center;}
.attack-chip:active{transform:scale(0.93);}
.attack-chip.hasdisc{background:var(--accent2);color:#fff;border-color:var(--accent2);box-shadow:0 0 14px rgba(255,107,53,0.6);font-size:1.1rem;}
.attack-chip.lastused{background:rgba(0,212,255,0.12);border-color:var(--accent);color:var(--accent);}

/* DISC CHAIN */
.disc-chain{display:flex;flex-wrap:wrap;gap:3px;}
.dstep{font-family:'Barlow Condensed',sans-serif;font-size:0.82rem;padding:3px 7px;background:#243348;border-radius:4px;color:var(--text);}
.dstep.active{background:var(--accent2);color:#fff;}

/* ACTION BAR bottom */
.abar{position:sticky;bottom:0;background:var(--bg2);border-top:1px solid var(--border);padding:10px 11px;display:flex;gap:8px;flex-shrink:0;}
/* Big action buttons */
.abtn-score{flex:2;background:var(--green);color:#0a0e1a;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.25rem;letter-spacing:1px;border:none;border-radius:var(--r);padding:18px 12px;cursor:pointer;touch-action:manipulation;}
.abtn-score:active{transform:scale(0.96);}
.abtn-err{flex:1;background:var(--red);color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1rem;letter-spacing:1px;border:none;border-radius:var(--r);padding:18px 8px;cursor:pointer;touch-action:manipulation;}
.abtn-err:active{transform:scale(0.96);}
.abtn-undo{background:#243348;border:1px solid #3d5270;color:var(--text);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.1rem;border-radius:var(--r);padding:18px 14px;cursor:pointer;touch-action:manipulation;}
.abtn-def{flex:2;background:var(--accent2);color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.1rem;letter-spacing:1px;border:none;border-radius:var(--r);padding:18px 10px;cursor:pointer;touch-action:manipulation;}
.abtn-their{flex:1;background:rgba(239,68,68,0.2);border:1px solid var(--red);color:var(--red);font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:0.9rem;letter-spacing:1px;border-radius:var(--r);padding:18px 8px;cursor:pointer;touch-action:manipulation;}
.abtn-def:active,.abtn-their:active{transform:scale(0.96);}

/* MODAL */
.mo{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:9999;align-items:flex-end;justify-content:center;}
.mo.active{display:flex;}
.modal{background:var(--bg2);border-radius:16px 16px 0 0;padding:18px 14px;width:100%;max-width:520px;border-top:3px solid var(--accent);max-height:88vh;overflow-y:auto;animation:slideUp 0.22s ease;}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.modal h3{font-size:1.25rem;margin-bottom:14px;letter-spacing:1px;}
#modal-lstats{align-items:center;justify-content:center;}
#modal-lstats .modal{border-radius:14px;max-height:92vh;}
#modal-tactics-board .modal{border-radius:14px;max-height:98vh;padding:10px;}
#modal-save-board{align-items:center;justify-content:center;}
#modal-save-board .modal{border-radius:14px;}

/* PHASE BADGE */
.pbadge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-family:'Barlow Condensed',sans-serif;font-size:0.85rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.patt{background:rgba(0,212,255,0.15);color:var(--accent);border:1px solid rgba(0,212,255,0.3);}
.pdef{background:rgba(239,68,68,0.15);color:var(--red);border:1px solid rgba(239,68,68,0.3);}
.pdot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 1.5s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.35;}}

/* MATCH CARD */
.mcard{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;margin-bottom:9px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:border-color 0.15s;}
.mcard:hover,.mcard.selected{border-color:var(--accent);}
.mcard.selected{background:rgba(0,212,255,0.05);}
.minfo{flex:1;}
.mtitle{font-family:'Barlow Condensed',sans-serif;font-size:1.05rem;font-weight:700;}
.mmeta{font-size:0.78rem;color:var(--text2);margin-top:2px;}
.mscore{font-family:'Barlow Condensed',sans-serif;font-size:1.5rem;font-weight:900;color:var(--accent);}
.mcb{width:18px;height:18px;accent-color:var(--accent);}

/* TABS */
.tabs{display:flex;background:var(--bg2);border-radius:var(--r);padding:3px;margin-bottom:14px;gap:3px;}
.tab{flex:1;text-align:center;padding:9px 3px;border-radius:8px;cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.85rem;letter-spacing:1px;text-transform:uppercase;color:var(--text3);transition:all 0.15s;}
.tab.active{background:var(--accent);color:#0a0e1a;}

/* TACTIC SELECTS */
.trow{display:flex;gap:7px;margin-bottom:7px;}
.trow select{flex:1;padding:8px 10px;font-size:0.85rem;}

/* MISC */
.tag{display:inline-block;padding:2px 7px;border-radius:4px;font-size:0.72rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;}
.tag-in{background:rgba(245,158,11,0.15);color:var(--yellow);}
.tag-out{background:rgba(34,197,94,0.15);color:var(--green);}
.tag-fin{background:rgba(100,116,139,0.2);color:var(--text3);}
.tag-live{background:rgba(34,197,94,0.1);color:var(--green);}
.empty{text-align:center;color:var(--text3);padding:36px 16px;}
.ir{display:flex;justify-content:space-between;margin-bottom:6px;font-size:0.88rem;}
.ir span:first-child{color:var(--text2);}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.sbox{background:var(--bg3);border-radius:8px;padding:11px;text-align:center;}
.sbox .slbl{font-size:0.65rem;letter-spacing:1px;text-transform:uppercase;color:var(--text3);margin-bottom:3px;}
.sval{font-size:1.35rem;font-family:'Barlow Condensed',sans-serif;font-weight:900;}
.pdots{display:flex;gap:4px;flex-wrap:wrap;}
.pdot2{width:9px;height:9px;border-radius:50%;}
.pdot2.us{background:var(--accent);}
.pdot2.them{background:var(--red);}
.pscroll{max-height:280px;overflow-y:auto;}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.dpbtn{padding:9px 13px;border-radius:8px;border:2px solid #3d5270;background:#243348;color:var(--text);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.92rem;cursor:pointer;transition:all 0.15s;touch-action:manipulation;text-align:center;}
.dpbtn:active{transform:scale(0.95);}
.dpbtn.sel{border-color:var(--yellow);background:rgba(245,158,11,0.15);color:var(--yellow);}
.logo{font-family:'Barlow Condensed',sans-serif;font-size:2rem;font-weight:900;letter-spacing:4px;text-transform:uppercase;color:var(--accent);}
.sub{font-size:0.72rem;letter-spacing:3px;text-transform:uppercase;color:var(--text3);margin-top:-4px;}

/* Stats table */
.stbl{width:100%;border-collapse:collapse;font-size:0.82rem;}
.stbl th{font-size:0.65rem;letter-spacing:1px;text-transform:uppercase;color:var(--text3);padding:5px 7px;border-bottom:1px solid var(--border);text-align:center;white-space:nowrap;}
.stbl th:first-child{text-align:left;}
.stbl td{padding:7px 7px;border-bottom:1px solid var(--bg3);text-align:center;font-variant-numeric:tabular-nums;}
.stbl td:first-child{text-align:left;font-weight:600;}
.rp{color:var(--green);font-weight:700;}.rn{color:var(--red);font-weight:700;}.rz{color:var(--text3);}

/* Live stats table */
.ltbl{width:100%;border-collapse:collapse;}
.ltbl th{font-size:0.62rem;letter-spacing:1px;text-transform:uppercase;color:var(--accent);padding:5px 6px;border-bottom:1px solid var(--border);text-align:center;}
.ltbl th:first-child{text-align:left;}
.ltbl td{padding:7px 6px;border-bottom:1px solid var(--bg3);text-align:center;font-variant-numeric:tabular-nums;font-size:0.9rem;}
.ltbl td:first-child{text-align:left;font-weight:600;font-size:0.88rem;}

/* TACTIQUE BOARD */
#tb-canvas{touch-action:none;display:block;}
.tb-toolbar{display:flex;align-items:center;gap:6px;padding:7px 8px;background:var(--bg3);border-radius:8px;flex-wrap:wrap;}
.tb-btn{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.8rem;letter-spacing:0.5px;text-transform:uppercase;padding:6px 11px;border-radius:6px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);cursor:pointer;touch-action:manipulation;}
.tb-btn.active{background:var(--accent);color:#0a0e1a;border-color:var(--accent);}
.tb-btn.mvt{background:rgba(0,212,255,0.12);border-color:var(--accent);color:var(--accent);}
.tb-btn.mvt.active{background:var(--accent);color:#0a0e1a;}
.tb-btn.zone{background:rgba(245,158,11,0.12);border-color:var(--yellow);color:var(--yellow);}
.tb-btn.zone.active{background:var(--yellow);color:#0a0e1a;}
.tb-sep{width:1px;height:20px;background:var(--border);}
.tb-menu-btn{background:var(--bg2);border:1px solid var(--border);color:var(--text2);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.85rem;padding:7px 12px;border-radius:6px;cursor:pointer;}

/* Scheme cards */
.scheme-card{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:8px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:border-color 0.15s;}
.scheme-card:hover{border-color:var(--accent);}

@media(min-width:480px){.chip{padding:9px 16px;font-size:0.98rem;}}
/* ── GAME-STYLE HOME MENU ── */
.btn-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;line-height:1.1;}
.btn-icon img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.4));}
.btn-icon-lg img{width:32px;height:32px;}
.btn-icon-sm img{width:20px;height:20px;}

/* Hero CTA */
.home-hero-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:12px;
  padding:16px 20px;border:none;border-radius:12px;cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.35rem;
  letter-spacing:2px;text-transform:uppercase;
  background:linear-gradient(135deg,#00b8d9 0%,#0057a8 100%);
  color:#fff;
  box-shadow:0 0 22px rgba(0,180,255,0.45),0 4px 14px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.15);
  border-top:1px solid rgba(0,220,255,0.6);
  transition:all 0.18s;
  position:relative;overflow:hidden;
}
.home-hero-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0.07) 0%,transparent 60%);pointer-events:none;}
.home-hero-btn:active{transform:scale(0.97);box-shadow:0 0 12px rgba(0,180,255,0.3);}
.home-hero-btn img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 0 6px rgba(255,200,0,0.5));}

/* Nav tile — medium */
.home-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:14px 8px;border-radius:12px;cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:0.88rem;
  letter-spacing:1.5px;text-transform:uppercase;
  transition:all 0.18s;user-select:none;touch-action:manipulation;
  border:1px solid rgba(255,255,255,0.1);
  background:linear-gradient(160deg,var(--tile-bg1,#0f1e30) 0%,var(--tile-bg2,#0a1520) 100%);
  box-shadow:0 0 0px var(--tile-glow,transparent),inset 0 1px 0 rgba(255,255,255,0.06);
  color:var(--tile-color,#e2e8f0);
  position:relative;overflow:hidden;
}
.home-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0.05) 0%,transparent 50%);pointer-events:none;}
.home-tile:active{transform:scale(0.95);}
.home-tile:hover{border-color:var(--tile-border,rgba(0,212,255,0.4));box-shadow:0 0 14px var(--tile-glow,rgba(0,212,255,0.2));}
.home-tile img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.6));}
.home-tile span{display:block;text-align:center;line-height:1.2;}

/* Small utility tile */
.home-tile-sm{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:11px 6px;border-radius:10px;cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:0.78rem;
  letter-spacing:1.5px;text-transform:uppercase;
  transition:all 0.18s;user-select:none;touch-action:manipulation;
  border:1px solid rgba(255,255,255,0.08);
  background:linear-gradient(160deg,var(--tile-bg1,#0f1e30) 0%,var(--tile-bg2,#0a1520) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
  color:var(--tile-color,#94a3b8);
  position:relative;overflow:hidden;
}
.home-tile-sm::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0.04) 0%,transparent 50%);pointer-events:none;}
.home-tile-sm:active{transform:scale(0.95);}
.home-tile-sm img{width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 1px 4px rgba(0,0,0,0.5));}

/* Glow border pulse on hero */
@keyframes glow-pulse{0%,100%{box-shadow:0 0 22px rgba(0,180,255,0.45),0 4px 14px rgba(0,0,0,0.5);}50%{box-shadow:0 0 32px rgba(0,200,255,0.65),0 4px 14px rgba(0,0,0,0.5);}}
.help-section{background:rgba(255,255,255,0.04);border-radius:10px;padding:10px 12px;border-left:3px solid var(--accent);}
.help-section strong{display:block;color:var(--text);font-family:'Barlow Condensed';font-size:0.95rem;font-weight:700;margin-bottom:4px;}
.btn-help{background:rgba(0,212,255,0.1);border:1.5px solid rgba(0,212,255,0.3);color:var(--accent);border-radius:50%;width:30px;height:30px;font-family:'Barlow Condensed';font-weight:900;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;}

/* ── CHANGELOG POPUP ── */
@keyframes changelogFadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes changelogFadeOut{from{opacity:1;}to{opacity:0;}}
@keyframes changelogSlideUp{from{opacity:0;transform:translateY(18px) scale(0.97);}to{opacity:1;transform:translateY(0) scale(1);}}