.race-conditions {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 0 0 18px;
  padding: 11px 15px;
  border-radius: 10px;
  background: #edf3e5;
  color: #28533b;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.6;
}

.zebra-style {
  line-height: 1.5;
}

.zebra-icon {
  width: 88px;
  height: 76px;
  flex: none;
  overflow: hidden;
  background: #f3f4eb;
}

.zebra-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.zebra-profile {
  font-size: 11px;
  line-height: 1.5;
  color: #506c5a;
}

.zebra-entry { display: flex; flex-direction: column; min-width: 0; }
.zebra-entry > .zebra-card { width: 100%; flex: 1; }
.zebra-entry[data-horse-id="1"], .finish-row[data-horse-id="1"] { --frame-color: #fff; --frame-border: #829188; --frame-tint: #fff; }
.zebra-entry[data-horse-id="2"], .finish-row[data-horse-id="2"] { --frame-color: #272b2c; --frame-border: #272b2c; --frame-tint: #eff0ef; }
.zebra-entry[data-horse-id="3"], .finish-row[data-horse-id="3"] { --frame-color: #d44141; --frame-border: #d44141; --frame-tint: #fff0f0; }
.zebra-entry[data-horse-id="4"], .finish-row[data-horse-id="4"] { --frame-color: #3167d6; --frame-border: #3167d6; --frame-tint: #eef3ff; }
.zebra-entry[data-horse-id="5"], .finish-row[data-horse-id="5"] { --frame-color: #ffe644; --frame-border: #d7b900; --frame-tint: #fffbe1; }
.zebra-entry[data-horse-id="6"], .finish-row[data-horse-id="6"] { --frame-color: #379943; --frame-border: #379943; --frame-tint: #eff9ed; }
.zebra-entry > .zebra-card { background: var(--frame-tint, #fff); border-color: var(--frame-border, #dfdfd4); }
.zebra-entry .zebra-icon { border: 1px solid var(--frame-border, #d7dfd5); border-radius: 9px; background: var(--frame-color, #f3f4eb); }
.zebra-entry > .zebra-card[aria-pressed="true"] { border-color: #e57b4e; background: var(--frame-tint, #fff6ea); box-shadow: 0 0 0 2px #e57b4e55; }
.zebra-mobile-details, .bet-tab-hint { display: none; }
.jump-short { display: none; }
.zebra-stats span[data-stat="form"] { grid-template-columns: 66px minmax(0, 1fr) auto; }
.form-condition { display: inline-block; padding: 3px 6px; border-radius: 999px; font-size: 10px; white-space: nowrap; }
.form-condition[data-tone="great"] { background: #ffe0a6; color: #9b3a16; }
.form-condition[data-tone="good"] { background: #ddf1cf; color: #28623d; }
.form-condition[data-tone="normal"] { background: #e9edf0; color: #4d6170; }
.form-condition[data-tone="poor"] { background: #e4ebfa; color: #475d9d; }
.form-condition[data-tone="bad"] { background: #ebe7f3; color: #69517d; }
.zebra-stats span[data-grade="S"] b { color: #aa4a21; }
.zebra-stats span[data-grade="A"] b { color: #247446; }
.zebra-stats span[data-grade="B"] b { color: #34648f; }
.zebra-stats span[data-grade="C"] b { color: #68736c; }
.zebra-stats span[data-grade="D"] b { color: #806b64; }

.race-animation { margin: 0 0 24px; padding: 22px; border-radius: 16px; background: #e9f0d9; border: 1px solid #cbdcb8; scroll-margin-top: 18px; }
.race-animation.is-rainy { background: #dfece9; border-color: #b4d4d2; }
.race-animation-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.race-animation-heading h3 { margin: 6px 0; color: #173c2b; font-size: 24px; }
.race-animation-heading p { margin: 0; color: #4f705a; font-size: 12px; }
.race-skip { flex: none; background: #fffdf6; }
.race-animation-status { margin: 19px 0 3px; font-size: 19px; font-weight: 1000; color: #af5a2e; }
.race-animation-leader { margin: 0 0 13px; min-height: 20px; color: #2e6344; font-size: 12px; font-weight: 900; }
.race-camera { position: relative; overflow: hidden; border-radius: 18px; background: #e3edcf; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; }
.race-leaders-board { position: relative; width: min(100%, 420px); max-height: 130px; box-sizing: border-box; margin: 14px 0 10px; padding: 8px; overflow: hidden; border: 2px solid #e4e83f; border-radius: 12px; background: #163b2b; color: #fffdf1; box-shadow: 0 6px 16px #0b281d30; pointer-events: none; transition: max-height .3s ease, margin .3s ease, padding .3s ease, opacity .25s ease, visibility .3s; }
.race-leaders-board.is-hidden { visibility: hidden; max-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; opacity: 0; }
.race-leaders-title { margin: 0 2px 6px; color: #e9ed6b; font-size: 10px; font-weight: 1000; letter-spacing: .18em; }
.race-leaders-rows { position: relative; height: 90px; overflow: hidden; }
.race-leader-row { position: absolute; top: 0; right: 0; left: 0; display: grid; grid-template-columns: 20px 24px minmax(0, 1fr); align-items: center; gap: 5px; height: 28px; padding: 2px 5px; border-radius: 6px; background: #ffffff1c; opacity: 0; transform: translateY(var(--row-offset, 93px)); transition: transform .45s ease, opacity .3s ease; }
.race-leader-row.is-visible { opacity: 1; }
.race-leader-place { color: #e9ed6b; font-size: 13px; font-weight: 1000; text-align: center; }
.race-leader-number { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #fff; border-radius: 5px; font-size: 11px; }
.race-leader-name { overflow: hidden; color: #fff; font-size: 11px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.race-animation-track { position: relative; height: min(44vw, 460px); min-height: 300px; overflow: hidden; border: 9px solid #78a35e; border-radius: 999px; background: #c98a59; box-shadow: inset 0 0 0 4px #f7dca2, 0 8px 20px #28472725; isolation: isolate; }
.race-animation.is-rainy .race-animation-track { background: #aa8066; border-color: #6c9e82; }
.oval-infield { position: absolute; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border-radius: 999px; background: #7fae60; border: 3px solid #f2e7bd; color: #21442d; text-align: center; }
.oval-infield b { font-size: clamp(10px, 1.6vw, 20px); letter-spacing: .12em; }
.oval-infield span { font-size: clamp(8px, 1vw, 11px); font-weight: 900; }
.oval-guides { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.oval-guides path { fill: none; stroke: #fff7e3; stroke-width: 2; stroke-dasharray: 7 11; opacity: .6; }
.oval-finish-line { position: absolute; z-index: 3; left: calc(50% - 7px); top: 72%; width: 14px; height: 18%; background: conic-gradient(#183b2b 25%, #fff 0 50%, #183b2b 0 75%, #fff 0) 0 0 / 14px 14px; box-shadow: 0 0 0 2px #fff9; }
.oval-finish-label { position: absolute; z-index: 3; left: 50%; top: 66%; transform: translateX(-50%); color: #fffdf3; font-size: 10px; font-weight: 1000; letter-spacing: .16em; text-shadow: 0 2px 3px #24402a; }
.race-runner { position: absolute; z-index: 4; top: 0; left: 0; width: 56px; height: 56px; display: grid; place-items: center; transform: translate(-50%, -50%); font-size: 34px; will-change: left, top; }
.race-runner img { display: block; width: 56px; height: 52px; object-fit: contain; animation: race-gallop .34s ease-in-out infinite; filter: drop-shadow(1px 3px 1px #183b2940); }
.race-runner-number { position: absolute; top: -3px; right: -3px; display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50%; background: #e9d981; color: #173829; box-shadow: 0 2px 4px #17382955; font-size: 10px; }
.race-runner.is-finished img { animation-play-state: paused; }
.finish-closeup { position: absolute; z-index: 6; top: 12px; right: 4%; bottom: 12px; left: 4%; display: flex; flex-direction: column; overflow: hidden; visibility: hidden; opacity: 0; border: 2px solid #d7c493; border-radius: 15px; background: #fff6dd; pointer-events: none; transform: translateY(12px) scale(.98); transition: opacity .35s ease, transform .35s ease; }
.finish-closeup.is-visible { visibility: visible; opacity: 1; transform: none; box-shadow: 0 8px 24px #3b241c24; }
.finish-closeup.is-climax { border-color: #ffc16d; animation: finish-heartbeat 1.1s ease-in-out infinite; }
.finish-closeup-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 14px; background: linear-gradient(90deg, #fff4d9, #ffe4bd); color: #7a451e; font-size: 12px; font-weight: 1000; letter-spacing: .08em; }
.finish-closeup.is-climax .finish-closeup-title { background: linear-gradient(90deg, #ffe9bb, #ffc87b); color: #682b1e; }
.finish-tension-badge { flex: none; padding: 3px 9px; border-radius: 999px; background: #9b3c2d; color: #fff9e9; font-size: 10px; letter-spacing: .04em; }
.finish-closeup.is-climax .finish-tension-badge { animation: finish-badge-pulse 1.1s ease-in-out infinite; }
.finish-closeup-track { position: relative; display: grid; flex: 1; min-height: 0; grid-template-rows: repeat(var(--lanes), minmax(0, 1fr)); overflow: hidden; background: #c98a59; }
.finish-closeup-track::before { content: ''; position: absolute; z-index: 1; top: 0; bottom: 0; left: calc(28% - 36px); width: 90px; background: linear-gradient(90deg, transparent, #fff0bd60, transparent); opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.finish-closeup.is-climax .finish-closeup-track::before { opacity: 1; }
.finish-closeup-track::after { content: ''; position: absolute; z-index: 3; inset: 0; background: radial-gradient(ellipse 62% 90% at 28% 50%, transparent 32%, #28140f38 100%); box-shadow: inset 0 0 72px 10px #24130f72; pointer-events: none; transition: box-shadow .6s ease; }
.finish-closeup.is-climax .finish-closeup-track::after { box-shadow: inset 0 0 105px 20px #24130faa; }
.race-animation.is-rainy .finish-closeup-track { background: #aa8066; }
.finish-closeup-lane { position: relative; min-height: 0; border-top: 1px dashed #fff5d6aa; }
.finish-closeup-lane:nth-of-type(even) { background: #fff6d615; }
.finish-closeup-goal { position: absolute; z-index: 1; top: 0; bottom: 0; left: 28%; display: flex; align-items: flex-start; justify-content: center; width: 18px; padding-top: 6px; background: conic-gradient(#183b2b 25%, #fff 0 50%, #183b2b 0 75%, #fff 0) 0 0 / 18px 18px; color: #fff; font-size: 10px; font-weight: 1000; writing-mode: vertical-rl; text-shadow: 0 1px 3px #173b2d; }
.finish-closeup.is-climax .finish-closeup-goal { animation: finish-goal-glow 1.1s ease-in-out infinite; }
.finish-drama-rays { position: absolute; z-index: 4; inset: 0; background: repeating-conic-gradient(from -16deg at 28% 50%, #ffe9b94d 0deg 1.4deg, transparent 1.4deg 10deg); opacity: 0; pointer-events: none; }
.finish-closeup.is-climax .finish-drama-rays { animation: finish-rays 1.1s ease-in-out infinite; }
.finish-photo-flash { position: absolute; z-index: 5; inset: 0; background: #fff5d2; opacity: 0; pointer-events: none; }
.finish-closeup.is-photo-finish .finish-photo-flash { animation: finish-photo-flash .7s ease-out both; }
.finish-goal-stamp { position: absolute; z-index: 6; right: 6%; bottom: 8%; color: #fff8d8; font-size: clamp(32px, 6vw, 68px); font-weight: 1000; letter-spacing: .08em; text-shadow: 0 4px 0 #a53f2d, 0 8px 18px #43190fcc; opacity: 0; transform: rotate(-8deg) scale(.7); pointer-events: none; }
.finish-closeup.is-photo-finish .finish-goal-stamp { animation: finish-goal-stamp 1.25s ease-out both; }
.finish-closeup-runner { position: absolute; z-index: 2; top: 50%; display: grid; place-items: center; width: 80px; height: 74px; transform: translate(-50%, -50%); font-size: 48px; will-change: left; }
.finish-closeup-runner img { display: block; width: 80px; height: 74px; object-fit: contain; animation: race-gallop .34s ease-in-out infinite; filter: drop-shadow(1px 3px 2px #183b2940); }
.finish-closeup-runner b { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid #fff; border-radius: 50%; background: #e9d981; color: #173829; font-size: 11px; }
.finish-closeup-runner.is-finished img { animation-play-state: paused; }
@keyframes finish-heartbeat { 0%, 25%, 42%, 100% { box-shadow: 0 8px 24px #3b241c24; } 12%, 34% { box-shadow: 0 0 0 7px #f4aa5b99, 0 0 34px 8px #d84d2d88, 0 14px 40px #4d251e77; } }
@keyframes finish-badge-pulse { 0%, 25%, 42%, 100% { background: #9b3c2d; transform: scale(1); } 12%, 34% { background: #ed5630; transform: scale(1.12); } }
@keyframes finish-goal-glow { 0%, 25%, 42%, 100% { box-shadow: 0 0 8px #fff4d766; } 12%, 34% { box-shadow: 0 0 30px 10px #fff3bcdd; } }
@keyframes finish-rays { 0%, 25%, 42%, 100% { opacity: .08; transform: scale(1); } 12%, 34% { opacity: .58; transform: scale(1.04); } }
@keyframes finish-photo-flash { 0% { opacity: 0; } 16% { opacity: .62; } 100% { opacity: 0; } }
@keyframes finish-goal-stamp { 0% { opacity: 0; transform: rotate(-8deg) scale(.7); } 18% { opacity: 1; transform: rotate(-8deg) scale(1.1); } 42% { opacity: 1; transform: rotate(-8deg) scale(1); } 100% { opacity: 0; transform: rotate(-8deg) scale(.95); } }
.race-horse-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.race-legend-tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; background: #fffdf4; color: #2c5339; font-size: 10px; font-weight: 900; }
.race-legend-tag b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #e9d981; color: #173829; }
.race-timebar { margin-top: 13px; height: 8px; overflow: hidden; border-radius: 999px; background: #b7caa7; }
.race-timebar span { display: block; width: 0; height: 100%; border-radius: inherit; background: #e5794c; }
.race-replay { margin-top: 19px; background: #fffdf6; }
.result-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.result-actions > button { margin: 0; min-height: 42px; }
@keyframes race-gallop { 0%, 100% { transform: translateY(0) scaleX(var(--facing, 1)); } 50% { transform: translateY(-4px) scaleX(var(--facing, 1)); } }

.result-panel { margin: 0 0 24px; }
.result-money { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 18px; margin: 14px 0 0; }
.result-stake { font-size: 17px; font-weight: 900; color: #526c55; }
.result-arrow { color: #a97a3a; font-size: 25px; font-weight: 1000; line-height: 1; }
.result-panel .result-payout { font-size: 25px; line-height: 1.25; }
.result-panel.is-hit { position: relative; overflow: hidden; border: 2px solid #e8b64c; background: radial-gradient(circle at 92% 8%, #fff8ca 0, transparent 37%), linear-gradient(135deg, #fff7d9, #e9f3d9 76%); box-shadow: 0 12px 28px #af842c24; }
.result-panel.is-hit::after { content: "✦"; position: absolute; top: 12px; right: 22px; color: #e8b64c; font-size: 70px; line-height: 1; opacity: .32; pointer-events: none; }
.result-panel.is-hit > .eyebrow { position: relative; z-index: 1; color: #9c651b; font-size: 13px; }
.result-panel.is-hit h3 { position: relative; z-index: 1; margin: 10px 0; color: #a34a20; font-size: clamp(42px, 5vw, 64px); line-height: 1.1; letter-spacing: -.06em; animation: result-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.result-panel.is-hit > p { position: relative; z-index: 1; margin: 10px 0; color: #365b3e; font-size: 16px; font-weight: 800; line-height: 1.7; }
.result-panel.is-hit .result-money { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.35fr); align-items: center; gap: 12px; margin: 20px 0 6px; padding: 24px 20px; border: 3px solid #eac556; border-radius: 18px; background: radial-gradient(circle at 88% 10%, #417a4a, transparent 45%), linear-gradient(120deg, #173b2b, #215b3b); box-shadow: 0 8px 0 #c79739, 0 16px 25px #614d2440, inset 0 0 0 2px #fff2a033; text-align: center; }
.result-panel.is-hit .result-stake { color: #fff8d9; font-size: clamp(21px, 2.2vw, 30px); font-weight: 1000; text-shadow: 0 2px 4px #102a1d99; }
.result-panel.is-hit .result-arrow { color: #ffe364; font-size: 56px; text-shadow: 0 0 16px #ffe364aa; animation: payout-arrow-glow 1.2s ease-in-out 2; }
.result-panel.is-hit .result-payout { color: #fff174; font-size: clamp(31px, 3.7vw, 48px); font-weight: 1000; letter-spacing: -.06em; text-shadow: 0 2px 0 #83651b, 0 0 20px #f9da5288; overflow-wrap: anywhere; }
@keyframes result-pop { from { opacity: 0; transform: scale(.85) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes payout-arrow-glow { 50% { opacity: .6; filter: drop-shadow(0 0 10px #fff4aa); } }
.podium-title { margin: 30px 0 4px; color: #28543a; font-size: 22px; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; padding: 24px 10px 0; border: 0; background: transparent; overflow: hidden; }
.podium-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; text-align: center; animation: podium-rise .55s ease-out both; }
.podium-rank-1 { grid-column: 2; grid-row: 1; animation-delay: .1s; }
.podium-rank-2 { grid-column: 1; grid-row: 1; animation-delay: .25s; }
.podium-rank-3 { grid-column: 3; grid-row: 1; animation-delay: .4s; }
.podium-medal { position: relative; z-index: 1; font-size: 72px; line-height: 1; filter: drop-shadow(0 5px 4px #3d321d45); }
.podium-rank-1 .podium-medal { font-size: 86px; }
.podium-zebra { position: relative; display: grid; place-items: center; width: min(100%, 150px); height: 130px; background: transparent; font-size: 64px; }
.podium-zebra img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 9px 5px #31422838); }
.podium-rank-1 .podium-zebra { width: min(100%, 190px); height: 165px; }
.podium-rank-1 .podium-zebra::before { content: ""; position: absolute; width: 155px; height: 155px; border-radius: 50%; background: radial-gradient(circle, #ffe69eaa 0 30%, #ffe69e00 72%); pointer-events: none; }
.podium-name { min-height: 2.7em; color: #1f4b33; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.podium-step { display: flex; align-items: baseline; justify-content: center; gap: 3px; width: 100%; padding: 12px 4px 0; border-radius: 9px 9px 0 0; border: 2px solid #bd9143; border-bottom: 0; color: #574014; background: linear-gradient(125deg, #fff0b0, #e7b943 68%, #b77d25); box-shadow: inset 4px 4px 0 #ffffff62, 0 5px 12px #30372124; }
.podium-step strong { font-size: 50px; line-height: 1; font-weight: 1000; text-shadow: 0 2px 0 #ffffff66; }
.podium-step span { font-size: 18px; font-weight: 900; white-space: nowrap; }
.podium-rank-1 .podium-step { height: 145px; }
.podium-rank-2 .podium-step { height: 102px; border-color: #9ba8a2; color: #3e4d48; background: linear-gradient(125deg, #f8fbfa, #c1cfca 68%, #93a49e); }
.podium-rank-3 .podium-step { height: 78px; border-color: #a66a48; color: #58351f; background: linear-gradient(125deg, #f2c5a8, #cf8c61 68%, #a76542); }
@keyframes podium-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.finish-title { margin: 22px 0 10px; font-size: 16px; color: #234a30; }
.finish-list { display: grid; gap: 7px; list-style: none; margin: 0; padding: 0; }
.finish-row { display: grid; grid-template-columns: 44px 54px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 54px; padding: 5px 11px; border: 1px solid var(--frame-border, #dbe5d6); border-radius: 9px; background: var(--frame-tint, #fffdf7); }
.finish-row.is-picked { outline: 2px solid #d49b49; outline-offset: -2px; }
.finish-rank { font-size: 14px; font-weight: 900; color: #2b5339; white-space: nowrap; }
.finish-row:first-child .finish-rank { color: #aa6322; }
.finish-row .zebra-icon { width: 54px; height: 43px; border: 1px solid var(--frame-border, #dbe5d6); background: var(--frame-color, #fff); }
.finish-name { display: flex; align-items: center; min-width: 0; gap: 6px; font-size: 13px; font-weight: 900; overflow-wrap: anywhere; }
.finish-horse-number { display: inline-grid; flex: none; place-items: center; width: 24px; height: 24px; border: 1px solid; border-radius: 5px; font-size: 12px; line-height: 1; }
.finish-pick { border-radius: 999px; padding: 5px 8px; background: #eac86f; color: #4f3e1b; font-size: 10px; font-weight: 900; white-space: nowrap; }
.result-breakdown { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; margin-top: 22px; align-items: start; }
.finish-column, .settled-column { min-width: 0; }
.result-breakdown .finish-title, .settled-title { margin: 0 0 10px; color: #234a30; font-size: 16px; }
.settled-list { display: grid; gap: 5px; }
.settled-row { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 8px; align-items: start; min-height: 42px; padding: 8px 10px; border: 1px solid #dbe5d6; border-radius: 9px; background: #fffdf7; }
.settled-type { padding-top: 3px; color: #315a40; font-size: 13px; white-space: nowrap; }
.settled-combinations { display: flex; flex-wrap: wrap; gap: 5px 7px; min-width: 0; }
.settled-ticket { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px; min-width: 0; padding: 3px 6px; border-radius: 5px; background: #f2f5ec; line-height: 1.3; }
.settled-picks { color: #3f5848; font-size: 12px; font-weight: 800; white-space: nowrap; }
.settled-amount { color: #a3471f; font-size: 13px !important; font-weight: 1000; white-space: nowrap; font-variant-numeric: tabular-nums; }
.settled-note { margin: 7px 0 0; color: #687c6d; font-size: 10px !important; }

.bet-builder { display: block; }
.bet-type-tabs { display: flex; gap: 7px; overflow-x: auto; margin-top: 17px; padding: 2px 2px 10px; scrollbar-width: thin; }
.bet-type-tab { flex: 1 0 80px; min-height: 48px; padding: 9px 11px; border: 1px solid #bfc9c0; border-radius: 9px; background: #f7f8f2; color: #284638; font-size: 13px; font-weight: 1000; white-space: nowrap; box-shadow: 0 3px 0 #d7dbd2; }
.bet-type-tab[aria-pressed="true"] { border-color: #c95c28; background: #e97b39; color: #fff; box-shadow: 0 3px 0 #a44722; }
.bet-type-tab:focus-visible, .odds-board button:focus-visible { outline: 3px solid #176f50; outline-offset: 2px; }
.bet-rule { margin: 10px 0 7px; padding: 13px 16px; border: 1px solid #d8e2ce; border-left: 5px solid #e97b39; border-radius: 10px; background: #f3f8ea; color: #244733; }
.bet-rule strong { display: block; font-size: 14px; }
.bet-rule p { margin: 4px 0 !important; color: #244733 !important; font-size: 14px !important; font-weight: 900; line-height: 1.45; }
.bet-rule small { display: block; color: #637b66; font-size: 11px; line-height: 1.5; }
.bet-rules-guide { margin: 0 0 13px; color: #315942; font-size: 12px; }
.bet-rules-guide summary { width: fit-content; cursor: pointer; font-weight: 900; }
.bet-rules-list { display: grid; gap: 4px; margin-top: 8px; padding: 9px; border: 1px solid #dbe5d6; border-radius: 9px; background: #fffdf7; }
.bet-rules-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 9px; padding: 5px; border-bottom: 1px solid #e9ece2; line-height: 1.4; }
.bet-rules-item:last-child { border-bottom: 0; }
.bet-rules-item b { color: #a6532c; }
.bet-workspace { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 17px; align-items: start; }
.odds-board { min-width: 0; padding: 16px; border: 1px solid #d7ded4; border-radius: 13px; background: #f9fbf6; }
.odds-board-heading { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.odds-board-heading h4 { margin: 0 0 5px; color: #173b2d; font-size: 17px; }
.odds-fixed { display: inline-block; border-radius: 999px; padding: 3px 8px; background: #e5efdf; color: #466545; font-size: 10px; font-weight: 900; }
.odds-clear { flex: none; padding: 8px 10px; border: 1px solid #c9d3c7; border-radius: 7px; background: #fff; color: #31533b; font-size: 11px; font-weight: 900; }
.odds-guide { margin: 11px 0 !important; color: #46634e !important; line-height: 1.5; }
.odds-anchor-title { margin: 12px 0 7px !important; color: #244b35 !important; font-weight: 900; }
.odds-anchors { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.odds-anchor { flex: 0 0 96px; display: grid; justify-items: center; gap: 3px; min-height: 65px; padding: 7px 5px; border: 1px solid #cbd6c9; border-radius: 9px; background: #fff; color: #294735; font-size: 10px; font-weight: 900; }
.odds-anchor span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odds-anchor.is-viewing { border-color: #d3703d; background: #fff1dc; box-shadow: inset 0 0 0 2px #ec9b52; }
.odds-anchor[aria-pressed="true"] { background: #ffe1b9; }
.odds-anchor-win { color: #a65332; font-size: 10px; white-space: nowrap; }
.odds-horse-number { display: inline-grid; place-items: center; width: 29px; height: 29px; flex: none; border: 1px solid #829188; border-radius: 6px; background: #fff; color: #1e2d27; font-size: 13px; font-weight: 1000; }
.horse-frame-number[data-horse-id="1"] { background: #fff; color: #1e2d27; border-color: #829188; }
.odds-horse-number[data-horse-id="2"], .horse-frame-number[data-horse-id="2"] { background: #272b2c; color: #fff; border-color: #272b2c; }
.odds-horse-number[data-horse-id="3"], .horse-frame-number[data-horse-id="3"] { background: #d44141; color: #fff; border-color: #d44141; }
.odds-horse-number[data-horse-id="4"], .horse-frame-number[data-horse-id="4"] { background: #3167d6; color: #fff; border-color: #3167d6; }
.odds-horse-number[data-horse-id="5"], .horse-frame-number[data-horse-id="5"] { background: #ffe644; color: #2c2c1c; border-color: #e2cb36; }
.odds-horse-number[data-horse-id="6"], .horse-frame-number[data-horse-id="6"] { background: #379943; color: #fff; border-color: #379943; }
.odds-horse-number[data-horse-id="7"], .horse-frame-number[data-horse-id="7"] { background: #ed9235; color: #28231d; border-color: #ed9235; }
.odds-horse-number[data-horse-id="8"], .horse-frame-number[data-horse-id="8"] { background: #e86ab2; color: #fff; border-color: #e86ab2; }
.race-runner-number.horse-frame-number, .finish-closeup-runner b.horse-frame-number { border-color: #fff; box-shadow: 0 1px 5px #173829aa; }
.odds-single-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 15px; }
.odds-single { position: relative; display: grid; grid-template-columns: 29px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-width: 0; min-height: 54px; padding: 9px; border: 1px solid #cdd7cb; border-radius: 9px; background: #fff; color: #173b2d; text-align: left; }
.odds-single[aria-pressed="true"], .odds-value[aria-pressed="true"] { border-color: #d66a36; background: #ffe2ba; box-shadow: inset 0 0 0 2px #e99148; }
.odds-single[aria-pressed="true"]::after, .odds-value[aria-pressed="true"]::after { content: '✓'; position: absolute; top: 2px; right: 5px; color: #bd4e24; font-size: 13px; font-weight: 1000; }
.odds-single-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 900; }
.odds-single strong { color: #a54c29; font-size: 14px; white-space: nowrap; }
.odds-table-scroll { max-width: 100%; overflow-x: auto; margin-top: 11px; border: 1px solid #d8ded7; border-radius: 8px; background: #fff; scrollbar-width: thin; }
.odds-table { width: 100%; min-width: calc(var(--odds-columns, 1) * 70px); border-spacing: 3px; table-layout: fixed; }
.odds-table th, .odds-table td { height: 50px; padding: 0; text-align: center; }
.odds-table thead th, .odds-table tbody th { background: #eef2ed; }
.odds-table thead th { border-radius: 5px 5px 0 0; }
.odds-table tbody th { border-radius: 5px 0 0 5px; }
.odds-table .odds-corner { padding: 3px; color: #506a55; font-size: 10px; line-height: 1.25; }
.odds-axis { display: grid; justify-items: center; gap: 2px; }
.odds-axis-win { color: #9b5936; font-size: 10px; font-weight: 900; white-space: nowrap; }
.odds-axis-guide { margin: 9px 0 0 !important; color: #5b7563 !important; font-size: 10px !important; }
.odds-value { position: relative; display: block; width: 100%; min-height: 48px; border: 1px solid #d4dcd4; border-radius: 5px; background: #fff; color: #243b2d; font-size: 13px; font-weight: 900; }
.odds-value:hover { border-color: #dc8d56; background: #fff3df; }
.odds-unavailable { border-radius: 5px; background: #dde3dd; color: #7e8d81; font-size: 13px; }
.odds-footnote { margin: 11px 0 0 !important; color: #627866 !important; font-size: 10px !important; line-height: 1.5; }
.bet-editor { min-width: 0; padding: 16px; border: 1px solid #e2e5d8; border-radius: 13px; background: #fffdf7; }
.bet-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bet-controls label { display: grid; gap: 6px; }
.bet-controls select, .bet-controls input { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid #cbd6c9; border-radius: 9px; background: #fff; color: #173829; }
.bet-help { margin: 13px 0 0 !important; line-height: 1.6; }
.bet-groups { display: grid; gap: 16px; margin-top: 18px; }
.bet-group { padding: 13px; border: 1px solid #dde5d9; border-radius: 11px; background: #fafcf6; }
.bet-group h4 { margin: 0 0 10px; font-size: 13px; }
.horse-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.horse-choice { min-width: 0; border: 1px solid #cdd9c9; border-radius: 8px; padding: 9px 6px; background: #fff; color: #1c432d; font-size: 11px; font-weight: 800; overflow-wrap: anywhere; }
.horse-choice[data-horse-id="1"] { background: #fff; color: #1e2d27; border-color: #829188; }
.horse-choice[data-horse-id="2"] { background: #272b2c; color: #fff; border-color: #272b2c; }
.horse-choice[data-horse-id="3"] { background: #d44141; color: #fff; border-color: #d44141; }
.horse-choice[data-horse-id="4"] { background: #3167d6; color: #fff; border-color: #3167d6; }
.horse-choice[data-horse-id="5"] { background: #ffe644; color: #2c2c1c; border-color: #d7b900; }
.horse-choice[data-horse-id="6"] { background: #379943; color: #fff; border-color: #379943; }
.horse-choice[aria-pressed="true"] { outline: 3px solid #e57b4e; outline-offset: 1px; box-shadow: inset 0 0 0 2px #fff9; }
.horse-choice:focus-visible { outline: 3px solid #173b2a; outline-offset: 2px; }
.bet-preview { margin-top: 17px; padding: 14px; border-radius: 10px; background: #f0f5e9; }
.bet-preview .bet-summary { color: #234a30; font-size: 13px; font-weight: 900; }
.bet-preview .bet-warning { margin-top: 7px; color: #ab4a34; font-weight: 800; }
.bet-preview-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 16px; max-height: 220px; overflow: auto; margin: 10px 0 0; padding: 0; list-style: none; font-size: 11px; }
.bet-preview-list li { border-top: 1px solid #dce8d7; padding: 6px 0; }
.bet-add { margin-top: 12px; width: 100%; }
.bet-cart { margin-top: 13px; }
.bet-cart-title { padding: 11px 13px; border-radius: 8px; background: #e8edd1; color: #285239 !important; font-weight: 900; }
.bet-cart-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; border-bottom: 1px solid #e2e8de; padding: 7px 2px; color: #345a40; font-size: 11px; font-weight: 800; }
.bet-cart-row .text-button { font-size: 11px; }
.bet-cart-note { margin-top: 8px !important; line-height: 1.5; }
.bet-builder > .primary-button { margin-top: 15px; width: 100%; }
@media (max-width: 980px) { .bet-workspace { grid-template-columns: 1fr; } }
.ticket-receipt { margin-top: 20px; border-top: 1px solid #d2dfcf; padding-top: 15px; }
.ticket-receipt summary { cursor: pointer; color: #22543b; font-size: 13px; font-weight: 900; }
.ticket-receipt-list { max-height: 230px; overflow: auto; margin: 10px 0 0; padding-left: 21px; font-size: 11px; line-height: 1.7; }
.ticket-receipt-list li { padding: 4px 0; border-bottom: 1px solid #dce8d7; }
.ticket-receipt-list li.is-hit { color: #ad5e2b; font-weight: 900; }
.finished-lineup { margin-top: 18px; padding: 15px; border: 1px solid #d5e0d2; border-radius: 12px; background: #f8faf4; }
.finished-lineup > summary { color: #28553a; font-size: 13px; font-weight: 900; cursor: pointer; }
.finished-lineup > .race-conditions { margin-top: 16px; }

.roster-panel { margin-top: 25px; padding: 24px 30px; }
.roster-panel summary { cursor: pointer; font-size: 20px; font-weight: 900; }
.roster-panel summary span { margin-left: 12px; color: #60756a; font-size: 12px; font-weight: 600; }
.grade-note { margin: 13px 0 0; color: #60756a; font-size: 12px; line-height: 1.6; }
.roster-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 900px; margin: 20px auto 0; }
.roster-card { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; min-width: 0; min-height: 146px; padding: 12px; border: 1px solid #d7e1d3; border-radius: 12px; background: #fff; color: #244834; text-align: center; }
.roster-card:hover { border-color: #e49355; background: #fff6e9; transform: translateY(-2px); }
.roster-card:focus-visible, .roster-dialog-close:focus-visible { outline: 3px solid #e47b43; outline-offset: 2px; }
.roster-card .zebra-icon { width: 92px; height: 86px; }
.roster-name { font-size: 14px; font-weight: 900; line-height: 1.25; overflow-wrap: anywhere; }
.roster-dialog { position: fixed; width: min(92vw, 500px); max-height: min(88dvh, 720px); margin: auto; padding: 25px; overflow-y: auto; border: 0; border-radius: 20px; background: #fffdf6; color: #173829; box-shadow: 0 20px 65px #071d14a8; }
.roster-dialog::backdrop { background: #10251bb8; backdrop-filter: blur(3px); }
.roster-dialog-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #c8d5c8; border-radius: 50%; background: #fff; color: #285039; font-size: 26px; line-height: 1; }
.roster-dialog-hero { display: flex; align-items: center; gap: 18px; padding-right: 42px; }
.roster-dialog-hero .zebra-icon { width: 105px; height: 95px; }
.roster-dialog-hero h3 { margin: 7px 0 0; font-size: 25px; line-height: 1.2; }
.roster-dialog-profile { margin: 20px 0; color: #43604a; font-size: 14px; line-height: 1.7; }
.roster-dialog-episode { margin: 0 0 20px; padding: 16px 18px; border: 1px solid #e4dec7; border-radius: 14px; background: #fbf5e5; }
.roster-dialog-episode h4 { margin: 0 0 7px; color: #ae6842; font-size: 11px; letter-spacing: .08em; }
.roster-dialog-episode p { margin: 0; color: #284735; font-size: 14px; line-height: 1.7; }
.zebra-mobile-details .zebra-episode { padding: 9px 11px; border-radius: 9px; background: #fbf5e5; color: #385141; }
.roster-dialog-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.roster-dialog-stats > div { display: flex; justify-content: space-between; align-items: center; gap: 5px; padding: 10px; border-radius: 9px; background: #edf3e6; }
.roster-dialog-stats span { font-size: 11px; font-weight: 800; }
.roster-dialog-stats strong { color: #2c6744; font-size: 20px; }
.roster-dialog-stats strong[data-grade="S"] { color: #b8502a; }
.roster-dialog-stats strong[data-grade="A"] { color: #2a7849; }
.roster-dialog-traits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 19px 0 0; }
.roster-dialog-traits > div { padding: 10px; border: 1px solid #dae4d4; border-radius: 9px; }
.roster-dialog-traits dt { color: #718475; font-size: 10px; font-weight: 800; }
.roster-dialog-traits dd { margin: 5px 0 0; font-size: 14px; font-weight: 900; }
.roster-dialog-note { margin: 18px 0 0; color: #718475; font-size: 11px; line-height: 1.6; }
@media (max-width: 650px) {
  .site-head { flex-wrap: wrap; gap: 5px; }
  .brand { width: 100%; }
  .account-bar { width: 100%; justify-content: space-between; gap: 8px; font-size: 11px; }
  .account-bar .text-button { white-space: nowrap; }
  .zebra-grid { grid-template-columns: 1fr; gap: 9px; }
  .zebra-entry { overflow: hidden; border: 1px solid #d7e2d5; border-radius: 13px; background: #fff; }
  .zebra-entry > .zebra-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px 9px; min-height: 0; padding: 9px 12px; border: 0; border-radius: 0; box-shadow: none; }
  .zebra-entry > .zebra-card[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #e57b4e; }
  .zebra-entry .zebra-top { min-width: 0; gap: 9px; }
  .zebra-entry .zebra-icon { width: 54px; height: 48px; }
  .zebra-entry .zebra-top strong { font-size: 13px; }
  .zebra-entry .zebra-odds { font-size: 11px; white-space: nowrap; }
  .zebra-entry .zebra-stats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
  .zebra-entry .zebra-stats span { display: inline-flex; gap: 4px; padding: 3px 5px; border-radius: 6px; background: #f1f5ec; }
  .zebra-entry .zebra-stats i, .zebra-entry .zebra-style, .zebra-entry .zebra-profile { display: none; }
  .zebra-entry .zebra-stats small { font-size: 9px; }
  .zebra-entry .zebra-stats b { font-size: 10px; }
  .zebra-mobile-details { display: block; border-top: 1px solid #e4eadf; color: #46604d; }
  .zebra-mobile-details summary { padding: 11px 12px; font-size: 11px; font-weight: 900; cursor: pointer; }
  .zebra-mobile-details p { padding: 0 12px; margin: 6px 0 10px; font-size: 11px; line-height: 1.5; }
  #jumpToBetBtn { width: 100%; min-height: 48px; }
  #betPanel { scroll-margin-top: 76px; }
  .bet-tab-hint { display: block; margin: -3px 0 9px !important; color: #617766 !important; font-size: 11px !important; }
  .bet-type-tab { min-height: 50px; }
  .odds-table tbody th { position: sticky; left: 0; z-index: 1; }
  .bet-controls select, .bet-controls input { min-height: 48px; font-size: 16px; }
  .horse-choice { min-height: 48px; }
  .bet-preview .bet-summary { font-size: 15px; }
  .bet-builder > .primary-button { min-height: 54px; font-size: 15px; }
  .result-panel.is-hit .result-money { grid-template-columns: 1fr; gap: 3px; padding: 16px 10px; }
  .result-panel.is-hit .result-stake { font-size: 22px; }
  .result-panel.is-hit .result-arrow { font-size: 38px; transform: rotate(90deg); }
  .result-panel.is-hit .result-payout { font-size: clamp(28px, 7vw, 38px); }
  .race-animation { padding: 12px; }
  .race-animation-heading { flex-direction: column; }
  .race-animation-heading h3 { font-size: 20px; }
  .race-skip { width: 100%; }
  .race-animation-track { height: 290px; min-height: 0; border-width: 6px; }
  .race-leaders-board { width: 100%; padding: 6px; }
  .race-leaders-title { margin-bottom: 4px; font-size: 9px; }
  .race-leader-name { font-size: 10px; }
  .finish-closeup { top: 8px; right: 3%; bottom: 8px; left: 3%; }
  .finish-closeup-runner { width: 62px; height: 56px; font-size: 36px; }
  .finish-closeup-runner img { width: 62px; height: 56px; }
  .finish-closeup-runner b { width: 18px; height: 18px; font-size: 9px; }
  .race-runner { width: 42px; height: 42px; font-size: 26px; }
  .race-runner img { width: 42px; height: 40px; }
  .race-runner-number { width: 17px; height: 17px; font-size: 9px; }
  .oval-infield b { font-size: 9px; }
  .oval-infield span { font-size: 8px; }
  .podium { gap: 5px; padding: 16px 2px 0; }
  .podium-medal { font-size: 27px; }
  .podium-rank-1 .podium-medal { font-size: 34px; }
  .podium-zebra { width: min(100%, 86px); height: 80px; font-size: 38px; }
  .podium-rank-1 .podium-zebra { width: min(100%, 103px); height: 96px; }
  .podium-rank-1 .podium-zebra::before { width: 105px; height: 105px; }
  .podium-name { font-size: 10px; }
  .podium-step { padding-top: 8px; }
  .podium-step strong { font-size: 32px; }
  .podium-step span { font-size: 10px; }
  .podium-rank-1 .podium-step { height: 95px; }
  .podium-rank-2 .podium-step { height: 70px; }
  .podium-rank-3 .podium-step { height: 55px; }
  .roster-panel { padding: 20px; }
  .roster-grid { grid-template-columns: 1fr; }
  .finish-row { grid-template-columns: 36px 44px minmax(0, 1fr) auto; gap: 6px; padding: 5px 7px; }
  .finish-row .zebra-icon { width: 44px; height: 37px; }
  .finish-name { font-size: 11px; }
  .finish-pick { padding: 4px 5px; font-size: 9px; }
  .bet-type-tab { flex-basis: 77px; }
  .odds-board, .bet-editor { padding: 12px; }
  .odds-single-grid { grid-template-columns: 1fr; }
  .bet-controls { grid-template-columns: 1fr; }
  .horse-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bet-preview-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .result-panel.is-hit h3 { animation: none; }
  .result-panel.is-hit .result-arrow { animation: none; }
  .race-runner img { animation: none; transform: scaleX(var(--facing, 1)); }
  .race-leaders-board, .race-leader-row { transition: none; }
  .finish-closeup, .finish-closeup-runner img, .finish-tension-badge, .finish-closeup-goal, .finish-drama-rays, .finish-photo-flash, .finish-goal-stamp { animation: none; transition: none; }
  .finish-closeup-track::before, .finish-closeup-track::after { transition: none; }
  .podium-card { animation: none; }
  .race-animation { scroll-behavior: auto; }
}
.hero-zebra { position: absolute; z-index: 2; left: 4%; bottom: -7%; width: 92%; height: 94%; object-fit: contain; object-position: center bottom; filter: drop-shadow(10px 14px 0 #15342525); transform: rotate(-5deg); }
@media (max-width: 850px) { .hero-zebra { left: 50%; bottom: -9%; width: min(80%, 430px); height: 108%; transform: translateX(-50%) rotate(-5deg); } }
@media (max-width: 580px) { .hero-zebra { width: min(90%, 300px); height: 112%; } }

.primary-nav { position: sticky; top: 0; z-index: 20; background: #f5f2e9f2; border-top: 1px solid #e0dfd2; border-bottom: 1px solid #d7ddcf; backdrop-filter: blur(12px); }
.primary-nav-inner { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; max-width: 1220px; margin: auto; padding: 7px 20px; }
.nav-tab { min-height: 48px; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: #426451; font-size: 14px; font-weight: 900; white-space: nowrap; transition: background .15s, color .15s, transform .15s; }
.nav-tab:hover { background: #e6ecd8; }
.nav-tab[aria-selected="true"] { background: #173b2a; color: #f0f3cb; box-shadow: inset 0 -4px 0 #e4e83f; }
.nav-tab:focus-visible { outline: 3px solid #d47a4b; outline-offset: 2px; }
.nav-short { display: none; }
.app-view { padding-top: 20px; min-height: 45vh; }
.ranking-heading { margin-bottom: 17px; }
.ranking-heading .text-button { white-space: nowrap; }
.ranking-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 5px; border-radius: 13px; background: #edf1e7; }
.ranking-switch button { min-height: 47px; border: 0; border-radius: 10px; background: transparent; color: #3f6250; font-weight: 1000; }
.ranking-switch button[aria-pressed="true"] { background: #173b2a; color: #fffdf2; box-shadow: inset 0 -4px 0 #e4e83f; }
.ranking-switch button:focus-visible { outline: 3px solid #d47a4b; outline-offset: 2px; }
.ranking-period { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 17px 0 13px; }
.ranking-period h3 { margin: 5px 0 0; font-size: clamp(17px, 2.6vw, 23px); }
.ranking-countdown { flex: none; padding: 7px 10px; border-radius: 999px; background: #fff0d5; color: #965021; font-size: 11px; font-weight: 900; }
.ranking-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.ranking-summary > div { display: grid; gap: 7px; min-width: 0; padding: 17px 15px; border: 1px solid #d6e2d0; border-radius: 12px; background: #f0f5e8; }
.ranking-summary > div:first-child { border-color: #173b2a; background: #173b2a; color: #fffdf2; }
.ranking-summary span { font-size: 11px; font-weight: 900; }
.ranking-summary strong { overflow-wrap: anywhere; font-size: clamp(19px, 3vw, 27px); line-height: 1.1; }
.ranking-rule { margin: 18px 0 10px; color: #58715f; font-size: 12px; line-height: 1.6; }
.leaderboard .leader-list { display: grid; gap: 8px; }
.leaderboard .leader-list li { display: grid; grid-template-columns: 43px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 66px; padding: 10px 13px; border: 1px solid #dbe3d6; border-radius: 12px; background: #fff; }
.leaderboard .leader-list li:first-child { border-top: 1px solid #dbe3d6; }
.leaderboard .leader-list li.is-podium { border-color: #e9dba9; background: linear-gradient(100deg, #fff8df, #fffef7); }
.leaderboard .leader-list li.is-me { border-color: #e57b4e; background: #fff7e9; }
.leaderboard .leader-list .rank-number { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; background: #e9eee5; color: #31513b; font-size: 14px; }
.leaderboard .leader-list li:nth-child(1) .rank-number { background: #f6d46e; color: #66450d; }
.leaderboard .leader-list li:nth-child(2) .rank-number { background: #dce6e3; color: #455e5a; }
.leaderboard .leader-list li:nth-child(3) .rank-number { background: #e8bc9d; color: #623a23; }
.ranking-player { display: grid; gap: 4px; min-width: 0; }
.ranking-player strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.ranking-player small { color: #76897a; font-size: 11px; }
.ranking-value { text-align: right; white-space: nowrap; }
.ranking-value b { display: block; color: #173b2a; font-size: 17px; }
.ranking-value small { color: #778979; font-size: 10px; }
.ranking-value.is-negative b { color: #986d55; }
.leaderboard .leader-list li.empty { display: block; padding: 30px 10px; text-align: center; }
.ranking-footnote { margin: 15px 0 0; color: #819083; font-size: 11px; line-height: 1.6; }
.home-race-link { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 18px; padding: 24px 28px; border-radius: 18px; background: #e8efd9; border: 1px solid #d1e0c5; }
.home-race-link h2 { margin: 4px 0; font-size: 23px; }
.home-race-link p { margin: 0; color: #536d5d; font-size: 13px; }
.tab-gate { margin-top: 25px; padding: 35px; text-align: center; }
.tab-gate h2 { margin: 8px 0; font-size: 26px; }
.tab-gate p, .tab-gate-inline p { color: #617669; font-size: 14px; }
.tab-gate-inline { padding: 28px 15px; border: 1px dashed #c5d3bc; border-radius: 12px; text-align: center; }
.history-panel, .other-panel { margin-top: 25px; padding: 30px; }
.history-list { display: grid; gap: 12px; }
.history-item { padding: 20px 22px; border: 1px solid #dce6d8; border-radius: 14px; background: #fffef9; }
.history-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.history-top h3 { margin: 0; font-size: 19px; }
.history-badge { padding: 5px 9px; border-radius: 999px; background: #edf0e9; color: #5c6d60; font-size: 11px; font-weight: 900; }
.history-badge.is-hit { background: #fff0b6; color: #9a551e; }
.history-item time { display: block; margin-top: 6px; color: #799084; font-size: 11px; }
.history-result { margin: 13px 0; color: #274934; font-size: 15px; font-weight: 900; line-height: 1.6; }
.history-details { border-top: 1px solid #e5e9df; padding-top: 10px; }
.history-details summary { cursor: pointer; color: #275f3e; font-size: 13px; font-weight: 900; }
.history-details h4 { margin: 16px 0 7px; font-size: 14px; }
.history-details ol, .history-details ul { margin: 0; padding-left: 22px; color: #42594b; font-size: 13px; line-height: 1.8; }
.history-details li.is-hit { color: #a35425; font-weight: 900; }
.other-panel h2 { margin: 8px 0 16px; font-size: 26px; }
.other-panel p { max-width: 760px; color: #526b5c; font-size: 14px; line-height: 1.8; }
@media (max-width: 650px) {
  .primary-nav-inner { display: flex; gap: 4px; overflow-x: auto; padding: 7px 12px; scrollbar-width: thin; }
  .nav-tab { flex: 0 0 auto; min-width: 84px; min-height: 45px; font-size: 13px; }
  .home-race-link { align-items: stretch; flex-direction: column; padding: 21px; }
  .history-panel, .other-panel { padding: 23px 19px; }
  .history-item { padding: 17px 14px; }
  .history-result { font-size: 13px; }
  .leaderboard { padding: 19px 13px; }
  .ranking-heading { flex-direction: row; align-items: start; gap: 4px; }
  .ranking-heading h2 { font-size: 23px; }
  .ranking-heading .text-button { padding: 7px 3px; font-size: 11px; }
  .ranking-summary { gap: 5px; }
  .ranking-summary > div { padding: 12px 7px; }
  .ranking-summary span { font-size: 9px; }
  .ranking-summary strong { font-size: clamp(15px, 4.5vw, 21px); }
  .ranking-period h3 { font-size: 16px; }
  .ranking-countdown { padding: 6px 7px; font-size: 10px; }
  .leaderboard .leader-list li { grid-template-columns: 33px minmax(0, 1fr) auto; gap: 6px; min-height: 60px; padding: 8px; }
  .leaderboard .leader-list .rank-number { width: 30px; height: 30px; font-size: 12px; }
  .ranking-player strong { font-size: 12px; }
  .ranking-player small { font-size: 10px; }
  .ranking-value b { font-size: 14px; }
}

@media (max-width: 650px) {
  .primary-nav-inner { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; overflow: visible; padding: 6px 7px; }
  .nav-tab { min-width: 0; min-height: 44px; padding: 5px 1px; font-size: 11px; }
  .nav-full { display: none; }
  .nav-short { display: inline; }

  .hero { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); min-height: 215px; }
  .hero-copy { padding: 20px 15px; }
  .hero .eyebrow { font-size: 9px; letter-spacing: .1em; }
  .hero h1 { margin: 8px 0 10px; font-size: clamp(23px, 6.3vw, 31px); line-height: 1.18; }
  .hero p { font-size: 10px; line-height: 1.5; }
  .hero-badges { display: none; }
  .hero-art { height: auto; min-height: 215px; }
  .hero-zebra { left: -7%; bottom: -3%; width: 114%; height: 100%; transform: none; }
  .sun { width: 95px; height: 95px; top: 24px; right: -18px; }
  .hero-art-label { right: 7px; bottom: 22px; font-size: 8px; }
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 13px; }
  .dashboard-grid > section { min-height: 0; padding: 14px 12px; border-radius: 13px; }
  .dashboard-grid h2 { margin: 6px 0; font-size: 12px; }
  .dashboard-grid .eyebrow { font-size: 9px; letter-spacing: .1em; }
  .wallet-amount strong { font-size: 27px; }
  .wallet-amount span { font-size: 11px; }
  .wallet-card p { margin-top: 8px; font-size: 9px; }
  .daily-card p { min-height: 0; margin: 6px 0; font-size: 10px; }
  .daily-card .light-button { margin-top: 3px; padding: 8px; font-size: 10px; }
  .record-card { grid-column: 1 / -1; }
  .record-numbers { margin-top: 8px; }
  .record-numbers strong { font-size: 23px; }
  .home-race-link { flex-direction: row; align-items: center; gap: 8px; margin-top: 12px; padding: 14px; }
  .home-race-link h2 { font-size: 17px; }
  .home-race-link p { font-size: 10px; }
  .home-race-link .primary-button { flex: none; padding: 10px 8px; font-size: 10px; }

  .race-panel { padding: 18px 13px; }
  .race-panel .section-title { margin-bottom: 13px; }
  .race-panel .section-title p { display: none; }
  .race-panel .section-title h2 { font-size: 22px; }
  .race-conditions { display: block; margin-bottom: 12px; padding: 8px 10px; font-size: 11px; }
  .zebra-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .zebra-entry > .zebra-card { display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; min-height: 112px; padding: 7px 4px; text-align: center; }
  .zebra-entry .zebra-top { flex-direction: column; gap: 3px; }
  .zebra-entry .zebra-icon { width: 50px; height: 45px; }
  .zebra-entry .zebra-top strong { font-size: 10px; line-height: 1.2; overflow-wrap: anywhere; }
  .zebra-entry .zebra-odds { margin-top: auto; font-size: 10px; }
  .zebra-entry .zebra-odds span:first-child { display: none; }
  .zebra-entry .zebra-stats { display: none; }
  .zebra-mobile-details summary { padding: 8px 2px; font-size: 10px; text-align: center; }
  .zebra-mobile-details p { padding: 0 7px; font-size: 10px; text-align: left; }
  .bet-panel { margin-top: 17px; padding-top: 16px; }
  .bet-panel h3 { font-size: 19px; }
  .bet-panel > div:first-child > p { font-size: 11px; }
  .bet-type-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; overflow: visible; margin-top: 11px; padding: 2px 0 5px; }
  .bet-type-tab { min-width: 0; min-height: 45px; padding: 6px 1px; font-size: 11px; white-space: normal; }
  .bet-tab-hint { display: none; }
  .odds-board { margin-inline: -13px; padding: 10px 8px; }
  .odds-board-heading h4 { font-size: 15px; }
  .odds-guide { font-size: 11px; }
  .odds-anchors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; overflow: visible; padding-bottom: 0; }
  .odds-anchor { min-width: 0; min-height: 52px; padding: 5px 2px; }
  .odds-table-scroll { overflow-x: hidden; }
  .odds-table { min-width: 0; border-spacing: 2px; }
  .odds-table th, .odds-table td { height: 40px; }
  .odds-table .odds-horse-number { width: 23px; height: 23px; font-size: 11px; }
  .odds-table .odds-corner { padding: 1px; font-size: 8px; }
  .odds-value { min-height: 38px; padding: 0; font-size: clamp(9px, 2.4vw, 11px); letter-spacing: -.04em; }
  .odds-unavailable { font-size: 10px; }

  .result-panel { margin-top: 15px; padding: 14px 10px; }
  .result-panel > h3, .result-panel.is-hit h3 { margin: 5px 0; font-size: 31px; }
  .result-panel > p, .result-panel.is-hit > p { margin: 5px 0; font-size: 12px; line-height: 1.45; }
  .result-panel .result-money { margin-top: 9px; }
  .result-panel .result-stake { font-size: 14px; }
  .result-panel .result-arrow { font-size: 19px; }
  .result-panel .result-payout { font-size: 19px; }
  .result-panel.is-hit .result-money { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr); gap: 4px; margin: 10px 0 0; padding: 10px 5px; border-width: 2px; }
  .result-panel.is-hit .result-stake { font-size: 13px; }
  .result-panel.is-hit .result-arrow { font-size: 20px; transform: none; }
  .result-panel.is-hit .result-payout { font-size: 17px; }
  .podium-title { margin: 17px 0 0; font-size: 17px; }
  .podium { gap: 3px; padding: 9px 0 0; }
  .podium-card { gap: 2px; }
  .podium-medal { font-size: 52px; }
  .podium-rank-1 .podium-medal { font-size: 62px; }
  .podium-zebra { width: min(100%, 62px); height: 57px; }
  .podium-rank-1 .podium-zebra { width: min(100%, 75px); height: 67px; }
  .podium-rank-1 .podium-zebra::before { width: 76px; height: 76px; }
  .podium-name { min-height: 2.4em; font-size: 10px; line-height: 1.2; }
  .podium-step { padding-top: 4px; }
  .podium-step strong { font-size: 24px; }
  .podium-step span { font-size: 12px; }
  .podium-rank-1 .podium-step { height: 65px; }
  .podium-rank-2 .podium-step { height: 49px; }
  .podium-rank-3 .podium-step { height: 40px; }
  .finish-title { margin: 16px 0 7px; font-size: 14px; }
  .finish-list { gap: 4px; }
  .finish-row { min-height: 42px; padding: 3px 5px; }
  .finish-row .zebra-icon { width: 37px; height: 32px; }
  .finish-name { font-size: 10px; }
  .result-breakdown { gap: 14px; margin-top: 16px; grid-template-columns: 1fr; }
  .result-breakdown .finish-title, .settled-title { margin: 0 0 6px; font-size: 14px; line-height: 1.35; }
  .result-breakdown .finish-list { gap: 4px; }
  .result-breakdown .finish-row { grid-template-columns: 32px 38px minmax(0, 1fr); gap: 7px; padding: 4px 7px; min-height: 44px; }
  .result-breakdown .finish-rank { font-size: 11px; }
  .result-breakdown .finish-row .zebra-icon { width: 38px; height: 34px; }
  .result-breakdown .finish-name { font-size: 12px; }
  .result-breakdown .finish-pick { display: none; }
  .settled-list { gap: 4px; }
  .settled-row { grid-template-columns: 46px minmax(0, 1fr); gap: 5px; min-height: 40px; padding: 6px 7px; }
  .settled-type { font-size: 12px; }
  .settled-combinations { gap: 4px; }
  .settled-ticket { padding: 3px 5px; }
  .settled-picks { font-size: 11px; }
  .settled-amount { font-size: 12px !important; }
  .ticket-receipt { margin-top: 13px; }
  .finished-lineup { padding: 11px; }
}

@media (max-width: 650px) {
  .zebra-grid { grid-template-columns: 1fr; gap: 8px; }
  .zebra-entry > .zebra-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: center; gap: 3px 9px; min-height: 0; padding: 8px 9px; text-align: left; }
  .zebra-entry .zebra-top { display: contents; }
  .zebra-entry .zebra-icon { grid-column: 1; grid-row: 1 / 4; align-self: center; width: 64px; height: 64px; }
  .zebra-entry .zebra-top strong { grid-column: 2; grid-row: 1; font-size: 13px; }
  .zebra-entry .zebra-odds { grid-column: 2; grid-row: 2; margin: 0; font-size: 10px; }
  .zebra-entry .zebra-odds span:first-child { display: inline; }
  .zebra-entry .zebra-stats { grid-column: 2; grid-row: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .zebra-entry .zebra-stats span, .zebra-entry .zebra-stats span[data-stat="form"] { display: flex; justify-content: space-between; align-items: center; min-width: 0; gap: 2px; padding: 4px 5px; }
  .zebra-entry .zebra-stats span[data-stat="form"] { grid-column: 1 / -1; }
  .zebra-entry .zebra-stats small { min-width: 0; font-size: 9px; white-space: nowrap; }
  .zebra-entry .zebra-stats b { flex: none; font-size: 12px; }
  .zebra-entry .form-condition { padding: 2px 7px; font-size: 11px; }
  .zebra-mobile-details summary { padding: 7px 12px; text-align: left; }
  .odds-table th, .odds-table td { height: 45px; }
  .odds-table .odds-axis-win { font-size: clamp(8px, 2.15vw, 10px); letter-spacing: -.04em; }
  .odds-anchor-win { font-size: 9px; }
}

@media (max-width: 360px) {
  .zebra-entry > .zebra-card { grid-template-columns: 54px minmax(0, 1fr); gap: 3px 7px; }
  .zebra-entry .zebra-icon { width: 54px; height: 54px; }
  .zebra-entry .zebra-stats small { font-size: 8px; }
  .zebra-entry .zebra-stats b { font-size: 11px; }
  .zebra-entry .form-condition { font-size: 10px; }
}

@media (max-width: 650px) {
  #view-race.app-view { padding-top: 4px; }
  .race-panel { margin-top: 6px; padding: 12px 10px; }
  .race-panel .section-title { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-bottom: 6px; }
  .race-panel .section-title > div { min-width: 0; }
  .race-panel .section-title h2 { margin: 4px 0 0; font-size: clamp(15px, 4.6vw, 19px); }
  .race-panel .section-title .light-button, .race-panel .section-title .outline-button { grid-column: 2; grid-row: 1; width: auto; min-height: 38px; padding: 7px 9px; font-size: 11px; white-space: nowrap; }
  .jump-full { display: none; }
  .jump-short { display: inline; }
  .race-conditions { margin-bottom: 7px; padding: 5px 7px; font-size: 10px; line-height: 1.35; }
  .zebra-grid { gap: 4px; }
  .zebra-entry { position: relative; }
  .zebra-entry > .zebra-card { grid-template-columns: 48px minmax(0, 1fr); gap: 2px 7px; min-height: 72px; padding: 5px 7px; }
  .zebra-entry .zebra-icon { width: 48px; height: 48px; }
  .zebra-entry .zebra-top strong { padding-right: 43px; font-size: 11px; line-height: 1.15; }
  .zebra-entry .zebra-odds { padding-right: 43px; font-size: 9px; line-height: 1.15; }
  .zebra-entry .zebra-stats { gap: 2px; }
  .zebra-entry .zebra-stats span, .zebra-entry .zebra-stats span[data-stat="form"] { padding: 1px 3px; }
  .zebra-entry .zebra-stats small { font-size: 10px; }
  .zebra-entry .zebra-stats b { font-size: 11px; }
  .zebra-entry .form-condition { padding: 1px 5px; font-size: 10px; }
  .zebra-mobile-details { border: 0; }
  .zebra-mobile-details summary { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 40px; height: 25px; max-width: calc(100% - 10px); padding: 0; border: 1px solid #c8d7c7; border-radius: 6px; background: #f5f8ef; color: #315c41; font-size: 9px; line-height: 1; white-space: nowrap; list-style: none; }
  .zebra-mobile-details summary::-webkit-details-marker { display: none; }
  .zebra-mobile-details summary:focus-visible { outline: 2px solid #e47b43; outline-offset: 2px; }
  .zebra-mobile-details[open] { border-top: 1px solid #e4eadf; }
  .zebra-mobile-details[open] p { margin: 7px 0; padding: 0 9px; overflow-wrap: anywhere; }
  .zebra-mobile-details[open] p.zebra-episode { margin: 8px 9px 10px; padding: 9px; }
  .race-replay { margin: 8px 0 0; min-height: 36px; padding: 7px 10px; font-size: 12px; }
  .result-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 9px; }
  .result-actions > button { min-height: 39px; padding: 7px 5px; font-size: 11px; }
}

@media (max-width: 360px) {
  .zebra-entry .zebra-stats small { font-size: 9px; }
}

@media (max-width: 650px) {
  .roster-panel { padding: 18px 13px; }
  .roster-panel .section-title { margin-bottom: 0; }
  .roster-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 15px; }
  .roster-card { gap: 5px; min-height: 100px; padding: 6px 3px; }
  .roster-card .zebra-icon { width: 58px; height: 54px; }
  .roster-name { font-size: 10px; }
  .roster-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 19px; }
  .roster-dialog-hero { gap: 12px; }
  .roster-dialog-hero .zebra-icon { width: 82px; height: 75px; }
  .roster-dialog-hero h3 { font-size: 20px; }
  .roster-dialog-profile { margin: 16px 0; font-size: 13px; }
  .roster-dialog-stats > div { padding: 7px 5px; }
  .roster-dialog-stats span { font-size: 9px; }
  .roster-dialog-stats strong { font-size: 17px; }
  .roster-dialog-traits > div { padding: 8px; }
  .roster-dialog-traits dd { font-size: 12px; }
}