/* app.css — on-screen UI. Print styling is in print.css. */
:root{
  --blue:#2563eb;  --blue2:#6394f0;  --blue3:#9bb8f2;
  --orange:#ea580c;--orange2:#f08c5a;
  --purple:#7c3aed;--purple2:#a982e6;
  --green:#15803d; --green2:#3f9e63;
  --slate:#334155; --ink:#1f1f1f;   --alert:#dc2626;
  --bg:#f3f1ec; --panel:#ffffff; --line:#e2ded4; --muted:#8a8a8a;
  --good:#15803d; --ok:#9a7a17; --bad:#c01919;
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html{ height:100%; overflow:hidden; }
/* position:fixed locks the document so iOS can't rubber-band/bounce and reveal the
   black behind the app. Inner scrolling happens only inside #screen. */
body{ position:fixed; inset:0; overflow:hidden; overscroll-behavior:none; touch-action:manipulation;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; background:var(--bg); color:var(--ink); }
button{ font:inherit; color:inherit; border:none; background:none; cursor:pointer; }

#app{ display:flex; flex-direction:column; height:100%; max-width:520px; margin:0 auto; background:var(--bg); overflow:hidden; }
#appbar{ flex:0 0 auto; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 8px) 14px 8px; font-size:13px; font-weight:700; }
#appbar .ab-title{ display:flex; flex-direction:column; line-height:1.25; }
#appbar .ab-sub{ font-size:10px; font-weight:600; color:#aaa; letter-spacing:.04em; }
#appbar .ab-right{ display:flex; align-items:center; gap:10px; }
#appbar .ab-score{ color:#7CFC9A; font-size:18px; font-weight:800; }
#appbar .ab-undo{ background:#3a3a3a; border-radius:8px; padding:6px 10px; font-size:12px; color:#eee; }
#appbar .ab-undo:active{ background:#555; }

#screen{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; }

#tabbar{ flex:0 0 auto; display:flex; background:#fff; border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
#tabbar .tab{ flex:1; text-align:center; padding:8px 2px 9px; font-size:10px; font-weight:700; color:#9a9a9a; }
#tabbar .tab .ic{ display:block; font-size:19px; margin-bottom:1px; filter:grayscale(1) opacity(.6); }
#tabbar .tab.on{ color:var(--ink); }
#tabbar .tab.on .ic{ filter:none; }

/* ---------- TRACK ---------- */
.track{ display:flex; flex-direction:column; flex:1; }
.ctrl{ display:flex; gap:7px; padding:9px 10px; background:#2b2b2b; }
.chip{ flex:1; background:#3a3a3a; border-radius:11px; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:7px 10px; }
.chip:active{ filter:brightness(1.25); }
.chip .lab{ font-size:9px; color:#aaa; font-weight:700; letter-spacing:.05em; }
.chip .val{ font-size:18px; font-weight:800; }
.chip .plus{ background:var(--green); border-radius:7px; width:26px; height:26px; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:800; }
.chip.them .plus{ background:#9aa0a8; }
.chip.rot{ flex:0 0 33%; justify-content:space-between; }
.chip.rot .val{ color:#ffd27a; }
.chip.rot .turn{ background:#4a4a4a; border-radius:7px; width:28px; height:26px; display:flex; align-items:center; justify-content:center; font-size:15px; }

.pickwrap{ padding:8px 10px; background:#ece9e2; border-bottom:2px solid #d8d4ca; }
.pmini{ font-size:9px; letter-spacing:.1em; color:#999; font-weight:800; margin-bottom:6px; }
.pgrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.pt{ background:#fff; border:1px solid #dcd8cf; border-radius:11px; padding:7px 1px; text-align:center; }
.pt:active{ background:#f0ede6; }
.pt .n{ font-size:17px; font-weight:800; color:var(--ink); line-height:1; }
.pt .nm{ font-size:8px; color:#8a8a8a; font-weight:600; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pt.sel{ background:var(--ink); border-color:var(--ink); }
.pt.sel .n{ color:#fff; } .pt.sel .nm{ color:#bbb; }
.pickwrap.flash{ animation:flash .5s ease; }
@keyframes flash{ 0%,100%{ background:#ece9e2; } 40%{ background:#ffe2cc; } }

.outwrap{ flex:1 1 auto; display:flex; flex-direction:column; padding:9px 10px 11px; gap:8px; }
.selhdr{ font-size:14px; font-weight:800; color:var(--ink); text-align:center; }
.selhdr .muted{ color:#999; font-weight:600; font-size:11px; }
.seg{ display:flex; background:#ddd9d0; border-radius:10px; overflow:hidden; }
.seg .seg-btn{ flex:1; text-align:center; padding:9px 2px; font-size:11px; font-weight:800; color:#888; }
.seg .seg-btn.on{ background:var(--orange); color:#fff; }
.orow{ display:grid; gap:8px; flex:1 1 0; }
.orow.cols-2{ grid-template-columns:repeat(2,1fr); }
.orow.cols-3{ grid-template-columns:repeat(3,1fr); }
.orow.cols-4{ grid-template-columns:repeat(4,1fr); }
.ob{ border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:20px; text-align:center; line-height:1.1; }
.ob:active{ transform:scale(.97); }
.ob small{ font-size:10px; font-weight:600; opacity:.85; margin-top:3px; }

/* shared bg utilities */
.bg-blue{background:var(--blue)} .bg-blue2{background:var(--blue2)} .bg-blue3{background:var(--blue3)}
.bg-orange{background:var(--orange)} .bg-orange2{background:var(--orange2)}
.bg-purple{background:var(--purple)} .bg-purple2{background:var(--purple2)}
.bg-green{background:var(--green)} .bg-green2{background:var(--green2)}
.bg-gray{background:#aeb3ba}
.ob.dim,.dim{ opacity:.62; }

/* ---------- STATS ---------- */
.stats{ padding:11px; display:flex; flex-direction:column; gap:9px; }
.sm-toggle{ display:flex; background:#e6e3dc; border-radius:9px; overflow:hidden; }
.sm-toggle button{ flex:1; padding:8px; font-size:12px; font-weight:800; color:#888; }
.sm-toggle button.on{ background:var(--ink); color:#fff; }
.teamrow{ display:flex; gap:7px; }
.tcard{ flex:1; background:#fff; border:1px solid var(--line); border-radius:13px; padding:9px 4px; text-align:center; }
.tcard .lab{ font-size:8px; letter-spacing:.08em; color:#999; font-weight:800; }
.tcard .big{ font-size:22px; font-weight:800; color:var(--ink); }
.alerts{ display:flex; flex-direction:column; gap:5px; }
.al{ border-radius:9px; padding:8px 11px; font-size:12px; font-weight:700; display:flex; gap:7px; align-items:center; }
.al.hot{ background:#fff2e8; color:#b8430a; } .al.cold{ background:#fff8e6; color:#8a6d14; } .al.tgt{ background:#fde3e3; color:var(--alert); }
.al .none{ color:#aaa; font-weight:600; font-style:italic; }
.ptable{ background:#fff; border:1px solid var(--line); border-radius:13px; overflow:hidden; }
.ph,.pr{ display:flex; align-items:center; font-size:12px; }
.ph{ background:#efece4; color:#888; font-weight:800; font-size:9px; letter-spacing:.04em; padding:7px 10px; }
.pr{ padding:8px 10px; border-top:1px solid #f1eee7; }
.ph .nmh,.pr .nmh{ flex:0 0 84px; text-align:left; font-weight:800; color:#333; }
.ph .c,.pr .c{ flex:1; text-align:center; }
.v-good{ color:var(--good); font-weight:800; } .v-ok{ color:var(--ok); font-weight:800; } .v-bad{ color:var(--bad); font-weight:800; }
.rotbar{ display:flex; gap:4px; }
.rc{ flex:1; background:#fff; border:1px solid var(--line); border-radius:9px; text-align:center; padding:6px 0; }
.rc .rl{ font-size:8px; color:#aaa; font-weight:800; } .rc .rv{ font-size:15px; font-weight:800; color:#333; }
.rc.best{ background:#ecf7ef; border-color:#bfe3c9; } .rc.worst{ background:#fde3e3; border-color:#eab3b3; }
.section-title{ font-size:10px; font-weight:800; letter-spacing:.08em; color:#999; margin:2px 2px -2px; }

/* ---------- OPP ---------- */
.opp{ padding:11px; display:flex; flex-direction:column; gap:11px; }
.sec{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:11px; }
.sec h4{ font-size:11px; letter-spacing:.04em; color:var(--slate); margin-bottom:9px; font-weight:800; }
.sec h4 span{ color:#aaa; font-weight:600; font-size:9px; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.ochip{ min-width:52px; border:1px solid #d8d4ca; border-radius:11px; background:#f8f6f1; text-align:center; padding:6px 8px; }
.ochip:active{ filter:brightness(.96); }
.ochip .n{ font-size:16px; font-weight:800; color:var(--ink); } .ochip .av{ font-size:10px; font-weight:700; color:var(--good); margin-top:1px; }
.ochip.sel{ background:var(--slate); border-color:var(--slate); } .ochip.sel .n{ color:#fff; } .ochip.sel .av{ color:#cdd6e2; }
.ochip.low{ background:#fde3e3; border-color:#eab3b3; } .ochip.low .av{ color:var(--bad); }
.ochip.hot{ background:#fff2e8; border-color:#f0b483; } .ochip.hot .av{ color:#b8430a; }
.ochip.add{ border-style:dashed; color:#999; font-size:22px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.rate{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.arate{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.rb,.ab2{ border-radius:11px; padding:13px 0; text-align:center; font-size:17px; font-weight:800; color:#fff; }
.rb:active,.ab2:active{ transform:scale(.97); }
.opp-note{ font-size:11px; color:var(--bad); font-weight:700; text-align:center; margin-top:9px; }

/* ---------- MATCH / SETTINGS ---------- */
.match{ padding:11px; display:flex; flex-direction:column; gap:11px; }
.mcard{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:13px; }
.mcard h3{ font-size:15px; color:var(--ink); margin-bottom:3px; }
.mcard .meta{ font-size:11px; color:var(--muted); margin-bottom:10px; }
.setrow{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-top:1px solid #f1eee7; font-size:13px; }
.setrow:first-of-type{ border-top:none; }
.setrow.active{ font-weight:800; }
.setrow .sscore{ color:var(--slate); font-weight:800; }
.setrow .mini{ font-size:11px; color:var(--blue); font-weight:700; }
.btnrow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:11px; }
.btn{ border-radius:10px; padding:11px 14px; font-size:13px; font-weight:800; background:#eceae3; color:#333; }
.btn:active{ filter:brightness(.95); }
.btn.primary{ background:var(--ink); color:#fff; }
.btn.blue{ background:var(--blue); color:#fff; }
.btn.full{ flex:1 1 100%; text-align:center; }
.btn.half{ flex:1 1 40%; text-align:center; }
.field{ display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.field label{ font-size:10px; font-weight:800; letter-spacing:.05em; color:#999; }
.field input{ border:1px solid var(--line); border-radius:9px; padding:9px 11px; font-size:14px; background:#fbfaf7; }
.toggle-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-top:1px solid #f1eee7; font-size:13px; font-weight:700; }
.roster-edit{ display:flex; gap:6px; align-items:center; margin-bottom:6px; }
.roster-edit input.num{ flex:0 0 46px; } .roster-edit input.nm{ flex:1; }
.roster-edit .pass{ font-size:11px; font-weight:800; color:#999; display:flex; align-items:center; gap:3px; }
.roster-edit .del{ color:var(--bad); font-size:18px; font-weight:800; padding:0 6px; }
.past-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-top:1px solid #f1eee7; font-size:13px; }
.empty{ color:#aaa; font-size:12px; font-style:italic; padding:6px 0; }

/* ---------- TOAST ---------- */
.toast{ position:fixed; left:50%; bottom:74px; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:9px 16px; border-radius:999px; font-size:13px; font-weight:700;
  opacity:0; pointer-events:none; transition:.22s; z-index:50; max-width:90%; }
.toast.show{ opacity:.96; transform:translateX(-50%) translateY(0); }