/* Layout: one phone-width column. A maroon scoreboard carries streak, XP and rank;
   cards stack beneath it; a fixed tab bar sits at the bottom.
   Palette: maroon, white, grey and black. Every tint is a step of that maroon or that grey. */
:root{
  --bg:#F1F1F2; --surface:#FFFFFF; --ink:#141415; --muted:#5C5F65; --line:#D5D6DA; --soft:#E7E8EB;
  --maroon:#7B1424; --on-maroon:#FFFFFF; --maroon-dim:#EBD0D5; --maroon-soft:#F6E9EB; --accent-text:#7B1424;
  --meter:#7B1424; --meter-track:#EBD2D6;
  --chip:#141415; --on-chip:#FFFFFF;
  --alert:#141415; --on-alert:#FFFFFF;
  --display:'Barlow Condensed','Arial Narrow','Roboto Condensed',Impact,sans-serif;
  --body:'Barlow',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0C0C0D; --surface:#19191B; --ink:#F2F2F3; --muted:#A6A8AE; --line:#303136; --soft:#26272A;
    --maroon:#7B1424; --on-maroon:#FFFFFF; --maroon-dim:#E6C6CC; --maroon-soft:#2C1217; --accent-text:#EBADB7;
    --meter:#DB6A7C; --meter-track:#551B26;
    --chip:#0C0C0D; --on-chip:#FFFFFF;
    --alert:#F2F2F3; --on-alert:#141415;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0C0C0D; --surface:#19191B; --ink:#F2F2F3; --muted:#A6A8AE; --line:#303136; --soft:#26272A;
  --maroon:#7B1424; --on-maroon:#FFFFFF; --maroon-dim:#E6C6CC; --maroon-soft:#2C1217; --accent-text:#EBADB7;
  --meter:#DB6A7C; --meter-track:#551B26;
  --chip:#0C0C0D; --on-chip:#FFFFFF;
  --alert:#F2F2F3; --on-alert:#141415;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{
  background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.4;
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:12px 96px; font-variant-numeric:tabular-nums;
}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--ink); outline-offset:2px}
.shell{max-width:440px; margin:0 auto; display:flex; flex-direction:column; gap:12px}

/* demo strip */
.demo{display:flex; flex-direction:column; gap:8px; padding:10px 12px; border:1px dashed var(--line); border-radius:var(--r)}
.demo-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.demo small{color:var(--muted); font-size:13px}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--surface)}
.seg button{border:0; background:transparent; padding:6px 14px; font-weight:600; font-size:14px; color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.ghost{border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:6px 12px; font-size:14px; font-weight:500}

/* scoreboard */
.board{background:var(--maroon); color:var(--on-maroon); border-radius:var(--r); padding:14px 16px; display:flex; flex-direction:column; gap:10px}
.brand{font-family:var(--display); font-weight:700; font-size:26px; letter-spacing:.06em; text-transform:uppercase; line-height:1.1; display:flex; align-items:center; gap:7px}
.brand span{background:var(--chip); color:var(--on-chip); border-radius:5px; padding:1px 7px 2px}
.who{color:var(--maroon-dim); font-size:14px; margin-top:4px}
.cells{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.35fr); gap:8px}
.cell{border:1px solid color-mix(in srgb, var(--on-maroon) 30%, transparent); border-radius:10px; padding:8px 10px; min-width:0}
.cell b{display:block; font-family:var(--display); font-size:30px; line-height:1; color:var(--on-maroon); font-weight:700; font-variant-numeric:normal}
.cell b.word{font-size:19px; padding-block:5.5px; overflow-wrap:anywhere}
.cell i{font-style:normal; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--maroon-dim)}

/* my numbers strip */
.nums{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border:1px solid var(--line); background:var(--surface); border-radius:var(--r); padding:10px 4px; text-align:center; width:100%}
.nums span{display:block; min-width:0; border-left:1px solid var(--line); padding:0 4px}
.nums span:first-child{border-left:0}
.nums b{display:block; font-family:var(--display); font-size:24px; line-height:1; font-weight:700; font-variant-numeric:normal}
.nums i{font-style:normal; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}

h2{font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:.02em; margin:6px 0 0; text-wrap:balance}
.sub{color:var(--muted); font-size:14px; margin:0}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px; display:flex; flex-direction:column; gap:10px; min-width:0}
.card h3{margin:0; font-size:17px; font-weight:600}
.card p{margin:0; color:var(--muted); font-size:15px}
.cat{font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--accent-text)}
.cat.rest, .cat.learn, .cat.arm{color:var(--muted)}
.tri{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.tri.two{grid-template-columns:repeat(2,1fr)}
.tri button, .opt{border:1px solid var(--line); background:var(--bg); border-radius:10px; padding:9px 6px; font-weight:600; font-size:15px; display:flex; flex-direction:column; align-items:center; gap:1px; min-width:0}
.tri button small{font-weight:500; font-size:12px; color:var(--muted)}
.tri button[aria-pressed="true"].done{background:var(--maroon); border-color:var(--maroon); color:var(--on-maroon)}
.tri button[aria-pressed="true"].done small{color:var(--on-maroon)}
.tri button[aria-pressed="true"].part{background:var(--soft); border-color:var(--muted); color:var(--ink)}
.tri button[aria-pressed="true"].skip{background:var(--surface); border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); color:var(--ink)}
.opts{display:flex; flex-direction:column; gap:6px}
.opt{flex-direction:row; justify-content:flex-start; text-align:left; padding:10px 12px; font-weight:500}
.opt[aria-pressed="true"]{border-color:var(--accent-text); background:var(--maroon-soft)}
.opt.wrong[aria-pressed="true"]{border-color:var(--muted); background:var(--soft)}
.note{border-radius:10px; padding:10px 12px; font-size:14px}
.note.good{background:var(--maroon-soft); color:var(--ink)}
.note.warn{background:var(--soft); color:var(--ink); border-left:3px solid var(--ink)}
.note.stop{background:var(--alert); color:var(--on-alert)}
.note.rest{background:var(--soft); color:var(--ink)}
.arm{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.arm button{border:1px solid var(--line); background:var(--bg); border-radius:10px; padding:9px 4px; font-weight:600; font-size:14px}
.arm button[aria-pressed="true"]{background:var(--maroon-soft); border-color:var(--accent-text)}
.arm button[aria-pressed="true"].sore{background:var(--soft); border-color:var(--ink)}
.arm button[aria-pressed="true"].pain{background:var(--alert); border-color:var(--alert); color:var(--on-alert)}
.cta{border:0; background:var(--maroon); color:var(--on-maroon); border-radius:12px; padding:14px; font-weight:600; font-size:17px; width:100%}
.cta[disabled]{opacity:.55; cursor:default}
.link{border:0; background:none; padding:0; color:var(--accent-text); font-weight:600; font-size:14px; text-align:left; text-decoration:underline}
.row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.row input, .row select{border:1px solid var(--line); background:var(--bg); border-radius:10px; padding:9px 10px; min-width:0; flex:1 1 90px}
.row label{font-size:14px; color:var(--muted); flex:1 1 100%}
.small{border:1px solid var(--accent-text); background:transparent; color:var(--accent-text); border-radius:10px; padding:9px 14px; font-weight:600}
.small.solid{background:var(--maroon); border-color:var(--maroon); color:var(--on-maroon)}
.btnrow{display:flex; gap:8px; flex-wrap:wrap}
.fgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; align-items:end}
.fgrid label{display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); min-width:0}
.fgrid input, .fgrid select{border:1px solid var(--line); background:var(--bg); border-radius:10px; padding:9px 10px; min-width:0; width:100%; color:var(--ink)}
.fgrid .wide{grid-column:1 / -1}

/* figures: stat tiles and meters */
.kpis{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.kpi{border:1px solid var(--line); border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:5px; min-width:0}
.kpi .lab{font-size:13px; color:var(--muted)}
.kpi b{font-family:var(--display); font-size:36px; line-height:1; font-weight:700; font-variant-numeric:normal}
.kpi small{font-size:12px; color:var(--muted)}
.meter{position:relative; height:8px; border-radius:999px; background:var(--meter-track)}
.meter .fill{display:block; height:100%; border-radius:999px; background:var(--meter)}
.meter .tick{position:absolute; top:-3px; bottom:-3px; width:2px; margin-left:-1px; background:var(--ink); border-radius:1px}
.game{display:flex; flex-direction:column; gap:6px; padding:10px 0; border-top:1px solid var(--line)}
.game:first-child{border-top:0; padding-top:0}
.game .top{display:flex; justify-content:space-between; gap:8px; align-items:center}
.game .top strong{font-size:15px; min-width:0}
.game .line{font-size:13px; color:var(--muted)}
.game .mrow{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center}
.game .mrow b{font-family:var(--display); font-size:18px; font-weight:700; font-variant-numeric:normal}
.ptable{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:8px; font-size:14px; align-items:baseline}
.ptable .h{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.ptable .num{text-align:right}
.ptable strong{font-weight:600}

/* craft */
.dots{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.dot{aspect-ratio:1; border-radius:8px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--muted); max-width:100%}
.dot.full{background:var(--maroon); border-color:var(--maroon); color:var(--on-maroon)}
.dot.part{background:var(--soft); border-color:var(--muted); color:var(--ink)}
.dot.rest{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.dot.today{outline:2px solid var(--ink); outline-offset:1px}
.legend{display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--muted)}
.legend span::before{content:""; display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; border:1px solid var(--line); vertical-align:-1px}
.legend .lf::before{background:var(--maroon); border-color:var(--maroon)} .legend .lp::before{background:var(--soft); border-color:var(--muted)} .legend .lr::before{background:var(--ink); border-color:var(--ink)}
.bar{height:10px; border-radius:999px; background:var(--meter-track); overflow:hidden}
.bar > span{display:block; height:100%; background:var(--meter); border-radius:999px}
.inv{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px}
.inv div{border:1px solid var(--line); border-radius:10px; padding:8px 4px; text-align:center; min-width:0}
.inv b{display:block; font-family:var(--display); font-size:24px; line-height:1; font-weight:700; font-variant-numeric:normal}
.inv i{font-style:normal; font-size:11px; color:var(--muted)}
.recipe{border:1px solid var(--line); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:8px}
.recipe.locked{opacity:.6}
.recipe .head{display:flex; justify-content:space-between; align-items:center; gap:8px}
.recipe .head strong{font-size:16px}
.recipe p{font-size:13px}
.mat{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; align-items:center; font-size:14px}
.mat .meter{grid-column:1 / -1}
.pill{font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; border-radius:999px; padding:3px 8px; white-space:nowrap; border:1px solid transparent}
.pill.open{background:var(--maroon-soft); color:var(--accent-text)} .pill.lock{background:var(--soft); color:var(--muted)} .pill.hot{background:transparent; color:var(--ink); border-color:var(--ink)} .pill.red{background:var(--maroon); color:var(--on-maroon)} .pill.blue{background:var(--soft); color:var(--ink)}

/* team + coach */
.list{display:flex; flex-direction:column}
.li{display:grid; grid-template-columns:22px minmax(0,1fr) auto auto; gap:10px; align-items:center; padding:10px 0; border-top:1px solid var(--line)}
.li:first-child{border-top:0}
.li .n{font-family:var(--display); font-size:18px; color:var(--muted)}
.li .name{font-weight:600; min-width:0}
.li .name small{display:block; font-weight:400; color:var(--muted); font-size:12px}
.li .v{font-family:var(--display); font-size:20px; text-align:right}
.li .v small{display:block; font-family:var(--body); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.li.me{background:var(--maroon-soft); margin-inline:-14px; padding-inline:14px}
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; min-width:0}
.tile b{display:block; font-family:var(--display); font-size:30px; line-height:1; font-variant-numeric:normal}
.tile i{font-style:normal; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.flag{display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--line)}
.flag:first-child{border-top:0}
.flag div{flex:1; min-width:0; font-size:15px}
.flag div small{display:block; color:var(--muted); font-size:13px}
.staff{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; padding:10px 0; border-top:1px solid var(--line); align-items:center}
.staff:first-child{border-top:0}
.staff .meta{grid-column:1 / -1; display:flex; gap:6px; flex-wrap:wrap}

/* tab bar */
.tabs{position:fixed; left:0; right:0; bottom:0; background:var(--surface); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom, 0px); padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); z-index:5}
.tabs div{max-width:440px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr)}
.tabs button{border:0; background:none; padding:14px 4px 12px; font-weight:600; font-size:15px; color:var(--muted); border-top:3px solid transparent; margin-top:-1px}
.tabs button[aria-current="page"]{color:var(--accent-text); border-top-color:var(--meter)}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(76px + env(safe-area-inset-bottom, 0px)); background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:999px; font-weight:600; font-size:14px; z-index:6; max-width:calc(100% - 32px); text-align:center}
@media (prefers-reduced-motion: no-preference){ .toast{animation:rise .25s ease-out} @keyframes rise{from{opacity:0; transform:translate(-50%,8px)} to{opacity:1; transform:translate(-50%,0)}} }

/* ---------- live version 1 additions ---------- */
.board .top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.board .acct{border:1px solid color-mix(in srgb, var(--on-maroon) 40%, transparent); background:transparent; color:var(--on-maroon); border-radius:999px; padding:5px 12px; font-size:13px; font-weight:600; white-space:nowrap}
.tabs div.three{grid-template-columns:repeat(3,1fr)}
.field{display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted)}
.field input, .field select, .field textarea{border:1px solid var(--line); background:var(--bg); border-radius:10px; padding:11px 12px; font-size:16px; color:var(--ink); width:100%; min-width:0}
.code-in{font-family:var(--display); font-size:28px !important; letter-spacing:.14em; text-transform:uppercase; text-align:center}
.codebox{font-family:var(--display); font-size:30px; font-weight:700; letter-spacing:.14em; text-align:center; border:2px dashed var(--line); border-radius:12px; padding:12px 8px; user-select:all; -webkit-user-select:all; overflow-wrap:anywhere}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chips button{border:1px solid var(--line); background:var(--bg); border-radius:999px; padding:8px 14px; font-weight:600; font-size:14px}
.chips button[aria-pressed="true"]{background:var(--maroon-soft); border-color:var(--accent-text); color:var(--accent-text)}
.check{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--ink)}
.check input{width:22px; height:22px; flex:none; margin:0; accent-color:var(--maroon)}
.banner{border:1px dashed var(--line); border-radius:var(--r); padding:8px 12px; font-size:13px; color:var(--muted); display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.hero{display:flex; flex-direction:column; gap:6px; padding:8px 2px}
.hero .brand{font-size:44px; color:var(--ink)}
.hero .brand span{background:var(--maroon); color:var(--on-maroon)}
.hero p{margin:0; color:var(--muted)}
.cta.alt{background:transparent; color:var(--accent-text); border:1px solid var(--accent-text)}
.daylog{display:grid; grid-template-columns:54px minmax(0,1fr); gap:2px 10px; font-size:13px; padding:6px 0; border-top:1px solid var(--line)}
.daylog:first-child{border-top:0}
.daylog b{font-weight:600}
.daylog span{color:var(--muted)}
.ans{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; font-size:14px; align-items:center}
.ans .meter{grid-column:1 / -1}
.quote{font-size:14px; border-left:3px solid var(--line); padding-left:10px; color:var(--ink)}
.quote small{display:block; color:var(--muted)}
.spin{opacity:.6; pointer-events:none}
.staffbtn{border:0; background:none; padding:0; text-align:left; font-weight:600; font-size:16px; color:var(--ink)}