/* NFL palette: navy, red, white — same layout language as the LMS app. */
:root{
  --navy:#013369;
  --navy-2:#0b2a55;
  --navy-3:#06213f;
  --red:#d50a0a;
  --red-2:#b00808;
  --gold:#ffb612;
  --green:#0a8f4a;
  --ink:#141a24;
  --muted:#667085;
  --line:#e4e7ec;
  --bg:#f3f5f8;
  --card:#ffffff;
  --radius:16px;
  --shadow:0 6px 22px rgba(1,51,105,.10);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--red);text-decoration:none}
button{font-family:inherit}

/* ---------- Auth screens ---------- */
.auth-wrap{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(160deg,var(--navy-3),var(--navy) 55%,#123f7a)}
.brand{display:flex;flex-direction:column;align-items:center;margin-bottom:22px;color:#fff;text-align:center}
.brand .badge{width:66px;height:66px;border-radius:18px;display:grid;place-items:center;margin-bottom:12px;background:#fff;box-shadow:var(--shadow)}
.brand h1{font-size:23px;margin:0;letter-spacing:.3px}
.brand p{margin:4px 0 0;opacity:.8;font-size:13px}
.card{width:100%;max-width:400px;background:var(--card);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.card h2{margin:0 0 4px;font-size:20px}
.card .sub{margin:0 0 6px;color:var(--muted);font-size:14px;line-height:1.45}
label{display:block;font-size:13px;font-weight:600;color:#344054;margin:14px 0 6px}
input,select{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:12px;font-size:16px;background:#fbfcfd;color:var(--ink)}
input:focus,select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(1,51,105,.12);background:#fff}
.btn{width:100%;margin-top:20px;padding:14px;border:none;border-radius:12px;font-size:16px;font-weight:700;color:#fff;background:var(--red);cursor:pointer;transition:transform .05s,filter .15s}
.btn:active{transform:translateY(1px)}
.btn:disabled{filter:grayscale(.4);opacity:.6;cursor:default}
.btn.secondary{background:var(--navy)}
.btn.ghost{background:transparent;color:var(--navy);border:1px solid var(--line)}
.btn.small{width:auto;padding:9px 14px;font-size:14px;margin-top:10px}
.auth-alt{text-align:center;margin-top:16px;font-size:14px;color:var(--muted)}
.msg{margin-top:14px;padding:11px 13px;border-radius:10px;font-size:14px;display:none}
.msg.err{display:block;background:#fdecec;color:#a10808;border:1px solid #f5c6c6}
.msg.ok{display:block;background:#e7f7ee;color:#08683a;border:1px solid #b9e8cd}
.hint{font-size:12px;color:var(--muted);margin-top:6px}

/* ---------- App shell ---------- */
.app{min-height:100dvh;display:flex;flex-direction:column;background:var(--bg)}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--navy);color:#fff;border-bottom:3px solid var(--red)}
.iconbtn{background:transparent;border:none;color:#fff;padding:6px;cursor:pointer;display:grid;place-items:center;border-radius:10px}
.iconbtn:active{background:rgba(255,255,255,.12)}
.topbar .week{font-weight:800;font-size:16px;letter-spacing:.2px}
.topbar .spacer{flex:1}
.topbar .pill{font-size:12px;background:rgba(255,255,255,.15);padding:5px 10px;border-radius:999px;white-space:nowrap}
.topbar .pill.alert{background:var(--red)}

.content{flex:1;padding:18px 16px calc(90px + var(--safe-bottom));max-width:620px;width:100%;margin:0 auto}
.view{display:none}
.view.active{display:block;animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.section-title{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:6px 2px 10px;font-weight:700}
.panel{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:16px}
.panel h3{margin:0 0 6px;font-size:18px}
.panel p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.panel p + p{margin-top:10px}
.muted{color:var(--muted)}

/* hero cards */
.hero{background:linear-gradient(135deg,var(--navy),#174b8f);color:#fff;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:16px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;border:18px solid rgba(255,255,255,.06)}
.hero h3{margin:0 0 6px;font-size:19px}
.hero p{margin:0 0 14px;opacity:.88;font-size:14px;line-height:1.45}
.hero .btn{margin-top:0;background:var(--red)}
.hero.done{background:linear-gradient(135deg,#0b5d36,#0a8f4a)}
.hero.done .btn{background:#fff;color:#0b5d36}
.hero.won{background:linear-gradient(135deg,#5a3d00,#e0a000)}

.statrow{display:flex;gap:8px;margin-bottom:16px}
.stat{flex:1;background:var(--card);border-radius:12px;padding:12px 6px;text-align:center;box-shadow:var(--shadow);min-width:0}
.stat .v{font-weight:800;font-size:20px;color:var(--navy);white-space:nowrap}
.stat .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-top:2px}

/* ---------- Bottom nav ---------- */
.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;background:#fff;border-top:1px solid var(--line);padding-bottom:var(--safe-bottom)}
.bottomnav button{flex:1;background:transparent;border:none;padding:10px 0 12px;cursor:pointer;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600;position:relative}
.bottomnav button.active{color:var(--red)}
.bottomnav svg{width:24px;height:24px}
.bottomnav .dot{position:absolute;top:6px;left:calc(50% + 8px);min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--red);color:#fff;font-size:10px;font-weight:800;display:none;place-items:center}
.bottomnav .dot.on{display:grid}

/* ---------- Drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(3,15,33,.5);opacity:0;pointer-events:none;transition:opacity .2s;z-index:30}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;left:0;bottom:0;width:76%;max-width:320px;background:#fff;z-index:40;transform:translateX(-100%);transition:transform .22s ease;box-shadow:2px 0 24px rgba(0,0,0,.2);display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer .dhead{background:var(--navy);color:#fff;padding:20px 18px;border-bottom:3px solid var(--red)}
.drawer .dhead .u{font-weight:700;font-size:17px}
.drawer .dhead .e{opacity:.8;font-size:13px;margin-top:2px}
.drawer nav{padding:8px 0;flex:1;overflow:auto}
.drawer nav button{width:100%;text-align:left;background:transparent;border:none;padding:14px 18px;font-size:15px;cursor:pointer;display:flex;align-items:center;gap:12px;color:var(--ink)}
.drawer nav button:active{background:#eef2f7}
.drawer nav .sep{height:1px;background:var(--line);margin:8px 16px}
.drawer nav button.danger{color:var(--red)}

/* modal */
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);width:90%;max-width:400px;max-height:86dvh;overflow:auto;background:#fff;border-radius:16px;z-index:41;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.modal .mb{padding:20px}
.modal h3{margin:0 0 8px;font-size:18px}
.modal p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}

/* ---------- Week nav ---------- */
.wk-nav{display:flex;align-items:center;gap:10px;margin:2px 0 14px}
.wk-arrow{flex:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--navy);font-size:22px;font-weight:700;line-height:1;cursor:pointer;box-shadow:var(--shadow);display:grid;place-items:center}
.wk-arrow:disabled{opacity:.35;cursor:default;box-shadow:none}
.wk-select{flex:1;height:42px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font-size:15px;font-weight:800;padding:0 14px;box-shadow:var(--shadow);text-align:center;text-align-last:center;-webkit-appearance:none;appearance:none;cursor:pointer}

/* ---------- Team badges ---------- */
.tlogo{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:#f2f4f7}
.tlogo.sm{width:22px;height:22px}
.tlogo img{width:100%;height:100%;object-fit:contain}
.tlogo .fb{font-size:10px;font-weight:800;letter-spacing:.2px;line-height:1;color:#fff}
.tlogo.sm .fb{font-size:7.5px}

/* ---------- Pick screen ---------- */
.dayhead{font-size:12px;font-weight:800;color:var(--navy);text-transform:uppercase;letter-spacing:.6px;margin:18px 2px 8px}
.dayhead:first-child{margin-top:4px}
.game{background:var(--card);border-radius:14px;box-shadow:var(--shadow);margin-bottom:10px;overflow:hidden}
.game .meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);padding:9px 12px 0}
.game .meta .live{color:var(--red);font-weight:800}
.game .meta .saved{color:var(--green);font-weight:700}
.game .meta .need{color:var(--red);font-weight:700}
.matchup{display:flex;align-items:stretch;gap:8px;padding:9px 10px 10px}
.side{flex:1;min-width:0;display:flex;align-items:center;gap:9px;background:#f8f9fb;border:2px solid transparent;border-radius:12px;padding:10px 9px;cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border-color .12s,background .12s}
.side.home{flex-direction:row-reverse;text-align:right}
.side .tn{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side .ts{font-size:11.5px;color:var(--muted)}
.side .txt{min-width:0;flex:1}
.side .sc{font-weight:800;font-size:18px;font-variant-numeric:tabular-nums;color:var(--ink)}
.side:not(:disabled):active{transform:translateY(1px)}
.side.mine{border-color:var(--navy);background:#eaf0f8}
.side.mine .tn::after{content:" ✓";color:var(--navy)}
.side:disabled{cursor:default}
.side.won .tn{color:var(--green)}
.side.lost{opacity:.55}
.at{align-self:center;color:var(--muted);font-size:12px;font-weight:800}
.game.closed .side{background:#f3f4f6}
.game.closed .side.mine{background:#eaf0f8}
.game .foot{border-top:1px solid var(--line);padding:8px 12px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:3px 8px;border-radius:999px;background:#eef2f7;color:#334155}
.chip.hid{background:#f1f2f5;color:#8a91a0;font-style:italic;font-weight:500}
.chip.none{background:#fff;border:1px dashed #cbd2dc;color:#98a2b3;font-weight:500}
.chip.pts1{background:#e7f7ee;color:#08683a}
.chip.pts2{background:#fff2cc;color:#7a5200}
.chip.pts0{background:#fdecec;color:#a10808}
.chip .edited{opacity:.75}
.mypts{margin-left:auto;font-weight:800;color:var(--ink)}

.reveal-box{background:linear-gradient(135deg,var(--navy-3),var(--navy));color:#fff;border-radius:var(--radius);padding:16px 18px;margin:6px 0 16px;box-shadow:var(--shadow)}
.reveal-box .rb-h{font-weight:800;font-size:16px;margin-bottom:6px}
.reveal-box p{margin:0;font-size:13.5px;line-height:1.5;opacity:.9}
.reveal-box .btn{background:#fff;color:var(--navy);margin-top:14px}
.reveal-box .btn:disabled{background:rgba(255,255,255,.25);color:#fff}
.lock-note{background:#fff7e6;border:1px solid #ffdfa3;color:#7a5200;border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:12px;line-height:1.45}
.progress{height:6px;background:#e4e7ec;border-radius:999px;overflow:hidden;margin:8px 0 2px}
.progress > i{display:block;height:100%;background:var(--red);border-radius:999px}

/* ---------- Week grid ---------- */
.grid-wrap{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow-x:auto}
table.grid{width:100%;border-collapse:collapse;font-size:13px}
table.grid th{background:var(--navy);color:#fff;font-size:10px;font-weight:700;padding:9px 2px;text-transform:uppercase;letter-spacing:.3px}
table.grid th.g{text-align:left;padding-left:12px}
table.grid th.me{background:var(--red)}
table.grid td{border-top:1px solid var(--line);padding:7px 3px;text-align:center;vertical-align:middle}
table.grid td.g{text-align:left;padding-left:10px;white-space:nowrap;width:1%}
table.grid td.g .gm{display:flex;align-items:center;gap:5px;font-weight:700;font-size:12px}
table.grid td.g .gs{font-size:11px;color:var(--muted);margin-top:2px}
.cell{display:inline-flex;flex-direction:column;align-items:center;gap:1px;min-width:30px}
.cell .ab{font-weight:800;font-size:11.5px}
.cell .p{font-size:10px;font-weight:800;border-radius:6px;padding:0 5px}
.cell .p.p2{background:#ffd75e;color:#5a3d00}
.cell .p.p1{background:#c9efda;color:#08683a}
.cell .p.p0{background:#f6d0d0;color:#a10808}
.cell.hidden .ab{color:#98a2b3;font-weight:600}
.cell.missing .ab{color:#cbd2dc}
table.grid tr.total td{background:#f6f8fb;font-weight:800;font-size:15px;color:var(--navy);border-top:2px solid var(--navy)}
table.grid tr.total td.g{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.crown{font-size:13px}
.legend{font-size:12px;color:var(--muted);margin:10px 4px 0;line-height:1.6}

/* ---------- Season table ---------- */
.table-wrap{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl th{background:var(--navy);color:#fff;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.4px;padding:10px 6px;text-align:center}
table.tbl th.left,table.tbl td.left{text-align:left;padding-left:14px}
table.tbl td{padding:13px 6px;text-align:center;border-top:1px solid var(--line)}
table.tbl tr.me{background:#eef3fa}
table.tbl tr.click{cursor:pointer}
table.tbl .pos{color:var(--muted);font-weight:700;width:28px}
table.tbl .pl{font-weight:700}
table.tbl .pts{font-weight:800;color:var(--navy);font-size:16px}
table.tbl tr:first-child .pos{color:var(--gold)}

/* history */
.wkrow{display:flex;align-items:center;gap:10px;padding:12px 4px;border-top:1px solid var(--line);font-size:14px;cursor:pointer}
.wkrow:first-child{border-top:none}
.wkrow .w{font-weight:800;color:var(--navy);width:70px}
.wkrow .d{flex:1;color:var(--muted);font-size:13px}
.wkrow .s{font-weight:800;font-size:16px}

/* list rows (admin) */
.list-row{display:flex;align-items:center;gap:10px;padding:13px 2px;border-bottom:1px solid var(--line)}
.list-row:last-child{border-bottom:none}
.list-row .grow{flex:1;min-width:0}
.list-row .name{font-weight:700}
.list-row .meta{font-size:13px;color:var(--muted)}
.tag{font-size:10.5px;font-weight:800;padding:3px 7px;border-radius:999px;text-transform:uppercase;letter-spacing:.3px}
.tag.admin{background:#e6edf7;color:var(--navy)}
.tag.ok{background:#e7f7ee;color:#08683a}
.tag.wait{background:#fff2cc;color:#7a5200}
.linkbtn{background:none;border:none;color:var(--red);font-size:13px;font-weight:700;cursor:pointer;padding:4px}
.linkbox{word-break:break-all;background:#f3f5f8;border:1px solid var(--line);border-radius:10px;padding:10px;font-size:13px;font-family:ui-monospace,Menlo,Consolas,monospace;margin-top:10px}
.row2{display:flex;gap:10px}
.row2 > *{flex:1;min-width:0}
.field-group{margin-bottom:6px}
.empty{color:var(--muted);font-size:14px;padding:6px 2px}