.kit-defs { position:absolute; pointer-events:none; }
body[data-kit] { background:var(--kit-paper); }
.player-wrap .header { padding-block:.45rem; }
.player-wrap .header .icon-button { width:2.75rem; height:2.75rem; }
.player-top { margin-top:.4rem; gap:.45rem; }
.player-top .time-large { font-size:clamp(1.8rem,8vw,2.45rem); line-height:1; }
.own-kit { margin-left:auto; padding:.25rem .55rem; border-radius:var(--pill); background:var(--kit-card); color:var(--kit-ink); font-size:.76rem; }
.player-foot { display:flex; justify-content:space-between; gap:.4rem; font-size:.72rem; color:var(--muted); }
.arena-hud { background:var(--white); margin:.55rem 0; border:1px solid var(--line); border-radius:1rem; padding:.55rem .65rem .35rem; box-shadow:var(--shadow); }
.hud-title,.trick-rack { display:flex; align-items:center; justify-content:space-between; gap:.45rem; }
.hud-title { margin-bottom:.35rem; }
.hud-title strong { font-size:.85rem; }
.hud-title span,.target-hint { font-size:.67rem; color:var(--muted); }
.team-tabs { display:grid; grid-auto-columns:minmax(0,1fr); grid-auto-flow:column; gap:.25rem; }
.team-tab { color:var(--kit-ink); background:var(--kit-paper); border:2px solid transparent; border-radius:.65rem; min-height:3rem; padding:.18rem .05rem; text-align:center; display:grid; align-content:center; line-height:1.12; }
.team-tab:disabled { opacity:1; cursor:default; }
.team-tab[aria-pressed="true"] { border-color:var(--kit-ink); }
.team-tab small { font-weight:800; font-size:.62rem; }
.team-tab strong { font-size:clamp(.61rem,2.35vw,.78rem); overflow:hidden; text-overflow:ellipsis; }
.team-tab i { font-style:normal; font-size:.66rem; font-variant-numeric:tabular-nums; }
.trick-rack { display:grid; grid-template-columns:minmax(3.2rem,.8fr) minmax(3.5rem,.9fr) minmax(6rem,1.4fr); margin-top:.35rem; }
.trick-rack button { min-height:2.75rem; padding:.2rem .3rem; border-radius:.65rem; color:var(--white); background:var(--kit-ink); font-size:.77rem; font-weight:800; }
.trick-rack button:disabled { opacity:1; color:var(--muted); background:var(--paper); }
.trick-rack button span { font-size:1.05rem; }
.charge-readout { display:grid; line-height:1.15; }
.charge-readout b { font-size:.83rem; color:var(--kit-ink); }
.charge-readout span { font-size:.62rem; color:var(--muted); }
.charge-readout i { height:.24rem; overflow:hidden; border-radius:var(--pill); background:var(--line); margin-top:.17rem; }
.charge-readout em { display:block; width:0; height:100%; background:var(--kit-ink); }
.target-hint { min-height:.95rem; margin-top:.12rem; }
.playfield { position:relative; }
.player-stage { background:radial-gradient(ellipse at 50% 33%,var(--white),var(--kit-card) 82%); isolation:isolate; }
.player-wrap:has(.arena-hud) .player-stage { min-height:8rem; margin-top:.3rem; }
.player-wrap:has(.arena-hud) .player-stage img { height:clamp(8.5rem,25svh,16rem); }
.player-wrap:has(.arena-hud) .player-score { top:.45rem; right:.5rem; padding:.2rem .45rem; }
.player-wrap:has(.arena-hud) .player-score b { font-size:1.6rem; }
.player-wrap:has(.arena-hud) .player-prompt { margin:.45rem 0 .25rem; min-height:1.35rem; }
.tap-controls { gap:.5rem; }
.tap-slot { position:relative; min-width:0; height:clamp(5.5rem,14svh,8.8rem); }
.tap-slot .tap { width:100%; height:100%; min-height:0; grid-template-rows:minmax(0,1fr) auto; }
.tap-slot .udder-visual { height:100%; max-height:5.6rem; min-height:0; }
.qr svg { shape-rendering:crispEdges; }
.tap-controls.wandering .tap { position:absolute; top:12%; left:10%; width:80%; height:76%; min-height:2.75rem; transition:left .65s var(--ease),top .65s var(--ease); }
.wandering[data-step="0"] #tap-left,.wandering[data-step="2"] #tap-right { top:0; left:0; }
.wandering[data-step="0"] #tap-right,.wandering[data-step="2"] #tap-left { top:24%; left:20%; }
.wandering[data-step="1"] #tap-left,.wandering[data-step="3"] #tap-right { top:24%; left:0; }
.wandering[data-step="1"] #tap-right,.wandering[data-step="3"] #tap-left { top:0; left:20%; }
.incoming { text-align:center; color:var(--kit-ink); background:var(--kit-card); border-radius:.55rem; padding:.2rem; font-size:.77rem; font-weight:800; }
.hay-layer { position:absolute; inset:0 0 -.35rem; z-index:5; overflow:hidden; border-radius:1.35rem; touch-action:none; user-select:none; -webkit-user-select:none; background:radial-gradient(ellipse at 50% 50%,var(--hay-fog),var(--yellow-pale)); border:.15rem solid var(--straw-1); }
.hay-caption { position:absolute; z-index:1; top:.65rem; left:.5rem; right:.5rem; text-align:center; pointer-events:none; line-height:1.2; }
.hay-caption b,.hay-caption span { display:block; }
.hay-caption span { font-size:.78rem; }
.hay-bundle { position:absolute; translate:-50% -50%; width:29%; max-width:8rem; min-height:2.8rem; background:transparent; padding:0; rotate:var(--angle); transition:transform .30s ease-out,opacity .3s; touch-action:none; }
.hay-bundle svg { width:100%; display:block; filter:drop-shadow(0 .2rem .15rem var(--twine)); }
.hay-bundle.flung { opacity:0; transform:translate(var(--fly),-2.5rem) rotate(40deg); pointer-events:none; }
.team-race { grid-template-columns:repeat(var(--team-count),minmax(0,1fr)); gap:clamp(.5rem,1vw,1.25rem); align-items:stretch; }
.kit-card { min-width:0; background:var(--kit-paper); border:1px solid var(--kit-card); border-radius:1.3rem; padding:clamp(.55rem,1.1vw,1.3rem); }
.kit-card.winner { outline:.2rem solid var(--kit-ink); }
.kit-heading { display:flex; align-items:center; gap:.4rem; justify-content:space-between; flex-wrap:wrap; color:var(--kit-ink); line-height:1.2; }
.kit-heading strong { font-size:clamp(1rem,1.55vw,2rem); }
.kit-rank { background:var(--white); color:var(--kit-ink); font-weight:850; font-size:.76rem; padding:.25rem .5rem; border-radius:var(--pill); }
.kit-art { position:relative; margin:.65rem 0; height:clamp(8rem,22vh,18rem); background:radial-gradient(ellipse at 48% 32%,var(--white),var(--kit-card)); border-radius:1rem; overflow:hidden; }
.kit-art img { display:block; width:100%; height:100%; object-fit:contain; }
.kit-art .goat-stage { font-size:.62rem; bottom:.3rem; left:.35rem; }
.kit-volume { display:flex; align-items:baseline; gap:.3rem; }
.kit-volume b { font-family:var(--display); font-size:clamp(2.25rem,4.3vw,5rem); line-height:1.12; font-variant-numeric:tabular-nums; white-space:nowrap; }
.kit-volume span,.kit-status { font-size:.72rem; color:var(--kit-ink); font-weight:750; }
.kit-card .milk-track i { background:var(--kit-ink); }
.kit-status { margin-top:.65rem; min-height:1rem; }
.kit-members { list-style:none; padding:0; margin:.25rem 0 0; }
.kit-members li { display:flex; justify-content:space-between; align-items:center; gap:.4rem; border-top:1px solid var(--kit-card); padding:.28rem 0; font-size:clamp(.73rem,.98vw,1rem); }
.kit-members li span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.kit-members li b { white-space:nowrap; font-size:.85em; font-variant-numeric:tabular-nums; }
@media(max-width:760px) {
  .team-race { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kit-art { height:8rem; }
}
@media(max-height:700px) and (max-width:600px) {
  .player-wrap { width:calc(100% - 1.1rem); }
  .player-wrap .header { padding-block:.1rem; }
  .player-wrap:has(.arena-hud) .player-stage img { height:clamp(6rem,19svh,8rem); }
  .player-wrap:has(.arena-hud) .player-stage { min-height:6rem; }
  .player-wrap .player-rule { margin:.4rem 0; }
  .arena-hud { margin:.28rem 0; padding:.25rem .4rem; }
  .player-wrap .udder-icon { max-height:2.8rem; }
}
@media(prefers-reduced-motion:reduce) { .hay-bundle,.tap-controls.wandering .tap { transition:none; } }
@media(min-width:900px) {
  .screen-wrap:has(.racer) { padding-bottom:.5rem; }
  .screen-wrap:has(.racer) .screen-top { padding-block:.65rem; }
  .screen-wrap:has(.racer) .screen-title { font-size:clamp(2rem,3.5vw,3.4rem); }
  .screen-wrap:has(.racer) .screen-timer { font-size:clamp(2.7rem,6svh,4.7rem); }
  .screen-wrap:has(.racer) .screen-stage { margin-top:.65rem; }
  .screen-wrap:has(.racer) .screen-highlight { margin-top:.3rem; padding:.32rem .7rem; }
  .screen-wrap:has(.racer) .race-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; }
  .racer { padding:clamp(.5rem,.9vw,.85rem); }
  .racer-art { height:clamp(4.25rem,calc(32svh - 10rem),10rem); margin:.3rem 0; }
  .racer-score { font-size:clamp(2rem,3vw,3rem); }
  .screen-wrap:has(.finished-grid) .screen-timer { display:none; }
  .screen-wrap:has(.finished-grid) .podium { padding-bottom:.65rem; }
  .screen-wrap:has(.finished-grid) .podium-avatar { height:clamp(4rem,13svh,8rem); }
  .screen-wrap:has(.finished-grid) .podium-place { padding:.65rem .5rem; }
  .screen-wrap:has(.finished-grid) .podium-place:nth-child(2) { padding-block:1rem; }
  .finished-grid .racer-art,.finished-grid .racer-streak,.finished-grid .milk-track,.finished-grid .empty-slot { display:none; }
  .finished-grid .racer { padding:.35rem .7rem; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:.1rem .4rem; }
  .finished-grid .racer-top .connection { display:none; }
  .finished-grid .racer-score { grid-column:2; margin:0; line-height:1.05; font-size:1.35rem; }
  .finished-grid .racer-name { font-size:.9rem; }
}
