.rodeo-page { min-height: 100vh; display: flex; flex-direction: column; }
.rodeo-page .rodeo { flex: 1; }
.rodeo-page__back { font-family: var(--f-cond); font-weight: 600; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; color: var(--cream); text-decoration: none; white-space: nowrap; }
.rodeo-page__back:hover { color: #fff; }
.rodeo-page__back:focus-visible { outline: 3px solid #3ff5d8; outline-offset: 4px; border-radius: 4px; }
.rodeo-page__visit { margin: 18px auto 0; text-align: center; }
@media (max-width: 559px) { .rodeo-page__more { display: none; } .rodeo-page__back { font-size: 17px; } }

.rodeo {
  padding: clamp(40px, 8vh, 96px) 16px clamp(48px, 9vh, 110px);
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .15) 30%, rgba(0, 0, 0, .35));
}
.rodeo__head { max-width: 640px; text-align: center; }
.rodeo__kicker { margin: 0; font-family: var(--f-cond); font-weight: 700; font-size: 15px; letter-spacing: .3em; text-transform: uppercase; }
.rodeo__title { margin: 4px 0 0; line-height: 1; font-weight: 400; }
.rodeo__script { display: block; font-family: var(--f-script); font-size: clamp(48px, 9vw, 84px); line-height: 1.1; }
.rodeo__name { display: block; margin-top: 2px; font-family: var(--f-cond); font-weight: 700; font-size: clamp(22px, 4.2vw, 36px); letter-spacing: .22em; text-transform: uppercase; }
.rodeo__lede { margin: 14px auto 0; max-width: 34em; font-size: 17px; color: #efe0c6; }
.rodeo__tip { margin: clamp(24px, 4vh, 40px) auto 0; max-width: 40em; text-align: center; font-size: 15px; color: #d9c7a8; }

.rodeo__stage {
  position: relative;
  width: min(100%, 980px);
  aspect-ratio: 16 / 10;
  max-height: 82svh;
  margin-top: clamp(20px, 4vh, 36px);
  border-radius: 22px;
  overflow: hidden;
  background: #150b06;
  border: 4px solid #ffe6bf;
  box-shadow: 0 0 6px #ffb23f, 0 0 18px rgba(255, 162, 31, .7), 0 0 44px rgba(224, 123, 0, .4), 0 24px 50px rgba(0, 0, 0, .55);
  touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--f-cond);
}
@media (max-width: 640px), (max-aspect-ratio: 4/5) {
  .rodeo__stage { aspect-ratio: 4 / 5; border-radius: 18px; border-width: 3px; }
}
.rodeo__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.rodeo__hud {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(10, 5, 2, .65), transparent);
  pointer-events: none;
  opacity: 0; transition: opacity .25s;
}
.rodeo__stage:is([data-state="ready"], [data-state="riding"], [data-state="thrown"], [data-state="buzzer"]) .rodeo__hud { opacity: 1; }
.rodeo__timer { display: flex; align-items: baseline; gap: 4px; min-width: 4.4em; }
.rodeo__clock { font-weight: 700; font-size: clamp(34px, 6vw, 48px); line-height: 1; font-variant-numeric: tabular-nums; }
.rodeo__unit { font-size: 14px; letter-spacing: .15em; text-transform: uppercase; color: #bfe9e1; }
.rodeo__balance { flex: 1; max-width: 340px; padding-top: 4px; }
.rodeo__balance-label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #efe0c6; }
.rodeo__balance-track { display: block; height: 12px; margin-top: 5px; border-radius: 6px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 230, 191, .35); overflow: hidden; }
.rodeo__balance-fill { display: block; height: 100%; border-radius: 6px; transform-origin: 0 50%; background: #3ff5d8; box-shadow: 0 0 10px #3ff5d8; transition: background .2s, box-shadow .2s; }
.rodeo__stage[data-danger="1"] .rodeo__balance-fill { background: #ffb23f; box-shadow: 0 0 10px #ffa21f; }
.rodeo__stage[data-danger="2"] .rodeo__balance-fill { background: #ff4a3d; box-shadow: 0 0 12px #ff3b3b; }
.rodeo__level { margin-left: auto; margin-right: 44px; padding-top: 4px; font-weight: 700; font-size: 16px; letter-spacing: .2em; text-transform: uppercase; }

.rodeo__callout {
  position: absolute; left: 0; right: 0; top: 30%; margin: 0;
  text-align: center; font-family: var(--f-script); font-size: clamp(54px, 11vw, 104px); line-height: 1;
  pointer-events: none; opacity: 0;
}
.rodeo__stage:is([data-state="ready"], [data-state="thrown"], [data-state="buzzer"]) .rodeo__callout { opacity: 1; animation: pop .35s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }

.rodeo__panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(calc(100% - 28px), 620px);
  max-height: calc(100% - 28px); overflow: auto;
  padding: clamp(14px, 3vw, 26px);
  border-radius: 18px;
  background: rgba(20, 10, 4, .8);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: 0 0 0 2px rgba(255, 95, 184, .55), 0 0 22px rgba(255, 79, 174, .35);
  text-align: center;
  display: none;
}
.rodeo__stage[data-state="menu"] .rodeo__menu,
.rodeo__stage[data-state="result"] .rodeo__result { display: block; animation: pop .3s ease-out both; }
.rodeo__panel-title, .rodeo__result-title { margin: 0; font-family: var(--f-script); font-size: clamp(34px, 6vw, 52px); line-height: 1.15; }
.rodeo__levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
@media (max-width: 520px) { .rodeo__levels { grid-template-columns: 1fr; gap: 8px; } }
.rodeo__btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 48px; padding: 10px 14px;
  border: 2px solid #ffe6bf; border-radius: 12px;
  background: rgba(255, 178, 63, .08); color: #fff1d6;
  font: inherit; font-weight: 700; font-size: 18px; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 0 8px rgba(255, 162, 31, .5), inset 0 0 8px rgba(255, 162, 31, .25);
  cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
}
.rodeo__btn:hover { background: rgba(255, 178, 63, .2); box-shadow: 0 0 14px rgba(255, 162, 31, .8), inset 0 0 10px rgba(255, 162, 31, .35); }
.rodeo__btn:active { transform: scale(.97); }
.rodeo__btn:focus-visible { outline: 3px solid #3ff5d8; outline-offset: 3px; }
.rodeo__btn-name { font-size: 22px; }
.rodeo__btn-sub { font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: none; color: #e6d2b0; }
.rodeo__btn-best { font-size: 13px; letter-spacing: .1em; color: #8ff8e6; }
.rodeo__btn-best:empty { display: none; }
.rodeo__btn--go { border-color: #ffd0e8; background: rgba(255, 95, 184, .16); box-shadow: 0 0 10px rgba(255, 79, 174, .6), inset 0 0 8px rgba(255, 79, 174, .3); }
.rodeo__btn--go:hover { background: rgba(255, 95, 184, .3); box-shadow: 0 0 16px rgba(255, 79, 174, .9), inset 0 0 10px rgba(255, 79, 174, .4); }
.rodeo__how, .rodeo__result-note { margin: 14px 0 0; font-family: var(--f-body); font-size: 15px; line-height: 1.45; color: #efe0c6; }
.rodeo__how b { color: #fff1d6; }
.rodeo__result-score { margin: 4px 0 0; font-weight: 700; font-size: clamp(34px, 6vw, 50px); letter-spacing: .08em; line-height: 1.1; }
.rodeo__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.rodeo__actions .rodeo__btn { min-width: 160px; }

.rodeo__status { position: absolute; inset: 0; display: none; place-items: center; margin: 0; padding: 24px; text-align: center; font-size: 20px; letter-spacing: .1em; color: #efe0c6; }
.rodeo__stage[data-state="loading"] .rodeo__status--loading,
.rodeo__stage[data-state="error"] .rodeo__status--error { display: grid; }
.rodeo__stage[data-state="error"] .rodeo__canvas { display: none; }

.rodeo__stick {
  --size: clamp(104px, 22vmin, 140px);
  position: absolute; left: 50%; top: calc(100% - var(--size) / 2 - 16px);
  width: var(--size); height: var(--size); margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  border-radius: 50%;
  border: 3px solid rgba(63, 245, 216, .75);
  background: radial-gradient(circle, rgba(63, 245, 216, .08), rgba(63, 245, 216, .18));
  box-shadow: 0 0 10px rgba(63, 245, 216, .55), inset 0 0 12px rgba(63, 245, 216, .35);
  pointer-events: none;
  opacity: 0; transition: opacity .2s;
}
.rodeo__stage:is([data-state="ready"], [data-state="riding"], [data-state="thrown"]) .rodeo__stick { opacity: .75; }
.rodeo__stick.is-active { opacity: 1 !important; }
.rodeo__knob {
  position: absolute; left: 50%; top: 50%;
  width: 44%; height: 44%; margin: -22% 0 0 -22%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff, #8ff8e6 40%, #14c7b1);
  box-shadow: 0 0 14px #3ff5d8, 0 0 30px rgba(20, 199, 177, .6);
}

.rodeo__mute {
  position: absolute; right: 10px; top: 10px; z-index: 2;
  width: 40px; height: 40px; padding: 8px;
  border: 0; border-radius: 50%;
  background: rgba(20, 10, 4, .55); color: #fff1d6;
  cursor: pointer;
}
.rodeo__mute svg { width: 100%; height: 100%; }
.rodeo__mute .off, .rodeo__mute[aria-pressed="true"] .on { display: none; }
.rodeo__mute[aria-pressed="true"] .off { display: inline; }
.rodeo__mute:focus-visible { outline: 3px solid #3ff5d8; outline-offset: 2px; }
.rodeo__stage[data-state="loading"] .rodeo__mute, .rodeo__stage[data-state="error"] .rodeo__mute { display: none; }
@media (max-width: 480px) {
  .rodeo__level { display: none; }
  .rodeo__balance { margin-right: 40px; }
  .rodeo__hud { gap: 10px; }
}