/* ==========================================================================
   uSTADIUM Design System — component layer (served at /design-system.css)
   --------------------------------------------------------------------------
   Ports the component classes from the Claude Design package's _ds_bundle.css
   (project edcaf67f — the prototype Frankie signed off on) into the live app,
   1:1. Tokens (--us-*) already live in /design-tokens.css and MUST be loaded
   BEFORE this file. This layer is what makes the SPA screens render identically
   to the Claude Design mockups.

   Two sections:
     1. DS PRIMITIVES  — .us-heading / .us-eyebrow / .us-text / .us-btn /
                          .us-card / .us-badge / .us-stat / .us-field+input.
                          Consumed via the DS* React wrappers in src/index.jsx.
     2. HOME HELPERS    — .ush-* screen-composition helpers (Today's Slate game
                          rows, Live Now / Activity rows). Prefixed `ush-` so
                          they never collide with the app's Tailwind + inline
                          styles. Add a screen's helpers here as each screen is
                          rebuilt against the prototype.

   Wordmark is ALWAYS "uSTADIUM". Gold (--us-primary) leads; blue (--us-accent)
   supports. No em dashes in copy.
   ========================================================================== */

/* ======================================================================= */
/* 1. DS PRIMITIVES — verbatim from the Claude Design bundle               */
/* ======================================================================= */

/* Heading */
.us-heading {
  margin: 0;
  font-family: var(--us-font-display);
  font-weight: var(--us-weight-regular);
  text-transform: uppercase;
  letter-spacing: var(--us-tracking-display);
  line-height: var(--us-leading-tight);
  color: var(--us-text-strong);
  text-wrap: balance;
}
.us-heading--xl  { font-size: var(--us-text-xl); }
.us-heading--2xl { font-size: var(--us-text-2xl); }
.us-heading--3xl { font-size: var(--us-text-3xl); }
.us-heading--4xl { font-size: var(--us-text-4xl); line-height: 1; }
.us-heading--ruled::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 4px;
  margin-top: var(--us-space-3);
  background: var(--us-top-accent-bar);
  border-radius: var(--us-radius-pill);
}
.us-heading__accent { color: inherit; }
.us-heading__accent--accent { color: var(--us-accent); }
.us-heading__accent--gold { color: var(--us-gold); }

/* Eyebrow */
.us-eyebrow {
  display: inline-block;
  font-family: var(--us-font-body);
  font-size: var(--us-text-xs);
  font-weight: var(--us-weight-semibold);
  line-height: var(--us-leading-tight);
  text-transform: uppercase;
  letter-spacing: var(--us-tracking-label-wide);
}
.us-eyebrow--gold   { color: var(--us-gold); }
.us-eyebrow--accent { color: var(--us-accent); }
.us-eyebrow--muted  { color: var(--us-text-muted); }

/* Text */
.us-text {
  margin: 0;
  font-family: var(--us-font-body);
  font-weight: var(--us-weight-regular);
  line-height: var(--us-leading-normal);
  letter-spacing: var(--us-tracking-normal);
  color: var(--us-text);
}
.us-text--sm { font-size: var(--us-text-sm); }
.us-text--md { font-size: var(--us-text-base); }
.us-text--lg { font-size: var(--us-text-md); }
.us-text--default { color: var(--us-text); }
.us-text--muted   { color: var(--us-text-muted); }

/* Button */
.us-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--us-space-2);
  border: 1px solid transparent;
  border-radius: var(--us-radius-pill);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--us-font-display);
  text-transform: uppercase;
  letter-spacing: var(--us-tracking-display);
  line-height: 1;
  transition:
    transform var(--us-duration-base) var(--us-ease),
    box-shadow var(--us-duration-base) var(--us-ease),
    background-color var(--us-duration-fast) var(--us-ease),
    border-color var(--us-duration-fast) var(--us-ease),
    color var(--us-duration-fast) var(--us-ease);
}
.us-btn__label { display: inline-block; transform: translateY(0.06em); }
.us-btn:focus-visible { outline: none; box-shadow: var(--us-focus-ring); }
.us-btn:disabled,
.us-btn[aria-disabled="true"] {
  cursor: not-allowed; opacity: 0.45; transform: none; box-shadow: none; filter: grayscale(0.2);
}
.us-btn--sm { padding: var(--us-space-2) var(--us-space-4); font-size: var(--us-text-md); }
.us-btn--md { padding: var(--us-space-3) var(--us-space-5); font-size: var(--us-text-lg); }
.us-btn--lg { padding: var(--us-space-4) var(--us-space-6); font-size: var(--us-text-xl); }
.us-btn--block { display: flex; width: 100%; }
.us-btn--primary {
  background-color: var(--us-primary); border-color: var(--us-primary);
  color: var(--us-on-primary); box-shadow: var(--us-glow-primary);
}
.us-btn--primary:hover:not(:disabled) {
  background-color: var(--us-primary-soft); border-color: var(--us-primary-soft);
  transform: translateY(-2px); box-shadow: var(--us-glow-primary-strong);
}
.us-btn--primary:active:not(:disabled) { transform: translateY(0); box-shadow: var(--us-glow-primary); }
.us-btn--accent {
  background-color: var(--us-accent); border-color: var(--us-accent);
  color: var(--us-on-accent); box-shadow: var(--us-glow-accent);
}
.us-btn--accent:hover:not(:disabled) {
  background-color: var(--us-accent-hover); border-color: var(--us-accent-hover);
  transform: translateY(-2px); box-shadow: var(--us-glow-accent-strong);
}
.us-btn--accent:active:not(:disabled) { transform: translateY(0); box-shadow: var(--us-glow-accent); }
.us-btn--secondary {
  background-color: transparent; border-color: var(--us-gold); color: var(--us-gold); box-shadow: none;
}
.us-btn--secondary:hover:not(:disabled) {
  background-color: var(--us-gold); border-color: var(--us-gold); color: var(--us-on-gold);
  transform: translateY(-2px); box-shadow: var(--us-glow-primary);
}
.us-btn--secondary:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.us-btn--ghost {
  background-color: transparent; border-color: var(--us-border); color: var(--us-text-muted); box-shadow: none;
}
.us-btn--ghost:hover:not(:disabled) {
  border-color: var(--us-accent); color: var(--us-text-strong);
  transform: translateY(-1px); box-shadow: var(--us-glow-accent);
}
.us-btn--ghost:active:not(:disabled) { transform: translateY(0); box-shadow: none; }

/* Card */
.us-card {
  display: block;
  position: relative;
  border: 1px solid var(--us-border);
  border-radius: var(--us-radius-lg);
  background-color: var(--us-surface);
  color: var(--us-text);
  box-shadow: var(--us-shadow-md);
  font-family: var(--us-font-body);
  line-height: var(--us-leading-normal);
  transition:
    transform var(--us-duration-base) var(--us-ease),
    box-shadow var(--us-duration-base) var(--us-ease),
    border-color var(--us-duration-fast) var(--us-ease),
    background-color var(--us-duration-fast) var(--us-ease);
}
.us-card--pad-sm { padding: var(--us-space-3); }
.us-card--pad-md { padding: var(--us-space-5); }
.us-card--pad-lg { padding: var(--us-space-6); }
.us-card--solid   { background-color: var(--us-surface); border-color: var(--us-border); box-shadow: var(--us-shadow-md); }
.us-card--outline { background-color: transparent; border-color: var(--us-border); box-shadow: none; }
.us-card--interactive { cursor: pointer; }
.us-card--interactive:hover {
  transform: translateY(-2px); border-color: var(--us-accent);
  background-color: var(--us-surface-raised); box-shadow: var(--us-glow-accent);
}
.us-card--interactive:active { transform: translateY(0); box-shadow: var(--us-glow-accent); }
.us-card--interactive:focus-visible { outline: none; box-shadow: var(--us-focus-ring); }
.us-card--outline.us-card--interactive:hover { background-color: transparent; }
.us-card--featured { background-color: var(--us-surface-featured); border-color: var(--us-tint-gold-border); }
.us-card--featured::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--us-top-accent-bar); border-radius: var(--us-radius-lg) var(--us-radius-lg) 0 0;
}
.us-card--selected { border-color: var(--us-gold); box-shadow: var(--us-glow-primary); }
.us-card--featured.us-card--interactive:hover,
.us-card--selected.us-card--interactive:hover { border-color: var(--us-gold); box-shadow: var(--us-glow-primary-strong); }

/* Badge */
.us-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--us-space-1);
  padding: var(--us-space-1) var(--us-space-3);
  border: 1px solid transparent;
  border-radius: var(--us-radius-pill);
  vertical-align: middle;
  white-space: nowrap;
  user-select: none;
  font-family: var(--us-font-body);
  font-size: var(--us-text-xs);
  font-weight: var(--us-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--us-tracking-label);
  line-height: 1;
}
.us-badge__label { display: inline-block; margin-right: -0.18em; }
.us-badge--accent { background-color: var(--us-tint-accent); border-color: var(--us-tint-accent-border); color: var(--us-accent); }
.us-badge--gold   { background-color: var(--us-tint-gold);   border-color: var(--us-tint-gold-border);   color: var(--us-gold); }
.us-badge--gold-solid { background-color: var(--us-gold); border-color: var(--us-gold); color: var(--us-on-gold); }
.us-badge--success { background-color: var(--us-tint-success); border-color: var(--us-tint-success-border); color: var(--us-success); }
.us-badge--danger  { background-color: var(--us-tint-danger);  border-color: var(--us-tint-danger-border);  color: var(--us-danger); }
.us-badge--neutral { background-color: var(--us-tint-neutral); border-color: var(--us-tint-neutral-border); color: var(--us-tint-neutral-text); }

/* Stat */
.us-stat { display: flex; flex-direction: column; gap: var(--us-space-1); min-width: 0; }
.us-stat__value {
  font-family: var(--us-font-numeric);
  font-weight: var(--us-weight-bold);
  font-size: var(--us-text-3xl);
  line-height: var(--us-leading-tight);
  color: var(--us-text-strong);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.us-stat__label {
  font-family: var(--us-font-body);
  font-weight: var(--us-weight-semibold);
  font-size: var(--us-text-xs);
  line-height: var(--us-leading-snug);
  text-transform: uppercase;
  letter-spacing: var(--us-tracking-label);
  color: var(--us-text-muted);
}
.us-stat--center { align-items: center; text-align: center; }
.us-stat--left   { align-items: flex-start; text-align: left; }
.us-stat--sm .us-stat__value { font-size: var(--us-text-xl); }
.us-stat--md .us-stat__value { font-size: var(--us-text-3xl); }
.us-stat--lg .us-stat__value { font-size: var(--us-text-4xl); }
.us-stat--accent .us-stat__value { color: var(--us-accent); }
.us-stat--gold .us-stat__value   { color: var(--us-gold); }
.us-stat--plain .us-stat__value  { color: var(--us-text-strong); }

/* Field / Input (for later form screens) */
.us-field { display: flex; flex-direction: column; gap: var(--us-space-2); width: 100%; font-family: var(--us-font-body); }
.us-field__label {
  font-size: var(--us-text-xs); font-weight: var(--us-weight-semibold);
  text-transform: uppercase; letter-spacing: var(--us-tracking-label);
  color: var(--us-gold); line-height: var(--us-leading-tight);
}
.us-input {
  width: 100%; box-sizing: border-box;
  padding: var(--us-space-3) var(--us-space-4);
  background-color: var(--us-surface-sunken);
  border: 1px solid var(--us-border);
  border-radius: var(--us-radius-md);
  font-family: var(--us-font-body);
  font-size: var(--us-text-base);
  color: var(--us-text);
  transition: border-color var(--us-duration-fast) var(--us-ease), box-shadow var(--us-duration-base) var(--us-ease);
}
.us-input::placeholder { color: var(--us-text-faint); }
.us-input:focus, .us-input:focus-visible { outline: none; border-color: var(--us-accent); box-shadow: var(--us-focus-ring); }
.us-field__hint { font-size: var(--us-text-sm); color: var(--us-text-muted); line-height: var(--us-leading-snug); }

/* ======================================================================= */
/* 2. HOME HELPERS — Today's Slate + Live Now + Activity (ush- prefix)      */
/* ======================================================================= */

.ush-prize { font-family: var(--us-font-numeric); font-weight: 600; color: var(--us-gold); }

/* Section header: gold eyebrow left, "See all" accent link right */
.ush-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ush-see-all { color: var(--us-accent); font-size: 13px; font-weight: 600; text-decoration: none; background: none; border: none; cursor: pointer; padding: 0; }
.ush-see-all:hover { text-decoration: underline; }

/* Today's Slate game rows */
.ush-game-list { display: flex; flex-direction: column; gap: 12px; }
.ush-game { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ush-match { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ush-teams { font-family: var(--us-font-display); font-size: 22px; letter-spacing: 0.02em; color: var(--us-text-strong); line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ush-meta { font-size: 12.5px; color: var(--us-text-muted); }
.ush-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }

/* Battle CTA */
.ush-battle-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ush-bc-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* Live Now rows */
.ush-live-row { display: flex; align-items: center; gap: 10px; padding: 9px 6px; margin: 0 -6px; border-bottom: 1px solid var(--us-border); border-radius: var(--us-radius-sm); text-decoration: none; color: inherit; background: none; border-left: 0; border-right: 0; border-top: 0; width: calc(100% + 12px); cursor: pointer; text-align: left; transition: background 140ms ease; }
.ush-live-row:last-child { border-bottom: 0; }
.ush-live-row:hover { background: var(--us-surface-raised); }
.ush-live-score { margin-left: auto; font-family: var(--us-font-numeric); font-weight: 600; color: var(--us-text-strong); font-size: 13px; white-space: nowrap; }
.ush-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--us-danger); flex: 0 0 auto; animation: ushPulse 1.6s ease-in-out infinite; }
@keyframes ushPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.82); } }

/* Activity rows */
.ush-mini-av { width: 26px; height: 26px; border-radius: 50%; background: var(--us-surface-raised); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--us-text); flex: 0 0 auto; text-transform: uppercase; }
.ush-act-row { display: flex; align-items: center; gap: 10px; padding: 9px 6px; margin: 0 -6px; border-bottom: 1px solid var(--us-border); border-radius: var(--us-radius-sm); text-decoration: none; color: inherit; background: none; border-left: 0; border-right: 0; border-top: 0; width: calc(100% + 12px); cursor: pointer; text-align: left; transition: background 140ms ease; }
.ush-act-row:last-child { border-bottom: 0; }
.ush-act-row:hover { background: var(--us-surface-raised); }

/* Home layout: single-column stack on phones; main + right rail on desktop.
   Gated on the same 900px breakpoint the SPA shell uses. The parent carries NO
   horizontal padding — every section self-insets 16px (new DS sections via
   .ush-sec, legacy components via their own margins) so all content aligns to a
   single 16px gutter with zero double-inset. */
.ush-home { display: flex; flex-direction: column; gap: 22px; padding: 8px 0 28px; }
.ush-home-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ush-home-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ush-sec { padding-inline: 16px; }
@media (min-width: 900px) {
  .ush-home--split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 20px; }
}

/* Page header (Picks / Ranks / etc.): Heading + muted subtitle */
.ush-page-head { display: flex; flex-direction: column; gap: 4px; }

/* ======================================================================= */
/* TAB-SCREEN HELPERS — Picks / Battles / Ranks / Primetime (ush- prefix)  */
/* Flat, namespaced class names (no nested generic selectors) so they can  */
/* never collide with the app's Tailwind + inline styles. From the         */
/* prototype inline <style> blocks, 1:1.                                   */
/* ======================================================================= */

/* Picks — entry cards (parlays) */
.ush-entry-grid { display: flex; flex-direction: column; gap: 12px; }
.ush-entry-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ush-legs { display: flex; flex-direction: column; margin-top: 12px; }
.ush-leg { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--us-border); font-size: 14px; color: var(--us-text); }
.ush-leg:last-child { border-bottom: 0; }
.ush-st { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.ush-st--hit { background: var(--us-success); }
.ush-st--miss { background: var(--us-danger); }
.ush-st--pend { background: var(--us-text-faint); }
.ush-st--push { background: var(--us-text-muted); }
.ush-ln { margin-left: auto; color: var(--us-text-muted); font-family: var(--us-font-numeric); font-size: 12.5px; white-space: nowrap; }
.ush-entry-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--us-border); }
.ush-towin { font-size: 13px; color: var(--us-text-muted); }
.ush-towin b { font-family: var(--us-font-numeric); color: var(--us-gold); font-size: 16px; font-weight: 600; margin-left: 6px; }
.ush-big-rank { font-family: var(--us-font-display); font-size: 40px; color: var(--us-gold); line-height: 1; }
.ush-flame { font-size: 20px; }

/* Ranks + Primetime — segmented tabs + leaderboard rows */
.ush-seg { display: flex; gap: 4px; background: var(--us-surface-sunken); padding: 4px; border-radius: var(--us-radius-pill); border: 1px solid var(--us-border); }
.ush-seg button { flex: 1; border: 0; background: transparent; color: var(--us-text-muted); font-family: var(--us-font-body); font-weight: 700; font-size: 14px; padding: 10px 12px; min-height: 44px; border-radius: var(--us-radius-pill); cursor: pointer; transition: background 140ms ease, color 140ms ease; }
.ush-seg button:hover { color: var(--us-text); }
.ush-seg button.on { background: var(--us-surface-raised); color: var(--us-gold); box-shadow: var(--us-shadow-sm); }
.ush-lb { display: flex; flex-direction: column; }
.ush-lb-row { display: flex; align-items: center; gap: 12px; padding: 11px 6px; margin: 0 -6px; border: 0; border-bottom: 1px solid var(--us-border); border-radius: var(--us-radius-sm); text-decoration: none; color: inherit; background: none; width: calc(100% + 12px); text-align: left; cursor: pointer; transition: background 140ms ease; }
.ush-lb-row:last-child { border-bottom: 0; }
.ush-lb-row:hover { background: var(--us-surface-raised); }
.ush-lb-rank { width: 26px; text-align: center; font-family: var(--us-font-numeric); font-weight: 700; color: var(--us-text-muted); flex: 0 0 auto; }
.ush-lb-rank--medal { font-size: 20px; }
.ush-lb-av { width: 34px; height: 34px; border-radius: 50%; background: var(--us-surface-raised); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--us-text); flex: 0 0 auto; text-transform: uppercase; overflow: hidden; }
.ush-lb-av img { width: 100%; height: 100%; object-fit: cover; }
.ush-lb-name { font-weight: 600; color: var(--us-text-strong); font-size: 15px; }
.ush-lb-sub { font-size: 12px; color: var(--us-text-muted); }
.ush-lb-score { margin-left: auto; font-family: var(--us-font-numeric); font-weight: 600; color: var(--us-text-strong); white-space: nowrap; }
.ush-lb-you { background: var(--us-surface-raised); border-left: 3px solid var(--us-primary); padding-left: 9px; }
.ush-grad-av { background: linear-gradient(135deg, var(--us-accent), var(--us-primary)); color: var(--us-bg-deep); }

/* Battles — dice hero, opponent rows, wager, suggestions */
.ush-hero-dice { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ush-hero-txt { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; min-width: 0; }
.ush-die { font-size: 66px; line-height: 1; flex: 0 0 auto; animation: ushTumble 3.4s ease-in-out infinite; }
@keyframes ushTumble { 0%, 68%, 100% { transform: rotate(0deg) scale(1); } 76% { transform: rotate(-20deg) scale(1.1); } 84% { transform: rotate(16deg) scale(1.1); } 92% { transform: rotate(-6deg) scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .ush-die { animation: none; } }
.ush-opp { display: flex; align-items: center; gap: 10px; }
.ush-opp-av { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--us-surface-raised); color: var(--us-text); font-size: 12px; font-weight: 700; flex: 0 0 auto; text-transform: uppercase; overflow: hidden; }
.ush-opp-av img { width: 100%; height: 100%; object-fit: cover; }
.ush-opp-name { font-weight: 700; color: var(--us-text-strong); font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ush-bt-meta { font-size: 12.5px; color: var(--us-text-muted); margin-top: 8px; }
.ush-bt-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.ush-wager { display: inline-flex; align-items: center; gap: 6px; font-family: var(--us-font-numeric); font-weight: 600; color: var(--us-gold); font-size: 14px; }
.ush-wager--free { color: var(--us-text-muted); font-family: var(--us-font-body); }
.ush-sug { display: flex; align-items: center; gap: 10px; padding: 9px 6px; margin: 0 -6px; border: 0; border-bottom: 1px solid var(--us-border); border-radius: var(--us-radius-sm); text-decoration: none; color: inherit; background: none; width: calc(100% + 12px); text-align: left; cursor: pointer; transition: background 140ms ease; }
.ush-sug:last-child { border-bottom: 0; }
.ush-sug:hover { background: var(--us-surface-raised); }
.ush-sug-ch { margin-left: auto; color: var(--us-accent); font-weight: 700; font-size: 13px; }
.ush-rec { display: flex; gap: 18px; margin-top: 10px; }

/* Primetime — prize band, board props, prize slot, trash talk */
.ush-prize-band { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin: 16px 0; }
.ush-countchip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: var(--us-radius-pill); background: var(--us-surface-sunken); border: 1px solid var(--us-border); font-size: 12.5px; color: var(--us-text-muted); font-weight: 600; }
.ush-prop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--us-border); }
.ush-prop:last-child { border-bottom: 0; }
.ush-prop-q { font-size: 14px; color: var(--us-text-strong); font-weight: 600; }
.ush-prop-qs { font-size: 12px; color: var(--us-text-muted); margin-top: 2px; }
.ush-sides { display: flex; gap: 8px; flex: 0 0 auto; }
.ush-side { padding: 8px 15px; border-radius: var(--us-radius-md); border: 1px solid var(--us-border); background: var(--us-surface-sunken); font-weight: 700; font-size: 13px; color: var(--us-text); cursor: pointer; transition: border-color 120ms ease, background 120ms ease; }
.ush-side:hover { border-color: var(--us-border-strong); }
.ush-side--pick { border-color: var(--us-primary); background: rgba(240, 192, 64, 0.16); color: var(--us-gold); box-shadow: var(--us-glow-gold); }
.ush-prize-slot { border: 1px solid var(--us-border); border-radius: var(--us-radius-lg); overflow: hidden; margin-top: 10px; }
.ush-prize-photo { height: 168px; background: linear-gradient(135deg, var(--us-bg-deep), var(--us-surface-raised)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.ush-prize-photo img { width: 100%; height: 100%; object-fit: cover; }
.ush-ph-emoji { font-size: 50px; line-height: 1; opacity: 0.92; }
.ush-ph-hint { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--us-text-faint); font-weight: 700; }
.ush-chat-row { display: flex; gap: 9px; align-items: flex-start; padding: 8px 0; }
.ush-chat-msg { font-size: 13.5px; color: var(--us-text); }
.ush-chat-who { font-weight: 700; color: var(--us-text-strong); }
.ush-chat-input { margin-top: 12px; display: flex; gap: 8px; }
.ush-chat-input input { flex: 1; min-width: 0; background: var(--us-surface-sunken); border: 1px solid var(--us-border); border-radius: var(--us-radius-md); padding: 10px 12px; color: var(--us-text); font-family: var(--us-font-body); font-size: 13px; }