/* stats: rules no other view shares. Loads after app.css in the same layer. */
@layer app {
  /* ---------- stats ---------- */
  .stats {
  display: grid; gap: 12px 16px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "targets actions" "feed feed";
}
  @media (orientation: portrait) and (max-width: 999px) {
    .stats { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1.15fr) auto; grid-template-areas: "targets" "actions" "feed"; }
  }
  .targets, .actions { min-height: 0; display: flex; flex-direction: column; }
  .targets { grid-area: targets; }
  .actions { grid-area: actions; }
  .targets .zone-h, .actions .zone-h { margin-bottom: 8px; }
  .team-tgts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
  .tgt {
  min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 8px;
  font: 400 20px/1 var(--f-slate); letter-spacing: .05em; text-transform: uppercase;
}
  .tgt small { font: 600 9px var(--f-mono); letter-spacing: .2em; color: var(--mute); }
  .chips { flex: 1; min-height: 0; overflow-y: auto; align-content: start; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .chip {
  position: relative; min-height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; transition: transform .12s;
}
  /* The armed player's time left, draining under him; the amber frame is the static cue. */
  .chip.is-sticky::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--amber); transform-origin: left; animation: drain var(--left, 8s) linear forwards; }
  .chip b { font: 400 46px/.75 var(--f-led); color: var(--phos); }
  .chip span { max-width: 100%; padding: 0 6px; font: 600 10.5px/1.15 var(--f-mono); text-transform: uppercase; text-align: center; overflow-wrap: break-word; hyphens: manual; text-wrap: balance; }
  .chip em { position: absolute; top: 5px; right: 6px; font: 400 16px/1 var(--f-led); font-style: normal; padding: 1px 5px; border-radius: 3px; background: var(--sunk); color: var(--amber); }
  .chip.is-bench { border-style: dashed; background: var(--sunk); }
  .chip.is-bench b { color: var(--phos-dim); text-shadow: none; }
  .tgt:not(:disabled):active, .chip:not(:disabled):active { transform: scale(.96); }
  .tgt.is-sel, .chip.is-sel { background: var(--sel-bg); border-color: var(--amber); box-shadow: var(--glow-a); color: var(--amber); }
  .chip.is-sel b { color: var(--amber); text-shadow: var(--glow-a); }
  .stat-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: minmax(64px, 1fr); gap: 10px; }
  .stat-btn {
  position: relative; min-height: 0; padding: 12px 14px; display: flex; align-items: flex-end; text-align: left;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: var(--inner);
  font: 400 clamp(20px, 2.2vw, 26px)/1 var(--f-slate); letter-spacing: .04em; text-transform: uppercase;
  transition: transform .08s, border-color .12s, box-shadow .12s;
}
  .stat-btn.is-sel { background: var(--sel-bg); border-color: var(--amber); box-shadow: var(--glow-a); color: var(--amber); }
  .stat-btn.is-sel em { background: var(--amber); color: var(--on-amber); }
  .stat-btn:not(:disabled):active { transform: scale(.96); }
  .stat-btn em { position: absolute; top: 9px; right: 10px; padding: 1px 7px; border-radius: 3px; font: 400 22px/1 var(--f-led); font-style: normal; background: var(--sunk); color: var(--amber); }
  .stat-btn[data-tone="goal"] { border-color: var(--amber); border-width: 2px; color: var(--amber); }
  .stat-btn[data-tone="good"] { border-left: 4px solid var(--phos); }
  .stat-btn[data-tone="bad"] { border-left: 4px solid var(--tally); }
  .stat-btn[data-tone^="card"]::before { content: ''; position: absolute; top: 11px; right: 14px; width: 20px; height: 28px; border-radius: 3px; background: var(--c); transform: rotate(9deg); box-shadow: 0 0 12px var(--c); }
  /* Estadísticas enters by block, not by button: who, then what, then the feed. */
  .enter .stats > .targets, .enter .stats > .actions, .enter .stats > .subs-feed { animation: rise .45s cubic-bezier(.2, .8, .2, 1) both; }
  .enter .stats > .actions { animation-delay: 100ms; }
  .enter .stats > .subs-feed { animation-delay: 200ms; }
  .chip.has-group { box-shadow: inset 0 3px 0 var(--gc); }
  .chip { height: auto; padding: 8px 4px; }
  /* phone */
  @media (max-width: 600px) {
    .stats { display: flex; flex-direction: column; gap: 14px; }
    .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 76px; overflow: visible; }
    .team-tgts .tgt { min-height: 56px; font-size: 17px; }
  }
  /* stat buttons: wide and short rows instead of stretching to fill the height */
  .stat-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: 84px; align-content: start; }
  .stat-btn { align-items: center; padding: 10px 18px; }
  @media (max-width: 600px) {
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 64px; }
  }
  /* ---------- stat grid sized to the space (see fitStatGrid) ---------- */
  .stat-grid { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 5), minmax(40px, 84px)); grid-auto-rows: unset; overflow: hidden; }
  @media (max-width: 600px) {
    .stat-grid { grid-template-rows: repeat(var(--rows, 5), 64px); overflow: visible; }
  }
  /* ---------- Estadísticas: a side locked by holding its card ---------- */
  .stats { -webkit-touch-callout: none; }
  .lock-banner { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 14px; border: 1px solid var(--amber); border-radius: var(--r); background: color-mix(in srgb, var(--amber) 10%, var(--panel)); color: var(--amber); }
  .lock-banner .bi { width: 16px; height: 16px; flex: none; }
  .lock-banner b { font: 400 20px/1 var(--f-slate); letter-spacing: .06em; text-transform: uppercase; }
  .lock-banner span { font-size: 12px; color: var(--bone); }
  .stats.lock-away .lock-banner { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, var(--panel)); color: var(--cyan); }
  .stats.is-locked { grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "banner banner" "targets actions" "feed feed"; }
  .stats.is-locked .lock-banner { grid-area: banner; }
  /* Players stay tappable under a lock: picking one is how you leave it. */
  .stats.is-locked .chips { opacity: .55; }
  .tgt.is-locked { background: var(--sel-bg); border-color: var(--amber); box-shadow: var(--glow-a); color: var(--amber); }
  .stats.lock-away .stat-btn { border-color: color-mix(in srgb, var(--cyan) 55%, var(--line-2)); }
  .stats.lock-home .stat-btn { border-color: color-mix(in srgb, var(--amber) 45%, var(--line-2)); }
  .stats.lock-away .zone-h > span.armed-for.is-on { color: var(--cyan); }
  @media (orientation: portrait) and (max-width: 999px) {
    .stats.is-locked { grid-template-rows: auto minmax(0, 1fr) minmax(0, 1.15fr) auto; grid-template-areas: "banner" "targets" "actions" "feed"; }
  }
  /* a phone on its side: the scoreboard folds to one row so the board keeps the height */
  @media (max-height: 520px) and (orientation: landscape) {
    .stats, .stats.is-locked { display: flex; flex-direction: column; gap: 10px; }
  }
}
@layer app {
  .stats .feed-all { min-height: 32px; padding: 0; font: 600 9.5px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--phos); }
}
@layer app {
  .stats .feed li.k-stat:not(.is-away) { border-left-color: var(--amber); }
}