/* Horse Race styles. Shared look comes from ../assets/styles.css. */

/* ---- Bits shared with the wheel's panels (copied so this page stands alone) ---- */
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.panel-head h2 { margin: 0; }
.panel-help { color: var(--muted); font-size: 0.9rem; margin: 0.4rem 0 0.8rem; }
.panel-help.small { font-size: 0.8rem; margin: 0.3rem 0 0.6rem; }
.total-pill { font-size: 0.8rem; font-weight: 800; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(255, 255, 255, 0.14); white-space: nowrap; }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-danger { --btn-bg: #c62848; background: var(--btn-bg); border-color: transparent; color: #fff; }
.stepper { display: inline-flex; align-items: center; gap: 0.25rem; }
.stepper input { width: 3.2rem; text-align: center; padding: 0.3rem; min-height: 36px; -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
input:disabled { opacity: 0.55; }
.chip { display: inline-block; width: 12px; height: 12px; border-radius: 4px; background: var(--player, #888); flex: none; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.5); }
.chip.big { width: 22px; height: 22px; border-radius: 7px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7); }
h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin: 0.3rem 0 0.6rem; }

main > * + * { margin-top: 1.25rem; }
main > h1 + .lede { margin-top: 0; }

/* ---- Status chips ---- */
.race-status { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.status-chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.85rem; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--panel-border);
  font-weight: 800; color: var(--text); text-decoration: none; white-space: nowrap;
}
.status-chip small { color: var(--muted); font-weight: 700; }
.pot-chip { background: rgba(255, 207, 63, 0.14); border-color: rgba(255, 207, 63, 0.45); }
.jar-chip { margin-left: auto; padding: 0.25rem 0.85rem 0.25rem 0.5rem; }
.jar-chip.has-coins { border-color: rgba(126, 232, 255, 0.55); box-shadow: 0 0 18px rgba(126, 232, 255, 0.18); }
.jar-chip:hover { border-color: var(--focus); }
.jar-mini { display: inline-flex; }
.jar-chip.bump { animation: jar-bump 0.7s cubic-bezier(.2, 1.6, .4, 1) 2; }
@keyframes jar-bump { 0% { transform: scale(1); } 40% { transform: scale(1.15) rotate(-3deg); } 100% { transform: scale(1); } }

/* ---- Track ---- */
.track-panel { position: relative; }
.racetrack {
  --lane-h: 50px;
  --label-w: 190px;
  --horse-w: calc(var(--lane-h) * 1.24);
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 3px solid #f4efe1;
  box-shadow: var(--shadow), inset 0 0 0 3px rgba(0, 0, 0, 0.25);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 60px, transparent 60px 120px),
    linear-gradient(180deg, #2f8f4e, #24763f);
}
.lanes { display: flex; flex-direction: column; }
.lane {
  display: grid;
  grid-template-columns: var(--label-w) minmax(0, 1fr);
  height: var(--lane-h);
  border-bottom: 2px dashed rgba(255, 255, 255, 0.35);
}
.lane:last-child { border-bottom: none; }
.lane:nth-child(odd) .lane-run { background: rgba(0, 0, 0, 0.06); }
.lane-label {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0 0.5rem;
  background: rgba(20, 11, 46, 0.72);
  border-right: 4px solid #f4efe1;
  min-width: 0;
}
.lane-name {
  font-weight: 800; font-size: 0.88rem; line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.num-badge {
  display: inline-grid; place-items: center; flex: none;
  min-width: 1.6em; height: 1.6em; padding: 0 0.2em;
  border-radius: 0.35em;
  background: var(--silk); color: var(--silk-fg);
  font-weight: 900; font-size: 0.85rem; line-height: 1;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(0, 0, 0, 0.35);
}
.lane-run { position: relative; height: 100%; }
.horse {
  position: absolute; left: 2px; bottom: 1px;
  width: var(--horse-w); height: calc(var(--lane-h) - 2px);
  will-change: transform; z-index: 2;
}
.horse-svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.3)); }
.horse.winner .horse-svg { filter: drop-shadow(0 0 6px #ffe680) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.3)); }

/* Gallop: body bob + leg swing, only while running */
.horse-svg .leg { transform-box: fill-box; }
.horse-svg .leg-front { transform-origin: 0% 0%; }
.horse-svg .leg-back { transform-origin: 100% 0%; }
.lanes.running .horse .hs-body { animation: bob 0.34s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.lanes.running .horse .leg-front { animation: swing-front 0.34s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.lanes.running .horse .leg-back { animation: swing-back 0.34s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.lanes.running .horse .leg.far { animation-direction: alternate-reverse; }
@keyframes bob { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-3px) rotate(2deg); } }
@keyframes swing-front { from { transform: rotate(-22deg); } to { transform: rotate(16deg); } }
@keyframes swing-back { from { transform: rotate(20deg); } to { transform: rotate(-16deg); } }

/* Starting gate */
.gate {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: calc(var(--horse-w) + 10px);
  border-right: 6px solid #d9dde3;
  background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(217, 221, 227, 0.55) 9px 12px);
  z-index: 3;
  transition: transform 0.35s ease-in, opacity 0.35s ease-in;
}
.racetrack.gates-open .gate { transform: translateY(-105%); opacity: 0; }
.racetrack[data-phase="results"] .gate { display: none; }

/* Finish line (checkered) */
.finish-line {
  position: absolute; top: 0; bottom: 0; left: var(--finish-x, 90%);
  width: 10px;
  background: repeating-conic-gradient(#111 0 25%, #fff 0 50%) 0 0 / 10px 10px;
  opacity: 0.9; z-index: 1;
}
.lane:first-child .finish-line::before {
  content: "FINISH"; position: absolute; top: 2px; left: 14px;
  font-size: 0.62rem; font-weight: 900; letter-spacing: 0.12em; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* Countdown overlay */
.countdown {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-items: center;
  font-size: clamp(3rem, 12vw, 6.5rem); font-weight: 900; color: #fff;
  text-shadow: 0 6px 0 rgba(0, 0, 0, 0.35), 0 0 30px rgba(0, 0, 0, 0.5);
  background: rgba(20, 11, 46, 0.35);
  opacity: 0; pointer-events: none;
}
.countdown.show { opacity: 1; animation: count-pop 0.5s cubic-bezier(.2, 1.6, .4, 1); }
.countdown.go { color: var(--accent); font-size: clamp(2rem, 7vw, 4rem); background: transparent; }
@keyframes count-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.photo-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 5; }
.photo-flash.go { animation: flash 0.6s ease-out; }
@keyframes flash { 0% { opacity: 0.85; } 100% { opacity: 0; } }

/* Podium overlay */
.podium {
  position: absolute; inset: 0; z-index: 7;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
  background: rgba(20, 11, 46, 0.86);
  padding: 0.8rem;
  animation: count-pop 0.5s ease-out;
}
.podium[hidden] { display: none; }
.pod-title { font-weight: 900; font-size: clamp(1.1rem, 3.5vw, 1.6rem); color: var(--accent); letter-spacing: 0.04em; }
.pod-row { display: flex; align-items: flex-end; justify-content: center; gap: clamp(0.4rem, 2vw, 1.4rem); width: 100%; max-width: 720px; }
.pod { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; text-align: center; }
.pod-horse { width: clamp(56px, 13vw, 104px); aspect-ratio: 62 / 50; }
.pod-1 .pod-horse { width: clamp(70px, 17vw, 136px); animation: bob 0.5s ease-in-out infinite alternate; }
.pod-horse .horse-svg { width: 100%; height: 100%; }
.pod-name { font-weight: 800; font-size: clamp(0.72rem, 2.4vw, 1rem); line-height: 1.2; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: center; align-items: center; }
.pod-block {
  width: 100%; border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #f4efe1, #cfc6b0); color: #2a1600;
  font-weight: 900; font-size: clamp(0.9rem, 3vw, 1.3rem);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 0.3rem;
}
.pod-block span { font-size: 1.4em; line-height: 1; }
.pod-1 .pod-block { height: clamp(70px, 14vw, 110px); background: linear-gradient(180deg, #ffe680, #ffcf3f); }
.pod-2 .pod-block { height: clamp(52px, 10vw, 80px); }
.pod-3 .pod-block { height: clamp(40px, 7.5vw, 60px); }

/* Announcer ticker */
.ticker {
  display: flex; align-items: center; gap: 0.7rem;
  margin-top: 0.7rem; padding: 0.55rem 0.9rem;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.28); border: 1px solid var(--panel-border);
  min-height: 3.6rem;
}
.ticker-mic { font-size: 1.5rem; line-height: 1; }
.ticker-lines { min-width: 0; flex: 1; }
.ticker-line { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticker-now { font-weight: 800; font-size: clamp(0.95rem, 2.6vw, 1.15rem); }
.ticker-now.in { animation: ticker-in 0.35s ease-out; }
.ticker-prev { color: var(--muted); font-size: 0.8rem; min-height: 1.2em; }
@keyframes ticker-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- Betting ---- */
.bet-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-bottom: 0.9rem; }
.control-group { display: inline-flex; align-items: center; gap: 0.5rem; }
.control-label { color: var(--muted); font-weight: 700; font-size: 0.9rem; }
.ante-group { padding: 0.25rem 0.6rem; border-radius: 12px; background: rgba(0, 0, 0, 0.18); flex-wrap: wrap; max-width: 100%; }
.ante-group .is-off { opacity: 0.45; }
.bet-controls .switch span:last-child, .control-label { white-space: nowrap; }

.grid-scroll {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.18);
  overscroll-behavior-x: contain;
}
.bet-grid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 0.9rem; }
.bet-grid th, .bet-grid td { padding: 0.35rem 0.3rem; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.bet-grid thead th { vertical-align: bottom; font-size: 0.78rem; background: #2b1a62; }
.horse-col { min-width: 6.6rem; }
.hcol-name { display: block; margin-top: 0.25rem; font-weight: 700; line-height: 1.15; max-width: 7rem; margin-inline: auto; overflow-wrap: anywhere; }
.sticky-col {
  position: sticky; left: 0; z-index: 2;
  background: #2b1a62;
  text-align: left !important;
  box-shadow: 2px 0 0 rgba(255, 255, 255, 0.12);
}
.corner { z-index: 3; }
.pname { white-space: nowrap; min-width: 6.8rem; }
.pname .chip { margin-right: 0.4rem; vertical-align: -1px; }
.pname-text { font-weight: 800; }
.ante-flag { display: block; font-size: 0.7rem; font-weight: 800; }
.ante-flag.ok { color: #69f0ae; }
.ante-flag.bad { color: var(--accent); }
.bet-cell { transition: background 0.15s ease; }
.bet-cell.has-bet { background: color-mix(in srgb, var(--player) 26%, transparent); }
.cell-stepper { display: inline-flex; align-items: center; gap: 2px; }
.cbtn {
  width: 26px; height: 30px; padding: 0;
  border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1); color: var(--text);
  font: inherit; font-weight: 800; cursor: pointer;
}
.cbtn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.2); }
.cbtn:disabled { opacity: 0.3; cursor: default; }
.bet-cell input { width: 2.5rem; min-height: 30px; padding: 0.15rem; text-align: center; font-weight: 800; border-radius: 8px; }
.bet-cell.has-bet input { border-color: var(--player); background: rgba(0, 0, 0, 0.35); }
.total-col { min-width: 4.6rem; background: rgba(255, 255, 255, 0.05); }
.bet-grid thead .total-col { background: #2b1a62; }
.bet-grid td.total-col strong, .bet-grid td small { display: block; }
.bet-grid small { color: var(--muted); font-size: 0.72rem; font-weight: 600; }
.bet-grid tfoot th, .bet-grid tfoot td { font-weight: 800; border-bottom: none; border-top: 2px solid rgba(255, 255, 255, 0.18); }
.bet-grid tfoot .sticky-col { font-size: 0.8rem; color: var(--muted); }
.pot-cell { color: var(--accent); }
.empty-row { color: var(--muted); padding: 1.2rem !important; }

.start-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 1rem; }
.btn-start { font-size: 1.2rem; min-height: 54px; min-width: 190px; }
.start-reason { margin: 0; color: var(--muted); font-weight: 700; }
.start-reason.is-warn { color: var(--accent); }

/* ---- Results ---- */
.results-panel { border: 2px solid rgba(255, 207, 63, 0.6); scroll-margin-top: 12px; }
.results-panel:focus { outline: none; }
.results-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 1.2rem; margin-top: 0.6rem; }
.finish-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.finish-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem; border-radius: 10px; background: rgba(0, 0, 0, 0.16); }
.finish-list .fpos { width: 1.6rem; font-weight: 900; color: var(--muted); text-align: right; }
.finish-list .fname { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finish-list .fmargin { color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.finish-list li.place-1 { background: rgba(255, 207, 63, 0.22); }
.finish-list li.place-1 .fpos { color: var(--accent); }
.finish-list li.place-2 { background: rgba(220, 220, 235, 0.14); }
.finish-list li.place-3 { background: rgba(205, 127, 50, 0.18); }
.pool-list { list-style: none; margin: 0 0 0.8rem; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.pool-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.45rem; padding: 0.4rem 0.6rem; border-radius: 10px; background: rgba(0, 0, 0, 0.16); }
.pool-place { font-weight: 900; color: var(--accent); width: 2.2rem; }
.pool-amt { color: var(--muted); font-size: 0.85rem; }
.pool-who { width: 100%; padding-left: 2.65rem; font-size: 0.88rem; }
.table-scroll { overflow-x: auto; }
.money-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.money-table th, .money-table td { padding: 0.4rem 0.5rem; text-align: right; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.money-table th:first-child { text-align: left; white-space: nowrap; }
.money-table thead th { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
.money-table .chip { margin-right: 0.45rem; vertical-align: -1px; }
.money-table td small { display: block; color: var(--muted); font-size: 0.75rem; }
.up { color: #69f0ae; }
.down { color: var(--danger); }
.jar-note { margin: 0.8rem 0 0; padding: 0.55rem 0.8rem; border-radius: 12px; background: rgba(126, 232, 255, 0.1); border: 1px solid rgba(126, 232, 255, 0.3); font-size: 0.92rem; }
.next-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.8rem 1.2rem; margin-top: 1rem; }

/* ---- Lower panels ---- */
.lower-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.how-panel { grid-column: 1 / -1; }
.how-list { columns: 2 320px; column-gap: 2rem; display: block !important; }
.how-list li { break-inside: avoid; margin-bottom: 0.35rem; }
@media (max-width: 900px) { .lower-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.name-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.name-row {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 0.55rem;
  padding: 0.3rem 0.5rem; border-radius: 12px; background: rgba(0, 0, 0, 0.18);
  border-left: 5px solid var(--player, transparent);
}
.name-row.is-off { opacity: 0.55; }
.name-label { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.remove-btn { background: transparent; border-color: transparent; color: var(--muted); }
.remove-btn:hover:not(:disabled) { color: var(--danger); }
.add-name { display: flex; gap: 0.5rem; margin-top: 0.8rem; }
.add-name input { flex: 1; min-width: 0; }
.form-error { color: var(--danger); font-size: 0.85rem; margin: 0.3rem 0 0; min-height: 1.2em; }

.board-list { list-style: none; margin: 0 0 0.6rem; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.board-list li { display: grid; grid-template-columns: 1.8rem auto minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem; border-radius: 10px; background: rgba(0, 0, 0, 0.16); }
.board-list .rank { font-weight: 900; color: var(--muted); text-align: center; }
.board-list .bname { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list .bnet { font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; }
.board-list .bnet small { display: block; font-size: 0.72rem; font-weight: 700; opacity: 0.85; }
.confirm-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.confirm-q { font-weight: 700; font-size: 0.9rem; width: 100%; }

.jar-panel { background: linear-gradient(160deg, rgba(126, 232, 255, 0.1), rgba(255, 255, 255, 0.06)); }
.jar-body { display: flex; align-items: center; gap: 1rem; margin: 0.6rem 0 0.4rem; }
.jar-big { flex: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); }
.jar-total { margin: 0; font-size: 1.1rem; font-weight: 700; }
.jar-total strong { font-size: 2.2rem; font-weight: 900; color: var(--focus); }
.jar-dollars { margin: 0; font-weight: 900; font-size: 1.2rem; color: var(--accent); }

.how-panel details summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.5rem; }
.how-panel details summary::-webkit-details-marker { display: none; }
.how-panel details summary::after { content: "▾"; color: var(--muted); }
.how-panel details:not([open]) summary::after { content: "▸"; }
.how-panel summary h2 { margin: 0; }
.how-list { margin: 0.7rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.9rem; display: flex; flex-direction: column; gap: 0.35rem; }
.how-list strong { color: var(--text); }

/* ---- Small screens ---- */
@media (max-width: 760px) {
  .results-grid { grid-template-columns: 1fr; }
  .jar-chip { margin-left: 0; }
}
@media (max-width: 560px) {
  .racetrack { --lane-h: 40px; --label-w: 104px; border-width: 2px; }
  .lane-label { gap: 0.3rem; padding: 0 0.3rem; border-right-width: 3px; }
  .lane-name { font-size: 0.7rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .num-badge { font-size: 0.75rem; }
  .status-chip { padding: 0.32rem 0.7rem; font-size: 0.88rem; }
  .bet-controls { gap: 0.5rem 0.7rem; }
  .ante-group { width: 100%; gap: 0.4rem 0.5rem; }
  .horse-col { min-width: 5.9rem; }
  .pname { min-width: 5.6rem; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; }
  .bet-grid th, .bet-grid td { padding: 0.3rem 0.2rem; }
  .cbtn { width: 24px; }
  .bet-cell input { width: 2.2rem; }
  .btn-start { width: 100%; }
  .next-row { justify-content: stretch; }
  .next-row .btn { flex: 1; }
  .pool-who { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lanes.running .horse .hs-body, .lanes.running .horse .leg, .pod-1 .pod-horse,
  .countdown.show, .ticker-now.in, .podium, .jar-chip.bump { animation: none !important; }
  .photo-flash { display: none; }
  .gate { transition: none; }
}

.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 50; }