*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.hidden { display: none !important; }

:root {
  --bg:        #0d0d0d;
  --bg2:       #111;
  --bg3:       #1a1a1a;
  --border:    #2a2a2a;
  --green:     #00cc66;
  --green-dim: #007a3d;
  --amber:     #ffaa00;
  --red:       #ff4444;
  --text:      #c8c8c8;
  --text-dim:  #555;
  --text-head: #eee;
  --blue:      #4488ff;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  min-height: 100vh;
}

/* ─── HEADER ─────────────────────────────────────── */
header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 8px 14px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.game-title {
  font-size: 1.15rem;
  font-weight: bold;
  color: var(--green);
  letter-spacing: 2px;
  margin-right: auto;
}

.header-stats { display: flex; align-items: center; gap: 4px; }

.label   { color: var(--text-dim); font-size: 11px; letter-spacing: 1px; }
.val-fans  { color: var(--green); font-weight: bold; }
.val-money { color: var(--amber); font-weight: bold; }
.val-stat  { color: var(--blue);  font-weight: bold; }

.header-btns { display: flex; gap: 6px; }

/* ─── BUTTONS ─────────────────────────────────────── */
button {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

button:hover  { background: #222; border-color: #444; }
button:active { background: #1a1a1a; }
button:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-sm       { font-size: 11px; padding: 3px 8px; }
.btn-danger   { border-color: #662222; color: #cc4444; }
.btn-danger:hover { background: #1a0000; border-color: #993333; color: var(--red); }

.btn-train {
  background: var(--bg3);
  border-color: var(--green-dim);
  color: var(--green);
  min-width: 54px;
}
.btn-train:hover:not(:disabled) { background: #0a2a1a; border-color: var(--green); }

.btn-auto {
  background: var(--bg3);
  border-color: var(--text-dim);
  color: var(--text-dim);
  font-size: 0.7rem;
  min-width: 42px;
  padding: 2px 6px;
}
.btn-auto:hover { background: #1a1a1a; border-color: var(--text); color: var(--text); }
.btn-auto.auto-on {
  background: #0a1a2a;
  border-color: var(--blue);
  color: var(--blue);
}
.btn-auto.auto-on:hover { background: #0f2035; }

.btn-race {
  font-size: 1.1rem;
  padding: 10px 28px;
  border-color: var(--green-dim);
  color: var(--green);
  letter-spacing: 1px;
  width: 100%;
}
.btn-race:hover:not(:disabled) { background: #0a2a1a; border-color: var(--green); }
.btn-race:disabled { border-color: #333; color: var(--text-dim); }

.btn-prestige {
  background: #1a1200;
  border-color: #aa7700;
  color: var(--amber);
  font-size: 1rem;
  padding: 8px 20px;
  width: 100%;
  letter-spacing: 1px;
}
.btn-prestige:hover { background: #2a1f00; border-color: var(--amber); }

/* ─── MAIN GRID ───────────────────────────────────── */
#main-grid {
  display: grid;
  grid-template-columns: 280px 1fr 260px;
  gap: 0;
  height: calc(100vh - 41px);
}

section {
  border-right: 1px solid var(--border);
  padding: 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

section:last-child { border-right: none; }

/* ─── PANEL HEADERS ───────────────────────────────── */
.panel-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

#horse-name {
  font-size: 1rem;
  color: var(--text-head);
  letter-spacing: 1px;
  font-weight: bold;
}

.horse-stats-inline { margin-left: auto; font-size: 12px; }

.section-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-dim);
  margin-bottom: 6px;
}

/* ─── TRAINING ────────────────────────────────────── */
.train-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
}

.train-label { font-size: 12px; color: var(--text-head); display: flex; align-items: center; gap: 5px; }

.stat-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  font-size: 9px;
  color: var(--text-dim);
  border: 1px solid var(--text-dim);
  border-radius: 50%;
  cursor: help;
  flex-shrink: 0;
  line-height: 1;
}

.stat-hint:hover { color: var(--blue); border-color: var(--blue); }

.stat-tooltip {
  position: fixed;
  z-index: 200;
  max-width: 280px;
  background: #1c1c1c;
  border: 1px solid #3a3a3a;
  color: var(--text);
  font-size: 11px;
  line-height: 1.6;
  padding: 8px 10px;
  pointer-events: none;
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
}

.train-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.train-cost { color: var(--amber); font-size: 11px; }

.progress-wrap {
  position: relative;
  height: 14px;
  background: #1a1a1a;
  border: 1px solid var(--border);
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: var(--green-dim);
  transition: width 0.1s linear;
}

.progress-label {
  position: absolute;
  top: 0; left: 0; right: 0;
  text-align: center;
  font-size: 10px;
  line-height: 14px;
  color: var(--text);
  pointer-events: none;
}

/* ─── RACE ────────────────────────────────────────── */
.race-tier-line {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
}

.race-action { display: flex; flex-direction: column; gap: 4px; align-items: center; }

.race-cd-line { font-size: 11px; color: var(--text-dim); text-align: center; }

.opponent-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 8px;
}

.opp-name { color: var(--text-head); margin-bottom: 4px; }
.opp-stats { font-size: 11px; color: var(--text-dim); }

#race-log {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 160px;
  overflow-y: auto;
}

#race-log li {
  font-size: 11px;
  padding: 3px 6px;
  background: var(--bg2);
  border-left: 3px solid transparent;
}

#race-log li.win  { border-color: var(--green); }
#race-log li.loss { border-color: var(--red);   color: var(--text-dim); }

.race-record { font-size: 11px; color: var(--text-dim); text-align: right; }

/* ─── MILESTONES ──────────────────────────────────── */
#milestone-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#milestone-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  font-size: 11px;
}

#milestone-list li.done   { border-color: var(--green-dim); opacity: 0.7; }
#milestone-list li.next   { border-color: var(--amber); }
#milestone-list li.locked { opacity: 0.4; }

.ms-icon { flex-shrink: 0; width: 14px; text-align: center; }
.ms-done   { color: var(--green); }
.ms-next   { color: var(--amber); }
.ms-locked { color: var(--text-dim); }

.ms-body { display: flex; flex-direction: column; gap: 1px; }
.ms-fans { color: var(--green); font-size: 10px; }
.ms-label { color: var(--text-head); }
.ms-progress { color: var(--text-dim); font-size: 10px; }

/* ─── PRESTIGE ────────────────────────────────────── */
#prestige-section {
  border: 1px solid #443300;
  padding: 10px;
  background: #0d0b00;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.prestige-hint { font-size: 10px; color: var(--text-dim); text-align: center; }

.info-line { font-size: 11px; color: var(--text-dim); }

/* ─── POPUP ───────────────────────────────────────── */
.popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.popup.hidden { display: none; }

.popup-box {
  background: var(--bg3);
  border: 1px solid var(--green-dim);
  padding: 24px 32px;
  max-width: 360px;
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.popup-title {
  font-size: 1.1rem;
  color: var(--green);
  letter-spacing: 2px;
}

/* ─── SPONSOR ─────────────────────────────────────── */
#sponsor-section {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 8px;
}

/* ─── SCROLLBAR ───────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

/* ─── TABS ────────────────────────────────────────── */
.tab-bar {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 1px;
  padding: 6px 4px;
  cursor: pointer;
}

.tab:hover { color: var(--text); background: none; border-bottom-color: #333; }
.tab.active { color: var(--green); border-bottom-color: var(--green); }
.tab.tab-locked { opacity: 0.35; cursor: not-allowed; }
.tab.tab-locked:hover { color: var(--muted); background: none; border-bottom-color: transparent; }

/* ─── ACTIVE BUFFS ─────────────────────────────────── */
.buffs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 0;
}

.buff-badge {
  background: #0a1a0a;
  border: 1px solid var(--green-dim);
  color: var(--green);
  font-size: 10px;
  padding: 2px 6px;
}

/* ─── SHOP CARDS ───────────────────────────────────── */
#shop-items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shop-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shop-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shop-name { color: var(--text-head); font-size: 13px; }

.item-active {
  margin-left: auto;
  font-size: 10px;
  color: var(--green);
  background: #0a1a0a;
  border: 1px solid var(--green-dim);
  padding: 1px 5px;
}

.shop-desc   { color: var(--text); font-size: 12px; }
.shop-detail { color: var(--text-dim); font-size: 10px; }

/* ─── SKILL CARDS ──────────────────────────────────── */
#skills-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skill-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.skill-card.owned { border-color: var(--green-dim); opacity: 0.8; }

.skill-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.skill-name     { color: var(--amber); font-size: 13px; font-weight: bold; }
.skill-subtitle { color: var(--text-dim); font-size: 10px; letter-spacing: 1px; }

.owned-badge {
  margin-left: auto;
  font-size: 10px;
  color: var(--green);
  letter-spacing: 1px;
}

.skill-desc    { color: var(--text); font-size: 12px; }
.skill-trigger { color: var(--text-dim); font-size: 10px; }
.skill-cost    { font-size: 11px; }

/* ─── UPGRADE CARDS ────────────────────────────────── */
#upgrades-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.upgrade-info {
  font-size: 11px;
  color: var(--text-dim);
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

.upgrade-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.upgrade-card.owned  { border-color: var(--green-dim); opacity: 0.7; }
.upgrade-card.locked { opacity: 0.4; }

.upgrade-name { color: var(--text-head); font-size: 12px; }
.upgrade-desc { color: var(--text-dim); font-size: 11px; }
.locked-hint  { color: var(--text-dim); font-size: 10px; font-style: italic; }

/* ─── BUY BUTTON ───────────────────────────────────── */
.btn-buy {
  align-self: flex-start;
  margin-top: 2px;
  border-color: var(--amber);
  color: var(--amber);
  font-size: 11px;
  padding: 3px 10px;
}

.btn-buy:hover:not(:disabled) { background: #1a1000; border-color: #ffcc44; }

/* ─── FLASH MSG ────────────────────────────────────── */
.flash-msg {
  font-size: 11px;
  color: var(--green);
  padding: 2px 8px;
  border: 1px solid var(--green-dim);
  background: #0a1a0a;
}

/* ─── RACE IDLE ─────────────────────────────────────── */
.race-idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 0 16px;
}

.race-idle-msg { color: var(--text-dim); font-size: 12px; }

.btn-find-races {
  font-size: 1rem;
  padding: 10px 32px;
  border-color: var(--green-dim);
  color: var(--green);
  letter-spacing: 2px;
}
.btn-find-races:hover { background: #0a2a1a; border-color: var(--green); }

/* ─── OFFERS HEADER ─────────────────────────────────── */
.offers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.offers-header-actions { display: flex; gap: 6px; }

/* ─── YOUR HORSE CARD (race selecting) ─────────────── */
.race-your-horse-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 8px 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.ryh-label { font-size: 10px; color: var(--text-dim); letter-spacing: 1px; }
.ryh-name  { color: var(--text-head); font-weight: bold; font-size: 13px; }
.ryh-stats { font-size: 12px; color: var(--text); margin-left: auto; }

/* ─── STAT COMPARISON ───────────────────────────────── */
.stat-compare {
  display: flex;
  gap: 10px;
  font-size: 11px;
  flex-wrap: wrap;
}
.cmp-win  { color: var(--green); font-weight: bold; }
.cmp-loss { color: var(--red); }
.cmp-even { color: var(--text-dim); }

/* ─── OFFER ENTRY COST ──────────────────────────────── */
.offer-entry      { font-size: 11px; color: var(--text-dim); }
.free-entry       { color: var(--green); }

/* ─── RACE OFFER CARDS ──────────────────────────────── */
#race-offers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.race-offer-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.offer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.offer-name  { color: var(--text-head); font-size: 13px; font-weight: bold; }
.offer-stars { color: var(--amber); letter-spacing: 1px; }
.offer-meta  { font-size: 11px; color: var(--text-dim); }

.offer-opp      { font-size: 11px; color: var(--text); }
.opp-name-hl    { color: var(--text-head); }
.opp-stats-sm   { color: var(--text-dim); font-size: 10px; margin-left: 6px; }

.offer-prob { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.prob-label { color: var(--text-dim); }
.prob-val   { font-weight: bold; }
.prob-green { color: var(--green); }
.prob-amber { color: var(--amber); }
.prob-red   { color: var(--red);   }

.prob-bar-bg {
  height: 6px;
  background: #1a1a1a;
  border: 1px solid var(--border);
  margin-bottom: 2px;
}
.prob-bar         { height: 100%; }
.prob-bar-green   { background: var(--green-dim); }
.prob-bar-amber   { background: #886600; }
.prob-bar-red     { background: #882200; }

.offer-payout { font-size: 11px; color: var(--text-dim); }

.btn-enter-race {
  align-self: flex-start;
  margin-top: 4px;
  border-color: var(--green-dim);
  color: var(--green);
  padding: 4px 14px;
}
.btn-enter-race:hover { background: #0a2a1a; border-color: var(--green); }

/* ─── MOOD SUMMARY ──────────────────────────────────── */
.mood-summary {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  font-size: 11px;
}

.mood-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mood-who  { color: var(--text-head); font-weight: bold; min-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mood-stats { color: var(--text-dim); flex: 1; }

.mood-tag  { font-weight: bold; padding: 1px 6px; font-size: 10px; letter-spacing: 0.5px; }
.mood-great { color: var(--green);    background: #001a08; border: 1px solid var(--green-dim); }
.mood-good  { color: #66dd88;         background: #001208; border: 1px solid #224422; }
.mood-ok    { color: var(--text-dim); background: #111;    border: 1px solid var(--border); }
.mood-poor  { color: var(--amber);    background: #1a1000; border: 1px solid #443300; }
.mood-bad   { color: var(--red);      background: #1a0000; border: 1px solid #440000; }

/* ─── RACE RUNNING DISPLAY ──────────────────────────── */
#race-display { display: flex; flex-direction: column; gap: 10px; }

.rt-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
.rt-header-left { display: flex; flex-direction: column; gap: 2px; }
.rt-name { color: var(--text-head); font-size: 13px; font-weight: bold; }
.rt-meta { color: var(--text-dim); font-size: 10px; letter-spacing: 1px; }

.rt-form        { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; cursor: default; }
.rt-form-label  { font-size: 9px; color: var(--text-dim); letter-spacing: 1px; }
.rt-form-row    { display: flex; align-items: center; gap: 5px; }
.rt-form-who    { font-size: 10px; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.race-lanes { display: flex; flex-direction: column; gap: 6px; }

.race-lane {
  display: grid;
  grid-template-columns: 140px 1fr 48px;
  align-items: center;
  gap: 6px;
}

.lane-label  { font-size: 11px; color: var(--text-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opp-lbl     { color: var(--text-dim); }
.lane-bar-bg   { height: 28px; background: #1a1a1a; border: 1px solid var(--border); position: relative; overflow: hidden; border-radius: 3px; }
.lane-bar-fill { height: 100%; width: 0; position: relative; overflow: visible; transition: 0.9s cubic-bezier(.22,.68,0,1.1); border-radius: 3px 0 0 3px; }
.player-fill   { background: var(--green-dim); }
.opp-fill      { background: #553300; }
.lane-bar-label {
  position: absolute; right: 2em; top: 50%; transform: translateY(-50%);
  font-size: 11px; font-weight: bold; color: rgba(255,255,255,0.9);
  white-space: nowrap; pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.lane-bar-finish {
  position: absolute; right: 0; top: 0; width: 14px; height: 100%;
  background: 
    repeating-conic-gradient(#c4c4c4 0 25%, #000000 0 50%) 
      50% / 14px 14px;
}

/* ─── SEGMENT LOG ───────────────────────────────────── */
.seg-log {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 200px;
  overflow-y: auto;
  font-size: 11px;
}

.seg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 6px;
  background: var(--bg2);
  border-left: 2px solid var(--border);
}

.seg-dist   { color: var(--text-dim); width: 40px; flex-shrink: 0; }
.seg-you    { color: var(--text); flex: 1; }
.seg-opp    { color: var(--text); flex: 1; }
.seg-lbl-you { color: var(--green); }
.seg-lbl-opp { color: #aa6633; }
.seg-lead   { color: var(--green); font-size: 10px; }
.seg-trail  { color: var(--red);   font-size: 10px; }
.seg-mid        { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; width: 160px; flex-shrink: 0; }
.seg-mid-delta  { font-size: 12px; font-weight: bold; }
.seg-mid-gap    { font-size: 11px; }
.seg-fatigue { color: #cc7700; font-size: 10px; font-style: italic; }
.roll-range  { color: var(--text-dim); font-size: 10px; margin: 0 2px; }

.roll-hot         { color: #44ee44; font-weight: bold; }
.roll-golden      { color: #ffcc00; font-weight: bold; }
.roll-golden-anim { color: #ffcc00; font-weight: bold; display: inline-block; animation: roll-shake 0.18s steps(1) forwards; }

@keyframes roll-shake {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-4px, -3px) rotate(-2deg); }
  20%  { transform: translate(3px,  2px)  rotate(1.5deg); }
  30%  { transform: translate(-3px, 3px)  rotate(2deg); }
  40%  { transform: translate(4px, -2px)  rotate(-1deg); }
  50%  { transform: translate(-2px, -4px) rotate(1deg); }
  60%  { transform: translate(3px,  3px)  rotate(-2deg); }
  70%  { transform: translate(-4px, 1px)  rotate(2deg); }
  80%  { transform: translate(2px, -3px)  rotate(-1.5deg); }
  90%  { transform: translate(-2px, 2px)  rotate(1deg); }
  100% { transform: translate(0, 0); }
}

.seg-skill-row {
  background: var(--bg2);
  border-left: 2px solid var(--amber);
  padding: 2px 6px 2px 48px;
  font-size: 10px;
  color: var(--amber);
  margin-bottom: 3px;
}
.mult-sm     { color: var(--text-dim); font-size: 10px; margin: 0 2px 0 1px; }
.breed-inherit { color: var(--text-dim); font-size: 10px; }

.skill-flash {
  color: var(--amber);
  font-size: 10px;
  background: #1a1000;
  border: 1px solid #554400;
  padding: 0 4px;
}

.seg-rolling {
  color: var(--text-dim);
  font-size: 11px;
  padding: 4px 6px;
  font-style: italic;
}

/* ─── RACE RESULT BANNER ────────────────────────────── */
.race-result-banner {
  font-size: 1.1rem;
  font-weight: bold;
  letter-spacing: 2px;
  padding: 10px;
  text-align: center;
}
.race-won  { color: var(--green); border: 1px solid var(--green-dim); background: #0a1a0a; }
.race-lost { color: var(--red);   border: 1px solid #552222;          background: #1a0a0a; }

/* ─── ROLL QUALITY ──────────────────────────────────── */
.race-perf         { margin-top: 8px; padding: 8px; background: var(--bg2); border: 1px solid var(--border); }
.race-perf-title   { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.race-perf-row     { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.race-perf-name    { font-size: 11px; width: 90px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.race-perf-bar-bg  { flex: 1; height: 8px; background: #1a1a1a; border: 1px solid var(--border); }
.race-perf-bar     { height: 100%; transition: width 0.4s ease; }
.race-perf-score   { font-size: 11px; color: var(--text); width: 90px; flex-shrink: 0; }
.race-perf-lbl     { color: var(--text-dim); font-size: 10px; }

/* ─── RACE HISTORY ──────────────────────────────────── */
#race-history { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 8px; }

/* ─── RESPONSIVE ──────────────────────────────────── */
@media (max-width: 800px) {
  #main-grid {
    grid-template-columns: 1fr;
    height: auto;
  }
  section { border-right: none; border-bottom: 1px solid var(--border); }
}

/* ─── HORSE GRADE BADGE ─────────────────────────────── */
.horse-grade-badge {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 1px 6px;
  border: 1px solid currentColor;
}
.grade-f   { color: #555; }
.grade-e   { color: #777; }
.grade-d   { color: #999; }
.grade-c   { color: var(--green); }
.grade-b   { color: var(--blue); }
.grade-a   { color: var(--amber); }
.grade-s   { color: #ff8800; }
.grade-ss  { color: #ff4488; }
.grade-sss { color: #ff44ff; text-shadow: 0 0 6px #ff44ff88; }

/* ─── SKILL SLOT INFO ───────────────────────────────── */
.skill-slot-info {
  font-size: 11px;
  color: var(--text-dim);
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

/* ─── NAME MODAL INPUT ──────────────────────────────── */
.name-modal-hint { font-size: 11px; color: var(--text-dim); }

.name-input {
  background: var(--bg);
  border: 1px solid var(--green-dim);
  color: var(--text-head);
  font-family: inherit;
  font-size: 14px;
  padding: 8px 12px;
  text-align: center;
  width: 100%;
  letter-spacing: 1px;
  outline: none;
}
.name-input:focus { border-color: var(--green); }

/* ─── STABLE TAB ────────────────────────────────────── */
.stable-sort-bar {
  display: flex;
  justify-content: flex-end;
}
.btn-sort {
  color: var(--muted);
  border-color: var(--border);
}
.btn-sort:hover { color: var(--text); border-color: var(--muted); }

#stable-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.horse-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.horse-card.horse-active  { border-color: var(--green-dim); }
.horse-card.horse-breed-sel { border-color: var(--amber); background: #0d0c00; }

.hcard-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hcard-name {
  font-size: 13px;
  font-weight: bold;
  color: var(--text-head);
  letter-spacing: 1px;
}

.active-badge {
  font-size: 10px;
  color: var(--green);
  border: 1px solid var(--green-dim);
  padding: 1px 5px;
  letter-spacing: 1px;
}

.training-badge {
  font-size: 10px;
  color: var(--amber);
  border: 1px solid #554400;
  padding: 1px 5px;
  letter-spacing: 1px;
}

.retired-badge {
  font-size: 10px;
  color: var(--text-dim);
  border: 1px solid #333;
  padding: 1px 5px;
  letter-spacing: 1px;
}

.retired-label {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 1px;
}

.hcard-meta {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 1px;
}

.hcard-stats {
  font-size: 11px;
  color: var(--text);
}

.hcard-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.skill-chip {
  font-size: 10px;
  color: var(--amber);
  background: #1a1000;
  border: 1px solid #554400;
  padding: 1px 6px;
  letter-spacing: 1px;
}

.hcard-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.btn-breed {
  border-color: #446688;
  color: #6699cc;
}
.btn-breed:hover { background: #0a1020; border-color: var(--blue); color: var(--blue); }

/* ─── BREED PROMPT / INFO ───────────────────────────── */
.breed-prompt {
  font-size: 11px;
  color: var(--amber);
  background: #0d0c00;
  border: 1px solid #554400;
  padding: 8px 12px;
  text-align: center;
}

.breed-info {
  font-size: 10px;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 4px;
}

/* ─── NAME MODAL SUBTITLE (grade reveal) ──────────── */
.name-modal-sub {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.grade-reveal {
  font-size: 1.1rem;
  font-weight: bold;
  letter-spacing: 2px;
}

.grade-reveal-pots {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 1px;
}

/* ─── HORSE DRAFTS (shop section) ─────────────────── */
.shop-section-sep {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

#shop-drafts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.draft-card {
  border-color: #334;
}

.draft-badge {
  margin-left: auto;
  font-size: 10px;
  color: var(--blue);
  border: 1px solid #334;
  padding: 1px 5px;
  letter-spacing: 1px;
}

.btn-draft {
  border-color: #334;
  color: var(--blue);
}
.btn-draft:hover:not(:disabled) { background: #00001a; border-color: var(--blue); }