.rx-wrap { max-width: 620px; margin: 0 auto; width: 100%; }
.rx-stage {
  position: relative; min-height: clamp(280px, 48vh, 440px); border-radius: var(--radius-xl);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px 16px;
  text-align: center; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  transition: background-color .08s linear;
}
.rx-emoji { font-size: clamp(44px, 12vw, 64px); line-height: 1.1; }
.rx-title { font-size: clamp(30px, 9vw, 52px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.15; font-family: var(--font-num); }
.rx-sub { font-size: 15px; font-weight: 700; opacity: .85; max-width: 26em; }
.rx-stage.is-wait { background: #d92d30; border-color: #d92d30; color: #fff; }
.rx-stage.is-go { background: #12a36b; border-color: #12a36b; color: #fff; }
.rx-stage.is-foul { background: #ffb020; border-color: #ffb020; color: #1d2030; }
.rx-stage.is-result .rx-title { color: var(--primary); }
.rx-stage.is-done .rx-title { color: var(--text); }
.rx-stage.is-go .rx-emoji { animation: bb-pop .25s ease-out; }
.rx-pips { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.rx-pips span {
  min-width: 52px; padding: 3px 8px; border-radius: 999px; font-size: 13px; font-weight: 800; font-family: var(--font-num);
  background: rgba(127, 127, 127, .16); border: 1px solid rgba(127, 127, 127, .3);
}
.rx-pips span.is-now { border-color: currentColor; }
.rx-pips span.is-done { background: color-mix(in srgb, var(--green) 20%, transparent); }
.rx-pips span.is-foul { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.rx-after .btn { min-width: 0; }
.rx-rank .panel-title { margin-bottom: 8px; }
.rx-table { display: grid; gap: 4px; }
.rx-tr {
  --c: var(--text-3);
  display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; gap: 8px; align-items: center;
  padding: 9px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); font-weight: 700;
}
.rx-rk { font-family: var(--font-num); font-weight: 900; color: var(--text-3); }
.rx-nm { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.rx-nm > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.rx-nm small { width: 100%; font-size: 12px; color: var(--text-3); font-family: var(--font-num); font-weight: 700; }
.rx-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.rx-val { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.rx-podium { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.rx-pod { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border-radius: 16px; border: 2px solid var(--border); }
.rx-pod span { font-size: 13px; font-weight: 800; color: var(--text-2); }
.rx-pod b { font-size: 19px; color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-pod small { font-size: 12.5px; color: var(--text-3); font-weight: 700; font-family: var(--font-num); }
.rx-pod.is-win { border-color: var(--green); background: color-mix(in srgb, var(--green) 10%, var(--surface)); }
.rx-pod.is-lose { border-color: var(--primary); background: var(--primary-soft); }
.game-shell.is-full .rx-wrap { max-width: 760px; }
.game-shell.is-full .rx-stage { min-height: 56vh; }