/* v7.0.371 Beta News + Onboarding Backdrop Hotfix */
/* v7.0.370 UX Foundation: Modal Polish, Loading States, Toasts, Onboarding and Patch Notes */
/* v7.0.369 Banner Title Center Sync + Start Playing Close Match */
/* v7.0.367 Menu Modal Layout Sync */
/* v7.0.365 Modal Close Real Sync */
/* v7.0.364 Unified Modal Close Buttons */
:root {
  --bg: #07111f;
  --panel: rgba(9, 18, 33, 0.84);
  --panel-solid: #101827;
  --text: #f8fafc;
  --muted: #a8b3c7;
  --accent: #22d3ee;
  --accent-2: #8b5cf6;
  --good: #34d399;
  --bad: #fb7185;
  --border: rgba(255, 255, 255, 0.16);
  --shadow: 0 24px 90px rgba(0, 0, 0, 0.38);
}

* { box-sizing: border-box; }
html, body, .app { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 18% 12%, rgba(34, 211, 238, 0.22), transparent 28%),
    radial-gradient(circle at 80% 86%, rgba(139, 92, 246, 0.22), transparent 30%),
    var(--bg);
}

button { font-family: inherit; }
.hidden { display: none !important; }

.start-screen, .final-screen {
  width: min(1060px, calc(100% - 32px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 72px 0;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 16px;
  background: rgba(15, 23, 42, 0.62);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1 {
  margin: 22px 0 0;
  font-size: clamp(3.4rem, 11vw, 8.8rem);
  line-height: 0.86;
  letter-spacing: -0.08em;
  text-shadow: 0 18px 70px rgba(34, 211, 238, 0.22);
}

.tagline {
  max-width: 760px;
  margin: 26px auto 30px;
  color: var(--muted);
  font-size: clamp(1.08rem, 2.2vw, 1.35rem);
  line-height: 1.65;
}

.start-card {
  width: min(760px, 100%);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 18px;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.78), rgba(30, 41, 59, 0.56));
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.start-card strong { display: block; font-size: 1.18rem; }
.start-card span, .small-note { color: var(--muted); }
.small-note { max-width: 760px; margin: 22px auto 0; line-height: 1.6; }

.primary-btn, .secondary-btn {
  border: 0;
  border-radius: 999px;
  padding: 14px 20px;
  color: var(--text);
  font-weight: 950;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .16s ease, opacity .16s ease, box-shadow .16s ease;
}
.primary-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 14px 36px rgba(34, 211, 238, 0.25);
}
.secondary-btn {
  background: rgba(15, 23, 42, 0.64);
  border: 1px solid var(--border);
}
button:hover { transform: translateY(-1px); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.game-screen {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #06111d;
}

.map {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: #aad3df;
  z-index: 1;
}

.map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 450;
  background:
    linear-gradient(180deg, rgba(6, 17, 29, 0.04), rgba(6, 17, 29, 0.09));
}

.leaflet-container { font-family: inherit; background: #aad3df; }
.leaflet-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-tile-container, .leaflet-pane > svg, .leaflet-pane > canvas, .leaflet-zoom-box, .leaflet-image-layer, .leaflet-layer {
  position: absolute;
  left: 0;
  top: 0;
}
.leaflet-tile {
  image-rendering: auto;
  width: 256px !important;
  height: 256px !important;
}
.leaflet-tile-container img, .leaflet-container img {
  max-width: none !important;
  max-height: none !important;
}
.leaflet-container .leaflet-overlay-pane svg { max-width: none !important; }
.leaflet-control-attribution {
  background: rgba(255,255,255,.86) !important;
  border-radius: 999px 0 0 0;
  font-size: 10px;
}
.leaflet-control-zoom {
  border: 0 !important;
  box-shadow: var(--shadow);
}
.leaflet-control-zoom a {
  background: rgba(15, 23, 42, 0.88) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.game-hud, .audio-card, .bottom-panel, .result-modal { z-index: 600; }
.top-hud {
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(3, auto);
  gap: 12px;
  align-items: center;
  pointer-events: none;
}
.logo-lockup, .stat, .audio-card, .bottom-panel, .result-modal {
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  border-radius: 22px;
  padding: 12px 14px;
}
.logo-lockup strong { display: block; font-size: 1.12rem; letter-spacing: -0.03em; }
.logo-lockup small { display: block; color: var(--muted); margin-top: 2px; }
.logo-dot {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: radial-gradient(circle, var(--accent), rgba(34, 211, 238, .14) 62%);
  box-shadow: 0 0 0 8px rgba(34, 211, 238, .12);
}
.stat {
  min-width: 108px;
  border-radius: 20px;
  padding: 11px 14px;
  text-align: center;
}
.stat span { display: block; color: var(--muted); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.stat strong { display: block; margin-top: 2px; font-size: 1.18rem; }
.timer strong { color: var(--accent); }

.audio-card {
  position: absolute;
  left: 18px;
  bottom: 98px;
  width: min(430px, calc(100vw - 36px));
  border-radius: 28px;
  padding: 18px;
}
.wave-orb {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  float: left;
  margin: 3px 14px 8px 0;
  background: radial-gradient(circle, #fff, var(--accent) 30%, rgba(34, 211, 238, .08) 66%);
  position: relative;
}
.wave-orb::before, .wave-orb::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px solid rgba(34, 211, 238, .5);
  border-radius: inherit;
  animation: signal 1.8s infinite;
}
.wave-orb::after { animation-delay: .9s; }
@keyframes signal { from { transform: scale(.72); opacity: 1; } to { transform: scale(1.55); opacity: 0; } }
.audio-copy h2 { margin: 0 0 4px; font-size: 1.3rem; }
.audio-copy p { margin: 0 0 12px; color: var(--muted); line-height: 1.45; }
audio { width: 100%; height: 38px; margin: 8px 0 12px; }
.actions-row { display: flex; gap: 10px; flex-wrap: wrap; }
.actions-row .secondary-btn { padding: 11px 14px; }

.bottom-panel {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 36px));
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  border-radius: 28px;
  padding: 14px;
}
.guess-copy span { display: block; color: var(--muted); font-size: .78rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.guess-copy strong { display: block; margin-top: 3px; font-size: 1rem; }

.result-modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 36px));
  border-radius: 30px;
  padding: 24px;
  line-height: 1.65;
}
.result-modal h2 { margin: 0 0 10px; font-size: 1.6rem; }
.result-grid { display: grid; gap: 8px; margin: 14px 0 18px; }
.result-row { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 8px; }
.result-row span { color: var(--muted); }
.result-row strong { text-align: right; }
.good { color: var(--good); }
.bad { color: var(--bad); }

.final-score {
  margin: 26px auto;
  font-size: clamp(4rem, 12vw, 9rem);
  font-weight: 1000;
  color: var(--accent);
  letter-spacing: -0.08em;
}
.final-screen p { max-width: 640px; color: var(--muted); font-size: 1.16rem; line-height: 1.6; }

.custom-pin-wrap {
  background: transparent !important;
  border: 0 !important;
}
.custom-pin-shell {
  position: relative;
  width: 40px;
  height: 34px;
  overflow: visible;
  pointer-events: none;
}
.custom-pin-shell .custom-pin {
  position: absolute;
  left: 6px;
  top: 0;
}
.custom-pin {
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px 999px 999px 4px;
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
  border: 3px solid white;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.custom-pin.guess { background: var(--accent-2); }
.custom-pin.answer { background: var(--good); }
.custom-pin::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: white;
  top: 7px;
  left: 7px;
}

@media (max-width: 760px) {
  .start-card { grid-template-columns: 1fr; text-align: center; }
  .top-hud { grid-template-columns: 1fr 1fr 1fr; align-items: stretch; }
  .logo-lockup { grid-column: 1 / -1; width: 100%; }
  .stat { min-width: 0; }
  .audio-card { bottom: 112px; }
  .bottom-panel { grid-template-columns: 1fr; }
  .bottom-panel .primary-btn { width: 100%; }
}

@media (max-height: 660px) {
  .audio-card { width: min(360px, calc(100vw - 36px)); bottom: 90px; padding: 14px; }
  .audio-copy h2 { font-size: 1.08rem; }
  audio { height: 32px; }
}

.nickname-field {
  display: grid;
  gap: 8px;
  text-align: left;
  min-width: min(280px, 100%);
}
.nickname-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nickname-field input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  color: var(--text);
  background: rgba(255,255,255,0.08);
  outline: none;
  font-weight: 800;
}
.nickname-field input:focus {
  border-color: rgba(34,211,238,0.7);
  box-shadow: 0 0 0 4px rgba(34,211,238,0.12);
}
.save-status {
  min-height: 24px;
  color: var(--muted);
  font-weight: 800;
}
.leaderboard-card {
  width: min(720px, 100%);
  margin: 18px auto 26px;
  padding: 22px;
  border-radius: 26px;
  border: 1px solid var(--border);
  background: rgba(9, 18, 33, 0.78);
  box-shadow: var(--shadow);
  text-align: left;
}
.leaderboard-card h2 {
  margin: 0 0 14px;
  text-align: center;
}
.leaderboard-list {
  display: grid;
  gap: 8px;
}
.leaderboard-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  color: var(--muted);
}
.leaderboard-row strong { color: var(--text); }
.leaderboard-empty { text-align: center; color: var(--muted); }

/* v1.0 profile, modes and database status */
.start-card-v10 {
  width: min(940px, 100%);
  grid-template-columns: minmax(210px, 1.2fr) minmax(160px, .8fr) minmax(160px, .8fr) auto;
  overflow: hidden;
}
.start-card-v10 .primary-btn {
  justify-self: end;
  min-width: 120px;
  padding-inline: 22px;
}
.start-card-v10 .nickname-field { min-width: 0; }
.mode-copy { min-width: 220px; }
.nickname-field select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  color: var(--text);
  background: rgba(255,255,255,0.08);
  outline: none;
  font-weight: 800;
}
.nickname-field select option {
  color: #0f172a;
}
.status-pill {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, .4);
  background: rgba(251, 191, 36, .12);
  color: #fde68a;
  padding: 9px 14px;
  font-weight: 900;
  font-size: .86rem;
}
.status-pill.db-ok {
  border-color: rgba(52, 211, 153, .42);
  background: rgba(52, 211, 153, .12);
  color: #bbf7d0;
}
.profile-card {
  width: min(720px, 100%);
  margin: 16px auto 18px;
  padding: 22px;
  border-radius: 26px;
  border: 1px solid var(--border);
  background: rgba(9, 18, 33, 0.78);
  box-shadow: var(--shadow);
  text-align: left;
}
.profile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.profile-grid div {
  border-radius: 18px;
  padding: 12px;
  background: rgba(255,255,255,.06);
}
.profile-grid span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.profile-grid strong {
  display: block;
  margin-top: 4px;
  font-size: 1.1rem;
  color: var(--text);
}
.profile-empty {
  color: var(--muted);
  text-align: center;
}
.level-up {
  margin: 14px 0 0 !important;
  color: var(--good) !important;
  font-weight: 950;
  text-align: center;
}
.leaderboard-row span small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-weight: 700;
  opacity: .86;
}

@media (max-width: 1020px) {
  .start-card-v10 { grid-template-columns: 1fr 1fr; }
  .start-card-v10 .mode-copy, .start-card-v10 .primary-btn { grid-column: 1 / -1; }
  .start-card-v10 .primary-btn { width: 100%; }
}
@media (max-width: 760px) {
  .start-card-v10 { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
  .start-card-v10 {
    width: min(760px, 100%);
    grid-template-columns: 1fr 1fr;
  }
  .start-card-v10 .mode-copy,
  .start-card-v10 .primary-btn {
    grid-column: 1 / -1;
  }
  .start-card-v10 .primary-btn {
    width: 100%;
    justify-self: stretch;
  }
}

/* v1.2 account system */
.auth-shell {
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 26px auto 0;
}
.auth-card {
  text-align: left;
  border-radius: 28px;
  border: 1px solid var(--border);
  background: rgba(9, 18, 33, 0.72);
  box-shadow: var(--shadow);
  padding: 24px;
}
.auth-card h2 {
  margin: 0 0 6px;
  font-size: 1.35rem;
}
.auth-card p {
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.5;
}
.auth-card label,
.account-lockup {
  display: block;
  margin-bottom: 12px;
}
.auth-card label span,
.account-lockup span,
.account-lockup small {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.auth-card input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  color: var(--text);
  background: rgba(255,255,255,0.08);
  outline: none;
  font-weight: 800;
}
.auth-card input:focus,
.nickname-field select:focus {
  border-color: rgba(34, 211, 238, .65);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, .12);
}
.auth-card .primary-btn,
.auth-login-btn {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}
.auth-message {
  width: min(760px, 100%);
  margin: 16px auto 0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.55;
}
.auth-message a { color: var(--cyan); font-weight: 950; }
.auth-message.success { color: #bbf7d0; }
.auth-message.error { color: #fecaca; }
.start-card-v12 {
  width: min(980px, 100%);
  grid-template-columns: minmax(220px, 1.1fr) minmax(180px, .8fr) minmax(160px, .7fr) auto auto;
  margin-top: 26px;
  overflow: hidden;
}
.account-lockup {
  min-width: 0;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  margin-bottom: 0;
}
.account-lockup strong {
  display: block;
  color: var(--text);
  font-size: 1.05rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-lockup small {
  margin: 4px 0 0;
  text-transform: none;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.logout-btn {
  align-self: center;
  white-space: nowrap;
}
@media (max-width: 1080px) {
  .start-card-v12 { grid-template-columns: 1fr 1fr; }
  .start-card-v12 .mode-copy { grid-column: 1 / -1; }
  .start-card-v12 .primary-btn,
  .start-card-v12 .logout-btn { width: 100%; justify-content: center; }
}
@media (max-width: 760px) {
  .auth-shell { grid-template-columns: 1fr; }
  .start-card-v12 { grid-template-columns: 1fr; }
}

/* v1.3 secure sessions/profile card */
.start-card-v12 {
  grid-template-columns: minmax(220px, 1.1fr) minmax(180px, .75fr) minmax(180px, .75fr) minmax(160px, .65fr) auto auto;
}
.account-stats {
  min-height: 62px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(34, 211, 238, .08);
  border: 1px solid rgba(34, 211, 238, .18);
  text-align: left;
}
.account-stats strong {
  display: block;
  color: var(--text);
  font-size: 1rem;
}
.account-stats span {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
}
.save-status::before {
  content: "Secure result: ";
  color: var(--accent);
}
@media (max-width: 1280px) {
  .start-card-v12 { grid-template-columns: 1fr 1fr 1fr; }
  .start-card-v12 .mode-copy { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .start-card-v12 { grid-template-columns: 1fr; }
}

/* v1.8 RadioQuest: domain branding, fullscreen button, compact responsive UI and cleaner game map */
:root {
  --map-water: #b8d9ea;
}

html, body {
  min-height: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
}
body:not(.is-playing) {
  overflow-y: auto;
}
body.is-playing {
  overflow: hidden;
}

.fullscreen-btn {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 1200;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 10px 14px;
  color: var(--text);
  background: rgba(7, 17, 31, .78);
  box-shadow: 0 12px 36px rgba(0,0,0,.24);
  backdrop-filter: blur(16px);
  font-weight: 950;
  cursor: pointer;
}
body.is-playing .fullscreen-btn {
  top: auto;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  padding: 9px 12px;
  font-size: .82rem;
  opacity: .92;
}

.start-screen, .final-screen {
  width: min(1080px, calc(100% - 28px));
  min-height: 100svh;
  padding: clamp(22px, 4.5vh, 54px) 0;
  align-content: start;
}
.brand-pill {
  padding: 8px 13px;
  font-size: .72rem;
}
h1 {
  margin-top: 14px;
  font-size: clamp(2.8rem, 7.5vw, 6.4rem);
  line-height: .9;
}
.tagline {
  max-width: 760px;
  margin: 14px auto 18px;
  font-size: clamp(.94rem, 1.55vw, 1.12rem);
  line-height: 1.45;
}
.small-note {
  margin-top: 14px;
  font-size: .86rem;
  line-height: 1.45;
}

.auth-shell {
  width: min(900px, 100%);
  gap: 14px;
  margin-top: 16px;
}
.auth-card {
  border-radius: 22px;
  padding: 16px;
}
.auth-card h2 {
  font-size: 1.12rem;
}
.auth-card p {
  margin-bottom: 11px;
  font-size: .88rem;
  line-height: 1.38;
}
.auth-card label {
  margin-bottom: 9px;
}
.auth-card input,
.nickname-field select,
.nickname-field input {
  border-radius: 13px;
  padding: 11px 12px;
  font-size: .94rem;
}
.primary-btn, .secondary-btn {
  padding: 11px 16px;
  font-size: .92rem;
}
.auth-message {
  margin-top: 11px;
  font-size: .9rem;
}
.status-pill {
  margin-top: 12px;
  padding: 7px 11px;
  font-size: .78rem;
}

.start-card-v12 {
  width: min(1040px, 100%);
  margin-top: 16px;
  grid-template-columns: minmax(190px, 1.1fr) minmax(170px, .9fr) minmax(180px, .9fr) minmax(150px, .7fr) minmax(120px, auto);
  gap: 12px;
  padding: 14px;
  border-radius: 22px;
  overflow: visible;
}
.mode-copy {
  min-width: 0;
}
.mode-copy strong,
.start-card strong {
  font-size: 1rem;
}
.mode-copy span,
.start-card span {
  font-size: .84rem;
  line-height: 1.35;
}
.account-lockup,
.account-stats {
  min-height: 0;
  padding: 10px 12px;
  border-radius: 15px;
}
.account-lockup span,
.account-lockup small,
.nickname-field span,
.auth-card label span {
  font-size: .64rem;
  margin-bottom: 5px;
}
.account-stats strong { font-size: .95rem; }
.account-stats span { font-size: .72rem; }
.account-actions {
  display: grid;
  gap: 8px;
  align-self: stretch;
  min-width: 116px;
}
.account-actions .primary-btn,
.account-actions .secondary-btn {
  width: 100%;
  justify-content: center;
}
.logout-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  visibility: visible !important;
  opacity: 1 !important;
}

.map,
.leaflet-container {
  background: var(--map-water);
}
.map::after {
  background:
    radial-gradient(circle at 50% 45%, transparent 40%, rgba(7, 17, 31, .10) 100%),
    linear-gradient(180deg, rgba(7, 17, 31, .05), rgba(7, 17, 31, .14));
}
.leaflet-control-attribution {
  max-width: 55vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-hud {
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  grid-template-columns: minmax(170px, 1fr) repeat(3, minmax(84px, auto));
  gap: 9px;
}
.logo-lockup {
  padding: 9px 11px;
  border-radius: 17px;
}
.logo-dot {
  width: 26px;
  height: 26px;
  box-shadow: 0 0 0 6px rgba(34,211,238,.11);
}
.logo-lockup strong { font-size: 1rem; }
.logo-lockup small { font-size: .74rem; }
.stat {
  min-width: 86px;
  border-radius: 16px;
  padding: 8px 10px;
}
.stat span { font-size: .62rem; }
.stat strong { font-size: 1rem; }
.audio-card {
  left: max(12px, env(safe-area-inset-left));
  bottom: 80px;
  width: min(360px, calc(100vw - 24px));
  border-radius: 22px;
  padding: 13px;
}
.wave-orb {
  width: 38px;
  height: 38px;
  margin: 2px 10px 4px 0;
}
.audio-copy h2 { font-size: 1.05rem; }
.audio-copy p { font-size: .86rem; line-height: 1.3; margin-bottom: 7px; }
audio { height: 32px; margin: 5px 0 9px; }
.actions-row { gap: 7px; }
.actions-row .secondary-btn { padding: 8px 10px; font-size: .78rem; }
.bottom-panel {
  bottom: max(14px, env(safe-area-inset-bottom));
  width: min(610px, calc(100vw - 136px));
  padding: 11px;
  border-radius: 22px;
  gap: 12px;
}
.guess-copy span { font-size: .65rem; }
.guess-copy strong { font-size: .92rem; }
.result-modal {
  width: min(500px, calc(100vw - 24px));
  max-height: min(78vh, 620px);
  overflow-y: auto;
  border-radius: 24px;
  padding: 18px;
}
.result-modal h2 { font-size: 1.28rem; }
.result-grid { gap: 6px; margin: 10px 0 13px; }
.result-row { padding-bottom: 6px; font-size: .9rem; }
.final-score {
  margin: 14px auto;
  font-size: clamp(3rem, 9vw, 6rem);
}
.final-screen p { font-size: .98rem; }
.leaderboard-card,
.profile-card {
  border-radius: 22px;
  padding: 16px;
  margin: 12px auto 16px;
}

@media (max-width: 1180px) {
  .start-card-v12 {
    grid-template-columns: 1fr 1fr;
  }
  .start-card-v12 .mode-copy,
  .start-card-v12 .account-actions {
    grid-column: 1 / -1;
  }
  .account-actions {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .fullscreen-btn {
    padding: 8px 10px;
    font-size: .78rem;
  }
  .start-screen, .final-screen {
    width: min(100% - 18px, 680px);
    padding: 14px 0 24px;
  }
  h1 { font-size: clamp(2.45rem, 16vw, 4.7rem); }
  .tagline { font-size: .9rem; margin: 10px auto 14px; }
  .auth-shell { grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
  .auth-card { padding: 13px; border-radius: 18px; }
  .start-card-v12 { grid-template-columns: 1fr; gap: 10px; padding: 12px; border-radius: 18px; }
  .account-actions { grid-template-columns: 1fr 1fr; }
  .small-note { font-size: .78rem; }
  .profile-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 920px) and (orientation: landscape) {
  body.is-playing .fullscreen-btn {
    bottom: max(8px, env(safe-area-inset-bottom));
    right: max(8px, env(safe-area-inset-right));
    padding: 7px 9px;
    font-size: .72rem;
  }
  .top-hud {
    top: max(7px, env(safe-area-inset-top));
    left: max(7px, env(safe-area-inset-left));
    right: max(7px, env(safe-area-inset-right));
    grid-template-columns: minmax(122px, 1fr) repeat(3, 66px);
    gap: 6px;
  }
  .logo-lockup { padding: 6px 8px; border-radius: 14px; gap: 8px; }
  .logo-dot { width: 20px; height: 20px; box-shadow: 0 0 0 4px rgba(34,211,238,.10); }
  .logo-lockup strong { font-size: .82rem; }
  .logo-lockup small { display: none; }
  .stat { min-width: 0; padding: 6px 7px; border-radius: 13px; }
  .stat span { font-size: .52rem; letter-spacing: .06em; }
  .stat strong { font-size: .82rem; }
  .audio-card {
    left: max(7px, env(safe-area-inset-left));
    bottom: max(50px, calc(env(safe-area-inset-bottom) + 44px));
    width: 240px;
    padding: 8px;
    border-radius: 16px;
  }
  .wave-orb { display: none; }
  .audio-copy h2 { font-size: .82rem; margin-bottom: 2px; }
  .audio-copy p { font-size: .7rem; margin-bottom: 4px; max-height: 32px; overflow: hidden; }
  audio { height: 26px; margin: 3px 0 6px; }
  .actions-row .secondary-btn { padding: 6px 7px; font-size: .66rem; }
  .bottom-panel {
    left: auto;
    right: max(7px, env(safe-area-inset-right));
    bottom: max(7px, env(safe-area-inset-bottom));
    transform: none;
    width: min(360px, calc(100vw - 268px));
    min-width: 280px;
    grid-template-columns: 1fr auto;
    padding: 8px;
    border-radius: 16px;
    gap: 8px;
  }
  .guess-copy span { font-size: .55rem; }
  .guess-copy strong { font-size: .76rem; }
  .bottom-panel .primary-btn { padding: 8px 10px; font-size: .72rem; }
  .result-modal { padding: 12px; border-radius: 18px; width: min(420px, calc(100vw - 18px)); max-height: calc(100vh - 20px); }
  .result-modal h2 { font-size: 1rem; }
  .result-row { font-size: .78rem; }
  .leaflet-control-zoom { display: none; }
}

@media (max-width: 520px) and (orientation: portrait) {
  body.is-playing::before {
    content: "Tap the Fullscreen button for the best RadioQuest phone view.";
    position: fixed;
    top: calc(env(safe-area-inset-top) + 52px);
    left: 12px;
    right: 12px;
    z-index: 1300;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 18px;
    padding: 10px 12px;
    background: rgba(7, 17, 31, .84);
    color: var(--text);
    text-align: center;
    font-weight: 900;
    backdrop-filter: blur(14px);
  }
  .top-hud { grid-template-columns: 1fr 1fr 1fr; top: 8px; left: 8px; right: 8px; }
  .logo-lockup { grid-column: 1 / -1; width: fit-content; padding: 7px 9px; }
  .audio-card { bottom: 116px; left: 8px; width: calc(100vw - 16px); padding: 10px; }
  .bottom-panel { width: calc(100vw - 16px); bottom: 8px; grid-template-columns: 1fr; }
}

/* v2.0 map/mobile stability update */
.map-style-btn {
  position: absolute;
  top: max(76px, calc(env(safe-area-inset-top) + 76px));
  right: max(12px, env(safe-area-inset-right));
  z-index: 650;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 9px 12px;
  color: var(--text);
  background: rgba(7,17,31,.78);
  box-shadow: 0 12px 36px rgba(0,0,0,.24);
  backdrop-filter: blur(16px);
  font-weight: 950;
  cursor: pointer;
}
.leaflet-container {
  width: 100% !important;
  height: 100% !important;
  background: #cfe8f3 !important;
}
.leaflet-tile-pane {
  will-change: transform;
}
.leaflet-tile {
  backface-visibility: hidden;
  transform: translateZ(0);
}
body.is-playing .game-screen {
  touch-action: none;
}

@media (min-width: 921px) {
  .audio-card {
    max-height: calc(100vh - 180px);
    overflow: hidden;
  }
}

@media (max-width: 920px) and (orientation: landscape) {
  .map-style-btn {
    top: max(50px, calc(env(safe-area-inset-top) + 50px));
    right: max(7px, env(safe-area-inset-right));
    padding: 6px 8px;
    font-size: .66rem;
  }
  .game-screen { min-height: 100dvh; }
  .audio-card {
    top: max(52px, calc(env(safe-area-inset-top) + 52px));
    bottom: auto;
    left: max(7px, env(safe-area-inset-left));
    width: min(214px, 31vw);
    max-height: calc(100dvh - 118px);
    overflow: hidden;
    padding: 7px;
    border-radius: 14px;
  }
  .audio-copy p {
    max-height: 26px;
  }
  .actions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
  }
  .actions-row .secondary-btn {
    padding: 5px 6px;
    font-size: .6rem;
    white-space: normal;
    line-height: 1.05;
  }
  audio {
    height: 24px;
  }
  .bottom-panel {
    left: max(7px, env(safe-area-inset-left));
    right: max(76px, env(safe-area-inset-right));
    bottom: max(7px, env(safe-area-inset-bottom));
    width: auto;
    min-width: 0;
    transform: none;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 7px;
    border-radius: 14px;
  }
  .guess-copy strong {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .bottom-panel .primary-btn {
    padding: 7px 9px;
  }
  .leaflet-control-attribution { display: none; }
}

@media (max-width: 520px) and (orientation: portrait) {
  .map-style-btn {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom) + 84px);
    right: 8px;
    padding: 7px 9px;
    font-size: .68rem;
  }
  body.is-playing .fullscreen-btn {
    bottom: calc(env(safe-area-inset-bottom) + 8px);
    right: 8px;
  }
  .audio-card {
    bottom: calc(env(safe-area-inset-bottom) + 102px);
    max-height: 136px;
    overflow: hidden;
  }
  .bottom-panel {
    bottom: calc(env(safe-area-inset-bottom) + 8px);
  }
}

/* v2.1 world map, mobile overlap and compact HUD fixes */
:root {
  --rq-map-water: #bed9ec;
}
.map,
.leaflet-container {
  background: var(--rq-map-water) !important;
}
.map::after {
  background: linear-gradient(180deg, rgba(7, 17, 31, 0.015), rgba(7, 17, 31, 0.045));
}
.map-style-btn {
  top: max(82px, calc(env(safe-area-inset-top) + 82px));
  right: max(14px, env(safe-area-inset-right));
}
.result-modal {
  max-height: min(76vh, 560px);
  overflow: auto;
}

@media (min-width: 921px) {
  .top-hud {
    max-width: min(980px, calc(100vw - 32px));
    margin: 0 auto;
  }
  .audio-card {
    width: min(360px, 28vw);
  }
  .bottom-panel {
    max-width: 760px;
  }
}

@media (max-width: 920px) and (orientation: landscape) {
  .top-hud {
    top: max(5px, env(safe-area-inset-top));
    left: max(5px, env(safe-area-inset-left));
    right: max(5px, env(safe-area-inset-right));
    grid-template-columns: 1.25fr .74fr .74fr .66fr;
    gap: 5px;
    padding: 0;
    pointer-events: none;
  }
  .top-hud > * {
    pointer-events: auto;
  }
  .logo-lockup,
  .stat {
    min-height: 34px;
    padding: 5px 7px;
    border-radius: 12px;
  }
  .logo-lockup strong,
  .stat strong { font-size: .72rem; }
  .logo-lockup small,
  .stat span { font-size: .53rem; }
  .logo-dot { width: 7px; height: 7px; }

  .map-style-btn {
    top: max(43px, calc(env(safe-area-inset-top) + 43px));
    right: max(6px, env(safe-area-inset-right));
    padding: 5px 7px;
    font-size: .6rem;
    z-index: 720;
  }
  body.is-playing .fullscreen-btn {
    top: auto;
    bottom: max(6px, env(safe-area-inset-bottom));
    right: max(6px, env(safe-area-inset-right));
    padding: 6px 8px;
    font-size: .62rem;
    z-index: 730;
  }
  .audio-card {
    top: max(43px, calc(env(safe-area-inset-top) + 43px));
    left: max(6px, env(safe-area-inset-left));
    width: min(194px, 29vw);
    max-height: calc(100dvh - 98px);
    padding: 6px;
    gap: 5px;
    border-radius: 12px;
    z-index: 690;
  }
  .audio-card .wave-orb { display: none; }
  .audio-copy h2 { font-size: .72rem; margin: 0 0 2px; }
  .audio-copy p {
    font-size: .58rem;
    line-height: 1.15;
    max-height: 34px;
    overflow: hidden;
  }
  audio { height: 22px; }
  .actions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }
  .actions-row .secondary-btn {
    padding: 4px 5px;
    font-size: .55rem;
    line-height: 1.05;
    min-height: 24px;
  }
  .bottom-panel {
    left: max(6px, env(safe-area-inset-left));
    right: max(74px, env(safe-area-inset-right));
    bottom: max(6px, env(safe-area-inset-bottom));
    padding: 6px;
    gap: 7px;
    border-radius: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    z-index: 700;
  }
  .guess-copy span { font-size: .54rem; }
  .guess-copy strong { font-size: .66rem; }
  .bottom-panel .primary-btn {
    padding: 6px 8px;
    font-size: .62rem;
  }
  .result-modal {
    width: min(460px, calc(100vw - 18px));
    max-height: calc(100dvh - 18px);
    padding: 12px;
    border-radius: 16px;
    z-index: 900;
  }
  .leaflet-control-zoom {
    transform: scale(.74);
    transform-origin: bottom right;
  }
}

@media (max-width: 620px) and (orientation: portrait) {
  body.is-playing::before {
    z-index: 880;
  }
  .top-hud {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    top: max(7px, env(safe-area-inset-top));
    left: 7px;
    right: 7px;
  }
  .logo-lockup { grid-column: 1 / -1; }
  .map-style-btn {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom) + 64px);
    right: 8px;
    z-index: 720;
  }
  .audio-card {
    left: 8px;
    right: 8px;
    width: auto;
    bottom: calc(env(safe-area-inset-bottom) + 116px);
    top: auto;
    max-height: 122px;
    padding: 8px;
    z-index: 690;
  }
  .bottom-panel {
    left: 8px;
    right: 8px;
    bottom: calc(env(safe-area-inset-bottom) + 8px);
    width: auto;
    transform: none;
    z-index: 700;
  }
}

/* v2.2 compact round result + GeoGuessr-style reveal animation */
.result-modal {
  width: min(410px, calc(100vw - 28px));
  max-height: min(70vh, 430px);
  padding: 14px;
  border-radius: 20px;
  line-height: 1.35;
  animation: resultSlideIn .22s ease-out;
}
@keyframes resultSlideIn {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.result-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}
.result-modal h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.1;
}
.compact-note {
  margin: 4px 0 0;
  font-size: .8rem;
}
.round-points,
.distance-callout,
.compact-result-grid > div {
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.065);
  border-radius: 14px;
}
.round-points {
  min-width: 92px;
  padding: 8px 10px;
  text-align: right;
}
.round-points span,
.distance-callout span,
.compact-result-grid span {
  display: block;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.round-points strong {
  display: block;
  color: var(--accent);
  font-size: 1.1rem;
  line-height: 1.1;
  margin-top: 3px;
}
.distance-callout {
  margin: 10px 0;
  padding: 10px 12px;
  text-align: center;
  background: linear-gradient(135deg, rgba(34,211,238,.16), rgba(139,92,246,.12));
}
.distance-callout strong {
  display: block;
  margin-top: 2px;
  font-size: clamp(1.35rem, 4vw, 2rem);
  color: var(--text);
  letter-spacing: -0.04em;
}
.compact-result-grid {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.compact-result-grid > div {
  padding: 9px 11px;
}
.compact-result-grid strong {
  display: block;
  margin-top: 3px;
  font-size: .88rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}
.next-round-btn {
  width: 100%;
}
.result-grid,
.result-row {
  display: none;
}
.custom-pin.drop-in {
  animation: pinDrop .42s cubic-bezier(.2, 1.4, .35, 1);
}
.custom-pin.locked {
  box-shadow: 0 0 0 5px rgba(139,92,246,.18), 0 10px 28px rgba(0,0,0,.35);
}
@keyframes pinDrop {
  0% { transform: translateY(-28px) rotate(-45deg) scale(.7); opacity: 0; }
  70% { transform: translateY(3px) rotate(-45deg) scale(1.08); opacity: 1; }
  100% { transform: translateY(0) rotate(-45deg) scale(1); opacity: 1; }
}
.result-travel-line {
  stroke-dasharray: 8 11;
  animation: routeDash 1s linear infinite;
}
@keyframes routeDash {
  to { stroke-dashoffset: -38; }
}
#guessBtn.ready {
  opacity: 1;
  box-shadow: 0 0 0 5px rgba(34,211,238,.13), 0 14px 36px rgba(34,211,238,.25);
}
body.has-map-guess .bottom-panel {
  border-color: rgba(34,211,238,.42);
}
body.showing-round-result .bottom-panel,
body.showing-round-result .audio-card {
  opacity: .86;
}

@media (min-width: 921px) {
  .result-modal {
    left: auto;
    right: 18px;
    top: auto;
    bottom: 92px;
    transform: none;
  }
  @keyframes resultSlideIn {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
}

@media (max-width: 920px) and (orientation: landscape) {
  .result-modal {
    left: auto;
    right: max(7px, env(safe-area-inset-right));
    top: max(50px, calc(env(safe-area-inset-top) + 50px));
    bottom: auto;
    transform: none;
    width: min(310px, 42vw);
    max-height: calc(100dvh - 60px);
    padding: 9px;
    border-radius: 14px;
  }
  .result-header { gap: 7px; }
  .result-modal h2 { font-size: .78rem; }
  .round-points { min-width: 70px; padding: 6px 7px; }
  .round-points span,
  .distance-callout span,
  .compact-result-grid span { font-size: .48rem; }
  .round-points strong { font-size: .82rem; }
  .distance-callout { margin: 7px 0; padding: 7px; }
  .distance-callout strong { font-size: 1.05rem; }
  .compact-result-grid { gap: 6px; margin-bottom: 8px; }
  .compact-result-grid > div { padding: 6px 7px; }
  .compact-result-grid strong { font-size: .68rem; white-space: nowrap; }
  .next-round-btn { padding: 7px 9px; font-size: .66rem; }
}

@media (max-width: 620px) and (orientation: portrait) {
  .result-modal {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom) + 76px);
    left: 8px;
    right: 8px;
    width: auto;
    transform: none;
    max-height: 42vh;
    padding: 11px;
  }
  .result-modal h2 { font-size: .94rem; }
  .distance-callout strong { font-size: 1.2rem; }
  .compact-result-grid strong { font-size: .78rem; }
}

/* v2.3 share preview + mobile portrait lock + fullscreen stability */
.orientation-lock {
  display: none;
}
.fullscreen-btn {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.bottom-panel,
.bottom-panel * {
  pointer-events: auto;
}
#guessBtn {
  position: relative;
  z-index: 2;
  min-height: 42px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
body.fullscreen-active.is-playing .game-screen,
body.is-playing .game-screen {
  height: 100dvh;
  width: 100vw;
}
body.fullscreen-active .map,
body.fullscreen-active .leaflet-container {
  height: 100dvh !important;
  width: 100vw !important;
}

@media (max-width: 760px) and (orientation: portrait) {
  body.is-playing {
    overflow: hidden;
  }
  body.is-playing .map {
    filter: blur(2px) brightness(.58);
  }
  body.is-playing .top-hud,
  body.is-playing .audio-card,
  body.is-playing .bottom-panel,
  body.is-playing .result-modal,
  body.is-playing .map-style-btn {
    display: none !important;
  }
  body.is-playing .fullscreen-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    top: auto;
    bottom: calc(env(safe-area-inset-bottom) + 18px);
    right: 50%;
    transform: translateX(50%);
    z-index: 1500;
    padding: 11px 16px;
    font-size: .86rem;
  }
  body.is-playing::before {
    display: none !important;
    content: none !important;
  }
  body.is-playing .orientation-lock {
    display: grid;
    place-items: center;
    position: fixed;
    inset: 0;
    z-index: 1400;
    padding: max(18px, env(safe-area-inset-top)) 18px max(86px, calc(env(safe-area-inset-bottom) + 86px));
    background:
      radial-gradient(circle at 50% 30%, rgba(34,211,238,.18), transparent 38%),
      rgba(4, 11, 22, .74);
    pointer-events: auto;
  }
  .orientation-card {
    width: min(360px, 92vw);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 24px;
    padding: 22px 18px;
    background: rgba(9,18,33,.88);
    box-shadow: var(--shadow);
    text-align: center;
    backdrop-filter: blur(18px);
  }
  .orientation-card::before {
    content: "↻";
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    border-radius: 999px;
    color: var(--accent);
    background: rgba(34,211,238,.1);
    border: 1px solid rgba(34,211,238,.28);
    font-size: 2rem;
    font-weight: 950;
  }
  .orientation-card strong {
    display: block;
    font-size: 1.35rem;
    letter-spacing: -.03em;
  }
  .orientation-card span {
    display: block;
    margin-top: 9px;
    color: var(--muted);
    line-height: 1.45;
    font-weight: 800;
  }
}

@media (max-width: 920px) and (orientation: landscape) {
  body.fullscreen-active.is-playing .bottom-panel {
    right: max(78px, env(safe-area-inset-right));
  }
  body.fullscreen-active.is-playing #guessBtn {
    min-width: 98px;
  }
  body.has-map-guess #guessBtn.ready {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* v24: region-aware map modes */
.mode-badge {
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(8, 13, 26, .84), rgba(15, 23, 42, .72));
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  border-radius: 20px;
  padding: 10px 14px;
  min-width: 150px;
  text-align: center;
  pointer-events: auto;
}
.mode-badge span {
  display: block;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .11em;
}
.mode-badge strong {
  display: block;
  margin-top: 3px;
  color: var(--accent);
  font-size: 1.08rem;
  line-height: 1;
}
.top-hud {
  grid-template-columns: minmax(190px, 1fr) auto repeat(3, auto);
}

@media (max-width: 1100px) {
  .top-hud { grid-template-columns: minmax(170px, 1fr) auto repeat(3, auto); gap: 8px; }
  .mode-badge { min-width: 125px; padding: 8px 10px; border-radius: 17px; }
  .mode-badge span { font-size: .58rem; letter-spacing: .08em; }
  .mode-badge strong { font-size: .9rem; }
}

@media (max-width: 920px) and (orientation: landscape) {
  .top-hud { grid-template-columns: auto auto repeat(3, auto); gap: 5px; top: 6px; left: 8px; right: 8px; }
  .mode-badge { min-width: 88px; padding: 5px 7px; border-radius: 12px; }
  .mode-badge span { font-size: .46rem; letter-spacing: .05em; }
  .mode-badge strong { font-size: .7rem; }
}

@media (max-width: 620px) and (orientation: portrait) {
  .top-hud { grid-template-columns: 1fr 1fr; }
  .mode-badge { min-width: 0; width: 100%; }
}

/* v2.5 PC HUD alignment + answer-focused result animation */
@media (min-width: 921px) {
  .top-hud {
    left: 18px !important;
    right: 18px !important;
    top: 14px !important;
    max-width: none !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: auto minmax(18px, 1fr) auto auto auto auto !important;
    align-items: start !important;
    gap: 10px !important;
    pointer-events: none;
  }
  .top-hud > * {
    pointer-events: auto;
  }
  .logo-lockup {
    grid-column: 1;
    justify-self: start;
    align-self: start;
    width: auto;
    min-width: 174px;
    padding: 9px 12px;
    border-radius: 18px;
  }
  .logo-lockup strong { font-size: .96rem; }
  .logo-lockup small { font-size: .68rem; }
  .logo-dot {
    width: 28px;
    height: 28px;
    box-shadow: 0 0 0 7px rgba(34,211,238,.11);
  }
  .mode-badge {
    grid-column: 3;
    justify-self: end;
    min-width: 150px;
    padding: 9px 13px;
    border-radius: 18px;
  }
  .stat {
    min-width: 82px;
    padding: 8px 10px;
    border-radius: 16px;
  }
  .stat span,
  .mode-badge span {
    font-size: .58rem;
    letter-spacing: .09em;
  }
  .stat strong,
  .mode-badge strong {
    font-size: .96rem;
  }
  .map-style-btn {
    top: 78px !important;
    right: 18px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    padding: 9px 13px;
    border-radius: 15px;
    font-size: .76rem;
  }
  .audio-card {
    left: 18px;
    bottom: 88px;
  }
  .bottom-panel {
    bottom: 18px;
  }
}

body.showing-round-result .map::after {
  background:
    radial-gradient(circle at 50% 45%, rgba(34,211,238,.06), transparent 42%),
    linear-gradient(180deg, rgba(6,17,29,.02), rgba(6,17,29,.08));
}

/* v26: daily mode, verification resend, mobile region focus polish */
.inline-auth-btn {
  margin-top: 10px;
  border: 1px solid rgba(34, 211, 238, .35);
  background: rgba(34, 211, 238, .12);
  color: #cffafe;
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 950;
  cursor: pointer;
}
.inline-auth-btn:hover { background: rgba(34, 211, 238, .2); }

@media (max-width: 920px) and (orientation: landscape) {
  .mode-badge strong { max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* v2.8.1: prevent dragging the map outside the playable world without clipping Leaflet tiles */
.game-screen,
.map {
  overflow: hidden !important;
}
.map,
.leaflet-container {
  background: var(--rq-map-water, #bed9ec) !important;
  overscroll-behavior: none;
}
.leaflet-container {
  cursor: grab;
}
.leaflet-container:active {
  cursor: grabbing;
}
body.is-playing {
  overscroll-behavior: none;
}

/* v3.2 fair modes + polished final screen */
.mode-badge strong[aria-hidden="true"],
.mode-badge strong:empty {
  display: none !important;
}
.mode-badge {
  min-width: 138px;
}
.mode-badge span {
  margin: 0;
  color: var(--accent);
  font-size: .78rem;
  letter-spacing: .12em;
}

.final-screen {
  width: min(1120px, calc(100vw - 28px));
  gap: 18px;
}
.final-hero-card,
.final-columns > * {
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(13, 21, 37, .92), rgba(15, 23, 42, .78));
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  border-radius: 28px;
}
.final-hero-card {
  width: 100%;
  padding: clamp(22px, 4vw, 42px);
  text-align: center;
}
.final-hero-card h1 {
  margin: 12px 0 0;
  font-size: clamp(2.2rem, 5vw, 5.4rem);
  letter-spacing: -.07em;
}
.final-score {
  margin: 8px auto 12px;
  font-size: clamp(4rem, 12vw, 10rem);
  line-height: .88;
  background: linear-gradient(135deg, var(--accent), #8b5cf6 65%, #ffd166);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.final-message {
  display: grid;
  gap: 4px;
  justify-items: center;
  margin: 0 auto 16px;
}
.final-message strong {
  color: var(--text);
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
}
.final-message span {
  color: var(--muted);
  max-width: 680px;
}
.final-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.final-columns {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(320px, 1.15fr);
  gap: 18px;
  align-items: start;
}
.final-columns .profile-card,
.final-columns .leaderboard-card {
  padding: 18px;
  margin: 0;
}
.save-status {
  min-height: 24px;
  margin: 10px 0 0 !important;
  font-weight: 800;
  color: var(--accent) !important;
}

@media (max-width: 820px) {
  .final-columns { grid-template-columns: 1fr; }
  .final-hero-card { padding: 20px; }
  .final-score { font-size: clamp(3.4rem, 18vw, 6rem); }
  .mode-badge { min-width: 96px; padding: 7px 9px; }
  .mode-badge span { font-size: .58rem; }
}

@media (max-width: 920px) and (orientation: landscape) {
  .mode-badge span { font-size: .48rem; }
  .mode-badge { min-width: 74px; }
}

/* v3.3 profile avatars and XP polish */
.home-profile-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  background: rgba(255,255,255,.055);
}
.home-profile-main strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 1.16rem;
}
.home-profile-mini {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.home-profile-mini span {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 15px;
  background: rgba(15, 23, 42, .56);
  color: var(--muted);
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.home-profile-mini strong {
  color: var(--text);
  font-size: .98rem;
  letter-spacing: 0;
  text-transform: none;
}
.avatar-badge {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: radial-gradient(circle at 30% 20%, rgba(34,211,238,.36), rgba(139,92,246,.16) 58%, rgba(15,23,42,.88));
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
  font-size: 1.22rem;
  line-height: 1;
  flex: none;
}
.avatar-badge.large {
  width: 64px;
  height: 64px;
  border-radius: 22px;
  font-size: 2rem;
}
.avatar-picker {
  width: min(560px, 100%);
  margin: 8px auto 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 20px;
  background: rgba(255,255,255,.04);
}
.avatar-picker-title {
  margin-bottom: 9px;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
}
.avatar-options {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}
.avatar-option {
  display: grid;
  place-items: center;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: rgba(15,23,42,.64);
  color: var(--text);
  cursor: pointer;
  font-size: 1.3rem;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.avatar-option:hover { transform: translateY(-1px); border-color: rgba(34,211,238,.55); }
.avatar-option.active {
  border-color: rgba(34,211,238,.9);
  background: linear-gradient(135deg, rgba(34,211,238,.22), rgba(139,92,246,.22));
  box-shadow: 0 0 0 3px rgba(34,211,238,.11);
}
.xp-track {
  position: relative;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}
.xp-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 24px rgba(34,211,238,.28);
}
.xp-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 850;
}
.profile-header-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.profile-header-row span {
  display: block;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.profile-header-row strong {
  display: block;
  margin-top: 2px;
  font-size: 1.42rem;
  color: var(--text);
}
.profile-level-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin: 6px 0 10px;
}
.profile-level-row strong { color: var(--text); font-size: 1.12rem; }
.profile-level-row span { color: var(--good); font-weight: 950; }
.leaderboard-row.with-avatar {
  grid-template-columns: 48px 42px 1fr auto;
}

@media (max-width: 760px) {
  .home-profile-card { grid-template-columns: 1fr; text-align: center; }
  .home-profile-card .avatar-badge { margin: 0 auto; }
  .home-profile-mini { grid-template-columns: 1fr 1fr; }
  .avatar-options { grid-template-columns: repeat(4, 1fr); }
  .leaderboard-row.with-avatar { grid-template-columns: 38px 36px 1fr; }
  .leaderboard-row.with-avatar > strong:last-child { grid-column: 3; justify-self: start; }
  .profile-level-row { display: grid; text-align: left; }
}


/* v3.4 compact profile dashboard fix */
.start-card-v12 {
  width: min(920px, 100%);
  display: grid !important;
  grid-template-columns: minmax(240px, .92fr) minmax(300px, 1.08fr);
  grid-template-areas:
    "intro profile"
    "player profile"
    "avatar mode"
    "actions actions";
  align-items: stretch;
  gap: 12px;
  padding: 14px;
  overflow: hidden;
}
.start-card-v12 .mode-copy { grid-area: intro; min-width: 0; }
.start-card-v12 .account-lockup { grid-area: player; min-width: 0; }
.start-card-v12 .account-stats { grid-area: profile; padding: 0; background: transparent; border: 0; min-width: 0; }
.start-card-v12 .avatar-picker { grid-area: avatar; margin: 0; width: 100%; min-width: 0; align-self: stretch; }
.start-card-v12 .nickname-field { grid-area: mode; min-width: 0; align-self: stretch; }
.start-card-v12 .account-actions { grid-area: actions; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; }

.home-profile-card {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 12px;
  border-radius: 20px;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  background: linear-gradient(135deg, rgba(34,211,238,.10), rgba(139,92,246,.07));
}
.home-profile-main strong { font-size: 1rem; margin-bottom: 6px; }
.avatar-badge.large { width: 54px; height: 54px; border-radius: 18px; font-size: 1.65rem; }
.home-profile-mini { gap: 6px; }
.home-profile-mini span { padding: 7px 8px; border-radius: 12px; font-size: .62rem; letter-spacing: .06em; }
.home-profile-mini strong { font-size: .86rem; }
.xp-track { height: 8px; }
.xp-meta { font-size: .68rem; margin-top: 5px; }

.avatar-picker { border-radius: 16px; padding: 10px; }
.avatar-picker-title { text-align: left; font-size: .64rem; margin-bottom: 8px; }
.avatar-options { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.avatar-option { min-height: 36px; border-radius: 13px; font-size: 1.05rem; }
.nickname-field { margin: 0; }
.nickname-field select { width: 100%; }
.account-actions .primary-btn,
.account-actions .secondary-btn { min-height: 44px; }

@media (min-width: 1181px) {
  .start-screen { padding-top: 32px; }
  .start-screen h1 { font-size: clamp(4rem, 8vw, 6rem); }
  .tagline { margin-bottom: 18px; }
}

@media (max-width: 980px) {
  .start-card-v12 {
    width: min(720px, 100%);
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "player"
      "profile"
      "avatar"
      "mode"
      "actions";
  }
  .home-profile-card { height: auto; }
}

@media (max-width: 760px) {
  .start-card-v12 { gap: 9px; padding: 11px; }
  .home-profile-card { grid-template-columns: 46px 1fr; text-align: left; padding: 10px; }
  .home-profile-card .avatar-badge { margin: 0; }
  .avatar-badge.large { width: 44px; height: 44px; font-size: 1.35rem; border-radius: 15px; }
  .home-profile-mini { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-profile-mini span { padding: 6px; font-size: .54rem; }
  .home-profile-mini strong { font-size: .74rem; }
  .avatar-options { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
  .avatar-option { min-height: 32px; border-radius: 11px; font-size: .95rem; }
  .account-actions { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 420px) {
  .home-profile-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .avatar-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .account-actions { grid-template-columns: 1fr; }
}

/* v3.6 mode clarity + station counts */
.mode-info {
  grid-area: modeinfo;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(15, 23, 42, .55);
  border-radius: 16px;
  padding: 11px 12px;
  min-width: 0;
  display: grid;
  gap: 4px;
  align-self: stretch;
}
.mode-info strong {
  color: var(--text);
  font-size: .92rem;
  line-height: 1.15;
}
.mode-info span {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
}
.mode-info small {
  color: var(--cyan);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.3;
}
.start-card-v12 {
  grid-template-areas:
    "intro profile"
    "player profile"
    "avatar mode"
    "actions modeinfo";
}
.start-card-v12 .mode-info { min-height: 62px; }
.nickname-field select option:disabled { color: #64748b; }

@media (max-width: 980px) {
  .start-card-v12 {
    grid-template-areas:
      "intro"
      "player"
      "profile"
      "avatar"
      "mode"
      "modeinfo"
      "actions";
  }
}

@media (max-width: 760px) {
  .mode-info { padding: 9px 10px; border-radius: 14px; }
  .mode-info strong { font-size: .86rem; }
  .mode-info span { font-size: .72rem; }
  .mode-info small { font-size: .62rem; }
}

/* RadioQuest admin panel */
.admin-body {
  min-height: 100vh;
  overflow: auto;
  background:
    radial-gradient(circle at 18% 10%, rgba(76, 201, 240, 0.18), transparent 32rem),
    radial-gradient(circle at 82% 0%, rgba(255, 211, 105, 0.14), transparent 28rem),
    #07111f;
  color: #f8fbff;
}

.admin-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 56px;
}

.admin-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.admin-hero h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 4rem);
  letter-spacing: -0.05em;
}

.admin-hero p {
  margin: 8px 0 0;
  color: rgba(248, 251, 255, 0.74);
}

.admin-home-link,
.admin-card button,
.admin-actions-bar button,
.admin-station-actions button,
.admin-dialog-actions button,
.admin-token-row button {
  border: 0;
  border-radius: 14px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #2dd4bf, #60a5fa);
  color: #06111f;
  font-weight: 900;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.admin-card .ghost-btn,
.admin-actions-bar .ghost-btn,
.admin-station-actions .ghost-btn,
.admin-dialog-actions .ghost-btn {
  background: rgba(255,255,255,0.08);
  color: #f8fbff;
  border: 1px solid rgba(255,255,255,0.14);
}

.admin-card button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.admin-card {
  background: rgba(7, 17, 31, 0.78);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 24px;
  box-shadow: 0 20px 70px rgba(0,0,0,0.28);
  padding: 18px;
  backdrop-filter: blur(14px);
}

.admin-card h2 {
  margin: 0 0 6px;
}

.admin-card p {
  margin: 0 0 14px;
  color: rgba(248, 251, 255, 0.66);
}

.admin-login-card {
  max-width: 620px;
}

.admin-token-row,
.admin-filter-row,
.admin-actions-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.admin-token-row input,
.admin-filter-row input,
.admin-filter-row select,
.admin-dialog input,
.admin-dialog select,
.admin-dialog textarea {
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.13);
  background: rgba(255,255,255,0.08);
  color: #f8fbff;
  padding: 10px 12px;
  outline: none;
}

.admin-token-row input {
  min-width: min(360px, 100%);
  flex: 1;
}

.admin-filter-row input {
  flex: 1;
  min-width: 220px;
}

.admin-panel.hidden,
.hidden {
  display: none !important;
}

.admin-msg,
.admin-status {
  color: rgba(248, 251, 255, 0.72);
}

.admin-status.error,
.admin-msg:not(:empty) {
  color: #fda4af;
}

.admin-actions-bar {
  justify-content: flex-end;
  margin-bottom: 14px;
}

.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.admin-summary-card {
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
}

.admin-summary-card span,
.admin-summary-card small {
  display: block;
  color: rgba(248, 251, 255, 0.62);
  font-size: 0.78rem;
}

.admin-summary-card strong {
  display: block;
  margin: 6px 0;
  font-size: 1.4rem;
}

.admin-grid-two {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 14px;
}

.admin-section-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.admin-stations-list,
.admin-games-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  max-height: 68vh;
  overflow: auto;
  padding-right: 4px;
}

.admin-station,
.admin-game-row {
  border-radius: 18px;
  padding: 12px;
  background: rgba(255,255,255,0.065);
  border: 1px solid rgba(255,255,255,0.10);
}

.admin-station-main,
.admin-game-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.admin-station h3 {
  margin: 0;
  font-size: 1rem;
}

.admin-station p,
.admin-station small,
.admin-game-row span {
  display: block;
  margin: 3px 0 0;
  color: rgba(248, 251, 255, 0.62);
  font-size: 0.82rem;
}

.station-status {
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 0.72rem;
  font-weight: 900;
}
.station-status.ok { background: rgba(52, 211, 153, 0.16); color: #6ee7b7; }
.station-status.warn { background: rgba(251, 191, 36, 0.16); color: #fcd34d; }
.station-status.bad { background: rgba(251, 113, 133, 0.16); color: #fda4af; }
.station-status.off { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; }

.admin-station-metrics,
.admin-station-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.admin-station-metrics span {
  border-radius: 999px;
  padding: 6px 9px;
  background: rgba(0,0,0,0.18);
  color: rgba(248, 251, 255, 0.72);
  font-size: 0.78rem;
}

.admin-dialog {
  width: min(680px, calc(100vw - 24px));
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 24px;
  background: #07111f;
  color: #f8fbff;
  padding: 18px;
}
.admin-dialog::backdrop { background: rgba(0,0,0,0.65); backdrop-filter: blur(3px); }
.admin-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dialog-close { background: rgba(255,255,255,0.08) !important; color: #f8fbff !important; border-radius: 999px !important; padding: 6px 10px !important; }
.admin-dialog label { display: grid; gap: 6px; margin-top: 10px; color: rgba(248, 251, 255, 0.72); font-weight: 700; }
.admin-dialog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.admin-checkbox-label { display: flex !important; align-items: center; gap: 10px; }
.admin-checkbox-label input { min-height: auto; }
.admin-dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.empty-admin { color: rgba(248,251,255,0.62); }

@media (max-width: 980px) {
  .admin-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-grid-two { grid-template-columns: 1fr; }
  .admin-hero { flex-direction: column; }
}

@media (max-width: 560px) {
  .admin-shell { width: min(100% - 18px, 1180px); padding-top: 14px; }
  .admin-summary-grid { grid-template-columns: 1fr; }
  .admin-dialog-grid { grid-template-columns: 1fr; }
  .admin-token-row button,
  .admin-filter-row button,
  .admin-filter-row select,
  .admin-filter-row input { width: 100%; }
}


/* v3.8 UI polish pass - compact, stable desktop + mobile layout */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
body:not(.is-playing) {
  overflow-y: auto;
}
body.is-playing {
  overflow: hidden;
}

/* Main menu polish */
.start-screen {
  width: min(1120px, calc(100% - 28px));
  padding: clamp(28px, 5vh, 58px) 0 32px;
  min-height: 100svh;
  align-content: start;
}
.start-screen .brand-pill {
  padding: 8px 13px;
  font-size: .72rem;
}
.start-screen h1 {
  margin-top: 14px;
  font-size: clamp(3rem, 8vw, 6.8rem);
  letter-spacing: -.075em;
}
.start-screen .tagline {
  max-width: 720px;
  margin: 16px auto 18px;
  font-size: clamp(.96rem, 1.45vw, 1.14rem);
  line-height: 1.52;
}
.auth-shell {
  width: min(920px, 100%);
  margin: 14px auto 0;
  gap: 14px;
  align-items: stretch;
}
.auth-card {
  padding: 16px;
  border-radius: 22px;
}
.auth-card h2 { font-size: 1.26rem; margin-bottom: 5px; }
.auth-card p { font-size: .86rem; line-height: 1.42; margin-bottom: 12px; }
.auth-card input,
.nickname-field input,
.nickname-field select,
.mode-field select {
  min-height: 40px;
  padding: 9px 11px;
  border-radius: 13px;
}
.primary-btn, .secondary-btn {
  min-height: 40px;
  padding: 10px 15px;
  font-size: .9rem;
}
.status-pill, .small-note {
  font-size: .78rem;
}
.small-note { margin-top: 12px; }

/* Logged-in home card: tidy two-column desktop, clean stack on mobile */
.start-card-v12 {
  width: min(980px, 100%);
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(260px, .96fr);
  grid-template-areas:
    "profile avatar"
    "mode modeinfo"
    "actions actions";
  align-items: stretch;
  gap: 12px;
  padding: 14px;
  border-radius: 24px;
}
.start-card-v12 .mode-copy { display: none; }
.account-lockup { display: none; }
.account-stats {
  grid-area: profile;
  padding: 0;
  background: transparent;
  border: 0;
}
.home-profile-card {
  width: 100%;
  height: 100%;
  min-height: 178px;
  margin: 0;
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(34,211,238,.10), rgba(139,92,246,.08));
}
.home-profile-main strong { font-size: 1.05rem; margin-bottom: 8px; }
.home-profile-mini { gap: 7px; }
.home-profile-mini span {
  padding: 8px;
  border-radius: 13px;
  font-size: .64rem;
  letter-spacing: .07em;
}
.home-profile-mini strong { font-size: .88rem; }
.avatar-badge.large {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  font-size: 1.82rem;
}
.avatar-picker {
  grid-area: avatar;
  width: 100%;
  margin: 0;
  padding: 12px;
  border-radius: 20px;
}
.avatar-picker-title { font-size: .66rem; margin-bottom: 8px; }
.avatar-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.avatar-option {
  min-height: 40px;
  border-radius: 14px;
  font-size: 1.18rem;
}
.mode-field {
  grid-area: mode;
  margin: 0;
  align-self: stretch;
}
.mode-info {
  grid-area: modeinfo;
  margin: 0;
  min-height: 0;
  padding: 11px 13px;
  border-radius: 18px;
  text-align: left;
}
.mode-info strong { font-size: .94rem; }
.mode-info span, .mode-info small { font-size: .78rem; line-height: 1.34; }
.account-actions {
  grid-area: actions;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.account-actions .primary-btn,
.account-actions .secondary-btn {
  width: 100%;
  min-height: 44px;
}
.logout-btn { min-width: 116px; }

/* Game HUD polish */
@media (min-width: 921px) {
  .top-hud {
    top: 14px !important;
    left: 14px !important;
    right: 14px !important;
    grid-template-columns: auto 1fr auto auto auto auto !important;
    gap: 8px !important;
  }
  .logo-lockup,
  .mode-badge,
  .stat,
  .map-style-btn,
  .audio-card,
  .bottom-panel,
  .result-modal {
    box-shadow: 0 14px 44px rgba(0,0,0,.24);
  }
  .logo-lockup {
    min-width: 168px;
    padding: 8px 11px;
  }
  .mode-badge {
    min-width: 118px;
    padding: 8px 11px;
  }
  .stat {
    min-width: 76px;
    padding: 8px 9px;
  }
  .map-style-btn {
    top: 72px !important;
    right: 14px !important;
  }
  .audio-card {
    width: 330px;
    bottom: 82px;
    padding: 12px;
    border-radius: 20px;
  }
  .bottom-panel {
    width: min(560px, calc(100vw - 420px));
    min-width: 420px;
    padding: 10px 12px;
  }
  .result-modal {
    width: min(430px, calc(100vw - 28px));
    right: 18px;
    left: auto;
    transform: translateY(-50%);
  }
}
.mode-badge span { color: var(--accent); }
.mode-badge strong { display: none !important; }

/* Result panel: compact but readable */
.result-modal {
  text-align: left;
}
.result-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.result-header h2 { margin: 0; line-height: 1.15; }
.round-points {
  min-width: 96px;
  text-align: right;
}
.distance-callout {
  margin: 12px 0;
  padding: 12px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(34,211,238,.16), rgba(139,92,246,.12));
  border: 1px solid rgba(255,255,255,.12);
}
.distance-callout span,
.compact-result-grid span {
  display: block;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.distance-callout strong {
  display: block;
  margin-top: 3px;
  font-size: clamp(1.55rem, 4vw, 2.25rem);
  color: var(--text);
}
.compact-result-grid {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
.compact-result-grid div {
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(15,23,42,.56);
  border: 1px solid rgba(255,255,255,.10);
}
.compact-result-grid strong {
  display: block;
  margin-top: 3px;
  font-size: .92rem;
}
.next-round-btn { width: 100%; }

/* Final screen polish */
.final-screen {
  align-content: start;
  padding: clamp(24px, 5vh, 56px) 0 28px;
}
.final-hero-card { padding: clamp(18px, 3vw, 30px); }
.final-hero-card h1 { font-size: clamp(2rem, 4.2vw, 4.2rem); }
.final-score { font-size: clamp(3.4rem, 9vw, 7.4rem); }
.final-columns { gap: 14px; }
.leaderboard-row.with-avatar {
  grid-template-columns: 42px 38px 1fr auto;
  gap: 9px;
}
.leaderboard-row.with-avatar .avatar-badge {
  width: 34px;
  height: 34px;
  border-radius: 13px;
  font-size: 1.05rem;
}

/* Admin polish */
.admin-shell { padding-bottom: 30px; }
.admin-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-card { border-radius: 20px; padding: 16px; }
.admin-stations-list, .admin-games-list { max-height: 64vh; }
.admin-station-main { align-items: flex-start; }
.admin-station-actions button { padding: 8px 10px; font-size: .8rem; }

@media (max-width: 980px) {
  .admin-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-grid-two { grid-template-columns: 1fr; }
}

/* Tablet and phone menu */
@media (max-width: 760px) {
  .start-screen {
    width: min(100% - 14px, 640px);
    padding: 12px 0 22px;
  }
  .start-screen .brand-pill { font-size: .62rem; padding: 7px 10px; }
  .start-screen h1 { font-size: clamp(2.35rem, 14vw, 4rem); margin-top: 10px; }
  .tagline { font-size: .86rem; line-height: 1.38; margin: 10px auto 12px; }
  .auth-card h2 { font-size: 1.08rem; }
  .start-card-v12 {
    grid-template-columns: 1fr;
    grid-template-areas:
      "profile"
      "avatar"
      "mode"
      "modeinfo"
      "actions";
    gap: 9px;
    padding: 11px;
    border-radius: 18px;
  }
  .home-profile-card { min-height: 0; padding: 11px; border-radius: 17px; gap: 10px; }
  .avatar-badge.large { width: 50px; height: 50px; border-radius: 17px; font-size: 1.55rem; }
  .home-profile-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .avatar-picker { padding: 10px; border-radius: 17px; }
  .avatar-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .avatar-option { min-height: 38px; }
  .account-actions { grid-template-columns: 1fr 1fr; }
  .mode-info { padding: 10px 11px; }
  .small-note { display: none; }
  .final-screen { width: min(100% - 14px, 680px); padding: 14px 0 22px; }
  .final-columns { grid-template-columns: 1fr; gap: 10px; }
  .final-hero-card, .final-columns > * { border-radius: 20px; }
}

/* Mobile landscape gameplay: compact and non-overlapping */
@media (max-width: 920px) and (orientation: landscape) {
  .top-hud {
    grid-template-columns: auto auto repeat(3, minmax(48px, auto)) !important;
    top: max(6px, env(safe-area-inset-top)) !important;
    left: max(6px, env(safe-area-inset-left)) !important;
    right: max(6px, env(safe-area-inset-right)) !important;
    gap: 5px !important;
  }
  .logo-lockup { min-width: 0; padding: 5px 7px; border-radius: 12px; }
  .logo-lockup strong { font-size: .78rem; }
  .logo-dot { width: 18px; height: 18px; }
  .mode-badge { min-width: 72px; padding: 5px 7px; border-radius: 12px; }
  .mode-badge span { font-size: .46rem; letter-spacing: .06em; }
  .stat { min-width: 48px; padding: 5px 6px; border-radius: 12px; }
  .stat span { font-size: .48rem; }
  .stat strong { font-size: .76rem; }
  .map-style-btn {
    top: auto !important;
    right: max(7px, env(safe-area-inset-right)) !important;
    bottom: max(7px, env(safe-area-inset-bottom)) !important;
    padding: 7px 9px;
    font-size: .68rem;
  }
  .audio-card {
    width: min(225px, 34vw);
    left: max(7px, env(safe-area-inset-left));
    bottom: max(48px, calc(env(safe-area-inset-bottom) + 40px));
    padding: 7px;
    border-radius: 15px;
  }
  .audio-copy h2 { font-size: .76rem; }
  .audio-copy p { font-size: .66rem; max-height: 28px; }
  audio { height: 25px; }
  .actions-row .secondary-btn { font-size: .64rem; padding: 6px 7px; }
  .bottom-panel {
    width: min(420px, 52vw);
    min-width: 0;
    right: max(58px, calc(env(safe-area-inset-right) + 58px));
    left: auto;
    bottom: max(7px, env(safe-area-inset-bottom));
    transform: none;
    padding: 8px;
    border-radius: 17px;
    gap: 8px;
  }
  .guess-copy span { font-size: .52rem; }
  .guess-copy strong { font-size: .72rem; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #guessBtn { min-height: 36px; padding: 7px 10px; font-size: .72rem; }
  .result-modal {
    width: min(360px, 48vw);
    max-height: calc(100dvh - 26px);
    right: max(8px, env(safe-area-inset-right));
    left: auto;
    padding: 12px;
    border-radius: 18px;
  }
  .distance-callout { padding: 9px; margin: 8px 0; }
  .compact-result-grid div { padding: 8px; }
}

@media (max-width: 560px) {
  .admin-summary-grid { grid-template-columns: 1fr; }
  .admin-station-main,
  .admin-game-row { flex-direction: column; align-items: flex-start; }
  .admin-station-actions button { flex: 1 1 auto; }
  .admin-dialog { width: calc(100vw - 14px); padding: 14px; }
}

/* v4.0 final screen + leaderboard/stat polish */
.leaderboard-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.leaderboard-card-head h2 { margin: 0; }
.leaderboard-select {
  min-width: 150px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(8, 14, 26, .82);
  color: var(--text);
  padding: 9px 10px;
  font-weight: 850;
  outline: none;
}
.leaderboard-row.with-avatar > strong:last-child {
  display: grid;
  justify-items: end;
  gap: 1px;
  line-height: 1;
}
.leaderboard-row.with-avatar > strong:last-child small {
  color: var(--muted);
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .11em;
}
.mode-bests {
  grid-column: 1 / -1;
  margin-top: 8px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  background: rgba(255,255,255,.045);
  overflow: hidden;
}
.mode-bests summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  color: var(--text);
}
.mode-bests summary::-webkit-details-marker { display: none; }
.mode-bests summary span,
.mode-bests summary em {
  color: var(--muted);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-style: normal;
  font-weight: 850;
}
.mode-bests summary strong {
  font-size: 1rem;
  color: var(--accent);
}
.mode-bests-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 0 10px 10px;
}
.mode-bests-grid div {
  display: grid;
  gap: 2px;
  padding: 9px 8px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
}
.mode-bests-grid span,
.mode-bests-grid small {
  color: var(--muted);
  font-size: .66rem;
  font-weight: 850;
}
.mode-bests-grid strong {
  color: var(--text);
  font-size: .95rem;
}
.final-actions .secondary-btn,
.final-actions .primary-btn { min-width: 130px; }
.final-columns .leaderboard-card { min-width: 0; }
.profile-card .mode-bests { margin-top: 12px; }
.profile-card .mode-bests-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-profile-card .mode-bests { margin-top: 6px; }
.home-profile-card .mode-bests-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 820px) {
  .leaderboard-card-head { align-items: stretch; flex-direction: column; }
  .leaderboard-select { width: 100%; }
  .mode-bests-grid,
  .home-profile-card .mode-bests-grid,
  .profile-card .mode-bests-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mode-bests summary { grid-template-columns: 1fr auto; }
  .mode-bests summary em { grid-column: 1 / -1; }
  .leaderboard-row.with-avatar > strong:last-child { justify-items: start; }
}

@media (max-width: 920px) and (orientation: landscape) {
  .final-actions .secondary-btn,
  .final-actions .primary-btn { min-width: 112px; padding: 10px 12px; }
  .mode-bests-grid,
  .home-profile-card .mode-bests-grid,
  .profile-card .mode-bests-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mode-bests-grid div { padding: 7px 6px; }
  .mode-bests-grid strong { font-size: .78rem; }
}

/* v41 leaderboard/admin management polish */
.leaderboard-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(760px, calc(100vw - 28px));
  width: 760px;
}
.leaderboard-dialog::backdrop { background: rgba(3, 8, 18, 0.72); backdrop-filter: blur(8px); }
.leaderboard-dialog-card {
  background: linear-gradient(180deg, rgba(12, 24, 44, 0.98), rgba(5, 12, 26, 0.98));
  border: 1px solid rgba(125, 211, 252, 0.22);
  border-radius: 24px;
  padding: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  color: var(--text, #eaf6ff);
}
.leaderboard-dialog-card p { margin: 4px 0 0; color: var(--muted, #9db2c7); }
.menu-leaderboard-list { max-height: min(58vh, 520px); overflow: auto; margin-top: 12px; padding-right: 4px; }
.account-actions { flex-wrap: wrap; }
.account-actions #menuLeaderboardBtn { min-width: 132px; }

.admin-players-list { display: grid; gap: 12px; max-height: 560px; overflow: auto; padding-right: 4px; }
.admin-player {
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 18px;
  padding: 12px;
  background: rgba(15, 23, 42, .72);
}
.admin-player-main { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.admin-player h3 { margin: 0 0 4px; font-size: 1rem; }
.admin-player p, .admin-player small { margin: 0; color: var(--muted, #9db2c7); }
.compact-admin-games { margin-top: 12px; max-height: 330px; overflow: auto; }
.editable-game { grid-template-columns: 1fr repeat(3, minmax(90px, 130px)) auto; align-items: end; gap: 8px; }
.editable-game label { display: grid; gap: 4px; font-size: .76rem; color: var(--muted, #9db2c7); }
.editable-game input { width: 100%; }

@media (max-width: 760px) {
  .leaderboard-dialog { width: calc(100vw - 20px); }
  .leaderboard-dialog-card { padding: 14px; border-radius: 18px; }
  .admin-player-main { flex-direction: column; }
  .editable-game { grid-template-columns: 1fr; }
}


.admin-player {
  position: relative;
}

.admin-delete-player {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(248, 113, 113, 0.55);
  background: rgba(127, 29, 29, 0.88);
  color: #fecaca;
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 900;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(127, 29, 29, 0.22);
}

.admin-delete-player:hover,
.admin-delete-player:focus-visible {
  background: #dc2626;
  color: #fff;
  transform: translateY(-1px);
}

.admin-delete-player:disabled {
  opacity: 0.55;
  cursor: wait;
  transform: none;
}

.admin-player .admin-player-main {
  padding-right: 42px;
}

/* v4.3 visual polish - no new assets required */
:root {
  --rq-glow-cyan: rgba(34, 211, 238, .34);
  --rq-glow-violet: rgba(139, 92, 246, .30);
  --rq-card: rgba(8, 16, 31, .76);
  --rq-card-strong: rgba(12, 24, 44, .92);
}

body {
  background:
    radial-gradient(circle at 18% 10%, rgba(34, 211, 238, 0.26), transparent 24%),
    radial-gradient(circle at 83% 18%, rgba(139, 92, 246, 0.18), transparent 28%),
    radial-gradient(circle at 70% 86%, rgba(34, 211, 238, 0.10), transparent 24%),
    linear-gradient(135deg, #06101e 0%, #0a1224 45%, #050816 100%);
}

body:not(.is-playing)::before,
body:not(.is-playing)::after {
  content: "";
  position: fixed;
  inset: auto;
  pointer-events: none;
  z-index: 0;
  border-radius: 999px;
  filter: blur(.2px);
}

body:not(.is-playing)::before {
  width: 52vmin;
  height: 52vmin;
  left: -18vmin;
  top: 12vh;
  border: 1px solid rgba(34, 211, 238, .12);
  box-shadow:
    0 0 0 44px rgba(34, 211, 238, .035),
    0 0 0 92px rgba(139, 92, 246, .026),
    0 0 120px rgba(34, 211, 238, .10);
  animation: rqPulse 5.5s ease-in-out infinite;
}

body:not(.is-playing)::after {
  width: 46vmin;
  height: 46vmin;
  right: -16vmin;
  bottom: 8vh;
  border: 1px solid rgba(139, 92, 246, .13);
  box-shadow:
    0 0 0 38px rgba(139, 92, 246, .035),
    0 0 0 78px rgba(34, 211, 238, .024),
    0 0 100px rgba(139, 92, 246, .11);
  animation: rqPulse 6.2s ease-in-out infinite reverse;
}

@keyframes rqPulse {
  0%, 100% { transform: scale(.985); opacity: .78; }
  50% { transform: scale(1.035); opacity: 1; }
}

.start-screen,
.final-screen { position: relative; z-index: 1; }

.start-screen h1,
.final-screen h1 {
  background: linear-gradient(115deg, #ffffff 0%, #bff7ff 32%, #a78bfa 68%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

.brand-pill {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(34,211,238,.13), rgba(139,92,246,.13));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 42px rgba(0,0,0,.18);
}
.brand-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(34,211,238,.12), 0 0 22px rgba(34,211,238,.75);
}

.auth-card,
.start-card,
.profile-card,
.leaderboard-card,
.final-hero-card,
.leaderboard-dialog-card,
.admin-card,
.admin-player {
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), transparent 34%),
    linear-gradient(145deg, rgba(12,24,44,.88), rgba(7,14,28,.76));
  border-color: rgba(148, 163, 184, .18);
  box-shadow: 0 22px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.055);
}

.auth-card,
.start-card,
.profile-card,
.leaderboard-card,
.final-hero-card { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.auth-card:hover,
.start-card-v12:hover,
.profile-card:hover,
.leaderboard-card:hover {
  border-color: rgba(34, 211, 238, .28);
  box-shadow: 0 26px 80px rgba(0,0,0,.34), 0 0 0 1px rgba(34,211,238,.06) inset;
}

.primary-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 46%, #8b5cf6 100%);
  box-shadow: 0 16px 38px rgba(34, 211, 238, .25), inset 0 1px 0 rgba(255,255,255,.18);
}
.primary-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent);
  transition: transform .5s ease;
}
.primary-btn:hover::after { transform: translateX(120%); }
.secondary-btn,
.ghost-btn,
.map-style-btn,
.fullscreen-btn {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 34px rgba(0,0,0,.20);
}

.mode-info,
.account-lockup,
.account-stats,
.mode-bests,
.profile-grid div,
.mode-bests-grid div {
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.09);
}

.avatar-option,
.avatar-current,
.avatar-chip,
.player-avatar {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 24px rgba(0,0,0,.22);
}

.top-hud {
  filter: drop-shadow(0 20px 42px rgba(0,0,0,.24));
}
.logo-lockup,
.stat,
.mode-badge,
.audio-card,
.bottom-panel,
.result-modal {
  background:
    linear-gradient(180deg, rgba(255,255,255,.065), transparent 46%),
    rgba(7, 16, 31, .80);
  border-color: rgba(226, 232, 240, .18);
}
.logo-lockup strong { letter-spacing: -.04em; }
.mode-badge {
  pointer-events: none;
  border-radius: 18px;
  padding: 10px 13px;
  display: grid;
  place-items: center;
  min-width: 118px;
  text-align: center;
}
.mode-badge span {
  color: var(--accent);
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .72rem;
}

.audio-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(34,211,238,.16), transparent 34%, rgba(139,92,246,.14));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding: 1px;
  mask-composite: exclude;
  -webkit-mask-composite: xor;
}
.audio-copy h2::before {
  content: "📡 ";
}

.bottom-panel.ready,
.bottom-panel:has(#guessBtn:not(:disabled)) {
  border-color: rgba(34, 211, 238, .40);
  box-shadow: 0 20px 66px rgba(0,0,0,.34), 0 0 0 1px rgba(34,211,238,.11) inset;
}

.result-modal {
  animation: rqPop .24s ease both;
}
@keyframes rqPop {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.result-modal h2 {
  letter-spacing: -.035em;
  background: linear-gradient(120deg, #fff, #7dd3fc 55%, #c4b5fd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.distance-callout,
.compact-result-grid div {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.055);
}

.final-hero-card {
  width: min(760px, 100%);
  margin: 0 auto 18px;
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: clamp(20px, 3vw, 30px);
  text-align: center;
}
.final-score {
  background: linear-gradient(120deg, #67e8f9, #8b5cf6, #f0abfc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.final-columns {
  width: min(1100px, 100%);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 16px;
  align-items: start;
}
.final-columns .profile-card,
.final-columns .leaderboard-card { margin-top: 0; }

.leaderboard-row {
  border: 1px solid rgba(255,255,255,.075);
  background: linear-gradient(90deg, rgba(255,255,255,.065), rgba(255,255,255,.035));
}
.leaderboard-row:first-child {
  border-color: rgba(251, 191, 36, .32);
  background: linear-gradient(90deg, rgba(251,191,36,.12), rgba(34,211,238,.06));
}

.map-style-btn { top: max(82px, calc(env(safe-area-inset-top) + 82px)); }
.leaflet-control-zoom a { transition: background .16s ease, transform .16s ease; }
.leaflet-control-zoom a:hover { transform: scale(1.02); }

@media (max-width: 960px) {
  .final-columns { grid-template-columns: 1fr; }
  .mode-badge { display: none; }
}

@media (max-width: 760px) {
  body:not(.is-playing)::before { width: 72vmin; height: 72vmin; left: -34vmin; top: 4vh; }
  body:not(.is-playing)::after { width: 62vmin; height: 62vmin; right: -30vmin; bottom: 4vh; }
  .final-hero-card { border-radius: 22px; padding: 16px; }
  .final-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .auth-card:hover,
  .start-card-v12:hover,
  .profile-card:hover,
  .leaderboard-card:hover { transform: none; }
}

@media (max-width: 920px) and (orientation: landscape) {
  .mode-badge { display: none; }
  .audio-copy h2::before { content: ""; }
  .final-columns { grid-template-columns: 1fr 1fr; gap: 10px; }
  .final-hero-card { padding: 12px; border-radius: 18px; }
  .final-score { margin: 6px auto; font-size: clamp(2.1rem, 8vw, 4rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* v4.4 mobile landscape gameplay polish */
@media (hover: none) and (pointer: coarse) and (orientation: landscape),
       (max-height: 520px) and (orientation: landscape) {
  body.is-playing .game-screen {
    overflow: hidden !important;
  }

  body.is-playing .top-hud {
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
    top: max(6px, env(safe-area-inset-top)) !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  body.is-playing .top-hud .logo-lockup {
    flex: 0 0 auto !important;
    margin-right: auto !important;
    min-height: 30px !important;
    padding: 5px 8px !important;
    border-radius: 12px !important;
    gap: 7px !important;
  }

  body.is-playing .top-hud .logo-dot {
    width: 19px !important;
    height: 19px !important;
    box-shadow: 0 0 0 4px rgba(34, 211, 238, .10) !important;
  }

  body.is-playing .top-hud .logo-lockup strong {
    font-size: .78rem !important;
    line-height: 1 !important;
  }

  body.is-playing .top-hud .logo-lockup small,
  body.is-playing .mode-badge {
    display: none !important;
  }

  body.is-playing .top-hud .stat {
    flex: 0 0 auto !important;
    min-width: 58px !important;
    min-height: 30px !important;
    padding: 5px 8px !important;
    border-radius: 12px !important;
  }

  body.is-playing .top-hud .stat span {
    font-size: .48rem !important;
    line-height: 1 !important;
    letter-spacing: .08em !important;
  }

  body.is-playing .top-hud .stat strong {
    font-size: .78rem !important;
    line-height: 1.05 !important;
    margin-top: 2px !important;
  }

  body.is-playing .map-style-btn {
    display: none !important;
  }

  body.is-playing .fullscreen-btn {
    top: auto !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    padding: 7px 10px !important;
    min-height: 34px !important;
    border-radius: 999px !important;
    font-size: .7rem !important;
    z-index: 760 !important;
  }

  body.is-playing .audio-card {
    top: max(44px, calc(env(safe-area-inset-top) + 44px)) !important;
    bottom: auto !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    width: clamp(190px, 27vw, 260px) !important;
    max-height: calc(100dvh - 104px) !important;
    min-height: 0 !important;
    padding: 7px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    z-index: 690 !important;
  }

  body.is-playing .audio-card .wave-orb {
    display: none !important;
  }

  body.is-playing .audio-copy h2 {
    font-size: .76rem !important;
    line-height: 1.05 !important;
    margin: 0 0 2px !important;
  }

  body.is-playing .audio-copy p {
    font-size: .62rem !important;
    line-height: 1.12 !important;
    max-height: 24px !important;
    margin: 0 0 4px !important;
    overflow: hidden !important;
  }

  body.is-playing .audio-card audio {
    height: 24px !important;
    margin: 3px 0 6px !important;
  }

  body.is-playing .actions-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
  }

  body.is-playing .actions-row .secondary-btn {
    min-height: 25px !important;
    padding: 5px 7px !important;
    border-radius: 999px !important;
    font-size: .58rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  body.is-playing .bottom-panel {
    left: 50% !important;
    right: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    width: min(470px, 54vw) !important;
    min-width: 300px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 16px !important;
    z-index: 710 !important;
  }

  body.is-playing .guess-copy span {
    font-size: .52rem !important;
    letter-spacing: .10em !important;
  }

  body.is-playing .guess-copy strong {
    font-size: .70rem !important;
    line-height: 1.15 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.is-playing #guessBtn {
    min-height: 34px !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    font-size: .70rem !important;
  }

  body.is-playing .result-modal {
    width: min(380px, 48vw) !important;
    max-height: calc(100dvh - 20px) !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    padding: 12px !important;
    border-radius: 18px !important;
    z-index: 920 !important;
  }

  body.is-playing .result-modal h2 {
    font-size: 1rem !important;
    margin-bottom: 7px !important;
  }

  body.is-playing .distance-callout {
    margin: 8px 0 !important;
    padding: 9px !important;
  }

  body.is-playing .compact-result-grid {
    gap: 7px !important;
  }

  body.is-playing .compact-result-grid div {
    padding: 8px !important;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 390px),
       (max-height: 390px) and (orientation: landscape) {
  body.is-playing .audio-card {
    width: clamp(170px, 24vw, 220px) !important;
    top: max(40px, calc(env(safe-area-inset-top) + 40px)) !important;
    padding: 6px !important;
  }
  body.is-playing .audio-copy p { display: none !important; }
  body.is-playing .bottom-panel {
    width: min(430px, 52vw) !important;
  }
  body.is-playing .top-hud .stat {
    min-width: 52px !important;
  }
}


/* v46 site controls + registration lock */
.registration-locked {
  opacity: 0.82;
}
.registration-locked input {
  cursor: not-allowed;
}
.registration-lock-note {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 196, 75, 0.28);
  background: rgba(255, 196, 75, 0.09);
  color: #ffd27a;
  font-size: 0.84rem;
  line-height: 1.35;
}
.site-controls-card {
  margin-bottom: 16px;
}
.site-control-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr) auto;
  gap: 12px;
  align-items: end;
}
.admin-switch-row {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
}
.admin-switch-row input {
  width: 22px;
  height: 22px;
  accent-color: #23d3ee;
}
.admin-switch-row span,
.site-control-message span {
  display: grid;
  gap: 2px;
}
.admin-switch-row small,
.site-control-message span {
  color: rgba(225,236,255,0.68);
  font-size: 0.78rem;
}
.site-control-message input {
  width: 100%;
  margin-top: 6px;
}
@media (max-width: 900px) {
  .site-control-row {
    grid-template-columns: 1fr;
  }
}


/* v47 PvP lobby foundation */
.pvp-dialog {
  width: min(820px, calc(100vw - 28px));
  border: 0;
  border-radius: 28px;
  padding: 0;
  background: transparent;
  color: var(--text, #eef6ff);
}

.pvp-dialog::backdrop {
  background: rgba(2, 8, 18, 0.72);
  backdrop-filter: blur(10px);
}

.pvp-dialog-card {
  border: 1px solid rgba(137, 183, 255, 0.18);
  border-radius: 28px;
  padding: 20px;
  background: linear-gradient(145deg, rgba(8, 18, 34, 0.98), rgba(13, 28, 51, 0.94));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.pvp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.pvp-panel,
.pvp-room-card {
  border: 1px solid rgba(132, 190, 255, 0.14);
  border-radius: 20px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.055);
}

.pvp-panel h3 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.pvp-status {
  margin-top: 14px;
  color: var(--muted, #aebdd3);
  font-size: 0.92rem;
}

.pvp-room-card {
  margin-top: 14px;
}

.pvp-room-head,
.pvp-room-meta,
.pvp-player-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pvp-room-head {
  justify-content: space-between;
}

.pvp-room-head span,
.pvp-room-meta span,
.pvp-player-row span,
.pvp-note {
  color: var(--muted, #aebdd3);
  font-size: 0.84rem;
}

.pvp-room-head strong {
  display: block;
  margin-top: 2px;
  font-size: 1.5rem;
  letter-spacing: 0.16em;
}

.pvp-room-meta {
  flex-wrap: wrap;
  margin: 12px 0;
}

.pvp-room-meta span {
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(255, 255, 255, 0.055);
}

.pvp-player-list {
  display: grid;
  gap: 8px;
}

.pvp-player-row {
  justify-content: flex-start;
  border-radius: 14px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.055);
}

.pvp-note {
  margin: 12px 0 0;
}

@media (max-width: 720px) {
  .pvp-dialog-card {
    padding: 14px;
    border-radius: 22px;
  }
  .pvp-grid {
    grid-template-columns: 1fr;
  }
  .pvp-room-head {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* v48 PvP gameplay alpha */
.pvp-room-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.pvp-scoreboard {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  max-height: 140px;
  overflow: auto;
}
.pvp-score-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.pvp-score-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pvp-score-row small {
  color: var(--muted, #aebdd3);
  font-size: 0.78rem;
}
.final-pvp-scoreboard {
  max-height: 260px;
}
@media (max-width: 920px) and (orientation: landscape) {
  .pvp-scoreboard {
    max-height: 96px;
  }
  .pvp-score-row {
    padding: 5px 8px;
    font-size: 0.82rem;
  }
}

/* v50 PvP HP duel polish */
.pvp-hp-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(78, 205, 196, 0.16);
  border: 1px solid rgba(78, 205, 196, 0.28);
  color: #d9fff9;
  font-weight: 800;
  white-space: nowrap;
}
.pvp-hp-scoreboard {
  max-height: 190px;
}
.pvp-hp-row {
  grid-template-columns: minmax(0, 1fr) minmax(90px, 130px) minmax(90px, auto);
}
.pvp-hp-row.is-eliminated {
  opacity: 0.55;
  filter: grayscale(0.4);
}
.pvp-hp-cell {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.pvp-hp-cell strong {
  font-size: 0.82rem;
  color: #fff;
}
.pvp-hp-bar {
  height: 7px;
  width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.pvp-hp-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6dfacb, #ffdf6d, #ff6d8d);
  box-shadow: 0 0 14px rgba(109, 250, 203, 0.35);
}
.pvp-duel-result-head .compact-note {
  margin-top: 4px;
}
@media (max-width: 920px) and (orientation: landscape) {
  .pvp-hp-scoreboard {
    max-height: 118px;
  }
  .pvp-hp-row {
    grid-template-columns: minmax(0, 1fr) 92px 92px;
  }
  .pvp-hp-cell strong {
    font-size: 0.74rem;
  }
  .pvp-hp-bar {
    height: 5px;
  }
}
@media (max-width: 560px) {
  .pvp-hp-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* v51 PvP reconnect + HP overlay polish */
.pvp-reconnect-btn {
  border-color: rgba(255, 218, 107, 0.42) !important;
  background: linear-gradient(135deg, rgba(255, 218, 107, 0.14), rgba(255, 109, 141, 0.12)) !important;
}
.pvp-hp-overlay {
  position: absolute;
  z-index: 810;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  align-items: stretch;
  justify-content: center;
  max-width: min(720px, calc(100vw - 280px));
  pointer-events: none;
}
.pvp-hp-chip {
  display: grid;
  grid-template-columns: auto minmax(70px, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 4px 8px;
  align-items: center;
  min-width: 190px;
  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid rgba(123, 214, 255, 0.24);
  background: rgba(5, 13, 27, 0.74);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(14px);
}
.pvp-hp-chip > .avatar-badge { grid-row: 1 / 3; }
.pvp-hp-chip > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
  color: #f5fbff;
}
.pvp-hp-chip > strong {
  font-size: 0.82rem;
  color: #fff0a8;
  white-space: nowrap;
}
.pvp-hp-chip .pvp-hp-bar {
  grid-column: 2 / 4;
}
.pvp-hp-chip em {
  grid-column: 2 / 4;
  font-size: 0.72rem;
  color: #ffdf6d;
  font-style: normal;
}
.pvp-hp-chip.is-disconnected {
  border-color: rgba(255, 218, 107, 0.42);
  background: rgba(40, 26, 8, 0.78);
}
.pvp-hp-chip.is-eliminated {
  opacity: 0.55;
  filter: grayscale(0.4);
}
.small-admin-note {
  margin: -4px 0 8px;
  font-size: 0.78rem;
  color: var(--muted, #aebdd3);
}
@media (max-width: 920px) and (orientation: landscape) {
  .pvp-hp-overlay {
    top: 48px;
    left: 52%;
    max-width: calc(100vw - 220px);
    gap: 5px;
  }
  .pvp-hp-chip {
    min-width: 134px;
    grid-template-columns: auto minmax(42px, 1fr) auto;
    padding: 5px 7px;
    border-radius: 12px;
    gap: 2px 5px;
  }
  .pvp-hp-chip > span { font-size: 0.72rem; }
  .pvp-hp-chip > strong { font-size: 0.68rem; }
  .pvp-hp-chip em { font-size: 0.62rem; }
  .pvp-hp-chip .avatar-badge { width: 22px; height: 22px; font-size: 0.78rem; }
}
@media (max-width: 700px) and (orientation: portrait) {
  .pvp-hp-overlay {
    top: 62px;
    max-width: calc(100vw - 24px);
    flex-direction: column;
  }
}

/* v5.2 PvP shared result map + auto-round polish */
.custom-pin.pvp-guess {
  background: #f59e0b;
  display: grid;
  place-items: center;
  color: #08111f;
  font-weight: 1000;
  font-size: 0.72rem;
  border-color: rgba(255,255,255,.96);
}
.custom-pin-wrap .custom-pin::after {
  pointer-events: none;
}
.custom-pin.pvp-guess.mine {
  background: #a78bfa;
}
.custom-pin.pvp-guess span {
  transform: rotate(45deg);
  display: block;
  line-height: 1;
}
.pvp-auto-next-note {
  text-align: center;
  margin: 10px 0 0;
  font-weight: 900;
  color: var(--accent);
}
.pvp-result-line {
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, .42));
}
@media (max-width: 920px) and (orientation: landscape) {
  .custom-pin-shell.pvp-shell {
    width: 34px;
    height: 30px;
  }
  .custom-pin-shell.pvp-shell .custom-pin.pvp-guess {
    width: 24px !important;
    height: 24px !important;
    left: 5px;
    font-size: .62rem;
    border-width: 2px;
  }
  .pvp-auto-next-note {
    font-size: .72rem;
    margin-top: 6px;
  }
}

/* v5.3 PvP map markers: mine blue, correct dark green, opponents distinct warm colors */
.custom-pin.answer {
  background: #065f46 !important;
  border-color: rgba(220, 252, 231, .98) !important;
  box-shadow: 0 0 0 4px rgba(6, 95, 70, .22), 0 12px 30px rgba(0,0,0,.42) !important;
}
.custom-pin.pvp-guess.mine {
  background: #2563eb !important;
  color: #fff !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .25), 0 12px 30px rgba(0,0,0,.42) !important;
}
.custom-pin.pvp-guess.opponent-1 { background: #f59e0b !important; color: #111827 !important; }
.custom-pin.pvp-guess.opponent-2 { background: #ef4444 !important; color: #fff !important; }
.custom-pin.pvp-guess.opponent-3 { background: #ec4899 !important; color: #fff !important; }
.custom-pin.pvp-guess.opponent-4 { background: #f97316 !important; color: #111827 !important; }
.custom-pin.pvp-guess.opponent-5 { background: #eab308 !important; color: #111827 !important; }
.pvp-result-line {
  filter: drop-shadow(0 0 8px rgba(255,255,255,.22));
}

/* v56 station quality admin polish */
.station-tools-card { overflow: hidden; }
.station-coverage-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.coverage-pill {
  border: 1px solid rgba(125, 249, 255, 0.16);
  background: rgba(5, 14, 30, 0.48);
  border-radius: 16px;
  padding: 10px 12px;
  min-width: 0;
}
.coverage-pill strong {
  display: block;
  color: rgba(255,255,255,0.96);
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coverage-pill span {
  display: block;
  color: rgba(218,232,255,0.72);
  font-size: 0.78rem;
  margin-top: 3px;
}
.danger-soft-btn {
  border-color: rgba(255, 101, 101, 0.38) !important;
  background: rgba(255, 101, 101, 0.10) !important;
  color: #ffd9d9 !important;
}
.danger-soft-btn:hover { background: rgba(255, 101, 101, 0.18) !important; }


/* v5.9.3 result pacing: keep the round result readable before continuing */
.next-round-btn.is-waiting,
.primary-btn.is-waiting {
  opacity: .72;
  cursor: wait;
  filter: saturate(.85);
}


/* v6.1 auto-round polish */
.auto-next-note {
  text-align: center;
  margin: 12px 0 0;
  font-weight: 900;
  color: var(--accent);
}
#guessBtn[hidden] {
  display: none !important;
}


/* v6.2 Shop foundation */
.shop-dialog::backdrop {
  background: rgba(3, 8, 18, .74);
  backdrop-filter: blur(12px);
}
.shop-dialog {
  border: 0;
  background: transparent;
  width: min(1060px, calc(100vw - 24px));
  max-height: min(860px, calc(100vh - 24px));
  padding: 0;
}
.shop-dialog-card {
  background: linear-gradient(145deg, rgba(11, 20, 38, .98), rgba(16, 30, 54, .96));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  padding: 20px;
  color: var(--text);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  max-height: calc(100vh - 32px);
  overflow: auto;
}
.shop-balance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
}
.shop-balance-row span {
  font-size: 1.4rem;
  font-weight: 1000;
  color: #fbbf24;
}
.shop-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 14px;
}
.shop-tabs button {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
}
.shop-tabs button.active {
  background: rgba(34, 211, 238, .18);
  border-color: rgba(34, 211, 238, .46);
}
.shop-tabs button:disabled {
  opacity: .45;
}
.shop-status {
  min-height: 22px;
  color: var(--muted);
  font-size: .92rem;
  margin: 4px 0 12px;
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.shop-item {
  position: relative;
  border-radius: 22px;
  padding: 14px;
  background: rgba(255,255,255,.065);
  border: 2px solid rgba(148, 163, 184, .36);
  box-shadow: 0 18px 45px rgba(0,0,0,.24);
  overflow: hidden;
}
.shop-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 0%, rgba(255,255,255,.16), transparent 36%);
  pointer-events: none;
}
.shop-item.rarity-basic { border-color: rgba(148, 163, 184, .7); }
.shop-item.rarity-uncommon { border-color: rgba(34, 197, 94, .75); }
.shop-item.rarity-rare { border-color: rgba(59, 130, 246, .78); }
.shop-item.rarity-epic { border-color: rgba(168, 85, 247, .9); box-shadow: 0 18px 55px rgba(168, 85, 247, .18); }
.shop-item.rarity-ultra { border-color: rgba(236, 72, 153, .9); }
.shop-item.rarity-legendary { border-color: rgba(245, 158, 11, .95); box-shadow: 0 20px 60px rgba(245, 158, 11, .22); }
.shop-item.rarity-mythic { border-color: rgba(239, 68, 68, .95); }
.shop-item.rarity-divine { border-color: rgba(45, 212, 191, .95); }
.shop-item.rarity-impossible {
  border-color: rgba(255,255,255,.8);
  background:
    linear-gradient(rgba(11,20,38,.96), rgba(11,20,38,.96)) padding-box,
    linear-gradient(135deg, #ff0080, #fbbf24, #22d3ee, #a78bfa, #ff0080) border-box;
  animation: impossibleGlow 3.5s linear infinite;
}
@keyframes impossibleGlow {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
.shop-item.equipped {
  outline: 3px solid rgba(34, 211, 238, .32);
}
.shop-item-preview {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  font-size: 2rem;
  border-radius: 18px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.12);
  margin-bottom: 10px;
}
.shop-item-body h3 {
  margin: 0;
  font-size: 1.05rem;
}
.shop-rarity {
  display: inline-block;
  margin-top: 5px;
  font-size: .72rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.shop-item-body p {
  min-height: 30px;
  margin: 8px 0 12px;
  color: var(--muted);
  font-size: .72rem;
  word-break: break-word;
}
.shop-item button {
  width: 100%;
  position: relative;
  z-index: 1;
}
@media (max-width: 700px) {
  .shop-dialog {
    width: calc(100vw - 12px);
  }
  .shop-dialog-card {
    padding: 14px;
    border-radius: 22px;
  }
  .shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
    gap: 10px;
  }
  .shop-item {
    padding: 10px;
    border-radius: 18px;
  }
  .shop-item-body p {
    display: none;
  }
}


/* v6.3 3D avatar preview + map bounds polish */
.avatar3d-view {
  min-height: 220px;
  width: 100%;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 10%, rgba(34, 211, 238, .16), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
  display: grid;
  place-items: center;
  position: relative;
}
.avatar3d-view canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.avatar3d-empty {
  color: var(--muted);
  text-align: center;
  padding: 16px;
  font-weight: 800;
  font-size: .9rem;
}
.home-profile-card-3d {
  grid-template-columns: minmax(160px, 240px) 1fr;
  align-items: stretch;
}
.home-avatar3d {
  display: grid;
  gap: 8px;
}
.home-avatar3d .avatar3d-view {
  min-height: 240px;
}
.home-avatar3d small {
  text-align: center;
  color: var(--muted);
  font-weight: 800;
}
.final-avatar3d {
  width: 150px;
  min-height: 150px;
  flex: 0 0 150px;
}
.shop-preview-row {
  display: grid;
  grid-template-columns: minmax(180px, 280px) 1fr;
  gap: 14px;
  align-items: center;
  margin: 12px 0 14px;
  padding: 12px;
  border-radius: 22px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1);
}
.shop-preview-row strong {
  display: block;
  font-size: 1.15rem;
}
.shop-preview-row span {
  color: var(--muted);
}
.shop-avatar3d {
  min-height: 240px;
}
.shop-item {
  cursor: pointer;
}
.shop-item:hover {
  transform: translateY(-1px);
}
@media (max-width: 760px) {
  .home-profile-card-3d,
  .shop-preview-row {
    grid-template-columns: 1fr;
  }
  .home-avatar3d .avatar3d-view,
  .shop-avatar3d {
    min-height: 190px;
  }
  .final-avatar3d {
    width: 120px;
    min-height: 120px;
  }
}
@media (max-width: 920px) and (orientation: landscape) {
  .home-avatar3d .avatar3d-view,
  .shop-avatar3d {
    min-height: 160px;
  }
}


/* v6.4 inventory + static 3D leaderboard */
.inventory-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}
.inventory-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.inventory-head span,
.inventory-panel > span {
  display: block;
  color: var(--muted);
  font-size: .84rem;
}
.inventory-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 8px;
}
.inventory-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 6px 8px;
  align-items: center;
  text-align: left;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, .35);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 8px;
  cursor: pointer;
}
.inventory-item span {
  grid-row: span 2;
  font-size: 1.25rem;
}
.inventory-item strong {
  font-size: .82rem;
  line-height: 1.05;
}
.inventory-item em {
  color: var(--muted);
  font-size: .72rem;
  font-style: normal;
}
.inventory-item.equipped {
  border-color: rgba(34, 211, 238, .75);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, .12) inset;
}
.inventory-item.rarity-basic { border-color: rgba(148, 163, 184, .65); }
.inventory-item.rarity-epic { border-color: rgba(168, 85, 247, .8); }
.inventory-item.rarity-legendary { border-color: rgba(245, 158, 11, .9); }
.inventory-item.remove {
  border-color: rgba(248, 113, 113, .5);
}
.leaderboard-avatar3d {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  display: grid;
  place-items: center;
}
.leaderboard-avatar3d canvas {
  width: 100% !important;
  height: 100% !important;
}
.leaderboard-avatar3d.empty {
  font-size: 1.35rem;
}
.avatar-picker {
  width: 100%;
}
@media (max-width: 700px) {
  .inventory-items {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  }
  .leaderboard-avatar3d {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
}


/* v6.5 avatar framing polish: tall monsters should show full body/horns/wings */
.home-avatar3d .avatar3d-view {
  min-height: 320px;
}
.shop-avatar3d {
  min-height: 340px;
}
.final-avatar3d {
  min-height: 190px;
}
.leaderboard-avatar3d {
  background:
    radial-gradient(circle at 50% 10%, rgba(34, 211, 238, .10), transparent 42%),
    rgba(255,255,255,.08);
}
@media (max-width: 760px) {
  .home-avatar3d .avatar3d-view,
  .shop-avatar3d {
    min-height: 240px;
  }
}
@media (max-width: 920px) and (orientation: landscape) {
  .home-avatar3d .avatar3d-view,
  .shop-avatar3d {
    min-height: 210px;
  }
}


/* v6.6 skinned model polish */
.avatar3d-view {
  isolation: isolate;
}
.avatar3d-view::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 10%;
  height: 18%;
  border-radius: 999px;
  background: radial-gradient(ellipse, rgba(0,0,0,.26), transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.avatar3d-view canvas {
  position: relative;
  z-index: 1;
}


/* v6.7 shop pages + static cards + 3D detail modal */
.shop-preview-row-compact {
  grid-template-columns: 76px 1fr;
}
.shop-preview-placeholder {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  font-size: 2rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
}
.shop-filter-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 10px;
  margin: 10px 0 12px;
}
.shop-filter-row label {
  display: grid;
  gap: 5px;
  font-size: .76rem;
  color: var(--muted);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.shop-filter-row select {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: var(--text);
  padding: 10px 12px;
  font-weight: 900;
}
.shop-item-static .static-card-preview {
  height: 108px;
  width: 100%;
  margin-bottom: 12px;
  border-radius: 18px;
  font-size: 2.7rem;
}
.static-card-preview span {
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.28));
}
.shop-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
  color: var(--muted);
  font-weight: 900;
}
.shop-detail-dialog::backdrop {
  background: rgba(3, 8, 18, .78);
  backdrop-filter: blur(14px);
}
.shop-detail-dialog {
  border: 0;
  background: transparent;
  width: min(880px, calc(100vw - 24px));
  padding: 0;
}
.shop-detail-card {
  background: linear-gradient(145deg, rgba(11, 20, 38, .99), rgba(16, 30, 54, .97));
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 28px;
  padding: 20px;
  color: var(--text);
  box-shadow: 0 30px 90px rgba(0,0,0,.48);
}
.shop-detail-layout {
  display: grid;
  grid-template-columns: minmax(280px, 1.15fr) minmax(240px, .85fr);
  gap: 16px;
  align-items: stretch;
}
.shop-detail-avatar3d {
  min-height: 420px;
}
.shop-detail-info {
  display: grid;
  align-content: start;
  gap: 10px;
}
.shop-detail-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
}
.shop-detail-meta span {
  color: var(--muted);
}
.shop-detail-meta strong {
  text-transform: uppercase;
}
.shop-detail-meta.rarity-basic strong { color: #cbd5e1; }
.shop-detail-meta.rarity-epic strong { color: #c084fc; }
.shop-detail-meta.rarity-legendary strong { color: #fbbf24; }
.shop-detail-path {
  color: var(--muted);
  font-size: .72rem;
  word-break: break-word;
}
.shop-detail-actions {
  display: grid;
  gap: 8px;
}
.shop-detail-actions button {
  width: 100%;
}
@media (max-width: 760px) {
  .shop-filter-row,
  .shop-detail-layout {
    grid-template-columns: 1fr;
  }
  .shop-detail-dialog {
    width: calc(100vw - 8px);
  }
  .shop-detail-card {
    border-radius: 22px;
    padding: 14px;
  }
  .shop-detail-avatar3d {
    min-height: min(54vh, 360px);
  }
  .shop-pager {
    gap: 8px;
    font-size: .82rem;
  }
}


/* v6.8 shop readability + fixed 3D facing direction */
.shop-item-body {
  position: relative;
  z-index: 1;
}
.shop-rarity {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  color: #e5e7eb;
}
.shop-item.rarity-basic .shop-rarity {
  color: #f8fafc;
  background: rgba(148, 163, 184, .22);
  border-color: rgba(203, 213, 225, .45);
}
.shop-item.rarity-epic .shop-rarity {
  color: #f5e8ff;
  background: rgba(168, 85, 247, .28);
  border-color: rgba(216, 180, 254, .62);
  text-shadow: 0 1px 8px rgba(168, 85, 247, .6);
}
.shop-item.rarity-legendary .shop-rarity {
  color: #fff7ed;
  background: rgba(245, 158, 11, .30);
  border-color: rgba(251, 191, 36, .72);
  text-shadow: 0 1px 8px rgba(245, 158, 11, .65);
}
.shop-filter-row label span,
.shop-detail-meta span {
  color: #cbd5e1;
}
.shop-detail-flavor {
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.45;
  margin: 2px 0 4px;
}
.static-card-preview {
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.12), transparent 46%),
    rgba(255,255,255,.07);
}
.shop-item.rarity-basic .static-card-preview { color: #cbd5e1; }
.shop-item.rarity-epic .static-card-preview { color: #c084fc; }
.shop-item.rarity-legendary .static-card-preview { color: #fbbf24; }


/* v6.9 avatar direction + menu close-up + leaderboard 3D fix */
.home-avatar3d .avatar3d-view {
  min-height: 360px;
}
.home-profile-card-3d {
  grid-template-columns: minmax(220px, 310px) 1fr;
}
.leaderboard-avatar3d.empty {
  color: #cbd5e1;
  background: rgba(255,255,255,.08);
}
@media (max-width: 760px) {
  .home-profile-card-3d {
    grid-template-columns: 1fr;
  }
  .home-avatar3d .avatar3d-view {
    min-height: 260px;
  }
}


/* v7.0 singleplayer avatar companion */
.game-avatar-shell {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: 10px;
  margin: 10px 0 12px;
  padding: 8px;
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.game-avatar-shell.hidden {
  display: none !important;
}
.game-avatar3d {
  min-height: 110px;
  height: 110px;
  border-radius: 18px;
}
.game-avatar-shell span {
  color: #dbeafe;
  font-weight: 900;
  line-height: 1.25;
}
.game-avatar-shell .avatar3d-empty {
  font-size: .72rem;
  padding: 8px;
}
@media (max-width: 920px) and (orientation: landscape) {
  .game-avatar-shell {
    grid-template-columns: 74px 1fr;
    gap: 8px;
    margin: 7px 0 8px;
    padding: 6px;
    border-radius: 16px;
  }
  .game-avatar3d {
    min-height: 76px;
    height: 76px;
    border-radius: 14px;
  }
  .game-avatar-shell span {
    font-size: .78rem;
  }
}
@media (max-width: 700px) and (orientation: portrait) {
  .game-avatar-shell {
    display: none !important;
  }
}


/* v7.0.1 frameless avatars in menu + singleplayer */
.home-avatar3d .avatar3d-view,
.game-avatar3d {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.home-avatar3d .avatar3d-view::after,
.game-avatar3d::after {
  display: none !important;
}
.home-avatar3d {
  align-content: center;
}
.home-avatar3d small {
  margin-top: -18px;
}
.game-avatar-shell {
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.07);
}
.game-avatar-shell .avatar3d-view {
  min-height: 122px;
  height: 122px;
}
@media (max-width: 920px) and (orientation: landscape) {
  .game-avatar-shell .avatar3d-view {
    min-height: 86px;
    height: 86px;
  }
}


/* v7.0.2 detached singleplayer avatar companion */
.game-screen {
  position: relative;
}
.game-avatar-shell {
  position: absolute;
  left: clamp(18px, 4vw, 56px);
  top: clamp(92px, 13vh, 138px);
  width: min(310px, 28vw);
  min-height: 230px;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, .9fr);
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none;
  z-index: 430;
}
.game-avatar-shell.hidden {
  display: none !important;
}
.game-avatar3d {
  min-height: 230px !important;
  height: 230px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.game-avatar3d::after {
  display: none !important;
}
.game-avatar-bubble {
  position: relative;
  align-self: start;
  margin-top: 34px;
  padding: 10px 12px;
  border-radius: 18px 18px 18px 6px;
  background: rgba(12, 24, 44, .82);
  border: 1px solid rgba(125, 211, 252, .22);
  color: #e0f2fe;
  font-weight: 950;
  line-height: 1.22;
  font-size: .88rem;
  box-shadow: 0 14px 38px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}
.game-avatar-bubble::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 22px;
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
  background: rgba(12, 24, 44, .82);
  border-left: 1px solid rgba(125, 211, 252, .22);
  border-bottom: 1px solid rgba(125, 211, 252, .22);
}
@media (min-width: 1180px) {
  .audio-card {
    margin-top: 190px;
  }
}
@media (max-width: 1179px) and (min-width: 761px) {
  .game-avatar-shell {
    top: 94px;
    left: 18px;
    width: 250px;
    min-height: 180px;
    grid-template-columns: 120px 1fr;
  }
  .game-avatar3d {
    min-height: 180px !important;
    height: 180px !important;
  }
  .game-avatar-bubble {
    margin-top: 20px;
    font-size: .78rem;
    padding: 8px 10px;
  }
  .audio-card {
    margin-top: 150px;
  }
}
@media (max-width: 920px) and (orientation: landscape) {
  .game-avatar-shell {
    top: auto;
    left: 92px;
    bottom: 94px;
    width: 220px;
    min-height: 120px;
    grid-template-columns: 78px 1fr;
  }
  .game-avatar3d {
    min-height: 118px !important;
    height: 118px !important;
  }
  .game-avatar-bubble {
    margin-top: 16px;
    font-size: .72rem;
    padding: 7px 9px;
    border-radius: 14px 14px 14px 5px;
  }
}
@media (max-width: 700px) and (orientation: portrait) {
  .game-avatar-shell {
    display: none !important;
  }
}


/* v7.0.3 avatar placement polish */
@media (min-width: 921px) {
  .game-avatar-shell {
    left: 18px !important;
    top: auto !important;
    bottom: 300px !important;
    width: 390px !important;
    min-height: 235px !important;
    grid-template-columns: 210px 1fr !important;
    gap: 8px !important;
    z-index: 610 !important;
  }
  .game-avatar3d {
    min-height: 245px !important;
    height: 245px !important;
  }
  .game-avatar-bubble {
    margin-top: 58px !important;
    font-size: .9rem !important;
    max-width: 160px;
  }
  .audio-card {
    margin-top: 0 !important;
  }
}

@media (min-width: 1180px) {
  .game-avatar-shell {
    bottom: 302px !important;
  }
}

@media (max-width: 920px) and (orientation: landscape) {
  .audio-card {
    top: max(7px, env(safe-area-inset-top)) !important;
    bottom: auto !important;
    left: max(7px, env(safe-area-inset-left)) !important;
    width: 210px !important;
    padding: 8px !important;
    border-radius: 16px !important;
    z-index: 620 !important;
  }
  .audio-copy h2 {
    font-size: .88rem !important;
  }
  .audio-copy p {
    font-size: .68rem !important;
    max-height: 30px !important;
  }
  .audio-card audio {
    height: 24px !important;
    margin: 3px 0 5px !important;
  }
  .audio-card .actions-row .secondary-btn {
    padding: 5px 6px !important;
    font-size: .62rem !important;
  }
  .top-hud {
    top: 7px !important;
    left: 225px !important;
    right: 8px !important;
    grid-template-columns: auto repeat(3, auto) !important;
    justify-content: end !important;
    gap: 5px !important;
  }
  .logo-lockup {
    position: fixed !important;
    top: 84px !important;
    left: max(7px, env(safe-area-inset-left)) !important;
    width: 210px !important;
    z-index: 625 !important;
    padding: 6px 8px !important;
    border-radius: 14px !important;
  }
  .logo-lockup strong {
    font-size: .78rem !important;
  }
  .logo-dot {
    width: 19px !important;
    height: 19px !important;
  }
  .game-avatar-shell {
    top: 50px !important;
    bottom: auto !important;
    left: 218px !important;
    width: min(300px, calc(100vw - 226px)) !important;
    min-height: 132px !important;
    grid-template-columns: 92px minmax(92px, 1fr) !important;
    gap: 5px !important;
    z-index: 615 !important;
  }
  .game-avatar3d {
    min-height: 136px !important;
    height: 136px !important;
  }
  .game-avatar-bubble {
    margin-top: 24px !important;
    font-size: .68rem !important;
    padding: 7px 9px !important;
    line-height: 1.15 !important;
    border-radius: 13px 13px 13px 5px !important;
  }
  .game-avatar-bubble::before {
    left: -7px !important;
    top: 20px !important;
    width: 12px !important;
    height: 12px !important;
  }
}

@media (max-width: 700px) and (orientation: portrait) {
  .orientation-card strong::after {
    content: " ⛶";
  }
}


/* v7.0.4 phone landscape layout fix */
@media (max-width: 1180px) and (orientation: landscape) {
  .audio-card {
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    bottom: auto !important;
    width: 242px !important;
    max-width: 242px !important;
    padding: 8px !important;
    border-radius: 16px !important;
    z-index: 650 !important;
  }

  .audio-copy h2 {
    font-size: .92rem !important;
    line-height: 1.05 !important;
  }

  .audio-copy p {
    display: none !important;
  }

  .audio-card audio {
    height: 26px !important;
    margin: 5px 0 6px !important;
  }

  .audio-card .actions-row {
    gap: 6px !important;
  }

  .audio-card .actions-row .secondary-btn {
    padding: 6px 7px !important;
    font-size: .64rem !important;
    min-height: 30px !important;
  }

  .logo-lockup {
    position: fixed !important;
    top: 142px !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    width: 242px !important;
    max-width: 242px !important;
    z-index: 650 !important;
    padding: 7px 9px !important;
    border-radius: 16px !important;
  }

  .logo-lockup strong {
    font-size: .84rem !important;
  }

  .logo-dot {
    width: 21px !important;
    height: 21px !important;
  }

  .game-avatar-shell {
    position: fixed !important;
    top: max(18px, env(safe-area-inset-top)) !important;
    left: calc(max(8px, env(safe-area-inset-left)) + 252px) !important;
    bottom: auto !important;
    width: 250px !important;
    max-width: calc(100vw - 512px) !important;
    min-width: 210px !important;
    min-height: 112px !important;
    grid-template-columns: 82px minmax(110px, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;
    z-index: 645 !important;
    pointer-events: none !important;
  }

  .game-avatar3d {
    min-height: 112px !important;
    height: 112px !important;
  }

  .game-avatar-bubble {
    margin-top: 0 !important;
    align-self: center !important;
    max-width: 142px !important;
    padding: 7px 9px !important;
    font-size: .68rem !important;
    line-height: 1.12 !important;
    border-radius: 13px 13px 13px 5px !important;
  }

  .game-avatar-bubble::before {
    left: -7px !important;
    top: 50% !important;
    width: 12px !important;
    height: 12px !important;
    transform: translateY(-50%) rotate(45deg) !important;
  }

  .top-hud {
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    left: 512px !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    grid-template-columns: repeat(3, auto) !important;
    justify-content: end !important;
    gap: 6px !important;
    z-index: 640 !important;
  }

  .top-hud .mode-badge,
  .top-hud .logo-lockup {
    display: none !important;
  }
}

@media (max-width: 980px) and (orientation: landscape) {
  .audio-card {
    width: 220px !important;
    max-width: 220px !important;
  }

  .logo-lockup {
    top: 134px !important;
    width: 220px !important;
    max-width: 220px !important;
  }

  .game-avatar-shell {
    left: calc(max(8px, env(safe-area-inset-left)) + 228px) !important;
    width: 210px !important;
    min-width: 190px !important;
    max-width: calc(100vw - 450px) !important;
    grid-template-columns: 72px minmax(98px, 1fr) !important;
  }

  .game-avatar3d {
    min-height: 98px !important;
    height: 98px !important;
  }

  .game-avatar-bubble {
    max-width: 126px !important;
    font-size: .64rem !important;
    padding: 6px 8px !important;
  }

  .top-hud {
    left: 450px !important;
  }
}

@media (max-width: 780px) and (orientation: landscape) {
  .game-avatar-bubble {
    display: none !important;
  }

  .game-avatar-shell {
    width: 82px !important;
    min-width: 82px !important;
    grid-template-columns: 82px !important;
    left: calc(max(8px, env(safe-area-inset-left)) + 228px) !important;
    max-width: 82px !important;
  }

  .top-hud {
    left: 322px !important;
  }
}


/* v7.0.5 phone landscape stack: signal -> logo -> avatar */
@media (orientation: landscape) and (max-height: 620px) {
  .game-screen .audio-card {
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: auto !important;
    bottom: auto !important;
    width: 250px !important;
    max-width: 250px !important;
    min-width: 0 !important;
    padding: 8px !important;
    border-radius: 16px !important;
    z-index: 760 !important;
    transform: none !important;
  }

  .game-screen .audio-card .wave-orb {
    display: none !important;
  }

  .game-screen .audio-copy h2 {
    font-size: .94rem !important;
    line-height: 1.05 !important;
    margin: 0 0 6px !important;
  }

  .game-screen .audio-copy p {
    display: none !important;
  }

  .game-screen .audio-card audio {
    height: 27px !important;
    margin: 4px 0 6px !important;
  }

  .game-screen .audio-card .actions-row {
    gap: 6px !important;
  }

  .game-screen .audio-card .actions-row .secondary-btn {
    min-height: 30px !important;
    padding: 6px 7px !important;
    font-size: .64rem !important;
    border-radius: 13px !important;
  }

  .game-screen .logo-lockup {
    position: fixed !important;
    top: calc(max(8px, env(safe-area-inset-top)) + 132px) !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: auto !important;
    bottom: auto !important;
    width: 250px !important;
    max-width: 250px !important;
    min-width: 0 !important;
    z-index: 755 !important;
    padding: 7px 9px !important;
    border-radius: 16px !important;
    transform: none !important;
  }

  .game-screen .logo-lockup strong {
    font-size: .84rem !important;
  }

  .game-screen .logo-dot {
    width: 21px !important;
    height: 21px !important;
  }

  .game-screen .game-avatar-shell {
    position: fixed !important;
    top: calc(max(8px, env(safe-area-inset-top)) + 184px) !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: auto !important;
    bottom: auto !important;
    width: 250px !important;
    max-width: 250px !important;
    min-width: 0 !important;
    min-height: 118px !important;
    grid-template-columns: 92px 1fr !important;
    align-items: center !important;
    gap: 7px !important;
    z-index: 750 !important;
    transform: none !important;
    pointer-events: none !important;
  }

  .game-screen .game-avatar3d {
    min-height: 120px !important;
    height: 120px !important;
    width: 92px !important;
  }

  .game-screen .game-avatar-bubble {
    display: block !important;
    margin-top: 0 !important;
    align-self: center !important;
    max-width: 138px !important;
    padding: 7px 9px !important;
    font-size: .66rem !important;
    line-height: 1.12 !important;
    border-radius: 13px 13px 13px 5px !important;
  }

  .game-screen .game-avatar-bubble::before {
    left: -7px !important;
    top: 50% !important;
    width: 12px !important;
    height: 12px !important;
    transform: translateY(-50%) rotate(45deg) !important;
  }

  .game-screen .top-hud {
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    left: 310px !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    grid-template-columns: repeat(3, auto) !important;
    justify-content: end !important;
    gap: 6px !important;
    z-index: 740 !important;
  }

  .game-screen .top-hud .mode-badge,
  .game-screen .top-hud .logo-lockup {
    display: none !important;
  }
}

@media (orientation: landscape) and (max-height: 620px) and (max-width: 820px) {
  .game-screen .audio-card,
  .game-screen .logo-lockup,
  .game-screen .game-avatar-shell {
    width: 226px !important;
    max-width: 226px !important;
  }

  .game-screen .logo-lockup {
    top: calc(max(8px, env(safe-area-inset-top)) + 126px) !important;
  }

  .game-screen .game-avatar-shell {
    top: calc(max(8px, env(safe-area-inset-top)) + 174px) !important;
    grid-template-columns: 78px 1fr !important;
    min-height: 98px !important;
  }

  .game-screen .game-avatar3d {
    min-height: 98px !important;
    height: 98px !important;
    width: 78px !important;
  }

  .game-screen .game-avatar-bubble {
    max-width: 132px !important;
    font-size: .62rem !important;
    padding: 6px 8px !important;
  }

  .game-screen .top-hud {
    left: 250px !important;
  }
}


/* v7.0.6 final phone stack + desktop lower-left signal placement */

/* Desktop: keep the signal stack together and move it further left/down. */
@media (min-width: 981px) and (min-height: 621px) {
  body.is-playing .audio-card {
    left: 12px !important;
    bottom: 68px !important;
  }

  body.is-playing .game-avatar-shell {
    left: 12px !important;
    bottom: 254px !important;
    top: auto !important;
  }
}

/* Phone landscape: strict left stack. No avatar/bubble over the audio buttons. */
@media (orientation: landscape) and (max-height: 620px) {
  body.is-playing .audio-card {
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: auto !important;
    bottom: auto !important;
    width: 242px !important;
    max-width: 242px !important;
    min-width: 0 !important;
    padding: 8px !important;
    border-radius: 16px !important;
    z-index: 760 !important;
    transform: none !important;
  }

  body.is-playing .audio-card .wave-orb {
    display: none !important;
  }

  body.is-playing .audio-copy h2 {
    font-size: .94rem !important;
    line-height: 1.05 !important;
    margin: 0 0 6px !important;
  }

  body.is-playing .audio-copy p {
    display: none !important;
  }

  body.is-playing .audio-card audio {
    height: 27px !important;
    margin: 4px 0 6px !important;
  }

  body.is-playing .audio-card .actions-row {
    gap: 6px !important;
  }

  body.is-playing .audio-card .actions-row .secondary-btn {
    min-height: 30px !important;
    padding: 6px 7px !important;
    font-size: .64rem !important;
    border-radius: 13px !important;
  }

  body.is-playing .logo-lockup {
    position: fixed !important;
    top: calc(max(8px, env(safe-area-inset-top)) + 128px) !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: auto !important;
    bottom: auto !important;
    width: 242px !important;
    max-width: 242px !important;
    min-width: 0 !important;
    z-index: 755 !important;
    padding: 7px 9px !important;
    border-radius: 16px !important;
    transform: none !important;
  }

  body.is-playing .logo-lockup strong {
    font-size: .84rem !important;
  }

  body.is-playing .logo-dot {
    width: 21px !important;
    height: 21px !important;
  }

  body.is-playing .game-avatar-shell {
    position: fixed !important;
    top: calc(max(8px, env(safe-area-inset-top)) + 176px) !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: auto !important;
    bottom: auto !important;
    width: 242px !important;
    max-width: 242px !important;
    min-width: 0 !important;
    min-height: 94px !important;
    grid-template-columns: 74px 1fr !important;
    align-items: center !important;
    gap: 6px !important;
    z-index: 750 !important;
    transform: none !important;
    pointer-events: none !important;
  }

  body.is-playing .game-avatar3d {
    min-height: 92px !important;
    height: 92px !important;
    width: 74px !important;
  }

  body.is-playing .game-avatar-bubble {
    display: block !important;
    margin-top: 0 !important;
    align-self: center !important;
    max-width: 154px !important;
    padding: 7px 9px !important;
    font-size: .66rem !important;
    line-height: 1.12 !important;
    border-radius: 13px 13px 13px 5px !important;
  }

  body.is-playing .game-avatar-bubble::before {
    left: -7px !important;
    top: 50% !important;
    width: 12px !important;
    height: 12px !important;
    transform: translateY(-50%) rotate(45deg) !important;
  }

  body.is-playing .top-hud {
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    left: 278px !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    grid-template-columns: repeat(3, auto) !important;
    justify-content: end !important;
    gap: 6px !important;
    z-index: 740 !important;
  }

  body.is-playing .top-hud .mode-badge,
  body.is-playing .top-hud .logo-lockup {
    display: none !important;
  }
}

@media (orientation: landscape) and (max-height: 620px) and (max-width: 820px) {
  body.is-playing .audio-card,
  body.is-playing .logo-lockup,
  body.is-playing .game-avatar-shell {
    width: 218px !important;
    max-width: 218px !important;
  }

  body.is-playing .logo-lockup {
    top: calc(max(8px, env(safe-area-inset-top)) + 124px) !important;
  }

  body.is-playing .game-avatar-shell {
    top: calc(max(8px, env(safe-area-inset-top)) + 168px) !important;
    grid-template-columns: 66px 1fr !important;
    min-height: 82px !important;
  }

  body.is-playing .game-avatar3d {
    min-height: 82px !important;
    height: 82px !important;
    width: 66px !important;
  }

  body.is-playing .game-avatar-bubble {
    max-width: 140px !important;
    font-size: .61rem !important;
    padding: 6px 8px !important;
  }

  body.is-playing .top-hud {
    left: 238px !important;
  }
}


/* v7.0.7 real mobile landscape rebuild
   Previous phone rules used max-height; some phones report ~800px height in landscape,
   so the desktop layout leaked through. This targets touch landscape directly. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  body.is-playing .game-screen {
    --mobile-left: max(8px, env(safe-area-inset-left));
    --mobile-top: max(8px, env(safe-area-inset-top));
    --mobile-card-w: clamp(210px, 27vw, 250px);
  }

  body.is-playing .audio-card {
    position: fixed !important;
    top: var(--mobile-top) !important;
    left: var(--mobile-left) !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: var(--mobile-card-w) !important;
    max-width: var(--mobile-card-w) !important;
    min-width: 0 !important;
    padding: 8px !important;
    border-radius: 16px !important;
    z-index: 820 !important;
  }

  body.is-playing .audio-card .wave-orb {
    display: none !important;
  }

  body.is-playing .audio-copy h2 {
    font-size: .92rem !important;
    line-height: 1.05 !important;
    margin: 0 0 6px !important;
  }

  body.is-playing .audio-copy p {
    display: none !important;
  }

  body.is-playing .audio-card audio {
    height: 26px !important;
    margin: 4px 0 6px !important;
  }

  body.is-playing .audio-card .actions-row {
    gap: 6px !important;
  }

  body.is-playing .audio-card .actions-row .secondary-btn {
    min-height: 30px !important;
    padding: 6px 7px !important;
    border-radius: 13px !important;
    font-size: .62rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  body.is-playing .logo-lockup {
    position: fixed !important;
    top: calc(var(--mobile-top) + 132px) !important;
    left: var(--mobile-left) !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: var(--mobile-card-w) !important;
    max-width: var(--mobile-card-w) !important;
    min-width: 0 !important;
    padding: 7px 9px !important;
    border-radius: 15px !important;
    z-index: 815 !important;
  }

  body.is-playing .logo-lockup strong {
    font-size: .82rem !important;
  }

  body.is-playing .logo-lockup small {
    display: none !important;
  }

  body.is-playing .logo-dot {
    width: 20px !important;
    height: 20px !important;
    box-shadow: 0 0 0 5px rgba(34, 211, 238, .10) !important;
  }

  body.is-playing .game-avatar-shell {
    position: fixed !important;
    top: calc(var(--mobile-top) + 176px) !important;
    left: var(--mobile-left) !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: var(--mobile-card-w) !important;
    max-width: var(--mobile-card-w) !important;
    min-width: 0 !important;
    min-height: 88px !important;
    display: grid !important;
    grid-template-columns: 68px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 810 !important;
    pointer-events: none !important;
  }

  body.is-playing .game-avatar-shell.hidden {
    display: none !important;
  }

  body.is-playing .game-avatar3d {
    min-height: 88px !important;
    height: 88px !important;
    width: 68px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.is-playing .game-avatar3d::after {
    display: none !important;
  }

  body.is-playing .game-avatar-bubble {
    display: block !important;
    align-self: center !important;
    margin: 0 !important;
    max-width: none !important;
    padding: 7px 9px !important;
    font-size: .62rem !important;
    line-height: 1.12 !important;
    border-radius: 13px 13px 13px 5px !important;
    background: rgba(12, 24, 44, .84) !important;
    border: 1px solid rgba(125, 211, 252, .22) !important;
  }

  body.is-playing .game-avatar-bubble::before {
    left: -7px !important;
    top: 50% !important;
    width: 12px !important;
    height: 12px !important;
    transform: translateY(-50%) rotate(45deg) !important;
  }

  body.is-playing .top-hud {
    position: fixed !important;
    top: var(--mobile-top) !important;
    left: calc(var(--mobile-left) + var(--mobile-card-w) + 10px) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    display: grid !important;
    grid-template-columns: repeat(3, auto) !important;
    justify-content: end !important;
    align-items: start !important;
    gap: 6px !important;
    z-index: 800 !important;
  }

  body.is-playing .top-hud .mode-badge,
  body.is-playing .top-hud .logo-lockup {
    display: none !important;
  }

  body.is-playing .top-hud .stat {
    min-width: 58px !important;
    padding: 7px 9px !important;
    border-radius: 14px !important;
  }

  body.is-playing .top-hud .stat span {
    font-size: .58rem !important;
  }

  body.is-playing .top-hud .stat strong {
    font-size: .94rem !important;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 820px) {
  body.is-playing .game-screen {
    --mobile-card-w: 218px;
  }

  body.is-playing .game-avatar-shell {
    top: calc(var(--mobile-top) + 168px) !important;
    grid-template-columns: 60px minmax(0, 1fr) !important;
    min-height: 76px !important;
  }

  body.is-playing .game-avatar3d {
    min-height: 76px !important;
    height: 76px !important;
    width: 60px !important;
  }

  body.is-playing .game-avatar-bubble {
    font-size: .58rem !important;
    padding: 6px 8px !important;
  }
}


/* v7.0.10 phone landscape hard split
   Desktop remains the default. These rules only activate when app.js marks a real phone in landscape. */
body.rq-phone-landscape.is-playing {
  --rq-phone-top: max(8px, env(safe-area-inset-top));
  --rq-phone-right: max(8px, env(safe-area-inset-right));
  --rq-phone-bottom: max(8px, env(safe-area-inset-bottom));
  --rq-phone-left: max(8px, env(safe-area-inset-left));
  --rq-phone-left-card: clamp(190px, 25vw, 238px);
}

body.rq-phone-landscape.is-playing .map {
  inset: 0 !important;
}

body.rq-phone-landscape.is-playing .orientation-lock {
  display: none !important;
}

body.rq-phone-landscape.is-playing .top-hud {
  position: fixed !important;
  top: var(--rq-phone-top) !important;
  left: calc(var(--rq-phone-left) + var(--rq-phone-left-card) + 12px) !important;
  right: var(--rq-phone-right) !important;
  width: auto !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(54px, auto)) !important;
  justify-content: end !important;
  align-items: start !important;
  gap: 6px !important;
  padding: 0 !important;
  transform: none !important;
  pointer-events: none !important;
  z-index: 950 !important;
}

body.rq-phone-landscape.is-playing .top-hud .logo-lockup,
body.rq-phone-landscape.is-playing .top-hud .mode-badge {
  display: none !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat {
  min-width: 54px !important;
  padding: 7px 9px !important;
  border-radius: 14px !important;
  text-align: center !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat span {
  font-size: .56rem !important;
  letter-spacing: .16em !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat strong {
  font-size: .92rem !important;
  line-height: 1 !important;
}

body.rq-phone-landscape.is-playing .audio-card {
  position: fixed !important;
  top: var(--rq-phone-top) !important;
  left: var(--rq-phone-left) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--rq-phone-left-card) !important;
  max-width: var(--rq-phone-left-card) !important;
  min-width: 0 !important;
  max-height: calc(100dvh - var(--rq-phone-top) - var(--rq-phone-bottom) - 96px) !important;
  padding: 9px !important;
  border-radius: 16px !important;
  transform: none !important;
  overflow: hidden !important;
  z-index: 960 !important;
}

body.rq-phone-landscape.is-playing .audio-card .wave-orb,
body.rq-phone-landscape.is-playing .audio-copy p {
  display: none !important;
}

body.rq-phone-landscape.is-playing .audio-copy h2 {
  margin: 0 0 7px !important;
  font-size: .94rem !important;
  line-height: 1.05 !important;
}

body.rq-phone-landscape.is-playing .audio-card audio {
  display: block !important;
  width: 100% !important;
  height: 28px !important;
  margin: 0 0 7px !important;
}

body.rq-phone-landscape.is-playing .audio-card .actions-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}

body.rq-phone-landscape.is-playing .audio-card .actions-row .secondary-btn {
  min-height: 30px !important;
  padding: 6px 5px !important;
  border-radius: 13px !important;
  font-size: .58rem !important;
  line-height: 1.05 !important;
  white-space: normal !important;
}

body.rq-phone-landscape.is-playing .game-avatar-shell {
  position: fixed !important;
  top: calc(var(--rq-phone-top) + 126px) !important;
  left: var(--rq-phone-left) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--rq-phone-left-card) !important;
  max-width: var(--rq-phone-left-card) !important;
  min-width: 0 !important;
  min-height: 86px !important;
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  pointer-events: none !important;
  z-index: 970 !important;
}

body.rq-phone-landscape.is-playing .game-avatar-shell.hidden {
  display: none !important;
}

body.rq-phone-landscape.is-playing .game-avatar3d {
  width: 62px !important;
  height: 86px !important;
  min-height: 86px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.rq-phone-landscape.is-playing .game-avatar3d::after {
  display: none !important;
}

body.rq-phone-landscape.is-playing .game-avatar-bubble {
  display: block !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 7px 9px !important;
  border-radius: 13px 13px 13px 5px !important;
  font-size: .58rem !important;
  line-height: 1.12 !important;
}

body.rq-phone-landscape.is-playing .bottom-panel {
  position: fixed !important;
  left: var(--rq-phone-left) !important;
  right: max(72px, calc(env(safe-area-inset-right) + 70px)) !important;
  bottom: var(--rq-phone-bottom) !important;
  width: auto !important;
  max-width: none !important;
  min-height: 42px !important;
  padding: 8px 10px !important;
  border-radius: 16px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  transform: none !important;
  z-index: 940 !important;
}

body.rq-phone-landscape.is-playing .bottom-panel .guess-copy span {
  font-size: .55rem !important;
  letter-spacing: .14em !important;
}

body.rq-phone-landscape.is-playing .bottom-panel .guess-copy strong {
  font-size: .82rem !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.rq-phone-landscape.is-playing .bottom-panel .primary-btn {
  min-height: 32px !important;
  padding: 7px 10px !important;
  border-radius: 13px !important;
  font-size: .64rem !important;
  white-space: nowrap !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .audio-card,
body.rq-phone-landscape.showing-round-result.is-playing .bottom-panel,
body.rq-phone-landscape.showing-round-result.is-playing .game-avatar-shell,
body.rq-phone-landscape.showing-round-result.is-playing .map-style-btn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .top-hud {
  left: var(--rq-phone-left) !important;
  right: var(--rq-phone-right) !important;
  z-index: 980 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(430px, calc(100vw - 24px)) !important;
  max-width: min(430px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
  padding: 12px !important;
  border-radius: 18px !important;
  transform: translate(-50%, -50%) !important;
  overflow: auto !important;
  z-index: 990 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal h2 {
  margin: 0 !important;
  font-size: .98rem !important;
  line-height: 1.1 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-header {
  gap: 8px !important;
  align-items: start !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .round-points {
  min-width: 92px !important;
  padding: 8px 10px !important;
  border-radius: 14px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .round-points span {
  font-size: .54rem !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .round-points strong {
  font-size: .95rem !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid {
  gap: 8px !important;
  margin: 10px 0 12px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid > div {
  padding: 8px 10px !important;
  border-radius: 15px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid span {
  font-size: .55rem !important;
  letter-spacing: .14em !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid strong {
  font-size: .82rem !important;
  line-height: 1.05 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal .primary-btn,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal .secondary-btn {
  min-height: 32px !important;
  padding: 8px 10px !important;
  border-radius: 13px !important;
  font-size: .68rem !important;
}

@media (max-width: 740px) and (orientation: landscape) {
  body.rq-phone-landscape.is-playing {
    --rq-phone-left-card: 188px;
  }

  body.rq-phone-landscape.is-playing .audio-copy h2 {
    font-size: .82rem !important;
  }

  body.rq-phone-landscape.is-playing .audio-card audio {
    height: 24px !important;
  }

  body.rq-phone-landscape.is-playing .audio-card .actions-row .secondary-btn {
    min-height: 26px !important;
    font-size: .52rem !important;
  }

  body.rq-phone-landscape.is-playing .game-avatar-shell {
    top: calc(var(--rq-phone-top) + 112px) !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
  }

  body.rq-phone-landscape.is-playing .game-avatar3d {
    width: 52px !important;
    height: 72px !important;
    min-height: 72px !important;
  }

  body.rq-phone-landscape.is-playing .game-avatar-bubble {
    font-size: .52rem !important;
  }
}


/* v7.0.11 phone landscape composition patch
   Desktop stays untouched. This only runs when app.js marks a real phone in landscape. */
body.rq-phone-landscape.is-playing {
  --rq-phone-top: max(0px, env(safe-area-inset-top));
  --rq-phone-right: max(8px, env(safe-area-inset-right));
  --rq-phone-bottom: max(8px, env(safe-area-inset-bottom));
  --rq-phone-left: max(0px, env(safe-area-inset-left));
  --rq-phone-left-card: clamp(276px, 25vw, 318px);
  --rq-phone-audio-h: 154px;
  --rq-phone-avatar-w: clamp(188px, 18vw, 224px);
  --rq-phone-avatar-h: clamp(142px, 27vh, 184px);
}

body.rq-phone-landscape.is-playing .audio-card {
  top: var(--rq-phone-top) !important;
  left: var(--rq-phone-left) !important;
  width: var(--rq-phone-left-card) !important;
  max-width: var(--rq-phone-left-card) !important;
  min-height: 0 !important;
  max-height: var(--rq-phone-audio-h) !important;
  padding: 9px 10px !important;
  border-radius: 0 16px 16px 0 !important;
  overflow: hidden !important;
  z-index: 960 !important;
}

body.rq-phone-landscape.is-playing .audio-card .wave-orb,
body.rq-phone-landscape.is-playing .audio-copy p {
  display: none !important;
}

body.rq-phone-landscape.is-playing .audio-copy,
body.rq-phone-landscape.is-playing .audio-copy h2 {
  width: 100% !important;
  max-width: 100% !important;
}

body.rq-phone-landscape.is-playing .audio-copy h2 {
  margin: 0 0 7px !important;
  font-size: .92rem !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.rq-phone-landscape.is-playing .audio-card audio {
  height: 28px !important;
  margin: 0 0 7px !important;
}

body.rq-phone-landscape.is-playing .audio-card .actions-row .secondary-btn {
  min-height: 31px !important;
  padding: 6px 7px !important;
  font-size: .61rem !important;
}

/* Keep the three round/score/time cards in the top-right, but detach the PC brand card
   and place it under the radio player on phones. */
body.rq-phone-landscape.is-playing .top-hud {
  position: fixed !important;
  top: max(8px, env(safe-area-inset-top)) !important;
  left: auto !important;
  right: var(--rq-phone-right) !important;
  width: auto !important;
  max-width: calc(100vw - var(--rq-phone-left-card) - 20px) !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(58px, auto)) !important;
  justify-content: end !important;
  align-items: start !important;
  gap: 6px !important;
  padding: 0 !important;
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
  z-index: 950 !important;
}

body.rq-phone-landscape.is-playing .top-hud .logo-lockup {
  display: flex !important;
  position: fixed !important;
  top: calc(var(--rq-phone-top) + var(--rq-phone-audio-h) + 8px) !important;
  left: var(--rq-phone-left) !important;
  width: var(--rq-phone-left-card) !important;
  max-width: var(--rq-phone-left-card) !important;
  min-width: 0 !important;
  padding: 9px 11px !important;
  border-radius: 0 16px 16px 0 !important;
  gap: 9px !important;
  background: rgba(15, 23, 42, .86) !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .18) !important;
  pointer-events: none !important;
  z-index: 955 !important;
}

body.rq-phone-landscape.is-playing .top-hud .logo-lockup strong {
  font-size: .9rem !important;
  line-height: 1 !important;
}

body.rq-phone-landscape.is-playing .top-hud .logo-lockup small {
  display: block !important;
  font-size: .58rem !important;
  line-height: 1.05 !important;
  letter-spacing: .1em !important;
}

body.rq-phone-landscape.is-playing .top-hud .mode-badge {
  display: block !important;
  position: fixed !important;
  top: calc(var(--rq-phone-top) + var(--rq-phone-audio-h) + 62px) !important;
  left: var(--rq-phone-left) !important;
  width: var(--rq-phone-left-card) !important;
  max-width: var(--rq-phone-left-card) !important;
  min-width: 0 !important;
  padding: 7px 11px !important;
  border-radius: 0 14px 14px 0 !important;
  background: rgba(15, 23, 42, .78) !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  pointer-events: none !important;
  z-index: 954 !important;
}

body.rq-phone-landscape.is-playing .top-hud .mode-badge span {
  display: block !important;
  font-size: .55rem !important;
  letter-spacing: .12em !important;
}

body.rq-phone-landscape.is-playing .top-hud .mode-badge strong {
  display: none !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat {
  min-width: 58px !important;
  padding: 7px 9px !important;
  border-radius: 14px !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat span {
  font-size: .55rem !important;
  letter-spacing: .16em !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat strong {
  font-size: .92rem !important;
}

body.rq-phone-landscape.is-playing .game-avatar-shell {
  position: fixed !important;
  left: max(6px, env(safe-area-inset-left)) !important;
  bottom: max(8px, env(safe-area-inset-bottom)) !important;
  top: auto !important;
  right: auto !important;
  width: var(--rq-phone-avatar-w) !important;
  max-width: var(--rq-phone-avatar-w) !important;
  min-height: var(--rq-phone-avatar-h) !important;
  display: grid !important;
  grid-template-columns: minmax(92px, 1fr) minmax(72px, .8fr) !important;
  align-items: end !important;
  gap: 7px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  pointer-events: none !important;
  visibility: visible !important;
  z-index: 985 !important;
}

body.rq-phone-landscape.is-playing .game-avatar-shell.hidden {
  display: none !important;
}

body.rq-phone-landscape.is-playing .game-avatar3d {
  width: clamp(98px, 10.5vw, 132px) !important;
  height: var(--rq-phone-avatar-h) !important;
  min-height: var(--rq-phone-avatar-h) !important;
  overflow: visible !important;
}

body.rq-phone-landscape.is-playing .game-avatar-bubble {
  display: block !important;
  align-self: center !important;
  max-width: 92px !important;
  padding: 7px 8px !important;
  border-radius: 13px 13px 13px 5px !important;
  font-size: .56rem !important;
  line-height: 1.08 !important;
}

body.rq-phone-landscape.is-playing .bottom-panel {
  left: calc(max(6px, env(safe-area-inset-left)) + var(--rq-phone-avatar-w) + 12px) !important;
  right: max(86px, calc(env(safe-area-inset-right) + 78px)) !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  width: auto !important;
  max-width: none !important;
  min-height: 46px !important;
  padding: 8px 10px !important;
  border-radius: 16px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 9px !important;
  align-items: center !important;
  z-index: 940 !important;
}

body.rq-phone-landscape.is-playing .bottom-panel .guess-copy span {
  font-size: .53rem !important;
}

body.rq-phone-landscape.is-playing .bottom-panel .guess-copy strong {
  font-size: .78rem !important;
  line-height: 1.05 !important;
}

body.rq-phone-landscape.is-playing .bottom-panel .primary-btn {
  min-height: 32px !important;
  padding: 7px 12px !important;
  font-size: .63rem !important;
}

/* Result state: keep the avatar alive, hide only the gameplay controls, and move a smaller
   answer card toward the right-center so the mascot area stays clear. */
body.rq-phone-landscape.showing-round-result.is-playing .audio-card,
body.rq-phone-landscape.showing-round-result.is-playing .bottom-panel,
body.rq-phone-landscape.showing-round-result.is-playing .map-style-btn,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .logo-lockup,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .mode-badge {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .game-avatar-shell {
  display: grid !important;
  visibility: visible !important;
  left: max(6px, env(safe-area-inset-left)) !important;
  bottom: max(8px, env(safe-area-inset-bottom)) !important;
  top: auto !important;
  width: var(--rq-phone-avatar-w) !important;
  max-width: var(--rq-phone-avatar-w) !important;
  z-index: 995 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .game-avatar-shell.hidden {
  display: none !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .top-hud {
  left: auto !important;
  right: var(--rq-phone-right) !important;
  max-width: calc(100vw - 20px) !important;
  z-index: 980 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal {
  position: fixed !important;
  top: 52% !important;
  left: 64% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(368px, calc(100vw - var(--rq-phone-avatar-w) - 48px)) !important;
  max-width: min(368px, calc(100vw - var(--rq-phone-avatar-w) - 48px)) !important;
  max-height: calc(100dvh - 34px) !important;
  padding: 10px !important;
  border-radius: 17px !important;
  transform: translate(-50%, -50%) !important;
  overflow: auto !important;
  z-index: 990 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal h2 {
  font-size: .82rem !important;
  line-height: 1.06 !important;
  margin: 0 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-header {
  gap: 7px !important;
  margin-bottom: 7px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .round-points {
  min-width: 74px !important;
  padding: 6px 8px !important;
  border-radius: 12px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .round-points span,
body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid span,
body.rq-phone-landscape.showing-round-result.is-playing .distance-callout span {
  font-size: .48rem !important;
  letter-spacing: .14em !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .round-points strong {
  font-size: .82rem !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .distance-callout {
  padding: 9px !important;
  border-radius: 15px !important;
  margin: 7px 0 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .distance-callout strong {
  font-size: clamp(1.42rem, 6.4dvh, 2.05rem) !important;
  line-height: .98 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid {
  gap: 7px !important;
  margin: 7px 0 8px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid > div {
  padding: 7px 9px !important;
  border-radius: 13px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid strong {
  font-size: .72rem !important;
  line-height: 1.08 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .compact-note {
  margin: 7px 0 0 !important;
  font-size: .63rem !important;
}

@media (max-width: 760px) and (orientation: landscape) {
  body.rq-phone-landscape.is-playing {
    --rq-phone-left-card: 236px;
    --rq-phone-audio-h: 142px;
    --rq-phone-avatar-w: 174px;
    --rq-phone-avatar-h: 132px;
  }

  body.rq-phone-landscape.is-playing .top-hud .stat {
    min-width: 52px !important;
    padding: 6px 8px !important;
  }

  body.rq-phone-landscape.is-playing .top-hud .stat strong {
    font-size: .84rem !important;
  }

  body.rq-phone-landscape.showing-round-result.is-playing .result-modal {
    left: 65% !important;
    width: min(326px, calc(100vw - var(--rq-phone-avatar-w) - 36px)) !important;
    max-width: min(326px, calc(100vw - var(--rq-phone-avatar-w) - 36px)) !important;
  }
}


/* v7.0.12 phone fullscreen landscape final alignment
   Important: this still only applies when app.js detects an actual phone landscape viewport. */
body.rq-phone-landscape.is-playing {
  --rq-phone-top: max(0px, env(safe-area-inset-top));
  --rq-phone-left: max(0px, env(safe-area-inset-left));
  --rq-phone-right: max(8px, env(safe-area-inset-right));
  --rq-phone-bottom: max(8px, env(safe-area-inset-bottom));
  --rq-phone-left-card: clamp(286px, 24vw, 326px);
  --rq-phone-audio-h: 154px;
  --rq-phone-avatar-w: clamp(220px, 18vw, 258px);
  --rq-phone-avatar-h: clamp(150px, 28vh, 190px);
}

body.rq-phone-landscape.is-playing .audio-card {
  position: fixed !important;
  top: var(--rq-phone-top) !important;
  left: var(--rq-phone-left) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--rq-phone-left-card) !important;
  max-width: var(--rq-phone-left-card) !important;
  transform: none !important;
  border-radius: 0 16px 16px 0 !important;
  z-index: 980 !important;
}

body.rq-phone-landscape.is-playing .top-hud .logo-lockup {
  position: fixed !important;
  top: calc(var(--rq-phone-top) + var(--rq-phone-audio-h) + 8px) !important;
  left: var(--rq-phone-left) !important;
  right: auto !important;
  width: var(--rq-phone-left-card) !important;
  max-width: var(--rq-phone-left-card) !important;
  transform: none !important;
  border-radius: 0 16px 16px 0 !important;
  z-index: 970 !important;
}

body.rq-phone-landscape.is-playing .top-hud .mode-badge {
  position: fixed !important;
  top: calc(var(--rq-phone-top) + var(--rq-phone-audio-h) + 62px) !important;
  left: var(--rq-phone-left) !important;
  right: auto !important;
  width: var(--rq-phone-left-card) !important;
  max-width: var(--rq-phone-left-card) !important;
  transform: none !important;
  border-radius: 0 14px 14px 0 !important;
  z-index: 969 !important;
}

body.rq-phone-landscape.is-playing .game-avatar-shell {
  left: max(4px, env(safe-area-inset-left)) !important;
  bottom: max(4px, env(safe-area-inset-bottom)) !important;
  width: var(--rq-phone-avatar-w) !important;
  max-width: var(--rq-phone-avatar-w) !important;
  min-height: var(--rq-phone-avatar-h) !important;
  z-index: 985 !important;
}

body.rq-phone-landscape.is-playing .game-avatar3d {
  width: clamp(124px, 10vw, 148px) !important;
  height: var(--rq-phone-avatar-h) !important;
  min-height: var(--rq-phone-avatar-h) !important;
}

body.rq-phone-landscape.is-playing .game-avatar-bubble {
  max-width: 104px !important;
  font-size: .58rem !important;
}

body.rq-phone-landscape.is-playing .bottom-panel {
  left: calc(max(4px, env(safe-area-inset-left)) + var(--rq-phone-avatar-w) + 14px) !important;
  right: max(98px, calc(env(safe-area-inset-right) + 92px)) !important;
  bottom: max(8px, env(safe-area-inset-bottom)) !important;
  min-height: 44px !important;
  z-index: 940 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .game-avatar-shell {
  display: grid !important;
  visibility: visible !important;
  left: max(4px, env(safe-area-inset-left)) !important;
  bottom: max(4px, env(safe-area-inset-bottom)) !important;
  width: var(--rq-phone-avatar-w) !important;
  max-width: var(--rq-phone-avatar-w) !important;
  z-index: 995 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal {
  left: 66% !important;
  top: 52% !important;
  width: min(330px, calc(100vw - var(--rq-phone-avatar-w) - 48px)) !important;
  max-width: min(330px, calc(100vw - var(--rq-phone-avatar-w) - 48px)) !important;
  padding: 9px !important;
  border-radius: 16px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .distance-callout strong {
  font-size: clamp(1.28rem, 5.8dvh, 1.86rem) !important;
}


/* v7.0.13 phone landscape top-left composition patch
   Goal: keep desktop untouched, but pin the mobile HUD like the PC composition in miniature. */
body.rq-phone-landscape.is-playing {
  --rq-phone-top: max(8px, env(safe-area-inset-top));
  --rq-phone-left: max(8px, env(safe-area-inset-left));
  --rq-phone-right: max(8px, env(safe-area-inset-right));
  --rq-phone-bottom: max(8px, env(safe-area-inset-bottom));
  --rq-phone-logo-w: clamp(210px, 21vw, 260px);
  --rq-phone-audio-w: clamp(310px, 28vw, 360px);
  --rq-phone-audio-scale: .64;
  --rq-phone-avatar-w: clamp(210px, 18vw, 258px);
  --rq-phone-avatar-h: clamp(138px, 26vh, 184px);
}

body.rq-phone-landscape.is-playing .top-hud {
  position: fixed !important;
  inset: 0 !important;
  width: 100dvw !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  pointer-events: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  z-index: 990 !important;
}

body.rq-phone-landscape.is-playing .top-hud .logo-lockup {
  position: fixed !important;
  top: var(--rq-phone-top) !important;
  left: var(--rq-phone-left) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--rq-phone-logo-w) !important;
  max-width: var(--rq-phone-logo-w) !important;
  min-height: 58px !important;
  padding: 10px 13px !important;
  border-radius: 0 15px 15px 0 !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  transform: none !important;
  pointer-events: auto !important;
  z-index: 996 !important;
}

body.rq-phone-landscape.is-playing .top-hud .logo-lockup strong {
  font-size: 1rem !important;
  line-height: 1 !important;
}

body.rq-phone-landscape.is-playing .top-hud .logo-lockup small {
  font-size: .62rem !important;
  letter-spacing: .18em !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

body.rq-phone-landscape.is-playing .top-hud .mode-badge {
  display: none !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat {
  position: fixed !important;
  top: var(--rq-phone-top) !important;
  width: 78px !important;
  min-width: 78px !important;
  height: 58px !important;
  padding: 8px 10px !important;
  border-radius: 15px !important;
  display: grid !important;
  place-items: center !important;
  gap: 2px !important;
  transform: none !important;
  pointer-events: auto !important;
  z-index: 997 !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat:nth-of-type(3) { right: calc(var(--rq-phone-right) + 0px) !important; }
body.rq-phone-landscape.is-playing .top-hud .stat:nth-of-type(2) { right: calc(var(--rq-phone-right) + 88px) !important; }
body.rq-phone-landscape.is-playing .top-hud .stat:nth-of-type(1) { right: calc(var(--rq-phone-right) + 176px) !important; }

body.rq-phone-landscape.is-playing .top-hud .stat span {
  font-size: .55rem !important;
  letter-spacing: .2em !important;
  line-height: 1 !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat strong {
  font-size: 1.05rem !important;
  line-height: 1 !important;
}

body.rq-phone-landscape.is-playing .audio-card {
  position: fixed !important;
  top: calc(var(--rq-phone-top) + 66px) !important;
  left: var(--rq-phone-left) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--rq-phone-audio-w) !important;
  max-width: var(--rq-phone-audio-w) !important;
  min-height: 0 !important;
  padding: 11px 12px !important;
  border-radius: 0 16px 16px 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  transform: scale(var(--rq-phone-audio-scale)) !important;
  transform-origin: top left !important;
  z-index: 992 !important;
}

body.rq-phone-landscape.is-playing .audio-card .wave-orb,
body.rq-phone-landscape.is-playing .audio-card .audio-copy p {
  display: none !important;
}

body.rq-phone-landscape.is-playing .audio-card .audio-copy,
body.rq-phone-landscape.is-playing .audio-card .audio-copy h2 {
  display: block !important;
  margin: 0 !important;
  text-align: left !important;
}

body.rq-phone-landscape.is-playing .audio-card .audio-copy h2 {
  font-size: 1.1rem !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

body.rq-phone-landscape.is-playing .audio-card audio {
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
}

body.rq-phone-landscape.is-playing .audio-card .actions-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin: 0 !important;
}

body.rq-phone-landscape.is-playing .audio-card .actions-row .secondary-btn {
  min-height: 34px !important;
  padding: 8px 10px !important;
  border-radius: 13px !important;
  font-size: .72rem !important;
  white-space: nowrap !important;
}

body.rq-phone-landscape.is-playing .game-avatar-shell {
  left: var(--rq-phone-left) !important;
  bottom: var(--rq-phone-bottom) !important;
  width: var(--rq-phone-avatar-w) !important;
  max-width: var(--rq-phone-avatar-w) !important;
  min-height: var(--rq-phone-avatar-h) !important;
  z-index: 991 !important;
}

body.rq-phone-landscape.is-playing .game-avatar3d {
  width: clamp(124px, 10vw, 154px) !important;
  height: var(--rq-phone-avatar-h) !important;
  min-height: var(--rq-phone-avatar-h) !important;
}

body.rq-phone-landscape.is-playing .game-avatar-bubble {
  max-width: 110px !important;
  font-size: .58rem !important;
  line-height: 1.12 !important;
}

body.rq-phone-landscape.is-playing .bottom-panel {
  left: calc(var(--rq-phone-left) + var(--rq-phone-avatar-w) + 18px) !important;
  right: max(94px, calc(env(safe-area-inset-right) + 92px)) !important;
  bottom: var(--rq-phone-bottom) !important;
  width: auto !important;
  max-width: none !important;
  min-height: 46px !important;
  padding: 8px 10px !important;
  border-radius: 16px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  z-index: 940 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .audio-card,
body.rq-phone-landscape.showing-round-result.is-playing .bottom-panel,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .logo-lockup {
  display: none !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .game-avatar-shell {
  display: grid !important;
  visibility: visible !important;
  left: var(--rq-phone-left) !important;
  bottom: var(--rq-phone-bottom) !important;
  width: var(--rq-phone-avatar-w) !important;
  max-width: var(--rq-phone-avatar-w) !important;
  z-index: 995 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal {
  left: 67% !important;
  top: 52% !important;
  width: min(310px, calc(100vw - var(--rq-phone-avatar-w) - 54px)) !important;
  max-width: min(310px, calc(100vw - var(--rq-phone-avatar-w) - 54px)) !important;
  padding: 8px !important;
  border-radius: 15px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal h2 {
  font-size: .78rem !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .distance-callout {
  padding: 8px !important;
  margin: 6px 0 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .distance-callout strong {
  font-size: clamp(1.05rem, 5dvh, 1.55rem) !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid {
  gap: 6px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid > div {
  padding: 7px 8px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid strong {
  font-size: .72rem !important;
}

@media (orientation: landscape) and (max-width: 1800px) and (max-height: 760px) and (pointer: coarse) {
  body.is-playing:not(.rq-phone-landscape) {
    --rq-phone-top: max(8px, env(safe-area-inset-top));
    --rq-phone-left: max(8px, env(safe-area-inset-left));
    --rq-phone-right: max(8px, env(safe-area-inset-right));
    --rq-phone-bottom: max(8px, env(safe-area-inset-bottom));
    --rq-phone-logo-w: clamp(210px, 21vw, 260px);
    --rq-phone-audio-w: clamp(310px, 28vw, 360px);
    --rq-phone-audio-scale: .64;
    --rq-phone-avatar-w: clamp(210px, 18vw, 258px);
    --rq-phone-avatar-h: clamp(138px, 26vh, 184px);
  }
  body.is-playing:not(.rq-phone-landscape) .top-hud .logo-lockup,
  body.is-playing:not(.rq-phone-landscape) .audio-card,
  body.is-playing:not(.rq-phone-landscape) .game-avatar-shell,
  body.is-playing:not(.rq-phone-landscape) .bottom-panel {
    transform-origin: top left !important;
  }
}


/* v7.0.14 phone landscape HUD/audio correction patch
   Keeps RadioQuest on the left, restores Round/Score/Time to the right, makes the audio card much smaller. */
body.rq-phone-landscape.is-playing {
  --rq-phone-top: max(8px, env(safe-area-inset-top));
  --rq-phone-left: max(0px, env(safe-area-inset-left));
  --rq-phone-right: max(8px, env(safe-area-inset-right));
  --rq-phone-bottom: max(6px, env(safe-area-inset-bottom));
  --rq-phone-logo-w: clamp(250px, 29vw, 390px);
  --rq-phone-audio-w: 340px;
  --rq-phone-audio-scale: .46;
  --rq-phone-avatar-w: clamp(225px, 20vw, 276px);
  --rq-phone-avatar-h: clamp(150px, 28vh, 198px);
}

body.rq-phone-landscape.is-playing .top-hud .logo-lockup {
  top: var(--rq-phone-top) !important;
  left: var(--rq-phone-left) !important;
  width: var(--rq-phone-logo-w) !important;
  max-width: var(--rq-phone-logo-w) !important;
  min-height: 58px !important;
  padding: 10px 14px !important;
  border-radius: 0 16px 16px 0 !important;
  transform: none !important;
  z-index: 1002 !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat {
  top: var(--rq-phone-top) !important;
  left: auto !important;
  bottom: auto !important;
  width: 84px !important;
  min-width: 84px !important;
  height: 58px !important;
  transform: none !important;
  z-index: 1003 !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat:nth-last-of-type(1) {
  right: var(--rq-phone-right) !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat:nth-last-of-type(2) {
  right: calc(var(--rq-phone-right) + 94px) !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat:nth-last-of-type(3) {
  right: calc(var(--rq-phone-right) + 188px) !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat.timer {
  right: var(--rq-phone-right) !important;
  left: auto !important;
}

body.rq-phone-landscape.is-playing .audio-card {
  top: calc(var(--rq-phone-top) + 70px) !important;
  left: var(--rq-phone-left) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--rq-phone-audio-w) !important;
  max-width: var(--rq-phone-audio-w) !important;
  padding: 10px 12px !important;
  border-radius: 0 16px 16px 0 !important;
  transform: scale(var(--rq-phone-audio-scale)) !important;
  transform-origin: top left !important;
  z-index: 1001 !important;
}

body.rq-phone-landscape.is-playing .audio-card .audio-copy h2 {
  font-size: 1rem !important;
}

body.rq-phone-landscape.is-playing .audio-card audio {
  height: 34px !important;
  min-height: 34px !important;
}

body.rq-phone-landscape.is-playing .audio-card .actions-row .secondary-btn {
  min-height: 30px !important;
  padding: 7px 9px !important;
  font-size: .68rem !important;
}

body.rq-phone-landscape.is-playing .game-avatar-shell {
  bottom: calc(var(--rq-phone-bottom) - 20px) !important;
  left: var(--rq-phone-left) !important;
  width: var(--rq-phone-avatar-w) !important;
  max-width: var(--rq-phone-avatar-w) !important;
  min-height: var(--rq-phone-avatar-h) !important;
  z-index: 996 !important;
}

body.rq-phone-landscape.is-playing .game-avatar3d {
  width: clamp(140px, 12vw, 178px) !important;
  height: var(--rq-phone-avatar-h) !important;
  min-height: var(--rq-phone-avatar-h) !important;
}

body.rq-phone-landscape.is-playing .bottom-panel {
  left: calc(var(--rq-phone-left) + var(--rq-phone-avatar-w) + 22px) !important;
  right: max(96px, calc(env(safe-area-inset-right) + 96px)) !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .game-avatar-shell {
  bottom: calc(var(--rq-phone-bottom) - 20px) !important;
}


/* v7.0.15 phone landscape visual alignment patch
   Mobile-only: smaller rounded brand card, tiny signal player directly below it, stable right-side HUD, result card slightly lower. */
body.rq-phone-landscape.is-playing {
  --rq-phone-top: max(8px, env(safe-area-inset-top));
  --rq-phone-left: max(8px, env(safe-area-inset-left));
  --rq-phone-right: max(10px, env(safe-area-inset-right));
  --rq-phone-bottom: max(6px, env(safe-area-inset-bottom));
  --rq-phone-logo-w: clamp(210px, 19vw, 250px);
  --rq-phone-audio-w: 350px;
  --rq-phone-audio-scale: .34;
}

body.rq-phone-landscape.is-playing .top-hud .logo-lockup {
  position: fixed !important;
  top: var(--rq-phone-top) !important;
  left: var(--rq-phone-left) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--rq-phone-logo-w) !important;
  max-width: var(--rq-phone-logo-w) !important;
  min-height: 48px !important;
  padding: 8px 12px !important;
  border-radius: 18px !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  gap: 8px !important;
  overflow: hidden !important;
  z-index: 1010 !important;
}

body.rq-phone-landscape.is-playing .top-hud .logo-lockup .logo-dot {
  width: 22px !important;
  height: 22px !important;
}

body.rq-phone-landscape.is-playing .top-hud .logo-lockup strong {
  font-size: .9rem !important;
  line-height: 1 !important;
}

body.rq-phone-landscape.is-playing .top-hud .logo-lockup small {
  font-size: .54rem !important;
  letter-spacing: .17em !important;
  line-height: 1.05 !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat {
  position: fixed !important;
  top: var(--rq-phone-top) !important;
  left: auto !important;
  bottom: auto !important;
  width: 82px !important;
  min-width: 82px !important;
  height: 58px !important;
  padding: 8px 10px !important;
  border-radius: 15px !important;
  transform: none !important;
  display: grid !important;
  place-items: center !important;
  gap: 2px !important;
  z-index: 1011 !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat:has(#timerLabel) {
  right: var(--rq-phone-right) !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat:has(#scoreLabel) {
  right: calc(var(--rq-phone-right) + 92px) !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat:has(#roundLabel) {
  right: calc(var(--rq-phone-right) + 184px) !important;
}

body.rq-phone-landscape.is-playing .audio-card {
  position: fixed !important;
  top: calc(var(--rq-phone-top) + 54px) !important;
  left: var(--rq-phone-left) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--rq-phone-audio-w) !important;
  max-width: var(--rq-phone-audio-w) !important;
  min-height: 0 !important;
  padding: 9px 10px !important;
  border-radius: 16px !important;
  transform: scale(var(--rq-phone-audio-scale)) !important;
  transform-origin: top left !important;
  z-index: 1009 !important;
}

body.rq-phone-landscape.is-playing .audio-card .audio-copy h2 {
  font-size: .98rem !important;
}

body.rq-phone-landscape.is-playing .audio-card audio {
  height: 32px !important;
  min-height: 32px !important;
}

body.rq-phone-landscape.is-playing .audio-card .actions-row .secondary-btn {
  min-height: 28px !important;
  padding: 6px 8px !important;
  font-size: .66rem !important;
}

body.rq-phone-landscape.is-playing .game-avatar-shell {
  bottom: calc(var(--rq-phone-bottom) - 12px) !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal {
  top: 57% !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat:has(#timerLabel) {
  right: var(--rq-phone-right) !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat:has(#scoreLabel) {
  right: calc(var(--rq-phone-right) + 92px) !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat:has(#roundLabel) {
  right: calc(var(--rq-phone-right) + 184px) !important;
}

/* v7.0.16 phone landscape final HUD/result tuning
   Mobile-only: stable top-right stats in both states, smaller rounded brand, attached signal player, smaller off-center result card. */
body.rq-phone-landscape.is-playing {
  --rq-phone-top: max(8px, env(safe-area-inset-top));
  --rq-phone-left: max(8px, env(safe-area-inset-left));
  --rq-phone-right: max(28px, env(safe-area-inset-right));
  --rq-phone-bottom: max(6px, env(safe-area-inset-bottom));
  --rq-phone-logo-w: clamp(172px, 15.5vw, 214px);
  --rq-phone-logo-h: 50px;
  --rq-phone-stat-w: 94px;
  --rq-phone-stat-h: 64px;
  --rq-phone-stat-gap: 14px;
  --rq-phone-audio-w: 350px;
  --rq-phone-audio-scale: .42;
}

body.rq-phone-landscape.is-playing .top-hud {
  position: fixed !important;
  inset: 0 !important;
  width: 100dvw !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  pointer-events: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 1015 !important;
}

body.rq-phone-landscape.is-playing .top-hud .logo-lockup {
  position: fixed !important;
  top: var(--rq-phone-top) !important;
  left: var(--rq-phone-left) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--rq-phone-logo-w) !important;
  max-width: var(--rq-phone-logo-w) !important;
  min-height: var(--rq-phone-logo-h) !important;
  height: var(--rq-phone-logo-h) !important;
  padding: 7px 10px !important;
  border-radius: 17px !important;
  grid-template-columns: 27px minmax(0, 1fr) !important;
  gap: 8px !important;
  overflow: hidden !important;
  transform: none !important;
  pointer-events: auto !important;
  z-index: 1020 !important;
}

body.rq-phone-landscape.is-playing .top-hud .logo-lockup .logo-dot {
  width: 25px !important;
  height: 25px !important;
}

body.rq-phone-landscape.is-playing .top-hud .logo-lockup strong {
  font-size: .88rem !important;
  line-height: 1 !important;
}

body.rq-phone-landscape.is-playing .top-hud .logo-lockup small {
  font-size: .5rem !important;
  letter-spacing: .15em !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

body.rq-phone-landscape.is-playing .top-hud .mode-badge {
  display: none !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat {
  position: fixed !important;
  top: var(--rq-phone-top) !important;
  left: auto !important;
  bottom: auto !important;
  width: var(--rq-phone-stat-w) !important;
  min-width: var(--rq-phone-stat-w) !important;
  height: var(--rq-phone-stat-h) !important;
  min-height: var(--rq-phone-stat-h) !important;
  padding: 8px 10px !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  gap: 3px !important;
  transform: none !important;
  pointer-events: auto !important;
  z-index: 1021 !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat:has(#timerLabel),
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat:has(#timerLabel) {
  right: var(--rq-phone-right) !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat:has(#scoreLabel),
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat:has(#scoreLabel) {
  right: calc(var(--rq-phone-right) + var(--rq-phone-stat-w) + var(--rq-phone-stat-gap)) !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat:has(#roundLabel),
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat:has(#roundLabel) {
  right: calc(var(--rq-phone-right) + (var(--rq-phone-stat-w) + var(--rq-phone-stat-gap)) * 2) !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat span,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat span {
  font-size: .55rem !important;
  letter-spacing: .22em !important;
  line-height: 1 !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat strong,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat strong {
  font-size: 1.15rem !important;
  line-height: 1 !important;
}

body.rq-phone-landscape.is-playing .audio-card {
  position: fixed !important;
  top: calc(var(--rq-phone-top) + var(--rq-phone-logo-h) + 1px) !important;
  left: var(--rq-phone-left) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--rq-phone-audio-w) !important;
  max-width: var(--rq-phone-audio-w) !important;
  min-height: 0 !important;
  padding: 10px 12px !important;
  border-radius: 15px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  transform: scale(var(--rq-phone-audio-scale)) !important;
  transform-origin: top left !important;
  z-index: 1018 !important;
}

body.rq-phone-landscape.is-playing .audio-card .wave-orb,
body.rq-phone-landscape.is-playing .audio-card .audio-copy p {
  display: none !important;
}

body.rq-phone-landscape.is-playing .audio-card .audio-copy,
body.rq-phone-landscape.is-playing .audio-card .audio-copy h2 {
  display: block !important;
  margin: 0 !important;
  text-align: left !important;
}

body.rq-phone-landscape.is-playing .audio-card .audio-copy h2 {
  font-size: .98rem !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

body.rq-phone-landscape.is-playing .audio-card audio {
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
}

body.rq-phone-landscape.is-playing .audio-card .actions-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 7px !important;
  margin: 0 !important;
}

body.rq-phone-landscape.is-playing .audio-card .actions-row .secondary-btn {
  min-height: 30px !important;
  padding: 7px 9px !important;
  border-radius: 13px !important;
  font-size: .68rem !important;
  white-space: nowrap !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .audio-card,
body.rq-phone-landscape.showing-round-result.is-playing .bottom-panel,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .logo-lockup {
  display: none !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal {
  position: fixed !important;
  left: 72% !important;
  top: 57% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(270px, calc(100vw - var(--rq-phone-avatar-w) - 82px)) !important;
  max-width: min(270px, calc(100vw - var(--rq-phone-avatar-w) - 82px)) !important;
  max-height: calc(100dvh - 96px) !important;
  padding: 7px !important;
  border-radius: 14px !important;
  transform: translate(-50%, -50%) !important;
  overflow: auto !important;
  z-index: 998 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal h2 {
  font-size: .68rem !important;
  line-height: 1.04 !important;
  margin: 0 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-header {
  gap: 6px !important;
  margin-bottom: 5px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .round-points {
  min-width: 64px !important;
  padding: 5px 7px !important;
  border-radius: 11px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .round-points span {
  font-size: .45rem !important;
  letter-spacing: .16em !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .round-points strong {
  font-size: .78rem !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .distance-callout {
  padding: 6px !important;
  margin: 5px 0 !important;
  border-radius: 12px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .distance-callout span,
body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid span {
  font-size: .45rem !important;
  letter-spacing: .13em !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .distance-callout strong {
  font-size: clamp(.95rem, 4.2dvh, 1.34rem) !important;
  line-height: 1.02 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid {
  gap: 5px !important;
  margin: 5px 0 7px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid > div {
  padding: 6px 7px !important;
  border-radius: 12px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid strong {
  font-size: .62rem !important;
  line-height: 1.04 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal .primary-btn,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal .secondary-btn {
  min-height: 28px !important;
  padding: 6px 8px !important;
  border-radius: 12px !important;
  font-size: .6rem !important;
}


/* v7.0.17 phone landscape hard state-unifier
   Mobile-only: use JS-added stat classes instead of :has(), so HUD, avatar and audio keep the same place in listening/guess/result states. */
body.rq-phone-landscape.is-playing {
  --rq-phone-top: max(8px, env(safe-area-inset-top));
  --rq-phone-left: max(8px, env(safe-area-inset-left));
  --rq-phone-right: max(132px, env(safe-area-inset-right));
  --rq-phone-bottom: max(6px, env(safe-area-inset-bottom));
  --rq-phone-logo-w: clamp(178px, 19dvw, 230px);
  --rq-phone-logo-h: 44px;
  --rq-phone-stat-w: clamp(92px, 10dvw, 118px);
  --rq-phone-stat-h: 62px;
  --rq-phone-stat-gap: clamp(18px, 2.2dvw, 34px);
  --rq-phone-audio-w: 330px;
  --rq-phone-audio-scale: .50;
  --rq-phone-avatar-w: clamp(260px, 24dvw, 330px);
  --rq-phone-avatar-h: clamp(108px, 17dvh, 150px);
}

body.rq-phone-landscape.is-playing .top-hud {
  position: fixed !important;
  inset: 0 !important;
  width: 100dvw !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  pointer-events: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 1100 !important;
}

body.rq-phone-landscape.is-playing .top-hud .logo-lockup {
  position: fixed !important;
  top: var(--rq-phone-top) !important;
  left: var(--rq-phone-left) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--rq-phone-logo-w) !important;
  max-width: var(--rq-phone-logo-w) !important;
  height: var(--rq-phone-logo-h) !important;
  min-height: var(--rq-phone-logo-h) !important;
  padding: 6px 10px !important;
  border-radius: 16px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  overflow: hidden !important;
  transform: none !important;
  pointer-events: auto !important;
  z-index: 1120 !important;
}

body.rq-phone-landscape.is-playing .top-hud .logo-lockup .logo-dot {
  width: 24px !important;
  height: 24px !important;
}

body.rq-phone-landscape.is-playing .top-hud .logo-lockup strong {
  font-size: .84rem !important;
  line-height: 1 !important;
}

body.rq-phone-landscape.is-playing .top-hud .logo-lockup small {
  font-size: .48rem !important;
  letter-spacing: .14em !important;
  line-height: 1.04 !important;
  white-space: nowrap !important;
}

body.rq-phone-landscape.is-playing .top-hud .mode-badge {
  display: none !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat,
body.rq-phone-landscape.is-playing .top-hud .stat-round,
body.rq-phone-landscape.is-playing .top-hud .stat-score,
body.rq-phone-landscape.is-playing .top-hud .stat-time {
  position: fixed !important;
  top: var(--rq-phone-top) !important;
  left: auto !important;
  bottom: auto !important;
  width: var(--rq-phone-stat-w) !important;
  min-width: var(--rq-phone-stat-w) !important;
  height: var(--rq-phone-stat-h) !important;
  min-height: var(--rq-phone-stat-h) !important;
  padding: 8px 10px !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  gap: 3px !important;
  transform: none !important;
  pointer-events: auto !important;
  z-index: 1121 !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat-time,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat-time,
body.rq-phone-landscape.is-playing .top-hud .timer {
  right: var(--rq-phone-right) !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat-score,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat-score {
  right: calc(var(--rq-phone-right) + var(--rq-phone-stat-w) + var(--rq-phone-stat-gap)) !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat-round,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat-round {
  right: calc(var(--rq-phone-right) + (var(--rq-phone-stat-w) + var(--rq-phone-stat-gap)) * 2) !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat span {
  font-size: .54rem !important;
  letter-spacing: .22em !important;
  line-height: 1 !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat strong {
  font-size: 1.12rem !important;
  line-height: 1 !important;
}

body.rq-phone-landscape.is-playing .audio-card,
body.rq-phone-landscape.is-playing:not(.showing-round-result) .audio-card {
  position: fixed !important;
  top: calc(var(--rq-phone-top) + var(--rq-phone-logo-h) + 1px) !important;
  left: var(--rq-phone-left) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--rq-phone-audio-w) !important;
  max-width: var(--rq-phone-audio-w) !important;
  min-height: 0 !important;
  padding: 10px 12px !important;
  border-radius: 0 0 15px 15px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  transform: scale(var(--rq-phone-audio-scale)) !important;
  transform-origin: top left !important;
  z-index: 1119 !important;
}

body.rq-phone-landscape.is-playing .audio-card .wave-orb,
body.rq-phone-landscape.is-playing .audio-card .audio-copy p {
  display: none !important;
}

body.rq-phone-landscape.is-playing .audio-card .audio-copy,
body.rq-phone-landscape.is-playing .audio-card .audio-copy h2 {
  display: block !important;
  margin: 0 !important;
  text-align: left !important;
}

body.rq-phone-landscape.is-playing .audio-card .audio-copy h2 {
  font-size: 1.02rem !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

body.rq-phone-landscape.is-playing .audio-card audio {
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
}

body.rq-phone-landscape.is-playing .audio-card .actions-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 7px !important;
  margin: 0 !important;
}

body.rq-phone-landscape.is-playing .audio-card .actions-row .secondary-btn {
  min-height: 30px !important;
  padding: 7px 9px !important;
  border-radius: 13px !important;
  font-size: .68rem !important;
  white-space: nowrap !important;
}

body.rq-phone-landscape.is-playing .game-avatar-shell,
body.rq-phone-landscape.showing-round-result.is-playing .game-avatar-shell {
  position: fixed !important;
  top: auto !important;
  left: var(--rq-phone-left) !important;
  right: auto !important;
  bottom: var(--rq-phone-bottom) !important;
  width: var(--rq-phone-avatar-w) !important;
  max-width: var(--rq-phone-avatar-w) !important;
  min-height: var(--rq-phone-avatar-h) !important;
  display: grid !important;
  grid-template-columns: clamp(132px, 13dvw, 172px) minmax(88px, 1fr) !important;
  align-items: end !important;
  gap: 6px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  pointer-events: none !important;
  visibility: visible !important;
  z-index: 1000 !important;
}

body.rq-phone-landscape.is-playing .game-avatar-shell.hidden,
body.rq-phone-landscape.showing-round-result.is-playing .game-avatar-shell.hidden {
  display: none !important;
}

body.rq-phone-landscape.is-playing .game-avatar3d,
body.rq-phone-landscape.showing-round-result.is-playing .game-avatar3d {
  width: clamp(132px, 13dvw, 172px) !important;
  height: var(--rq-phone-avatar-h) !important;
  min-height: var(--rq-phone-avatar-h) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.rq-phone-landscape.is-playing .game-avatar3d::after {
  display: none !important;
}

body.rq-phone-landscape.is-playing .game-avatar-bubble,
body.rq-phone-landscape.showing-round-result.is-playing .game-avatar-bubble {
  display: block !important;
  max-width: 122px !important;
  margin: 0 0 clamp(30px, 5dvh, 54px) !important;
  padding: 8px 10px !important;
  border-radius: 13px 13px 13px 5px !important;
  font-size: .62rem !important;
  line-height: 1.1 !important;
}

body.rq-phone-landscape.is-playing .bottom-panel {
  position: fixed !important;
  left: calc(var(--rq-phone-left) + var(--rq-phone-avatar-w) + 22px) !important;
  right: max(94px, calc(env(safe-area-inset-right) + 92px)) !important;
  bottom: var(--rq-phone-bottom) !important;
  width: auto !important;
  max-width: none !important;
  min-height: 46px !important;
  padding: 8px 10px !important;
  border-radius: 16px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  transform: none !important;
  z-index: 940 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .audio-card,
body.rq-phone-landscape.showing-round-result.is-playing .bottom-panel,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .logo-lockup {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal {
  position: fixed !important;
  left: 76% !important;
  top: 59% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(255px, calc(100dvw - var(--rq-phone-avatar-w) - 92px)) !important;
  max-width: min(255px, calc(100dvw - var(--rq-phone-avatar-w) - 92px)) !important;
  max-height: calc(100dvh - 96px) !important;
  padding: 6px !important;
  border-radius: 14px !important;
  transform: translate(-50%, -50%) !important;
  overflow: auto !important;
  z-index: 998 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal h2 {
  font-size: .6rem !important;
  line-height: 1.04 !important;
  margin: 0 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-header {
  gap: 5px !important;
  margin-bottom: 4px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .round-points {
  min-width: 58px !important;
  padding: 4px 6px !important;
  border-radius: 10px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .round-points span {
  font-size: .4rem !important;
  letter-spacing: .14em !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .round-points strong {
  font-size: .7rem !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .distance-callout {
  padding: 5px !important;
  margin: 4px 0 !important;
  border-radius: 11px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .distance-callout span,
body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid span {
  font-size: .4rem !important;
  letter-spacing: .12em !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .distance-callout strong {
  font-size: clamp(.82rem, 3.6dvh, 1.16rem) !important;
  line-height: 1.02 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid {
  gap: 4px !important;
  margin: 4px 0 6px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid > div {
  padding: 5px 6px !important;
  border-radius: 11px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid strong {
  font-size: .56rem !important;
  line-height: 1.04 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .compact-note {
  margin: 4px 0 0 !important;
  font-size: .56rem !important;
  line-height: 1.05 !important;
}


/* v7.0.18 phone landscape stable HUD anchor
   Mobile-only: HUD stats are now anchored by permanent HTML classes and left calc, so they do not jump between listening and result states. */
body.rq-phone-landscape.is-playing {
  --rq-phone-stat-w: clamp(112px, 9.8dvw, 152px);
  --rq-phone-stat-h: clamp(60px, 12dvh, 86px);
  --rq-phone-stat-gap: clamp(18px, 2dvw, 34px);
  --rq-phone-hud-right-edge: max(58px, env(safe-area-inset-right));
  --rq-phone-hud-top: max(8px, env(safe-area-inset-top));
}

body.rq-phone-landscape.is-playing .top-hud .stat,
body.rq-phone-landscape.is-playing .top-hud .stat-round,
body.rq-phone-landscape.is-playing .top-hud .stat-score,
body.rq-phone-landscape.is-playing .top-hud .stat-time,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat-round,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat-score,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat-time {
  position: fixed !important;
  top: var(--rq-phone-hud-top) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--rq-phone-stat-w) !important;
  min-width: var(--rq-phone-stat-w) !important;
  max-width: var(--rq-phone-stat-w) !important;
  height: var(--rq-phone-stat-h) !important;
  min-height: var(--rq-phone-stat-h) !important;
  border-radius: 16px !important;
  transform: none !important;
  translate: none !important;
  z-index: 1135 !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat-round,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat-round {
  left: calc(100dvw - var(--rq-phone-hud-right-edge) - (var(--rq-phone-stat-w) * 3) - (var(--rq-phone-stat-gap) * 2)) !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat-score,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat-score {
  left: calc(100dvw - var(--rq-phone-hud-right-edge) - (var(--rq-phone-stat-w) * 2) - var(--rq-phone-stat-gap)) !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat-time,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat-time,
body.rq-phone-landscape.is-playing .top-hud .timer,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .timer {
  left: calc(100dvw - var(--rq-phone-hud-right-edge) - var(--rq-phone-stat-w)) !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat span,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat span {
  font-size: clamp(.54rem, 1.65dvh, .7rem) !important;
  letter-spacing: .24em !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat strong,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat strong {
  font-size: clamp(1.05rem, 4.6dvh, 1.62rem) !important;
}


/* v7.0.19 phone landscape edge anchor polish
   Mobile-only: pin top stats to the real right screen edge and glue the audio player directly under the RadioQuest badge. */
body.rq-phone-landscape.is-playing {
  --rq-phone-top: max(6px, env(safe-area-inset-top));
  --rq-phone-left: max(6px, env(safe-area-inset-left));
  --rq-phone-logo-w: clamp(150px, 16dvw, 190px);
  --rq-phone-logo-h: 40px;
  --rq-phone-stat-w: clamp(94px, 8.8dvw, 118px);
  --rq-phone-stat-h: clamp(52px, 10.6dvh, 72px);
  --rq-phone-stat-gap: clamp(8px, 1.05dvw, 16px);
  --rq-phone-hud-right-edge: max(6px, env(safe-area-inset-right));
  --rq-phone-hud-top: max(6px, env(safe-area-inset-top));
  --rq-phone-audio-w: 330px;
  --rq-phone-audio-scale: .54;
}

body.rq-phone-landscape.is-playing .top-hud .logo-lockup,
body.rq-phone-landscape.is-playing:not(.showing-round-result) .top-hud .logo-lockup {
  top: var(--rq-phone-top) !important;
  left: var(--rq-phone-left) !important;
  width: var(--rq-phone-logo-w) !important;
  max-width: var(--rq-phone-logo-w) !important;
  min-height: var(--rq-phone-logo-h) !important;
  height: var(--rq-phone-logo-h) !important;
  padding: 6px 8px !important;
  border-radius: 15px !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  gap: 7px !important;
}

body.rq-phone-landscape.is-playing .top-hud .logo-lockup .logo-dot {
  width: 21px !important;
  height: 21px !important;
}

body.rq-phone-landscape.is-playing .top-hud .logo-lockup strong {
  font-size: .78rem !important;
  line-height: .98 !important;
}

body.rq-phone-landscape.is-playing .top-hud .logo-lockup small {
  font-size: .44rem !important;
  letter-spacing: .13em !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat,
body.rq-phone-landscape.is-playing .top-hud .stat-round,
body.rq-phone-landscape.is-playing .top-hud .stat-score,
body.rq-phone-landscape.is-playing .top-hud .stat-time,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat-round,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat-score,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat-time {
  position: fixed !important;
  top: var(--rq-phone-hud-top) !important;
  left: auto !important;
  bottom: auto !important;
  width: var(--rq-phone-stat-w) !important;
  min-width: var(--rq-phone-stat-w) !important;
  max-width: var(--rq-phone-stat-w) !important;
  height: var(--rq-phone-stat-h) !important;
  min-height: var(--rq-phone-stat-h) !important;
  padding: 7px 8px !important;
  border-radius: 15px !important;
  display: grid !important;
  place-items: center !important;
  gap: 2px !important;
  transform: none !important;
  translate: none !important;
  z-index: 1145 !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat-time,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat-time,
body.rq-phone-landscape.is-playing .top-hud .timer,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .timer {
  right: var(--rq-phone-hud-right-edge) !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat-score,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat-score {
  right: calc(var(--rq-phone-hud-right-edge) + var(--rq-phone-stat-w) + var(--rq-phone-stat-gap)) !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat-round,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat-round {
  right: calc(var(--rq-phone-hud-right-edge) + (var(--rq-phone-stat-w) + var(--rq-phone-stat-gap)) * 2) !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat span,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat span {
  font-size: clamp(.48rem, 1.45dvh, .62rem) !important;
  letter-spacing: .2em !important;
  line-height: 1 !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat strong,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat strong {
  font-size: clamp(.92rem, 4dvh, 1.34rem) !important;
  line-height: 1 !important;
}

body.rq-phone-landscape.is-playing .audio-card,
body.rq-phone-landscape.is-playing:not(.showing-round-result) .audio-card {
  position: fixed !important;
  top: calc(var(--rq-phone-top) + var(--rq-phone-logo-h) - 1px) !important;
  left: var(--rq-phone-left) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--rq-phone-audio-w) !important;
  max-width: var(--rq-phone-audio-w) !important;
  padding: 8px 10px !important;
  border-radius: 0 0 14px 14px !important;
  gap: 6px !important;
  transform: scale(var(--rq-phone-audio-scale)) !important;
  transform-origin: top left !important;
  z-index: 1140 !important;
}

body.rq-phone-landscape.is-playing .audio-card .audio-copy h2 {
  font-size: .94rem !important;
}

body.rq-phone-landscape.is-playing .audio-card audio {
  height: 32px !important;
  min-height: 32px !important;
}

body.rq-phone-landscape.is-playing .audio-card .actions-row .secondary-btn {
  min-height: 28px !important;
  padding: 6px 8px !important;
  font-size: .64rem !important;
}


/* v7.0.20 phone landscape real-axis finalizer
   The exact top layout is now driven by app.js with real landscape viewport pixels.
   This block only shrinks the boxes/content so the inline coordinates stay clean. */
body.rq-phone-landscape.is-playing .top-hud .logo-lockup {
  padding: 5px 7px !important;
  border-radius: 14px !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  gap: 6px !important;
  overflow: hidden !important;
}

body.rq-phone-landscape.is-playing .top-hud .logo-lockup .logo-dot {
  width: 19px !important;
  height: 19px !important;
}

body.rq-phone-landscape.is-playing .top-hud .logo-lockup strong {
  font-size: .74rem !important;
  line-height: .98 !important;
}

body.rq-phone-landscape.is-playing .top-hud .logo-lockup small {
  font-size: .4rem !important;
  letter-spacing: .12em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat,
body.rq-phone-landscape.is-playing .top-hud .stat-round,
body.rq-phone-landscape.is-playing .top-hud .stat-score,
body.rq-phone-landscape.is-playing .top-hud .stat-time,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat-round,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat-score,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat-time {
  padding: 5px 6px !important;
  border-radius: 13px !important;
  display: grid !important;
  place-items: center !important;
  gap: 1px !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat span,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat span {
  font-size: .42rem !important;
  letter-spacing: .15em !important;
  line-height: 1 !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat strong,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat strong {
  font-size: .82rem !important;
  line-height: 1 !important;
}

body.rq-phone-landscape.is-playing .audio-card,
body.rq-phone-landscape.is-playing:not(.showing-round-result) .audio-card {
  padding: 7px 9px !important;
  border-radius: 0 0 13px 13px !important;
  gap: 5px !important;
}

body.rq-phone-landscape.is-playing .audio-card .audio-copy h2 {
  font-size: .9rem !important;
}

body.rq-phone-landscape.is-playing .audio-card audio {
  height: 30px !important;
  min-height: 30px !important;
}

body.rq-phone-landscape.is-playing .audio-card .actions-row {
  gap: 5px !important;
}

body.rq-phone-landscape.is-playing .audio-card .actions-row .secondary-btn {
  min-height: 27px !important;
  padding: 5px 7px !important;
  font-size: .62rem !important;
}


/* v7.0.21 phone landscape player/HUD sync polish
   Mobile-only: the radio player is visually paired with the RadioQuest badge, and body-state changes keep the HUD locked to the same real-axis coordinates. */
body.rq-phone-landscape.is-playing .top-hud .logo-lockup {
  border-radius: 15px !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28) !important;
}

body.rq-phone-landscape.is-playing .audio-card,
body.rq-phone-landscape.is-playing:not(.showing-round-result) .audio-card {
  border-radius: 15px !important;
  padding: 7px 8px !important;
  gap: 4px !important;
  overflow: hidden !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28) !important;
}

body.rq-phone-landscape.is-playing .audio-card .wave-orb {
  width: 26px !important;
  height: 26px !important;
}

body.rq-phone-landscape.is-playing .audio-card .audio-copy {
  gap: 1px !important;
}

body.rq-phone-landscape.is-playing .audio-card .audio-copy h2 {
  font-size: .86rem !important;
  line-height: 1 !important;
}

body.rq-phone-landscape.is-playing .audio-card .audio-copy p {
  font-size: .58rem !important;
  line-height: 1.08 !important;
}

body.rq-phone-landscape.is-playing .audio-card audio {
  height: 28px !important;
  min-height: 28px !important;
}

body.rq-phone-landscape.is-playing .audio-card .actions-row {
  gap: 4px !important;
}

body.rq-phone-landscape.is-playing .audio-card .actions-row .secondary-btn {
  min-height: 25px !important;
  padding: 4px 6px !important;
  border-radius: 10px !important;
  font-size: .58rem !important;
  line-height: 1 !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat,
body.rq-phone-landscape.is-playing .top-hud .stat-round,
body.rq-phone-landscape.is-playing .top-hud .stat-score,
body.rq-phone-landscape.is-playing .top-hud .stat-time,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat-round,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat-score,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat-time {
  z-index: 1162 !important;
}


/* v7.0.22 phone landscape hard final align
   Mobile-only: result/listening states share one HUD coordinate system; player sits directly below RadioQuest. */
body.rq-phone-landscape.is-playing .top-hud .logo-lockup {
  position: fixed !important;
  top: var(--rq-js-logo-top, max(6px, env(safe-area-inset-top))) !important;
  left: var(--rq-js-logo-left, max(6px, env(safe-area-inset-left))) !important;
  width: var(--rq-js-logo-w, 150px) !important;
  max-width: var(--rq-js-logo-w, 150px) !important;
  height: var(--rq-js-logo-h, 38px) !important;
  min-height: var(--rq-js-logo-h, 38px) !important;
  border-radius: 15px !important;
  z-index: 1180 !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat-round,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat-round {
  position: fixed !important;
  top: var(--rq-js-stat-top, max(6px, env(safe-area-inset-top))) !important;
  left: var(--rq-js-stat-start-x, calc(100dvw - 238px)) !important;
  right: auto !important;
  transform: none !important;
  translate: none !important;
  width: var(--rq-js-stat-w, 70px) !important;
  min-width: var(--rq-js-stat-w, 70px) !important;
  max-width: var(--rq-js-stat-w, 70px) !important;
  height: var(--rq-js-stat-h, 48px) !important;
  min-height: var(--rq-js-stat-h, 48px) !important;
  z-index: 1182 !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat-score,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat-score {
  position: fixed !important;
  top: var(--rq-js-stat-top, max(6px, env(safe-area-inset-top))) !important;
  left: calc(var(--rq-js-stat-start-x, calc(100dvw - 238px)) + var(--rq-js-stat-w, 70px) + var(--rq-js-stat-gap, 4px)) !important;
  right: auto !important;
  transform: none !important;
  translate: none !important;
  width: var(--rq-js-stat-w, 70px) !important;
  min-width: var(--rq-js-stat-w, 70px) !important;
  max-width: var(--rq-js-stat-w, 70px) !important;
  height: var(--rq-js-stat-h, 48px) !important;
  min-height: var(--rq-js-stat-h, 48px) !important;
  z-index: 1182 !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat-time,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat-time,
body.rq-phone-landscape.is-playing .top-hud .timer,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .timer {
  position: fixed !important;
  top: var(--rq-js-stat-top, max(6px, env(safe-area-inset-top))) !important;
  left: calc(var(--rq-js-stat-start-x, calc(100dvw - 238px)) + (var(--rq-js-stat-w, 70px) + var(--rq-js-stat-gap, 4px)) * 2) !important;
  right: auto !important;
  transform: none !important;
  translate: none !important;
  width: var(--rq-js-stat-w, 70px) !important;
  min-width: var(--rq-js-stat-w, 70px) !important;
  max-width: var(--rq-js-stat-w, 70px) !important;
  height: var(--rq-js-stat-h, 48px) !important;
  min-height: var(--rq-js-stat-h, 48px) !important;
  z-index: 1182 !important;
}

body.rq-phone-landscape.is-playing aside.audio-card,
body.rq-phone-landscape.is-playing .audio-card,
body.rq-phone-landscape.is-playing:not(.showing-round-result) aside.audio-card,
body.rq-phone-landscape.is-playing:not(.showing-round-result) .audio-card {
  position: fixed !important;
  top: var(--rq-js-audio-top, 45px) !important;
  left: var(--rq-js-logo-left, max(6px, env(safe-area-inset-left))) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--rq-js-audio-w, 150px) !important;
  max-width: var(--rq-js-audio-w, 150px) !important;
  min-width: 0 !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  transform-origin: top left !important;
  border-radius: 15px !important;
  padding: 5px 6px !important;
  gap: 3px !important;
  z-index: 1178 !important;
}

body.rq-phone-landscape.is-playing .audio-card .audio-copy h2 {
  font-size: .66rem !important;
  line-height: .95 !important;
}

body.rq-phone-landscape.is-playing .audio-card .audio-copy p,
body.rq-phone-landscape.is-playing .audio-card .wave-orb {
  display: none !important;
}

body.rq-phone-landscape.is-playing .audio-card audio {
  width: 100% !important;
  height: 22px !important;
  min-height: 22px !important;
}

body.rq-phone-landscape.is-playing .audio-card .actions-row {
  grid-template-columns: 1fr 1fr !important;
  gap: 3px !important;
}

body.rq-phone-landscape.is-playing .audio-card .actions-row .secondary-btn {
  min-height: 19px !important;
  padding: 2px 4px !important;
  border-radius: 9px !important;
  font-size: .48rem !important;
}


/* v7.0.23 phone landscape real-right HUD + attached player fix
   Final mobile-only override: HUD stats anchor from the right edge in every game state;
   the Find the signal player is attached directly below the RadioQuest brand block. */
body.rq-phone-landscape.is-playing .top-hud .logo-lockup {
  position: fixed !important;
  top: var(--rq-js-logo-top, 6px) !important;
  left: var(--rq-js-logo-left, 6px) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--rq-js-logo-w, 142px) !important;
  max-width: var(--rq-js-logo-w, 142px) !important;
  height: var(--rq-js-logo-h, 34px) !important;
  min-height: var(--rq-js-logo-h, 34px) !important;
  margin: 0 !important;
  border-radius: 13px !important;
  transform: none !important;
  translate: none !important;
  z-index: 1200 !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat-round,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat-round {
  position: fixed !important;
  top: var(--rq-js-stat-top, 6px) !important;
  right: var(--rq-js-stat-right-round, 156px) !important;
  left: auto !important;
  bottom: auto !important;
  width: var(--rq-js-stat-w, 66px) !important;
  min-width: var(--rq-js-stat-w, 66px) !important;
  max-width: var(--rq-js-stat-w, 66px) !important;
  height: var(--rq-js-stat-h, 46px) !important;
  min-height: var(--rq-js-stat-h, 46px) !important;
  margin: 0 !important;
  transform: none !important;
  translate: none !important;
  z-index: 1202 !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat-score,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat-score {
  position: fixed !important;
  top: var(--rq-js-stat-top, 6px) !important;
  right: var(--rq-js-stat-right-score, 81px) !important;
  left: auto !important;
  bottom: auto !important;
  width: var(--rq-js-stat-w, 66px) !important;
  min-width: var(--rq-js-stat-w, 66px) !important;
  max-width: var(--rq-js-stat-w, 66px) !important;
  height: var(--rq-js-stat-h, 46px) !important;
  min-height: var(--rq-js-stat-h, 46px) !important;
  margin: 0 !important;
  transform: none !important;
  translate: none !important;
  z-index: 1202 !important;
}

body.rq-phone-landscape.is-playing .top-hud .stat-time,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .stat-time,
body.rq-phone-landscape.is-playing .top-hud .timer,
body.rq-phone-landscape.showing-round-result.is-playing .top-hud .timer {
  position: fixed !important;
  top: var(--rq-js-stat-top, 6px) !important;
  right: var(--rq-js-stat-right-time, 6px) !important;
  left: auto !important;
  bottom: auto !important;
  width: var(--rq-js-stat-w, 66px) !important;
  min-width: var(--rq-js-stat-w, 66px) !important;
  max-width: var(--rq-js-stat-w, 66px) !important;
  height: var(--rq-js-stat-h, 46px) !important;
  min-height: var(--rq-js-stat-h, 46px) !important;
  margin: 0 !important;
  transform: none !important;
  translate: none !important;
  z-index: 1202 !important;
}

body.rq-phone-landscape.is-playing aside.audio-card,
body.rq-phone-landscape.is-playing .audio-card,
body.rq-phone-landscape.is-playing:not(.showing-round-result) aside.audio-card,
body.rq-phone-landscape.is-playing:not(.showing-round-result) .audio-card {
  position: fixed !important;
  top: var(--rq-js-audio-top, 42px) !important;
  left: var(--rq-js-logo-left, 6px) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--rq-js-audio-w, 142px) !important;
  max-width: var(--rq-js-audio-w, 142px) !important;
  min-width: 0 !important;
  margin: 0 !important;
  border-radius: 13px !important;
  padding: 4px 5px !important;
  gap: 3px !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  transform-origin: top left !important;
  z-index: 1198 !important;
}

body.rq-phone-landscape.is-playing .audio-card .audio-copy h2 {
  font-size: .64rem !important;
  line-height: .9 !important;
  margin: 0 0 2px !important;
}

body.rq-phone-landscape.is-playing .audio-card .audio-copy p,
body.rq-phone-landscape.is-playing .audio-card .wave-orb {
  display: none !important;
}

body.rq-phone-landscape.is-playing .audio-card audio {
  width: 100% !important;
  height: 21px !important;
  min-height: 21px !important;
}

body.rq-phone-landscape.is-playing .audio-card .actions-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 3px !important;
}

body.rq-phone-landscape.is-playing .audio-card .actions-row .secondary-btn {
  min-height: 18px !important;
  padding: 2px 4px !important;
  border-radius: 999px !important;
  font-size: .46rem !important;
}


/* v7.0.24 phone landscape overlay finalizer
   Mobile-only. HUD/player are detached into #rqPhoneLandscapeOverlay by app.js,
   so old game states cannot move them. RadioQuest remains visible during result. */
body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100dvw !important;
  height: 100dvh !important;
  pointer-events: none !important;
  z-index: 2147483000 !important;
  transform: none !important;
  translate: none !important;
}

body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .logo-lockup {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  border-radius: 14px !important;
  padding: 5px 7px !important;
  gap: 7px !important;
  box-sizing: border-box !important;
}

body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .logo-dot {
  width: 22px !important;
  height: 22px !important;
  box-shadow: 0 0 0 7px rgba(34, 211, 238, .10) !important;
}

body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .logo-lockup strong {
  font-size: .78rem !important;
  line-height: .92 !important;
}

body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .logo-lockup small {
  font-size: .48rem !important;
  line-height: .9 !important;
  letter-spacing: .16em !important;
  margin-top: 2px !important;
}

body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .stat,
body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .stat-round,
body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .stat-score,
body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .stat-time {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
  border-radius: 14px !important;
  padding: 6px 7px !important;
  text-align: center !important;
}

body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .stat span {
  font-size: .48rem !important;
  line-height: 1 !important;
  letter-spacing: .17em !important;
}

body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .stat strong {
  font-size: .92rem !important;
  line-height: 1.05 !important;
}

body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .audio-card {
  box-sizing: border-box !important;
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  border-radius: 14px !important;
  padding: 4px 5px !important;
  gap: 3px !important;
  pointer-events: auto !important;
}

body.rq-phone-landscape.showing-round-result.is-playing #rqPhoneLandscapeOverlay .audio-card {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .audio-card .wave-orb,
body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .audio-card .audio-copy p {
  display: none !important;
}

body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .audio-card .audio-copy h2 {
  font-size: .68rem !important;
  line-height: .9 !important;
  margin: 0 0 3px !important;
  white-space: nowrap !important;
}

body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .audio-card audio {
  width: 100% !important;
  height: 23px !important;
  min-height: 23px !important;
}

body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .audio-card .actions-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 3px !important;
  margin: 0 !important;
}

body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .audio-card .actions-row .secondary-btn {
  min-height: 19px !important;
  padding: 2px 4px !important;
  border-radius: 999px !important;
  font-size: .46rem !important;
  line-height: 1 !important;
}


/* v7.0.25 UI stability polish
   No gameplay changes: mobile landscape gets one locked visual system, while desktop stays untouched. */
body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .logo-lockup,
body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .audio-card,
body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .stat,
body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .stat-round,
body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .stat-score,
body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .stat-time,
body.rq-phone-landscape.is-playing .bottom-panel,
body.rq-phone-landscape.is-playing .game-avatar-bubble,
body.rq-phone-landscape.is-playing .exit-btn,
body.rq-phone-landscape.is-playing .result-modal {
  background: linear-gradient(145deg, rgba(15, 23, 42, .90), rgba(15, 23, 42, .78)) !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  box-shadow: 0 16px 38px rgba(2, 8, 23, .28), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  backdrop-filter: blur(14px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
}

body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .logo-lockup {
  border-radius: 15px !important;
  padding: 4px 7px !important;
  gap: 7px !important;
}

body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .logo-dot {
  width: 20px !important;
  height: 20px !important;
}

body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .logo-lockup strong {
  font-size: .72rem !important;
  letter-spacing: -.02em !important;
}

body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .logo-lockup small {
  font-size: .44rem !important;
  letter-spacing: .15em !important;
}

body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .audio-card {
  border-radius: 0 0 15px 15px !important;
  padding: 4px 5px 5px !important;
  gap: 4px !important;
}

body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .audio-card .audio-copy h2 {
  font-size: .62rem !important;
  letter-spacing: -.01em !important;
  margin-bottom: 2px !important;
}

body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .audio-card audio {
  height: 22px !important;
  min-height: 22px !important;
  border-radius: 999px !important;
}

body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .audio-card .actions-row .secondary-btn {
  min-height: 18px !important;
  font-size: .44rem !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
}

body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .stat,
body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .stat-round,
body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .stat-score,
body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .stat-time {
  border-radius: 15px !important;
  padding: 5px 6px !important;
}

body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .stat span {
  font-size: .44rem !important;
  letter-spacing: .18em !important;
  color: rgba(226, 232, 240, .72) !important;
}

body.rq-phone-landscape.is-playing #rqPhoneLandscapeOverlay .stat strong {
  font-size: .88rem !important;
  letter-spacing: .06em !important;
}

body.rq-phone-landscape.is-playing .bottom-panel {
  border-radius: 16px !important;
  min-height: 48px !important;
  padding: 9px 12px !important;
}

body.rq-phone-landscape.is-playing .bottom-panel .eyebrow,
body.rq-phone-landscape.is-playing .bottom-panel .panel-label {
  letter-spacing: .22em !important;
}

body.rq-phone-landscape.is-playing .primary-btn,
body.rq-phone-landscape.is-playing .secondary-btn,
body.rq-phone-landscape.is-playing .exit-btn {
  border-radius: 999px !important;
}

body.rq-phone-landscape.is-playing .game-avatar-bubble {
  border-radius: 14px !important;
  max-width: 170px !important;
  padding: 8px 11px !important;
  line-height: 1.08 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal {
  width: min(44vw, 430px) !important;
  max-width: 430px !important;
  min-width: 360px !important;
  left: auto !important;
  right: clamp(70px, 9vw, 140px) !important;
  top: 52% !important;
  transform: translateY(-50%) !important;
  padding: 10px 12px !important;
  border-radius: 17px !important;
  gap: 7px !important;
  animation: rqResultPolishIn .22s ease-out both !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal h2 {
  font-size: .78rem !important;
  line-height: 1 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .distance-callout {
  padding: 8px 10px !important;
  border-radius: 14px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .distance-callout span,
body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid span {
  font-size: .45rem !important;
  letter-spacing: .18em !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .distance-callout strong {
  font-size: 1.22rem !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid {
  gap: 6px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid > div {
  padding: 7px 9px !important;
  border-radius: 13px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid strong {
  font-size: .70rem !important;
  line-height: 1.12 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .compact-note {
  font-size: .66rem !important;
  margin-top: 1px !important;
}

@keyframes rqResultPolishIn {
  from { opacity: .86; transform: translateY(-48%) scale(.985); }
  to { opacity: 1; transform: translateY(-50%) scale(1); }
}

/* v7.0.26 main menu polish + phone overlay lifecycle fix
   Visual polish only: start/final menu get a cleaner hero card and the gameplay overlay is hidden outside the game screen. */
body:not(.is-playing) #rqPhoneLandscapeOverlay,
body:not(.is-playing) #rqPhoneLandscapeOverlay * {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.start-screen {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 4vw, 54px) clamp(14px, 3vw, 34px) clamp(28px, 5vw, 64px) !important;
}

.start-screen::before {
  content: "";
  position: absolute;
  inset: -18% -10% auto -10%;
  height: 52%;
  background:
    radial-gradient(circle at 20% 30%, rgba(56, 189, 248, .22), transparent 34%),
    radial-gradient(circle at 78% 14%, rgba(168, 85, 247, .20), transparent 30%),
    linear-gradient(180deg, rgba(15, 23, 42, .22), transparent);
  filter: blur(4px);
  pointer-events: none;
  z-index: 0;
}

.start-screen > * {
  position: relative;
  z-index: 1;
}

.start-screen .brand-pill,
.final-screen .brand-pill {
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  background: linear-gradient(145deg, rgba(15, 23, 42, .82), rgba(30, 41, 59, .64)) !important;
  box-shadow: 0 12px 30px rgba(2, 8, 23, .16), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
  backdrop-filter: blur(14px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.12) !important;
}

.start-screen h1 {
  text-shadow: 0 18px 42px rgba(2, 8, 23, .28) !important;
  letter-spacing: -.065em !important;
}

.start-screen .tagline {
  max-width: 760px !important;
  margin-inline: auto !important;
  color: rgba(226, 232, 240, .76) !important;
}

.auth-shell,
.start-card,
.final-hero-card,
.leaderboard-card,
.profile-card {
  border-radius: 26px !important;
}

.auth-card,
.start-card.start-card-v12,
.final-hero-card,
.leaderboard-card,
.profile-card,
.status-pill,
.auth-message {
  border: 1px solid rgba(148, 163, 184, .18) !important;
  background: linear-gradient(145deg, rgba(15, 23, 42, .86), rgba(15, 23, 42, .66)) !important;
  box-shadow: 0 18px 54px rgba(2, 8, 23, .22), inset 0 1px 0 rgba(255, 255, 255, .055) !important;
  backdrop-filter: blur(16px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.12) !important;
}

.start-card.start-card-v12 {
  max-width: 980px !important;
  margin-inline: auto !important;
  padding: clamp(16px, 2.2vw, 26px) !important;
}

.account-actions {
  gap: 10px !important;
}

.account-actions .primary-btn,
.account-actions .secondary-btn,
.auth-card .primary-btn,
.auth-card .secondary-btn,
.final-actions .primary-btn,
.final-actions .secondary-btn {
  border-radius: 999px !important;
  min-height: 42px !important;
  box-shadow: 0 12px 26px rgba(2, 8, 23, .16) !important;
}

.mode-info,
.account-lockup,
.nickname-field,
.account-stats,
.avatar-picker {
  border-radius: 18px !important;
}

.final-screen {
  padding-inline: clamp(14px, 3vw, 36px) !important;
}

.final-hero-card {
  max-width: 780px !important;
  margin-inline: auto !important;
}

@media (hover: none) and (pointer: coarse) and (max-width: 980px) {
  .start-screen {
    min-height: 100dvh !important;
    padding: 14px 12px 18px !important;
    justify-content: flex-start !important;
  }

  .start-screen .brand-pill {
    font-size: .58rem !important;
    padding: 7px 10px !important;
    margin-top: 2px !important;
  }

  .start-screen h1 {
    font-size: clamp(2.35rem, 12vw, 4.1rem) !important;
    margin: 8px 0 4px !important;
    line-height: .88 !important;
  }

  .start-screen .tagline {
    max-width: 92vw !important;
    font-size: .80rem !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
  }

  .auth-shell {
    gap: 10px !important;
    width: min(100%, 760px) !important;
  }

  .auth-card,
  .start-card.start-card-v12 {
    border-radius: 18px !important;
    padding: 12px !important;
  }

  .auth-card h2 {
    font-size: 1rem !important;
  }

  .auth-card p,
  .small-note {
    font-size: .72rem !important;
    line-height: 1.35 !important;
  }

  .account-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .account-actions .primary-btn,
  .account-actions .secondary-btn,
  .auth-card .primary-btn,
  .auth-card .secondary-btn {
    min-height: 36px !important;
    font-size: .76rem !important;
    padding-inline: 10px !important;
  }

  .status-pill {
    margin-top: 10px !important;
    font-size: .64rem !important;
    padding: 7px 10px !important;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 560px) {
  .start-screen {
    display: grid !important;
    align-content: start !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  .start-screen h1 {
    font-size: clamp(2rem, 7vw, 3rem) !important;
    margin: 2px 0 !important;
  }

  .start-screen .tagline,
  .small-note {
    display: none !important;
  }

  .start-card.start-card-v12 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: min(100%, 940px) !important;
    padding: 10px !important;
  }

  .start-card.start-card-v12 .account-actions {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .start-card.start-card-v12 .avatar-picker,
  .start-card.start-card-v12 .account-stats {
    max-height: 112px !important;
    overflow: auto !important;
  }
}


/* v7.0.27 radio feedback + game feel polish
   Existing gameplay only: clearer tuning states, button states, result pop, marker/route feedback and safe final CSS override. */
.audio-card {
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease !important;
}
.audio-card[data-signal-state="tuning"],
.audio-card[data-signal-state="loading"] {
  border-color: rgba(34, 211, 238, .46) !important;
  box-shadow: 0 18px 42px rgba(8, 47, 73, .28), 0 0 0 1px rgba(34, 211, 238, .12) inset !important;
}
.audio-card[data-signal-state="locked"] {
  border-color: rgba(52, 211, 153, .40) !important;
  box-shadow: 0 18px 42px rgba(6, 78, 59, .24), 0 0 0 1px rgba(52, 211, 153, .12) inset !important;
}
.audio-card[data-signal-state="error"] {
  border-color: rgba(248, 113, 113, .48) !important;
  box-shadow: 0 18px 42px rgba(127, 29, 29, .22), 0 0 0 1px rgba(248, 113, 113, .10) inset !important;
}
.audio-card[data-signal-state="tuning"] .wave-orb,
.audio-card[data-signal-state="loading"] .wave-orb {
  animation: rqSignalPulse 1.1s ease-in-out infinite !important;
}
.audio-card[data-signal-state="locked"] .wave-orb {
  animation: rqSignalLock .72s ease-out 1 !important;
}
@keyframes rqSignalPulse {
  0%, 100% { transform: scale(.92); opacity: .62; }
  50% { transform: scale(1.08); opacity: 1; }
}
@keyframes rqSignalLock {
  0% { transform: scale(.78); opacity: .55; }
  55% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: .88; }
}
.primary-btn,
.secondary-btn {
  transition: transform .14s ease, filter .14s ease, opacity .14s ease, box-shadow .18s ease, border-color .18s ease !important;
}
.primary-btn:not(:disabled):active,
.secondary-btn:not(:disabled):active {
  transform: translateY(1px) scale(.985) !important;
}
.primary-btn:disabled,
.secondary-btn:disabled,
.primary-btn.is-disabled,
.secondary-btn.is-disabled {
  opacity: .48 !important;
  filter: saturate(.72) brightness(.86) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}
.primary-btn.is-loading,
.secondary-btn.is-loading {
  position: relative !important;
  opacity: .82 !important;
  pointer-events: none !important;
}
.primary-btn.is-loading::after,
.secondary-btn.is-loading::after {
  content: "";
  display: inline-block;
  width: .7em;
  height: .7em;
  margin-left: .55em;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  vertical-align: -.08em;
  animation: rqButtonSpin .75s linear infinite;
}
@keyframes rqButtonSpin { to { transform: rotate(360deg); } }
#guessBtn.ready {
  animation: rqGuessReady 1.5s ease-in-out infinite !important;
}
@keyframes rqGuessReady {
  0%, 100% { box-shadow: 0 0 0 4px rgba(34,211,238,.10), 0 14px 34px rgba(34,211,238,.22); }
  50% { box-shadow: 0 0 0 7px rgba(34,211,238,.18), 0 18px 42px rgba(34,211,238,.30); }
}
.stat.score-pop,
.stat:has(#scoreLabel).score-pop {
  animation: rqScorePop .68s cubic-bezier(.2, 1.45, .35, 1) 1 !important;
}
@keyframes rqScorePop {
  0% { transform: scale(1); }
  45% { transform: scale(1.08); filter: brightness(1.2); }
  100% { transform: scale(1); }
}
.result-modal.result-pop-in {
  animation: rqResultPop .42s cubic-bezier(.2, 1.25, .35, 1) 1 !important;
}
@keyframes rqResultPop {
  0% { opacity: 0; transform: translateY(10px) scale(.965); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.result-modal.result-grade-excellent {
  border-color: rgba(52, 211, 153, .44) !important;
  box-shadow: 0 22px 60px rgba(6, 78, 59, .22), 0 0 0 1px rgba(52, 211, 153, .10) inset !important;
}
.result-modal.result-grade-good {
  border-color: rgba(34, 211, 238, .42) !important;
}
.result-modal.result-grade-far,
.result-modal.result-grade-skipped {
  border-color: rgba(251, 146, 60, .38) !important;
}
.result-modal.result-grade-excellent .round-points strong { color: #34d399 !important; }
.result-modal.result-grade-good .round-points strong { color: #22d3ee !important; }
.result-modal.result-grade-far .round-points strong,
.result-modal.result-grade-skipped .round-points strong { color: #fb923c !important; }
.custom-pin.locked {
  animation: rqPinFocus 1.2s ease-out 1 !important;
}
.custom-pin.answer.drop-in,
.custom-pin.answer {
  box-shadow: 0 0 0 6px rgba(52, 211, 153, .16), 0 12px 30px rgba(0,0,0,.35) !important;
}
@keyframes rqPinFocus {
  0% { box-shadow: 0 0 0 0 rgba(139,92,246,.28), 0 10px 28px rgba(0,0,0,.35); }
  70% { box-shadow: 0 0 0 10px rgba(139,92,246,.08), 0 10px 28px rgba(0,0,0,.35); }
  100% { box-shadow: 0 0 0 5px rgba(139,92,246,.18), 0 10px 28px rgba(0,0,0,.35); }
}
.result-travel-line {
  stroke-linecap: round !important;
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, .46)) !important;
}
body.rq-phone-landscape.is-playing .audio-card[data-signal-state="tuning"] .audio-copy p,
body.rq-phone-landscape.is-playing .audio-card[data-signal-state="loading"] .audio-copy p {
  color: rgba(186, 230, 253, .96) !important;
}
body.rq-phone-landscape.is-playing .audio-card[data-signal-state="locked"] .audio-copy p {
  color: rgba(187, 247, 208, .94) !important;
}
body.rq-phone-landscape.is-playing .audio-card[data-signal-state="error"] .audio-copy p {
  color: rgba(254, 202, 202, .96) !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal {
  transform-origin: center center !important;
}

/* v7.0.28 phone result panel compact safe-zone
   Mobile-only: keep the result card off the map focus by making it narrower and anchoring it to the right edge. */
body.rq-phone-landscape.showing-round-result.is-playing .result-modal {
  width: clamp(235px, 30dvw, 292px) !important;
  min-width: 0 !important;
  max-width: 292px !important;
  right: max(8px, env(safe-area-inset-right)) !important;
  left: auto !important;
  top: 57% !important;
  transform: translateY(-50%) !important;
  padding: 8px 9px !important;
  gap: 5px !important;
  border-radius: 15px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal h2 {
  font-size: .68rem !important;
  line-height: .95 !important;
  margin: 0 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .distance-callout {
  padding: 6px 8px !important;
  border-radius: 12px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .distance-callout span,
body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid span {
  font-size: .38rem !important;
  letter-spacing: .14em !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .distance-callout strong {
  font-size: .95rem !important;
  line-height: 1 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid {
  gap: 4px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid > div {
  padding: 5px 6px !important;
  border-radius: 11px !important;
  min-width: 0 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid strong {
  font-size: .58rem !important;
  line-height: 1.05 !important;
  overflow-wrap: anywhere !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .compact-note {
  font-size: .54rem !important;
  line-height: 1.15 !important;
  margin-top: 0 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal .primary-btn,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal .secondary-btn {
  min-height: 26px !important;
  padding: 5px 8px !important;
  font-size: .58rem !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-pop-in {
  animation: rqResultCompactPop .28s cubic-bezier(.2, 1.15, .35, 1) 1 !important;
}

@keyframes rqResultCompactPop {
  from { opacity: .9; transform: translateY(-48%) scale(.965); }
  to { opacity: 1; transform: translateY(-50%) scale(1); }
}

/* v7.0.29 shop tier rebuild: 01_basic → 07_impossible */
.shop-dialog {
  width: min(1180px, calc(100vw - 24px));
}
.shop-dialog-card {
  background:
    radial-gradient(circle at 16% 0%, rgba(34, 211, 238, .16), transparent 28%),
    radial-gradient(circle at 90% 10%, rgba(167, 139, 250, .15), transparent 30%),
    linear-gradient(145deg, rgba(7, 14, 28, .985), rgba(15, 28, 52, .97));
}
.shop-balance-row {
  background:
    linear-gradient(135deg, rgba(251, 191, 36, .16), rgba(255,255,255,.055));
  border-color: rgba(251, 191, 36, .22);
}
.shop-preview-row-compact {
  grid-template-columns: 70px 1fr;
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 211, 238, .14), transparent 42%),
    rgba(255,255,255,.055);
}
.shop-preview-placeholder {
  background:
    radial-gradient(circle at 35% 22%, rgba(255,255,255,.24), transparent 38%),
    linear-gradient(145deg, rgba(34, 211, 238, .24), rgba(168, 85, 247, .18));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 14px 32px rgba(0,0,0,.24);
}
.shop-status {
  display: grid;
  gap: 8px;
}
.shop-status-line {
  display: block;
  color: #cbd5e1;
  font-weight: 900;
  font-size: .82rem;
}
.shop-tier-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0 6px;
}
.shop-tier-strip button {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 9px 7px;
  min-width: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.16), transparent 42%),
    rgba(255,255,255,.06);
  color: var(--text);
  display: grid;
  justify-items: center;
  gap: 2px;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(0,0,0,.16);
}
.shop-tier-strip button:hover {
  transform: translateY(-1px);
  border-color: rgba(34, 211, 238, .36);
}
.shop-tier-strip span {
  font-size: 1.25rem;
  line-height: 1;
}
.shop-tier-strip strong {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-tier-strip em {
  font-style: normal;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 1000;
}
.shop-grid {
  grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
  align-items: stretch;
}
.shop-item {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 10px;
  min-height: 288px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.shop-item:hover {
  transform: translateY(-3px);
}
.shop-item-topline {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.shop-tier-order {
  color: rgba(226,232,240,.55);
  font-size: .64rem;
  font-weight: 1000;
  text-transform: uppercase;
}
.shop-item-static .static-card-preview {
  height: 116px;
  margin-bottom: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.18), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
}
.shop-item-static .static-card-preview span {
  font-size: 2.95rem;
}
.shop-item-body {
  display: grid;
  gap: 5px;
}
.shop-item-body small {
  display: block;
  margin-top: 4px;
  color: #cbd5e1;
  font-size: .74rem;
  font-weight: 850;
}
.shop-item-body p {
  min-height: unset;
  margin: 0;
  color: #e2e8f0;
  font-weight: 1000;
}
.shop-item.owned .shop-item-body p {
  color: #67e8f9;
}
.shop-rarity {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.shop-item.rarity-basic { --tier: #94a3b8; border-color: rgba(148, 163, 184, .7); }
.shop-item.rarity-rare { --tier: #38bdf8; border-color: rgba(56, 189, 248, .82); box-shadow: 0 18px 52px rgba(56, 189, 248, .14); }
.shop-item.rarity-epic { --tier: #c084fc; border-color: rgba(192, 132, 252, .9); box-shadow: 0 18px 55px rgba(168, 85, 247, .20); }
.shop-item.rarity-legendary { --tier: #fbbf24; border-color: rgba(251, 191, 36, .95); box-shadow: 0 20px 60px rgba(245, 158, 11, .24); }
.shop-item.rarity-mythic { --tier: #fb7185; border-color: rgba(251, 113, 133, .95); box-shadow: 0 20px 60px rgba(244, 63, 94, .18); }
.shop-item.rarity-exotic { --tier: #2dd4bf; border-color: rgba(45, 212, 191, .95); box-shadow: 0 20px 60px rgba(20, 184, 166, .18); }
.shop-item.rarity-impossible { --tier: #fff; }
.shop-item.rarity-basic .shop-rarity,
.shop-detail-meta.rarity-basic strong { color: #e2e8f0; }
.shop-item.rarity-rare .shop-rarity,
.shop-detail-meta.rarity-rare strong { color: #bae6fd; background: rgba(56, 189, 248, .22); border-color: rgba(125, 211, 252, .55); }
.shop-item.rarity-epic .shop-rarity,
.shop-detail-meta.rarity-epic strong { color: #f3e8ff; background: rgba(168, 85, 247, .28); border-color: rgba(216, 180, 254, .62); }
.shop-item.rarity-legendary .shop-rarity,
.shop-detail-meta.rarity-legendary strong { color: #fff7ed; background: rgba(245, 158, 11, .30); border-color: rgba(251, 191, 36, .72); }
.shop-item.rarity-mythic .shop-rarity,
.shop-detail-meta.rarity-mythic strong { color: #ffe4e6; background: rgba(244, 63, 94, .28); border-color: rgba(251, 113, 133, .68); }
.shop-item.rarity-exotic .shop-rarity,
.shop-detail-meta.rarity-exotic strong { color: #ccfbf1; background: rgba(20, 184, 166, .26); border-color: rgba(94, 234, 212, .62); }
.shop-item.rarity-impossible .shop-rarity,
.shop-detail-meta.rarity-impossible strong { color: #fff; background: linear-gradient(135deg, rgba(236,72,153,.32), rgba(34,211,238,.22)); border-color: rgba(255,255,255,.62); }
.shop-item.rarity-basic .static-card-preview { color: #cbd5e1; }
.shop-item.rarity-rare .static-card-preview { color: #7dd3fc; }
.shop-item.rarity-epic .static-card-preview { color: #c084fc; }
.shop-item.rarity-legendary .static-card-preview { color: #fbbf24; }
.shop-item.rarity-mythic .static-card-preview { color: #fb7185; }
.shop-item.rarity-exotic .static-card-preview { color: #2dd4bf; }
.shop-item.rarity-impossible .static-card-preview { color: #fff; }
.shop-detail-hero {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 14px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.18), transparent 42%),
    rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  text-align: center;
}
.shop-detail-hero span {
  font-size: 2.5rem;
  line-height: 1;
}
.shop-detail-hero strong {
  text-transform: uppercase;
  letter-spacing: .08em;
}
.shop-detail-hero em {
  color: var(--muted);
  font-style: normal;
  font-size: .82rem;
  font-weight: 800;
}
.inventory-item.rarity-rare { border-color: rgba(56, 189, 248, .78); }
.inventory-item.rarity-mythic { border-color: rgba(251, 113, 133, .82); }
.inventory-item.rarity-exotic { border-color: rgba(45, 212, 191, .82); }
.inventory-item.rarity-impossible { border-color: rgba(255,255,255,.82); box-shadow: 0 0 0 2px rgba(255,255,255,.10) inset; }
@media (max-width: 760px) {
  .shop-dialog {
    width: calc(100vw - 8px);
    max-height: calc(100dvh - 8px);
  }
  .shop-dialog-card {
    padding: 12px;
    border-radius: 22px;
    max-height: calc(100dvh - 10px);
  }
  .shop-preview-row-compact {
    grid-template-columns: 54px 1fr;
    gap: 10px;
    padding: 10px;
  }
  .shop-preview-placeholder {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    font-size: 1.6rem;
  }
  .shop-tier-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .shop-tier-strip button {
    border-radius: 14px;
    padding: 7px 5px;
  }
  .shop-tier-strip span {
    font-size: 1.05rem;
  }
  .shop-tier-strip strong {
    font-size: .58rem;
  }
  .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .shop-item {
    min-height: 242px;
    padding: 9px;
    border-radius: 18px;
    gap: 8px;
  }
  .shop-item-static .static-card-preview {
    height: 82px;
    border-radius: 16px;
  }
  .shop-item-static .static-card-preview span {
    font-size: 2.25rem;
  }
  .shop-item-body h3 {
    font-size: .9rem;
    line-height: 1.08;
  }
  .shop-item-body small {
    display: none;
  }
  .shop-item-body p {
    display: block;
    font-size: .68rem;
  }
  .shop-tier-order {
    display: none;
  }
  .shop-item button {
    min-height: 38px;
    padding: 8px 9px;
    font-size: .76rem;
  }
}
@media (max-width: 920px) and (orientation: landscape) {
  .shop-dialog {
    width: calc(100dvw - 10px);
    max-height: calc(100dvh - 8px);
  }
  .shop-dialog-card {
    max-height: calc(100dvh - 8px);
  }
  .shop-grid {
    grid-template-columns: repeat(4, minmax(116px, 1fr));
  }
  .shop-item {
    min-height: 220px;
  }
  .shop-item-static .static-card-preview {
    height: 68px;
  }
  .shop-filter-row {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }
  .shop-detail-card {
    max-height: calc(100dvh - 8px);
    overflow: auto;
  }
  .shop-detail-layout {
    grid-template-columns: minmax(230px, .95fr) minmax(230px, 1.05fr);
  }
  .shop-detail-avatar3d {
    min-height: min(64dvh, 310px);
  }
}

/* v7.0.30 shop characters-only + static 3D card previews */
.shop-tabs-characters-only {
  grid-template-columns: minmax(180px, 280px);
  justify-content: start;
}
.shop-tabs-characters-only button.active {
  cursor: default;
}
.shop-dialog-card .shop-filter-row {
  display: none !important;
}
.shop-tier-strip {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.shop-tier-strip button.active {
  border-color: rgba(34, 211, 238, .78);
  background:
    radial-gradient(circle at 50% 0%, rgba(34, 211, 238, .26), transparent 44%),
    rgba(34, 211, 238, .10);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, .20) inset, 0 16px 34px rgba(8, 47, 73, .28);
  transform: translateY(-1px);
}
.shop-tier-strip .shop-tier-all {
  --tier: #67e8f9;
}
.shop-card-avatar3d {
  position: relative;
  overflow: hidden;
  min-height: 132px;
  padding: 0;
  isolation: isolate;
}
.shop-card-avatar3d::after {
  content: '';
  position: absolute;
  inset: auto 18% 8px;
  height: 14px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(34,211,238,.28), transparent 72%);
  filter: blur(5px);
  pointer-events: none;
  z-index: 0;
}
.shop-card-avatar3d canvas {
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.shop-card-avatar3d .avatar3d-empty {
  min-height: 100%;
  display: grid;
  place-items: center;
  color: #cbd5e1;
  font-weight: 900;
  text-align: center;
  padding: 10px;
}
.shop-item-static .static-card-preview span {
  opacity: .86;
}
@media (max-width: 760px) {
  .shop-tier-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .shop-card-avatar3d {
    min-height: 92px;
  }
}
@media (max-width: 920px) and (orientation: landscape) {
  .shop-tier-strip {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .shop-card-avatar3d {
    min-height: 78px;
  }
}


/* v7.0.31 shop tier-only cleanup */
.shop-tier-order { display: none !important; }
.shop-preview-row-compact span { max-width: 42ch; }

/* v7.0.33 station reliability hotfix: unsigned-safe scoring + PvP pool recovery */

/* v7.0.34 PvP station safety patch: no visual changes */

/* v7.0.35 PvP anti-504 station retune patch */

/* v7.0.40 station pool recovery + PvP station protection
   Runtime behavior only: restored station pool and prevented client/PvP audio
   false negatives from mass-disabling usable radio stations. */


/* v7.0.41 main menu visual identity polish
   Uses the provided main menu PNG assets only on menu screens; gameplay layout remains unchanged. */
:root {
  --rq-menu-bg: url("/assets/ui/main-menu/radioquest-main-bg.png");
}

body {
  background:
    linear-gradient(180deg, rgba(3, 9, 18, .22), rgba(3, 9, 18, .72)),
    var(--rq-menu-bg),
    radial-gradient(circle at 20% 14%, rgba(34, 211, 238, .14), transparent 32%),
    #07111f !important;
  background-size: cover, cover, auto, auto !important;
  background-position: center, center, center, center !important;
  background-attachment: fixed, fixed, scroll, scroll !important;
}

.start-screen {
  width: min(1180px, calc(100% - 28px)) !important;
  min-height: 100dvh !important;
  gap: clamp(10px, 1.5vw, 16px) !important;
}

.start-screen::before {
  inset: 0 !important;
  height: auto !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(15, 23, 42, .08), rgba(2, 6, 23, .54) 68%, rgba(2, 6, 23, .72) 100%),
    linear-gradient(90deg, rgba(2, 6, 23, .58), rgba(2, 6, 23, .12) 30%, rgba(2, 6, 23, .12) 70%, rgba(2, 6, 23, .58)) !important;
  filter: none !important;
}

.start-screen::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 34%),
    radial-gradient(circle at 50% 50%, transparent 0 52%, rgba(0,0,0,.34) 100%);
  z-index: 0;
}

.main-menu-kicker {
  margin-bottom: 0 !important;
  gap: 9px !important;
  color: rgba(191, 219, 254, .92) !important;
  background: rgba(8, 18, 32, .56) !important;
}

.main-menu-kicker img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 5px 13px rgba(34, 211, 238, .26));
}

.main-brand-lockup {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 20px);
  max-width: min(920px, 100%);
  margin: 2px auto 0;
  padding: clamp(14px, 2.2vw, 23px) clamp(18px, 3.4vw, 36px);
  border: 1px solid rgba(191, 219, 254, .18);
  border-radius: 34px;
  background:
    radial-gradient(circle at 9% 12%, rgba(34, 211, 238, .16), transparent 34%),
    linear-gradient(135deg, rgba(8, 18, 32, .78), rgba(15, 30, 50, .58));
  box-shadow:
    0 24px 78px rgba(0, 0, 0, .36),
    inset 0 1px 0 rgba(255,255,255,.075);
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

.main-brand-mark {
  width: clamp(58px, 8vw, 92px);
  height: clamp(58px, 8vw, 92px);
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(34, 211, 238, .24));
}

.main-brand-copy {
  text-align: left;
  min-width: 0;
}

.main-brand-copy h1,
.start-screen .main-brand-copy h1 {
  margin: 0 !important;
  font-size: clamp(3.2rem, 9vw, 7.7rem) !important;
  line-height: .84 !important;
  letter-spacing: -.075em !important;
  text-shadow: 0 20px 56px rgba(0,0,0,.42), 0 0 28px rgba(34, 211, 238, .10) !important;
}

.main-brand-copy span {
  display: block;
  margin-top: clamp(5px, .8vw, 9px);
  color: rgba(226, 232, 240, .82);
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: clamp(.64rem, 1.5vw, .86rem);
}

.start-screen .tagline {
  max-width: 680px !important;
  margin: 4px auto 16px !important;
  color: rgba(226, 232, 240, .80) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.32);
}

.start-card.start-card-v12,
.auth-card,
.auth-message,
.status-pill {
  background:
    radial-gradient(circle at 18% 0%, rgba(34, 211, 238, .12), transparent 30%),
    linear-gradient(145deg, rgba(8, 18, 32, .82), rgba(12, 25, 43, .64)) !important;
  border-color: rgba(191, 219, 254, .18) !important;
  box-shadow: 0 22px 66px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

.start-card.start-card-v12 {
  max-width: 1040px !important;
}

.start-card-v12 .mode-copy strong::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: -3px;
  background: url("/assets/ui/icons/map-pin-small.png") center / contain no-repeat;
  filter: drop-shadow(0 3px 8px rgba(34, 211, 238, .22));
}

.account-actions .primary-btn,
.auth-card .primary-btn {
  background: linear-gradient(135deg, #13b8d7, #3b82f6) !important;
  box-shadow: 0 16px 36px rgba(19, 184, 215, .22) !important;
}

.account-actions .secondary-btn,
.auth-card .secondary-btn {
  background: rgba(8, 18, 32, .58) !important;
}

.fullscreen-btn {
  background: rgba(8, 18, 32, .56) !important;
  border-color: rgba(191, 219, 254, .16) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

@media (max-width: 760px) {
  .main-brand-lockup {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 7px;
    padding: 14px 18px;
    border-radius: 26px;
  }
  .main-brand-copy { text-align: center; }
  .main-brand-mark {
    width: 58px;
    height: 58px;
  }
  .main-brand-copy h1,
  .start-screen .main-brand-copy h1 {
    font-size: clamp(2.9rem, 16vw, 4.3rem) !important;
  }
  .main-brand-copy span {
    letter-spacing: .13em;
    font-size: .62rem;
  }
  .start-screen .tagline {
    font-size: .86rem !important;
    line-height: 1.4 !important;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 560px) {
  .start-screen {
    gap: 6px !important;
    padding: 8px 12px !important;
  }
  .main-menu-kicker {
    display: none !important;
  }
  .main-brand-lockup {
    grid-template-columns: auto 1fr;
    width: min(520px, 48vw);
    justify-self: start;
    padding: 9px 14px;
    border-radius: 22px;
  }
  .main-brand-copy { text-align: left; }
  .main-brand-mark {
    width: 44px;
    height: 44px;
  }
  .main-brand-copy h1,
  .start-screen .main-brand-copy h1 {
    font-size: clamp(1.9rem, 5.8vw, 3rem) !important;
    letter-spacing: -.055em !important;
  }
  .main-brand-copy span {
    font-size: .48rem;
    letter-spacing: .12em;
  }
  .start-screen .tagline,
  .small-note {
    display: none !important;
  }
}

/* v7.0.43 mobile gate boot hotfix + v7.0.42 mobile landscape shell + main menu layout polish
   Mobile is now landscape-first: portrait shows a rotate/fullscreen gate; landscape menu is compact and wide. */
.mobile-landscape-gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483200;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background:
    linear-gradient(180deg, rgba(2, 6, 23, .62), rgba(2, 6, 23, .86)),
    var(--rq-menu-bg),
    #07111f;
  background-size: cover;
  background-position: center;
  place-items: center;
}

body.rq-phone-portrait .mobile-landscape-gate {
  display: grid;
}

.mobile-landscape-card {
  width: min(420px, calc(100vw - 32px));
  padding: 24px 20px 22px;
  border: 1px solid rgba(148, 197, 255, .22);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 0%, rgba(34, 211, 238, .15), transparent 35%),
    linear-gradient(145deg, rgba(8, 18, 32, .84), rgba(12, 25, 43, .68));
  box-shadow: 0 28px 90px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255,255,255,.08);
  text-align: center;
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

.mobile-landscape-card img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  margin-bottom: 10px;
  filter: drop-shadow(0 12px 24px rgba(34, 211, 238, .22));
}

.mobile-landscape-kicker {
  margin: 0 0 4px;
  color: rgba(125, 211, 252, .95);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-weight: 900;
}

.mobile-landscape-card h2 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: .96;
  letter-spacing: -.045em;
}

.mobile-landscape-card p:not(.mobile-landscape-kicker) {
  margin: 0 auto 18px;
  max-width: 31ch;
  color: rgba(226, 232, 240, .82);
  line-height: 1.55;
}

.mobile-landscape-card .primary-btn {
  width: 100%;
  min-height: 48px;
  justify-content: center;
}

.mobile-landscape-card small {
  display: block;
  margin-top: 12px;
  color: rgba(203, 213, 225, .66);
  line-height: 1.35;
}

body.rq-phone-portrait .fullscreen-btn {
  z-index: 2147483210;
}

/* Desktop/menu polish: let the map background breathe more. */
@media (min-width: 921px) {
  .start-screen {
    width: min(1040px, calc(100% - 36px)) !important;
    padding-top: clamp(22px, 4vh, 42px) !important;
  }

  .main-brand-lockup {
    max-width: min(760px, 100%) !important;
    padding: clamp(11px, 1.6vw, 17px) clamp(18px, 2.5vw, 30px) !important;
    border-radius: 28px !important;
    background:
      radial-gradient(circle at 9% 8%, rgba(34, 211, 238, .14), transparent 34%),
      linear-gradient(135deg, rgba(8, 18, 32, .68), rgba(15, 30, 50, .48)) !important;
  }

  .main-brand-mark {
    width: clamp(48px, 5.8vw, 74px) !important;
    height: clamp(48px, 5.8vw, 74px) !important;
  }

  .main-brand-copy h1,
  .start-screen .main-brand-copy h1 {
    font-size: clamp(3rem, 6.7vw, 5.8rem) !important;
  }

  .start-screen .tagline {
    margin-bottom: 10px !important;
  }

  .start-card.start-card-v12 {
    max-width: 940px !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(34, 211, 238, .10), transparent 30%),
      linear-gradient(145deg, rgba(8, 18, 32, .66), rgba(12, 25, 43, .50)) !important;
    backdrop-filter: blur(16px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
  }
}

/* Phone landscape: the full mobile app is landscape-first, not portrait-menu + landscape-game. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 620px) {
  body.rq-phone-menu-landscape {
    overflow: hidden;
  }

  body.rq-phone-menu-landscape .fullscreen-btn {
    top: max(6px, env(safe-area-inset-top)) !important;
    right: max(7px, env(safe-area-inset-right)) !important;
    padding: 7px 10px !important;
    font-size: .68rem !important;
    border-radius: 14px !important;
  }

  body.rq-phone-menu-landscape .start-screen {
    width: 100dvw !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    max-width: none !important;
    padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
    display: grid !important;
    grid-template-columns: minmax(230px, .72fr) minmax(410px, 1.28fr) !important;
    grid-template-rows: auto auto 1fr auto !important;
    align-items: center !important;
    justify-items: stretch !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
    overflow: hidden !important;
  }

  body.rq-phone-menu-landscape .start-screen::before {
    background:
      radial-gradient(circle at 50% 45%, rgba(15, 23, 42, .03), rgba(2, 6, 23, .30) 76%, rgba(2, 6, 23, .58) 100%),
      linear-gradient(90deg, rgba(2, 6, 23, .48), rgba(2, 6, 23, .12) 38%, rgba(2, 6, 23, .20) 100%) !important;
  }

  body.rq-phone-menu-landscape .main-menu-kicker,
  body.rq-phone-menu-landscape .tagline,
  body.rq-phone-menu-landscape .small-note,
  body.rq-phone-menu-landscape #dbBadge {
    display: none !important;
  }

  body.rq-phone-menu-landscape .main-brand-lockup {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    width: min(250px, 32vw) !important;
    max-width: 250px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    grid-template-columns: auto 1fr !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 8% 8%, rgba(34, 211, 238, .16), transparent 36%),
      linear-gradient(135deg, rgba(8, 18, 32, .72), rgba(15, 30, 50, .48)) !important;
  }

  body.rq-phone-menu-landscape .main-brand-mark {
    width: 38px !important;
    height: 38px !important;
  }

  body.rq-phone-menu-landscape .main-brand-copy {
    text-align: left !important;
  }

  body.rq-phone-menu-landscape .main-brand-copy h1,
  body.rq-phone-menu-landscape .start-screen .main-brand-copy h1 {
    font-size: clamp(1.65rem, 4.6vw, 2.25rem) !important;
    letter-spacing: -.05em !important;
    line-height: .9 !important;
  }

  body.rq-phone-menu-landscape .main-brand-copy span {
    font-size: .42rem !important;
    letter-spacing: .11em !important;
    margin-top: 3px !important;
  }

  body.rq-phone-menu-landscape #authPanel {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    width: 100% !important;
    max-height: calc(100dvh - 18px);
    overflow: auto;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  body.rq-phone-menu-landscape .auth-card {
    padding: 10px !important;
    border-radius: 18px !important;
  }

  body.rq-phone-menu-landscape .auth-card h2 {
    font-size: 1rem !important;
    margin-bottom: 2px !important;
  }

  body.rq-phone-menu-landscape .auth-card p {
    display: none !important;
  }

  body.rq-phone-menu-landscape .auth-card label {
    gap: 3px !important;
    margin-top: 6px !important;
  }

  body.rq-phone-menu-landscape .auth-card input,
  body.rq-phone-menu-landscape .auth-card button {
    min-height: 34px !important;
  }

  body.rq-phone-menu-landscape #authedPanel {
    grid-column: 1 / -1;
    grid-row: 2 / span 2;
    align-self: end;
    width: min(760px, calc(100dvw - 22px)) !important;
    max-height: calc(100dvh - 80px) !important;
    margin: 0 auto !important;
    padding: 10px !important;
    border-radius: 24px !important;
    overflow: auto !important;
    display: grid !important;
    grid-template-columns: minmax(260px, .95fr) minmax(320px, 1.05fr) !important;
    gap: 10px !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(34, 211, 238, .10), transparent 30%),
      linear-gradient(145deg, rgba(8, 18, 32, .66), rgba(12, 25, 43, .48)) !important;
  }

  body.rq-phone-menu-landscape #authedPanel.hidden {
    display: none !important;
  }

  body.rq-phone-menu-landscape .mode-copy,
  body.rq-phone-menu-landscape .account-lockup,
  body.rq-phone-menu-landscape .mode-field,
  body.rq-phone-menu-landscape .mode-info {
    grid-column: 2;
  }

  body.rq-phone-menu-landscape .account-stats,
  body.rq-phone-menu-landscape .avatar-picker {
    grid-column: 1;
  }

  body.rq-phone-menu-landscape .account-actions {
    grid-column: 2;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }

  body.rq-phone-menu-landscape .account-actions button {
    min-height: 34px !important;
    padding: 7px 9px !important;
    font-size: .72rem !important;
  }

  body.rq-phone-menu-landscape .mode-copy strong,
  body.rq-phone-menu-landscape .account-lockup strong {
    font-size: .95rem !important;
  }

  body.rq-phone-menu-landscape .mode-copy span,
  body.rq-phone-menu-landscape .account-lockup small,
  body.rq-phone-menu-landscape .mode-info span {
    font-size: .68rem !important;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 620px) {
  body.rq-phone-menu-landscape #authPanel.hidden {
    display: none !important;
  }
}


/* v7.0.43 mobile gate boot hotfix */
.mobile-landscape-card .primary-btn:disabled {
  opacity: .72;
  cursor: wait;
}


/* v7.0.44 inventory/shop visual sync + gameplay-only phone landscape gate */
.mobile-landscape-gate {
  display: none !important;
}

.inventory-items-upgraded {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.inventory-item.inventory-item-card {
  position: relative;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 8px;
  min-height: 148px;
  padding: 10px;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(7, 14, 28, .62), rgba(7, 14, 28, .92)),
    var(--inventory-tier-bg),
    rgba(255,255,255,.06);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 34px rgba(0,0,0,.24);
}

.inventory-item.inventory-item-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 0%, rgba(255,255,255,.13), transparent 34%);
  pointer-events: none;
}

.inventory-item-card .inventory-item-hero,
.inventory-item-card strong,
.inventory-item-card em {
  position: relative;
  z-index: 1;
}

.inventory-item-card .inventory-item-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-height: 68px;
}

.inventory-item-card .inventory-item-tier-icon {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  font-size: 1.4rem;
  border-radius: 14px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
}

.inventory-item-card .inventory-item-tier-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(7, 14, 28, .64);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(226, 232, 240, .9);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.inventory-item-card strong {
  font-size: .88rem;
  line-height: 1.1;
}

.inventory-item-card em {
  font-size: .73rem;
}

.inventory-item-card.remove {
  --inventory-tier-bg: none;
  background: linear-gradient(145deg, rgba(70, 12, 24, .88), rgba(42, 12, 18, .94));
  border-color: rgba(248, 113, 113, .35);
}

.inventory-item-card.remove .inventory-item-tier-chip {
  background: rgba(127, 29, 29, .34);
}

.result-icon-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.result-icon-label::before {
  content: '';
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  display: inline-block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .94;
}

.result-icon-label.icon-score::before { background-image: url('/assets/ui/icons/score.png'); }
.result-icon-label.icon-distance::before { background-image: url('/assets/ui/icons/distance.png'); }
.result-icon-label.icon-location::before { background-image: url('/assets/ui/icons/location.png'); }
.result-icon-label.icon-station::before { background-image: url('/assets/ui/icons/station.png'); }

@media (max-width: 760px) {
  .inventory-items-upgraded {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .inventory-item.inventory-item-card {
    min-height: 132px;
    padding: 9px;
  }
  .inventory-item-card .inventory-item-hero {
    min-height: 58px;
  }
  .inventory-item-card .inventory-item-tier-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 1.2rem;
  }
  .inventory-item-card .inventory-item-tier-chip {
    min-height: 22px;
    padding: 0 8px;
    font-size: .58rem;
  }
  .inventory-item-card strong {
    font-size: .8rem;
  }
}


/* v7.0.45 shop/inventory card unification + static inventory previews */
.shop-item.shop-item-static {
  --tier-glow: rgba(34, 211, 238, .22);
  --tier-border: rgba(148, 163, 184, .60);
  position: relative;
  border-radius: 22px;
  border: 1px solid var(--tier-border) !important;
  background:
    linear-gradient(180deg, rgba(7, 14, 28, .52), rgba(7, 14, 28, .94)),
    var(--shop-tier-bg),
    rgba(255,255,255,.06) !important;
  background-position: center !important;
  background-size: cover !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.045) inset, 0 0 34px var(--tier-glow) !important;
  isolation: isolate;
}

.shop-item.shop-item-static::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.16), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 44%);
  z-index: 0;
  pointer-events: none;
}

.shop-item.shop-item-static > * {
  position: relative;
  z-index: 1;
}

.shop-item.shop-item-static.rarity-basic,
.inventory-item-card.rarity-basic { --tier-border: rgba(148, 163, 184, .62); --tier-glow: rgba(148, 163, 184, .13); }
.shop-item.shop-item-static.rarity-rare,
.inventory-item-card.rarity-rare { --tier-border: rgba(56, 189, 248, .72); --tier-glow: rgba(56, 189, 248, .18); }
.shop-item.shop-item-static.rarity-epic,
.inventory-item-card.rarity-epic { --tier-border: rgba(168, 85, 247, .78); --tier-glow: rgba(168, 85, 247, .23); }
.shop-item.shop-item-static.rarity-legendary,
.inventory-item-card.rarity-legendary { --tier-border: rgba(245, 158, 11, .82); --tier-glow: rgba(245, 158, 11, .24); }
.shop-item.shop-item-static.rarity-mythic,
.inventory-item-card.rarity-mythic { --tier-border: rgba(251, 113, 133, .80); --tier-glow: rgba(251, 113, 133, .22); }
.shop-item.shop-item-static.rarity-exotic,
.inventory-item-card.rarity-exotic { --tier-border: rgba(45, 212, 191, .78); --tier-glow: rgba(45, 212, 191, .22); }
.shop-item.shop-item-static.rarity-impossible,
.inventory-item-card.rarity-impossible {
  --tier-border: rgba(255,255,255,.82);
  --tier-glow: rgba(167, 139, 250, .34);
  border-color: transparent !important;
  background:
    linear-gradient(180deg, rgba(7, 14, 28, .46), rgba(7, 14, 28, .94)) padding-box,
    var(--shop-tier-bg) padding-box,
    linear-gradient(135deg, #ff4fd8, #fbbf24, #22d3ee, #a78bfa, #ff4fd8) border-box !important;
}

.shop-item.shop-item-static.equipped,
.inventory-item-card.equipped {
  outline: 2px solid rgba(34, 211, 238, .35) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.34), 0 0 0 1px rgba(34,211,238,.18) inset, 0 0 38px var(--tier-glow) !important;
}

.shop-item-static .static-card-preview,
.inventory-card-avatar3d {
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.14), transparent 44%),
    rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 16px 30px rgba(0,0,0,.20) inset, 0 12px 26px rgba(0,0,0,.18);
}

.shop-item-static .shop-rarity,
.inventory-item-card .inventory-item-tier-chip {
  border-color: rgba(255,255,255,.16) !important;
  background: rgba(7, 14, 28, .62) !important;
  color: rgba(226, 232, 240, .92) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.inventory-card-avatar3d {
  width: 100%;
  min-height: 78px;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
}

.inventory-card-avatar3d canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.inventory-card-avatar3d .avatar3d-empty {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 8px;
  color: rgba(226,232,240,.78);
  font-size: .72rem;
  text-align: center;
}

.inventory-item-card .inventory-item-hero {
  min-height: 92px !important;
  align-items: stretch;
}

.inventory-item-card .inventory-item-tier-chip {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}

.inventory-item-card .inventory-item-tier-icon {
  display: inline-grid;
}

.inventory-item-card.remove .inventory-item-hero {
  min-height: 58px !important;
}

@media (max-width: 760px) {
  .inventory-card-avatar3d {
    min-height: 68px;
    border-radius: 14px;
  }
  .inventory-item-card .inventory-item-hero {
    min-height: 78px !important;
  }
}


/* v7.0.46 shop/inventory preview cleanup + lower inventory models. */
.shop-item-static .static-card-preview,
.inventory-card-avatar3d {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.shop-item-static .static-card-preview {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.inventory-card-avatar3d {
  align-items: end;
  padding-top: 10px;
}

.inventory-card-avatar3d canvas {
  transform: translateY(12px);
  transform-origin: center center;
}

.inventory-item-card .inventory-item-hero {
  min-height: 102px !important;
}

@media (max-width: 760px) {
  .inventory-card-avatar3d {
    padding-top: 12px;
  }
  .inventory-card-avatar3d canvas {
    transform: translateY(10px);
  }
  .inventory-item-card .inventory-item-hero {
    min-height: 84px !important;
  }
}


/* v7.0.48 inventory 3D preview size lock.
   Prevents card previews from reflow-growing during repeated 3D resize/render cycles. */
.inventory-item.inventory-item-card {
  contain: layout paint style;
}

.inventory-item-card .inventory-item-hero {
  height: 106px !important;
  min-height: 106px !important;
  max-height: 106px !important;
  overflow: hidden !important;
  display: block !important;
  position: relative !important;
}

.inventory-card-avatar3d {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -9px !important;
  width: 100% !important;
  height: 92px !important;
  min-height: 92px !important;
  max-height: 92px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.inventory-card-avatar3d canvas {
  display: block !important;
  width: 100% !important;
  height: 92px !important;
  min-height: 92px !important;
  max-height: 92px !important;
  transform: none !important;
}

.inventory-card-avatar3d .avatar3d-empty {
  height: 92px !important;
  min-height: 92px !important;
  max-height: 92px !important;
}

.inventory-item-card .inventory-item-tier-chip {
  top: 7px !important;
  right: 7px !important;
  z-index: 5 !important;
}

.shop-item-static .static-card-preview {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

@media (max-width: 760px) {
  .inventory-item-card .inventory-item-hero {
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
  }
  .inventory-card-avatar3d {
    bottom: -8px !important;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
  }
  .inventory-card-avatar3d canvas,
  .inventory-card-avatar3d .avatar3d-empty {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
  }
}


/* v7.0.49 mobile portrait main menu polish only.
   PC, gameplay layout, PvP and station logic are intentionally untouched. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 760px) {
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) {
    overflow-y: auto !important;
    background-attachment: scroll !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .app {
    min-height: 100dvh !important;
    overflow-x: hidden !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .start-screen {
    width: min(100%, 430px) !important;
    min-height: 100dvh !important;
    padding: max(12px, env(safe-area-inset-top)) 12px max(18px, env(safe-area-inset-bottom)) !important;
    gap: 9px !important;
    justify-content: start !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .start-screen::before {
    background:
      linear-gradient(180deg, rgba(3, 7, 14, .48), rgba(3, 7, 14, .82)),
      radial-gradient(circle at 50% 5%, rgba(34, 211, 238, .10), transparent 34%) !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .main-menu-kicker {
    display: inline-flex !important;
    align-self: center !important;
    padding: 7px 11px !important;
    font-size: .57rem !important;
    letter-spacing: .13em !important;
    border-radius: 999px !important;
    margin-top: 0 !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .main-menu-kicker img {
    width: 17px !important;
    height: 17px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .main-brand-lockup {
    width: 100% !important;
    grid-template-columns: auto 1fr !important;
    justify-items: start !important;
    text-align: left !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    border-radius: 22px !important;
    background:
      radial-gradient(circle at 10% 0%, rgba(34, 211, 238, .11), transparent 38%),
      linear-gradient(145deg, rgba(8, 18, 32, .78), rgba(12, 25, 43, .58)) !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .main-brand-mark {
    width: 46px !important;
    height: 46px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .main-brand-copy {
    text-align: left !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .main-brand-copy h1,
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .start-screen .main-brand-copy h1 {
    font-size: clamp(2.1rem, 12vw, 3.2rem) !important;
    line-height: .88 !important;
    letter-spacing: -.06em !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .main-brand-copy span {
    margin-top: 3px !important;
    font-size: .52rem !important;
    letter-spacing: .12em !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .start-screen .tagline {
    width: 100% !important;
    margin: 0 auto 5px !important;
    padding: 0 8px !important;
    max-width: 35ch !important;
    font-size: .78rem !important;
    line-height: 1.36 !important;
    color: rgba(226, 232, 240, .74) !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .auth-shell {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 4px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .auth-card,
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .start-card.start-card-v12,
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .auth-message,
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .status-pill {
    width: 100% !important;
    border-radius: 20px !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(34, 211, 238, .10), transparent 34%),
      linear-gradient(145deg, rgba(8, 18, 32, .82), rgba(12, 25, 43, .66)) !important;
    border-color: rgba(191, 219, 254, .16) !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .auth-card {
    padding: 13px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .auth-card h2 {
    font-size: 1rem !important;
    margin-bottom: 4px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .auth-card p {
    font-size: .72rem !important;
    line-height: 1.32 !important;
    margin-bottom: 8px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .auth-card label {
    gap: 4px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .auth-card input,
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .auth-card select,
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .nickname-field select {
    min-height: 39px !important;
    border-radius: 13px !important;
    font-size: .82rem !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .start-card.start-card-v12 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "player"
      "actions"
      "avatar"
      "profile"
      "mode"
      "modeinfo" !important;
    gap: 10px !important;
    padding: 12px !important;
    max-width: 100% !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .start-card-v12 .mode-copy {
    display: none !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .account-lockup {
    grid-area: player !important;
    padding: 10px 11px !important;
    border-radius: 17px !important;
    background: rgba(255,255,255,.055) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .account-lockup span,
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .account-lockup small {
    font-size: .66rem !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .account-lockup strong {
    font-size: 1.15rem !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .start-card-v12 .account-actions {
    grid-area: actions !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .account-actions #startBtn {
    grid-column: 1 / -1 !important;
    min-height: 48px !important;
    font-size: .92rem !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .account-actions .primary-btn,
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .account-actions .secondary-btn,
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .auth-card .primary-btn,
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .auth-card .secondary-btn {
    min-height: 41px !important;
    padding: 9px 10px !important;
    border-radius: 14px !important;
    font-size: .76rem !important;
    justify-content: center !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .start-card-v12 .avatar-picker {
    grid-area: avatar !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-panel {
    border-radius: 18px !important;
    padding: 10px !important;
    gap: 8px !important;
    background:
      radial-gradient(circle at 16% 0%, rgba(34, 211, 238, .10), transparent 34%),
      rgba(255,255,255,.052) !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-head {
    align-items: center !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-head strong {
    font-size: .92rem !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-head span {
    display: none !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-head .secondary-btn {
    min-height: 34px !important;
    padding: 7px 10px !important;
    font-size: .7rem !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-items-upgraded {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-height: 312px !important;
    overflow: auto !important;
    padding-right: 2px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-item.inventory-item-card {
    min-height: 132px !important;
    border-radius: 16px !important;
    padding: 8px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-card-avatar3d {
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-card-avatar3d canvas {
    transform: translateY(8px) scale(.92) !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-item-card .inventory-item-tier-chip {
    top: 6px !important;
    right: 6px !important;
    min-height: 20px !important;
    padding: 0 7px !important;
    font-size: .52rem !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-item-card strong {
    font-size: .74rem !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-item-card em {
    font-size: .64rem !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .account-stats {
    grid-area: profile !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .account-stats > div {
    padding: 8px !important;
    border-radius: 14px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .account-stats span {
    font-size: .56rem !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .account-stats strong {
    font-size: .86rem !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .nickname-field.mode-field {
    grid-area: mode !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .mode-info {
    grid-area: modeinfo !important;
    min-height: 0 !important;
    padding: 9px 10px !important;
    border-radius: 15px !important;
    font-size: .72rem !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .status-pill {
    margin-top: 0 !important;
    padding: 8px 10px !important;
    font-size: .62rem !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .small-note {
    display: none !important;
  }
}


/* v7.0.50 shop polish v2: premium character collection. */
.shop-dialog-card {
  position: relative;
  overflow: hidden;
}

.shop-dialog-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 0%, rgba(34, 211, 238, .13), transparent 28%),
    radial-gradient(circle at 90% 4%, rgba(251, 191, 36, .10), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 38%);
  z-index: 0;
}

.shop-dialog-card > * {
  position: relative;
  z-index: 1;
}

.shop-tabs-characters-only {
  margin-bottom: 8px;
}

.shop-tabs-characters-only button.active {
  min-height: 42px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(34, 211, 238, .18), rgba(251, 191, 36, .12)) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.20);
}

.shop-status-line {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
}

.shop-status-line strong {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  color: #e2e8f0;
}

.shop-status-line em {
  color: rgba(203, 213, 225, .72);
  font-style: normal;
  font-size: .78rem;
}

.shop-status-line b {
  color: #fbbf24;
  font-size: .78rem;
}

.shop-tier-strip {
  gap: 9px !important;
}

.shop-tier-strip button {
  position: relative;
  overflow: hidden;
  min-height: 72px;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--tier, #67e8f9) 22%, transparent), transparent 44%),
    rgba(255,255,255,.055) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 12px 28px rgba(0,0,0,.17);
}

.shop-tier-strip button::after {
  content: '';
  position: absolute;
  inset: auto 18% 0;
  height: 2px;
  border-radius: 999px;
  background: var(--tier, #67e8f9);
  opacity: .75;
}

.shop-tier-strip button.active {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--tier, #67e8f9) 72%, white 10%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 38px rgba(0,0,0,.26), 0 0 28px color-mix(in srgb, var(--tier, #67e8f9) 24%, transparent) !important;
}

.shop-tier-strip button.rarity-basic { --tier: #94a3b8; }
.shop-tier-strip button.rarity-rare { --tier: #38bdf8; }
.shop-tier-strip button.rarity-epic { --tier: #c084fc; }
.shop-tier-strip button.rarity-legendary { --tier: #fbbf24; }
.shop-tier-strip button.rarity-mythic { --tier: #fb7185; }
.shop-tier-strip button.rarity-exotic { --tier: #2dd4bf; }
.shop-tier-strip button.rarity-impossible { --tier: #ffffff; }

.shop-grid {
  gap: 16px !important;
}

.shop-item.shop-item-static {
  min-height: 292px;
  display: grid;
  grid-template-rows: auto minmax(118px, 1fr) auto auto;
  gap: 10px;
  padding: 12px !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.shop-item.shop-item-static:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 58px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 42px var(--tier-glow) !important;
}

.shop-item-topline {
  min-height: 27px;
}

.shop-item-static .shop-rarity {
  border-radius: 999px;
  padding: 5px 9px;
  font-size: .62rem;
  letter-spacing: .13em;
}

.shop-item-static .static-card-preview {
  height: 126px !important;
  min-height: 126px !important;
  max-height: 126px !important;
  margin: 0 !important;
  border-radius: 18px !important;
}

.shop-card-avatar3d canvas {
  transform: translateY(4px);
}

.shop-item-body {
  gap: 8px !important;
}

.shop-item-body h3 {
  font-size: .98rem !important;
  line-height: 1.08;
}

.shop-item-body small {
  color: rgba(203, 213, 225, .70) !important;
}

.shop-card-price {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 !important;
  padding: 7px 9px;
  border-radius: 13px;
  background: rgba(7,14,28,.48);
  border: 1px solid rgba(255,255,255,.10);
}

.shop-card-price span {
  color: rgba(203, 213, 225, .68);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.shop-card-price strong {
  color: #fbbf24;
  font-size: .78rem;
  white-space: nowrap;
}

.shop-card-price.is-owned strong,
.shop-card-price.is-equipped strong {
  color: #67e8f9;
}

.shop-card-action {
  min-height: 40px !important;
  border-radius: 14px !important;
  font-size: .78rem !important;
}

.shop-pager {
  padding: 8px;
  border-radius: 18px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
}

.shop-detail-card {
  background:
    radial-gradient(circle at 20% 0%, rgba(34, 211, 238, .12), transparent 30%),
    linear-gradient(145deg, rgba(7, 14, 28, .98), rgba(12, 25, 45, .96)) !important;
}

.shop-detail-hero {
  min-height: 122px;
  background:
    linear-gradient(180deg, rgba(7,14,28,.44), rgba(7,14,28,.88)),
    var(--shop-tier-bg),
    rgba(255,255,255,.06) !important;
  background-size: cover !important;
  background-position: center !important;
  border-color: rgba(255,255,255,.14) !important;
}

.shop-detail-hero span {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(7,14,28,.48);
  border: 1px solid rgba(255,255,255,.14);
}

.shop-detail-flavor {
  margin: 0;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.052);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(203, 213, 225, .78);
  line-height: 1.45;
}

@media (max-width: 760px) {
  .shop-dialog {
    width: calc(100vw - 6px) !important;
  }
  .shop-dialog-card {
    padding: 10px !important;
    border-radius: 20px !important;
  }
  .shop-tier-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .shop-tier-strip button {
    min-height: 54px;
    grid-template-columns: auto 1fr auto;
    justify-items: start;
    text-align: left;
    padding: 7px 9px !important;
  }
  .shop-tier-strip button span { font-size: 1.05rem !important; }
  .shop-tier-strip button strong { font-size: .68rem !important; }
  .shop-tier-strip button em { justify-self: end; }
  .shop-status-line {
    grid-template-columns: 1fr auto;
  }
  .shop-status-line em {
    grid-column: 1 / -1;
    order: 3;
  }
  .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .shop-item.shop-item-static {
    min-height: 252px;
    padding: 9px !important;
    gap: 8px;
    border-radius: 18px;
    grid-template-rows: auto minmax(92px, 1fr) auto auto;
  }
  .shop-item-static .static-card-preview {
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
  }
  .shop-card-action {
    min-height: 36px !important;
    font-size: .70rem !important;
    padding: 7px 8px !important;
  }
  .shop-card-price {
    padding: 6px 7px;
  }
  .shop-card-price span {
    display: none;
  }
  .shop-card-price strong {
    font-size: .70rem;
  }
  .shop-detail-layout {
    grid-template-columns: 1fr !important;
  }
  .shop-detail-avatar3d {
    min-height: min(48dvh, 290px) !important;
  }
}

@media (max-width: 920px) and (orientation: landscape) {
  .shop-tier-strip {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }
  .shop-tier-strip button {
    min-height: 54px;
    padding: 6px 5px !important;
  }
  .shop-grid {
    grid-template-columns: repeat(4, minmax(116px, 1fr)) !important;
    gap: 9px !important;
  }
  .shop-item.shop-item-static {
    min-height: 216px;
    gap: 6px;
  }
  .shop-item-static .static-card-preview {
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
  }
  .shop-card-price {
    display: none !important;
  }
}


/* v7.0.51 custom rarity icons in shop + inventory. */
.shop-tier-glyph {
  width: 20px;
  height: 20px;
  display: inline-block;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.22));
}

.shop-tier-strip button > span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
}

.inventory-card-avatar3d .shop-tier-glyph,
.shop-item-preview .shop-tier-glyph {
  width: 34px;
  height: 34px;
  opacity: .95;
}

.inventory-card-avatar3d,
.shop-item-preview {
  color: transparent;
}

.shop-detail-hero span .shop-tier-glyph {
  width: 28px;
  height: 28px;
}

.inventory-item-card .inventory-item-tier-chip::before,
.shop-rarity::before,
.shop-detail-meta span.rarity-meta::before {
  content: none;
}

@media (max-width: 760px) {
  .shop-tier-glyph {
    width: 18px;
    height: 18px;
  }
  .inventory-card-avatar3d .shop-tier-glyph,
  .shop-item-preview .shop-tier-glyph {
    width: 30px;
    height: 30px;
  }
  .shop-detail-hero span .shop-tier-glyph {
    width: 24px;
    height: 24px;
  }
}


/* v7.0.52 shop polish v3: modal chrome, scrollbar and bottom scroll fix. */
.shop-dialog::backdrop {
  background:
    radial-gradient(circle at 50% 8%, rgba(34, 211, 238, .12), transparent 34%),
    rgba(2, 6, 23, .78) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
}

.shop-dialog {
  width: min(1180px, calc(100dvw - 22px)) !important;
  max-height: calc(100dvh - 18px) !important;
  overflow: visible !important;
}

.shop-dialog-card {
  max-height: calc(100dvh - 20px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 18px 18px 34px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(34, 211, 238, .72) rgba(7, 14, 28, .62);
  scrollbar-gutter: stable;
}

.shop-dialog-card::-webkit-scrollbar { width: 10px; }
.shop-dialog-card::-webkit-scrollbar-track {
  background: rgba(7, 14, 28, .72);
  border-radius: 999px;
  margin: 18px 0;
}
.shop-dialog-card::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 2px solid rgba(7, 14, 28, .72);
  background: linear-gradient(180deg, rgba(34, 211, 238, .86), rgba(251, 191, 36, .72));
  box-shadow: 0 0 14px rgba(34, 211, 238, .24);
}
.shop-dialog-card::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(103, 232, 249, .98), rgba(251, 191, 36, .88));
}

.shop-dialog-card .leaderboard-card-head {
  position: sticky;
  top: -18px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: -18px -18px 14px;
  padding: 16px 18px 14px;
  background:
    linear-gradient(180deg, rgba(7, 14, 28, .96), rgba(7, 14, 28, .84)),
    radial-gradient(circle at 8% 0%, rgba(34, 211, 238, .14), transparent 38%);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
}

.shop-dialog-card .leaderboard-card-head h2 {
  margin: 0 0 4px;
  letter-spacing: -.02em;
}

.shop-dialog-card .leaderboard-card-head p {
  margin: 0;
  max-width: 58ch;
  color: rgba(226, 232, 240, .74);
}

.shop-close-btn {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.12), transparent 44%),
    rgba(7, 14, 28, .70) !important;
  color: rgba(226, 232, 240, .94) !important;
  font-weight: 1000 !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08);
  cursor: pointer;
}

.shop-close-btn span {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(248, 113, 113, .13);
  color: #fecaca;
  font-size: 1.1rem;
  line-height: 1;
}

.shop-close-btn em {
  font-style: normal;
  font-size: .78rem;
}

.shop-close-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(248, 113, 113, .32) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.32), 0 0 22px rgba(248, 113, 113, .10);
}

.shop-balance-row {
  margin: 0 0 12px !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(251, 191, 36, .20), transparent 40%),
    linear-gradient(135deg, rgba(251, 191, 36, .13), rgba(34, 211, 238, .055)) !important;
  border-color: rgba(251, 191, 36, .26) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 14px 32px rgba(0,0,0,.18);
}

.shop-balance-row strong::before {
  content: '◉';
  display: inline-block;
  margin-right: 8px;
  color: #fbbf24;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, .42));
}

.shop-balance-row span {
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(7, 14, 28, .52);
  border: 1px solid rgba(251, 191, 36, .22);
  line-height: 1;
}

.shop-preview-row-compact {
  min-height: 58px;
  grid-template-columns: 54px 1fr !important;
  gap: 11px !important;
  margin-bottom: 10px;
  padding: 10px 12px !important;
  border-radius: 18px !important;
}

.shop-preview-placeholder {
  width: 44px !important;
  height: 44px !important;
  border-radius: 15px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(251, 191, 36, .18), transparent 45%),
    rgba(7,14,28,.50) !important;
}

.shop-preview-placeholder img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.24));
}

.shop-tabs-characters-only {
  margin: 0 0 10px !important;
}

.shop-tabs-characters-only button.active {
  min-height: 36px !important;
  padding: 8px 14px !important;
}

.shop-status {
  margin-top: 0 !important;
}

.shop-grid {
  padding-bottom: 24px !important;
}

.shop-pager {
  margin: 2px 0 4px !important;
  position: relative;
  z-index: 2;
}

@media (max-width: 760px) {
  .shop-dialog {
    width: calc(100dvw - 6px) !important;
    max-height: calc(100dvh - 8px) !important;
  }

  .shop-dialog-card {
    max-height: calc(100dvh - 8px) !important;
    padding: 10px 10px 28px !important;
    scrollbar-width: none;
  }

  .shop-dialog-card::-webkit-scrollbar { width: 0; height: 0; }

  .shop-dialog-card .leaderboard-card-head {
    top: -10px;
    margin: -10px -10px 10px;
    padding: 11px 10px 10px;
    gap: 8px;
  }

  .shop-dialog-card .leaderboard-card-head h2 {
    font-size: 1.05rem;
  }

  .shop-dialog-card .leaderboard-card-head p {
    font-size: .72rem;
    line-height: 1.35;
  }

  .shop-close-btn {
    min-width: 42px;
    min-height: 42px;
    padding: 8px !important;
  }

  .shop-close-btn em { display: none; }
  .shop-close-btn span { width: 24px; height: 24px; }

  .shop-balance-row {
    padding: 10px 11px !important;
    margin-bottom: 9px !important;
  }

  .shop-balance-row span {
    font-size: 1.06rem !important;
  }

  .shop-preview-row-compact {
    grid-template-columns: 44px 1fr !important;
    padding: 8px 9px !important;
    margin-bottom: 8px;
  }

  .shop-preview-placeholder {
    width: 38px !important;
    height: 38px !important;
  }

  .shop-preview-placeholder img {
    width: 22px;
    height: 22px;
  }

  .shop-grid {
    padding-bottom: 26px !important;
  }
}


/* v7.0.53 shop/main menu stability polish + safe 3D preview refresh. */
body.shop-open .start-screen {
  filter: saturate(.94) brightness(.72);
}

.shop-dialog-card {
  background:
    radial-gradient(circle at 18% 0%, rgba(34, 211, 238, .13), transparent 32%),
    linear-gradient(145deg, rgba(7, 14, 28, .985), rgba(13, 25, 43, .965)) !important;
}

.shop-dialog-card .leaderboard-card-head {
  min-height: 72px;
  box-shadow: 0 18px 34px rgba(0,0,0,.20), inset 0 -1px 0 rgba(255,255,255,.055);
}

.shop-dialog-card .leaderboard-card-head h2::before {
  content: '';
  width: 24px;
  height: 24px;
  display: inline-block;
  margin-right: 9px;
  vertical-align: -4px;
  background: url('/assets/ui/logo/radioquest-mark.png') center / contain no-repeat;
  filter: drop-shadow(0 4px 10px rgba(34,211,238,.24));
}

.shop-balance-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

.shop-status-line {
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(34,211,238,.10), transparent 42%),
    rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.08);
  padding: 9px 11px !important;
}

.shop-tier-strip button {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.shop-tier-strip button span .shop-tier-glyph {
  width: 22px;
  height: 22px;
}

.shop-item.shop-item-static {
  outline-offset: 3px;
}

.shop-item.shop-item-static.owned:not(.equipped) {
  border-color: color-mix(in srgb, var(--tier-border, rgba(56,189,248,.55)) 72%, rgba(255,255,255,.16)) !important;
}

.shop-item.shop-item-static.equipped::after {
  content: 'Equipped';
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(34, 211, 238, .16);
  border: 1px solid rgba(34, 211, 238, .30);
  color: #a5f3fc;
  font-size: .58rem;
  font-weight: 1000;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.home-profile-card.home-profile-card-3d,
.inventory-panel {
  background:
    radial-gradient(circle at 16% 0%, rgba(34, 211, 238, .10), transparent 34%),
    linear-gradient(145deg, rgba(8, 18, 32, .80), rgba(12, 25, 43, .62)) !important;
  border-color: rgba(191, 219, 254, .16) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.055) !important;
}

.account-actions .primary-btn {
  box-shadow: 0 16px 34px rgba(34, 211, 238, .20) !important;
}

@media (max-width: 760px) {
  .shop-dialog-card .leaderboard-card-head {
    min-height: 60px;
  }

  .shop-dialog-card .leaderboard-card-head h2::before {
    width: 19px;
    height: 19px;
    margin-right: 6px;
    vertical-align: -3px;
  }

  .shop-status-line {
    padding: 8px 9px !important;
  }

  .shop-item.shop-item-static.equipped::after {
    top: 8px;
    right: 8px;
    padding: 3px 7px;
    font-size: .52rem;
  }
}


/* v7.0.54 main menu hub polish v1 + warm palette refresh for menu/shop. */
:root {
  --rq-warm-900: #241b14;
  --rq-warm-850: #2f241b;
  --rq-warm-800: #3b2d22;
  --rq-warm-700: #5b4f3f;
  --rq-warm-600: #7d6a50;
  --rq-warm-500: #a27f4f;
  --rq-warm-400: #c59a61;
  --rq-warm-300: #dec6a0;
  --rq-warm-gold: #d8b06a;
  --rq-warm-cream: #f3e8d5;
}

body {
  background:
    linear-gradient(180deg, rgba(23, 16, 11, .24), rgba(23, 16, 11, .78)),
    var(--rq-menu-bg),
    radial-gradient(circle at 16% 12%, rgba(197, 154, 97, .18), transparent 34%),
    radial-gradient(circle at 82% 16%, rgba(123, 96, 62, .18), transparent 28%),
    #16110d !important;
}

.start-screen::before {
  background:
    radial-gradient(circle at 50% 42%, rgba(48, 35, 24, .12), rgba(18, 13, 9, .58) 68%, rgba(18, 13, 9, .76) 100%),
    linear-gradient(90deg, rgba(18, 13, 9, .62), rgba(18, 13, 9, .16) 30%, rgba(18, 13, 9, .16) 70%, rgba(18, 13, 9, .62)) !important;
}

.start-screen::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 34%),
    radial-gradient(circle at 50% 50%, transparent 0 52%, rgba(0,0,0,.38) 100%);
}

.main-menu-kicker {
  color: rgba(243, 232, 213, .92) !important;
  background: rgba(55, 41, 30, .62) !important;
  border-color: rgba(222, 198, 160, .18) !important;
}

.main-menu-kicker img {
  filter: drop-shadow(0 5px 13px rgba(216, 176, 106, .26));
}

.main-brand-lockup {
  border-color: rgba(222, 198, 160, .20);
  background:
    radial-gradient(circle at 9% 12%, rgba(197, 154, 97, .18), transparent 34%),
    linear-gradient(135deg, rgba(39, 29, 22, .84), rgba(58, 43, 31, .62));
}

.main-brand-mark {
  filter: drop-shadow(0 10px 24px rgba(216, 176, 106, .22));
}

.main-brand-copy h1,
.start-screen .main-brand-copy h1 {
  text-shadow: 0 20px 56px rgba(0,0,0,.42), 0 0 28px rgba(216, 176, 106, .10) !important;
}

.main-brand-copy span,
.start-screen .tagline {
  color: rgba(243, 232, 213, .80) !important;
}

.start-card.start-card-v12,
.auth-card,
.auth-message,
.status-pill,
.inventory-panel,
.account-lockup,
.mode-info,
.fullscreen-btn {
  border-color: rgba(222, 198, 160, .18) !important;
}

.start-card.start-card-v12,
.auth-card,
.auth-message,
.status-pill {
  background:
    radial-gradient(circle at 18% 0%, rgba(197, 154, 97, .12), transparent 30%),
    linear-gradient(145deg, rgba(36, 27, 20, .84), rgba(59, 45, 34, .66)) !important;
  box-shadow: 0 22px 66px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.start-card-v12 .mode-copy strong::before {
  filter: drop-shadow(0 3px 8px rgba(216, 176, 106, .22));
}

.account-actions .primary-btn,
.auth-card .primary-btn {
  background: linear-gradient(135deg, #8c6940, #c59a61) !important;
  color: #fff8ee !important;
  box-shadow: 0 16px 36px rgba(140, 105, 64, .26) !important;
}

.account-actions .secondary-btn,
.auth-card .secondary-btn {
  background: linear-gradient(180deg, rgba(58, 43, 31, .84), rgba(36, 27, 20, .92)) !important;
  border-color: rgba(222, 198, 160, .16) !important;
  color: rgba(243, 232, 213, .92) !important;
}

.fullscreen-btn {
  background: rgba(55, 41, 30, .62) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.account-lockup {
  background:
    radial-gradient(circle at 14% 0%, rgba(197, 154, 97, .14), transparent 34%),
    rgba(255,255,255,.055) !important;
}

.account-lockup span,
.account-lockup small {
  color: rgba(243, 232, 213, .72) !important;
}

.home-profile-card {
  background: linear-gradient(135deg, rgba(197,154,97,.12), rgba(91,79,63,.12)) !important;
  border: 1px solid rgba(222, 198, 160, .12);
}

.home-profile-main strong {
  color: var(--rq-warm-cream);
  font-size: 1.05rem;
}

.xp-track {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(222, 198, 160, .10);
}

.xp-fill {
  background: linear-gradient(90deg, #8c6940, #d8b06a) !important;
  box-shadow: 0 0 18px rgba(216, 176, 106, .18);
}

.xp-meta span { color: rgba(243, 232, 213, .72) !important; }
.xp-meta strong { color: var(--rq-warm-cream) !important; }

.home-profile-mini {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.home-stat-card {
  position: relative;
  display: grid !important;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon label"
    "icon value";
  align-items: center;
  gap: 2px 8px;
  min-height: 68px;
  padding: 10px 10px 10px 12px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(197, 154, 97, .12), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
  border: 1px solid rgba(222, 198, 160, .10) !important;
}

.home-stat-card label {
  grid-area: label;
  display: block;
  color: rgba(243, 232, 213, .66);
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.home-stat-card strong {
  grid-area: value;
  display: block;
  color: var(--rq-warm-cream);
  font-size: .96rem;
  line-height: 1.15;
}

.home-stat-icon {
  grid-area: icon;
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.22));
}

.home-stat-card.stat-best::before,
.home-stat-card.stat-rank::before,
.home-stat-card.stat-games::before {
  content: '';
  grid-area: icon;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  align-self: center;
  justify-self: center;
  background: radial-gradient(circle at 50% 40%, rgba(216, 176, 106, .65), rgba(91, 79, 63, .6));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

.home-stat-card.stat-best::after,
.home-stat-card.stat-rank::after,
.home-stat-card.stat-games::after {
  position: absolute;
  left: 18px;
  top: 17px;
  font-size: .72rem;
  font-weight: 1000;
  color: #fff5e4;
}
.home-stat-card.stat-best::after { content: '★'; }
.home-stat-card.stat-rank::after { content: '#'; }
.home-stat-card.stat-games::after { content: '◎'; font-size: .64rem; }

.nickname-field.mode-field span,
.mode-info span,
.mode-info strong {
  color: rgba(243, 232, 213, .88) !important;
}

.nickname-field select,
.auth-card input {
  background: rgba(29, 21, 16, .82) !important;
  border-color: rgba(222, 198, 160, .16) !important;
  color: var(--rq-warm-cream) !important;
}

.nickname-field select:focus,
.auth-card input:focus {
  border-color: rgba(216, 176, 106, .48) !important;
  box-shadow: 0 0 0 4px rgba(216, 176, 106, .12) !important;
}

.mode-info {
  background:
    radial-gradient(circle at 10% 0%, rgba(197, 154, 97, .12), transparent 34%),
    rgba(255,255,255,.05) !important;
}

.mode-info strong { color: var(--rq-warm-cream) !important; }
.mode-info span { color: rgba(243, 232, 213, .72) !important; }

.mode-copy {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(222, 198, 160, .10);
  border-radius: 18px;
  padding: 12px 14px;
}

.mode-copy strong,
.inventory-head strong { color: var(--rq-warm-cream) !important; }
.mode-copy span,
.inventory-head span,
.inventory-panel > span { color: rgba(243, 232, 213, .72) !important; }

.inventory-panel {
  background:
    radial-gradient(circle at 16% 0%, rgba(197, 154, 97, .12), transparent 34%),
    rgba(255,255,255,.052) !important;
}

/* shop warm palette */
.shop-dialog::backdrop {
  background:
    radial-gradient(circle at 50% 8%, rgba(197, 154, 97, .12), transparent 34%),
    rgba(17, 12, 9, .82) !important;
}

.shop-dialog-card::before {
  background:
    radial-gradient(circle at 16% 0%, rgba(197, 154, 97, .13), transparent 28%),
    radial-gradient(circle at 90% 4%, rgba(216, 176, 106, .10), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 38%);
}

.shop-dialog-card .leaderboard-card-head {
  background:
    linear-gradient(180deg, rgba(27, 20, 15, .97), rgba(27, 20, 15, .88)),
    radial-gradient(circle at 8% 0%, rgba(197, 154, 97, .15), transparent 38%);
  border-bottom: 1px solid rgba(222, 198, 160, .12);
}

.shop-dialog-card .leaderboard-card-head p {
  color: rgba(243, 232, 213, .74);
}

.shop-dialog-card::-webkit-scrollbar-track {
  background: rgba(24, 18, 14, .74);
}

.shop-dialog-card::-webkit-scrollbar-thumb {
  border: 2px solid rgba(24, 18, 14, .74);
  background: linear-gradient(180deg, rgba(140, 105, 64, .92), rgba(216, 176, 106, .76));
  box-shadow: 0 0 14px rgba(216, 176, 106, .20);
}

.shop-dialog-card::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(165, 126, 81, .98), rgba(229, 191, 126, .88));
}

.shop-dialog-card {
  scrollbar-color: rgba(140, 105, 64, .82) rgba(24, 18, 14, .68);
}

.shop-close-btn {
  border-color: rgba(222, 198, 160, .18) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.10), transparent 44%),
    rgba(40, 29, 21, .78) !important;
  color: rgba(243, 232, 213, .94) !important;
}

.shop-close-btn span {
  background: linear-gradient(135deg, rgba(197, 154, 97, .22), rgba(91, 79, 63, .32));
}

.shop-status-line,
.shop-balance-card,
.shop-vault-note,
.shop-detail-card,
.shop-preview-row {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(222, 198, 160, .10) !important;
}

.shop-status-line strong,
.shop-balance-card strong,
.shop-detail-card strong,
.shop-vault-note strong {
  color: var(--rq-warm-cream) !important;
}

.shop-status-line em,
.shop-detail-flavor,
.shop-vault-note p,
.shop-dialog-card .muted,
.shop-item-body p {
  color: rgba(243, 232, 213, .72) !important;
}

.shop-status-line b,
.shop-balance-card b,
.shop-card-price strong,
.shop-detail-meta strong {
  color: var(--rq-warm-gold) !important;
}

.shop-tier-strip button.active,
.shop-tier-strip button.is-active {
  background:
    radial-gradient(circle at 50% 0%, rgba(216, 176, 106, .18), transparent 44%),
    rgba(255,255,255,.065) !important;
  border-color: rgba(222, 198, 160, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 34px rgba(0,0,0,.24), 0 0 0 1px rgba(216,176,106,.10);
}

.shop-item {
  box-shadow: 0 18px 36px rgba(0,0,0,.22);
}

.shop-card-action,
.shop-detail-actions .primary-btn,
.shop-detail-actions .secondary-btn {
  border-color: rgba(222, 198, 160, .16) !important;
}

.shop-card-action.primary,
.shop-detail-actions .primary-btn {
  background: linear-gradient(135deg, #8c6940, #c59a61) !important;
  color: #fff8ee !important;
}

.shop-card-action.secondary,
.shop-detail-actions .secondary-btn {
  background: linear-gradient(180deg, rgba(58, 43, 31, .84), rgba(36, 27, 20, .92)) !important;
  color: rgba(243, 232, 213, .92) !important;
}

body.shop-open .start-screen,
body.shop-open .main-brand-lockup {
  filter: saturate(.92) brightness(.96);
}

@media (max-width: 760px) {
  .home-profile-mini {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .home-stat-card {
    min-height: 62px;
    border-radius: 15px !important;
  }
  .home-stat-card label {
    font-size: .52rem;
  }
  .home-stat-card strong {
    font-size: .82rem;
  }
  .home-stat-icon {
    width: 19px;
    height: 19px;
  }
  .home-stat-card.stat-best::after,
  .home-stat-card.stat-rank::after,
  .home-stat-card.stat-games::after {
    left: 16px;
    top: 16px;
  }
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .account-lockup {
    background:
      radial-gradient(circle at 14% 0%, rgba(197, 154, 97, .14), transparent 34%),
      rgba(255,255,255,.055) !important;
  }
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .auth-card,
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .start-card.start-card-v12,
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .auth-message,
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .status-pill {
    background:
      radial-gradient(circle at 12% 0%, rgba(197, 154, 97, .10), transparent 34%),
      linear-gradient(145deg, rgba(36, 27, 20, .84), rgba(59, 45, 34, .68)) !important;
    border-color: rgba(222, 198, 160, .16) !important;
  }
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-panel {
    background:
      radial-gradient(circle at 16% 0%, rgba(197, 154, 97, .10), transparent 34%),
      rgba(255,255,255,.052) !important;
  }
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .main-brand-lockup {
    background:
      radial-gradient(circle at 9% 12%, rgba(197, 154, 97, .18), transparent 34%),
      linear-gradient(135deg, rgba(39, 29, 22, .88), rgba(58, 43, 31, .68)) !important;
    border-color: rgba(222, 198, 160, .20) !important;
  }
}


/* v7.0.55 main menu warm polish v2: clearer hub, less blue, visible actions. */
body:not(.is-playing) {
  background-repeat: no-repeat !important;
  background-size: cover, cover, cover, cover, auto !important;
  background-position: center center !important;
}

body:not(.is-playing)::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(8,6,4,.62), rgba(8,6,4,.10) 22%, rgba(8,6,4,.10) 78%, rgba(8,6,4,.62)),
    radial-gradient(circle at 50% 52%, transparent 0 46%, rgba(5,4,3,.32) 100%);
}

.start-screen > * {
  position: relative;
  z-index: 1;
}

.main-brand-lockup {
  max-width: min(760px, 100%) !important;
  padding: clamp(12px, 1.55vw, 18px) clamp(18px, 2.4vw, 28px) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 10% 12%, rgba(216, 176, 106, .18), transparent 34%),
    linear-gradient(135deg, rgba(36, 27, 20, .88), rgba(70, 54, 39, .68)) !important;
}

.main-brand-copy h1,
.start-screen .main-brand-copy h1 {
  font-size: clamp(2.9rem, 6vw, 5.45rem) !important;
  background: linear-gradient(90deg, #f4ead8 0%, #f4ead8 52%, #d8b06a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.main-brand-copy span {
  color: rgba(243, 232, 213, .86) !important;
}

.start-screen .tagline {
  margin-bottom: 10px !important;
}

.start-screen::before {
  filter: none !important;
}

@media (min-width: 761px) {
  .start-screen {
    justify-content: start !important;
    padding-top: 18px !important;
    gap: 10px !important;
  }

  .main-menu-kicker {
    transform: translateY(0) !important;
  }

  .start-card.start-card-v12 {
    width: min(1020px, 100%) !important;
    max-width: 1020px !important;
    display: grid !important;
    grid-template-columns: minmax(360px, 1fr) minmax(330px, .88fr) !important;
    grid-template-areas:
      "profile avatar"
      "mode modeinfo"
      "actions actions" !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 26px !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(216, 176, 106, .12), transparent 32%),
      linear-gradient(145deg, rgba(47, 36, 27, .82), rgba(33, 25, 19, .74)) !important;
    border-color: rgba(222, 198, 160, .20) !important;
  }

  .start-card-v12 .mode-copy,
  .start-card-v12 .account-lockup {
    display: none !important;
  }

  .start-card-v12 .account-stats {
    grid-area: profile !important;
    min-height: 0 !important;
  }

  .start-card-v12 .avatar-picker {
    grid-area: avatar !important;
    align-self: stretch !important;
  }

  .start-card-v12 .nickname-field.mode-field {
    grid-area: mode !important;
    min-height: 82px !important;
    display: grid !important;
    align-content: center !important;
    padding: 13px 14px !important;
    border-radius: 20px !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(216, 176, 106, .10), transparent 34%),
      rgba(255,255,255,.045) !important;
    border: 1px solid rgba(222, 198, 160, .11) !important;
  }

  .start-card-v12 .mode-info {
    grid-area: modeinfo !important;
    min-height: 82px !important;
    display: grid !important;
    align-content: center !important;
    border-radius: 20px !important;
  }

  .start-card-v12 .account-actions {
    grid-area: actions !important;
    display: grid !important;
    grid-template-columns: minmax(260px, 1.35fr) repeat(4, minmax(128px, .72fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .account-actions #startBtn {
    min-height: 54px !important;
    font-size: .98rem !important;
    letter-spacing: .02em !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 42px rgba(140, 105, 64, .34), inset 0 1px 0 rgba(255,255,255,.12) !important;
  }

  .account-actions #startBtn::before {
    content: '▶';
    margin-right: 8px;
    font-size: .86rem;
  }

  .account-actions .secondary-btn,
  .account-actions .logout-btn {
    min-height: 54px !important;
    border-radius: 18px !important;
  }
}

.home-profile-card.home-profile-card-3d {
  grid-template-columns: minmax(230px, 310px) 1fr !important;
  gap: 14px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(216, 176, 106, .12), transparent 34%),
    linear-gradient(145deg, rgba(31, 24, 18, .82), rgba(47, 36, 27, .70)) !important;
  border-color: rgba(222, 198, 160, .14) !important;
}

.home-avatar3d .avatar3d-view {
  min-height: 300px !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(216, 176, 106, .13), transparent 42%),
    linear-gradient(180deg, rgba(45, 34, 25, .68), rgba(18, 14, 11, .72)) !important;
  border-color: rgba(222, 198, 160, .13) !important;
}

.home-avatar3d small {
  color: rgba(243, 232, 213, .72) !important;
}

.home-profile-main {
  align-self: start;
}

.home-profile-main strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px !important;
}

.home-profile-main strong::before {
  content: '';
  width: 22px;
  height: 22px;
  background: url('/assets/ui/icons/xp-star.png') center / contain no-repeat;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.24));
}

.home-profile-mini {
  margin-top: 12px !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.home-stat-card {
  min-width: 0;
  overflow: hidden;
}

.home-stat-card strong,
.home-stat-card label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inventory-panel {
  min-height: 0 !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(216, 176, 106, .11), transparent 34%),
    linear-gradient(145deg, rgba(47, 36, 27, .62), rgba(31, 24, 18, .72)) !important;
}

.inventory-items-upgraded {
  max-height: 178px;
  overflow: auto;
  padding-right: 2px;
}

.inventory-items-upgraded::-webkit-scrollbar { width: 6px; }
.inventory-items-upgraded::-webkit-scrollbar-track { background: rgba(24,18,14,.55); border-radius: 999px; }
.inventory-items-upgraded::-webkit-scrollbar-thumb { background: rgba(216,176,106,.55); border-radius: 999px; }

.inventory-item.inventory-item-card {
  min-height: 134px !important;
  border-color: var(--tier-border, rgba(222, 198, 160, .14)) !important;
}

.inventory-item-card.remove {
  background: linear-gradient(145deg, rgba(74, 23, 29, .76), rgba(39, 16, 18, .88)) !important;
}

.nickname-field.mode-field span {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 1000;
  color: rgba(243,232,213,.66) !important;
}

.nickname-field.mode-field select {
  margin-top: 5px;
  font-weight: 950;
}

.mode-info strong {
  font-size: .98rem;
}

.mode-info span {
  font-size: .78rem;
}

@media (max-width: 760px) {
  body:not(.is-playing)::before {
    background:
      linear-gradient(180deg, rgba(8,6,4,.28), rgba(8,6,4,.68)),
      radial-gradient(circle at 50% 56%, transparent 0 48%, rgba(5,4,3,.34) 100%);
  }

  .main-brand-copy h1,
  .start-screen .main-brand-copy h1 {
    font-size: clamp(2.05rem, 11vw, 3.05rem) !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .start-card.start-card-v12 {
    gap: 9px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .account-actions #startBtn::before {
    content: '▶';
    margin-right: 7px;
    font-size: .82rem;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-profile-card.home-profile-card-3d {
    grid-template-columns: 1fr !important;
    border-radius: 18px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-avatar3d .avatar3d-view {
    min-height: 190px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-profile-mini {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-items-upgraded {
    max-height: 300px !important;
  }
}


/* v7.0.56 main menu cleanup: readable avatar name, clean remove card and credits. */
.equipped-character-name {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 2px 0 7px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(216, 176, 106, .10);
  border: 1px solid rgba(222, 198, 160, .14);
  color: rgba(243, 232, 213, .86);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-avatar3d small {
  display: none !important;
}

.inventory-item-card.inventory-remove-card-clean {
  min-height: 118px;
}

.inventory-remove-card-clean .inventory-item-hero {
  min-height: 42px !important;
}

.inventory-remove-card-clean .inventory-item-tier-chip {
  right: 9px !important;
  top: 9px !important;
}

.inventory-remove-card-clean .inventory-item-tier-icon {
  display: none !important;
}

.main-menu-footer {
  width: min(920px, 100%);
  margin: 2px auto 0;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
  border-radius: 999px;
  background: rgba(24, 18, 14, .52);
  border: 1px solid rgba(222, 198, 160, .11);
  color: rgba(243, 232, 213, .70);
  font-size: .72rem;
  line-height: 1.25;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.main-menu-footer strong {
  color: rgba(243, 232, 213, .88);
  letter-spacing: .04em;
}

.main-menu-footer span {
  color: rgba(243, 232, 213, .64);
}

.status-pill {
  color: rgba(243, 232, 213, .78) !important;
}

.status-pill.db-ok {
  border-color: rgba(216, 176, 106, .18) !important;
  color: rgba(243, 232, 213, .86) !important;
}

@media (max-width: 760px) {
  .equipped-character-name {
    max-width: 100%;
    font-size: .64rem;
    padding: 4px 8px;
    margin-bottom: 6px;
  }
  .main-menu-footer {
    width: 100%;
    border-radius: 18px;
    padding: 9px 10px;
    gap: 4px 7px;
    font-size: .62rem;
    text-align: center;
  }
  .main-menu-footer strong,
  .main-menu-footer span {
    width: 100%;
  }
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .main-menu-footer {
    margin-top: 0 !important;
  }
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-remove-card-clean {
    min-height: 106px !important;
  }
}


/* v7.0.57 PC player stat readability fix: no clipped values. */
@media (min-width: 761px) {
  .home-profile-mini {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .home-stat-card {
    min-height: 58px !important;
    padding: 9px 10px !important;
    gap: 1px 7px !important;
  }

  .home-stat-card label {
    font-size: .53rem !important;
    letter-spacing: .08em !important;
    white-space: nowrap !important;
  }

  .home-stat-card strong {
    font-size: .86rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
  }

  .home-stat-icon {
    width: 19px !important;
    height: 19px !important;
  }

  .home-stat-card.stat-best::before,
  .home-stat-card.stat-rank::before,
  .home-stat-card.stat-games::before {
    width: 18px !important;
    height: 18px !important;
  }

  .home-stat-card.stat-best::after,
  .home-stat-card.stat-rank::after,
  .home-stat-card.stat-games::after {
    left: 17px !important;
    top: 15px !important;
    font-size: .66rem !important;
  }

  .home-stat-card.stat-xp,
  .home-stat-card.stat-coins {
    grid-column: span 1;
  }
}


/* v7.0.58 result panel polish: solo + PvP reward moment, warm compact mobile safe zone. */
.result-modal {
  border: 1px solid rgba(222, 198, 160, .18) !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(216, 176, 106, .13), transparent 34%),
    linear-gradient(145deg, rgba(33, 24, 18, .94), rgba(56, 42, 31, .88)) !important;
  box-shadow:
    0 28px 78px rgba(0,0,0,.44),
    inset 0 1px 0 rgba(255,255,255,.075) !important;
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.result-modal::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 36%),
    radial-gradient(circle at 86% 0%, rgba(255,255,255,.06), transparent 28%);
}

.result-modal > * {
  position: relative;
  z-index: 1;
}

.result-header {
  align-items: stretch !important;
}

.result-modal h2 strong {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
  color: #f3e8d5 !important;
  font-weight: 1000;
  letter-spacing: -.01em;
}

.result-modal h2 strong.good::before,
.result-modal h2 strong.bad::before {
  content: '';
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 18px currentColor;
}

.result-modal.result-grade-excellent h2 strong,
.result-modal.result-grade-excellent h2 strong.good {
  color: #d8b06a !important;
  background: rgba(216, 176, 106, .12);
  border-color: rgba(216, 176, 106, .28);
}

.result-modal.result-grade-good h2 strong,
.result-modal.result-grade-good h2 strong.good,
.result-modal.result-grade-waiting h2 strong {
  color: #dec6a0 !important;
  background: rgba(197, 154, 97, .11);
  border-color: rgba(197, 154, 97, .22);
}

.result-modal.result-grade-far h2 strong,
.result-modal.result-grade-skipped h2 strong,
.result-modal.result-grade-far h2 strong.bad,
.result-modal.result-grade-skipped h2 strong.bad {
  color: #f0b47a !important;
  background: rgba(240, 180, 122, .11);
  border-color: rgba(240, 180, 122, .24);
}

.round-points,
.distance-callout,
.compact-result-grid > div,
.pvp-score-row {
  background:
    radial-gradient(circle at 18% 0%, rgba(216, 176, 106, .10), transparent 34%),
    rgba(255,255,255,.052) !important;
  border-color: rgba(222, 198, 160, .12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

.round-points {
  min-width: 104px;
  text-align: left !important;
  display: grid;
  align-content: center;
}

.round-points span,
.distance-callout span,
.compact-result-grid span {
  color: rgba(243, 232, 213, .66) !important;
}

.round-points strong {
  color: #d8b06a !important;
  font-size: clamp(1rem, 2.2vw, 1.22rem) !important;
}

.distance-callout {
  position: relative;
  margin: 11px 0 !important;
  padding: 12px 14px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(216, 176, 106, .22), transparent 52%),
    linear-gradient(135deg, rgba(140, 105, 64, .20), rgba(55, 41, 30, .46)) !important;
  border-color: rgba(216, 176, 106, .22) !important;
  overflow: hidden;
}

.distance-callout::after {
  content: '';
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(216,176,106,.74), transparent);
}

.distance-callout strong {
  color: #fff4df !important;
  text-shadow: 0 10px 26px rgba(0,0,0,.34), 0 0 20px rgba(216,176,106,.14);
}

.compact-result-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact-result-grid strong {
  color: #f3e8d5 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.result-icon-label::before {
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.24));
}

.result-modal.result-grade-excellent {
  border-color: rgba(216, 176, 106, .44) !important;
  box-shadow: 0 28px 82px rgba(92, 67, 34, .34), 0 0 0 1px rgba(216, 176, 106, .12) inset !important;
}

.result-modal.result-grade-good,
.result-modal.result-grade-waiting {
  border-color: rgba(197, 154, 97, .36) !important;
}

.result-modal.result-grade-far,
.result-modal.result-grade-skipped {
  border-color: rgba(240, 180, 122, .34) !important;
}

.result-modal.result-grade-excellent .round-points strong { color: #f0c878 !important; }
.result-modal.result-grade-good .round-points strong,
.result-modal.result-grade-waiting .round-points strong { color: #dec6a0 !important; }
.result-modal.result-grade-far .round-points strong,
.result-modal.result-grade-skipped .round-points strong { color: #f0b47a !important; }

.auto-next-note,
.pvp-auto-next-note {
  color: rgba(243, 232, 213, .68) !important;
  text-align: center;
}

.pvp-hp-scoreboard {
  gap: 7px;
}

.pvp-hp-row {
  border-radius: 14px !important;
  padding: 8px 10px !important;
}

.pvp-hp-bar {
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(222, 198, 160, .10);
}

.pvp-hp-bar span {
  background: linear-gradient(90deg, #8c6940, #d8b06a) !important;
}

.result-travel-line {
  filter: drop-shadow(0 0 6px rgba(216, 176, 106, .40)) !important;
}

@media (min-width: 761px) {
  .result-modal {
    width: min(470px, calc(100vw - 32px)) !important;
    padding: 16px !important;
  }
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal {
  width: clamp(226px, 29dvw, 284px) !important;
  max-width: 284px !important;
  top: 58% !important;
  padding: 8px !important;
  border-radius: 15px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal h2 strong {
  min-height: 22px !important;
  padding: 4px 7px !important;
  font-size: .64rem !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-header {
  gap: 5px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .round-points {
  min-width: 62px !important;
  padding: 5px 6px !important;
  border-radius: 11px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .round-points span,
body.rq-phone-landscape.showing-round-result.is-playing .distance-callout span,
body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid span {
  font-size: .36rem !important;
  letter-spacing: .10em !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .round-points strong {
  font-size: .76rem !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .distance-callout {
  margin: 5px 0 !important;
  padding: 6px 7px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .distance-callout strong {
  font-size: .92rem !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid {
  gap: 4px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .compact-result-grid > div {
  padding: 5px 6px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-icon-label::before {
  width: 10px !important;
  height: 10px !important;
  flex-basis: 10px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .pvp-scoreboard {
  max-height: 90px !important;
  overflow: auto !important;
  padding-right: 2px;
}


/* v7.0.59 result panel phone color visibility + larger desktop icons. */
@media (min-width: 761px) {
  .result-icon-label {
    gap: 8px !important;
  }
  .result-icon-label::before {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
  }
  .distance-callout .result-icon-label::before {
    width: 20px !important;
    height: 20px !important;
    flex-basis: 20px !important;
  }
  .round-points .result-icon-label::before {
    width: 17px !important;
    height: 17px !important;
    flex-basis: 17px !important;
  }
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-excellent {
  background:
    radial-gradient(circle at 20% 0%, rgba(240, 200, 120, .34), transparent 38%),
    linear-gradient(145deg, rgba(61, 43, 24, .96), rgba(34, 25, 18, .93)) !important;
  border-color: rgba(240, 200, 120, .62) !important;
  box-shadow: 0 18px 48px rgba(70, 48, 20, .48), 0 0 0 1px rgba(240, 200, 120, .16) inset !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-good,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-waiting {
  background:
    radial-gradient(circle at 20% 0%, rgba(197, 154, 97, .30), transparent 38%),
    linear-gradient(145deg, rgba(55, 41, 30, .96), rgba(32, 24, 18, .93)) !important;
  border-color: rgba(197, 154, 97, .54) !important;
  box-shadow: 0 18px 44px rgba(58, 43, 31, .42), 0 0 0 1px rgba(197, 154, 97, .14) inset !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-far,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-skipped {
  background:
    radial-gradient(circle at 20% 0%, rgba(240, 180, 122, .30), transparent 38%),
    linear-gradient(145deg, rgba(65, 38, 25, .96), rgba(32, 22, 17, .93)) !important;
  border-color: rgba(240, 180, 122, .52) !important;
  box-shadow: 0 18px 44px rgba(70, 38, 22, .42), 0 0 0 1px rgba(240, 180, 122, .14) inset !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-excellent h2 strong,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-excellent h2 strong.good {
  color: #ffe0a3 !important;
  background: rgba(240, 200, 120, .20) !important;
  border-color: rgba(240, 200, 120, .46) !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-good h2 strong,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-good h2 strong.good,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-waiting h2 strong {
  color: #f3d29f !important;
  background: rgba(197, 154, 97, .18) !important;
  border-color: rgba(197, 154, 97, .38) !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-far h2 strong,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-skipped h2 strong,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-far h2 strong.bad,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-skipped h2 strong.bad {
  color: #ffc08a !important;
  background: rgba(240, 180, 122, .18) !important;
  border-color: rgba(240, 180, 122, .38) !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-excellent .distance-callout {
  background:
    radial-gradient(circle at 50% 0%, rgba(240, 200, 120, .34), transparent 52%),
    linear-gradient(135deg, rgba(156, 110, 45, .34), rgba(55, 41, 30, .56)) !important;
  border-color: rgba(240, 200, 120, .44) !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-good .distance-callout,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-waiting .distance-callout {
  background:
    radial-gradient(circle at 50% 0%, rgba(197, 154, 97, .30), transparent 52%),
    linear-gradient(135deg, rgba(140, 105, 64, .28), rgba(55, 41, 30, .54)) !important;
  border-color: rgba(197, 154, 97, .38) !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-far .distance-callout,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-skipped .distance-callout {
  background:
    radial-gradient(circle at 50% 0%, rgba(240, 180, 122, .30), transparent 52%),
    linear-gradient(135deg, rgba(121, 65, 35, .30), rgba(55, 35, 25, .54)) !important;
  border-color: rgba(240, 180, 122, .36) !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-excellent .round-points strong,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-excellent .distance-callout strong {
  color: #ffe0a3 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-good .round-points strong,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-good .distance-callout strong,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-waiting .round-points strong,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-waiting .distance-callout strong {
  color: #f3d29f !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-far .round-points strong,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-far .distance-callout strong,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-skipped .round-points strong,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-grade-skipped .distance-callout strong {
  color: #ffc08a !important;
}

/* v7.0.60 main menu premium lobby: profile readability, avatar showcase and credits polish. */
@media (min-width: 761px) {
  .start-card.start-card-v12 {
    width: min(1088px, 100%) !important;
    max-width: 1088px !important;
    grid-template-columns: minmax(430px, 1.08fr) minmax(350px, .92fr) !important;
    gap: 14px !important;
    padding: 16px !important;
    border-radius: 30px !important;
    box-shadow:
      0 26px 82px rgba(0, 0, 0, .42),
      0 0 0 1px rgba(216, 176, 106, .08) inset,
      inset 0 1px 0 rgba(255,255,255,.075) !important;
  }

  .home-profile-card.home-profile-card-3d {
    grid-template-columns: minmax(230px, 300px) minmax(0, 1fr) !important;
    align-items: stretch !important;
    min-height: 448px !important;
    padding: 14px !important;
    border-radius: 26px !important;
  }

  .home-avatar3d {
    position: relative;
    display: grid;
    min-width: 0;
  }

  .home-avatar3d::before {
    content: 'Equipped Avatar';
    position: absolute;
    left: 14px;
    top: 13px;
    z-index: 3;
    padding: 5px 9px;
    border-radius: 999px;
    color: rgba(255, 248, 238, .90);
    background: rgba(24, 18, 14, .54);
    border: 1px solid rgba(222, 198, 160, .18);
    font-size: .58rem;
    font-weight: 1000;
    letter-spacing: .11em;
    text-transform: uppercase;
    pointer-events: none;
  }

  .home-avatar3d .avatar3d-view {
    min-height: 420px !important;
    border-radius: 22px !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -30px 60px rgba(0,0,0,.28),
      0 18px 42px rgba(0,0,0,.23) !important;
  }

  .home-avatar3d::after {
    content: '';
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 28px;
    height: 22px;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.42), transparent 68%);
    filter: blur(1px);
    pointer-events: none;
  }

  .home-profile-main {
    padding: 2px 2px 0 !important;
  }

  .home-profile-main strong {
    font-size: 1.2rem !important;
    line-height: 1.15 !important;
  }

  .equipped-character-name {
    max-width: 100% !important;
    margin: 1px 0 10px !important;
    padding: 7px 11px !important;
    border-radius: 14px !important;
    font-size: .78rem !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(216,176,106,.18), transparent 38%),
      rgba(255,255,255,.055) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
  }

  .home-profile-mini {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    margin-top: 13px !important;
  }

  .home-stat-card {
    min-height: 74px !important;
    padding: 12px 12px !important;
    border-radius: 18px !important;
    gap: 3px 10px !important;
    overflow: visible !important;
  }

  .home-stat-card label {
    font-size: .60rem !important;
    letter-spacing: .09em !important;
    white-space: nowrap !important;
  }

  .home-stat-card strong {
    font-size: clamp(.98rem, 1.22vw, 1.16rem) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    color: #fff4df !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.22);
  }

  .home-stat-icon {
    width: 27px !important;
    height: 27px !important;
  }

  .home-stat-card.stat-best::before,
  .home-stat-card.stat-rank::before,
  .home-stat-card.stat-games::before {
    width: 25px !important;
    height: 25px !important;
  }

  .home-stat-card.stat-best::after,
  .home-stat-card.stat-rank::after,
  .home-stat-card.stat-games::after {
    left: 20px !important;
    top: 21px !important;
    font-size: .78rem !important;
  }

  .home-stat-card.stat-games::after { font-size: .68rem !important; }

  .home-stat-card.stat-xp,
  .home-stat-card.stat-coins {
    background:
      radial-gradient(circle at 14% 0%, rgba(216, 176, 106, .20), transparent 38%),
      linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)) !important;
    border-color: rgba(222, 198, 160, .17) !important;
  }

  .home-profile-card .mode-bests {
    grid-column: 1 / -1;
    margin-top: 8px !important;
  }

  .home-profile-card .mode-bests-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .inventory-panel {
    height: 100%;
    border-radius: 26px !important;
    padding: 14px !important;
    border: 1px solid rgba(222, 198, 160, .14) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 16px 40px rgba(0,0,0,.18) !important;
  }

  .inventory-head {
    gap: 12px !important;
    align-items: center !important;
    margin-bottom: 11px !important;
  }

  .inventory-head strong,
  .inventory-panel > strong {
    font-size: 1.02rem !important;
    letter-spacing: -.01em;
  }

  .inventory-head span,
  .inventory-panel > span {
    font-size: .74rem !important;
  }

  .inventory-head .secondary-btn {
    min-height: 38px !important;
    padding: 9px 12px !important;
    border-radius: 14px !important;
  }

  .inventory-items-upgraded {
    max-height: 362px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
  }

  .inventory-item.inventory-item-card {
    min-height: 168px !important;
    border-radius: 20px !important;
  }

  .inventory-card-avatar3d {
    min-height: 102px !important;
  }

  .inventory-item-card strong {
    font-size: .78rem !important;
    line-height: 1.12 !important;
  }

  .inventory-item-card em {
    font-size: .62rem !important;
  }
}

@media (min-width: 1180px) {
  .start-screen {
    width: min(1120px, calc(100% - 38px)) !important;
  }

  .main-brand-lockup {
    transform: translateY(1px);
  }
}

@media (max-width: 980px) {
  .home-profile-card.home-profile-card-3d {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .home-profile-card .mode-bests {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-profile-card.home-profile-card-3d {
    padding: 11px !important;
    gap: 10px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-avatar3d {
    position: relative;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-avatar3d::before {
    content: 'Equipped Avatar';
    position: absolute;
    left: 11px;
    top: 10px;
    z-index: 3;
    padding: 4px 8px;
    border-radius: 999px;
    color: rgba(255,248,238,.88);
    background: rgba(24,18,14,.54);
    border: 1px solid rgba(222,198,160,.16);
    font-size: .50rem;
    font-weight: 1000;
    letter-spacing: .10em;
    text-transform: uppercase;
    pointer-events: none;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-avatar3d .avatar3d-view {
    min-height: 210px !important;
    border-radius: 18px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-profile-main strong {
    font-size: 1.05rem !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .equipped-character-name {
    display: flex !important;
    justify-content: center;
    width: 100%;
    font-size: .70rem !important;
    line-height: 1.15;
    margin: 0 0 8px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-profile-mini {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-stat-card {
    min-height: 64px !important;
    padding: 10px 11px !important;
    border-radius: 16px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-stat-card label {
    font-size: .54rem !important;
    letter-spacing: .075em !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-stat-card strong {
    font-size: 1rem !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-stat-icon {
    width: 23px !important;
    height: 23px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-panel {
    border-radius: 18px !important;
    padding: 11px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-head strong,
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-panel > strong {
    font-size: .92rem !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-items-upgraded {
    max-height: 330px !important;
    gap: 8px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-item.inventory-item-card {
    min-height: 142px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .main-menu-footer {
    background:
      radial-gradient(circle at 20% 0%, rgba(216,176,106,.12), transparent 40%),
      rgba(24,18,14,.62) !important;
    border-color: rgba(222,198,160,.16) !important;
  }
}

@media (max-width: 390px) {
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-stat-card label {
    font-size: .50rem !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-stat-card strong {
    font-size: .92rem !important;
  }
}

body.rq-phone-menu-landscape .home-profile-card.home-profile-card-3d {
  min-height: 0 !important;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) !important;
}

body.rq-phone-menu-landscape .home-avatar3d .avatar3d-view {
  min-height: 196px !important;
}

body.rq-phone-menu-landscape .home-profile-mini {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.rq-phone-menu-landscape .home-stat-card {
  min-height: 52px !important;
  padding: 8px 9px !important;
}

body.rq-phone-menu-landscape .home-stat-card label { font-size: .46rem !important; }
body.rq-phone-menu-landscape .home-stat-card strong { font-size: .76rem !important; }
body.rq-phone-menu-landscape .inventory-items-upgraded { max-height: 184px !important; }


/* v7.0.61 character shelf PC tune: shorter desktop inventory cards + larger creature previews. */
@media (min-width: 761px) {
  .inventory-panel {
    padding: 13px !important;
  }

  .inventory-head {
    margin-bottom: 9px !important;
  }

  .inventory-items-upgraded {
    max-height: 332px !important;
    gap: 9px !important;
    align-content: start !important;
  }

  .inventory-item.inventory-item-card {
    min-height: 152px !important;
    padding: 8px 8px 9px !important;
  }

  .inventory-item-card.inventory-remove-card-clean {
    min-height: 152px !important;
  }

  .inventory-item-card .inventory-item-hero {
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
  }

  .inventory-card-avatar3d {
    bottom: -3px !important;
    height: 102px !important;
    min-height: 102px !important;
    max-height: 102px !important;
  }

  .inventory-card-avatar3d canvas,
  .inventory-card-avatar3d .avatar3d-empty {
    height: 102px !important;
    min-height: 102px !important;
    max-height: 102px !important;
  }

  .inventory-card-avatar3d canvas {
    transform: translateY(4px) scale(1.18) !important;
    transform-origin: center bottom !important;
  }

  .inventory-item-card strong {
    font-size: .76rem !important;
  }

  .inventory-item-card em {
    font-size: .61rem !important;
  }
}


/* v7.0.62 character shelf pages: desktop slot grid and roman page controls. */
@media (min-width: 761px) {
  .inventory-panel.inventory-panel-paged {
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;
    gap: 10px !important;
    align-content: stretch !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .inventory-panel-paged .inventory-head {
    margin-bottom: 0 !important;
  }

  .inventory-shelf-pages {
    display: block !important;
    max-height: none !important;
    min-height: 318px !important;
    overflow: hidden !important;
    padding: 10px !important;
    border-radius: 22px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(216,176,106,.08), transparent 42%),
      linear-gradient(145deg, rgba(16,12,9,.34), rgba(16,12,9,.18)) !important;
    border: 1px solid rgba(222,198,160,.10) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -18px 42px rgba(0,0,0,.12) !important;
  }

  .inventory-page-grid {
    display: none !important;
    height: 100% !important;
    min-height: 298px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .inventory-page-grid.active {
    display: grid !important;
  }

  .inventory-shelf-slot {
    position: relative;
    min-width: 0;
    min-height: 0;
    border-radius: 18px;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 0%, rgba(243,232,213,.07), transparent 46%),
      rgba(20,15,11,.36);
    border: 1px solid rgba(222,198,160,.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  }

  .inventory-shelf-slot-filled {
    border-color: rgba(222,198,160,.15);
  }

  .inventory-shelf-slot-empty {
    display: grid;
    place-items: center;
    border-style: dashed;
    background:
      linear-gradient(135deg, rgba(222,198,160,.045) 0 25%, transparent 25% 50%, rgba(222,198,160,.035) 50% 75%, transparent 75%),
      rgba(20,15,11,.28);
    background-size: 18px 18px, auto;
  }

  .inventory-shelf-slot-empty span {
    color: rgba(243,232,213,.34);
    font-size: .62rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .inventory-shelf-slot .inventory-item.inventory-item-card {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 18px !important;
    padding: 8px 8px 9px !important;
  }

  .inventory-shelf-slot .inventory-item-card .inventory-item-hero {
    height: 90px !important;
    min-height: 90px !important;
    max-height: 90px !important;
  }

  .inventory-shelf-slot .inventory-card-avatar3d {
    bottom: -1px !important;
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
  }

  .inventory-shelf-slot .inventory-card-avatar3d canvas,
  .inventory-shelf-slot .inventory-card-avatar3d .avatar3d-empty {
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
  }

  .inventory-shelf-slot .inventory-card-avatar3d canvas {
    transform: translateY(3px) scale(1.22) !important;
    transform-origin: center bottom !important;
  }

  .inventory-pagebar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 34px;
    padding: 4px 6px 0;
  }

  .inventory-page-btn {
    min-width: 34px;
    height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid rgba(222,198,160,.15);
    background: rgba(22,16,12,.48);
    color: rgba(243,232,213,.62);
    font-size: .68rem;
    font-weight: 1000;
    letter-spacing: .08em;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }

  .inventory-page-btn:hover {
    color: rgba(255,248,238,.88);
    border-color: rgba(216,176,106,.36);
    background: rgba(58,43,31,.68);
  }

  .inventory-page-btn.active {
    color: rgba(27,20,15,.96);
    border-color: rgba(216,176,106,.72);
    background: linear-gradient(180deg, rgba(245,214,154,.98), rgba(197,154,97,.92));
    box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 8px 18px rgba(216,176,106,.16);
  }
}

@media (max-width: 760px) {
  .inventory-page-grid {
    display: contents !important;
  }

  .inventory-page-grid:not(.active) {
    display: contents !important;
  }

  .inventory-shelf-slot {
    display: contents !important;
  }

  .inventory-shelf-slot-empty,
  .inventory-pagebar {
    display: none !important;
  }
}


/* v7.0.63 character shelf compact grid: centered desktop previews and smart pager. */
@media (min-width: 761px) {
  .inventory-panel.inventory-panel-paged {
    gap: 8px !important;
  }

  .inventory-shelf-pages {
    min-height: 286px !important;
    padding: 8px !important;
    border-radius: 20px !important;
  }

  .inventory-page-grid {
    min-height: 270px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .inventory-shelf-slot {
    border-radius: 16px !important;
  }

  .inventory-shelf-slot .inventory-item.inventory-item-card {
    border-radius: 16px !important;
    padding: 7px 7px 8px !important;
    display: grid !important;
    grid-template-rows: 1fr auto auto !important;
    align-content: stretch !important;
  }

  .inventory-shelf-slot .inventory-item-card .inventory-item-hero {
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
  }

  .inventory-shelf-slot .inventory-card-avatar3d {
    top: 8px !important;
    bottom: auto !important;
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
  }

  .inventory-shelf-slot .inventory-card-avatar3d canvas,
  .inventory-shelf-slot .inventory-card-avatar3d .avatar3d-empty {
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
  }

  .inventory-shelf-slot .inventory-card-avatar3d canvas {
    transform: translateY(-2px) scale(1.34) !important;
    transform-origin: center center !important;
  }

  .inventory-shelf-slot .inventory-item-card .inventory-item-tier-chip {
    top: 6px !important;
    right: 6px !important;
    min-height: 21px !important;
    padding: 0 7px !important;
    font-size: .55rem !important;
  }

  .inventory-shelf-slot .inventory-item-card strong {
    font-size: .70rem !important;
    line-height: 1.05 !important;
  }

  .inventory-shelf-slot .inventory-item-card em {
    font-size: .56rem !important;
    line-height: 1.05 !important;
  }

  .inventory-shelf-slot-empty span {
    font-size: .54rem !important;
  }

  .inventory-pagebar {
    min-height: 30px !important;
    gap: 6px !important;
    padding-top: 2px !important;
  }

  .inventory-page-btn {
    min-width: 29px !important;
    height: 24px !important;
    padding: 0 7px !important;
    font-size: .61rem !important;
  }

  .inventory-page-arrow {
    min-width: 25px !important;
    font-size: .86rem !important;
    line-height: 1 !important;
  }

  .inventory-page-count {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    color: rgba(243,232,213,.48);
    background: rgba(22,16,12,.34);
    border: 1px solid rgba(222,198,160,.10);
    font-size: .56rem;
    font-weight: 950;
    letter-spacing: .08em;
  }
}


/* v7.0.65 character shelf repair: true 3x3 fill, visible models and one-next-page pager. */
@media (min-width: 761px) {
  .inventory-panel.inventory-panel-paged {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    gap: 9px !important;
    overflow: hidden !important;
  }

  .inventory-panel-paged .inventory-head {
    margin-bottom: 0 !important;
  }

  .inventory-shelf-pages {
    height: 100% !important;
    min-height: 460px !important;
    max-height: none !important;
    padding: 9px !important;
    overflow: hidden !important;
    display: block !important;
  }

  .inventory-page-grid {
    height: 100% !important;
    min-height: 442px !important;
    display: none !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
    align-content: stretch !important;
  }

  .inventory-page-grid.active {
    display: grid !important;
  }

  .inventory-shelf-slot {
    min-height: 0 !important;
    height: auto !important;
    border-radius: 17px !important;
  }

  .inventory-shelf-slot-empty {
    opacity: .72 !important;
    background:
      linear-gradient(135deg, rgba(222,198,160,.035) 0 25%, transparent 25% 50%, rgba(222,198,160,.030) 50% 75%, transparent 75%),
      rgba(20,15,11,.24) !important;
    background-size: 16px 16px, auto !important;
  }

  .inventory-shelf-slot-empty span {
    font-size: .51rem !important;
    opacity: .72 !important;
  }

  .inventory-shelf-slot .inventory-item.inventory-item-card {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 7px !important;
    border-radius: 17px !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto auto !important;
    gap: 2px !important;
    align-content: stretch !important;
    position: relative !important;
  }

  .inventory-shelf-slot .inventory-item-card .inventory-item-hero {
    position: relative !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .inventory-shelf-slot .inventory-card-avatar3d {
    position: absolute !important;
    inset: -10px -12px -4px -12px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    overflow: hidden !important;
  }

  .inventory-shelf-slot .inventory-card-avatar3d canvas,
  .inventory-shelf-slot .inventory-card-avatar3d .avatar3d-empty {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .inventory-shelf-slot .inventory-card-avatar3d canvas {
    transform: translateY(6px) scale(1.50) !important;
    transform-origin: center center !important;
  }

  .inventory-shelf-slot .inventory-item-card .inventory-item-tier-chip {
    top: 7px !important;
    right: 7px !important;
    min-height: 19px !important;
    padding: 0 6px !important;
    font-size: .50rem !important;
    letter-spacing: .055em !important;
    z-index: 7 !important;
  }

  .inventory-shelf-slot .inventory-item-card strong {
    position: relative !important;
    z-index: 8 !important;
    font-size: .68rem !important;
    line-height: 1.05 !important;
    margin-top: 1px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
  }

  .inventory-shelf-slot .inventory-item-card em {
    position: relative !important;
    z-index: 8 !important;
    font-size: .54rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    text-align: left !important;
  }

  .inventory-shelf-clear-slot {
    order: 999 !important;
  }

  .inventory-shelf-clear-slot .inventory-item-card .inventory-item-hero {
    min-height: 0 !important;
  }

  .inventory-shelf-clear-slot .inventory-item-card.remove {
    background:
      radial-gradient(circle at 78% 12%, rgba(248,113,113,.10), transparent 34%),
      linear-gradient(145deg, rgba(74,23,29,.58), rgba(39,16,18,.76)) !important;
  }

  .inventory-pagebar {
    min-height: 30px !important;
    padding: 2px 6px 0 !important;
    gap: 7px !important;
  }

  .inventory-page-btn {
    min-width: 30px !important;
    height: 25px !important;
    padding: 0 8px !important;
    font-size: .62rem !important;
  }

  .inventory-page-arrow {
    min-width: 28px !important;
    font-size: .95rem !important;
    line-height: 1 !important;
  }

  .inventory-page-count {
    display: none !important;
  }
}


/* v7.0.66 character shelf preview fix: keep 3x3 layout, reveal full static 3D models. */
@media (min-width: 761px) {
  .inventory-shelf-slot .inventory-item-card .inventory-item-hero {
    isolation: isolate !important;
  }

  .inventory-shelf-slot .inventory-card-avatar3d {
    inset: 4px 4px 14px 4px !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
    z-index: 2 !important;
  }

  .inventory-shelf-slot .inventory-card-avatar3d canvas,
  .inventory-shelf-slot .inventory-card-avatar3d .avatar3d-empty {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }

  .inventory-shelf-slot .inventory-card-avatar3d canvas {
    transform: translateY(2px) scale(1.08) !important;
    transform-origin: center center !important;
  }

  .inventory-shelf-slot .inventory-item.inventory-item-card::after {
    content: '';
    position: absolute;
    left: 13%;
    right: 13%;
    bottom: 25px;
    height: 16px;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.36), transparent 70%);
    z-index: 1;
    pointer-events: none;
  }

  .inventory-shelf-clear-slot .inventory-item.inventory-item-card::after,
  .inventory-shelf-slot-empty::after {
    display: none !important;
  }

  .inventory-shelf-slot .inventory-item-card .inventory-item-tier-chip {
    z-index: 9 !important;
  }

  .inventory-shelf-slot .inventory-item-card strong,
  .inventory-shelf-slot .inventory-item-card em {
    z-index: 10 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.72) !important;
  }
}


/* v7.0.67 character shelf preview restore: in-flow desktop canvas so 3D models stay visible inside 3x3 slots. */
@media (min-width: 761px) {
  .inventory-shelf-slot .inventory-item.inventory-item-card::before {
    z-index: 0 !important;
  }

  .inventory-shelf-slot .inventory-item-card .inventory-item-hero {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: 3 !important;
  }

  .inventory-shelf-slot .inventory-card-avatar3d {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 112% !important;
    height: 112% !important;
    min-width: 112% !important;
    min-height: 112% !important;
    max-width: none !important;
    max-height: none !important;
    margin: -6% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    z-index: 4 !important;
    pointer-events: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .inventory-shelf-slot .inventory-card-avatar3d canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    transform: translateY(1px) scale(1.18) !important;
    transform-origin: center center !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .inventory-shelf-slot .inventory-card-avatar3d .avatar3d-empty {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    place-items: center !important;
    font-size: .54rem !important;
    line-height: 1.1 !important;
  }

  .inventory-shelf-slot .inventory-card-avatar3d .shop-tier-glyph {
    transform: scale(1.45) !important;
    opacity: .95 !important;
  }

  .inventory-shelf-clear-slot .inventory-card-avatar3d,
  .inventory-shelf-slot-empty .inventory-card-avatar3d {
    display: none !important;
  }
}


/* v7.0.68 character shelf preview loop fix: lock desktop preview canvas box to stop resize growth. */
@media (min-width: 761px) {
  .inventory-shelf-slot .inventory-item-card .inventory-item-hero {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    contain: layout paint !important;
    z-index: 3 !important;
  }

  .inventory-shelf-slot .inventory-card-avatar3d {
    position: absolute !important;
    inset: 10px 5px 22px 5px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    display: block !important;
    overflow: hidden !important;
    contain: strict !important;
    z-index: 4 !important;
    pointer-events: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .inventory-shelf-slot .inventory-card-avatar3d canvas {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    transform: translateY(4px) scale(1.22) !important;
    transform-origin: center center !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .inventory-shelf-slot .inventory-card-avatar3d .avatar3d-empty {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    place-items: center !important;
    font-size: .54rem !important;
    line-height: 1.1 !important;
  }

  .inventory-shelf-slot .inventory-card-avatar3d .shop-tier-glyph {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    transform: scale(1.15) !important;
    opacity: .92 !important;
  }

  .inventory-shelf-clear-slot .inventory-card-avatar3d,
  .inventory-shelf-slot-empty .inventory-card-avatar3d {
    display: none !important;
  }
}

/* v7.0.69 gameplay show polish with low-poly assets, warm reveal panel and animated solo map pins */
:root {
  --rq-warm-gold: #f59e0b;
  --rq-warm-paper: #f9e7bd;
  --rq-warm-ink: #573b18;
  --rq-warm-muted: #8a6a39;
}

.rq-tuning-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
}
.rq-tuning-overlay.is-visible { opacity: 1; }
.rq-tuning-overlay.is-hiding { opacity: 0; }
.rq-tuning-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(16, 10, 3, .22), rgba(16, 10, 3, .54)),
    url('/assets/ui/gameplay/tuning-overlay.png') center center / cover no-repeat;
  transform: scale(1.03);
  filter: saturate(1.06);
}
.rq-tuning-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,.06), rgba(9, 5, 0, .08) 34%, rgba(7, 5, 2, .28) 74%);
}
.rq-tuning-card {
  position: relative;
  z-index: 1;
  width: min(540px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 20px 24px;
  border-radius: 30px;
  background: rgba(72, 40, 9, .32);
  border: 1px solid rgba(255, 236, 188, .48);
  box-shadow: 0 26px 90px rgba(0,0,0,.36);
  backdrop-filter: blur(14px);
  transform: translateY(12px) scale(.98);
  animation: rqTuningCardIn .34s ease forwards;
}
.rq-tuning-radio {
  width: clamp(88px, 14vw, 112px);
  height: clamp(88px, 14vw, 112px);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 16px 34px rgba(0,0,0,.18);
}
.rq-tuning-radio img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  animation: rqRadioBob 1.25s ease-in-out infinite;
}
.rq-tuning-copy { display: grid; gap: 6px; }
.rq-tuning-kicker {
  color: rgba(255, 245, 214, .86);
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .18em;
  font-weight: 900;
}
.rq-tuning-copy strong {
  display: block;
  font-size: clamp(1.4rem, 4vw, 2rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: #fff7dd;
  text-shadow: 0 4px 18px rgba(0,0,0,.22);
}
.rq-tuning-copy small {
  color: rgba(255, 245, 214, .92);
  line-height: 1.45;
  font-size: .98rem;
}
@keyframes rqTuningCardIn {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes rqRadioBob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-4px) rotate(1deg); }
}

.game-screen .audio-card {
  overflow: hidden;
  background: linear-gradient(145deg, rgba(30, 18, 6, .76), rgba(17, 10, 3, .72));
  border: 1px solid rgba(255, 214, 130, .22);
  box-shadow: 0 22px 48px rgba(0,0,0,.33);
}
.game-screen .audio-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(255, 209, 102, .16), transparent 35%),
    url('/assets/ui/gameplay/icon-radio.png') no-repeat right -16px bottom -12px / 112px auto;
  opacity: .18;
  pointer-events: none;
}
.game-screen .audio-card > * { position: relative; z-index: 1; }
.game-screen .audio-card .audio-copy h2 {
  color: #fff4d4;
  text-shadow: 0 2px 12px rgba(0,0,0,.22);
}
.game-screen .audio-card .audio-copy p { color: #f3d6a4; }
.game-screen .audio-card .wave-orb {
  background: radial-gradient(circle at 30% 30%, #ffe39f, #f59e0b 58%, #a6500a 100%);
  box-shadow: 0 0 0 6px rgba(245, 158, 11, .12), 0 12px 28px rgba(0,0,0,.25);
}
.game-screen .audio-card[data-signal-state="tuning"] .wave-orb,
.game-screen .audio-card[data-signal-state="loading"] .wave-orb {
  animation-duration: 1.08s;
}
.game-screen .audio-card.signal-live-burst {
  animation: rqAudioCardBurst 1s ease;
}
@keyframes rqAudioCardBurst {
  0% { transform: translateY(0) scale(1); box-shadow: 0 22px 48px rgba(0,0,0,.33); }
  30% { transform: translateY(-3px) scale(1.01); box-shadow: 0 0 0 4px rgba(245,158,11,.18), 0 28px 54px rgba(0,0,0,.35); }
  100% { transform: translateY(0) scale(1); box-shadow: 0 22px 48px rgba(0,0,0,.33); }
}
.game-screen .bottom-panel {
  background: linear-gradient(145deg, rgba(26, 16, 5, .84), rgba(16, 10, 3, .78));
  border: 1px solid rgba(255, 214, 130, .18);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
body.has-map-guess .bottom-panel {
  border-color: rgba(245, 158, 11, .42);
  box-shadow: 0 0 0 4px rgba(245,158,11,.08), 0 18px 40px rgba(0,0,0,.28);
}
#guessBtn.ready {
  box-shadow: 0 0 0 5px rgba(245,158,11,.14), 0 18px 38px rgba(245,158,11,.22);
}

.custom-pin-wrap {
  background: transparent !important;
}
.custom-pin-shell {
  position: relative;
  width: 72px;
  height: 84px;
}
.custom-pin-shell .custom-pin {
  position: absolute;
  inset: 0;
  width: 72px;
  height: 84px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.custom-pin-shell .custom-pin img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.3));
}
.custom-pin.drop-in img {
  animation: rqPinDrop .42s cubic-bezier(.2, 1.4, .35, 1);
}
.custom-pin.locked img {
  filter: drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 10px 18px rgba(0,0,0,.32));
}
.custom-pin-radius,
.custom-pin-pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.custom-pin-radius {
  width: 94px;
  height: 94px;
  background: radial-gradient(circle, rgba(251,191,36,.14) 0, rgba(251,191,36,.08) 45%, rgba(251,191,36,.02) 68%, rgba(251,191,36,0) 72%);
  animation: rqGuessRadius 1.8s ease-out infinite;
}
.custom-pin-pulse {
  width: 62px;
  height: 62px;
  border: 3px solid rgba(251, 191, 36, .58);
  animation: rqGuessPulse 1.8s ease-out infinite;
}
@keyframes rqPinDrop {
  0% { transform: translateY(-28px) scale(.7); opacity: 0; }
  70% { transform: translateY(4px) scale(1.08); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes rqGuessRadius {
  0% { transform: translate(-50%, -50%) scale(.78); opacity: .95; }
  100% { transform: translate(-50%, -50%) scale(1.12); opacity: .15; }
}
@keyframes rqGuessPulse {
  0% { transform: translate(-50%, -50%) scale(.92); opacity: .95; }
  70% { transform: translate(-50%, -50%) scale(1.28); opacity: .2; }
  100% { transform: translate(-50%, -50%) scale(1.34); opacity: 0; }
}
.result-travel-line {
  stroke: #f59e0b !important;
  stroke-width: 5 !important;
  stroke-dasharray: 16 14;
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, .28));
  animation: rqRouteDash 1.08s linear infinite;
}
@keyframes rqRouteDash {
  to { stroke-dashoffset: -60; }
}

.result-modal.result-solo-reveal {
  position: fixed;
  overflow: hidden;
  padding: 0;
  width: min(640px, calc(100vw - 24px));
  background: transparent;
  border: 0;
  box-shadow: 0 26px 70px rgba(0,0,0,.35);
}
.result-modal.result-solo-reveal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/ui/gameplay/round-result-panel.png') center center / 100% 100% no-repeat;
}
.result-modal.result-solo-reveal > * {
  position: relative;
  z-index: 1;
}
.round-reveal-shell {
  min-height: 478px;
  padding: 74px 36px 50px;
  color: var(--rq-warm-ink);
}
.round-reveal-topline {
  margin-bottom: 16px;
  color: #8b5a13;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.result-modal.result-solo-reveal .result-header {
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}
.result-modal.result-solo-reveal h2 {
  margin: 0 0 6px;
  font-size: clamp(1.5rem, 3.8vw, 2rem);
  color: #573b18;
  text-shadow: none;
}
.result-modal.result-solo-reveal .compact-note {
  color: var(--rq-warm-muted);
  line-height: 1.45;
}
.result-modal.result-solo-reveal .round-points {
  min-width: 124px;
  padding: 14px 16px;
  border-radius: 22px;
  background: rgba(255, 249, 233, .82);
  border: 1px solid rgba(138, 90, 19, .16);
  box-shadow: 0 10px 18px rgba(68, 46, 18, .08);
}
.result-modal.result-solo-reveal .round-points span,
.result-modal.result-solo-reveal .result-icon-label {
  color: #8b5a13;
}
.result-modal.result-solo-reveal .round-points strong {
  color: #573b18;
}
.reveal-steps-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.reveal-card {
  border-radius: 18px;
  padding: 14px 15px;
  background: rgba(255, 248, 231, .8);
  border: 1px solid rgba(138, 90, 19, .12);
  box-shadow: 0 10px 18px rgba(68, 46, 18, .05);
}
.reveal-card strong {
  display: block;
  margin-top: 6px;
  font-size: 1rem;
  color: #553814;
  line-height: 1.3;
}
.reveal-card small {
  display: block;
  margin-top: 7px;
  color: #8a6a39;
  line-height: 1.35;
}
.result-modal.result-solo-reveal .auto-next-note {
  margin-top: 18px;
  text-align: center;
  color: #8b5a13;
  font-weight: 900;
}

@media (max-width: 920px) {
  .rq-tuning-card {
    width: min(460px, calc(100vw - 28px));
    gap: 14px;
    padding: 16px 18px;
    border-radius: 24px;
  }
  .rq-tuning-copy small { font-size: .9rem; }
  .result-modal.result-solo-reveal {
    width: min(520px, calc(100vw - 14px));
  }
  .round-reveal-shell {
    min-height: 436px;
    padding: 62px 26px 40px;
  }
}
@media (max-width: 680px) {
  .rq-tuning-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .reveal-steps-grid { grid-template-columns: 1fr; }
  .result-modal.result-solo-reveal .result-header {
    flex-direction: column;
  }
  .result-modal.result-solo-reveal .round-points {
    width: 100%;
  }
}
body.rq-phone-landscape .rq-tuning-card {
  width: min(520px, calc(100vw - 24px));
}
body.rq-phone-landscape .result-modal.result-solo-reveal {
  width: min(500px, calc(100vw - 14px));
}
body.rq-phone-landscape .round-reveal-shell {
  min-height: 412px;
  padding: 56px 22px 34px;
}

/* v7.0.71 gameplay cleanup: stable SVG/div map pins + left safe-area reveal panel */
.custom-pin-wrap {
  background: transparent !important;
  border: 0 !important;
}
.rq-map-pin-shell {
  position: relative;
  width: 34px;
  height: 46px;
  pointer-events: none;
  transform: translateZ(0);
}
.rq-map-pin {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 50% 8px;
  transform: translateX(-50%) rotate(-45deg);
  border: 3px solid rgba(255, 246, 216, .96);
  box-shadow: 0 8px 16px rgba(56, 33, 9, .34);
}
.rq-map-pin span {
  display: block;
  transform: rotate(45deg);
  color: #fff8d7;
  font-size: 13px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.24);
}
.rq-map-pin.guess {
  background: linear-gradient(145deg, #ffb23f, #e87518 72%);
}
.rq-map-pin.answer {
  background: linear-gradient(145deg, #a3e635, #2f9e44 76%);
  border-color: rgba(255, 250, 199, .98);
}
.rq-map-pin.drop-in {
  animation: rqStablePinDrop .36s cubic-bezier(.2, 1.35, .35, 1) both;
}
.rq-map-pin.locked {
  filter: saturate(.96);
  box-shadow: 0 8px 16px rgba(56, 33, 9, .28), 0 0 0 5px rgba(245, 158, 11, .12);
}
.rq-map-pin-pulse {
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(245, 158, 11, .62);
  background: rgba(245, 158, 11, .12);
  transform: translate(-50%, 50%);
  animation: rqStablePinPulse 1.45s ease-out infinite;
}
@keyframes rqStablePinDrop {
  0% { opacity: 0; transform: translate(-50%, -18px) rotate(-45deg) scale(.72); }
  70% { opacity: 1; transform: translate(-50%, 3px) rotate(-45deg) scale(1.08); }
  100% { opacity: 1; transform: translate(-50%, 0) rotate(-45deg) scale(1); }
}
@keyframes rqStablePinPulse {
  0% { opacity: .72; transform: translate(-50%, 50%) scale(.72); }
  100% { opacity: 0; transform: translate(-50%, 50%) scale(1.75); }
}
.result-travel-line {
  stroke: #d97706 !important;
  stroke-width: 3 !important;
  stroke-dasharray: 10 10 !important;
  stroke-linecap: round !important;
  filter: drop-shadow(0 2px 4px rgba(88, 50, 12, .22)) !important;
  animation: rqCalmRouteDash 1.25s linear infinite !important;
}
@keyframes rqCalmRouteDash { to { stroke-dashoffset: -40; } }

/* Undo the image-pin experiment for regular map markers while keeping PvP numbered pins usable. */
.custom-pin-shell:not(.pvp-shell),
.custom-pin-shell:not(.pvp-shell) .custom-pin,
.custom-pin-shell:not(.pvp-shell) .custom-pin img,
.custom-pin-radius,
.custom-pin-pulse {
  display: none !important;
}
.custom-pin-shell.pvp-shell {
  display: block !important;
  width: 40px !important;
  height: 34px !important;
}
.custom-pin-shell.pvp-shell .custom-pin.pvp-guess {
  display: grid !important;
  position: absolute !important;
  width: 30px !important;
  height: 30px !important;
  left: 5px !important;
  top: 0 !important;
  border-radius: 50% 50% 50% 8px !important;
  transform: rotate(-45deg) !important;
  border: 3px solid rgba(255,255,255,.95) !important;
  place-items: center !important;
  box-shadow: 0 8px 16px rgba(0,0,0,.28) !important;
}
.custom-pin-shell.pvp-shell .custom-pin.pvp-guess span {
  transform: rotate(45deg) !important;
}

.result-modal.result-solo-reveal {
  left: 22px !important;
  right: auto !important;
  top: 118px !important;
  bottom: auto !important;
  width: min(540px, calc(100vw - 44px)) !important;
  aspect-ratio: 1808 / 1119;
  max-height: calc(100vh - 150px);
  overflow: visible !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: 0 24px 64px rgba(58, 33, 10, .26) !important;
}
.result-modal.result-solo-reveal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/ui/gameplay/round-result-panel.png') center center / 100% 100% no-repeat;
  filter: drop-shadow(0 20px 28px rgba(36, 21, 7, .24));
}
.result-modal.result-solo-reveal .round-reveal-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  padding: 60px 64px 48px 76px !important;
  color: #4b2f12 !important;
}
.result-modal.result-solo-reveal .round-reveal-content {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 10px;
  padding: 10px 14px 8px;
  border-radius: 24px;
  background: rgba(255, 243, 203, .58);
  box-shadow: inset 0 0 0 1px rgba(109, 70, 22, .08);
}
.result-modal.result-solo-reveal .round-reveal-topline {
  margin: 0 !important;
  color: #8a5613 !important;
  font-size: .72rem !important;
  font-weight: 1000 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}
.result-modal.result-solo-reveal .round-reveal-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}
.result-modal.result-solo-reveal h2 {
  margin: 0 !important;
  color: #4b2f12 !important;
  font-size: clamp(1.3rem, 2.8vw, 1.75rem) !important;
  line-height: 1 !important;
  text-shadow: none !important;
}
.result-modal.result-solo-reveal h2 .good,
.result-modal.result-solo-reveal h2 .bad,
.result-modal.result-solo-reveal .good,
.result-modal.result-solo-reveal .bad {
  color: #4b2f12 !important;
  text-shadow: none !important;
}
.result-modal.result-solo-reveal .compact-note {
  margin: 5px 0 0 !important;
  color: #6f4b1f !important;
  font-size: .78rem !important;
  line-height: 1.25 !important;
}
.result-modal.result-solo-reveal .round-points {
  min-width: 102px !important;
  padding: 9px 12px !important;
  border-radius: 18px !important;
  background: rgba(255, 250, 229, .86) !important;
  border: 1px solid rgba(141, 93, 28, .16) !important;
  box-shadow: 0 8px 14px rgba(76, 46, 14, .08) !important;
  text-align: center !important;
}
.result-modal.result-solo-reveal .round-points span,
.result-modal.result-solo-reveal .reveal-distance span,
.result-modal.result-solo-reveal .reveal-details span {
  display: block !important;
  color: #8a5613 !important;
  font-size: .66rem !important;
  font-weight: 1000 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}
.result-modal.result-solo-reveal .round-points strong {
  display: block !important;
  margin-top: 2px !important;
  color: #4b2f12 !important;
  font-size: 1.16rem !important;
  line-height: 1 !important;
}
.result-modal.result-solo-reveal .reveal-distance {
  padding: 10px 14px !important;
  border-radius: 18px !important;
  background: rgba(255, 250, 229, .76) !important;
  border: 1px solid rgba(141, 93, 28, .13) !important;
  margin: 0 !important;
}
.result-modal.result-solo-reveal .reveal-distance strong {
  display: block !important;
  margin-top: 2px !important;
  color: #4b2f12 !important;
  font-size: 1.38rem !important;
  line-height: 1.05 !important;
}
.result-modal.result-solo-reveal .reveal-details {
  display: grid !important;
  gap: 8px !important;
}
.result-modal.result-solo-reveal .reveal-details > div {
  min-width: 0;
  padding: 9px 12px !important;
  border-radius: 16px !important;
  background: rgba(255, 250, 229, .65) !important;
  border: 1px solid rgba(141, 93, 28, .1) !important;
}
.result-modal.result-solo-reveal .reveal-details strong {
  display: block !important;
  margin-top: 3px !important;
  color: #4b2f12 !important;
  font-size: .88rem !important;
  line-height: 1.22 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
.result-modal.result-solo-reveal .auto-next-note {
  align-self: end;
  margin: 0 !important;
  text-align: center !important;
  color: #7c4c10 !important;
  font-size: .76rem !important;
  font-weight: 1000 !important;
}
body.showing-round-result .game-avatar-shell {
  opacity: .32;
  pointer-events: none;
}

@media (max-width: 920px) {
  .result-modal.result-solo-reveal {
    left: 10px !important;
    top: 72px !important;
    width: min(440px, calc(100vw - 20px)) !important;
    max-height: calc(100vh - 88px) !important;
  }
  .result-modal.result-solo-reveal .round-reveal-shell {
    padding: 49px 52px 39px 61px !important;
  }
  .result-modal.result-solo-reveal .round-reveal-content {
    gap: 7px;
    padding: 8px 11px 7px;
  }
  .result-modal.result-solo-reveal h2 { font-size: 1.18rem !important; }
  .result-modal.result-solo-reveal .compact-note { font-size: .7rem !important; }
  .result-modal.result-solo-reveal .reveal-distance strong { font-size: 1.12rem !important; }
  .result-modal.result-solo-reveal .reveal-details strong { font-size: .78rem !important; }
}
@media (max-width: 680px) and (orientation: portrait) {
  .result-modal.result-solo-reveal {
    top: 88px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(420px, calc(100vw - 18px)) !important;
  }
}
body.rq-phone-landscape .result-modal.result-solo-reveal {
  left: 8px !important;
  top: 58px !important;
  width: min(430px, calc(100vw - 16px)) !important;
}
body.rq-phone-landscape .result-modal.result-solo-reveal .round-reveal-shell {
  padding: 48px 50px 38px 58px !important;
}
body.rq-phone-landscape .result-modal.result-solo-reveal .round-reveal-content {
  gap: 6px !important;
  padding: 7px 10px 6px !important;
}
body.rq-phone-landscape .result-modal.result-solo-reveal .compact-note {
  display: none !important;
}

/* v7.0.72 gameplay UX polish: clear marker labels + tighter left reveal safe area */
.rq-map-pin-shell {
  width: 40px !important;
  height: 58px !important;
  isolation: isolate;
}
.rq-map-pin {
  left: 50% !important;
  bottom: 16px !important;
  width: 30px !important;
  height: 30px !important;
  border-width: 3px !important;
  z-index: 2;
}
.rq-map-pin.guess {
  background: linear-gradient(145deg, #ffbd4a 0%, #f28b22 58%, #c95c0b 100%) !important;
  border-color: #fff0c2 !important;
  box-shadow: 0 9px 18px rgba(92, 52, 10, .32), 0 0 0 5px rgba(245, 158, 11, .12) !important;
}
.rq-map-pin.answer {
  background: linear-gradient(145deg, #b7f34a 0%, #44b649 62%, #17843b 100%) !important;
  border-color: #fff7b0 !important;
  box-shadow: 0 9px 18px rgba(21, 84, 35, .30), 0 0 0 6px rgba(74, 222, 128, .15) !important;
}
.rq-map-pin span {
  font-size: 13px !important;
  font-weight: 1000 !important;
  color: #fff8dc !important;
  text-shadow: 0 2px 3px rgba(60, 32, 4, .42) !important;
}
.rq-map-pin.answer span {
  font-size: 14px !important;
  color: #fff8a8 !important;
}
.rq-map-pin-pulse {
  left: 50% !important;
  bottom: 16px !important;
  width: 38px !important;
  height: 38px !important;
  border-color: rgba(245, 158, 11, .58) !important;
  background: rgba(245, 158, 11, .12) !important;
}
.rq-map-pin-label {
  position: absolute;
  left: 50%;
  bottom: 52px;
  z-index: 3;
  transform: translateX(-50%);
  padding: 5px 8px 6px;
  border-radius: 999px;
  color: #fff8df;
  font-size: 10px;
  line-height: 1;
  font-weight: 1000;
  white-space: nowrap;
  letter-spacing: .01em;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 7px 15px rgba(0,0,0,.22);
  pointer-events: none;
}
.rq-map-pin-label.guess {
  background: rgba(118, 63, 10, .92);
}
.rq-map-pin-label.answer {
  background: rgba(24, 91, 44, .94);
}
.rq-map-pin-shell:not(.locked):not(.answer) .rq-map-pin-label {
  opacity: .92;
  transform: translateX(-50%) translateY(2px) scale(.96);
}
.rq-map-pin-shell.locked .rq-map-pin-label,
.rq-map-pin-shell.answer .rq-map-pin-label {
  opacity: 1;
}
.custom-pin-wrap-guess,
.custom-pin-wrap-answer {
  margin-left: 0 !important;
  margin-top: 0 !important;
}
.result-travel-line {
  stroke: #c7771d !important;
  stroke-width: 2.5 !important;
  stroke-dasharray: 8 10 !important;
  opacity: .78 !important;
  filter: drop-shadow(0 1px 2px rgba(88, 50, 12, .22)) !important;
}

.result-modal.result-solo-reveal {
  left: 20px !important;
  top: 98px !important;
  width: min(500px, calc(100vw - 40px)) !important;
  max-height: calc(100vh - 128px) !important;
  box-shadow: 0 20px 54px rgba(58, 33, 10, .22) !important;
}
.result-modal.result-solo-reveal .round-reveal-shell {
  padding: 58px 82px 94px 88px !important;
}
.result-modal.result-solo-reveal .round-reveal-content {
  height: auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto auto !important;
  gap: 8px !important;
  padding: 8px 10px 6px !important;
  background: rgba(255, 245, 210, .48) !important;
  box-shadow: inset 0 0 0 1px rgba(109, 70, 22, .07) !important;
}
.result-modal.result-solo-reveal .round-reveal-topline {
  font-size: .62rem !important;
  letter-spacing: .14em !important;
  opacity: .9;
}
.result-modal.result-solo-reveal .round-reveal-head {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
}
.result-modal.result-solo-reveal h2 {
  font-size: clamp(1.18rem, 2.4vw, 1.46rem) !important;
  line-height: .98 !important;
  max-width: 180px;
}
.result-modal.result-solo-reveal .round-points {
  min-width: 88px !important;
  padding: 8px 10px !important;
  border-radius: 16px !important;
  background: rgba(255, 250, 229, .78) !important;
}
.result-modal.result-solo-reveal .round-points span,
.result-modal.result-solo-reveal .reveal-distance span,
.result-modal.result-solo-reveal .reveal-details span {
  font-size: .58rem !important;
  letter-spacing: .1em !important;
}
.result-modal.result-solo-reveal .round-points strong {
  font-size: 1.04rem !important;
}
.result-modal.result-solo-reveal .reveal-distance {
  padding: 8px 11px !important;
  border-radius: 15px !important;
  background: rgba(255, 250, 229, .68) !important;
}
.result-modal.result-solo-reveal .reveal-distance strong {
  font-size: 1.14rem !important;
}
.result-modal.result-solo-reveal .reveal-details {
  gap: 6px !important;
}
.result-modal.result-solo-reveal .reveal-details > div {
  padding: 7px 10px !important;
  border-radius: 14px !important;
  background: rgba(255, 250, 229, .58) !important;
}
.result-modal.result-solo-reveal .reveal-details strong {
  margin-top: 2px !important;
  font-size: .78rem !important;
  line-height: 1.16 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
}
.result-modal.result-solo-reveal .auto-next-note {
  margin-top: 1px !important;
  font-size: .68rem !important;
}
.result-modal.result-solo-reveal .compact-note:not(.auto-next-note) {
  display: none !important;
}

@media (max-width: 920px) {
  .rq-map-pin-label {
    font-size: 9px;
    padding: 4px 7px 5px;
    bottom: 50px;
  }
  .result-modal.result-solo-reveal {
    left: 8px !important;
    top: 64px !important;
    width: min(410px, calc(100vw - 16px)) !important;
  }
  .result-modal.result-solo-reveal .round-reveal-shell {
    padding: 48px 64px 76px 70px !important;
  }
  .result-modal.result-solo-reveal .round-reveal-content {
    gap: 5px !important;
    padding: 6px 8px 5px !important;
  }
  .result-modal.result-solo-reveal h2 {
    font-size: 1.05rem !important;
    max-width: 150px;
  }
  .result-modal.result-solo-reveal .round-points {
    min-width: 76px !important;
    padding: 6px 8px !important;
  }
  .result-modal.result-solo-reveal .reveal-distance strong { font-size: 1rem !important; }
  .result-modal.result-solo-reveal .reveal-details strong { font-size: .7rem !important; }
}
body.rq-phone-landscape .result-modal.result-solo-reveal {
  left: 8px !important;
  top: 52px !important;
  width: min(400px, calc(100vw - 16px)) !important;
}
body.rq-phone-landscape .result-modal.result-solo-reveal .round-reveal-shell {
  padding: 46px 63px 74px 68px !important;
}
body.rq-phone-landscape .rq-map-pin-label {
  display: none;
}

/* v7.0.73 gameplay micro-fix: detached marker labels + deeper left reveal safe area */
.rq-map-pin-shell {
  width: 40px !important;
  height: 46px !important;
  overflow: visible !important;
}
.rq-map-pin {
  left: 50% !important;
  bottom: 2px !important;
  width: 30px !important;
  height: 30px !important;
}
.rq-map-pin-pulse {
  left: 50% !important;
  bottom: 2px !important;
  width: 38px !important;
  height: 38px !important;
}
.rq-map-pin-label {
  display: none !important;
}
.leaflet-tooltip.rq-map-pin-tooltip {
  padding: 5px 9px 6px !important;
  border-radius: 999px !important;
  color: #fff8df !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  white-space: nowrap !important;
  letter-spacing: .01em !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow: 0 7px 15px rgba(0,0,0,.22) !important;
  pointer-events: none !important;
}
.leaflet-tooltip.rq-map-pin-tooltip::before {
  display: none !important;
}
.leaflet-tooltip.rq-map-pin-tooltip.guess {
  background: rgba(118, 63, 10, .94) !important;
}
.leaflet-tooltip.rq-map-pin-tooltip.answer {
  background: rgba(24, 91, 44, .96) !important;
}
.result-travel-line {
  stroke-width: 2.35 !important;
  stroke-dasharray: 7 10 !important;
  opacity: .72 !important;
}
.result-modal.result-solo-reveal {
  left: 20px !important;
  top: 94px !important;
  width: min(560px, calc(100vw - 40px)) !important;
  aspect-ratio: 2048 / 1242 !important;
  max-height: calc(100vh - 126px) !important;
}
.result-modal.result-solo-reveal .round-reveal-shell {
  padding: 72px 88px 104px 124px !important;
}
.result-modal.result-solo-reveal .round-reveal-content {
  gap: 7px !important;
  padding: 9px 12px 7px !important;
  border-radius: 20px !important;
  background: rgba(255, 246, 217, .56) !important;
}
.result-modal.result-solo-reveal .round-reveal-topline {
  font-size: .6rem !important;
  letter-spacing: .12em !important;
}
.result-modal.result-solo-reveal .round-reveal-head {
  gap: 10px !important;
}
.result-modal.result-solo-reveal h2 {
  max-width: 210px !important;
  font-size: clamp(1.18rem, 2.1vw, 1.48rem) !important;
}
.result-modal.result-solo-reveal .round-points {
  min-width: 92px !important;
  padding: 8px 10px !important;
}
.result-modal.result-solo-reveal .reveal-distance {
  padding: 8px 12px !important;
}
.result-modal.result-solo-reveal .reveal-distance strong {
  font-size: 1.16rem !important;
}
.result-modal.result-solo-reveal .reveal-details {
  gap: 6px !important;
}
.result-modal.result-solo-reveal .reveal-details > div {
  padding: 7px 10px !important;
}
.result-modal.result-solo-reveal .reveal-details strong {
  font-size: .78rem !important;
  line-height: 1.16 !important;
}
.result-modal.result-solo-reveal .auto-next-note {
  font-size: .68rem !important;
}
@media (max-width: 920px) {
  .leaflet-tooltip.rq-map-pin-tooltip {
    font-size: 9px !important;
    padding: 4px 7px 5px !important;
  }
  .result-modal.result-solo-reveal {
    left: 8px !important;
    top: 62px !important;
    width: min(452px, calc(100vw - 16px)) !important;
  }
  .result-modal.result-solo-reveal .round-reveal-shell {
    padding: 54px 68px 82px 86px !important;
  }
  .result-modal.result-solo-reveal .round-reveal-content {
    gap: 5px !important;
    padding: 6px 8px 5px !important;
  }
}
body.rq-phone-landscape .result-modal.result-solo-reveal {
  left: 8px !important;
  top: 50px !important;
  width: min(430px, calc(100vw - 16px)) !important;
}
body.rq-phone-landscape .result-modal.result-solo-reveal .round-reveal-shell {
  padding: 50px 64px 76px 82px !important;
}
body.rq-phone-landscape .leaflet-tooltip.rq-map-pin-tooltip {
  display: none !important;
}

/* v7.0.74 marker/result micro-fix: pin tip equals click point + fixed safe-area result layout */
.custom-pin-wrap.custom-pin-wrap-guess,
.custom-pin-wrap.custom-pin-wrap-answer {
  width: 40px !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.rq-map-pin-shell {
  width: 40px !important;
  height: 52px !important;
  position: relative !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform: none !important;
}
.rq-map-pin {
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  width: 32px !important;
  height: 44px !important;
  display: grid !important;
  place-items: start center !important;
  padding-top: 8px !important;
  transform: translateX(-50%) !important;
  border: 3px solid #fff1c8 !important;
  border-radius: 18px 18px 18px 18px !important;
  clip-path: polygon(50% 100%, 19% 62%, 9% 38%, 13% 18%, 30% 4%, 50% 0%, 70% 4%, 87% 18%, 91% 38%, 81% 62%) !important;
  box-sizing: border-box !important;
  z-index: 2 !important;
  box-shadow: 0 10px 18px rgba(55, 32, 8, .32), 0 0 0 4px rgba(255,255,255,.08) !important;
}
.rq-map-pin.guess {
  background: linear-gradient(145deg, #ffd166 0%, #f59e0b 54%, #c95c0b 100%) !important;
  box-shadow: 0 10px 18px rgba(92, 52, 10, .34), 0 0 0 5px rgba(245, 158, 11, .14) !important;
}
.rq-map-pin.answer {
  background: linear-gradient(145deg, #d9f99d 0%, #4ade80 54%, #15803d 100%) !important;
  border-color: #fff7b0 !important;
  box-shadow: 0 10px 18px rgba(21, 84, 35, .30), 0 0 0 5px rgba(74, 222, 128, .15) !important;
}
.rq-map-pin span {
  transform: none !important;
  display: block !important;
  color: #fff8d7 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  text-shadow: 0 2px 3px rgba(60, 32, 4, .42) !important;
}
.rq-map-pin.answer span {
  font-size: 14px !important;
  color: #fff8a8 !important;
}
.rq-map-pin.drop-in {
  animation: rqPinTipDrop74 .36s cubic-bezier(.2, 1.35, .35, 1) both !important;
}
.rq-map-pin.locked {
  filter: saturate(.96) !important;
  opacity: .98 !important;
}
.rq-map-pin-pulse {
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(245, 158, 11, .58) !important;
  background: rgba(245, 158, 11, .10) !important;
  transform: translate(-50%, 50%) !important;
  z-index: 1 !important;
  animation: rqPinTipPulse74 1.45s ease-out infinite !important;
}
@keyframes rqPinTipDrop74 {
  0% { opacity: 0; transform: translate(-50%, -18px) scale(.72); }
  70% { opacity: 1; transform: translate(-50%, 3px) scale(1.06); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes rqPinTipPulse74 {
  0% { opacity: .72; transform: translate(-50%, 50%) scale(.72); }
  100% { opacity: 0; transform: translate(-50%, 50%) scale(1.45); }
}
.leaflet-tooltip.rq-map-pin-tooltip {
  transform: translateY(-2px) !important;
  padding: 5px 9px 6px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}
.result-travel-line {
  stroke-width: 2.15 !important;
  stroke-dasharray: 7 11 !important;
  opacity: .68 !important;
}
.result-modal.result-solo-reveal {
  left: 22px !important;
  top: 82px !important;
  width: min(610px, calc(100vw - 44px)) !important;
  aspect-ratio: 2048 / 1242 !important;
  max-height: calc(100vh - 104px) !important;
}
.result-modal.result-solo-reveal .round-reveal-shell {
  min-height: auto !important;
  padding: 82px 116px 116px 138px !important;
}
.result-modal.result-solo-reveal .round-reveal-content {
  width: 100% !important;
  max-width: 365px !important;
  min-height: 214px !important;
  display: grid !important;
  gap: 8px !important;
  padding: 12px 14px 10px !important;
  border-radius: 22px !important;
  background: rgba(255, 246, 217, .62) !important;
  box-shadow: inset 0 0 0 1px rgba(138, 90, 19, .08) !important;
}
.result-modal.result-solo-reveal .round-reveal-topline {
  font-size: .64rem !important;
  letter-spacing: .14em !important;
  color: #7d4f12 !important;
  font-weight: 1000 !important;
  text-transform: uppercase !important;
}
.result-modal.result-solo-reveal .round-reveal-head {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: stretch !important;
  gap: 10px !important;
  margin: 0 !important;
}
.result-modal.result-solo-reveal .round-reveal-title {
  min-width: 0 !important;
  display: grid !important;
  align-content: center !important;
  padding: 10px 12px !important;
  border-radius: 17px !important;
  background: rgba(255, 249, 233, .70) !important;
  border: 1px solid rgba(138, 90, 19, .10) !important;
}
.result-modal.result-solo-reveal .round-reveal-title span,
.result-modal.result-solo-reveal .round-points span,
.result-modal.result-solo-reveal .reveal-distance span,
.result-modal.result-solo-reveal .reveal-details span {
  display: block !important;
  margin: 0 0 3px !important;
  color: #7d4f12 !important;
  font-size: .56rem !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}
.result-modal.result-solo-reveal .round-reveal-title strong {
  display: block !important;
  color: #4e3211 !important;
  font-size: 1.04rem !important;
  line-height: 1.05 !important;
  font-weight: 1000 !important;
}
.result-modal.result-solo-reveal h2 {
  display: none !important;
}
.result-modal.result-solo-reveal .round-points {
  min-width: 94px !important;
  padding: 10px 12px !important;
  border-radius: 17px !important;
  background: rgba(255, 249, 233, .86) !important;
  border: 1px solid rgba(138, 90, 19, .11) !important;
  box-shadow: none !important;
}
.result-modal.result-solo-reveal .round-points strong {
  color: #4e3211 !important;
  font-size: 1.16rem !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
}
.result-modal.result-solo-reveal .reveal-distance {
  margin: 0 !important;
  padding: 10px 12px !important;
  border-radius: 17px !important;
  background: rgba(255, 249, 233, .76) !important;
  border: 1px solid rgba(138, 90, 19, .10) !important;
}
.result-modal.result-solo-reveal .reveal-distance strong {
  color: #4e3211 !important;
  font-size: 1.18rem !important;
  line-height: 1 !important;
}
.result-modal.result-solo-reveal .reveal-details {
  display: grid !important;
  gap: 7px !important;
  margin: 0 !important;
}
.result-modal.result-solo-reveal .reveal-details > div {
  padding: 9px 12px !important;
  border-radius: 15px !important;
  background: rgba(255, 249, 233, .74) !important;
  border: 1px solid rgba(138, 90, 19, .09) !important;
}
.result-modal.result-solo-reveal .reveal-details strong {
  display: block !important;
  color: #4e3211 !important;
  font-size: .82rem !important;
  line-height: 1.14 !important;
  font-weight: 1000 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.result-modal.result-solo-reveal .auto-next-note {
  margin: 2px 0 0 !important;
  color: #8a5b17 !important;
  font-size: .68rem !important;
  font-weight: 1000 !important;
  text-align: center !important;
}
@media (max-width: 920px) {
  .result-modal.result-solo-reveal {
    left: 10px !important;
    top: 60px !important;
    width: min(500px, calc(100vw - 20px)) !important;
  }
  .result-modal.result-solo-reveal .round-reveal-shell {
    padding: 64px 88px 90px 102px !important;
  }
  .result-modal.result-solo-reveal .round-reveal-content {
    max-width: 315px !important;
    gap: 6px !important;
    padding: 8px 10px 7px !important;
  }
}
body.rq-phone-landscape .result-modal.result-solo-reveal {
  left: 8px !important;
  top: 50px !important;
  width: min(462px, calc(100vw - 16px)) !important;
}
body.rq-phone-landscape .result-modal.result-solo-reveal .round-reveal-shell {
  padding: 56px 80px 78px 94px !important;
}
body.rq-phone-landscape .result-modal.result-solo-reveal .round-reveal-content {
  max-width: 290px !important;
  min-height: 170px !important;
}
body.rq-phone-landscape .leaflet-tooltip.rq-map-pin-tooltip {
  display: none !important;
}

/* v7.0.75 marker/result hotfix: restore visible pin labels, respect Leaflet anchor margins, raise reveal content */
.custom-pin-wrap.custom-pin-wrap-guess,
.custom-pin-wrap.custom-pin-wrap-answer {
  width: 40px !important;
  height: 52px !important;
  margin-left: -20px !important;
  margin-top: -52px !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.rq-map-pin-shell {
  width: 40px !important;
  height: 52px !important;
  position: relative !important;
  overflow: visible !important;
  pointer-events: none !important;
}
.rq-map-pin-label {
  position: absolute !important;
  left: 50% !important;
  bottom: 56px !important;
  transform: translateX(-50%) !important;
  z-index: 6 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  max-width: 150px !important;
  padding: 6px 10px 7px !important;
  border-radius: 999px !important;
  background: rgba(35, 25, 11, .88) !important;
  color: #fff7db !important;
  border: 1px solid rgba(255, 236, 188, .28) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.22) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}
.rq-map-pin-label.guess { background: rgba(94, 54, 13, .92) !important; }
.rq-map-pin-label.answer { background: rgba(24, 84, 42, .92) !important; }
.leaflet-tooltip.rq-map-pin-tooltip {
  display: none !important;
}
.result-modal.result-solo-reveal .round-reveal-shell {
  padding-top: 36px !important;
  padding-left: 138px !important;
  padding-right: 116px !important;
  padding-bottom: 116px !important;
}
.result-modal.result-solo-reveal .round-reveal-content {
  max-width: 365px !important;
  min-height: 214px !important;
}
.result-modal.result-solo-reveal .round-reveal-topline {
  margin-top: 0 !important;
}
@media (max-width: 920px) {
  .custom-pin-wrap.custom-pin-wrap-guess,
  .custom-pin-wrap.custom-pin-wrap-answer {
    margin-left: -20px !important;
    margin-top: -52px !important;
  }
  .rq-map-pin-label {
    bottom: 54px !important;
    font-size: 9px !important;
    padding: 5px 8px 6px !important;
  }
  .result-modal.result-solo-reveal .round-reveal-shell {
    padding-top: 46px !important;
    padding-left: 102px !important;
    padding-right: 88px !important;
    padding-bottom: 90px !important;
  }
}
body.rq-phone-landscape .rq-map-pin-label {
  display: none !important;
}
body.rq-phone-landscape .custom-pin-wrap.custom-pin-wrap-guess,
body.rq-phone-landscape .custom-pin-wrap.custom-pin-wrap-answer {
  margin-left: -20px !important;
  margin-top: -52px !important;
}
body.rq-phone-landscape .result-modal.result-solo-reveal .round-reveal-shell {
  padding-top: 36px !important;
  padding-left: 94px !important;
  padding-right: 80px !important;
  padding-bottom: 78px !important;
}

/* v7.0.76 mobile gameplay polish: phone landscape reveal, markers and touch controls */
body.rq-phone-landscape.is-playing {
  --rq-phone-touch-bottom: max(8px, env(safe-area-inset-bottom));
}

body.rq-phone-landscape .custom-pin-wrap.custom-pin-wrap-guess,
body.rq-phone-landscape .custom-pin-wrap.custom-pin-wrap-answer {
  width: 34px !important;
  height: 44px !important;
  margin-left: -17px !important;
  margin-top: -44px !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
body.rq-phone-landscape .rq-map-pin-shell {
  width: 34px !important;
  height: 44px !important;
  overflow: visible !important;
}
body.rq-phone-landscape .rq-map-pin {
  width: 28px !important;
  height: 38px !important;
  padding-top: 7px !important;
  border-width: 2px !important;
  border-radius: 15px !important;
  box-shadow: 0 8px 14px rgba(55, 32, 8, .30), 0 0 0 3px rgba(255,255,255,.08) !important;
}
body.rq-phone-landscape .rq-map-pin span {
  font-size: 11px !important;
}
body.rq-phone-landscape .rq-map-pin.answer span {
  font-size: 12px !important;
}
body.rq-phone-landscape .rq-map-pin-pulse {
  width: 32px !important;
  height: 32px !important;
  border-width: 2px !important;
}
body.rq-phone-landscape .rq-map-pin-label {
  display: inline-flex !important;
  bottom: 46px !important;
  max-width: 112px !important;
  padding: 4px 7px 5px !important;
  border-radius: 999px !important;
  font-size: 8px !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  box-shadow: 0 6px 12px rgba(0,0,0,.22) !important;
}
body.rq-phone-landscape .leaflet-tooltip.rq-map-pin-tooltip {
  display: none !important;
}
body.rq-phone-landscape .result-travel-line {
  stroke-width: 2px !important;
  stroke-dasharray: 7 10 !important;
  opacity: .72 !important;
}

body.rq-phone-landscape.is-playing .bottom-panel {
  left: max(8px, env(safe-area-inset-left)) !important;
  right: max(8px, env(safe-area-inset-right)) !important;
  bottom: var(--rq-phone-touch-bottom) !important;
  width: auto !important;
  max-width: none !important;
  min-height: 48px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 17px !important;
  z-index: 1022 !important;
}
body.rq-phone-landscape.is-playing .bottom-panel .guess-copy span {
  font-size: .52rem !important;
  line-height: 1 !important;
}
body.rq-phone-landscape.is-playing .bottom-panel .guess-copy strong {
  font-size: .72rem !important;
  line-height: 1.08 !important;
  max-width: 48vw !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body.rq-phone-landscape.is-playing .bottom-panel .primary-btn {
  min-height: 38px !important;
  padding: 8px 13px !important;
  font-size: .72rem !important;
  border-radius: 14px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal {
  position: fixed !important;
  left: max(8px, env(safe-area-inset-left)) !important;
  right: auto !important;
  top: max(48px, calc(env(safe-area-inset-top) + 46px)) !important;
  bottom: auto !important;
  width: min(430px, calc(100dvw - 16px)) !important;
  max-width: min(430px, calc(100dvw - 16px)) !important;
  aspect-ratio: 2048 / 1242 !important;
  max-height: calc(100dvh - 60px) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  overflow: visible !important;
  z-index: 1010 !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .round-reveal-shell {
  padding-top: 30px !important;
  padding-left: 80px !important;
  padding-right: 64px !important;
  padding-bottom: 60px !important;
  min-height: auto !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .round-reveal-content {
  width: 100% !important;
  max-width: 266px !important;
  min-height: 0 !important;
  gap: 4px !important;
  padding: 6px 8px 5px !important;
  border-radius: 16px !important;
  background: rgba(255, 246, 217, .64) !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .round-reveal-topline {
  font-size: .48rem !important;
  letter-spacing: .11em !important;
  line-height: 1 !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .round-reveal-head {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 6px !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .round-reveal-title {
  padding: 6px 8px !important;
  border-radius: 12px !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .round-reveal-title span,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .round-points span,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .reveal-distance span,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .reveal-details span {
  font-size: .43rem !important;
  line-height: 1 !important;
  letter-spacing: .09em !important;
  margin-bottom: 2px !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .round-reveal-title strong {
  font-size: .78rem !important;
  line-height: 1.02 !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .round-points {
  min-width: 72px !important;
  padding: 6px 7px !important;
  border-radius: 12px !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .round-points strong {
  font-size: .9rem !important;
  line-height: 1 !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .reveal-distance {
  padding: 6px 8px !important;
  border-radius: 12px !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .reveal-distance strong {
  font-size: .9rem !important;
  line-height: 1 !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .reveal-details {
  gap: 4px !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .reveal-details > div {
  padding: 6px 8px !important;
  border-radius: 11px !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .reveal-details strong {
  font-size: .62rem !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .auto-next-note {
  margin-top: 1px !important;
  font-size: .52rem !important;
  line-height: 1 !important;
}

@media (max-width: 760px) and (orientation: landscape) {
  body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal {
    top: max(44px, calc(env(safe-area-inset-top) + 42px)) !important;
    width: min(390px, calc(100dvw - 14px)) !important;
  }
  body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .round-reveal-shell {
    padding-top: 26px !important;
    padding-left: 72px !important;
    padding-right: 58px !important;
    padding-bottom: 54px !important;
  }
  body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .round-reveal-content {
    max-width: 238px !important;
    gap: 3px !important;
    padding: 5px 7px !important;
  }
  body.rq-phone-landscape.is-playing .bottom-panel {
    min-height: 44px !important;
    padding: 7px 9px !important;
  }
  body.rq-phone-landscape.is-playing .bottom-panel .primary-btn {
    min-height: 34px !important;
    font-size: .68rem !important;
  }
}

/* v7.0.77 mobile layout fix: compact right-side guess panel + small right reveal card */
body.rq-phone-landscape.is-playing .bottom-panel {
  left: auto !important;
  right: max(10px, env(safe-area-inset-right)) !important;
  bottom: max(8px, env(safe-area-inset-bottom)) !important;
  width: min(560px, 54vw) !important;
  max-width: min(560px, 54vw) !important;
  min-width: 360px !important;
  min-height: 44px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  padding: 7px 9px !important;
  border-radius: 16px !important;
  z-index: 1022 !important;
}
body.rq-phone-landscape.is-playing .bottom-panel .guess-copy {
  min-width: 0 !important;
}
body.rq-phone-landscape.is-playing .bottom-panel .guess-copy span {
  font-size: .48rem !important;
  line-height: 1 !important;
  letter-spacing: .15em !important;
}
body.rq-phone-landscape.is-playing .bottom-panel .guess-copy strong {
  font-size: .68rem !important;
  line-height: 1.08 !important;
  max-width: 30vw !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body.rq-phone-landscape.is-playing .bottom-panel .primary-btn {
  min-height: 34px !important;
  min-width: 104px !important;
  padding: 7px 12px !important;
  font-size: .66rem !important;
  border-radius: 14px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal {
  left: auto !important;
  right: max(10px, env(safe-area-inset-right)) !important;
  top: max(54px, calc(env(safe-area-inset-top) + 50px)) !important;
  bottom: auto !important;
  width: min(318px, 38vw) !important;
  max-width: min(318px, 38vw) !important;
  min-width: 250px !important;
  aspect-ratio: 2048 / 1242 !important;
  max-height: calc(100dvh - 72px) !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  transform: none !important;
  overflow: visible !important;
  z-index: 1010 !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal::before {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .round-reveal-shell {
  padding-top: 22px !important;
  padding-left: 58px !important;
  padding-right: 42px !important;
  padding-bottom: 38px !important;
  min-height: auto !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .round-reveal-content {
  width: 100% !important;
  max-width: 196px !important;
  min-height: 0 !important;
  gap: 2px !important;
  padding: 4px 6px 4px !important;
  border-radius: 10px !important;
  background: rgba(255, 246, 217, .48) !important;
  box-shadow: none !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .round-reveal-topline {
  font-size: .38rem !important;
  letter-spacing: .09em !important;
  line-height: 1 !important;
  margin-bottom: 2px !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .round-reveal-head {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 4px !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .round-reveal-title {
  padding: 4px 5px !important;
  border-radius: 8px !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .round-reveal-title span,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .round-points span,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .reveal-distance span,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .reveal-details span {
  font-size: .34rem !important;
  line-height: 1 !important;
  letter-spacing: .075em !important;
  margin-bottom: 1px !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .round-reveal-title strong {
  font-size: .62rem !important;
  line-height: 1.02 !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .round-points {
  min-width: 54px !important;
  padding: 4px 5px !important;
  border-radius: 8px !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .round-points strong {
  font-size: .68rem !important;
  line-height: 1 !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .reveal-distance {
  padding: 4px 6px !important;
  border-radius: 8px !important;
  margin-top: 2px !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .reveal-distance strong {
  font-size: .72rem !important;
  line-height: 1 !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .reveal-details {
  gap: 2px !important;
  margin-top: 2px !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .reveal-details > div {
  padding: 4px 6px !important;
  border-radius: 8px !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .reveal-details strong {
  font-size: .5rem !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .auto-next-note {
  margin-top: 1px !important;
  font-size: .42rem !important;
  line-height: 1 !important;
}

@media (max-width: 760px) and (orientation: landscape) {
  body.rq-phone-landscape.is-playing .bottom-panel {
    width: min(470px, 54vw) !important;
    max-width: min(470px, 54vw) !important;
    min-width: 310px !important;
    min-height: 40px !important;
    padding: 6px 8px !important;
  }
  body.rq-phone-landscape.is-playing .bottom-panel .guess-copy strong {
    max-width: 27vw !important;
    font-size: .62rem !important;
  }
  body.rq-phone-landscape.is-playing .bottom-panel .primary-btn {
    min-height: 31px !important;
    min-width: 92px !important;
    font-size: .62rem !important;
  }
  body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal {
    top: max(48px, calc(env(safe-area-inset-top) + 44px)) !important;
    width: min(286px, 40vw) !important;
    max-width: min(286px, 40vw) !important;
    min-width: 228px !important;
  }
  body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .round-reveal-shell {
    padding-top: 20px !important;
    padding-left: 52px !important;
    padding-right: 38px !important;
    padding-bottom: 34px !important;
  }
  body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .round-reveal-content {
    max-width: 176px !important;
    gap: 1px !important;
    padding: 3px 5px !important;
  }
}


/* v7.0.78 mobile fullscreen gate fix: keep phone menu portrait, show fullscreen gate above gameplay loading */
body.rq-touch-device:not(.is-playing) .fullscreen-btn,
body.rq-phone-portrait:not(.is-playing) .fullscreen-btn,
body.rq-phone-menu-landscape:not(.is-playing) .fullscreen-btn {
  display: none !important;
}
body.rq-phone-needs-fullscreen .mobile-landscape-gate {
  display: grid !important;
  z-index: 2147483640 !important;
  background:
    linear-gradient(180deg, rgba(4, 10, 22, .72), rgba(4, 10, 22, .9)),
    var(--rq-menu-bg),
    #07111f !important;
}
body.rq-phone-needs-fullscreen .mobile-landscape-card h2::before {
  content: 'Enter fullscreen';
}
body.rq-phone-needs-fullscreen .mobile-landscape-card h2 {
  font-size: 0 !important;
}
body.rq-phone-needs-fullscreen .mobile-landscape-card h2::before {
  font-size: clamp(1.75rem, 7vw, 2.55rem) !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
}
body.rq-phone-needs-fullscreen .mobile-landscape-card p:not(.mobile-landscape-kicker)::before {
  content: 'Tap fullscreen to start the round cleanly. The radio quest will continue behind this setup screen.';
  font-size: .95rem;
  line-height: 1.45;
}
body.rq-phone-needs-fullscreen .mobile-landscape-card p:not(.mobile-landscape-kicker) {
  font-size: 0 !important;
}
body.rq-phone-needs-fullscreen .rq-tuning-overlay {
  display: none !important;
}


/* v7.0.80 map hotfix: stable single adventure map render + safe game tint */
.map-style-btn,
body.is-playing .map-style-btn,
body.rq-phone-landscape .map-style-btn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.game-screen .map {
  background: #b9d8cd !important;
}
.game-screen .map::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 410;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 237, 181, .08), rgba(255, 237, 181, 0) 42%),
    linear-gradient(180deg, rgba(255, 236, 188, .07), rgba(69, 43, 16, .035));
  mix-blend-mode: soft-light;
}
.game-screen .map::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 411;
  pointer-events: none;
  box-shadow: inset 0 0 140px rgba(39, 25, 10, .10);
}
.game-screen .leaflet-tile-pane {
  filter: saturate(1.08) contrast(.99) sepia(.035);
}
.game-screen .leaflet-control-zoom {
  border: 0 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.22) !important;
}
.game-screen .leaflet-control-zoom a {
  width: 34px !important;
  height: 34px !important;
  line-height: 32px !important;
  border: 0 !important;
  background: rgba(21, 31, 42, .88) !important;
  color: #fff7db !important;
  font-weight: 1000 !important;
}
.game-screen .leaflet-control-zoom a:first-child { border-radius: 14px 14px 0 0 !important; }
.game-screen .leaflet-control-zoom a:last-child { border-radius: 0 0 14px 14px !important; }
body.rq-phone-landscape .game-screen .leaflet-control-zoom {
  display: none !important;
}
body.rq-phone-landscape .game-screen .map::after {
  box-shadow: inset 0 0 70px rgba(39, 25, 10, .08);
}

/* v7.0.81 better single map style: NatGeo-style adventure map primary + safe fallback */
body.single-adventure-map .map-style-btn,
.map-style-btn[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.single-adventure-map .game-screen .map,
body.single-adventure-map .game-screen .leaflet-container {
  background: #b9d8cd !important;
}
body.single-adventure-map-primary .game-screen .leaflet-tile-pane {
  filter: saturate(1.18) contrast(1.03) sepia(.05) brightness(1.02) !important;
}
body.single-adventure-map-fallback .game-screen .leaflet-tile-pane {
  filter: saturate(1.08) contrast(.99) sepia(.035) !important;
}
body.single-adventure-map .game-screen .map::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 410;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 226, 151, .12), transparent 33%),
    radial-gradient(circle at 78% 70%, rgba(84, 150, 88, .08), transparent 38%),
    linear-gradient(180deg, rgba(255, 243, 207, .045), rgba(72, 45, 15, .035));
  mix-blend-mode: soft-light;
}
body.single-adventure-map .game-screen .map::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 411;
  pointer-events: none;
  box-shadow: inset 0 0 120px rgba(39, 25, 10, .09);
}
body.single-adventure-map .leaflet-tile {
  image-rendering: auto !important;
  backface-visibility: hidden !important;
}
body.single-adventure-map .leaflet-tile-pane {
  will-change: transform !important;
}
body.single-adventure-map .leaflet-container {
  cursor: grab;
  touch-action: pan-x pan-y pinch-zoom;
}
body.single-adventure-map .leaflet-container:active {
  cursor: grabbing;
}
body.single-adventure-map .leaflet-control-zoom {
  border: 0 !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(52, 32, 12, .24) !important;
}
body.single-adventure-map .leaflet-control-zoom a {
  width: 34px !important;
  height: 34px !important;
  line-height: 32px !important;
  border: 0 !important;
  background: rgba(44, 35, 24, .82) !important;
  color: #fff2cf !important;
  font-weight: 1000 !important;
  text-shadow: none !important;
}
body.single-adventure-map .leaflet-control-zoom a:hover {
  background: rgba(82, 55, 23, .92) !important;
}
body.single-adventure-map .leaflet-control-attribution {
  opacity: .58;
  transform: scale(.9);
  transform-origin: bottom right;
}
@media (max-width: 920px) and (orientation: landscape) {
  body.single-adventure-map .game-screen .map::before {
    background:
      radial-gradient(circle at 18% 18%, rgba(255, 226, 151, .08), transparent 33%),
      linear-gradient(180deg, rgba(255, 243, 207, .035), rgba(72, 45, 15, .025));
  }
  body.single-adventure-map .game-screen .map::after {
    box-shadow: inset 0 0 64px rgba(39, 25, 10, .075);
  }
  body.single-adventure-map .leaflet-control-zoom {
    display: none !important;
  }
  body.single-adventure-map-primary .game-screen .leaflet-tile-pane {
    filter: saturate(1.12) contrast(1.01) sepia(.035) brightness(1.01) !important;
  }
}


/* v7.0.82 clean adventure map attempt: replace atlas feel with softer CARTO Voyager game map */
body.single-adventure-map-primary .map::before {
  background:
    radial-gradient(circle at 22% 20%, rgba(255, 238, 190, .10), transparent 28%),
    linear-gradient(180deg, rgba(255, 244, 216, .08), rgba(134, 195, 178, .06));
  mix-blend-mode: soft-light;
  opacity: .42;
}
body.single-adventure-map-primary .map::after {
  background:
    radial-gradient(circle at 50% 45%, transparent 42%, rgba(19, 48, 53, .10) 100%),
    linear-gradient(90deg, rgba(255, 222, 151, .035), rgba(89, 166, 168, .035));
  pointer-events: none;
}
body.single-adventure-map-primary .leaflet-tile-pane {
  filter: saturate(.96) contrast(.98) brightness(1.03) sepia(.04);
}
body.single-adventure-map-fallback .leaflet-tile-pane {
  filter: saturate(.88) contrast(.96) brightness(1.04) sepia(.05);
}

/* v7.0.83 map color polish: warmer land, softer blue water and less sterile CARTO Voyager look */
body.single-adventure-map-primary .game-screen .map,
body.single-adventure-map-primary .game-screen .leaflet-container {
  background: #b9dfdf !important;
}
body.single-adventure-map-primary .game-screen .leaflet-tile-pane {
  filter: saturate(1.16) contrast(1.035) brightness(.995) sepia(.055) hue-rotate(-4deg) !important;
}
body.single-adventure-map-primary .game-screen .map::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 410;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 16%, rgba(255, 231, 170, .20), transparent 30%),
    radial-gradient(circle at 78% 72%, rgba(96, 175, 138, .10), transparent 38%),
    linear-gradient(180deg, rgba(255, 240, 203, .16), rgba(117, 199, 201, .10));
  mix-blend-mode: multiply;
  opacity: .34;
}
body.single-adventure-map-primary .game-screen .map::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 411;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 248, 223, .07), rgba(255, 248, 223, 0) 38%),
    linear-gradient(90deg, rgba(255, 198, 112, .045), rgba(59, 159, 181, .06));
  box-shadow: inset 0 0 110px rgba(42, 28, 13, .085);
  mix-blend-mode: soft-light;
  opacity: .82;
}
body.single-adventure-map-primary .leaflet-tile {
  image-rendering: auto !important;
}
@media (max-width: 920px) and (orientation: landscape) {
  body.single-adventure-map-primary .game-screen .leaflet-tile-pane {
    filter: saturate(1.10) contrast(1.02) brightness(1.0) sepia(.04) hue-rotate(-3deg) !important;
  }
  body.single-adventure-map-primary .game-screen .map::before {
    opacity: .24;
    background:
      linear-gradient(180deg, rgba(255, 240, 203, .11), rgba(117, 199, 201, .07));
  }
  body.single-adventure-map-primary .game-screen .map::after {
    box-shadow: inset 0 0 62px rgba(42, 28, 13, .07);
    opacity: .64;
  }
}

/* v7.0.84 map readability polish: stronger clean-adventure contrast, richer water and clearer marker labels */
body.single-adventure-map-primary .game-screen .map,
body.single-adventure-map-primary .game-screen .leaflet-container {
  background: #aedbdd !important;
}
body.single-adventure-map-primary .game-screen .leaflet-tile-pane {
  filter: saturate(1.24) contrast(1.075) brightness(.985) sepia(.04) hue-rotate(-6deg) !important;
}
body.single-adventure-map-primary .game-screen .map::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 410;
  pointer-events: none;
  background:
    radial-gradient(circle at 19% 15%, rgba(255, 220, 150, .16), transparent 31%),
    radial-gradient(circle at 74% 76%, rgba(76, 171, 151, .11), transparent 40%),
    linear-gradient(180deg, rgba(255, 234, 194, .10), rgba(67, 174, 190, .12));
  mix-blend-mode: multiply;
  opacity: .25;
}
body.single-adventure-map-primary .game-screen .map::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 411;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 43%, rgba(255, 250, 227, .04), rgba(255, 250, 227, 0) 40%),
    linear-gradient(90deg, rgba(245, 171, 82, .035), rgba(47, 149, 172, .055));
  box-shadow: inset 0 0 92px rgba(31, 24, 15, .105);
  mix-blend-mode: soft-light;
  opacity: .72;
}
body.single-adventure-map-primary .leaflet-tile {
  image-rendering: auto !important;
}
body.single-adventure-map .rq-map-pin-label,
body.single-adventure-map .leaflet-tooltip.rq-map-pin-tooltip {
  background: rgba(35, 25, 11, .94) !important;
  color: #fff7db !important;
  border-color: rgba(255, 236, 188, .34) !important;
  box-shadow: 0 9px 20px rgba(0,0,0,.26) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.25) !important;
}
body.single-adventure-map .rq-map-pin-label.guess,
body.single-adventure-map .leaflet-tooltip.rq-map-pin-tooltip.guess {
  background: rgba(91, 50, 9, .96) !important;
}
body.single-adventure-map .rq-map-pin-label.answer,
body.single-adventure-map .leaflet-tooltip.rq-map-pin-tooltip.answer {
  background: rgba(20, 82, 40, .96) !important;
}
body.single-adventure-map .result-travel-line {
  stroke: #d98212 !important;
  stroke-width: 4.2 !important;
  filter: drop-shadow(0 1px 2px rgba(72, 43, 10, .18)) drop-shadow(0 0 5px rgba(245, 158, 11, .22)) !important;
}
@media (max-width: 920px) and (orientation: landscape) {
  body.single-adventure-map-primary .game-screen .leaflet-tile-pane {
    filter: saturate(1.18) contrast(1.055) brightness(.99) sepia(.035) hue-rotate(-5deg) !important;
  }
  body.single-adventure-map-primary .game-screen .map::before {
    opacity: .18;
    background:
      radial-gradient(circle at 22% 16%, rgba(255, 220, 150, .10), transparent 32%),
      linear-gradient(180deg, rgba(255, 234, 194, .075), rgba(67, 174, 190, .08));
  }
  body.single-adventure-map-primary .game-screen .map::after {
    box-shadow: inset 0 0 52px rgba(31, 24, 15, .08);
    opacity: .58;
  }
  body.single-adventure-map .rq-map-pin-label,
  body.single-adventure-map .leaflet-tooltip.rq-map-pin-tooltip {
    box-shadow: 0 7px 15px rgba(0,0,0,.22) !important;
  }
}

/* v7.0.86 map attribution cleanup + phone world zoom fix */
.game-screen .leaflet-control-attribution,
body.single-adventure-map .leaflet-control-attribution {
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  right: max(10px, env(safe-area-inset-right)) !important;
  bottom: max(54px, calc(env(safe-area-inset-bottom) + 54px)) !important;
  z-index: 520 !important;
  max-width: min(330px, 38vw) !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: rgba(18, 25, 28, .34) !important;
  color: rgba(255, 250, 236, .66) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: none !important;
  font-size: 8.5px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  opacity: .42 !important;
  transform: none !important;
  transform-origin: bottom right !important;
  transition: opacity .18s ease, background .18s ease !important;
}
.game-screen .leaflet-control-attribution:hover,
body.single-adventure-map .leaflet-control-attribution:hover {
  opacity: .82 !important;
  background: rgba(18, 25, 28, .62) !important;
}
.game-screen .leaflet-control-attribution a,
body.single-adventure-map .leaflet-control-attribution a {
  color: rgba(255, 250, 236, .72) !important;
  text-decoration: none !important;
}
body.rq-phone-landscape .game-screen .leaflet-control-attribution,
body.rq-phone-landscape.single-adventure-map .leaflet-control-attribution {
  right: max(6px, env(safe-area-inset-right)) !important;
  bottom: max(40px, calc(env(safe-area-inset-bottom) + 40px)) !important;
  max-width: 138px !important;
  padding: 2px 6px !important;
  font-size: 7px !important;
  opacity: .28 !important;
}
body.rq-phone-landscape .game-screen .leaflet-control-attribution:hover,
body.rq-phone-landscape.single-adventure-map .leaflet-control-attribution:hover {
  opacity: .65 !important;
}

/* v7.0.87 reveal flow polish: lock suspense + route distance label */
body.rq-locking-guess .custom-pin-wrap-guess .rq-map-pin {
  animation: rqLockingGuessPulse .62s ease-in-out infinite !important;
}
body.rq-locking-guess .custom-pin-wrap-guess .rq-map-pin-pulse {
  animation-duration: .9s !important;
  opacity: .88 !important;
}
body.rq-locking-guess .bottom-panel {
  border-color: rgba(245, 158, 11, .56) !important;
  box-shadow: 0 0 0 5px rgba(245, 158, 11, .1), 0 18px 44px rgba(0,0,0,.28) !important;
}
body.rq-locking-guess #guessBtn {
  background: linear-gradient(135deg, #fbbf24, #f97316) !important;
  color: #241204 !important;
  opacity: 1 !important;
}
@keyframes rqLockingGuessPulse {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 10px 16px rgba(0,0,0,.26)); }
  50% { transform: translateY(-2px) scale(1.08); filter: drop-shadow(0 0 12px rgba(245,158,11,.48)) drop-shadow(0 10px 16px rgba(0,0,0,.24)); }
}
.result-travel-line-reveal {
  stroke-dasharray: 10 10 !important;
  animation: rqRouteRevealIn .34s ease-out both !important;
}
@keyframes rqRouteRevealIn {
  from { stroke-opacity: 0; stroke-width: 1; }
  to { stroke-opacity: .86; stroke-width: 3; }
}
@keyframes rqRouteRevealDash {
  to { stroke-dashoffset: -40; }
}
.rq-route-distance-wrap {
  background: transparent !important;
  border: 0 !important;
  pointer-events: none !important;
}
.rq-route-distance-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  max-width: 124px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(45, 31, 12, .9);
  color: #fff3cf;
  border: 1px solid rgba(255, 228, 154, .5);
  box-shadow: 0 8px 18px rgba(0,0,0,.24), 0 0 0 4px rgba(245, 158, 11, .09);
  font-size: 11px;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: .01em;
  white-space: nowrap;
  transform: translateY(-4px) scale(.96);
  opacity: 0;
  animation: rqRouteLabelIn .34s ease-out .04s forwards;
}
@keyframes rqRouteLabelIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
body.rq-phone-landscape .rq-route-distance-label {
  min-width: 68px;
  max-width: 96px;
  height: 24px;
  padding: 0 9px;
  font-size: 9px;
  box-shadow: 0 6px 14px rgba(0,0,0,.22), 0 0 0 3px rgba(245, 158, 11, .08);
}
body.rq-phone-landscape .result-travel-line-reveal {
  stroke-width: 2.5 !important;
}


/* v7.0.88 route line stability hotfix: draw route after camera settles + hide route during manual zoom/move */
.result-travel-line-stable {
  animation: rqRouteRevealIn .34s ease-out both !important;
}
body.rq-route-camera-moving .result-travel-line,
body.rq-route-camera-moving .rq-route-distance-wrap {
  opacity: 0 !important;
  transition: opacity .12s ease !important;
}
body:not(.rq-route-camera-moving) .result-travel-line,
body:not(.rq-route-camera-moving) .rq-route-distance-wrap {
  transition: opacity .18s ease !important;
}
body.rq-phone-landscape .result-travel-line-stable {
  animation: rqRouteRevealIn .28s ease-out both !important;
}

/* v7.0.89 route line after camera settle: JS waits for fly/zoom motion before drawing line + distance label. */


/* v7.0.90 Event shop tier: Event uses Impossible visuals until custom assets exist */
.rarity-event,
.shop-item.rarity-event,
.shop-detail-hero.rarity-event,
.shop-detail-meta.rarity-event,
.inventory-item-card.rarity-event {
  --shop-tier-bg: url('/assets/ui/shop/rarity-impossible-bg.png');
}
.shop-tier-strip .rarity-event,
.shop-item.rarity-event,
.shop-detail-hero.rarity-event,
.inventory-item-card.rarity-event {
  border-color: rgba(255, 255, 255, .24) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 48px rgba(139, 92, 246, .2);
}
.shop-tier-strip .rarity-event strong,
.shop-item.rarity-event .shop-rarity,
.shop-detail-hero.rarity-event strong {
  color: #fff7db;
}
.event-shop-card {
  border-color: rgba(245, 158, 11, .24) !important;
}
.admin-event-shop-list {
  display: grid;
  gap: 12px;
}
.event-shop-sync-note {
  margin: 0 0 4px !important;
  color: var(--muted, #a8b3c7) !important;
  line-height: 1.45;
}
.admin-event-item {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(145deg, rgba(15, 23, 42, .72), rgba(30, 24, 44, .62));
  display: grid;
  gap: 12px;
}
.admin-event-item.is-active {
  border-color: rgba(52, 211, 153, .42);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .08);
}
.event-item-main,
.event-item-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.event-item-main h3 {
  margin: 0 0 4px;
  font-size: 1rem;
}
.event-item-main p,
.event-item-main small {
  display: block;
  margin: 0;
  color: var(--muted, #a8b3c7);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.event-status-pill {
  border-radius: 999px;
  padding: 7px 10px;
  font-weight: 1000;
  font-size: .72rem;
  letter-spacing: .08em;
}
.event-status-pill.on {
  background: rgba(52, 211, 153, .16);
  color: #bbf7d0;
  border: 1px solid rgba(52, 211, 153, .36);
}
.event-status-pill.off {
  background: rgba(148, 163, 184, .12);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, .24);
}
.event-item-controls {
  align-items: end;
  flex-wrap: wrap;
}
.event-item-controls label:not(.admin-checkbox-label) {
  flex: 1 1 180px;
  display: grid;
  gap: 6px;
  color: var(--muted, #a8b3c7);
  font-weight: 800;
  font-size: .8rem;
}
.event-item-controls input {
  width: 100%;
}
@media (max-width: 760px) {
  .event-item-main,
  .event-item-controls {
    align-items: stretch;
    flex-direction: column;
  }
  .event-status-pill { width: max-content; }
}

/* v7.0.91 Event shop admin save fix: admin Save buttons are wired in admin.js. */


/* v7.0.93 event avatar animations: Banana Cat + Green Wizard persona lines use existing avatar bubble styling */


/* v7.0.94 event sale toggle + avatar visibility polish */
.shop-item.is-sale-hidden {
  opacity: 1 !important;
}
.shop-item.is-sale-hidden .shop-card-price strong,
.shop-detail-meta strong {
  overflow-wrap: anywhere;
}
body.showing-round-result .game-avatar-shell,
body.showing-round-result .game-avatar3d,
body.showing-round-result .game-avatar-bubble,
body.rq-phone-landscape.showing-round-result.is-playing .game-avatar-shell,
body.rq-phone-landscape.showing-round-result.is-playing .game-avatar3d,
body.rq-phone-landscape.showing-round-result.is-playing .game-avatar-bubble {
  opacity: 1 !important;
  filter: none !important;
  visibility: visible !important;
}
body.showing-round-result .game-avatar-shell {
  pointer-events: none !important;
}

/* v7.0.95 Admin Control Center: full shop manager, player inventory and economy tools */
.admin-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.admin-shop-control-card {
  border-color: rgba(34, 197, 94, .2) !important;
}
.admin-shop-filter-row {
  margin: 10px 0 12px;
}
.admin-shop-items-list,
.admin-inventory-list {
  display: grid;
  gap: 10px;
  max-height: 70vh;
  overflow: auto;
  padding-right: 4px;
}
.admin-shop-item,
.admin-inventory-item {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  padding: 13px;
  background: linear-gradient(145deg, rgba(15, 23, 42, .72), rgba(15, 23, 42, .54));
  display: grid;
  gap: 12px;
}
.admin-shop-item.is-active,
.admin-inventory-item.is-equipped {
  border-color: rgba(52, 211, 153, .36);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .08);
}
.admin-shop-item.is-hidden {
  opacity: .86;
}
.admin-shop-item-head,
.admin-inventory-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.admin-shop-item h3,
.admin-inventory-item h3 {
  margin: 0 0 4px;
  font-size: 1rem;
}
.admin-shop-item p,
.admin-shop-item small,
.admin-inventory-item p,
.admin-inventory-item small {
  display: block;
  margin: 0;
  color: var(--muted, #a8b3c7);
  overflow-wrap: anywhere;
  line-height: 1.42;
}
.admin-shop-item-controls {
  display: grid;
  grid-template-columns: minmax(160px, 1.6fr) minmax(110px, .85fr) minmax(95px, .7fr) minmax(75px, .55fr) minmax(60px, .45fr) auto auto;
  gap: 9px;
  align-items: end;
}
.admin-shop-item-controls label:not(.admin-checkbox-label) {
  display: grid;
  gap: 5px;
  color: var(--muted, #a8b3c7);
  font-size: .76rem;
  font-weight: 850;
}
.admin-shop-item-controls input,
.admin-shop-item-controls select,
.inventory-grant-row input,
.inventory-grant-row select {
  width: 100%;
}
.admin-player-actions,
.admin-inventory-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.admin-wide-dialog {
  width: min(920px, calc(100vw - 24px));
}
.inventory-grant-row {
  margin: 12px 0;
}
.admin-inventory-item {
  grid-template-columns: 1fr auto;
}
.admin-inventory-actions button {
  white-space: nowrap;
}
.rarity-event.admin-shop-item,
.rarity-event.admin-inventory-item {
  border-color: rgba(245, 158, 11, .32);
  background: linear-gradient(145deg, rgba(63, 38, 11, .44), rgba(30, 24, 44, .56));
}
@media (max-width: 1100px) {
  .admin-shop-item-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .admin-section-title,
  .admin-shop-item-head,
  .admin-inventory-item {
    align-items: stretch;
    flex-direction: column;
  }
  .admin-section-actions,
  .admin-player-actions,
  .admin-inventory-actions {
    justify-content: flex-start;
  }
  .admin-shop-item-controls {
    grid-template-columns: 1fr;
  }
}


/* v7.0.96 Admin inventory schema compatibility: player_inventory.created_at optional */


/* v7.0.97 event avatar main-menu animation picker */
.home-avatar3d {
  position: relative;
}
.home-avatar-click-target.has-home-animation-menu {
  cursor: pointer;
  outline: 0;
}
.home-avatar-click-target.has-home-animation-menu::before {
  content: 'Click for animations';
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 3;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(18, 13, 7, .72);
  border: 1px solid rgba(255, 233, 177, .26);
  color: #fff2cf;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: .86;
  transition: opacity .16s ease, transform .16s ease;
}
.home-avatar-click-target.has-home-animation-menu:hover::before,
.home-avatar-click-target.home-animation-playing::before {
  opacity: 0;
  transform: translateX(-50%) translateY(5px);
}
.home-animation-menu {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 12px;
  z-index: 25;
  padding: 12px;
  border-radius: 20px;
  background: rgba(22, 14, 6, .9);
  border: 1px solid rgba(255, 226, 158, .3);
  box-shadow: 0 18px 36px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
}
.home-animation-menu-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 9px;
}
.home-animation-menu-head strong {
  color: #fff3d0;
  font-size: .82rem;
  font-weight: 1000;
}
.home-animation-menu-head span {
  color: rgba(255, 239, 205, .7);
  font-size: .7rem;
  font-weight: 800;
}
.home-animation-menu-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.home-animation-menu-grid button {
  border: 1px solid rgba(255, 232, 170, .24);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #fff5d8;
  padding: 7px 10px;
  font-size: .72rem;
  font-weight: 950;
  cursor: pointer;
}
.home-animation-menu-grid button:hover {
  background: rgba(245, 158, 11, .22);
  transform: translateY(-1px);
}
.home-animation-playing canvas {
  filter: drop-shadow(0 0 14px rgba(245, 158, 11, .22));
}
@media (max-width: 680px) {
  .home-animation-menu {
    left: 6px;
    right: 6px;
    bottom: 8px;
    padding: 10px;
    border-radius: 16px;
  }
  .home-animation-menu-grid button {
    padding: 6px 8px;
    font-size: .66rem;
  }
  .home-animation-menu-head {
    flex-direction: column;
    gap: 2px;
  }
}

/* v7.0.98 event avatar menu click target hotfix: bind menu to full home avatar card */
.home-profile-card-3d.has-home-animation-menu,
.home-avatar3d.has-home-animation-menu,
.home-avatar-click-target.has-home-animation-menu {
  cursor: pointer !important;
}
.home-profile-card-3d.has-home-animation-menu .home-avatar3d,
.home-profile-card-3d.has-home-animation-menu .avatar3d-view,
.home-profile-card-3d.has-home-animation-menu canvas {
  pointer-events: auto !important;
}
.home-profile-card-3d.has-home-animation-menu .home-avatar3d {
  overflow: visible !important;
  z-index: 5;
}
.home-profile-card-3d.has-home-animation-menu::after {
  content: 'Click avatar for animations';
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 4;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(18, 13, 7, .74);
  border: 1px solid rgba(255, 233, 177, .28);
  color: #fff2cf;
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: .9;
}
.home-profile-card-3d.has-home-animation-menu:has(.home-animation-menu:not(.hidden))::after,
.home-profile-card-3d.has-home-animation-menu.home-animation-playing::after {
  opacity: 0;
}
.home-profile-card-3d .home-animation-menu {
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  top: 14px !important;
  bottom: auto !important;
  z-index: 80 !important;
  transform: none !important;
  pointer-events: auto !important;
}
@media (max-width: 720px) {
  .home-profile-card-3d .home-animation-menu {
    left: 10px !important;
    right: 10px !important;
    top: 10px !important;
  }
  .home-profile-card-3d.has-home-animation-menu::after {
    left: 12px;
    bottom: 12px;
    font-size: .58rem;
  }
}


/* v7.0.99 secret event avatar animation tap: hidden hint + mobile touch selection fix */
.home-profile-card-3d.has-home-animation-menu::after {
  content: none !important;
  display: none !important;
}
.home-profile-card-3d.has-home-animation-menu,
.home-profile-card-3d.has-home-animation-menu *,
.home-avatar3d.has-home-animation-menu,
.home-avatar3d.has-home-animation-menu *,
#homeAvatar3d.has-home-animation-menu,
#homeAvatar3d.has-home-animation-menu * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}
.home-profile-card-3d.has-home-animation-menu,
.home-avatar3d.has-home-animation-menu,
#homeAvatar3d.has-home-animation-menu {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}
.home-profile-card-3d.has-home-animation-menu canvas,
#homeAvatar3d.has-home-animation-menu canvas {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}
@media (max-width: 720px) {
  .home-profile-card-3d.has-home-animation-menu,
  .home-profile-card-3d.has-home-animation-menu .home-avatar3d,
  .home-profile-card-3d.has-home-animation-menu .avatar3d-view,
  .home-profile-card-3d.has-home-animation-menu canvas {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
    touch-action: manipulation !important;
  }
  .home-profile-card-3d .home-animation-menu {
    z-index: 140 !important;
  }
}


/* v7.0.100 remove visible event avatar animation hint: secret click stays enabled */
.home-avatar-click-target.has-home-animation-menu::before,
.home-avatar-click-target.has-home-animation-menu:hover::before,
.home-avatar-click-target.home-animation-playing::before,
.home-profile-card-3d.has-home-animation-menu::after,
.home-profile-card-3d.has-home-animation-menu:has(.home-animation-menu:not(.hidden))::after,
.home-profile-card-3d.has-home-animation-menu.home-animation-playing::after,
.home-avatar3d.has-home-animation-menu::before,
.home-avatar3d.has-home-animation-menu::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
.home-profile-card-3d.has-home-animation-menu,
.home-avatar3d.has-home-animation-menu,
.home-avatar-click-target.has-home-animation-menu {
  cursor: pointer !important;
}


/* v7.0.101 mobile event animation menu tap fix: menu buttons keep pointer/touch events */
.home-profile-card-3d .home-animation-menu,
.home-profile-card-3d .home-animation-menu *,
.home-animation-menu,
.home-animation-menu * {
  pointer-events: auto !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}
.home-animation-menu {
  z-index: 220 !important;
  touch-action: manipulation !important;
}
.home-animation-menu-grid button {
  position: relative !important;
  z-index: 221 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(245, 158, 11, .2) !important;
}
.home-animation-menu-grid button:active {
  transform: translateY(1px) scale(.98) !important;
  background: rgba(245, 158, 11, .3) !important;
}


/* v7.0.102 mobile event animation menu close fix: tap closes menu before playing animation */
.home-animation-menu.is-closing,
.home-animation-menu.hidden {
  pointer-events: none !important;
}
.home-animation-menu-grid button {
  cursor: pointer !important;
}
@media (hover: none) and (pointer: coarse) {
  .home-animation-menu-grid button {
    min-height: 34px !important;
  }
}

/* v7.0.103 Gameplay Warm Theme Polish: RadioQuest.net warm HUD, timer danger, no cyan gameplay UI */
:root {
  --rq-warm-bg: rgba(35, 23, 9, .82);
  --rq-warm-bg-strong: rgba(45, 29, 10, .92);
  --rq-warm-border: rgba(255, 218, 143, .26);
  --rq-warm-border-strong: rgba(255, 197, 82, .52);
  --rq-warm-text: #fff4d4;
  --rq-warm-muted: #f2d39b;
  --rq-warm-gold: #f59e0b;
  --rq-warm-gold-2: #fbbf24;
  --rq-warm-orange: #ea580c;
  --rq-warm-red: #ef4444;
}

body.is-playing .top-hud,
body.is-playing #rqPhoneLandscapeOverlay {
  color: var(--rq-warm-text) !important;
}
body.is-playing .top-hud .logo-lockup,
body.is-playing .top-hud .mode-badge,
body.is-playing .top-hud .stat,
body.is-playing #rqPhoneLandscapeOverlay .logo-lockup,
body.is-playing #rqPhoneLandscapeOverlay .stat {
  background: linear-gradient(145deg, rgba(47, 29, 10, .88), rgba(22, 14, 5, .78)) !important;
  border: 1px solid var(--rq-warm-border) !important;
  box-shadow: 0 15px 32px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,244,212,.09) !important;
  color: var(--rq-warm-text) !important;
}
body.is-playing .top-hud .logo-dot,
body.is-playing #rqPhoneLandscapeOverlay .logo-dot {
  background: radial-gradient(circle at 35% 35%, #fff2bf 0 18%, #fbbf24 36%, #f97316 72%, #7c2d12 100%) !important;
  box-shadow: 0 0 0 5px rgba(245,158,11,.14), 0 0 22px rgba(245,158,11,.44) !important;
}
body.is-playing .logo-lockup strong,
body.is-playing #rqPhoneLandscapeOverlay .logo-lockup strong,
body.is-playing .mode-badge span,
body.is-playing .top-hud .stat strong,
body.is-playing #rqPhoneLandscapeOverlay .stat strong {
  color: var(--rq-warm-text) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.24) !important;
}
body.is-playing .logo-lockup small,
body.is-playing #rqPhoneLandscapeOverlay .logo-lockup small,
body.is-playing .top-hud .stat span,
body.is-playing #rqPhoneLandscapeOverlay .stat span,
body.is-playing .mode-badge strong {
  color: var(--rq-warm-muted) !important;
}
body.is-playing .top-hud .stat-score,
body.is-playing #rqPhoneLandscapeOverlay .stat-score {
  border-color: rgba(251,191,36,.38) !important;
}
body.is-playing .top-hud .stat-round,
body.is-playing #rqPhoneLandscapeOverlay .stat-round {
  border-color: rgba(245,158,11,.32) !important;
}
body.is-playing .top-hud .stat-time,
body.is-playing #rqPhoneLandscapeOverlay .stat-time {
  border-color: rgba(251,146,60,.34) !important;
}

body.is-playing .game-avatar-bubble,
body.rq-phone-landscape.is-playing .game-avatar-bubble,
body.showing-round-result .game-avatar-bubble,
body.rq-phone-landscape.showing-round-result.is-playing .game-avatar-bubble {
  background: linear-gradient(145deg, rgba(50, 31, 10, .94), rgba(24, 15, 5, .9)) !important;
  color: #fff4d4 !important;
  border: 1px solid rgba(255, 218, 143, .34) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.3), 0 0 0 4px rgba(245,158,11,.08) !important;
  text-shadow: none !important;
}
body.is-playing .game-avatar-bubble::before,
body.rq-phone-landscape.is-playing .game-avatar-bubble::before {
  background: #f59e0b !important;
  box-shadow: 0 0 14px rgba(245,158,11,.46) !important;
}

body.is-playing .audio-card,
body.is-playing .bottom-panel {
  border-color: rgba(255,218,143,.24) !important;
}
body.is-playing .audio-card[data-signal-state="locked"] {
  border-color: rgba(251,191,36,.36) !important;
  box-shadow: 0 0 0 4px rgba(245,158,11,.08), 0 22px 48px rgba(0,0,0,.33) !important;
}
body.is-playing .audio-card .audio-copy p,
body.is-playing #audioStatus {
  color: #f4d7a4 !important;
}
body.is-playing .audio-card[data-signal-state="error"] #audioStatus {
  color: #fecaca !important;
}
body.is-playing .audio-card[data-signal-state="notice"] #audioStatus,
body.is-playing .audio-card[data-signal-state="loading"] #audioStatus,
body.is-playing .audio-card[data-signal-state="tuning"] #audioStatus {
  color: #fde68a !important;
}

#guessBtn.ready,
body.has-map-guess #guessBtn.ready {
  background: linear-gradient(135deg, #fbbf24, #f97316) !important;
  color: #241204 !important;
  box-shadow: 0 0 0 5px rgba(245,158,11,.14), 0 18px 38px rgba(245,158,11,.24) !important;
}
@keyframes rqGuessReady {
  0%, 100% { box-shadow: 0 0 0 4px rgba(245,158,11,.10), 0 14px 34px rgba(245,158,11,.20); }
  50% { box-shadow: 0 0 0 7px rgba(245,158,11,.18), 0 18px 42px rgba(245,158,11,.30); }
}
.stat.score-pop,
.stat:has(#scoreLabel).score-pop {
  animation: rqWarmScorePop .68s cubic-bezier(.2, 1.45, .35, 1) 1 !important;
}
@keyframes rqWarmScorePop {
  0% { transform: scale(1); filter: none; }
  45% { transform: scale(1.08); filter: drop-shadow(0 0 12px rgba(251,191,36,.34)) brightness(1.16); }
  100% { transform: scale(1); filter: none; }
}
.result-modal.result-grade-good,
.result-modal.result-grade-excellent {
  border-color: rgba(245,158,11,.42) !important;
}
.result-modal.result-grade-good .round-points strong,
.result-modal.result-grade-excellent .round-points strong {
  color: #b45309 !important;
}
.result-modal.result-pop-in {
  animation: rqWarmResultAppear .28s ease-out 1 !important;
}
@keyframes rqWarmResultAppear {
  from { opacity: 0; transform: translateY(6px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.result-modal.result-solo-reveal .round-reveal-topline,
.result-modal.result-solo-reveal .round-reveal-title span,
.result-modal.result-solo-reveal .round-points span,
.result-modal.result-solo-reveal .reveal-distance span,
.result-modal.result-solo-reveal .reveal-details span {
  color: #8a5b17 !important;
}
.result-modal.result-solo-reveal .round-reveal-title strong,
.result-modal.result-solo-reveal .round-points strong,
.result-modal.result-solo-reveal .reveal-distance strong,
.result-modal.result-solo-reveal .reveal-details strong {
  color: #4b2d0c !important;
}
.rq-route-distance-label,
.rq-map-pin-label,
.leaflet-tooltip.rq-map-pin-tooltip {
  background: rgba(47, 29, 10, .93) !important;
  color: #fff4d4 !important;
  border-color: rgba(255, 218, 143, .46) !important;
}
.result-travel-line,
.result-travel-line-reveal,
.result-travel-line-stable {
  stroke: #c76b0c !important;
}

body.rq-timer-danger::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 875;
  background:
    radial-gradient(circle at center, transparent 44%, rgba(127, 29, 29, .08) 66%, rgba(220, 38, 38, .2) 100%),
    linear-gradient(90deg, rgba(239,68,68,.18), transparent 18%, transparent 82%, rgba(239,68,68,.18));
  animation: rqTimerDangerVignette .78s ease-in-out infinite;
}
body.rq-timer-danger .top-hud .stat-time,
body.rq-timer-danger #rqPhoneLandscapeOverlay .stat-time,
body.rq-timer-danger .top-hud .timer,
body.rq-timer-danger #rqPhoneLandscapeOverlay .timer {
  background: linear-gradient(145deg, rgba(127, 29, 29, .92), rgba(67, 20, 7, .88)) !important;
  border-color: rgba(252, 165, 165, .72) !important;
  box-shadow: 0 0 0 5px rgba(239,68,68,.12), 0 0 28px rgba(239,68,68,.24), 0 15px 32px rgba(0,0,0,.25) !important;
  animation: rqTimerBoxPulse .58s ease-in-out infinite !important;
}
body.rq-timer-danger #timerLabel {
  color: #fff1d6 !important;
  text-shadow: 0 0 14px rgba(254,202,202,.5) !important;
}
@keyframes rqTimerDangerVignette {
  0%, 100% { opacity: .72; }
  50% { opacity: 1; }
}
@keyframes rqTimerBoxPulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1px) scale(1.045); }
}
body.rq-phone-landscape.rq-timer-danger::before {
  background:
    radial-gradient(circle at center, transparent 50%, rgba(127,29,29,.08) 75%, rgba(220,38,38,.16) 100%),
    linear-gradient(90deg, rgba(239,68,68,.14), transparent 15%, transparent 85%, rgba(239,68,68,.14));
}
body.rq-phone-landscape.rq-timer-danger .top-hud .stat-time,
body.rq-phone-landscape.rq-timer-danger #rqPhoneLandscapeOverlay .stat-time {
  animation-duration: .68s !important;
}


/* v7.0.104 main menu event avatar click area fix: secret animation tap only on the 3D model */
.home-profile-card-3d.has-home-animation-menu {
  cursor: default !important;
  touch-action: auto !important;
  -webkit-user-select: auto !important;
  user-select: auto !important;
}
.home-profile-card-3d.has-home-animation-menu *:not(#homeAvatar3d):not(#homeAvatar3d *):not(.home-animation-menu):not(.home-animation-menu *) {
  touch-action: auto !important;
  -webkit-user-select: auto !important;
  user-select: auto !important;
}
.home-profile-card-3d.has-home-animation-menu .home-profile-main,
.home-profile-card-3d.has-home-animation-menu .home-profile-mini,
.home-profile-card-3d.has-home-animation-menu .home-mode-bests,
.home-profile-card-3d.has-home-animation-menu .home-stat-card {
  pointer-events: auto !important;
  cursor: default !important;
}
#homeAvatar3d.has-home-animation-menu,
#homeAvatar3d.has-home-animation-menu canvas {
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
.home-profile-card-3d .home-animation-menu,
.home-profile-card-3d .home-animation-menu * {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}
@media (max-width: 720px) {
  .home-profile-card-3d.has-home-animation-menu {
    touch-action: pan-y !important;
  }
  #homeAvatar3d.has-home-animation-menu,
  #homeAvatar3d.has-home-animation-menu canvas {
    touch-action: manipulation !important;
  }
}


/* v7.0.105 Event shop visuals + shop/detail/main-menu warm polish */
:root {
  --rq-event-gold: #f6b84f;
  --rq-event-cream: #fff1c8;
  --rq-event-green: #6fbf73;
  --rq-event-purple: #8b5cf6;
}
.rarity-event,
.shop-item.rarity-event,
.shop-detail-hero.rarity-event,
.shop-detail-meta.rarity-event,
.inventory-item-card.rarity-event {
  --shop-tier-bg: url('/assets/ui/shop/rarity-event-bg.png') !important;
}
.shop-tier-strip .rarity-event,
.shop-item.rarity-event,
.shop-detail-hero.rarity-event,
.inventory-item-card.rarity-event {
  border-color: rgba(246, 184, 79, .48) !important;
  box-shadow: 0 0 0 1px rgba(255, 241, 200, .12), 0 18px 48px rgba(111, 191, 115, .16), 0 0 28px rgba(246, 184, 79, .13) !important;
}
.shop-tier-strip .rarity-event {
  background:
    linear-gradient(145deg, rgba(55, 36, 13, .88), rgba(28, 48, 25, .72)) !important;
}
.shop-tier-strip .rarity-event.active,
.shop-tier-strip .rarity-event:hover {
  box-shadow: 0 0 0 3px rgba(246, 184, 79, .16), 0 18px 42px rgba(0,0,0,.28) !important;
}
.shop-tier-strip .rarity-event strong,
.shop-item.rarity-event .shop-rarity,
.shop-detail-hero.rarity-event strong {
  color: var(--rq-event-cream) !important;
  text-shadow: 0 2px 12px rgba(68, 39, 10, .32) !important;
}
.shop-tier-glyph[src$="event-icon.png"] {
  filter: drop-shadow(0 8px 18px rgba(246, 184, 79, .28));
}
.event-shop-banner {
  position: relative;
  min-height: 160px;
  margin: 14px 0 12px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 232, 174, .38);
  background:
    linear-gradient(90deg, rgba(26, 16, 5, .74), rgba(46, 63, 23, .38)),
    url('/assets/ui/shop/event-banner.png') center center / cover no-repeat;
  box-shadow: 0 22px 54px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.06);
  display: grid;
  align-items: center;
  padding: 22px 180px 22px 28px;
}
.event-shop-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 24% 30%, rgba(255, 238, 178, .18), transparent 32%), linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.12));
  pointer-events: none;
}
.event-shop-banner-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
  max-width: 440px;
}
.event-shop-eyebrow {
  color: #ffe8a8;
  text-transform: uppercase;
  font-size: .74rem;
  letter-spacing: .18em;
  font-weight: 1000;
}
.event-shop-banner-copy strong {
  color: #fff7db;
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  line-height: .96;
  letter-spacing: -.045em;
  text-shadow: 0 4px 20px rgba(0,0,0,.35);
}
.event-shop-banner-copy small {
  color: rgba(255, 244, 213, .92);
  line-height: 1.45;
  font-weight: 750;
}
.event-shop-banner-badge {
  position: absolute;
  z-index: 1;
  right: 24px;
  top: 50%;
  width: min(140px, 26%);
  transform: translateY(-50%) rotate(2deg);
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.28));
}
.shop-item.rarity-event {
  background:
    linear-gradient(180deg, rgba(34, 23, 10, .25), rgba(12, 9, 4, .34)),
    var(--shop-tier-bg) center center / cover no-repeat !important;
}
.shop-item.rarity-event::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 25% 18%, rgba(255, 232, 174, .16), transparent 36%), linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.18));
  pointer-events: none;
}
.shop-item.rarity-event > * { position: relative; z-index: 1; }
.shop-item.rarity-event .shop-item-topline {
  align-items: center;
  gap: 8px;
}
.shop-event-card-badge {
  width: 72px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.24));
}
.shop-item.rarity-event .shop-card-price,
.shop-item.rarity-event .shop-card-action {
  border-color: rgba(255, 232, 174, .26) !important;
}
.shop-item.rarity-event .shop-card-action.primary-btn {
  background: linear-gradient(135deg, #f6b84f, #75bd69) !important;
  color: #2b1a06 !important;
  box-shadow: 0 16px 36px rgba(246, 184, 79, .22) !important;
}
.shop-detail-hero.rarity-event {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(28, 16, 4, .32), rgba(35, 55, 22, .22)),
    var(--shop-tier-bg) center center / cover no-repeat !important;
}
.shop-detail-hero.rarity-event span {
  background: rgba(255, 246, 215, .14) !important;
  border: 1px solid rgba(255, 232, 174, .2) !important;
}
.shop-detail-event-badge {
  position: absolute;
  right: 18px;
  bottom: 14px;
  width: min(120px, 34%);
  height: auto;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.26));
}
.shop-detail-meta.rarity-event {
  background: linear-gradient(145deg, rgba(255, 232, 174, .13), rgba(111, 191, 115, .10)) !important;
  border-color: rgba(255, 232, 174, .22) !important;
}
.event-empty-copy {
  border-color: rgba(246, 184, 79, .24) !important;
  background: linear-gradient(145deg, rgba(48, 31, 8, .45), rgba(20, 40, 18, .32)) !important;
  color: #fff1c8 !important;
}
.inventory-item-card.rarity-event {
  background:
    linear-gradient(180deg, rgba(25, 15, 5, .25), rgba(0,0,0,.25)),
    var(--inventory-tier-bg, var(--shop-tier-bg)) center center / cover no-repeat !important;
}
.admin-event-shop-list .event-shop-sync-note {
  color: #f4d7a1 !important;
}
.admin-event-item,
.admin-shop-item.rarity-event,
.admin-inventory-item.rarity-event {
  border-color: rgba(246, 184, 79, .28) !important;
  background: linear-gradient(145deg, rgba(51, 31, 8, .68), rgba(20, 42, 18, .5)) !important;
}
.event-status-pill.on,
.admin-shop-state-pill.on {
  background: rgba(111, 191, 115, .18) !important;
  color: #d8ffd4 !important;
  border-color: rgba(111, 191, 115, .36) !important;
}
.event-status-pill.off,
.admin-shop-state-pill.off {
  background: rgba(246, 184, 79, .12) !important;
  color: #ffe8a8 !important;
  border-color: rgba(246, 184, 79, .25) !important;
}
/* Warm detail cleanup for existing gameplay/main menu surfaces without changing logic. */
.game-avatar-bubble,
.home-event-animation-menu,
.shop-dialog,
.shop-detail-dialog {
  --accent: #f6b84f;
}
.home-event-animation-menu button:hover,
.home-event-animation-menu button:focus-visible {
  border-color: rgba(246, 184, 79, .48) !important;
  box-shadow: 0 0 0 3px rgba(246, 184, 79, .12) !important;
}
@media (max-width: 920px) {
  .event-shop-banner {
    min-height: 118px;
    padding: 16px 108px 16px 18px;
    border-radius: 22px;
  }
  .event-shop-banner-badge {
    right: 14px;
    width: min(92px, 28%);
  }
  .event-shop-banner-copy strong {
    font-size: 1.35rem;
  }
  .event-shop-banner-copy small {
    font-size: .82rem;
  }
  .shop-event-card-badge {
    width: 56px;
  }
  .shop-detail-event-badge {
    width: 92px;
  }
}

/* v7.0.106 Event card badge/framing polish: image badges + safer Event avatar previews */
.shop-rarity-image-badge,
.inventory-item-tier-chip.shop-rarity-image-badge {
  display: inline-block !important;
  width: 76px !important;
  max-width: 46% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: contain !important;
  box-shadow: none !important;
  filter: drop-shadow(0 7px 12px rgba(0,0,0,.34)) drop-shadow(0 0 12px rgba(246,184,79,.18)) !important;
  pointer-events: none !important;
  z-index: 12 !important;
}
.shop-item.rarity-event .shop-item-topline {
  position: relative !important;
  z-index: 18 !important;
  min-height: 34px !important;
  align-items: flex-start !important;
}
.shop-item.rarity-event .shop-rarity-image-badge {
  width: 72px !important;
  max-width: 48% !important;
  margin-top: -1px !important;
}
.shop-event-card-badge.shop-event-card-badge-corner {
  position: absolute !important;
  right: 8px !important;
  top: 6px !important;
  width: 82px !important;
  max-width: 44% !important;
  z-index: 19 !important;
  opacity: 1 !important;
  transform: rotate(1deg) !important;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.38)) drop-shadow(0 0 14px rgba(246,184,79,.22)) !important;
}
.inventory-item-card.rarity-event .inventory-item-hero {
  overflow: visible !important;
}
.inventory-item-card.rarity-event .inventory-item-tier-chip.shop-rarity-image-badge {
  position: absolute !important;
  top: 7px !important;
  right: 7px !important;
  width: 58px !important;
  max-width: 55% !important;
  z-index: 28 !important;
}
.inventory-shelf-slot .inventory-item-card.rarity-event .inventory-item-tier-chip.shop-rarity-image-badge {
  top: 5px !important;
  right: 5px !important;
  width: 50px !important;
  max-width: 62% !important;
  z-index: 35 !important;
}
.inventory-item-card.rarity-event.equipped .inventory-item-tier-chip.shop-rarity-image-badge {
  top: 6px !important;
  right: 6px !important;
}
.inventory-shelf-slot .inventory-item-card.rarity-event.equipped .inventory-item-tier-chip.shop-rarity-image-badge {
  top: 5px !important;
  right: 5px !important;
}
.shop-item.rarity-event .shop-card-avatar3d,
.inventory-item-card.rarity-event .inventory-card-avatar3d {
  overflow: visible !important;
}
.shop-item.rarity-event .shop-card-avatar3d canvas {
  transform: translateY(2px) scale(.94) !important;
  transform-origin: center bottom !important;
}
.inventory-item-card.rarity-event .inventory-card-avatar3d canvas {
  transform: translateY(2px) scale(.92) !important;
  transform-origin: center bottom !important;
}
.inventory-shelf-slot .inventory-item-card.rarity-event .inventory-card-avatar3d {
  top: 11px !important;
  bottom: 16px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  contain: layout paint !important;
}
.inventory-shelf-slot .inventory-item-card.rarity-event .inventory-card-avatar3d canvas {
  transform: translateY(3px) scale(.86) !important;
  transform-origin: center bottom !important;
}
.inventory-shelf-slot .inventory-item-card.rarity-event strong,
.inventory-shelf-slot .inventory-item-card.rarity-event em {
  position: relative !important;
  z-index: 20 !important;
}
.shop-item.rarity-event::before,
.inventory-item-card.rarity-event::before {
  z-index: 0 !important;
}
.shop-item.rarity-event > *,
.inventory-item-card.rarity-event > * {
  position: relative;
  z-index: 2;
}
@media (max-width: 760px) {
  .shop-item.rarity-event .shop-rarity-image-badge {
    width: 58px !important;
  }
  .shop-event-card-badge.shop-event-card-badge-corner {
    width: 64px !important;
    right: 6px !important;
    top: 6px !important;
  }
  .inventory-item-card.rarity-event .inventory-item-tier-chip.shop-rarity-image-badge {
    width: 48px !important;
  }
  .shop-item.rarity-event .shop-card-avatar3d canvas,
  .inventory-item-card.rarity-event .inventory-card-avatar3d canvas {
    transform: translateY(2px) scale(.88) !important;
  }
}


/* v7.0.107 Shop + Character Shelf Visual Polish: readable Event badges, safer model framing and clearer states */
.shop-item.rarity-event,
.inventory-item-card.rarity-event {
  isolation: isolate !important;
}
.shop-item.rarity-event .shop-item-topline,
.inventory-item-card.rarity-event .inventory-item-hero {
  position: relative !important;
}
.shop-rarity-image-badge,
.inventory-item-tier-chip.shop-rarity-image-badge {
  image-rendering: auto !important;
  opacity: 1 !important;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.45)) drop-shadow(0 0 16px rgba(255,199,86,.28)) !important;
}
.shop-item.rarity-event .shop-rarity-image-badge {
  width: 86px !important;
  max-width: 54% !important;
  z-index: 44 !important;
}
.shop-event-card-badge.shop-event-card-badge-corner {
  width: 92px !important;
  right: 10px !important;
  top: 8px !important;
  z-index: 46 !important;
  opacity: .98 !important;
}
.inventory-item-card.rarity-event .inventory-item-tier-chip.shop-rarity-image-badge {
  width: 78px !important;
  max-width: 68% !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 58 !important;
  transform: rotate(1deg) !important;
}
.inventory-shelf-slot .inventory-item-card.rarity-event .inventory-item-tier-chip.shop-rarity-image-badge {
  width: 70px !important;
  max-width: 78% !important;
  top: 7px !important;
  right: 7px !important;
  z-index: 72 !important;
}
.inventory-shelf-slot .inventory-item-card.rarity-event.equipped .inventory-item-tier-chip.shop-rarity-image-badge {
  top: 7px !important;
  right: 7px !important;
}
.inventory-item-card.rarity-event.equipped::after,
.shop-item.rarity-event.equipped::after {
  z-index: 52 !important;
}
.shop-item.rarity-event .shop-card-avatar3d,
.inventory-item-card.rarity-event .inventory-card-avatar3d {
  overflow: visible !important;
  z-index: 16 !important;
}
.shop-item.rarity-event .shop-card-avatar3d canvas {
  transform: translateY(8px) scale(.86) !important;
  transform-origin: center bottom !important;
}
.inventory-item-card.rarity-event .inventory-card-avatar3d canvas {
  transform: translateY(8px) scale(.84) !important;
  transform-origin: center bottom !important;
}
.inventory-shelf-slot .inventory-item-card.rarity-event .inventory-card-avatar3d {
  top: 17px !important;
  bottom: 24px !important;
  left: 4px !important;
  right: 4px !important;
  overflow: visible !important;
}
.inventory-shelf-slot .inventory-item-card.rarity-event .inventory-card-avatar3d canvas {
  transform: translateY(8px) scale(.78) !important;
  transform-origin: center bottom !important;
}
.inventory-shelf-slot .inventory-item-card.rarity-event strong {
  font-size: .78rem !important;
  line-height: 1.05 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.55) !important;
}
.inventory-shelf-slot .inventory-item-card.rarity-event em {
  font-size: .67rem !important;
  line-height: 1.05 !important;
  color: #ffe3a7 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.55) !important;
}
.inventory-item-card.rarity-event.equipped {
  box-shadow: 0 0 0 2px rgba(255,195,86,.78), 0 0 28px rgba(246,184,79,.18), 0 18px 36px rgba(0,0,0,.32) !important;
}
.inventory-shelf-slot-empty {
  background: linear-gradient(180deg, rgba(255,226,159,.08), rgba(255,226,159,.025)) !important;
  border-color: rgba(255,215,130,.12) !important;
}
.inventory-shelf-slot-empty span {
  color: rgba(255,236,196,.42) !important;
}
.shop-item.rarity-event .shop-item-body strong,
.inventory-item-card.rarity-event strong {
  position: relative !important;
  z-index: 34 !important;
}
.shop-item.rarity-event .shop-item-body em,
.inventory-item-card.rarity-event em {
  position: relative !important;
  z-index: 34 !important;
}
.shop-item.rarity-event .shop-status-pill,
.shop-item.rarity-event .shop-item-price,
.shop-item.rarity-event .shop-buy-btn {
  position: relative !important;
  z-index: 40 !important;
}
@media (max-width: 760px) {
  .shop-item.rarity-event .shop-rarity-image-badge {
    width: 72px !important;
  }
  .shop-event-card-badge.shop-event-card-badge-corner {
    width: 76px !important;
  }
  .inventory-item-card.rarity-event .inventory-item-tier-chip.shop-rarity-image-badge {
    width: 64px !important;
  }
  .inventory-shelf-slot .inventory-item-card.rarity-event .inventory-item-tier-chip.shop-rarity-image-badge {
    width: 62px !important;
  }
  .shop-item.rarity-event .shop-card-avatar3d canvas,
  .inventory-item-card.rarity-event .inventory-card-avatar3d canvas {
    transform: translateY(7px) scale(.80) !important;
  }
  .inventory-shelf-slot .inventory-item-card.rarity-event .inventory-card-avatar3d canvas {
    transform: translateY(7px) scale(.74) !important;
  }
}


/* v7.0.108 Event badge/model sizing fix: single Event badge + larger readable event previews */
.shop-item.rarity-event .shop-item-topline {
  justify-content: flex-start !important;
  min-height: 34px !important;
  padding-right: 8px !important;
}
.shop-item.rarity-event .shop-event-card-badge.shop-event-card-badge-corner {
  display: none !important;
}
.shop-item.rarity-event .shop-rarity-image-badge {
  width: 94px !important;
  max-width: 72% !important;
  z-index: 64 !important;
  transform: rotate(-1deg) !important;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.44)) drop-shadow(0 0 12px rgba(255,201,83,.26)) !important;
}
.shop-item.rarity-event.equipped::after {
  top: 11px !important;
  right: 12px !important;
  z-index: 58 !important;
  background: rgba(40, 26, 9, .78) !important;
  border-color: rgba(255, 214, 122, .44) !important;
  color: #ffe0a3 !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.25) !important;
}
.inventory-item-card.rarity-event .inventory-item-tier-chip.shop-rarity-image-badge {
  width: 86px !important;
  max-width: 78% !important;
  z-index: 80 !important;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.48)) drop-shadow(0 0 14px rgba(255,201,83,.30)) !important;
}
.inventory-shelf-slot .inventory-item-card.rarity-event .inventory-item-tier-chip.shop-rarity-image-badge {
  width: 82px !important;
  max-width: 84% !important;
  top: 6px !important;
  right: 6px !important;
}
.shop-item.rarity-event .shop-card-avatar3d {
  top: 42px !important;
  bottom: 98px !important;
  min-height: 136px !important;
  overflow: visible !important;
}
.shop-item.rarity-event .shop-card-avatar3d canvas {
  transform: translateY(6px) scale(1.06) !important;
  transform-origin: center bottom !important;
}
.inventory-item-card.rarity-event .inventory-card-avatar3d {
  overflow: visible !important;
}
.inventory-item-card.rarity-event .inventory-card-avatar3d canvas {
  transform: translateY(5px) scale(1.00) !important;
  transform-origin: center bottom !important;
}
.inventory-shelf-slot .inventory-item-card.rarity-event .inventory-card-avatar3d {
  top: 22px !important;
  bottom: 28px !important;
  left: 2px !important;
  right: 2px !important;
  overflow: visible !important;
}
.inventory-shelf-slot .inventory-item-card.rarity-event .inventory-card-avatar3d canvas {
  transform: translateY(5px) scale(.98) !important;
  transform-origin: center bottom !important;
}
.inventory-shelf-slot .inventory-item-card.rarity-event strong,
.inventory-shelf-slot .inventory-item-card.rarity-event em {
  z-index: 86 !important;
}
@media (max-width: 760px) {
  .shop-item.rarity-event .shop-rarity-image-badge {
    width: 82px !important;
    max-width: 74% !important;
  }
  .shop-item.rarity-event .shop-card-avatar3d canvas {
    transform: translateY(5px) scale(.98) !important;
  }
  .inventory-item-card.rarity-event .inventory-item-tier-chip.shop-rarity-image-badge {
    width: 72px !important;
  }
  .inventory-shelf-slot .inventory-item-card.rarity-event .inventory-item-tier-chip.shop-rarity-image-badge {
    width: 72px !important;
  }
  .inventory-item-card.rarity-event .inventory-card-avatar3d canvas {
    transform: translateY(5px) scale(.94) !important;
  }
  .inventory-shelf-slot .inventory-item-card.rarity-event .inventory-card-avatar3d canvas {
    transform: translateY(5px) scale(.92) !important;
  }
}

/* v7.0.110 Hall of Fame polish v2: image-backed classic leaderboard, medals, YOU highlight and phone-safe layout. */
.hall-dialog.leaderboard-dialog {
  width: min(1040px, calc(100vw - 28px));
  max-width: min(1040px, calc(100vw - 28px));
}
.hall-of-fame-card {
  position: relative;
  overflow: hidden;
  padding: 0 24px 22px;
  border-color: rgba(198, 161, 103, .42);
  background:
    linear-gradient(180deg, rgba(21, 18, 15, .96), rgba(10, 9, 8, .98)),
    #15120f;
  box-shadow: 0 26px 90px rgba(0,0,0,.52), inset 0 0 0 1px rgba(232, 220, 200, .05);
}
.hall-of-fame-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 0%, rgba(198, 161, 103, .18), transparent 34%),
    radial-gradient(circle at 86% 8%, rgba(143, 108, 63, .16), transparent 32%),
    linear-gradient(115deg, transparent 0 38%, rgba(232,220,200,.045) 46%, transparent 55% 100%);
  opacity: .96;
}
.hall-of-fame-card > * { position: relative; z-index: 1; }
.hall-header {
  min-height: 184px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin: 0 -24px 16px;
  padding: 26px 24px 24px;
  border-bottom: 1px solid rgba(198, 161, 103, .26);
  background:
    linear-gradient(90deg, rgba(9, 8, 7, .34), rgba(9, 8, 7, .04) 45%, rgba(9, 8, 7, .46)),
    linear-gradient(180deg, rgba(21,18,15,.12), rgba(21,18,15,.78)),
    url('/assets/ui/leaderboards/hall-of-fame-header-bg.png') center/cover no-repeat;
}
.hall-kicker,
.hall-current-category span,
.hall-my-rank > span {
  display: block;
  color: rgba(232, 220, 200, .82);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hall-header h2 {
  margin: 4px 0 6px;
  color: #f5ead7;
  font-size: clamp(2.1rem, 4.4vw, 3.45rem);
  line-height: .95;
  text-align: left;
  text-shadow: 0 12px 38px rgba(0,0,0,.55);
}
.hall-header p {
  max-width: 610px;
  color: rgba(232, 220, 200, .84);
  line-height: 1.55;
}
.hall-close-btn {
  flex: 0 0 auto;
  border-color: rgba(198, 161, 103, .38) !important;
  background: rgba(21,18,15,.72) !important;
  color: #f5ead7 !important;
}
.leaderboard-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 16px;
  padding: 8px;
  border-radius: 20px;
  border: 1px solid rgba(198, 161, 103, .24);
  background: rgba(10, 9, 8, .58);
}
.leaderboard-tab {
  appearance: none;
  border: 1px solid rgba(198, 161, 103, .22);
  border-radius: 999px;
  background: rgba(27, 23, 19, .88);
  color: rgba(232, 220, 200, .76);
  padding: 10px 13px;
  font-weight: 950;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.leaderboard-tab:hover {
  transform: translateY(-1px);
  color: #f5ead7;
  border-color: rgba(198, 161, 103, .48);
  background: rgba(44, 35, 25, .92);
}
.leaderboard-tab.active {
  color: #fff3d6;
  border-color: rgba(198, 161, 103, .70);
  background: linear-gradient(135deg, rgba(143,108,63,.58), rgba(50,38,26,.92));
  box-shadow: 0 8px 24px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,243,214,.08);
}
.hall-leaderboard-list {
  display: grid;
  gap: 14px;
  max-height: min(67vh, 720px);
  padding-right: 6px;
  overflow-y: auto;
  scrollbar-color: rgba(198, 161, 103, .55) rgba(10, 9, 8, .45);
}
.hall-current-category {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(198, 161, 103, .25);
  background: linear-gradient(135deg, rgba(232,220,200,.07), rgba(91,70,49,.08));
}
.hall-current-category strong {
  color: #f5ead7;
  font-size: 1.05rem;
}
.hall-podium-wrap {
  min-height: 276px;
  padding: 42px 18px 18px;
  border-radius: 28px;
  border: 1px solid rgba(198, 161, 103, .22);
  background:
    linear-gradient(180deg, rgba(10,9,8,.18), rgba(10,9,8,.58)),
    url('/assets/ui/leaderboards/hall-of-fame-podium.png') center bottom/cover no-repeat;
  box-shadow: inset 0 1px 0 rgba(232,220,200,.08), 0 18px 48px rgba(0,0,0,.22);
}
.hall-podium {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.08fr) minmax(0, .9fr);
  gap: 12px;
  align-items: end;
}
.hall-podium-card {
  min-height: 190px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 7px;
  padding: 14px 12px;
  border-radius: 24px;
  border: 1px solid rgba(198, 161, 103, .24);
  background: linear-gradient(180deg, rgba(27,23,19,.80), rgba(13,11,9,.72));
  box-shadow: 0 16px 46px rgba(0,0,0,.28), inset 0 0 0 1px rgba(232,220,200,.04);
  text-align: center;
  backdrop-filter: blur(4px);
}
.hall-podium-card.place-1 {
  min-height: 232px;
  border-color: rgba(198, 161, 103, .62);
  background: linear-gradient(180deg, rgba(75,55,31,.82), rgba(18,15,12,.76));
  box-shadow: 0 20px 60px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,243,214,.08);
}
.hall-podium-card.place-2 { border-color: rgba(214, 207, 193, .38); }
.hall-podium-card.place-3 { border-color: rgba(154, 95, 52, .46); }
.hall-podium-card.is-you,
.hall-rank-row.is-you {
  border-color: rgba(232, 220, 200, .62);
  box-shadow: 0 0 0 1px rgba(198,161,103,.18), 0 16px 42px rgba(0,0,0,.28);
}
.hall-medal {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: -2px;
}
.hall-medal-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.35));
}
.hall-place-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(198, 161, 103, .28);
  background: rgba(10, 9, 8, .45);
  color: rgba(232, 220, 200, .82);
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hall-podium-card strong {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #f5ead7;
  font-size: 1.05rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hall-podium-card strong em,
.hall-player-name em {
  flex: 0 0 auto;
  display: inline-flex;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(198, 161, 103, .45);
  color: #fff3d6;
  background: rgba(91,70,49,.48);
  font-size: .58rem;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .08em;
}
.hall-podium-card small,
.hall-player-name small,
.hall-my-rank small,
.hall-next-rank small {
  color: rgba(232, 220, 200, .68);
  font-weight: 850;
}
.hall-podium-empty { opacity: .70; }
.hall-podium-empty span {
  color: rgba(232, 220, 200, .72);
  font-weight: 950;
}
.hall-ranking-table {
  display: grid;
  gap: 8px;
}
.hall-rank-row {
  display: grid;
  grid-template-columns: 54px 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  border-radius: 18px;
  border: 1px solid rgba(198, 161, 103, .17);
  background: linear-gradient(135deg, rgba(232,220,200,.055), rgba(91,70,49,.045));
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.hall-rank-row:hover {
  transform: translateY(-1px);
  border-color: rgba(198, 161, 103, .38);
  background: linear-gradient(135deg, rgba(232,220,200,.075), rgba(91,70,49,.075));
}
.hall-rank-number {
  color: #fff3d6;
  font-size: .98rem;
}
.hall-player-name {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
  color: #f5ead7;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hall-player-name small {
  flex: 0 0 100%;
  display: block;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hall-score {
  display: grid;
  justify-items: end;
  color: #f5ead7;
  line-height: 1;
}
.hall-score small {
  color: rgba(232, 220, 200, .58);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hall-my-rank {
  position: sticky;
  bottom: 0;
  display: grid;
  gap: 9px;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(198, 161, 103, .46);
  background:
    linear-gradient(90deg, rgba(12,10,8,.74), rgba(12,10,8,.34) 54%, rgba(12,10,8,.78)),
    url('/assets/ui/leaderboards/hall-of-fame-your-position-bg.png') center/cover no-repeat,
    rgba(18,15,12,.96);
  box-shadow: 0 -12px 34px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,243,214,.06);
  backdrop-filter: blur(12px);
}
.hall-my-rank-main {
  display: grid;
  grid-template-columns: auto 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.hall-my-rank-main > strong {
  color: #fff3d6;
  font-size: 1.35rem;
}
.hall-my-rank b {
  display: block;
  color: #f5ead7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hall-my-rank-muted strong { color: rgba(232, 220, 200, .75); }
.hall-next-rank {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid rgba(198, 161, 103, .18);
}
.hall-next-rank strong {
  color: #fff3d6;
  font-size: .9rem;
}
.leaderboard-avatar3d.podium-avatar {
  width: 74px;
  height: 74px;
  min-width: 74px;
  border-radius: 22px;
  border-color: rgba(198, 161, 103, .28);
  background: radial-gradient(circle at 50% 18%, rgba(232,220,200,.16), rgba(12,10,8,.62));
}
.place-1 .leaderboard-avatar3d.podium-avatar {
  width: 90px;
  height: 90px;
  min-width: 90px;
}
.leaderboard-avatar3d.hall-row-avatar,
.leaderboard-avatar3d.hall-my-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 14px;
  border-color: rgba(198, 161, 103, .22);
  background: radial-gradient(circle at 50% 20%, rgba(232,220,200,.13), rgba(12,10,8,.54));
}
.leaderboard-avatar3d.empty span {
  filter: grayscale(.15);
  opacity: .88;
}
.hall-small-empty {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(198,161,103,.16);
  background: rgba(232,220,200,.045);
  color: rgba(232,220,200,.72);
}
.hall-empty-state,
.hall-loading-scan {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 26px 18px;
  border-radius: 24px;
  border: 1px solid rgba(198, 161, 103, .22);
  background: rgba(10, 9, 8, .46);
  text-align: center;
}
.hall-empty-state img {
  width: min(220px, 52vw);
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.34));
}
.hall-empty-state strong,
.hall-loading-scan strong {
  color: #f5ead7;
  font-size: 1.05rem;
}
.hall-empty-state span,
.hall-loading-scan span {
  max-width: 430px;
  color: rgba(232, 220, 200, .72);
  line-height: 1.45;
}
.hall-loading-scan::before {
  content: "";
  width: 72px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(198,161,103,.92), transparent);
  animation: hallScanPulse 1.15s ease-in-out infinite;
}
@keyframes hallScanPulse {
  0%, 100% { opacity: .34; transform: scaleX(.75); }
  50% { opacity: 1; transform: scaleX(1.2); }
}
@media (max-width: 760px) {
  .hall-dialog.leaderboard-dialog {
    width: min(96vw, calc(100vw - 12px));
    max-width: min(96vw, calc(100vw - 12px));
  }
  .hall-of-fame-card { padding: 0 14px 14px; }
  .hall-header {
    min-height: 150px;
    flex-direction: column;
    margin: 0 -14px 12px;
    padding: 18px 14px;
  }
  .hall-header h2 { font-size: clamp(1.85rem, 8vw, 2.55rem); }
  .hall-close-btn { width: 100%; }
  .leaderboard-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 9px;
    scrollbar-width: thin;
  }
  .leaderboard-tab { flex: 0 0 auto; }
  .hall-leaderboard-list {
    max-height: min(70vh, 620px);
    padding-right: 2px;
  }
  .hall-podium-wrap {
    min-height: auto;
    padding: 14px;
    background-position: center bottom;
  }
  .hall-podium { grid-template-columns: 1fr; align-items: stretch; }
  .hall-podium-card,
  .hall-podium-card.place-1 { min-height: 150px; }
  .hall-rank-row { grid-template-columns: 44px 42px minmax(0, 1fr); }
  .hall-score { grid-column: 3; justify-items: start; }
  .hall-current-category { align-items: flex-start; flex-direction: column; }
  .hall-my-rank { position: sticky; padding: 12px; }
  .hall-next-rank { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 480px) {
  .hall-podium-card { grid-template-columns: 58px minmax(0, 1fr); justify-items: start; text-align: left; }
  .hall-podium-card .hall-medal { grid-row: span 2; }
  .hall-podium-card .leaderboard-avatar3d { grid-row: span 3; }
  .hall-podium-card strong { max-width: 100%; }
}


/* v7.0.113 Hall of Fame polish v4: safer WebGL preview lifecycle, stronger podium hierarchy and classic controls. */
.hall-header h2 {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hall-title-medal {
  width: clamp(46px, 5.3vw, 64px);
  height: clamp(46px, 5.3vw, 64px);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 32%, rgba(255,243,214,.18), rgba(21,18,15,.16) 62%, transparent 100%);
}
.hall-title-medal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.42));
}
.hall-close-btn {
  width: 44px;
  height: 44px;
  display: inline-grid !important;
  place-items: center;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(198, 161, 103, .52) !important;
  background: rgba(12,10,8,.72) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,243,214,.06);
}
.hall-close-btn span {
  display: block;
  margin-top: -2px;
  color: #fff3d6;
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 800;
}
.hall-close-btn em {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.hall-current-category {
  padding: 13px 16px;
}
.hall-current-category > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.hall-current-category small {
  color: rgba(232,220,200,.62);
  font-weight: 800;
  line-height: 1.35;
}
.hall-current-category b {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(198,161,103,.26);
  color: #fff3d6;
  background: rgba(10,9,8,.46);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hall-podium-wrap {
  padding-top: 48px;
  background:
    radial-gradient(circle at 50% 14%, rgba(255,243,214,.14), transparent 34%),
    linear-gradient(180deg, rgba(10,9,8,.10), rgba(10,9,8,.54)),
    url('/assets/ui/leaderboards/hall-of-fame-podium.png') center bottom/cover no-repeat;
}
.hall-podium {
  align-items: end;
}
.hall-podium-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 30%, rgba(232,220,200,.13), transparent 34%),
    linear-gradient(180deg, rgba(34,28,22,.88), rgba(12,10,8,.75));
}
.hall-podium-card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 20px;
  pointer-events: none;
  background: radial-gradient(circle at 50% 30%, rgba(255,243,214,.18), transparent 38%);
  opacity: .82;
}
.hall-podium-card > * { position: relative; z-index: 1; }
.hall-podium-card.place-1 {
  transform: translateY(-14px);
  min-height: 246px;
  background:
    radial-gradient(circle at 50% 24%, rgba(255,243,214,.21), transparent 38%),
    linear-gradient(180deg, rgba(83,61,34,.88), rgba(15,12,10,.78));
}
.hall-podium-card.place-2,
.hall-podium-card.place-3 {
  transform: translateY(8px);
}
.hall-podium-card.place-1 .hall-medal {
  width: 50px;
  height: 50px;
}
.leaderboard-avatar3d.podium-avatar {
  background: radial-gradient(circle at 50% 18%, rgba(255,243,214,.22), rgba(12,10,8,.58) 64%);
  box-shadow: inset 0 0 0 1px rgba(255,243,214,.08), 0 12px 26px rgba(0,0,0,.24);
}
.place-1 .leaderboard-avatar3d.podium-avatar {
  width: 96px;
  height: 96px;
  min-width: 96px;
}
.hall-small-empty {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 10px 12px;
  min-height: 0;
}
.hall-small-empty strong {
  color: rgba(245,234,215,.86);
  font-size: .9rem;
}
.hall-small-empty span {
  color: rgba(232,220,200,.62);
  font-size: .86rem;
}
.hall-my-rank {
  padding: 16px;
}
.hall-my-rank-main {
  grid-template-columns: auto 52px minmax(0, 1fr);
  gap: 14px;
}
.leaderboard-avatar3d.hall-my-avatar {
  width: 52px;
  height: 52px;
  min-width: 52px;
}
.leaderboard-avatar-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  opacity: .74;
  filter: grayscale(.2);
}
@media (max-width: 760px) {
  .hall-header h2 { gap: 10px; }
  .hall-close-btn {
    width: 100%;
    height: 42px;
  }
  .hall-close-btn em {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    margin-left: 8px;
    color: rgba(232,220,200,.76);
    font-size: .78rem;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
  }
  .hall-close-btn {
    display: inline-flex !important;
    justify-content: center;
    gap: 4px;
  }
  .hall-podium-card.place-1,
  .hall-podium-card.place-2,
  .hall-podium-card.place-3 {
    transform: none;
  }
  .place-1 .leaderboard-avatar3d.podium-avatar {
    width: 82px;
    height: 82px;
    min-width: 82px;
  }
}


/* v7.0.113 Hall of Fame polish v4: larger podium avatars, clearer medals, taller personal rank card and safe reopen state. */
.hall-podium-card {
  gap: 8px;
  padding: 16px 14px;
}
.hall-podium-card.place-1 {
  min-height: 264px;
}
.hall-podium-card.place-2,
.hall-podium-card.place-3 {
  min-height: 204px;
}
.leaderboard-avatar3d.podium-avatar {
  width: 88px;
  height: 88px;
  min-width: 88px;
  border-radius: 24px;
}
.place-1 .leaderboard-avatar3d.podium-avatar {
  width: 116px;
  height: 116px;
  min-width: 116px;
  border-radius: 28px;
}
.hall-podium-card .leaderboard-avatar3d canvas {
  transform: scale(1.06);
  transform-origin: center center;
}
.hall-medal {
  position: relative;
  width: 48px;
  height: 48px;
  margin-bottom: 0;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 42%, rgba(255,243,214,.16), rgba(21,18,15,.18) 58%, transparent 100%);
}
.hall-podium-card.place-1 .hall-medal {
  width: 58px;
  height: 58px;
}
.hall-podium-card.place-2 .hall-medal,
.hall-podium-card.place-3 .hall-medal {
  width: 52px;
  height: 52px;
}
.hall-medal-img {
  filter: drop-shadow(0 9px 15px rgba(0,0,0,.48)) contrast(1.08) brightness(1.08);
}
.hall-podium-card.place-2 .hall-medal-img {
  filter: drop-shadow(0 9px 15px rgba(0,0,0,.50)) contrast(1.12) brightness(1.18) saturate(.82);
}
.hall-podium-card.place-3 .hall-medal-img {
  filter: drop-shadow(0 9px 15px rgba(0,0,0,.50)) contrast(1.12) brightness(1.12) saturate(1.08);
}
.hall-podium-card strong {
  font-size: 1.16rem;
  line-height: 1.12;
}
.hall-podium-card.place-1 strong {
  font-size: 1.28rem;
}
.hall-podium-card small {
  font-size: .92rem;
  color: rgba(232,220,200,.76);
}
.hall-place-badge {
  padding: 5px 10px;
  font-size: .66rem;
}
.hall-my-rank {
  min-height: 126px;
  padding: 20px 18px;
  gap: 12px;
}
.hall-my-rank-main {
  grid-template-columns: auto 62px minmax(0, 1fr);
  gap: 16px;
}
.leaderboard-avatar3d.hall-my-avatar {
  width: 62px;
  height: 62px;
  min-width: 62px;
  border-radius: 18px;
}
.hall-my-rank-main > strong {
  font-size: 1.52rem;
}
.hall-my-rank b {
  font-size: 1.08rem;
}
.hall-my-rank small {
  font-size: .92rem;
  color: rgba(232,220,200,.75);
}
.hall-next-rank {
  padding-top: 10px;
}
.hall-next-rank strong {
  font-size: .96rem;
}
.hall-next-rank small {
  font-size: .88rem;
}
@media (max-width: 760px) {
  .leaderboard-avatar3d.podium-avatar,
  .place-1 .leaderboard-avatar3d.podium-avatar {
    width: 82px;
    height: 82px;
    min-width: 82px;
  }
  .hall-podium-card.place-1,
  .hall-podium-card.place-2,
  .hall-podium-card.place-3 {
    min-height: 164px;
  }
  .hall-podium-card strong,
  .hall-podium-card.place-1 strong {
    font-size: 1.08rem;
  }
  .hall-my-rank {
    min-height: 0;
    padding: 14px;
  }
  .hall-my-rank-main {
    grid-template-columns: auto 50px minmax(0, 1fr);
    gap: 12px;
  }
  .leaderboard-avatar3d.hall-my-avatar {
    width: 50px;
    height: 50px;
    min-width: 50px;
  }
}


/* v7.0.113 Hall of Fame final scroll polish: classic brass scrollbars and tighter desktop spacing. */
.hall-dialog.leaderboard-dialog {
  scrollbar-width: thin;
  scrollbar-color: rgba(154, 116, 65, .92) rgba(10, 9, 8, .82);
}
.hall-dialog.leaderboard-dialog::backdrop {
  background: rgba(4, 6, 10, .72);
  backdrop-filter: blur(7px);
}
.hall-dialog.leaderboard-dialog::-webkit-scrollbar,
.hall-of-fame-card::-webkit-scrollbar,
.hall-leaderboard-list::-webkit-scrollbar,
.leaderboard-tabs::-webkit-scrollbar {
  width: 10px;
  height: 9px;
}
.hall-dialog.leaderboard-dialog::-webkit-scrollbar-track,
.hall-of-fame-card::-webkit-scrollbar-track,
.hall-leaderboard-list::-webkit-scrollbar-track,
.leaderboard-tabs::-webkit-scrollbar-track {
  background: rgba(10, 9, 8, .82);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(198, 161, 103, .10);
}
.hall-dialog.leaderboard-dialog::-webkit-scrollbar-thumb,
.hall-of-fame-card::-webkit-scrollbar-thumb,
.hall-leaderboard-list::-webkit-scrollbar-thumb,
.leaderboard-tabs::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(205, 170, 105, .98), rgba(105, 75, 38, .96));
  border: 2px solid rgba(10, 9, 8, .92);
  box-shadow: inset 0 0 0 1px rgba(255, 238, 190, .18), 0 4px 10px rgba(0,0,0,.28);
}
.hall-dialog.leaderboard-dialog::-webkit-scrollbar-thumb:hover,
.hall-of-fame-card::-webkit-scrollbar-thumb:hover,
.hall-leaderboard-list::-webkit-scrollbar-thumb:hover,
.leaderboard-tabs::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(232, 194, 119, 1), rgba(132, 93, 45, 1));
}
.hall-of-fame-card {
  max-height: min(94vh, 900px);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(154, 116, 65, .92) rgba(10, 9, 8, .82);
  padding-bottom: 18px;
}
.hall-header {
  min-height: 164px;
  margin-bottom: 12px;
  padding-top: 22px;
  padding-bottom: 20px;
}
.hall-header h2 {
  margin-bottom: 4px;
}
.hall-tabs,
.leaderboard-tabs {
  margin-bottom: 10px;
}
.hall-current-category {
  margin-bottom: 10px;
  padding-top: 11px;
  padding-bottom: 11px;
}
.hall-podium-wrap {
  padding-top: 36px;
  padding-bottom: 18px;
  margin-bottom: 10px;
}
.hall-podium-card.place-1 {
  min-height: 252px;
}
.hall-podium-card.place-2,
.hall-podium-card.place-3 {
  min-height: 194px;
}
.hall-small-empty {
  margin: 8px 0 10px;
  padding: 8px 12px;
}
.hall-my-rank {
  min-height: 116px;
  padding: 16px 18px;
}
.hall-next-rank {
  padding-top: 6px;
}
@media (min-width: 900px) {
  .hall-dialog.leaderboard-dialog {
    max-height: calc(100vh - 28px);
  }
  .hall-of-fame-card {
    max-height: calc(100vh - 28px);
  }
}
@media (max-width: 760px) {
  .hall-of-fame-card {
    max-height: min(96dvh, 820px);
    padding-bottom: 14px;
  }
  .hall-header {
    min-height: 136px;
    margin-bottom: 10px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .hall-podium-wrap {
    padding-top: 16px;
    padding-bottom: 14px;
  }
  .hall-small-empty {
    margin: 7px 0 9px;
  }
  .hall-my-rank {
    min-height: 0;
    padding: 13px;
  }
}


/* v7.0.115 Hall of Fame mobile polish: compact phone cards, small close button and single scroll container. */
@media (max-width: 760px) {
  .hall-dialog.leaderboard-dialog {
    width: calc(100vw - 10px) !important;
    max-width: calc(100vw - 10px) !important;
    max-height: calc(100dvh - 10px) !important;
    height: calc(100dvh - 10px) !important;
    margin: auto !important;
    overflow: hidden !important;
    border-radius: 22px !important;
  }

  .hall-of-fame-card {
    height: 100% !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 12px 12px !important;
    border-radius: 22px !important;
  }

  .hall-header {
    position: relative !important;
    min-height: 118px !important;
    margin: 0 -12px 8px !important;
    padding: 14px 54px 14px 16px !important;
    align-items: flex-start !important;
    flex-direction: row !important;
  }

  .hall-kicker {
    font-size: .62rem !important;
    letter-spacing: .16em !important;
  }

  .hall-header h2 {
    gap: 8px !important;
    margin: 5px 0 5px !important;
    font-size: clamp(2rem, 9.4vw, 2.75rem) !important;
    line-height: .92 !important;
  }

  .hall-title-medal {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .hall-header p {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: .9rem !important;
    line-height: 1.3 !important;
  }

  .hall-close-btn {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    z-index: 4 !important;
  }

  .hall-close-btn span {
    margin: -2px 0 0 !important;
    font-size: 1.45rem !important;
  }

  .hall-close-btn em {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  .leaderboard-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 6px !important;
    margin: 0 0 8px !important;
    padding: 7px !important;
    border-radius: 18px !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .leaderboard-tab {
    flex: 0 0 auto !important;
    padding: 8px 11px !important;
    font-size: .74rem !important;
    scroll-snap-align: start;
  }

  .hall-leaderboard-list {
    max-height: none !important;
    overflow: visible !important;
    gap: 9px !important;
    padding-right: 0 !important;
  }

  .hall-current-category {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    padding: 10px 12px !important;
    border-radius: 17px !important;
  }

  .hall-current-category span {
    font-size: .62rem !important;
  }

  .hall-current-category strong {
    font-size: .98rem !important;
  }

  .hall-current-category small {
    font-size: .78rem !important;
    line-height: 1.2 !important;
  }

  .hall-current-category b {
    padding: 7px 9px !important;
    font-size: .66rem !important;
  }

  .hall-podium-wrap {
    min-height: 0 !important;
    margin-bottom: 8px !important;
    padding: 10px !important;
    border-radius: 20px !important;
    background:
      linear-gradient(180deg, rgba(10,9,8,.16), rgba(10,9,8,.66)),
      url('/assets/ui/leaderboards/hall-of-fame-podium.png') center/cover no-repeat !important;
  }

  .hall-podium {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  .hall-podium-card,
  .hall-podium-card.place-1,
  .hall-podium-card.place-2,
  .hall-podium-card.place-3 {
    min-height: 96px !important;
    display: grid !important;
    grid-template-columns: 38px 62px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    align-items: center !important;
    justify-items: start !important;
    align-content: center !important;
    gap: 3px 10px !important;
    padding: 10px 11px !important;
    text-align: left !important;
    transform: none !important;
    border-radius: 18px !important;
  }

  .hall-podium-card.place-1 {
    min-height: 104px !important;
    border-color: rgba(198, 161, 103, .66) !important;
  }

  .hall-podium-card .hall-medal,
  .hall-podium-card.place-1 .hall-medal,
  .hall-podium-card.place-2 .hall-medal,
  .hall-podium-card.place-3 .hall-medal {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    width: 36px !important;
    height: 36px !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 0 !important;
  }

  .hall-podium-card .leaderboard-avatar3d.podium-avatar,
  .hall-podium-card.place-1 .leaderboard-avatar3d.podium-avatar,
  .leaderboard-avatar3d.podium-avatar,
  .place-1 .leaderboard-avatar3d.podium-avatar {
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    border-radius: 17px !important;
    align-self: center !important;
  }

  .hall-podium-card .leaderboard-avatar3d canvas {
    transform: scale(1.03) !important;
  }

  .hall-place-badge {
    grid-column: 3 !important;
    grid-row: 1 !important;
    padding: 4px 8px !important;
    font-size: .58rem !important;
    letter-spacing: .07em !important;
  }

  .hall-podium-card strong,
  .hall-podium-card.place-1 strong {
    grid-column: 3 !important;
    grid-row: 2 !important;
    max-width: 100% !important;
    font-size: 1rem !important;
    line-height: 1.08 !important;
  }

  .hall-podium-card small {
    grid-column: 3 !important;
    grid-row: 3 !important;
    font-size: .82rem !important;
    line-height: 1.15 !important;
  }

  .hall-small-empty {
    margin: 6px 0 8px !important;
    padding: 8px 10px !important;
    border-radius: 15px !important;
  }

  .hall-small-empty strong { font-size: .82rem !important; }
  .hall-small-empty span { font-size: .76rem !important; }

  .hall-ranking-table {
    gap: 7px !important;
  }

  .hall-rank-row {
    grid-template-columns: 38px 42px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 9px 10px !important;
    border-radius: 15px !important;
  }

  .hall-score {
    grid-column: 3 !important;
    justify-items: start !important;
    margin-top: -2px !important;
    font-size: .88rem !important;
  }

  .hall-my-rank {
    position: relative !important;
    bottom: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    padding: 10px 11px !important;
    gap: 7px !important;
    border-radius: 18px !important;
  }

  .hall-my-rank > span {
    font-size: .62rem !important;
  }

  .hall-my-rank-main {
    grid-template-columns: auto 46px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .hall-my-rank-main > strong {
    font-size: 1.25rem !important;
  }

  .leaderboard-avatar3d.hall-my-avatar {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 14px !important;
  }

  .hall-my-rank b {
    font-size: .95rem !important;
  }

  .hall-my-rank small {
    font-size: .78rem !important;
  }

  .hall-next-rank {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 5px 8px !important;
    align-items: center !important;
    padding-top: 7px !important;
  }

  .hall-next-rank strong {
    font-size: .82rem !important;
  }

  .hall-next-rank small {
    font-size: .76rem !important;
  }
}

@media (max-width: 430px) {
  .hall-header h2 {
    font-size: clamp(1.72rem, 8.8vw, 2.15rem) !important;
  }

  .hall-title-medal {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

  .hall-header p {
    font-size: .82rem !important;
  }

  .hall-podium-card,
  .hall-podium-card.place-1,
  .hall-podium-card.place-2,
  .hall-podium-card.place-3 {
    grid-template-columns: 34px 54px minmax(0, 1fr) !important;
    min-height: 88px !important;
    padding: 9px !important;
  }

  .hall-podium-card .leaderboard-avatar3d.podium-avatar,
  .hall-podium-card.place-1 .leaderboard-avatar3d.podium-avatar,
  .leaderboard-avatar3d.podium-avatar,
  .place-1 .leaderboard-avatar3d.podium-avatar {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
  }

  .hall-podium-card .hall-medal,
  .hall-podium-card.place-1 .hall-medal,
  .hall-podium-card.place-2 .hall-medal,
  .hall-podium-card.place-3 .hall-medal {
    width: 32px !important;
    height: 32px !important;
  }

  .hall-podium-card strong,
  .hall-podium-card.place-1 strong {
    font-size: .92rem !important;
  }

  .hall-podium-card small {
    font-size: .76rem !important;
  }
}


/* v7.0.115 Hall of Fame mobile final polish: #1-first phone podium, stronger champion card and tighter phone spacing. */
@media (max-width: 760px) {
  .hall-header {
    min-height: 102px !important;
    margin-bottom: 6px !important;
    padding: 11px 50px 10px 14px !important;
  }

  .hall-kicker {
    font-size: .58rem !important;
    letter-spacing: .14em !important;
  }

  .hall-header h2 {
    margin: 3px 0 4px !important;
    font-size: clamp(1.82rem, 8.8vw, 2.48rem) !important;
    letter-spacing: .01em !important;
  }

  .hall-title-medal {
    width: 33px !important;
    height: 33px !important;
    min-width: 33px !important;
  }

  .hall-header p {
    font-size: .82rem !important;
    line-height: 1.24 !important;
  }

  .leaderboard-tabs {
    margin-bottom: 7px !important;
    padding: 6px !important;
    gap: 5px !important;
  }

  .leaderboard-tab {
    padding: 7px 10px !important;
    font-size: .7rem !important;
  }

  .hall-current-category {
    margin-bottom: 7px !important;
    padding: 8px 10px !important;
    border-radius: 16px !important;
  }

  .hall-current-category strong {
    font-size: .94rem !important;
  }

  .hall-current-category small {
    font-size: .72rem !important;
  }

  .hall-current-category b {
    padding: 6px 8px !important;
    font-size: .62rem !important;
  }

  .hall-podium-wrap {
    margin-bottom: 6px !important;
    padding: 7px !important;
    border-radius: 19px !important;
  }

  .hall-podium {
    gap: 6px !important;
  }

  .hall-podium-card.place-1 { order: 1 !important; }
  .hall-podium-card.place-2 { order: 2 !important; }
  .hall-podium-card.place-3 { order: 3 !important; }

  .hall-podium-card,
  .hall-podium-card.place-2,
  .hall-podium-card.place-3 {
    min-height: 82px !important;
    grid-template-columns: 32px 54px minmax(0, 1fr) !important;
    gap: 2px 9px !important;
    padding: 8px 10px !important;
    border-radius: 16px !important;
  }

  .hall-podium-card.place-1 {
    min-height: 94px !important;
    grid-template-columns: 38px 62px minmax(0, 1fr) !important;
    padding: 10px 11px !important;
    border-color: rgba(213, 176, 101, .82) !important;
    background:
      radial-gradient(circle at 44% 48%, rgba(213, 176, 101, .25), transparent 42%),
      linear-gradient(90deg, rgba(55, 43, 24, .88), rgba(80, 65, 38, .76), rgba(35, 29, 20, .88)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 231, 171, .16), 0 12px 26px rgba(0,0,0,.26) !important;
  }

  .hall-podium-card .hall-medal,
  .hall-podium-card.place-2 .hall-medal,
  .hall-podium-card.place-3 .hall-medal {
    width: 30px !important;
    height: 30px !important;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.78)) contrast(1.1) brightness(1.08) !important;
  }

  .hall-podium-card.place-1 .hall-medal {
    width: 38px !important;
    height: 38px !important;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,.82)) contrast(1.16) brightness(1.12) !important;
  }

  .hall-podium-card .leaderboard-avatar3d.podium-avatar,
  .hall-podium-card.place-2 .leaderboard-avatar3d.podium-avatar,
  .hall-podium-card.place-3 .leaderboard-avatar3d.podium-avatar,
  .leaderboard-avatar3d.podium-avatar {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    border-radius: 15px !important;
  }

  .hall-podium-card.place-1 .leaderboard-avatar3d.podium-avatar,
  .place-1 .leaderboard-avatar3d.podium-avatar {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    border-radius: 17px !important;
    box-shadow: inset 0 0 0 1px rgba(255,232,178,.22), 0 10px 20px rgba(0,0,0,.28) !important;
  }

  .hall-place-badge {
    padding: 3px 7px !important;
    font-size: .54rem !important;
    letter-spacing: .06em !important;
  }

  .hall-podium-card strong,
  .hall-podium-card.place-2 strong,
  .hall-podium-card.place-3 strong {
    font-size: .94rem !important;
  }

  .hall-podium-card.place-1 strong {
    font-size: 1.06rem !important;
  }

  .hall-podium-card small,
  .hall-podium-card.place-2 small,
  .hall-podium-card.place-3 small {
    font-size: .76rem !important;
  }

  .hall-podium-card.place-1 small {
    font-size: .82rem !important;
  }

  .hall-small-empty {
    margin: 4px 0 6px !important;
    padding: 7px 9px !important;
    min-height: 0 !important;
    border-radius: 14px !important;
  }

  .hall-small-empty strong {
    font-size: .78rem !important;
  }

  .hall-small-empty span {
    display: none !important;
  }

  .hall-my-rank {
    margin-top: 0 !important;
    padding: 8px 10px !important;
    gap: 5px !important;
    border-radius: 16px !important;
  }

  .hall-my-rank > span {
    font-size: .58rem !important;
    letter-spacing: .13em !important;
  }

  .hall-my-rank-main {
    grid-template-columns: auto 40px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .hall-my-rank-main > strong {
    font-size: 1.12rem !important;
  }

  .leaderboard-avatar3d.hall-my-avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 12px !important;
  }

  .hall-my-rank b {
    font-size: .88rem !important;
  }

  .hall-my-rank small {
    font-size: .72rem !important;
  }

  .hall-next-rank {
    padding-top: 5px !important;
    gap: 3px 7px !important;
  }

  .hall-next-rank strong {
    font-size: .76rem !important;
  }

  .hall-next-rank small {
    font-size: .7rem !important;
  }
}

@media (max-width: 430px) {
  .hall-header {
    min-height: 94px !important;
    padding: 9px 48px 9px 12px !important;
  }

  .hall-header h2 {
    font-size: clamp(1.55rem, 8.2vw, 2rem) !important;
  }

  .hall-title-medal {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }

  .hall-header p {
    font-size: .76rem !important;
  }

  .hall-podium-card,
  .hall-podium-card.place-2,
  .hall-podium-card.place-3 {
    min-height: 76px !important;
    grid-template-columns: 28px 48px minmax(0, 1fr) !important;
    padding: 7px 8px !important;
    gap: 2px 8px !important;
  }

  .hall-podium-card.place-1 {
    min-height: 86px !important;
    grid-template-columns: 34px 56px minmax(0, 1fr) !important;
    padding: 8px 9px !important;
  }

  .hall-podium-card .leaderboard-avatar3d.podium-avatar,
  .hall-podium-card.place-2 .leaderboard-avatar3d.podium-avatar,
  .hall-podium-card.place-3 .leaderboard-avatar3d.podium-avatar,
  .leaderboard-avatar3d.podium-avatar {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
  }

  .hall-podium-card.place-1 .leaderboard-avatar3d.podium-avatar,
  .place-1 .leaderboard-avatar3d.podium-avatar {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
  }

  .hall-podium-card .hall-medal,
  .hall-podium-card.place-2 .hall-medal,
  .hall-podium-card.place-3 .hall-medal {
    width: 27px !important;
    height: 27px !important;
  }

  .hall-podium-card.place-1 .hall-medal {
    width: 34px !important;
    height: 34px !important;
  }

  .hall-podium-card strong,
  .hall-podium-card.place-2 strong,
  .hall-podium-card.place-3 strong {
    font-size: .86rem !important;
  }

  .hall-podium-card.place-1 strong {
    font-size: .96rem !important;
  }

  .hall-podium-card small,
  .hall-podium-card.place-2 small,
  .hall-podium-card.place-3 small {
    font-size: .7rem !important;
  }

  .hall-podium-card.place-1 small {
    font-size: .74rem !important;
  }
}

/* v7.0.116 Hall of Fame seasons + rewards: weekly/monthly/all-time tabs and season reward explainer. */
.leaderboard-period-tabs {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin: 10px 0 12px;
  padding: 8px;
  border: 1px solid rgba(198, 161, 103, .24);
  border-radius: 999px;
  background: rgba(20, 15, 10, .46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.leaderboard-period-tab {
  border: 1px solid rgba(198, 161, 103, .28);
  border-radius: 999px;
  padding: 9px 16px;
  color: rgba(232, 220, 200, .78);
  background: rgba(14, 11, 8, .52);
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.leaderboard-period-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(198, 161, 103, .58);
  color: #f5ead7;
}
.leaderboard-period-tab.active {
  color: #1d1409;
  border-color: rgba(232, 196, 126, .95);
  background: linear-gradient(180deg, #e8ca87, #aa7940);
  box-shadow: 0 10px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.38);
}
.hall-season-info {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(280px, 1.08fr);
  gap: 14px;
  margin: 12px 0 14px;
}
.hall-season-info > div,
.hall-reward-card {
  border: 1px solid rgba(198, 161, 103, .24);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(44, 32, 20, .74), rgba(17, 13, 10, .72));
  padding: 14px 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.hall-season-info span,
.hall-reward-card span {
  display: block;
  color: rgba(198, 161, 103, .88);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.hall-season-info strong {
  color: #f4ead7;
  font-size: 1.02rem;
}
.hall-season-info small,
.hall-reward-card small {
  display: block;
  margin-top: 5px;
  color: rgba(232, 220, 200, .72);
  line-height: 1.35;
}
.hall-reward-card > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.hall-reward-card b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(198, 161, 103, .22);
  border-radius: 999px;
  padding: 5px 8px;
  color: #f1e2c8;
  background: rgba(7, 5, 3, .32);
  font-size: .72rem;
  letter-spacing: .03em;
}
.hall-reward-card b span { display: inline; margin: 0; color: #e8c77b; font-size: inherit; letter-spacing: 0; text-transform: none; }
@media (max-width: 720px) {
  .leaderboard-period-tabs {
    justify-content: flex-start;
    overflow-x: auto;
    margin: 7px 0 8px;
    padding: 6px;
    gap: 7px;
    scrollbar-width: none;
  }
  .leaderboard-period-tabs::-webkit-scrollbar { display: none; }
  .leaderboard-period-tab {
    flex: 0 0 auto;
    padding: 7px 12px;
    font-size: .68rem;
  }
  .hall-season-info {
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 8px 0 10px;
  }
  .hall-season-info > div,
  .hall-reward-card {
    padding: 10px 12px;
    border-radius: 15px;
  }
  .hall-reward-card > div { gap: 5px; }
  .hall-reward-card b { padding: 4px 7px; font-size: .66rem; }
  .hall-season-info small,
  .hall-reward-card small { font-size: .72rem; }
}




/* v7.0.120 Hall of Fame overview first: rules/rewards intro and clear rank labels. */
.hall-view-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 6px 0 10px;
  padding: 7px;
  border: 1px solid rgba(198, 161, 103, .24);
  border-radius: 999px;
  background: rgba(12, 9, 6, .56);
}
.hall-view-tab {
  border: 1px solid rgba(198, 161, 103, .28);
  border-radius: 999px;
  padding: 8px 18px;
  color: rgba(232, 220, 200, .78);
  background: rgba(14, 11, 8, .52);
  font-weight: 950;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
}
.hall-view-tab.active {
  color: #1d1409;
  border-color: rgba(232, 196, 126, .95);
  background: linear-gradient(180deg, #e8ca87, #aa7940);
  box-shadow: 0 10px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.38);
}
.hall-dialog.is-overview .leaderboard-tabs,
.hall-dialog.is-overview .leaderboard-period-tabs {
  display: none !important;
}
.hall-overview {
  display: grid;
  gap: 12px;
  padding-bottom: 8px;
}
.hall-overview-hero,
.hall-overview-grid article,
.hall-overview-rewards > div,
.hall-overview-note {
  border: 1px solid rgba(198, 161, 103, .24);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(44, 32, 20, .78), rgba(14, 11, 8, .78));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 34px rgba(0,0,0,.24);
}
.hall-overview-hero {
  min-height: 168px;
  padding: 24px;
  background:
    linear-gradient(90deg, rgba(36, 25, 13, .92), rgba(20, 14, 9, .72)),
    url('/assets/ui/leaderboards/hall-of-fame-header-bg.png') center/cover no-repeat;
}
.hall-overview span,
.hall-overview-grid span,
.hall-overview-rewards span {
  display: block;
  color: rgba(198, 161, 103, .92);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.hall-overview-hero strong {
  display: block;
  max-width: 720px;
  color: #f5ead7;
  font-size: clamp(1.35rem, 3.2vw, 2.25rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}
.hall-overview p,
.hall-overview-note span {
  max-width: 760px;
  color: rgba(232, 220, 200, .78);
  line-height: 1.42;
  margin: 8px 0 0;
}
.hall-overview-cta {
  margin-top: 16px;
  padding-inline: 22px;
}
.hall-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.hall-overview-grid article {
  padding: 15px 16px;
}
.hall-overview-grid strong,
.hall-overview-note strong {
  color: #f5ead7;
  font-size: 1rem;
}
.hall-overview-rewards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.hall-overview-rewards > div,
.hall-overview-note {
  padding: 15px 16px;
}
.hall-overview-rewards p {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.hall-overview-rewards b {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(198, 161, 103, .22);
  border-radius: 999px;
  padding: 5px 8px;
  color: #f1e2c8;
  background: rgba(7, 5, 3, .34);
  font-size: .72rem;
}
.hall-overview-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.hall-overview-note span { margin: 0; }
@media (max-width: 760px) {
  .hall-view-tabs {
    justify-content: flex-start;
    overflow-x: auto;
    margin: 7px 0 8px;
    padding: 6px;
    gap: 7px;
    scrollbar-width: none;
  }
  .hall-view-tabs::-webkit-scrollbar { display: none; }
  .hall-view-tab {
    flex: 0 0 auto;
    padding: 7px 12px;
    font-size: .68rem;
  }
  .hall-overview { gap: 8px; }
  .hall-overview-hero {
    min-height: 0;
    padding: 16px;
    border-radius: 17px;
  }
  .hall-overview-hero strong { font-size: 1.24rem; }
  .hall-overview-cta { width: 100%; margin-top: 12px; }
  .hall-overview-grid,
  .hall-overview-rewards {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .hall-overview-grid article,
  .hall-overview-rewards > div,
  .hall-overview-note {
    padding: 12px;
    border-radius: 16px;
  }
  .hall-overview-note {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  .hall-overview p,
  .hall-overview-note span { font-size: .76rem; }
  .hall-overview-rewards b { font-size: .66rem; padding: 4px 7px; }
}

/* v7.0.117 Hall of Fame PC sticky polish: compact season cards, safer sticky spacing and calmer desktop scroll. */
@media (min-width: 721px) {
  .hall-dialog.leaderboard-dialog {
    width: min(1060px, calc(100vw - 28px));
    max-width: min(1060px, calc(100vw - 28px));
  }

  .hall-of-fame-card {
    padding-bottom: 18px;
  }

  .hall-header {
    min-height: 164px;
    margin-bottom: 12px;
    padding-top: 22px;
    padding-bottom: 20px;
  }

  .leaderboard-tabs {
    margin: 6px 0 10px;
    padding: 7px;
  }

  .leaderboard-period-tabs {
    margin: 6px 0 10px;
    padding: 6px;
  }

  .leaderboard-period-tab {
    padding: 7px 14px;
    font-size: .72rem;
  }

  .hall-leaderboard-list {
    gap: 10px;
    max-height: min(72vh, 770px);
    padding-right: 10px;
    padding-bottom: 8px;
  }

  .hall-current-category {
    padding: 10px 13px;
    border-radius: 16px;
  }

  .hall-current-category strong {
    font-size: .98rem;
  }

  .hall-current-category small {
    font-size: .74rem;
    line-height: 1.22;
  }

  .hall-current-category b {
    padding: 7px 10px;
    font-size: .62rem;
  }

  .hall-season-info {
    gap: 10px;
    margin: 8px 0 10px;
  }

  .hall-season-info > div,
  .hall-reward-card {
    padding: 10px 13px;
    border-radius: 16px;
  }

  .hall-season-info span,
  .hall-reward-card span {
    margin-bottom: 4px;
    font-size: .62rem;
  }

  .hall-season-info strong {
    font-size: .94rem;
  }

  .hall-season-info small,
  .hall-reward-card small {
    margin-top: 4px;
    font-size: .75rem;
    line-height: 1.25;
  }

  .hall-reward-card > div {
    gap: 5px;
    margin-top: 5px;
  }

  .hall-reward-card b {
    padding: 4px 7px;
    font-size: .66rem;
  }

  .hall-podium-wrap {
    min-height: 252px;
    padding: 34px 16px 15px;
    border-radius: 24px;
  }

  .hall-podium-card {
    min-height: 172px;
    padding: 12px 11px;
    border-radius: 21px;
  }

  .hall-podium-card.place-1 {
    min-height: 212px;
  }

  .hall-small-empty {
    min-height: 44px;
    padding: 8px 12px;
    margin: 0;
    border-radius: 16px;
  }

  .hall-small-empty strong {
    font-size: .82rem;
  }

  .hall-small-empty span {
    font-size: .74rem;
  }

  .hall-my-rank {
    bottom: 0;
    gap: 5px;
    padding: 9px 12px;
    border-radius: 18px;
    box-shadow: 0 -8px 24px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,243,214,.06);
  }

  .hall-my-rank > span {
    font-size: .62rem;
  }

  .hall-my-rank-main {
    grid-template-columns: auto 38px minmax(0, 1fr);
    gap: 10px;
  }

  .hall-my-rank-main > strong {
    font-size: 1.22rem;
  }

  .leaderboard-avatar3d.hall-my-avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 12px;
  }

  .hall-my-rank b {
    font-size: .95rem;
  }

  .hall-my-rank small {
    font-size: .72rem;
  }

  .hall-next-rank {
    padding-top: 5px;
  }

  .hall-next-rank strong {
    font-size: .78rem;
  }

  .hall-next-rank small {
    font-size: .72rem;
  }
}

/* v7.0.120 Hall of Fame split overview polish: cleaner rules screen and pure ranking view. */
.hall-dialog.is-rankings .hall-season-info {
  display: none !important;
}

.hall-overview-clean {
  gap: 18px;
  padding: 2px 0 16px;
}

.hall-overview-clean .hall-overview-hero {
  min-height: 190px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding: 30px 32px;
  border-radius: 24px;
  background:
    linear-gradient(90deg, rgba(35, 24, 12, .94), rgba(18, 12, 8, .70) 58%, rgba(16, 11, 7, .48)),
    url('/assets/ui/leaderboards/hall-of-fame-header-bg.png') center/cover no-repeat;
}

.hall-overview-clean .hall-overview-hero > div {
  min-width: 0;
}

.hall-overview-clean .hall-overview-hero strong {
  max-width: 780px;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1.08;
}

.hall-overview-clean .hall-overview-hero p {
  max-width: 790px;
  font-size: .94rem;
  line-height: 1.55;
  margin-top: 12px;
}

.hall-overview-clean .hall-overview-cta {
  flex: 0 0 auto;
  color: #1d1409 !important;
  border: 1px solid rgba(232, 196, 126, .92) !important;
  background: linear-gradient(180deg, #e8ca87, #aa7940) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.34) !important;
}

.hall-overview-section {
  display: grid;
  gap: 10px;
}

.hall-overview-section-title {
  margin: 0 0 -2px !important;
  padding-left: 2px;
  color: rgba(198, 161, 103, .96) !important;
  font-size: .72rem !important;
  font-weight: 950 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

.hall-overview-clean .hall-overview-grid {
  gap: 14px;
}

.hall-overview-clean .hall-overview-grid article,
.hall-overview-clean .hall-overview-rewards > div,
.hall-overview-clean .hall-overview-note {
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(42, 30, 18, .68), rgba(13, 10, 7, .72));
}

.hall-overview-clean .hall-overview-grid article {
  min-height: 154px;
  padding: 20px 22px;
}

.hall-overview-clean .hall-overview-grid strong {
  display: block;
  margin-top: 3px;
  font-size: 1.08rem;
}

.hall-overview-clean .hall-overview-grid p {
  font-size: .9rem;
  line-height: 1.52;
  margin-top: 12px;
}

.hall-overview-clean .hall-overview-rewards {
  gap: 14px;
}

.hall-overview-clean .hall-overview-rewards > div {
  min-height: 116px;
  padding: 20px 22px;
}

.hall-overview-clean .hall-overview-rewards p {
  gap: 8px;
  margin-top: 10px;
}

.hall-overview-clean .hall-overview-rewards b {
  padding: 6px 10px;
  font-size: .74rem;
  background: rgba(7, 5, 3, .42);
}

.hall-overview-clean .hall-overview-note {
  padding: 18px 22px;
  align-items: center;
  background: linear-gradient(90deg, rgba(54, 37, 18, .72), rgba(17, 12, 8, .72));
}

.hall-overview-clean .hall-overview-note strong {
  flex: 0 0 auto;
  font-size: 1rem;
}

.hall-overview-clean .hall-overview-note span {
  max-width: 740px;
  line-height: 1.45;
}

.hall-dialog.is-rankings .hall-current-category {
  margin-top: 0;
}

.hall-dialog.is-rankings .hall-podium-wrap {
  margin-top: 12px;
}

@media (max-width: 760px) {
  .hall-overview-clean {
    gap: 11px;
    padding-bottom: 12px;
  }

  .hall-overview-clean .hall-overview-hero {
    min-height: 0;
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 18px;
  }

  .hall-overview-clean .hall-overview-hero strong {
    font-size: 1.28rem;
    line-height: 1.12;
  }

  .hall-overview-clean .hall-overview-hero p,
  .hall-overview-clean .hall-overview-grid p {
    font-size: .8rem;
    line-height: 1.45;
  }

  .hall-overview-clean .hall-overview-cta {
    width: 100%;
    margin-top: 0;
  }

  .hall-overview-section {
    gap: 8px;
  }

  .hall-overview-clean .hall-overview-grid article,
  .hall-overview-clean .hall-overview-rewards > div,
  .hall-overview-clean .hall-overview-note {
    min-height: 0;
    padding: 13px;
    border-radius: 16px;
  }

  .hall-overview-clean .hall-overview-grid strong {
    font-size: .95rem;
  }

  .hall-overview-clean .hall-overview-rewards p {
    gap: 6px;
  }

  .hall-overview-clean .hall-overview-note {
    align-items: flex-start;
  }
}


/* v7.0.120 Hall of Fame overview final polish: cleaner copy, compact rewards and final season explanation. */
.hall-overview-clean {
  gap: 20px;
  padding-bottom: 18px;
}

.hall-overview-clean .hall-overview-hero {
  min-height: 176px;
  padding: 28px 32px;
  align-items: center;
}

.hall-overview-clean .hall-overview-hero strong {
  max-width: 680px;
  font-size: clamp(1.55rem, 2.55vw, 2.12rem);
  letter-spacing: -.025em;
}

.hall-overview-clean .hall-overview-hero p {
  max-width: 720px;
  margin-top: 10px;
}

.hall-overview-clean .hall-overview-grid {
  gap: 16px;
}

.hall-overview-clean .hall-overview-grid article {
  min-height: 138px;
  padding: 19px 21px;
}

.hall-overview-clean .hall-overview-grid strong {
  font-size: 1.02rem;
}

.hall-overview-clean .hall-overview-grid p {
  margin-top: 10px;
}

.hall-overview-clean .hall-overview-rewards {
  gap: 16px;
}

.hall-overview-clean .hall-overview-rewards > div {
  min-height: 104px;
  padding: 18px 20px;
}

.hall-overview-clean .hall-overview-rewards p {
  gap: 7px;
  margin-top: 9px;
}

.hall-overview-clean .hall-overview-rewards b {
  padding: 5px 9px;
  font-size: .71rem;
}

.hall-overview-clean .hall-overview-note {
  padding: 15px 20px;
  gap: 16px;
}

.hall-overview-clean .hall-overview-note strong {
  font-size: .95rem;
}

.hall-overview-clean .hall-overview-note span {
  font-size: .78rem;
  line-height: 1.38;
}

@media (max-width: 760px) {
  .hall-overview-clean {
    gap: 10px;
    padding-bottom: 10px;
  }

  .hall-overview-clean .hall-overview-hero {
    padding: 16px;
    gap: 12px;
  }

  .hall-overview-clean .hall-overview-hero strong {
    font-size: 1.18rem;
    line-height: 1.14;
  }

  .hall-overview-clean .hall-overview-hero p {
    font-size: .78rem;
    line-height: 1.42;
    margin-top: 8px;
  }

  .hall-overview-section-title {
    font-size: .66rem !important;
    letter-spacing: .14em !important;
  }

  .hall-overview-clean .hall-overview-grid article,
  .hall-overview-clean .hall-overview-rewards > div,
  .hall-overview-clean .hall-overview-note {
    padding: 12px;
  }

  .hall-overview-clean .hall-overview-grid strong {
    font-size: .9rem;
  }

  .hall-overview-clean .hall-overview-grid p {
    margin-top: 7px;
  }

  .hall-overview-clean .hall-overview-rewards p {
    gap: 5px;
    margin-top: 8px;
  }

  .hall-overview-clean .hall-overview-rewards b {
    padding: 4px 7px;
    font-size: .64rem;
  }

  .hall-overview-clean .hall-overview-note {
    display: grid;
    gap: 6px;
  }

  .hall-overview-clean .hall-overview-note strong {
    font-size: .86rem;
  }

  .hall-overview-clean .hall-overview-note span {
    font-size: .68rem;
    line-height: 1.35;
  }
}

/* v7.0.121 Daily Missions foundation: mission dialog, claim cards and weekly chest. */
.missions-dialog {
  width: min(980px, calc(100vw - 28px));
  border: 1px solid rgba(198, 161, 103, .42);
  border-radius: 26px;
  padding: 0;
  color: #f3eadb;
  background: rgba(12, 10, 7, .94);
  box-shadow: 0 32px 120px rgba(0, 0, 0, .58);
}

.missions-dialog::backdrop {
  background: rgba(0, 0, 0, .58);
  backdrop-filter: blur(5px);
}

.missions-dialog-card {
  margin: 0;
  padding: 0;
  border: 0;
  background:
    linear-gradient(180deg, rgba(60, 42, 22, .45), rgba(8, 7, 5, .92) 38%),
    var(--rq-menu-bg, none),
    #100d09;
  background-size: cover, cover, auto;
  background-position: center, center, center;
  border-radius: 26px;
  overflow: hidden;
}

.missions-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 26px 30px 22px;
  border-bottom: 1px solid rgba(198, 161, 103, .26);
  background: linear-gradient(90deg, rgba(28, 20, 12, .92), rgba(28, 20, 12, .46));
}

.missions-header span,
.missions-overview-panel span,
.mission-card-copy span,
.weekly-chest-copy span {
  display: block;
  color: #c6a167;
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.missions-header h2 {
  margin: 7px 0 8px;
  font-size: clamp(1.8rem, 4vw, 3.1rem);
  line-height: .95;
  letter-spacing: -.045em;
}

.missions-header p {
  max-width: 620px;
  margin: 0;
  color: rgba(232, 220, 200, .82);
  font-weight: 750;
}

.missions-status {
  margin: 18px 24px 0;
  padding: 12px 16px;
  border: 1px solid rgba(198, 161, 103, .24);
  border-radius: 16px;
  background: rgba(16, 13, 9, .74);
  color: rgba(232, 220, 200, .82);
  font-size: .84rem;
  font-weight: 850;
}

.missions-body {
  display: grid;
  gap: 14px;
  padding: 18px 24px 24px;
}

.missions-overview-panel,
.weekly-chest-card,
.mission-card {
  border: 1px solid rgba(198, 161, 103, .28);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(31, 25, 17, .92), rgba(9, 8, 6, .84));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.missions-overview-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
}

.missions-overview-panel strong,
.weekly-chest-copy strong,
.mission-card-copy strong {
  display: block;
  margin-top: 6px;
  color: #fff6df;
  font-size: 1.08rem;
  font-weight: 950;
}

.missions-overview-panel p,
.weekly-chest-copy p,
.mission-card-copy p {
  margin: 6px 0 0;
  color: rgba(232, 220, 200, .74);
  line-height: 1.42;
  font-size: .86rem;
  font-weight: 700;
}

.missions-balance-pill {
  min-width: 150px;
  border: 1px solid rgba(198, 161, 103, .28);
  border-radius: 16px;
  padding: 10px 13px;
  text-align: right;
  background: rgba(6, 5, 4, .62);
}

.missions-balance-pill span {
  display: block;
  color: rgba(232, 220, 200, .62);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.missions-balance-pill strong {
  display: block;
  margin-top: 4px;
  color: #f3d28a;
  font-size: 1.05rem;
}

.missions-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.mission-card {
  min-height: 220px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}

.mission-card.can-claim,
.weekly-chest-card.can-claim {
  border-color: rgba(243, 210, 138, .72);
  background: linear-gradient(135deg, rgba(73, 55, 25, .95), rgba(13, 10, 6, .88));
}

.mission-card.is-claimed,
.weekly-chest-card.is-claimed {
  opacity: .78;
}

.mission-progress-block {
  display: grid;
  gap: 8px;
}

.mission-progress-text {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: rgba(232, 220, 200, .78);
  font-size: .78rem;
  font-weight: 900;
}

.mission-progress-text b { color: #f3d28a; }

.mission-progress-bar {
  height: 9px;
  border: 1px solid rgba(198, 161, 103, .24);
  border-radius: 999px;
  background: rgba(0,0,0,.36);
  overflow: hidden;
}

.mission-progress-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8f6c3f, #f3d28a);
  box-shadow: 0 0 18px rgba(198, 161, 103, .22);
}

.mission-claim-btn {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: .76rem;
}

.weekly-chest-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 18px;
  align-items: center;
  padding: 18px;
}

@media (max-width: 820px) {
  .missions-dialog {
    width: min(680px, calc(100vw - 10px));
    max-height: calc(100dvh - 10px);
  }

  .missions-header {
    padding: 16px;
    align-items: flex-start;
  }

  .missions-header h2 { font-size: 1.55rem; }
  .missions-header p { font-size: .78rem; }
  .missions-close-btn { width: 38px; height: 38px; min-width: 38px; }

  .missions-status {
    margin: 12px 12px 0;
    padding: 10px 12px;
    font-size: .76rem;
  }

  .missions-body {
    padding: 12px;
    gap: 10px;
  }

  .missions-overview-panel,
  .weekly-chest-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }

  .missions-balance-pill {
    text-align: left;
    min-width: 0;
  }

  .missions-list {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .mission-card {
    min-height: 0;
    padding: 12px;
    gap: 12px;
  }

  .missions-overview-panel strong,
  .weekly-chest-copy strong,
  .mission-card-copy strong {
    font-size: .95rem;
  }

  .missions-overview-panel p,
  .weekly-chest-copy p,
  .mission-card-copy p {
    font-size: .76rem;
  }
}


/* v7.0.123 Missions rotation polish: larger daily contract pool and improved header background framing. */
.missions-dialog {
  width: min(1040px, calc(100vw - 28px));
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}

.missions-dialog-card {
  max-height: calc(100dvh - 24px);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(198, 161, 103, .72) rgba(8, 7, 5, .65);
  background:
    linear-gradient(180deg, rgba(20, 14, 8, .20), rgba(8, 7, 5, .96) 44%),
    var(--rq-menu-bg, none),
    #100d09;
}

.missions-dialog-card::-webkit-scrollbar { width: 10px; }
.missions-dialog-card::-webkit-scrollbar-track { background: rgba(8, 7, 5, .68); }
.missions-dialog-card::-webkit-scrollbar-thumb {
  border: 2px solid rgba(8, 7, 5, .68);
  border-radius: 999px;
  background: linear-gradient(180deg, #c6a167, #6d4f2c);
}

.missions-header {
  min-height: 224px;
  align-items: flex-start;
  padding: 30px 34px 28px;
  background:
    linear-gradient(90deg, rgba(20, 14, 8, .94), rgba(29, 20, 11, .58) 58%, rgba(13, 10, 7, .42)),
    url("/assets/ui/missions/mission-board-header-bg.png");
  background-size: cover;
  background-position: center;
}

.missions-header > div {
  max-width: 720px;
}

.missions-header span,
.missions-overview-panel span,
.mission-card-copy span,
.weekly-chest-copy span {
  color: #d8b878;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
}

.missions-header h2 {
  margin-top: 9px;
  font-size: clamp(2.35rem, 5vw, 4.25rem);
  text-shadow: 0 14px 42px rgba(0,0,0,.52);
}

.missions-header p {
  max-width: 690px;
  color: rgba(255, 246, 223, .86);
  font-size: 1rem;
}

.missions-status {
  margin-top: 16px;
  border-color: rgba(198, 161, 103, .20);
  background: rgba(7, 6, 4, .72);
}

.missions-overview-polished {
  position: relative;
  overflow: hidden;
  padding: 18px 20px;
  background:
    radial-gradient(circle at 88% 36%, rgba(198, 161, 103, .16), transparent 34%),
    linear-gradient(135deg, rgba(38, 29, 18, .96), rgba(10, 8, 6, .9));
}

.missions-overview-polished::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.04), transparent 38%);
}

.missions-balance-pill {
  position: relative;
  background:
    linear-gradient(135deg, rgba(23, 18, 12, .86), rgba(6, 5, 4, .72));
}

.missions-list-polished {
  gap: 14px;
}

.mission-card-polished {
  min-height: 248px;
  padding: 16px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 82% 16%, rgba(198, 161, 103, .13), transparent 28%),
    linear-gradient(145deg, rgba(32, 26, 18, .96), rgba(8, 7, 5, .9));
}

.mission-card-polished::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background:
    linear-gradient(135deg, transparent 0 48%, rgba(198, 161, 103, .16) 49%, transparent 51%),
    radial-gradient(circle at 10% 90%, rgba(198, 161, 103, .16), transparent 26%);
}

.mission-card-polished.can-claim {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 0 1px rgba(243, 210, 138, .22),
    0 18px 45px rgba(198, 161, 103, .12);
}

.mission-card-topline {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.mission-icon-frame {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(198, 161, 103, .32);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 42%, rgba(243, 210, 138, .20), transparent 62%),
    rgba(4, 4, 3, .46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.mission-icon-frame img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.38));
}

.mission-visual-xp .mission-icon-frame img { width: 40px; height: 40px; }
.mission-visual-score .mission-icon-frame img { width: 48px; height: 48px; }

.mission-state-pill {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 2px;
  padding: 5px 9px;
  border: 1px solid rgba(198, 161, 103, .24);
  border-radius: 999px;
  color: rgba(232, 220, 200, .74);
  background: rgba(5, 4, 3, .54);
  font-size: .64rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mission-state-pill.can-claim {
  color: #130f08;
  border-color: rgba(243, 210, 138, .82);
  background: linear-gradient(180deg, #f0d28b, #a77d3f);
}

.mission-state-pill.is-claimed {
  color: rgba(232, 220, 200, .58);
}

.mission-card-polished .mission-progress-block {
  position: relative;
  z-index: 1;
}

.mission-card-footer {
  display: grid;
  gap: 8px;
}

.mission-reward-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid rgba(198, 161, 103, .22);
  border-radius: 999px;
  color: #f3d28a;
  background: rgba(6, 5, 4, .42);
  font-size: .74rem;
  font-weight: 950;
}

.mission-reward-chip img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.mission-card-polished.can-claim .mission-claim-btn,
.weekly-chest-polished.can-claim .mission-claim-btn {
  color: #161008;
  border-color: rgba(243, 210, 138, .82);
  background: linear-gradient(180deg, #f0d28b, #a77d3f);
  box-shadow: 0 10px 28px rgba(198, 161, 103, .18);
}

.weekly-chest-polished {
  grid-template-columns: 112px minmax(0, 1fr) minmax(260px, 340px);
  min-height: 150px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 9% 48%, rgba(243, 210, 138, .20), transparent 22%),
    linear-gradient(135deg, rgba(47, 35, 19, .98), rgba(9, 7, 5, .92));
}

.weekly-chest-polished::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background: url("/assets/ui/missions/mission-board-header-bg.png") center / cover;
  mix-blend-mode: screen;
}

.weekly-chest-art,
.weekly-chest-copy,
.weekly-chest-progress {
  position: relative;
  z-index: 1;
}

.weekly-chest-art {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border: 1px solid rgba(198, 161, 103, .28);
  border-radius: 24px;
  background: rgba(5, 4, 3, .42);
}

.weekly-chest-art img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.42));
}

.weekly-chest-polished.can-claim .weekly-chest-art {
  border-color: rgba(243, 210, 138, .72);
  box-shadow: 0 0 34px rgba(198, 161, 103, .18);
}

@media (max-width: 820px) {
  .missions-dialog {
    width: min(680px, calc(100vw - 8px));
    max-height: calc(100dvh - 8px);
  }

  .missions-dialog-card {
    max-height: calc(100dvh - 8px);
  }

  .missions-header {
    min-height: 156px;
    padding: 18px 16px 16px;
    background-position: center;
  }

  .missions-header h2 {
    font-size: clamp(1.9rem, 8vw, 2.55rem);
  }

  .missions-header p {
    max-width: 520px;
    font-size: .82rem;
  }

  .missions-status {
    margin: 10px 10px 0;
  }

  .missions-body {
    padding: 10px;
  }

  .mission-card-polished {
    min-height: 0;
    padding: 12px;
  }

  .mission-card-topline {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
  }

  .mission-icon-frame {
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }

  .mission-icon-frame img {
    width: 38px;
    height: 38px;
  }

  .mission-card-footer {
    grid-template-columns: 1fr;
  }

  .weekly-chest-polished {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }

  .weekly-chest-art {
    width: 64px;
    height: 64px;
    border-radius: 18px;
  }

  .weekly-chest-art img {
    width: 60px;
    height: 60px;
  }

  .weekly-chest-progress {
    grid-column: 1 / -1;
  }
}


/* v7.0.123 Missions rotation polish: show the Mission Board header art higher and clearer. */
.missions-header {
  background:
    linear-gradient(90deg, rgba(20, 14, 8, .86), rgba(29, 20, 11, .38) 58%, rgba(13, 10, 7, .20)),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.35)),
    url("/assets/ui/missions/mission-board-header-bg.png") !important;
  background-size: cover, cover, cover !important;
  background-position: center, center, center 22% !important;
}

.missions-header h2,
.missions-header p,
.missions-header span {
  position: relative;
  z-index: 1;
}

.missions-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(7, 6, 4, .44));
}

.missions-header {
  position: relative;
}

@media (max-width: 820px) {
  .missions-header {
    background-position: center, center, center 18% !important;
  }
}


/* v7.0.126 Main Menu rollback: restored stable character-focused main menu; dashboard experiment removed. */


/* v7.0.127 Main Menu Logo: replace text lockup with illustrated logo asset in the main menu */
.main-brand-lockup {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: min(1120px, 100%);
  max-width: min(1120px, 100%) !important;
  margin: 2px auto 2px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.main-brand-logo {
  display: block;
  width: min(100%, 1080px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 38px rgba(0, 0, 0, .42));
}

@media (max-width: 760px) {
  .main-brand-lockup {
    width: min(100%, 700px) !important;
    padding: 0 !important;
  }

  .main-brand-logo {
    width: min(100%, 640px);
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 560px) {
  .main-brand-lockup {
    width: min(420px, 44vw) !important;
    justify-self: start;
    padding: 0 !important;
  }

  .main-brand-logo {
    width: 100%;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .34));
  }
}

@media (min-width: 921px) {
  .main-brand-lockup {
    width: min(980px, 100%) !important;
    max-width: min(980px, 100%) !important;
  }

  .main-brand-logo {
    width: min(980px, 100%);
  }
}


/* v7.0.128 Main Menu Logo Top Badge: keep the same logo asset, but present it as a compact badge above the menu. */
.main-brand-lockup {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: fit-content !important;
  max-width: min(820px, calc(100% - 16px)) !important;
  margin: 4px auto 2px !important;
  padding: 10px 16px !important;
  border: 1px solid rgba(214, 170, 103, .22) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 50% -10%, rgba(74, 222, 128, .06), transparent 42%),
    linear-gradient(180deg, rgba(49, 32, 18, .18), rgba(9, 12, 18, .08)),
    rgba(7, 10, 15, .22) !important;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
  backdrop-filter: blur(8px) saturate(1.02) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.02) !important;
}

.main-brand-logo {
  display: block;
  width: min(100%, 720px) !important;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .28)) !important;
}

@media (max-width: 760px) {
  .main-brand-lockup {
    max-width: min(96vw, 560px) !important;
    padding: 8px 12px !important;
    border-radius: 24px !important;
  }

  .main-brand-logo {
    width: min(100%, 500px) !important;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 560px) {
  .main-brand-lockup {
    width: fit-content !important;
    max-width: min(360px, 42vw) !important;
    justify-self: start;
    margin: 0 0 2px !important;
    padding: 6px 10px !important;
    border-radius: 20px !important;
  }

  .main-brand-logo {
    width: 100% !important;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .24)) !important;
  }
}

@media (min-width: 921px) {
  .main-brand-lockup {
    max-width: min(780px, calc(100% - 12px)) !important;
  }

  .main-brand-logo {
    width: min(100%, 700px) !important;
  }
}


/* v7.0.129 Main Menu Control Desk Polish: visual-only card/button polish, no gameplay or layout logic changes. */
.start-card.start-card-v12 {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(218, 176, 104, .34) !important;
  background:
    radial-gradient(circle at 18% -12%, rgba(35, 137, 128, .18), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(210, 151, 72, .13), transparent 36%),
    linear-gradient(180deg, rgba(61, 41, 23, .18), rgba(10, 14, 21, .08) 34%, rgba(6, 10, 16, .18)),
    linear-gradient(145deg, rgba(11, 19, 26, .84), rgba(18, 24, 31, .70)) !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, .38),
    0 0 0 1px rgba(246, 210, 143, .055),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -18px 42px rgba(0,0,0,.16) !important;
}

.start-card.start-card-v12::before {
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  border: 1px solid rgba(226, 184, 111, .15);
  border-radius: inherit;
  opacity: .95;
}

.start-card.start-card-v12::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 12px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(244, 202, 126, .34), rgba(45, 212, 191, .16), rgba(244, 202, 126, .34), transparent);
}

.start-card.start-card-v12 > * {
  position: relative;
  z-index: 1;
}

.start-card-v12 .mode-copy,
.start-card-v12 .account-lockup,
.start-card-v12 .nickname-field,
.start-card-v12 .mode-info,
.start-card-v12 .avatar-picker,
.start-card-v12 .account-stats {
  border-color: rgba(218, 176, 104, .20) !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(45, 212, 191, .08), transparent 34%),
    linear-gradient(180deg, rgba(45, 31, 19, .24), rgba(7, 12, 18, .30)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 10px 24px rgba(0,0,0,.14) !important;
}

.start-card-v12 .mode-copy strong,
.start-card-v12 .account-lockup strong,
.start-card-v12 .mode-info strong {
  color: rgba(255, 240, 202, .96) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.22);
}

.start-card-v12 .mode-copy span,
.start-card-v12 .account-lockup span,
.start-card-v12 .account-lockup small,
.start-card-v12 .mode-info span,
.start-card-v12 .mode-info small,
.start-card-v12 .nickname-field span {
  color: rgba(222, 208, 178, .78) !important;
}

.start-card-v12 .mode-field select,
.start-card-v12 .nickname-field select {
  border-color: rgba(218, 176, 104, .24) !important;
  background:
    linear-gradient(180deg, rgba(31, 23, 16, .80), rgba(7, 12, 18, .76)) !important;
  color: rgba(255, 244, 214, .94) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.16) !important;
}

.start-card-v12 .mode-field select:focus,
.start-card-v12 .nickname-field select:focus {
  border-color: rgba(244, 190, 94, .52) !important;
  box-shadow:
    0 0 0 3px rgba(244, 190, 94, .11),
    0 14px 30px rgba(0,0,0,.20) !important;
}

.account-actions .primary-btn,
.start-card-v12 .account-actions .primary-btn {
  border: 1px solid rgba(255, 222, 143, .52) !important;
  color: #1b1208 !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.34), transparent 36%),
    linear-gradient(180deg, #ffe6a2, #d99a3f 54%, #a96a24) !important;
  box-shadow:
    0 18px 42px rgba(214, 143, 48, .30),
    0 0 0 1px rgba(255, 242, 190, .09),
    inset 0 1px 0 rgba(255,255,255,.50),
    inset 0 -3px 0 rgba(91, 52, 15, .22) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.30) !important;
}

.account-actions .primary-btn:hover:not(:disabled),
.start-card-v12 .account-actions .primary-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.04) saturate(1.04);
  box-shadow:
    0 22px 52px rgba(214, 143, 48, .36),
    0 0 0 1px rgba(255, 242, 190, .12),
    inset 0 1px 0 rgba(255,255,255,.56),
    inset 0 -3px 0 rgba(91, 52, 15, .20) !important;
}

.account-actions .secondary-btn,
.start-card-v12 .account-actions .secondary-btn,
.start-card-v12 .logout-btn {
  border: 1px solid rgba(205, 161, 91, .28) !important;
  color: rgba(245, 229, 194, .90) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(45, 212, 191, .08), transparent 38%),
    linear-gradient(180deg, rgba(45, 31, 19, .58), rgba(8, 14, 20, .66)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 10px 24px rgba(0,0,0,.14) !important;
}

.account-actions .secondary-btn:hover:not(:disabled),
.start-card-v12 .account-actions .secondary-btn:hover:not(:disabled),
.start-card-v12 .logout-btn:hover:not(:disabled) {
  border-color: rgba(237, 190, 107, .44) !important;
  color: rgba(255, 240, 205, .98) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(45, 212, 191, .12), transparent 38%),
    linear-gradient(180deg, rgba(65, 44, 24, .66), rgba(10, 18, 25, .72)) !important;
  transform: translateY(-1px);
}

.start-card-v12 .mode-copy strong::before {
  filter: drop-shadow(0 4px 9px rgba(244, 190, 94, .20)) !important;
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 620px) {
  body.rq-phone-menu-landscape .start-card.start-card-v12::before,
  body.rq-phone-menu-landscape .start-card.start-card-v12::after {
    opacity: .55;
  }

  body.rq-phone-menu-landscape .start-card.start-card-v12 {
    box-shadow:
      0 14px 34px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.07) !important;
  }
}


/* v7.0.130 Profile Avatar Passport Polish: visual-only polish for the equipped avatar and profile stats area. */
.home-profile-card.home-profile-card-3d {
  position: relative;
  gap: 16px !important;
  padding: 16px !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(216, 176, 106, .16), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(33, 75, 114, .08), transparent 32%),
    linear-gradient(145deg, rgba(27, 21, 16, .92), rgba(49, 36, 26, .82)) !important;
  border: 1px solid rgba(214, 180, 129, .22) !important;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 0 1px rgba(93, 66, 41, .16) !important;
  overflow: hidden;
}

.home-profile-card.home-profile-card-3d::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 18%),
    radial-gradient(circle at 14% 8%, rgba(255, 220, 158, .10), transparent 22%);
}

.home-profile-card.home-profile-card-3d > * {
  position: relative;
  z-index: 1;
}

.home-avatar3d {
  position: relative;
  padding: 18px 14px 12px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(76, 55, 37, .28), rgba(18, 14, 11, .18)),
    rgba(11, 10, 9, .14);
  border: 1px solid rgba(214, 180, 129, .18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 0 0 1px rgba(95,68,43,.12);
}

.home-avatar3d::before {
  content: 'Equipped Avatar';
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(16, 13, 10, .74);
  border: 1px solid rgba(223, 198, 160, .22);
  color: rgba(247, 238, 221, .92);
  font-size: .62rem;
  font-weight: 1000;
  letter-spacing: .10em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.home-avatar3d .avatar3d-view {
  position: relative;
  min-height: 318px !important;
  border-radius: 20px !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(227, 196, 140, .16), transparent 28%),
    radial-gradient(circle at 50% 78%, rgba(17, 26, 50, .36), transparent 22%),
    linear-gradient(180deg, rgba(56, 42, 31, .80), rgba(17, 13, 11, .94)) !important;
  border: 1px solid rgba(223, 198, 160, .16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -28px 48px rgba(0,0,0,.20),
    0 14px 34px rgba(0,0,0,.18) !important;
}

.home-avatar3d .avatar3d-view::after {
  display: block !important;
  left: 10% !important;
  right: 10% !important;
  bottom: 8% !important;
  height: 18% !important;
  background:
    radial-gradient(ellipse, rgba(6, 12, 24, .84), transparent 66%),
    radial-gradient(ellipse at center, rgba(216, 176, 106, .14), transparent 52%) !important;
  opacity: .96;
}

.home-profile-main {
  align-self: start;
  padding-top: 4px;
}

.home-profile-main strong {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px !important;
  color: rgba(255, 245, 228, .96);
  font-size: clamp(1.55rem, 1.7vw, 1.9rem);
  line-height: 1;
  letter-spacing: -.03em;
  text-shadow: 0 6px 18px rgba(0,0,0,.22);
}

.home-profile-main strong::before {
  width: 24px !important;
  height: 24px !important;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.22));
}

.equipped-character-name {
  margin: 0 0 10px !important;
  padding: 7px 12px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(79, 60, 42, .48), rgba(30, 23, 18, .58)) !important;
  border: 1px solid rgba(223, 198, 160, .18) !important;
  color: rgba(247, 238, 221, .92) !important;
  font-size: .76rem !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 18px rgba(0,0,0,.14);
}

.xp-track {
  height: 12px !important;
  background: linear-gradient(180deg, rgba(18, 15, 13, .82), rgba(39, 29, 22, .76)) !important;
  border: 1px solid rgba(223, 198, 160, .14) !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.22);
}

.xp-fill {
  background: linear-gradient(90deg, #8d6a40, #d4af68 58%, #f0d18d) !important;
  box-shadow: 0 0 18px rgba(216, 176, 106, .18), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.xp-meta {
  margin-top: 7px !important;
  align-items: center;
}

.xp-meta span {
  color: rgba(243, 232, 213, .70) !important;
  font-size: .74rem;
  letter-spacing: .02em;
}

.xp-meta strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 236, 184, .98) !important;
  font-size: 1.02rem;
}

.xp-meta strong::before {
  content: '';
  width: 16px;
  height: 16px;
  background: url('/assets/ui/icons/xp-star.png') center / contain no-repeat;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.18));
}

.home-profile-mini {
  margin-top: 14px !important;
  gap: 10px !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.home-stat-card {
  position: relative;
  min-height: 64px;
  padding: 12px 12px 12px 42px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(66, 49, 35, .30), rgba(30, 23, 17, .58)),
    rgba(12, 11, 9, .12) !important;
  border: 1px solid rgba(214, 180, 129, .16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 22px rgba(0,0,0,.12);
}

.home-stat-card label {
  color: rgba(243, 232, 213, .62) !important;
  font-size: .60rem !important;
  font-weight: 1000;
  letter-spacing: .11em !important;
  text-transform: uppercase;
}

.home-stat-card strong {
  color: rgba(255, 245, 228, .96) !important;
  font-size: 1.02rem !important;
  line-height: 1.05;
}

.home-stat-icon,
.home-stat-card.stat-best::before,
.home-stat-card.stat-rank::before,
.home-stat-card.stat-games::before {
  position: absolute !important;
  left: 12px !important;
  top: 14px !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
}

.home-stat-card.stat-best::after,
.home-stat-card.stat-rank::after,
.home-stat-card.stat-games::after {
  left: 16px !important;
  top: 16px !important;
}

.home-profile-card .mode-bests {
  margin-top: 6px !important;
  padding: 9px 10px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(66, 49, 35, .24), rgba(29, 22, 17, .52)) !important;
  border: 1px solid rgba(214, 180, 129, .14) !important;
}

.home-profile-card .mode-bests-grid {
  gap: 7px !important;
}

.home-profile-card .mode-bests-grid > div {
  border-radius: 12px;
  background: rgba(8, 9, 12, .22);
  border: 1px solid rgba(214, 180, 129, .10);
}

@media (max-width: 760px) {
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-profile-card.home-profile-card-3d {
    padding: 12px !important;
    border-radius: 20px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-avatar3d {
    padding: 14px 10px 10px !important;
    border-radius: 18px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-avatar3d::before {
    top: 8px;
    left: 10px;
    font-size: .56rem;
    min-height: 20px;
    padding: 0 8px;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-avatar3d .avatar3d-view {
    min-height: 212px !important;
    border-radius: 16px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-profile-main strong {
    font-size: 1.28rem !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .equipped-character-name {
    font-size: .68rem !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-profile-mini {
    gap: 8px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-stat-card {
    padding: 10px 10px 10px 38px !important;
    min-height: 58px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-stat-card label {
    font-size: .56rem !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-stat-card strong {
    font-size: .92rem !important;
  }
}


/* v7.0.131 Profile Avatar Passport Rework: improve the profile layout with cleaner stats and a better equipped-avatar presentation. */
.home-profile-card.home-profile-card-3d {
  grid-template-columns: minmax(230px, 290px) minmax(0, 1fr) !important;
  grid-template-areas:
    'avatar main'
    'avatar stats'
    'bests bests' !important;
  align-items: start !important;
  gap: 14px 16px !important;
}

.home-avatar3d {
  grid-area: avatar !important;
  align-self: stretch;
}

.home-profile-main {
  grid-area: main !important;
  align-self: start;
  padding: 14px 15px 13px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(216, 176, 106, .10), transparent 34%),
    linear-gradient(180deg, rgba(63, 47, 34, .24), rgba(25, 19, 15, .56)) !important;
  border: 1px solid rgba(214, 180, 129, .14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.home-avatar3d .avatar3d-view {
  min-height: 286px !important;
}

.home-profile-main strong {
  margin-bottom: 10px !important;
  font-size: clamp(1.5rem, 1.55vw, 1.82rem) !important;
}

.equipped-character-name {
  margin-bottom: 12px !important;
}

.home-profile-mini {
  grid-area: stats !important;
  margin-top: 0 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.home-stat-card {
  min-height: 72px !important;
  padding: 12px 12px 12px 44px !important;
  border-radius: 18px !important;
}

.home-stat-card:nth-child(5) {
  grid-column: 1 / -1;
}

.home-stat-card label,
.home-stat-card strong {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.home-stat-card label {
  font-size: .66rem !important;
  letter-spacing: .09em !important;
}

.home-stat-card strong {
  font-size: 1.12rem !important;
}

.home-stat-icon,
.home-stat-card.stat-best::before,
.home-stat-card.stat-rank::before,
.home-stat-card.stat-games::before {
  left: 14px !important;
  top: 15px !important;
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
}

.home-stat-card.stat-best::after,
.home-stat-card.stat-rank::after,
.home-stat-card.stat-games::after {
  left: 18px !important;
  top: 17px !important;
}

.home-profile-card .mode-bests {
  grid-area: bests !important;
  margin-top: 2px !important;
}

@media (max-width: 980px) {
  .home-profile-card.home-profile-card-3d {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      'avatar'
      'main'
      'stats'
      'bests' !important;
  }

  .home-avatar3d .avatar3d-view {
    min-height: 236px !important;
  }

  .home-profile-mini {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-profile-main {
    padding: 12px !important;
    border-radius: 18px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-profile-mini {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-stat-card:nth-child(5) {
    grid-column: auto;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-stat-card {
    min-height: 60px !important;
    padding: 10px 10px 10px 38px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-stat-card label {
    font-size: .58rem !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-stat-card strong {
    font-size: .96rem !important;
  }
}


/* v7.0.132 Profile Avatar Passport Tuning: tighter avatar width, roomier stats and cleaner desktop balance. */
.home-profile-card.home-profile-card-3d {
  grid-template-columns: minmax(200px, 252px) minmax(0, 1fr) !important;
  gap: 12px 14px !important;
}

.home-avatar3d {
  padding: 16px 12px 10px !important;
}

.home-avatar3d .avatar3d-view {
  min-height: 252px !important;
}

.home-profile-main {
  padding: 12px 13px 11px !important;
  border-radius: 20px !important;
}

.home-profile-main strong {
  font-size: clamp(1.34rem, 1.42vw, 1.66rem) !important;
  margin-bottom: 8px !important;
}

.equipped-character-name {
  margin-bottom: 10px !important;
  padding: 6px 10px !important;
  font-size: .72rem !important;
}

.xp-track {
  height: 11px !important;
}

.xp-meta span {
  font-size: .72rem !important;
}

.xp-meta strong {
  font-size: .96rem !important;
}

.home-profile-mini {
  grid-template-columns: repeat(2, minmax(136px, 1fr)) !important;
  gap: 9px !important;
}

.home-stat-card {
  min-height: 68px !important;
  padding: 11px 12px 11px 40px !important;
  border-radius: 16px !important;
}

.home-stat-card label {
  font-size: .61rem !important;
  letter-spacing: .08em !important;
}

.home-stat-card strong {
  font-size: 1.04rem !important;
}

.home-stat-icon,
.home-stat-card.stat-best::before,
.home-stat-card.stat-rank::before,
.home-stat-card.stat-games::before {
  left: 12px !important;
  top: 14px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
}

.home-stat-card.stat-best::after,
.home-stat-card.stat-rank::after,
.home-stat-card.stat-games::after {
  left: 16px !important;
  top: 16px !important;
}

.home-stat-card:nth-child(5) {
  min-height: 62px !important;
}

.home-profile-card .mode-bests {
  margin-top: 0 !important;
  padding: 8px 10px !important;
}

.home-profile-card .mode-bests-grid > div {
  padding: 7px 8px !important;
}

@media (max-width: 1100px) {
  .home-profile-card.home-profile-card-3d {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      'avatar'
      'main'
      'stats'
      'bests' !important;
  }

  .home-avatar3d .avatar3d-view {
    min-height: 228px !important;
  }
}

@media (max-width: 760px) {
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-avatar3d .avatar3d-view {
    min-height: 204px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-profile-main strong {
    font-size: 1.22rem !important;
  }
}


/* v7.0.133 Main Menu Layout & Shelf Polish: move mode under profile, place mode description below it, improve shelf previews and fix clipped profile stats. */
.start-card.start-card-v12 {
  grid-template-columns: minmax(520px, 1fr) minmax(360px, .86fr) !important;
  grid-template-areas:
    'profile avatar'
    'mode avatar'
    'modeinfo avatar'
    'actions actions' !important;
  align-items: start !important;
}

.start-card-v12 .avatar-picker {
  align-self: stretch !important;
  height: 100%;
}

.start-card-v12 .nickname-field.mode-field {
  min-height: 76px !important;
  padding: 12px 14px !important;
}

.start-card-v12 .mode-info {
  min-height: 108px !important;
  align-content: stretch !important;
  padding: 10px 12px !important;
}

.mode-info {
  display: grid !important;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.mode-info-art {
  position: relative;
  min-height: 86px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(14, 18, 25, .68), rgba(14, 18, 25, .92));
  border: 1px solid rgba(222, 198, 160, .14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.mode-info-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.34));
  pointer-events: none;
}

.mode-info-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.mode-info-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 5px;
}

.mode-info-copy strong {
  font-size: 1rem !important;
}

.mode-info-copy span,
.mode-info-copy small {
  display: block;
  line-height: 1.34;
}

.home-profile-card.home-profile-card-3d {
  grid-template-columns: minmax(178px, 210px) minmax(0, 1fr) !important;
  gap: 12px 14px !important;
}

.home-avatar3d .avatar3d-view {
  min-height: 234px !important;
}

.home-profile-main {
  padding: 11px 12px 10px !important;
}

.home-profile-main strong {
  font-size: clamp(1.28rem, 1.32vw, 1.54rem) !important;
}

.home-profile-mini {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

.home-stat-card {
  min-height: 62px !important;
  padding: 10px 12px 10px 42px !important;
}

.home-stat-card label {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.05 !important;
  font-size: .60rem !important;
}

.home-stat-card strong {
  font-size: 1rem !important;
  white-space: nowrap !important;
}

.home-stat-card:nth-child(5) {
  grid-column: auto !important;
}

.inventory-panel {
  height: 100%;
}

.inventory-items-upgraded {
  max-height: none !important;
  grid-auto-rows: 1fr;
}

.inventory-item.inventory-item-card {
  min-height: 156px !important;
}

.inventory-item-card .inventory-item-hero {
  height: 116px !important;
  min-height: 116px !important;
  max-height: 116px !important;
}

.inventory-card-avatar3d {
  bottom: -4px !important;
  height: 102px !important;
  min-height: 102px !important;
  max-height: 102px !important;
}

.inventory-card-avatar3d canvas,
.inventory-card-avatar3d .avatar3d-empty {
  height: 102px !important;
  min-height: 102px !important;
  max-height: 102px !important;
}

@media (max-width: 1100px) {
  .start-card.start-card-v12 {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      'profile'
      'avatar'
      'mode'
      'modeinfo'
      'actions' !important;
  }

  .mode-info {
    grid-template-columns: 104px minmax(0, 1fr) !important;
  }
}

@media (max-width: 760px) {
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .mode-info {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .mode-info-art {
    min-height: 92px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-profile-mini {
    grid-template-columns: 1fr !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-item.inventory-item-card {
    min-height: 138px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-item-card .inventory-item-hero {
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-card-avatar3d,
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-card-avatar3d canvas,
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-card-avatar3d .avatar3d-empty {
    height: 84px !important;
    min-height: 84px !important;
    max-height: 84px !important;
  }
}


/* v7.0.134 Inventory Shelf Modal: move character shelf out of the main menu into an Inventory dialog and fix clipped profile stats. */
.start-card.start-card-v12 {
  grid-template-columns: minmax(600px, 1fr) minmax(260px, .48fr) !important;
  grid-template-areas:
    'profile avatar'
    'mode avatar'
    'modeinfo avatar'
    'actions actions' !important;
}

.home-profile-card.home-profile-card-3d {
  grid-template-columns: minmax(172px, 208px) minmax(0, 1fr) !important;
}

.home-avatar3d .avatar3d-view {
  min-height: 226px !important;
}

.home-profile-mini {
  grid-template-columns: repeat(2, minmax(162px, 1fr)) !important;
  gap: 9px !important;
}

.home-stat-card,
.home-stat-card:nth-child(5) {
  grid-column: auto !important;
  min-height: 66px !important;
  padding: 10px 12px 10px 42px !important;
}

.home-stat-card label,
.home-stat-card strong {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.home-stat-card label {
  font-size: .62rem !important;
  letter-spacing: .075em !important;
  line-height: 1.12 !important;
}

.home-stat-card strong {
  font-size: 1.02rem !important;
  line-height: 1.08 !important;
}

.start-card-v12 .avatar-picker {
  align-self: stretch !important;
  min-height: 100% !important;
}

.inventory-launch-card {
  height: 100%;
  min-height: 232px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 22px 18px;
  border-radius: 24px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(216, 176, 106, .16), transparent 38%),
    linear-gradient(145deg, rgba(47, 36, 27, .72), rgba(23, 18, 14, .88)) !important;
  border: 1px solid rgba(214, 180, 129, .22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 44px rgba(0,0,0,.20);
}

.inventory-launch-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(255, 234, 187, .98);
  font-size: 1.55rem;
  background: radial-gradient(circle, rgba(216,176,106,.40), rgba(73,52,31,.42));
  border: 1px solid rgba(216,176,106,.32);
  box-shadow: 0 12px 28px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.12);
}

.inventory-launch-copy span {
  display: block;
  color: rgba(243, 232, 213, .62);
  font-size: .68rem;
  font-weight: 1000;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.inventory-launch-copy strong {
  display: block;
  margin-top: 2px;
  color: rgba(255, 245, 228, .96);
  font-size: 1.52rem;
  line-height: 1;
}

.inventory-launch-copy small {
  display: block;
  margin-top: 7px;
  color: rgba(243, 232, 213, .68);
  font-size: .80rem;
}

.inventory-open-btn,
.inventory-shop-shortcut {
  width: min(210px, 100%);
  justify-content: center;
}

.inventory-dialog {
  width: min(940px, calc(100vw - 38px));
  max-height: min(760px, calc(100dvh - 36px));
  padding: 0;
  border: 0;
  border-radius: 30px;
  color: var(--text);
  background: transparent;
  overflow: visible;
}

.inventory-dialog::backdrop {
  background: rgba(4, 6, 10, .72);
  backdrop-filter: blur(8px);
}

.inventory-dialog-shell {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 18% 0%, rgba(216, 176, 106, .16), transparent 35%),
    linear-gradient(145deg, rgba(47, 36, 27, .94), rgba(17, 14, 12, .96));
  border: 1px solid rgba(216, 176, 106, .24);
  box-shadow: 0 34px 110px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.05);
}

.inventory-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 4px 0;
}

.inventory-dialog-head span,
.inventory-dialog-head small {
  display: block;
  color: rgba(243, 232, 213, .66);
  font-size: .74rem;
}

.inventory-dialog-head span {
  font-weight: 1000;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.inventory-dialog-head strong {
  display: block;
  color: rgba(255, 245, 228, .96);
  font-size: 1.75rem;
  line-height: 1.05;
}

.dialog-close-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(216,176,106,.22);
  background: rgba(12, 10, 8, .42);
  color: rgba(255,245,228,.92);
  font-size: 1.45rem;
  cursor: pointer;
}

.inventory-dialog-body .inventory-panel {
  min-height: 0 !important;
  height: auto !important;
}

.inventory-dialog-body .inventory-items-upgraded {
  max-height: min(520px, calc(100dvh - 230px)) !important;
  overflow: auto !important;
  grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
  gap: 12px !important;
}

.inventory-dialog-body .inventory-item.inventory-item-card {
  min-height: 166px !important;
}

.inventory-dialog-body .inventory-item-card .inventory-item-hero {
  height: 124px !important;
  min-height: 124px !important;
  max-height: 124px !important;
}

.inventory-dialog-body .inventory-card-avatar3d,
.inventory-dialog-body .inventory-card-avatar3d canvas,
.inventory-dialog-body .inventory-card-avatar3d .avatar3d-empty {
  height: 112px !important;
  min-height: 112px !important;
  max-height: 112px !important;
}

@media (max-width: 1100px) {
  .start-card.start-card-v12 {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      'profile'
      'avatar'
      'mode'
      'modeinfo'
      'actions' !important;
  }

  .home-profile-mini {
    grid-template-columns: repeat(2, minmax(146px, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-profile-mini {
    grid-template-columns: 1fr !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-launch-card {
    min-height: 180px;
    padding: 18px 14px;
  }

  .inventory-dialog {
    width: min(96vw, 720px);
  }

  .inventory-dialog-shell {
    padding: 14px;
    border-radius: 24px;
  }

  .inventory-dialog-body .inventory-items-upgraded {
    grid-template-columns: repeat(2, minmax(128px, 1fr)) !important;
  }
}


/* v7.0.135 Main Menu Menu Panel + Stats Fix: replace the right inventory placeholder with a compact menu card and make profile stats readable. */
.start-card.start-card-v12 {
  grid-template-columns: minmax(640px, 1fr) minmax(272px, .42fr) !important;
  grid-template-areas:
    'profile avatar'
    'mode avatar'
    'modeinfo avatar'
    'actions avatar' !important;
  align-items: start !important;
}

.start-card-v12 .account-actions {
  grid-area: actions !important;
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
}

.start-card-v12 .account-actions > :not(#startBtn) {
  display: none !important;
}

.account-actions #startBtn {
  width: 100% !important;
  min-height: 56px !important;
}

.start-card-v12 .avatar-picker {
  min-height: 100% !important;
}

.home-profile-card.home-profile-card-3d {
  grid-template-columns: minmax(165px, 202px) minmax(0, 1fr) !important;
  grid-template-areas:
    'avatar main'
    'stats stats'
    'bests bests' !important;
  gap: 12px 14px !important;
}

.home-avatar3d { grid-area: avatar !important; }
.home-profile-main { grid-area: main !important; }
.home-profile-mini {
  grid-area: stats !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 0 !important;
}

.home-profile-card .mode-bests {
  grid-area: bests !important;
}

.home-avatar3d .avatar3d-view {
  min-height: 214px !important;
}

.home-profile-main {
  padding: 11px 13px 10px !important;
}

.home-profile-main strong {
  font-size: clamp(1.34rem, 1.45vw, 1.68rem) !important;
}

.home-stat-card,
.home-stat-card:nth-child(5) {
  grid-column: auto !important;
  min-height: 76px !important;
  padding: 12px 14px 12px 46px !important;
}

.home-stat-card:nth-child(5) {
  grid-column: 1 / -1 !important;
}

.home-stat-card label {
  font-size: .66rem !important;
  letter-spacing: .07em !important;
  line-height: 1.12 !important;
  white-space: normal !important;
}

.home-stat-card strong {
  font-size: 1.16rem !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
}

.home-stat-icon,
.home-stat-card.stat-best::before,
.home-stat-card.stat-rank::before,
.home-stat-card.stat-games::before {
  left: 14px !important;
  top: 15px !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
}

.home-stat-card.stat-best::after,
.home-stat-card.stat-rank::after,
.home-stat-card.stat-games::after {
  left: 18px !important;
  top: 17px !important;
}

.inventory-launch-card.inventory-menu-card {
  height: 100%;
  min-height: 0 !important;
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  justify-items: stretch;
  text-align: center;
  gap: 12px;
  padding: 18px 16px !important;
}

.inventory-menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}

.menu-card-btn {
  min-height: 46px;
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(214, 180, 129, .20);
  background:
    linear-gradient(180deg, rgba(32, 25, 19, .86), rgba(13, 11, 9, .94));
  color: rgba(255, 245, 228, .95);
  font-weight: 900;
  font-size: .98rem;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 24px rgba(0,0,0,.14);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease;
}

.menu-card-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(230, 195, 134, .32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 28px rgba(0,0,0,.18);
  filter: brightness(1.04);
}

.menu-card-btn.menu-card-btn-primary {
  background: linear-gradient(180deg, #f1d18a, #c58d35) !important;
  color: #25170b !important;
  border-color: rgba(255, 240, 201, .48) !important;
  box-shadow: 0 16px 28px rgba(95, 64, 22, .20), inset 0 1px 0 rgba(255,255,255,.32) !important;
}

.inventory-launch-copy small {
  margin-top: 4px !important;
}

@media (max-width: 1100px) {
  .start-card.start-card-v12 {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      'profile'
      'avatar'
      'mode'
      'modeinfo'
      'actions' !important;
  }

  .home-profile-card.home-profile-card-3d {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      'avatar'
      'main'
      'stats'
      'bests' !important;
  }
}

@media (max-width: 760px) {
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-profile-mini {
    grid-template-columns: 1fr !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-menu-grid {
    gap: 8px !important;
  }
}


/* v7.0.136 Compact Right Menu Panel: reduce right menu button size and tidy profile stat alignment. */
.start-card.start-card-v12 {
  grid-template-columns: minmax(660px, 1fr) minmax(246px, .36fr) !important;
}

.inventory-launch-card.inventory-menu-card {
  padding: 15px 14px !important;
  gap: 9px !important;
  align-content: start !important;
}

.inventory-launch-icon {
  width: 42px !important;
  height: 42px !important;
  font-size: 1.14rem !important;
  margin: 0 auto 2px !important;
}

.inventory-launch-copy span {
  font-size: .58rem !important;
  letter-spacing: .14em !important;
}

.inventory-launch-copy strong {
  font-size: 1.22rem !important;
  line-height: 1 !important;
}

.inventory-launch-copy small {
  margin-top: 3px !important;
  font-size: .70rem !important;
}

.inventory-menu-grid {
  gap: 7px !important;
  margin-top: 2px !important;
}

.menu-card-btn {
  min-height: 38px !important;
  padding: 7px 10px !important;
  border-radius: 13px !important;
  font-size: .86rem !important;
  line-height: 1.05 !important;
}

.menu-card-btn.menu-card-btn-primary {
  min-height: 44px !important;
  font-size: .90rem !important;
}

.home-profile-card.home-profile-card-3d {
  grid-template-columns: minmax(158px, 192px) minmax(0, 1fr) !important;
  gap: 11px 13px !important;
}

.home-avatar3d {
  padding: 14px 11px 9px !important;
}

.home-avatar3d .avatar3d-view {
  min-height: 204px !important;
}

.home-profile-main {
  padding: 10px 12px 9px !important;
}

.home-profile-main strong {
  font-size: clamp(1.28rem, 1.35vw, 1.58rem) !important;
}

.home-profile-mini {
  gap: 9px !important;
}

.home-stat-card,
.home-stat-card:nth-child(5) {
  min-height: 70px !important;
  padding: 11px 14px 11px 44px !important;
  align-content: center !important;
}

.home-stat-card label {
  font-size: .64rem !important;
  letter-spacing: .065em !important;
  line-height: 1.08 !important;
  margin-bottom: 3px !important;
}

.home-stat-card strong {
  font-size: 1.10rem !important;
  line-height: 1.05 !important;
}

.home-stat-icon,
.home-stat-card.stat-best::before,
.home-stat-card.stat-rank::before,
.home-stat-card.stat-games::before {
  left: 14px !important;
  top: 17px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
}

.home-stat-card.stat-best::after,
.home-stat-card.stat-rank::after,
.home-stat-card.stat-games::after {
  left: 17px !important;
  top: 18px !important;
}

.home-profile-card .mode-bests {
  padding: 8px 10px !important;
}

@media (max-width: 1100px) {
  .start-card.start-card-v12 {
    grid-template-columns: 1fr !important;
  }

  .inventory-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .menu-card-btn {
    min-height: 40px !important;
  }
}

@media (max-width: 760px) {
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-menu-grid {
    grid-template-columns: 1fr !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .menu-card-btn {
    min-height: 38px !important;
  }
}


/* v7.0.137 Right Menu Tighten + Stat Readability: make the right menu tighter, tone down Inventory, and improve profile stat readability. */
.start-card.start-card-v12 {
  grid-template-columns: minmax(670px, 1fr) minmax(224px, .31fr) !important;
}

.start-card-v12 .avatar-picker {
  align-self: start !important;
  min-height: 0 !important;
}

.inventory-launch-card.inventory-menu-card {
  height: auto !important;
  min-height: 0 !important;
  padding: 13px 12px !important;
  gap: 8px !important;
  border-radius: 22px !important;
}

.inventory-launch-icon {
  width: 38px !important;
  height: 38px !important;
  font-size: 1rem !important;
  margin-bottom: 0 !important;
}

.inventory-launch-copy strong {
  font-size: 1.10rem !important;
}

.inventory-launch-copy small {
  font-size: .66rem !important;
}

.inventory-menu-grid {
  gap: 6px !important;
  margin-top: 0 !important;
}

.menu-card-btn,
.menu-card-btn.menu-card-btn-primary {
  min-height: 34px !important;
  padding: 6px 10px !important;
  border-radius: 12px !important;
  font-size: .84rem !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
}

.menu-card-btn {
  background: linear-gradient(180deg, rgba(30, 23, 17, .90), rgba(12, 10, 8, .95)) !important;
  color: rgba(255, 245, 228, .94) !important;
  border-color: rgba(214, 180, 129, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 10px 18px rgba(0,0,0,.14) !important;
}

.menu-card-btn.menu-card-btn-primary {
  background: linear-gradient(180deg, rgba(88, 64, 33, .96), rgba(47, 33, 18, .98)) !important;
  color: rgba(255, 244, 225, .98) !important;
  border-color: rgba(214, 180, 129, .24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 18px rgba(0,0,0,.16) !important;
}

.home-profile-card.home-profile-card-3d {
  grid-template-columns: minmax(156px, 188px) minmax(0, 1fr) !important;
  gap: 10px 12px !important;
}

.home-profile-mini {
  gap: 8px !important;
}

.home-stat-card,
.home-stat-card:nth-child(5) {
  min-height: 72px !important;
  padding: 12px 14px 12px 56px !important;
}

.home-stat-card label {
  font-size: .68rem !important;
  letter-spacing: .05em !important;
  margin-bottom: 4px !important;
}

.home-stat-card strong {
  font-size: 1.18rem !important;
  line-height: 1.06 !important;
}

.home-stat-icon,
.home-stat-card.stat-best::before,
.home-stat-card.stat-rank::before,
.home-stat-card.stat-games::before {
  left: 18px !important;
  top: 16px !important;
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
}

.home-stat-card.stat-best::after,
.home-stat-card.stat-rank::after,
.home-stat-card.stat-games::after {
  left: 21px !important;
  top: 17px !important;
}

@media (max-width: 1100px) {
  .start-card.start-card-v12 {
    grid-template-columns: 1fr !important;
  }

  .inventory-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .menu-card-btn,
  .menu-card-btn.menu-card-btn-primary {
    min-height: 36px !important;
  }
}

@media (max-width: 760px) {
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-menu-grid {
    grid-template-columns: 1fr !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .menu-card-btn,
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .menu-card-btn.menu-card-btn-primary {
    min-height: 36px !important;
  }
}


/* v7.0.138 Profile Stats Layout Fix: put stats under the level panel, keep icons beside values, and move mode below the top panels. */
.start-card.start-card-v12 {
  grid-template-columns: minmax(670px, 1fr) minmax(224px, .31fr) !important;
  grid-template-areas:
    'profile avatar'
    'mode mode'
    'modeinfo modeinfo'
    'actions actions' !important;
  align-items: stretch !important;
}

.start-card-v12 .account-stats {
  grid-area: profile !important;
}

.start-card-v12 .avatar-picker {
  grid-area: avatar !important;
  align-self: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
}

.inventory-launch-card.inventory-menu-card {
  height: 100% !important;
  min-height: 0 !important;
}

.start-card-v12 .nickname-field.mode-field {
  grid-area: mode !important;
}

.start-card-v12 .mode-info {
  grid-area: modeinfo !important;
}

.start-card-v12 .account-actions {
  grid-area: actions !important;
}

.home-profile-card.home-profile-card-3d {
  grid-template-columns: minmax(150px, 182px) minmax(0, 1fr) !important;
  grid-template-areas:
    'avatar main'
    'avatar stats'
    'bests bests' !important;
  align-items: stretch !important;
  gap: 10px 12px !important;
}

.home-avatar3d {
  grid-area: avatar !important;
  align-self: stretch !important;
  padding: 12px 10px 8px !important;
}

.home-avatar3d .avatar3d-view {
  min-height: 206px !important;
  height: 100% !important;
}

.home-profile-main {
  grid-area: main !important;
  align-self: start !important;
  padding: 11px 13px 10px !important;
}

.home-profile-main strong {
  font-size: clamp(1.30rem, 1.38vw, 1.62rem) !important;
}

.home-profile-mini {
  grid-area: stats !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 0 !important;
  align-self: start !important;
}

.home-profile-card .mode-bests {
  grid-area: bests !important;
  margin-top: 0 !important;
}

.home-stat-card,
.home-stat-card:nth-child(5) {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  grid-template-areas:
    'icon label'
    'icon value' !important;
  align-items: center !important;
  gap: 1px 8px !important;
  grid-column: auto !important;
  min-height: 54px !important;
  padding: 8px 10px !important;
  border-radius: 14px !important;
}

.home-stat-card:nth-child(5) {
  grid-column: 1 / -1 !important;
}

.home-stat-card label {
  grid-area: label !important;
  font-size: .58rem !important;
  letter-spacing: .06em !important;
  line-height: 1.08 !important;
  margin: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.home-stat-card strong {
  grid-area: value !important;
  font-size: .96rem !important;
  line-height: 1.05 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.home-stat-icon {
  position: static !important;
  grid-area: icon !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin: 0 !important;
  align-self: center !important;
  justify-self: center !important;
}

.home-stat-card.stat-best::before,
.home-stat-card.stat-rank::before,
.home-stat-card.stat-games::before {
  position: static !important;
  grid-area: icon !important;
  display: grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin: 0 !important;
  align-self: center !important;
  justify-self: center !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(216,176,106,.38), rgba(88,64,40,.30)) !important;
  border: 1px solid rgba(216,176,106,.18) !important;
  color: rgba(255,245,228,.92) !important;
  font-size: .70rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
}

.home-stat-card.stat-best::before { content: '★' !important; }
.home-stat-card.stat-rank::before { content: '#' !important; }
.home-stat-card.stat-games::before { content: '◎' !important; }

.home-stat-card.stat-best::after,
.home-stat-card.stat-rank::after,
.home-stat-card.stat-games::after {
  display: none !important;
}

@media (max-width: 1100px) {
  .start-card.start-card-v12 {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      'profile'
      'avatar'
      'mode'
      'modeinfo'
      'actions' !important;
  }

  .home-profile-card.home-profile-card-3d {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      'avatar'
      'main'
      'stats'
      'bests' !important;
  }
}

@media (max-width: 760px) {
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-profile-mini {
    grid-template-columns: 1fr !important;
  }
}


/* v7.0.139 Main Menu Header Compact Polish: smaller top logo, tighter tagline and header spacing. */
.start-screen {
  gap: 9px !important;
  padding-top: clamp(14px, 2.4vh, 28px) !important;
}

.main-menu-kicker {
  transform: translateY(0) !important;
  padding: 7px 14px !important;
  font-size: .66rem !important;
  letter-spacing: .18em !important;
}

.main-menu-kicker img {
  width: 18px !important;
  height: 18px !important;
}

.main-brand-lockup {
  max-width: min(720px, calc(100% - 18px)) !important;
  margin: 0 auto !important;
  padding: 8px 14px !important;
  border-radius: 24px !important;
}

.main-brand-logo {
  width: min(100%, 620px) !important;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .30)) !important;
}

.start-screen .tagline {
  max-width: 580px !important;
  margin: 1px auto 8px !important;
  font-size: .94rem !important;
  line-height: 1.35 !important;
  color: rgba(243, 232, 213, .76) !important;
}

@media (min-width: 921px) {
  .main-brand-lockup {
    max-width: min(700px, calc(100% - 18px)) !important;
  }

  .main-brand-logo {
    width: min(100%, 600px) !important;
  }

  .start-screen .tagline {
    margin-bottom: 8px !important;
  }
}

@media (max-width: 760px) {
  .start-screen {
    gap: 7px !important;
    padding-top: 12px !important;
  }

  .main-brand-lockup {
    max-width: min(92vw, 520px) !important;
    padding: 7px 10px !important;
    border-radius: 20px !important;
  }

  .main-brand-logo {
    width: min(100%, 480px) !important;
  }

  .start-screen .tagline {
    max-width: 42ch !important;
    font-size: .80rem !important;
    margin-bottom: 6px !important;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 560px) {
  .main-brand-lockup {
    max-width: min(320px, 38vw) !important;
    padding: 5px 8px !important;
  }

  .main-brand-logo {
    width: 100% !important;
  }
}


/* v7.0.140 Main Menu Final Polish: tighter header, smaller hero logo, premium explorer menu buttons, and professional footer copy. */
.start-screen {
  gap: 6px !important;
  padding-top: clamp(10px, 1.8vh, 20px) !important;
}

.main-menu-kicker {
  padding: 6px 12px !important;
  font-size: .62rem !important;
  letter-spacing: .17em !important;
}

.main-menu-kicker img {
  width: 16px !important;
  height: 16px !important;
}

.main-brand-lockup {
  max-width: min(640px, calc(100% - 28px)) !important;
  margin: 0 auto !important;
  padding: 4px 10px !important;
  border-radius: 22px !important;
  box-shadow:
    0 18px 36px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 0 0 1px rgba(214,180,129,.08) !important;
}

.main-brand-logo {
  width: min(100%, 520px) !important;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .28)) !important;
}

.start-screen .tagline {
  max-width: 540px !important;
  margin: 0 auto 5px !important;
  font-size: .88rem !important;
  line-height: 1.30 !important;
  color: rgba(243,232,213,.72) !important;
}

.start-card.start-card-v12 {
  margin-top: 0 !important;
}

.inventory-launch-card.inventory-menu-card {
  padding: 14px 12px !important;
  gap: 9px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(213, 171, 101, .10), transparent 34%),
    linear-gradient(180deg, rgba(43, 31, 22, .88), rgba(19, 15, 12, .96)) !important;
  border: 1px solid rgba(214, 180, 129, .18) !important;
  box-shadow:
    0 18px 34px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 0 1px rgba(95, 68, 43, .10) !important;
}

.inventory-launch-icon {
  width: 36px !important;
  height: 36px !important;
  font-size: .92rem !important;
  background: radial-gradient(circle, rgba(216,176,106,.28), rgba(70,52,34,.40)) !important;
  border-color: rgba(214, 180, 129, .24) !important;
}

.inventory-launch-copy span {
  color: rgba(231, 206, 166, .72) !important;
  letter-spacing: .18em !important;
}

.inventory-launch-copy strong {
  font-size: 1.16rem !important;
  color: rgba(255, 245, 228, .97) !important;
}

.inventory-launch-copy small {
  color: rgba(243,232,213,.66) !important;
}

.inventory-menu-grid {
  gap: 8px !important;
}

.menu-card-btn,
.menu-card-btn.menu-card-btn-primary {
  min-height: 38px !important;
  padding: 7px 12px !important;
  border-radius: 13px !important;
  font-size: .86rem !important;
  letter-spacing: .01em !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease !important;
}

.menu-card-btn {
  background:
    linear-gradient(180deg, rgba(66, 49, 34, .42), rgba(17, 13, 10, .95)) !important;
  color: rgba(255,245,228,.94) !important;
  border: 1px solid rgba(214,180,129,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -12px 18px rgba(0,0,0,.12),
    0 10px 18px rgba(0,0,0,.14) !important;
}

.menu-card-btn:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.04) !important;
  border-color: rgba(230,195,134,.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -12px 18px rgba(0,0,0,.10),
    0 14px 22px rgba(0,0,0,.18) !important;
}

.menu-card-btn.menu-card-btn-primary {
  background:
    linear-gradient(180deg, rgba(177, 133, 63, .92), rgba(86, 59, 29, .98)) !important;
  color: rgba(255,247,232,.98) !important;
  border: 1px solid rgba(229, 196, 136, .30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -10px 14px rgba(76,50,20,.24),
    0 12px 22px rgba(0,0,0,.16) !important;
}

.menu-card-btn.menu-card-btn-primary:hover {
  filter: brightness(1.05) !important;
}

.main-menu-footer {
  max-width: min(860px, calc(100% - 24px)) !important;
}

.main-menu-footer span {
  letter-spacing: .01em;
}

@media (min-width: 921px) {
  .main-brand-lockup {
    max-width: min(620px, calc(100% - 28px)) !important;
  }

  .main-brand-logo {
    width: min(100%, 500px) !important;
  }
}

@media (max-width: 760px) {
  .start-screen {
    gap: 5px !important;
    padding-top: 10px !important;
  }

  .main-brand-lockup {
    max-width: min(92vw, 470px) !important;
    padding: 4px 8px !important;
    border-radius: 18px !important;
  }

  .main-brand-logo {
    width: min(100%, 420px) !important;
  }

  .start-screen .tagline {
    max-width: 40ch !important;
    font-size: .76rem !important;
    margin-bottom: 5px !important;
  }

  .inventory-launch-card.inventory-menu-card {
    padding: 12px 10px !important;
  }

  .menu-card-btn,
  .menu-card-btn.menu-card-btn-primary {
    min-height: 36px !important;
  }
}


/* v7.0.141 Header Lockup Minipatch: slightly reduce the dark logo box height while keeping the current main menu layout. */
.main-brand-lockup {
  max-width: min(620px, calc(100% - 30px)) !important;
  padding: 2px 10px !important;
  border-radius: 20px !important;
}

.main-brand-logo {
  width: min(100%, 490px) !important;
}

@media (min-width: 921px) {
  .main-brand-lockup {
    max-width: min(600px, calc(100% - 30px)) !important;
    padding: 2px 10px !important;
  }

  .main-brand-logo {
    width: min(100%, 480px) !important;
  }
}

@media (max-width: 760px) {
  .main-brand-lockup {
    max-width: min(92vw, 452px) !important;
    padding: 2px 8px !important;
    border-radius: 16px !important;
  }

  .main-brand-logo {
    width: min(100%, 404px) !important;
  }
}


/* v7.0.142 Mode Artwork Panel: add custom artwork per mode in the main menu mode info panel. */
.mode-info {
  grid-template-columns: 132px minmax(0, 1fr) !important;
  gap: 14px !important;
}

.mode-info-art {
  min-height: 98px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(16, 18, 24, .50), rgba(10, 10, 12, .82)) !important;
  border: 1px solid rgba(214, 180, 129, .18) !important;
  box-shadow: 0 12px 22px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.mode-info-art::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
  pointer-events: none;
}

.mode-info-art::after {
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.18)) !important;
}

.mode-info-art img {
  object-fit: cover !important;
  object-position: center !important;
  transform: scale(1.01);
}

.mode-info-copy strong {
  font-size: 1.04rem !important;
}

.mode-info-copy span {
  color: rgba(243, 232, 213, .82) !important;
}

.mode-info-copy small {
  color: rgba(231, 206, 166, .72) !important;
}

@media (max-width: 760px) {
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .mode-info {
    grid-template-columns: 108px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .mode-info-art {
    min-height: 84px !important;
    border-radius: 14px !important;
  }
}


/* v7.0.143 Inventory Banana Cat Preview Fix: improve Character Shelf framing so the Banana Cat preview is not cropped. */
@media (min-width: 761px) {
  .inventory-item-card[data-character-key="banana-cat"] .inventory-card-avatar3d {
    inset: 12px 8px 26px 8px !important;
  }

  .inventory-item-card[data-character-key="banana-cat"] .inventory-card-avatar3d canvas {
    transform: translateY(7px) scale(1.04) !important;
  }
}

.inventory-item-card[data-character-key="banana-cat"] .inventory-card-avatar3d {
  overflow: hidden !important;
}

.inventory-item-card[data-character-key="banana-cat"] .inventory-card-avatar3d canvas {
  transform-origin: center center !important;
}

body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-item-card[data-character-key="banana-cat"] .inventory-card-avatar3d {
  inset: 10px 8px 22px 8px !important;
}

body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-item-card[data-character-key="banana-cat"] .inventory-card-avatar3d canvas {
  transform: translateY(6px) scale(1.00) !important;
}


/* v7.0.145 Main Menu + Inventory + Shop Polish: final mode panel polish, premium start button, collectible shelf and warmer shop styling. */
.mode-bests.mode-bests-open {
  overflow: visible !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(216,176,106,.10), transparent 34%),
    linear-gradient(145deg, rgba(38,29,21,.58), rgba(22,17,13,.72)) !important;
  border: 1px solid rgba(222,198,160,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.mode-bests-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px 4px;
}

.mode-bests-head span,
.mode-bests-head em {
  color: rgba(231,206,166,.72);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .10em;
  font-style: normal;
  font-weight: 900;
}

.mode-bests-head strong {
  color: #f5dfb0;
  font-size: 1rem;
  text-shadow: 0 1px 0 rgba(0,0,0,.28);
}

.mode-bests-open .mode-bests-grid {
  padding-top: 6px !important;
}

.mode-bests-open .mode-bests-grid div {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.18)) !important;
  border: 1px solid rgba(222,198,160,.08);
}

.mode-bests-open .mode-bests-grid strong {
  color: rgba(250,240,222,.96) !important;
}

.mode-bests-open .mode-bests-grid span,
.mode-bests-open .mode-bests-grid small {
  color: rgba(231,206,166,.70) !important;
}

@media (max-width: 820px) {
  .mode-bests-head { grid-template-columns: 1fr auto; }
  .mode-bests-head em { grid-column: 1 / -1; }
}

.mode-info {
  position: relative;
  overflow: hidden;
  padding: 6px;
  border-radius: 22px !important;
  border: 1px solid rgba(222,198,160,.13) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(216,176,106,.10), transparent 34%),
    linear-gradient(145deg, rgba(24,18,13,.58), rgba(12,10,8,.66)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 12px 28px rgba(0,0,0,.16);
}

.mode-info::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.03), transparent);
  opacity: .55;
}

.mode-info-art {
  min-height: 104px !important;
  border-radius: 18px !important;
  border-color: rgba(216,176,106,.22) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.mode-info-art::before {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), inset 0 -24px 28px rgba(0,0,0,.12);
}

.mode-info-art img {
  transform: scale(1.03);
  transition: transform .35s ease, filter .35s ease;
  filter: saturate(1.05) contrast(1.02);
}

.mode-info:hover .mode-info-art img {
  transform: scale(1.06);
}

.mode-info-copy {
  gap: 6px !important;
  padding-right: 2px;
}

.mode-info-copy strong {
  color: #f8ead2 !important;
  font-size: 1.05rem !important;
  letter-spacing: .01em;
}

.mode-info-copy span {
  color: rgba(243,232,213,.86) !important;
  line-height: 1.42 !important;
}

.mode-info-copy small {
  display: inline-flex !important;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(216,176,106,.18);
  background: rgba(20,15,11,.44);
  color: rgba(244,223,185,.82) !important;
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.account-actions #startBtn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(242,206,133,.98), rgba(202,152,78,.96)) !important;
  border: 1px solid rgba(249,229,188,.32) !important;
  color: #22170f !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.20);
  box-shadow: 0 18px 42px rgba(140,105,64,.34), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.account-actions #startBtn::after {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -22%;
  width: 36%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  transform: skewX(-18deg);
  animation: rqStartBtnShine 3.8s ease-in-out infinite;
  pointer-events: none;
}

.account-actions #startBtn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.account-actions #startBtn:active {
  transform: translateY(0);
}

@keyframes rqStartBtnShine {
  0%, 12% { left: -26%; opacity: 0; }
  18% { opacity: .15; }
  34% { left: 108%; opacity: .55; }
  45%, 100% { left: 108%; opacity: 0; }
}

.inventory-launch-copy.inventory-launch-copy-minimal {
  display: grid;
  align-content: start;
  min-height: 0;
  gap: 0;
}

.inventory-launch-copy.inventory-launch-copy-minimal span {
  color: rgba(245,234,215,.88) !important;
  letter-spacing: .14em !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet,
.inventory-panel.inventory-panel-paged.inventory-panel-empty-state {
  background:
    radial-gradient(circle at 16% 0%, rgba(216,176,106,.13), transparent 34%),
    linear-gradient(145deg, rgba(47,36,27,.74), rgba(26,20,15,.82)) !important;
  border: 1px solid rgba(222,198,160,.14) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.04);
}

.inventory-head.inventory-head-minimal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 0;
}

.inventory-head.inventory-head-minimal strong {
  color: #f8ead2 !important;
  letter-spacing: .01em;
}

.inventory-head.inventory-head-minimal span {
  color: rgba(231,206,166,.72) !important;
}

.inventory-head.inventory-head-minimal .secondary-btn {
  min-height: 40px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(216,176,106,.24) !important;
  background: linear-gradient(180deg, rgba(38,30,24,.92), rgba(20,15,11,.96)) !important;
  color: rgba(245,234,215,.92) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.inventory-shelf-pages {
  background:
    radial-gradient(circle at 50% 0%, rgba(216,176,106,.08), transparent 42%),
    linear-gradient(145deg, rgba(18,14,10,.34), rgba(10,8,6,.22)) !important;
  border-color: rgba(222,198,160,.11) !important;
}

.inventory-shelf-slot {
  background:
    radial-gradient(circle at 50% 8%, rgba(243,232,213,.08), transparent 44%),
    linear-gradient(180deg, rgba(38,29,22,.42), rgba(18,14,10,.52)) !important;
  border: 1px solid rgba(222,198,160,.11) !important;
}

.inventory-shelf-slot-filled {
  border-color: rgba(216,176,106,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 20px rgba(0,0,0,.10);
}

.inventory-shelf-slot .inventory-item.inventory-item-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.14)),
    rgba(20,15,11,.08) !important;
}

.inventory-shelf-slot .inventory-item-card strong {
  color: rgba(250,240,222,.98) !important;
  font-size: .72rem !important;
}

.inventory-shelf-slot .inventory-item-card em {
  color: rgba(231,206,166,.78) !important;
  letter-spacing: .04em;
}

.inventory-shelf-slot .inventory-item-card.equipped {
  box-shadow: 0 0 0 1px rgba(242,206,133,.36) inset, 0 18px 30px rgba(0,0,0,.14), 0 0 28px rgba(216,176,106,.12) !important;
}

.inventory-shelf-slot-empty {
  opacity: .52 !important;
  border-color: rgba(222,198,160,.08) !important;
}

.inventory-shelf-slot-empty span {
  color: rgba(231,206,166,.28) !important;
}

.inventory-item-card.inventory-remove-card-clean {
  background:
    radial-gradient(circle at 50% 0%, rgba(215,117,117,.10), transparent 42%),
    linear-gradient(180deg, rgba(72,24,29,.70), rgba(46,17,20,.84)) !important;
  border-color: rgba(197,125,125,.22) !important;
}

.inventory-item-card.inventory-remove-card-clean strong {
  color: rgba(255,236,236,.96) !important;
}

.inventory-item-card.inventory-remove-card-clean em {
  color: rgba(244,196,196,.76) !important;
}

.inventory-pagebar {
  padding-top: 4px !important;
}

.inventory-page-btn {
  border-color: rgba(222,198,160,.16) !important;
  background: rgba(22,16,12,.54) !important;
  color: rgba(243,232,213,.68) !important;
}

.inventory-page-btn.active {
  color: rgba(27,20,15,.96) !important;
  background: linear-gradient(180deg, rgba(245,214,154,.98), rgba(197,154,97,.92)) !important;
}

/* Banana Cat specific framing inside shelf cards */
@media (min-width: 761px) {
  .inventory-item-card[data-character-key="banana-cat"] .inventory-card-avatar3d canvas {
    transform: translateY(10px) scale(1.12) !important;
  }
}

.shop-dialog .dialog-card,
.shop-detail-dialog .dialog-card,
.shop-dialog .leaderboard-card,
.shop-dialog .shop-detail-card {
  background:
    radial-gradient(circle at 14% 0%, rgba(216,176,106,.12), transparent 34%),
    linear-gradient(145deg, rgba(37,29,23,.94), rgba(17,13,10,.96)) !important;
  border: 1px solid rgba(222,198,160,.14) !important;
}

.shop-status-line {
  background: rgba(22,16,12,.54) !important;
  border: 1px solid rgba(222,198,160,.10) !important;
}

.shop-status-line strong,
.shop-status-line b,
.shop-card-price strong,
.shop-detail-meta strong,
.shop-detail-actions .primary-btn,
.shop-detail-actions .secondary-btn {
  color: rgba(250,240,222,.96) !important;
}

.shop-status-line em,
.shop-card-price span,
.shop-item-body small,
.shop-detail-meta span,
.shop-detail-flavor {
  color: rgba(231,206,166,.72) !important;
}

.shop-tier-strip button,
.shop-tier-summary button {
  background: linear-gradient(180deg, rgba(34,27,21,.92), rgba(18,14,11,.96)) !important;
  border-color: rgba(222,198,160,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 24px rgba(0,0,0,.14) !important;
}

.shop-tier-strip button.active,
.shop-tier-summary button.active {
  border-color: rgba(216,176,106,.34) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.18), 0 0 22px rgba(216,176,106,.10) !important;
}

.shop-item.shop-item-static {
  background:
    radial-gradient(circle at 18% 0%, rgba(216,176,106,.09), transparent 30%),
    linear-gradient(145deg, rgba(33,25,19,.94), rgba(14,11,9,.96)) !important;
  border: 1px solid rgba(222,198,160,.12) !important;
  box-shadow: 0 18px 36px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.shop-item.shop-item-static:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 46px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.05), 0 0 22px rgba(216,176,106,.08) !important;
}

.shop-item-static .static-card-preview,
.shop-detail-hero {
  border: 1px solid rgba(216,176,106,.18) !important;
  background:
    linear-gradient(180deg, rgba(13,10,8,.18), rgba(13,10,8,.52)),
    var(--shop-tier-bg),
    rgba(255,255,255,.04) !important;
  background-size: cover !important;
  background-position: center !important;
}

.shop-card-avatar3d::after {
  background: radial-gradient(circle at 50% 100%, rgba(0,0,0,.28), transparent 72%) !important;
}

.shop-card-price {
  background: rgba(20,15,11,.62) !important;
  border-color: rgba(222,198,160,.11) !important;
}

.shop-card-price strong,
.shop-card-price.is-owned strong,
.shop-card-price.is-equipped strong {
  color: #f5dfb0 !important;
}

.shop-card-action,
.shop-card-action.primary,
.shop-detail-actions .primary-btn {
  border-radius: 14px !important;
  border: 1px solid rgba(249,229,188,.20) !important;
  background: linear-gradient(180deg, rgba(242,206,133,.96), rgba(202,152,78,.92)) !important;
  color: #24180f !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.shop-card-action.secondary,
.shop-detail-actions .secondary-btn {
  border-radius: 14px !important;
  border: 1px solid rgba(222,198,160,.16) !important;
  background: linear-gradient(180deg, rgba(38,30,24,.92), rgba(20,15,11,.96)) !important;
  color: rgba(245,234,215,.92) !important;
}

.shop-detail-hero span {
  background: rgba(20,15,11,.58) !important;
  border-color: rgba(222,198,160,.18) !important;
}

.shop-detail-hero strong {
  color: #f8ead2 !important;
}

.shop-detail-hero em {
  color: rgba(231,206,166,.74) !important;
}


/* v7.0.146 Inventory Rollback: restore Inventory / Character Shelf UI to v7.0.144 while keeping current main menu, mode, start button and shop polish. */
.inventory-launch-card.inventory-menu-card.inventory-menu-card-clean {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto 1fr !important;
  align-content: start !important;
  justify-items: stretch !important;
  text-align: center !important;
  gap: 8px !important;
  padding: 13px 12px !important;
  border-radius: 22px !important;
}

.inventory-launch-copy.inventory-launch-copy-minimal {
  gap: 0 !important;
}

.inventory-launch-copy.inventory-launch-copy-minimal span {
  display: block !important;
  margin-top: 2px !important;
  color: rgba(244, 226, 188, .86) !important;
  font-size: .76rem !important;
  letter-spacing: .22em !important;
  font-weight: 1000 !important;
  text-transform: uppercase !important;
}

.inventory-menu-card-clean .inventory-launch-icon {
  margin-bottom: 2px !important;
}

.inventory-dialog .inventory-dialog-head {
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(214, 180, 129, .12) !important;
}

.inventory-dialog .inventory-dialog-head > div small {
  color: rgba(243, 232, 213, .66) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet {
  padding: 16px 18px 14px !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(216,176,106,.10), transparent 34%),
    linear-gradient(180deg, rgba(55,41,29,.52), rgba(24,19,14,.86)) !important;
  border: 1px solid rgba(214, 180, 129, .16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 18px 38px rgba(0,0,0,.18) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 12px !important;
  padding: 0 4px !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-toolbar span {
  color: rgba(231,206,166,.74) !important;
  font-size: .72rem !important;
  font-weight: 950 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.inventory-shop-mini {
  min-height: 34px !important;
  padding: 7px 14px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(66,49,34,.48), rgba(17,13,10,.92)) !important;
  border: 1px solid rgba(214,180,129,.22) !important;
  color: rgba(255,245,228,.94) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 18px rgba(0,0,0,.16) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-items-upgraded {
  gap: 10px !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-item.inventory-item-card {
  border-radius: 18px !important;
  border-color: rgba(214,180,129,.13) !important;
  background-color: rgba(27,22,16,.58) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 12px 22px rgba(0,0,0,.10) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-item.inventory-item-card.equipped {
  border-color: rgba(216,176,106,.42) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 1px rgba(216,176,106,.08), 0 14px 26px rgba(0,0,0,.16) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot-empty {
  opacity: .62 !important;
  border-color: rgba(222,198,160,.10) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot-empty span {
  color: rgba(243,232,213,.34) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-remove-card-clean {
  background:
    radial-gradient(circle at 50% 0%, rgba(122,54,61,.18), transparent 42%),
    linear-gradient(180deg, rgba(56,25,28,.55), rgba(22,13,13,.82)) !important;
  border-color: rgba(176,98,98,.22) !important;
  opacity: .82 !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-remove-card-clean:hover {
  opacity: .98 !important;
  border-color: rgba(200,122,112,.34) !important;
}

@media (min-width: 761px) {
  .inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-item-card .inventory-item-hero {
    min-height: 118px !important;
  }

  .inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-card-avatar3d {
    inset: 8px 7px 20px 7px !important;
  }

  .inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-card-avatar3d canvas {
    transform: translateY(2px) scale(1.13) !important;
  }

  .inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-item-card[data-character-key="banana-cat"] .inventory-card-avatar3d {
    inset: 6px 6px 18px 6px !important;
  }

  .inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-item-card[data-character-key="banana-cat"] .inventory-card-avatar3d canvas {
    transform: translateY(8px) scale(1.10) !important;
  }
}

@media (max-width: 760px) {
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-toolbar {
    align-items: stretch !important;
    flex-direction: column !important;
  }
}


/* v7.0.147 Admin Control Room + runtime update mode */
.runtime-maintenance-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 16%, rgba(216,176,106,.16), transparent 32%),
    linear-gradient(180deg, rgba(4,5,8,.88), rgba(4,5,8,.96));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.runtime-maintenance-overlay.hidden { display: none; }
.runtime-maintenance-card {
  width: min(560px, 100%);
  display: grid;
  gap: 14px;
  padding: 28px;
  border-radius: 30px;
  text-align: center;
  border: 1px solid rgba(216,176,106,.28);
  background:
    radial-gradient(circle at 50% 0%, rgba(216,176,106,.18), transparent 36%),
    linear-gradient(145deg, rgba(48,36,26,.96), rgba(13,11,9,.98));
  color: rgba(245,234,215,.95);
  box-shadow: 0 34px 110px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.05);
}
.runtime-maintenance-kicker,
.runtime-maintenance-count span {
  color: rgba(231,206,166,.72);
  font-size: .72rem;
  font-weight: 1000;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.runtime-maintenance-card h2 { margin: 0; font-size: clamp(2rem, 5vw, 3.15rem); color: #f8ead2; }
.runtime-maintenance-card p { margin: 0; color: rgba(243,232,213,.80); line-height: 1.5; }
.runtime-maintenance-count { display: grid; gap: 4px; padding: 14px; border-radius: 18px; background: rgba(13,10,8,.54); border: 1px solid rgba(216,176,106,.18); }
.runtime-maintenance-count strong { color: #f5dfb0; font-size: 2rem; }
.runtime-maintenance-card button { min-height: 44px; border-radius: 16px; border: 1px solid rgba(216,176,106,.25); background: linear-gradient(180deg, rgba(45,34,25,.92), rgba(18,14,11,.96)); color: #f8ead2; font-weight: 900; cursor: pointer; }
.runtime-broadcast-banner {
  position: fixed;
  left: 50%;
  top: 12px;
  z-index: 9000;
  transform: translateX(-50%);
  width: min(860px, calc(100vw - 24px));
  padding: 10px 16px;
  border-radius: 999px;
  text-align: center;
  color: rgba(255,245,228,.96);
  background: linear-gradient(180deg, rgba(53,39,27,.94), rgba(19,15,12,.94));
  border: 1px solid rgba(216,176,106,.26);
  box-shadow: 0 18px 42px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
}
.runtime-broadcast-banner.hidden { display: none; }
body.runtime-maintenance-active .start-screen,
body.runtime-maintenance-active .game-screen { pointer-events: none; filter: blur(2px) saturate(.7); }
.admin-body {
  background:
    radial-gradient(circle at 20% 0%, rgba(216,176,106,.15), transparent 32%),
    radial-gradient(circle at 84% 18%, rgba(67, 124, 126, .10), transparent 34%),
    linear-gradient(180deg, #07080b, #15100c 52%, #090807) !important;
}
.admin-hero,
.admin-card {
  border-color: rgba(216,176,106,.18) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(216,176,106,.10), transparent 36%),
    linear-gradient(145deg, rgba(35,27,21,.86), rgba(13,11,9,.92)) !important;
  box-shadow: 0 20px 46px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.admin-hero h1 { color: #f8ead2 !important; }
.admin-hero p,
.admin-card p,
.admin-status,
.empty-admin { color: rgba(231,206,166,.72) !important; }
.admin-home-link,
.admin-card button,
.admin-actions-bar button,
.admin-station-actions button,
.admin-dialog-actions button,
.admin-token-row button {
  border-radius: 14px !important;
  border: 1px solid rgba(216,176,106,.22) !important;
  background: linear-gradient(180deg, rgba(45,34,25,.92), rgba(18,14,11,.96)) !important;
  color: rgba(245,234,215,.94) !important;
}
.admin-card button:hover,
.admin-home-link:hover { filter: brightness(1.06); transform: translateY(-1px); }
.admin-update-btn {
  background: linear-gradient(180deg, rgba(154,45,38,.98), rgba(82,22,20,.98)) !important;
  border-color: rgba(255,149,128,.34) !important;
  color: #ffe8df !important;
  box-shadow: 0 12px 28px rgba(100, 22, 20, .25), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.admin-live-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(216,176,106,.22);
  background: rgba(20,15,11,.56);
  color: #f5dfb0;
  font-size: .68rem;
  font-weight: 1000;
  letter-spacing: .14em;
}
.admin-live-badge.is-live { color: #d6f7d1; border-color: rgba(96,190,120,.34); }
.admin-live-badge.is-maintenance { color: #ffd4c8; border-color: rgba(248,113,113,.34); }
.admin-control-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(280px, .8fr); gap: 14px; }
.admin-control-tile {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(216,176,106,.14);
  background: rgba(12,10,8,.34);
}
.admin-control-tile-head { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.admin-control-tile-head span { color: rgba(231,206,166,.68); font-size: .68rem; font-weight: 1000; letter-spacing: .13em; text-transform: uppercase; }
.admin-control-tile-head strong { color: #f8ead2; text-align: right; }
.admin-control-tile label { display: grid; gap: 6px; color: rgba(231,206,166,.74); font-weight: 900; }
.admin-control-tile textarea,
.admin-control-tile input,
.admin-control-tile select,
.admin-token-row input,
.admin-filter-row input,
.admin-filter-row select,
.admin-dialog input,
.admin-dialog select,
.admin-dialog textarea {
  background: rgba(10,8,6,.66) !important;
  border: 1px solid rgba(216,176,106,.14) !important;
  color: rgba(245,234,215,.94) !important;
  border-radius: 14px !important;
}
.admin-audit-log {
  max-height: 184px;
  overflow: auto;
  display: grid;
  gap: 6px;
  padding-right: 3px;
}
.admin-audit-log div {
  padding: 7px 9px;
  border-radius: 12px;
  background: rgba(0,0,0,.22);
  color: rgba(231,206,166,.78);
  font-size: .74rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
@media (max-width: 1000px) { .admin-control-grid { grid-template-columns: 1fr; } }


/* v7.0.148 Admin Game Master Suite: command center, economy events, DB health and patch notes. */
.admin-gm-suite-card {
  border-color: rgba(216,176,106,.24) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(216,176,106,.15), transparent 34%),
    linear-gradient(145deg, rgba(39,29,22,.92), rgba(15,12,10,.96)) !important;
}

.admin-gm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.admin-gm-grid .admin-control-tile {
  min-height: 100%;
}

.admin-db-health-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-db-health-grid span,
.admin-db-warnings {
  display: grid;
  gap: 2px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(216,176,106,.14);
  background: rgba(12,10,8,.35);
}

.admin-db-health-grid strong,
.admin-db-warnings strong {
  color: rgba(250,240,222,.98);
  font-size: 1rem;
}

.admin-db-health-grid small,
.admin-db-warnings small {
  color: rgba(231,206,166,.72);
  font-size: .72rem;
}

.admin-player-command-center {
  display: grid;
  gap: 10px;
  margin: 10px 0;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(216,176,106,.18);
  background:
    radial-gradient(circle at 12% 0%, rgba(216,176,106,.10), transparent 34%),
    rgba(12,10,8,.34);
}

.compact-title h3 {
  margin: 0;
  color: rgba(250,240,222,.98);
}

.compact-title p {
  margin: 2px 0 0;
  color: rgba(231,206,166,.72);
}

.admin-command-grid {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.admin-command-grid button {
  min-height: 42px;
}

.admin-economy-tile input,
.admin-economy-tile select,
.admin-patch-notes-tile input,
.admin-patch-notes-tile textarea,
.admin-player-command-center input {
  border-color: rgba(216,176,106,.18) !important;
  background: rgba(12,10,8,.54) !important;
  color: rgba(250,240,222,.96) !important;
}

.admin-db-health-list {
  display: grid;
  gap: 10px;
}

@media (max-width: 1180px) {
  .admin-gm-grid {
    grid-template-columns: 1fr;
  }

  .admin-command-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .admin-command-grid,
  .admin-db-health-grid {
    grid-template-columns: 1fr;
  }
}


/* v7.0.149 Mode Select Dialog Rework: move Start Playing into Main Menu and choose solo mode from artwork cards. */
.start-card.start-card-v12 {
  grid-template-areas: 'profile avatar' !important;
  grid-template-rows: auto !important;
}

.start-card-v12 .nickname-field.mode-field,
.start-card-v12 .mode-info,
.start-card-v12 .account-actions {
  display: none !important;
}

.inventory-menu-grid .menu-card-start-btn {
  min-height: 44px !important;
  background: linear-gradient(180deg, rgba(242,206,133,.96), rgba(202,152,78,.92)) !important;
  color: #24180f !important;
  border-color: rgba(249,229,188,.32) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.20) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.18);
}

.inventory-menu-grid .menu-card-start-btn::before {
  content: '▶';
  margin-right: 7px;
  font-size: .78rem;
}

.inventory-menu-grid .menu-card-start-btn:disabled {
  opacity: .58;
  cursor: not-allowed;
  filter: grayscale(.25);
}

.mode-select-dialog {
  width: min(1040px, calc(100vw - 28px));
  max-width: 1040px;
  border: 0;
  padding: 0;
  background: transparent;
  color: rgba(250,240,222,.96);
}

.mode-select-dialog::backdrop {
  background: rgba(3, 4, 7, .74);
  backdrop-filter: blur(8px);
}

.mode-select-shell {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 16% 0%, rgba(216,176,106,.16), transparent 34%),
    linear-gradient(145deg, rgba(47,36,27,.96), rgba(17,13,10,.98));
  border: 1px solid rgba(222,198,160,.20);
  box-shadow: 0 30px 80px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.045);
}

.mode-select-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 4px 0;
}

.mode-select-head > div {
  display: grid;
  gap: 3px;
}

.mode-select-head span {
  color: rgba(231,206,166,.72);
  font-size: .68rem;
  font-weight: 1000;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.mode-select-head strong {
  color: #f8ead2;
  font-size: clamp(1.55rem, 2.4vw, 2.2rem);
  line-height: 1;
}

.mode-select-head small {
  color: rgba(243,232,213,.72);
  font-size: .86rem;
}

.mode-select-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mode-select-card {
  position: relative;
  display: grid;
  grid-template-columns: 154px minmax(0, 1fr);
  gap: 13px;
  align-items: stretch;
  min-height: 128px;
  padding: 10px;
  border-radius: 22px;
  border: 1px solid rgba(222,198,160,.14);
  background:
    radial-gradient(circle at 18% 0%, rgba(216,176,106,.08), transparent 38%),
    linear-gradient(145deg, rgba(34,26,20,.88), rgba(14,11,9,.94));
  color: rgba(250,240,222,.94);
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 16px 28px rgba(0,0,0,.16);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease;
}

.mode-select-card:hover {
  transform: translateY(-2px);
  border-color: rgba(216,176,106,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 22px 36px rgba(0,0,0,.22), 0 0 24px rgba(216,176,106,.08);
}

.mode-select-card.selected {
  border-color: rgba(242,206,133,.62);
  box-shadow: inset 0 0 0 1px rgba(242,206,133,.22), 0 24px 42px rgba(0,0,0,.26), 0 0 34px rgba(216,176,106,.16);
}

.mode-select-card.selected::after {
  content: 'Selected';
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(242,206,133,.96), rgba(202,152,78,.92));
  color: #24180f;
  font-size: .58rem;
  font-weight: 1000;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.mode-select-card:disabled {
  opacity: .48;
  cursor: not-allowed;
  filter: grayscale(.3);
}

.mode-select-card-art {
  position: relative;
  min-height: 108px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(216,176,106,.20);
  background: rgba(12,10,8,.52);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.mode-select-card-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.03);
}

.mode-select-card-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 6px;
  padding-right: 4px;
}

.mode-select-card-copy strong {
  color: #f8ead2;
  font-size: 1.08rem;
  line-height: 1.05;
}

.mode-select-card-copy em {
  color: rgba(243,232,213,.78);
  font-style: normal;
  font-size: .82rem;
  line-height: 1.35;
}

.mode-select-card-copy small {
  width: fit-content;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(216,176,106,.16);
  background: rgba(12,10,8,.40);
  color: rgba(231,206,166,.78);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mode-select-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 2px 4px 0;
}

.mode-select-actions button {
  min-width: 150px;
  min-height: 44px;
  border-radius: 16px !important;
}

@media (max-width: 900px) {
  .mode-select-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .mode-select-shell {
    padding: 14px;
    border-radius: 24px;
  }

  .mode-select-card {
    grid-template-columns: 112px minmax(0, 1fr);
    min-height: 116px;
  }

  .mode-select-card-art {
    min-height: 96px;
  }

  .mode-select-actions {
    flex-direction: column-reverse;
  }

  .mode-select-actions button {
    width: 100%;
  }
}


/* v7.0.150 Header Logo No-Frame Mini Patch: smaller top logo without dark frame to reduce menu height. */
.start-screen {
  gap: 4px !important;
  padding-top: clamp(6px, 1.1vh, 14px) !important;
}

.main-menu-kicker {
  padding: 5px 11px !important;
  font-size: .60rem !important;
  margin-bottom: 0 !important;
}

.main-menu-kicker img {
  width: 15px !important;
  height: 15px !important;
}

.main-brand-lockup {
  width: fit-content !important;
  max-width: min(540px, calc(100% - 38px)) !important;
  margin: -2px auto -1px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.main-brand-lockup::before,
.main-brand-lockup::after {
  display: none !important;
}

.main-brand-logo {
  width: min(100%, 450px) !important;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .34)) !important;
}

.start-screen .tagline {
  max-width: 510px !important;
  margin: -2px auto 3px !important;
  font-size: .82rem !important;
  line-height: 1.24 !important;
}

.start-card.start-card-v12 {
  margin-top: 0 !important;
}

.main-menu-footer {
  margin-top: 0 !important;
}

@media (min-width: 921px) {
  .main-brand-lockup {
    max-width: min(520px, calc(100% - 38px)) !important;
  }

  .main-brand-logo {
    width: min(100%, 440px) !important;
  }
}

@media (max-width: 760px) {
  .start-screen {
    gap: 4px !important;
    padding-top: 8px !important;
  }

  .main-brand-lockup {
    max-width: min(88vw, 390px) !important;
    margin: -1px auto -1px !important;
  }

  .main-brand-logo {
    width: min(100%, 360px) !important;
  }

  .start-screen .tagline {
    max-width: 38ch !important;
    font-size: .72rem !important;
    margin-bottom: 3px !important;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 560px) {
  .main-brand-lockup {
    max-width: min(280px, 34vw) !important;
  }

  .main-brand-logo {
    width: 100% !important;
  }
}


/* v7.0.154 Inventory Cabinet Layout Rework: cleaner display cards, readable labels, calmer rarity art and safer 3D framing. */
.inventory-dialog-shell {
  gap: 12px !important;
  padding: 16px !important;
}
.inventory-dialog-head {
  padding: 2px 4px 0 !important;
}
.inventory-dialog-head strong {
  font-size: 1.62rem !important;
}
.inventory-dialog-body .inventory-items-upgraded {
  max-height: min(476px, calc(100dvh - 248px)) !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet {
  padding: 14px 14px 12px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(216,176,106,.08), transparent 32%),
    linear-gradient(180deg, rgba(58,42,29,.48), rgba(18,14,10,.90)) !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-toolbar {
  margin: 0 0 10px !important;
  padding: 0 2px !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-toolbar span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: rgba(28,21,16,.72) !important;
  border: 1px solid rgba(214,180,129,.16) !important;
  color: rgba(245,229,198,.88) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shop-mini {
  min-height: 36px !important;
  padding: 7px 16px !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
}
.inventory-shelf-pages {
  min-height: 430px !important;
}
.inventory-page-grid {
  min-height: 408px !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-items-upgraded {
  gap: 8px !important;
  padding: 8px !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(17,13,10,.72), rgba(13,10,8,.88)) !important;
  border: 1px solid rgba(214,180,129,.10) !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot {
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(23,18,14,.92), rgba(12,10,8,.98)) !important;
  border-color: rgba(214,180,129,.09) !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot-empty {
  background:
    linear-gradient(180deg, rgba(16,13,10,.88), rgba(10,8,7,.95)) !important;
  border-style: solid !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot-empty span {
  color: rgba(233,219,195,.26) !important;
  font-size: .56rem !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(48,36,25,.88), rgba(19,14,11,.96)) !important;
  border: 1px solid rgba(214,180,129,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 20px rgba(0,0,0,.14) !important;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(232,203,150,.26) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 24px rgba(0,0,0,.18) !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(255,255,255,.06), transparent 28%),
    var(--inventory-tier-bg) right -28px top -12px / 58% auto no-repeat !important;
  opacity: .20 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 28%, transparent 66%, rgba(0,0,0,.10)) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card.rarity-legendary {
  border-color: rgba(227,180,98,.30) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(227,180,98,.08), 0 12px 22px rgba(0,0,0,.16) !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card.rarity-event {
  border-color: rgba(203,127,219,.20) !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card.equipped {
  border-color: rgba(232,203,150,.34) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(232,203,150,.09), 0 14px 26px rgba(0,0,0,.20) !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card .inventory-item-hero {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  z-index: 2 !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card .inventory-item-tier-chip {
  position: absolute !important;
  left: 10px !important;
  top: 10px !important;
  right: auto !important;
  z-index: 7 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 22px !important;
  max-width: calc(100% - 20px) !important;
  padding: 0 8px 0 7px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(35,26,19,.96), rgba(18,12,10,.96)) !important;
  border: 1px solid rgba(214,180,129,.18) !important;
  color: rgba(255,245,228,.94) !important;
  font-size: .50rem !important;
  font-weight: 1000 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 8px 16px rgba(0,0,0,.20) !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card .inventory-item-tier-chip-icon {
  width: 12px !important;
  height: 12px !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 12px !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card .inventory-item-tier-chip-icon .shop-tier-glyph {
  width: 12px !important;
  height: 12px !important;
  object-fit: contain !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card .inventory-item-tier-chip-label {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-card-avatar3d {
  position: absolute !important;
  inset: 24px 14px 34px 14px !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 3 !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-card-avatar3d canvas,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-card-avatar3d .avatar3d-empty {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-card-avatar3d canvas {
  transform: translateY(5px) scale(1.02) !important;
  transform-origin: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.22)) !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card[data-character-key="alien"] .inventory-card-avatar3d canvas {
  transform: translateY(6px) scale(1.02) !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card.rarity-event .inventory-card-avatar3d {
  inset: 22px 16px 34px 16px !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card.rarity-event .inventory-card-avatar3d canvas {
  transform: translateY(7px) scale(.88) !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card[data-character-key="banana-cat"] .inventory-card-avatar3d {
  inset: 18px 24px 38px 24px !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card[data-character-key="banana-cat"] .inventory-card-avatar3d canvas {
  transform: translateY(6px) scale(.74) !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card .inventory-card-meta {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 18px 12px 10px !important;
  background: linear-gradient(180deg, rgba(13,10,8,0), rgba(13,10,8,.68) 36%, rgba(13,10,8,.92)) !important;
  z-index: 6 !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card strong {
  display: block !important;
  margin: 0 !important;
  color: rgba(255,247,233,.96) !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.72) !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card em {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 20px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  color: rgba(255,239,211,.90) !important;
  font-size: .51rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  background: rgba(16,13,10,.78) !important;
  border: 1px solid rgba(214,180,129,.14) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.62) !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card.equipped em {
  background: linear-gradient(180deg, rgba(108,84,44,.92), rgba(70,52,28,.96)) !important;
  border-color: rgba(232,203,150,.22) !important;
  color: rgba(255,248,231,.98) !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card.remove {
  background: linear-gradient(180deg, rgba(60,25,28,.80), rgba(24,13,13,.94)) !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card.remove::before {
  background: radial-gradient(circle at 70% 16%, rgba(255,162,162,.12), transparent 34%) !important;
  opacity: 1 !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card.remove .inventory-item-tier-chip {
  left: auto !important;
  right: 10px !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-clear-slot .inventory-item-card .inventory-card-meta,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-clear-slot .inventory-item-card strong,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-clear-slot .inventory-item-card em {
  z-index: 7 !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-pagebar {
  padding-top: 4px !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-page-btn {
  min-width: 32px !important;
  height: 26px !important;
}
@media (max-width: 760px) {
  .inventory-dialog-shell {
    padding: 14px !important;
  }
  .inventory-dialog-head strong {
    font-size: 1.36rem !important;
  }
  .inventory-dialog-body .inventory-items-upgraded {
    max-height: none !important;
  }
  .inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card .inventory-item-tier-chip {
    font-size: .46rem !important;
    min-height: 20px !important;
  }
  .inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-card-avatar3d {
    inset: 22px 10px 34px 10px !important;
  }
  .inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card[data-character-key="banana-cat"] .inventory-card-avatar3d {
    inset: 18px 16px 36px 16px !important;
  }
}


/* v7.0.155 Inventory Cabinet Compact Fix: smaller rarity badges, readable bottom labels and safer 3D model framing. */
.inventory-dialog .inventory-dialog-head strong {
  font-size: 1.55rem !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet {
  padding: 14px !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-toolbar {
  margin-bottom: 10px !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-items-upgraded,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-pages {
  min-height: 438px !important;
  max-height: 438px !important;
  padding: 8px !important;
  overflow: hidden !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-page-grid {
  min-height: 420px !important;
  height: 420px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot {
  border-radius: 17px !important;
  overflow: hidden !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 17px !important;
  background: linear-gradient(180deg, rgba(37,29,22,.92), rgba(13,10,8,.98)) !important;
  border: 1px solid rgba(214,180,129,.15) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 10px 20px rgba(0,0,0,.12) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,245,228,.075), transparent 34%),
    var(--inventory-tier-bg) right -18px top -10px / 48% auto no-repeat !important;
  opacity: .16 !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card.rarity-legendary::before {
  opacity: .22 !important;
  background:
    radial-gradient(circle at 50% 8%, rgba(235,190,98,.11), transparent 36%),
    var(--inventory-tier-bg) right -18px top -8px / 50% auto no-repeat !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card.rarity-event::before {
  opacity: .18 !important;
  background:
    radial-gradient(circle at 50% 8%, rgba(220,124,229,.09), transparent 36%),
    var(--inventory-tier-bg) right -18px top -8px / 50% auto no-repeat !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card .inventory-item-hero {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  z-index: 2 !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-card-avatar3d {
  position: absolute !important;
  inset: 28px 14px 36px 14px !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-card-avatar3d canvas,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-card-avatar3d .avatar3d-empty {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-card-avatar3d canvas {
  transform: translateY(6px) scale(.98) !important;
  transform-origin: center center !important;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.28)) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card[data-character-key="alien"] .inventory-card-avatar3d {
  inset: 26px 10px 36px 10px !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card[data-character-key="alien"] .inventory-card-avatar3d canvas {
  transform: translateY(7px) scale(1.02) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card[data-character-key="banana-cat"] .inventory-card-avatar3d {
  inset: 22px 22px 38px 22px !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card[data-character-key="banana-cat"] .inventory-card-avatar3d canvas {
  transform: translateY(7px) scale(.76) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card .inventory-item-tier-chip {
  position: absolute !important;
  left: 10px !important;
  top: 9px !important;
  right: auto !important;
  z-index: 8 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 20px !important;
  max-width: calc(100% - 20px) !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(32,23,17,.96), rgba(13,10,8,.98)) !important;
  border: 1px solid rgba(214,180,129,.18) !important;
  color: rgba(255,245,228,.94) !important;
  box-shadow: 0 8px 16px rgba(0,0,0,.22) !important;
  font-size: .46rem !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card .inventory-item-tier-chip-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 11px !important;
  height: 11px !important;
  flex: 0 0 11px !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card .inventory-item-tier-chip-icon .shop-tier-glyph,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card .inventory-item-tier-chip .shop-tier-glyph {
  width: 11px !important;
  height: 11px !important;
  max-width: 11px !important;
  max-height: 11px !important;
  object-fit: contain !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card .inventory-item-tier-chip-label {
  display: inline-block !important;
  font-size: .46rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card .inventory-item-tier-chip.shop-rarity-image-badge,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card .inventory-item-tier-chip-event.shop-rarity-image-badge {
  width: 52px !important;
  max-width: 52px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card .inventory-card-meta {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  min-height: 38px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 8px !important;
  padding: 18px 10px 8px !important;
  background: linear-gradient(180deg, rgba(10,8,6,0), rgba(10,8,6,.78) 40%, rgba(10,8,6,.96)) !important;
  z-index: 7 !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card strong {
  position: relative !important;
  z-index: 8 !important;
  display: block !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: rgba(255,248,235,.98) !important;
  font-size: .68rem !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  text-align: left !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.82) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card em {
  position: relative !important;
  z-index: 8 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 18px !important;
  max-width: 72px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  background: rgba(15,12,9,.82) !important;
  border: 1px solid rgba(214,180,129,.14) !important;
  color: rgba(245,232,207,.86) !important;
  font-size: .48rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card.equipped em {
  background: linear-gradient(180deg, rgba(129,95,45,.96), rgba(77,54,27,.98)) !important;
  color: rgba(255,248,231,.98) !important;
  border-color: rgba(232,203,150,.22) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card.remove .inventory-item-tier-chip {
  left: auto !important;
  right: 10px !important;
  top: 9px !important;
  font-size: .44rem !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card.remove {
  background: linear-gradient(180deg, rgba(55,24,27,.88), rgba(17,10,10,.98)) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card.remove::before {
  opacity: .58 !important;
  background: radial-gradient(circle at 76% 12%, rgba(226,116,116,.13), transparent 34%) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-empty,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot-empty {
  opacity: .55 !important;
}

@media (max-width: 760px) {
  .inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-items-upgraded,
  .inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-pages {
    max-height: none !important;
    min-height: auto !important;
  }
  .inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-card-avatar3d {
    inset: 26px 12px 38px 12px !important;
  }
  .inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card[data-character-key="banana-cat"] .inventory-card-avatar3d {
    inset: 22px 18px 40px 18px !important;
  }
}


/* v7.0.156 Inventory Cabinet Card Polish: cleaner remove card, slightly larger model previews, and calmer card backplates. */
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card::before {
  background:
    radial-gradient(circle at 50% 10%, rgba(255,245,228,.055), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 38%) !important;
  opacity: 1 !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card.rarity-legendary {
  background:
    radial-gradient(circle at 78% 18%, rgba(236,184,85,.14), transparent 34%),
    linear-gradient(180deg, rgba(52,39,24,.95), rgba(14,10,8,.98)) !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card.rarity-event {
  background:
    radial-gradient(circle at 78% 16%, rgba(191,95,211,.16), transparent 32%),
    linear-gradient(180deg, rgba(40,24,47,.94), rgba(14,10,10,.98)) !important;
  border-color: rgba(205,129,222,.22) !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card.rarity-event::before,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card.rarity-legendary::before {
  background:
    radial-gradient(circle at 50% 10%, rgba(255,245,228,.045), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.015), transparent 38%) !important;
  opacity: 1 !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-card-avatar3d {
  inset: 24px 12px 34px 12px !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-card-avatar3d canvas {
  transform: translateY(5px) scale(1.04) !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card[data-character-key="alien"] .inventory-card-avatar3d {
  inset: 22px 8px 34px 8px !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card[data-character-key="alien"] .inventory-card-avatar3d canvas {
  transform: translateY(6px) scale(1.10) !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card[data-character-key="banana-cat"] .inventory-card-avatar3d {
  inset: 18px 16px 34px 16px !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card[data-character-key="banana-cat"] .inventory-card-avatar3d canvas {
  transform: translateY(4px) scale(.84) !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card .inventory-card-meta {
  min-height: 42px !important;
  padding: 18px 10px 10px !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card strong {
  font-size: .70rem !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card em {
  min-height: 19px !important;
  max-width: 82px !important;
  font-size: .50rem !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card.remove {
  background:
    radial-gradient(circle at 78% 12%, rgba(232,123,123,.12), transparent 30%),
    linear-gradient(180deg, rgba(55,24,27,.86), rgba(17,10,10,.98)) !important;
  border-color: rgba(197,114,114,.18) !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card.remove::before {
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.035), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.015), transparent 35%) !important;
  opacity: 1 !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card.remove .inventory-item-hero-remove {
  position: absolute !important;
  inset: 0 !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card.remove .inventory-remove-chip {
  position: absolute !important;
  right: 10px !important;
  top: 10px !important;
  z-index: 8 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 18px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: rgba(21,15,15,.82) !important;
  border: 1px solid rgba(224,169,169,.14) !important;
  color: rgba(255,236,236,.86) !important;
  font-size: .44rem !important;
  font-weight: 950 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card.remove .inventory-card-meta-remove {
  min-height: 48px !important;
  padding: 18px 12px 12px !important;
  grid-template-columns: 1fr !important;
  align-items: end !important;
  justify-items: start !important;
  gap: 6px !important;
  background: linear-gradient(180deg, rgba(12,8,8,0), rgba(16,10,10,.72) 34%, rgba(16,10,10,.94)) !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card.remove strong {
  color: rgba(255,241,241,.95) !important;
}
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card.remove em {
  max-width: none !important;
  background: rgba(21,15,15,.82) !important;
  border-color: rgba(224,169,169,.14) !important;
  color: rgba(255,236,236,.88) !important;
}
@media (max-width: 760px) {
  .inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card[data-character-key="banana-cat"] .inventory-card-avatar3d {
    inset: 18px 12px 34px 12px !important;
  }
}


/* v7.0.157 inventory rarity frame pack: dedicated collectible card art pass. */
.inventory-shelf-slot .inventory-item.inventory-item-card {
  background:
    linear-gradient(180deg, rgba(6,5,4,.06) 0%, rgba(8,6,4,.22) 44%, rgba(8,6,4,.58) 100%),
    var(--inventory-tier-bg) center/cover no-repeat !important;
  border: 1px solid rgba(222,198,160,.16) !important;
  box-shadow:
    0 14px 28px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.inventory-shelf-slot .inventory-item.inventory-item-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 32%);
  pointer-events: none;
  z-index: 0;
}

.inventory-shelf-slot .inventory-item.inventory-item-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48%;
  background: linear-gradient(180deg, rgba(7,5,4,0) 0%, rgba(7,5,4,.40) 34%, rgba(7,5,4,.86) 100%);
  pointer-events: none;
  z-index: 0;
}

.inventory-shelf-slot .inventory-item-card .inventory-item-hero,
.inventory-shelf-slot .inventory-item-card .inventory-card-meta,
.inventory-shelf-slot .inventory-item-card strong,
.inventory-shelf-slot .inventory-item-card em {
  position: relative;
  z-index: 2;
}

.inventory-shelf-slot .inventory-item-card .inventory-item-hero {
  overflow: hidden;
  border-radius: 12px;
}

.inventory-shelf-slot .inventory-card-avatar3d {
  left: 8px !important;
  right: 8px !important;
  width: auto !important;
  top: 4px !important;
  bottom: auto !important;
  height: 88px !important;
  min-height: 88px !important;
  max-height: 88px !important;
}

.inventory-shelf-slot .inventory-card-avatar3d canvas,
.inventory-shelf-slot .inventory-card-avatar3d .avatar3d-empty {
  height: 88px !important;
  min-height: 88px !important;
  max-height: 88px !important;
}

.inventory-shelf-slot .inventory-card-avatar3d canvas {
  transform: translateY(-1px) scale(1.42) !important;
  transform-origin: center center !important;
}

.inventory-shelf-slot .inventory-item-card .inventory-item-tier-chip {
  left: 8px !important;
  right: auto !important;
  top: 8px !important;
  min-height: 22px !important;
  padding: 0 9px !important;
  gap: 6px !important;
  background: rgba(17,13,10,.76) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: rgba(250, 239, 218, .96) !important;
  box-shadow: 0 7px 18px rgba(0,0,0,.26);
}

.inventory-item-tier-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.inventory-item-tier-chip-icon .shop-tier-glyph {
  width: 11px !important;
  height: 11px !important;
  min-width: 11px !important;
  min-height: 11px !important;
  opacity: .98 !important;
}

.inventory-item-tier-chip-label {
  letter-spacing: .10em;
}

.inventory-shelf-slot .inventory-card-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 7px;
  margin-top: auto;
}

.inventory-shelf-slot .inventory-item-card strong {
  color: rgba(249,238,220,.96) !important;
  font-size: .72rem !important;
  line-height: 1.05 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.38);
}

.inventory-shelf-slot .inventory-item-card em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(22,17,13,.82);
  border: 1px solid rgba(222,198,160,.16);
  color: rgba(245,234,214,.84) !important;
  font-size: .55rem !important;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 8px 16px rgba(0,0,0,.18);
}

.inventory-shelf-slot .inventory-item-card.equipped em {
  background: rgba(115, 84, 34, .80);
  border-color: rgba(235, 200, 124, .28);
  color: rgba(255,245,223,.94) !important;
}

.inventory-shelf-slot .inventory-item-card.rarity-basic { border-color: rgba(174, 161, 145, .18) !important; }
.inventory-shelf-slot .inventory-item-card.rarity-rare,
.inventory-shelf-slot .inventory-item-card.rarity-exotic { border-color: rgba(80, 170, 176, .24) !important; }
.inventory-shelf-slot .inventory-item-card.rarity-epic,
.inventory-shelf-slot .inventory-item-card.rarity-mythic { border-color: rgba(150, 102, 205, .26) !important; }
.inventory-shelf-slot .inventory-item-card.rarity-legendary,
.inventory-shelf-slot .inventory-item-card.rarity-impossible { border-color: rgba(228, 182, 95, .28) !important; }
.inventory-shelf-slot .inventory-item-card.rarity-event { border-color: rgba(198, 116, 185, .24) !important; }

.inventory-shelf-slot .inventory-item.inventory-item-card.remove {
  background:
    linear-gradient(180deg, rgba(26,12,12,.18) 0%, rgba(26,12,12,.30) 40%, rgba(26,12,12,.72) 100%),
    var(--inventory-tier-bg) center/cover no-repeat !important;
  border-color: rgba(180, 111, 102, .28) !important;
}

.inventory-remove-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(21, 14, 12, .72);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(249,238,220,.92);
  font-size: .56rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.inventory-remove-card-clean .inventory-item-hero {
  min-height: 46px !important;
}

.inventory-remove-card-clean .inventory-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.inventory-remove-card-clean .inventory-card-meta strong {
  color: rgba(253,235,229,.96) !important;
}

.inventory-remove-card-clean .inventory-card-meta em {
  background: rgba(48, 22, 22, .80);
  border-color: rgba(221, 172, 165, .18);
  color: rgba(248, 221, 214, .90) !important;
}

.inventory-shelf-slot-empty.inventory-shelf-slot-empty-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(8,6,4,.16) 0%, rgba(8,6,4,.34) 42%, rgba(8,6,4,.60) 100%),
    url('/assets/ui/inventory/inventory-card-empty.png') center/cover no-repeat !important;
  border: 1px solid rgba(222,198,160,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.inventory-shelf-slot-empty.inventory-shelf-slot-empty-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  pointer-events: none;
}

.inventory-shelf-slot-empty.inventory-shelf-slot-empty-card span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(15, 11, 8, .56);
  border: 1px solid rgba(222,198,160,.10);
  color: rgba(243,232,213,.50) !important;
}

@media (max-width: 760px) {
  .inventory-shelf-slot .inventory-card-avatar3d,
  .inventory-shelf-slot .inventory-card-avatar3d canvas,
  .inventory-shelf-slot .inventory-card-avatar3d .avatar3d-empty {
    height: 84px !important;
    min-height: 84px !important;
    max-height: 84px !important;
  }

  .inventory-shelf-slot .inventory-card-avatar3d canvas {
    transform: translateY(-1px) scale(1.36) !important;
  }

  .inventory-shelf-slot .inventory-card-meta {
    gap: 6px;
  }
}


/* v7.0.158 Inventory Frame CSS Activation Fix: higher-specificity overrides so v7.0.157 inventory card art wins over older cabinet polish rules. */
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card {
  background:
    linear-gradient(180deg, rgba(6,5,4,.04) 0%, rgba(8,6,4,.18) 42%, rgba(8,6,4,.54) 100%),
    var(--inventory-tier-bg) center / cover no-repeat !important;
  border: 1px solid rgba(222,198,160,.18) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card.rarity-basic,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card.rarity-rare,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card.rarity-epic,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card.rarity-legendary,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card.rarity-mythic,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card.rarity-exotic,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card.rarity-impossible,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card.rarity-event {
  background:
    linear-gradient(180deg, rgba(6,5,4,.04) 0%, rgba(8,6,4,.16) 42%, rgba(8,6,4,.56) 100%),
    var(--inventory-tier-bg) center / cover no-repeat !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card.rarity-legendary,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card.rarity-impossible {
  border-color: rgba(239, 197, 113, .34) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.25), 0 0 0 1px rgba(239,197,113,.08), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card.rarity-event {
  border-color: rgba(205, 132, 220, .28) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.25), 0 0 0 1px rgba(205,132,220,.07), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 32%) !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 48% !important;
  background: linear-gradient(180deg, rgba(7,5,4,0) 0%, rgba(7,5,4,.34) 34%, rgba(7,5,4,.82) 100%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card .inventory-item-hero,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card .inventory-card-meta,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card strong,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card em {
  position: relative !important;
  z-index: 2 !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-card-avatar3d {
  top: 2px !important;
  left: 6px !important;
  right: 6px !important;
  bottom: auto !important;
  width: auto !important;
  height: 92px !important;
  min-height: 92px !important;
  max-height: 92px !important;
  overflow: visible !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-card-avatar3d canvas,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-card-avatar3d .avatar3d-empty {
  height: 92px !important;
  min-height: 92px !important;
  max-height: 92px !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-card-avatar3d canvas {
  transform: translateY(-1px) scale(1.44) !important;
  transform-origin: center center !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card[data-character-key="banana-cat"] .inventory-card-avatar3d canvas {
  transform: translateY(0) scale(.92) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card .inventory-item-tier-chip {
  left: 8px !important;
  right: auto !important;
  top: 8px !important;
  min-height: 22px !important;
  padding: 0 9px !important;
  background: rgba(17,13,10,.78) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(250,239,218,.96) !important;
  box-shadow: 0 7px 18px rgba(0,0,0,.26) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card .inventory-card-meta {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 7px !important;
  margin-top: auto !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card strong {
  color: rgba(249,238,220,.96) !important;
  font-size: .72rem !important;
  line-height: 1.05 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.42) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card em {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: rgba(22,17,13,.82) !important;
  border: 1px solid rgba(222,198,160,.16) !important;
  color: rgba(245,234,214,.86) !important;
  font-size: .55rem !important;
  font-style: normal !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 8px 16px rgba(0,0,0,.18) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card.equipped em {
  background: rgba(115,84,34,.82) !important;
  border-color: rgba(235,200,124,.28) !important;
  color: rgba(255,245,223,.96) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot-empty.inventory-shelf-slot-empty-card {
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(8,6,4,.16) 0%, rgba(8,6,4,.34) 42%, rgba(8,6,4,.60) 100%),
    url('/assets/ui/inventory/inventory-card-empty.png') center / cover no-repeat !important;
  border: 1px solid rgba(222,198,160,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card.remove,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card.remove.inventory-remove-card-clean {
  background:
    linear-gradient(180deg, rgba(26,12,12,.18) 0%, rgba(26,12,12,.30) 40%, rgba(26,12,12,.72) 100%),
    var(--inventory-tier-bg) center / cover no-repeat !important;
  border-color: rgba(180,111,102,.28) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-remove-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: rgba(21,14,12,.72) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(249,238,220,.92) !important;
  font-size: .56rem !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}


/* v7.0.159 Inventory Frame Layout Fix: keep framed card art, restore visible 3D previews and pin labels to the bottom bar. */
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card .inventory-item-hero {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  overflow: visible !important;
  border-radius: inherit !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-card-avatar3d {
  position: absolute !important;
  inset: 22px 14px 36px 14px !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 4 !important;
  pointer-events: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-card-avatar3d canvas,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-card-avatar3d .avatar3d-empty {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-card-avatar3d canvas {
  transform: translateY(2px) scale(1.10) !important;
  transform-origin: center center !important;
  filter: drop-shadow(0 7px 14px rgba(0,0,0,.36)) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card[data-character-key="alien"] .inventory-card-avatar3d {
  inset: 18px 12px 35px 12px !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card[data-character-key="alien"] .inventory-card-avatar3d canvas {
  transform: translateY(3px) scale(1.16) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card[data-character-key="banana-cat"] .inventory-card-avatar3d {
  inset: 16px 24px 36px 24px !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card[data-character-key="banana-cat"] .inventory-card-avatar3d canvas {
  transform: translateY(2px) scale(.86) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card .inventory-item-tier-chip {
  position: absolute !important;
  left: 10px !important;
  top: 10px !important;
  right: auto !important;
  z-index: 8 !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card .inventory-card-meta {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  min-height: 39px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 16px 11px 9px !important;
  background: linear-gradient(180deg, rgba(7,5,4,0) 0%, rgba(7,5,4,.58) 42%, rgba(7,5,4,.92) 100%) !important;
  z-index: 7 !important;
  pointer-events: none !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card strong,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card em {
  position: relative !important;
  z-index: 8 !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card em {
  pointer-events: none !important;
  white-space: nowrap !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card.remove .inventory-item-hero-remove {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card.remove .inventory-card-meta,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card.remove .inventory-card-meta-remove {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  min-height: 48px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  padding: 18px 12px 12px !important;
  background: linear-gradient(180deg, rgba(18,8,8,0) 0%, rgba(20,9,9,.62) 38%, rgba(20,9,9,.94) 100%) !important;
  z-index: 7 !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-remove-chip {
  position: absolute !important;
  right: 10px !important;
  top: 10px !important;
  z-index: 8 !important;
  margin: 0 !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card::after {
  z-index: 1 !important;
  height: 40% !important;
  background: linear-gradient(180deg, rgba(7,5,4,0) 0%, rgba(7,5,4,.28) 38%, rgba(7,5,4,.76) 100%) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item.inventory-item-card:hover .inventory-card-avatar3d canvas {
  transform: translateY(0) scale(1.13) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card[data-character-key="alien"]:hover .inventory-card-avatar3d canvas {
  transform: translateY(1px) scale(1.19) !important;
}

.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card[data-character-key="banana-cat"]:hover .inventory-card-avatar3d canvas {
  transform: translateY(0) scale(.89) !important;
}

@media (max-width: 760px) {
  .inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-card-avatar3d {
    inset: 20px 10px 36px 10px !important;
  }
  .inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-shelf-slot .inventory-item-card .inventory-card-meta {
    padding: 15px 10px 8px !important;
  }
}


/* v7.0.160 Mobile Main Menu Portrait Fix: stack the hub cleanly on phones, reduce header height and turn the right menu into a compact two-column mobile layout. */
@media (max-width: 760px) {
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .start-screen {
    width: min(100%, 430px) !important;
    margin: 0 auto !important;
    padding: 8px 10px 18px !important;
    gap: 6px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .main-menu-kicker {
    margin-bottom: 2px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .main-brand-lockup {
    max-width: min(86vw, 320px) !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .main-brand-logo {
    width: min(100%, 300px) !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .start-screen .tagline {
    max-width: 30ch !important;
    font-size: .68rem !important;
    line-height: 1.24 !important;
    margin-bottom: 4px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .start-card.start-card-v12 {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      'avatar'
      'profile' !important;
    grid-template-rows: auto auto !important;
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 22px !important;
    align-items: stretch !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .start-card-v12 .avatar-picker {
    grid-area: avatar !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .start-card-v12 .account-stats {
    grid-area: profile !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-launch-card.inventory-menu-card.inventory-menu-card-clean {
    height: auto !important;
    min-height: 0 !important;
    padding: 12px !important;
    gap: 10px !important;
    border-radius: 20px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-menu-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .menu-card-btn,
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .menu-card-btn.menu-card-btn-primary {
    min-height: 50px !important;
    height: auto !important;
    padding: 12px 10px !important;
    border-radius: 16px !important;
    font-size: .95rem !important;
    line-height: 1.15 !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .inventory-menu-grid .menu-card-start-btn {
    grid-column: 1 / -1 !important;
    min-height: 54px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-profile-card.home-profile-card-3d {
    grid-template-columns: minmax(112px, 132px) 1fr !important;
    gap: 10px !important;
    align-items: start !important;
    padding: 12px !important;
    border-radius: 20px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-avatar3d .avatar3d-view {
    min-height: 182px !important;
    height: 182px !important;
    border-radius: 20px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-profile-main {
    align-content: start !important;
    gap: 6px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-profile-main strong {
    font-size: 1.05rem !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .equipped-character-name {
    font-size: .74rem !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-profile-mini {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 6px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-stat-card {
    min-height: 58px !important;
    padding: 9px 10px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-stat-card label {
    font-size: .58rem !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-stat-card strong {
    font-size: .92rem !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-profile-card .mode-bests {
    margin-top: 8px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-profile-card .mode-bests summary {
    padding: 10px 12px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-profile-card .mode-bests-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-profile-card .mode-bests-grid div {
    min-height: 56px !important;
    padding: 8px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .main-menu-footer {
    width: 100% !important;
    padding: 0 2px 14px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .status-pill {
    justify-self: center !important;
  }
}

@media (max-width: 420px) {
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-profile-card.home-profile-card-3d {
    grid-template-columns: 104px 1fr !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-avatar3d .avatar3d-view {
    min-height: 168px !important;
    height: 168px !important;
  }

  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .menu-card-btn,
  body.rq-touch-device.rq-phone-portrait:not(.is-playing) .menu-card-btn.menu-card-btn-primary {
    min-height: 48px !important;
    font-size: .90rem !important;
  }
}


/* v7.0.161 Mobile Landscape Gate for Main Menu: phone portrait shows a rotate gate; phone landscape/desktop keep the normal menu. */
@media (hover: none) and (pointer: coarse), (max-width: 760px) {
  body.rq-phone-menu-portrait-gate:not(.is-playing) {
    overflow: hidden !important;
    min-height: 100dvh !important;
  }

  body.rq-phone-menu-portrait-gate:not(.is-playing) .start-screen {
    filter: blur(4px) saturate(.72) brightness(.55) !important;
    pointer-events: none !important;
    user-select: none !important;
  }

  body.rq-phone-menu-portrait-gate:not(.is-playing) .mobile-landscape-gate {
    display: grid !important;
    z-index: 2147483640 !important;
    background:
      radial-gradient(circle at 50% 12%, rgba(216,176,106,.16), transparent 32%),
      linear-gradient(180deg, rgba(7, 6, 5, .82), rgba(7, 6, 5, .94)),
      var(--rq-menu-bg),
      #070604 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  body.rq-phone-menu-portrait-gate:not(.is-playing) .mobile-landscape-card {
    width: min(390px, calc(100vw - 34px)) !important;
    padding: 24px 20px 22px !important;
    border-radius: 28px !important;
    border: 1px solid rgba(216,176,106,.28) !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(216,176,106,.20), transparent 38%),
      linear-gradient(145deg, rgba(48,36,26,.94), rgba(15,12,10,.96)) !important;
    box-shadow: 0 30px 90px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.06) !important;
    color: rgba(250,240,222,.96) !important;
  }

  body.rq-phone-menu-portrait-gate:not(.is-playing) .mobile-landscape-card img {
    width: 76px !important;
    height: 76px !important;
    filter: drop-shadow(0 14px 26px rgba(216,176,106,.20)) !important;
  }

  body.rq-phone-menu-portrait-gate:not(.is-playing) .mobile-landscape-kicker {
    color: rgba(231,206,166,.82) !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
  }

  body.rq-phone-menu-portrait-gate:not(.is-playing) .mobile-landscape-card h2 {
    margin: 0 !important;
    color: #f8ead2 !important;
    font-size: clamp(1.85rem, 8vw, 2.6rem) !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
  }

  body.rq-phone-menu-portrait-gate:not(.is-playing) .mobile-landscape-card p:not(.mobile-landscape-kicker) {
    color: rgba(243,232,213,.76) !important;
    font-size: .95rem !important;
    line-height: 1.45 !important;
  }

  body.rq-phone-menu-portrait-gate:not(.is-playing) .mobile-landscape-card .primary-btn {
    min-height: 46px !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(242,206,133,.96), rgba(202,152,78,.92)) !important;
    color: #24180f !important;
    border: 1px solid rgba(249,229,188,.34) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.20) !important;
  }

  body.rq-phone-menu-portrait-gate:not(.is-playing) .mobile-landscape-card small {
    color: rgba(231,206,166,.62) !important;
  }
}

@media (orientation: landscape) {
  body.rq-phone-menu-portrait-gate:not(.is-playing) .mobile-landscape-gate {
    display: none !important;
  }
}

/* v7.0.162 Mobile Landscape Compact Main Menu: compact phone landscape control desk while keeping desktop unchanged. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 620px) {
  html,
  body:not(.is-playing) {
    min-height: 100dvh !important;
    overflow-x: hidden !important;
  }

  body:not(.is-playing) .app {
    min-height: auto !important;
  }

  body:not(.is-playing) .start-screen {
    width: min(100vw, 1060px) !important;
    min-height: auto !important;
    margin: 0 auto !important;
    padding: 4px 10px 10px !important;
    gap: 4px !important;
    align-content: start !important;
  }

  body:not(.is-playing) .main-menu-kicker {
    min-height: 20px !important;
    padding: 4px 10px !important;
    margin: 0 auto 0 !important;
    font-size: .52rem !important;
    letter-spacing: .14em !important;
  }

  body:not(.is-playing) .main-menu-kicker img {
    width: 13px !important;
    height: 13px !important;
  }

  body:not(.is-playing) .main-brand-lockup {
    max-width: min(300px, 34vw) !important;
    margin: -2px auto -4px !important;
    padding: 0 !important;
  }

  body:not(.is-playing) .main-brand-logo {
    width: 100% !important;
    max-width: 300px !important;
  }

  body:not(.is-playing) .start-screen .tagline {
    max-width: 54ch !important;
    margin: -3px auto 2px !important;
    font-size: .58rem !important;
    line-height: 1.12 !important;
    opacity: .72 !important;
  }

  body:not(.is-playing) .start-card.start-card-v12 {
    width: min(96vw, 930px) !important;
    max-width: 930px !important;
    min-height: 0 !important;
    margin: 4px auto 0 !important;
    padding: 8px !important;
    gap: 8px !important;
    border-radius: 22px !important;
    grid-template-columns: minmax(410px, 1.08fr) minmax(300px, .92fr) !important;
    grid-template-areas: 'profile avatar' !important;
    align-items: stretch !important;
  }

  body:not(.is-playing) .start-card-v12 .account-stats {
    grid-area: profile !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  body:not(.is-playing) .start-card-v12 .avatar-picker {
    grid-area: avatar !important;
    min-width: 0 !important;
  }

  body:not(.is-playing) .home-profile-card.home-profile-card-3d {
    min-height: 0 !important;
    height: auto !important;
    padding: 8px !important;
    gap: 8px !important;
    border-radius: 18px !important;
    grid-template-columns: 150px minmax(0, 1fr) !important;
    align-items: start !important;
  }

  body:not(.is-playing) .home-avatar3d .avatar3d-view {
    min-height: 156px !important;
    height: 156px !important;
    max-height: 156px !important;
    border-radius: 18px !important;
  }

  body:not(.is-playing) .home-profile-main {
    min-height: 0 !important;
    padding: 8px !important;
    gap: 5px !important;
    border-radius: 16px !important;
    align-content: start !important;
  }

  body:not(.is-playing) .home-profile-main strong {
    font-size: 1.05rem !important;
    line-height: 1 !important;
  }

  body:not(.is-playing) .equipped-character-name {
    min-height: 20px !important;
    padding: 4px 9px !important;
    font-size: .58rem !important;
    letter-spacing: .12em !important;
  }

  body:not(.is-playing) .xp-bar,
  body:not(.is-playing) .xp-progress {
    min-height: 5px !important;
    height: 5px !important;
  }

  body:not(.is-playing) .xp-row,
  body:not(.is-playing) .xp-labels {
    font-size: .56rem !important;
    line-height: 1.1 !important;
  }

  body:not(.is-playing) .home-profile-mini {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 6px !important;
  }

  body:not(.is-playing) .home-stat-card {
    min-height: 48px !important;
    padding: 6px 7px !important;
    gap: 2px !important;
    border-radius: 13px !important;
  }

  body:not(.is-playing) .home-stat-card label {
    font-size: .46rem !important;
    line-height: 1.05 !important;
    letter-spacing: .08em !important;
  }

  body:not(.is-playing) .home-stat-card strong {
    font-size: .74rem !important;
    line-height: 1.05 !important;
  }

  body:not(.is-playing) .home-stat-icon {
    width: 16px !important;
    height: 16px !important;
  }

  body:not(.is-playing) .home-profile-card .mode-bests {
    margin-top: 6px !important;
    border-radius: 16px !important;
  }

  body:not(.is-playing) .home-profile-card .mode-bests summary {
    min-height: 38px !important;
    padding: 8px 10px !important;
    grid-template-columns: auto 1fr auto !important;
    gap: 8px !important;
  }

  body:not(.is-playing) .home-profile-card .mode-bests summary span,
  body:not(.is-playing) .home-profile-card .mode-bests summary em {
    font-size: .54rem !important;
    line-height: 1.05 !important;
  }

  body:not(.is-playing) .home-profile-card .mode-bests summary strong {
    font-size: .92rem !important;
    line-height: 1 !important;
  }

  body:not(.is-playing) .home-profile-card .mode-bests-grid,
  body:not(.is-playing) .home-profile-card .mode-bests[open] .mode-bests-grid {
    display: none !important;
  }

  body:not(.is-playing) .inventory-launch-card.inventory-menu-card,
  body:not(.is-playing) .inventory-launch-card.inventory-menu-card.inventory-menu-card-clean {
    height: 100% !important;
    min-height: 0 !important;
    padding: 10px !important;
    gap: 8px !important;
    border-radius: 20px !important;
    grid-template-rows: auto auto 1fr !important;
  }

  body:not(.is-playing) .inventory-launch-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: .78rem !important;
    margin: 0 auto !important;
  }

  body:not(.is-playing) .inventory-launch-copy.inventory-launch-copy-minimal span {
    font-size: .58rem !important;
    letter-spacing: .18em !important;
  }

  body:not(.is-playing) .inventory-menu-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  body:not(.is-playing) .menu-card-btn,
  body:not(.is-playing) .menu-card-btn.menu-card-btn-primary,
  body:not(.is-playing) .inventory-menu-grid .menu-card-btn,
  body:not(.is-playing) .inventory-menu-grid .menu-card-start-btn {
    min-height: 58px !important;
    height: 58px !important;
    padding: 9px 8px !important;
    border-radius: 16px !important;
    font-size: .82rem !important;
    line-height: 1.05 !important;
  }

  body:not(.is-playing) .inventory-menu-grid .menu-card-start-btn::before {
    margin-right: 5px !important;
    font-size: .64rem !important;
  }

  body:not(.is-playing) .main-menu-footer {
    width: min(96vw, 930px) !important;
    margin: 4px auto 0 !important;
    padding-bottom: 8px !important;
  }

  body:not(.is-playing) .status-pill {
    min-height: 24px !important;
    padding: 4px 12px !important;
    font-size: .56rem !important;
  }

  body:not(.is-playing) .main-menu-footer span {
    min-height: 26px !important;
    padding: 5px 10px !important;
    font-size: .54rem !important;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 430px) {
  body:not(.is-playing) .start-screen {
    transform: scale(.88) !important;
    transform-origin: top center !important;
    width: calc(100vw / .88) !important;
    margin-left: calc((100vw - (100vw / .88)) / 2) !important;
  }

  body:not(.is-playing) .main-brand-lockup {
    max-width: min(260px, 30vw) !important;
  }

  body:not(.is-playing) .start-screen .tagline {
    display: none !important;
  }

  body:not(.is-playing) .home-avatar3d .avatar3d-view {
    min-height: 138px !important;
    height: 138px !important;
    max-height: 138px !important;
  }

  body:not(.is-playing) .menu-card-btn,
  body:not(.is-playing) .menu-card-btn.menu-card-btn-primary,
  body:not(.is-playing) .inventory-menu-grid .menu-card-btn,
  body:not(.is-playing) .inventory-menu-grid .menu-card-start-btn {
    min-height: 50px !important;
    height: 50px !important;
    font-size: .76rem !important;
  }
}


/* v7.0.163 Scaled Desktop Main Menu on Small Landscape Screens: keep the PC layout and scale the whole menu canvas instead of rebuilding it for phones. */
body.rq-phone-menu-landscape:not(.is-playing) {
  overflow: auto !important;
  min-height: 100dvh !important;
}

body.rq-phone-menu-landscape:not(.is-playing) .app {
  min-height: max(100dvh, var(--rq-menu-scaled-height, 430px)) !important;
  overflow: visible !important;
}

body.rq-phone-menu-landscape:not(.is-playing) .start-screen {
  position: absolute !important;
  left: 50% !important;
  top: max(4px, env(safe-area-inset-top, 0px)) !important;
  width: 1180px !important;
  min-width: 1180px !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 0 0 calc(-590px * var(--rq-menu-scale, .5)) !important;
  padding: 6px 0 16px !important;
  transform: scale(var(--rq-menu-scale, .5)) !important;
  transform-origin: top left !important;
  gap: 4px !important;
  overflow: visible !important;
}

body.rq-phone-menu-landscape:not(.is-playing) .mobile-landscape-gate {
  display: none !important;
}

body.rq-phone-menu-landscape:not(.is-playing) .main-menu-kicker {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 5px 11px !important;
  font-size: .60rem !important;
}

body.rq-phone-menu-landscape:not(.is-playing) .main-brand-lockup {
  width: fit-content !important;
  max-width: min(520px, calc(100% - 38px)) !important;
  margin: -2px auto -1px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.rq-phone-menu-landscape:not(.is-playing) .main-brand-logo {
  width: min(100%, 440px) !important;
}

body.rq-phone-menu-landscape:not(.is-playing) .start-screen .tagline {
  max-width: 510px !important;
  margin: -2px auto 3px !important;
  font-size: .82rem !important;
  line-height: 1.24 !important;
}

body.rq-phone-menu-landscape:not(.is-playing) .start-card.start-card-v12 {
  width: min(100%, 900px) !important;
  max-width: 900px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 280px !important;
  grid-template-areas: 'profile avatar' !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 22px !important;
}

body.rq-phone-menu-landscape:not(.is-playing) .start-card-v12 .account-stats {
  grid-area: profile !important;
  min-width: 0 !important;
  width: 100% !important;
}

body.rq-phone-menu-landscape:not(.is-playing) .start-card-v12 .avatar-picker {
  grid-area: avatar !important;
  min-width: 0 !important;
  width: 100% !important;
}

body.rq-phone-menu-landscape:not(.is-playing) .inventory-launch-card.inventory-menu-card.inventory-menu-card-clean {
  min-height: 0 !important;
  height: 100% !important;
  padding: 12px !important;
  gap: 8px !important;
  border-radius: 22px !important;
}

body.rq-phone-menu-landscape:not(.is-playing) .inventory-menu-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.rq-phone-menu-landscape:not(.is-playing) .menu-card-btn,
body.rq-phone-menu-landscape:not(.is-playing) .menu-card-btn.menu-card-btn-primary {
  min-height: 60px !important;
  height: auto !important;
  padding: 12px 10px !important;
  border-radius: 16px !important;
  font-size: .95rem !important;
}

body.rq-phone-menu-landscape:not(.is-playing) .home-profile-card.home-profile-card-3d {
  grid-template-columns: minmax(150px, 220px) 1fr !important;
  min-height: 0 !important;
  gap: 10px !important;
  padding: 12px !important;
  border-radius: 20px !important;
}

body.rq-phone-menu-landscape:not(.is-playing) .home-avatar3d .avatar3d-view {
  min-height: 260px !important;
  height: 260px !important;
  border-radius: 20px !important;
}

body.rq-phone-menu-landscape:not(.is-playing) .home-profile-main {
  gap: 6px !important;
}

body.rq-phone-menu-landscape:not(.is-playing) .home-profile-main strong {
  font-size: 1.15rem !important;
}

body.rq-phone-menu-landscape:not(.is-playing) .home-profile-mini {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

body.rq-phone-menu-landscape:not(.is-playing) .home-stat-card {
  min-height: 58px !important;
  padding: 8px 9px !important;
}

body.rq-phone-menu-landscape:not(.is-playing) .home-stat-card label {
  font-size: .58rem !important;
}

body.rq-phone-menu-landscape:not(.is-playing) .home-stat-card strong {
  font-size: .92rem !important;
}

body.rq-phone-menu-landscape:not(.is-playing) .home-profile-card .mode-bests {
  margin-top: 8px !important;
}

body.rq-phone-menu-landscape:not(.is-playing) .home-profile-card .mode-bests summary {
  padding: 9px 11px !important;
}

body.rq-phone-menu-landscape:not(.is-playing) .home-profile-card .mode-bests-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

body.rq-phone-menu-landscape:not(.is-playing) .home-profile-card .mode-bests-grid div {
  min-height: 54px !important;
  padding: 7px 6px !important;
}

body.rq-phone-menu-landscape:not(.is-playing) .home-profile-card .mode-bests-grid strong {
  font-size: .78rem !important;
}

body.rq-phone-menu-landscape:not(.is-playing) .main-menu-footer {
  width: min(760px, 100%) !important;
  margin: 4px auto 0 !important;
}

body.rq-phone-menu-landscape:not(.is-playing) .status-pill {
  margin-top: 4px !important;
}


/* v7.0.164 Resolution Scale System: keep the desktop main-menu composition and scale the whole canvas on smaller landscape screens. */
body.rq-scaled-menu:not(.is-playing) {
  width: 100vw !important;
  min-width: 0 !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}

body.rq-scaled-menu:not(.is-playing) .app {
  width: 100vw !important;
  min-width: 0 !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}

body.rq-scaled-menu:not(.is-playing) .mobile-landscape-gate {
  display: none !important;
}

body.rq-scaled-menu:not(.is-playing) .start-screen {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  width: 1180px !important;
  min-width: 1180px !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 6px 0 12px !important;
  gap: 4px !important;
  transform: translate(-50%, -50%) scale(var(--rq-menu-scale, .52)) !important;
  transform-origin: center center !important;
  overflow: visible !important;
}

body.rq-scaled-menu:not(.is-playing) .main-menu-kicker {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 5px 11px !important;
  font-size: .60rem !important;
}

body.rq-scaled-menu:not(.is-playing) .main-brand-lockup {
  width: fit-content !important;
  max-width: min(520px, calc(100% - 38px)) !important;
  margin: -2px auto -1px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.rq-scaled-menu:not(.is-playing) .main-brand-logo {
  width: min(100%, 440px) !important;
}

body.rq-scaled-menu:not(.is-playing) .start-screen .tagline {
  max-width: 510px !important;
  margin: -2px auto 3px !important;
  font-size: .82rem !important;
  line-height: 1.24 !important;
}

body.rq-scaled-menu:not(.is-playing) .start-card.start-card-v12 {
  width: 900px !important;
  max-width: 900px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(670px, 1fr) minmax(224px, .31fr) !important;
  grid-template-areas: 'profile avatar' !important;
  grid-template-rows: auto !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 22px !important;
  align-items: stretch !important;
}

body.rq-scaled-menu:not(.is-playing) .start-card-v12 .account-stats {
  grid-area: profile !important;
  min-width: 0 !important;
  width: 100% !important;
}

body.rq-scaled-menu:not(.is-playing) .start-card-v12 .avatar-picker {
  grid-area: avatar !important;
  min-width: 0 !important;
  width: 100% !important;
}

body.rq-scaled-menu:not(.is-playing) .start-card-v12 .nickname-field.mode-field,
body.rq-scaled-menu:not(.is-playing) .start-card-v12 .mode-info,
body.rq-scaled-menu:not(.is-playing) .start-card-v12 .account-actions {
  display: none !important;
}

body.rq-scaled-menu:not(.is-playing) .home-profile-card.home-profile-card-3d {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(158px, 192px) minmax(0, 1fr) !important;
  grid-template-areas:
    'avatar main'
    'avatar stats'
    'bests bests' !important;
  gap: 11px 13px !important;
  align-items: stretch !important;
  padding: 12px !important;
  border-radius: 20px !important;
  text-align: left !important;
}

body.rq-scaled-menu:not(.is-playing) .home-avatar3d {
  grid-area: avatar !important;
  padding: 14px 11px 9px !important;
}

body.rq-scaled-menu:not(.is-playing) .home-avatar3d .avatar3d-view {
  min-height: 204px !important;
  height: 204px !important;
  border-radius: 18px !important;
}

body.rq-scaled-menu:not(.is-playing) .home-profile-main {
  grid-area: main !important;
  align-content: center !important;
  gap: 8px !important;
  padding: 10px 12px 9px !important;
}

body.rq-scaled-menu:not(.is-playing) .home-profile-main strong {
  font-size: clamp(1.28rem, 1.35vw, 1.58rem) !important;
}

body.rq-scaled-menu:not(.is-playing) .home-profile-mini {
  grid-area: stats !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  margin-top: 0 !important;
}

body.rq-scaled-menu:not(.is-playing) .home-stat-card,
body.rq-scaled-menu:not(.is-playing) .home-stat-card:nth-child(5) {
  min-height: 70px !important;
  padding: 11px 14px 11px 44px !important;
  align-content: center !important;
}

body.rq-scaled-menu:not(.is-playing) .home-stat-card label {
  font-size: .64rem !important;
}

body.rq-scaled-menu:not(.is-playing) .home-stat-card strong {
  font-size: 1rem !important;
}

body.rq-scaled-menu:not(.is-playing) .home-profile-card .mode-bests {
  grid-area: bests !important;
  margin-top: 0 !important;
  padding: 8px 10px !important;
}

body.rq-scaled-menu:not(.is-playing) .home-profile-card .mode-bests-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.rq-scaled-menu:not(.is-playing) .home-profile-card .mode-bests-grid div {
  min-height: 58px !important;
  padding: 7px 6px !important;
}

body.rq-scaled-menu:not(.is-playing) .inventory-launch-card.inventory-menu-card.inventory-menu-card-clean {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto 1fr !important;
  align-content: start !important;
  justify-items: stretch !important;
  gap: 9px !important;
  padding: 15px 14px !important;
  border-radius: 22px !important;
  text-align: center !important;
}

body.rq-scaled-menu:not(.is-playing) .inventory-menu-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  width: 100% !important;
  margin-top: 2px !important;
}

body.rq-scaled-menu:not(.is-playing) .menu-card-btn,
body.rq-scaled-menu:not(.is-playing) .menu-card-btn.menu-card-btn-primary {
  width: 100% !important;
  min-height: 38px !important;
  height: auto !important;
  padding: 7px 10px !important;
  border-radius: 13px !important;
  font-size: .86rem !important;
  line-height: 1.05 !important;
}

body.rq-scaled-menu:not(.is-playing) .menu-card-btn.menu-card-btn-primary {
  min-height: 44px !important;
  font-size: .90rem !important;
}

body.rq-scaled-menu:not(.is-playing) .main-menu-footer {
  width: min(760px, 100%) !important;
  max-width: 760px !important;
  margin: 0 auto !important;
}

body.rq-scaled-menu:not(.is-playing) .status-pill {
  justify-self: center !important;
}

@media (max-width: 760px) {
  body.rq-phone-portrait:not(.is-playing) .mobile-landscape-gate {
    display: grid !important;
  }
}


/* v7.0.165 Header Kicker Merge: move the Live Radio Geography Game pill into the logo header footer area to save vertical space and tighten menu fit on smaller screens. */
.start-screen {
  gap: 4px !important;
  padding-top: clamp(8px, 1.35vh, 14px) !important;
}

.main-brand-lockup {
  position: relative !important;
  width: fit-content !important;
  max-width: min(600px, calc(100% - 30px)) !important;
  margin: 0 auto !important;
  padding: 0 0 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.main-brand-logo {
  display: block !important;
  width: min(100%, 480px) !important;
}

.main-menu-kicker {
  position: absolute !important;
  left: 50% !important;
  bottom: -2px !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  padding: 5px 12px !important;
  font-size: .58rem !important;
  letter-spacing: .17em !important;
  white-space: nowrap !important;
  z-index: 2 !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.main-menu-kicker img {
  width: 14px !important;
  height: 14px !important;
}

.start-screen .tagline {
  margin: 0 auto 4px !important;
  font-size: .84rem !important;
  line-height: 1.24 !important;
}

.main-menu-footer {
  margin-top: 0 !important;
}

@media (min-width: 921px) {
  .main-brand-lockup {
    max-width: min(580px, calc(100% - 30px)) !important;
    padding-bottom: 18px !important;
  }

  .main-brand-logo {
    width: min(100%, 470px) !important;
  }
}

@media (max-width: 760px) {
  .main-brand-lockup {
    max-width: min(92vw, 434px) !important;
    padding-bottom: 16px !important;
  }

  .main-brand-logo {
    width: min(100%, 392px) !important;
  }

  .main-menu-kicker {
    padding: 4px 10px !important;
    font-size: .52rem !important;
    letter-spacing: .15em !important;
  }

  .main-menu-kicker img {
    width: 12px !important;
    height: 12px !important;
  }

  .start-screen .tagline {
    font-size: .74rem !important;
    margin-bottom: 3px !important;
  }
}

body.rq-scaled-menu:not(.is-playing) .start-screen {
  padding: 2px 0 8px !important;
  gap: 2px !important;
}

body.rq-scaled-menu:not(.is-playing) .main-brand-lockup {
  max-width: min(500px, calc(100% - 36px)) !important;
  margin: 0 auto !important;
  padding: 0 0 14px !important;
}

body.rq-scaled-menu:not(.is-playing) .main-brand-logo {
  width: min(100%, 430px) !important;
}

body.rq-scaled-menu:not(.is-playing) .main-menu-kicker {
  bottom: -1px !important;
  padding: 4px 10px !important;
  font-size: .54rem !important;
}

body.rq-scaled-menu:not(.is-playing) .main-menu-kicker img {
  width: 12px !important;
  height: 12px !important;
}

body.rq-scaled-menu:not(.is-playing) .start-screen .tagline {
  max-width: 500px !important;
  margin: -1px auto 2px !important;
  font-size: .78rem !important;
  line-height: 1.20 !important;
}

body.rq-scaled-menu:not(.is-playing) .main-menu-footer {
  margin: -1px auto 0 !important;
}


/* v7.0.166 Main Menu No Phantom Scroll: remove desktop menu phantom overflow while keeping real overflow available for auth screens and small scaled viewports. */
html:has(body.rq-authed-menu:not(.is-playing):not(.rq-phone-portrait)),
body.rq-authed-menu:not(.is-playing):not(.rq-phone-portrait) {
  width: 100% !important;
  min-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  overscroll-behavior: none !important;
}

body.rq-authed-menu:not(.is-playing):not(.rq-phone-portrait) .app {
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

body.rq-authed-menu:not(.is-playing):not(.rq-phone-portrait) .start-screen {
  box-sizing: border-box !important;
  min-height: 0 !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: clip !important;
  padding-bottom: 8px !important;
}

body.rq-authed-menu:not(.is-playing):not(.rq-phone-portrait) .main-menu-footer {
  flex: 0 0 auto !important;
  margin-bottom: 0 !important;
}

body.rq-authed-menu:not(.is-playing):not(.rq-phone-portrait) .status-pill {
  flex: 0 0 auto !important;
}

body.rq-authed-menu.rq-scaled-menu:not(.is-playing):not(.rq-phone-portrait) .start-screen {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

@supports not selector(:has(*)) {
  body.rq-authed-menu:not(.is-playing):not(.rq-phone-portrait) {
    overflow-y: hidden !important;
  }
}


/* v7.0.168 Emergency Server Status Fix: rollback the v7.0.167 fixed-canvas override that could block client initialization; use the last known functional v7.0.166 menu code path. */


/* v7.0.169 Main Menu Action Hub: premium right-side action center with icon tiles and a compact More drawer. */
.inventory-launch-card.inventory-menu-card.action-hub-card {
  position: relative !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  align-content: start !important;
  gap: 10px !important;
  padding: 15px 14px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(222, 184, 115, .12), transparent 34%),
    radial-gradient(circle at 12% 100%, rgba(33, 126, 116, .08), transparent 34%),
    linear-gradient(180deg, rgba(50, 38, 27, .88), rgba(16, 13, 11, .97)) !important;
  border: 1px solid rgba(222, 184, 115, .22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 0 1px rgba(23, 92, 84, .10),
    0 18px 36px rgba(0,0,0,.20) !important;
}

.inventory-launch-card.inventory-menu-card.action-hub-card::before {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 19px;
  border: 1px solid rgba(222,184,115,.10);
  pointer-events: none;
}

.inventory-launch-card.inventory-menu-card.action-hub-card::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  top: 58px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(222,184,115,.30), transparent);
  opacity: .75;
  pointer-events: none;
}

.action-hub-head {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 4px 0 2px;
}

.action-hub-compass.inventory-launch-icon {
  width: 34px !important;
  height: 34px !important;
  font-size: .82rem !important;
  background: radial-gradient(circle, rgba(220,178,104,.30), rgba(42,32,23,.60)) !important;
  border-color: rgba(222,184,115,.28) !important;
}

.action-hub-title span {
  color: rgba(239, 216, 174, .84) !important;
  font-size: .62rem !important;
  letter-spacing: .26em !important;
}

.inventory-menu-grid.action-hub-grid {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(78px, auto) !important;
  gap: 8px !important;
  align-content: start !important;
  width: 100% !important;
}

.action-hub-grid .menu-card-btn {
  min-height: 78px !important;
  height: auto !important;
  padding: 9px 9px !important;
  border-radius: 16px !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: start !important;
  gap: 9px !important;
  text-align: left !important;
  background:
    radial-gradient(circle at 25% 0%, rgba(222,184,115,.10), transparent 36%),
    linear-gradient(180deg, rgba(62, 46, 31, .52), rgba(15, 12, 10, .96)) !important;
  border: 1px solid rgba(222,184,115,.18) !important;
  color: rgba(255,245,228,.96) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -14px 18px rgba(0,0,0,.13),
    0 10px 18px rgba(0,0,0,.16) !important;
}

.action-hub-grid .menu-card-btn:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.05) !important;
  border-color: rgba(235, 199, 132, .32) !important;
}

.action-hub-grid .menu-card-btn img {
  width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.30));
}

.action-hub-grid .menu-card-btn span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.action-hub-grid .menu-card-btn strong {
  color: rgba(255, 246, 229, .98) !important;
  font-size: .82rem !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

.action-hub-grid .menu-card-btn em {
  color: rgba(231, 206, 166, .70) !important;
  font-size: .58rem !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero {
  grid-column: 1 / -1 !important;
  min-height: 96px !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 13px 14px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,236,174,.20), transparent 34%),
    linear-gradient(180deg, rgba(179, 133, 62, .95), rgba(78, 53, 26, .98)) !important;
  border-color: rgba(235, 199, 132, .34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -16px 24px rgba(82,52,18,.24),
    0 16px 30px rgba(0,0,0,.18) !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero img {
  width: 58px !important;
  height: 58px !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero strong {
  color: rgba(40, 27, 14, .96) !important;
  font-size: 1.02rem !important;
  text-shadow: 0 1px 0 rgba(255,243,208,.24) !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero em {
  color: rgba(52, 35, 17, .78) !important;
  font-size: .66rem !important;
}

.action-hub-more-btn {
  grid-column: 1 / -1 !important;
  min-height: 46px !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  padding: 8px 12px !important;
}

.action-hub-more-btn img {
  width: 32px !important;
  height: 32px !important;
}

.action-hub-more-panel {
  grid-column: 1 / -1;
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 0 2px 2px;
}

.action-hub-card.action-hub-more-open .action-hub-more-panel {
  display: grid;
}

.action-hub-mini-btn {
  min-height: 34px;
  border: 1px solid rgba(222,184,115,.16);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(54,40,28,.48), rgba(12,10,8,.94));
  color: rgba(255,245,228,.92);
  font: inherit;
  font-size: .76rem;
  font-weight: 900;
  cursor: pointer;
}

.action-hub-mini-btn:hover {
  filter: brightness(1.06);
  border-color: rgba(235,199,132,.28);
}

body.rq-scaled-menu:not(.is-playing) .inventory-menu-grid.action-hub-grid {
  grid-auto-rows: minmax(68px, auto) !important;
  gap: 7px !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn {
  min-height: 68px !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 8px 9px !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn img {
  width: 36px !important;
  height: 36px !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero {
  min-height: 82px !important;
  grid-template-columns: 50px minmax(0, 1fr) !important;
  padding: 10px 12px !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero img {
  width: 50px !important;
  height: 50px !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn strong {
  font-size: .76rem !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn em {
  font-size: .53rem !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero strong {
  font-size: .92rem !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-more-btn {
  min-height: 40px !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-more-btn img {
  width: 28px !important;
  height: 28px !important;
}


/* v7.0.170 Action Hub Narrow Panel Fix: keep the Action Hub concept, but fit it to the existing narrow right panel as a vertical premium action list. */
.inventory-launch-card.inventory-menu-card.action-hub-card {
  gap: 8px !important;
  padding: 14px 13px !important;
  align-content: start !important;
}

.inventory-launch-card.inventory-menu-card.action-hub-card::after {
  top: 54px !important;
}

.action-hub-head {
  gap: 5px !important;
  padding: 3px 0 0 !important;
}

.action-hub-compass.inventory-launch-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
}

.action-hub-title span {
  font-size: .61rem !important;
  letter-spacing: .24em !important;
}

.inventory-menu-grid.action-hub-grid {
  grid-template-columns: 1fr !important;
  grid-auto-rows: auto !important;
  gap: 7px !important;
  align-content: start !important;
}

.action-hub-grid .menu-card-btn,
.action-hub-grid .menu-card-btn.action-hub-tile,
.action-hub-grid .menu-card-btn.action-hub-more-btn {
  grid-column: 1 / -1 !important;
  min-height: 46px !important;
  height: auto !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 7px 10px !important;
  border-radius: 13px !important;
  text-align: left !important;
  align-items: center !important;
  justify-items: start !important;
}

.action-hub-grid .menu-card-btn img,
.action-hub-grid .menu-card-btn.action-hub-tile img,
.action-hub-more-btn img {
  width: 31px !important;
  height: 31px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.32)) !important;
}

.action-hub-grid .menu-card-btn span {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.action-hub-grid .menu-card-btn strong,
.action-hub-grid .menu-card-btn.action-hub-tile strong,
.action-hub-more-btn strong {
  font-size: .82rem !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.action-hub-grid .menu-card-btn em,
.action-hub-grid .menu-card-btn.action-hub-tile em,
.action-hub-more-btn em {
  font-size: .55rem !important;
  line-height: 1.05 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  opacity: .58 !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero {
  grid-column: 1 / -1 !important;
  min-height: 66px !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 11px !important;
  padding: 10px 12px !important;
  border-radius: 15px !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero img {
  width: 40px !important;
  height: 40px !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero strong {
  font-size: .92rem !important;
  white-space: nowrap !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero em {
  font-size: .58rem !important;
}

.action-hub-more-panel {
  grid-column: 1 / -1 !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  padding: 0 0 2px !important;
}

.action-hub-mini-btn {
  min-height: 31px !important;
  border-radius: 11px !important;
  font-size: .72rem !important;
}

body.rq-scaled-menu:not(.is-playing) .inventory-launch-card.inventory-menu-card.action-hub-card {
  gap: 7px !important;
  padding: 13px 12px !important;
}

body.rq-scaled-menu:not(.is-playing) .inventory-menu-grid.action-hub-grid {
  grid-template-columns: 1fr !important;
  grid-auto-rows: auto !important;
  gap: 6px !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-tile,
body.rq-scaled-menu:not(.is-playing) .action-hub-more-btn {
  min-height: 42px !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  gap: 9px !important;
  padding: 6px 9px !important;
  border-radius: 12px !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn img,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-tile img,
body.rq-scaled-menu:not(.is-playing) .action-hub-more-btn img {
  width: 28px !important;
  height: 28px !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero {
  min-height: 60px !important;
  grid-template-columns: 37px minmax(0, 1fr) !important;
  padding: 8px 10px !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero img {
  width: 36px !important;
  height: 36px !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn strong,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-tile strong {
  font-size: .74rem !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero strong {
  font-size: .84rem !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn em,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-tile em {
  font-size: .49rem !important;
}


/* v7.0.171 Start Hero Card Fix: keep the hero premium, but make the text readable inside the narrow right action panel. */
.action-hub-grid .menu-card-btn.action-hub-hero,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  justify-items: stretch !important;
  min-height: 64px !important;
  padding: 10px 54px 10px 13px !important;
  gap: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero::before,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero::before {
  content: '▶' !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
  font-size: .72rem !important;
  color: rgba(255, 248, 228, .96) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.30) !important;
  pointer-events: none !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero img,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero img {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 1 !important;
  width: 42px !important;
  height: 42px !important;
  opacity: .88 !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.30)) saturate(1.06) !important;
  pointer-events: none !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero span,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero span {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding-left: 20px !important;
  gap: 3px !important;
  overflow: visible !important;
  align-content: center !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero strong,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero strong {
  display: block !important;
  max-width: 100% !important;
  color: rgba(39, 27, 14, .97) !important;
  font-size: .86rem !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-shadow: 0 1px 0 rgba(255,243,208,.24) !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero em,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero em {
  display: block !important;
  max-width: 100% !important;
  color: rgba(52, 35, 17, .78) !important;
  font-size: .50rem !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero {
  min-height: 58px !important;
  padding: 8px 48px 8px 11px !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero::before {
  left: 10px !important;
  font-size: .66rem !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero img {
  right: 9px !important;
  width: 37px !important;
  height: 37px !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero span {
  padding-left: 18px !important;
  gap: 2px !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero strong {
  font-size: .78rem !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero em {
  font-size: .45rem !important;
}


/* v7.0.172 Action Hub Presence Polish: make the right-side Action Hub feel less like a small widget and more like a premium command panel. */
.inventory-launch-card.inventory-menu-card.action-hub-card {
  min-height: 100% !important;
  padding: 16px 14px !important;
  gap: 10px !important;
  align-content: start !important;
  justify-content: start !important;
  background:
    radial-gradient(circle at 50% 5%, rgba(232, 189, 110, .13), transparent 30%),
    linear-gradient(180deg, rgba(47, 36, 24, .92), rgba(17, 13, 10, .97)) !important;
  box-shadow:
    0 18px 34px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 0 0 1px rgba(214,180,129,.14) !important;
}

.inventory-launch-card.inventory-menu-card.action-hub-card::after {
  top: 58px !important;
  opacity: .86 !important;
}

.action-hub-head {
  gap: 6px !important;
  padding: 3px 0 2px !important;
}

.action-hub-compass.inventory-launch-icon {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  box-shadow:
    0 10px 18px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
}

.action-hub-title span {
  font-size: .66rem !important;
  letter-spacing: .25em !important;
}

.inventory-menu-grid.action-hub-grid {
  gap: 8px !important;
  align-content: stretch !important;
}

.action-hub-grid .menu-card-btn,
.action-hub-grid .menu-card-btn.action-hub-tile,
.action-hub-grid .menu-card-btn.action-hub-more-btn {
  min-height: 51px !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 8px 12px !important;
  border-radius: 14px !important;
  border-color: rgba(229, 196, 136, .19) !important;
  background:
    radial-gradient(circle at 16% 42%, rgba(213, 171, 101, .10), transparent 38%),
    linear-gradient(180deg, rgba(69, 52, 36, .50), rgba(18, 13, 10, .96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -12px 18px rgba(0,0,0,.13),
    0 10px 18px rgba(0,0,0,.14) !important;
}

.action-hub-grid .menu-card-btn:hover,
.action-hub-grid .menu-card-btn.action-hub-tile:hover,
.action-hub-grid .menu-card-btn.action-hub-more-btn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(236, 204, 145, .30) !important;
  filter: brightness(1.045) !important;
}

.action-hub-grid .menu-card-btn img,
.action-hub-grid .menu-card-btn.action-hub-tile img,
.action-hub-more-btn img {
  width: 35px !important;
  height: 35px !important;
  align-self: center !important;
  justify-self: center !important;
}

.action-hub-grid .menu-card-btn span {
  gap: 3px !important;
  align-content: center !important;
}

.action-hub-grid .menu-card-btn strong,
.action-hub-grid .menu-card-btn.action-hub-tile strong,
.action-hub-more-btn strong {
  font-size: .88rem !important;
  line-height: 1.05 !important;
  letter-spacing: -.01em !important;
}

.action-hub-grid .menu-card-btn em,
.action-hub-grid .menu-card-btn.action-hub-tile em,
.action-hub-more-btn em {
  font-size: .58rem !important;
  line-height: 1.05 !important;
  opacity: .88 !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero {
  min-height: 72px !important;
  padding: 11px 58px 11px 14px !important;
  border-radius: 16px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -16px 22px rgba(79, 53, 22, .22),
    0 14px 22px rgba(0,0,0,.18) !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero::before,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero::before {
  left: 14px !important;
  font-size: .78rem !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero img,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero img {
  right: 12px !important;
  width: 46px !important;
  height: 46px !important;
  opacity: .88 !important;
  mix-blend-mode: multiply !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero span,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero span {
  padding-left: 22px !important;
  gap: 4px !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero strong,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero strong {
  font-size: .94rem !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero em,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero em {
  font-size: .52rem !important;
}

.action-hub-more-panel {
  padding-top: 1px !important;
}

.action-hub-mini-btn {
  min-height: 34px !important;
  font-size: .76rem !important;
}

body.rq-scaled-menu:not(.is-playing) .inventory-launch-card.inventory-menu-card.action-hub-card {
  padding: 14px 12px !important;
  gap: 8px !important;
}

body.rq-scaled-menu:not(.is-playing) .inventory-menu-grid.action-hub-grid {
  gap: 7px !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-tile,
body.rq-scaled-menu:not(.is-playing) .action-hub-more-btn {
  min-height: 46px !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 7px 10px !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn img,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-tile img,
body.rq-scaled-menu:not(.is-playing) .action-hub-more-btn img {
  width: 31px !important;
  height: 31px !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn strong,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-tile strong,
body.rq-scaled-menu:not(.is-playing) .action-hub-more-btn strong {
  font-size: .80rem !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn em,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-tile em,
body.rq-scaled-menu:not(.is-playing) .action-hub-more-btn em {
  font-size: .51rem !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero {
  min-height: 64px !important;
  padding: 9px 52px 9px 12px !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero img {
  width: 40px !important;
  height: 40px !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero strong {
  font-size: .84rem !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero em {
  font-size: .47rem !important;
}


/* v7.0.173 More Menu Modal + Action Hub Text Polish: keep the right panel compact and move utility actions into a proper floating dialog. */
.action-hub-more-panel {
  display: none !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero em,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero em {
  max-width: 112px !important;
  letter-spacing: .045em !important;
}

.action-hub-grid .menu-card-btn.action-hub-more-btn {
  margin-top: 2px !important;
}

.action-more-dialog {
  width: min(440px, calc(100vw - 28px));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--rq-cream, #f4ead5);
}

.action-more-dialog::backdrop {
  background:
    radial-gradient(circle at center, rgba(231, 188, 96, .10), transparent 34%),
    rgba(0, 0, 0, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.action-more-shell {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: 18px;
  border: 1px solid rgba(220, 178, 99, .32);
  background:
    radial-gradient(circle at 50% 0%, rgba(223, 185, 104, .12), transparent 35%),
    linear-gradient(180deg, rgba(49, 39, 25, .96), rgba(17, 15, 12, .98));
  box-shadow:
    0 30px 70px rgba(0,0,0,.50),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(0,0,0,.30);
}

.action-more-shell::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(230, 198, 134, .14);
  border-radius: 20px;
  pointer-events: none;
}

.action-more-head {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  padding: 2px 2px 14px;
  border-bottom: 1px solid rgba(230, 198, 134, .14);
}

.action-more-head span {
  display: block;
  color: rgba(229, 205, 160, .72);
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.action-more-head strong {
  display: block;
  margin-top: 2px;
  color: rgba(255, 246, 225, .98);
  font-size: 1.55rem;
  line-height: 1.05;
}

.action-more-head small {
  display: block;
  margin-top: 4px;
  color: rgba(244, 231, 202, .66);
  font-size: .76rem;
}

.action-more-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  padding-top: 14px;
}

.action-more-option {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 66px;
  padding: 11px 14px;
  border-radius: 16px;
  border: 1px solid rgba(216, 181, 108, .20);
  background:
    radial-gradient(circle at 20% 0%, rgba(226, 184, 101, .10), transparent 38%),
    linear-gradient(180deg, rgba(47, 38, 25, .78), rgba(15, 13, 10, .88));
  color: rgba(255, 247, 226, .94);
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 24px rgba(0,0,0,.22);
}

.action-more-option:hover,
.action-more-option:focus-visible {
  border-color: rgba(235, 199, 126, .44);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 34px rgba(0,0,0,.30);
}

.action-more-option img,
.action-more-symbol {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  object-fit: contain;
  border-radius: 999px;
  color: rgba(237, 202, 132, .96);
  background: rgba(10, 8, 6, .36);
  border: 1px solid rgba(224, 190, 119, .18);
  font-weight: 950;
  font-size: 1.15rem;
}

.action-more-option strong {
  display: block;
  color: rgba(255, 247, 226, .96);
  font-size: .98rem;
  line-height: 1.05;
}

.action-more-option em {
  display: block;
  margin-top: 3px;
  color: rgba(241, 224, 190, .66);
  font-size: .70rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .035em;
}

.action-more-option.danger {
  border-color: rgba(207, 124, 104, .22);
  background:
    radial-gradient(circle at 20% 0%, rgba(207, 124, 104, .10), transparent 38%),
    linear-gradient(180deg, rgba(48, 31, 27, .78), rgba(16, 11, 10, .88));
}

.action-more-option.danger .action-more-symbol {
  color: rgba(255, 207, 194, .94);
  border-color: rgba(207, 124, 104, .20);
}

body.rq-scaled-menu:not(.is-playing) .action-more-dialog {
  transform: scale(var(--rq-menu-scale, .78));
  transform-origin: center center;
}

@media (max-width: 760px) {
  .action-more-dialog {
    width: min(420px, calc(100vw - 20px));
  }

  .action-more-shell {
    padding: 15px;
    border-radius: 22px;
  }

  .action-more-head strong {
    font-size: 1.32rem;
  }

  .action-more-option {
    min-height: 60px;
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .action-more-option img,
  .action-more-symbol {
    width: 34px;
    height: 34px;
  }
}


/* v7.0.174 Action Hub Active Console Polish: subtle active-console glow and stronger Start Playing call-to-action. */
.inventory-launch-card.inventory-menu-card.action-hub-card {
  background:
    radial-gradient(circle at 50% 2%, rgba(240, 202, 122, .16), transparent 28%),
    radial-gradient(circle at 88% 26%, rgba(42, 171, 164, .075), transparent 34%),
    linear-gradient(180deg, rgba(49, 38, 25, .94), rgba(15, 13, 10, .985)) !important;
  border-color: rgba(230, 195, 127, .27) !important;
  box-shadow:
    0 22px 42px rgba(0,0,0,.24),
    0 0 24px rgba(216, 171, 91, .055),
    inset 0 1px 0 rgba(255,255,255,.065),
    inset 0 0 0 1px rgba(225, 188, 119, .18),
    inset 0 0 32px rgba(222, 179, 96, .045) !important;
}

.inventory-launch-card.inventory-menu-card.action-hub-card::before {
  opacity: .56 !important;
  background:
    linear-gradient(90deg, transparent, rgba(238, 199, 122, .10), transparent),
    radial-gradient(circle at 50% 0%, rgba(250, 222, 159, .08), transparent 38%) !important;
}

.inventory-launch-card.inventory-menu-card.action-hub-card::after {
  opacity: .95 !important;
  border-color: rgba(234, 200, 132, .16) !important;
  box-shadow: inset 0 0 24px rgba(33, 136, 128, .045) !important;
}

.action-hub-head {
  margin-bottom: 2px !important;
}

.action-hub-title span {
  color: rgba(245, 224, 181, .90) !important;
  text-shadow: 0 2px 12px rgba(239, 195, 106, .14) !important;
}

.action-hub-grid .menu-card-btn,
.action-hub-grid .menu-card-btn.action-hub-tile,
.action-hub-grid .menu-card-btn.action-hub-more-btn {
  position: relative !important;
  overflow: hidden !important;
  border-color: rgba(226, 192, 127, .23) !important;
  background:
    radial-gradient(circle at 11% 50%, rgba(227, 185, 104, .13), transparent 34%),
    radial-gradient(circle at 92% 50%, rgba(37, 145, 137, .050), transparent 40%),
    linear-gradient(180deg, rgba(70, 54, 37, .56), rgba(17, 13, 10, .97)) !important;
  transition: transform .18s ease, filter .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.action-hub-grid .menu-card-btn::after,
.action-hub-grid .menu-card-btn.action-hub-tile::after,
.action-hub-grid .menu-card-btn.action-hub-more-btn::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 232, 168, .070) 42%, transparent 58%) !important;
  transform: translateX(-125%) !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: transform .45s ease, opacity .2s ease !important;
}

.action-hub-grid .menu-card-btn:hover::after,
.action-hub-grid .menu-card-btn.action-hub-tile:hover::after,
.action-hub-grid .menu-card-btn.action-hub-more-btn:hover::after {
  transform: translateX(125%) !important;
  opacity: .9 !important;
}

.action-hub-grid .menu-card-btn:hover,
.action-hub-grid .menu-card-btn.action-hub-tile:hover,
.action-hub-grid .menu-card-btn.action-hub-more-btn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(246, 211, 140, .42) !important;
  filter: brightness(1.065) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -13px 19px rgba(0,0,0,.12),
    0 12px 22px rgba(0,0,0,.19),
    0 0 16px rgba(220, 175, 93, .085) !important;
}

.action-hub-grid .menu-card-btn img,
.action-hub-grid .menu-card-btn.action-hub-tile img,
.action-hub-more-btn img {
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.32)) drop-shadow(0 0 7px rgba(229, 183, 97, .10)) !important;
}

.action-hub-grid .menu-card-btn strong,
.action-hub-grid .menu-card-btn.action-hub-tile strong,
.action-hub-more-btn strong {
  color: rgba(255, 245, 222, .98) !important;
  text-shadow: 0 2px 9px rgba(0,0,0,.38) !important;
}

.action-hub-grid .menu-card-btn em,
.action-hub-grid .menu-card-btn.action-hub-tile em,
.action-hub-more-btn em {
  color: rgba(236, 215, 177, .74) !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero {
  border-color: rgba(255, 218, 137, .52) !important;
  background:
    radial-gradient(circle at 78% 48%, rgba(35, 131, 123, .20), transparent 30%),
    radial-gradient(circle at 12% 18%, rgba(255, 241, 181, .30), transparent 26%),
    linear-gradient(180deg, rgba(184, 133, 49, .95), rgba(119, 81, 29, .98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 249, 213, .30),
    inset 0 -18px 26px rgba(85, 52, 13, .30),
    0 15px 28px rgba(0,0,0,.25),
    0 0 24px rgba(238, 184, 85, .18) !important;
  animation: rqStartHeroGlow 4.8s ease-in-out infinite !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero::after,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(105deg, transparent 0%, rgba(255, 247, 201, .26) 45%, transparent 59%) !important;
  transform: translateX(-130%) !important;
  opacity: 0 !important;
  animation: rqStartHeroShine 6.2s ease-in-out infinite !important;
  pointer-events: none !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero:hover,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero:hover {
  filter: brightness(1.09) saturate(1.04) !important;
  border-color: rgba(255, 231, 164, .70) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 249, 213, .38),
    inset 0 -18px 26px rgba(85, 52, 13, .27),
    0 17px 30px rgba(0,0,0,.28),
    0 0 32px rgba(246, 192, 92, .28) !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero strong,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero strong {
  color: rgba(255, 248, 224, .99) !important;
  text-shadow: 0 2px 11px rgba(69, 38, 7, .52), 0 0 12px rgba(255, 228, 151, .16) !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero em,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero em {
  color: rgba(255, 239, 197, .78) !important;
  text-shadow: 0 1px 7px rgba(69, 38, 7, .44) !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero img,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero img {
  filter: drop-shadow(0 5px 10px rgba(0,0,0,.36)) drop-shadow(0 0 10px rgba(66, 213, 196, .16)) !important;
}

@keyframes rqStartHeroGlow {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 249, 213, .28),
      inset 0 -18px 26px rgba(85, 52, 13, .30),
      0 15px 28px rgba(0,0,0,.25),
      0 0 20px rgba(238, 184, 85, .14);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 249, 213, .34),
      inset 0 -18px 26px rgba(85, 52, 13, .27),
      0 15px 28px rgba(0,0,0,.25),
      0 0 30px rgba(245, 196, 97, .24);
  }
}

@keyframes rqStartHeroShine {
  0%, 58%, 100% {
    transform: translateX(-130%);
    opacity: 0;
  }
  68% {
    opacity: .85;
  }
  82% {
    transform: translateX(130%);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .action-hub-grid .menu-card-btn.action-hub-hero,
  body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero,
  .action-hub-grid .menu-card-btn.action-hub-hero::after,
  body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero::after {
    animation: none !important;
  }

  .action-hub-grid .menu-card-btn::after,
  .action-hub-grid .menu-card-btn.action-hub-tile::after,
  .action-hub-grid .menu-card-btn.action-hub-more-btn::after {
    transition: none !important;
  }
}


/* v7.0.175 Profile Stats Premium Polish: align the left profile stat cards with the Action Hub card language. */
.home-profile-mini {
  gap: 9px !important;
}

.home-profile-mini .home-stat-card {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: 64px !important;
  padding: 10px 14px 10px 56px !important;
  border: 1px solid rgba(230, 195, 127, .25) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 8% 50%, rgba(235, 190, 97, .15), transparent 32%),
    radial-gradient(circle at 94% 18%, rgba(40, 151, 143, .055), transparent 40%),
    linear-gradient(180deg, rgba(73, 58, 40, .58), rgba(20, 15, 11, .96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 216, .075),
    inset 0 -12px 18px rgba(0,0,0,.15),
    0 8px 16px rgba(0,0,0,.13),
    0 0 15px rgba(216, 171, 91, .045) !important;
  transition: border-color .18s ease, filter .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

.home-profile-mini .home-stat-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(255, 232, 168, .06) !important;
  background:
    linear-gradient(90deg, rgba(255, 230, 158, .030), transparent 33%, rgba(35, 150, 140, .025) 100%),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 40%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.home-profile-mini .home-stat-card::after {
  content: '' !important;
  position: absolute !important;
  left: 13px !important;
  top: 50% !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 999px !important;
  transform: translateY(-50%) !important;
  display: grid !important;
  place-items: center !important;
  color: rgba(255, 239, 200, .94) !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: .94rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 245, 196, .32), transparent 34%),
    radial-gradient(circle at 50% 55%, rgba(112, 83, 39, .80), rgba(30, 23, 16, .92) 72%) !important;
  border: 1px solid rgba(238, 198, 116, .22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    0 6px 13px rgba(0,0,0,.23),
    0 0 12px rgba(222, 180, 91, .08) !important;
  z-index: 1 !important;
}

.home-profile-mini .home-stat-card.stat-xp::after { content: '★' !important; }
.home-profile-mini .home-stat-card.stat-coins::after { content: '◉' !important; color: rgba(255, 221, 116, .96) !important; }
.home-profile-mini .home-stat-card.stat-best::after { content: '★' !important; }
.home-profile-mini .home-stat-card.stat-rank::after { content: '#' !important; font-family: inherit !important; font-size: .80rem !important; }
.home-profile-mini .home-stat-card.stat-games::after { content: '◎' !important; font-size: .80rem !important; }

.home-profile-mini .home-stat-card .home-stat-icon {
  position: absolute !important;
  left: 17px !important;
  top: 50% !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  object-fit: contain !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.30)) drop-shadow(0 0 7px rgba(230, 187, 99, .12)) !important;
}

.home-profile-mini .home-stat-card label,
.home-profile-mini .home-stat-card strong {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  min-width: 0 !important;
}

.home-profile-mini .home-stat-card label {
  margin: 0 0 3px !important;
  color: rgba(226, 206, 170, .70) !important;
  font-size: .62rem !important;
  font-weight: 950 !important;
  line-height: 1.02 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 5px rgba(0,0,0,.26) !important;
}

.home-profile-mini .home-stat-card strong {
  color: rgba(255, 244, 219, .98) !important;
  font-size: 1.12rem !important;
  font-weight: 950 !important;
  line-height: 1.06 !important;
  letter-spacing: .035em !important;
  text-shadow:
    0 2px 8px rgba(0,0,0,.34),
    0 0 8px rgba(238, 195, 103, .07) !important;
}

.home-profile-mini .home-stat-card:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.045) !important;
  border-color: rgba(246, 211, 140, .36) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 216, .09),
    inset 0 -12px 18px rgba(0,0,0,.13),
    0 10px 18px rgba(0,0,0,.16),
    0 0 18px rgba(221, 178, 91, .075) !important;
}

.home-profile-mini .home-stat-card.stat-xp,
.home-profile-mini .home-stat-card.stat-coins {
  border-color: rgba(238, 200, 120, .28) !important;
}

.home-profile-mini .home-stat-card.stat-games {
  grid-column: 1 / -1 !important;
  min-height: 58px !important;
}

.home-profile-mini .home-stat-card.stat-games strong {
  font-size: 1.10rem !important;
}

.mode-bests {
  border-color: rgba(230, 195, 127, .20) !important;
  background:
    radial-gradient(circle at 7% 20%, rgba(225, 181, 89, .075), transparent 30%),
    linear-gradient(180deg, rgba(55, 43, 29, .58), rgba(18, 14, 10, .96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 0 0 1px rgba(229, 188, 118, .055) !important;
}

.mode-bests summary {
  color: rgba(255, 244, 219, .94) !important;
}

.mode-bests-grid div {
  border-color: rgba(228, 190, 119, .15) !important;
  background:
    linear-gradient(180deg, rgba(62, 49, 34, .40), rgba(18, 14, 10, .86)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

body.rq-scaled-menu:not(.is-playing) .home-profile-mini .home-stat-card {
  min-height: 58px !important;
  padding: 9px 12px 9px 50px !important;
  border-radius: 13px !important;
}

body.rq-scaled-menu:not(.is-playing) .home-profile-mini .home-stat-card::after {
  left: 12px !important;
  width: 27px !important;
  height: 27px !important;
  min-width: 27px !important;
}

body.rq-scaled-menu:not(.is-playing) .home-profile-mini .home-stat-card .home-stat-icon {
  left: 16px !important;
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  min-height: 19px !important;
}

body.rq-scaled-menu:not(.is-playing) .home-profile-mini .home-stat-card label {
  font-size: .57rem !important;
}

body.rq-scaled-menu:not(.is-playing) .home-profile-mini .home-stat-card strong {
  font-size: 1rem !important;
}

@media (max-width: 760px) {
  .home-profile-mini .home-stat-card {
    min-height: 56px !important;
    padding: 9px 10px 9px 48px !important;
  }

  .home-profile-mini .home-stat-card::after {
    left: 11px !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
  }

  .home-profile-mini .home-stat-card .home-stat-icon {
    left: 15px !important;
    width: 19px !important;
    height: 19px !important;
  }

  .home-profile-mini .home-stat-card label {
    font-size: .56rem !important;
  }

  .home-profile-mini .home-stat-card strong {
    font-size: .98rem !important;
  }
}


/* v7.0.176 Profile Stats Icon Cleanup: remove legacy inline icons so the premium stat medallions are the single visual anchor. */
.home-profile-mini .home-stat-card {
  padding-left: 54px !important;
}

.home-profile-mini .home-stat-card .home-stat-icon {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  pointer-events: none !important;
}

.home-profile-mini .home-stat-card::after {
  z-index: 2 !important;
}

.home-profile-mini .home-stat-card label,
.home-profile-mini .home-stat-card strong {
  z-index: 3 !important;
}

.home-profile-mini .home-stat-card label {
  margin-left: 0 !important;
}

.home-profile-mini .home-stat-card strong {
  margin-left: 0 !important;
}

.home-profile-mini .home-stat-card.stat-xp::after {
  color: rgba(255, 235, 175, .98) !important;
  text-shadow: 0 0 8px rgba(246, 198, 85, .18), 0 1px 4px rgba(0,0,0,.40) !important;
}

.home-profile-mini .home-stat-card.stat-coins::after {
  color: rgba(255, 218, 96, .98) !important;
  text-shadow: 0 0 8px rgba(255, 202, 62, .18), 0 1px 4px rgba(0,0,0,.42) !important;
}

.home-profile-mini .home-stat-card.stat-best::after,
.home-profile-mini .home-stat-card.stat-rank::after,
.home-profile-mini .home-stat-card.stat-games::after {
  color: rgba(244, 226, 188, .94) !important;
  text-shadow: 0 0 7px rgba(229, 189, 111, .13), 0 1px 4px rgba(0,0,0,.40) !important;
}

body.rq-scaled-menu:not(.is-playing) .home-profile-mini .home-stat-card {
  padding-left: 49px !important;
}

@media (max-width: 760px) {
  .home-profile-mini .home-stat-card {
    padding-left: 47px !important;
  }
}


/* v7.0.177 Main Menu Premium Balance Cleanup: remove leftover stat circles, strengthen the left profile presence, elevate Best Score, and fully stretch the right Action Hub. */
.start-card.start-card-v12 {
  align-items: stretch !important;
}

.start-card.start-card-v12 .account-stats,
.start-card.start-card-v12 .avatar-picker {
  align-self: stretch !important;
}

.home-profile-card.home-profile-card-3d {
  position: relative !important;
  min-height: 100% !important;
  padding: 15px !important;
  border-color: rgba(232, 198, 126, .27) !important;
  background:
    radial-gradient(circle at 11% 10%, rgba(241, 201, 120, .10), transparent 26%),
    radial-gradient(circle at 90% 18%, rgba(36, 148, 139, .055), transparent 34%),
    linear-gradient(180deg, rgba(53, 41, 28, .70), rgba(17, 13, 10, .975)) !important;
  box-shadow:
    0 24px 44px rgba(0,0,0,.24),
    0 0 26px rgba(214, 172, 89, .05),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(228, 190, 120, .12) !important;
}

.home-profile-card.home-profile-card-3d::before {
  content: '' !important;
  position: absolute !important;
  inset: 9px !important;
  border-radius: 22px !important;
  pointer-events: none !important;
  border: 1px solid rgba(255, 227, 170, .05) !important;
  box-shadow: inset 0 0 0 1px rgba(33, 133, 126, .03) !important;
}

.home-avatar3d,
.home-profile-main {
  border-color: rgba(229, 191, 118, .18) !important;
  background:
    radial-gradient(circle at 12% 12%, rgba(234, 192, 108, .08), transparent 28%),
    linear-gradient(180deg, rgba(63, 49, 34, .46), rgba(19, 14, 11, .90)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 0 0 1px rgba(223, 184, 112, .05) !important;
}

.home-profile-main strong {
  color: rgba(255, 245, 220, .99) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.34), 0 0 10px rgba(239, 198, 106, .06) !important;
}

.home-profile-main .equipped-character-name {
  color: rgba(233, 212, 175, .82) !important;
}

.home-profile-mini {
  gap: 10px !important;
}

.home-profile-mini .home-stat-card,
.home-profile-mini .home-stat-card:nth-child(5) {
  min-height: 68px !important;
}

.home-profile-mini .home-stat-card.stat-best::before,
.home-profile-mini .home-stat-card.stat-rank::before,
.home-profile-mini .home-stat-card.stat-games::before {
  content: none !important;
  display: none !important;
}

.home-profile-mini .home-stat-card.stat-best,
.home-profile-mini .home-stat-card.stat-rank,
.home-profile-mini .home-stat-card.stat-games {
  padding-left: 54px !important;
}

.home-profile-mini .home-stat-card strong {
  letter-spacing: .025em !important;
}

.mode-bests {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(233, 198, 125, .24) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 10% 18%, rgba(230, 187, 96, .12), transparent 28%),
    radial-gradient(circle at 90% 18%, rgba(40, 145, 136, .05), transparent 36%),
    linear-gradient(180deg, rgba(62, 48, 32, .62), rgba(17, 13, 10, .97)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 0 0 1px rgba(225, 188, 118, .06),
    0 10px 18px rgba(0,0,0,.12),
    0 0 18px rgba(219, 176, 90, .045) !important;
}

.mode-bests::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 231, 176, .05) 36%, transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 28%) !important;
}

.home-profile-card .mode-bests {
  margin-top: 8px !important;
  padding: 10px 11px !important;
}

.mode-bests summary {
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(228, 191, 118, .10) !important;
}

.mode-bests summary span {
  color: rgba(243, 222, 185, .80) !important;
  letter-spacing: .11em !important;
}

.mode-bests summary strong {
  color: rgba(255, 246, 221, .98) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.32) !important;
}

.mode-bests summary em {
  color: rgba(230, 210, 171, .72) !important;
}

.mode-bests-grid {
  gap: 8px !important;
  margin-top: 10px !important;
}

.mode-bests-grid div {
  border-radius: 14px !important;
  border-color: rgba(229, 191, 118, .16) !important;
  background:
    radial-gradient(circle at 10% 20%, rgba(232, 190, 102, .08), transparent 24%),
    linear-gradient(180deg, rgba(67, 52, 36, .46), rgba(18, 14, 10, .90)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 0 1px rgba(226, 185, 112, .04) !important;
}

.mode-bests-grid strong {
  color: rgba(255, 241, 212, .98) !important;
  font-size: .96rem !important;
}

.mode-bests-grid span,
.mode-bests-grid small {
  color: rgba(232, 212, 177, .74) !important;
}

.inventory-launch-card.inventory-menu-card.action-hub-card {
  min-height: 100% !important;
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  align-content: stretch !important;
}

.inventory-menu-grid.action-hub-grid {
  align-content: stretch !important;
  grid-auto-rows: minmax(56px, 1fr) !important;
}

.action-hub-grid .menu-card-btn,
.action-hub-grid .menu-card-btn.action-hub-tile,
.action-hub-grid .menu-card-btn.action-hub-more-btn {
  min-height: 56px !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero {
  min-height: 70px !important;
}

@media (max-width: 760px) {
  .home-profile-card.home-profile-card-3d {
    padding: 12px !important;
  }

  .home-profile-mini .home-stat-card,
  .home-profile-mini .home-stat-card:nth-child(5) {
    min-height: 60px !important;
  }

  .home-profile-card .mode-bests {
    padding: 9px !important;
  }
}

body.rq-scaled-menu:not(.is-playing) .home-profile-card.home-profile-card-3d {
  padding: 13px !important;
}

body.rq-scaled-menu:not(.is-playing) .home-profile-mini .home-stat-card,
body.rq-scaled-menu:not(.is-playing) .home-profile-mini .home-stat-card:nth-child(5) {
  min-height: 56px !important;
}

body.rq-scaled-menu:not(.is-playing) .inventory-launch-card.inventory-menu-card.action-hub-card {
  min-height: 100% !important;
}

body.rq-scaled-menu:not(.is-playing) .inventory-menu-grid.action-hub-grid {
  grid-auto-rows: minmax(50px, 1fr) !important;
}


/* v7.0.178 Main Menu Compact Balance Fix: keep the premium pass, but restore compact vertical fit for Best Score and the right Action Hub. */
.home-profile-card.home-profile-card-3d {
  padding: 13px 14px !important;
  gap: 10px 13px !important;
}

.home-profile-mini {
  gap: 8px !important;
}

.home-profile-mini .home-stat-card,
.home-profile-mini .home-stat-card:nth-child(5) {
  min-height: 60px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.home-profile-mini .home-stat-card label {
  font-size: .58rem !important;
  margin-bottom: 2px !important;
}

.home-profile-mini .home-stat-card strong {
  font-size: 1.04rem !important;
}

.home-profile-mini .home-stat-card::after {
  width: 27px !important;
  height: 27px !important;
  min-width: 27px !important;
}

.home-profile-card .mode-bests {
  margin-top: 6px !important;
  padding: 8px 9px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

.mode-bests summary {
  min-height: 0 !important;
  padding: 0 0 5px !important;
  border-bottom-color: rgba(228, 191, 118, .08) !important;
  align-items: center !important;
}

.mode-bests summary span {
  font-size: .64rem !important;
  letter-spacing: .095em !important;
}

.mode-bests summary strong {
  font-size: .92rem !important;
}

.mode-bests summary em {
  font-size: .60rem !important;
  letter-spacing: .09em !important;
}

.mode-bests-grid {
  gap: 6px !important;
  margin-top: 7px !important;
}

.mode-bests-grid div {
  min-height: 0 !important;
  padding: 6px 7px !important;
  border-radius: 11px !important;
}

.mode-bests-grid span,
.mode-bests-grid small {
  font-size: .58rem !important;
  line-height: 1.05 !important;
}

.mode-bests-grid strong {
  font-size: .82rem !important;
  line-height: 1.02 !important;
  margin: 2px 0 1px !important;
}

.inventory-launch-card.inventory-menu-card.action-hub-card {
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding-top: 13px !important;
  padding-bottom: 12px !important;
  gap: 8px !important;
}

.inventory-menu-grid.action-hub-grid {
  display: grid !important;
  grid-auto-rows: auto !important;
  align-content: start !important;
  gap: 7px !important;
}

.action-hub-grid .menu-card-btn,
.action-hub-grid .menu-card-btn.action-hub-tile,
.action-hub-grid .menu-card-btn.action-hub-more-btn {
  min-height: 46px !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero {
  min-height: 60px !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

.action-hub-grid .menu-card-btn img,
.action-hub-grid .menu-card-btn.action-hub-tile img,
.action-hub-more-btn img {
  width: 28px !important;
  height: 28px !important;
}

.action-hub-grid .menu-card-btn.action-hub-hero img,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero img {
  width: 35px !important;
  height: 35px !important;
}

.action-hub-grid .menu-card-btn strong,
.action-hub-grid .menu-card-btn.action-hub-tile strong,
.action-hub-more-btn strong {
  font-size: .90rem !important;
  line-height: 1.02 !important;
}

.action-hub-grid .menu-card-btn em,
.action-hub-grid .menu-card-btn.action-hub-tile em,
.action-hub-more-btn em {
  font-size: .56rem !important;
  line-height: 1.05 !important;
}

body.rq-scaled-menu:not(.is-playing) .home-profile-card .mode-bests {
  padding: 7px 8px !important;
  margin-top: 5px !important;
}

body.rq-scaled-menu:not(.is-playing) .mode-bests-grid {
  gap: 5px !important;
  margin-top: 6px !important;
}

body.rq-scaled-menu:not(.is-playing) .mode-bests-grid div {
  padding: 5px 6px !important;
}

body.rq-scaled-menu:not(.is-playing) .inventory-launch-card.inventory-menu-card.action-hub-card {
  padding-top: 11px !important;
  padding-bottom: 10px !important;
  gap: 6px !important;
}

body.rq-scaled-menu:not(.is-playing) .inventory-menu-grid.action-hub-grid {
  grid-auto-rows: auto !important;
  gap: 6px !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-tile,
body.rq-scaled-menu:not(.is-playing) .action-hub-more-btn {
  min-height: 42px !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero {
  min-height: 54px !important;
}


/* v7.0.179 Avatar Showcase + Best Score Luxe + Footer Subdue:
   add a richer display-case feel behind the equipped avatar,
   make Best Score feel more premium without growing taller,
   and push the footer further into the background. */
.home-avatar3d {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(232, 198, 126, .20) !important;
  background:
    radial-gradient(circle at 50% 26%, rgba(243, 205, 120, .16), transparent 34%),
    radial-gradient(circle at 50% 96%, rgba(16, 69, 109, .24), transparent 30%),
    linear-gradient(180deg, rgba(60, 45, 30, .52), rgba(16, 12, 10, .96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 0 1px rgba(224, 186, 112, .05),
    0 16px 30px rgba(0,0,0,.18),
    0 0 18px rgba(223, 185, 109, .05) !important;
}

.home-avatar3d::before {
  content: '' !important;
  position: absolute !important;
  inset: 10px !important;
  border-radius: 20px !important;
  pointer-events: none !important;
  border: 1px solid rgba(239, 207, 143, .07) !important;
  box-shadow:
    inset 0 0 0 1px rgba(34, 132, 125, .04),
    inset 0 -24px 40px rgba(0,0,0,.18) !important;
}

.home-avatar3d::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 16px !important;
  width: 78% !important;
  height: 18px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  background: radial-gradient(circle, rgba(0,0,0,.34) 0%, rgba(0,0,0,.08) 58%, transparent 76%) !important;
  filter: blur(4px) !important;
  opacity: .8 !important;
}

.home-avatar3d .avatar3d-view {
  position: relative !important;
  overflow: hidden !important;
  border-color: rgba(236, 202, 130, .18) !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 228, 166, .18), transparent 24%),
    radial-gradient(circle at 50% 88%, rgba(10, 43, 78, .34), transparent 33%),
    linear-gradient(180deg, rgba(64, 46, 30, .18), rgba(10, 8, 7, .06)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 0 1px rgba(229, 190, 118, .05) !important;
}

.home-avatar3d .avatar3d-view::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 229, 176, .22), transparent 20%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 28%) !important;
}

.home-avatar3d small {
  color: rgba(240, 221, 181, .88) !important;
  letter-spacing: .12em !important;
}

.home-profile-card .mode-bests {
  position: relative !important;
  padding: 7px 8px !important;
  border-radius: 14px !important;
  border-color: rgba(232, 197, 124, .22) !important;
  background:
    radial-gradient(circle at 8% 16%, rgba(237, 198, 110, .10), transparent 24%),
    linear-gradient(180deg, rgba(60, 45, 30, .68), rgba(16, 12, 10, .98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 0 0 1px rgba(229, 190, 118, .05),
    0 8px 18px rgba(0,0,0,.10) !important;
}

.home-profile-card .mode-bests::after {
  content: '' !important;
  position: absolute !important;
  right: 11px !important;
  top: 12px !important;
  width: 34px !important;
  height: 1px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(236, 204, 140, 0), rgba(236, 204, 140, .55), rgba(236, 204, 140, 0)) !important;
  opacity: .75 !important;
  pointer-events: none !important;
}

.mode-bests summary {
  padding-bottom: 5px !important;
  border-bottom-color: rgba(228, 191, 118, .10) !important;
}

.mode-bests summary span {
  color: rgba(236, 216, 180, .82) !important;
}

.mode-bests summary strong {
  color: rgba(255, 244, 214, .99) !important;
  letter-spacing: .04em !important;
}

.mode-bests-grid {
  gap: 5px !important;
  margin-top: 6px !important;
}

.mode-bests-grid div {
  padding: 5px 6px !important;
  border-radius: 11px !important;
  border-color: rgba(231, 194, 122, .13) !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(233, 194, 109, .06), transparent 24%),
    linear-gradient(180deg, rgba(71, 54, 38, .42), rgba(17, 13, 10, .92)) !important;
}

.mode-bests-grid strong {
  font-size: .80rem !important;
}

.mode-bests-grid span,
.mode-bests-grid small {
  font-size: .56rem !important;
}

.main-menu-footer {
  background: rgba(17, 12, 9, .48) !important;
  border-color: rgba(231, 193, 121, .12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important;
  opacity: .72 !important;
}

.main-menu-footer strong,
.main-menu-footer span {
  color: rgba(218, 201, 172, .66) !important;
}

.main-menu-footer strong {
  font-size: .82rem !important;
}

.main-menu-footer span {
  font-size: .74rem !important;
}

body.rq-scaled-menu:not(.is-playing) .home-avatar3d::after {
  height: 15px !important;
  bottom: 13px !important;
}

body.rq-scaled-menu:not(.is-playing) .home-profile-card .mode-bests {
  padding: 6px 7px !important;
}

body.rq-scaled-menu:not(.is-playing) .mode-bests-grid div {
  padding: 4px 5px !important;
}

body.rq-scaled-menu:not(.is-playing) .main-menu-footer {
  opacity: .64 !important;
}


/* v7.0.180 Avatar Showcase Visibility Hotfix:
   keep the display-case atmosphere, but place spotlight/glow behind the 3D model instead of over it. */
.home-avatar3d {
  isolation: isolate !important;
}

.home-avatar3d::before {
  z-index: 0 !important;
  opacity: .78 !important;
}

.home-avatar3d::after {
  z-index: 1 !important;
  opacity: .46 !important;
  filter: blur(6px) !important;
}

.home-avatar3d .avatar3d-view {
  position: relative !important;
  isolation: isolate !important;
  z-index: 2 !important;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 228, 166, .13), transparent 23%),
    radial-gradient(circle at 50% 90%, rgba(10, 43, 78, .20), transparent 34%),
    linear-gradient(180deg, rgba(64, 46, 30, .10), rgba(10, 8, 7, .02)) !important;
}

.home-avatar3d .avatar3d-view::before {
  z-index: 0 !important;
  opacity: .34 !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 229, 176, .16), transparent 19%),
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 24%) !important;
  mix-blend-mode: screen !important;
}

.home-avatar3d .avatar3d-view::after {
  z-index: 1 !important;
  opacity: .35 !important;
  pointer-events: none !important;
}

.home-avatar3d .avatar3d-view canvas,
.home-avatar3d .avatar3d-view > canvas,
.home-avatar3d .avatar3d-view .avatar3d-canvas,
.home-avatar3d .avatar3d-view > * {
  position: relative !important;
  z-index: 3 !important;
}

.home-avatar3d.has-home-animation-menu .avatar3d-view canvas,
.home-avatar3d.has-home-animation-menu .avatar3d-view > * {
  z-index: 3 !important;
}

body.rq-scaled-menu:not(.is-playing) .home-avatar3d .avatar3d-view::before {
  opacity: .28 !important;
}


/* v7.0.181 Avatar Display Simplify:
   remove the heavy dark display-case stack and turn the equipped avatar into a clean pedestal showcase. */
.home-avatar3d {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border: 1px solid rgba(232, 196, 122, .24) !important;
  border-radius: 23px !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(240, 198, 111, .135), transparent 30%),
    radial-gradient(ellipse at 50% 88%, rgba(16, 45, 70, .22), transparent 34%),
    linear-gradient(180deg, rgba(47, 36, 24, .48), rgba(12, 10, 8, .93)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 0 0 1px rgba(236, 199, 124, .045),
    0 16px 30px rgba(0,0,0,.18) !important;
}

.home-avatar3d::before {
  content: 'Equipped Avatar' !important;
  position: absolute !important;
  left: 50% !important;
  top: 12px !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  color: rgba(255, 243, 218, .92) !important;
  background: rgba(21, 15, 11, .70) !important;
  border: 1px solid rgba(232, 199, 128, .18) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04) !important;
  font-size: .57rem !important;
  font-weight: 1000 !important;
  letter-spacing: .115em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
  opacity: 1 !important;
}

.home-avatar3d::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 19px !important;
  width: 70% !important;
  height: 16px !important;
  min-width: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 1 !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.38), rgba(0,0,0,.12) 54%, transparent 74%) !important;
  filter: blur(4px) !important;
  opacity: .72 !important;
}

.home-avatar3d .avatar3d-view {
  position: relative !important;
  z-index: 2 !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid rgba(232, 198, 126, .16) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 222, 148, .18), transparent 25%),
    radial-gradient(ellipse at 50% 88%, rgba(27, 55, 81, .22), transparent 34%),
    linear-gradient(180deg, rgba(67, 50, 32, .16), rgba(10, 8, 7, .04)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 0 0 1px rgba(230, 190, 118, .035) !important;
}

.home-avatar3d .avatar3d-view::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  opacity: .26 !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 232, 176, .22), transparent 21%),
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 22%) !important;
}

.home-avatar3d .avatar3d-view::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 22px !important;
  width: 72% !important;
  height: 23px !important;
  transform: translateX(-50%) !important;
  z-index: 1 !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse at center, rgba(219, 167, 74, .14), rgba(0,0,0,.18) 42%, transparent 70%) !important;
  box-shadow: 0 0 18px rgba(224, 176, 85, .08) !important;
  opacity: .95 !important;
}

.home-avatar3d .avatar3d-view canvas,
.home-avatar3d .avatar3d-view > canvas,
.home-avatar3d .avatar3d-view .avatar3d-canvas,
.home-avatar3d .avatar3d-view > * {
  position: relative !important;
  z-index: 4 !important;
  filter: none !important;
}

.home-avatar3d.has-home-animation-menu,
.home-profile-card-3d.has-home-animation-menu .home-avatar3d {
  overflow: visible !important;
}

body.rq-scaled-menu:not(.is-playing) .home-avatar3d::before {
  top: 10px !important;
  font-size: .52rem !important;
  padding: 4px 10px !important;
}

body.rq-scaled-menu:not(.is-playing) .home-avatar3d::after {
  bottom: 15px !important;
  height: 14px !important;
  opacity: .62 !important;
}

body.rq-scaled-menu:not(.is-playing) .home-avatar3d .avatar3d-view::before {
  opacity: .20 !important;
}

@media (max-width: 760px) {
  .home-avatar3d::before {
    top: 10px !important;
    font-size: .50rem !important;
    padding: 4px 9px !important;
  }

  .home-avatar3d::after {
    bottom: 14px !important;
    height: 13px !important;
  }
}


/* v7.0.182 Avatar Showcase Frame: use the generated art-deco display frame and simplify the avatar presentation */
.home-profile-card.home-profile-card-3d .home-avatar3d {
  position: relative !important;
  min-height: 316px !important;
  padding: 54px 18px 44px !important;
  border: none !important;
  border-radius: 26px !important;
  background:
    url("/assets/ui/main-menu/avatar-showcase-frame.png") center / contain no-repeat !important;
  box-shadow: none !important;
  overflow: visible !important;
  isolation: isolate;
}

.home-profile-card.home-profile-card-3d .home-avatar3d::before,
.home-profile-card.home-profile-card-3d .home-avatar3d::after,
.home-profile-card.home-profile-card-3d.has-home-animation-menu::after,
.home-avatar3d.has-home-animation-menu::before,
.home-avatar3d.has-home-animation-menu::after {
  content: none !important;
  display: none !important;
}

.home-profile-card.home-profile-card-3d .home-avatar3d .avatar3d-view {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  min-height: 206px !important;
  height: 206px !important;
  border: none !important;
  border-radius: 18px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.home-profile-card.home-profile-card-3d .home-avatar3d .avatar3d-view::before,
.home-profile-card.home-profile-card-3d .home-avatar3d .avatar3d-view::after {
  content: none !important;
  display: none !important;
}

.home-profile-card.home-profile-card-3d .home-avatar3d canvas {
  position: relative !important;
  z-index: 2 !important;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.28));
}

.home-profile-card.home-profile-card-3d .home-avatar3d .home-animation-menu {
  z-index: 4 !important;
}

body.rq-scaled-menu:not(.is-playing) .home-profile-card.home-profile-card-3d .home-avatar3d {
  min-height: 296px !important;
  padding: 48px 16px 40px !important;
}

body.rq-scaled-menu:not(.is-playing) .home-profile-card.home-profile-card-3d .home-avatar3d .avatar3d-view {
  min-height: 192px !important;
  height: 192px !important;
}

body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-profile-card.home-profile-card-3d .home-avatar3d,
body.rq-phone-menu-landscape .home-profile-card.home-profile-card-3d .home-avatar3d {
  min-height: 250px !important;
  padding: 40px 12px 32px !important;
}

body.rq-touch-device.rq-phone-portrait:not(.is-playing) .home-profile-card.home-profile-card-3d .home-avatar3d .avatar3d-view,
body.rq-phone-menu-landscape .home-profile-card.home-profile-card-3d .home-avatar3d .avatar3d-view {
  min-height: 160px !important;
  height: 160px !important;
}


/* v7.0.189 Home Avatar Showcase Complete Rarity Set:
   swap the home equipped-avatar display to a clean rarity showcase background,
   remove the extra dark block behind the portrait, and support all shop rarities. */
.home-profile-card.home-profile-card-3d .home-avatar3d {
  min-height: 318px !important;
  padding: 18px 14px 20px !important;
  border: none !important;
  border-radius: 28px !important;
  background: var(--avatar-showcase-bg) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  overflow: hidden !important;
  isolation: isolate;
}

.home-profile-card.home-profile-card-3d .home-avatar3d::before,
.home-profile-card.home-profile-card-3d .home-avatar3d::after,
.home-profile-card.home-profile-card-3d .home-avatar3d .avatar3d-view::before,
.home-profile-card.home-profile-card-3d .home-avatar3d .avatar3d-view::after,
.home-profile-card.home-profile-card-3d.has-home-animation-menu::after,
.home-avatar3d.has-home-animation-menu::before,
.home-avatar3d.has-home-animation-menu::after {
  content: none !important;
  display: none !important;
}

.home-profile-card.home-profile-card-3d .home-avatar3d .avatar3d-view {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  min-height: 228px !important;
  height: 228px !important;
  border: none !important;
  border-radius: 18px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.home-profile-card.home-profile-card-3d .home-avatar3d canvas {
  position: relative !important;
  z-index: 2 !important;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .28));
}

body.rq-scaled-menu:not(.is-playing) .home-profile-card.home-profile-card-3d .home-avatar3d {
  min-height: 298px !important;
  padding: 16px 12px 18px !important;
}

body.rq-scaled-menu:not(.is-playing) .home-profile-card.home-profile-card-3d .home-avatar3d .avatar3d-view {
  min-height: 212px !important;
  height: 212px !important;
}

@media (max-width: 760px) {
  .home-profile-card.home-profile-card-3d .home-avatar3d {
    min-height: 280px !important;
    padding: 14px 10px 16px !important;
  }

  .home-profile-card.home-profile-card-3d .home-avatar3d .avatar3d-view {
    min-height: 194px !important;
    height: 194px !important;
  }
}


/* v7.0.190 Home Avatar Model Anchor + No Floor Shadow:
   keep the v7.0.189 rarity showcase art, but make the 3D model layer cleaner and
   remove any remaining UI-generated stage/shadow under the home model. */
.home-profile-card.home-profile-card-3d .home-avatar3d .avatar3d-view {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding-bottom: 0 !important;
}

.home-profile-card.home-profile-card-3d .home-avatar3d .avatar3d-view canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 auto !important;
  background: transparent !important;
}

.home-profile-card.home-profile-card-3d .home-avatar3d .avatar3d-view::before,
.home-profile-card.home-profile-card-3d .home-avatar3d .avatar3d-view::after {
  content: none !important;
  display: none !important;
}


/* v7.0.191 Home Avatar True Model Normalizer:
   keep home avatar canvases stable after the renderer normalizes model scale and floor anchoring. */
.home-profile-card.home-profile-card-3d .home-avatar3d .avatar3d-view {
  overflow: visible !important;
}
.home-profile-card.home-profile-card-3d .home-avatar3d canvas {
  transform-origin: 50% 100% !important;
}


/* v7.0.192 Home Avatar Width Fit: wide 3D home avatar models are constrained by the renderer before camera fitting, while the rarity showcase art remains unchanged. */
.home-profile-card.home-profile-card-3d .home-avatar3d .avatar3d-view {
  max-width: 100% !important;
}


/* v7.0.193 Home UI Premium Info Polish: compact rarity badge, record board, right-side status/daily mission info and Start Playing feedback. */
.home-avatar-rarity-badge {
  position: absolute !important;
  left: 50% !important;
  top: 12px !important;
  z-index: 8 !important;
  transform: translateX(-50%) !important;
  min-width: 86px !important;
  padding: 6px 13px !important;
  border-radius: 999px !important;
  text-align: center !important;
  font-size: .62rem !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  color: rgba(255, 246, 220, .96) !important;
  background: linear-gradient(180deg, rgba(68, 45, 22, .88), rgba(22, 14, 8, .92)) !important;
  border: 1px solid rgba(239, 198, 113, .30) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08) !important;
  pointer-events: none !important;
}
.home-avatar-rarity-badge.rarity-basic { color: #f0d3a2 !important; }
.home-avatar-rarity-badge.rarity-rare { color: #bffaff !important; border-color: rgba(78, 205, 214, .38) !important; }
.home-avatar-rarity-badge.rarity-epic { color: #f1c7ff !important; border-color: rgba(208, 121, 255, .42) !important; }
.home-avatar-rarity-badge.rarity-legendary { color: #ffe5a3 !important; border-color: rgba(255, 204, 91, .48) !important; }
.home-avatar-rarity-badge.rarity-mythic { color: #e9c6ff !important; border-color: rgba(223, 158, 255, .52) !important; box-shadow: 0 8px 18px rgba(0,0,0,.22), 0 0 14px rgba(177, 91, 255, .12) !important; }
.home-avatar-rarity-badge.rarity-exotic { color: #b9fff1 !important; border-color: rgba(50, 221, 188, .50) !important; }
.home-avatar-rarity-badge.rarity-impossible { color: #fffaf0 !important; border-color: rgba(255,255,255,.62) !important; box-shadow: 0 8px 18px rgba(0,0,0,.22), 0 0 16px rgba(255,255,255,.14) !important; }
.home-avatar-rarity-badge.rarity-event { color: #ffd2e7 !important; border-color: rgba(255, 112, 178, .50) !important; }

.mode-bests-record-board {
  padding: 8px 9px !important;
  border-radius: 15px !important;
}
.mode-bests-record-board .mode-bests-head {
  padding-bottom: 5px !important;
  margin-bottom: 6px !important;
}
.mode-bests-record-board .mode-bests-head span {
  letter-spacing: .13em !important;
}
.mode-bests-record-board .mode-bests-head strong {
  font-size: .98rem !important;
}
.mode-bests-record-board .mode-bests-head em {
  font-size: .56rem !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}
.mode-bests-record-board .mode-bests-grid {
  gap: 5px !important;
  margin-top: 5px !important;
}
.mode-bests-record-board .mode-record-tile {
  position: relative !important;
  padding: 5px 5px 6px !important;
  min-height: 44px !important;
  border-radius: 11px !important;
  background: linear-gradient(180deg, rgba(47, 35, 23, .64), rgba(15, 11, 8, .90)) !important;
  border: 1px solid rgba(225, 186, 112, .13) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.mode-bests-record-board .mode-record-tile.is-best {
  border-color: rgba(255, 207, 111, .42) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 14px rgba(236, 174, 68, .08) !important;
}
.mode-bests-record-board .mode-record-tile.is-best::after {
  content: 'BEST' !important;
  position: absolute !important;
  right: 5px !important;
  top: 4px !important;
  font-size: .45rem !important;
  font-weight: 1000 !important;
  color: rgba(255, 226, 160, .92) !important;
  letter-spacing: .08em !important;
}
.mode-bests-record-board .mode-record-tile.is-empty {
  opacity: .62 !important;
}
.mode-bests-record-board .mode-record-tile strong {
  font-size: .82rem !important;
}
.mode-bests-record-board .mode-record-tile small,
.mode-bests-record-board .mode-record-tile span {
  font-size: .52rem !important;
}

.action-hub-head {
  gap: 9px !important;
}
.action-hub-status-row {
  display: flex !important;
  gap: 7px !important;
  align-items: center !important;
  margin-top: 3px !important;
  font-size: .54rem !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  color: rgba(232, 213, 177, .66) !important;
}
.action-hub-status-row b {
  color: rgba(147, 241, 185, .88) !important;
  font-weight: 1000 !important;
}
.action-hub-status-row em {
  font-style: normal !important;
  color: rgba(232, 213, 177, .58) !important;
}
.action-hub-daily-mini {
  width: 100% !important;
  min-height: 42px !important;
  margin: -2px 0 6px !important;
  padding: 7px 10px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(229, 190, 118, .16) !important;
  background: radial-gradient(circle at 10% 0%, rgba(237, 193, 94, .12), transparent 32%), linear-gradient(180deg, rgba(42, 30, 18, .66), rgba(14, 10, 7, .88)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
  text-align: left !important;
  cursor: pointer !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1px !important;
}
.action-hub-daily-mini:hover {
  border-color: rgba(244, 200, 116, .34) !important;
  transform: translateY(-1px) !important;
}
.action-hub-daily-mini span {
  color: rgba(237, 216, 178, .68) !important;
  font-size: .50rem !important;
  font-weight: 1000 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
.action-hub-daily-mini strong {
  color: rgba(255, 244, 215, .96) !important;
  font-size: .72rem !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.action-hub-daily-mini em {
  color: rgba(232, 211, 174, .70) !important;
  font-size: .58rem !important;
  font-style: normal !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.action-hub-daily-mini.can-claim {
  border-color: rgba(142, 240, 170, .34) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 14px rgba(98, 221, 126, .08) !important;
}
.action-hub-grid {
  gap: 7px !important;
  grid-auto-rows: minmax(44px, auto) !important;
}
.action-hub-grid .menu-card-btn,
.action-hub-grid .menu-card-btn.action-hub-tile,
.action-hub-grid .menu-card-btn.action-hub-more-btn {
  min-height: 45px !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}
.action-hub-grid .menu-card-btn.action-hub-hero {
  min-height: 60px !important;
}
.menu-card-start-btn {
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease !important;
}
.menu-card-start-btn:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.08) saturate(1.08) !important;
  box-shadow: 0 14px 24px rgba(0,0,0,.20), 0 0 22px rgba(241, 185, 82, .16) !important;
}
.menu-card-start-btn:active {
  transform: translateY(0) scale(.992) !important;
}
.menu-card-start-btn:hover img {
  filter: drop-shadow(0 0 10px rgba(255, 214, 126, .30)) brightness(1.10) !important;
}

body.rq-scaled-menu:not(.is-playing) .action-hub-daily-mini {
  min-height: 36px !important;
  padding: 5px 8px !important;
  margin-bottom: 4px !important;
}
body.rq-scaled-menu:not(.is-playing) .action-hub-daily-mini strong { font-size: .66rem !important; }
body.rq-scaled-menu:not(.is-playing) .action-hub-daily-mini em { font-size: .52rem !important; }
body.rq-scaled-menu:not(.is-playing) .action-hub-grid {
  gap: 6px !important;
}
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-tile,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-more-btn {
  min-height: 41px !important;
}
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero {
  min-height: 54px !important;
}


/* v7.0.194 Home Status Merge + Daily Mission Copy Cleanup:
   merge online/version info into the lower server pill and keep the right hub compact. */
.action-hub-status-row {
  display: none !important;
}
.action-hub-head {
  margin-bottom: 7px !important;
}
.action-hub-title span {
  letter-spacing: .14em !important;
}
.action-hub-daily-mini {
  min-height: 39px !important;
  margin: -1px 0 6px !important;
  padding: 6px 10px !important;
}
.action-hub-daily-mini span {
  font-size: .48rem !important;
}
.action-hub-daily-mini strong {
  font-size: .70rem !important;
}
.action-hub-daily-mini em {
  font-size: .56rem !important;
}
.status-pill#dbBadge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  max-width: max-content !important;
  margin-inline: auto !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  opacity: .82 !important;
}
.status-pill#dbBadge.db-ok {
  color: rgba(193, 255, 216, .84) !important;
  border-color: rgba(100, 222, 142, .22) !important;
}
body.rq-scaled-menu:not(.is-playing) .action-hub-daily-mini {
  min-height: 36px !important;
  padding: 5px 9px !important;
}
body.rq-scaled-menu:not(.is-playing) .action-hub-daily-mini strong {
  font-size: .66rem !important;
}
body.rq-scaled-menu:not(.is-playing) .action-hub-daily-mini em {
  font-size: .52rem !important;
}


/* v7.0.195 Emergency Auth/Status Frontend Fix: fix quoted Today's Contract strings so app.js initializes and login/auth/server status can run again. */


/* v7.0.196 Home Compact Polish:
   clean up the contract card, tighten the right hub header spacing,
   and tone down the lower server status so it does not compete with the main CTA. */
.inventory-launch-card.action-hub-card .action-hub-head {
  margin-bottom: 4px !important;
  gap: 5px !important;
  transform: translateY(-4px) !important;
}

.inventory-launch-card.action-hub-card .action-hub-compass,
.inventory-launch-card.action-hub-card .inventory-launch-icon {
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  font-size: .9rem !important;
  opacity: .86 !important;
  margin-bottom: -2px !important;
}

.inventory-launch-card.action-hub-card .action-hub-title span {
  font-size: .82rem !important;
  letter-spacing: .16em !important;
}

.action-hub-daily-mini {
  min-height: 52px !important;
  margin: -3px 0 8px !important;
  padding: 8px 11px 8px !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(237, 193, 94, .10), transparent 34%),
    linear-gradient(180deg, rgba(38, 28, 18, .58), rgba(13, 10, 7, .86)) !important;
  border-color: rgba(229, 190, 118, .18) !important;
  gap: 2px !important;
}

.action-hub-daily-mini span {
  font-size: .47rem !important;
  line-height: 1 !important;
  opacity: .88 !important;
}

.action-hub-daily-mini strong {
  font-size: .78rem !important;
  line-height: 1.04 !important;
  letter-spacing: .015em !important;
  max-width: 100% !important;
}

.action-hub-daily-mini em {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: 2px !important;
  color: rgba(229, 209, 176, .70) !important;
  font-size: .56rem !important;
  line-height: 1 !important;
}

.action-hub-daily-mini em span {
  min-width: 0 !important;
  font-size: .56rem !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: rgba(233, 215, 184, .76) !important;
}

.action-hub-daily-mini em b {
  flex: 0 0 auto !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  font-size: .54rem !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  font-style: normal !important;
  letter-spacing: .04em !important;
  color: rgba(255, 227, 155, .96) !important;
  background: linear-gradient(180deg, rgba(119, 84, 35, .62), rgba(42, 27, 12, .72)) !important;
  border: 1px solid rgba(241, 194, 95, .20) !important;
}

.action-hub-daily-mini.can-claim em b {
  color: rgba(206, 255, 214, .96) !important;
  border-color: rgba(111, 225, 139, .28) !important;
  background: linear-gradient(180deg, rgba(43, 102, 58, .55), rgba(18, 40, 22, .75)) !important;
}

.status-pill#dbBadge {
  padding: 6px 15px !important;
  border-radius: 999px !important;
  font-size: .70rem !important;
  letter-spacing: .08em !important;
  opacity: .58 !important;
  color: rgba(226, 211, 178, .74) !important;
  background: rgba(22, 16, 10, .50) !important;
  border-color: rgba(225, 187, 112, .12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  text-transform: none !important;
}

.status-pill#dbBadge.db-ok {
  color: rgba(206, 231, 198, .76) !important;
  border-color: rgba(112, 205, 139, .14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

body.rq-scaled-menu:not(.is-playing) .inventory-launch-card.action-hub-card .action-hub-head {
  margin-bottom: 3px !important;
  transform: translateY(-5px) !important;
}
body.rq-scaled-menu:not(.is-playing) .inventory-launch-card.action-hub-card .action-hub-compass,
body.rq-scaled-menu:not(.is-playing) .inventory-launch-card.action-hub-card .inventory-launch-icon {
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
}
body.rq-scaled-menu:not(.is-playing) .action-hub-daily-mini {
  min-height: 44px !important;
  margin: -5px 0 6px !important;
  padding: 6px 9px !important;
}
body.rq-scaled-menu:not(.is-playing) .action-hub-daily-mini strong {
  font-size: .68rem !important;
}
body.rq-scaled-menu:not(.is-playing) .action-hub-daily-mini em,
body.rq-scaled-menu:not(.is-playing) .action-hub-daily-mini em span {
  font-size: .50rem !important;
}
body.rq-scaled-menu:not(.is-playing) .action-hub-daily-mini em b {
  font-size: .48rem !important;
  padding: 2px 6px !important;
}

/* v7.0.197 Prague Daily Reset + Indicators: compact claim/new badges for Action Hub buttons. */
.action-hub-grid .menu-card-btn {
  position: relative !important;
}

.action-hub-indicator {
  position: absolute !important;
  top: 7px !important;
  right: 9px !important;
  z-index: 6 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 34px !important;
  height: 17px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  font-size: .52rem !important;
  font-weight: 1000 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
  box-shadow: 0 5px 12px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.16) !important;
}

.action-hub-indicator.is-new {
  color: rgba(255, 245, 218, .98) !important;
  border: 1px solid rgba(96, 220, 205, .34) !important;
  background: linear-gradient(180deg, rgba(43, 154, 142, .96), rgba(18, 72, 67, .98)) !important;
}

.action-hub-indicator.is-claim {
  color: rgba(45, 27, 7, .98) !important;
  border: 1px solid rgba(255, 229, 158, .62) !important;
  background: linear-gradient(180deg, rgba(255, 220, 120, .98), rgba(202, 133, 37, .98)) !important;
  box-shadow: 0 0 14px rgba(239, 190, 72, .24), 0 5px 12px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.action-hub-grid .menu-card-btn.has-action-indicator span {
  padding-right: 34px !important;
}

.action-hub-grid .menu-card-btn.has-claim-indicator {
  border-color: rgba(238, 190, 88, .34) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 0 18px rgba(225, 174, 64, .075) !important;
}

.action-hub-daily-mini.can-claim::after {
  content: 'CLAIM' !important;
  position: absolute !important;
  top: 8px !important;
  right: 9px !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  color: rgba(45, 27, 7, .98) !important;
  background: linear-gradient(180deg, rgba(255, 220, 120, .98), rgba(202, 133, 37, .98)) !important;
  border: 1px solid rgba(255, 229, 158, .55) !important;
  font-size: .48rem !important;
  font-weight: 1000 !important;
  letter-spacing: .08em !important;
}

@media (max-width: 760px) {
  .action-hub-indicator {
    top: 5px !important;
    right: 7px !important;
    height: 15px !important;
    min-width: 30px !important;
    font-size: .48rem !important;
    padding: 0 6px !important;
  }
}


/* v7.0.198 Claim Badge Polish + MariaDB Collection Seen + Mission Reset Countdown */
.action-hub-grid .menu-card-btn.has-action-indicator {
  overflow: visible !important;
}

.action-hub-grid .menu-card-btn.has-action-indicator:hover .action-hub-indicator,
.action-hub-grid .menu-card-btn.has-action-indicator:focus-visible .action-hub-indicator {
  top: 7px !important;
  right: 9px !important;
  transform: none !important;
}

.action-hub-daily-mini.can-claim::after {
  content: none !important;
  display: none !important;
}

.action-hub-daily-mini.can-claim {
  border-color: rgba(239, 190, 83, .26) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 16px rgba(222, 165, 61, .055) !important;
}

.action-hub-daily-mini.can-claim span:first-child::after {
  content: ' · CLAIM READY' !important;
  color: rgba(255, 222, 142, .92) !important;
  font-weight: 1000 !important;
}

.missions-reset-countdown {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 4px !important;
  color: rgba(239, 219, 183, .74) !important;
  font-size: .74rem !important;
  letter-spacing: .035em !important;
}

.missions-reset-countdown::before {
  content: '⏱' !important;
  opacity: .82 !important;
}

@media (max-width: 760px) {
  .action-hub-grid .menu-card-btn.has-action-indicator:hover .action-hub-indicator,
  .action-hub-grid .menu-card-btn.has-action-indicator:focus-visible .action-hub-indicator {
    top: 5px !important;
    right: 7px !important;
  }

  .missions-reset-countdown {
    font-size: .66rem !important;
  }
}

/* v7.0.199 Collection Showcase Rework: selected character preview, filters, progress, compact grid and quieter empty slots.
   v7.0.200 Collection Visual Fit Polish: brighter rarity detail, premium filters, width-safe card previews and clearer pagination. */
.inventory-dialog .inventory-dialog-shell {
  width: min(96vw, 980px) !important;
}

.inventory-dialog-body .inventory-panel.inventory-showcase-rework {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 14px 16px 12px !important;
  min-height: 0 !important;
  max-height: min(68vh, 620px) !important;
  overflow: hidden !important;
}

.inventory-showcase-rework .inventory-collection-topbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
}

.inventory-progress-block {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.inventory-progress-block span {
  color: rgba(224, 199, 151, .72) !important;
  font-size: .62rem !important;
  font-weight: 950 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

.inventory-progress-block strong {
  color: rgba(255, 242, 214, .96) !important;
  font-size: .9rem !important;
  font-weight: 950 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

.inventory-progress-meter {
  width: min(360px, 100%) !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: rgba(8, 6, 4, .72) !important;
  border: 1px solid rgba(226, 185, 103, .16) !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.42) !important;
}

.inventory-progress-meter i {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, rgba(171, 116, 39, .92), rgba(236, 196, 103, .96)) !important;
  box-shadow: 0 0 12px rgba(229, 180, 72, .28) !important;
}

.inventory-filter-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  overflow: hidden !important;
  min-height: 28px !important;
}

.inventory-filter-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 26px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(222, 189, 118, .16) !important;
  background: linear-gradient(180deg, rgba(35, 27, 18, .74), rgba(15, 11, 8, .78)) !important;
  color: rgba(246, 232, 205, .78) !important;
  font-size: .61rem !important;
  font-weight: 950 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.inventory-filter-chip em {
  min-width: 16px !important;
  height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.26) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(223, 200, 154, .74) !important;
  font-style: normal !important;
  font-size: .53rem !important;
}

.inventory-filter-chip.active,
.inventory-filter-chip:hover {
  color: rgba(255, 245, 220, .98) !important;
  border-color: rgba(235, 190, 91, .42) !important;
  background: linear-gradient(180deg, rgba(84, 62, 30, .90), rgba(31, 22, 12, .90)) !important;
  box-shadow: 0 0 14px rgba(215, 165, 67, .12) !important;
}

.inventory-showcase-layout {
  display: grid !important;
  grid-template-columns: 218px minmax(0, 1fr) !important;
  gap: 14px !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}

.inventory-selected-showcase {
  position: relative !important;
  min-height: 410px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(8,6,4,.04), rgba(8,6,4,.16)),
    var(--inventory-tier-bg) center / cover no-repeat !important;
  border: 1px solid rgba(230, 187, 94, .28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,245,210,.08),
    0 16px 30px rgba(0,0,0,.24) !important;
}

.inventory-selected-showcase::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(4,3,2,.82) 100%) !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

.inventory-selected-avatar {
  position: absolute !important;
  inset: 42px 8px 112px !important;
  z-index: 2 !important;
  overflow: visible !important;
}

.inventory-selected-avatar canvas,
.inventory-selected-avatar .avatar3d-empty {
  width: 100% !important;
  height: 100% !important;
}

.inventory-selected-info {
  position: absolute !important;
  left: 13px !important;
  right: 13px !important;
  bottom: 13px !important;
  display: grid !important;
  gap: 6px !important;
  z-index: 5 !important;
}

.inventory-selected-info .inventory-item-tier-chip {
  position: static !important;
  width: max-content !important;
  max-width: 100% !important;
}

.inventory-selected-info strong {
  color: rgba(255, 244, 222, .98) !important;
  font-size: 1.12rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.45) !important;
}

.inventory-selected-info span {
  color: rgba(224, 203, 166, .76) !important;
  font-size: .68rem !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.inventory-selected-action {
  min-height: 30px !important;
  margin-top: 2px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(246, 203, 112, .38) !important;
  background: linear-gradient(180deg, rgba(177, 132, 53, .96), rgba(100, 69, 27, .96)) !important;
  color: rgba(35, 22, 9, .96) !important;
  font-size: .68rem !important;
  font-weight: 950 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: 0 9px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.inventory-grid-stage {
  position: relative !important;
  display: grid !important;
  grid-template-rows: 1fr auto !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

.inventory-showcase-rework .inventory-page-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(116px, 1fr) !important;
  gap: 9px !important;
  min-height: 0 !important;
}

.inventory-showcase-rework .inventory-shelf-slot {
  min-height: 116px !important;
}

.inventory-showcase-rework .inventory-shelf-slot .inventory-item.inventory-item-card {
  border-radius: 16px !important;
}

.inventory-showcase-rework .inventory-shelf-slot .inventory-item.inventory-item-card.selected {
  outline: 1px solid rgba(245, 205, 109, .68) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 0 18px rgba(224, 170, 68, .20) !important;
}

.inventory-showcase-rework .inventory-shelf-slot .inventory-card-avatar3d {
  inset: 18px 12px 32px 12px !important;
}

.inventory-showcase-rework .inventory-shelf-slot .inventory-card-avatar3d canvas {
  transform: translateY(1px) scale(1.02) !important;
}

.inventory-showcase-rework .inventory-shelf-slot .inventory-item-card:hover .inventory-card-avatar3d canvas {
  transform: translateY(0) scale(1.06) !important;
}

.inventory-showcase-rework .inventory-shelf-slot-empty.inventory-shelf-slot-empty-card {
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(8,6,4,.54), rgba(8,6,4,.78)),
    url('/assets/ui/inventory/inventory-card-empty.png') center / cover no-repeat !important;
  opacity: .46 !important;
  filter: saturate(.55) brightness(.70) !important;
  border-color: rgba(222,198,160,.08) !important;
}

.inventory-showcase-rework .inventory-shelf-slot-empty.inventory-shelf-slot-empty-card span {
  opacity: .42 !important;
  font-size: .58rem !important;
}

.inventory-showcase-rework .inventory-grid-clear {
  position: absolute !important;
  right: 0 !important;
  bottom: -2px !important;
  width: 132px !important;
  height: 31px !important;
  opacity: .70 !important;
  transform: translateY(100%) !important;
  pointer-events: auto !important;
}

.inventory-showcase-rework .inventory-grid-clear .inventory-item-card.remove {
  min-height: 31px !important;
  border-radius: 999px !important;
}

.inventory-showcase-rework .inventory-grid-clear .inventory-item-hero,
.inventory-showcase-rework .inventory-grid-clear .inventory-remove-chip {
  display: none !important;
}

.inventory-showcase-rework .inventory-grid-clear .inventory-card-meta-remove {
  min-height: 31px !important;
  padding: 0 12px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
}

.inventory-showcase-rework .inventory-grid-clear .inventory-card-meta-remove strong {
  font-size: .62rem !important;
}

.inventory-showcase-rework .inventory-grid-clear .inventory-card-meta-remove em {
  display: none !important;
}

.inventory-showcase-rework .inventory-pagebar {
  min-height: 30px !important;
  justify-content: center !important;
}

@media (max-width: 760px) {
  .inventory-dialog .inventory-dialog-shell { width: min(96vw, 720px) !important; }
  .inventory-dialog-body .inventory-panel.inventory-showcase-rework { max-height: 74vh !important; padding: 12px !important; }
  .inventory-showcase-layout { grid-template-columns: 165px minmax(0, 1fr) !important; gap: 10px !important; }
  .inventory-selected-showcase { min-height: 340px !important; }
  .inventory-selected-avatar { inset: 38px 4px 104px !important; }
  .inventory-filter-row { gap: 4px !important; }
  .inventory-filter-chip { padding: 0 7px !important; font-size: .56rem !important; }
  .inventory-showcase-rework .inventory-page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: minmax(104px, 1fr) !important; }
  .inventory-showcase-rework .inventory-shelf-slot { min-height: 104px !important; }
}

/* v7.0.201 Collection Shelf Polish: passport detail, cleaner toolbar, motivational progress, hidden one-page pagination and calmer model cards. */
.inventory-showcase-rework .inventory-collection-topbar {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  padding: 0 2px 1px !important;
}

.inventory-progress-block {
  gap: 2px !important;
}

.inventory-progress-block strong {
  font-size: .93rem !important;
  letter-spacing: .035em !important;
}

.inventory-progress-block > em {
  color: rgba(222, 200, 162, .58) !important;
  font-style: normal !important;
  font-size: .62rem !important;
  font-weight: 850 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}

.inventory-progress-meter {
  width: min(430px, 100%) !important;
  height: 6px !important;
  margin-top: 1px !important;
}

.inventory-filter-row {
  min-height: 32px !important;
  padding: 3px 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(16, 12, 8, .42), rgba(8, 6, 4, .28)) !important;
  border: 1px solid rgba(224, 190, 118, .08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.inventory-filter-chip {
  min-height: 24px !important;
  padding: 0 10px !important;
  border-color: rgba(220, 188, 116, .10) !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: .78 !important;
}

.inventory-filter-chip.is-empty {
  display: none !important;
}

.inventory-filter-chip.active {
  opacity: 1 !important;
  background: linear-gradient(180deg, rgba(89, 65, 30, .92), rgba(28, 20, 11, .92)) !important;
  border-color: rgba(238, 196, 98, .48) !important;
  box-shadow: 0 0 14px rgba(224, 172, 68, .13), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

.inventory-filter-chip:hover:not(.active) {
  opacity: .96 !important;
  background: rgba(255,255,255,.025) !important;
}

.inventory-character-passport {
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 225, 140, .14), rgba(0,0,0,0) 44%),
    var(--inventory-tier-bg) center / cover no-repeat !important;
}

.inventory-character-passport::before {
  content: '' !important;
  position: absolute !important;
  inset: 10px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 226, 154, .12) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22), inset 0 -40px 44px rgba(0,0,0,.20) !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

.inventory-passport-header {
  position: absolute !important;
  top: 13px !important;
  left: 14px !important;
  right: 14px !important;
  z-index: 6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  border-radius: 999px !important;
  background: rgba(8, 6, 4, .38) !important;
  border: 1px solid rgba(255, 225, 150, .12) !important;
  backdrop-filter: blur(3px) !important;
}

.inventory-passport-header span,
.inventory-passport-header em {
  font-size: .54rem !important;
  font-weight: 1000 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: rgba(248, 227, 188, .78) !important;
  font-style: normal !important;
  white-space: nowrap !important;
}

.inventory-passport-header em {
  color: rgba(255, 224, 137, .95) !important;
}

.inventory-character-passport .inventory-selected-avatar {
  inset: 54px 4px 126px !important;
}

.inventory-character-passport .inventory-selected-info {
  left: 16px !important;
  right: 16px !important;
  bottom: 15px !important;
  gap: 5px !important;
  padding: 9px 10px 10px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(10, 7, 4, .26), rgba(5, 4, 3, .55)) !important;
  border: 1px solid rgba(240, 201, 120, .12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.inventory-character-passport .inventory-selected-info small {
  display: block !important;
  min-height: 17px !important;
}

.inventory-character-passport .inventory-selected-info .inventory-item-tier-chip {
  transform: scale(.88) !important;
  transform-origin: left center !important;
}

.inventory-character-passport .inventory-selected-info strong {
  font-size: 1.04rem !important;
}

.inventory-character-passport .inventory-selected-action {
  min-height: 28px !important;
  margin-top: 1px !important;
}

.inventory-showcase-rework .inventory-shelf-slot .inventory-card-avatar3d {
  inset: 24px 16px 36px 16px !important;
}

.inventory-showcase-rework .inventory-shelf-slot .inventory-card-avatar3d canvas {
  transform: translateY(2px) scale(.92) !important;
}

.inventory-showcase-rework .inventory-shelf-slot .inventory-item-card:hover .inventory-card-avatar3d canvas {
  transform: translateY(1px) scale(.96) !important;
}

.inventory-showcase-rework .inventory-shelf-slot .inventory-card-meta {
  min-height: 28px !important;
  padding: 4px 8px 7px !important;
}

.inventory-showcase-rework .inventory-shelf-slot-empty.inventory-shelf-slot-empty-card {
  opacity: .20 !important;
  filter: saturate(.28) brightness(.46) !important;
  background:
    linear-gradient(180deg, rgba(5,4,3,.72), rgba(5,4,3,.88)) !important;
  border-style: dashed !important;
}

.inventory-showcase-rework .inventory-shelf-slot-empty.inventory-shelf-slot-empty-card span {
  opacity: .30 !important;
  font-size: .50rem !important;
  letter-spacing: .13em !important;
}

.inventory-showcase-rework .inventory-pagebar:empty,
.inventory-showcase-rework .inventory-pagebar.is-hidden {
  display: none !important;
}

.inventory-showcase-rework .inventory-pagebar {
  margin-top: 1px !important;
}

@media (max-width: 760px) {
  .inventory-character-passport .inventory-selected-avatar { inset: 50px 2px 116px !important; }
  .inventory-passport-header { top: 10px !important; left: 10px !important; right: 10px !important; padding: 5px 7px !important; }
  .inventory-passport-header span, .inventory-passport-header em { font-size: .48rem !important; letter-spacing: .09em !important; }
  .inventory-filter-row { overflow-x: auto !important; scrollbar-width: none !important; }
  .inventory-filter-row::-webkit-scrollbar { display: none !important; }
  .inventory-showcase-rework .inventory-shelf-slot .inventory-card-avatar3d { inset: 24px 12px 36px 12px !important; }
}

/* v7.0.202 Collection Header + Default Chicken Avatar:
   center and unify the Collection title stack, remove the visual clear-avatar flow,
   and treat Chicken as the permanent starter companion. */
.inventory-dialog .inventory-dialog-head {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 42px 1fr 42px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 4px 6px 12px !important;
  border-bottom: 1px solid rgba(214, 180, 129, .14) !important;
}

.inventory-dialog .inventory-dialog-head > div {
  grid-column: 2 !important;
  justify-self: center !important;
  text-align: center !important;
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.inventory-dialog .inventory-dialog-head > div span {
  color: rgba(220, 187, 128, .78) !important;
  font-size: .68rem !important;
  font-weight: 1000 !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
}

.inventory-dialog .inventory-dialog-head > div strong {
  font-size: clamp(1.42rem, 2vw, 1.76rem) !important;
  line-height: 1 !important;
  color: rgba(255, 244, 224, .98) !important;
  text-shadow: 0 10px 24px rgba(0,0,0,.22) !important;
}

.inventory-dialog .inventory-dialog-head > div small {
  color: rgba(243, 232, 213, .62) !important;
  font-size: .72rem !important;
  letter-spacing: .015em !important;
}

.inventory-dialog .inventory-dialog-head .dialog-close-btn,
.inventory-dialog .inventory-dialog-head > button {
  grid-column: 3 !important;
  justify-self: end !important;
}

.inventory-selected-action.is-active,
.inventory-selected-action:disabled {
  cursor: default !important;
  color: rgba(255, 238, 202, .78) !important;
  background: linear-gradient(180deg, rgba(74, 58, 36, .54), rgba(28, 22, 15, .86)) !important;
  border-color: rgba(218, 181, 106, .26) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  opacity: .92 !important;
}

.inventory-grid-clear,
.inventory-remove-card-clean,
.inventory-shelf-clear-slot {
  display: none !important;
}

@media (max-width: 760px) {
  .inventory-dialog .inventory-dialog-head {
    grid-template-columns: 34px 1fr 34px !important;
    gap: 8px !important;
    padding: 2px 4px 10px !important;
  }

  .inventory-dialog .inventory-dialog-head > div strong {
    font-size: 1.34rem !important;
  }

  .inventory-dialog .inventory-dialog-head > div small {
    font-size: .66rem !important;
  }
}


/* v7.0.203 Collection Atmosphere Polish:
   add subtle archive/shelf atmosphere using existing assets only. No new image assets. */
.inventory-dialog-body .inventory-panel.inventory-showcase-rework {
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(18, 13, 10, .90), rgba(10, 8, 7, .96)) padding-box,
    linear-gradient(145deg, rgba(232, 193, 116, .18), rgba(36, 151, 139, .10), rgba(120, 78, 33, .16)) border-box !important;
  box-shadow:
    0 28px 70px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 0 38px rgba(216, 170, 82, .045) !important;
}

.inventory-dialog-body .inventory-panel.inventory-showcase-rework::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 22%),
    radial-gradient(circle at 16% 16%, rgba(230, 185, 92, .08), transparent 30%),
    radial-gradient(circle at 86% 4%, rgba(34, 151, 140, .055), transparent 26%),
    url('/assets/ui/main-menu/radioquest-main-bg.png') center / cover no-repeat !important;
  opacity: .115 !important;
  filter: saturate(.72) contrast(1.05) blur(.15px) !important;
}

.inventory-dialog-body .inventory-panel.inventory-showcase-rework > * {
  position: relative !important;
  z-index: 1 !important;
}

.inventory-dialog .inventory-dialog-head::before,
.inventory-dialog .inventory-dialog-head::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}

.inventory-dialog .inventory-dialog-head::before {
  top: 0 !important;
  width: min(410px, 70%) !important;
  height: 100% !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(237, 196, 112, .12), transparent 42%),
    linear-gradient(90deg, transparent, rgba(222, 183, 111, .08), transparent) !important;
  border: 1px solid rgba(222, 183, 111, .08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  opacity: .86 !important;
}

.inventory-dialog .inventory-dialog-head::after {
  bottom: 4px !important;
  width: min(310px, 54%) !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(236, 201, 130, .52), transparent) !important;
  opacity: .86 !important;
}

.inventory-dialog .inventory-dialog-head > div strong {
  display: inline-grid !important;
  place-items: center !important;
  justify-self: center !important;
  min-width: min(310px, 62vw) !important;
  padding: 3px 18px 5px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(56, 39, 20, .34), transparent) !important;
  border: 1px solid rgba(225, 185, 104, .10) !important;
}

.inventory-progress-block {
  position: relative !important;
  padding: 10px 14px 11px 42px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 16px 15px, rgba(237, 197, 116, .28), rgba(237, 197, 116, .08) 26%, transparent 28%),
    linear-gradient(180deg, rgba(55, 38, 21, .58), rgba(16, 12, 9, .76)) !important;
  border: 1px solid rgba(223, 184, 110, .16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 20px rgba(0,0,0,.11) !important;
}

.inventory-progress-block::before {
  content: '★' !important;
  position: absolute !important;
  left: 15px !important;
  top: 11px !important;
  color: rgba(255, 221, 145, .82) !important;
  font-size: .78rem !important;
  text-shadow: 0 0 12px rgba(235, 184, 82, .20) !important;
}

.inventory-progress-block span {
  color: rgba(239, 207, 145, .78) !important;
  letter-spacing: .17em !important;
}

.inventory-progress-block strong {
  color: rgba(255, 246, 226, .98) !important;
  text-shadow: 0 8px 18px rgba(0,0,0,.24) !important;
}

.inventory-progress-block > em {
  color: rgba(233, 216, 179, .60) !important;
}

.inventory-progress-meter {
  height: 6px !important;
  margin-top: 7px !important;
  background: rgba(4, 3, 2, .44) !important;
  border-color: rgba(225, 186, 112, .12) !important;
}

.inventory-progress-meter i {
  background: linear-gradient(90deg, rgba(192, 135, 48, .92), rgba(244, 206, 117, .98), rgba(48, 154, 143, .70)) !important;
  box-shadow: 0 0 13px rgba(232, 182, 82, .18) !important;
}

.inventory-filter-row {
  padding: 5px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(15, 11, 8, .60), rgba(7, 6, 5, .32)) !important;
  border: 1px solid rgba(224, 186, 112, .10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.inventory-filter-chip {
  min-height: 30px !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg, rgba(48, 35, 22, .62), rgba(17, 13, 10, .78)) !important;
  border-color: rgba(215, 177, 102, .13) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.inventory-filter-chip.active {
  background:
    radial-gradient(circle at 14% 0%, rgba(242, 205, 128, .18), transparent 46%),
    linear-gradient(180deg, rgba(90, 64, 31, .82), rgba(30, 22, 13, .94)) !important;
  border-color: rgba(239, 203, 124, .34) !important;
  box-shadow: 0 0 18px rgba(226, 176, 78, .12), inset 0 1px 0 rgba(255,255,255,.055) !important;
}

.inventory-filter-chip em {
  min-width: 20px !important;
  height: 18px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.25) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
}

.inventory-character-passport {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(244, 206, 126, .13), transparent 34%),
    var(--inventory-tier-bg) center / cover no-repeat !important;
  box-shadow:
    0 18px 34px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 0 1px rgba(236, 197, 122, .08) !important;
}

.inventory-character-passport::after {
  content: '' !important;
  position: absolute !important;
  inset: 44px 12px 96px !important;
  z-index: 0 !important;
  border-radius: 20px !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 226, 155, .15), transparent 36%),
    radial-gradient(ellipse at 50% 95%, rgba(0,0,0,.28), transparent 64%) !important;
  border: 1px solid rgba(238, 199, 123, .08) !important;
  opacity: .88 !important;
}

.inventory-character-passport .inventory-selected-avatar,
.inventory-character-passport .inventory-selected-info,
.inventory-character-passport .inventory-passport-header {
  position: relative !important;
  z-index: 1 !important;
}

.inventory-passport-header {
  background: linear-gradient(90deg, rgba(10, 8, 7, .52), rgba(50, 34, 17, .62), rgba(10, 8, 7, .40)) !important;
  border: 1px solid rgba(229, 190, 112, .15) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.inventory-character-passport .inventory-selected-info {
  background: linear-gradient(180deg, rgba(18, 13, 9, .72), rgba(8, 7, 6, .88)) !important;
  border-color: rgba(231, 192, 115, .14) !important;
}

.inventory-showcase-rework .inventory-shelf-slot-empty.inventory-shelf-slot-empty-card {
  opacity: .30 !important;
  filter: grayscale(.15) saturate(.42) !important;
  background:
    linear-gradient(180deg, rgba(23, 18, 14, .42), rgba(7, 6, 5, .52)) !important;
  border-color: rgba(222, 184, 112, .055) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.012) !important;
}

.inventory-showcase-rework .inventory-shelf-slot-empty.inventory-shelf-slot-empty-card:hover {
  opacity: .40 !important;
  transform: none !important;
}

.inventory-showcase-rework .inventory-shelf-slot-empty.inventory-shelf-slot-empty-card span {
  color: rgba(229, 211, 176, .36) !important;
  letter-spacing: .16em !important;
}

.inventory-showcase-rework .inventory-pagebar {
  justify-self: center !important;
  margin-top: 8px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(40, 28, 17, .58), rgba(9, 7, 6, .70)) !important;
  border: 1px solid rgba(225, 185, 109, .15) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

@media (max-width: 760px) {
  .inventory-progress-block { padding-left: 34px !important; }
  .inventory-dialog .inventory-dialog-head::before { width: 82% !important; }
  .inventory-dialog .inventory-dialog-head > div strong { min-width: 0 !important; padding-inline: 12px !important; }
}

/* v7.0.204 Collection Passport Layout Fix: center rarity badge, free the model area and pin compact identity copy to the lower nameplate. */
.inventory-character-passport {
  display: block !important;
}

.inventory-passport-header {
  top: 12px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  justify-content: center !important;
  min-width: 118px !important;
  width: auto !important;
  padding: 5px 14px !important;
  background: rgba(8, 6, 4, .48) !important;
}

.inventory-passport-rarity {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 18px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  color: rgba(255, 228, 146, .98) !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.32) !important;
}

.inventory-character-passport .inventory-selected-avatar {
  inset: 58px 6px 116px !important;
}

.inventory-character-passport .inventory-selected-avatar canvas,
.inventory-character-passport .inventory-selected-avatar .avatar3d-empty {
  transform: translateY(10px) scale(1.06) !important;
  transform-origin: center bottom !important;
}

.inventory-character-passport::after {
  inset: 42px 10px 98px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 226, 155, .16), transparent 38%),
    radial-gradient(ellipse at 50% 92%, rgba(0, 0, 0, .18), transparent 62%) !important;
}

.inventory-character-passport .inventory-selected-info {
  left: 14px !important;
  right: 14px !important;
  bottom: 12px !important;
  gap: 2px !important;
  padding: 10px 12px 11px !important;
  background: linear-gradient(180deg, rgba(12, 9, 6, .26), rgba(5, 4, 3, .62)) !important;
  border: 1px solid rgba(240, 201, 120, .15) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.12) !important;
}

.inventory-character-passport .inventory-selected-info small {
  display: block !important;
  min-height: 0 !important;
  color: rgba(255, 219, 130, .92) !important;
  font-size: .64rem !important;
  font-weight: 1000 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
}

.inventory-character-passport .inventory-selected-info strong {
  font-size: 1.18rem !important;
  line-height: 1.02 !important;
  margin-top: 1px !important;
}

.inventory-character-passport .inventory-selected-info span {
  color: rgba(232, 211, 173, .72) !important;
  font-size: .62rem !important;
  letter-spacing: .10em !important;
}

.inventory-character-passport .inventory-selected-action {
  min-height: 30px !important;
  margin-top: 5px !important;
}

@media (max-width: 760px) {
  .inventory-passport-header {
    min-width: 102px !important;
    padding-inline: 11px !important;
  }

  .inventory-character-passport .inventory-selected-avatar {
    inset: 52px 4px 108px !important;
  }

  .inventory-character-passport .inventory-selected-avatar canvas,
  .inventory-character-passport .inventory-selected-avatar .avatar3d-empty {
    transform: translateY(7px) scale(1.04) !important;
  }

  .inventory-character-passport .inventory-selected-info {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    padding: 8px 10px 9px !important;
  }

  .inventory-character-passport .inventory-selected-info strong {
    font-size: 1.03rem !important;
  }
}

/* v7.0.205 Collection Passport Nameplate Fix: reserve a clean lower nameplate, keep the model above it, and avoid duplicate active copy. */
.inventory-character-passport .inventory-selected-avatar {
  inset: 42px 4px 138px !important;
  overflow: hidden !important;
  z-index: 2 !important;
}

.inventory-character-passport .inventory-selected-avatar canvas,
.inventory-character-passport .inventory-selected-avatar .avatar3d-empty {
  transform: translateY(18px) scale(1.12) !important;
  transform-origin: center bottom !important;
}

.inventory-character-passport .inventory-selected-info {
  left: 14px !important;
  right: 14px !important;
  bottom: 13px !important;
  min-height: 106px !important;
  align-content: center !important;
  justify-items: center !important;
  text-align: center !important;
  gap: 3px !important;
  padding: 11px 12px 12px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(12, 9, 6, .34), rgba(4, 3, 2, .74)) !important;
  border: 1px solid rgba(240, 201, 120, .16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 10px 20px rgba(0,0,0,.16) !important;
}

.inventory-character-passport .inventory-selected-info small.inventory-selected-rarity-copy {
  display: block !important;
  color: rgba(255, 221, 139, .95) !important;
  font-size: .62rem !important;
  font-weight: 1000 !important;
  letter-spacing: .13em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.inventory-character-passport .inventory-selected-info strong {
  font-size: 1.12rem !important;
  line-height: 1.02 !important;
  margin-top: 2px !important;
}

.inventory-character-passport .inventory-selected-info span {
  font-size: .60rem !important;
  line-height: 1.05 !important;
  letter-spacing: .11em !important;
}

.inventory-character-passport .inventory-selected-action {
  min-height: 29px !important;
  width: min(168px, 100%) !important;
  margin: 6px auto 0 !important;
}

.inventory-character-passport::after {
  inset: 38px 10px 128px !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 226, 155, .16), transparent 38%),
    radial-gradient(ellipse at 50% 94%, rgba(0, 0, 0, .16), transparent 62%) !important;
}

@media (max-width: 760px) {
  .inventory-character-passport .inventory-selected-avatar {
    inset: 40px 3px 124px !important;
  }

  .inventory-character-passport .inventory-selected-avatar canvas,
  .inventory-character-passport .inventory-selected-avatar .avatar3d-empty {
    transform: translateY(13px) scale(1.08) !important;
  }

  .inventory-character-passport .inventory-selected-info {
    min-height: 98px !important;
    padding: 9px 10px 10px !important;
  }
}


/* v7.0.211 Shop Stage Cleanup + Header Polish.
   Goal: remove duplicate rarity artwork from the whole shop card,
   keep the artwork only inside the 3D preview stage, and make the top of the shop cleaner. */
.shop-dialog-card .leaderboard-card-head {
  gap: 16px !important;
  padding: 18px 20px 16px !important;
  background:
    linear-gradient(180deg, rgba(31, 23, 17, .97), rgba(31, 23, 17, .89)),
    radial-gradient(circle at 8% 0%, rgba(216, 176, 106, .16), transparent 38%) !important;
}

.shop-dialog-card .leaderboard-card-head h2 {
  margin: 0 0 4px;
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  letter-spacing: -.03em;
}

.shop-dialog-card .leaderboard-card-head p {
  max-width: 62ch;
  line-height: 1.42;
}

.shop-balance-row {
  margin-bottom: 10px !important;
  border-radius: 20px !important;
}

.shop-preview-row-compact {
  min-height: 64px;
  margin-bottom: 12px;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(216, 176, 106, .10), transparent 34%),
    linear-gradient(145deg, rgba(38, 28, 21, .72), rgba(15, 12, 10, .58)) !important;
  border: 1px solid rgba(222, 198, 160, .12) !important;
}

.shop-preview-row-compact strong {
  color: var(--rq-warm-cream);
  letter-spacing: -.01em;
}

.shop-preview-row-compact span {
  color: rgba(243, 232, 213, .70);
}

.shop-preview-placeholder {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 20px rgba(0,0,0,.20);
}

.shop-tabs-characters-only {
  margin: 0 0 12px !important;
}

.shop-tabs-characters-only button.active {
  min-height: 38px !important;
  padding: 8px 15px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, rgba(216, 176, 106, .22), rgba(91, 79, 63, .26)) !important;
}

.shop-status {
  display: grid;
  gap: 12px;
}

.shop-hero-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(250px, 1fr);
  gap: 14px;
  padding: 16px 18px;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.06), transparent 34%),
    linear-gradient(135deg, rgba(45, 34, 24, .90), rgba(13, 18, 29, .84)) !important;
  border: 1px solid rgba(222, 198, 160, .14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 30px rgba(0,0,0,.18);
}

.shop-hero-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.03) 40%, transparent 100%);
}

.shop-hero-copy,
.shop-hero-stats {
  position: relative;
  z-index: 1;
}

.shop-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: rgba(243, 232, 213, .72);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.shop-hero-eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(216, 176, 106, .92);
  box-shadow: 0 0 12px rgba(216, 176, 106, .34);
}

.shop-hero-title-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
}

.shop-hero-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(8, 11, 18, .42);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.shop-hero-icon .shop-tier-glyph {
  width: 30px;
  height: 30px;
}

.shop-hero-title-row strong {
  display: block;
  margin: 0 0 3px;
  color: var(--rq-warm-cream);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.1;
}

.shop-hero-title-row small {
  color: rgba(243, 232, 213, .60);
  font-size: .72rem;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.shop-hero-copy p {
  margin: 12px 0 0;
  max-width: 58ch;
  color: rgba(243, 232, 213, .78);
  line-height: 1.5;
}

.shop-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.shop-hero-metric {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px 12px 10px;
  border-radius: 18px;
  background: rgba(7, 11, 18, .36);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.shop-hero-metric span {
  color: rgba(243, 232, 213, .58);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.shop-hero-metric strong {
  color: var(--rq-warm-cream);
  font-size: .92rem;
  line-height: 1.15;
}

.shop-hero-metric.wallet strong {
  color: var(--rq-warm-gold);
}

.shop-status-line {
  padding: 9px 12px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)) !important;
}

.shop-tier-strip {
  gap: 10px !important;
}

.shop-tier-strip button {
  min-height: 66px;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--tier, #d8b06a) 18%, transparent), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025)) !important;
}

.shop-tier-strip button::after {
  left: 16%;
  right: 16%;
}

.shop-grid {
  gap: 14px !important;
}

.shop-item.shop-item-static {
  min-height: 284px;
  gap: 9px;
  padding: 12px !important;
  border-radius: 22px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.05), transparent 30%),
    linear-gradient(180deg, rgba(18, 14, 11, .96), rgba(10, 15, 24, .98)) !important;
  border-color: rgba(222, 198, 160, .12) !important;
  box-shadow: 0 18px 36px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04), 0 0 26px var(--tier-glow) !important;
}

.shop-item.shop-item-static::before {
  background:
    radial-gradient(circle at 14% 0%, rgba(255,255,255,.07), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 36%) !important;
}

.shop-item.shop-item-static:hover {
  transform: translateY(-3px);
}

.shop-item-topline {
  min-height: 24px;
}

.shop-item-static .shop-rarity {
  padding: 4px 9px;
  background: rgba(9, 12, 18, .62) !important;
  letter-spacing: .11em;
}

.shop-item-static .static-card-preview {
  position: relative;
  height: 128px !important;
  min-height: 128px !important;
  max-height: 128px !important;
  margin: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.12), transparent 46%),
    linear-gradient(180deg, rgba(9, 13, 20, .18), rgba(9, 13, 20, .44)),
    var(--shop-tier-bg) !important;
  background-position: center, center, center !important;
  background-size: cover, cover, cover !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 12px 24px rgba(0,0,0,.22) !important;
}

.shop-item-static .static-card-preview::before {
  content: '';
  position: absolute;
  inset: auto 16% 11px;
  height: 22px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.52), rgba(0,0,0,0));
  filter: blur(5px);
  opacity: .68;
  pointer-events: none;
}

.shop-item-static .static-card-preview::after {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 10px;
  height: 28px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 25%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(231, 219, 195, .22), rgba(77, 61, 45, .26));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 6px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
  pointer-events: none;
}

.shop-card-avatar3d {
  display: grid;
  align-items: end;
}

.shop-card-avatar3d canvas {
  position: relative;
  z-index: 1;
  transform: translateY(10px) scale(.98);
}

.shop-item-body {
  display: grid;
  gap: 8px !important;
}

.shop-item-body h3 {
  font-size: 1rem !important;
  line-height: 1.08;
}

.shop-item-body small {
  display: inline-block;
  margin-top: 3px;
  color: rgba(243, 232, 213, .58) !important;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.shop-card-price {
  padding: 8px 10px !important;
  border-radius: 14px !important;
  background: rgba(8, 12, 20, .62) !important;
  border-color: rgba(222, 198, 160, .10) !important;
}

.shop-card-price span {
  color: rgba(243, 232, 213, .54) !important;
  font-size: .60rem;
  letter-spacing: .14em;
}

.shop-card-price strong {
  font-size: .80rem;
}

.shop-card-action {
  min-height: 40px !important;
  border-radius: 14px !important;
}

.shop-card-action.primary-btn {
  background: linear-gradient(135deg, rgba(140, 105, 64, .98), rgba(216, 176, 106, .98)) !important;
  color: #fff7ea !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.16);
}

.shop-card-action.secondary-btn {
  background: linear-gradient(180deg, rgba(45, 35, 27, .92), rgba(22, 17, 13, .98)) !important;
  color: rgba(243, 232, 213, .92) !important;
}

@media (max-width: 760px) {
  .shop-dialog-card .leaderboard-card-head {
    padding: 12px 12px 11px !important;
  }

  .shop-hero-banner {
    grid-template-columns: 1fr;
    padding: 14px 14px 12px;
  }

  .shop-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .shop-hero-metric {
    padding: 10px 9px;
    border-radius: 15px;
  }

  .shop-status-line {
    grid-template-columns: 1fr auto !important;
  }

  .shop-status-line em {
    grid-column: 1 / -1;
  }

  .shop-tier-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .shop-grid {
    gap: 10px !important;
  }

  .shop-item.shop-item-static {
    min-height: 248px;
    padding: 10px !important;
    border-radius: 18px;
  }

  .shop-item-static .static-card-preview {
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
  }

  .shop-card-avatar3d canvas {
    transform: translateY(8px) scale(.96);
  }

  .shop-card-price {
    padding: 7px 8px !important;
  }

  .shop-card-action {
    min-height: 36px !important;
  }
}


/* v7.0.212 Shop Top UI Polish.
   Cleaner first screen: compact wallet, softer guide panel, stronger spotlight,
   and a more elegant rarity selector. */
.shop-dialog-card .leaderboard-card-head {
  min-height: 78px !important;
  margin-bottom: 12px !important;
  padding: 18px 20px 15px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(216, 176, 106, .18), transparent 38%),
    linear-gradient(180deg, rgba(34, 25, 18, .98), rgba(23, 18, 14, .92)) !important;
  border-bottom: 1px solid rgba(222, 198, 160, .14) !important;
}

.shop-dialog-card .leaderboard-card-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 5px !important;
  color: var(--rq-warm-cream) !important;
  font-size: clamp(1.65rem, 2.2vw, 2.1rem) !important;
  letter-spacing: -.035em !important;
}

.shop-dialog-card .leaderboard-card-head h2::before {
  width: 28px !important;
  height: 28px !important;
  margin-right: 0 !important;
}

.shop-dialog-card .leaderboard-card-head h2::after {
  content: 'Premium cards';
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 4px 9px 3px;
  border-radius: 999px;
  color: rgba(255, 246, 231, .82);
  background: rgba(216, 176, 106, .13);
  border: 1px solid rgba(222, 198, 160, .16);
  font-size: .58rem;
  font-weight: 1000;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.shop-dialog-card .leaderboard-card-head p {
  max-width: 60ch !important;
  color: rgba(243, 232, 213, .68) !important;
  font-size: .86rem;
}

.shop-close-btn {
  min-height: 40px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(62, 45, 32, .88), rgba(32, 24, 18, .94)) !important;
}

.shop-balance-row {
  min-height: 52px;
  margin: 0 0 10px !important;
  padding: 10px 13px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(216, 176, 106, .18), transparent 42%),
    linear-gradient(135deg, rgba(38, 29, 21, .76), rgba(15, 13, 11, .58)) !important;
  border: 1px solid rgba(222, 198, 160, .12) !important;
}

.shop-balance-row strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(243, 232, 213, .78) !important;
  font-size: .72rem !important;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.shop-balance-row strong::before {
  margin-right: 0 !important;
}

.shop-balance-row span {
  min-width: 82px;
  justify-content: center;
  text-align: center;
  color: var(--rq-warm-gold) !important;
  font-size: 1.05rem !important;
  font-weight: 1000 !important;
  letter-spacing: .03em;
}

.shop-preview-row-compact {
  min-height: 54px !important;
  grid-template-columns: 46px 1fr !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
  padding: 8px 11px !important;
  border-radius: 17px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.052), rgba(255,255,255,.025)) !important;
}

.shop-preview-placeholder {
  width: 38px !important;
  height: 38px !important;
  border-radius: 14px !important;
}

.shop-preview-placeholder img {
  width: 23px !important;
  height: 23px !important;
}

.shop-preview-row-compact strong {
  font-size: .88rem;
}

.shop-preview-row-compact span {
  font-size: .76rem;
  line-height: 1.35;
}

.shop-tabs-characters-only {
  margin: 0 0 10px !important;
}

.shop-tabs-characters-only button.active {
  min-height: 34px !important;
  padding: 7px 14px !important;
  font-size: .70rem !important;
  letter-spacing: .13em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.16);
}

.shop-hero-banner {
  grid-template-columns: minmax(0, 1.6fr) minmax(250px, .95fr) !important;
  padding: 14px 16px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(216, 176, 106, .14), transparent 35%),
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.06), transparent 30%),
    linear-gradient(135deg, rgba(42, 31, 22, .92), rgba(11, 16, 25, .86)) !important;
  border-color: rgba(222, 198, 160, .13) !important;
}

.shop-hero-eyebrow {
  margin-bottom: 9px !important;
  color: rgba(216, 176, 106, .86) !important;
}

.shop-hero-title-row {
  gap: 11px !important;
}

.shop-hero-icon {
  width: 50px !important;
  height: 50px !important;
  border-radius: 17px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(216, 176, 106, .16), transparent 45%),
    rgba(7, 11, 18, .42) !important;
}

.shop-hero-title-row strong {
  font-size: clamp(1.12rem, 1.7vw, 1.32rem) !important;
}

.shop-hero-title-row small {
  color: rgba(243, 232, 213, .58) !important;
  font-size: .67rem !important;
}

.shop-hero-copy p {
  margin-top: 9px !important;
  max-width: 54ch !important;
  color: rgba(243, 232, 213, .70) !important;
  font-size: .82rem;
  line-height: 1.42 !important;
}

.shop-hero-stats {
  gap: 8px !important;
}

.shop-hero-metric {
  min-height: 70px;
  padding: 10px 11px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.055), transparent 42%),
    rgba(8, 12, 19, .38) !important;
}

.shop-hero-metric span {
  font-size: .58rem !important;
  color: rgba(243, 232, 213, .54) !important;
}

.shop-hero-metric strong {
  font-size: .88rem !important;
}

.shop-status-line {
  min-height: 42px;
  padding: 8px 12px !important;
}

.shop-tier-strip {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.shop-tier-strip button {
  min-height: 58px !important;
  padding: 8px 7px 7px !important;
  border-radius: 17px !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto;
  justify-items: center !important;
  gap: 2px !important;
  text-align: center !important;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--tier, #d8b06a) 18%, transparent), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.050), rgba(255,255,255,.025)) !important;
}

.shop-tier-strip button:hover {
  transform: translateY(-2px);
}

.shop-tier-strip button.active {
  transform: translateY(-2px);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--tier, #d8b06a) 28%, transparent), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)) !important;
}

.shop-tier-strip button > span {
  width: 24px !important;
  height: 24px !important;
}

.shop-tier-strip button span .shop-tier-glyph {
  width: 20px !important;
  height: 20px !important;
}

.shop-tier-strip button strong {
  font-size: .58rem !important;
  letter-spacing: .10em !important;
}

.shop-tier-strip button em {
  min-width: 24px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(7, 11, 18, .50);
  border: 1px solid rgba(255,255,255,.07);
  color: rgba(243, 232, 213, .74) !important;
  font-size: .64rem !important;
  font-style: normal;
  line-height: 1.2;
}

.shop-tier-strip button::after {
  inset: auto 22% 0 !important;
  height: 2px !important;
  opacity: .62 !important;
}

@media (max-width: 920px) and (orientation: landscape) {
  .shop-hero-banner {
    grid-template-columns: 1fr !important;
  }

  .shop-tier-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .shop-tier-strip button {
    min-height: 50px !important;
  }
}

@media (max-width: 760px) {
  .shop-dialog-card .leaderboard-card-head h2::after {
    display: none;
  }

  .shop-balance-row {
    min-height: 46px;
  }

  .shop-preview-row-compact {
    grid-template-columns: 40px 1fr !important;
  }

  .shop-hero-banner {
    grid-template-columns: 1fr !important;
    padding: 13px !important;
  }

  .shop-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .shop-hero-metric {
    min-height: 58px;
    padding: 8px !important;
  }

  .shop-hero-metric span {
    font-size: .52rem !important;
  }

  .shop-hero-metric strong {
    font-size: .72rem !important;
  }

  .shop-tier-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .shop-tier-strip button {
    min-height: 52px !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: 1fr !important;
    justify-items: start !important;
    text-align: left !important;
    gap: 8px !important;
  }

  .shop-tier-strip button em {
    justify-self: end;
  }
}


/* v7.0.213 Shop Header Simplify.
   Less explanation, more shop: centered title, compact wallet in the header area,
   hidden guide/spotlight blocks, rarity selector moved up. */
.shop-dialog-card {
  padding-top: 0 !important;
}

.shop-dialog-card .leaderboard-card-head {
  position: sticky;
  top: 0 !important;
  z-index: 12 !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  min-height: 104px !important;
  margin: 0 -18px 12px !important;
  padding: 18px 20px 16px !important;
  text-align: center !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(216, 176, 106, .20), transparent 42%),
    linear-gradient(180deg, rgba(34, 25, 18, .985), rgba(20, 16, 13, .94)) !important;
  border-bottom: 1px solid rgba(222, 198, 160, .14) !important;
  box-shadow: 0 16px 32px rgba(0,0,0,.20), inset 0 -1px 0 rgba(255,255,255,.045) !important;
}

.shop-dialog-card .leaderboard-card-head > div {
  grid-column: 2;
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 4px;
}

.shop-dialog-card .leaderboard-card-head h2 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 0 !important;
  color: var(--rq-warm-cream) !important;
  font-size: clamp(2rem, 3.4vw, 3rem) !important;
  line-height: .96 !important;
  letter-spacing: -.055em !important;
  text-align: center !important;
  text-shadow: 0 10px 32px rgba(0,0,0,.26);
}

.shop-dialog-card .leaderboard-card-head h2::before {
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  filter: drop-shadow(0 6px 14px rgba(216,176,106,.22)) !important;
}

.shop-dialog-card .leaderboard-card-head h2::after {
  content: 'Premium cards' !important;
  align-self: center;
  min-height: 22px;
  padding: 4px 9px 3px;
  border-radius: 999px;
  background: rgba(216, 176, 106, .14);
  border: 1px solid rgba(222, 198, 160, .17);
  color: rgba(255, 246, 231, .80);
  font-size: .58rem;
  font-weight: 1000;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.shop-dialog-card .leaderboard-card-head p {
  margin: 0 !important;
  max-width: 52ch !important;
  color: rgba(243, 232, 213, .66) !important;
  font-size: .88rem !important;
  line-height: 1.38 !important;
  text-align: center !important;
}

.shop-close-btn {
  grid-column: 3;
  justify-self: end;
  align-self: start;
  min-height: 38px !important;
  padding: 8px 12px !important;
}

.shop-balance-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: max-content;
  min-width: 0 !important;
  min-height: 36px !important;
  margin: -2px auto 10px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, rgba(216, 176, 106, .16), rgba(255,255,255,.045)) !important;
  border: 1px solid rgba(222, 198, 160, .16) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.055) !important;
}

.shop-balance-row strong {
  font-size: .62rem !important;
  letter-spacing: .15em !important;
  color: rgba(243, 232, 213, .58) !important;
}

.shop-balance-row strong::before {
  width: 7px;
  height: 7px;
  content: '' !important;
  border-radius: 999px;
  background: var(--rq-warm-gold);
  box-shadow: 0 0 10px rgba(216, 176, 106, .38);
}

.shop-balance-row span {
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--rq-warm-gold) !important;
  font-size: .96rem !important;
  line-height: 1 !important;
}

.shop-balance-row span::after {
  content: ' RC';
  color: rgba(243, 232, 213, .62);
  font-size: .68rem;
  letter-spacing: .08em;
}

.shop-preview-row-compact,
.shop-tabs-characters-only,
.shop-hero-banner {
  display: none !important;
}

.shop-status {
  gap: 10px !important;
}

.shop-tier-strip {
  margin-top: 2px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.shop-tier-strip button {
  min-height: 60px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--tier, #d8b06a) 17%, transparent), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.025)) !important;
  border-color: rgba(222, 198, 160, .10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 10px 20px rgba(0,0,0,.14) !important;
}

.shop-tier-strip button.active {
  border-color: color-mix(in srgb, var(--tier, #d8b06a) 66%, rgba(222,198,160,.18)) !important;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--tier, #d8b06a) 28%, transparent), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.078), rgba(255,255,255,.036)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 16px 30px rgba(0,0,0,.22), 0 0 22px color-mix(in srgb, var(--tier, #d8b06a) 18%, transparent) !important;
}

.shop-tier-strip button strong {
  font-size: .59rem !important;
  letter-spacing: .11em !important;
}

.shop-tier-strip button em {
  padding: 2px 7px !important;
  background: rgba(7,11,18,.48) !important;
  border-color: rgba(255,255,255,.07) !important;
}

.shop-status-line {
  min-height: 38px !important;
  margin-top: 0 !important;
  padding: 7px 12px !important;
  border-radius: 16px !important;
  grid-template-columns: auto 1fr auto !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.042), rgba(255,255,255,.022)) !important;
}

.shop-status-line strong {
  color: var(--rq-warm-cream) !important;
  font-size: .67rem !important;
}

.shop-status-line em {
  color: rgba(243,232,213,.58) !important;
  font-size: .74rem !important;
}

.shop-status-line b {
  color: var(--rq-warm-gold) !important;
  font-size: .74rem !important;
}

@media (max-width: 920px) and (orientation: landscape) {
  .shop-dialog-card .leaderboard-card-head {
    min-height: 82px !important;
    margin: 0 -18px 10px !important;
    padding: 12px 16px !important;
  }

  .shop-dialog-card .leaderboard-card-head h2 {
    font-size: clamp(1.55rem, 3.6vw, 2.05rem) !important;
  }

  .shop-dialog-card .leaderboard-card-head p {
    font-size: .76rem !important;
  }

  .shop-tier-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .shop-dialog-card .leaderboard-card-head {
    grid-template-columns: 1fr auto !important;
    min-height: 76px !important;
    margin: 0 -10px 9px !important;
    padding: 12px 10px 10px !important;
    text-align: left !important;
  }

  .shop-dialog-card .leaderboard-card-head > div {
    grid-column: 1;
    justify-self: start;
    justify-items: start;
  }

  .shop-dialog-card .leaderboard-card-head h2 {
    justify-content: start !important;
    font-size: 1.45rem !important;
    text-align: left !important;
  }

  .shop-dialog-card .leaderboard-card-head h2::before {
    width: 24px !important;
    height: 24px !important;
  }

  .shop-dialog-card .leaderboard-card-head h2::after {
    display: none !important;
  }

  .shop-dialog-card .leaderboard-card-head p {
    max-width: 34ch !important;
    font-size: .72rem !important;
    text-align: left !important;
  }

  .shop-close-btn {
    grid-column: 2;
    align-self: start;
  }

  .shop-balance-row {
    margin: 0 auto 8px !important;
    min-height: 34px !important;
  }

  .shop-tier-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .shop-tier-strip button {
    min-height: 50px !important;
  }

  .shop-status-line {
    grid-template-columns: 1fr auto !important;
  }

  .shop-status-line em {
    grid-column: 1 / -1;
  }
}


/* v7.0.214 Shop Detail Preview Polish.
   Removes the random premium-card badge copy, simplifies the shop header text,
   and makes the character detail modal match the newer companion vault style. */
.shop-dialog-card .leaderboard-card-head h2::after {
  content: none !important;
  display: none !important;
}

.shop-dialog-card .leaderboard-card-head {
  justify-content: center !important;
  text-align: center !important;
  padding-right: 72px !important;
}

.shop-dialog-card .leaderboard-card-head > div {
  display: grid;
  justify-items: center;
}

.shop-dialog-card .leaderboard-card-head h2 {
  justify-content: center !important;
}

.shop-close-btn {
  position: absolute !important;
  right: 18px !important;
  top: 17px !important;
}

.shop-detail-dialog::backdrop {
  background:
    radial-gradient(circle at 50% 20%, rgba(216, 176, 106, .10), transparent 34%),
    rgba(5, 7, 12, .78) !important;
  backdrop-filter: blur(18px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.05) !important;
}

.shop-detail-dialog {
  width: min(940px, calc(100dvw - 28px)) !important;
  max-height: calc(100dvh - 32px) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.shop-detail-card {
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 28px !important;
  border: 1px solid rgba(222, 198, 160, .16) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(216, 176, 106, .12), transparent 32%),
    linear-gradient(145deg, rgba(25, 20, 16, .98), rgba(9, 13, 21, .98)) !important;
  box-shadow: 0 34px 90px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.shop-detail-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(216, 176, 106, .08), transparent 28%, transparent 72%, rgba(216, 176, 106, .06)),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.055), transparent 36%);
  z-index: 0;
}

.shop-detail-card > * {
  position: relative;
  z-index: 1;
}

.shop-detail-card .leaderboard-card-head {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-height: 92px !important;
  margin: 0 !important;
  padding: 20px 22px 16px !important;
  text-align: left !important;
  background:
    linear-gradient(180deg, rgba(34, 25, 18, .94), rgba(18, 15, 13, .70)) !important;
  border-bottom: 1px solid rgba(222, 198, 160, .12) !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.035) !important;
}

.shop-detail-card .leaderboard-card-head > div {
  display: grid;
  justify-items: start;
  gap: 4px;
}

.shop-detail-card .leaderboard-card-head h2 {
  margin: 0 !important;
  color: var(--rq-warm-cream) !important;
  font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
  letter-spacing: -.035em !important;
}

.shop-detail-card .leaderboard-card-head h2::before,
.shop-detail-card .leaderboard-card-head h2::after {
  content: none !important;
  display: none !important;
}

.shop-detail-card .leaderboard-card-head p {
  margin: 0 !important;
  color: rgba(243, 232, 213, .66) !important;
  font-size: .86rem !important;
}

.shop-detail-close-btn {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(222, 198, 160, .16) !important;
  background:
    linear-gradient(180deg, rgba(62, 45, 32, .86), rgba(29, 22, 17, .94)) !important;
  color: rgba(243, 232, 213, .92) !important;
  font-weight: 1000 !important;
  cursor: pointer;
}

.shop-detail-close-btn span {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(248, 113, 113, .13);
  color: #fecaca;
  font-size: 1.05rem;
  line-height: 1;
}

.shop-detail-close-btn em {
  font-style: normal;
  font-size: .76rem;
}

.shop-detail-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.45fr) minmax(290px, .95fr) !important;
  gap: 14px !important;
  padding: 18px !important;
}

.shop-detail-avatar3d {
  position: relative !important;
  min-height: 390px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.13), transparent 44%),
    linear-gradient(180deg, rgba(26, 34, 42, .50), rgba(8, 11, 17, .94)) !important;
  border: 1px solid rgba(222, 198, 160, .12) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 18px 38px rgba(0,0,0,.28) !important;
}

.shop-detail-avatar3d::before {
  content: '';
  position: absolute;
  left: 17%;
  right: 17%;
  bottom: 42px;
  height: 52px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.48), rgba(0,0,0,0));
  filter: blur(7px);
  opacity: .78;
  pointer-events: none;
}

.shop-detail-avatar3d::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 44px;
  height: 42px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.10), transparent 54%),
    linear-gradient(180deg, rgba(231, 219, 195, .20), rgba(77, 61, 45, .28));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.20);
  pointer-events: none;
}

.shop-detail-avatar3d canvas {
  position: relative;
  z-index: 1;
  transform: translateY(8px);
}

.shop-detail-info {
  display: grid !important;
  grid-template-rows: auto auto 1fr auto;
  align-content: stretch;
  gap: 12px !important;
}

.shop-detail-rarity-card {
  position: relative;
  min-height: 116px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 13px;
  align-items: center;
  padding: 15px;
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(12, 16, 24, .34), rgba(12, 16, 24, .68)),
    var(--shop-tier-bg) !important;
  background-position: center !important;
  background-size: cover !important;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 30px rgba(0,0,0,.22);
}

.shop-detail-rarity-card > span {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(8, 11, 18, .48);
  border: 1px solid rgba(255,255,255,.10);
}

.shop-detail-rarity-card .shop-tier-glyph {
  width: 30px;
  height: 30px;
}

.shop-detail-rarity-card strong {
  display: block;
  color: var(--rq-warm-cream) !important;
  font-size: 1.08rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.shop-detail-rarity-card em {
  display: block;
  margin-top: 3px;
  color: rgba(243, 232, 213, .64);
  font-size: .72rem;
  font-style: normal;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.shop-detail-pill-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.shop-detail-pill {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border-radius: 17px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(222, 198, 160, .10);
}

.shop-detail-pill em {
  color: rgba(243, 232, 213, .56);
  font-size: .62rem;
  font-style: normal;
  font-weight: 1000;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.shop-detail-pill strong {
  color: var(--rq-warm-gold) !important;
  font-size: .92rem;
  line-height: 1.15;
}

.shop-detail-summary {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 86px;
  padding: 13px 14px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 0%, rgba(216, 176, 106, .08), transparent 36%),
    rgba(255,255,255,.04);
  border: 1px solid rgba(222, 198, 160, .09);
}

.shop-detail-summary strong {
  color: var(--rq-warm-cream) !important;
  font-size: .98rem;
}

.shop-detail-summary span {
  color: rgba(243, 232, 213, .68);
  font-size: .84rem;
  line-height: 1.45;
}

.shop-detail-info .shop-detail-actions {
  display: grid !important;
  gap: 8px;
}

.shop-detail-info .shop-detail-actions button {
  width: 100%;
  min-height: 44px !important;
  border-radius: 15px !important;
  font-size: .82rem !important;
  letter-spacing: .08em;
}

.shop-detail-info .shop-detail-actions .primary-btn {
  background: linear-gradient(135deg, rgba(140, 105, 64, .98), rgba(216, 176, 106, .98)) !important;
  color: #fff7ea !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.16);
}

.shop-detail-info .shop-detail-actions .secondary-btn {
  background: linear-gradient(180deg, rgba(45, 35, 27, .92), rgba(22, 17, 13, .98)) !important;
  color: rgba(243, 232, 213, .92) !important;
}

@media (max-width: 760px) {
  .shop-dialog-card .leaderboard-card-head {
    padding-right: 56px !important;
  }

  .shop-close-btn {
    right: 10px !important;
    top: 10px !important;
  }

  .shop-detail-card .leaderboard-card-head {
    min-height: 78px !important;
    padding: 15px 14px 12px !important;
  }

  .shop-detail-close-btn em {
    display: none;
  }

  .shop-detail-layout {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
  }

  .shop-detail-avatar3d {
    min-height: min(42dvh, 310px) !important;
  }

  .shop-detail-info {
    grid-template-rows: auto;
  }

  .shop-detail-pill-row {
    grid-template-columns: 1fr;
  }
}


/* v7.0.215 Collection Passport Nameplate Restore.
   Fixes the selected Collection passport so the name/status panel stays under the model,
   not floating over the character stage. Also removes the extra Shop header badge text. */

/* Shop header copy cleanup */
.shop-dialog-card .leaderboard-card-head h2::after {
  content: none !important;
  display: none !important;
}

/* Collection selected passport: strict two-zone layout */
.inventory-character-passport,
.inventory-selected-showcase.inventory-character-passport {
  position: relative !important;
  display: grid !important;
  grid-template-rows: auto minmax(270px, 1fr) auto !important;
  gap: 12px !important;
  align-items: stretch !important;
  overflow: hidden !important;
  padding: 14px !important;
  min-height: 470px !important;
}

/* Header stays on top only */
.inventory-character-passport .inventory-passport-header {
  position: relative !important;
  z-index: 5 !important;
  order: 0 !important;
}

/* 3D model stage is the only middle layer */
.inventory-character-passport .inventory-selected-avatar {
  position: relative !important;
  z-index: 1 !important;
  order: 1 !important;
  width: 100% !important;
  min-height: 270px !important;
  height: 100% !important;
  max-height: none !important;
  display: grid !important;
  place-items: end center !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  padding: 0 !important;
}

/* Keep the canvas behind the bottom nameplate */
.inventory-character-passport .inventory-selected-avatar canvas {
  position: relative !important;
  z-index: 1 !important;
  transform: translateY(12px) !important;
}

/* Bottom info/nameplate is always under the model, full width */
.inventory-character-passport .inventory-selected-info,
.inventory-character-passport .inventory-selected-nameplate {
  position: relative !important;
  z-index: 8 !important;
  order: 2 !important;
  align-self: end !important;
  width: 100% !important;
  margin: 0 !important;
  transform: none !important;
  inset: auto !important;
  bottom: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  display: grid !important;
  gap: 7px !important;
  padding: 13px 14px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(216, 176, 106, .14), transparent 42%),
    linear-gradient(180deg, rgba(29, 21, 16, .92), rgba(14, 11, 9, .96)) !important;
  border: 1px solid rgba(222, 198, 160, .16) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08) !important;
  text-align: center !important;
}

/* The selected companion name belongs in the nameplate, never over the face/model */
.inventory-character-passport .inventory-selected-info h3,
.inventory-character-passport .inventory-selected-nameplate h3 {
  margin: 0 !important;
  color: var(--rq-warm-cream, #f4ead8) !important;
  font-size: clamp(1.05rem, 1.6vw, 1.28rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -.01em !important;
}

/* Short status line under name */
.inventory-character-passport .inventory-selected-info p,
.inventory-character-passport .inventory-selected-info small,
.inventory-character-passport .inventory-selected-nameplate p,
.inventory-character-passport .inventory-selected-nameplate small {
  margin: 0 !important;
  color: rgba(243, 232, 213, .68) !important;
  font-size: .76rem !important;
  line-height: 1.35 !important;
}

/* Active / Ready status becomes a calm badge in the bottom panel */
.inventory-character-passport .inventory-selected-action,
.inventory-character-passport .inventory-selected-status,
.inventory-character-passport .inventory-selected-info button,
.inventory-character-passport .inventory-selected-nameplate button {
  position: relative !important;
  z-index: 9 !important;
  align-self: center !important;
  justify-self: center !important;
  margin: 4px auto 0 !important;
  min-height: 30px !important;
  min-width: 120px !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(222, 198, 160, .18) !important;
  background:
    linear-gradient(180deg, rgba(216, 176, 106, .18), rgba(91, 79, 63, .20)) !important;
  color: rgba(255, 246, 231, .92) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  font-size: .70rem !important;
  font-weight: 1000 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
}

/* Prevent older absolute overrides from putting text over the avatar */
.inventory-character-passport .inventory-selected-info *,
.inventory-character-passport .inventory-selected-nameplate * {
  position: relative;
  z-index: 10;
}

/* If old CSS created pseudo labels over the model, silence them here. */
.inventory-character-passport .inventory-selected-avatar::after,
.inventory-character-passport .inventory-selected-avatar::before {
  pointer-events: none !important;
}

@media (max-width: 760px) {
  .inventory-character-passport,
  .inventory-selected-showcase.inventory-character-passport {
    grid-template-rows: auto minmax(220px, 1fr) auto !important;
    min-height: 390px !important;
    padding: 11px !important;
    gap: 10px !important;
  }

  .inventory-character-passport .inventory-selected-avatar {
    min-height: 220px !important;
    border-radius: 18px !important;
  }

  .inventory-character-passport .inventory-selected-info,
  .inventory-character-passport .inventory-selected-nameplate {
    padding: 11px 12px !important;
    border-radius: 16px !important;
  }

  .inventory-character-passport .inventory-selected-info h3,
  .inventory-character-passport .inventory-selected-nameplate h3 {
    font-size: 1rem !important;
  }
}


/* v7.0.216 Shop Detail Clean Info.
   Removes technical table feel from the character preview, hides duplicate/awkward price-owned rows,
   and turns status/price into clean pills. */
.shop-detail-dialog::backdrop {
  background:
    radial-gradient(circle at 50% 8%, rgba(216, 176, 106, .13), transparent 34%),
    rgba(5, 7, 11, .78) !important;
  backdrop-filter: blur(16px) saturate(1.02) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.02) !important;
}

.shop-detail-dialog {
  width: min(980px, calc(100dvw - 28px)) !important;
}

.shop-detail-card {
  overflow: hidden !important;
  border-radius: 28px !important;
  border: 1px solid rgba(222, 198, 160, .14) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(216, 176, 106, .11), transparent 32%),
    linear-gradient(145deg, rgba(27, 20, 15, .98), rgba(10, 14, 22, .98)) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.shop-detail-card .leaderboard-card-head {
  min-height: 76px !important;
  padding: 18px 20px 15px !important;
  margin: -18px -18px 16px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(216, 176, 106, .16), transparent 34%),
    linear-gradient(180deg, rgba(36, 27, 20, .98), rgba(25, 19, 15, .92)) !important;
  border-bottom: 1px solid rgba(222, 198, 160, .12) !important;
}

.shop-detail-card .leaderboard-card-head h2 {
  margin: 0 0 4px !important;
  color: var(--rq-warm-cream, #f4ead8) !important;
  font-size: clamp(1.45rem, 2vw, 1.9rem) !important;
  letter-spacing: -.03em !important;
}

.shop-detail-card .leaderboard-card-head p {
  margin: 0 !important;
  color: rgba(243, 232, 213, .68) !important;
  font-size: .86rem !important;
}

#closeShopDetailBtn,
.shop-detail-close-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 38px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(222, 198, 160, .16) !important;
  background:
    linear-gradient(180deg, rgba(62, 45, 32, .88), rgba(32, 24, 18, .94)) !important;
  color: rgba(243, 232, 213, .92) !important;
  font-size: .76rem !important;
  font-weight: 1000 !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.shop-detail-layout {
  grid-template-columns: minmax(390px, 1.35fr) minmax(300px, .9fr) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

.shop-detail-avatar3d {
  min-height: 390px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(243, 232, 213, .12), transparent 42%),
    linear-gradient(180deg, rgba(18, 24, 31, .42), rgba(7, 10, 16, .84)) !important;
  border: 1px solid rgba(222, 198, 160, .10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -34px 70px rgba(0,0,0,.22) !important;
}

.shop-detail-avatar3d::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 54px;
  height: 48px;
  border-radius: 999px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(231, 219, 195, .18), rgba(77, 61, 45, .20));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 16px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
}

.shop-detail-avatar3d canvas {
  position: relative;
  z-index: 1;
  transform: translateY(8px);
}

.shop-detail-info {
  display: grid !important;
  grid-template-rows: auto auto 1fr;
  gap: 12px !important;
  align-content: start !important;
}

.shop-detail-rarity-card {
  min-height: 104px !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: center !important;
  gap: 13px !important;
  padding: 16px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.09), transparent 36%),
    linear-gradient(180deg, rgba(7, 11, 18, .34), rgba(7, 11, 18, .66)),
    var(--shop-tier-bg) !important;
  background-size: cover !important;
  background-position: center !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 28px rgba(0,0,0,.20) !important;
}

.shop-detail-rarity-icon {
  width: 54px !important;
  height: 54px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 18px !important;
  background: rgba(7, 11, 18, .48) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.shop-detail-rarity-icon .shop-tier-glyph {
  width: 30px !important;
  height: 30px !important;
}

.shop-detail-rarity-card strong {
  display: block !important;
  color: var(--rq-warm-cream, #f4ead8) !important;
  font-size: 1.08rem !important;
  line-height: 1.1 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

.shop-detail-rarity-card small {
  display: block !important;
  margin-top: 4px !important;
  color: rgba(243, 232, 213, .66) !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.shop-detail-clean-panel {
  display: grid !important;
  gap: 10px !important;
  padding: 15px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(216, 176, 106, .08), transparent 36%),
    rgba(255,255,255,.045) !important;
  border: 1px solid rgba(222, 198, 160, .10) !important;
}

.shop-detail-clean-panel > strong {
  color: var(--rq-warm-cream, #f4ead8) !important;
  font-size: .98rem !important;
  line-height: 1.15 !important;
}

.shop-detail-clean-panel p {
  margin: 0 !important;
  color: rgba(243, 232, 213, .68) !important;
  font-size: .82rem !important;
  line-height: 1.45 !important;
}

.shop-detail-pill-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.shop-detail-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(7, 11, 18, .52) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  color: rgba(243, 232, 213, .82) !important;
  font-size: .68rem !important;
  font-weight: 1000 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}

.shop-detail-pill.is-owned,
.shop-detail-pill.is-equipped {
  color: #f8e5bd !important;
  border-color: rgba(216, 176, 106, .22) !important;
  background: rgba(216, 176, 106, .12) !important;
}

.shop-detail-pill.can-buy {
  color: #fbbf24 !important;
  border-color: rgba(251, 191, 36, .22) !important;
  background: rgba(251, 191, 36, .10) !important;
}

.shop-detail-pill.need-coins {
  color: #fecaca !important;
  border-color: rgba(248, 113, 113, .22) !important;
  background: rgba(248, 113, 113, .09) !important;
}

/* Hide old technical detail blocks if older markup leaks through */
.shop-detail-meta,
.shop-detail-flavor,
.shop-detail-summary {
  border-radius: 16px !important;
}

.shop-detail-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 9px !important;
  align-self: end !important;
  margin-top: 0 !important;
}

.shop-detail-action-main,
.shop-detail-action-ghost {
  width: 100% !important;
  min-height: 42px !important;
  border-radius: 15px !important;
  font-size: .78rem !important;
  font-weight: 1000 !important;
  letter-spacing: .08em !important;
}

.shop-detail-action-main:disabled {
  opacity: .70 !important;
  cursor: default !important;
}

.shop-detail-action-ghost {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(222, 198, 160, .10) !important;
}

@media (max-width: 760px) {
  .shop-detail-dialog {
    width: calc(100dvw - 8px) !important;
  }

  .shop-detail-card {
    border-radius: 22px !important;
  }

  .shop-detail-card .leaderboard-card-head {
    min-height: 68px !important;
    padding: 13px 12px 12px !important;
  }

  .shop-detail-layout {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .shop-detail-avatar3d {
    min-height: min(48dvh, 300px) !important;
    border-radius: 20px !important;
  }

  .shop-detail-avatar3d::after {
    bottom: 42px;
    left: 20%;
    right: 20%;
    height: 36px;
  }

  .shop-detail-rarity-card {
    min-height: 84px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .shop-detail-rarity-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 15px !important;
  }

  .shop-detail-rarity-icon .shop-tier-glyph {
    width: 26px !important;
    height: 26px !important;
  }
}


/* v7.0.217 Shop Detail Action Fix + small preview polish. */
.shop-detail-layout {
  align-items: center !important;
}

.shop-detail-avatar3d {
  min-height: 370px !important;
}

.shop-detail-info {
  align-content: center !important;
  grid-template-rows: auto auto auto !important;
}

.shop-detail-clean-panel {
  min-height: 112px !important;
}

.shop-detail-actions {
  align-self: start !important;
  margin-top: 6px !important;
}

.shop-detail-action-main:not(:disabled) {
  cursor: pointer !important;
}

.shop-detail-action-main:not(:disabled):hover,
.shop-detail-action-ghost:hover {
  transform: translateY(-1px);
}

.shop-detail-action-main[disabled] {
  filter: saturate(.88);
}

.shop-detail-action-ghost {
  cursor: pointer !important;
}

/* Make the mushroom/cat stage feel less oversized in the detail modal. */
.shop-detail-avatar3d canvas {
  transform: translateY(4px) scale(.96) !important;
}

@media (max-width: 760px) {
  .shop-detail-avatar3d {
    min-height: min(45dvh, 285px) !important;
  }
}


/* v7.0.218 Missions Compact Board.
   Compact mission modal: smaller hero, no heavy internal page feel, daily cards tightened,
   and weekly chest as a footer-style board row. */
.missions-dialog {
  width: min(1060px, calc(100dvw - 34px)) !important;
  max-height: calc(100dvh - 34px) !important;
  overflow: visible !important;
}

.missions-dialog-card {
  max-height: calc(100dvh - 38px) !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 28px !important;
  border: 1px solid rgba(222, 198, 160, .14) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(216, 176, 106, .10), transparent 36%),
    linear-gradient(145deg, rgba(27, 20, 15, .98), rgba(10, 14, 22, .98)) !important;
  box-shadow: 0 30px 100px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.missions-header {
  min-height: 176px !important;
  padding: 28px 34px 24px !important;
  border-radius: 0 !important;
  background:
    linear-gradient(90deg, rgba(21, 15, 10, .92), rgba(21, 15, 10, .64)),
    radial-gradient(circle at 88% 22%, rgba(216, 176, 106, .14), transparent 30%),
    var(--missions-hero-bg, transparent) !important;
  background-size: cover !important;
  background-position: center !important;
  border-bottom: 1px solid rgba(222, 198, 160, .12) !important;
}

.missions-header span {
  display: inline-flex !important;
  margin-bottom: 9px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  color: rgba(216, 176, 106, .92) !important;
  background: rgba(216, 176, 106, .10) !important;
  border: 1px solid rgba(222, 198, 160, .16) !important;
  font-size: .62rem !important;
  font-weight: 1000 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

.missions-header h2 {
  margin: 0 !important;
  color: var(--rq-warm-cream, #f4ead8) !important;
  font-size: clamp(2.35rem, 4.6vw, 4.35rem) !important;
  line-height: .92 !important;
  letter-spacing: -.055em !important;
}

.missions-header p {
  max-width: 56ch !important;
  margin: 12px 0 0 !important;
  color: rgba(243, 232, 213, .76) !important;
  font-size: .92rem !important;
  line-height: 1.35 !important;
}

.missions-close-btn {
  top: 26px !important;
  right: 26px !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  background: rgba(15, 10, 7, .48) !important;
  border: 1px solid rgba(222, 198, 160, .16) !important;
  color: rgba(243, 232, 213, .92) !important;
}

.missions-status {
  margin: 14px 24px 0 !important;
  min-height: 38px !important;
  padding: 9px 14px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025)) !important;
  border: 1px solid rgba(222, 198, 160, .10) !important;
  color: rgba(243, 232, 213, .82) !important;
  font-size: .82rem !important;
}

.missions-body {
  display: grid !important;
  gap: 12px !important;
  padding: 14px 24px 18px !important;
  overflow: visible !important;
  max-height: none !important;
}

.missions-summary,
.missions-board-summary,
.missions-progress-card,
.daily-missions-summary {
  min-height: 74px !important;
  padding: 14px 18px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(216, 176, 106, .10), transparent 36%),
    rgba(255,255,255,.045) !important;
  border: 1px solid rgba(222, 198, 160, .12) !important;
}

.missions-summary h3,
.missions-board-summary h3,
.missions-progress-card h3,
.daily-missions-summary h3 {
  margin: 0 !important;
  font-size: 1.05rem !important;
  line-height: 1.15 !important;
}

.missions-summary p,
.missions-board-summary p,
.missions-progress-card p,
.daily-missions-summary p {
  margin: 4px 0 0 !important;
  font-size: .78rem !important;
  line-height: 1.35 !important;
}

/* Daily mission cards: lower profile, still premium */
.missions-list,
.daily-missions-list,
.mission-cards,
.missions-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.mission-card,
.daily-mission-card,
.missions-contract-card,
.mission-contract-card {
  min-height: 206px !important;
  padding: 14px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(216, 176, 106, .10), transparent 36%),
    linear-gradient(145deg, rgba(43, 32, 22, .72), rgba(14, 16, 20, .88)) !important;
  border: 1px solid rgba(222, 198, 160, .12) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.mission-card header,
.daily-mission-card header,
.missions-contract-card header,
.mission-contract-card header {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 10px !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}

.mission-card img,
.daily-mission-card img,
.missions-contract-card img,
.mission-contract-card img,
.mission-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  object-fit: contain !important;
}

.mission-card h3,
.daily-mission-card h3,
.missions-contract-card h3,
.mission-contract-card h3 {
  margin: 0 !important;
  font-size: 1.05rem !important;
  line-height: 1.08 !important;
  letter-spacing: -.015em !important;
}

.mission-card p,
.daily-mission-card p,
.missions-contract-card p,
.mission-contract-card p {
  margin: 5px 0 0 !important;
  font-size: .79rem !important;
  line-height: 1.35 !important;
  color: rgba(243, 232, 213, .70) !important;
}

.mission-card .mission-type,
.daily-mission-card .mission-type,
.missions-contract-card .mission-type,
.mission-contract-card .mission-type,
.mission-label {
  font-size: .62rem !important;
  letter-spacing: .15em !important;
  color: rgba(216, 176, 106, .88) !important;
}

.mission-progress,
.daily-mission-progress,
.missions-progress {
  margin-top: 10px !important;
}

.mission-progress-bar,
.daily-mission-progress-bar,
.missions-progress-bar {
  height: 7px !important;
  border-radius: 999px !important;
  background: rgba(7, 11, 18, .56) !important;
  overflow: hidden !important;
}

.mission-card button,
.daily-mission-card button,
.missions-contract-card button,
.mission-contract-card button {
  min-height: 34px !important;
  padding: 7px 11px !important;
  border-radius: 13px !important;
  font-size: .72rem !important;
}

/* Weekly chest becomes a compact footer bar */
.weekly-chest,
.missions-weekly-chest,
.weekly-chest-card,
.missions-weekly-card {
  min-height: 96px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) minmax(260px, .72fr) !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 14px 18px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 0% 50%, rgba(216, 176, 106, .16), transparent 34%),
    linear-gradient(135deg, rgba(54, 40, 27, .82), rgba(17, 18, 22, .82)) !important;
  border: 1px solid rgba(222, 198, 160, .14) !important;
}

.weekly-chest img,
.missions-weekly-chest img,
.weekly-chest-card img,
.missions-weekly-card img,
.weekly-chest-icon {
  width: 82px !important;
  height: 82px !important;
  object-fit: contain !important;
}

.weekly-chest h3,
.missions-weekly-chest h3,
.weekly-chest-card h3,
.missions-weekly-card h3 {
  margin: 0 0 5px !important;
  font-size: 1.14rem !important;
}

.weekly-chest p,
.missions-weekly-chest p,
.weekly-chest-card p,
.missions-weekly-card p {
  margin: 0 !important;
  font-size: .82rem !important;
  line-height: 1.35 !important;
  color: rgba(243, 232, 213, .72) !important;
}

.weekly-chest button,
.missions-weekly-chest button,
.weekly-chest-card button,
.missions-weekly-card button {
  min-height: 36px !important;
  border-radius: 14px !important;
  font-size: .76rem !important;
}

/* Force mission modal content not to feel like a long scroll page on common desktop sizes. */
@media (min-width: 900px) and (min-height: 720px) {
  .missions-dialog-card {
    max-height: min(760px, calc(100dvh - 42px)) !important;
  }
}

@media (max-width: 920px) and (orientation: landscape) {
  .missions-dialog {
    width: min(980px, calc(100dvw - 14px)) !important;
    max-height: calc(100dvh - 12px) !important;
  }

  .missions-dialog-card {
    max-height: calc(100dvh - 12px) !important;
  }

  .missions-header {
    min-height: 112px !important;
    padding: 18px 22px 16px !important;
  }

  .missions-header h2 {
    font-size: clamp(2rem, 5vw, 3.2rem) !important;
  }

  .missions-status {
    margin: 10px 16px 0 !important;
  }

  .missions-body {
    padding: 10px 16px 14px !important;
    gap: 9px !important;
  }

  .mission-card,
  .daily-mission-card,
  .missions-contract-card,
  .mission-contract-card {
    min-height: 168px !important;
    padding: 11px !important;
  }

  .weekly-chest,
  .missions-weekly-chest,
  .weekly-chest-card,
  .missions-weekly-card {
    min-height: 78px !important;
    padding: 10px 13px !important;
  }

  .weekly-chest img,
  .missions-weekly-chest img,
  .weekly-chest-card img,
  .missions-weekly-card img,
  .weekly-chest-icon {
    width: 62px !important;
    height: 62px !important;
  }
}

@media (max-width: 760px) {
  .missions-dialog {
    width: calc(100dvw - 8px) !important;
    max-height: calc(100dvh - 8px) !important;
  }

  .missions-dialog-card {
    max-height: calc(100dvh - 8px) !important;
    overflow-y: auto !important;
    border-radius: 22px !important;
  }

  .missions-header {
    min-height: 138px !important;
    padding: 18px 16px 16px !important;
  }

  .missions-header h2 {
    font-size: 2.45rem !important;
  }

  .missions-header p {
    font-size: .80rem !important;
  }

  .missions-status {
    margin: 10px 12px 0 !important;
  }

  .missions-body {
    padding: 10px 12px 14px !important;
  }

  .missions-list,
  .daily-missions-list,
  .mission-cards,
  .missions-grid {
    grid-template-columns: 1fr !important;
  }

  .mission-card,
  .daily-mission-card,
  .missions-contract-card,
  .mission-contract-card {
    min-height: 150px !important;
  }

  .weekly-chest,
  .missions-weekly-chest,
  .weekly-chest-card,
  .missions-weekly-card {
    grid-template-columns: auto 1fr !important;
    min-height: 92px !important;
  }

  .weekly-chest button,
  .missions-weekly-chest button,
  .weekly-chest-card button,
  .missions-weekly-card button {
    grid-column: 1 / -1;
  }
}


/* v7.0.219 Missions No-Scroll Dashboard.
   Changes Missions from a tall card page into a compact dashboard:
   small header, no visible ready-status strip, compact contract rows,
   and weekly chest as a bottom footer bar. */
.missions-dialog {
  width: min(1120px, calc(100dvw - 34px)) !important;
  max-height: calc(100dvh - 28px) !important;
}

.missions-dialog-card {
  max-height: calc(100dvh - 32px) !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto 0 auto !important;
}

/* Smaller, cleaner top header */
.missions-header {
  min-height: 128px !important;
  padding: 22px 32px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  background:
    linear-gradient(90deg, rgba(20, 14, 9, .96), rgba(20, 14, 9, .74)),
    radial-gradient(circle at 88% 26%, rgba(216, 176, 106, .12), transparent 30%),
    var(--missions-hero-bg, transparent) !important;
  border-bottom: 1px solid rgba(222, 198, 160, .12) !important;
}

.missions-header > div {
  display: grid !important;
  gap: 5px !important;
}

.missions-header span {
  width: max-content !important;
  margin: 0 !important;
  padding: 4px 10px !important;
  font-size: .58rem !important;
  letter-spacing: .18em !important;
}

.missions-header h2 {
  margin: 0 !important;
  font-size: clamp(2.25rem, 4vw, 3.55rem) !important;
  line-height: .94 !important;
  letter-spacing: -.052em !important;
}

.missions-header p {
  margin: 4px 0 0 !important;
  max-width: 50ch !important;
  font-size: .86rem !important;
  line-height: 1.28 !important;
  color: rgba(243, 232, 213, .70) !important;
}

.missions-close-btn {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
}

/* Keep status node for JS, but remove the visual row. */
.missions-status {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* Body becomes a no-scroll dashboard */
.missions-body {
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  gap: 10px !important;
  padding: 14px 22px 16px !important;
  overflow: hidden !important;
  max-height: none !important;
}

/* Today's board summary as a compact strip */
.missions-summary,
.missions-board-summary,
.missions-progress-card,
.daily-missions-summary {
  min-height: 58px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 11px 15px !important;
  border-radius: 18px !important;
}

.missions-summary h3,
.missions-board-summary h3,
.missions-progress-card h3,
.daily-missions-summary h3 {
  font-size: .82rem !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: rgba(216, 176, 106, .92) !important;
}

.missions-summary strong,
.missions-board-summary strong,
.missions-progress-card strong,
.daily-missions-summary strong {
  font-size: 1.02rem !important;
  line-height: 1.12 !important;
}

.missions-summary p,
.missions-board-summary p,
.missions-progress-card p,
.daily-missions-summary p,
.missions-summary small,
.missions-board-summary small,
.missions-progress-card small,
.daily-missions-summary small {
  margin: 2px 0 0 !important;
  font-size: .72rem !important;
  line-height: 1.25 !important;
  color: rgba(243, 232, 213, .60) !important;
}

/* Contract cards are compact horizontal dashboard rows */
.missions-list,
.daily-missions-list,
.mission-cards,
.missions-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

.mission-card,
.daily-mission-card,
.missions-contract-card,
.mission-contract-card {
  min-height: 156px !important;
  padding: 12px !important;
  border-radius: 18px !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto auto !important;
  gap: 7px !important;
}

.mission-card header,
.daily-mission-card header,
.missions-contract-card header,
.mission-contract-card header {
  grid-template-columns: 40px 1fr !important;
  gap: 9px !important;
  margin-bottom: 0 !important;
  align-items: start !important;
}

.mission-card img,
.daily-mission-card img,
.missions-contract-card img,
.mission-contract-card img,
.mission-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 13px !important;
}

.mission-card h3,
.daily-mission-card h3,
.missions-contract-card h3,
.mission-contract-card h3 {
  font-size: .96rem !important;
  line-height: 1.08 !important;
}

.mission-card p,
.daily-mission-card p,
.missions-contract-card p,
.mission-contract-card p {
  margin: 3px 0 0 !important;
  font-size: .72rem !important;
  line-height: 1.28 !important;
  max-height: 2.6em !important;
  overflow: hidden !important;
}

.mission-card .mission-type,
.daily-mission-card .mission-type,
.missions-contract-card .mission-type,
.mission-contract-card .mission-type,
.mission-label {
  font-size: .56rem !important;
  letter-spacing: .14em !important;
}

.mission-progress,
.daily-mission-progress,
.missions-progress {
  margin-top: 2px !important;
}

.mission-progress-row,
.daily-mission-progress-row,
.missions-progress-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  font-size: .68rem !important;
}

.mission-progress-bar,
.daily-mission-progress-bar,
.missions-progress-bar {
  height: 6px !important;
}

.mission-card button,
.daily-mission-card button,
.missions-contract-card button,
.mission-contract-card button {
  min-height: 30px !important;
  padding: 6px 10px !important;
  border-radius: 12px !important;
  font-size: .68rem !important;
}

/* Reward pill in each card should not be huge */
.mission-reward,
.daily-mission-reward,
.missions-reward {
  min-height: 32px !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  font-size: .72rem !important;
}

/* Weekly chest footer: always visible and short */
.weekly-chest,
.missions-weekly-chest,
.weekly-chest-card,
.missions-weekly-card {
  min-height: 78px !important;
  display: grid !important;
  grid-template-columns: 68px minmax(0, 1fr) minmax(260px, .72fr) !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 10px 14px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

.weekly-chest img,
.missions-weekly-chest img,
.weekly-chest-card img,
.missions-weekly-card img,
.weekly-chest-icon {
  width: 62px !important;
  height: 62px !important;
}

.weekly-chest h3,
.missions-weekly-chest h3,
.weekly-chest-card h3,
.missions-weekly-card h3 {
  margin: 0 0 3px !important;
  font-size: 1rem !important;
  line-height: 1.12 !important;
}

.weekly-chest p,
.missions-weekly-chest p,
.weekly-chest-card p,
.missions-weekly-card p {
  font-size: .74rem !important;
  line-height: 1.28 !important;
  max-height: 2.5em !important;
  overflow: hidden !important;
}

.weekly-chest button,
.missions-weekly-chest button,
.weekly-chest-card button,
.missions-weekly-card button {
  min-height: 32px !important;
  padding: 6px 10px !important;
  border-radius: 13px !important;
  font-size: .70rem !important;
}

.weekly-chest .mission-progress-bar,
.missions-weekly-chest .mission-progress-bar,
.weekly-chest-card .mission-progress-bar,
.missions-weekly-card .mission-progress-bar,
.weekly-chest .daily-mission-progress-bar,
.missions-weekly-chest .daily-mission-progress-bar,
.weekly-chest-card .daily-mission-progress-bar,
.missions-weekly-card .daily-mission-progress-bar {
  height: 6px !important;
}

/* Desktop exact-fit tuning */
@media (min-width: 900px) and (max-height: 780px) {
  .missions-dialog {
    max-height: calc(100dvh - 18px) !important;
  }

  .missions-dialog-card {
    max-height: calc(100dvh - 20px) !important;
  }

  .missions-header {
    min-height: 112px !important;
    padding: 18px 28px 16px !important;
  }

  .missions-header h2 {
    font-size: clamp(2rem, 3.6vw, 3.15rem) !important;
  }

  .missions-body {
    padding: 12px 20px 14px !important;
    gap: 9px !important;
  }

  .mission-card,
  .daily-mission-card,
  .missions-contract-card,
  .mission-contract-card {
    min-height: 142px !important;
    padding: 10px !important;
  }

  .weekly-chest,
  .missions-weekly-chest,
  .weekly-chest-card,
  .missions-weekly-card {
    min-height: 72px !important;
    padding: 9px 13px !important;
  }

  .weekly-chest img,
  .missions-weekly-chest img,
  .weekly-chest-card img,
  .missions-weekly-card img,
  .weekly-chest-icon {
    width: 56px !important;
    height: 56px !important;
  }
}

@media (max-width: 920px) and (orientation: landscape) {
  .missions-dialog {
    width: min(1060px, calc(100dvw - 10px)) !important;
    max-height: calc(100dvh - 8px) !important;
  }

  .missions-dialog-card {
    max-height: calc(100dvh - 8px) !important;
  }

  .missions-header {
    min-height: 86px !important;
    padding: 12px 20px 11px !important;
  }

  .missions-header h2 {
    font-size: clamp(1.75rem, 4vw, 2.55rem) !important;
  }

  .missions-header p {
    display: none !important;
  }

  .missions-body {
    padding: 8px 14px 10px !important;
    gap: 7px !important;
  }

  .missions-summary,
  .missions-board-summary,
  .missions-progress-card,
  .daily-missions-summary {
    min-height: 44px !important;
    padding: 8px 11px !important;
  }

  .mission-card,
  .daily-mission-card,
  .missions-contract-card,
  .mission-contract-card {
    min-height: 112px !important;
    padding: 8px !important;
    gap: 5px !important;
  }

  .mission-card img,
  .daily-mission-card img,
  .missions-contract-card img,
  .mission-contract-card img,
  .mission-icon {
    width: 32px !important;
    height: 32px !important;
  }

  .mission-card p,
  .daily-mission-card p,
  .missions-contract-card p,
  .mission-contract-card p {
    display: none !important;
  }

  .weekly-chest,
  .missions-weekly-chest,
  .weekly-chest-card,
  .missions-weekly-card {
    min-height: 58px !important;
    grid-template-columns: 48px minmax(0, 1fr) minmax(220px, .72fr) !important;
    padding: 7px 10px !important;
  }

  .weekly-chest img,
  .missions-weekly-chest img,
  .weekly-chest-card img,
  .missions-weekly-card img,
  .weekly-chest-icon {
    width: 46px !important;
    height: 46px !important;
  }
}

@media (max-width: 760px) {
  .missions-dialog-card {
    overflow-y: auto !important;
    grid-template-rows: auto auto auto !important;
  }

  .missions-header {
    min-height: 118px !important;
    padding: 16px 15px 14px !important;
  }

  .missions-header h2 {
    font-size: 2.25rem !important;
  }

  .missions-body {
    padding: 10px 12px 14px !important;
    gap: 9px !important;
  }

  .missions-list,
  .daily-missions-list,
  .mission-cards,
  .missions-grid {
    grid-template-columns: 1fr !important;
  }

  .mission-card,
  .daily-mission-card,
  .missions-contract-card,
  .mission-contract-card {
    min-height: 132px !important;
  }

  .weekly-chest,
  .missions-weekly-chest,
  .weekly-chest-card,
  .missions-weekly-card {
    grid-template-columns: 54px 1fr !important;
    min-height: 82px !important;
  }
}


/* v7.0.220 Missions Visibility Fix.
   The previous compact dashboard used a hard grid row setup that could collapse/hide
   the mission body after the header. This restores a normal visible flow while keeping
   the compact visual tuning. */
.missions-dialog-card {
  display: flex !important;
  flex-direction: column !important;
  max-height: calc(100dvh - 32px) !important;
  overflow: hidden !important;
}

/* Header stays compact but must not consume the whole dialog. */
.missions-header {
  flex: 0 0 auto !important;
  min-height: 118px !important;
  padding: 20px 30px 17px !important;
}

/* Keep the status node hidden without taking layout space. */
.missions-status {
  flex: 0 0 0 !important;
  display: none !important;
}

/* Body must always be visible. Use a contained grid, not a collapsed row. */
.missions-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 10px !important;
  padding: 12px 22px 16px !important;
  overflow: visible !important;
  max-height: none !important;
}

/* The daily cards row gets the flexible middle slot. */
.missions-list,
.daily-missions-list,
.mission-cards,
.missions-grid {
  min-height: 0 !important;
  align-self: stretch !important;
}

/* Slightly safer card sizing so 3 missions + weekly footer fit on common desktop heights. */
.mission-card,
.daily-mission-card,
.missions-contract-card,
.mission-contract-card {
  min-height: 132px !important;
  padding: 10px !important;
  gap: 5px !important;
}

.mission-card header,
.daily-mission-card header,
.missions-contract-card header,
.mission-contract-card header {
  grid-template-columns: 36px 1fr !important;
  gap: 8px !important;
}

.mission-card img,
.daily-mission-card img,
.missions-contract-card img,
.mission-contract-card img,
.mission-icon {
  width: 36px !important;
  height: 36px !important;
}

.mission-card h3,
.daily-mission-card h3,
.missions-contract-card h3,
.mission-contract-card h3 {
  font-size: .9rem !important;
}

.mission-card p,
.daily-mission-card p,
.missions-contract-card p,
.mission-contract-card p {
  font-size: .69rem !important;
  max-height: 2.45em !important;
}

/* Weekly footer remains visible at the bottom. */
.weekly-chest,
.missions-weekly-chest,
.weekly-chest-card,
.missions-weekly-card {
  flex: 0 0 auto !important;
  min-height: 68px !important;
  padding: 8px 12px !important;
  grid-template-columns: 54px minmax(0, 1fr) minmax(240px, .72fr) !important;
}

.weekly-chest img,
.missions-weekly-chest img,
.weekly-chest-card img,
.missions-weekly-card img,
.weekly-chest-icon {
  width: 50px !important;
  height: 50px !important;
}

.weekly-chest h3,
.missions-weekly-chest h3,
.weekly-chest-card h3,
.missions-weekly-card h3 {
  font-size: .92rem !important;
}

.weekly-chest p,
.missions-weekly-chest p,
.weekly-chest-card p,
.missions-weekly-card p {
  font-size: .69rem !important;
}

/* On shorter desktop screens, allow a tiny internal scroll instead of hiding content. */
@media (min-width: 761px) and (max-height: 700px) {
  .missions-dialog-card {
    overflow-y: auto !important;
  }

  .missions-body {
    overflow: visible !important;
  }

  .mission-card,
  .daily-mission-card,
  .missions-contract-card,
  .mission-contract-card {
    min-height: 122px !important;
  }
}

@media (max-width: 920px) and (orientation: landscape) {
  .missions-dialog-card {
    overflow-y: auto !important;
  }

  .missions-header {
    min-height: 82px !important;
    padding: 12px 18px 10px !important;
  }

  .missions-body {
    grid-template-rows: auto auto auto !important;
    padding: 8px 12px 10px !important;
    gap: 7px !important;
  }

  .mission-card,
  .daily-mission-card,
  .missions-contract-card,
  .mission-contract-card {
    min-height: 104px !important;
  }

  .weekly-chest,
  .missions-weekly-chest,
  .weekly-chest-card,
  .missions-weekly-card {
    min-height: 56px !important;
  }
}

@media (max-width: 760px) {
  .missions-dialog-card {
    overflow-y: auto !important;
  }

  .missions-header {
    min-height: 112px !important;
  }

  .missions-body {
    grid-template-rows: auto auto auto !important;
    padding: 10px 12px 14px !important;
  }
}


/* v7.0.221 Missions Header Center Polish.
   Centers the Daily Contracts header, removes the local-time wording visually if any old text leaks,
   and cleans the Weekly Chest footer text spacing. */

/* Center the whole top identity block */
.missions-header {
  justify-content: center !important;
  text-align: center !important;
  min-height: 124px !important;
  padding: 22px 66px 18px !important;
}

.missions-header > div {
  justify-items: center !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
}

.missions-header span {
  justify-self: center !important;
}

.missions-header h2 {
  text-align: center !important;
}

.missions-header p {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Keep close button independent from centered header. */
.missions-close-btn {
  position: absolute !important;
  top: 22px !important;
  right: 22px !important;
}

/* Summary strip: remove the "Prague time" feeling with cleaner alignment and calmer small text. */
.missions-summary,
.missions-board-summary,
.missions-progress-card,
.daily-missions-summary {
  grid-template-columns: minmax(0, 1fr) auto !important;
  padding: 11px 16px !important;
}

.missions-summary small,
.missions-board-summary small,
.missions-progress-card small,
.daily-missions-summary small,
.missions-summary p,
.missions-board-summary p,
.missions-progress-card p,
.daily-missions-summary p {
  color: rgba(243, 232, 213, .58) !important;
}

/* Weekly chest: pull text away from the image/art so it reads cleanly. */
.weekly-chest,
.missions-weekly-chest,
.weekly-chest-card,
.missions-weekly-card {
  grid-template-columns: 64px minmax(0, 1fr) minmax(260px, .76fr) !important;
  gap: 18px !important;
  padding: 10px 16px !important;
}

.weekly-chest h3,
.missions-weekly-chest h3,
.weekly-chest-card h3,
.missions-weekly-card h3 {
  padding-left: 2px !important;
}

.weekly-chest p,
.missions-weekly-chest p,
.weekly-chest-card p,
.missions-weekly-card p {
  padding-left: 2px !important;
  color: rgba(243, 232, 213, .68) !important;
}

/* If old "Prague time" is still in the DOM as a trailing text node inside small text, make the row less dominant. */
.daily-missions-summary small,
.missions-board-summary small {
  white-space: nowrap !important;
}

/* Slightly tighten the top so the board still fits after centering. */
@media (min-width: 900px) and (max-height: 780px) {
  .missions-header {
    min-height: 108px !important;
    padding: 18px 62px 15px !important;
  }

  .missions-header h2 {
    font-size: clamp(2rem, 3.55vw, 3.05rem) !important;
  }

  .missions-header p {
    font-size: .80rem !important;
  }
}

@media (max-width: 920px) and (orientation: landscape) {
  .missions-header {
    min-height: 82px !important;
    padding: 12px 58px 10px !important;
  }

  .missions-header h2 {
    font-size: clamp(1.7rem, 3.8vw, 2.35rem) !important;
  }

  .missions-close-btn {
    top: 14px !important;
    right: 14px !important;
  }
}

@media (max-width: 760px) {
  .missions-header {
    padding: 16px 54px 14px !important;
    min-height: 110px !important;
  }

  .missions-header h2 {
    font-size: 2.15rem !important;
  }

  .missions-header p {
    font-size: .76rem !important;
  }

  .weekly-chest,
  .missions-weekly-chest,
  .weekly-chest-card,
  .missions-weekly-card {
    gap: 12px !important;
  }
}


/* v7.0.222 Missions Weekly Chest Polish.
   Push weekly chest copy away from the left art / border and keep the footer cleaner.
   Also supports the upgraded 500 RC weekly chest reward. */
.weekly-chest,
.missions-weekly-chest,
.weekly-chest-card,
.missions-weekly-card {
  grid-template-columns: 70px minmax(0, 1fr) minmax(260px, .76fr) !important;
  gap: 20px !important;
  padding: 10px 18px !important;
}

.weekly-chest-art,
.missions-weekly-chest .weekly-chest-art,
.weekly-chest-card .weekly-chest-art,
.missions-weekly-card .weekly-chest-art {
  display: grid !important;
  place-items: center !important;
  width: 70px !important;
  min-width: 70px !important;
}

.weekly-chest-copy,
.missions-weekly-chest .weekly-chest-copy,
.weekly-chest-card .weekly-chest-copy,
.missions-weekly-card .weekly-chest-copy {
  padding-left: 10px !important;
  margin-left: 4px !important;
}

.weekly-chest-copy span,
.weekly-chest-copy strong,
.weekly-chest-copy p {
  display: block !important;
}

.weekly-chest-copy span {
  margin-bottom: 2px !important;
}

.weekly-chest-copy strong {
  margin-bottom: 4px !important;
}

.weekly-chest-copy p {
  max-width: 50ch !important;
  line-height: 1.32 !important;
}

.weekly-chest-progress,
.missions-weekly-chest .weekly-chest-progress,
.weekly-chest-card .weekly-chest-progress,
.missions-weekly-card .weekly-chest-progress {
  padding-left: 4px !important;
}

@media (max-width: 920px) and (orientation: landscape) {
  .weekly-chest,
  .missions-weekly-chest,
  .weekly-chest-card,
  .missions-weekly-card {
    grid-template-columns: 56px minmax(0, 1fr) minmax(220px, .76fr) !important;
    gap: 14px !important;
    padding: 8px 12px !important;
  }

  .weekly-chest-art,
  .missions-weekly-chest .weekly-chest-art,
  .weekly-chest-card .weekly-chest-art,
  .missions-weekly-card .weekly-chest-art {
    width: 56px !important;
    min-width: 56px !important;
  }

  .weekly-chest-copy,
  .missions-weekly-chest .weekly-chest-copy,
  .weekly-chest-card .weekly-chest-copy,
  .missions-weekly-card .weekly-chest-copy {
    padding-left: 6px !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 760px) {
  .weekly-chest-copy,
  .missions-weekly-chest .weekly-chest-copy,
  .weekly-chest-card .weekly-chest-copy,
  .missions-weekly-card .weekly-chest-copy {
    padding-left: 4px !important;
  }
}


/* v7.0.223 Hall of Fame Prestige UI.
   Trophy-room polish only: header, tabs, champion spotlight, podium, rows and overview.
   Leaderboard data/score logic is unchanged. */
.hall-dialog.leaderboard-dialog {
  width: min(1120px, calc(100dvw - 26px)) !important;
  max-width: min(1120px, calc(100dvw - 26px)) !important;
}

.hall-of-fame-card {
  padding: 0 22px 20px !important;
  border-radius: 30px !important;
  border-color: rgba(222, 198, 160, .16) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(216, 176, 106, .11), transparent 38%),
    linear-gradient(145deg, rgba(29, 22, 16, .98), rgba(9, 11, 16, .98)) !important;
  box-shadow: 0 30px 100px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.045) !important;
}

.hall-of-fame-card::before {
  background:
    radial-gradient(circle at 14% 0%, rgba(216, 176, 106, .16), transparent 32%),
    radial-gradient(circle at 90% 8%, rgba(198, 161, 103, .10), transparent 30%),
    linear-gradient(115deg, transparent 0 40%, rgba(255,255,255,.035) 48%, transparent 56% 100%) !important;
}

.hall-header {
  min-height: 142px !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  margin: 0 -22px 12px !important;
  padding: 24px 72px 22px !important;
  background:
    linear-gradient(180deg, rgba(21, 15, 10, .62), rgba(21, 15, 10, .90)),
    radial-gradient(circle at 50% 0%, rgba(216, 176, 106, .20), transparent 38%),
    url('/assets/ui/leaderboards/hall-of-fame-header-bg.png') center/cover no-repeat !important;
}

.hall-header > div {
  display: grid !important;
  justify-items: center !important;
  gap: 6px !important;
}

.hall-kicker {
  display: inline-flex !important;
  width: max-content !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(222, 198, 160, .18) !important;
  background: rgba(216, 176, 106, .10) !important;
  color: rgba(243, 232, 213, .78) !important;
  font-size: .60rem !important;
}

.hall-header h2 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 0 !important;
  text-align: center !important;
  color: var(--rq-warm-cream, #f4ead8) !important;
  font-size: clamp(2.25rem, 4.2vw, 4rem) !important;
  letter-spacing: -.055em !important;
}

.hall-title-medal {
  width: 44px !important;
  height: 44px !important;
  display: inline-grid !important;
  place-items: center !important;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.34));
}

.hall-title-medal img {
  width: 100% !important;
  height: 100% !important;
}

.hall-header p {
  max-width: 620px !important;
  margin: 0 auto !important;
  text-align: center !important;
  color: rgba(243, 232, 213, .72) !important;
  font-size: .88rem !important;
  line-height: 1.35 !important;
}

.hall-close-btn {
  position: absolute !important;
  top: 22px !important;
  right: 22px !important;
  min-height: 38px !important;
  border-radius: 999px !important;
}

.hall-view-tabs {
  width: max-content !important;
  margin: 0 auto 10px !important;
  padding: 5px !important;
  border-radius: 999px !important;
  background: rgba(7, 11, 18, .42) !important;
  border: 1px solid rgba(222, 198, 160, .12) !important;
}

.hall-view-tab {
  min-height: 34px !important;
  padding: 7px 16px !important;
  border-radius: 999px !important;
  font-size: .68rem !important;
}

.leaderboard-tabs,
.leaderboard-period-tabs {
  justify-content: center !important;
  margin: 8px auto 10px !important;
  padding: 6px !important;
  border-radius: 20px !important;
  background: rgba(7, 11, 18, .38) !important;
  border-color: rgba(222, 198, 160, .11) !important;
}

.leaderboard-tab,
.leaderboard-period-tab {
  min-height: 34px !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  font-size: .68rem !important;
  letter-spacing: .08em !important;
}

.hall-leaderboard-list {
  gap: 10px !important;
  max-height: min(66vh, 690px) !important;
  padding-right: 4px !important;
}

/* Overview trophy room */
.hall-overview-prestige {
  gap: 10px !important;
}

.hall-overview-hero {
  min-height: 132px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 20px 22px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(216, 176, 106, .16), transparent 34%),
    linear-gradient(135deg, rgba(45, 34, 24, .86), rgba(11, 16, 25, .86)),
    url('/assets/ui/leaderboards/hall-of-fame-header-bg.png') center/cover no-repeat !important;
}

.hall-overview-hero strong {
  max-width: 720px !important;
  font-size: clamp(1.35rem, 2.4vw, 2rem) !important;
}

.hall-overview-hero p {
  max-width: 720px !important;
  font-size: .86rem !important;
}

.hall-prestige-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.hall-prestige-grid article,
.hall-prestige-rewards > div,
.hall-prestige-note {
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(216,176,106,.08), transparent 34%),
    rgba(255,255,255,.045) !important;
  border-color: rgba(222, 198, 160, .11) !important;
}

.hall-prestige-grid article {
  padding: 14px !important;
}

.hall-prestige-rewards {
  gap: 10px !important;
}

.hall-prestige-rewards > div,
.hall-prestige-note {
  padding: 14px !important;
}

/* Ranking view */
.hall-prestige-board {
  display: grid;
  gap: 10px;
}

.hall-current-category-prestige {
  padding: 11px 14px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(216,176,106,.08), transparent 34%),
    rgba(255,255,255,.04) !important;
}

.hall-current-category-prestige strong {
  font-size: 1.05rem !important;
}

.hall-current-category-prestige small {
  color: rgba(243, 232, 213, .62) !important;
}

.hall-champion-spotlight {
  min-height: 104px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border-radius: 22px;
  border: 1px solid rgba(222, 198, 160, .14);
  background:
    radial-gradient(circle at 0% 0%, rgba(216, 176, 106, .18), transparent 34%),
    linear-gradient(135deg, rgba(55, 41, 27, .78), rgba(10, 14, 22, .86));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 30px rgba(0,0,0,.22);
}

.hall-champion-copy span {
  display: block;
  margin-bottom: 5px;
  color: rgba(216, 176, 106, .90);
  font-size: .64rem;
  font-weight: 1000;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hall-champion-copy strong {
  display: block;
  color: var(--rq-warm-cream, #f4ead8);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.05;
}

.hall-champion-copy small {
  display: block;
  margin-top: 5px;
  color: rgba(243, 232, 213, .68);
  font-size: .80rem;
}

.hall-champion-avatar {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: rgba(7, 11, 18, .38);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}

.hall-champion-avatar .leaderboard-avatar3d,
.hall-champion-avatar .leaderboard-avatar,
.hall-champion-avatar .champion-avatar {
  width: 70px !important;
  height: 70px !important;
}

.hall-podium-wrap {
  min-height: 226px !important;
  padding: 28px 14px 14px !important;
  border-radius: 24px !important;
}

.hall-podium-card {
  min-height: 152px !important;
  border-radius: 20px !important;
  padding: 12px 10px !important;
}

.hall-podium-card.place-1 {
  min-height: 184px !important;
}

.hall-medal {
  width: 34px !important;
  height: 34px !important;
}

.hall-place-badge {
  padding: 3px 7px !important;
  font-size: .56rem !important;
}

.hall-podium-card strong {
  font-size: .96rem !important;
}

.hall-podium-card small {
  font-size: .72rem !important;
}

.hall-ranking-table {
  gap: 7px !important;
}

.hall-rank-row {
  grid-template-columns: 50px 42px minmax(0, 1fr) auto !important;
  min-height: 58px !important;
  padding: 8px 11px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025)) !important;
  border-color: rgba(222, 198, 160, .10) !important;
}

.hall-rank-number {
  color: rgba(216, 176, 106, .95) !important;
}

.hall-row-avatar,
.hall-rank-row .leaderboard-avatar3d,
.hall-rank-row .leaderboard-avatar {
  width: 38px !important;
  height: 38px !important;
}

.hall-player-name {
  font-size: .88rem !important;
}

.hall-player-name small {
  margin-top: 1px !important;
  font-size: .68rem !important;
}

.hall-score {
  min-width: 96px !important;
  text-align: right !important;
  color: var(--rq-warm-gold, #d8b06a) !important;
}

.hall-score small {
  font-size: .56rem !important;
}

.hall-my-rank {
  padding: 13px 15px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(216, 176, 106, .12), transparent 35%),
    rgba(255,255,255,.045) !important;
  border: 1px solid rgba(222, 198, 160, .12) !important;
}

@media (max-width: 920px) and (orientation: landscape) {
  .hall-header {
    min-height: 104px !important;
    padding: 16px 62px 14px !important;
  }

  .hall-header h2 {
    font-size: clamp(1.9rem, 4vw, 2.8rem) !important;
  }

  .hall-header p {
    display: none !important;
  }

  .hall-podium-wrap {
    min-height: 182px !important;
    padding-top: 16px !important;
  }

  .hall-podium-card {
    min-height: 126px !important;
  }

  .hall-podium-card.place-1 {
    min-height: 148px !important;
  }
}

@media (max-width: 760px) {
  .hall-dialog.leaderboard-dialog {
    width: calc(100dvw - 8px) !important;
  }

  .hall-of-fame-card {
    border-radius: 22px !important;
    padding: 0 10px 14px !important;
  }

  .hall-header {
    min-height: 118px !important;
    margin: 0 -10px 10px !important;
    padding: 16px 54px 14px !important;
  }

  .hall-header h2 {
    font-size: 2rem !important;
  }

  .hall-title-medal {
    width: 34px !important;
    height: 34px !important;
  }

  .hall-header p {
    font-size: .74rem !important;
  }

  .hall-view-tabs {
    width: 100% !important;
  }

  .hall-view-tab {
    flex: 1 1 0 !important;
  }

  .hall-overview-hero,
  .hall-champion-spotlight {
    grid-template-columns: 1fr !important;
  }

  .hall-prestige-grid,
  .hall-overview-rewards {
    grid-template-columns: 1fr !important;
  }

  .hall-podium {
    grid-template-columns: 1fr !important;
  }

  .hall-podium-wrap {
    min-height: 0 !important;
    padding: 12px !important;
  }

  .hall-podium-card,
  .hall-podium-card.place-1 {
    min-height: 122px !important;
  }

  .hall-rank-row {
    grid-template-columns: 42px 38px minmax(0, 1fr) !important;
  }

  .hall-score {
    grid-column: 3 / -1;
    justify-self: start;
    text-align: left !important;
  }
}


/* v7.0.224 Hall of Fame Rankings First.
   Remove the heavy Trophy Room landing page and make Hall of Fame open directly as rankings. */
.hall-dialog.is-overview .leaderboard-tabs,
.hall-dialog.is-overview .leaderboard-period-tabs {
  display: flex !important;
}

/* Hide the Trophy Room / Rankings switch entirely; rankings are the main screen now. */
.hall-view-tabs {
  display: none !important;
}

/* Smaller, cleaner Hall header */
.hall-header {
  min-height: 108px !important;
  margin: 0 -22px 10px !important;
  padding: 18px 66px 16px !important;
}

.hall-kicker {
  padding: 4px 10px !important;
  font-size: .56rem !important;
}

.hall-header h2 {
  font-size: clamp(2rem, 3.6vw, 3.35rem) !important;
  gap: 10px !important;
}

.hall-title-medal {
  width: 36px !important;
  height: 36px !important;
}

.hall-header p {
  font-size: .82rem !important;
  line-height: 1.28 !important;
}

/* Put leaderboard controls closer to the header */
.leaderboard-tabs,
.leaderboard-period-tabs {
  margin: 6px auto 8px !important;
  padding: 5px !important;
}

.leaderboard-tab,
.leaderboard-period-tab {
  min-height: 32px !important;
  padding: 6px 10px !important;
}

/* Rankings content moves up and becomes the main board */
.hall-leaderboard-list {
  max-height: min(70vh, 720px) !important;
  gap: 9px !important;
}

/* Remove tutorial/info feeling if overview ever gets displayed */
.hall-overview-compact-info {
  padding: 8px 0 0 !important;
}

.hall-overview-compact-info .hall-overview-note {
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  text-align: center !important;
}

/* Current chart strip and champion spotlight should be slimmer */
.hall-current-category-prestige,
.hall-current-category {
  min-height: 54px !important;
  padding: 9px 13px !important;
  border-radius: 16px !important;
}

.hall-current-category-prestige strong,
.hall-current-category strong {
  font-size: .98rem !important;
}

.hall-current-category-prestige small,
.hall-current-category small {
  font-size: .70rem !important;
}

.hall-champion-spotlight {
  min-height: 86px !important;
  padding: 12px 15px !important;
  border-radius: 19px !important;
}

.hall-champion-copy span {
  font-size: .58rem !important;
  margin-bottom: 3px !important;
}

.hall-champion-copy strong {
  font-size: clamp(1.08rem, 1.8vw, 1.45rem) !important;
}

.hall-champion-copy small {
  font-size: .74rem !important;
}

.hall-champion-avatar {
  width: 58px !important;
  height: 58px !important;
  border-radius: 18px !important;
}

.hall-champion-avatar .leaderboard-avatar3d,
.hall-champion-avatar .leaderboard-avatar,
.hall-champion-avatar .champion-avatar {
  width: 56px !important;
  height: 56px !important;
}

/* Podium more compact so rows are visible sooner */
.hall-podium-wrap {
  min-height: 188px !important;
  padding: 18px 12px 12px !important;
  border-radius: 22px !important;
}

.hall-podium-card {
  min-height: 128px !important;
  padding: 10px 9px !important;
  border-radius: 18px !important;
}

.hall-podium-card.place-1 {
  min-height: 150px !important;
}

.hall-medal {
  width: 30px !important;
  height: 30px !important;
}

.hall-place-badge {
  font-size: .52rem !important;
  padding: 3px 7px !important;
}

.hall-podium-card strong {
  font-size: .88rem !important;
}

.hall-podium-card small {
  font-size: .66rem !important;
}

/* Ranking rows stay visible and clean */
.hall-rank-row {
  min-height: 52px !important;
  padding: 7px 10px !important;
  border-radius: 15px !important;
}

.hall-my-rank {
  padding: 11px 13px !important;
  border-radius: 18px !important;
}

@media (max-width: 920px) and (orientation: landscape) {
  .hall-header {
    min-height: 82px !important;
    padding: 12px 58px 10px !important;
  }

  .hall-header h2 {
    font-size: clamp(1.75rem, 3.6vw, 2.45rem) !important;
  }

  .hall-header p {
    display: none !important;
  }

  .hall-champion-spotlight {
    min-height: 68px !important;
  }

  .hall-podium-wrap {
    min-height: 150px !important;
  }

  .hall-podium-card,
  .hall-podium-card.place-1 {
    min-height: 108px !important;
  }
}

@media (max-width: 760px) {
  .hall-header {
    min-height: 96px !important;
    margin: 0 -10px 8px !important;
    padding: 14px 50px 12px !important;
  }

  .hall-header h2 {
    font-size: 1.85rem !important;
  }

  .hall-title-medal {
    width: 30px !important;
    height: 30px !important;
  }

  .hall-header p {
    font-size: .70rem !important;
  }

  .leaderboard-tabs,
  .leaderboard-period-tabs {
    justify-content: start !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }

  .hall-champion-spotlight {
    grid-template-columns: 1fr auto !important;
  }

  .hall-podium {
    grid-template-columns: 1fr !important;
  }

  .hall-podium-wrap {
    min-height: 0 !important;
  }

  .hall-podium-card,
  .hall-podium-card.place-1 {
    min-height: 104px !important;
  }
}


/* v7.0.225 Hall of Fame Single Scroll.
   Champion Spotlight removed: podium already shows the top places.
   Only the inner leaderboard list scrolls; the outer dialog/card stays locked. */
.hall-dialog.leaderboard-dialog {
  overflow: hidden !important;
}

.hall-of-fame-card {
  display: flex !important;
  flex-direction: column !important;
  max-height: calc(100dvh - 28px) !important;
  overflow: hidden !important;
}

/* Header and controls are fixed within the modal, only the list below scrolls. */
.hall-header,
.leaderboard-tabs,
.leaderboard-period-tabs {
  flex: 0 0 auto !important;
}

/* The old spotlight is intentionally removed/hidden if any cached markup appears. */
.hall-champion-spotlight {
  display: none !important;
}

/* One scroll zone only: the leaderboard content. */
.hall-leaderboard-list,
.menu-leaderboard-list.hall-leaderboard-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 6px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(216, 176, 106, .55) rgba(7, 11, 18, .45);
}

.hall-leaderboard-list::-webkit-scrollbar {
  width: 10px;
}

.hall-leaderboard-list::-webkit-scrollbar-track {
  background: rgba(7, 11, 18, .45);
  border-radius: 999px;
  margin: 8px 0;
}

.hall-leaderboard-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 2px solid rgba(7, 11, 18, .45);
  background: linear-gradient(180deg, rgba(216, 176, 106, .78), rgba(140, 105, 64, .76));
}

/* Without spotlight, the podium can breathe but should still stay compact. */
.hall-rankings-only-board {
  gap: 9px !important;
}

.hall-rankings-only-board .hall-podium-wrap {
  min-height: 198px !important;
  padding: 20px 12px 12px !important;
}

.hall-rankings-only-board .hall-podium-card {
  min-height: 136px !important;
}

.hall-rankings-only-board .hall-podium-card.place-1 {
  min-height: 160px !important;
}

/* Keep current position inside the same inner scroll area. */
.hall-my-rank {
  margin-bottom: 2px !important;
}

/* Prevent accidental outer scrollbars created by older rules. */
.hall-dialog,
.hall-dialog::backdrop,
.hall-of-fame-card,
.hall-of-fame-card form {
  overscroll-behavior: contain !important;
}

@media (max-width: 920px) and (orientation: landscape) {
  .hall-of-fame-card {
    max-height: calc(100dvh - 10px) !important;
  }

  .hall-rankings-only-board .hall-podium-wrap {
    min-height: 154px !important;
  }

  .hall-rankings-only-board .hall-podium-card,
  .hall-rankings-only-board .hall-podium-card.place-1 {
    min-height: 108px !important;
  }
}

@media (max-width: 760px) {
  .hall-of-fame-card {
    max-height: calc(100dvh - 8px) !important;
  }

  .hall-leaderboard-list,
  .menu-leaderboard-list.hall-leaderboard-list {
    padding-right: 2px !important;
  }

  .hall-rankings-only-board .hall-podium-wrap {
    min-height: 0 !important;
  }

  .hall-rankings-only-board .hall-podium-card,
  .hall-rankings-only-board .hall-podium-card.place-1 {
    min-height: 104px !important;
  }
}


/* v7.0.227 Home Pulse Rings Warm Palette.
   Revert the broad home warm refresh idea and only recolor
   the two pulsing background circles on the Home/menu background. */

body:not(.is-playing) {
  background:
    radial-gradient(circle at 18% 10%, rgba(222, 184, 115, 0.22), transparent 24%),
    radial-gradient(circle at 83% 18%, rgba(154, 111, 70, 0.16), transparent 28%),
    radial-gradient(circle at 70% 86%, rgba(222, 184, 115, 0.09), transparent 24%),
    linear-gradient(135deg, #0f0b08 0%, #17110d 45%, #0b0907 100%) !important;
}

body:not(.is-playing)::before {
  border: 1px solid rgba(222, 184, 115, .12) !important;
  box-shadow:
    0 0 0 44px rgba(222, 184, 115, .032),
    0 0 0 92px rgba(154, 111, 70, .024),
    0 0 120px rgba(222, 184, 115, .095) !important;
}

body:not(.is-playing)::after {
  border: 1px solid rgba(154, 111, 70, .13) !important;
  box-shadow:
    0 0 0 38px rgba(154, 111, 70, .032),
    0 0 0 78px rgba(222, 184, 115, .022),
    0 0 100px rgba(154, 111, 70, .10) !important;
}


/* v7.0.228 Home Background Image Restore.
   Fixes v7.0.227: keep the actual main menu background image visible,
   and recolor only the pulsing rings / glow overlays. */
body:not(.is-playing) {
  background:
    linear-gradient(180deg, rgba(23, 16, 11, .24), rgba(23, 16, 11, .78)),
    var(--rq-menu-bg),
    radial-gradient(circle at 16% 12%, rgba(197, 154, 97, .18), transparent 34%),
    radial-gradient(circle at 82% 16%, rgba(123, 96, 62, .18), transparent 28%),
    #16110d !important;
  background-size: cover, cover, auto, auto, auto !important;
  background-position: center, center, center, center, center !important;
  background-attachment: fixed, fixed, scroll, scroll, scroll !important;
}

/* Only the two animated background rings are recolored. */
body:not(.is-playing)::before {
  border: 1px solid rgba(222, 184, 115, .12) !important;
  box-shadow:
    0 0 0 44px rgba(222, 184, 115, .032),
    0 0 0 92px rgba(154, 111, 70, .024),
    0 0 120px rgba(222, 184, 115, .095) !important;
}

body:not(.is-playing)::after {
  border: 1px solid rgba(154, 111, 70, .13) !important;
  box-shadow:
    0 0 0 38px rgba(154, 111, 70, .032),
    0 0 0 78px rgba(222, 184, 115, .022),
    0 0 100px rgba(154, 111, 70, .10) !important;
}


/* v7.0.229 Main Menu Header Logo Width Polish.
   The home header logo gets more horizontal room so it looks less squeezed / low-quality.
   Keep the header height nearly the same and avoid other menu layout changes. */
.main-brand-lockup {
  max-width: min(660px, calc(100% - 28px)) !important;
}

.main-brand-logo {
  display: block !important;
  width: min(100%, 560px) !important;
  height: auto !important;
  max-width: 100% !important;
  image-rendering: auto !important;
}

@media (min-width: 921px) {
  .main-brand-lockup {
    max-width: min(680px, calc(100% - 26px)) !important;
    padding-bottom: 18px !important;
  }

  .main-brand-logo {
    width: min(100%, 585px) !important;
  }
}

@media (max-width: 760px) {
  .main-brand-lockup {
    max-width: min(94vw, 454px) !important;
  }

  .main-brand-logo {
    width: min(100%, 408px) !important;
  }
}

body.rq-scaled-menu:not(.is-playing) .main-brand-lockup {
  max-width: min(560px, calc(100% - 32px)) !important;
}

body.rq-scaled-menu:not(.is-playing) .main-brand-logo {
  width: min(100%, 500px) !important;
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 560px) {
  .main-brand-lockup {
    max-width: min(340px, 42vw) !important;
  }

  .main-brand-logo {
    width: 100% !important;
  }
}


/* v7.0.233 Home Season Rank UI.
   Adds a compact PvP season rank/trophies card into the Home profile panel. */
.home-season-rank-card {
  width: 100%;
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 12px 13px;
  border-radius: 18px;
  border: 1px solid rgba(222, 198, 160, .16);
  background:
    radial-gradient(circle at 0% 0%, rgba(216, 176, 106, .13), transparent 36%),
    linear-gradient(145deg, rgba(57, 43, 30, .68), rgba(17, 14, 11, .88));
  box-shadow: 0 12px 24px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.045);
}

.home-season-rank-head,
.home-season-rank-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.home-season-rank-head span {
  color: rgba(216, 176, 106, .92);
  font-size: .58rem;
  font-weight: 1000;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.home-season-rank-head b {
  color: rgba(243, 232, 213, .62);
  font-size: .66rem;
  font-weight: 900;
}

.home-season-rank-main {
  display: grid;
  gap: 2px;
}

.home-season-rank-main strong {
  color: var(--rq-warm-cream, #f4ead8);
  font-size: clamp(1.08rem, 1.9vw, 1.34rem);
  line-height: 1.05;
  letter-spacing: -.025em;
}

.home-season-rank-main span {
  color: rgba(243, 232, 213, .74);
  font-size: .78rem;
  font-weight: 850;
}

.home-season-rank-foot small {
  color: rgba(243, 232, 213, .55);
  font-size: .64rem;
  font-weight: 850;
}

.home-stat-card.stat-trophies {
  border-color: rgba(216,176,106,.20) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(216,176,106,.12), transparent 36%),
    rgba(255,255,255,.045) !important;
}

.home-stat-card.stat-trophies strong {
  color: var(--rq-warm-gold, #d8b06a) !important;
}

@media (max-width: 760px) {
  .home-season-rank-card {
    padding: 10px 11px;
    border-radius: 16px;
    gap: 6px;
  }

  .home-season-rank-main strong {
    font-size: 1.05rem;
  }

  .home-season-rank-foot {
    flex-wrap: wrap;
  }
}


/* v7.0.234 Home Season Layout Fix.
   Remove the duplicate PvP Trophies tile from layout pressure
   and lock the Home 3D character stage to stable dimensions. */

/* Safety: if an old cached PvP trophies tile appears, hide it. */
.home-stat-card.stat-trophies {
  display: none !important;
}

/* Keep the mini-stat grid at 2x2 after removing duplicate PvP Trophies. */
.home-profile-mini {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: start !important;
}

/* Prevent the left 3D showcase / podium from growing with the right content. */
.home-profile-card.home-profile-card-3d {
  grid-template-columns: clamp(188px, 21vw, 232px) minmax(0, 1fr) !important;
  align-items: start !important;
}

.home-avatar3d {
  width: clamp(188px, 21vw, 232px) !important;
  min-width: clamp(188px, 21vw, 232px) !important;
  max-width: 232px !important;
  height: clamp(390px, 46vh, 520px) !important;
  min-height: 390px !important;
  max-height: 520px !important;
  align-self: start !important;
  overflow: hidden !important;
}

.home-avatar3d .avatar3d-view,
#homeAvatar3d.avatar3d-view {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

.home-avatar3d .avatar3d-view canvas,
#homeAvatar3d.avatar3d-view canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Keep the content column from forcing the whole card taller than necessary. */
.home-profile-main {
  min-width: 0 !important;
}

.home-season-rank-card {
  margin-top: 7px !important;
  padding: 11px 13px !important;
}

.home-stat-card {
  min-height: 58px !important;
}

/* Desktop short-height safety: fit profile area better without shrinking the model into nothing. */
@media (min-width: 921px) and (max-height: 840px) {
  .home-avatar3d {
    height: clamp(360px, 43vh, 470px) !important;
    min-height: 360px !important;
    max-height: 470px !important;
  }

  .home-season-rank-card {
    padding: 10px 12px !important;
    gap: 6px !important;
  }

  .home-stat-card {
    min-height: 54px !important;
  }
}

/* Scaled menu / smaller desktop layout */
body.rq-scaled-menu:not(.is-playing) .home-profile-card.home-profile-card-3d {
  grid-template-columns: clamp(158px, 18vw, 198px) minmax(0, 1fr) !important;
}

body.rq-scaled-menu:not(.is-playing) .home-avatar3d {
  width: clamp(158px, 18vw, 198px) !important;
  min-width: clamp(158px, 18vw, 198px) !important;
  max-width: 198px !important;
  height: clamp(310px, 41vh, 410px) !important;
  min-height: 310px !important;
  max-height: 410px !important;
}

/* Mobile / portrait should still stack safely. */
@media (max-width: 760px) {
  .home-profile-card.home-profile-card-3d {
    grid-template-columns: 1fr !important;
  }

  .home-avatar3d {
    width: min(100%, 220px) !important;
    min-width: 0 !important;
    max-width: 220px !important;
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
    justify-self: center !important;
  }

  .home-profile-mini {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Phone landscape keeps the model card smaller and stable. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 560px) {
  .home-profile-card.home-profile-card-3d {
    grid-template-columns: 92px minmax(0, 1fr) !important;
  }

  .home-avatar3d {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    height: 132px !important;
    min-height: 132px !important;
    max-height: 132px !important;
  }
}


/* v7.0.235 Home Fullscreen Fit Fix.
   The maximized desktop layout was using the larger Home sizing, so Record Board
   could fall below the visible area. This makes the season rank compact and locks
   the Home profile region to fit better on fullscreen Chrome. */

/* Season rank becomes a compact badge-row instead of a tall card. */
.home-season-rank-card.home-season-rank-card-compact,
.home-season-rank-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 48px !important;
  margin-top: 7px !important;
  padding: 8px 12px !important;
  border-radius: 16px !important;
}

.home-season-rank-card .home-season-rank-head,
.home-season-rank-card .home-season-rank-foot {
  display: none !important;
}

.home-season-rank-card .home-season-rank-main {
  display: grid !important;
  gap: 1px !important;
  min-width: 0 !important;
}

.home-season-rank-kicker {
  color: rgba(216, 176, 106, .88) !important;
  font-size: .55rem !important;
  font-weight: 1000 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

.home-season-rank-card .home-season-rank-main strong {
  font-size: clamp(.98rem, 1.42vw, 1.15rem) !important;
  line-height: 1.02 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.home-season-rank-meta {
  display: grid !important;
  justify-items: end !important;
  gap: 1px !important;
  text-align: right !important;
  min-width: max-content !important;
}

.home-season-rank-meta b {
  color: var(--rq-warm-gold, #d8b06a) !important;
  font-size: .78rem !important;
  font-weight: 1000 !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

.home-season-rank-meta small {
  color: rgba(243, 232, 213, .56) !important;
  font-size: .60rem !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

/* Keep profile content compact enough for Record Board on standard fullscreen desktop. */
.home-profile-card.home-profile-card-3d {
  align-items: start !important;
}

.home-profile-main {
  display: grid !important;
  align-content: start !important;
  gap: 7px !important;
}

.home-profile-main > strong {
  line-height: 1.02 !important;
}

.equipped-character-name {
  margin-top: -2px !important;
}

.home-profile-mini {
  gap: 8px !important;
  margin-top: 8px !important;
}

.home-profile-mini .home-stat-card,
.home-stat-card {
  min-height: 52px !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

.home-profile-mini .home-stat-card label {
  font-size: .58rem !important;
}

.home-profile-mini .home-stat-card strong {
  font-size: .92rem !important;
  line-height: 1.02 !important;
}

.mode-bests-record-board {
  margin-top: 8px !important;
}

.mode-bests-record-board,
.mode-bests-record-board * {
  box-sizing: border-box !important;
}

/* Fullscreen Chrome / 16:9 desktop fit. */
@media (min-width: 921px) and (min-height: 820px) {
  .home-profile-card.home-profile-card-3d {
    grid-template-columns: clamp(178px, 19vw, 214px) minmax(0, 1fr) !important;
  }

  .home-avatar3d {
    width: clamp(178px, 19vw, 214px) !important;
    min-width: clamp(178px, 19vw, 214px) !important;
    max-width: 214px !important;
    height: clamp(360px, 40vh, 440px) !important;
    min-height: 360px !important;
    max-height: 440px !important;
  }

  .home-profile-card.home-profile-card-3d .home-avatar3d {
    min-height: 360px !important;
    max-height: 440px !important;
    padding: 16px 12px 18px !important;
  }

  .home-profile-card.home-profile-card-3d .home-avatar3d .avatar3d-view,
  #homeAvatar3d.avatar3d-view {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
  }
}

/* Slightly shorter desktops should be even tighter. */
@media (min-width: 921px) and (max-height: 819px) {
  .home-season-rank-card.home-season-rank-card-compact,
  .home-season-rank-card {
    min-height: 44px !important;
    padding: 7px 11px !important;
    margin-top: 5px !important;
  }

  .home-profile-main {
    gap: 5px !important;
  }

  .home-profile-mini {
    gap: 7px !important;
    margin-top: 6px !important;
  }

  .home-profile-mini .home-stat-card,
  .home-stat-card {
    min-height: 48px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

  .mode-bests-record-board {
    margin-top: 6px !important;
  }
}

/* Scaled menu inherits the compact badge and smaller model. */
body.rq-scaled-menu:not(.is-playing) .home-season-rank-card {
  min-height: 42px !important;
  padding: 7px 10px !important;
}

body.rq-scaled-menu:not(.is-playing) .home-season-rank-card .home-season-rank-main strong {
  font-size: .96rem !important;
}

body.rq-scaled-menu:not(.is-playing) .home-season-rank-meta b {
  font-size: .72rem !important;
}

@media (max-width: 760px) {
  .home-season-rank-card.home-season-rank-card-compact,
  .home-season-rank-card {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  .home-season-rank-meta {
    justify-items: start !important;
    text-align: left !important;
  }
}


/* v7.0.236 Home 1080p Viewport Fit.
   Your 1920x1080 / Chrome 100% screenshot shows the Record Board partly below
   the fold, while 90% zoom fits. This creates a true compact desktop viewport
   mode instead of relying on browser zoom. */

/* Standard desktop Chrome 100% / maximized window. */
@media (min-width: 921px) and (max-height: 960px) {
  .start-screen {
    min-height: 100dvh !important;
    align-content: start !important;
    gap: 4px !important;
    padding-top: clamp(6px, 1vh, 12px) !important;
    padding-bottom: 8px !important;
  }

  .main-brand-lockup {
    max-width: min(560px, calc(100% - 32px)) !important;
    padding: 0 8px !important;
    margin: 0 auto !important;
    border-radius: 18px !important;
  }

  .main-brand-logo {
    width: min(100%, 470px) !important;
    filter: drop-shadow(0 9px 18px rgba(0,0,0,.28)) !important;
  }

  .main-menu-kicker {
    padding: 5px 11px !important;
    font-size: .57rem !important;
    letter-spacing: .15em !important;
  }

  .main-menu-kicker img {
    width: 14px !important;
    height: 14px !important;
  }

  .start-screen .tagline {
    margin: 0 auto 4px !important;
    font-size: .74rem !important;
    line-height: 1.18 !important;
  }

  .start-card.start-card-v12 {
    width: min(1040px, calc(100% - 32px)) !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border-radius: 22px !important;
  }

  .start-card.start-card-v12::before {
    inset: 7px !important;
  }

  .home-profile-card.home-profile-card-3d {
    min-height: 0 !important;
    height: auto !important;
    padding: 8px 9px !important;
    gap: 8px 10px !important;
    border-radius: 19px !important;
    grid-template-columns: 178px minmax(0, 1fr) !important;
    align-items: start !important;
  }

  .home-avatar3d {
    width: 178px !important;
    min-width: 178px !important;
    max-width: 178px !important;
    height: 332px !important;
    min-height: 332px !important;
    max-height: 332px !important;
    padding: 12px 9px 13px !important;
    border-radius: 18px !important;
  }

  .home-profile-card.home-profile-card-3d .home-avatar3d {
    min-height: 332px !important;
    max-height: 332px !important;
    padding: 12px 9px 13px !important;
  }

  .home-avatar3d .avatar3d-view,
  #homeAvatar3d.avatar3d-view {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  .home-avatar-rarity-badge {
    top: 8px !important;
    padding: 3px 10px !important;
    font-size: .55rem !important;
  }

  .home-profile-main {
    gap: 5px !important;
  }

  .home-profile-main > strong {
    font-size: 1.12rem !important;
    line-height: 1 !important;
  }

  .equipped-character-name {
    padding: 4px 9px !important;
    font-size: .61rem !important;
  }

  .home-season-rank-card.home-season-rank-card-compact,
  .home-season-rank-card {
    min-height: 38px !important;
    margin-top: 3px !important;
    padding: 5px 9px !important;
    border-radius: 13px !important;
  }

  .home-season-rank-kicker {
    display: none !important;
  }

  .home-season-rank-card .home-season-rank-main strong {
    font-size: .88rem !important;
  }

  .home-season-rank-meta b {
    font-size: .68rem !important;
  }

  .home-season-rank-meta small {
    font-size: .52rem !important;
  }

  .home-profile-mini {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 6px !important;
  }

  .home-profile-mini .home-stat-card,
  .home-stat-card {
    min-height: 43px !important;
    padding: 6px 8px !important;
    border-radius: 12px !important;
  }

  .home-stat-icon,
  .home-stat-card::before {
    width: 22px !important;
    height: 22px !important;
  }

  .home-profile-mini .home-stat-card label {
    font-size: .50rem !important;
    line-height: 1 !important;
    margin-bottom: 1px !important;
  }

  .home-profile-mini .home-stat-card strong {
    font-size: .82rem !important;
    line-height: 1 !important;
  }

  .mode-bests-record-board {
    margin-top: 6px !important;
    padding: 7px 8px !important;
    border-radius: 14px !important;
  }

  .mode-bests-record-board .mode-bests-head {
    padding-bottom: 3px !important;
    margin-bottom: 4px !important;
  }

  .mode-bests-record-board .mode-bests-head span {
    font-size: .54rem !important;
  }

  .mode-bests-record-board .mode-bests-head strong {
    font-size: .84rem !important;
  }

  .mode-bests-record-board .mode-bests-head em {
    font-size: .50rem !important;
  }

  .mode-bests-record-board .mode-bests-grid {
    gap: 4px !important;
    margin-top: 4px !important;
  }

  .mode-bests-record-board .mode-record-tile,
  .mode-bests-grid div {
    min-height: 36px !important;
    padding: 4px 5px !important;
    border-radius: 9px !important;
  }

  .mode-bests-record-board .mode-record-tile strong,
  .mode-bests-grid strong {
    font-size: .70rem !important;
    line-height: 1 !important;
    margin: 1px 0 !important;
  }

  .mode-bests-record-board .mode-record-tile span,
  .mode-bests-record-board .mode-record-tile small,
  .mode-bests-grid span,
  .mode-bests-grid small {
    font-size: .47rem !important;
    line-height: 1.02 !important;
  }

  .inventory-launch-card.inventory-menu-card.action-hub-card {
    padding: 10px 10px !important;
    gap: 6px !important;
    border-radius: 20px !important;
  }

  .action-hub-head {
    margin-bottom: 0 !important;
  }

  .action-hub-title span {
    font-size: .72rem !important;
  }

  .inventory-menu-grid.action-hub-grid {
    gap: 6px !important;
  }

  .action-hub-grid .menu-card-btn,
  .action-hub-grid .menu-card-btn.action-hub-tile,
  .action-hub-grid .menu-card-btn.action-hub-more-btn {
    min-height: 42px !important;
    padding: 6px 9px !important;
    border-radius: 12px !important;
  }

  .action-hub-grid .menu-card-btn.action-hub-hero,
  body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero {
    min-height: 50px !important;
  }

  .menu-card-btn strong {
    font-size: .82rem !important;
    line-height: 1.05 !important;
  }

  .menu-card-btn em,
  .menu-card-btn small {
    font-size: .55rem !important;
    line-height: 1.05 !important;
  }

  .status-pill {
    margin-top: 6px !important;
    padding: 5px 14px !important;
    font-size: .60rem !important;
  }

  .main-menu-footer {
    margin-top: 5px !important;
    padding: 6px 12px !important;
    font-size: .68rem !important;
    min-height: 0 !important;
  }
}

/* Real browser fullscreen has a bit more space, but keep it from growing back. */
@media (min-width: 921px) and (min-height: 961px) and (max-height: 1120px) {
  .start-screen {
    align-content: start !important;
    padding-top: clamp(8px, 1.2vh, 16px) !important;
    gap: 5px !important;
  }

  .main-brand-logo {
    width: min(100%, 500px) !important;
  }

  .home-avatar3d,
  .home-profile-card.home-profile-card-3d .home-avatar3d {
    height: 370px !important;
    min-height: 370px !important;
    max-height: 370px !important;
  }

  .home-profile-card.home-profile-card-3d {
    grid-template-columns: 190px minmax(0, 1fr) !important;
  }
}


/* v7.0.237 Home Balanced 1080p Fit.
   v7.0.236 fitted Chrome 100%, but made Record Board too small.
   This keeps the no-scroll 1920x1080 fit while giving the center card and Record Board more height again. */
@media (min-width: 921px) and (max-height: 960px) {
  .start-screen {
    gap: 6px !important;
    padding-top: clamp(8px, 1.15vh, 14px) !important;
    padding-bottom: 8px !important;
  }

  .main-brand-lockup {
    max-width: min(600px, calc(100% - 32px)) !important;
    margin: 0 auto 1px !important;
  }

  .main-brand-logo {
    width: min(100%, 510px) !important;
  }

  .start-screen .tagline {
    margin: 0 auto 6px !important;
    font-size: .78rem !important;
    line-height: 1.22 !important;
  }

  .start-card.start-card-v12 {
    width: min(1068px, calc(100% - 32px)) !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    border-radius: 24px !important;
  }

  .home-profile-card.home-profile-card-3d {
    grid-template-columns: 190px minmax(0, 1fr) !important;
    padding: 10px 11px !important;
    gap: 9px 12px !important;
    border-radius: 20px !important;
  }

  .home-avatar3d,
  .home-profile-card.home-profile-card-3d .home-avatar3d {
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
    height: 360px !important;
    min-height: 360px !important;
    max-height: 360px !important;
    padding: 13px 10px 14px !important;
  }

  .home-profile-main {
    gap: 6px !important;
  }

  .home-profile-main > strong {
    font-size: 1.22rem !important;
  }

  .equipped-character-name {
    padding: 5px 10px !important;
    font-size: .64rem !important;
  }

  .home-season-rank-card.home-season-rank-card-compact,
  .home-season-rank-card {
    min-height: 42px !important;
    margin-top: 4px !important;
    padding: 6px 10px !important;
    border-radius: 14px !important;
  }

  .home-season-rank-card .home-season-rank-main strong {
    font-size: .94rem !important;
  }

  .home-season-rank-meta b {
    font-size: .72rem !important;
  }

  .home-season-rank-meta small {
    font-size: .55rem !important;
  }

  .home-profile-mini {
    gap: 7px !important;
    margin-top: 7px !important;
  }

  .home-profile-mini .home-stat-card,
  .home-stat-card {
    min-height: 48px !important;
    padding: 7px 9px !important;
    border-radius: 13px !important;
  }

  .home-stat-icon,
  .home-stat-card::before {
    width: 24px !important;
    height: 24px !important;
  }

  .home-profile-mini .home-stat-card label {
    font-size: .54rem !important;
  }

  .home-profile-mini .home-stat-card strong {
    font-size: .90rem !important;
  }

  /* Record Board restored to readable size. */
  .mode-bests-record-board {
    margin-top: 8px !important;
    padding: 10px 11px !important;
    border-radius: 16px !important;
  }

  .mode-bests-record-board .mode-bests-head {
    padding-bottom: 5px !important;
    margin-bottom: 6px !important;
  }

  .mode-bests-record-board .mode-bests-head span {
    font-size: .62rem !important;
    letter-spacing: .12em !important;
  }

  .mode-bests-record-board .mode-bests-head strong {
    font-size: .98rem !important;
  }

  .mode-bests-record-board .mode-bests-head em {
    font-size: .56rem !important;
  }

  .mode-bests-record-board .mode-bests-grid {
    gap: 6px !important;
    margin-top: 6px !important;
  }

  .mode-bests-record-board .mode-record-tile,
  .mode-bests-grid div {
    min-height: 46px !important;
    padding: 7px 8px !important;
    border-radius: 11px !important;
  }

  .mode-bests-record-board .mode-record-tile strong,
  .mode-bests-grid strong {
    font-size: .86rem !important;
    line-height: 1.05 !important;
    margin: 2px 0 1px !important;
  }

  .mode-bests-record-board .mode-record-tile span,
  .mode-bests-record-board .mode-record-tile small,
  .mode-bests-grid span,
  .mode-bests-grid small {
    font-size: .56rem !important;
    line-height: 1.08 !important;
  }

  .inventory-launch-card.inventory-menu-card.action-hub-card {
    padding: 12px 12px !important;
    gap: 7px !important;
    border-radius: 21px !important;
  }

  .action-hub-grid .menu-card-btn,
  .action-hub-grid .menu-card-btn.action-hub-tile,
  .action-hub-grid .menu-card-btn.action-hub-more-btn {
    min-height: 46px !important;
    padding: 7px 10px !important;
    border-radius: 13px !important;
  }

  .action-hub-grid .menu-card-btn.action-hub-hero,
  body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero {
    min-height: 56px !important;
  }

  .menu-card-btn strong {
    font-size: .88rem !important;
  }

  .menu-card-btn em,
  .menu-card-btn small {
    font-size: .58rem !important;
  }

  .status-pill {
    margin-top: 7px !important;
    padding: 6px 15px !important;
  }

  .main-menu-footer {
    margin-top: 6px !important;
    padding: 7px 14px !important;
  }
}

/* Real fullscreen can be a touch taller and more readable too. */
@media (min-width: 921px) and (min-height: 961px) and (max-height: 1120px) {
  .start-card.start-card-v12 {
    width: min(1080px, calc(100% - 34px)) !important;
    padding: 12px 14px !important;
  }

  .home-profile-card.home-profile-card-3d {
    grid-template-columns: 202px minmax(0, 1fr) !important;
    padding: 12px 13px !important;
  }

  .home-avatar3d,
  .home-profile-card.home-profile-card-3d .home-avatar3d {
    width: 202px !important;
    min-width: 202px !important;
    max-width: 202px !important;
    height: 390px !important;
    min-height: 390px !important;
    max-height: 390px !important;
  }

  .mode-bests-record-board {
    padding: 11px 12px !important;
  }

  .mode-bests-record-board .mode-record-tile,
  .mode-bests-grid div {
    min-height: 48px !important;
  }
}


/* v7.0.238 Home Stat Balance + v7.0.239 Season Menu. */
.home-profile-mini {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: stretch !important;
}

.home-profile-mini .home-stat-card {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 10px !important;
  align-items: center !important;
  justify-items: start !important;
  text-align: left !important;
  min-width: 0 !important;
}

.home-profile-mini .home-stat-card .home-stat-icon,
.home-profile-mini .home-stat-card::before {
  grid-row: 1 / span 2 !important;
  grid-column: 1 !important;
  justify-self: center !important;
  align-self: center !important;
}

.home-profile-mini .home-stat-card label {
  grid-column: 2 !important;
  margin: 0 !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.home-profile-mini .home-stat-card strong {
  grid-column: 2 !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

.home-profile-mini .home-stat-card.stat-games {
  grid-column: 1 / -1 !important;
}

.home-profile-mini .home-stat-card.stat-games strong {
  font-size: 1rem !important;
}

.action-hub-grid .action-hub-season-btn {
  border-color: rgba(216, 176, 106, .28) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(216, 176, 106, .16), transparent 34%),
    linear-gradient(180deg, rgba(64, 47, 31, .72), rgba(18, 14, 10, .94)) !important;
}

/* Extra tile means the right hub should stay tight on 1080p. */
@media (min-width: 921px) and (max-height: 960px) {
  .inventory-menu-grid.action-hub-grid {
    gap: 5px !important;
  }

  .action-hub-grid .menu-card-btn,
  .action-hub-grid .menu-card-btn.action-hub-tile,
  .action-hub-grid .menu-card-btn.action-hub-more-btn {
    min-height: 42px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .action-hub-grid .menu-card-btn.action-hub-hero,
  body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero {
    min-height: 52px !important;
  }
}

.season-dialog {
  width: min(940px, calc(100dvw - 24px));
  max-height: calc(100dvh - 24px);
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--rq-warm-cream, #f3e8d5);
}

.season-dialog::backdrop {
  background: rgba(2, 4, 8, .74);
  backdrop-filter: blur(10px);
}

.season-dialog-shell {
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(222, 198, 160, .18);
  background:
    radial-gradient(circle at 50% 0%, rgba(216, 176, 106, .13), transparent 34%),
    linear-gradient(145deg, rgba(38, 29, 20, .98), rgba(8, 10, 14, .98));
  box-shadow: 0 30px 100px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.05);
}

.season-dialog-head {
  min-height: 116px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 26px;
  border-bottom: 1px solid rgba(222, 198, 160, .12);
  background:
    linear-gradient(180deg, rgba(28, 20, 13, .72), rgba(28, 20, 13, .92)),
    radial-gradient(circle at 0% 0%, rgba(216, 176, 106, .18), transparent 32%);
}

.season-dialog-head span,
.season-info-card > span,
.season-progress-head span,
.season-top-head span {
  display: block;
  color: rgba(216, 176, 106, .92);
  font-size: .62rem;
  font-weight: 1000;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.season-dialog-head strong {
  display: block;
  margin-top: 4px;
  color: var(--rq-warm-cream, #f3e8d5);
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1;
  letter-spacing: -.045em;
}

.season-dialog-head small {
  display: block;
  margin-top: 7px;
  color: rgba(243, 232, 213, .68);
  font-size: .84rem;
}

.season-dialog-body {
  max-height: calc(100dvh - 154px);
  overflow-y: auto;
  padding: 18px;
  display: grid;
  gap: 12px;
}

.season-loading,
.season-error,
.season-empty-list {
  min-height: 120px;
  display: grid;
  place-items: center;
  text-align: center;
  color: rgba(243, 232, 213, .72);
  border: 1px solid rgba(222, 198, 160, .12);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}

.season-hero-card,
.season-progress-card,
.season-info-card,
.season-top-card {
  border: 1px solid rgba(222, 198, 160, .13);
  border-radius: 22px;
  background:
    radial-gradient(circle at 0% 0%, rgba(216,176,106,.10), transparent 34%),
    rgba(255,255,255,.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.season-hero-card {
  min-height: 128px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
}

.season-hero-card span {
  color: rgba(216, 176, 106, .92);
  font-size: .66rem;
  font-weight: 1000;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.season-hero-card strong {
  display: block;
  margin-top: 5px;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1;
}

.season-hero-card small {
  display: block;
  margin-top: 6px;
  color: rgba(243, 232, 213, .64);
}

.season-trophy-total {
  min-width: 154px;
  padding: 16px 18px;
  border-radius: 18px;
  text-align: right;
  background: rgba(7, 10, 14, .46);
  border: 1px solid rgba(222, 198, 160, .13);
}

.season-trophy-total b {
  display: block;
  color: var(--rq-warm-gold, #d8b06a);
  font-size: 1.45rem;
  line-height: 1;
}

.season-trophy-total em {
  display: block;
  margin-top: 4px;
  color: rgba(243, 232, 213, .58);
  font-size: .62rem;
  font-style: normal;
  font-weight: 1000;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.season-progress-card {
  padding: 15px 17px;
}

.season-progress-head,
.season-progress-foot,
.season-top-head,
.season-reward-row,
.season-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.season-progress-head b,
.season-top-head b {
  color: rgba(243, 232, 213, .72);
  font-size: .72rem;
}

.season-progress-track {
  height: 8px;
  margin: 12px 0 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(7, 10, 14, .72);
  border: 1px solid rgba(255,255,255,.05);
}

.season-progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(216,176,106,.78), rgba(255,221,147,.95));
}

.season-progress-foot span {
  color: rgba(243, 232, 213, .56);
  font-size: .66rem;
  font-weight: 850;
}

.season-dialog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.season-info-card {
  padding: 16px;
}

.season-info-card ul {
  margin: 12px 0 0;
  padding-left: 18px;
  color: rgba(243, 232, 213, .72);
  line-height: 1.55;
  font-size: .84rem;
}

.season-rewards-list {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.season-reward-row,
.season-top-row {
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(7, 10, 14, .35);
  border: 1px solid rgba(255,255,255,.045);
}

.season-reward-row strong,
.season-top-row b {
  color: var(--rq-warm-gold, #d8b06a);
}

.season-reward-row span,
.season-top-row em {
  color: rgba(243, 232, 213, .68);
  font-size: .72rem;
  font-style: normal;
  text-align: right;
}

.season-top-card {
  padding: 16px;
}

.season-top-list {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.season-top-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

.season-top-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 950;
}

@media (max-width: 760px) {
  .season-dialog {
    width: calc(100dvw - 8px);
  }

  .season-dialog-head {
    min-height: 96px;
    padding: 16px 18px;
  }

  .season-dialog-grid,
  .season-hero-card {
    grid-template-columns: 1fr;
  }

  .season-trophy-total {
    min-width: 0;
    text-align: left;
  }

  .season-top-row {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .season-top-row em {
    grid-column: 2 / -1;
    text-align: left;
  }
}


/* v7.0.240 Home Stat Alignment + Season Hall */

/* Home stat cards: consistent icon/value layout */
.home-profile-mini {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: stretch !important;
}

.home-profile-mini .home-stat-card,
.home-stat-card {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 10px !important;
  row-gap: 1px !important;
  align-items: center !important;
  justify-items: start !important;
  text-align: left !important;
  min-height: 54px !important;
  padding: 9px 12px !important;
}

.home-profile-mini .home-stat-card::before,
.home-profile-mini .home-stat-icon {
  grid-row: 1 / span 2 !important;
  grid-column: 1 !important;
  width: 26px !important;
  height: 26px !important;
  justify-self: center !important;
  align-self: center !important;
  margin: 0 !important;
}

.home-profile-mini .home-stat-card label {
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  font-size: .56rem !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
  text-align: left !important;
}

.home-profile-mini .home-stat-card strong {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  font-size: .98rem !important;
  line-height: 1.05 !important;
  text-align: left !important;
}

.home-profile-mini .home-stat-card.stat-games {
  grid-column: 1 / -1 !important;
}

/* Override small 1080p rules from previous patch so stats do not look scattered. */
@media (min-width: 921px) and (max-height: 960px) {
  .home-profile-mini .home-stat-card,
  .home-stat-card {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    min-height: 50px !important;
    padding: 8px 11px !important;
  }

  .home-profile-mini .home-stat-card::before,
  .home-profile-mini .home-stat-icon {
    width: 25px !important;
    height: 25px !important;
  }

  .home-profile-mini .home-stat-card label {
    font-size: .54rem !important;
  }

  .home-profile-mini .home-stat-card strong {
    font-size: .92rem !important;
  }
}

/* Hall of Fame reworked around Season trophies */
.hall-season-tabs {
  justify-content: center !important;
}

.hall-legacy-period-tabs {
  display: none !important;
}

.season-hall-board,
.season-winners-board {
  display: grid;
  gap: 10px;
}

.season-hall-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 82px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(216,176,106,.22);
  background:
    radial-gradient(circle at 12% 10%, rgba(216,176,106,.16), transparent 34%),
    linear-gradient(135deg, rgba(49,37,25,.82), rgba(12,10,8,.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 36px rgba(0,0,0,.18);
}

.season-hall-hero span {
  display: block;
  margin-bottom: 3px;
  color: rgba(216,176,106,.92);
  font-size: .62rem;
  font-weight: 1000;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.season-hall-hero strong {
  display: block;
  color: var(--rq-warm-cream, #f3e8d5);
  font-size: clamp(1.35rem, 2.3vw, 2.05rem);
  line-height: 1.04;
}

.season-hall-hero small {
  display: block;
  max-width: 72ch;
  margin-top: 5px;
  color: rgba(243,232,213,.68);
  font-size: .76rem;
  line-height: 1.35;
}

.season-hall-info-btn {
  border: 1px solid rgba(216,176,106,.28);
  border-radius: 999px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(216,176,106,.92), rgba(154,111,70,.92));
  color: rgba(26,18,10,.96);
  font-weight: 1000;
  cursor: pointer;
  white-space: nowrap;
}

.season-hall-podium-wrap {
  padding: 14px;
  border: 1px solid rgba(216,176,106,.14);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(216,176,106,.12), transparent 36%),
    linear-gradient(180deg, rgba(18,14,10,.86), rgba(8,7,6,.94));
}

.season-hall-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
}

.season-hall-podium-card {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-height: 145px;
  padding: 13px 10px;
  border-radius: 20px;
  border: 1px solid rgba(216,176,106,.18);
  background: linear-gradient(180deg, rgba(58,43,28,.56), rgba(14,11,8,.92));
  text-align: center;
}

.season-hall-podium-card.place-1 {
  min-height: 166px;
  border-color: rgba(255,211,126,.42);
  box-shadow: 0 0 26px rgba(216,176,106,.10);
}

.season-hall-podium-card b {
  color: var(--rq-warm-gold, #d8b06a);
  font-size: .9rem;
}

.season-hall-podium-card strong {
  color: var(--rq-warm-cream, #f3e8d5);
  font-size: .95rem;
}

.season-hall-podium-card strong em,
.season-hall-row em {
  margin-left: 6px;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(216,176,106,.18);
  color: var(--rq-warm-gold, #d8b06a);
  font-size: .48rem;
  font-style: normal;
  letter-spacing: .1em;
}

.season-hall-podium-card span {
  color: rgba(243,232,213,.86);
  font-size: .8rem;
  font-weight: 900;
}

.season-hall-podium-card small {
  color: rgba(243,232,213,.58);
  font-size: .68rem;
}

.season-podium-avatar {
  width: 58px;
  height: 58px;
  border-radius: 18px;
}

.season-hall-table,
.season-winners-list {
  display: grid;
  gap: 7px;
}

.season-hall-row,
.season-winner-row {
  display: grid;
  grid-template-columns: 52px 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 11px;
  border-radius: 16px;
  border: 1px solid rgba(216,176,106,.13);
  background: linear-gradient(180deg, rgba(45,34,24,.58), rgba(12,10,8,.88));
}

.season-hall-row.is-you,
.season-winner-row.is-you {
  border-color: rgba(216,176,106,.42);
  box-shadow: 0 0 20px rgba(216,176,106,.08);
}

.season-hall-row > strong,
.season-winner-row > strong {
  color: var(--rq-warm-gold, #d8b06a);
  font-size: .92rem;
}

.season-row-avatar {
  width: 38px;
  height: 38px;
  border-radius: 13px;
}

.season-hall-row span,
.season-winner-row span {
  color: var(--rq-warm-cream, #f3e8d5);
  font-weight: 950;
  min-width: 0;
}

.season-hall-row span small,
.season-winner-row span small {
  display: block;
  margin-top: 2px;
  color: rgba(243,232,213,.56);
  font-size: .64rem;
  font-weight: 750;
}

.season-hall-row b,
.season-winner-row b {
  display: grid;
  justify-items: end;
  color: var(--rq-warm-cream, #f3e8d5);
  font-size: .9rem;
}

.season-hall-row b small,
.season-winner-row b small {
  color: rgba(216,176,106,.72);
  font-size: .58rem;
  font-weight: 850;
}

.season-hall-myrank {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(216,176,106,.24);
  background: linear-gradient(135deg, rgba(69,50,30,.70), rgba(14,11,8,.94));
}

.season-hall-myrank > span {
  color: rgba(216,176,106,.88);
  font-size: .58rem;
  font-weight: 1000;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.season-hall-myrank > div {
  display: grid;
  grid-template-columns: auto 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.season-hall-myrank strong {
  color: var(--rq-warm-gold, #d8b06a);
  font-size: 1.25rem;
}

.season-my-avatar {
  width: 40px;
  height: 40px;
  border-radius: 13px;
}

.season-hall-myrank b {
  color: var(--rq-warm-cream, #f3e8d5);
  font-size: .95rem;
}

.season-hall-myrank b small {
  display: block;
  color: rgba(243,232,213,.62);
  font-size: .68rem;
}

.season-hall-empty,
.season-hall-small-empty {
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(216,176,106,.14);
  background: rgba(0,0,0,.24);
  color: rgba(243,232,213,.72);
  text-align: center;
}

@media (max-width: 760px) {
  .season-hall-hero {
    display: grid;
  }

  .season-hall-podium {
    grid-template-columns: 1fr;
  }

  .season-hall-row,
  .season-winner-row {
    grid-template-columns: 42px 36px minmax(0, 1fr);
  }

  .season-hall-row b,
  .season-winner-row b {
    grid-column: 3;
    justify-items: start;
  }
}


/* v7.0.241 Home Stat Clean Rewrite.
   The old Home stats had multiple historical pseudo-icons and padding rules stacked
   on top of each other. This final block neutralizes those leftovers and uses one
   real, consistent icon/label/value grid for every stat tile. */
.home-profile-mini {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 8px !important;
  align-items: stretch !important;
}

.home-profile-mini > .home-stat-card,
.home-profile-mini > .home-stat-card:nth-child(5),
.home-profile-mini > .home-stat-card.stat-best,
.home-profile-mini > .home-stat-card.stat-rank,
.home-profile-mini > .home-stat-card.stat-games {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  grid-template-rows: 15px 20px !important;
  align-items: center !important;
  justify-items: start !important;
  column-gap: 10px !important;
  row-gap: 2px !important;
  min-height: 54px !important;
  padding: 9px 12px !important;
  padding-left: 12px !important;
  text-align: left !important;
  overflow: hidden !important;
}

/* Kill old decorative circles/pseudo icons that caused the scattered look. */
.home-profile-mini > .home-stat-card::before,
.home-profile-mini > .home-stat-card::after,
.home-profile-mini > .home-stat-card.stat-best::before,
.home-profile-mini > .home-stat-card.stat-rank::before,
.home-profile-mini > .home-stat-card.stat-games::before,
.home-profile-mini > .home-stat-card.stat-best::after,
.home-profile-mini > .home-stat-card.stat-rank::after,
.home-profile-mini > .home-stat-card.stat-games::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

.home-profile-mini > .home-stat-card .home-stat-icon {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-self: center !important;
  align-self: center !important;
  object-fit: contain !important;
  opacity: .96 !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.28)) !important;
}

.home-profile-mini > .home-stat-card .home-stat-symbol {
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(216,176,106,.18) !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(238,211,145,.28), transparent 42%),
    linear-gradient(180deg, rgba(51,40,27,.74), rgba(16,13,10,.92)) !important;
  color: var(--rq-warm-gold, #d8b06a) !important;
  font-size: .82rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 6px 12px rgba(0,0,0,.18) !important;
}

.home-profile-mini > .home-stat-card label {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
  justify-self: start !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(216,176,106,.84) !important;
  font-size: .55rem !important;
  font-weight: 1000 !important;
  letter-spacing: .105em !important;
  line-height: 1 !important;
  text-align: left !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.home-profile-mini > .home-stat-card strong {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  justify-self: start !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--rq-warm-cream, #f3e8d5) !important;
  font-size: .98rem !important;
  font-weight: 1000 !important;
  letter-spacing: .015em !important;
  line-height: 1.05 !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.home-profile-mini > .home-stat-card.stat-games {
  grid-column: 1 / -1 !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
}

.home-profile-mini > .home-stat-card.stat-games strong {
  font-size: 1rem !important;
}

/* 1920x1080 / Chrome 100% balanced fit keeps the same alignment, only slightly tighter. */
@media (min-width: 921px) and (max-height: 960px) {
  .home-profile-mini {
    gap: 7px !important;
    margin-top: 7px !important;
  }

  .home-profile-mini > .home-stat-card,
  .home-profile-mini > .home-stat-card:nth-child(5),
  .home-profile-mini > .home-stat-card.stat-best,
  .home-profile-mini > .home-stat-card.stat-rank,
  .home-profile-mini > .home-stat-card.stat-games {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    grid-template-rows: 14px 18px !important;
    min-height: 50px !important;
    padding: 8px 11px !important;
    padding-left: 11px !important;
  }

  .home-profile-mini > .home-stat-card .home-stat-icon {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
    max-width: 25px !important;
    max-height: 25px !important;
  }

  .home-profile-mini > .home-stat-card label {
    font-size: .52rem !important;
  }

  .home-profile-mini > .home-stat-card strong {
    font-size: .91rem !important;
  }

  .home-profile-mini > .home-stat-card.stat-games strong {
    font-size: .94rem !important;
  }
}


/* v7.0.242 Record Board Tile Balance.
   Make the World/Europe/Easy/Hard/Daily record tiles taller and more readable,
   while shrinking the tiny BEST / EUROPE BEST corner badge so it no longer fights the value. */
.mode-bests-record-board {
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.mode-bests-record-board .mode-bests-head {
  align-items: start !important;
  padding-bottom: 5px !important;
  margin-bottom: 6px !important;
}

.mode-bests-record-board .mode-bests-head span {
  line-height: 1 !important;
  transform: translateY(-1px) !important;
}

.mode-bests-record-board .mode-bests-head strong {
  line-height: 1 !important;
  transform: translateY(-2px) !important;
}

.mode-bests-record-board .mode-bests-head em {
  line-height: 1 !important;
  font-size: .50rem !important;
  letter-spacing: .08em !important;
  transform: translateY(-2px) !important;
  opacity: .78 !important;
}

.mode-bests-record-board .mode-bests-grid {
  align-items: stretch !important;
  gap: 7px !important;
  margin-top: 5px !important;
}

.mode-bests-record-board .mode-record-tile,
.mode-bests-grid div {
  position: relative !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  align-content: start !important;
  min-height: 58px !important;
  padding: 8px 9px 7px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.mode-bests-record-board .mode-record-tile span,
.mode-bests-grid div span {
  display: block !important;
  line-height: 1 !important;
  margin: 0 0 4px !important;
  font-size: .58rem !important;
  letter-spacing: .035em !important;
}

.mode-bests-record-board .mode-record-tile strong,
.mode-bests-grid div strong {
  display: block !important;
  align-self: start !important;
  line-height: .96 !important;
  margin: 0 0 3px !important;
  font-size: .88rem !important;
  letter-spacing: .01em !important;
}

.mode-bests-record-board .mode-record-tile small,
.mode-bests-grid div small {
  display: block !important;
  align-self: end !important;
  line-height: 1 !important;
  margin: 0 !important;
  font-size: .53rem !important;
  opacity: .74 !important;
}

/* The small top-right BEST / EUROPE BEST chip. */
.mode-bests-record-board .mode-record-tile.is-best::after,
.mode-bests-grid div.is-best::after {
  right: 7px !important;
  top: 6px !important;
  max-width: 54px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255, 226, 160, .86) !important;
  font-size: .42rem !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
  text-align: right !important;
  white-space: normal !important;
}

/* Leave room for the tiny badge on the best tile without pushing the score down. */
.mode-bests-record-board .mode-record-tile.is-best,
.mode-bests-grid div.is-best {
  padding-right: 42px !important;
}

/* 1920x1080 Chrome compact mode: still readable, not tiny. */
@media (min-width: 921px) and (max-height: 960px) {
  .mode-bests-record-board {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    gap: 7px !important;
  }

  .mode-bests-record-board .mode-bests-head {
    padding-bottom: 4px !important;
    margin-bottom: 5px !important;
  }

  .mode-bests-record-board .mode-bests-head strong {
    font-size: .94rem !important;
  }

  .mode-bests-record-board .mode-bests-head em {
    font-size: .48rem !important;
  }

  .mode-bests-record-board .mode-record-tile,
  .mode-bests-grid div {
    min-height: 54px !important;
    padding: 7px 8px 7px !important;
  }

  .mode-bests-record-board .mode-record-tile.is-best,
  .mode-bests-grid div.is-best {
    padding-right: 40px !important;
  }

  .mode-bests-record-board .mode-record-tile strong,
  .mode-bests-grid div strong {
    font-size: .84rem !important;
  }

  .mode-bests-record-board .mode-record-tile small,
  .mode-bests-grid div small {
    font-size: .51rem !important;
  }

  .mode-bests-record-board .mode-record-tile.is-best::after,
  .mode-bests-grid div.is-best::after {
    top: 6px !important;
    right: 6px !important;
    max-width: 50px !important;
    font-size: .39rem !important;
  }
}


/* v7.0.243 Record Board Larger Cards.
   Make record tiles taller, pull tile content closer to the top,
   and make the top-right BEST / EUROPE BEST label much smaller and higher. */
.mode-bests-record-board {
  padding-top: 10px !important;
  padding-bottom: 13px !important;
  gap: 5px !important;
}

.mode-bests-record-board .mode-bests-head {
  padding-bottom: 2px !important;
  margin-bottom: 2px !important;
  min-height: 20px !important;
  align-items: start !important;
}

.mode-bests-record-board .mode-bests-head span {
  transform: translateY(-3px) !important;
  line-height: .95 !important;
}

.mode-bests-record-board .mode-bests-head strong {
  transform: translateY(-4px) !important;
  line-height: .92 !important;
}

.mode-bests-record-board .mode-bests-head em {
  transform: translateY(-5px) !important;
  font-size: .42rem !important;
  line-height: .9 !important;
  letter-spacing: .055em !important;
  opacity: .76 !important;
}

.mode-bests-record-board .mode-bests-grid {
  gap: 7px !important;
  margin-top: 1px !important;
  align-items: stretch !important;
}

.mode-bests-record-board .mode-record-tile,
.mode-bests-grid div {
  min-height: 70px !important;
  display: grid !important;
  grid-template-rows: auto auto 1fr !important;
  align-content: start !important;
  align-items: start !important;
  padding: 8px 9px 8px !important;
  border-radius: 13px !important;
}

.mode-bests-record-board .mode-record-tile span,
.mode-bests-grid div span {
  align-self: start !important;
  margin: 0 0 5px !important;
  line-height: .95 !important;
  font-size: .58rem !important;
}

.mode-bests-record-board .mode-record-tile strong,
.mode-bests-grid div strong {
  align-self: start !important;
  margin: 0 0 5px !important;
  line-height: .94 !important;
  font-size: .94rem !important;
}

.mode-bests-record-board .mode-record-tile small,
.mode-bests-grid div small {
  align-self: start !important;
  margin: 0 !important;
  line-height: 1 !important;
  font-size: .54rem !important;
}

/* Kill old chunky badge look completely and replace it with a tiny text mark. */
.mode-bests-record-board .mode-record-tile.is-best::after,
.mode-bests-grid div.is-best::after {
  top: 4px !important;
  right: 6px !important;
  max-width: 42px !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255, 226, 160, .78) !important;
  font-size: .31rem !important;
  font-weight: 1000 !important;
  line-height: .88 !important;
  letter-spacing: .035em !important;
  text-align: right !important;
  white-space: normal !important;
  transform: translateY(-1px) !important;
  opacity: .86 !important;
}

/* The winning tile needs only a little right padding now, because the badge is tiny. */
.mode-bests-record-board .mode-record-tile.is-best,
.mode-bests-grid div.is-best {
  padding-right: 24px !important;
}

/* On 1920x1080 Chrome 100%, keep them taller than before but still fit. */
@media (min-width: 921px) and (max-height: 960px) {
  .mode-bests-record-board {
    padding-top: 9px !important;
    padding-bottom: 11px !important;
    gap: 4px !important;
  }

  .mode-bests-record-board .mode-bests-head {
    padding-bottom: 1px !important;
    margin-bottom: 1px !important;
  }

  .mode-bests-record-board .mode-bests-head strong {
    transform: translateY(-4px) !important;
    font-size: .90rem !important;
  }

  .mode-bests-record-board .mode-bests-head em {
    transform: translateY(-5px) !important;
    font-size: .38rem !important;
  }

  .mode-bests-record-board .mode-bests-grid {
    margin-top: 0 !important;
    gap: 6px !important;
  }

  .mode-bests-record-board .mode-record-tile,
  .mode-bests-grid div {
    min-height: 64px !important;
    padding: 7px 8px 7px !important;
  }

  .mode-bests-record-board .mode-record-tile span,
  .mode-bests-grid div span {
    margin-bottom: 4px !important;
    font-size: .54rem !important;
  }

  .mode-bests-record-board .mode-record-tile strong,
  .mode-bests-grid div strong {
    margin-bottom: 4px !important;
    font-size: .88rem !important;
  }

  .mode-bests-record-board .mode-record-tile small,
  .mode-bests-grid div small {
    font-size: .51rem !important;
  }

  .mode-bests-record-board .mode-record-tile.is-best::after,
  .mode-bests-grid div.is-best::after {
    top: 4px !important;
    right: 5px !important;
    max-width: 38px !important;
    font-size: .29rem !important;
    line-height: .86 !important;
  }

  .mode-bests-record-board .mode-record-tile.is-best,
  .mode-bests-grid div.is-best {
    padding-right: 22px !important;
  }
}


/* v7.0.244 Home Header Breathing Room.
   Move the top Home logo/banner + Live Radio Geography Game kicker + tagline
   slightly downward so it is not glued to the top artwork. */
body:not(.is-playing) .start-screen {
  padding-top: clamp(22px, 3.2vh, 42px) !important;
  gap: 8px !important;
}

body:not(.is-playing) .main-brand-lockup {
  margin-top: 8px !important;
  margin-bottom: 3px !important;
}

body:not(.is-playing) .main-menu-kicker {
  margin-top: 5px !important;
}

body:not(.is-playing) .start-screen .tagline {
  margin-top: 5px !important;
  margin-bottom: 11px !important;
}

/* Standard 1920x1080 Chrome 100% still gets more breathing room,
   but stays compact enough to avoid menu scroll. */
@media (min-width: 921px) and (max-height: 960px) {
  body:not(.is-playing) .start-screen {
    padding-top: clamp(18px, 2.55vh, 30px) !important;
    gap: 6px !important;
  }

  body:not(.is-playing) .main-brand-lockup {
    margin-top: 6px !important;
    margin-bottom: 2px !important;
  }

  body:not(.is-playing) .main-menu-kicker {
    margin-top: 4px !important;
  }

  body:not(.is-playing) .start-screen .tagline {
    margin-top: 4px !important;
    margin-bottom: 9px !important;
  }
}

/* Real browser fullscreen can breathe a little more. */
@media (min-width: 921px) and (min-height: 961px) and (max-height: 1120px) {
  body:not(.is-playing) .start-screen {
    padding-top: clamp(28px, 3.4vh, 48px) !important;
  }

  body:not(.is-playing) .main-brand-lockup {
    margin-top: 10px !important;
  }

  body:not(.is-playing) .start-screen .tagline {
    margin-bottom: 12px !important;
  }
}

/* Mobile keeps the existing compact feeling, only tiny breathing room. */
@media (max-width: 760px) {
  body:not(.is-playing) .start-screen {
    padding-top: 16px !important;
  }

  body:not(.is-playing) .main-brand-lockup {
    margin-top: 3px !important;
  }

  body:not(.is-playing) .start-screen .tagline {
    margin-top: 3px !important;
    margin-bottom: 7px !important;
  }
}


/* v7.0.245 Home Logo Lift.
   Move only the top RadioQuest logo/banner slightly upward.
   Keep the Live Radio Geography Game kicker and tagline breathing room from v7.0.244. */
body:not(.is-playing) .main-brand-lockup {
  transform: translateY(-8px) !important;
  margin-bottom: -5px !important;
}

body:not(.is-playing) .main-brand-logo {
  transform: translateY(-2px) !important;
}

/* 1920x1080 / Chrome 100% */
@media (min-width: 921px) and (max-height: 960px) {
  body:not(.is-playing) .main-brand-lockup {
    transform: translateY(-10px) !important;
    margin-bottom: -7px !important;
  }

  body:not(.is-playing) .main-brand-logo {
    transform: translateY(-2px) !important;
  }
}

/* Real browser fullscreen has a little more room, but keep the logo closer to the top. */
@media (min-width: 921px) and (min-height: 961px) and (max-height: 1120px) {
  body:not(.is-playing) .main-brand-lockup {
    transform: translateY(-9px) !important;
    margin-bottom: -6px !important;
  }
}

/* Mobile: tiny lift only. */
@media (max-width: 760px) {
  body:not(.is-playing) .main-brand-lockup {
    transform: translateY(-4px) !important;
    margin-bottom: -2px !important;
  }

  body:not(.is-playing) .main-brand-logo {
    transform: translateY(-1px) !important;
  }
}


/* v7.0.246 Home Kicker + Tagline Drop.
   Move ONLY the Live Radio Geography Game kicker and the Tune into real stations
   tagline downward. Do not move the top RadioQuest logo/banner. */
body:not(.is-playing) .main-menu-kicker {
  transform: translateY(8px) !important;
  margin-top: 8px !important;
  margin-bottom: 6px !important;
}

body:not(.is-playing) .start-screen .tagline {
  transform: translateY(8px) !important;
  margin-top: 8px !important;
  margin-bottom: 18px !important;
}

/* Keep the main content from being pushed too far down: visually drop only those two text rows. */
body:not(.is-playing) .start-card.start-card-v12 {
  margin-top: 2px !important;
}

/* 1920x1080 / Chrome 100% */
@media (min-width: 921px) and (max-height: 960px) {
  body:not(.is-playing) .main-menu-kicker {
    transform: translateY(7px) !important;
    margin-top: 7px !important;
    margin-bottom: 5px !important;
  }

  body:not(.is-playing) .start-screen .tagline {
    transform: translateY(7px) !important;
    margin-top: 7px !important;
    margin-bottom: 15px !important;
  }

  body:not(.is-playing) .start-card.start-card-v12 {
    margin-top: 0 !important;
  }
}

/* Real browser fullscreen can move the text a touch lower. */
@media (min-width: 921px) and (min-height: 961px) and (max-height: 1120px) {
  body:not(.is-playing) .main-menu-kicker {
    transform: translateY(10px) !important;
    margin-top: 10px !important;
    margin-bottom: 7px !important;
  }

  body:not(.is-playing) .start-screen .tagline {
    transform: translateY(10px) !important;
    margin-top: 10px !important;
    margin-bottom: 19px !important;
  }
}

/* Mobile: small drop only. */
@media (max-width: 760px) {
  body:not(.is-playing) .main-menu-kicker {
    transform: translateY(4px) !important;
    margin-top: 5px !important;
    margin-bottom: 4px !important;
  }

  body:not(.is-playing) .start-screen .tagline {
    transform: translateY(4px) !important;
    margin-top: 5px !important;
    margin-bottom: 10px !important;
  }
}


/* v7.0.247 Home Kicker Vertical-Only Drop.
   v7.0.246 used transform on the kicker/tagline, which can override older centering transforms.
   This patch moves ONLY those two text rows downward using vertical spacing, with no horizontal movement. */
body:not(.is-playing) .main-menu-kicker {
  transform: none !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: 8px !important;
  margin-top: 8px !important;
  margin-bottom: 14px !important;
}

body:not(.is-playing) .start-screen .tagline {
  transform: none !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: 8px !important;
  margin-top: 8px !important;
  margin-bottom: 20px !important;
}

/* Keep the logo/banner exactly where v7.0.245 placed it. */
body:not(.is-playing) .main-brand-lockup {
  /* no horizontal or vertical correction here */
}

/* 1920x1080 / Chrome 100% */
@media (min-width: 921px) and (max-height: 960px) {
  body:not(.is-playing) .main-menu-kicker {
    transform: none !important;
    top: 7px !important;
    margin-top: 7px !important;
    margin-bottom: 12px !important;
  }

  body:not(.is-playing) .start-screen .tagline {
    transform: none !important;
    top: 7px !important;
    margin-top: 7px !important;
    margin-bottom: 17px !important;
  }
}

/* Real browser fullscreen */
@media (min-width: 921px) and (min-height: 961px) and (max-height: 1120px) {
  body:not(.is-playing) .main-menu-kicker {
    transform: none !important;
    top: 10px !important;
    margin-top: 10px !important;
    margin-bottom: 15px !important;
  }

  body:not(.is-playing) .start-screen .tagline {
    transform: none !important;
    top: 10px !important;
    margin-top: 10px !important;
    margin-bottom: 22px !important;
  }
}

/* Mobile */
@media (max-width: 760px) {
  body:not(.is-playing) .main-menu-kicker {
    transform: none !important;
    top: 4px !important;
    margin-top: 5px !important;
    margin-bottom: 8px !important;
  }

  body:not(.is-playing) .start-screen .tagline {
    transform: none !important;
    top: 4px !important;
    margin-top: 5px !important;
    margin-bottom: 12px !important;
  }
}


/* v7.0.248 Home Header Stack.
   Keep the RadioQuest logo/banner where it is.
   Move the Live Radio Geography Game kicker and tagline down together,
   centered, with the tagline closer to the main menu. */
body:not(.is-playing) .main-menu-kicker {
  position: relative !important;
  inset: auto !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  display: inline-flex !important;
  margin-top: 16px !important;
  margin-bottom: 8px !important;
  align-self: center !important;
}

body:not(.is-playing) .start-screen .tagline {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  display: block !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  text-align: center !important;
  align-self: center !important;
}

/* Pull the game menu a touch closer to the lowered tagline without moving the logo. */
body:not(.is-playing) .start-card.start-card-v12 {
  margin-top: -4px !important;
}

/* 1920x1080 / Chrome 100% */
@media (min-width: 921px) and (max-height: 960px) {
  body:not(.is-playing) .main-menu-kicker {
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-top: 14px !important;
    margin-bottom: 7px !important;
  }

  body:not(.is-playing) .start-screen .tagline {
    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 21px !important;
  }

  body:not(.is-playing) .start-card.start-card-v12 {
    margin-top: -5px !important;
  }
}

/* Real browser fullscreen can have slightly more spacing. */
@media (min-width: 921px) and (min-height: 961px) and (max-height: 1120px) {
  body:not(.is-playing) .main-menu-kicker {
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-top: 18px !important;
    margin-bottom: 9px !important;
  }

  body:not(.is-playing) .start-screen .tagline {
    margin-bottom: 26px !important;
  }
}

/* Mobile: keep centered and compact. */
@media (max-width: 760px) {
  body:not(.is-playing) .main-menu-kicker {
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-top: 10px !important;
    margin-bottom: 6px !important;
  }

  body:not(.is-playing) .start-screen .tagline {
    margin-bottom: 14px !important;
  }

  body:not(.is-playing) .start-card.start-card-v12 {
    margin-top: 0 !important;
  }
}


/* v7.0.249 Home Header Kicker Center Fix.
   Clean final override for the header stack:
   - keep the RadioQuest logo/banner where it is
   - center Live Radio Geography Game under the logo, no horizontal drift
   - place the Tune into real stations tagline below it, closer to the game menu */
body:not(.is-playing) .main-brand-lockup {
  position: relative !important;
  display: block !important;
  width: fit-content !important;
  max-width: min(680px, calc(100% - 28px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-bottom: 46px !important;
  text-align: center !important;
}

body:not(.is-playing) .main-brand-logo {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body:not(.is-playing) .main-menu-kicker {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 14px !important;
  transform: translateX(-50%) !important;
  display: inline-flex !important;
  width: max-content !important;
  max-width: calc(100vw - 36px) !important;
  margin: 0 !important;
  white-space: nowrap !important;
  align-self: auto !important;
  justify-self: auto !important;
}

body:not(.is-playing) .start-screen .tagline {
  position: static !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  display: block !important;
  width: min(100%, 720px) !important;
  margin: -2px auto 19px !important;
  text-align: center !important;
  align-self: center !important;
}

body:not(.is-playing) .start-card.start-card-v12 {
  margin-top: 0 !important;
}

/* 1920x1080 / Chrome 100% */
@media (min-width: 921px) and (max-height: 960px) {
  body:not(.is-playing) .main-brand-lockup {
    padding-bottom: 43px !important;
  }

  body:not(.is-playing) .main-menu-kicker {
    bottom: 13px !important;
  }

  body:not(.is-playing) .start-screen .tagline {
    margin: -2px auto 17px !important;
  }
}

/* Real browser fullscreen */
@media (min-width: 921px) and (min-height: 961px) and (max-height: 1120px) {
  body:not(.is-playing) .main-brand-lockup {
    padding-bottom: 50px !important;
  }

  body:not(.is-playing) .main-menu-kicker {
    bottom: 16px !important;
  }

  body:not(.is-playing) .start-screen .tagline {
    margin: -1px auto 22px !important;
  }
}

/* Mobile */
@media (max-width: 760px) {
  body:not(.is-playing) .main-brand-lockup {
    padding-bottom: 34px !important;
  }

  body:not(.is-playing) .main-menu-kicker {
    bottom: 9px !important;
    max-width: calc(100vw - 24px) !important;
  }

  body:not(.is-playing) .start-screen .tagline {
    margin: -1px auto 12px !important;
  }
}


/* v7.0.250 Collection Pager + Home Frame Lift.
   1) Keep Character Shelf pagination inside the Collection dialog.
   2) Lift/enlarge the main Home frame upward by roughly 35px without moving the header stack. */

/* Home: make the large framed window use more vertical room upward. */
body:not(.is-playing) .start-card.start-card-v12 {
  margin-top: -35px !important;
}

body:not(.is-playing) .start-card.start-card-v12,
body:not(.is-playing) .home-profile-card.home-profile-card-3d,
body:not(.is-playing) .inventory-launch-card.inventory-menu-card.action-hub-card {
  min-height: calc(100% + 0px);
}

/* Give the inside frame a little extra vertical room, but keep the existing 1080p fit. */
@media (min-width: 921px) {
  body:not(.is-playing) .start-card.start-card-v12 {
    transform: translateY(-35px) !important;
    margin-bottom: -35px !important;
  }
}

/* 1920x1080 / Chrome 100%: slightly safer lift so footer is not crushed. */
@media (min-width: 921px) and (max-height: 960px) {
  body:not(.is-playing) .start-card.start-card-v12 {
    transform: translateY(-32px) !important;
    margin-top: -32px !important;
    margin-bottom: -32px !important;
  }
}

/* Mobile should not lift the main frame aggressively. */
@media (max-width: 760px) {
  body:not(.is-playing) .start-card.start-card-v12 {
    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* Collection / Character Shelf: reserve bottom room for pager inside the dialog. */
.inventory-dialog .inventory-dialog-shell {
  overflow: hidden !important;
}

.inventory-dialog-body {
  overflow: hidden !important;
}

.inventory-dialog-body .inventory-panel.inventory-showcase-rework,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet.inventory-showcase-rework {
  max-height: min(78vh, 720px) !important;
  overflow: hidden !important;
  padding-bottom: 14px !important;
}

.inventory-showcase-layout {
  min-height: 0 !important;
  overflow: hidden !important;
}

/* The right shelf column becomes a grid with pager pinned inside the bottom. */
.inventory-grid-stage {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  overflow: hidden !important;
  padding-bottom: 2px !important;
}

/* Shrink only the grid area if needed, never the pager. */
.inventory-grid-stage .inventory-page-grid,
.inventory-showcase-rework .inventory-page-grid {
  min-height: 0 !important;
  max-height: min(50vh, 430px) !important;
  overflow: hidden !important;
}

/* Pager sits visibly inside the panel, not half below it. */
.inventory-pagebar,
.inventory-showcase-rework .inventory-pagebar,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-pagebar {
  position: relative !important;
  z-index: 15 !important;
  align-self: end !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 7px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 4px 8px 0 !important;
  transform: translateY(-3px) !important;
  overflow: visible !important;
}

.inventory-page-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 24px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  color: rgba(243, 232, 213, .70) !important;
  background: rgba(15, 11, 8, .52) !important;
  border: 1px solid rgba(222, 198, 160, .13) !important;
  font-size: .62rem !important;
  font-weight: 950 !important;
  letter-spacing: .04em !important;
  white-space: nowrap !important;
}

.inventory-page-btn,
.inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-page-btn {
  min-width: 30px !important;
  height: 25px !important;
  flex: 0 0 auto !important;
}

/* 1080p collection safety: a bit more compact grid so pager never clips. */
@media (min-width: 761px) and (max-height: 920px) {
  .inventory-dialog-body .inventory-panel.inventory-showcase-rework,
  .inventory-panel.inventory-panel-paged.inventory-panel-cabinet.inventory-showcase-rework {
    max-height: 76vh !important;
    padding-bottom: 12px !important;
  }

  .inventory-showcase-rework .inventory-page-grid {
    max-height: min(47vh, 392px) !important;
  }

  .inventory-pagebar,
  .inventory-showcase-rework .inventory-pagebar,
  .inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-pagebar {
    min-height: 32px !important;
    padding-top: 2px !important;
    transform: translateY(-5px) !important;
  }
}

/* Mobile collection: keep pager visible and wrap if needed. */
@media (max-width: 760px) {
  .inventory-dialog-body .inventory-panel.inventory-showcase-rework,
  .inventory-panel.inventory-panel-paged.inventory-panel-cabinet.inventory-showcase-rework {
    max-height: 78vh !important;
    overflow: hidden !important;
  }

  .inventory-grid-stage {
    gap: 6px !important;
  }

  .inventory-pagebar,
  .inventory-showcase-rework .inventory-pagebar,
  .inventory-panel.inventory-panel-paged.inventory-panel-cabinet .inventory-pagebar {
    flex-wrap: wrap !important;
    min-height: 34px !important;
    transform: translateY(-2px) !important;
  }
}


/* v7.0.251 Season League Premium UI.
   Full visual polish for the Season modal only. Trophy / reward backend logic unchanged. */

.season-dialog.rq-dialog {
  padding: 0 !important;
}

.season-dialog::backdrop {
  background:
    radial-gradient(circle at 50% 18%, rgba(216,176,106,.16), transparent 30%),
    rgba(0,0,0,.72) !important;
  backdrop-filter: blur(8px) saturate(.95) !important;
}

.season-dialog-shell-premium,
.season-dialog-shell {
  width: min(1080px, calc(100vw - 34px)) !important;
  max-height: min(860px, calc(100vh - 34px)) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
  border-radius: 30px !important;
  border: 1px solid rgba(222,198,160,.23) !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(216,176,106,.16), transparent 34%),
    radial-gradient(circle at 86% 12%, rgba(34,151,140,.11), transparent 32%),
    linear-gradient(145deg, rgba(39,30,22,.98), rgba(12,10,8,.98)) !important;
  box-shadow:
    0 36px 90px rgba(0,0,0,.54),
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 0 60px rgba(216,176,106,.045) !important;
}

.season-dialog-head-premium,
.season-dialog-head {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) 42px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 18px 20px !important;
  border-bottom: 1px solid rgba(222,198,160,.13) !important;
  background:
    linear-gradient(90deg, rgba(216,176,106,.10), transparent 42%, rgba(34,151,140,.07)),
    rgba(0,0,0,.18) !important;
}

.season-dialog-titlemark {
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 16px !important;
  color: rgba(255,224,153,.96) !important;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,224,153,.28), transparent 45%),
    linear-gradient(180deg, rgba(80,58,32,.72), rgba(21,15,10,.82)) !important;
  border: 1px solid rgba(216,176,106,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.season-dialog-head span {
  display: block !important;
  margin-bottom: 3px !important;
  color: rgba(216,176,106,.92) !important;
  font-size: .62rem !important;
  font-weight: 1000 !important;
  letter-spacing: .17em !important;
  text-transform: uppercase !important;
}

.season-dialog-head strong {
  display: block !important;
  color: rgba(246,237,219,.98) !important;
  font-size: clamp(1.35rem, 2vw, 1.88rem) !important;
  line-height: 1 !important;
}

.season-dialog-head small {
  display: block !important;
  margin-top: 5px !important;
  color: rgba(246,237,219,.58) !important;
  font-size: .76rem !important;
}

.season-close-btn,
.season-dialog .dialog-close-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  color: rgba(246,237,219,.88) !important;
  background: rgba(22,15,11,.58) !important;
  border: 1px solid rgba(222,198,160,.16) !important;
}

.season-dialog-body-premium,
.season-dialog-body {
  min-height: 0 !important;
  overflow: auto !important;
  padding: 16px !important;
  scrollbar-width: thin !important;
}

.season-premium-hero {
  min-height: 150px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 260px !important;
  align-items: stretch !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}

.season-premium-hero-copy,
.season-premium-rankplate,
.season-trophy-card,
.season-stats-card,
.season-info-card,
.season-top-card-premium {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  border: 1px solid rgba(222,198,160,.16) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(216,176,106,.12), transparent 34%),
    linear-gradient(155deg, rgba(49,37,26,.78), rgba(12,10,8,.93)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 18px 42px rgba(0,0,0,.20) !important;
}

.season-premium-hero-copy {
  display: grid !important;
  align-content: center !important;
  padding: 24px 28px !important;
  background:
    linear-gradient(90deg, rgba(216,176,106,.16), rgba(216,176,106,.04) 44%, rgba(34,151,140,.10)),
    radial-gradient(circle at 88% 20%, rgba(34,151,140,.13), transparent 32%),
    linear-gradient(155deg, rgba(50,37,24,.92), rgba(12,10,8,.96)) !important;
}

.season-eyebrow,
.season-premium-hero-copy span,
.season-trophy-card > span,
.season-stats-card > span,
.season-info-card > span,
.season-top-head span {
  color: rgba(216,176,106,.92) !important;
  font-size: .62rem !important;
  font-weight: 1000 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

.season-premium-hero-copy strong {
  margin-top: 6px !important;
  color: rgba(246,237,219,.98) !important;
  font-size: clamp(2.05rem, 4.2vw, 3.25rem) !important;
  line-height: .95 !important;
  letter-spacing: -.045em !important;
}

.season-premium-hero-copy small {
  margin-top: 10px !important;
  color: rgba(246,237,219,.68) !important;
  font-size: .88rem !important;
}

.season-premium-rankplate {
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  text-align: center !important;
  padding: 20px !important;
  border-color: rgba(216,176,106,.28) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,224,153,.20), transparent 42%),
    linear-gradient(180deg, rgba(74,54,31,.78), rgba(16,12,8,.94)) !important;
}

.season-premium-rankplate span {
  color: rgba(216,176,106,.88) !important;
  font-size: .58rem !important;
  font-weight: 1000 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
}

.season-premium-rankplate b {
  margin-top: 8px !important;
  color: rgba(246,237,219,.98) !important;
  font-size: clamp(1.65rem, 3vw, 2.35rem) !important;
  line-height: 1 !important;
}

.season-premium-rankplate em {
  margin-top: 8px !important;
  color: rgba(255,218,142,.92) !important;
  font-style: normal !important;
  font-weight: 950 !important;
  font-size: .88rem !important;
}

.season-premium-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr) !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}

.season-trophy-card,
.season-stats-card {
  padding: 17px !important;
}

.season-trophy-meter {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 12px 0 10px !important;
}

.season-trophy-meter strong {
  color: rgba(246,237,219,.98) !important;
  font-size: clamp(1.6rem, 3vw, 2.35rem) !important;
  line-height: 1 !important;
}

.season-trophy-meter small {
  color: rgba(246,237,219,.60) !important;
  font-size: .74rem !important;
  text-align: right !important;
}

.season-progress-track-premium,
.season-progress-track {
  height: 11px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(0,0,0,.36) !important;
  border: 1px solid rgba(222,198,160,.10) !important;
}

.season-progress-track-premium i,
.season-progress-track i {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background:
    linear-gradient(90deg, rgba(219,174,89,.95), rgba(255,224,153,.96), rgba(34,151,140,.72)) !important;
  box-shadow: 0 0 20px rgba(216,176,106,.24) !important;
}

.season-progress-foot-premium {
  margin-top: 9px !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 10px !important;
  color: rgba(246,237,219,.56) !important;
  font-size: .66rem !important;
  font-weight: 850 !important;
}

.season-road-milestones {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin-top: 14px !important;
}

.season-road-step {
  display: grid !important;
  gap: 4px !important;
  justify-items: center !important;
  text-align: center !important;
  padding: 8px 5px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(222,198,160,.10) !important;
  background: rgba(0,0,0,.20) !important;
  opacity: .58 !important;
}

.season-road-step.reached {
  opacity: 1 !important;
  border-color: rgba(216,176,106,.24) !important;
  background: rgba(216,176,106,.08) !important;
}

.season-road-step i {
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: rgba(246,237,219,.28) !important;
}

.season-road-step.reached i {
  background: rgba(255,218,142,.98) !important;
  box-shadow: 0 0 14px rgba(255,218,142,.34) !important;
}

.season-road-step strong {
  color: rgba(246,237,219,.86) !important;
  font-size: .54rem !important;
  line-height: 1 !important;
}

.season-road-step span {
  color: rgba(246,237,219,.44) !important;
  font-size: .48rem !important;
  font-weight: 850 !important;
}

.season-stat-stack {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  margin-top: 13px !important;
}

.season-stat-stack div {
  min-height: 70px !important;
  display: grid !important;
  align-content: center !important;
  gap: 4px !important;
  padding: 12px !important;
  border-radius: 17px !important;
  border: 1px solid rgba(222,198,160,.11) !important;
  background: rgba(0,0,0,.23) !important;
}

.season-stat-stack strong {
  color: rgba(246,237,219,.98) !important;
  font-size: 1.1rem !important;
}

.season-stat-stack small {
  color: rgba(216,176,106,.70) !important;
  font-size: .58rem !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.season-dialog-grid-premium {
  display: grid !important;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}

.season-info-card {
  padding: 17px !important;
}

.season-rules-card-premium ul {
  display: grid !important;
  gap: 8px !important;
  margin: 13px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.season-rules-card-premium li {
  display: grid !important;
  grid-template-columns: 118px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 42px !important;
  padding: 9px 10px !important;
  border-radius: 15px !important;
  background: rgba(0,0,0,.22) !important;
  border: 1px solid rgba(222,198,160,.10) !important;
}

.season-rules-card-premium li b {
  color: rgba(255,218,142,.92) !important;
  font-size: .72rem !important;
}

.season-rules-card-premium li em {
  color: rgba(246,237,219,.62) !important;
  font-size: .70rem !important;
  font-style: normal !important;
  line-height: 1.28 !important;
}

.season-rewards-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 13px !important;
}

.season-reward-row-premium,
.season-reward-row {
  min-height: 58px !important;
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 2px 9px !important;
  padding: 9px 10px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(222,198,160,.12) !important;
  background: rgba(0,0,0,.24) !important;
}

.season-reward-row-premium strong,
.season-reward-row strong {
  grid-row: 1 / span 2 !important;
  color: rgba(255,218,142,.96) !important;
  font-size: .82rem !important;
}

.season-reward-row-premium span,
.season-reward-row span {
  color: rgba(246,237,219,.98) !important;
  font-weight: 950 !important;
  font-size: .82rem !important;
}

.season-reward-row-premium small,
.season-reward-row small {
  color: rgba(246,237,219,.50) !important;
  font-size: .58rem !important;
  font-weight: 800 !important;
}

.season-top-card-premium {
  padding: 17px !important;
}

.season-top-head {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 11px !important;
}

.season-top-head b {
  color: rgba(246,237,219,.80) !important;
  font-size: .8rem !important;
}

.season-top-list {
  display: grid !important;
  gap: 7px !important;
}

.season-top-row-premium,
.season-top-row {
  min-height: 52px !important;
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 11px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(222,198,160,.10) !important;
  background: rgba(0,0,0,.22) !important;
}

.season-top-row-premium.top-1 {
  border-color: rgba(255,218,142,.36) !important;
  background: linear-gradient(90deg, rgba(216,176,106,.15), rgba(0,0,0,.22)) !important;
}

.season-top-row b {
  color: rgba(255,218,142,.96) !important;
  font-size: .86rem !important;
}

.season-top-row span {
  color: rgba(246,237,219,.95) !important;
  font-weight: 950 !important;
}

.season-top-row span small {
  display: block !important;
  margin-top: 2px !important;
  color: rgba(246,237,219,.48) !important;
  font-size: .62rem !important;
  font-weight: 800 !important;
}

.season-top-row em {
  color: rgba(216,176,106,.86) !important;
  font-style: normal !important;
  font-weight: 950 !important;
  font-size: .78rem !important;
  white-space: nowrap !important;
}

.season-empty-list-premium,
.season-empty-list {
  min-height: 72px !important;
  display: grid !important;
  place-items: center !important;
  padding: 16px !important;
  border-radius: 17px !important;
  border: 1px dashed rgba(222,198,160,.17) !important;
  color: rgba(246,237,219,.58) !important;
  background: rgba(0,0,0,.18) !important;
  text-align: center !important;
  font-weight: 850 !important;
}

@media (max-width: 860px) {
  .season-premium-hero,
  .season-premium-grid,
  .season-dialog-grid-premium {
    grid-template-columns: 1fr !important;
  }

  .season-road-milestones {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .season-rewards-list {
    grid-template-columns: 1fr !important;
  }

  .season-top-row {
    grid-template-columns: 46px minmax(0, 1fr) !important;
  }

  .season-top-row em {
    grid-column: 2 !important;
    white-space: normal !important;
  }
}

@media (max-width: 560px) {
  .season-dialog-shell {
    width: calc(100vw - 18px) !important;
    max-height: calc(100vh - 18px) !important;
    border-radius: 22px !important;
  }

  .season-dialog-head {
    grid-template-columns: 38px minmax(0, 1fr) 36px !important;
    padding: 13px !important;
  }

  .season-dialog-titlemark {
    width: 36px !important;
    height: 36px !important;
  }

  .season-dialog-body {
    padding: 10px !important;
  }

  .season-premium-hero-copy,
  .season-premium-rankplate,
  .season-trophy-card,
  .season-stats-card,
  .season-info-card,
  .season-top-card-premium {
    border-radius: 19px !important;
    padding: 14px !important;
  }

  .season-rules-card-premium li {
    grid-template-columns: 1fr !important;
  }

  .season-stat-stack {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* v7.0.252 Season Compact Modal Fit.
   v7.0.251 looked good but was too large and caused horizontal/vertical page scroll.
   This brings Season closer to Missions size: no sideways scroll, compact panels, inner-only vertical scroll. */
body.season-open {
  overflow: hidden !important;
}

.season-dialog.rq-dialog,
#seasonDialog {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.season-dialog-shell-premium,
.season-dialog-shell {
  width: min(900px, calc(100vw - 40px)) !important;
  max-width: calc(100vw - 40px) !important;
  height: auto !important;
  max-height: min(820px, calc(100dvh - 42px)) !important;
  margin: 21px auto !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.season-dialog-head-premium,
.season-dialog-head {
  grid-template-columns: 38px minmax(0, 1fr) 36px !important;
  gap: 10px !important;
  padding: 13px 15px !important;
}

.season-dialog-titlemark {
  width: 36px !important;
  height: 36px !important;
  border-radius: 13px !important;
}

.season-dialog-head strong {
  font-size: clamp(1.12rem, 1.7vw, 1.45rem) !important;
}

.season-dialog-head small {
  margin-top: 3px !important;
  font-size: .67rem !important;
}

.season-close-btn,
.season-dialog .dialog-close-btn {
  width: 34px !important;
  height: 34px !important;
}

.season-dialog-body-premium,
.season-dialog-body {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  max-height: calc(min(820px, calc(100dvh - 42px)) - 78px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 12px !important;
  box-sizing: border-box !important;
}

/* Compact hero: readable, not massive. */
.season-premium-hero {
  min-height: 0 !important;
  grid-template-columns: minmax(0, 1fr) 210px !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.season-premium-hero-copy,
.season-premium-rankplate {
  min-height: 105px !important;
  padding: 16px 18px !important;
  border-radius: 19px !important;
}

.season-premium-hero-copy strong {
  font-size: clamp(1.55rem, 3vw, 2.25rem) !important;
  line-height: .98 !important;
}

.season-premium-hero-copy small {
  margin-top: 6px !important;
  font-size: .74rem !important;
}

.season-premium-rankplate b {
  margin-top: 5px !important;
  font-size: clamp(1.28rem, 2.2vw, 1.72rem) !important;
}

.season-premium-rankplate em {
  margin-top: 5px !important;
  font-size: .72rem !important;
}

/* One-column content prevents right-side overflow and feels like Missions. */
.season-premium-grid,
.season-dialog-grid-premium {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.season-trophy-card,
.season-stats-card,
.season-info-card,
.season-top-card-premium {
  padding: 13px !important;
  border-radius: 19px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.season-trophy-meter {
  margin: 8px 0 8px !important;
}

.season-trophy-meter strong {
  font-size: clamp(1.25rem, 2.4vw, 1.78rem) !important;
}

.season-trophy-meter small {
  font-size: .65rem !important;
}

.season-progress-track-premium,
.season-progress-track {
  height: 8px !important;
}

.season-progress-foot-premium {
  margin-top: 6px !important;
  font-size: .59rem !important;
}

.season-road-milestones {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 5px !important;
  margin-top: 10px !important;
}

.season-road-step {
  padding: 6px 4px !important;
  border-radius: 11px !important;
}

.season-road-step i {
  width: 8px !important;
  height: 8px !important;
}

.season-road-step strong {
  font-size: .47rem !important;
}

.season-road-step span {
  font-size: .42rem !important;
}

/* Season stats becomes a compact horizontal row. */
.season-stat-stack {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
  margin-top: 9px !important;
}

.season-stat-stack div {
  min-height: 54px !important;
  padding: 8px 9px !important;
  border-radius: 13px !important;
}

.season-stat-stack strong {
  font-size: .92rem !important;
}

.season-stat-stack small {
  font-size: .47rem !important;
}

/* Rules/rewards compact cards. */
.season-rules-card-premium ul {
  gap: 6px !important;
  margin-top: 9px !important;
}

.season-rules-card-premium li {
  grid-template-columns: 98px minmax(0, 1fr) !important;
  min-height: 34px !important;
  padding: 7px 8px !important;
  border-radius: 12px !important;
}

.season-rules-card-premium li b {
  font-size: .64rem !important;
}

.season-rules-card-premium li em {
  font-size: .61rem !important;
  line-height: 1.18 !important;
}

.season-rewards-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin-top: 9px !important;
}

.season-reward-row-premium,
.season-reward-row {
  min-height: 44px !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  padding: 7px 8px !important;
  border-radius: 12px !important;
}

.season-reward-row-premium strong,
.season-reward-row strong {
  font-size: .70rem !important;
}

.season-reward-row-premium span,
.season-reward-row span {
  font-size: .70rem !important;
}

.season-reward-row-premium small,
.season-reward-row small {
  font-size: .50rem !important;
}

.season-top-head {
  margin-bottom: 8px !important;
}

.season-top-row-premium,
.season-top-row {
  min-height: 42px !important;
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  gap: 8px !important;
  padding: 7px 9px !important;
  border-radius: 13px !important;
}

.season-top-row span small {
  font-size: .54rem !important;
}

.season-top-row em {
  font-size: .66rem !important;
}

/* 1920x1080 Chrome standard. */
@media (min-width: 921px) and (max-height: 960px) {
  .season-dialog-shell-premium,
  .season-dialog-shell {
    width: min(860px, calc(100vw - 42px)) !important;
    max-height: calc(100dvh - 46px) !important;
    margin: 23px auto !important;
  }

  .season-dialog-body-premium,
  .season-dialog-body {
    max-height: calc(100dvh - 124px) !important;
  }

  .season-premium-hero-copy,
  .season-premium-rankplate {
    min-height: 96px !important;
  }
}

/* Mobile/tablet: no horizontal overflow, simple stack. */
@media (max-width: 860px) {
  .season-dialog-shell-premium,
  .season-dialog-shell {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    max-height: calc(100dvh - 18px) !important;
    margin: 9px auto !important;
    border-radius: 20px !important;
  }

  .season-premium-hero {
    grid-template-columns: 1fr !important;
  }

  .season-stat-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .season-road-milestones {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .season-rewards-list {
    grid-template-columns: 1fr !important;
  }

  .season-rules-card-premium li {
    grid-template-columns: 1fr !important;
  }

  .season-top-row {
    grid-template-columns: 38px minmax(0, 1fr) !important;
  }

  .season-top-row em {
    grid-column: 2 !important;
    white-space: normal !important;
  }
}


/* v7.0.253 Season Tabs No-Scroll UI.
   New logic: keep Season readable by splitting content into tabs.
   No horizontal scroll, no vertical scroll on 1920x1080 Chrome window. */
body.season-open {
  overflow: hidden !important;
}

.season-dialog.rq-dialog,
#seasonDialog {
  width: 100vw !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.season-dialog-shell-premium,
.season-dialog-shell {
  width: min(860px, calc(100vw - 42px)) !important;
  max-width: calc(100vw - 42px) !important;
  height: min(690px, calc(100dvh - 46px)) !important;
  max-height: calc(100dvh - 46px) !important;
  margin: 23px auto !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.season-dialog-head-premium,
.season-dialog-head {
  min-height: 68px !important;
  grid-template-columns: 38px minmax(0, 1fr) 34px !important;
  gap: 10px !important;
  padding: 12px 15px !important;
}

.season-dialog-titlemark {
  width: 35px !important;
  height: 35px !important;
}

.season-dialog-head span {
  font-size: .56rem !important;
}

.season-dialog-head strong {
  font-size: 1.20rem !important;
}

.season-dialog-head small {
  margin-top: 3px !important;
  font-size: .64rem !important;
}

.season-close-btn,
.season-dialog .dialog-close-btn {
  width: 32px !important;
  height: 32px !important;
}

.season-dialog-body-premium,
.season-dialog-body {
  height: 100% !important;
  max-height: none !important;
  overflow: hidden !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 10px !important;
}

/* Compact fixed top hero */
.season-tabs-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 190px !important;
  align-items: stretch !important;
  gap: 10px !important;
  min-height: 96px !important;
}

.season-tabs-hero > div,
.season-tabs-rank {
  border-radius: 18px !important;
  border: 1px solid rgba(222,198,160,.16) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(216,176,106,.12), transparent 32%),
    linear-gradient(155deg, rgba(49,37,26,.78), rgba(12,10,8,.93)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 12px 28px rgba(0,0,0,.16) !important;
}

.season-tabs-hero > div:first-child {
  display: grid !important;
  align-content: center !important;
  padding: 15px 18px !important;
}

.season-tabs-hero span {
  color: rgba(216,176,106,.92) !important;
  font-size: .57rem !important;
  font-weight: 1000 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

.season-tabs-hero strong {
  margin-top: 4px !important;
  color: rgba(246,237,219,.98) !important;
  font-size: clamp(1.45rem, 3vw, 2.05rem) !important;
  line-height: .98 !important;
}

.season-tabs-hero small {
  margin-top: 5px !important;
  color: rgba(246,237,219,.62) !important;
  font-size: .68rem !important;
}

.season-tabs-rank {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  text-align: center !important;
  padding: 12px !important;
  border-color: rgba(216,176,106,.28) !important;
}

.season-tabs-rank span {
  font-size: .62rem !important;
}

.season-tabs-rank b {
  color: rgba(246,237,219,.98) !important;
  font-size: 1.52rem !important;
  line-height: 1 !important;
}

.season-tabs-rank small {
  margin-top: 2px !important;
  color: rgba(216,176,106,.76) !important;
  font-size: .58rem !important;
  font-weight: 900 !important;
}

/* Tabs */
.season-tabbar {
  height: 38px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
  padding: 5px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(222,198,160,.13) !important;
  background: rgba(0,0,0,.23) !important;
}

.season-tabbar button {
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: rgba(246,237,219,.58) !important;
  font-size: .63rem !important;
  font-weight: 1000 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

.season-tabbar button.active {
  color: rgba(25,18,10,.96) !important;
  background: linear-gradient(180deg, rgba(245,214,154,.98), rgba(197,154,97,.92)) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.16) !important;
}

.season-tab-panels {
  min-height: 0 !important;
  overflow: hidden !important;
  display: grid !important;
}

.season-tab-panel {
  min-width: 0 !important;
  min-height: 0 !important;
  display: none !important;
  overflow: hidden !important;
}

.season-tab-panel.active {
  display: grid !important;
  gap: 10px !important;
}

/* Overview fits into one view, readable size */
.season-tab-panel[data-season-panel="overview"].active {
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr) !important;
}

.season-tab-card,
.season-trophy-card,
.season-stats-card,
.season-info-card,
.season-top-card-premium {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  padding: 13px !important;
}

.season-trophy-meter {
  margin: 8px 0 8px !important;
}

.season-trophy-meter strong {
  font-size: 1.65rem !important;
}

.season-trophy-meter small {
  max-width: 220px !important;
  font-size: .64rem !important;
}

.season-progress-track,
.season-progress-track-premium {
  height: 8px !important;
}

.season-progress-foot-premium {
  margin-top: 7px !important;
  font-size: .58rem !important;
}

.season-road-milestones {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin-top: 10px !important;
}

.season-road-step {
  min-height: 44px !important;
  padding: 6px 4px !important;
  border-radius: 11px !important;
}

.season-road-step:nth-child(n+5) {
  display: none !important;
}

.season-road-step strong {
  font-size: .48rem !important;
}

.season-road-step span {
  font-size: .42rem !important;
}

.season-stat-stack-tabs,
.season-stat-stack {
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

.season-stat-stack div {
  min-height: 68px !important;
  padding: 10px !important;
}

.season-stat-stack strong {
  font-size: 1.05rem !important;
}

.season-stat-stack small {
  font-size: .50rem !important;
}

/* Rules panel */
.season-tab-panel[data-season-panel="rules"].active,
.season-tab-panel[data-season-panel="rewards"].active,
.season-tab-panel[data-season-panel="leaderboard"].active {
  grid-template-columns: 1fr !important;
}

.season-rules-tabs-card ul {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

.season-rules-tabs-card li {
  grid-template-columns: 1fr !important;
  min-height: 74px !important;
  align-content: center !important;
  padding: 10px !important;
}

.season-rules-tabs-card li b {
  font-size: .74rem !important;
}

.season-rules-tabs-card li em {
  margin-top: 3px !important;
  font-size: .65rem !important;
}

/* Rewards panel */
.season-rewards-list-tabs,
.season-rewards-list {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

.season-reward-row-premium,
.season-reward-row {
  min-height: 66px !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto !important;
  justify-items: start !important;
  gap: 2px !important;
  padding: 10px !important;
}

.season-reward-row-premium strong,
.season-reward-row strong {
  grid-row: auto !important;
  font-size: .76rem !important;
}

.season-reward-row-premium span,
.season-reward-row span {
  font-size: .78rem !important;
}

.season-reward-row-premium small,
.season-reward-row small {
  font-size: .55rem !important;
}

/* Leaderboard panel */
.season-top-card-premium {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.season-top-head {
  margin-bottom: 8px !important;
}

.season-top-list-tabs,
.season-top-list {
  display: grid !important;
  gap: 7px !important;
  overflow: hidden !important;
}

.season-top-row-premium,
.season-top-row {
  min-height: 42px !important;
  grid-template-columns: 46px minmax(0, 1fr) auto !important;
  gap: 8px !important;
  padding: 7px 9px !important;
}

.season-top-row:nth-child(n+7) {
  display: none !important;
}

.season-top-row span small {
  font-size: .55rem !important;
}

.season-top-row em {
  font-size: .66rem !important;
}

/* 1920x1080 Chrome not fullscreen: target no scroll. */
@media (min-width: 921px) and (max-height: 960px) {
  .season-dialog-shell {
    width: min(820px, calc(100vw - 44px)) !important;
    height: min(640px, calc(100dvh - 46px)) !important;
    margin: 23px auto !important;
  }

  .season-dialog-body {
    padding: 10px !important;
    gap: 8px !important;
  }

  .season-tabs-hero {
    min-height: 88px !important;
  }

  .season-tabbar {
    height: 36px !important;
  }

  .season-trophy-meter strong {
    font-size: 1.45rem !important;
  }

  .season-road-step {
    min-height: 40px !important;
  }

  .season-stat-stack div {
    min-height: 60px !important;
  }

  .season-rules-tabs-card li {
    min-height: 64px !important;
  }

  .season-reward-row {
    min-height: 58px !important;
  }
}

/* Small screens: still tabbed, allow internal scroll only there if absolutely needed. */
@media (max-width: 760px) {
  .season-dialog-shell {
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px) !important;
    margin: 8px auto !important;
  }

  .season-dialog-body {
    overflow-y: auto !important;
  }

  .season-tabs-hero,
  .season-tab-panel[data-season-panel="overview"].active {
    grid-template-columns: 1fr !important;
  }

  .season-rewards-list-tabs,
  .season-rules-tabs-card ul {
    grid-template-columns: 1fr !important;
  }

  .season-tabbar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    height: auto !important;
  }

  .season-tabs-rank {
    min-height: 86px !important;
  }
}


/* v7.0.254 Season Overview Compact Rework.
   Overview no longer uses two large empty columns. It becomes one premium compact card:
   Trophy Road full width + stat chips below. No modal scrolling required on 1920x1080 Chrome. */

.season-dialog-shell {
  width: min(835px, calc(100vw - 44px)) !important;
  height: min(610px, calc(100dvh - 52px)) !important;
  max-height: calc(100dvh - 52px) !important;
  margin: 26px auto !important;
}

.season-dialog-body {
  padding: 10px !important;
  gap: 8px !important;
}

.season-tabs-hero {
  min-height: 82px !important;
  grid-template-columns: minmax(0, 1fr) 170px !important;
  gap: 9px !important;
}

.season-tabs-hero > div:first-child {
  padding: 12px 15px !important;
}

.season-tabs-hero strong {
  font-size: clamp(1.28rem, 2.4vw, 1.72rem) !important;
}

.season-tabs-rank {
  padding: 10px !important;
}

.season-tabs-rank b {
  font-size: 1.32rem !important;
}

.season-tabbar {
  height: 34px !important;
  padding: 4px !important;
  gap: 5px !important;
}

.season-tabbar button {
  font-size: .58rem !important;
}

.season-tab-panel[data-season-panel="overview"].active,
.season-overview-compact-panel.active {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

.season-overview-card,
.season-tab-card.season-overview-card {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto auto !important;
  align-content: start !important;
  gap: 10px !important;
  padding: 15px !important;
  border-radius: 19px !important;
  overflow: hidden !important;
}

.season-overview-card-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(180px, auto) !important;
  gap: 14px !important;
  align-items: end !important;
}

.season-overview-card-head span {
  display: block !important;
  color: rgba(216,176,106,.92) !important;
  font-size: .58rem !important;
  font-weight: 1000 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

.season-overview-card-head strong {
  display: block !important;
  margin-top: 4px !important;
  color: rgba(246,237,219,.98) !important;
  font-size: 1.42rem !important;
  line-height: 1 !important;
}

.season-overview-next {
  display: grid !important;
  justify-items: end !important;
  gap: 3px !important;
  text-align: right !important;
}

.season-overview-next b {
  color: rgba(255,218,142,.96) !important;
  font-size: 1.28rem !important;
  line-height: 1 !important;
}

.season-overview-next small {
  max-width: 260px !important;
  color: rgba(246,237,219,.58) !important;
  font-size: .62rem !important;
  line-height: 1.15 !important;
}

.season-overview-track {
  height: 10px !important;
}

.season-overview-meta {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  color: rgba(246,237,219,.54) !important;
  font-size: .58rem !important;
  font-weight: 900 !important;
}

.season-overview-card .season-road-milestones {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
  margin-top: 0 !important;
}

.season-overview-card .season-road-step {
  display: grid !important;
  min-height: 48px !important;
  padding: 7px 5px !important;
  border-radius: 12px !important;
}

.season-overview-card .season-road-step:nth-child(n+5) {
  display: none !important;
}

.season-overview-stat-chips {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 7px !important;
  margin-top: 2px !important;
}

.season-overview-stat-chips div {
  min-height: 55px !important;
  display: grid !important;
  align-content: center !important;
  gap: 3px !important;
  padding: 8px 7px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(222,198,160,.11) !important;
  background: rgba(0,0,0,.23) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.season-overview-stat-chips strong {
  color: rgba(246,237,219,.98) !important;
  font-size: .92rem !important;
  line-height: 1 !important;
}

.season-overview-stat-chips small {
  color: rgba(216,176,106,.70) !important;
  font-size: .47rem !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

/* Rules / Rewards / Leaderboard also get a bit more controlled height. */
.season-rules-tabs-card ul {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.season-rules-tabs-card li {
  min-height: 66px !important;
}

.season-rewards-list-tabs,
.season-rewards-list {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.season-reward-row-premium,
.season-reward-row {
  min-height: 60px !important;
}

.season-top-row:nth-child(n+7) {
  display: none !important;
}

/* 1920x1080 Chrome window target: absolutely no vertical scroll. */
@media (min-width: 921px) and (max-height: 960px) {
  .season-dialog-shell {
    width: min(810px, calc(100vw - 46px)) !important;
    height: min(590px, calc(100dvh - 54px)) !important;
    max-height: calc(100dvh - 54px) !important;
    margin: 27px auto !important;
  }

  .season-tabs-hero {
    min-height: 76px !important;
  }

  .season-tabbar {
    height: 32px !important;
  }

  .season-overview-card {
    gap: 8px !important;
    padding: 13px !important;
  }

  .season-overview-card-head strong {
    font-size: 1.28rem !important;
  }

  .season-overview-next b {
    font-size: 1.12rem !important;
  }

  .season-overview-next small {
    font-size: .56rem !important;
  }

  .season-overview-track {
    height: 8px !important;
  }

  .season-overview-card .season-road-step {
    min-height: 42px !important;
    padding: 6px 4px !important;
  }

  .season-overview-stat-chips div {
    min-height: 47px !important;
    padding: 6px !important;
  }

  .season-overview-stat-chips strong {
    font-size: .82rem !important;
  }

  .season-overview-stat-chips small {
    font-size: .42rem !important;
  }

  .season-rules-tabs-card li {
    min-height: 58px !important;
  }

  .season-reward-row {
    min-height: 52px !important;
  }
}

@media (max-width: 760px) {
  .season-dialog-shell {
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px) !important;
    margin: 8px auto !important;
  }

  .season-tabs-hero,
  .season-overview-card-head {
    grid-template-columns: 1fr !important;
  }

  .season-overview-next {
    justify-items: start !important;
    text-align: left !important;
  }

  .season-overview-stat-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .season-rewards-list-tabs,
  .season-rewards-list,
  .season-rules-tabs-card ul {
    grid-template-columns: 1fr !important;
  }

  .season-dialog-body {
    overflow-y: auto !important;
  }
}


/* v7.0.255 Season Scale Up.
   The tabbed no-scroll logic stays, but the whole Season League UI is enlarged.
   Goal: more readable PvP Trophy Season menu, no horizontal scroll, no vertical scroll on 1920x1080 Chrome. */

body.season-open {
  overflow: hidden !important;
}

/* Bigger overall modal, but still inside normal 1920x1080 browser viewport. */
.season-dialog.rq-dialog,
#seasonDialog {
  width: 100vw !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.season-dialog-shell-premium,
.season-dialog-shell {
  width: min(960px, calc(100vw - 46px)) !important;
  height: min(705px, calc(100dvh - 54px)) !important;
  max-height: calc(100dvh - 54px) !important;
  margin: 27px auto !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

/* Header made readable again. */
.season-dialog-head-premium,
.season-dialog-head {
  min-height: 82px !important;
  grid-template-columns: 48px minmax(0, 1fr) 40px !important;
  gap: 13px !important;
  padding: 16px 20px !important;
}

.season-dialog-titlemark {
  width: 44px !important;
  height: 44px !important;
  border-radius: 16px !important;
  font-size: 1.05rem !important;
}

.season-dialog-head span {
  font-size: .64rem !important;
  letter-spacing: .17em !important;
}

.season-dialog-head strong {
  font-size: clamp(1.42rem, 2vw, 1.82rem) !important;
  line-height: 1 !important;
}

.season-dialog-head small {
  margin-top: 5px !important;
  font-size: .76rem !important;
}

.season-close-btn,
.season-dialog .dialog-close-btn {
  width: 38px !important;
  height: 38px !important;
}

/* Body is fixed-size, no scroll; panels are tabbed so each view fits. */
.season-dialog-body-premium,
.season-dialog-body {
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow: hidden !important;
  padding: 15px !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

/* Bigger top Season summary. */
.season-tabs-hero {
  min-height: 112px !important;
  grid-template-columns: minmax(0, 1fr) 215px !important;
  gap: 12px !important;
}

.season-tabs-hero > div:first-child {
  padding: 18px 22px !important;
  border-radius: 22px !important;
}

.season-tabs-hero span {
  font-size: .65rem !important;
  letter-spacing: .17em !important;
}

.season-tabs-hero strong {
  margin-top: 5px !important;
  font-size: clamp(1.9rem, 3.2vw, 2.65rem) !important;
  line-height: .95 !important;
}

.season-tabs-hero small {
  margin-top: 7px !important;
  font-size: .80rem !important;
}

.season-tabs-rank {
  border-radius: 22px !important;
  padding: 16px !important;
}

.season-tabs-rank span {
  font-size: .70rem !important;
}

.season-tabs-rank b {
  margin-top: 5px !important;
  font-size: 1.80rem !important;
}

.season-tabs-rank small {
  font-size: .66rem !important;
}

/* Larger tab buttons, still compact. */
.season-tabbar {
  height: 43px !important;
  padding: 5px !important;
  gap: 8px !important;
  border-radius: 18px !important;
}

.season-tabbar button {
  font-size: .68rem !important;
  letter-spacing: .075em !important;
  border-radius: 13px !important;
}

/* Panel area should hug content more and not look like a huge empty debug board. */
.season-tab-panels {
  min-height: 0 !important;
  overflow: hidden !important;
  align-content: start !important;
}

.season-tab-panel.active {
  align-content: start !important;
  gap: 12px !important;
  overflow: hidden !important;
}

/* Overview: one readable premium card, not tiny. */
.season-tab-panel[data-season-panel="overview"].active,
.season-overview-compact-panel.active {
  grid-template-columns: 1fr !important;
}

.season-overview-card,
.season-tab-card.season-overview-card {
  height: auto !important;
  min-height: 330px !important;
  max-height: 100% !important;
  align-content: start !important;
  gap: 13px !important;
  padding: 20px !important;
  border-radius: 23px !important;
}

/* Bigger title row inside Overview. */
.season-overview-card-head {
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto) !important;
  align-items: end !important;
  gap: 18px !important;
}

.season-overview-card-head span {
  font-size: .66rem !important;
  letter-spacing: .17em !important;
}

.season-overview-card-head strong {
  margin-top: 5px !important;
  font-size: 1.82rem !important;
}

.season-overview-next b {
  font-size: 1.72rem !important;
}

.season-overview-next small {
  max-width: 320px !important;
  font-size: .72rem !important;
  line-height: 1.18 !important;
}

/* Progress bar and meta more visible. */
.season-overview-track,
.season-progress-track,
.season-progress-track-premium {
  height: 12px !important;
}

.season-overview-meta {
  font-size: .66rem !important;
  margin-top: -2px !important;
}

/* Milestones larger, but only 4 visible to avoid crowding. */
.season-overview-card .season-road-milestones,
.season-road-milestones {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 9px !important;
  margin-top: 1px !important;
}

.season-overview-card .season-road-step,
.season-road-step {
  min-height: 62px !important;
  padding: 9px 7px !important;
  border-radius: 15px !important;
}

.season-overview-card .season-road-step:nth-child(n+5),
.season-road-step:nth-child(n+5) {
  display: none !important;
}

.season-road-step i {
  width: 11px !important;
  height: 11px !important;
}

.season-road-step strong {
  font-size: .60rem !important;
}

.season-road-step span {
  font-size: .50rem !important;
}

/* Stat chips are now real readable game chips. */
.season-overview-stat-chips {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 9px !important;
  margin-top: 2px !important;
}

.season-overview-stat-chips div {
  min-height: 70px !important;
  padding: 11px 8px !important;
  border-radius: 16px !important;
}

.season-overview-stat-chips strong {
  font-size: 1.10rem !important;
}

.season-overview-stat-chips small {
  margin-top: 2px !important;
  font-size: .52rem !important;
}

/* Rules: larger readable cards, still no scroll. */
.season-rules-tabs-card ul {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

.season-rules-tabs-card li {
  min-height: 82px !important;
  padding: 12px !important;
  border-radius: 16px !important;
}

.season-rules-tabs-card li b {
  font-size: .82rem !important;
}

.season-rules-tabs-card li em {
  margin-top: 4px !important;
  font-size: .70rem !important;
}

/* Rewards: bigger cards, capped visible set still fits. */
.season-rewards-list-tabs,
.season-rewards-list {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 9px !important;
  margin-top: 12px !important;
}

.season-reward-row-premium,
.season-reward-row {
  min-height: 76px !important;
  padding: 11px !important;
  border-radius: 15px !important;
}

.season-reward-row-premium strong,
.season-reward-row strong {
  font-size: .82rem !important;
}

.season-reward-row-premium span,
.season-reward-row span {
  font-size: .86rem !important;
}

.season-reward-row-premium small,
.season-reward-row small {
  font-size: .58rem !important;
}

/* Leaderboard: bigger rows. */
.season-top-head {
  margin-bottom: 10px !important;
}

.season-top-head b {
  font-size: .82rem !important;
}

.season-top-row-premium,
.season-top-row {
  min-height: 54px !important;
  grid-template-columns: 55px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  border-radius: 16px !important;
}

.season-top-row:nth-child(n+7) {
  display: none !important;
}

.season-top-row b {
  font-size: .92rem !important;
}

.season-top-row span {
  font-size: .88rem !important;
}

.season-top-row span small {
  font-size: .62rem !important;
}

.season-top-row em {
  font-size: .75rem !important;
}

/* 1920x1080 Chrome window: larger than v7.0.254, but still no scroll. */
@media (min-width: 921px) and (max-height: 960px) {
  .season-dialog-shell {
    width: min(930px, calc(100vw - 48px)) !important;
    height: min(670px, calc(100dvh - 56px)) !important;
    max-height: calc(100dvh - 56px) !important;
    margin: 28px auto !important;
  }

  .season-dialog-head {
    min-height: 78px !important;
    padding: 15px 19px !important;
  }

  .season-dialog-body {
    padding: 14px !important;
    gap: 11px !important;
  }

  .season-tabs-hero {
    min-height: 104px !important;
    grid-template-columns: minmax(0, 1fr) 205px !important;
  }

  .season-tabs-hero strong {
    font-size: clamp(1.72rem, 3vw, 2.32rem) !important;
  }

  .season-tabs-rank b {
    font-size: 1.62rem !important;
  }

  .season-tabbar {
    height: 40px !important;
  }

  .season-overview-card {
    min-height: 310px !important;
    gap: 11px !important;
    padding: 18px !important;
  }

  .season-overview-card-head strong {
    font-size: 1.60rem !important;
  }

  .season-overview-next b {
    font-size: 1.48rem !important;
  }

  .season-overview-track {
    height: 10px !important;
  }

  .season-overview-card .season-road-step {
    min-height: 56px !important;
  }

  .season-overview-stat-chips div {
    min-height: 62px !important;
  }

  .season-overview-stat-chips strong {
    font-size: 1rem !important;
  }

  .season-rules-tabs-card li {
    min-height: 74px !important;
  }

  .season-reward-row {
    min-height: 68px !important;
  }

  .season-top-row {
    min-height: 50px !important;
  }
}

/* Mobile remains stacked and scroll-safe. */
@media (max-width: 760px) {
  .season-dialog-shell {
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px) !important;
    margin: 8px auto !important;
  }

  .season-dialog-body {
    overflow-y: auto !important;
  }

  .season-tabs-hero,
  .season-overview-card-head {
    grid-template-columns: 1fr !important;
  }

  .season-overview-next {
    justify-items: start !important;
    text-align: left !important;
  }

  .season-overview-stat-chips,
  .season-rewards-list-tabs,
  .season-rewards-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .season-rules-tabs-card ul {
    grid-template-columns: 1fr !important;
  }
}


/* v7.0.256 Season Bigger Fit.
   Make Season League a bit wider and taller, and scale the inner content up too.
   Still targets no horizontal/vertical scroll on 1920x1080 Chrome window. */

.season-dialog-shell-premium,
.season-dialog-shell {
  width: min(1040px, calc(100vw - 48px)) !important;
  height: min(765px, calc(100dvh - 58px)) !important;
  max-height: calc(100dvh - 58px) !important;
  margin: 29px auto !important;
  border-radius: 30px !important;
}

/* Top title area can be more heroic now. */
.season-dialog-head-premium,
.season-dialog-head {
  min-height: 92px !important;
  grid-template-columns: 54px minmax(0, 1fr) 42px !important;
  gap: 14px !important;
  padding: 18px 22px !important;
}

.season-dialog-titlemark {
  width: 50px !important;
  height: 50px !important;
  border-radius: 18px !important;
  font-size: 1.15rem !important;
}

.season-dialog-head span {
  font-size: .68rem !important;
}

.season-dialog-head strong {
  font-size: clamp(1.60rem, 2.2vw, 2.05rem) !important;
}

.season-dialog-head small {
  font-size: .82rem !important;
}

/* More vertical room inside, but still a fixed no-scroll grid. */
.season-dialog-body-premium,
.season-dialog-body {
  padding: 17px !important;
  gap: 14px !important;
}

/* Bigger season summary row. */
.season-tabs-hero {
  min-height: 128px !important;
  grid-template-columns: minmax(0, 1fr) 245px !important;
  gap: 14px !important;
}

.season-tabs-hero > div:first-child {
  padding: 21px 25px !important;
  border-radius: 24px !important;
}

.season-tabs-hero span {
  font-size: .70rem !important;
}

.season-tabs-hero strong {
  font-size: clamp(2.15rem, 3.6vw, 2.95rem) !important;
}

.season-tabs-hero small {
  font-size: .86rem !important;
}

.season-tabs-rank {
  border-radius: 24px !important;
  padding: 18px !important;
}

.season-tabs-rank span {
  font-size: .75rem !important;
}

.season-tabs-rank b {
  font-size: 2.02rem !important;
}

.season-tabs-rank small {
  font-size: .72rem !important;
}

/* Tabs slightly larger. */
.season-tabbar {
  height: 48px !important;
  padding: 6px !important;
  gap: 9px !important;
  border-radius: 20px !important;
}

.season-tabbar button {
  font-size: .73rem !important;
  border-radius: 15px !important;
}

/* Overview card gets more presence. */
.season-overview-card,
.season-tab-card.season-overview-card {
  min-height: 365px !important;
  gap: 15px !important;
  padding: 23px !important;
  border-radius: 25px !important;
}

.season-overview-card-head {
  grid-template-columns: minmax(0, 1fr) minmax(260px, auto) !important;
}

.season-overview-card-head span {
  font-size: .70rem !important;
}

.season-overview-card-head strong {
  font-size: 2.05rem !important;
}

.season-overview-next b {
  font-size: 1.95rem !important;
}

.season-overview-next small {
  font-size: .78rem !important;
  max-width: 360px !important;
}

.season-overview-track,
.season-progress-track,
.season-progress-track-premium {
  height: 14px !important;
}

.season-overview-meta {
  font-size: .72rem !important;
}

/* Rank milestones readable and less tiny. */
.season-overview-card .season-road-milestones,
.season-road-milestones {
  gap: 11px !important;
}

.season-overview-card .season-road-step,
.season-road-step {
  min-height: 72px !important;
  padding: 11px 8px !important;
  border-radius: 17px !important;
}

.season-road-step i {
  width: 12px !important;
  height: 12px !important;
}

.season-road-step strong {
  font-size: .66rem !important;
}

.season-road-step span {
  font-size: .54rem !important;
}

/* Stat chips larger, but still fit one row. */
.season-overview-stat-chips {
  gap: 10px !important;
}

.season-overview-stat-chips div {
  min-height: 80px !important;
  padding: 13px 9px !important;
  border-radius: 18px !important;
}

.season-overview-stat-chips strong {
  font-size: 1.25rem !important;
}

.season-overview-stat-chips small {
  font-size: .56rem !important;
}

/* Other tabs use the larger canvas too. */
.season-rules-tabs-card li {
  min-height: 92px !important;
  padding: 14px !important;
  border-radius: 18px !important;
}

.season-rules-tabs-card li b {
  font-size: .90rem !important;
}

.season-rules-tabs-card li em {
  font-size: .76rem !important;
}

.season-reward-row-premium,
.season-reward-row {
  min-height: 86px !important;
  padding: 13px !important;
  border-radius: 17px !important;
}

.season-reward-row-premium strong,
.season-reward-row strong {
  font-size: .88rem !important;
}

.season-reward-row-premium span,
.season-reward-row span {
  font-size: .94rem !important;
}

.season-reward-row-premium small,
.season-reward-row small {
  font-size: .63rem !important;
}

.season-top-row-premium,
.season-top-row {
  min-height: 60px !important;
  grid-template-columns: 62px minmax(0, 1fr) auto !important;
  padding: 10px 14px !important;
}

.season-top-row b {
  font-size: 1rem !important;
}

.season-top-row span {
  font-size: .96rem !important;
}

.season-top-row span small {
  font-size: .66rem !important;
}

.season-top-row em {
  font-size: .82rem !important;
}

/* 1920x1080 Chrome standard window: maximize fit without scroll. */
@media (min-width: 921px) and (max-height: 960px) {
  .season-dialog-shell {
    width: min(1000px, calc(100vw - 52px)) !important;
    height: min(725px, calc(100dvh - 62px)) !important;
    max-height: calc(100dvh - 62px) !important;
    margin: 31px auto !important;
  }

  .season-dialog-head {
    min-height: 86px !important;
    padding: 17px 21px !important;
  }

  .season-dialog-titlemark {
    width: 46px !important;
    height: 46px !important;
  }

  .season-dialog-body {
    padding: 16px !important;
    gap: 13px !important;
  }

  .season-tabs-hero {
    min-height: 118px !important;
    grid-template-columns: minmax(0, 1fr) 232px !important;
  }

  .season-tabs-hero strong {
    font-size: clamp(1.95rem, 3.3vw, 2.70rem) !important;
  }

  .season-tabs-rank b {
    font-size: 1.86rem !important;
  }

  .season-tabbar {
    height: 45px !important;
  }

  .season-overview-card {
    min-height: 345px !important;
    gap: 13px !important;
    padding: 21px !important;
  }

  .season-overview-card-head strong {
    font-size: 1.88rem !important;
  }

  .season-overview-next b {
    font-size: 1.74rem !important;
  }

  .season-overview-track {
    height: 12px !important;
  }

  .season-overview-card .season-road-step {
    min-height: 66px !important;
  }

  .season-overview-stat-chips div {
    min-height: 72px !important;
  }

  .season-overview-stat-chips strong {
    font-size: 1.14rem !important;
  }

  .season-rules-tabs-card li {
    min-height: 84px !important;
  }

  .season-reward-row {
    min-height: 78px !important;
  }

  .season-top-row {
    min-height: 56px !important;
  }
}

/* Avoid overflow on narrower screens. */
@media (max-width: 980px) {
  .season-dialog-shell {
    width: calc(100vw - 32px) !important;
  }

  .season-overview-stat-chips {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .season-overview-stat-chips div {
    min-height: 62px !important;
  }
}

@media (max-width: 760px) {
  .season-dialog-shell {
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px) !important;
    margin: 8px auto !important;
  }

  .season-dialog-body {
    overflow-y: auto !important;
  }

  .season-tabs-hero,
  .season-overview-card-head {
    grid-template-columns: 1fr !important;
  }

  .season-overview-stat-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* v7.0.257 Season Match Collection Size.
   Match Season League modal scale with the Collection / Character Shelf modal.
   Same general footprint: wide premium frame, tall enough for content, no horizontal scroll. */

.season-dialog.rq-dialog,
#seasonDialog {
  width: 100vw !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Character Shelf style footprint. */
.season-dialog-shell-premium,
.season-dialog-shell {
  width: min(1100px, calc(100vw - 56px)) !important;
  height: min(760px, calc(100dvh - 70px)) !important;
  max-width: calc(100vw - 56px) !important;
  max-height: calc(100dvh - 70px) !important;
  margin: 35px auto !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  box-sizing: border-box !important;
}

/* Header closer to Collection: premium but not oversized. */
.season-dialog-head-premium,
.season-dialog-head {
  min-height: 84px !important;
  grid-template-columns: 48px minmax(0, 1fr) 40px !important;
  gap: 13px !important;
  padding: 16px 20px !important;
}

.season-dialog-titlemark {
  width: 44px !important;
  height: 44px !important;
  border-radius: 16px !important;
}

.season-dialog-head span {
  font-size: .65rem !important;
  letter-spacing: .17em !important;
}

.season-dialog-head strong {
  font-size: clamp(1.45rem, 2vw, 1.86rem) !important;
  line-height: 1 !important;
}

.season-dialog-head small {
  margin-top: 4px !important;
  font-size: .76rem !important;
}

/* Body fits collection-like height. No page scroll, no horizontal scroll. */
.season-dialog-body-premium,
.season-dialog-body {
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow: hidden !important;
  padding: 16px !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 13px !important;
  box-sizing: border-box !important;
}

/* Use the bigger width well: season summary row can breathe. */
.season-tabs-hero {
  min-height: 120px !important;
  grid-template-columns: minmax(0, 1fr) 240px !important;
  gap: 13px !important;
}

.season-tabs-hero > div:first-child,
.season-tabs-rank {
  border-radius: 22px !important;
}

.season-tabs-hero > div:first-child {
  padding: 19px 24px !important;
}

.season-tabs-hero span {
  font-size: .68rem !important;
}

.season-tabs-hero strong {
  font-size: clamp(2rem, 3.2vw, 2.75rem) !important;
  line-height: .96 !important;
}

.season-tabs-hero small {
  font-size: .82rem !important;
}

.season-tabs-rank {
  padding: 17px !important;
}

.season-tabs-rank span {
  font-size: .72rem !important;
}

.season-tabs-rank b {
  font-size: 1.92rem !important;
}

.season-tabs-rank small {
  font-size: .68rem !important;
}

/* Tabs match the stronger collection modal scale. */
.season-tabbar {
  height: 46px !important;
  padding: 6px !important;
  gap: 8px !important;
  border-radius: 18px !important;
}

.season-tabbar button {
  font-size: .70rem !important;
}

/* Overview uses collection-sized canvas without becoming empty. */
.season-overview-card,
.season-tab-card.season-overview-card {
  min-height: 350px !important;
  max-height: 100% !important;
  gap: 14px !important;
  padding: 22px !important;
  border-radius: 24px !important;
  align-content: start !important;
}

.season-overview-card-head {
  grid-template-columns: minmax(0, 1fr) minmax(250px, auto) !important;
  gap: 18px !important;
}

.season-overview-card-head span {
  font-size: .68rem !important;
}

.season-overview-card-head strong {
  font-size: 1.95rem !important;
}

.season-overview-next b {
  font-size: 1.82rem !important;
}

.season-overview-next small {
  max-width: 350px !important;
  font-size: .74rem !important;
}

.season-overview-track,
.season-progress-track,
.season-progress-track-premium {
  height: 13px !important;
}

.season-overview-meta {
  font-size: .68rem !important;
}

/* With Character Shelf width, 5 milestone cards look better than 4. */
.season-overview-card .season-road-milestones,
.season-road-milestones {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 9px !important;
  margin-top: 1px !important;
}

.season-overview-card .season-road-step,
.season-road-step {
  display: grid !important;
  min-height: 66px !important;
  padding: 10px 7px !important;
  border-radius: 16px !important;
}

.season-overview-card .season-road-step:nth-child(n+6),
.season-road-step:nth-child(n+6) {
  display: none !important;
}

.season-overview-card .season-road-step:nth-child(n+5),
.season-road-step:nth-child(n+5) {
  display: grid !important;
}

.season-road-step strong {
  font-size: .62rem !important;
}

.season-road-step span {
  font-size: .52rem !important;
}

/* Stat chips: still one row at collection width. */
.season-overview-stat-chips {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

.season-overview-stat-chips div {
  min-height: 72px !important;
  padding: 11px 8px !important;
  border-radius: 16px !important;
}

.season-overview-stat-chips strong {
  font-size: 1.16rem !important;
}

.season-overview-stat-chips small {
  font-size: .54rem !important;
}

/* Other tabs use the wider frame well. */
.season-rules-tabs-card ul {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.season-rules-tabs-card li {
  min-height: 100px !important;
  padding: 13px !important;
}

.season-rules-tabs-card li b {
  font-size: .86rem !important;
}

.season-rules-tabs-card li em {
  font-size: .72rem !important;
}

.season-rewards-list-tabs,
.season-rewards-list {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.season-reward-row-premium,
.season-reward-row {
  min-height: 82px !important;
  padding: 12px !important;
}

.season-top-row-premium,
.season-top-row {
  min-height: 58px !important;
  grid-template-columns: 62px minmax(0, 1fr) auto !important;
  padding: 10px 14px !important;
}

.season-top-row:nth-child(n+8) {
  display: none !important;
}

/* 1920x1080 Chrome standard: same scale, with safe vertical margin. */
@media (min-width: 921px) and (max-height: 960px) {
  .season-dialog-shell {
    width: min(1060px, calc(100vw - 58px)) !important;
    height: min(725px, calc(100dvh - 72px)) !important;
    max-height: calc(100dvh - 72px) !important;
    margin: 36px auto !important;
  }

  .season-dialog-head {
    min-height: 80px !important;
    padding: 15px 20px !important;
  }

  .season-dialog-body {
    padding: 15px !important;
    gap: 12px !important;
  }

  .season-tabs-hero {
    min-height: 112px !important;
    grid-template-columns: minmax(0, 1fr) 230px !important;
  }

  .season-tabs-hero strong {
    font-size: clamp(1.9rem, 3vw, 2.55rem) !important;
  }

  .season-tabs-rank b {
    font-size: 1.78rem !important;
  }

  .season-tabbar {
    height: 43px !important;
  }

  .season-overview-card {
    min-height: 332px !important;
    gap: 12px !important;
    padding: 20px !important;
  }

  .season-overview-card-head strong {
    font-size: 1.78rem !important;
  }

  .season-overview-next b {
    font-size: 1.64rem !important;
  }

  .season-overview-track {
    height: 12px !important;
  }

  .season-overview-card .season-road-step {
    min-height: 60px !important;
  }

  .season-overview-stat-chips div {
    min-height: 66px !important;
  }

  .season-rules-tabs-card li {
    min-height: 88px !important;
  }

  .season-reward-row {
    min-height: 74px !important;
  }
}

/* If width is not enough, fall back gracefully. */
@media (max-width: 980px) {
  .season-dialog-shell {
    width: calc(100vw - 32px) !important;
  }

  .season-overview-card .season-road-milestones,
  .season-road-milestones {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .season-overview-card .season-road-step:nth-child(n+5),
  .season-road-step:nth-child(n+5) {
    display: none !important;
  }

  .season-overview-stat-chips {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .season-rules-tabs-card ul {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .season-dialog-shell {
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    margin: 8px auto !important;
  }

  .season-dialog-body {
    overflow-y: auto !important;
  }

  .season-tabs-hero,
  .season-overview-card-head {
    grid-template-columns: 1fr !important;
  }

  .season-overview-stat-chips,
  .season-rewards-list-tabs,
  .season-rewards-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .season-rules-tabs-card ul {
    grid-template-columns: 1fr !important;
  }
}


/* v7.0.258 Season Exact Collection Footprint.
   Uses the actual current Collection / Character Shelf modal sizing:
   .inventory-dialog = width min(940px, calc(100vw - 38px)), max-height min(760px, calc(100dvh - 36px))
   .inventory-dialog .inventory-dialog-shell = width min(96vw, 980px), padding 16px, centered header.
   This overrides the previous larger Season guesses. */

.season-dialog.rq-dialog,
#seasonDialog {
  width: min(940px, calc(100vw - 38px)) !important;
  max-width: min(940px, calc(100vw - 38px)) !important;
  height: auto !important;
  max-height: min(760px, calc(100dvh - 36px)) !important;
  margin: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 30px !important;
  color: var(--text) !important;
  background: transparent !important;
  overflow: visible !important;
}

.season-dialog::backdrop {
  background: rgba(4, 6, 10, .72) !important;
  backdrop-filter: blur(8px) !important;
}

/* Match the Character Shelf shell footprint exactly. */
.season-dialog-shell-premium,
.season-dialog-shell {
  width: min(96vw, 980px) !important;
  max-width: min(96vw, 980px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(760px, calc(100dvh - 36px)) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 16px !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(216, 176, 106, .16), transparent 35%),
    linear-gradient(145deg, rgba(47, 36, 27, .94), rgba(17, 14, 12, .96)) !important;
  border: 1px solid rgba(216, 176, 106, .24) !important;
  box-shadow: 0 34px 110px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Match Collection header structure: centered title stack with close button column. */
.season-dialog-head-premium,
.season-dialog-head {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 42px 1fr 42px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 4px 6px 12px !important;
  border-bottom: 1px solid rgba(214, 180, 129, .14) !important;
  background: transparent !important;
}

.season-dialog-titlemark {
  grid-column: 1 !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 14px !important;
  font-size: .92rem !important;
}

.season-dialog-head > div:not(.season-dialog-titlemark) {
  grid-column: 2 !important;
  justify-self: center !important;
  text-align: center !important;
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.season-dialog-head span {
  display: block !important;
  color: rgba(243, 232, 213, .66) !important;
  font-size: .74rem !important;
  font-weight: 1000 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

.season-dialog-head strong {
  display: block !important;
  color: rgba(255, 245, 228, .96) !important;
  font-size: 1.62rem !important;
  line-height: 1.05 !important;
}

.season-dialog-head small {
  display: block !important;
  margin-top: 2px !important;
  color: rgba(243, 232, 213, .66) !important;
  font-size: .74rem !important;
}

.season-close-btn,
.season-dialog .dialog-close-btn {
  grid-column: 3 !important;
  width: 42px !important;
  height: 42px !important;
  justify-self: end !important;
}

/* Body mirrors collection inner cabinet height: content area is the shelf panel. */
.season-dialog-body-premium,
.season-dialog-body {
  min-height: 0 !important;
  height: auto !important;
  max-height: min(68vh, 620px) !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

/* Make Season content panel fill the Collection-sized body, not the whole viewport. */
.season-tabs-hero,
.season-tabbar,
.season-tab-panels {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Collection-like inner panel height. */
.season-tab-panels {
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  display: grid !important;
}

/* Fit the hero into the collection body. */
.season-tabs-hero {
  min-height: 104px !important;
  grid-template-columns: minmax(0, 1fr) 220px !important;
  gap: 10px !important;
}

.season-tabs-hero > div:first-child,
.season-tabs-rank {
  border-radius: 20px !important;
}

.season-tabs-hero > div:first-child {
  padding: 16px 20px !important;
}

.season-tabs-hero span {
  font-size: .64rem !important;
}

.season-tabs-hero strong {
  font-size: clamp(1.78rem, 3vw, 2.38rem) !important;
}

.season-tabs-hero small {
  font-size: .76rem !important;
}

.season-tabs-rank {
  padding: 14px !important;
}

.season-tabs-rank b {
  font-size: 1.64rem !important;
}

.season-tabbar {
  height: 42px !important;
  padding: 5px !important;
  gap: 7px !important;
  border-radius: 17px !important;
}

.season-tabbar button {
  font-size: .66rem !important;
}

/* Overview scaled to match the Character Shelf body. */
.season-overview-card,
.season-tab-card.season-overview-card {
  min-height: 314px !important;
  max-height: 100% !important;
  gap: 11px !important;
  padding: 18px !important;
  border-radius: 22px !important;
  align-content: start !important;
  overflow: hidden !important;
}

.season-overview-card-head {
  grid-template-columns: minmax(0, 1fr) minmax(230px, auto) !important;
  gap: 16px !important;
}

.season-overview-card-head span {
  font-size: .64rem !important;
}

.season-overview-card-head strong {
  font-size: 1.66rem !important;
}

.season-overview-next b {
  font-size: 1.52rem !important;
}

.season-overview-next small {
  max-width: 300px !important;
  font-size: .68rem !important;
}

.season-overview-track,
.season-progress-track,
.season-progress-track-premium {
  height: 11px !important;
}

.season-overview-meta {
  font-size: .62rem !important;
}

.season-overview-card .season-road-milestones,
.season-road-milestones {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.season-overview-card .season-road-step,
.season-road-step {
  min-height: 54px !important;
  padding: 7px 5px !important;
  border-radius: 13px !important;
}

.season-overview-card .season-road-step:nth-child(n+6),
.season-road-step:nth-child(n+6) {
  display: none !important;
}

.season-overview-card .season-road-step:nth-child(n+5),
.season-road-step:nth-child(n+5) {
  display: grid !important;
}

.season-road-step strong {
  font-size: .54rem !important;
}

.season-road-step span {
  font-size: .46rem !important;
}

.season-overview-stat-chips {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.season-overview-stat-chips div {
  min-height: 58px !important;
  padding: 8px 6px !important;
  border-radius: 14px !important;
}

.season-overview-stat-chips strong {
  font-size: .95rem !important;
}

.season-overview-stat-chips small {
  font-size: .46rem !important;
}

/* Other tabs in same collection-sized body. */
.season-rules-tabs-card ul {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.season-rules-tabs-card li {
  min-height: 84px !important;
  padding: 11px !important;
  border-radius: 15px !important;
}

.season-rules-tabs-card li b {
  font-size: .78rem !important;
}

.season-rules-tabs-card li em {
  font-size: .66rem !important;
}

.season-rewards-list-tabs,
.season-rewards-list {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.season-reward-row-premium,
.season-reward-row {
  min-height: 70px !important;
  padding: 10px !important;
  border-radius: 14px !important;
}

.season-top-row-premium,
.season-top-row {
  min-height: 48px !important;
  grid-template-columns: 52px minmax(0, 1fr) auto !important;
  padding: 8px 11px !important;
}

.season-top-row:nth-child(n+8) {
  display: none !important;
}

/* Mirror collection desktop safety. */
@media (min-width: 761px) and (max-height: 920px) {
  .season-dialog.rq-dialog,
  #seasonDialog {
    max-height: min(760px, calc(100dvh - 36px)) !important;
  }

  .season-dialog-shell {
    max-height: min(760px, calc(100dvh - 36px)) !important;
  }

  .season-dialog-body {
    max-height: 76vh !important;
  }

  .season-tabs-hero {
    min-height: 98px !important;
  }

  .season-overview-card {
    min-height: 298px !important;
    gap: 9px !important;
    padding: 16px !important;
  }

  .season-overview-card .season-road-step {
    min-height: 50px !important;
  }

  .season-overview-stat-chips div {
    min-height: 53px !important;
  }
}

@media (max-width: 760px) {
  .season-dialog.rq-dialog,
  #seasonDialog {
    width: min(96vw, 720px) !important;
    max-height: calc(100dvh - 18px) !important;
  }

  .season-dialog-shell {
    width: min(96vw, 720px) !important;
    max-width: min(96vw, 720px) !important;
    padding: 14px !important;
    border-radius: 24px !important;
  }

  .season-dialog-head {
    grid-template-columns: 34px 1fr 34px !important;
    gap: 8px !important;
    padding: 2px 4px 10px !important;
  }

  .season-dialog-head strong {
    font-size: 1.34rem !important;
  }

  .season-dialog-head small {
    font-size: .66rem !important;
  }

  .season-dialog-body {
    max-height: 74vh !important;
    overflow-y: auto !important;
  }

  .season-tabs-hero,
  .season-overview-card-head {
    grid-template-columns: 1fr !important;
  }

  .season-overview-stat-chips,
  .season-rewards-list-tabs,
  .season-rewards-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .season-rules-tabs-card ul {
    grid-template-columns: 1fr !important;
  }
}


/* v7.0.259 Season Full Collection Shell.
   Clarification: match the whole visible Collection / Character Shelf window,
   not only the dialog element. This includes the title/header and the large inner body panel. */

.season-dialog.rq-dialog,
#seasonDialog {
  width: min(940px, calc(100vw - 38px)) !important;
  max-width: min(940px, calc(100vw - 38px)) !important;
  height: auto !important;
  max-height: min(760px, calc(100dvh - 36px)) !important;
  margin: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 30px !important;
  background: transparent !important;
  overflow: visible !important;
}

/* This is the actual visible big frame, equivalent to Character Shelf shell. */
.season-dialog-shell-premium,
.season-dialog-shell {
  width: min(96vw, 980px) !important;
  max-width: min(96vw, 980px) !important;
  height: min(760px, calc(100dvh - 36px)) !important;
  max-height: min(760px, calc(100dvh - 36px)) !important;
  min-height: min(720px, calc(100dvh - 52px)) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 16px !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Header remains Collection-like and is part of the full window height. */
.season-dialog-head-premium,
.season-dialog-head {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 42px 1fr 42px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 4px 6px 12px !important;
  border-bottom: 1px solid rgba(214, 180, 129, .14) !important;
  background: transparent !important;
}

.season-dialog-head > div:not(.season-dialog-titlemark) {
  grid-column: 2 !important;
  justify-self: center !important;
  text-align: center !important;
  display: grid !important;
  gap: 2px !important;
}

.season-dialog-head strong {
  font-size: 1.62rem !important;
  line-height: 1.05 !important;
}

.season-dialog-head small {
  font-size: .74rem !important;
}

/* This is the inner large panel equivalent to Character Shelf body panel. */
.season-dialog-body-premium,
.season-dialog-body {
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow: hidden !important;
  padding: 14px 16px 12px !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 10px !important;
  box-sizing: border-box !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(216,176,106,.10), transparent 34%),
    linear-gradient(180deg, rgba(55,41,29,.52), rgba(24,19,14,.86)) !important;
  border: 1px solid rgba(222,198,160,.14) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* Fill the full Collection-sized Season body instead of behaving like a small card. */
.season-tabs-hero {
  min-height: 112px !important;
  grid-template-columns: minmax(0, 1fr) 230px !important;
  gap: 10px !important;
}

.season-tabbar {
  height: 43px !important;
  padding: 5px !important;
}

.season-tab-panels {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  display: grid !important;
}

.season-tab-panel.active {
  min-height: 0 !important;
  height: 100% !important;
  align-content: stretch !important;
  overflow: hidden !important;
}

/* Overview should occupy the large inner panel, but without empty weird layout. */
.season-tab-panel[data-season-panel="overview"].active,
.season-overview-compact-panel.active {
  grid-template-columns: 1fr !important;
}

.season-overview-card,
.season-tab-card.season-overview-card {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto 1fr !important;
  align-content: stretch !important;
  gap: 13px !important;
  padding: 20px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}

.season-overview-card-head {
  grid-template-columns: minmax(0, 1fr) minmax(250px, auto) !important;
  gap: 18px !important;
}

.season-overview-card-head strong {
  font-size: 1.86rem !important;
}

.season-overview-next b {
  font-size: 1.72rem !important;
}

.season-overview-next small {
  font-size: .74rem !important;
}

.season-overview-track,
.season-progress-track,
.season-progress-track-premium {
  height: 12px !important;
}

.season-overview-meta {
  font-size: .68rem !important;
}

/* Bigger rank road, now that the shell has real Collection height. */
.season-overview-card .season-road-milestones,
.season-road-milestones {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

.season-overview-card .season-road-step,
.season-road-step {
  min-height: 66px !important;
  padding: 9px 7px !important;
  border-radius: 15px !important;
}

.season-overview-card .season-road-step:nth-child(n+6),
.season-road-step:nth-child(n+6) {
  display: none !important;
}

.season-overview-card .season-road-step:nth-child(n+5),
.season-road-step:nth-child(n+5) {
  display: grid !important;
}

.season-road-step strong {
  font-size: .62rem !important;
}

.season-road-step span {
  font-size: .52rem !important;
}

/* Put the stat chips near the lower part of the inner Season panel, like a bottom summary rail. */
.season-overview-stat-chips {
  align-self: end !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 9px !important;
  margin-top: auto !important;
}

.season-overview-stat-chips div {
  min-height: 72px !important;
  padding: 11px 8px !important;
  border-radius: 16px !important;
}

.season-overview-stat-chips strong {
  font-size: 1.12rem !important;
}

.season-overview-stat-chips small {
  font-size: .54rem !important;
}

/* Other tabs also fill the full large Season body. */
.season-tab-panel[data-season-panel="rules"].active,
.season-tab-panel[data-season-panel="rewards"].active,
.season-tab-panel[data-season-panel="leaderboard"].active {
  height: 100% !important;
  grid-template-columns: 1fr !important;
}

.season-tab-panel[data-season-panel="rules"] .season-tab-card,
.season-tab-panel[data-season-panel="rewards"] .season-tab-card,
.season-tab-panel[data-season-panel="leaderboard"] .season-tab-card {
  height: 100% !important;
  max-height: 100% !important;
}

.season-rules-tabs-card ul {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.season-rules-tabs-card li {
  min-height: 100px !important;
  padding: 13px !important;
}

.season-rewards-list-tabs,
.season-rewards-list {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.season-reward-row-premium,
.season-reward-row {
  min-height: 82px !important;
}

.season-top-card-premium {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.season-top-list-tabs,
.season-top-list {
  align-content: start !important;
}

.season-top-row-premium,
.season-top-row {
  min-height: 56px !important;
}

/* Same compact safety used by Character Shelf on shorter 1080p browser window. */
@media (min-width: 761px) and (max-height: 920px) {
  .season-dialog-shell {
    height: min(740px, calc(100dvh - 36px)) !important;
    min-height: min(690px, calc(100dvh - 44px)) !important;
  }

  .season-dialog-body {
    padding: 13px 15px 11px !important;
    gap: 9px !important;
  }

  .season-tabs-hero {
    min-height: 104px !important;
  }

  .season-tabbar {
    height: 40px !important;
  }

  .season-overview-card {
    gap: 11px !important;
    padding: 18px !important;
  }

  .season-overview-card .season-road-step {
    min-height: 58px !important;
  }

  .season-overview-stat-chips div {
    min-height: 64px !important;
  }

  .season-rules-tabs-card li {
    min-height: 86px !important;
  }

  .season-reward-row {
    min-height: 72px !important;
  }
}

@media (max-width: 760px) {
  .season-dialog-shell {
    width: min(96vw, 720px) !important;
    height: calc(100dvh - 18px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 18px) !important;
    padding: 14px !important;
    border-radius: 24px !important;
  }

  .season-dialog-body {
    overflow-y: auto !important;
  }

  .season-tabs-hero,
  .season-overview-card-head {
    grid-template-columns: 1fr !important;
  }

  .season-overview-stat-chips,
  .season-rewards-list-tabs,
  .season-rewards-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .season-rules-tabs-card ul {
    grid-template-columns: 1fr !important;
  }
}

/* v7.0.263 PvP Trophy Season UI Overhaul.
   Season modal only: wires the new season art pack into hero, overview, rules, rewards and leaderboard. */

#seasonDialog .season-dialog-shell-premium,
#seasonDialog .season-dialog-shell {
  width: min(1040px, calc(100vw - 44px)) !important;
  height: min(760px, calc(100dvh - 44px)) !important;
  margin: 22px auto !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(216, 176, 106, .20), transparent 38%),
    linear-gradient(180deg, rgba(22, 16, 12, .98), rgba(8, 7, 7, .99)) !important;
}

#seasonDialog .season-dialog-head-premium,
#seasonDialog .season-dialog-head {
  min-height: 76px !important;
  padding: 14px 19px !important;
  border-bottom: 1px solid rgba(216, 176, 106, .18) !important;
  background:
    linear-gradient(90deg, rgba(35, 24, 14, .94), rgba(13, 12, 12, .96)),
    radial-gradient(circle at 14% 0%, rgba(255, 214, 128, .16), transparent 40%) !important;
}

#seasonDialog .season-dialog-body-premium,
#seasonDialog .season-dialog-body {
  padding: 13px !important;
  gap: 10px !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
}

#seasonDialog .season-tabs-hero-overhaul {
  position: relative !important;
  min-height: 132px !important;
  grid-template-columns: minmax(0, 1fr) 235px !important;
  overflow: hidden !important;
  border: 1px solid rgba(227, 187, 106, .22) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(90deg, rgba(6, 5, 4, .40), rgba(6, 5, 4, .22)),
    url('/assets/ui/season/season-hero-banner.png') center / cover no-repeat !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

#seasonDialog .season-tabs-hero-overhaul::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.14), transparent 45%, rgba(0,0,0,.22));
}

#seasonDialog .season-hero-copy,
#seasonDialog .season-hero-rank-card {
  position: relative !important;
  z-index: 1 !important;
}

#seasonDialog .season-hero-copy {
  align-self: stretch !important;
  display: grid !important;
  align-content: center !important;
  padding: 19px 24px !important;
  background: linear-gradient(90deg, rgba(0,0,0,.52), rgba(0,0,0,.18), transparent) !important;
  border-radius: 22px !important;
}

#seasonDialog .season-hero-copy span,
#seasonDialog .season-section-head-art span,
#seasonDialog .season-side-card-title span {
  color: rgba(232, 191, 116, .96) !important;
  font-size: .64rem !important;
  font-weight: 1000 !important;
  letter-spacing: .17em !important;
  text-transform: uppercase !important;
}

#seasonDialog .season-hero-copy strong {
  max-width: 620px !important;
  color: rgba(255, 244, 224, .98) !important;
  font-size: clamp(2rem, 3.4vw, 3rem) !important;
  letter-spacing: -.045em !important;
  text-shadow: 0 4px 18px rgba(0,0,0,.62) !important;
}

#seasonDialog .season-hero-copy small {
  color: rgba(246, 237, 219, .78) !important;
  font-size: .82rem !important;
  font-weight: 850 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.52) !important;
}

#seasonDialog .season-hero-rank-card {
  align-self: stretch !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 2px !important;
  margin: 10px 10px 10px 0 !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(255, 217, 146, .24) !important;
  background: linear-gradient(180deg, rgba(18, 12, 8, .78), rgba(0,0,0,.42)) !important;
  backdrop-filter: blur(2px) !important;
}

#seasonDialog .season-hero-rank-card img {
  width: 54px !important;
  height: 54px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 9px 13px rgba(0,0,0,.45)) !important;
}

#seasonDialog .season-tabbar-overhaul {
  height: 44px !important;
  background: rgba(0,0,0,.36) !important;
  border: 1px solid rgba(216, 176, 106, .16) !important;
}

#seasonDialog .season-tabbar-overhaul button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
}

#seasonDialog .season-tabbar-overhaul button img {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)) !important;
}

#seasonDialog .season-tabbar-overhaul button.active img {
  transform: scale(1.08) !important;
}

#seasonDialog .season-tab-panels-overhaul,
#seasonDialog .season-tab-panel.active {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

#seasonDialog .season-overview-grid.active {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .78fr) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 10px !important;
}

#seasonDialog .season-overview-main-card {
  grid-row: 1 / 3 !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 17px !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 207, 118, .13), transparent 32%),
    linear-gradient(180deg, rgba(38, 26, 15, .90), rgba(12, 11, 10, .93)) !important;
}

#seasonDialog .season-overview-card-head-art {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) minmax(150px, auto) !important;
  align-items: center !important;
  gap: 14px !important;
}

#seasonDialog .season-overview-card-head-art > img {
  width: 92px !important;
  height: 92px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 15px 18px rgba(0,0,0,.42)) !important;
}

#seasonDialog .season-overview-card-head-art small {
  display: block !important;
  margin-top: 5px !important;
  color: rgba(246, 237, 219, .66) !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
}

#seasonDialog .season-overview-track {
  height: 14px !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.46) !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05) !important;
}

#seasonDialog .season-overview-track i {
  background: linear-gradient(90deg, rgba(166, 108, 28, .96), rgba(255, 216, 124, .98), rgba(246, 178, 70, .96)) !important;
  box-shadow: 0 0 18px rgba(255, 191, 77, .28) !important;
}

#seasonDialog .season-stats-card-overhaul,
#seasonDialog .season-quick-facts-card,
#seasonDialog .season-rules-overhaul-card,
#seasonDialog .season-rewards-overhaul-card,
#seasonDialog .season-leaderboard-overhaul-card {
  border: 1px solid rgba(222, 198, 160, .14) !important;
  background:
    radial-gradient(circle at 0 0, rgba(216,176,106,.12), transparent 32%),
    linear-gradient(180deg, rgba(30, 22, 14, .92), rgba(10, 10, 10, .94)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 16px 34px rgba(0,0,0,.24) !important;
}

#seasonDialog .season-side-card-title,
#seasonDialog .season-section-head-art {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

#seasonDialog .season-side-card-title img,
#seasonDialog .season-section-head-art img {
  width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.42)) !important;
}

#seasonDialog .season-section-head-art {
  margin-bottom: 12px !important;
}

#seasonDialog .season-section-head-art b {
  display: block !important;
  color: rgba(255, 244, 224, .96) !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
}

#seasonDialog .season-stats-grid-overhaul {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#seasonDialog .season-stats-grid-overhaul div {
  min-height: 59px !important;
}

#seasonDialog .season-quick-facts-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  padding: 12px !important;
}

#seasonDialog .season-quick-facts-card div {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 2px 9px !important;
  align-items: center !important;
  padding: 7px 9px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(222,198,160,.11) !important;
  background: rgba(0,0,0,.24) !important;
}

#seasonDialog .season-quick-facts-card img {
  grid-row: 1 / 3 !important;
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
}

#seasonDialog .season-quick-facts-card b {
  color: rgba(255,244,224,.96) !important;
  font-size: .78rem !important;
}

#seasonDialog .season-quick-facts-card span {
  color: rgba(246,237,219,.58) !important;
  font-size: .62rem !important;
  line-height: 1.15 !important;
}

#seasonDialog .season-rule-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#seasonDialog .season-rule-tile {
  min-height: 126px !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  gap: 4px 10px !important;
  align-content: start !important;
  padding: 12px !important;
  border-radius: 17px !important;
  border: 1px solid rgba(222,198,160,.13) !important;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.38)) !important;
}

#seasonDialog .season-rule-tile img {
  grid-row: 1 / 3 !important;
  width: 52px !important;
  height: 52px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 9px 11px rgba(0,0,0,.42)) !important;
}

#seasonDialog .season-rule-tile b {
  color: rgba(255,244,224,.96) !important;
  font-size: .86rem !important;
  line-height: 1.05 !important;
}

#seasonDialog .season-rule-tile em {
  color: rgba(246,237,219,.61) !important;
  font-size: .66rem !important;
  font-style: normal !important;
  font-weight: 750 !important;
  line-height: 1.22 !important;
}

#seasonDialog .season-rewards-list-overhaul {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

#seasonDialog .season-reward-row-premium {
  min-height: 105px !important;
  justify-items: center !important;
  align-content: center !important;
  text-align: center !important;
  gap: 4px !important;
  background: linear-gradient(180deg, rgba(18, 14, 9, .72), rgba(0,0,0,.42)) !important;
}

#seasonDialog .season-reward-row-premium img {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.4)) !important;
}

#seasonDialog .season-reward-row-premium.prime {
  border-color: rgba(255, 218, 142, .38) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 22px rgba(255,187,64,.12) !important;
}

#seasonDialog .season-reward-note {
  margin-top: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(222,198,160,.12) !important;
  background: rgba(0,0,0,.28) !important;
  color: rgba(246,237,219,.68) !important;
  font-size: .7rem !important;
  font-weight: 850 !important;
}

#seasonDialog .season-reward-note img {
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
}

#seasonDialog .season-podium-strip {
  min-height: 134px !important;
  display: grid !important;
  grid-template-columns: .9fr 1.08fr .9fr !important;
  align-items: end !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
  padding: 14px 12px 12px !important;
  border: 1px solid rgba(222,198,160,.12) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.50)),
    url('/assets/ui/leaderboards/hall-of-fame-podium.png') center bottom / cover no-repeat !important;
  overflow: hidden !important;
}

#seasonDialog .season-podium-slot {
  min-height: 86px !important;
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  text-align: center !important;
  gap: 4px !important;
  padding: 10px !important;
  border-radius: 17px !important;
  border: 1px solid rgba(255, 218, 142, .18) !important;
  background: rgba(0,0,0,.52) !important;
  backdrop-filter: blur(1px) !important;
}

#seasonDialog .season-podium-slot.place-1 {
  min-height: 104px !important;
  border-color: rgba(255, 218, 142, .34) !important;
}

#seasonDialog .season-podium-slot b {
  color: rgba(255, 214, 126, .98) !important;
  font-size: .72rem !important;
}

#seasonDialog .season-podium-slot strong {
  color: rgba(255,244,224,.96) !important;
  font-size: .96rem !important;
  line-height: 1 !important;
}

#seasonDialog .season-podium-slot small {
  color: rgba(246,237,219,.64) !important;
  font-size: .62rem !important;
  line-height: 1.15 !important;
}

#seasonDialog .season-top-list-overhaul {
  max-height: 214px !important;
  overflow: hidden !important;
}

#seasonDialog .season-board-empty {
  display: grid !important;
  justify-items: center !important;
  text-align: center !important;
  gap: 6px !important;
}

#seasonDialog .season-board-empty img {
  width: 74px !important;
  height: 74px !important;
  object-fit: contain !important;
}

@media (min-width: 921px) and (max-height: 840px) {
  #seasonDialog .season-dialog-shell-premium,
  #seasonDialog .season-dialog-shell {
    height: min(700px, calc(100dvh - 36px)) !important;
    margin: 18px auto !important;
  }

  #seasonDialog .season-tabs-hero-overhaul {
    min-height: 116px !important;
  }

  #seasonDialog .season-hero-rank-card img {
    width: 46px !important;
    height: 46px !important;
  }

  #seasonDialog .season-overview-card-head-art > img {
    width: 78px !important;
    height: 78px !important;
  }

  #seasonDialog .season-rule-tile {
    min-height: 108px !important;
    padding: 10px !important;
  }

  #seasonDialog .season-podium-strip {
    min-height: 116px !important;
  }
}

@media (max-width: 760px) {
  #seasonDialog .season-dialog-shell-premium,
  #seasonDialog .season-dialog-shell {
    width: calc(100vw - 14px) !important;
    height: calc(100dvh - 14px) !important;
    margin: 7px auto !important;
  }

  #seasonDialog .season-dialog-body-premium,
  #seasonDialog .season-dialog-body,
  #seasonDialog .season-tab-panels-overhaul,
  #seasonDialog .season-tab-panel.active {
    overflow-y: auto !important;
  }

  #seasonDialog .season-tabs-hero-overhaul,
  #seasonDialog .season-overview-grid.active,
  #seasonDialog .season-overview-card-head-art,
  #seasonDialog .season-rule-grid,
  #seasonDialog .season-rewards-list-overhaul,
  #seasonDialog .season-podium-strip {
    grid-template-columns: 1fr !important;
  }

  #seasonDialog .season-tabs-hero-overhaul {
    min-height: auto !important;
  }

  #seasonDialog .season-hero-rank-card {
    margin: 0 10px 10px !important;
  }

  #seasonDialog .season-tabbar-overhaul button img {
    display: none !important;
  }

  #seasonDialog .season-overview-main-card {
    grid-row: auto !important;
  }

  #seasonDialog .season-overview-card-head-art > img {
    width: 82px !important;
    height: 82px !important;
  }
}

/* v7.0.264 PvP Trophy Season UI Polish.
   Season modal only: fixes overview fit, improves tab-icon readability, varies reward icons and prevents podium/list overlap. */

#seasonDialog .season-overview-grid.active {
  grid-template-columns: minmax(0, 1.42fr) minmax(245px, .72fr) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 9px !important;
}

#seasonDialog .season-overview-main-card {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 2 !important;
  padding: 14px !important;
}

#seasonDialog .season-quick-facts-card {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
  align-content: start !important;
  gap: 7px !important;
  padding: 11px !important;
}

#seasonDialog .season-stats-card-overhaul {
  grid-column: 1 / 3 !important;
  grid-row: 2 / 3 !important;
  padding: 10px 12px !important;
}

#seasonDialog .season-stats-card-overhaul .season-side-card-title {
  margin-bottom: 7px !important;
}

#seasonDialog .season-stats-card-overhaul .season-side-card-title img {
  width: 30px !important;
  height: 30px !important;
}

#seasonDialog .season-stats-grid-overhaul {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

#seasonDialog .season-stats-grid-overhaul div {
  min-height: 46px !important;
  padding: 6px 7px !important;
}

#seasonDialog .season-stats-grid-overhaul strong {
  font-size: .84rem !important;
}

#seasonDialog .season-stats-grid-overhaul small {
  font-size: .42rem !important;
}

#seasonDialog .season-overview-card-head-art {
  grid-template-columns: 78px minmax(0, 1fr) minmax(132px, auto) !important;
  gap: 12px !important;
}

#seasonDialog .season-overview-card-head-art > img {
  width: 78px !important;
  height: 78px !important;
}

#seasonDialog .season-overview-track {
  height: 11px !important;
}

#seasonDialog .season-overview-card .season-road-milestones {
  gap: 6px !important;
}

#seasonDialog .season-overview-card .season-road-step {
  min-height: 43px !important;
  padding: 6px 5px !important;
}

#seasonDialog .season-quick-facts-card div {
  min-height: 56px !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  padding: 7px 8px !important;
}

#seasonDialog .season-quick-facts-card img {
  width: 32px !important;
  height: 32px !important;
}

#seasonDialog .season-tabbar-overhaul button {
  gap: 9px !important;
  font-size: .72rem !important;
}

#seasonDialog .season-tabbar-overhaul button img {
  width: 26px !important;
  height: 26px !important;
  padding: 2px !important;
  border-radius: 9px !important;
  background: radial-gradient(circle, rgba(255, 218, 142, .24), rgba(0,0,0,.05) 62%) !important;
  filter:
    drop-shadow(0 3px 5px rgba(0,0,0,.55))
    drop-shadow(0 0 7px rgba(255, 205, 111, .18)) !important;
  opacity: .98 !important;
}

#seasonDialog .season-tabbar-overhaul button.active img {
  transform: scale(1.14) !important;
  background: radial-gradient(circle, rgba(72, 46, 12, .28), rgba(255,255,255,.18) 68%) !important;
  filter:
    drop-shadow(0 2px 3px rgba(0,0,0,.38))
    drop-shadow(0 0 8px rgba(90, 54, 13, .26)) !important;
}

#seasonDialog .season-rewards-overhaul-card .season-section-head-art img {
  width: 66px !important;
  height: 44px !important;
  object-fit: contain !important;
}

#seasonDialog .season-rewards-list-overhaul {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#seasonDialog .season-reward-row-premium {
  min-height: 82px !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  justify-items: start !important;
  align-content: center !important;
  text-align: left !important;
  gap: 1px 8px !important;
  padding: 9px 10px !important;
}

#seasonDialog .season-reward-row-premium img {
  grid-row: 1 / 4 !important;
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
}

#seasonDialog .season-reward-row-premium.standard img {
  width: 34px !important;
  height: 34px !important;
}

#seasonDialog .season-reward-row-premium strong,
#seasonDialog .season-reward-row-premium span,
#seasonDialog .season-reward-row-premium small {
  text-align: left !important;
  justify-self: start !important;
}

#seasonDialog .season-reward-row-premium strong {
  font-size: .76rem !important;
}

#seasonDialog .season-reward-row-premium span {
  font-size: .90rem !important;
}

#seasonDialog .season-reward-row-premium small {
  font-size: .55rem !important;
}

#seasonDialog .season-reward-note {
  margin-top: 8px !important;
  min-height: 40px !important;
  padding: 7px 10px !important;
}

#seasonDialog .season-podium-strip {
  min-height: 148px !important;
  margin-bottom: 16px !important;
  padding-bottom: 17px !important;
  overflow: hidden !important;
}

#seasonDialog .season-podium-slot {
  min-height: 82px !important;
  margin-bottom: 2px !important;
}

#seasonDialog .season-podium-slot.place-1 {
  min-height: 98px !important;
}

#seasonDialog .season-top-list-overhaul {
  max-height: 176px !important;
  overflow: hidden !important;
  margin-top: 0 !important;
}

#seasonDialog .season-top-list-overhaul .season-top-row.top-1,
#seasonDialog .season-top-list-overhaul .season-top-row.top-2,
#seasonDialog .season-top-list-overhaul .season-top-row.top-3 {
  display: none !important;
}

#seasonDialog .season-board-empty.compact {
  min-height: 76px !important;
  padding: 16px !important;
}

@media (min-width: 921px) and (max-height: 840px) {
  #seasonDialog .season-overview-grid.active {
    gap: 8px !important;
  }

  #seasonDialog .season-overview-card-head-art {
    grid-template-columns: 68px minmax(0, 1fr) minmax(122px, auto) !important;
  }

  #seasonDialog .season-overview-card-head-art > img {
    width: 68px !important;
    height: 68px !important;
  }

  #seasonDialog .season-stats-grid-overhaul div {
    min-height: 40px !important;
    padding: 5px !important;
  }

  #seasonDialog .season-podium-strip {
    min-height: 136px !important;
    margin-bottom: 14px !important;
  }
}

@media (max-width: 760px) {
  #seasonDialog .season-stats-card-overhaul,
  #seasonDialog .season-quick-facts-card,
  #seasonDialog .season-overview-main-card {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  #seasonDialog .season-stats-grid-overhaul {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #seasonDialog .season-reward-row-premium {
    min-height: 76px !important;
  }
}


/* v7.0.265 PvP Trophy Season Final Polish.
   Adds cleaned/cropped tab + reward assets and final readability polish.
   Visual-only: no gameplay, PvP scoring, reward logic, or backend changes. */
#seasonDialog .season-tabbar-overhaul button img {
  width: 25px !important;
  height: 25px !important;
  padding: 2px !important;
  border-radius: 9px !important;
  background: radial-gradient(circle at 50% 35%, rgba(255,226,151,.22), rgba(0,0,0,.18) 72%) !important;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.62)) drop-shadow(0 0 7px rgba(255,194,83,.18)) !important;
  opacity: 1 !important;
}

#seasonDialog .season-tabbar-overhaul button.active img {
  transform: scale(1.12) !important;
  background: radial-gradient(circle at 50% 35%, rgba(68,42,10,.42), rgba(255,232,164,.15) 74%) !important;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.45)) drop-shadow(0 0 9px rgba(122,72,10,.22)) !important;
}

#seasonDialog .season-overview-card-head-art > img {
  width: 64px !important;
  height: 64px !important;
}

#seasonDialog .season-overview-card-head-art strong {
  font-size: 1.58rem !important;
  letter-spacing: .01em !important;
}

#seasonDialog .season-overview-card-head-art small,
#seasonDialog .season-overview-meta,
#seasonDialog .season-stats-grid-overhaul small,
#seasonDialog .season-quick-facts-card span {
  color: rgba(246,237,219,.72) !important;
}

#seasonDialog .season-road-step {
  min-height: 58px !important;
  padding: 8px 6px !important;
}

#seasonDialog .season-road-step i {
  width: 13px !important;
  height: 13px !important;
  box-shadow: 0 0 0 4px rgba(255,221,148,.055), 0 0 13px rgba(255,194,83,.18) !important;
}

#seasonDialog .season-road-step strong {
  font-size: .58rem !important;
}

#seasonDialog .season-road-step span {
  font-size: .47rem !important;
  color: rgba(246,237,219,.62) !important;
}

#seasonDialog .season-stats-card-overhaul {
  padding: 11px 13px !important;
}

#seasonDialog .season-stats-grid-overhaul div {
  min-height: 45px !important;
  padding: 7px 8px !important;
}

#seasonDialog .season-stats-grid-overhaul strong {
  font-size: .94rem !important;
}

#seasonDialog .season-quick-facts-card div {
  min-height: 51px !important;
}

#seasonDialog .season-rewards-overhaul-card {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  align-content: start !important;
  gap: 8px !important;
}

#seasonDialog .season-reward-banner {
  height: 54px !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  margin: -2px 0 0 !important;
  pointer-events: none !important;
}

#seasonDialog .season-reward-banner img {
  width: min(520px, 76%) !important;
  max-height: 60px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 9px 12px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(255,182,62,.12)) !important;
}

#seasonDialog .season-rewards-list-overhaul {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#seasonDialog .season-reward-row-premium {
  min-height: 78px !important;
  grid-template-columns: 39px minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  justify-items: start !important;
  align-content: center !important;
  text-align: left !important;
  column-gap: 9px !important;
  row-gap: 1px !important;
  padding: 8px 10px !important;
}

#seasonDialog .season-reward-row-premium img {
  grid-row: 1 / span 3 !important;
  width: 34px !important;
  height: 34px !important;
  align-self: center !important;
  justify-self: center !important;
  filter: drop-shadow(0 6px 7px rgba(0,0,0,.42)) drop-shadow(0 0 7px rgba(255,190,70,.12)) !important;
}

#seasonDialog .season-reward-row-premium strong {
  font-size: .76rem !important;
  line-height: 1 !important;
}

#seasonDialog .season-reward-row-premium span {
  font-size: .84rem !important;
  line-height: 1 !important;
}

#seasonDialog .season-reward-row-premium small {
  font-size: .52rem !important;
  line-height: 1.05 !important;
}

#seasonDialog .season-reward-note {
  margin-top: 2px !important;
  min-height: 38px !important;
  padding: 7px 11px !important;
  font-size: .72rem !important;
  background: linear-gradient(90deg, rgba(255,201,92,.075), rgba(0,0,0,.25), rgba(255,201,92,.055)) !important;
}

#seasonDialog .season-podium-slot strong {
  font-size: .9rem !important;
  color: rgba(255,247,230,.98) !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.55) !important;
}

#seasonDialog .season-podium-slot small {
  color: rgba(255,222,153,.78) !important;
  font-size: .58rem !important;
}

#seasonDialog .season-board-empty.compact {
  border-style: solid !important;
  border-color: rgba(222,198,160,.14) !important;
  background: linear-gradient(180deg, rgba(20,15,10,.62), rgba(0,0,0,.35)) !important;
}

#seasonDialog .season-board-empty.compact strong {
  color: rgba(255,232,164,.92) !important;
}

@media (min-width: 921px) and (max-height: 960px) {
  #seasonDialog .season-reward-banner {
    height: 45px !important;
  }
  #seasonDialog .season-reward-banner img {
    max-height: 52px !important;
  }
  #seasonDialog .season-reward-row-premium {
    min-height: 68px !important;
    padding: 7px 9px !important;
  }
  #seasonDialog .season-reward-row-premium img {
    width: 30px !important;
    height: 30px !important;
  }
  #seasonDialog .season-tabbar-overhaul button img {
    width: 23px !important;
    height: 23px !important;
  }
  #seasonDialog .season-road-step {
    min-height: 50px !important;
  }
}


/* v7.0.268 Hall of Fame final polish.
   Hall dialog only: cropped RGBA icons, stronger hero sections, cleaner tabs and more consistent archive/record cards. */

#menuLeaderboardDialog .hall-header {
  align-items: flex-start !important;
}

#menuLeaderboardDialog .hall-title-medal img {
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.34)) !important;
}

#menuLeaderboardDialog .hall-season-tabs .leaderboard-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 8px 14px !important;
}

#menuLeaderboardDialog .hall-season-tabs .leaderboard-tab img {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
  flex: 0 0 18px !important;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.28)) !important;
}

#menuLeaderboardDialog .hall-overview-rich {
  display: grid !important;
  gap: 12px !important;
}

#menuLeaderboardDialog .hall-overview-hero {
  display: grid !important;
  grid-template-columns: 72px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px !important;
}

#menuLeaderboardDialog .hall-overview-hero img {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain !important;
}

#menuLeaderboardDialog .hall-overview-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 10px !important;
}

#menuLeaderboardDialog .hall-overview-tile {
  display: grid !important;
  justify-items: start !important;
  gap: 6px !important;
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(198,161,103,.14) !important;
  background: linear-gradient(180deg, rgba(232,220,200,.05), rgba(91,70,49,.03)) !important;
}

#menuLeaderboardDialog .hall-overview-tile img {
  width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
}

#menuLeaderboardDialog .hall-overview-tile b {
  color: #fff1d3 !important;
  font-size: .95rem !important;
}

#menuLeaderboardDialog .hall-overview-tile span {
  color: rgba(232,220,200,.72) !important;
  font-size: .78rem !important;
  line-height: 1.45 !important;
}

#menuLeaderboardDialog .hall-current-category-hero {
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center !important;
}

#menuLeaderboardDialog .hall-current-category-copy {
  display: grid !important;
  gap: 5px !important;
}

#menuLeaderboardDialog .hall-current-category-art {
  display: grid !important;
  justify-items: center !important;
  gap: 6px !important;
  min-width: 118px !important;
}

#menuLeaderboardDialog .hall-current-category-art img {
  width: 54px !important;
  height: 54px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.34)) !important;
}

#menuLeaderboardDialog .hall-current-category-art b {
  padding: 5px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,231,191,.16) !important;
  background: rgba(0,0,0,.26) !important;
  color: #fff1d3 !important;
  font-size: .72rem !important;
  letter-spacing: .12em !important;
}

#menuLeaderboardDialog .season-hall-hero-polish,
#menuLeaderboardDialog .season-winners-hero-polish {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
}

#menuLeaderboardDialog .season-hall-hero-copy {
  display: grid !important;
  gap: 5px !important;
}

#menuLeaderboardDialog .season-hall-hero-art {
  display: grid !important;
  justify-items: end !important;
  gap: 10px !important;
}

#menuLeaderboardDialog .season-hall-hero-art img {
  width: 68px !important;
  height: 68px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.34)) !important;
}

#menuLeaderboardDialog .season-hall-podium {
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.52)), url('/assets/ui/leaderboards/hall-of-fame-podium.png') center bottom/cover no-repeat !important;
}

#menuLeaderboardDialog .season-hall-empty-polish {
  display: grid !important;
  justify-items: center !important;
  text-align: center !important;
  gap: 8px !important;
}

#menuLeaderboardDialog .season-hall-empty-polish img {
  width: 74px !important;
  height: 74px !important;
  object-fit: contain !important;
}

@media (max-width: 760px) {
  #menuLeaderboardDialog .hall-overview-grid {
    grid-template-columns: 1fr !important;
  }

  #menuLeaderboardDialog .hall-season-tabs .leaderboard-tab img {
    width: 16px !important;
    height: 16px !important;
    flex-basis: 16px !important;
  }

  #menuLeaderboardDialog .hall-current-category-hero,
  #menuLeaderboardDialog .season-hall-hero-polish,
  #menuLeaderboardDialog .season-winners-hero-polish,
  #menuLeaderboardDialog .hall-overview-hero {
    grid-template-columns: 1fr !important;
  }

  #menuLeaderboardDialog .hall-current-category-art,
  #menuLeaderboardDialog .season-hall-hero-art {
    justify-items: start !important;
  }
}


/* v7.0.269 Missions unified modal shell.
   Missions only: align window size, centered premium header and dashboard layout with Season/Ranks style. */

#missionsDialog.missions-dialog,
.missions-dialog {
  width: min(1020px, calc(100dvw - 34px)) !important;
  height: min(700px, calc(100dvh - 36px)) !important;
  max-height: min(700px, calc(100dvh - 36px)) !important;
  padding: 0 !important;
  overflow: visible !important;
}

#missionsDialog .missions-dialog-card,
.missions-dialog-card {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  display: grid !important;
  grid-template-rows: auto 0 minmax(0, 1fr) !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  border: 1px solid rgba(222,198,160,.22) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(216,176,106,.10), transparent 34%),
    linear-gradient(180deg, rgba(28,22,15,.98), rgba(11,9,7,.98)) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,244,224,.07) !important;
}

#missionsDialog .missions-header {
  min-height: 122px !important;
  padding: 22px 74px 20px !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.44)),
    radial-gradient(circle at 50% 16%, rgba(255,211,128,.16), transparent 34%),
    url('/assets/ui/leaderboards/hall-of-fame-header-bg.png') center/cover no-repeat !important;
  border-bottom: 1px solid rgba(222,198,160,.14) !important;
}

#missionsDialog .missions-header > div {
  display: grid !important;
  justify-items: center !important;
  gap: 5px !important;
}

#missionsDialog .missions-header span {
  width: max-content !important;
  margin: 0 !important;
  padding: 4px 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,231,191,.20) !important;
  background: rgba(0,0,0,.22) !important;
  color: rgba(255,232,176,.96) !important;
  font-size: .62rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-weight: 950 !important;
}

#missionsDialog .missions-header h2 {
  margin: 0 !important;
  color: #f8efe0 !important;
  font-size: clamp(2.2rem, 4.1vw, 3.35rem) !important;
  line-height: .92 !important;
  letter-spacing: -.055em !important;
  text-shadow: 0 10px 28px rgba(0,0,0,.52) !important;
}

#missionsDialog .missions-header p {
  margin: 0 !important;
  max-width: 58ch !important;
  color: rgba(246,237,219,.75) !important;
  font-size: .86rem !important;
  line-height: 1.3 !important;
}

#missionsDialog .missions-close-btn {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,244,224,.50) !important;
  background: rgba(0,0,0,.18) !important;
  color: rgba(255,244,224,.92) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.34) !important;
}

#missionsDialog .missions-status {
  display: none !important;
}

#missionsDialog .missions-body {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 10px !important;
  padding: 14px 18px 16px !important;
  overflow: hidden !important;
}

#missionsDialog .missions-overview-unified {
  min-height: 86px !important;
  display: grid !important;
  grid-template-columns: 68px minmax(0, 1fr) minmax(330px, .9fr) !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 14px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(222,198,160,.17) !important;
  background:
    linear-gradient(135deg, rgba(232,220,200,.07), rgba(91,70,49,.05)),
    rgba(0,0,0,.24) !important;
}

#missionsDialog .missions-overview-art img {
  width: 58px !important;
  height: 58px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.40)) !important;
}

#missionsDialog .missions-overview-copy {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

#missionsDialog .missions-overview-copy span,
#missionsDialog .weekly-chest-copy span {
  color: rgba(255,218,142,.95) !important;
  font-size: .62rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-weight: 950 !important;
}

#missionsDialog .missions-overview-copy strong {
  color: #f8efe0 !important;
  font-size: 1.08rem !important;
  line-height: 1.1 !important;
}

#missionsDialog .missions-reset-countdown {
  margin: 0 !important;
  color: rgba(246,237,219,.64) !important;
  font-size: .74rem !important;
}

#missionsDialog .missions-overview-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#missionsDialog .missions-overview-stats div {
  min-height: 48px !important;
  display: grid !important;
  align-content: center !important;
  gap: 3px !important;
  padding: 8px 10px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(222,198,160,.10) !important;
  background: rgba(0,0,0,.22) !important;
}

#missionsDialog .missions-overview-stats span {
  color: rgba(246,237,219,.55) !important;
  font-size: .56rem !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  font-weight: 900 !important;
}

#missionsDialog .missions-overview-stats b {
  color: #fff2d1 !important;
  font-size: .88rem !important;
  line-height: 1 !important;
}

#missionsDialog .missions-list-unified {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 10px !important;
  overflow: hidden !important;
}

#missionsDialog .mission-card,
#missionsDialog .missions-contract-card,
#missionsDialog .mission-contract-card,
#missionsDialog .daily-mission-card {
  min-height: 0 !important;
  padding: 12px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(222,198,160,.14) !important;
  background: linear-gradient(180deg, rgba(22,17,12,.82), rgba(0,0,0,.34)) !important;
  box-shadow: inset 0 1px 0 rgba(255,244,224,.05) !important;
}

#missionsDialog .mission-card-header,
#missionsDialog .mission-card header,
#missionsDialog .missions-contract-card header,
#missionsDialog .mission-contract-card header,
#missionsDialog .daily-mission-card header {
  grid-template-columns: 46px minmax(0,1fr) auto !important;
  gap: 9px !important;
}

#missionsDialog .mission-card-icon,
#missionsDialog .mission-card img,
#missionsDialog .missions-contract-card img,
#missionsDialog .mission-contract-card img,
#missionsDialog .daily-mission-card img {
  width: 46px !important;
  height: 46px !important;
  object-fit: contain !important;
  border-radius: 14px !important;
}

#missionsDialog .mission-card-copy strong,
#missionsDialog .mission-card h3,
#missionsDialog .missions-contract-card h3,
#missionsDialog .mission-contract-card h3,
#missionsDialog .daily-mission-card h3 {
  color: #f8efe0 !important;
  font-size: .96rem !important;
  line-height: 1.08 !important;
}

#missionsDialog .mission-card-copy p,
#missionsDialog .mission-card p,
#missionsDialog .missions-contract-card p,
#missionsDialog .mission-contract-card p,
#missionsDialog .daily-mission-card p {
  color: rgba(246,237,219,.62) !important;
  font-size: .70rem !important;
  line-height: 1.25 !important;
  max-height: 2.5em !important;
}

#missionsDialog .weekly-chest-unified {
  min-height: 92px !important;
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) minmax(280px, .78fr) !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 14px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255,218,142,.18) !important;
  background:
    linear-gradient(135deg, rgba(255,214,126,.08), rgba(0,0,0,.32)),
    rgba(16,12,8,.84) !important;
}

#missionsDialog .weekly-chest-art img {
  width: 68px !important;
  height: 68px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,.42)) !important;
}

#missionsDialog .weekly-chest-copy strong {
  color: #f8efe0 !important;
  font-size: 1rem !important;
  line-height: 1.1 !important;
}

#missionsDialog .weekly-chest-copy p {
  color: rgba(246,237,219,.64) !important;
  font-size: .74rem !important;
  line-height: 1.25 !important;
  max-height: 2.6em !important;
}

@media (max-width: 760px) {
  #missionsDialog.missions-dialog,
  .missions-dialog {
    width: calc(100dvw - 14px) !important;
    height: calc(100dvh - 14px) !important;
    max-height: calc(100dvh - 14px) !important;
  }

  #missionsDialog .missions-header {
    min-height: 116px !important;
    padding: 18px 58px 16px !important;
  }

  #missionsDialog .missions-body {
    overflow-y: auto !important;
  }

  #missionsDialog .missions-overview-unified,
  #missionsDialog .weekly-chest-unified {
    grid-template-columns: 1fr !important;
  }

  #missionsDialog .missions-overview-stats,
  #missionsDialog .missions-list-unified {
    grid-template-columns: 1fr !important;
  }
}


/* v7.0.270 Missions loading hotfix.
   Keep the unified shell, but restore visible loading/error states and prevent the body from looking empty while API/rendering is pending. */

#missionsDialog .missions-dialog-card,
.missions-dialog-card {
  grid-template-rows: auto auto minmax(0, 1fr) !important;
}

#missionsDialog .missions-status {
  display: block !important;
  min-height: 0 !important;
  padding: 8px 18px 0 !important;
  color: rgba(246,237,219,.62) !important;
  font-size: .72rem !important;
  font-weight: 850 !important;
  text-align: center !important;
  letter-spacing: .03em !important;
}

#missionsDialog .missions-body {
  overflow: hidden !important;
  align-content: start !important;
}

#missionsDialog .missions-loading-card {
  min-height: 180px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 9px !important;
  padding: 26px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(222,198,160,.14) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,214,126,.08), transparent 45%),
    rgba(0,0,0,.28) !important;
  color: rgba(246,237,219,.72) !important;
  text-align: center !important;
}

#missionsDialog .missions-loading-card strong {
  color: #f8efe0 !important;
  font-size: 1rem !important;
}

#missionsDialog .missions-loading-card span {
  max-width: 420px !important;
  color: rgba(246,237,219,.64) !important;
  line-height: 1.4 !important;
}

#missionsDialog .missions-error-card {
  border-color: rgba(255,117,117,.24) !important;
}

#missionsDialog .missions-error-card button {
  margin-top: 4px !important;
}


/* v7.0.271 Collection unified modal shell.
   Collection only: align Character Shelf window size, centered premium head banner and inner spacing with Missions/Ranks. */

#inventoryDialog.inventory-dialog,
.inventory-dialog {
  width: min(1020px, calc(100dvw - 34px)) !important;
  height: min(700px, calc(100dvh - 36px)) !important;
  max-height: min(700px, calc(100dvh - 36px)) !important;
  padding: 0 !important;
  overflow: visible !important;
  border-radius: 28px !important;
}

#inventoryDialog .inventory-dialog-shell,
.inventory-dialog .inventory-dialog-shell {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  border: 1px solid rgba(222,198,160,.22) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(216,176,106,.10), transparent 34%),
    linear-gradient(180deg, rgba(28,22,15,.98), rgba(11,9,7,.98)) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,244,224,.07) !important;
}

#inventoryDialog .inventory-dialog-head,
.inventory-dialog .inventory-dialog-head {
  position: relative !important;
  min-height: 122px !important;
  padding: 22px 74px 20px !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.44)),
    radial-gradient(circle at 50% 16%, rgba(255,211,128,.16), transparent 34%),
    url('/assets/ui/leaderboards/hall-of-fame-header-bg.png') center/cover no-repeat !important;
  border-bottom: 1px solid rgba(222,198,160,.14) !important;
}

#inventoryDialog .inventory-dialog-head > div,
.inventory-dialog .inventory-dialog-head > div {
  display: grid !important;
  justify-items: center !important;
  gap: 5px !important;
}

#inventoryDialog .inventory-dialog-head span,
.inventory-dialog .inventory-dialog-head span {
  width: max-content !important;
  margin: 0 !important;
  padding: 4px 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,231,191,.20) !important;
  background: rgba(0,0,0,.22) !important;
  color: rgba(255,232,176,.96) !important;
  font-size: .62rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-weight: 950 !important;
}

#inventoryDialog .inventory-dialog-head strong,
.inventory-dialog .inventory-dialog-head strong {
  margin: 0 !important;
  color: #f8efe0 !important;
  font-size: clamp(2.2rem, 4.1vw, 3.35rem) !important;
  line-height: .92 !important;
  letter-spacing: -.055em !important;
  text-shadow: 0 10px 28px rgba(0,0,0,.52) !important;
}

#inventoryDialog .inventory-dialog-head small,
.inventory-dialog .inventory-dialog-head small {
  margin: 0 !important;
  max-width: 58ch !important;
  color: rgba(246,237,219,.75) !important;
  font-size: .86rem !important;
  line-height: 1.3 !important;
}

#inventoryDialog .dialog-close-btn,
.inventory-dialog .dialog-close-btn {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,244,224,.50) !important;
  background: rgba(0,0,0,.18) !important;
  color: rgba(255,244,224,.92) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.34) !important;
  z-index: 5 !important;
}

#inventoryDialog .inventory-dialog-body,
.inventory-dialog .inventory-dialog-body {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

#inventoryDialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework,
.inventory-dialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework {
  height: 100% !important;
  max-height: none !important;
  padding: 14px 18px 16px !important;
  gap: 10px !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255,214,126,.06), transparent 32%),
    linear-gradient(180deg, rgba(28,22,15,.48), rgba(9,7,5,.18)) !important;
  border: 0 !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-collection-topbar,
.inventory-dialog .inventory-showcase-rework .inventory-collection-topbar {
  min-height: 78px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 14px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(222,198,160,.17) !important;
  background:
    linear-gradient(135deg, rgba(232,220,200,.07), rgba(91,70,49,.05)),
    rgba(0,0,0,.24) !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-filter-row,
.inventory-dialog .inventory-showcase-rework .inventory-filter-row {
  min-height: 32px !important;
  padding: 0 2px !important;
}

#inventoryDialog .inventory-showcase-layout,
.inventory-dialog .inventory-showcase-layout {
  grid-template-columns: 228px minmax(0, 1fr) !important;
  gap: 14px !important;
  min-height: 0 !important;
}

#inventoryDialog .inventory-selected-showcase,
.inventory-dialog .inventory-selected-showcase {
  min-height: 0 !important;
  height: 100% !important;
  border-radius: 22px !important;
}

#inventoryDialog .inventory-grid-stage,
.inventory-dialog .inventory-grid-stage {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-page-grid,
.inventory-dialog .inventory-showcase-rework .inventory-page-grid {
  min-height: 0 !important;
  height: 100% !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(142px, 1fr) !important;
  gap: 10px !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-shelf-slot,
.inventory-dialog .inventory-showcase-rework .inventory-shelf-slot {
  min-height: 0 !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-shelf-slot .inventory-item.inventory-item-card,
.inventory-dialog .inventory-showcase-rework .inventory-shelf-slot .inventory-item.inventory-item-card {
  min-height: 0 !important;
  height: 100% !important;
}

#inventoryDialog .inventory-pagebar,
.inventory-dialog .inventory-pagebar {
  margin-top: 8px !important;
}

@media (max-width: 760px) {
  #inventoryDialog.inventory-dialog,
  .inventory-dialog {
    width: calc(100dvw - 14px) !important;
    height: calc(100dvh - 14px) !important;
    max-height: calc(100dvh - 14px) !important;
  }

  #inventoryDialog .inventory-dialog-head,
  .inventory-dialog .inventory-dialog-head {
    min-height: 116px !important;
    padding: 18px 58px 16px !important;
  }

  #inventoryDialog .inventory-dialog-head strong,
  .inventory-dialog .inventory-dialog-head strong {
    font-size: 2rem !important;
  }

  #inventoryDialog .inventory-dialog-body,
  .inventory-dialog .inventory-dialog-body,
  #inventoryDialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework,
  .inventory-dialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework {
    overflow-y: auto !important;
  }

  #inventoryDialog .inventory-showcase-layout,
  .inventory-dialog .inventory-showcase-layout,
  #inventoryDialog .inventory-showcase-rework .inventory-collection-topbar,
  .inventory-dialog .inventory-showcase-rework .inventory-collection-topbar {
    grid-template-columns: 1fr !important;
  }

  #inventoryDialog .inventory-selected-showcase,
  .inventory-dialog .inventory-selected-showcase {
    min-height: 360px !important;
  }

  #inventoryDialog .inventory-showcase-rework .inventory-page-grid,
  .inventory-dialog .inventory-showcase-rework .inventory-page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(128px, 1fr) !important;
  }
}


/* v7.0.272 Collection preview hotfix.
   Fixes compressed/deformed character previews after the unified modal shell by making progress compact
   and restoring safe 3D preview aspect space. Collection only. */

#inventoryDialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework,
.inventory-dialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework {
  padding: 10px 18px 14px !important;
  gap: 7px !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-collection-topbar,
.inventory-dialog .inventory-showcase-rework .inventory-collection-topbar {
  min-height: 52px !important;
  padding: 8px 14px !important;
  border-radius: 18px !important;
}

#inventoryDialog .inventory-progress-block,
.inventory-dialog .inventory-progress-block {
  gap: 2px !important;
}

#inventoryDialog .inventory-progress-block span,
.inventory-dialog .inventory-progress-block span {
  font-size: .56rem !important;
  letter-spacing: .16em !important;
}

#inventoryDialog .inventory-progress-block strong,
.inventory-dialog .inventory-progress-block strong {
  font-size: .78rem !important;
  line-height: 1 !important;
}

#inventoryDialog .inventory-progress-block em,
.inventory-dialog .inventory-progress-block em {
  font-size: .60rem !important;
  line-height: 1.05 !important;
  opacity: .72 !important;
}

#inventoryDialog .inventory-progress-meter,
.inventory-dialog .inventory-progress-meter {
  width: min(300px, 100%) !important;
  height: 4px !important;
}

#inventoryDialog .inventory-shop-mini,
.inventory-dialog .inventory-shop-mini {
  min-height: 34px !important;
  padding-inline: 18px !important;
  border-radius: 16px !important;
}

#inventoryDialog .inventory-showcase-layout,
.inventory-dialog .inventory-showcase-layout {
  grid-template-columns: 260px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

#inventoryDialog .inventory-selected-showcase,
.inventory-dialog .inventory-selected-showcase {
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
}

#inventoryDialog .inventory-selected-avatar,
.inventory-dialog .inventory-selected-avatar {
  inset: 42px 18px 108px 18px !important;
  overflow: hidden !important;
  display: block !important;
  contain: layout size !important;
}

#inventoryDialog .inventory-selected-avatar canvas,
#inventoryDialog .inventory-selected-avatar .avatar3d-empty,
.inventory-dialog .inventory-selected-avatar canvas,
.inventory-dialog .inventory-selected-avatar .avatar3d-empty {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

#inventoryDialog .inventory-grid-stage,
.inventory-dialog .inventory-grid-stage {
  gap: 7px !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-page-grid,
.inventory-dialog .inventory-showcase-rework .inventory-page-grid {
  grid-auto-rows: minmax(148px, 1fr) !important;
  gap: 10px !important;
  max-height: none !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-shelf-slot,
.inventory-dialog .inventory-showcase-rework .inventory-shelf-slot {
  min-height: 148px !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-shelf-slot .inventory-item.inventory-item-card,
.inventory-dialog .inventory-showcase-rework .inventory-shelf-slot .inventory-item.inventory-item-card {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  overflow: hidden !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-shelf-slot .inventory-item-hero,
.inventory-dialog .inventory-showcase-rework .inventory-shelf-slot .inventory-item-hero {
  min-height: 0 !important;
  overflow: hidden !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-shelf-slot .inventory-card-avatar3d,
.inventory-dialog .inventory-showcase-rework .inventory-shelf-slot .inventory-card-avatar3d {
  inset: 12px 14px 34px 14px !important;
  overflow: hidden !important;
  contain: layout size !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-shelf-slot .inventory-card-avatar3d canvas,
.inventory-dialog .inventory-showcase-rework .inventory-shelf-slot .inventory-card-avatar3d canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  transform: translateY(0) scale(.90) !important;
  transform-origin: center center !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-shelf-slot .inventory-item-card:hover .inventory-card-avatar3d canvas,
.inventory-dialog .inventory-showcase-rework .inventory-shelf-slot .inventory-item-card:hover .inventory-card-avatar3d canvas {
  transform: translateY(0) scale(.94) !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-shelf-slot .inventory-card-meta,
.inventory-dialog .inventory-showcase-rework .inventory-shelf-slot .inventory-card-meta {
  min-height: 31px !important;
  padding: 5px 8px 8px !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-pagebar,
.inventory-dialog .inventory-showcase-rework .inventory-pagebar {
  min-height: 30px !important;
  padding-top: 2px !important;
  transform: none !important;
}

@media (min-width: 761px) and (max-height: 850px) {
  #inventoryDialog .inventory-dialog-head,
  .inventory-dialog .inventory-dialog-head {
    min-height: 108px !important;
    padding-top: 18px !important;
    padding-bottom: 16px !important;
  }

  #inventoryDialog .inventory-showcase-rework .inventory-page-grid,
  .inventory-dialog .inventory-showcase-rework .inventory-page-grid {
    grid-auto-rows: minmax(132px, 1fr) !important;
  }

  #inventoryDialog .inventory-showcase-rework .inventory-shelf-slot,
  .inventory-dialog .inventory-showcase-rework .inventory-shelf-slot {
    min-height: 132px !important;
  }

  #inventoryDialog .inventory-showcase-layout,
  .inventory-dialog .inventory-showcase-layout {
    grid-template-columns: 248px minmax(0, 1fr) !important;
  }
}

@media (max-width: 760px) {
  #inventoryDialog .inventory-showcase-layout,
  .inventory-dialog .inventory-showcase-layout {
    grid-template-columns: 1fr !important;
  }

  #inventoryDialog .inventory-selected-avatar,
  .inventory-dialog .inventory-selected-avatar {
    inset: 42px 20px 110px 20px !important;
  }
}


/* v7.0.273 Collection tabs polish + selected preview centering.
   Collection only: align rarity filter chips with the newer premium tab style and keep the selected character card smaller/centered. */

#inventoryDialog .inventory-filter-row,
.inventory-dialog .inventory-filter-row {
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 2px 4px !important;
  border-radius: 18px !important;
  background: rgba(0,0,0,.20) !important;
  border: 1px solid rgba(222,198,160,.10) !important;
}

#inventoryDialog .inventory-filter-chip,
.inventory-dialog .inventory-filter-chip {
  min-height: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(222,198,160,.16) !important;
  background: linear-gradient(180deg, rgba(232,220,200,.045), rgba(0,0,0,.16)) !important;
  color: rgba(246,237,219,.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
  text-transform: uppercase !important;
  letter-spacing: .10em !important;
  font-size: .61rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

#inventoryDialog .inventory-filter-chip span,
.inventory-dialog .inventory-filter-chip span {
  color: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  font-weight: inherit !important;
}

#inventoryDialog .inventory-filter-chip em,
.inventory-dialog .inventory-filter-chip em {
  min-width: 18px !important;
  height: 18px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.26) !important;
  border: 1px solid rgba(222,198,160,.11) !important;
  color: rgba(255,231,191,.82) !important;
  font-style: normal !important;
  font-size: .58rem !important;
  letter-spacing: 0 !important;
}

#inventoryDialog .inventory-filter-chip.active,
.inventory-dialog .inventory-filter-chip.active {
  color: #1f160b !important;
  border-color: rgba(255,232,176,.55) !important;
  background: linear-gradient(180deg, rgba(255,231,170,.94), rgba(198,152,82,.86)) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

#inventoryDialog .inventory-filter-chip.active em,
.inventory-dialog .inventory-filter-chip.active em {
  background: rgba(42,29,12,.20) !important;
  border-color: rgba(42,29,12,.18) !important;
  color: rgba(35,24,12,.88) !important;
}

#inventoryDialog .inventory-filter-chip.is-empty,
.inventory-dialog .inventory-filter-chip.is-empty {
  opacity: .62 !important;
}

#inventoryDialog .inventory-showcase-layout,
.inventory-dialog .inventory-showcase-layout {
  grid-template-columns: 238px minmax(0, 1fr) !important;
  gap: 16px !important;
}

#inventoryDialog .inventory-selected-showcase,
.inventory-dialog .inventory-selected-showcase,
#inventoryDialog .inventory-character-passport,
.inventory-dialog .inventory-character-passport {
  max-width: 238px !important;
  justify-self: stretch !important;
  overflow: hidden !important;
}

#inventoryDialog .inventory-character-passport .inventory-passport-header,
.inventory-dialog .inventory-character-passport .inventory-passport-header {
  min-height: 34px !important;
}

#inventoryDialog .inventory-selected-avatar,
.inventory-dialog .inventory-selected-avatar,
#inventoryDialog .inventory-character-passport .inventory-selected-avatar,
.inventory-dialog .inventory-character-passport .inventory-selected-avatar {
  inset: 52px 24px 118px 24px !important;
  transform: translateX(-4px) !important;
  transform-origin: center center !important;
}

#inventoryDialog .inventory-selected-avatar canvas,
.inventory-dialog .inventory-selected-avatar canvas,
#inventoryDialog .inventory-character-passport .inventory-selected-avatar canvas,
.inventory-dialog .inventory-character-passport .inventory-selected-avatar canvas {
  transform: translateX(-2px) scale(.84) !important;
  transform-origin: center center !important;
}

#inventoryDialog .inventory-selected-info,
.inventory-dialog .inventory-selected-info,
#inventoryDialog .inventory-character-passport .inventory-selected-info,
.inventory-dialog .inventory-character-passport .inventory-selected-info {
  left: 14px !important;
  right: 14px !important;
  bottom: 12px !important;
  padding: 10px 12px 12px !important;
  gap: 3px !important;
  text-align: center !important;
  border-radius: 18px !important;
}

#inventoryDialog .inventory-character-passport .inventory-selected-info strong,
.inventory-dialog .inventory-character-passport .inventory-selected-info strong {
  font-size: 1.02rem !important;
  line-height: 1.05 !important;
}

#inventoryDialog .inventory-character-passport .inventory-selected-info span,
.inventory-dialog .inventory-character-passport .inventory-selected-info span {
  font-size: .68rem !important;
}

#inventoryDialog .inventory-selected-action,
.inventory-dialog .inventory-selected-action,
#inventoryDialog .inventory-character-passport .inventory-selected-action,
.inventory-dialog .inventory-character-passport .inventory-selected-action {
  min-height: 32px !important;
  padding: 7px 12px !important;
  border-radius: 14px !important;
  font-size: .65rem !important;
}

@media (min-width: 761px) and (max-height: 850px) {
  #inventoryDialog .inventory-showcase-layout,
  .inventory-dialog .inventory-showcase-layout {
    grid-template-columns: 226px minmax(0, 1fr) !important;
  }

  #inventoryDialog .inventory-selected-showcase,
  .inventory-dialog .inventory-selected-showcase,
  #inventoryDialog .inventory-character-passport,
  .inventory-dialog .inventory-character-passport {
    max-width: 226px !important;
  }

  #inventoryDialog .inventory-selected-avatar,
  .inventory-dialog .inventory-selected-avatar,
  #inventoryDialog .inventory-character-passport .inventory-selected-avatar,
  .inventory-dialog .inventory-character-passport .inventory-selected-avatar {
    inset: 48px 24px 112px 24px !important;
  }
}

@media (max-width: 760px) {
  #inventoryDialog .inventory-showcase-layout,
  .inventory-dialog .inventory-showcase-layout {
    grid-template-columns: 1fr !important;
  }

  #inventoryDialog .inventory-selected-showcase,
  .inventory-dialog .inventory-selected-showcase,
  #inventoryDialog .inventory-character-passport,
  .inventory-dialog .inventory-character-passport {
    max-width: none !important;
  }

  #inventoryDialog .inventory-filter-row,
  .inventory-dialog .inventory-filter-row {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }
}


/* v7.0.274 Unified Modal Shell Polish.
   UI-only: line up Season + Collection with the Missions/Ranks large banner shell and fix Collection selected preview proportions. */

:root {
  --rq-unified-modal-w: min(1060px, calc(100dvw - 42px));
  --rq-unified-modal-h: min(720px, calc(100dvh - 38px));
  --rq-unified-head-h: 118px;
}

#seasonDialog .season-dialog-shell-premium,
#seasonDialog .season-dialog-shell,
#inventoryDialog.inventory-dialog,
.inventory-dialog {
  width: var(--rq-unified-modal-w) !important;
  height: var(--rq-unified-modal-h) !important;
  max-height: var(--rq-unified-modal-h) !important;
  margin: 19px auto !important;
  border-radius: 28px !important;
}

#seasonDialog .season-dialog-shell-premium,
#seasonDialog .season-dialog-shell {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
  border: 1px solid rgba(222,198,160,.22) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(216,176,106,.10), transparent 34%),
    linear-gradient(180deg, rgba(28,22,15,.98), rgba(11,9,7,.98)) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,244,224,.07) !important;
}

#seasonDialog .season-dialog-head-premium,
#seasonDialog .season-dialog-head,
#inventoryDialog .inventory-dialog-head,
.inventory-dialog .inventory-dialog-head {
  min-height: var(--rq-unified-head-h) !important;
  padding: 20px 74px 18px !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.44)),
    radial-gradient(circle at 50% 16%, rgba(255,211,128,.16), transparent 34%),
    url('/assets/ui/leaderboards/hall-of-fame-header-bg.png') center/cover no-repeat !important;
  border-bottom: 1px solid rgba(222,198,160,.14) !important;
}

#seasonDialog .season-dialog-head > div:not(.season-dialog-titlemark),
#inventoryDialog .inventory-dialog-head > div,
.inventory-dialog .inventory-dialog-head > div {
  display: grid !important;
  justify-items: center !important;
  gap: 5px !important;
}

#seasonDialog .season-dialog-titlemark {
  display: none !important;
}

#seasonDialog .season-dialog-head span,
#inventoryDialog .inventory-dialog-head span,
.inventory-dialog .inventory-dialog-head span {
  width: max-content !important;
  margin: 0 !important;
  padding: 4px 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,231,191,.20) !important;
  background: rgba(0,0,0,.22) !important;
  color: rgba(255,232,176,.96) !important;
  font-size: .62rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-weight: 950 !important;
}

#seasonDialog .season-dialog-head strong,
#inventoryDialog .inventory-dialog-head strong,
.inventory-dialog .inventory-dialog-head strong {
  margin: 0 !important;
  color: #f8efe0 !important;
  font-size: clamp(2.15rem, 4vw, 3.2rem) !important;
  line-height: .92 !important;
  letter-spacing: -.055em !important;
  text-shadow: 0 10px 28px rgba(0,0,0,.52) !important;
}

#seasonDialog .season-dialog-head small,
#inventoryDialog .inventory-dialog-head small,
.inventory-dialog .inventory-dialog-head small {
  margin: 0 !important;
  max-width: 58ch !important;
  color: rgba(246,237,219,.75) !important;
  font-size: .84rem !important;
  line-height: 1.3 !important;
}

#seasonDialog .season-close-btn,
#inventoryDialog .dialog-close-btn,
.inventory-dialog .dialog-close-btn {
  top: 22px !important;
  right: 24px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,244,224,.50) !important;
  background: rgba(0,0,0,.18) !important;
  color: rgba(255,244,224,.92) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.34) !important;
}

#seasonDialog .season-dialog-body-premium,
#seasonDialog .season-dialog-body,
#inventoryDialog .inventory-dialog-body,
.inventory-dialog .inventory-dialog-body {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

#seasonDialog .season-dialog-body-premium,
#seasonDialog .season-dialog-body {
  padding: 12px 18px 16px !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 10px !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255,214,126,.06), transparent 32%),
    linear-gradient(180deg, rgba(28,22,15,.48), rgba(9,7,5,.18)) !important;
}

#seasonDialog .season-tabs-hero-overhaul {
  min-height: 108px !important;
  grid-template-columns: minmax(0, 1fr) 210px !important;
  border-radius: 22px !important;
}

#seasonDialog .season-hero-copy {
  padding: 16px 20px !important;
}

#seasonDialog .season-hero-copy strong {
  font-size: clamp(2rem, 3.4vw, 2.72rem) !important;
}

#seasonDialog .season-hero-rank-card {
  min-height: 78px !important;
  margin: 10px !important;
  padding: 10px 12px !important;
}

#seasonDialog .season-hero-rank-card img {
  width: 42px !important;
  height: 42px !important;
}

#seasonDialog .season-tabbar-overhaul,
#inventoryDialog .inventory-filter-row,
.inventory-dialog .inventory-filter-row {
  min-height: 38px !important;
  padding: 3px 5px !important;
  border-radius: 18px !important;
  background: rgba(0,0,0,.20) !important;
  border: 1px solid rgba(222,198,160,.10) !important;
}

#seasonDialog .season-tabbar-overhaul button,
#inventoryDialog .inventory-filter-chip,
.inventory-dialog .inventory-filter-chip {
  min-height: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  font-size: .61rem !important;
  letter-spacing: .10em !important;
}

#seasonDialog .season-tabbar-overhaul button.active,
#inventoryDialog .inventory-filter-chip.active,
.inventory-dialog .inventory-filter-chip.active {
  color: #1f160b !important;
  border-color: rgba(255,232,176,.55) !important;
  background: linear-gradient(180deg, rgba(255,231,170,.94), rgba(198,152,82,.86)) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

#seasonDialog .season-tab-panels-overhaul,
#seasonDialog .season-tab-panel.active {
  min-height: 0 !important;
  overflow: hidden !important;
}

#seasonDialog .season-overview-grid.active {
  min-height: 0 !important;
}

/* Collection final fit: keep the big selected card elegant, centered and not wider/taller than the grid needs. */
#inventoryDialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework,
.inventory-dialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework {
  padding: 10px 18px 14px !important;
  gap: 7px !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-collection-topbar,
.inventory-dialog .inventory-showcase-rework .inventory-collection-topbar {
  min-height: 50px !important;
  padding: 7px 13px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
}

#inventoryDialog .inventory-progress-block strong,
.inventory-dialog .inventory-progress-block strong {
  font-size: .76rem !important;
}

#inventoryDialog .inventory-progress-meter,
.inventory-dialog .inventory-progress-meter {
  width: min(260px, 100%) !important;
  height: 4px !important;
}

#inventoryDialog .inventory-showcase-layout,
.inventory-dialog .inventory-showcase-layout {
  grid-template-columns: 210px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

#inventoryDialog .inventory-selected-showcase,
.inventory-dialog .inventory-selected-showcase,
#inventoryDialog .inventory-character-passport,
.inventory-dialog .inventory-character-passport {
  max-width: 210px !important;
  width: 210px !important;
  justify-self: start !important;
}

#inventoryDialog .inventory-character-passport .inventory-passport-header,
.inventory-dialog .inventory-character-passport .inventory-passport-header {
  min-height: 31px !important;
}

#inventoryDialog .inventory-selected-avatar,
.inventory-dialog .inventory-selected-avatar,
#inventoryDialog .inventory-character-passport .inventory-selected-avatar,
.inventory-dialog .inventory-character-passport .inventory-selected-avatar {
  inset: 48px 30px 116px 30px !important;
  transform: translateX(-9px) !important;
  transform-origin: center center !important;
}

#inventoryDialog .inventory-selected-avatar canvas,
.inventory-dialog .inventory-selected-avatar canvas,
#inventoryDialog .inventory-character-passport .inventory-selected-avatar canvas,
.inventory-dialog .inventory-character-passport .inventory-selected-avatar canvas {
  transform: translateX(-8px) scale(.74) !important;
  transform-origin: center center !important;
}

#inventoryDialog .inventory-selected-info,
.inventory-dialog .inventory-selected-info,
#inventoryDialog .inventory-character-passport .inventory-selected-info,
.inventory-dialog .inventory-character-passport .inventory-selected-info {
  left: 12px !important;
  right: 12px !important;
  bottom: 10px !important;
  padding: 8px 10px 10px !important;
  border-radius: 16px !important;
}

#inventoryDialog .inventory-character-passport .inventory-selected-info strong,
.inventory-dialog .inventory-character-passport .inventory-selected-info strong {
  font-size: .95rem !important;
}

#inventoryDialog .inventory-selected-action,
.inventory-dialog .inventory-selected-action,
#inventoryDialog .inventory-character-passport .inventory-selected-action,
.inventory-dialog .inventory-character-passport .inventory-selected-action {
  min-height: 30px !important;
  padding: 6px 10px !important;
  font-size: .62rem !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-page-grid,
.inventory-dialog .inventory-showcase-rework .inventory-page-grid {
  grid-auto-rows: minmax(150px, 1fr) !important;
  gap: 10px !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-shelf-slot,
.inventory-dialog .inventory-showcase-rework .inventory-shelf-slot {
  min-height: 150px !important;
}

@media (min-width: 761px) and (max-height: 850px) {
  :root {
    --rq-unified-modal-h: min(690px, calc(100dvh - 32px));
    --rq-unified-head-h: 104px;
  }

  #seasonDialog .season-tabs-hero-overhaul {
    min-height: 96px !important;
  }

  #inventoryDialog .inventory-showcase-layout,
  .inventory-dialog .inventory-showcase-layout {
    grid-template-columns: 202px minmax(0, 1fr) !important;
  }

  #inventoryDialog .inventory-selected-showcase,
  .inventory-dialog .inventory-selected-showcase,
  #inventoryDialog .inventory-character-passport,
  .inventory-dialog .inventory-character-passport {
    max-width: 202px !important;
    width: 202px !important;
  }

  #inventoryDialog .inventory-selected-avatar,
  .inventory-dialog .inventory-selected-avatar,
  #inventoryDialog .inventory-character-passport .inventory-selected-avatar,
  .inventory-dialog .inventory-character-passport .inventory-selected-avatar {
    inset: 45px 30px 108px 30px !important;
  }

  #inventoryDialog .inventory-showcase-rework .inventory-page-grid,
  .inventory-dialog .inventory-showcase-rework .inventory-page-grid {
    grid-auto-rows: minmax(132px, 1fr) !important;
  }

  #inventoryDialog .inventory-showcase-rework .inventory-shelf-slot,
  .inventory-dialog .inventory-showcase-rework .inventory-shelf-slot {
    min-height: 132px !important;
  }
}

@media (max-width: 760px) {
  :root {
    --rq-unified-modal-w: calc(100dvw - 14px);
    --rq-unified-modal-h: calc(100dvh - 14px);
    --rq-unified-head-h: 112px;
  }

  #seasonDialog .season-dialog-head-premium,
  #seasonDialog .season-dialog-head,
  #inventoryDialog .inventory-dialog-head,
  .inventory-dialog .inventory-dialog-head {
    padding: 18px 58px 16px !important;
  }

  #seasonDialog .season-tabs-hero-overhaul,
  #inventoryDialog .inventory-showcase-layout,
  .inventory-dialog .inventory-showcase-layout,
  #inventoryDialog .inventory-showcase-rework .inventory-collection-topbar,
  .inventory-dialog .inventory-showcase-rework .inventory-collection-topbar {
    grid-template-columns: 1fr !important;
  }

  #inventoryDialog .inventory-selected-showcase,
  .inventory-dialog .inventory-selected-showcase,
  #inventoryDialog .inventory-character-passport,
  .inventory-dialog .inventory-character-passport {
    max-width: none !important;
    width: 100% !important;
  }
}


/* v7.0.275 Unified 1200x800 Modal Frame.
   UI-only: Collection, Missions, Season and Hall/Ranks now share the same maximum outer shell size and header scale. */

:root {
  --rq-mega-modal-w: min(1200px, calc(100dvw - 42px));
  --rq-mega-modal-h: min(800px, calc(100dvh - 36px));
  --rq-mega-head-h: 128px;
}

#menuLeaderboardDialog.hall-dialog,
#missionsDialog.missions-dialog,
#seasonDialog.season-dialog,
#inventoryDialog.inventory-dialog,
.inventory-dialog {
  width: var(--rq-mega-modal-w) !important;
  height: var(--rq-mega-modal-h) !important;
  max-width: var(--rq-mega-modal-w) !important;
  max-height: var(--rq-mega-modal-h) !important;
  margin: 18px auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

#menuLeaderboardDialog .hall-of-fame-card,
#missionsDialog .missions-dialog-card,
#seasonDialog .season-dialog-shell-premium,
#seasonDialog .season-dialog-shell,
#inventoryDialog .inventory-dialog-shell,
.inventory-dialog .inventory-dialog-shell {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 28px !important;
  overflow: hidden !important;
}

#menuLeaderboardDialog .hall-header,
#missionsDialog .missions-header,
#seasonDialog .season-dialog-head-premium,
#seasonDialog .season-dialog-head,
#inventoryDialog .inventory-dialog-head,
.inventory-dialog .inventory-dialog-head {
  min-height: var(--rq-mega-head-h) !important;
  height: var(--rq-mega-head-h) !important;
  padding: 22px 82px 20px !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.44)),
    radial-gradient(circle at 50% 16%, rgba(255,211,128,.16), transparent 34%),
    url('/assets/ui/leaderboards/hall-of-fame-header-bg.png') center/cover no-repeat !important;
  border-bottom: 1px solid rgba(222,198,160,.14) !important;
}

#menuLeaderboardDialog .hall-header > div,
#missionsDialog .missions-header > div,
#seasonDialog .season-dialog-head > div:not(.season-dialog-titlemark),
#inventoryDialog .inventory-dialog-head > div,
.inventory-dialog .inventory-dialog-head > div {
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 5px !important;
  max-width: 760px !important;
}

#menuLeaderboardDialog .hall-header h2,
#missionsDialog .missions-header h2,
#seasonDialog .season-dialog-head strong,
#inventoryDialog .inventory-dialog-head strong,
.inventory-dialog .inventory-dialog-head strong {
  margin: 0 !important;
  color: #f8efe0 !important;
  font-size: clamp(2.45rem, 4.1vw, 3.55rem) !important;
  line-height: .92 !important;
  letter-spacing: -.055em !important;
  text-shadow: 0 10px 28px rgba(0,0,0,.52) !important;
}

#menuLeaderboardDialog .hall-kicker,
#missionsDialog .missions-header span,
#seasonDialog .season-dialog-head span,
#inventoryDialog .inventory-dialog-head span,
.inventory-dialog .inventory-dialog-head span {
  width: max-content !important;
  margin: 0 !important;
  padding: 4px 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,231,191,.20) !important;
  background: rgba(0,0,0,.22) !important;
  color: rgba(255,232,176,.96) !important;
  font-size: .62rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-weight: 950 !important;
}

#menuLeaderboardDialog .hall-header p,
#missionsDialog .missions-header p,
#seasonDialog .season-dialog-head small,
#inventoryDialog .inventory-dialog-head small,
.inventory-dialog .inventory-dialog-head small {
  margin: 0 !important;
  max-width: 60ch !important;
  color: rgba(246,237,219,.75) !important;
  font-size: .86rem !important;
  line-height: 1.3 !important;
}

#menuLeaderboardDialog .hall-close-btn,
#missionsDialog .missions-close-btn,
#seasonDialog .season-close-btn,
#inventoryDialog .dialog-close-btn,
.inventory-dialog .dialog-close-btn {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,244,224,.50) !important;
  background: rgba(0,0,0,.18) !important;
  color: rgba(255,244,224,.92) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.34) !important;
}

#menuLeaderboardDialog .hall-leaderboard-list,
#missionsDialog .missions-body,
#seasonDialog .season-dialog-body-premium,
#seasonDialog .season-dialog-body,
#inventoryDialog .inventory-dialog-body,
.inventory-dialog .inventory-dialog-body {
  min-height: 0 !important;
  height: calc(100% - var(--rq-mega-head-h)) !important;
  max-height: calc(100% - var(--rq-mega-head-h)) !important;
  overflow: hidden !important;
}

#menuLeaderboardDialog .hall-season-tabs,
#seasonDialog .season-tabbar-overhaul,
#inventoryDialog .inventory-filter-row,
.inventory-dialog .inventory-filter-row {
  min-height: 42px !important;
  padding: 4px 6px !important;
  border-radius: 20px !important;
  background: rgba(0,0,0,.22) !important;
  border: 1px solid rgba(222,198,160,.11) !important;
}

#menuLeaderboardDialog .hall-season-tabs .leaderboard-tab,
#seasonDialog .season-tabbar-overhaul button,
#inventoryDialog .inventory-filter-chip,
.inventory-dialog .inventory-filter-chip {
  min-height: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  font-size: .64rem !important;
  letter-spacing: .10em !important;
}

/* Bigger 1200px shell gives Collection room again, but keep the selected card controlled. */
#inventoryDialog .inventory-showcase-layout,
.inventory-dialog .inventory-showcase-layout {
  grid-template-columns: 235px minmax(0, 1fr) !important;
  gap: 20px !important;
}

#inventoryDialog .inventory-selected-showcase,
.inventory-dialog .inventory-selected-showcase,
#inventoryDialog .inventory-character-passport,
.inventory-dialog .inventory-character-passport {
  max-width: 235px !important;
  width: 235px !important;
}

#inventoryDialog .inventory-selected-avatar,
.inventory-dialog .inventory-selected-avatar,
#inventoryDialog .inventory-character-passport .inventory-selected-avatar,
.inventory-dialog .inventory-character-passport .inventory-selected-avatar {
  inset: 50px 34px 116px 34px !important;
  transform: translateX(-7px) !important;
}

#inventoryDialog .inventory-selected-avatar canvas,
.inventory-dialog .inventory-selected-avatar canvas,
#inventoryDialog .inventory-character-passport .inventory-selected-avatar canvas,
.inventory-dialog .inventory-character-passport .inventory-selected-avatar canvas {
  transform: translateX(-6px) scale(.78) !important;
}

@media (min-width: 761px) and (max-height: 850px) {
  :root {
    --rq-mega-modal-h: min(760px, calc(100dvh - 32px));
    --rq-mega-head-h: 116px;
  }

  #menuLeaderboardDialog .hall-header h2,
  #missionsDialog .missions-header h2,
  #seasonDialog .season-dialog-head strong,
  #inventoryDialog .inventory-dialog-head strong,
  .inventory-dialog .inventory-dialog-head strong {
    font-size: clamp(2.25rem, 3.8vw, 3.25rem) !important;
  }
}

@media (max-width: 760px) {
  :root {
    --rq-mega-modal-w: calc(100dvw - 14px);
    --rq-mega-modal-h: calc(100dvh - 14px);
    --rq-mega-head-h: 112px;
  }

  #menuLeaderboardDialog.hall-dialog,
  #missionsDialog.missions-dialog,
  #seasonDialog.season-dialog,
  #inventoryDialog.inventory-dialog,
  .inventory-dialog {
    margin: 7px auto !important;
  }

  #menuLeaderboardDialog .hall-header,
  #missionsDialog .missions-header,
  #seasonDialog .season-dialog-head-premium,
  #seasonDialog .season-dialog-head,
  #inventoryDialog .inventory-dialog-head,
  .inventory-dialog .inventory-dialog-head {
    padding: 18px 58px 16px !important;
  }

  #inventoryDialog .inventory-showcase-layout,
  .inventory-dialog .inventory-showcase-layout {
    grid-template-columns: 1fr !important;
  }

  #inventoryDialog .inventory-selected-showcase,
  .inventory-dialog .inventory-selected-showcase,
  #inventoryDialog .inventory-character-passport,
  .inventory-dialog .inventory-character-passport {
    max-width: none !important;
    width: 100% !important;
  }
}


/* v7.0.276 Unified Modal Centering + Internal Layout System.
   UI-only: centers the main menu dialogs and aligns their 1200x800 shell/header/body behavior. */

:root {
  --rq-menu-modal-w: min(1200px, calc(100dvw - 42px));
  --rq-menu-modal-h: min(800px, calc(100dvh - 36px));
  --rq-menu-header-h: 128px;
  --rq-menu-body-h: calc(var(--rq-menu-modal-h) - var(--rq-menu-header-h));
}

/* Native dialog centering: override older top-margin based layouts. */
#menuLeaderboardDialog.hall-dialog,
#missionsDialog.missions-dialog,
#seasonDialog.season-dialog,
#inventoryDialog.inventory-dialog,
.inventory-dialog {
  position: fixed !important;
  inset: 0 !important;
  margin: auto !important;
  width: var(--rq-menu-modal-w) !important;
  height: var(--rq-menu-modal-h) !important;
  max-width: var(--rq-menu-modal-w) !important;
  max-height: var(--rq-menu-modal-h) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

#menuLeaderboardDialog::backdrop,
#missionsDialog::backdrop,
#seasonDialog::backdrop,
#inventoryDialog::backdrop,
.inventory-dialog::backdrop {
  background: rgba(0,0,0,.72) !important;
  backdrop-filter: blur(9px) brightness(.75) !important;
}

/* Every major menu card becomes the same 2-row grid: header + content. */
#menuLeaderboardDialog .hall-of-fame-card,
#missionsDialog .missions-dialog-card,
#seasonDialog .season-dialog-shell-premium,
#seasonDialog .season-dialog-shell,
#inventoryDialog .inventory-dialog-shell,
.inventory-dialog .inventory-dialog-shell {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: grid !important;
  grid-template-rows: var(--rq-menu-header-h) minmax(0, 1fr) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 30px !important;
}

#menuLeaderboardDialog .hall-header,
#missionsDialog .missions-header,
#seasonDialog .season-dialog-head-premium,
#seasonDialog .season-dialog-head,
#inventoryDialog .inventory-dialog-head,
.inventory-dialog .inventory-dialog-head {
  grid-row: 1 !important;
  min-height: var(--rq-menu-header-h) !important;
  height: var(--rq-menu-header-h) !important;
  max-height: var(--rq-menu-header-h) !important;
  padding: 22px 88px 20px !important;
}

/* Main content row: all inner UI lives inside the same available height. */
#menuLeaderboardDialog .hall-leaderboard-list,
#missionsDialog .missions-status,
#missionsDialog .missions-body,
#seasonDialog .season-dialog-body-premium,
#seasonDialog .season-dialog-body,
#inventoryDialog .inventory-dialog-body,
.inventory-dialog .inventory-dialog-body {
  min-height: 0 !important;
}

#menuLeaderboardDialog .hall-leaderboard-list,
#seasonDialog .season-dialog-body-premium,
#seasonDialog .season-dialog-body,
#inventoryDialog .inventory-dialog-body,
.inventory-dialog .inventory-dialog-body {
  grid-row: 2 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

/* Missions has status + body nodes directly under the card, so force both into the body row. */
#missionsDialog .missions-status {
  grid-row: 2 !important;
  align-self: start !important;
  margin: 16px 22px 0 !important;
  min-height: 0 !important;
  max-height: 54px !important;
  z-index: 2 !important;
}

#missionsDialog .missions-body {
  grid-row: 2 !important;
  height: 100% !important;
  max-height: 100% !important;
  padding: 74px 22px 22px !important;
  overflow: hidden !important;
  display: grid !important;
  align-content: start !important;
}

#missionsDialog .missions-body .missions-unified-board,
#missionsDialog .missions-body .missions-panel,
#missionsDialog .missions-body .missions-content,
#missionsDialog .missions-body > *:first-child {
  max-height: calc(var(--rq-menu-body-h) - 98px) !important;
  overflow: hidden !important;
}

/* Season content: hero + tabbar + panels must fit under the common header. */
#seasonDialog .season-dialog-body-premium,
#seasonDialog .season-dialog-body {
  padding: 18px 22px 22px !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 12px !important;
}

#seasonDialog .season-tabs-hero-overhaul {
  min-height: 118px !important;
  max-height: 132px !important;
}

#seasonDialog .season-tab-panels-overhaul,
#seasonDialog .season-tab-panel.active {
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

/* Collection content: compact topbar, tab strip, then the shelf grid. */
#inventoryDialog .inventory-dialog-body,
.inventory-dialog .inventory-dialog-body {
  padding: 18px 22px 22px !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 10px !important;
}

#inventoryDialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework,
.inventory-dialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 10px !important;
  overflow: hidden !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-collection-topbar,
.inventory-dialog .inventory-showcase-rework .inventory-collection-topbar {
  min-height: 56px !important;
  max-height: 66px !important;
  padding: 10px 16px !important;
}

#inventoryDialog .inventory-showcase-layout,
.inventory-dialog .inventory-showcase-layout {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-page-grid,
.inventory-dialog .inventory-showcase-rework .inventory-page-grid {
  min-height: 0 !important;
  max-height: calc(var(--rq-menu-body-h) - 150px) !important;
  overflow: hidden !important;
}

/* Hall/Ranks: keep the reference style, just center and constrain content row. */
#menuLeaderboardDialog .hall-leaderboard-list {
  padding: 22px !important;
}

#menuLeaderboardDialog .hall-prestige-board,
#menuLeaderboardDialog .season-hall-board,
#menuLeaderboardDialog .season-winners-board {
  max-height: calc(var(--rq-menu-body-h) - 44px) !important;
  overflow: hidden !important;
}

/* Close buttons line up across all shells. */
#menuLeaderboardDialog .hall-close-btn,
#missionsDialog .missions-close-btn,
#seasonDialog .season-close-btn,
#inventoryDialog .dialog-close-btn,
.inventory-dialog .dialog-close-btn {
  top: 24px !important;
  right: 24px !important;
}

@media (min-width: 761px) and (max-height: 850px) {
  :root {
    --rq-menu-modal-h: min(760px, calc(100dvh - 32px));
    --rq-menu-header-h: 116px;
  }

  #missionsDialog .missions-body {
    padding-top: 68px !important;
  }

  #seasonDialog .season-tabs-hero-overhaul {
    min-height: 106px !important;
    max-height: 118px !important;
  }
}

@media (max-width: 760px) {
  :root {
    --rq-menu-modal-w: calc(100dvw - 14px);
    --rq-menu-modal-h: calc(100dvh - 14px);
    --rq-menu-header-h: 112px;
  }

  #menuLeaderboardDialog.hall-dialog,
  #missionsDialog.missions-dialog,
  #seasonDialog.season-dialog,
  #inventoryDialog.inventory-dialog,
  .inventory-dialog {
    inset: 7px !important;
    margin: auto !important;
    width: var(--rq-menu-modal-w) !important;
    height: var(--rq-menu-modal-h) !important;
  }

  #menuLeaderboardDialog .hall-header,
  #missionsDialog .missions-header,
  #seasonDialog .season-dialog-head-premium,
  #seasonDialog .season-dialog-head,
  #inventoryDialog .inventory-dialog-head,
  .inventory-dialog .inventory-dialog-head {
    padding: 18px 58px 16px !important;
  }
}


/* v7.0.277 Unified Menu Layout Fix.
   UI-only: the 1200x800 shell is kept, but Collection, Missions and Season now fill the available body height correctly. */

:root {
  --rq-menu-modal-w: min(1200px, calc(100dvw - 42px));
  --rq-menu-modal-h: min(800px, calc(100dvh - 36px));
  --rq-menu-header-h: 128px;
  --rq-menu-body-h: calc(var(--rq-menu-modal-h) - var(--rq-menu-header-h));
}

/* Keep the centered giant shell stable and remove old top-heavy card behavior. */
#missionsDialog .missions-dialog-card,
#seasonDialog .season-dialog-shell-premium,
#seasonDialog .season-dialog-shell,
#inventoryDialog .inventory-dialog-shell,
.inventory-dialog .inventory-dialog-shell {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: var(--rq-menu-header-h) minmax(0, 1fr) !important;
  overflow: hidden !important;
}

/* MISSIONS: use the tall shell. Overview top, contracts expanded, chest as real bottom panel. */
#missionsDialog .missions-status {
  display: none !important;
}

#missionsDialog .missions-body {
  grid-row: 2 !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 22px 22px 24px !important;
  display: grid !important;
  grid-template-rows: 96px minmax(275px, 1fr) 126px !important;
  gap: 14px !important;
  overflow: hidden !important;
  align-content: stretch !important;
}

#missionsDialog .missions-overview-unified {
  min-height: 0 !important;
  height: 96px !important;
  align-self: stretch !important;
  grid-template-columns: 74px minmax(0, 1fr) minmax(390px, .92fr) !important;
  padding: 14px 18px !important;
}

#missionsDialog .missions-overview-art img {
  width: 64px !important;
  height: 64px !important;
}

#missionsDialog .missions-overview-copy strong {
  font-size: 1.18rem !important;
}

#missionsDialog .missions-overview-stats div {
  min-height: 58px !important;
  padding: 10px 12px !important;
}

#missionsDialog .missions-list-unified {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

#missionsDialog .mission-card-polished {
  height: 100% !important;
  min-height: 0 !important;
  padding: 16px !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: stretch !important;
}

#missionsDialog .mission-card-topline {
  gap: 12px !important;
  align-items: start !important;
}

#missionsDialog .mission-icon-frame {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  border-radius: 18px !important;
}

#missionsDialog .mission-icon-frame img {
  width: 52px !important;
  height: 52px !important;
  object-fit: contain !important;
}

#missionsDialog .mission-card-copy strong {
  font-size: 1.05rem !important;
  line-height: 1.08 !important;
}

#missionsDialog .mission-card-copy p {
  font-size: .76rem !important;
  line-height: 1.38 !important;
  max-height: none !important;
}

#missionsDialog .mission-card-polished .mission-progress-block {
  align-self: end !important;
  display: grid !important;
  gap: 10px !important;
}

#missionsDialog .mission-card-footer {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

#missionsDialog .mission-reward-chip {
  min-height: 52px !important;
  justify-content: center !important;
}

#missionsDialog .weekly-chest-unified {
  min-height: 0 !important;
  height: 126px !important;
  grid-template-columns: 92px minmax(0, 1fr) minmax(380px, .8fr) !important;
  padding: 16px 18px !important;
  align-self: stretch !important;
}

#missionsDialog .weekly-chest-art img {
  width: 82px !important;
  height: 82px !important;
}

#missionsDialog .weekly-chest-copy strong {
  font-size: 1.12rem !important;
}

#missionsDialog .weekly-chest-copy p {
  font-size: .80rem !important;
  line-height: 1.35 !important;
  max-height: none !important;
}

/* SEASON: scale content up for the bigger shell and make every tab panel use the body height. */
#seasonDialog .season-dialog-body-premium,
#seasonDialog .season-dialog-body {
  grid-row: 2 !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 22px 22px 24px !important;
  display: grid !important;
  grid-template-rows: 172px 42px minmax(0, 1fr) !important;
  gap: 14px !important;
  overflow: hidden !important;
}

#seasonDialog .season-tabs-hero-overhaul {
  min-height: 0 !important;
  height: 172px !important;
  max-height: 172px !important;
  grid-template-columns: minmax(0, 1fr) 236px !important;
  border-radius: 24px !important;
}

#seasonDialog .season-hero-copy {
  padding: 22px 26px !important;
}

#seasonDialog .season-hero-copy strong {
  font-size: clamp(2.45rem, 4.2vw, 3.35rem) !important;
}

#seasonDialog .season-hero-copy small {
  font-size: .92rem !important;
}

#seasonDialog .season-hero-rank-card {
  min-height: 122px !important;
  margin: 18px !important;
  padding: 16px !important;
}

#seasonDialog .season-hero-rank-card img {
  width: 56px !important;
  height: 56px !important;
}

#seasonDialog .season-tabbar-overhaul {
  min-height: 42px !important;
  height: 42px !important;
}

#seasonDialog .season-tabbar-overhaul button {
  min-height: 34px !important;
  height: 34px !important;
}

#seasonDialog .season-tabbar-overhaul button img {
  width: 22px !important;
  height: 22px !important;
}

#seasonDialog .season-tab-panels-overhaul {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

#seasonDialog .season-tab-panel.active {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#seasonDialog .season-overview-grid.active {
  grid-template-columns: minmax(0, 1.5fr) minmax(270px, .75fr) !important;
  grid-template-rows: minmax(0, 1fr) 94px !important;
  gap: 13px !important;
  height: 100% !important;
}

#seasonDialog .season-overview-main-card,
#seasonDialog .season-quick-facts-card,
#seasonDialog .season-stats-card-overhaul {
  padding: 18px !important;
}

#seasonDialog .season-overview-card-head-art > img {
  width: 98px !important;
  height: 98px !important;
}

#seasonDialog .season-rank-title {
  font-size: 1.62rem !important;
}

#seasonDialog .season-milestone-row {
  gap: 10px !important;
}

#seasonDialog .season-milestone-chip {
  min-height: 58px !important;
}

#seasonDialog .season-stat-grid-overhaul {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#seasonDialog .season-rule-grid {
  height: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

#seasonDialog .season-rule-tile {
  min-height: 0 !important;
  height: 100% !important;
  padding: 18px !important;
  align-content: start !important;
}

#seasonDialog .season-rule-tile img {
  width: 58px !important;
  height: 58px !important;
}

#seasonDialog .season-rule-tile strong {
  font-size: 1.02rem !important;
}

#seasonDialog .season-rule-tile span,
#seasonDialog .season-rule-tile p,
#seasonDialog .season-rule-tile small {
  display: block !important;
  font-size: .78rem !important;
  line-height: 1.35 !important;
  max-height: none !important;
  overflow: visible !important;
}

#seasonDialog .season-rewards-list-overhaul {
  height: 100% !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 13px !important;
}

#seasonDialog .season-reward-banner {
  min-height: 76px !important;
}

#seasonDialog .season-reward-grid {
  align-content: stretch !important;
  gap: 12px !important;
}

#seasonDialog .season-reward-row-premium {
  min-height: 0 !important;
}

#seasonDialog .season-podium-strip {
  min-height: 172px !important;
  margin-bottom: 14px !important;
}

#seasonDialog .season-top-list-overhaul {
  max-height: none !important;
  height: calc(100% - 190px) !important;
}

/* COLLECTION: the shelf must fill the 800px window without warping the selected 3D preview. */
#inventoryDialog .inventory-dialog-body,
.inventory-dialog .inventory-dialog-body {
  grid-row: 2 !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 18px 22px 24px !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  overflow: hidden !important;
}

#inventoryDialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework,
.inventory-dialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 62px 40px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-collection-topbar,
.inventory-dialog .inventory-showcase-rework .inventory-collection-topbar {
  min-height: 0 !important;
  height: 62px !important;
  padding: 10px 18px !important;
  align-items: center !important;
  border-radius: 20px !important;
}

#inventoryDialog .inventory-progress-block strong,
.inventory-dialog .inventory-progress-block strong {
  font-size: .82rem !important;
}

#inventoryDialog .inventory-progress-block em,
.inventory-dialog .inventory-progress-block em {
  font-size: .62rem !important;
}

#inventoryDialog .inventory-progress-meter,
.inventory-dialog .inventory-progress-meter {
  width: min(350px, 100%) !important;
}

#inventoryDialog .inventory-filter-row,
.inventory-dialog .inventory-filter-row {
  min-height: 0 !important;
  height: 40px !important;
  padding: 3px 5px !important;
}

#inventoryDialog .inventory-showcase-layout,
.inventory-dialog .inventory-showcase-layout {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: 250px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

#inventoryDialog .inventory-selected-showcase,
.inventory-dialog .inventory-selected-showcase,
#inventoryDialog .inventory-character-passport,
.inventory-dialog .inventory-character-passport {
  width: 250px !important;
  max-width: 250px !important;
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: 32px minmax(0, 1fr) 104px !important;
  gap: 10px !important;
  padding: 14px !important;
  overflow: hidden !important;
}

#inventoryDialog .inventory-character-passport .inventory-passport-header,
.inventory-dialog .inventory-character-passport .inventory-passport-header {
  min-height: 0 !important;
  height: 32px !important;
}

#inventoryDialog .inventory-selected-avatar,
.inventory-dialog .inventory-selected-avatar,
#inventoryDialog .inventory-character-passport .inventory-selected-avatar,
.inventory-dialog .inventory-character-passport .inventory-selected-avatar {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  transform: none !important;
  contain: layout size !important;
}

#inventoryDialog .inventory-selected-avatar canvas,
.inventory-dialog .inventory-selected-avatar canvas,
#inventoryDialog .inventory-character-passport .inventory-selected-avatar canvas,
.inventory-dialog .inventory-character-passport .inventory-selected-avatar canvas {
  width: 100% !important;
  height: 100% !important;
  transform: translateX(-4px) translateY(8px) scale(.62) !important;
  transform-origin: center center !important;
}

#inventoryDialog .inventory-selected-info,
.inventory-dialog .inventory-selected-info,
#inventoryDialog .inventory-character-passport .inventory-selected-info,
.inventory-dialog .inventory-character-passport .inventory-selected-info {
  position: relative !important;
  inset: auto !important;
  min-height: 0 !important;
  height: 104px !important;
  padding: 10px 12px !important;
  align-self: end !important;
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 4px !important;
}

#inventoryDialog .inventory-character-passport .inventory-selected-info strong,
.inventory-dialog .inventory-character-passport .inventory-selected-info strong {
  font-size: 1.02rem !important;
  line-height: 1.05 !important;
}

#inventoryDialog .inventory-selected-action,
.inventory-dialog .inventory-selected-action,
#inventoryDialog .inventory-character-passport .inventory-selected-action,
.inventory-dialog .inventory-character-passport .inventory-selected-action {
  min-height: 28px !important;
  padding: 6px 12px !important;
  font-size: .62rem !important;
}

#inventoryDialog .inventory-grid-stage,
.inventory-dialog .inventory-grid-stage {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) 34px !important;
  gap: 12px !important;
  overflow: hidden !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-page-grid,
.inventory-dialog .inventory-showcase-rework .inventory-page-grid {
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  gap: 14px !important;
  align-content: stretch !important;
  overflow: hidden !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-shelf-slot,
.inventory-dialog .inventory-showcase-rework .inventory-shelf-slot {
  min-height: 0 !important;
  height: 100% !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-shelf-slot .inventory-item.inventory-item-card,
.inventory-dialog .inventory-showcase-rework .inventory-shelf-slot .inventory-item.inventory-item-card {
  height: 100% !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-shelf-slot .inventory-card-avatar3d,
.inventory-dialog .inventory-showcase-rework .inventory-shelf-slot .inventory-card-avatar3d {
  inset: 18px 16px 40px 16px !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-pagebar,
.inventory-dialog .inventory-showcase-rework .inventory-pagebar {
  min-height: 34px !important;
  height: 34px !important;
  align-self: end !important;
}

@media (min-width: 761px) and (max-height: 850px) {
  :root {
    --rq-menu-modal-h: min(760px, calc(100dvh - 32px));
    --rq-menu-header-h: 116px;
    --rq-menu-body-h: calc(var(--rq-menu-modal-h) - var(--rq-menu-header-h));
  }

  #missionsDialog .missions-body {
    grid-template-rows: 88px minmax(250px, 1fr) 112px !important;
    gap: 12px !important;
  }

  #seasonDialog .season-dialog-body-premium,
  #seasonDialog .season-dialog-body {
    grid-template-rows: 150px 40px minmax(0, 1fr) !important;
  }

  #seasonDialog .season-tabs-hero-overhaul {
    height: 150px !important;
    max-height: 150px !important;
  }

  #inventoryDialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework,
  .inventory-dialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework {
    grid-template-rows: 56px 38px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  #inventoryDialog .inventory-showcase-layout,
  .inventory-dialog .inventory-showcase-layout {
    grid-template-columns: 232px minmax(0, 1fr) !important;
  }

  #inventoryDialog .inventory-selected-showcase,
  .inventory-dialog .inventory-selected-showcase,
  #inventoryDialog .inventory-character-passport,
  .inventory-dialog .inventory-character-passport {
    width: 232px !important;
    max-width: 232px !important;
    grid-template-rows: 30px minmax(0, 1fr) 98px !important;
  }

  #inventoryDialog .inventory-selected-avatar canvas,
  .inventory-dialog .inventory-selected-avatar canvas,
  #inventoryDialog .inventory-character-passport .inventory-selected-avatar canvas,
  .inventory-dialog .inventory-character-passport .inventory-selected-avatar canvas {
    transform: translateX(-4px) translateY(6px) scale(.58) !important;
  }
}

@media (max-width: 760px) {
  #missionsDialog .missions-body,
  #seasonDialog .season-dialog-body-premium,
  #seasonDialog .season-dialog-body,
  #inventoryDialog .inventory-dialog-body,
  .inventory-dialog .inventory-dialog-body {
    overflow-y: auto !important;
  }

  #missionsDialog .missions-body,
  #seasonDialog .season-dialog-body-premium,
  #seasonDialog .season-dialog-body,
  #inventoryDialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework,
  .inventory-dialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework {
    display: block !important;
  }

  #missionsDialog .missions-overview-unified,
  #missionsDialog .missions-list-unified,
  #missionsDialog .weekly-chest-unified,
  #seasonDialog .season-tabs-hero-overhaul,
  #seasonDialog .season-overview-grid.active,
  #seasonDialog .season-rule-grid,
  #inventoryDialog .inventory-showcase-layout,
  .inventory-dialog .inventory-showcase-layout,
  #inventoryDialog .inventory-showcase-rework .inventory-page-grid,
  .inventory-dialog .inventory-showcase-rework .inventory-page-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    height: auto !important;
  }

  #inventoryDialog .inventory-selected-showcase,
  .inventory-dialog .inventory-selected-showcase,
  #inventoryDialog .inventory-character-passport,
  .inventory-dialog .inventory-character-passport {
    width: 100% !important;
    max-width: none !important;
    min-height: 390px !important;
  }
}


/* v7.0.278 Menu polish follow-up.
   1) Collection: move pager above the grid, move filters to the footer Hall-of-Fame style,
      tighten the selected showcase width to ~220px and crop the large model more safely.
   2) Season: move tabs to the bottom and give the overview / stats area more usable height.
   3) Hall of Fame: season rules CTA now opens the Season dialog through JS listener. */

#inventoryDialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework,
.inventory-dialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework {
  grid-template-rows: 62px minmax(0, 1fr) 44px !important;
}

#inventoryDialog .inventory-collection-topbar,
.inventory-dialog .inventory-collection-topbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
}

#inventoryDialog .inventory-progress-block,
.inventory-dialog .inventory-progress-block {
  justify-items: center !important;
  text-align: center !important;
}

#inventoryDialog .inventory-progress-meter,
.inventory-dialog .inventory-progress-meter {
  width: min(320px, 100%) !important;
  margin-inline: auto !important;
}

#inventoryDialog .inventory-showcase-layout,
.inventory-dialog .inventory-showcase-layout {
  grid-template-columns: 220px minmax(0, 1fr) !important;
  gap: 16px !important;
}

#inventoryDialog .inventory-selected-showcase,
.inventory-dialog .inventory-selected-showcase,
#inventoryDialog .inventory-character-passport,
.inventory-dialog .inventory-character-passport {
  width: 220px !important;
  max-width: 220px !important;
  grid-template-rows: 32px minmax(0, 1fr) 108px !important;
}

#inventoryDialog .inventory-selected-avatar,
.inventory-dialog .inventory-selected-avatar,
#inventoryDialog .inventory-character-passport .inventory-selected-avatar,
.inventory-dialog .inventory-character-passport .inventory-selected-avatar {
  overflow: hidden !important;
}

#inventoryDialog .inventory-selected-avatar canvas,
.inventory-dialog .inventory-selected-avatar canvas,
#inventoryDialog .inventory-character-passport .inventory-selected-avatar canvas,
.inventory-dialog .inventory-character-passport .inventory-selected-avatar canvas {
  transform: translateX(-10px) translateY(10px) scale(.60) !important;
}

#inventoryDialog .inventory-grid-stage,
.inventory-dialog .inventory-grid-stage {
  grid-template-rows: 34px minmax(0, 1fr) !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-pagebar,
.inventory-dialog .inventory-showcase-rework .inventory-pagebar {
  min-height: 34px !important;
  height: 34px !important;
  align-self: start !important;
  justify-content: center !important;
}

#inventoryDialog .inventory-filter-row,
.inventory-dialog .inventory-filter-row {
  min-height: 44px !important;
  height: 44px !important;
  padding: 4px 8px !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: 999px !important;
}

#inventoryDialog .inventory-filter-chip,
.inventory-dialog .inventory-filter-chip {
  min-height: 32px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
}

#seasonDialog .season-dialog-body-premium,
#seasonDialog .season-dialog-body {
  grid-template-rows: 172px minmax(0, 1fr) 42px !important;
}

#seasonDialog .season-tab-panels-overhaul {
  grid-row: 2 !important;
}

#seasonDialog .season-tabbar-overhaul {
  grid-row: 3 !important;
  align-self: end !important;
}

#seasonDialog .season-overview-grid.active {
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .78fr) !important;
  grid-template-rows: minmax(0, 1fr) 112px !important;
}

#seasonDialog .season-overview-main-card {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

#seasonDialog .season-quick-facts-card {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

#seasonDialog .season-stats-card-overhaul {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

#seasonDialog .season-stats-grid-overhaul {
  min-height: 100% !important;
  align-items: stretch !important;
}

#seasonDialog .season-stats-grid-overhaul > div {
  min-height: 74px !important;
}

@media (min-width: 761px) and (max-height: 850px) {
  #inventoryDialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework,
  .inventory-dialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework {
    grid-template-rows: 56px minmax(0, 1fr) 42px !important;
  }

  #inventoryDialog .inventory-showcase-layout,
  .inventory-dialog .inventory-showcase-layout {
    grid-template-columns: 212px minmax(0, 1fr) !important;
  }

  #inventoryDialog .inventory-selected-showcase,
  .inventory-dialog .inventory-selected-showcase,
  #inventoryDialog .inventory-character-passport,
  .inventory-dialog .inventory-character-passport {
    width: 212px !important;
    max-width: 212px !important;
  }

  #inventoryDialog .inventory-selected-avatar canvas,
  .inventory-dialog .inventory-selected-avatar canvas,
  #inventoryDialog .inventory-character-passport .inventory-selected-avatar canvas,
  .inventory-dialog .inventory-character-passport .inventory-selected-avatar canvas {
    transform: translateX(-10px) translateY(8px) scale(.57) !important;
  }

  #seasonDialog .season-dialog-body-premium,
  #seasonDialog .season-dialog-body {
    grid-template-rows: 150px minmax(0, 1fr) 40px !important;
  }

  #seasonDialog .season-overview-grid.active {
    grid-template-rows: minmax(0, 1fr) 102px !important;
  }
}


/* v7.0.279 Final menu polish follow-up.
   Collection: top progress/shop stays high, page controls above grid, Hall-style filters sit lower as footer nav, selected preview cropped to ~220px.
   Season: bottom nav sits lower and more like Hall tabs, overview/stats/rules use the available height, rewards hero image removed. */

#inventoryDialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework,
.inventory-dialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework {
  grid-template-rows: 58px minmax(0, 1fr) 58px !important;
  gap: 8px !important;
}

#inventoryDialog .inventory-collection-topbar,
.inventory-dialog .inventory-collection-topbar {
  height: 58px !important;
  min-height: 58px !important;
  padding: 8px 18px !important;
  align-self: start !important;
}

#inventoryDialog .inventory-shop-mini,
.inventory-dialog .inventory-shop-mini {
  align-self: start !important;
  margin-top: 2px !important;
}

#inventoryDialog .inventory-progress-block,
.inventory-dialog .inventory-progress-block {
  transform: translateY(-1px) !important;
}

#inventoryDialog .inventory-filter-row-bottom,
.inventory-dialog .inventory-filter-row-bottom {
  height: 46px !important;
  min-height: 46px !important;
  align-self: end !important;
  margin-top: 4px !important;
  margin-inline: auto !important;
  width: fit-content !important;
  max-width: calc(100% - 24px) !important;
  padding: 6px 10px !important;
  background: rgba(10, 8, 6, .72) !important;
  border: 1px solid rgba(210, 169, 93, .24) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,238,196,.08) !important;
}

#inventoryDialog .inventory-filter-chip,
.inventory-dialog .inventory-filter-chip {
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(214, 172, 99, .24) !important;
  background: linear-gradient(180deg, rgba(255,238,197,.08), rgba(0,0,0,.20)) !important;
}

#inventoryDialog .inventory-filter-chip.active,
.inventory-dialog .inventory-filter-chip.active {
  background: linear-gradient(180deg, #f0d18f, #b8873f) !important;
  color: #231509 !important;
  border-color: rgba(255,239,190,.72) !important;
}

#inventoryDialog .inventory-showcase-layout,
.inventory-dialog .inventory-showcase-layout {
  grid-template-columns: 220px minmax(0, 1fr) !important;
  gap: 18px !important;
}

#inventoryDialog .inventory-selected-showcase,
.inventory-dialog .inventory-selected-showcase,
#inventoryDialog .inventory-character-passport,
.inventory-dialog .inventory-character-passport {
  width: 220px !important;
  max-width: 220px !important;
  min-width: 220px !important;
  overflow: hidden !important;
}

#inventoryDialog .inventory-selected-avatar,
.inventory-dialog .inventory-selected-avatar,
#inventoryDialog .inventory-character-passport .inventory-selected-avatar,
.inventory-dialog .inventory-character-passport .inventory-selected-avatar {
  width: 220px !important;
  max-width: 220px !important;
  overflow: hidden !important;
}

#inventoryDialog .inventory-selected-avatar canvas,
.inventory-dialog .inventory-selected-avatar canvas,
#inventoryDialog .inventory-character-passport .inventory-selected-avatar canvas,
.inventory-dialog .inventory-character-passport .inventory-selected-avatar canvas {
  width: 220px !important;
  max-width: 220px !important;
  transform: translateX(-14px) translateY(10px) scale(.63) !important;
}

#inventoryDialog .inventory-grid-stage,
.inventory-dialog .inventory-grid-stage {
  grid-template-rows: 34px minmax(0, 1fr) !important;
  gap: 10px !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-pagebar-top,
.inventory-dialog .inventory-showcase-rework .inventory-pagebar-top {
  align-self: start !important;
  justify-self: center !important;
}

#seasonDialog .season-dialog-body-premium,
#seasonDialog .season-dialog-body {
  grid-template-rows: 154px minmax(0, 1fr) 54px !important;
  gap: 12px !important;
  padding-bottom: 18px !important;
}

#seasonDialog .season-tabs-hero-overhaul {
  height: 154px !important;
  max-height: 154px !important;
}

#seasonDialog .season-tabbar-bottom,
#seasonDialog .season-tabbar-overhaul {
  height: 44px !important;
  min-height: 44px !important;
  align-self: end !important;
  justify-self: center !important;
  width: min(760px, 100%) !important;
  margin-top: 6px !important;
  border: 1px solid rgba(210,169,93,.24) !important;
  background: rgba(10,8,6,.72) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,238,196,.08) !important;
}

#seasonDialog .season-tabbar-overhaul button {
  height: 34px !important;
  min-height: 34px !important;
  border: 1px solid rgba(214,172,99,.22) !important;
}

#seasonDialog .season-overview-grid.active {
  grid-template-columns: minmax(0, 1.36fr) minmax(300px, .82fr) !important;
  grid-template-rows: minmax(0, 1fr) 130px !important;
  gap: 12px !important;
}

#seasonDialog .season-stats-card-overhaul {
  min-height: 0 !important;
  overflow: visible !important;
}

#seasonDialog .season-side-card-title {
  margin-bottom: 8px !important;
}

#seasonDialog .season-stats-grid-overhaul {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#seasonDialog .season-stats-grid-overhaul > div {
  min-height: 82px !important;
  padding: 12px 10px !important;
}

#seasonDialog .season-milestone-chip {
  min-height: 48px !important;
  padding: 8px 6px !important;
}

#seasonDialog .season-milestone-chip small,
#seasonDialog .season-milestone-chip em,
#seasonDialog .season-milestone-chip span {
  font-size: .60rem !important;
  line-height: 1.05 !important;
}

#seasonDialog .season-rules-overhaul-card,
#seasonDialog .season-rewards-overhaul-card,
#seasonDialog .season-leaderboard-overhaul-card {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
}

#seasonDialog .season-rule-grid {
  min-height: 0 !important;
  height: 100% !important;
}

#seasonDialog .season-rule-tile {
  padding: 15px 16px !important;
  gap: 6px !important;
  overflow: visible !important;
}

#seasonDialog .season-rule-tile img {
  width: 50px !important;
  height: 50px !important;
}

#seasonDialog .season-rule-tile span,
#seasonDialog .season-rule-tile p,
#seasonDialog .season-rule-tile small {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
}

#seasonDialog .season-reward-banner {
  display: none !important;
}

#seasonDialog .season-rewards-list-overhaul {
  grid-template-rows: minmax(0, 1fr) auto !important;
}

@media (min-width: 761px) and (max-height: 850px) {
  #inventoryDialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework,
  .inventory-dialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework {
    grid-template-rows: 54px minmax(0, 1fr) 54px !important;
  }

  #seasonDialog .season-dialog-body-premium,
  #seasonDialog .season-dialog-body {
    grid-template-rows: 140px minmax(0, 1fr) 50px !important;
  }

  #seasonDialog .season-tabs-hero-overhaul {
    height: 140px !important;
    max-height: 140px !important;
  }

  #seasonDialog .season-overview-grid.active {
    grid-template-rows: minmax(0, 1fr) 118px !important;
  }
}


/* v7.0.280 Final UI fit polish.
   Collection: align the selected preview with the right grid after the top pager and keep the bottom filter rail low.
   Season: shrink the cramped overview internals and rule cards so nothing is clipped inside the 1200x800 shell. */

/* COLLECTION FINAL FIT */
#inventoryDialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework,
.inventory-dialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework {
  grid-template-rows: 60px minmax(0, 1fr) 48px !important;
  gap: 10px !important;
}

#inventoryDialog .inventory-collection-topbar,
.inventory-dialog .inventory-collection-topbar {
  height: 60px !important;
  min-height: 60px !important;
  padding: 8px 18px !important;
}

#inventoryDialog .inventory-shop-mini,
.inventory-dialog .inventory-shop-mini {
  align-self: center !important;
  min-height: 34px !important;
}

#inventoryDialog .inventory-showcase-layout,
.inventory-dialog .inventory-showcase-layout {
  grid-template-columns: 220px minmax(0, 1fr) !important;
  gap: 18px !important;
}

/* The page bar belongs above the right grid; the selected card starts below it too, so the whole shelf feels aligned. */
#inventoryDialog .inventory-selected-showcase,
.inventory-dialog .inventory-selected-showcase,
#inventoryDialog .inventory-character-passport,
.inventory-dialog .inventory-character-passport {
  width: 220px !important;
  max-width: 220px !important;
  height: calc(100% - 38px) !important;
  align-self: end !important;
  grid-template-rows: 30px minmax(0, 1fr) 104px !important;
  padding: 12px !important;
}

#inventoryDialog .inventory-selected-avatar,
.inventory-dialog .inventory-selected-avatar,
#inventoryDialog .inventory-character-passport .inventory-selected-avatar,
.inventory-dialog .inventory-character-passport .inventory-selected-avatar {
  overflow: hidden !important;
}

#inventoryDialog .inventory-selected-avatar canvas,
.inventory-dialog .inventory-selected-avatar canvas,
#inventoryDialog .inventory-character-passport .inventory-selected-avatar canvas,
.inventory-dialog .inventory-character-passport .inventory-selected-avatar canvas {
  transform: translateX(-12px) translateY(8px) scale(.57) !important;
}

#inventoryDialog .inventory-selected-info,
.inventory-dialog .inventory-selected-info,
#inventoryDialog .inventory-character-passport .inventory-selected-info,
.inventory-dialog .inventory-character-passport .inventory-selected-info {
  height: 104px !important;
  padding: 9px 10px !important;
}

#inventoryDialog .inventory-grid-stage,
.inventory-dialog .inventory-grid-stage {
  grid-template-rows: 34px minmax(0, 1fr) !important;
  gap: 10px !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-page-grid,
.inventory-dialog .inventory-showcase-rework .inventory-page-grid {
  gap: 12px 14px !important;
}

#inventoryDialog .inventory-filter-row-bottom,
.inventory-dialog .inventory-filter-row-bottom {
  height: 48px !important;
  min-height: 48px !important;
  align-self: end !important;
  margin-top: 0 !important;
}

#inventoryDialog .inventory-filter-chip,
.inventory-dialog .inventory-filter-chip {
  min-height: 34px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(217,184,121,.30) !important;
  background: linear-gradient(180deg, rgba(35,29,20,.90), rgba(10,9,7,.88)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,235,188,.04), 0 7px 18px rgba(0,0,0,.28) !important;
}

#inventoryDialog .inventory-filter-chip.active,
.inventory-dialog .inventory-filter-chip.active {
  background: linear-gradient(180deg, rgba(242,211,145,.98), rgba(165,119,54,.96)) !important;
  color: #1f1308 !important;
  border-color: rgba(255,232,177,.72) !important;
}

/* SEASON FINAL FIT */
#seasonDialog .season-dialog-body-premium,
#seasonDialog .season-dialog-body {
  grid-template-rows: 150px minmax(0, 1fr) 48px !important;
  gap: 12px !important;
  padding: 20px 22px 18px !important;
}

#seasonDialog .season-tabs-hero-overhaul {
  height: 150px !important;
  max-height: 150px !important;
  min-height: 150px !important;
}

#seasonDialog .season-hero-copy {
  padding: 18px 24px !important;
}

#seasonDialog .season-hero-copy strong {
  font-size: clamp(2.25rem, 3.6vw, 3.0rem) !important;
  line-height: .95 !important;
}

#seasonDialog .season-hero-rank-card {
  min-height: 104px !important;
  margin: 16px !important;
  padding: 12px !important;
}

#seasonDialog .season-tab-panels-overhaul,
#seasonDialog .season-tab-panel.active {
  min-height: 0 !important;
  overflow: hidden !important;
}

#seasonDialog .season-overview-grid.active {
  grid-template-columns: minmax(0, 1.5fr) minmax(290px, .76fr) !important;
  grid-template-rows: minmax(0, 1fr) 112px !important;
  gap: 10px !important;
  height: 100% !important;
}

#seasonDialog .season-overview-main-card,
#seasonDialog .season-quick-facts-card,
#seasonDialog .season-stats-card-overhaul {
  padding: 12px 14px !important;
}

#seasonDialog .season-overview-card-head-art {
  grid-template-columns: 70px minmax(0, 1fr) auto !important;
  gap: 12px !important;
}

#seasonDialog .season-overview-card-head-art > img {
  width: 72px !important;
  height: 72px !important;
}

#seasonDialog .season-rank-title,
#seasonDialog .season-overview-card-head strong {
  font-size: 1.34rem !important;
  line-height: 1.0 !important;
}

#seasonDialog .season-overview-track {
  margin: 10px 0 8px !important;
}

#seasonDialog .season-overview-meta {
  margin-bottom: 7px !important;
  font-size: .68rem !important;
}

#seasonDialog .season-milestone-row {
  gap: 6px !important;
}

#seasonDialog .season-milestone-chip {
  min-height: 42px !important;
  padding: 6px 8px !important;
}

#seasonDialog .season-milestone-chip strong,
#seasonDialog .season-milestone-chip b {
  font-size: .66rem !important;
  line-height: 1.05 !important;
}

#seasonDialog .season-milestone-chip small,
#seasonDialog .season-milestone-chip span {
  font-size: .56rem !important;
  line-height: 1.0 !important;
}

#seasonDialog .season-quick-facts-card {
  gap: 7px !important;
  align-content: start !important;
}

#seasonDialog .season-quick-facts-card div {
  min-height: 54px !important;
  padding: 8px 10px !important;
}

#seasonDialog .season-quick-facts-card img {
  width: 34px !important;
  height: 34px !important;
}

#seasonDialog .season-stats-card-overhaul {
  min-height: 0 !important;
  overflow: visible !important;
}

#seasonDialog .season-stats-card-overhaul .season-side-card-title {
  margin-bottom: 7px !important;
}

#seasonDialog .season-stats-grid-overhaul {
  gap: 8px !important;
}

#seasonDialog .season-stats-grid-overhaul > div {
  min-height: 56px !important;
  padding: 8px 10px !important;
}

#seasonDialog .season-stats-grid-overhaul strong {
  font-size: 1rem !important;
}

#seasonDialog .season-stats-grid-overhaul small {
  font-size: .55rem !important;
}

/* Rules was technically inside the panel, but its text was clipped by the large-card sizing. */
#seasonDialog .season-rules-overhaul-card {
  padding: 12px 14px !important;
  overflow: hidden !important;
}

#seasonDialog .season-section-head-art {
  min-height: 42px !important;
  margin-bottom: 8px !important;
}

#seasonDialog .season-rule-grid {
  height: calc(100% - 50px) !important;
  gap: 10px !important;
}

#seasonDialog .season-rule-tile {
  padding: 11px 12px !important;
  gap: 6px !important;
}

#seasonDialog .season-rule-tile img {
  width: 42px !important;
  height: 42px !important;
}

#seasonDialog .season-rule-tile strong {
  font-size: .92rem !important;
  line-height: 1.05 !important;
}

#seasonDialog .season-rule-tile span,
#seasonDialog .season-rule-tile p,
#seasonDialog .season-rule-tile small {
  font-size: .68rem !important;
  line-height: 1.24 !important;
}

#seasonDialog .season-tabbar-bottom {
  height: 42px !important;
  align-self: end !important;
}

#seasonDialog .season-tabbar-bottom button {
  height: 34px !important;
  min-height: 34px !important;
}

@media (min-width: 761px) and (max-height: 850px) {
  #seasonDialog .season-dialog-body-premium,
  #seasonDialog .season-dialog-body {
    grid-template-rows: 132px minmax(0, 1fr) 44px !important;
    gap: 9px !important;
  }

  #seasonDialog .season-tabs-hero-overhaul {
    height: 132px !important;
    max-height: 132px !important;
    min-height: 132px !important;
  }

  #seasonDialog .season-overview-grid.active {
    grid-template-rows: minmax(0, 1fr) 102px !important;
  }

  #seasonDialog .season-overview-card-head-art > img {
    width: 62px !important;
    height: 62px !important;
  }

  #seasonDialog .season-milestone-chip {
    min-height: 38px !important;
    padding: 5px 7px !important;
  }

  #inventoryDialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework,
  .inventory-dialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework {
    grid-template-rows: 56px minmax(0, 1fr) 44px !important;
  }

  #inventoryDialog .inventory-selected-avatar canvas,
  .inventory-dialog .inventory-selected-avatar canvas,
  #inventoryDialog .inventory-character-passport .inventory-selected-avatar canvas,
  .inventory-dialog .inventory-character-passport .inventory-selected-avatar canvas {
    transform: translateX(-12px) translateY(6px) scale(.54) !important;
  }
}


/* v7.0.281 Final alignment pass.
   Collection: keep progress/shop high, drop the page controls lower before the grid, and keep the bottom filters footer-style.
   Season: align the bottom nav closer to Hall/Ranks and make Overview/Rules fit without clipping inside the 1200x800 shell. */

/* COLLECTION: page controls should not stick to the progress bar. */
#inventoryDialog .inventory-grid-stage,
.inventory-dialog .inventory-grid-stage {
  grid-template-rows: 54px minmax(0, 1fr) !important;
  gap: 8px !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-pagebar-top,
.inventory-dialog .inventory-showcase-rework .inventory-pagebar-top {
  align-self: end !important;
  margin-top: 14px !important;
  margin-bottom: 5px !important;
  transform: translateY(6px) !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-page-grid,
.inventory-dialog .inventory-showcase-rework .inventory-page-grid {
  padding-top: 4px !important;
  gap: 12px 14px !important;
}

#inventoryDialog .inventory-collection-topbar,
.inventory-dialog .inventory-collection-topbar {
  align-self: start !important;
}

#inventoryDialog .inventory-filter-row-bottom,
.inventory-dialog .inventory-filter-row-bottom {
  align-self: end !important;
  margin-top: 8px !important;
  transform: translateY(2px) !important;
}

/* Keep selected showcase at the same top as the card grid after the lowered pager. */
#inventoryDialog .inventory-selected-showcase,
.inventory-dialog .inventory-selected-showcase,
#inventoryDialog .inventory-character-passport,
.inventory-dialog .inventory-character-passport {
  height: calc(100% - 54px) !important;
  align-self: end !important;
}

/* SEASON: use a slightly smaller hero and reserve a true footer row for the nav, like Hall/Ranks. */
#seasonDialog .season-dialog-body-premium,
#seasonDialog .season-dialog-body {
  grid-template-rows: 132px minmax(0, 1fr) 58px !important;
  gap: 10px !important;
  padding: 16px 22px 14px !important;
}

#seasonDialog .season-tabs-hero-overhaul {
  height: 132px !important;
  max-height: 132px !important;
  min-height: 132px !important;
}

#seasonDialog .season-hero-copy {
  padding: 15px 22px !important;
}

#seasonDialog .season-hero-copy strong {
  font-size: clamp(2.05rem, 3.25vw, 2.72rem) !important;
  line-height: .95 !important;
}

#seasonDialog .season-hero-copy small {
  font-size: .82rem !important;
  line-height: 1.12 !important;
}

#seasonDialog .season-hero-rank-card {
  min-height: 96px !important;
  margin: 14px !important;
  padding: 10px 12px !important;
}

#seasonDialog .season-hero-rank-card img {
  width: 46px !important;
  height: 46px !important;
}

#seasonDialog .season-tab-panels-overhaul {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

#seasonDialog .season-tabbar-bottom,
#seasonDialog .season-tabbar-overhaul {
  align-self: end !important;
  justify-self: center !important;
  height: 42px !important;
  min-height: 42px !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  width: min(760px, calc(100% - 300px)) !important;
  max-width: 760px !important;
}

#seasonDialog .season-tabbar-bottom button,
#seasonDialog .season-tabbar-overhaul button {
  height: 34px !important;
  min-height: 34px !important;
}

/* Overview: fewer internal vertical demands, no clipping of Trophy Road or Your PvP Season. */
#seasonDialog .season-overview-grid.active {
  grid-template-columns: minmax(0, 1.45fr) minmax(278px, .72fr) !important;
  grid-template-rows: minmax(0, 1fr) 96px !important;
  gap: 9px !important;
  min-height: 0 !important;
  height: 100% !important;
}

#seasonDialog .season-overview-main-card,
#seasonDialog .season-quick-facts-card,
#seasonDialog .season-stats-card-overhaul {
  padding: 10px 12px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#seasonDialog .season-overview-main-card {
  display: grid !important;
  grid-template-rows: 72px 14px 22px minmax(42px, 1fr) !important;
  gap: 5px !important;
}

#seasonDialog .season-overview-card-head-art {
  grid-template-columns: 60px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  min-height: 0 !important;
}

#seasonDialog .season-overview-card-head-art > img {
  width: 60px !important;
  height: 60px !important;
}

#seasonDialog .season-overview-card-head-art span {
  font-size: .58rem !important;
  line-height: 1 !important;
}

#seasonDialog .season-overview-card-head strong,
#seasonDialog .season-rank-title {
  font-size: 1.18rem !important;
  line-height: 1 !important;
}

#seasonDialog .season-overview-card-head small {
  font-size: .62rem !important;
  line-height: 1.05 !important;
}

#seasonDialog .season-overview-next b {
  font-size: 1.25rem !important;
  line-height: 1 !important;
}

#seasonDialog .season-overview-next small {
  font-size: .56rem !important;
  line-height: 1 !important;
}

#seasonDialog .season-overview-track {
  margin: 4px 0 2px !important;
  height: 12px !important;
}

#seasonDialog .season-overview-meta {
  margin: 0 !important;
  font-size: .62rem !important;
  line-height: 1 !important;
}

#seasonDialog .season-milestone-row {
  align-self: stretch !important;
  align-items: stretch !important;
  gap: 5px !important;
  min-height: 42px !important;
  overflow: hidden !important;
}

#seasonDialog .season-milestone-chip {
  min-height: 0 !important;
  height: 42px !important;
  padding: 5px 6px !important;
  overflow: hidden !important;
}

#seasonDialog .season-milestone-chip strong,
#seasonDialog .season-milestone-chip b {
  font-size: .60rem !important;
  line-height: 1 !important;
}

#seasonDialog .season-milestone-chip small,
#seasonDialog .season-milestone-chip span,
#seasonDialog .season-milestone-chip em {
  font-size: .50rem !important;
  line-height: 1 !important;
}

#seasonDialog .season-quick-facts-card {
  gap: 6px !important;
}

#seasonDialog .season-quick-facts-card div {
  min-height: 48px !important;
  padding: 7px 9px !important;
}

#seasonDialog .season-quick-facts-card img {
  width: 30px !important;
  height: 30px !important;
}

#seasonDialog .season-quick-facts-card b {
  font-size: .78rem !important;
  line-height: 1.05 !important;
}

#seasonDialog .season-quick-facts-card span {
  font-size: .58rem !important;
  line-height: 1.12 !important;
}

#seasonDialog .season-stats-card-overhaul {
  display: grid !important;
  grid-template-rows: 24px minmax(0, 1fr) !important;
  gap: 5px !important;
}

#seasonDialog .season-stats-card-overhaul .season-side-card-title {
  min-height: 0 !important;
  height: 24px !important;
  margin-bottom: 0 !important;
}

#seasonDialog .season-stats-card-overhaul .season-side-card-title img {
  width: 24px !important;
  height: 24px !important;
}

#seasonDialog .season-stats-grid-overhaul {
  min-height: 0 !important;
  height: 100% !important;
  gap: 7px !important;
}

#seasonDialog .season-stats-grid-overhaul > div {
  min-height: 0 !important;
  height: 100% !important;
  padding: 7px 9px !important;
  display: grid !important;
  align-content: center !important;
}

#seasonDialog .season-stats-grid-overhaul strong {
  font-size: .92rem !important;
  line-height: 1 !important;
}

#seasonDialog .season-stats-grid-overhaul small {
  font-size: .48rem !important;
  line-height: 1 !important;
}

/* Rules: no extra hidden crop. */
#seasonDialog .season-rules-overhaul-card {
  padding: 10px 12px !important;
}

#seasonDialog .season-section-head-art {
  min-height: 36px !important;
  margin-bottom: 6px !important;
}

#seasonDialog .season-rule-grid {
  height: calc(100% - 42px) !important;
  gap: 8px !important;
}

#seasonDialog .season-rule-tile {
  padding: 9px 10px !important;
  gap: 5px !important;
}

#seasonDialog .season-rule-tile img {
  width: 36px !important;
  height: 36px !important;
}

#seasonDialog .season-rule-tile strong {
  font-size: .84rem !important;
}

#seasonDialog .season-rule-tile span,
#seasonDialog .season-rule-tile p,
#seasonDialog .season-rule-tile small {
  font-size: .62rem !important;
  line-height: 1.18 !important;
}

@media (min-width: 761px) and (max-height: 850px) {
  #seasonDialog .season-dialog-body-premium,
  #seasonDialog .season-dialog-body {
    grid-template-rows: 118px minmax(0, 1fr) 50px !important;
    gap: 8px !important;
  }

  #seasonDialog .season-tabs-hero-overhaul {
    height: 118px !important;
    max-height: 118px !important;
    min-height: 118px !important;
  }

  #seasonDialog .season-overview-grid.active {
    grid-template-rows: minmax(0, 1fr) 88px !important;
  }

  #seasonDialog .season-overview-main-card {
    grid-template-rows: 62px 12px 18px minmax(36px, 1fr) !important;
  }

  #seasonDialog .season-milestone-chip {
    height: 36px !important;
    padding: 4px 5px !important;
  }

  #inventoryDialog .inventory-grid-stage,
  .inventory-dialog .inventory-grid-stage {
    grid-template-rows: 48px minmax(0, 1fr) !important;
  }
}


/* v7.0.282 Season Final Layout Polish.
   Season only: keep the current header/icons, but make all tab panels use the full 1200x800 body,
   reduce the empty bottom space, and align the bottom tab rail closer to the Hall/Ranks footer feeling. */

#seasonDialog .season-dialog-body-premium,
#seasonDialog .season-dialog-body {
  grid-template-rows: 132px minmax(0, 1fr) 50px !important;
  gap: 10px !important;
  padding: 16px 22px 12px !important;
}

#seasonDialog .season-tab-panels-overhaul {
  min-height: 0 !important;
  height: 100% !important;
  display: block !important;
  overflow: hidden !important;
}

#seasonDialog .season-tab-panel {
  min-height: 0 !important;
  height: 100% !important;
}

#seasonDialog .season-tab-panel.active {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  overflow: hidden !important;
}

#seasonDialog .season-tabbar-bottom,
#seasonDialog .season-tabbar-overhaul {
  align-self: end !important;
  justify-self: center !important;
  width: min(760px, calc(100% - 300px)) !important;
  height: 40px !important;
  min-height: 40px !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
  padding: 4px 6px !important;
}

#seasonDialog .season-tabbar-bottom button,
#seasonDialog .season-tabbar-overhaul button {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 18px !important;
}

/* Overview: use the free vertical room instead of leaving a blank bottom. */
#seasonDialog .season-overview-grid.active {
  height: 100% !important;
  min-height: 0 !important;
  grid-template-columns: minmax(0, 1.43fr) minmax(288px, .76fr) !important;
  grid-template-rows: minmax(0, 1fr) 112px !important;
  gap: 11px !important;
}

#seasonDialog .season-overview-main-card {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 78px 14px 24px minmax(62px, 1fr) !important;
  gap: 7px !important;
  padding: 12px 14px !important;
}

#seasonDialog .season-quick-facts-card {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
  padding: 12px !important;
}

#seasonDialog .season-quick-facts-card div {
  height: 100% !important;
  min-height: 0 !important;
  padding: 10px 12px !important;
  align-content: center !important;
}

#seasonDialog .season-stats-card-overhaul {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 30px minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 11px 14px !important;
}

#seasonDialog .season-stats-card-overhaul .season-side-card-title {
  height: 30px !important;
  min-height: 30px !important;
}

#seasonDialog .season-stats-card-overhaul .season-side-card-title img {
  width: 28px !important;
  height: 28px !important;
}

#seasonDialog .season-stats-grid-overhaul {
  height: 100% !important;
  min-height: 0 !important;
  gap: 9px !important;
}

#seasonDialog .season-stats-grid-overhaul > div {
  height: 100% !important;
  min-height: 0 !important;
  padding: 8px 10px !important;
  display: grid !important;
  align-content: center !important;
}

#seasonDialog .season-milestone-row {
  min-height: 62px !important;
  height: 100% !important;
  align-self: stretch !important;
  align-items: stretch !important;
  overflow: visible !important;
}

#seasonDialog .season-milestone-chip {
  height: 100% !important;
  min-height: 58px !important;
  padding: 8px 8px !important;
}

/* Rules: the card/grid should fill down toward the footer tabs. */
#seasonDialog .season-rules-panel-overhaul.active,
#seasonDialog .season-rules-panel-overhaul {
  height: 100% !important;
  min-height: 0 !important;
}

#seasonDialog .season-rules-overhaul-card {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 44px minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 14px 16px !important;
}

#seasonDialog .season-rules-overhaul-card .season-section-head-art {
  min-height: 44px !important;
  height: 44px !important;
  margin: 0 !important;
}

#seasonDialog .season-rule-grid {
  height: 100% !important;
  min-height: 0 !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#seasonDialog .season-rule-tile {
  height: 100% !important;
  min-height: 0 !important;
  padding: 13px 14px !important;
  gap: 7px !important;
  align-content: center !important;
}

#seasonDialog .season-rule-tile img {
  width: 44px !important;
  height: 44px !important;
}

#seasonDialog .season-rule-tile strong {
  font-size: .92rem !important;
}

#seasonDialog .season-rule-tile span,
#seasonDialog .season-rule-tile p,
#seasonDialog .season-rule-tile small {
  font-size: .68rem !important;
  line-height: 1.22 !important;
}

/* Rewards: fill the available panel and anchor the note lower, without bringing back the removed banner. */
#seasonDialog .season-rewards-panel-overhaul.active,
#seasonDialog .season-rewards-panel-overhaul {
  height: 100% !important;
  min-height: 0 !important;
}

#seasonDialog .season-rewards-overhaul-card {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 44px minmax(0, 1fr) 52px !important;
  gap: 12px !important;
  padding: 14px 16px !important;
}

#seasonDialog .season-rewards-overhaul-card .season-section-head-art {
  min-height: 44px !important;
  height: 44px !important;
  margin: 0 !important;
}

#seasonDialog .season-rewards-list-overhaul {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  align-content: center !important;
  gap: 14px !important;
}

#seasonDialog .season-reward-grid {
  height: auto !important;
  align-content: center !important;
  gap: 14px !important;
}

#seasonDialog .season-reward-row-premium {
  min-height: 60px !important;
  padding: 12px 14px !important;
}

#seasonDialog .season-reward-note {
  height: 52px !important;
  min-height: 52px !important;
  align-self: end !important;
}

/* Leaderboard: stretch the board down rather than leaving a large empty bottom. */
#seasonDialog .season-leaderboard-panel-overhaul.active,
#seasonDialog .season-leaderboard-panel-overhaul {
  height: 100% !important;
  min-height: 0 !important;
}

#seasonDialog .season-leaderboard-overhaul-card {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 44px 190px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 14px 16px !important;
}

#seasonDialog .season-leaderboard-overhaul-card .season-section-head-art {
  min-height: 44px !important;
  height: 44px !important;
  margin: 0 !important;
}

#seasonDialog .season-podium-strip {
  height: 190px !important;
  min-height: 190px !important;
  margin: 0 !important;
}

#seasonDialog .season-top-list-overhaul {
  height: 100% !important;
  min-height: 0 !important;
}

@media (min-width: 761px) and (max-height: 850px) {
  #seasonDialog .season-dialog-body-premium,
  #seasonDialog .season-dialog-body {
    grid-template-rows: 118px minmax(0, 1fr) 46px !important;
    gap: 8px !important;
    padding-bottom: 10px !important;
  }

  #seasonDialog .season-tabbar-bottom,
  #seasonDialog .season-tabbar-overhaul {
    height: 38px !important;
    min-height: 38px !important;
  }

  #seasonDialog .season-tabbar-bottom button,
  #seasonDialog .season-tabbar-overhaul button {
    height: 30px !important;
    min-height: 30px !important;
  }

  #seasonDialog .season-overview-grid.active {
    grid-template-rows: minmax(0, 1fr) 102px !important;
  }

  #seasonDialog .season-milestone-chip {
    min-height: 50px !important;
  }

  #seasonDialog .season-leaderboard-overhaul-card {
    grid-template-rows: 40px 160px minmax(0, 1fr) !important;
  }

  #seasonDialog .season-podium-strip {
    height: 160px !important;
    min-height: 160px !important;
  }
}


/* v7.0.283 Season Rewards + Leaderboard polish.
   Season only: rewards use a clear 3-row prize layout, and leaderboard supports top 100 scrolling. */

/* Rewards: 3 rows = Champion / Top 2 + Top 3 / Top 10 + Top 25 + Top 50 + Top 100. */
#seasonDialog .season-rewards-overhaul-card {
  grid-template-rows: 44px minmax(0, 1fr) 48px !important;
}

#seasonDialog .season-rewards-list-overhaul {
  align-content: stretch !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  overflow: hidden !important;
}

#seasonDialog .season-reward-grid {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(54px, .86fr) minmax(54px, .9fr) minmax(54px, .9fr) !important;
  gap: 10px !important;
  align-content: stretch !important;
}

#seasonDialog .season-reward-row-premium {
  min-height: 0 !important;
  height: 100% !important;
  padding: 8px 10px !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 9px !important;
  row-gap: 0 !important;
  align-items: center !important;
}

#seasonDialog .season-reward-row-premium img {
  width: 34px !important;
  height: 34px !important;
  grid-row: 1 / span 2 !important;
}

#seasonDialog .season-reward-row-premium strong {
  font-size: .82rem !important;
  line-height: 1.05 !important;
}

#seasonDialog .season-reward-row-premium span {
  font-size: 1rem !important;
  line-height: 1.05 !important;
}

#seasonDialog .season-reward-row-premium small {
  font-size: .58rem !important;
  line-height: 1.05 !important;
  grid-column: 2 / -1 !important;
}

#seasonDialog .season-reward-row-premium:nth-child(1) {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  width: min(460px, 100%) !important;
  justify-self: center !important;
}

#seasonDialog .season-reward-row-premium:nth-child(2) {
  grid-column: 1 / span 2 !important;
  grid-row: 2 !important;
}

#seasonDialog .season-reward-row-premium:nth-child(3) {
  grid-column: 3 / span 2 !important;
  grid-row: 2 !important;
}

#seasonDialog .season-reward-row-premium:nth-child(n+4) {
  grid-row: 3 !important;
}

#seasonDialog .season-reward-row-premium:nth-child(4) { grid-column: 1 !important; }
#seasonDialog .season-reward-row-premium:nth-child(5) { grid-column: 2 !important; }
#seasonDialog .season-reward-row-premium:nth-child(6) { grid-column: 3 !important; }
#seasonDialog .season-reward-row-premium:nth-child(7) { grid-column: 4 !important; }

#seasonDialog .season-reward-note {
  height: 48px !important;
  min-height: 48px !important;
}

/* Leaderboard: show Top 3 on the podium, then allow #4-#100 to scroll. */
#seasonDialog .season-leaderboard-overhaul-card {
  grid-template-rows: 44px 168px minmax(0, 1fr) !important;
}

#seasonDialog .season-podium-strip {
  height: 168px !important;
  min-height: 168px !important;
}

#seasonDialog .season-top-list-overhaul {
  height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 6px !important;
  scrollbar-width: thin !important;
}

#seasonDialog .season-top-list-overhaul::-webkit-scrollbar {
  width: 8px !important;
}

#seasonDialog .season-top-list-overhaul::-webkit-scrollbar-thumb {
  background: rgba(213, 174, 96, .38) !important;
  border-radius: 999px !important;
}

#seasonDialog .season-top-row-premium {
  min-height: 42px !important;
}

@media (min-width: 761px) and (max-height: 850px) {
  #seasonDialog .season-reward-grid {
    gap: 8px !important;
    grid-template-rows: minmax(48px, .82fr) minmax(48px, .88fr) minmax(48px, .88fr) !important;
  }

  #seasonDialog .season-reward-row-premium img {
    width: 30px !important;
    height: 30px !important;
  }

  #seasonDialog .season-reward-row-premium span {
    font-size: .9rem !important;
  }

  #seasonDialog .season-leaderboard-overhaul-card {
    grid-template-rows: 40px 142px minmax(0, 1fr) !important;
  }

  #seasonDialog .season-podium-strip {
    height: 142px !important;
    min-height: 142px !important;
  }
}


/* v7.0.284 Collection final polish.
   Collection only: add rarity icons to footer filters, move footer controls lower,
   remove the cramped header subcopy, align selected-card text and make the large preview crop closer to 220px. */

#inventoryDialog .inventory-dialog-head small,
.inventory-dialog .inventory-dialog-head small,
#inventoryDialog .inventory-dialog-title small,
.inventory-dialog .inventory-dialog-title small {
  display: none !important;
}

#inventoryDialog .inventory-dialog-head .inventory-dialog-title,
.inventory-dialog .inventory-dialog-head .inventory-dialog-title {
  min-height: 86px !important;
  padding-block: 12px !important;
}

#inventoryDialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework,
.inventory-dialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework {
  grid-template-rows: 62px minmax(0, 1fr) 58px !important;
  gap: 11px !important;
}

#inventoryDialog .inventory-collection-topbar,
.inventory-dialog .inventory-collection-topbar {
  align-self: start !important;
  height: 62px !important;
  min-height: 62px !important;
}

#inventoryDialog .inventory-progress-block,
.inventory-dialog .inventory-progress-block {
  transform: translateY(-1px) !important;
}

#inventoryDialog .inventory-shop-mini,
.inventory-dialog .inventory-shop-mini {
  align-self: start !important;
  margin-top: 5px !important;
}

#inventoryDialog .inventory-showcase-layout,
.inventory-dialog .inventory-showcase-layout {
  grid-template-columns: 244px minmax(0, 1fr) !important;
  gap: 18px !important;
  padding-top: 8px !important;
}

#inventoryDialog .inventory-selected-showcase,
.inventory-dialog .inventory-selected-showcase,
#inventoryDialog .inventory-character-passport,
.inventory-dialog .inventory-character-passport {
  width: 244px !important;
  max-width: 244px !important;
  height: calc(100% - 14px) !important;
  align-self: start !important;
  margin-top: 14px !important;
  grid-template-rows: 34px minmax(0, 1fr) 104px !important;
  padding-inline: 12px !important;
}

#inventoryDialog .inventory-character-passport .inventory-passport-header,
.inventory-dialog .inventory-character-passport .inventory-passport-header {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding-inline: 0 !important;
}

#inventoryDialog .inventory-character-passport .inventory-passport-rarity,
.inventory-dialog .inventory-character-passport .inventory-passport-rarity {
  margin-inline: auto !important;
  transform: translateX(0) !important;
  text-align: center !important;
}

#inventoryDialog .inventory-selected-avatar,
.inventory-dialog .inventory-selected-avatar,
#inventoryDialog .inventory-character-passport .inventory-selected-avatar,
.inventory-dialog .inventory-character-passport .inventory-selected-avatar {
  width: 220px !important;
  max-width: 220px !important;
  justify-self: center !important;
  overflow: hidden !important;
}

#inventoryDialog .inventory-selected-avatar canvas,
.inventory-dialog .inventory-selected-avatar canvas,
#inventoryDialog .inventory-character-passport .inventory-selected-avatar canvas,
.inventory-dialog .inventory-character-passport .inventory-selected-avatar canvas {
  width: 220px !important;
  max-width: 220px !important;
  transform: translateX(-4px) translateY(8px) scale(.66) !important;
  transform-origin: center center !important;
}

#inventoryDialog .inventory-selected-info,
.inventory-dialog .inventory-selected-info,
#inventoryDialog .inventory-character-passport .inventory-selected-info,
.inventory-dialog .inventory-character-passport .inventory-selected-info {
  width: calc(100% - 8px) !important;
  justify-self: center !important;
  text-align: center !important;
  padding-inline: 8px !important;
  transform: translateX(0) !important;
}

#inventoryDialog .inventory-selected-info > *,
.inventory-dialog .inventory-selected-info > *,
#inventoryDialog .inventory-character-passport .inventory-selected-info > *,
.inventory-dialog .inventory-character-passport .inventory-selected-info > * {
  justify-self: center !important;
  text-align: center !important;
  max-width: 100% !important;
}

#inventoryDialog .inventory-grid-stage,
.inventory-dialog .inventory-grid-stage {
  grid-template-rows: 40px minmax(0, 1fr) !important;
  gap: 11px !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-pagebar,
.inventory-dialog .inventory-showcase-rework .inventory-pagebar,
#inventoryDialog .inventory-pagebar-top,
.inventory-dialog .inventory-pagebar-top {
  height: 40px !important;
  min-height: 40px !important;
  align-self: end !important;
  transform: translateY(8px) !important;
  z-index: 3 !important;
}

#inventoryDialog .inventory-filter-row-bottom,
.inventory-dialog .inventory-filter-row-bottom,
#inventoryDialog .inventory-filter-row,
.inventory-dialog .inventory-filter-row {
  align-self: end !important;
  min-height: 56px !important;
  height: 56px !important;
  padding: 8px 10px !important;
  margin-top: 2px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: 999px !important;
}

#inventoryDialog .inventory-filter-chip,
.inventory-dialog .inventory-filter-chip {
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 13px 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(215, 177, 109, .26) !important;
  background: linear-gradient(180deg, rgba(27,22,16,.9), rgba(9,8,6,.92)) !important;
  box-shadow: inset 0 1px 0 rgba(255,235,190,.08), 0 8px 18px rgba(0,0,0,.24) !important;
}

#inventoryDialog .inventory-filter-chip img,
.inventory-dialog .inventory-filter-chip img {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
  flex: 0 0 20px !important;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.36)) !important;
}

#inventoryDialog .inventory-filter-chip span,
.inventory-dialog .inventory-filter-chip span {
  display: inline-block !important;
  line-height: 1 !important;
  font-size: .68rem !important;
  letter-spacing: .09em !important;
  transform: translateY(1px) !important;
}

#inventoryDialog .inventory-filter-chip em,
.inventory-dialog .inventory-filter-chip em {
  min-width: 20px !important;
  height: 20px !important;
  line-height: 20px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  font-size: .63rem !important;
  background: rgba(223,190,121,.16) !important;
  border: 1px solid rgba(255,230,180,.16) !important;
}

#inventoryDialog .inventory-filter-chip.active,
.inventory-dialog .inventory-filter-chip.active {
  background: linear-gradient(180deg, rgba(245,212,142,.96), rgba(179,137,73,.94)) !important;
  color: #2b1d0b !important;
  border-color: rgba(255,237,189,.72) !important;
}

#inventoryDialog .inventory-filter-chip.active img,
.inventory-dialog .inventory-filter-chip.active img {
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.26)) saturate(1.08) !important;
}

@media (min-width: 761px) and (max-height: 850px) {
  #inventoryDialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework,
  .inventory-dialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework {
    grid-template-rows: 58px minmax(0, 1fr) 54px !important;
  }

  #inventoryDialog .inventory-showcase-layout,
  .inventory-dialog .inventory-showcase-layout {
    grid-template-columns: 236px minmax(0, 1fr) !important;
  }

  #inventoryDialog .inventory-selected-showcase,
  .inventory-dialog .inventory-selected-showcase,
  #inventoryDialog .inventory-character-passport,
  .inventory-dialog .inventory-character-passport {
    width: 236px !important;
    max-width: 236px !important;
    margin-top: 12px !important;
  }

  #inventoryDialog .inventory-selected-avatar,
  .inventory-dialog .inventory-selected-avatar,
  #inventoryDialog .inventory-character-passport .inventory-selected-avatar,
  .inventory-dialog .inventory-character-passport .inventory-selected-avatar,
  #inventoryDialog .inventory-selected-avatar canvas,
  .inventory-dialog .inventory-selected-avatar canvas,
  #inventoryDialog .inventory-character-passport .inventory-selected-avatar canvas,
  .inventory-dialog .inventory-character-passport .inventory-selected-avatar canvas {
    width: 214px !important;
    max-width: 214px !important;
  }
}

/* v7.0.285 Collection filter hotfix.
   Collection only: rarity filters stay in a lower Hall-style footer, every rarity page keeps a real pager row,
   missing icon assets are provided, and the selected showcase uses a safe ~220px crop. */

#inventoryDialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework,
.inventory-dialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework {
  grid-template-rows: 64px minmax(0, 1fr) 74px !important;
  gap: 12px !important;
}

#inventoryDialog .inventory-collection-topbar,
.inventory-dialog .inventory-collection-topbar {
  height: 64px !important;
  min-height: 64px !important;
  align-self: start !important;
  padding: 10px 18px !important;
}

#inventoryDialog .inventory-progress-block,
.inventory-dialog .inventory-progress-block {
  transform: none !important;
  align-self: center !important;
}

#inventoryDialog .inventory-shop-mini,
.inventory-dialog .inventory-shop-mini {
  align-self: center !important;
  margin-top: 0 !important;
}

#inventoryDialog .inventory-showcase-layout,
.inventory-dialog .inventory-showcase-layout {
  grid-template-columns: 244px minmax(0, 1fr) !important;
  gap: 18px !important;
  padding-top: 0 !important;
  min-height: 0 !important;
}

#inventoryDialog .inventory-selected-showcase,
.inventory-dialog .inventory-selected-showcase,
#inventoryDialog .inventory-character-passport,
.inventory-dialog .inventory-character-passport {
  width: 244px !important;
  max-width: 244px !important;
  height: calc(100% - 18px) !important;
  margin-top: 18px !important;
  align-self: start !important;
  grid-template-rows: 34px minmax(0, 1fr) 108px !important;
  padding-inline: 12px !important;
}

#inventoryDialog .inventory-character-passport .inventory-passport-header,
.inventory-dialog .inventory-character-passport .inventory-passport-header,
#inventoryDialog .inventory-character-passport .inventory-passport-rarity,
.inventory-dialog .inventory-character-passport .inventory-passport-rarity {
  justify-content: center !important;
  text-align: center !important;
  margin-inline: auto !important;
  transform: none !important;
}

#inventoryDialog .inventory-selected-avatar,
.inventory-dialog .inventory-selected-avatar,
#inventoryDialog .inventory-character-passport .inventory-selected-avatar,
.inventory-dialog .inventory-character-passport .inventory-selected-avatar {
  width: 220px !important;
  max-width: 220px !important;
  min-width: 220px !important;
  justify-self: center !important;
  overflow: hidden !important;
  contain: layout size paint !important;
}

#inventoryDialog .inventory-selected-avatar canvas,
.inventory-dialog .inventory-selected-avatar canvas,
#inventoryDialog .inventory-character-passport .inventory-selected-avatar canvas,
.inventory-dialog .inventory-character-passport .inventory-selected-avatar canvas {
  width: 220px !important;
  max-width: 220px !important;
  min-width: 220px !important;
  height: 100% !important;
  transform: translateX(-6px) translateY(8px) scale(.64) !important;
  transform-origin: center center !important;
}

#inventoryDialog .inventory-selected-info,
.inventory-dialog .inventory-selected-info,
#inventoryDialog .inventory-character-passport .inventory-selected-info,
.inventory-dialog .inventory-character-passport .inventory-selected-info {
  width: calc(100% - 10px) !important;
  justify-self: center !important;
  text-align: center !important;
  padding: 10px 8px !important;
  transform: none !important;
}

#inventoryDialog .inventory-grid-stage,
.inventory-dialog .inventory-grid-stage {
  grid-template-rows: 44px minmax(0, 1fr) !important;
  gap: 12px !important;
  min-height: 0 !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-pagebar,
.inventory-dialog .inventory-showcase-rework .inventory-pagebar,
#inventoryDialog .inventory-pagebar-top,
.inventory-dialog .inventory-pagebar-top {
  height: 44px !important;
  min-height: 44px !important;
  align-self: center !important;
  transform: translateY(12px) !important;
  z-index: 4 !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-page-grid,
.inventory-dialog .inventory-showcase-rework .inventory-page-grid {
  grid-row: 2 !important;
  min-height: 0 !important;
  height: 100% !important;
}

#inventoryDialog .inventory-filter-row-bottom,
.inventory-dialog .inventory-filter-row-bottom,
#inventoryDialog .inventory-filter-row,
.inventory-dialog .inventory-filter-row {
  align-self: end !important;
  min-height: 70px !important;
  height: 70px !important;
  padding: 13px 14px !important;
  margin-top: 0 !important;
  transform: translateY(3px) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 9px !important;
  border-radius: 999px !important;
  overflow: visible !important;
}

#inventoryDialog .inventory-filter-chip,
.inventory-dialog .inventory-filter-chip {
  min-height: 42px !important;
  height: 42px !important;
  padding: 0 14px 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 999px !important;
  flex: 0 0 auto !important;
}

#inventoryDialog .inventory-filter-chip img,
.inventory-dialog .inventory-filter-chip img {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  object-fit: contain !important;
}

#inventoryDialog .inventory-filter-chip span,
.inventory-dialog .inventory-filter-chip span,
#inventoryDialog .inventory-filter-chip em,
.inventory-dialog .inventory-filter-chip em {
  display: inline-grid !important;
  place-items: center !important;
  line-height: 1 !important;
}

@media (min-width: 761px) and (max-height: 850px) {
  #inventoryDialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework,
  .inventory-dialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework {
    grid-template-rows: 60px minmax(0, 1fr) 66px !important;
  }

  #inventoryDialog .inventory-selected-showcase,
  .inventory-dialog .inventory-selected-showcase,
  #inventoryDialog .inventory-character-passport,
  .inventory-dialog .inventory-character-passport {
    margin-top: 14px !important;
    height: calc(100% - 14px) !important;
  }

  #inventoryDialog .inventory-filter-row-bottom,
  .inventory-dialog .inventory-filter-row-bottom,
  #inventoryDialog .inventory-filter-row,
  .inventory-dialog .inventory-filter-row {
    min-height: 64px !important;
    height: 64px !important;
    padding-block: 10px !important;
  }
}


/* v7.0.286 Collection footer/passport final polish.
   Collection only: use existing UI icons, shrink Hall-style filter buttons, move pager above selected rarity card,
   remove Open Shop from the panel, tighten progress to the top-right, and allow selected preview to use ~220px crop width. */

#inventoryDialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework,
.inventory-dialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework {
  grid-template-rows: 48px 34px minmax(0, 1fr) 48px !important;
  gap: 7px !important;
}

#inventoryDialog .inventory-collection-topbar,
.inventory-dialog .inventory-collection-topbar {
  height: 48px !important;
  min-height: 48px !important;
  padding: 5px 18px !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

#inventoryDialog .inventory-shop-mini,
.inventory-dialog .inventory-shop-mini {
  display: none !important;
}

#inventoryDialog .inventory-progress-block,
.inventory-dialog .inventory-progress-block {
  width: min(530px, 58%) !important;
  min-height: 42px !important;
  height: 42px !important;
  margin-left: auto !important;
  margin-right: 12px !important;
  padding: 5px 16px !important;
  justify-content: center !important;
  align-content: center !important;
  justify-items: center !important;
  text-align: center !important;
  gap: 1px !important;
}

#inventoryDialog .inventory-progress-block span,
.inventory-dialog .inventory-progress-block span {
  font-size: .52rem !important;
  letter-spacing: .16em !important;
}

#inventoryDialog .inventory-progress-block strong,
.inventory-dialog .inventory-progress-block strong {
  font-size: .78rem !important;
  line-height: 1 !important;
}

#inventoryDialog .inventory-progress-block em,
.inventory-dialog .inventory-progress-block em {
  font-size: .56rem !important;
  line-height: 1 !important;
}

#inventoryDialog .inventory-progress-meter,
.inventory-dialog .inventory-progress-meter {
  width: min(320px, 92%) !important;
  height: 3px !important;
  margin-top: 2px !important;
}

#inventoryDialog .inventory-pagebar-top,
.inventory-dialog .inventory-pagebar-top,
#inventoryDialog .inventory-showcase-rework .inventory-pagebar-top,
.inventory-dialog .inventory-showcase-rework .inventory-pagebar-top {
  grid-row: 2 !important;
  width: max-content !important;
  height: 32px !important;
  min-height: 32px !important;
  justify-self: center !important;
  align-self: end !important;
  margin: 0 !important;
  transform: none !important;
  padding: 4px 10px !important;
  z-index: 4 !important;
}

#inventoryDialog .inventory-showcase-layout,
.inventory-dialog .inventory-showcase-layout {
  grid-row: 3 !important;
  grid-template-columns: 244px minmax(0, 1fr) !important;
  gap: 18px !important;
  padding-top: 0 !important;
  min-height: 0 !important;
}

#inventoryDialog .inventory-grid-stage,
.inventory-dialog .inventory-grid-stage {
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
}

#inventoryDialog .inventory-selected-showcase,
.inventory-dialog .inventory-selected-showcase,
#inventoryDialog .inventory-character-passport,
.inventory-dialog .inventory-character-passport {
  width: 244px !important;
  max-width: 244px !important;
  height: calc(100% - 8px) !important;
  margin-top: 8px !important;
  padding-inline: 12px !important;
  grid-template-rows: 32px minmax(0, 1fr) 104px !important;
}

#inventoryDialog .inventory-character-passport .inventory-passport-header,
.inventory-dialog .inventory-character-passport .inventory-passport-header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 5px 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  background: rgba(8, 6, 4, .32) !important;
}

#inventoryDialog .inventory-character-passport .inventory-passport-rarity,
.inventory-dialog .inventory-character-passport .inventory-passport-rarity {
  width: auto !important;
  min-width: 92px !important;
  margin: 0 auto !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  transform: none !important;
}

#inventoryDialog .inventory-selected-avatar,
.inventory-dialog .inventory-selected-avatar,
#inventoryDialog .inventory-character-passport .inventory-selected-avatar,
.inventory-dialog .inventory-character-passport .inventory-selected-avatar {
  width: 220px !important;
  max-width: 220px !important;
  min-width: 220px !important;
  justify-self: center !important;
  overflow: hidden !important;
}

#inventoryDialog .inventory-selected-avatar canvas,
.inventory-dialog .inventory-selected-avatar canvas,
#inventoryDialog .inventory-character-passport .inventory-selected-avatar canvas,
.inventory-dialog .inventory-character-passport .inventory-selected-avatar canvas {
  width: 220px !important;
  max-width: 220px !important;
  min-width: 220px !important;
  height: 100% !important;
  transform: translateX(0) translateY(4px) scale(.86) !important;
  transform-origin: center center !important;
}

#inventoryDialog .inventory-selected-info,
.inventory-dialog .inventory-selected-info,
#inventoryDialog .inventory-character-passport .inventory-selected-info,
.inventory-dialog .inventory-character-passport .inventory-selected-info {
  width: calc(100% - 12px) !important;
  justify-self: center !important;
  text-align: center !important;
  padding: 8px 8px !important;
  transform: none !important;
}

#inventoryDialog .inventory-filter-row-bottom,
.inventory-dialog .inventory-filter-row-bottom,
#inventoryDialog .inventory-filter-row,
.inventory-dialog .inventory-filter-row {
  grid-row: 4 !important;
  align-self: end !important;
  width: max-content !important;
  max-width: calc(100% - 80px) !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 4px 8px !important;
  margin: 0 auto 2px auto !important;
  transform: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  border-radius: 999px !important;
}

#inventoryDialog .inventory-filter-chip,
.inventory-dialog .inventory-filter-chip {
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 12px 0 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border-radius: 999px !important;
  flex: 0 0 auto !important;
  font-size: .68rem !important;
}

#inventoryDialog .inventory-filter-chip img,
.inventory-dialog .inventory-filter-chip img {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.32)) !important;
}

#inventoryDialog .inventory-filter-chip span,
.inventory-dialog .inventory-filter-chip span {
  font-size: .66rem !important;
  letter-spacing: .10em !important;
}

#inventoryDialog .inventory-filter-chip em,
.inventory-dialog .inventory-filter-chip em {
  min-width: 18px !important;
  height: 18px !important;
  font-size: .58rem !important;
}

#inventoryDialog .inventory-filter-chip.active,
.inventory-dialog .inventory-filter-chip.active {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 16px rgba(219, 174, 94, .14) !important;
}


/* v7.0.287 Collection rarity filter/grid hotfix.
   Collection only: use the dedicated /assets/ui/rarity icons and undo the accidental compressed grid row.
   The previous page-grid row assignment could land the card grid in an implicit tiny row when the pagebar was moved outside the grid stage. */

#inventoryDialog .inventory-grid-stage,
.inventory-dialog .inventory-grid-stage {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  align-self: stretch !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-page-grid,
.inventory-dialog .inventory-showcase-rework .inventory-page-grid,
#inventoryDialog .inventory-grid-stage .inventory-page-grid,
.inventory-dialog .inventory-grid-stage .inventory-page-grid {
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(150px, 1fr)) !important;
  grid-auto-rows: minmax(150px, 1fr) !important;
  gap: 12px 14px !important;
  min-height: 0 !important;
  height: 100% !important;
  align-self: stretch !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-shelf-slot,
.inventory-dialog .inventory-showcase-rework .inventory-shelf-slot {
  min-height: 150px !important;
  height: 100% !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-shelf-slot .inventory-item.inventory-item-card,
.inventory-dialog .inventory-showcase-rework .inventory-shelf-slot .inventory-item.inventory-item-card {
  min-height: 150px !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) 34px !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-shelf-slot .inventory-item-hero,
.inventory-dialog .inventory-showcase-rework .inventory-shelf-slot .inventory-item-hero {
  min-height: 0 !important;
  height: 100% !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-shelf-slot .inventory-card-avatar3d,
.inventory-dialog .inventory-showcase-rework .inventory-shelf-slot .inventory-card-avatar3d {
  inset: 18px 16px 38px 16px !important;
  min-height: 82px !important;
}

#inventoryDialog .inventory-showcase-rework .inventory-shelf-slot .inventory-card-avatar3d canvas,
.inventory-dialog .inventory-showcase-rework .inventory-shelf-slot .inventory-card-avatar3d canvas {
  width: 100% !important;
  height: 100% !important;
  transform-origin: center center !important;
}

#inventoryDialog .inventory-shelf-slot-empty.inventory-shelf-slot-empty-card,
.inventory-dialog .inventory-shelf-slot-empty.inventory-shelf-slot-empty-card,
#inventoryDialog .inventory-showcase-rework .inventory-shelf-slot-empty.inventory-shelf-slot-empty-card,
.inventory-dialog .inventory-showcase-rework .inventory-shelf-slot-empty.inventory-shelf-slot-empty-card {
  min-height: 150px !important;
  height: 100% !important;
}

#inventoryDialog .inventory-filter-row-bottom,
.inventory-dialog .inventory-filter-row-bottom,
#inventoryDialog .inventory-filter-row,
.inventory-dialog .inventory-filter-row {
  min-height: 46px !important;
  height: 46px !important;
  padding: 5px 10px !important;
  gap: 7px !important;
}

#inventoryDialog .inventory-filter-chip,
.inventory-dialog .inventory-filter-chip {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 12px 0 9px !important;
  gap: 7px !important;
}

#inventoryDialog .inventory-filter-chip img,
.inventory-dialog .inventory-filter-chip img {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  object-fit: contain !important;
}

@media (min-width: 761px) and (max-height: 850px) {
  #inventoryDialog .inventory-showcase-rework .inventory-page-grid,
  .inventory-dialog .inventory-showcase-rework .inventory-page-grid,
  #inventoryDialog .inventory-grid-stage .inventory-page-grid,
  .inventory-dialog .inventory-grid-stage .inventory-page-grid {
    grid-template-rows: repeat(2, minmax(138px, 1fr)) !important;
    grid-auto-rows: minmax(138px, 1fr) !important;
  }

  #inventoryDialog .inventory-showcase-rework .inventory-shelf-slot,
  .inventory-dialog .inventory-showcase-rework .inventory-shelf-slot,
  #inventoryDialog .inventory-showcase-rework .inventory-shelf-slot .inventory-item.inventory-item-card,
  .inventory-dialog .inventory-showcase-rework .inventory-shelf-slot .inventory-item.inventory-item-card,
  #inventoryDialog .inventory-shelf-slot-empty.inventory-shelf-slot-empty-card,
  .inventory-dialog .inventory-shelf-slot-empty.inventory-shelf-slot-empty-card {
    min-height: 138px !important;
  }
}


/* v7.0.289 Collection header asset + centered progress polish.
   Collection only: use the new transparent gallery header art, center Collection Progress,
   remove the extra framed topbar behind it, keep the page bar perfectly centered for any page count,
   and ship the new transparent collection art assets. */

#inventoryDialog .inventory-dialog-head,
.inventory-dialog .inventory-dialog-head {
  background:
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.42)),
    radial-gradient(circle at 50% 18%, rgba(255,213,132,.12), transparent 34%),
    url('/assets/ui/inventory/collection-gallery-header-bg.png') center/cover no-repeat !important;
}

#inventoryDialog .inventory-dialog-head::before,
#inventoryDialog .inventory-dialog-head::after,
.inventory-dialog .inventory-dialog-head::before,
.inventory-dialog .inventory-dialog-head::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

#inventoryDialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework,
.inventory-dialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework {
  grid-template-rows: 52px 36px minmax(0, 1fr) 48px !important;
  gap: 8px !important;
}

#inventoryDialog .inventory-collection-topbar,
.inventory-dialog .inventory-collection-topbar {
  grid-row: 1 !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 2px 0 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#inventoryDialog .inventory-collection-topbar::before,
#inventoryDialog .inventory-collection-topbar::after,
.inventory-dialog .inventory-collection-topbar::before,
.inventory-dialog .inventory-collection-topbar::after {
  display: none !important;
  content: none !important;
}

#inventoryDialog .inventory-progress-block,
.inventory-dialog .inventory-progress-block {
  width: min(560px, calc(100% - 24px)) !important;
  min-height: 40px !important;
  height: 40px !important;
  margin: 0 auto !important;
  padding: 6px 18px !important;
  justify-self: center !important;
  align-self: center !important;
  text-align: center !important;
}

#inventoryDialog .inventory-pagebar-top,
.inventory-dialog .inventory-pagebar-top,
#inventoryDialog .inventory-showcase-rework .inventory-pagebar-top,
.inventory-dialog .inventory-showcase-rework .inventory-pagebar-top,
#inventoryDialog .inventory-pagebar,
.inventory-dialog .inventory-pagebar {
  grid-row: 2 !important;
  width: max-content !important;
  max-width: calc(100% - 24px) !important;
  min-height: 36px !important;
  height: 36px !important;
  margin: 0 auto !important;
  padding: 4px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
  align-self: center !important;
  gap: 8px !important;
  transform: none !important;
}

#inventoryDialog .inventory-showcase-layout,
.inventory-dialog .inventory-showcase-layout {
  grid-row: 3 !important;
}

#inventoryDialog .inventory-filter-row-bottom,
.inventory-dialog .inventory-filter-row-bottom,
#inventoryDialog .inventory-filter-row,
.inventory-dialog .inventory-filter-row {
  grid-row: 4 !important;
}

@media (min-width: 761px) and (max-height: 850px) {
  #inventoryDialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework,
  .inventory-dialog .inventory-dialog-body .inventory-panel.inventory-showcase-rework {
    grid-template-rows: 50px 34px minmax(0, 1fr) 46px !important;
  }

  #inventoryDialog .inventory-progress-block,
  .inventory-dialog .inventory-progress-block {
    width: min(520px, calc(100% - 18px)) !important;
  }
}

/* v7.0.290 Mission Board full polish: premium mission header, contract panels, new icons and weekly chest styling. */
#missionsDialog .missions-header {
  background:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.40)),
    radial-gradient(circle at 50% 14%, rgba(255,214,139,.13), transparent 38%),
    url('/assets/ui/missions/mission-board-header-premium.png') center/cover no-repeat !important;
}

#missionsDialog .missions-header p {
  display: none !important;
}

#missionsDialog .missions-header::after {
  height: 58% !important;
  background: linear-gradient(180deg, transparent, rgba(7,6,4,.50)) !important;
}

#missionsDialog .missions-body {
  grid-template-rows: 96px minmax(275px, 1fr) 126px !important;
  gap: 14px !important;
}

#missionsDialog .missions-overview-unified,
#missionsDialog .mission-card-polished,
#missionsDialog .weekly-chest-unified {
  position: relative !important;
  overflow: hidden !important;
  border-color: rgba(229, 190, 112, .34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -24px 60px rgba(0,0,0,.24),
    0 14px 34px rgba(0,0,0,.18) !important;
}

#missionsDialog .missions-overview-unified::before,
#missionsDialog .mission-card-polished::before,
#missionsDialog .weekly-chest-unified::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(255,214,139,.07), transparent 24%, transparent 76%, rgba(255,214,139,.035)),
    linear-gradient(135deg, rgba(255,255,255,.035), transparent 38%) !important;
  opacity: .95 !important;
  z-index: 0 !important;
}

#missionsDialog .missions-overview-unified > *,
#missionsDialog .mission-card-polished > *,
#missionsDialog .weekly-chest-unified > * {
  position: relative !important;
  z-index: 1 !important;
}

#missionsDialog .missions-overview-unified,
#missionsDialog .mission-card-polished {
  background:
    linear-gradient(180deg, rgba(18,15,10,.68), rgba(6,5,4,.78)),
    url('/assets/ui/missions/mission-card-panel-bg.png') center/cover no-repeat !important;
}

#missionsDialog .mission-card-polished.mission-visual-quest {
  border-color: rgba(229, 190, 112, .38) !important;
}

#missionsDialog .mission-card-polished.mission-visual-xp {
  border-color: rgba(242, 210, 138, .42) !important;
}

#missionsDialog .mission-card-polished.mission-visual-score {
  border-color: rgba(226, 176, 94, .46) !important;
}

#missionsDialog .mission-card-polished.can-claim,
#missionsDialog .weekly-chest-unified.can-claim {
  border-color: rgba(255, 220, 142, .76) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    0 0 0 1px rgba(255,220,142,.09),
    0 18px 42px rgba(0,0,0,.22),
    0 0 32px rgba(214,170,91,.12) !important;
}

#missionsDialog .missions-overview-art,
#missionsDialog .mission-icon-frame,
#missionsDialog .weekly-chest-art {
  background:
    radial-gradient(circle at 50% 32%, rgba(255,220,142,.18), transparent 58%),
    linear-gradient(180deg, rgba(49,36,20,.70), rgba(6,5,4,.78)) !important;
  border: 1px solid rgba(230,190,112,.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 10px 24px rgba(0,0,0,.24) !important;
}

#missionsDialog .missions-overview-art img,
#missionsDialog .mission-icon-frame img,
#missionsDialog .weekly-chest-art img,
#missionsDialog .mission-reward-chip img {
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.44)) saturate(1.03) contrast(1.03) !important;
}

#missionsDialog .mission-icon-frame img {
  width: 50px !important;
  height: 50px !important;
}

#missionsDialog .missions-overview-stats div,
#missionsDialog .mission-state-pill,
#missionsDialog .mission-reward-chip,
#missionsDialog .mission-claim-btn,
#missionsDialog .weekly-chest-progress .mission-claim-btn {
  border-color: rgba(230,190,112,.24) !important;
  background:
    linear-gradient(180deg, rgba(22,18,12,.78), rgba(5,5,4,.78)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
}

#missionsDialog .mission-state-pill.can-claim,
#missionsDialog .mission-claim-btn.primary-btn,
#missionsDialog .weekly-chest-progress .mission-claim-btn.primary-btn {
  color: #1c1308 !important;
  background: linear-gradient(180deg, #f3d28a, #b98a42) !important;
  border-color: rgba(255,231,166,.58) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 10px 22px rgba(0,0,0,.24) !important;
}

#missionsDialog .mission-progress-bar {
  height: 8px !important;
  border-color: rgba(230,190,112,.28) !important;
  background: rgba(0,0,0,.46) !important;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.36) !important;
}

#missionsDialog .mission-progress-bar i {
  background: linear-gradient(90deg, #9d753d, #f2cd79 52%, #fff0b4) !important;
  box-shadow: 0 0 18px rgba(242,205,121,.24) !important;
}

#missionsDialog .weekly-chest-unified {
  background:
    linear-gradient(90deg, rgba(18,14,8,.76), rgba(6,5,4,.72)),
    url('/assets/ui/missions/mission-weekly-chest-bg.png') center/cover no-repeat !important;
}

#missionsDialog .weekly-chest-art img {
  width: 88px !important;
  height: 88px !important;
}

#missionsDialog .mission-reward-chip img {
  width: 34px !important;
  height: 34px !important;
}

#missionsDialog .missions-overview-copy span,
#missionsDialog .mission-card-copy span,
#missionsDialog .weekly-chest-copy span {
  color: rgba(255,220,142,.96) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.36) !important;
}

#missionsDialog .missions-overview-copy strong,
#missionsDialog .mission-card-copy strong,
#missionsDialog .weekly-chest-copy strong {
  text-shadow: 0 4px 14px rgba(0,0,0,.42) !important;
}

@media (max-width: 760px) {
  #missionsDialog .missions-body {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overflow-y: auto !important;
  }
}


/* v7.0.291 Mission Board header/chest hotfix.
   Fixes only two visual issues from v7.0.290:
   1) force the new Daily Contracts header background everywhere the missions header can render;
   2) remove the extra framed box behind the Weekly Chest image while keeping the chest icon itself. */
#missionsDialog .missions-dialog-card .missions-header,
#missionsDialog .missions-header,
.missions-dialog .missions-dialog-card .missions-header,
.missions-dialog .missions-header {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.42)),
    radial-gradient(circle at 50% 16%, rgba(255,218,142,.14), transparent 38%),
    url('/assets/ui/missions/mission-board-header-premium.png') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

#missionsDialog .missions-header::before,
.missions-dialog .missions-header::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

#missionsDialog .missions-header::after,
.missions-dialog .missions-header::after {
  height: 52% !important;
  background: linear-gradient(180deg, transparent, rgba(7,6,4,.40)) !important;
}

#missionsDialog .weekly-chest-unified,
#missionsDialog .weekly-chest-polished,
#missionsDialog .weekly-chest-card,
.missions-dialog .weekly-chest-unified,
.missions-dialog .weekly-chest-polished,
.missions-dialog .weekly-chest-card {
  background-image:
    linear-gradient(90deg, rgba(18,14,8,.72), rgba(6,5,4,.70)),
    url('/assets/ui/missions/mission-weekly-chest-bg.png') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

#missionsDialog .weekly-chest-art,
.missions-dialog .weekly-chest-art {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  border-radius: 0 !important;
}

#missionsDialog .weekly-chest-art::before,
#missionsDialog .weekly-chest-art::after,
.missions-dialog .weekly-chest-art::before,
.missions-dialog .weekly-chest-art::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

#missionsDialog .weekly-chest-art img,
.missions-dialog .weekly-chest-art img {
  width: 96px !important;
  height: 96px !important;
  object-fit: contain !important;
}

/* v7.0.292 PvP Season rank icon polish.
   Shared prestige rank icons are now used by Season hero, Trophy Road milestones and Home Season widget. */
.home-season-rank-card-prestige {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}

.home-season-rank-card-prestige .home-season-rank-icon {
  width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .62)) drop-shadow(0 0 10px rgba(215, 164, 74, .18)) !important;
  flex: 0 0 auto !important;
}

.home-season-rank-card-prestige .home-season-rank-main {
  min-width: 0 !important;
}

.home-season-rank-card-prestige .home-season-rank-meta {
  text-align: right !important;
  white-space: nowrap !important;
}

.action-hub-season-btn > img,
.action-hub-season-btn img {
  object-fit: contain !important;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .62)) drop-shadow(0 0 10px rgba(218, 169, 76, .20)) !important;
}

#seasonDialog .season-hero-rank-card img,
.season-hero-rank-card img {
  width: 70px !important;
  height: 70px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .68)) drop-shadow(0 0 14px rgba(229, 181, 83, .22)) !important;
}

#seasonDialog .season-road-step i,
.season-road-step i {
  width: 28px !important;
  height: 28px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 auto 4px !important;
}

#seasonDialog .season-road-step i img,
.season-road-step i img {
  width: 31px !important;
  height: 31px !important;
  object-fit: contain !important;
  filter: grayscale(.32) brightness(.62) drop-shadow(0 5px 8px rgba(0, 0, 0, .58)) !important;
  opacity: .58 !important;
}

#seasonDialog .season-road-step.reached i img,
.season-road-step.reached i img {
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .66)) drop-shadow(0 0 8px rgba(237, 188, 90, .24)) !important;
  opacity: 1 !important;
}

#seasonDialog .season-road-step strong,
.season-road-step strong {
  margin-top: 1px !important;
}

#seasonDialog .season-rule-tile img[src$="season-rank-master.png"] {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .66)) !important;
}

@media (max-width: 760px) {
  .home-season-rank-card-prestige {
    grid-template-columns: 38px minmax(0, 1fr) !important;
  }

  .home-season-rank-card-prestige .home-season-rank-icon {
    width: 36px !important;
    height: 36px !important;
  }

  .home-season-rank-card-prestige .home-season-rank-meta {
    grid-column: 2 !important;
    text-align: left !important;
  }
}


/* v7.0.293 Season header/title cleanup + Home Season icon conflict hotfix.
   Keep only the main PvP Trophy Season dialog title, compact the inner hero,
   give the rank card enough space for the new emblem, and suppress any legacy
   rank badge decoration in the Home Season card. */
#seasonDialog .season-hero-copy-single-title,
#seasonDialog .season-hero-copy {
  padding: 14px 20px !important;
  align-content: center !important;
}

#seasonDialog .season-hero-copy-single-title span,
#seasonDialog .season-hero-copy span {
  display: none !important;
}

#seasonDialog .season-tabs-hero-overhaul {
  min-height: 112px !important;
  grid-template-columns: minmax(0, 1fr) 225px !important;
}

#seasonDialog .season-hero-copy-single-title strong,
#seasonDialog .season-hero-copy strong {
  font-size: clamp(2.25rem, 3.65vw, 3.35rem) !important;
  line-height: .95 !important;
  margin: 0 0 4px !important;
}

#seasonDialog .season-hero-copy-single-title small,
#seasonDialog .season-hero-copy small {
  font-size: .86rem !important;
  line-height: 1.2 !important;
}

#seasonDialog .season-hero-rank-card,
.season-hero-rank-card {
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 7px 10px !important;
  gap: 1px !important;
}

#seasonDialog .season-hero-rank-card img,
.season-hero-rank-card img {
  width: 56px !important;
  height: 56px !important;
}

#seasonDialog .season-hero-rank-card span,
.season-hero-rank-card span,
#seasonDialog .season-hero-rank-card b,
.season-hero-rank-card b,
#seasonDialog .season-hero-rank-card small,
.season-hero-rank-card small {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.home-season-rank-card-prestige::before,
.home-season-rank-card-prestige::after,
.home-season-rank-card-prestige .home-season-rank-main::before,
.home-season-rank-card-prestige .home-season-rank-main::after,
.home-season-rank-card-prestige .home-season-rank-meta::before,
.home-season-rank-card-prestige .home-season-rank-meta::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.home-season-rank-card-prestige {
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
}

.home-season-rank-card-prestige > img:not(.home-season-rank-icon) {
  display: none !important;
}

.home-season-rank-card-prestige .home-season-rank-icon {
  width: 40px !important;
  height: 40px !important;
}


/* v7.0.294 Season single-header cleanup + Home rank icon conflict fix.
   The old top Season title block is collapsed; the hero banner becomes the only header.
   Home rank titles are cleaned so the new rank emblem does not fight a legacy emoji/icon. */
#seasonDialog .season-dialog-shell-premium,
#seasonDialog .season-dialog-shell {
  grid-template-rows: minmax(0, 1fr) !important;
}

#seasonDialog .season-dialog-head-clean,
#seasonDialog .season-dialog-head-premium,
#seasonDialog .season-dialog-head {
  position: absolute !important;
  inset: 0 0 auto auto !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  z-index: 30 !important;
}

#seasonDialog .season-dialog-head-clean > :not(.season-close-btn),
#seasonDialog .season-dialog-head > :not(.season-close-btn) {
  display: none !important;
}

#seasonDialog .season-close-btn {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 40 !important;
}

#seasonDialog .season-dialog-body-premium,
#seasonDialog .season-dialog-body {
  grid-row: 1 !important;
  padding-top: 0 !important;
}

#seasonDialog .season-tabs-hero-overhaul {
  margin-top: 0 !important;
  min-height: 148px !important;
  grid-template-columns: minmax(0, 1fr) 218px !important;
  align-items: stretch !important;
}

#seasonDialog .season-hero-copy-single-title,
#seasonDialog .season-hero-copy {
  padding: 18px 22px !important;
  align-content: center !important;
}

#seasonDialog .season-hero-copy-single-title span,
#seasonDialog .season-hero-copy span {
  display: block !important;
  margin: 0 0 7px !important;
  color: rgba(230, 191, 104, .96) !important;
  font-size: .70rem !important;
  font-weight: 1000 !important;
  letter-spacing: .22em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .62) !important;
}

#seasonDialog .season-hero-copy-single-title strong,
#seasonDialog .season-hero-copy strong {
  font-size: clamp(2.45rem, 4.2vw, 3.9rem) !important;
  line-height: .92 !important;
  margin: 0 0 8px !important;
  max-width: 100% !important;
}

#seasonDialog .season-hero-copy-single-title small,
#seasonDialog .season-hero-copy small {
  font-size: .92rem !important;
  line-height: 1.22 !important;
}

#seasonDialog .season-hero-rank-card,
.season-hero-rank-card {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 10px 11px !important;
  gap: 1px !important;
  justify-content: center !important;
}

#seasonDialog .season-hero-rank-card img,
.season-hero-rank-card img {
  width: 54px !important;
  height: 54px !important;
  margin-bottom: 0 !important;
}

#seasonDialog .season-hero-rank-card span,
.season-hero-rank-card span {
  font-size: .68rem !important;
  letter-spacing: .18em !important;
}

#seasonDialog .season-hero-rank-card b,
.season-hero-rank-card b {
  font-size: 1.75rem !important;
  line-height: .95 !important;
}

#seasonDialog .season-hero-rank-card small,
.season-hero-rank-card small {
  font-size: .72rem !important;
  line-height: 1.05 !important;
}

.home-season-rank-card-prestige .home-season-rank-main strong::before,
.home-season-rank-card-prestige .home-season-rank-main strong::after,
.home-season-rank-card-prestige .home-season-rank-kicker::before,
.home-season-rank-card-prestige .home-season-rank-kicker::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.home-season-rank-card-prestige {
  grid-template-columns: 46px minmax(0, 1fr) minmax(118px, auto) !important;
  padding-left: 14px !important;
}

.home-season-rank-card-prestige .home-season-rank-icon {
  width: 38px !important;
  height: 38px !important;
  justify-self: center !important;
}

.home-season-rank-card-prestige .home-season-rank-main strong {
  padding-left: 0 !important;
}

@media (min-width: 761px) and (max-height: 850px) {
  #seasonDialog .season-tabs-hero-overhaul {
    min-height: 138px !important;
  }
  #seasonDialog .season-hero-copy-single-title strong,
  #seasonDialog .season-hero-copy strong {
    font-size: clamp(2.25rem, 3.7vw, 3.45rem) !important;
  }
}

@media (max-width: 760px) {
  #seasonDialog .season-tabs-hero-overhaul {
    grid-template-columns: 1fr !important;
  }
  .home-season-rank-card-prestige {
    grid-template-columns: 38px minmax(0, 1fr) !important;
  }
}


/* v7.0.295 Season overview/home rank layout polish.
   - Removes the duplicated hero rank box from Season overview.
   - Enlarges Trophy Road milestones and right quick facts so the big overview area is used properly.
   - Rebuilds the Home Season rank card: rank icon + rank title at top-left, trophies/peak at top-right. */

/* Season hero: keep only the main May 2026 header, no duplicated Bronze I box on the right. */
#seasonDialog .season-tabs-hero-overhaul {
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 124px !important;
}

#seasonDialog .season-hero-rank-card {
  display: none !important;
}

#seasonDialog .season-hero-copy {
  padding: 20px 28px !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,.58), rgba(0,0,0,.21) 54%, rgba(0,0,0,.10)) !important;
}

#seasonDialog .season-hero-copy span {
  font-size: .72rem !important;
  letter-spacing: .19em !important;
}

#seasonDialog .season-hero-copy strong {
  font-size: clamp(2.35rem, 4.2vw, 3.45rem) !important;
  line-height: .94 !important;
}

#seasonDialog .season-hero-copy small {
  margin-top: 5px !important;
  font-size: .92rem !important;
}

/* Season overview: give Trophy Road and quick facts stronger visual scale. */
#seasonDialog .season-overview-grid.active {
  grid-template-columns: minmax(0, 1.36fr) minmax(300px, .74fr) !important;
  gap: 12px !important;
}

#seasonDialog .season-overview-main-card {
  padding: 16px !important;
}

#seasonDialog .season-overview-card-head-art {
  grid-template-columns: 86px minmax(0, 1fr) minmax(136px, auto) !important;
  gap: 13px !important;
}

#seasonDialog .season-overview-card-head-art > img {
  width: 86px !important;
  height: 86px !important;
}

#seasonDialog .season-overview-card-head-art strong {
  font-size: 1.38rem !important;
  line-height: 1.03 !important;
}

#seasonDialog .season-overview-card-head-art small {
  font-size: .74rem !important;
}

#seasonDialog .season-overview-next b {
  font-size: 1.42rem !important;
}

#seasonDialog .season-overview-track {
  height: 13px !important;
  margin: 12px 0 10px !important;
}

#seasonDialog .season-overview-meta {
  margin-bottom: 10px !important;
}

#seasonDialog .season-overview-card .season-road-milestones {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 9px !important;
  align-items: stretch !important;
}

#seasonDialog .season-overview-card .season-road-step,
#seasonDialog .season-road-step {
  min-height: 72px !important;
  padding: 8px 8px 7px !important;
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 2px !important;
  border-radius: 13px !important;
}

#seasonDialog .season-road-step img,
#seasonDialog .season-overview-card .season-road-step img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
  opacity: .9 !important;
  filter: drop-shadow(0 7px 9px rgba(0,0,0,.5)) !important;
}

#seasonDialog .season-road-step.active img,
#seasonDialog .season-overview-card .season-road-step.active img {
  width: 38px !important;
  height: 38px !important;
  opacity: 1 !important;
}

#seasonDialog .season-road-step strong,
#seasonDialog .season-overview-card .season-road-step strong {
  font-size: .66rem !important;
  line-height: 1 !important;
}

#seasonDialog .season-road-step small,
#seasonDialog .season-overview-card .season-road-step small {
  font-size: .52rem !important;
  line-height: 1.05 !important;
}

#seasonDialog .season-overview-card .season-road-step:nth-child(n+6) {
  min-height: 66px !important;
}

/* Right info panel: larger content, less tiny lost text. */
#seasonDialog .season-quick-facts-card {
  padding: 14px !important;
  gap: 10px !important;
  align-content: stretch !important;
}

#seasonDialog .season-quick-facts-card div {
  grid-template-columns: 48px minmax(0, 1fr) !important;
  gap: 3px 12px !important;
  padding: 14px 15px !important;
  min-height: 78px !important;
  align-content: center !important;
}

#seasonDialog .season-quick-facts-card img {
  width: 48px !important;
  height: 48px !important;
}

#seasonDialog .season-quick-facts-card b {
  font-size: .95rem !important;
  line-height: 1.04 !important;
}

#seasonDialog .season-quick-facts-card span {
  font-size: .72rem !important;
  line-height: 1.18 !important;
}

/* Home page Season rank card: icon + rank title left/top, trophies + peak right/top. */
.home-season-rank-card.home-season-rank-card-prestige,
.home-season-rank-card.home-season-rank-card-compact.home-season-rank-card-prestige {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) minmax(118px, auto) !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  gap: 4px 12px !important;
  min-height: 78px !important;
  padding: 13px 15px !important;
}

.home-season-rank-card-prestige .home-season-rank-icon {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  width: 54px !important;
  height: 54px !important;
  align-self: start !important;
  justify-self: start !important;
  margin: 0 !important;
  transform: none !important;
  object-fit: contain !important;
  opacity: 1 !important;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.46)) !important;
}

.home-season-rank-card-prestige .home-season-rank-main {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: start !important;
  text-align: left !important;
  gap: 2px !important;
}

.home-season-rank-card-prestige .home-season-rank-kicker {
  display: none !important;
}

.home-season-rank-card-prestige .home-season-rank-main strong {
  font-size: 1.06rem !important;
  line-height: 1 !important;
  text-align: left !important;
}

.home-season-rank-card-prestige .home-season-rank-meta {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: end !important;
  text-align: right !important;
  justify-items: end !important;
  min-width: 110px !important;
  padding-top: 1px !important;
}

.home-season-rank-card-prestige .home-season-rank-meta b {
  color: rgba(255, 204, 84, .98) !important;
  font-size: .86rem !important;
  line-height: 1 !important;
}

.home-season-rank-card-prestige .home-season-rank-meta b::after {
  content: " trophies";
  color: rgba(246, 237, 219, .66);
  font-size: .62rem;
  font-weight: 900;
}

.home-season-rank-card-prestige .home-season-rank-meta small {
  font-size: .62rem !important;
  line-height: 1.05 !important;
}

@media (min-width: 921px) and (max-height: 840px) {
  #seasonDialog .season-tabs-hero-overhaul {
    min-height: 108px !important;
  }

  #seasonDialog .season-hero-copy strong {
    font-size: clamp(2.15rem, 3.75vw, 3.05rem) !important;
  }

  #seasonDialog .season-overview-card .season-road-step,
  #seasonDialog .season-road-step {
    min-height: 62px !important;
    padding: 6px !important;
  }

  #seasonDialog .season-road-step img,
  #seasonDialog .season-overview-card .season-road-step img {
    width: 28px !important;
    height: 28px !important;
  }

  #seasonDialog .season-quick-facts-card div {
    min-height: 70px !important;
    padding: 11px 12px !important;
  }

  #seasonDialog .season-quick-facts-card img {
    width: 42px !important;
    height: 42px !important;
  }
}

@media (max-width: 760px) {
  .home-season-rank-card.home-season-rank-card-prestige,
  .home-season-rank-card.home-season-rank-card-compact.home-season-rank-card-prestige {
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    min-height: 64px !important;
    padding: 10px 11px !important;
  }

  .home-season-rank-card-prestige .home-season-rank-icon {
    width: 42px !important;
    height: 42px !important;
  }

  #seasonDialog .season-overview-card .season-road-milestones {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* v7.0.296 Season full content scale polish.
   Enlarges Overview/Rules/Rewards content for the 1200x800 dialog, fixes progress meta overlap,
   and adds companion previews to the Season podium when leaderboard entries include character assets. */

/* Overview: progress meta must sit below the bar, not inside it. */
#seasonDialog .season-overview-card,
#seasonDialog .season-overview-main-card {
  padding: 20px 18px 18px !important;
}

#seasonDialog .season-overview-card-head-art {
  grid-template-columns: 96px minmax(0, 1fr) minmax(150px, auto) !important;
  gap: 15px !important;
  margin-bottom: 12px !important;
}

#seasonDialog .season-overview-card-head-art > img {
  width: 96px !important;
  height: 96px !important;
}

#seasonDialog .season-overview-card-head-art span {
  font-size: .76rem !important;
  letter-spacing: .20em !important;
}

#seasonDialog .season-overview-card-head-art strong {
  font-size: 1.62rem !important;
  line-height: 1.02 !important;
}

#seasonDialog .season-overview-card-head-art small {
  font-size: .82rem !important;
  line-height: 1.1 !important;
}

#seasonDialog .season-overview-next b {
  font-size: 1.72rem !important;
}

#seasonDialog .season-overview-next small {
  font-size: .68rem !important;
}

#seasonDialog .season-overview-track {
  height: 14px !important;
  margin: 14px 0 20px !important;
  position: relative !important;
  z-index: 2 !important;
}

#seasonDialog .season-overview-meta {
  margin: 0 0 16px !important;
  padding: 0 3px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 14px !important;
  position: relative !important;
  z-index: 3 !important;
}

#seasonDialog .season-overview-meta span {
  display: block !important;
  font-size: .72rem !important;
  line-height: 1.05 !important;
  color: rgba(239, 221, 178, .92) !important;
  text-shadow: 0 2px 4px rgba(0,0,0,.8) !important;
}

#seasonDialog .season-overview-meta span:nth-child(1) { text-align: left !important; }
#seasonDialog .season-overview-meta span:nth-child(2) { text-align: center !important; }
#seasonDialog .season-overview-meta span:nth-child(3) { text-align: right !important; }

#seasonDialog .season-overview-card .season-road-milestones {
  gap: 11px !important;
  align-content: stretch !important;
}

#seasonDialog .season-overview-card .season-road-step,
#seasonDialog .season-road-step {
  min-height: 92px !important;
  padding: 12px 10px 10px !important;
  gap: 5px !important;
}

#seasonDialog .season-road-step img,
#seasonDialog .season-overview-card .season-road-step img {
  width: 46px !important;
  height: 46px !important;
  opacity: .86 !important;
}

#seasonDialog .season-road-step.active img,
#seasonDialog .season-road-step.reached img,
#seasonDialog .season-overview-card .season-road-step.active img,
#seasonDialog .season-overview-card .season-road-step.reached img {
  width: 54px !important;
  height: 54px !important;
  opacity: 1 !important;
}

#seasonDialog .season-road-step strong,
#seasonDialog .season-overview-card .season-road-step strong {
  font-size: .82rem !important;
  line-height: 1.05 !important;
}

#seasonDialog .season-road-step small,
#seasonDialog .season-road-step span,
#seasonDialog .season-overview-card .season-road-step small,
#seasonDialog .season-overview-card .season-road-step span {
  font-size: .64rem !important;
  line-height: 1.05 !important;
}

#seasonDialog .season-overview-card .season-road-step:nth-child(n+6) {
  min-height: 90px !important;
}

/* Overview right side: make cards feel like feature cards, not tiny list items. */
#seasonDialog .season-quick-facts-card {
  padding: 15px !important;
  gap: 12px !important;
}

#seasonDialog .season-quick-facts-card div {
  grid-template-columns: 68px minmax(0, 1fr) !important;
  gap: 5px 16px !important;
  padding: 22px 20px !important;
  min-height: 118px !important;
  align-content: center !important;
}

#seasonDialog .season-quick-facts-card img {
  width: 66px !important;
  height: 66px !important;
}

#seasonDialog .season-quick-facts-card b {
  font-size: 1.18rem !important;
  line-height: 1.05 !important;
}

#seasonDialog .season-quick-facts-card span {
  font-size: .86rem !important;
  line-height: 1.24 !important;
}

/* Rules: turn the large empty grid into readable feature cards. */
#seasonDialog .season-rules-overhaul-card {
  padding: 18px !important;
  gap: 18px !important;
}

#seasonDialog .season-rule-grid {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(190px, 1fr)) !important;
  gap: 14px !important;
}

#seasonDialog .season-rule-tile {
  padding: 24px 22px !important;
  min-height: 190px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 10px !important;
}

#seasonDialog .season-rule-tile img {
  width: 72px !important;
  height: 72px !important;
  margin: 0 0 4px !important;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.55)) !important;
}

#seasonDialog .season-rule-tile b {
  font-size: 1.18rem !important;
  line-height: 1.05 !important;
}

#seasonDialog .season-rule-tile em {
  max-width: 270px !important;
  font-size: .86rem !important;
  line-height: 1.26 !important;
  color: rgba(240, 231, 211, .82) !important;
}

/* Rewards: keep the 3-row idea, but scale it up to the big window. */
#seasonDialog .season-rewards-overhaul-card {
  padding: 18px !important;
  gap: 16px !important;
  grid-template-rows: 50px minmax(0, 1fr) 56px !important;
}

#seasonDialog .season-rewards-overhaul-card .season-section-head-art {
  min-height: 50px !important;
  height: 50px !important;
}

#seasonDialog .season-rewards-list-overhaul {
  height: 100% !important;
  align-content: stretch !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(170px, 1.25fr) minmax(72px, .62fr) minmax(72px, .62fr) !important;
  gap: 14px !important;
}

#seasonDialog .season-reward-row-premium {
  min-height: 72px !important;
  height: 100% !important;
  padding: 15px 17px !important;
  grid-template-columns: 52px minmax(0, 1fr) auto !important;
  gap: 4px 14px !important;
  align-items: center !important;
}

#seasonDialog .season-reward-row-premium img {
  width: 52px !important;
  height: 52px !important;
}

#seasonDialog .season-reward-row-premium strong {
  font-size: 1.02rem !important;
  line-height: 1.05 !important;
}

#seasonDialog .season-reward-row-premium span {
  font-size: 1.24rem !important;
  line-height: 1.02 !important;
}

#seasonDialog .season-reward-row-premium small {
  font-size: .68rem !important;
  line-height: 1.08 !important;
}

#seasonDialog .season-reward-row-premium:nth-child(1) {
  grid-column: 2 / span 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-height: 170px !important;
  grid-template-columns: 74px minmax(0, 1fr) auto !important;
  padding: 25px 28px !important;
}

#seasonDialog .season-reward-row-premium:nth-child(1) img {
  width: 74px !important;
  height: 74px !important;
}

#seasonDialog .season-reward-row-premium:nth-child(1) strong {
  font-size: 1.24rem !important;
}

#seasonDialog .season-reward-row-premium:nth-child(1) span {
  font-size: 1.55rem !important;
}

#seasonDialog .season-reward-row-premium:nth-child(2) { grid-column: 1 / span 2 !important; grid-row: 2 !important; }
#seasonDialog .season-reward-row-premium:nth-child(3) { grid-column: 3 / span 2 !important; grid-row: 2 !important; }
#seasonDialog .season-reward-row-premium:nth-child(4) { grid-column: 1 !important; grid-row: 3 !important; }
#seasonDialog .season-reward-row-premium:nth-child(5) { grid-column: 2 !important; grid-row: 3 !important; }
#seasonDialog .season-reward-row-premium:nth-child(6) { grid-column: 3 !important; grid-row: 3 !important; }
#seasonDialog .season-reward-row-premium:nth-child(7) { grid-column: 4 !important; grid-row: 3 !important; }

#seasonDialog .season-reward-note {
  min-height: 56px !important;
  height: 56px !important;
  padding: 10px 18px !important;
  font-size: .84rem !important;
}

#seasonDialog .season-reward-note img {
  width: 44px !important;
  height: 44px !important;
}

/* Leaderboard: add small companion preview over the podium slots. */
#seasonDialog .season-podium-slot {
  grid-template-rows: auto 58px auto auto !important;
  align-content: center !important;
  gap: 4px !important;
}

#seasonDialog .season-podium-companion {
  width: 62px !important;
  height: 58px !important;
  margin: 0 auto !important;
  border-radius: 16px !important;
  background: radial-gradient(circle at 50% 40%, rgba(216, 180, 96, .18), rgba(0,0,0,.2) 68%) !important;
  overflow: hidden !important;
}

#seasonDialog .season-podium-companion.empty span {
  font-size: 1.6rem !important;
  opacity: .55 !important;
}

@media (min-width: 921px) and (max-height: 840px) {
  #seasonDialog .season-overview-card-head-art > img { width: 82px !important; height: 82px !important; }
  #seasonDialog .season-overview-card-head-art strong { font-size: 1.44rem !important; }
  #seasonDialog .season-road-step img,
  #seasonDialog .season-overview-card .season-road-step img { width: 38px !important; height: 38px !important; }
  #seasonDialog .season-overview-card .season-road-step,
  #seasonDialog .season-road-step { min-height: 78px !important; }
  #seasonDialog .season-quick-facts-card div { min-height: 100px !important; padding: 18px 16px !important; }
  #seasonDialog .season-quick-facts-card img { width: 56px !important; height: 56px !important; }
  #seasonDialog .season-rule-grid { grid-template-rows: repeat(2, minmax(158px, 1fr)) !important; }
  #seasonDialog .season-rule-tile { min-height: 158px !important; padding: 18px 16px !important; }
  #seasonDialog .season-rule-tile img { width: 58px !important; height: 58px !important; }
  #seasonDialog .season-rewards-list-overhaul { grid-template-rows: minmax(136px, 1.1fr) minmax(62px, .58fr) minmax(62px, .58fr) !important; }
  #seasonDialog .season-reward-row-premium:nth-child(1) { min-height: 136px !important; }
}


/* v7.0.297 Season fast fix: Trophy Road label spacing + milestone emblem alignment.
   Fixes progress labels being visually inside the progress bar and centers/lifts rank emblems inside milestone tiles. */
#seasonDialog .season-overview-track {
  margin: 12px 0 30px !important;
  height: 13px !important;
}

#seasonDialog .season-overview-meta {
  margin: -10px 0 18px !important;
  padding: 0 7px !important;
  min-height: 18px !important;
  align-items: start !important;
  z-index: 6 !important;
}

#seasonDialog .season-overview-meta span {
  display: block !important;
  font-size: .76rem !important;
  line-height: 1.18 !important;
  color: rgba(248, 234, 198, .96) !important;
  text-shadow: 0 2px 5px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.75) !important;
}

#seasonDialog .season-overview-card .season-road-milestones {
  margin-top: 12px !important;
  gap: 13px !important;
  align-items: stretch !important;
}

#seasonDialog .season-overview-card .season-road-step,
#seasonDialog .season-road-step {
  min-height: 102px !important;
  padding: 13px 10px 10px !important;
  display: grid !important;
  grid-template-rows: 42px auto auto !important;
  justify-items: center !important;
  align-items: start !important;
  text-align: center !important;
  gap: 4px !important;
}

#seasonDialog .season-road-step i,
#seasonDialog .season-overview-card .season-road-step i {
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 auto 2px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

#seasonDialog .season-road-step img,
#seasonDialog .season-road-step i img,
#seasonDialog .season-overview-card .season-road-step img,
#seasonDialog .season-overview-card .season-road-step i img {
  width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: -3px auto 0 !important;
  transform: translateX(-1px) !important;
  display: block !important;
}

#seasonDialog .season-road-step.active img,
#seasonDialog .season-road-step.reached img,
#seasonDialog .season-overview-card .season-road-step.active img,
#seasonDialog .season-overview-card .season-road-step.reached img {
  width: 48px !important;
  height: 48px !important;
  margin-top: -6px !important;
  transform: translateX(-1px) !important;
}

#seasonDialog .season-road-step strong,
#seasonDialog .season-overview-card .season-road-step strong {
  margin: 0 !important;
  font-size: .86rem !important;
  line-height: 1.08 !important;
}

#seasonDialog .season-road-step small,
#seasonDialog .season-road-step span,
#seasonDialog .season-overview-card .season-road-step small,
#seasonDialog .season-overview-card .season-road-step span {
  margin: 0 !important;
  font-size: .66rem !important;
  line-height: 1.08 !important;
}

@media (min-width: 921px) and (max-height: 840px) {
  #seasonDialog .season-overview-track { margin-bottom: 26px !important; }
  #seasonDialog .season-overview-meta { margin-top: -8px !important; margin-bottom: 15px !important; }
  #seasonDialog .season-overview-card .season-road-step,
  #seasonDialog .season-road-step {
    min-height: 92px !important;
    grid-template-rows: 38px auto auto !important;
  }
  #seasonDialog .season-road-step i,
  #seasonDialog .season-overview-card .season-road-step i {
    height: 38px !important;
    min-height: 38px !important;
  }
  #seasonDialog .season-road-step img,
  #seasonDialog .season-road-step i img,
  #seasonDialog .season-overview-card .season-road-step img,
  #seasonDialog .season-overview-card .season-road-step i img {
    width: 38px !important;
    height: 38px !important;
    margin-top: -3px !important;
  }
  #seasonDialog .season-road-step.active img,
  #seasonDialog .season-road-step.reached img,
  #seasonDialog .season-overview-card .season-road-step.active img,
  #seasonDialog .season-overview-card .season-road-step.reached img {
    width: 44px !important;
    height: 44px !important;
    margin-top: -5px !important;
  }
}


/* v7.0.298 Ranks Prestige Polish: premium atlas header, stronger podium, new RGBA icons and roomier ranking board. */
.hall-dialog.leaderboard-dialog {
  width: min(1200px, calc(100vw - 38px)) !important;
  max-width: min(1200px, calc(100vw - 38px)) !important;
}
.hall-of-fame-card {
  min-height: min(800px, calc(100vh - 52px)) !important;
  padding: 0 22px 18px !important;
  border-color: rgba(209, 173, 93, .54) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(206,159,70,.13), transparent 34%),
    linear-gradient(180deg, rgba(24,20,15,.98), rgba(7,7,7,.985)) !important;
}
.hall-header {
  min-height: 176px !important;
  margin: 0 -22px 14px !important;
  padding: 24px 72px 24px !important;
  justify-content: center !important;
  text-align: center !important;
  background:
    linear-gradient(90deg, rgba(8,7,5,.50), rgba(8,7,5,.12) 48%, rgba(8,7,5,.55)),
    linear-gradient(180deg, rgba(8,7,5,.08), rgba(8,7,5,.54)),
    url('/assets/ui/leaderboards/hall-of-fame-header-bg.png') center/cover no-repeat !important;
  border-bottom: 1px solid rgba(209,173,93,.30) !important;
}
.hall-header > div {
  display: grid !important;
  justify-items: center !important;
  gap: 3px !important;
  max-width: 760px !important;
}
.hall-kicker {
  padding: 4px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(209,173,93,.40) !important;
  background: rgba(11,9,7,.46) !important;
  letter-spacing: .20em !important;
}
.hall-header h2 {
  justify-content: center !important;
  font-size: clamp(3rem, 5vw, 4.75rem) !important;
  line-height: .92 !important;
  margin: 4px 0 0 !important;
  text-shadow: 0 5px 24px rgba(0,0,0,.55) !important;
}
.hall-header p {
  max-width: 620px !important;
  font-size: 1.02rem !important;
  color: rgba(245,234,215,.82) !important;
}
.hall-title-medal {
  width: 62px !important;
  height: 62px !important;
  margin-right: 2px !important;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.48));
}
.hall-close-btn {
  position: absolute !important;
  right: 18px !important;
  top: 18px !important;
  z-index: 5 !important;
}
.hall-view-tabs,
.hall-season-tabs,
.hall-legacy-period-tabs {
  justify-content: center !important;
}
.hall-view-tabs {
  margin: -2px 0 8px !important;
}
.hall-season-tabs {
  gap: 10px !important;
  margin-bottom: 10px !important;
}
.leaderboard-tab {
  min-height: 42px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  border-color: rgba(209,173,93,.34) !important;
  background: linear-gradient(180deg, rgba(24,20,15,.92), rgba(9,8,7,.86)) !important;
}
.leaderboard-tab.active {
  border-color: rgba(255,224,151,.70) !important;
  background: linear-gradient(180deg, rgba(225,190,114,.94), rgba(147,103,45,.88)) !important;
  color: #14100b !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.leaderboard-tab img {
  width: 25px !important;
  height: 25px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.38)) !important;
}
.leaderboard-tab.active img {
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.32)) contrast(1.06) brightness(1.02) !important;
}
.hall-leaderboard-list {
  max-height: calc(min(800px, calc(100vh - 52px)) - 292px) !important;
  padding-right: 6px !important;
}
.hall-current-category-hero,
.hall-overview-hero,
.season-hall-hero {
  border-color: rgba(209,173,93,.42) !important;
  background:
    linear-gradient(90deg, rgba(54,42,25,.62), rgba(13,11,9,.66) 58%, rgba(10,9,8,.84)),
    radial-gradient(circle at 78% 30%, rgba(255,224,151,.12), transparent 30%) !important;
}
.hall-current-category strong,
.hall-current-category-copy strong {
  font-size: clamp(1.45rem, 2.3vw, 2.25rem) !important;
  line-height: 1.03 !important;
}
.hall-current-category small {
  font-size: .98rem !important;
}
.hall-current-category-art img,
.season-hall-hero-art img {
  width: 76px !important;
  height: 76px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 14px 20px rgba(0,0,0,.42)) !important;
}
.hall-podium-wrap {
  min-height: 278px !important;
  padding: 38px 28px 26px !important;
  border-color: rgba(209,173,93,.38) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,226,154,.20), transparent 30%),
    linear-gradient(180deg, rgba(10,9,8,.12), rgba(10,9,8,.58)),
    url('/assets/ui/leaderboards/hall-of-fame-podium.png') center bottom/cover no-repeat !important;
}
.hall-podium {
  gap: 18px !important;
}
.hall-podium-card {
  min-height: 212px !important;
  gap: 8px !important;
  padding: 16px 15px !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,238,190,.16), transparent 33%),
    linear-gradient(180deg, rgba(22,18,14,.78), rgba(8,7,6,.66)) !important;
}
.hall-podium-card.place-1 {
  min-height: 268px !important;
  transform: translateY(-16px) !important;
  border-color: rgba(255,218,132,.74) !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,226,154,.25), transparent 37%),
    linear-gradient(180deg, rgba(90,66,36,.82), rgba(12,10,8,.70)) !important;
}
.hall-podium-card.place-2,
.hall-podium-card.place-3 {
  transform: translateY(10px) !important;
}
.hall-medal,
.hall-podium-card.place-1 .hall-medal,
.hall-podium-card.place-2 .hall-medal,
.hall-podium-card.place-3 .hall-medal {
  width: 60px !important;
  height: 60px !important;
}
.hall-podium-card.place-1 .hall-medal {
  width: 72px !important;
  height: 72px !important;
}
.leaderboard-avatar3d.podium-avatar {
  width: 92px !important;
  height: 92px !important;
  min-width: 92px !important;
  border-radius: 26px !important;
}
.place-1 .leaderboard-avatar3d.podium-avatar {
  width: 126px !important;
  height: 126px !important;
  min-width: 126px !important;
  border-radius: 30px !important;
}
.hall-podium-card strong {
  font-size: 1.22rem !important;
}
.hall-podium-card.place-1 strong {
  font-size: 1.38rem !important;
}
.hall-podium-card small {
  font-size: .96rem !important;
}
.hall-place-badge {
  font-size: .70rem !important;
  padding: 5px 12px !important;
}
.hall-ranking-table {
  gap: 9px !important;
}
.hall-rank-row {
  grid-template-columns: 64px 54px minmax(0, 1fr) auto !important;
  min-height: 68px !important;
  padding: 12px 15px !important;
  border-color: rgba(209,173,93,.22) !important;
}
.hall-rank-number {
  font-size: 1.1rem !important;
}
.hall-player-name {
  font-size: 1.03rem !important;
}
.hall-score {
  font-size: 1.08rem !important;
}
.leaderboard-avatar3d.hall-row-avatar,
.leaderboard-avatar3d.hall-my-avatar {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
}
.hall-my-rank {
  min-height: 124px !important;
  margin-top: 2px !important;
  border-color: rgba(209,173,93,.50) !important;
  background:
    linear-gradient(90deg, rgba(12,10,8,.80), rgba(54,42,25,.28) 52%, rgba(12,10,8,.82)),
    url('/assets/ui/leaderboards/hall-of-fame-your-position-bg.png') center/cover no-repeat,
    rgba(18,15,12,.96) !important;
}
.hall-overview-grid {
  gap: 14px !important;
}
.hall-overview-tile {
  min-height: 160px !important;
  padding: 18px !important;
}
.hall-overview-tile img {
  width: 72px !important;
  height: 72px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.42));
}
.hall-overview-tile b {
  font-size: 1.12rem !important;
}
.hall-overview-tile span {
  font-size: .96rem !important;
  line-height: 1.42 !important;
}
@media (max-width: 760px) {
  .hall-dialog.leaderboard-dialog {
    width: min(96vw, calc(100vw - 12px)) !important;
    max-width: min(96vw, calc(100vw - 12px)) !important;
  }
  .hall-header {
    min-height: 158px !important;
    padding: 18px 14px 18px !important;
    margin: 0 -14px 12px !important;
  }
  .hall-header h2 { font-size: clamp(2rem, 9vw, 3rem) !important; }
  .hall-title-medal { width: 46px !important; height: 46px !important; }
  .hall-current-category-art img,
  .season-hall-hero-art img { width: 58px !important; height: 58px !important; }
  .hall-podium-card.place-1,
  .hall-podium-card.place-2,
  .hall-podium-card.place-3 { transform: none !important; min-height: 164px !important; }
  .leaderboard-avatar3d.podium-avatar,
  .place-1 .leaderboard-avatar3d.podium-avatar { width: 82px !important; height: 82px !important; min-width: 82px !important; }
  .hall-rank-row { grid-template-columns: 48px 44px minmax(0, 1fr) !important; min-height: 64px !important; }
}


/* v7.0.299 Ranks current-season cleanup: cleaner header, no title icon/subtitle, stronger Current Season tab. */
#menuLeaderboardDialog .hall-header h2 .hall-title-medal,
#menuLeaderboardDialog .hall-title-medal,
#menuLeaderboardDialog .hall-header p {
  display: none !important;
}
#menuLeaderboardDialog .hall-header {
  min-height: 148px !important;
  padding-top: 26px !important;
  padding-bottom: 22px !important;
}
#menuLeaderboardDialog .hall-header h2 {
  margin-top: 6px !important;
  gap: 0 !important;
}
#menuLeaderboardDialog .hall-header h2 > span:not(.hall-title-medal) {
  display: inline-block !important;
}
#menuLeaderboardDialog .hall-leaderboard-list {
  max-height: calc(min(800px, calc(100vh - 52px)) - 252px) !important;
}

#menuLeaderboardDialog .season-hall-board-polish {
  gap: 12px !important;
}
#menuLeaderboardDialog .season-hall-hero-polish {
  min-height: 122px !important;
  padding: 22px 28px !important;
  border-color: rgba(218, 181, 98, .54) !important;
  background:
    radial-gradient(circle at 86% 38%, rgba(255,224,151,.18), transparent 28%),
    linear-gradient(90deg, rgba(70,54,29,.70), rgba(16,13,10,.78) 54%, rgba(8,7,6,.92)),
    url('/assets/ui/leaderboards/hall-of-fame-header-bg.png') center/cover no-repeat !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 42px rgba(0,0,0,.24) !important;
}
#menuLeaderboardDialog .season-hall-hero-copy span {
  font-size: .72rem !important;
  letter-spacing: .22em !important;
}
#menuLeaderboardDialog .season-hall-hero-copy strong {
  font-size: clamp(2rem, 3.4vw, 3.25rem) !important;
  line-height: .95 !important;
}
#menuLeaderboardDialog .season-hall-hero-copy small {
  max-width: 62ch !important;
  margin-top: 8px !important;
  font-size: .96rem !important;
  line-height: 1.42 !important;
  color: rgba(245,234,215,.78) !important;
}
#menuLeaderboardDialog .season-hall-hero-art {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}
#menuLeaderboardDialog .season-hall-hero-art img {
  width: 92px !important;
  height: 92px !important;
}
#menuLeaderboardDialog .season-hall-info-btn {
  min-width: 128px !important;
  min-height: 44px !important;
  font-size: .92rem !important;
  box-shadow: 0 14px 24px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.24) !important;
}

#menuLeaderboardDialog .season-hall-podium-wrap {
  min-height: 216px !important;
  padding: 20px 24px !important;
  border-color: rgba(209,173,93,.38) !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,226,154,.18), transparent 32%),
    linear-gradient(180deg, rgba(12,10,8,.10), rgba(8,7,6,.60)),
    url('/assets/ui/leaderboards/hall-of-fame-podium.png') center bottom/cover no-repeat !important;
}
#menuLeaderboardDialog .season-hall-podium {
  gap: 14px !important;
}
#menuLeaderboardDialog .season-hall-podium-card {
  min-height: 172px !important;
  padding: 16px 14px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,238,190,.14), transparent 34%),
    linear-gradient(180deg, rgba(24,20,15,.74), rgba(8,7,6,.66)) !important;
  border-color: rgba(209,173,93,.30) !important;
}
#menuLeaderboardDialog .season-hall-podium-card.place-1 {
  min-height: 194px !important;
  transform: translateY(-10px) !important;
  border-color: rgba(255,218,132,.70) !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,226,154,.24), transparent 36%),
    linear-gradient(180deg, rgba(73,55,30,.72), rgba(10,8,6,.72)) !important;
}
#menuLeaderboardDialog .season-podium-avatar {
  width: 72px !important;
  height: 72px !important;
  border-radius: 20px !important;
}
#menuLeaderboardDialog .season-hall-podium-card.place-1 .season-podium-avatar {
  width: 90px !important;
  height: 90px !important;
}
#menuLeaderboardDialog .season-hall-podium-card b {
  font-size: 1rem !important;
}
#menuLeaderboardDialog .season-hall-podium-card strong {
  font-size: 1.14rem !important;
}
#menuLeaderboardDialog .season-hall-podium-card span {
  font-size: 1rem !important;
}
#menuLeaderboardDialog .season-hall-podium-card small {
  font-size: .82rem !important;
}
#menuLeaderboardDialog .season-hall-small-empty {
  min-height: 64px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 20px !important;
  border: 1px solid rgba(209,173,93,.18) !important;
  background: linear-gradient(180deg, rgba(11,10,9,.78), rgba(6,6,6,.88)) !important;
  color: rgba(245,234,215,.78) !important;
  font-size: 1.04rem !important;
  font-weight: 800 !important;
}
#menuLeaderboardDialog .season-hall-myrank {
  min-height: 92px !important;
  padding: 14px 16px !important;
  border-color: rgba(209,173,93,.48) !important;
  background: linear-gradient(90deg, rgba(73,55,30,.55), rgba(12,10,8,.78) 44%, rgba(8,7,6,.88)) !important;
}
#menuLeaderboardDialog .season-hall-myrank > span {
  font-size: .72rem !important;
  letter-spacing: .20em !important;
}
#menuLeaderboardDialog .season-hall-myrank div strong {
  font-size: 1.22rem !important;
}
#menuLeaderboardDialog .season-hall-myrank div b {
  font-size: 1.05rem !important;
}

@media (max-width: 760px) {
  #menuLeaderboardDialog .hall-header {
    min-height: 136px !important;
  }
  #menuLeaderboardDialog .season-hall-hero-polish {
    min-height: 112px !important;
    padding: 16px !important;
  }
  #menuLeaderboardDialog .season-hall-hero-art img {
    width: 60px !important;
    height: 60px !important;
  }
  #menuLeaderboardDialog .season-hall-podium-card.place-1 {
    transform: none !important;
  }
}


/* v7.0.301 Ranks scroll/fit hotfix: make every Hall of Fame tab fit inside the 1200x800 shell and allow only vertical scrolling for Top 100. */
#menuLeaderboardDialog .hall-leaderboard-list {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  padding: 16px 20px 74px !important;
  scroll-padding-bottom: 92px !important;
}

#menuLeaderboardDialog .hall-prestige-board,
#menuLeaderboardDialog .hall-rankings-only-board,
#menuLeaderboardDialog .hall-rankings-polish,
#menuLeaderboardDialog .season-hall-board,
#menuLeaderboardDialog .season-hall-board-polish,
#menuLeaderboardDialog .season-winners-board,
#menuLeaderboardDialog .season-winners-board-polish {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
}

#menuLeaderboardDialog .hall-current-category-hero,
#menuLeaderboardDialog .hall-current-category-prestige,
#menuLeaderboardDialog .season-hall-hero-polish,
#menuLeaderboardDialog .season-winners-hero-polish {
  min-height: 82px !important;
  max-height: none !important;
  padding: 14px 18px !important;
  margin-bottom: 12px !important;
  border-radius: 20px !important;
}

#menuLeaderboardDialog .hall-current-category-copy strong,
#menuLeaderboardDialog .hall-current-category strong,
#menuLeaderboardDialog .season-hall-hero-copy strong {
  font-size: clamp(1.55rem, 2.45vw, 2.35rem) !important;
  line-height: .98 !important;
}

#menuLeaderboardDialog .hall-current-category-copy small,
#menuLeaderboardDialog .hall-current-category small,
#menuLeaderboardDialog .season-hall-hero-copy small {
  font-size: .82rem !important;
  line-height: 1.24 !important;
  max-width: 64ch !important;
}

#menuLeaderboardDialog .hall-current-category-art img,
#menuLeaderboardDialog .season-hall-hero-art img {
  width: 54px !important;
  height: 54px !important;
}

#menuLeaderboardDialog .hall-podium-wrap,
#menuLeaderboardDialog .season-hall-podium-wrap {
  min-height: 188px !important;
  padding: 20px 22px 18px !important;
  margin-bottom: 10px !important;
  overflow: visible !important;
}

#menuLeaderboardDialog .hall-podium,
#menuLeaderboardDialog .season-hall-podium {
  align-items: end !important;
  gap: 14px !important;
}

#menuLeaderboardDialog .hall-podium-card,
#menuLeaderboardDialog .season-hall-podium-card {
  min-height: 158px !important;
  max-height: none !important;
  padding: 12px 12px 10px !important;
  gap: 5px !important;
  overflow: hidden !important;
}

#menuLeaderboardDialog .hall-podium-card.place-1,
#menuLeaderboardDialog .season-hall-podium-card.place-1 {
  min-height: 186px !important;
  transform: translateY(-6px) !important;
}

#menuLeaderboardDialog .hall-podium-card.place-2,
#menuLeaderboardDialog .hall-podium-card.place-3,
#menuLeaderboardDialog .season-hall-podium-card.place-2,
#menuLeaderboardDialog .season-hall-podium-card.place-3 {
  transform: translateY(2px) !important;
}

#menuLeaderboardDialog .hall-medal,
#menuLeaderboardDialog .hall-podium-card.place-1 .hall-medal {
  width: 46px !important;
  height: 46px !important;
}

#menuLeaderboardDialog .leaderboard-avatar3d.podium-avatar,
#menuLeaderboardDialog .season-podium-avatar {
  width: 68px !important;
  height: 68px !important;
  min-width: 68px !important;
  border-radius: 18px !important;
}

#menuLeaderboardDialog .place-1 .leaderboard-avatar3d.podium-avatar,
#menuLeaderboardDialog .season-hall-podium-card.place-1 .season-podium-avatar {
  width: 82px !important;
  height: 82px !important;
  min-width: 82px !important;
  border-radius: 20px !important;
}

#menuLeaderboardDialog .hall-podium-card strong,
#menuLeaderboardDialog .hall-podium-card.place-1 strong,
#menuLeaderboardDialog .season-hall-podium-card strong {
  font-size: 1rem !important;
  line-height: 1.02 !important;
}

#menuLeaderboardDialog .hall-podium-card small,
#menuLeaderboardDialog .season-hall-podium-card small,
#menuLeaderboardDialog .season-hall-podium-card span {
  font-size: .78rem !important;
  line-height: 1.12 !important;
}

#menuLeaderboardDialog .hall-place-badge {
  font-size: .62rem !important;
  padding: 4px 10px !important;
}

#menuLeaderboardDialog .hall-ranking-table,
#menuLeaderboardDialog .season-hall-table,
#menuLeaderboardDialog .season-winners-list {
  display: grid !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

#menuLeaderboardDialog .hall-rank-row,
#menuLeaderboardDialog .season-hall-row,
#menuLeaderboardDialog .season-winner-row {
  min-height: 58px !important;
  padding: 9px 12px !important;
}

#menuLeaderboardDialog .hall-my-rank,
#menuLeaderboardDialog .season-hall-myrank {
  min-height: 82px !important;
  margin-top: 10px !important;
  padding: 12px 14px !important;
  position: relative !important;
  z-index: 2 !important;
}

#menuLeaderboardDialog .season-hall-small-empty,
#menuLeaderboardDialog .leaderboard-empty.hall-small-empty {
  min-height: 50px !important;
  margin: 8px 0 !important;
  padding: 12px !important;
}

#menuLeaderboardDialog .hall-season-tabs {
  position: sticky !important;
  bottom: 10px !important;
  z-index: 30 !important;
  width: fit-content !important;
  max-width: calc(100% - 32px) !important;
  margin: 18px auto 0 !important;
  padding: 5px 8px !important;
  background: rgba(4,4,4,.82) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 -10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

#menuLeaderboardDialog .hall-season-tabs .leaderboard-tab,
#menuLeaderboardDialog .leaderboard-tab {
  min-height: 32px !important;
  height: 32px !important;
  padding: 6px 12px !important;
  font-size: .61rem !important;
}

#menuLeaderboardDialog .leaderboard-tab img {
  width: 20px !important;
  height: 20px !important;
}

@media (min-width: 761px) and (max-height: 850px) {
  #menuLeaderboardDialog .hall-leaderboard-list {
    padding: 14px 18px 68px !important;
  }
  #menuLeaderboardDialog .hall-current-category-hero,
  #menuLeaderboardDialog .season-hall-hero-polish,
  #menuLeaderboardDialog .season-winners-hero-polish {
    min-height: 74px !important;
    padding: 12px 16px !important;
  }
  #menuLeaderboardDialog .hall-podium-wrap,
  #menuLeaderboardDialog .season-hall-podium-wrap {
    min-height: 170px !important;
    padding-top: 16px !important;
  }
  #menuLeaderboardDialog .hall-podium-card,
  #menuLeaderboardDialog .season-hall-podium-card {
    min-height: 144px !important;
  }
  #menuLeaderboardDialog .hall-podium-card.place-1,
  #menuLeaderboardDialog .season-hall-podium-card.place-1 {
    min-height: 164px !important;
  }
}


/* v7.0.304 Start Playing Menu Polish */
.rq-hint-circle {
  stroke: rgba(251, 191, 36, 0.98);
  fill: rgba(251, 191, 36, 0.16);
  filter: drop-shadow(0 0 16px rgba(251, 191, 36, 0.35));
  animation: rqHintCirclePulse 1.45s ease-in-out infinite;
}

.rq-hint-circle-label-wrap {
  pointer-events: none;
}

.rq-hint-circle-label {
  min-width: 142px;
  padding: 8px 10px;
  border: 1px solid rgba(251, 191, 36, 0.72);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.84));
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.28), 0 0 22px rgba(251, 191, 36, 0.22);
  color: #fff7ed;
  text-align: center;
  backdrop-filter: blur(8px);
}

.rq-hint-circle-label span,
.rq-hint-circle-label small {
  display: block;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(254, 243, 199, 0.78);
}

.rq-hint-circle-label strong {
  display: block;
  margin: 2px 0;
  font-size: 16px;
  line-height: 1.05;
  color: #fde68a;
}

.rq-hint-circle-label small {
  font-size: 9px;
  color: rgba(255, 237, 213, 0.68);
}

.rq-hint-circle-active #timerLabel,
.rq-hint-circle-active .timer-danger #timerLabel {
  text-shadow: 0 0 18px rgba(251, 191, 36, 0.72);
}

@keyframes rqHintCirclePulse {
  0%, 100% { stroke-width: 2; opacity: 0.86; }
  50% { stroke-width: 4; opacity: 1; }
}


/* v7.0.304 Start Playing Menu Polish: unified modal size, premium banner and cleaner route cards. */
.mode-select-dialog {
  width: min(1020px, calc(100dvw - 34px)) !important;
  height: min(700px, calc(100dvh - 36px)) !important;
  max-height: min(700px, calc(100dvh - 36px)) !important;
  padding: 0 !important;
  overflow: visible !important;
}

.mode-select-dialog::backdrop {
  background:
    radial-gradient(circle at 50% 24%, rgba(231,188,96,.12), transparent 36%),
    rgba(3, 4, 7, .78) !important;
  backdrop-filter: blur(10px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.05) !important;
}

.mode-select-shell {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  border: 1px solid rgba(222,198,160,.22) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(216,176,106,.10), transparent 34%),
    linear-gradient(180deg, rgba(28,22,15,.98), rgba(11,9,7,.98)) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,244,224,.07) !important;
}

.mode-select-banner {
  position: relative;
  min-height: 126px;
  padding: 22px 80px 18px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  text-align: left;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,.18) 42%, rgba(0,0,0,.48)),
    radial-gradient(circle at 22% 18%, rgba(255,211,128,.22), transparent 34%),
    url('/assets/ui/leaderboards/hall-of-fame-header-bg.png') center/cover no-repeat;
  border-bottom: 1px solid rgba(222,198,160,.15);
}

.mode-select-banner::before,
.mode-select-banner::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.mode-select-banner::before {
  inset: 10px;
  border: 1px solid rgba(255,232,185,.13);
  border-radius: 20px;
}

.mode-select-banner::after {
  width: 240px;
  height: 240px;
  right: -78px;
  top: -88px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(239,196,112,.17), transparent 68%);
}

.mode-select-banner img {
  position: relative;
  z-index: 1;
  width: min(150px, 28vw);
  max-height: 82px;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.38));
}

.mode-select-banner-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
  justify-items: start;
}

.mode-select-banner-copy span,
.mode-select-head span,
.mode-select-card-kicker {
  color: rgba(231,206,166,.76) !important;
  font-size: .66rem !important;
  font-weight: 1000 !important;
  letter-spacing: .19em !important;
  text-transform: uppercase !important;
}

.mode-select-banner-copy strong {
  color: #fff3d8;
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: .94;
  text-shadow: 0 2px 20px rgba(0,0,0,.42);
}

.mode-select-banner-copy small {
  color: rgba(244,231,202,.78);
  font-size: .88rem;
  font-weight: 750;
}

.mode-select-head {
  padding: 0 22px 0 !important;
  align-items: center !important;
}

.mode-select-head > div {
  min-height: 58px;
  padding: 11px 14px;
  border-radius: 18px;
  border: 1px solid rgba(222,198,160,.12);
  background:
    radial-gradient(circle at 0% 0%, rgba(216,176,106,.10), transparent 38%),
    rgba(12,10,8,.34);
}

.mode-select-head strong {
  font-size: clamp(1.18rem, 2.0vw, 1.55rem) !important;
}

.mode-select-head small {
  font-size: .78rem !important;
}

.mode-select-grid {
  min-height: 0 !important;
  overflow: auto !important;
  padding: 0 22px 2px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: start !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(216,176,106,.42) rgba(8,7,5,.46);
}

.mode-select-grid::-webkit-scrollbar { width: 10px; }
.mode-select-grid::-webkit-scrollbar-track { background: rgba(8,7,5,.46); border-radius: 999px; }
.mode-select-grid::-webkit-scrollbar-thumb { background: rgba(216,176,106,.42); border-radius: 999px; }

.mode-select-card {
  grid-template-columns: 146px minmax(0, 1fr) !important;
  min-height: 122px !important;
  padding: 9px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(216,176,106,.10), transparent 38%),
    linear-gradient(145deg, rgba(35,27,20,.92), rgba(12,10,8,.96)) !important;
}

.mode-select-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,236,190,.10), transparent 36%, rgba(216,176,106,.05));
  opacity: .75;
}

.mode-select-card-art {
  min-height: 104px !important;
  border-radius: 18px !important;
}

.mode-select-card-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(0,0,0,.35));
  pointer-events: none;
}

.mode-select-card-copy {
  position: relative;
  z-index: 1;
  align-content: center !important;
  gap: 5px !important;
}

.mode-select-card-kicker {
  display: block;
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(216,176,106,.16);
  background: rgba(12,10,8,.34);
  letter-spacing: .12em !important;
  font-size: .56rem !important;
}

.mode-select-card-copy strong {
  font-size: 1.12rem !important;
}

.mode-select-card-copy em {
  max-width: 95%;
  color: rgba(243,232,213,.75) !important;
}

.mode-select-card-copy small {
  margin-top: 1px;
  background: rgba(216,176,106,.08) !important;
}

.mode-select-card.selected {
  border-color: rgba(242,206,133,.68) !important;
  box-shadow: inset 0 0 0 1px rgba(242,206,133,.24), 0 22px 42px rgba(0,0,0,.34), 0 0 34px rgba(216,176,106,.18) !important;
}

.mode-select-actions {
  padding: 0 22px 20px !important;
  justify-content: space-between !important;
  border-top: 1px solid rgba(222,198,160,.12);
  background: linear-gradient(180deg, rgba(8,7,5,0), rgba(8,7,5,.28));
}

.mode-select-actions button {
  min-width: 170px !important;
  min-height: 46px !important;
}

.mode-select-actions .primary-btn {
  box-shadow: 0 16px 30px rgba(0,0,0,.26), 0 0 26px rgba(216,176,106,.12) !important;
}

body.rq-scaled-menu:not(.is-playing) .mode-select-dialog {
  transform: scale(var(--rq-menu-scale, .78));
  transform-origin: center center;
}

@media (max-width: 900px) {
  .mode-select-dialog {
    width: min(760px, calc(100dvw - 22px)) !important;
  }

  .mode-select-banner {
    grid-template-columns: 112px minmax(0, 1fr);
    min-height: 112px;
    padding: 18px 60px 16px 18px;
  }

  .mode-select-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 620px) {
  .mode-select-dialog {
    width: min(100dvw - 16px, 520px) !important;
    height: min(720px, calc(100dvh - 18px)) !important;
    max-height: calc(100dvh - 18px) !important;
  }

  .mode-select-banner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 7px;
    min-height: 142px;
    padding: 16px 54px 14px;
  }

  .mode-select-banner img {
    width: 118px;
    max-height: 58px;
  }

  .mode-select-banner-copy {
    justify-items: center;
  }

  .mode-select-banner-copy strong {
    font-size: 1.8rem;
  }

  .mode-select-head {
    padding: 0 14px !important;
  }

  .mode-select-head > div {
    min-height: auto;
    padding: 10px 12px;
  }

  .mode-select-grid {
    padding: 0 14px 2px !important;
  }

  .mode-select-card {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    min-height: 112px !important;
  }

  .mode-select-card-art {
    min-height: 94px !important;
  }

  .mode-select-card-copy strong {
    font-size: .98rem !important;
  }

  .mode-select-card-copy em {
    font-size: .73rem !important;
    line-height: 1.22 !important;
  }

  .mode-select-actions {
    padding: 0 14px 14px !important;
    gap: 8px !important;
  }
}


/* v7.0.306 Start Playing Menu Final Layout Polish: match Ranks modal size, remove logo banner, no blue controls, no internal scrolling. */
#modeSelectDialog.mode-select-dialog {
  position: fixed !important;
  inset: 0 !important;
  margin: auto !important;
  width: var(--rq-menu-modal-w, min(1200px, calc(100dvw - 42px))) !important;
  height: var(--rq-menu-modal-h, min(800px, calc(100dvh - 36px))) !important;
  max-width: var(--rq-menu-modal-w, min(1200px, calc(100dvw - 42px))) !important;
  max-height: var(--rq-menu-modal-h, min(800px, calc(100dvh - 36px))) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

#modeSelectDialog.mode-select-dialog::backdrop {
  background: rgba(0,0,0,.72) !important;
  backdrop-filter: blur(10px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
}

#modeSelectDialog .mode-select-shell {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: grid !important;
  grid-template-rows: var(--rq-menu-header-h, 128px) minmax(0, 1fr) 82px !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  border: 1px solid rgba(222,198,160,.20) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(216,176,106,.13), transparent 34%),
    linear-gradient(180deg, rgba(27,22,16,.99), rgba(10,9,7,.99)) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,244,224,.07) !important;
}

#modeSelectDialog .mode-select-banner,
#modeSelectDialog .mode-select-banner img,
#modeSelectDialog .mode-select-banner-copy {
  display: none !important;
}

#modeSelectDialog .mode-select-head {
  position: relative !important;
  min-height: var(--rq-menu-header-h, 128px) !important;
  height: var(--rq-menu-header-h, 128px) !important;
  padding: 22px 82px 20px !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.44)),
    radial-gradient(circle at 50% 16%, rgba(255,211,128,.16), transparent 34%),
    url('/assets/ui/leaderboards/hall-of-fame-header-bg.png') center/cover no-repeat !important;
  border-bottom: 1px solid rgba(222,198,160,.14) !important;
}

#modeSelectDialog .mode-select-head > div {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 5px !important;
  max-width: 760px !important;
}

#modeSelectDialog .mode-select-head span {
  width: max-content !important;
  margin: 0 !important;
  padding: 4px 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,231,191,.20) !important;
  background: rgba(0,0,0,.22) !important;
  color: rgba(255,232,176,.96) !important;
  font-size: .62rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-weight: 950 !important;
}

#modeSelectDialog .mode-select-head strong {
  margin: 0 !important;
  color: #f8efe0 !important;
  font-size: clamp(2.45rem, 4.1vw, 3.55rem) !important;
  line-height: .92 !important;
  letter-spacing: -.055em !important;
  text-shadow: 0 10px 28px rgba(0,0,0,.52) !important;
}

#modeSelectDialog .mode-select-head small {
  margin: 0 !important;
  max-width: 64ch !important;
  color: rgba(246,237,219,.75) !important;
  font-size: .86rem !important;
  line-height: 1.3 !important;
}

#modeSelectDialog #closeModeSelectBtn.dialog-close-btn {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,244,224,.50) !important;
  background: rgba(0,0,0,.18) !important;
  color: rgba(255,244,224,.92) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.34) !important;
}

#modeSelectDialog .mode-select-grid {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  padding: 24px 30px 18px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-content: stretch !important;
  scrollbar-width: none !important;
}

#modeSelectDialog .mode-select-grid::-webkit-scrollbar {
  display: none !important;
}

#modeSelectDialog .mode-select-card {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 10px !important;
  grid-template-columns: 152px minmax(0, 1fr) !important;
  align-items: stretch !important;
  border-radius: 24px !important;
  border: 1px solid rgba(222,198,160,.18) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(216,176,106,.10), transparent 38%),
    linear-gradient(145deg, rgba(35,27,20,.95), rgba(12,10,8,.98)) !important;
  color: #f4ead8 !important;
  box-shadow: inset 0 1px 0 rgba(255,244,224,.05), 0 14px 32px rgba(0,0,0,.28) !important;
}

#modeSelectDialog .mode-select-card:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(242,206,133,.42) !important;
  box-shadow: inset 0 1px 0 rgba(255,244,224,.07), 0 18px 38px rgba(0,0,0,.34), 0 0 22px rgba(216,176,106,.09) !important;
}

#modeSelectDialog .mode-select-card.selected {
  border-color: rgba(242,206,133,.78) !important;
  box-shadow: inset 0 0 0 1px rgba(242,206,133,.26), 0 20px 42px rgba(0,0,0,.36), 0 0 34px rgba(216,176,106,.16) !important;
}

#modeSelectDialog .mode-select-card.selected::after {
  top: 12px !important;
  right: 12px !important;
  background: linear-gradient(180deg, #f0d08a, #b98635) !important;
  color: #231607 !important;
  border-color: rgba(255,239,190,.36) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.32) !important;
}

#modeSelectDialog .mode-select-card-art {
  min-height: 0 !important;
  height: 100% !important;
  border-radius: 18px !important;
  border-color: rgba(216,176,106,.20) !important;
}

#modeSelectDialog .mode-select-card-copy {
  align-content: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

#modeSelectDialog .mode-select-card-kicker {
  color: rgba(231,206,166,.80) !important;
  background: rgba(12,10,8,.36) !important;
  border-color: rgba(216,176,106,.16) !important;
}

#modeSelectDialog .mode-select-card-copy strong {
  color: #f8efe0 !important;
  font-size: clamp(1.05rem, 1.55vw, 1.24rem) !important;
  line-height: 1.02 !important;
}

#modeSelectDialog .mode-select-card-copy em {
  color: rgba(243,232,213,.76) !important;
  font-size: clamp(.74rem, .92vw, .84rem) !important;
  line-height: 1.23 !important;
  max-width: 100% !important;
}

#modeSelectDialog .mode-select-card-copy small {
  width: fit-content !important;
  max-width: 100% !important;
  color: rgba(241,218,173,.82) !important;
  background: rgba(216,176,106,.09) !important;
  border-color: rgba(216,176,106,.13) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#modeSelectDialog .mode-select-actions {
  min-height: 82px !important;
  height: 82px !important;
  padding: 16px 30px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-top: 1px solid rgba(222,198,160,.12) !important;
  background: linear-gradient(180deg, rgba(9,8,6,.80), rgba(7,6,5,.96)) !important;
}

#modeSelectDialog .mode-select-actions button {
  min-width: 190px !important;
  min-height: 48px !important;
  height: 48px !important;
  border-radius: 18px !important;
  font-weight: 950 !important;
  letter-spacing: .01em !important;
}

#modeSelectDialog .mode-select-actions .secondary-btn,
#modeSelectDialog #cancelModeSelectBtn {
  border: 1px solid rgba(222,198,160,.22) !important;
  background: linear-gradient(180deg, rgba(38,31,22,.92), rgba(14,12,10,.98)) !important;
  color: rgba(246,237,219,.88) !important;
  box-shadow: inset 0 1px 0 rgba(255,244,224,.05), 0 12px 24px rgba(0,0,0,.22) !important;
}

#modeSelectDialog .mode-select-actions .primary-btn,
#modeSelectDialog #confirmModeSelectBtn {
  border: 1px solid rgba(255,230,179,.38) !important;
  background: linear-gradient(180deg, #efcf84, #b37a2d) !important;
  color: #221506 !important;
  text-shadow: 0 1px 0 rgba(255,240,198,.32) !important;
  box-shadow: 0 16px 30px rgba(0,0,0,.28), 0 0 24px rgba(216,176,106,.14), inset 0 1px 0 rgba(255,244,224,.40) !important;
}

body.rq-scaled-menu:not(.is-playing) #modeSelectDialog.mode-select-dialog {
  transform: none !important;
}

@media (min-width: 761px) and (max-height: 850px) {
  #modeSelectDialog .mode-select-head strong {
    font-size: clamp(2.25rem, 3.8vw, 3.25rem) !important;
  }
  #modeSelectDialog .mode-select-grid {
    padding-top: 18px !important;
    padding-bottom: 14px !important;
    gap: 12px !important;
  }
}

@media (max-width: 760px) {
  #modeSelectDialog.mode-select-dialog {
    width: calc(100dvw - 14px) !important;
    height: calc(100dvh - 14px) !important;
    max-width: calc(100dvw - 14px) !important;
    max-height: calc(100dvh - 14px) !important;
  }
  #modeSelectDialog .mode-select-shell {
    grid-template-rows: 112px minmax(0, 1fr) 76px !important;
  }
  #modeSelectDialog .mode-select-head {
    min-height: 112px !important;
    height: 112px !important;
    padding: 18px 58px 16px !important;
  }
  #modeSelectDialog .mode-select-head strong {
    font-size: clamp(1.9rem, 8vw, 2.5rem) !important;
  }
  #modeSelectDialog .mode-select-head small {
    display: none !important;
  }
  #modeSelectDialog .mode-select-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
    padding: 12px !important;
    gap: 8px !important;
  }
  #modeSelectDialog .mode-select-card {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    padding: 8px !important;
    border-radius: 18px !important;
  }
  #modeSelectDialog .mode-select-card-copy em {
    display: none !important;
  }
  #modeSelectDialog .mode-select-card-copy small {
    font-size: .58rem !important;
  }
  #modeSelectDialog .mode-select-actions {
    min-height: 76px !important;
    height: 76px !important;
    padding: 14px 12px !important;
    gap: 8px !important;
  }
  #modeSelectDialog .mode-select-actions button {
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }
}

/* v7.0.306 Start Playing Menu Final Layout Polish */
#modeSelectDialog .mode-select-head {
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
}

#modeSelectDialog .mode-select-head > div {
  justify-items: center !important;
  align-content: center !important;
  max-width: 840px !important;
}

#modeSelectDialog .mode-select-head span,
#modeSelectDialog .mode-select-head small {
  display: none !important;
}

#modeSelectDialog .mode-select-head strong {
  margin: 0 !important;
  text-align: center !important;
}

#modeSelectDialog .mode-select-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

#modeSelectDialog .mode-select-card-hard {
  grid-column: 1 / -1 !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(224,154,78,.13), transparent 38%),
    linear-gradient(145deg, rgba(34,24,18,.97), rgba(10,8,7,.99)) !important;
}

#modeSelectDialog .mode-select-card-hard .mode-select-card-copy {
  max-width: 720px !important;
}

#modeSelectDialog .mode-select-card-copy em {
  font-size: clamp(.76rem, .88vw, .82rem) !important;
  line-height: 1.22 !important;
}

#modeSelectDialog .mode-select-legend {
  margin: 0 !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(216,176,106,.16) !important;
  background: rgba(216,176,106,.08) !important;
  color: rgba(245,230,198,.78) !important;
  font-size: .76rem !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  letter-spacing: .02em !important;
  text-align: center !important;
  pointer-events: none !important;
}

@media (max-width: 760px) {
  #modeSelectDialog .mode-select-legend {
    display: none !important;
  }
  #modeSelectDialog .mode-select-card-hard {
    grid-column: auto !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
  }
}



/* v7.0.307 Start Playing Menu Centered Title + Image Polish */
#modeSelectDialog .mode-select-head {
  position: relative !important;
  display: block !important;
}

#modeSelectDialog .mode-select-head > div {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  padding: 0 126px !important;
  display: grid !important;
  place-items: center !important;
  justify-items: center !important;
  align-content: center !important;
  text-align: center !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

#modeSelectDialog .mode-select-head strong {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin: 0 auto !important;
}

#modeSelectDialog #closeModeSelectBtn.dialog-close-btn {
  z-index: 3 !important;
}

#modeSelectDialog .mode-select-card-art {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(216,176,106,.10), transparent 58%),
    rgba(8,7,5,.72) !important;
}

#modeSelectDialog .mode-select-card-art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  image-rendering: auto !important;
}

#modeSelectDialog .mode-select-card-art::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.14)),
    radial-gradient(circle at 50% 42%, transparent 48%, rgba(0,0,0,.18) 100%) !important;
}

@media (max-width: 760px) {
  #modeSelectDialog .mode-select-head > div {
    padding: 0 72px !important;
  }
}


/* v7.0.310 Main Menu Updates Board Polish */
body:not(.is-playing) .inventory-launch-card.inventory-menu-card.action-hub-card {
  align-content: start !important;
  justify-content: stretch !important;
  padding-top: 18px !important;
  padding-bottom: 16px !important;
}

body:not(.is-playing) .inventory-launch-card.action-hub-card .action-hub-head.action-hub-head-clean {
  min-height: 26px !important;
  margin: 0 0 7px !important;
  transform: none !important;
  display: grid !important;
  place-items: center !important;
}

body:not(.is-playing) .inventory-launch-card.action-hub-card .action-hub-head-clean .action-hub-title span {
  font-size: .86rem !important;
  letter-spacing: .20em !important;
  color: rgba(236, 215, 174, .88) !important;
}

body:not(.is-playing) .inventory-launch-card.action-hub-card .action-hub-compass,
body:not(.is-playing) .inventory-launch-card.action-hub-card .inventory-launch-icon {
  display: none !important;
}

body:not(.is-playing) .action-hub-grid {
  margin-top: 8px !important;
  gap: 7px !important;
}

body:not(.is-playing) .action-hub-news {
  margin-top: 11px !important;
  padding: 10px 11px 11px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(226, 184, 99, .20) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(235, 190, 96, .13), transparent 42%),
    linear-gradient(180deg, rgba(41, 31, 17, .62), rgba(12, 10, 7, .82)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 12px 24px rgba(0,0,0,.18) !important;
}

.action-hub-news-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 7px !important;
}

.action-hub-news-head span {
  font-size: .52rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: rgba(235, 194, 112, .82) !important;
  font-weight: 1000 !important;
}

.action-hub-news-head strong {
  font-size: .60rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: rgba(234, 221, 189, .68) !important;
}

.action-hub-news-item {
  width: 100% !important;
  border: 1px solid rgba(219, 178, 101, .14) !important;
  border-radius: 12px !important;
  padding: 7px 8px !important;
  margin: 0 0 6px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  text-align: left !important;
  color: rgba(237, 226, 201, .90) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.12)) !important;
  cursor: pointer !important;
}

.action-hub-news-item:last-child { margin-bottom: 0 !important; }
.action-hub-news-item:hover,
.action-hub-news-item:focus-visible {
  border-color: rgba(241, 199, 108, .34) !important;
  transform: translateY(-1px) !important;
}

.action-hub-news-item b {
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: rgba(231, 184, 86, .12) !important;
  font-size: .82rem !important;
}

.action-hub-news-item span { min-width: 0 !important; display: grid !important; gap: 1px !important; }
.action-hub-news-item strong {
  font-size: .67rem !important;
  line-height: 1.05 !important;
  color: rgba(255, 238, 199, .95) !important;
}
.action-hub-news-item em {
  font-size: .53rem !important;
  line-height: 1.15 !important;
  color: rgba(224, 210, 181, .66) !important;
  font-style: normal !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.home-update-dialog::backdrop {
  background: radial-gradient(circle at 50% 22%, rgba(213, 170, 88, .14), transparent 34%), rgba(0,0,0,.72) !important;
  backdrop-filter: blur(7px) !important;
}

.home-update-dialog {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  max-width: min(720px, calc(100vw - 32px)) !important;
  width: 720px !important;
}

.home-update-shell {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 26px !important;
  border: 1px solid rgba(230, 190, 113, .30) !important;
  background:
    radial-gradient(circle at 78% 5%, rgba(232, 187, 91, .16), transparent 34%),
    linear-gradient(180deg, rgba(42, 33, 21, .96), rgba(11, 10, 8, .98)) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.64), inset 0 1px 0 rgba(255,255,255,.07) !important;
  color: rgba(245, 234, 208, .95) !important;
}

.home-update-head {
  position: relative !important;
  min-height: 132px !important;
  padding: 30px 86px 26px 34px !important;
  background:
    linear-gradient(90deg, rgba(25,19,12,.96), rgba(45,34,17,.80), rgba(15,12,8,.94)),
    url('/assets/ui/main-menu/radioquest-main-bg.png') center / cover no-repeat !important;
  border-bottom: 1px solid rgba(229, 188, 110, .18) !important;
}

.home-update-head span {
  display: inline-flex !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  font-size: .62rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-weight: 1000 !important;
  color: rgba(255, 224, 148, .96) !important;
  background: rgba(0,0,0,.26) !important;
  border: 1px solid rgba(230, 188, 97, .22) !important;
}

.home-update-head strong {
  display: block !important;
  margin-top: 11px !important;
  font-size: clamp(2rem, 4vw, 3.3rem) !important;
  line-height: .95 !important;
  letter-spacing: .01em !important;
  text-shadow: 0 4px 18px rgba(0,0,0,.55) !important;
}

.home-update-head .dialog-close-btn {
  position: absolute !important;
  top: 20px !important;
  right: 22px !important;
}

.home-update-body {
  display: grid !important;
  grid-template-columns: .92fr 1.08fr !important;
  gap: 16px !important;
  padding: 20px 24px 18px !important;
}

.home-update-feature,
.home-update-list span {
  border: 1px solid rgba(229, 188, 110, .16) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.16)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
}

.home-update-feature {
  padding: 18px !important;
}
.home-update-feature b {
  font-size: .68rem !important;
  letter-spacing: .16em !important;
  color: rgba(237, 195, 103, .95) !important;
}
.home-update-feature h3 {
  margin: 8px 0 8px !important;
  font-size: 1.35rem !important;
}
.home-update-feature p {
  margin: 0 !important;
  color: rgba(230, 219, 195, .72) !important;
  line-height: 1.4 !important;
}

.home-update-list {
  display: grid !important;
  gap: 9px !important;
}
.home-update-list span {
  display: grid !important;
  gap: 3px !important;
  padding: 12px 14px !important;
}
.home-update-list strong { font-size: .92rem !important; }
.home-update-list em {
  font-style: normal !important;
  font-size: .74rem !important;
  color: rgba(226, 213, 184, .66) !important;
}

.home-update-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  padding: 0 24px 22px !important;
}

.home-update-actions .secondary-btn,
.home-update-actions .primary-btn {
  min-width: 170px !important;
  border-radius: 14px !important;
}

@media (max-width: 760px) {
  .home-update-body { grid-template-columns: 1fr !important; }
  .home-update-head { min-height: 112px !important; padding: 24px 70px 22px 24px !important; }
  .home-update-actions { flex-direction: column-reverse !important; }
  .home-update-actions .secondary-btn,
  .home-update-actions .primary-btn { width: 100% !important; }
  body:not(.is-playing) .action-hub-news-item em { white-space: normal !important; }
}


/* v7.0.310 Main Menu Updates Board Polish */
body:not(.is-playing) .inventory-launch-card.inventory-menu-card.action-hub-card {
  padding-top: 12px !important;
  gap: 8px !important;
}

body:not(.is-playing) .inventory-launch-card.action-hub-card .action-hub-head.action-hub-head-clean {
  min-height: 22px !important;
  margin: 0 0 2px !important;
}

body:not(.is-playing) .action-hub-daily-mini {
  display: none !important;
}

body:not(.is-playing) .action-hub-grid {
  margin-top: 2px !important;
  gap: 7px !important;
}

body:not(.is-playing) .action-hub-news {
  width: 100% !important;
  margin-top: 12px !important;
  padding: 11px 11px 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(226, 184, 99, .22) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(235, 190, 96, .16), transparent 44%),
    linear-gradient(180deg, rgba(42, 32, 17, .70), rgba(12, 10, 7, .88)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 26px rgba(0,0,0,.20) !important;
  display: block !important;
  color: rgba(237, 226, 201, .92) !important;
  cursor: pointer !important;
  text-align: left !important;
}

body:not(.is-playing) .action-hub-news:hover,
body:not(.is-playing) .action-hub-news:focus-visible {
  border-color: rgba(241, 199, 108, .38) !important;
  transform: translateY(-1px) !important;
  filter: brightness(1.04) !important;
}

.action-hub-news-item small {
  display: block !important;
  margin-bottom: 1px !important;
  color: rgba(235, 194, 112, .76) !important;
  font-size: .47rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.home-update-dialog {
  max-width: min(980px, calc(100vw - 36px)) !important;
  width: 980px !important;
}

.home-update-shell {
  border-radius: 28px !important;
}

.home-update-head {
  min-height: 148px !important;
  display: grid !important;
  align-content: center !important;
  padding: 28px 96px 26px 38px !important;
}

.home-update-head strong {
  font-size: clamp(3rem, 5vw, 5.2rem) !important;
  letter-spacing: -.025em !important;
}

.home-update-head small {
  display: block !important;
  margin-top: 8px !important;
  color: rgba(242, 227, 194, .70) !important;
  font-size: .92rem !important;
  font-weight: 800 !important;
  letter-spacing: .025em !important;
}

.home-update-body {
  grid-template-columns: .82fr 1.18fr !important;
  padding: 22px 26px 20px !important;
}

.home-update-feature b,
.home-update-list strong {
  color: rgba(241, 199, 108, .96) !important;
}

.home-update-list {
  gap: 10px !important;
}

.home-update-list span {
  min-height: 62px !important;
  padding: 12px 15px !important;
}

.home-update-actions {
  padding: 0 26px 24px !important;
}

@media (max-width: 760px) {
  .home-update-dialog {
    width: min(560px, calc(100vw - 22px)) !important;
  }
  .home-update-head {
    min-height: 118px !important;
    padding: 24px 68px 22px 24px !important;
  }
  .home-update-head strong {
    font-size: clamp(2.2rem, 12vw, 3.4rem) !important;
  }
}


/* v7.0.310 Main Menu News Final Polish */
body:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero {
  padding: 9px 12px 9px 56px !important;
}

body:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero::before,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero::before {
  display: none !important;
  content: none !important;
}

body:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero img,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero img {
  left: 12px !important;
  right: auto !important;
  width: 40px !important;
  height: 40px !important;
  opacity: .94 !important;
}

body:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero span,
body.rq-scaled-menu:not(.is-playing) .action-hub-grid .menu-card-btn.action-hub-hero span {
  padding-left: 0 !important;
  max-width: 100% !important;
}

body:not(.is-playing) .action-hub-news {
  overflow: hidden !important;
}

body:not(.is-playing) .action-hub-news .action-hub-news-item:nth-of-type(n+4) {
  display: none !important;
}

body:not(.is-playing) .action-hub-news .action-hub-news-item {
  min-height: 43px !important;
}


/* v7.0.312 Main Menu News Two Item Fix */
body:not(.is-playing) .action-hub-news .action-hub-news-item:nth-of-type(n+4) {
  display: none !important;
}


/* v7.0.312 Updates Modal Rank-size Polish */
.home-update-dialog::backdrop {
  background: rgba(4, 6, 10, .72) !important;
  backdrop-filter: blur(7px) !important;
}

.home-update-dialog {
  width: min(1040px, calc(100vw - 28px)) !important;
  max-width: min(1040px, calc(100vw - 28px)) !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: rgba(245, 234, 208, .96) !important;
  overflow: hidden !important;
}

.home-update-shell {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  width: 100% !important;
  max-height: calc(100dvh - 28px) !important;
  padding: 0 24px 22px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(198, 161, 103, .42) !important;
  background:
    linear-gradient(180deg, rgba(21, 18, 15, .96), rgba(10, 9, 8, .98)),
    #15120f !important;
  box-shadow: 0 26px 90px rgba(0,0,0,.52), inset 0 0 0 1px rgba(232, 220, 200, .05) !important;
}

.home-update-shell::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(198, 161, 103, .18), transparent 34%),
    radial-gradient(circle at 86% 8%, rgba(143, 108, 63, .16), transparent 32%),
    linear-gradient(115deg, transparent 0 38%, rgba(232,220,200,.045) 46%, transparent 55% 100%) !important;
  opacity: .96 !important;
}

.home-update-shell > * { position: relative !important; z-index: 1 !important; }

.home-update-head {
  flex: 0 0 auto !important;
  min-height: 184px !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 18px !important;
  align-items: flex-start !important;
  margin: 0 -24px 16px !important;
  padding: 26px 24px 24px !important;
  border-bottom: 1px solid rgba(198, 161, 103, .26) !important;
  background:
    linear-gradient(90deg, rgba(9, 8, 7, .34), rgba(9, 8, 7, .04) 45%, rgba(9, 8, 7, .46)),
    linear-gradient(180deg, rgba(21,18,15,.12), rgba(21,18,15,.78)),
    url('/assets/ui/leaderboards/hall-of-fame-header-bg.png') center/cover no-repeat !important;
}

.home-update-title-block {
  display: grid !important;
  gap: 8px !important;
  align-content: start !important;
}

.home-update-kicker {
  display: inline-flex !important;
  width: max-content !important;
  align-items: center !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(205, 170, 105, .28) !important;
  background: rgba(10, 9, 8, .40) !important;
  color: rgba(232, 210, 163, .90) !important;
  font-size: .64rem !important;
  font-weight: 1000 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

.home-update-head h2 {
  margin: 0 !important;
  font-size: clamp(3.2rem, 6vw, 5.6rem) !important;
  line-height: .9 !important;
  letter-spacing: -.035em !important;
  color: rgba(255, 248, 224, .98) !important;
  text-shadow: 0 5px 24px rgba(0,0,0,.58), 0 0 18px rgba(213, 171, 88, .14) !important;
}

.home-update-head p {
  margin: 0 !important;
  max-width: 520px !important;
  color: rgba(232, 220, 200, .70) !important;
  font-size: .92rem !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
}

.home-update-close-btn {
  min-width: 108px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(205, 170, 105, .28) !important;
  background: rgba(9, 8, 7, .38) !important;
  color: rgba(244, 233, 207, .92) !important;
}

.home-update-close-btn span { font-size: 1.3rem !important; line-height: 1 !important; }
.home-update-close-btn em { font-style: normal !important; font-size: .72rem !important; font-weight: 950 !important; letter-spacing: .10em !important; text-transform: uppercase !important; }

.home-update-content {
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: .88fr 1.12fr !important;
  gap: 18px !important;
  min-height: 0 !important;
  padding: 0 0 18px !important;
}

.home-update-hero-card,
.home-update-card {
  border: 1px solid rgba(198, 161, 103, .28) !important;
  background:
    radial-gradient(circle at 18% 4%, rgba(235, 190, 96, .14), transparent 42%),
    linear-gradient(180deg, rgba(52, 42, 27, .74), rgba(15, 12, 9, .92)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 16px 28px rgba(0,0,0,.24) !important;
}

.home-update-hero-card {
  position: relative !important;
  overflow: hidden !important;
  min-height: 330px !important;
  border-radius: 24px !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.home-update-hero-card::after {
  content: "" !important;
  position: absolute !important;
  inset: auto -42px -54px auto !important;
  width: 220px !important;
  height: 220px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(219, 177, 88, .20), transparent 66%) !important;
  pointer-events: none !important;
}

.home-update-date,
.home-update-card small {
  color: rgba(238, 198, 112, .92) !important;
  font-size: .68rem !important;
  font-weight: 1000 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.home-update-hero-card h3 {
  margin: 10px 0 10px !important;
  font-size: clamp(1.9rem, 3vw, 2.7rem) !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
  color: rgba(255, 248, 224, .98) !important;
}

.home-update-hero-card p {
  margin: 0 !important;
  max-width: 370px !important;
  color: rgba(232, 220, 200, .72) !important;
  font-size: .95rem !important;
  font-weight: 650 !important;
  line-height: 1.48 !important;
}

.home-update-hero-badge {
  width: 112px !important;
  height: 112px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  align-self: flex-end !important;
  border: 1px solid rgba(228, 190, 105, .36) !important;
  background: radial-gradient(circle at 50% 35%, rgba(228, 190, 105, .24), rgba(17, 13, 9, .88) 72%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 18px 34px rgba(0,0,0,.34) !important;
}
.home-update-hero-badge strong { font-size: 1rem !important; letter-spacing: .16em !important; color: rgba(255, 220, 139, .96) !important; }
.home-update-hero-badge span { margin-top: -38px !important; font-size: .72rem !important; font-weight: 900 !important; color: rgba(226, 214, 190, .70) !important; }

.home-update-cards {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  min-height: 0 !important;
}

.home-update-card {
  min-height: 150px !important;
  border-radius: 20px !important;
  padding: 18px !important;
  display: grid !important;
  grid-template-columns: 50px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
}

.home-update-card-icon {
  width: 50px !important;
  height: 50px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 17px !important;
  border: 1px solid rgba(224, 184, 96, .22) !important;
  background: rgba(10, 9, 8, .36) !important;
  font-size: 1.25rem !important;
}

.home-update-card strong {
  display: block !important;
  margin-top: 5px !important;
  color: rgba(255, 244, 217, .98) !important;
  font-size: 1.05rem !important;
  line-height: 1.05 !important;
}

.home-update-card em {
  display: block !important;
  margin-top: 7px !important;
  color: rgba(226, 213, 184, .67) !important;
  font-style: normal !important;
  font-size: .78rem !important;
  font-weight: 650 !important;
  line-height: 1.34 !important;
}

.home-update-actions {
  flex: 0 0 auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  padding: 0 !important;
}

.home-update-actions .secondary-btn,
.home-update-actions .primary-btn {
  min-width: 190px !important;
  height: 48px !important;
  border-radius: 16px !important;
}

.home-update-actions .primary-btn {
  background: linear-gradient(180deg, #efcf84, #b98230) !important;
  color: #17110a !important;
  border-color: rgba(255, 230, 160, .38) !important;
}

@media (max-width: 900px) {
  .home-update-content { grid-template-columns: 1fr !important; overflow: auto !important; padding-right: 3px !important; }
  .home-update-hero-card { min-height: 250px !important; }
}

@media (max-width: 760px) {
  .home-update-dialog { width: min(560px, calc(100vw - 22px)) !important; }
  .home-update-shell { padding: 0 14px 16px !important; }
  .home-update-head { min-height: 142px !important; margin: 0 -14px 14px !important; padding: 22px 18px 20px !important; }
  .home-update-head h2 { font-size: clamp(2.55rem, 13vw, 3.8rem) !important; }
  .home-update-head p { font-size: .78rem !important; }
  .home-update-close-btn { min-width: 44px !important; width: 44px !important; padding: 0 !important; }
  .home-update-close-btn em { display: none !important; }
  .home-update-cards { grid-template-columns: 1fr !important; }
  .home-update-actions { flex-direction: column-reverse !important; }
  .home-update-actions .secondary-btn,
  .home-update-actions .primary-btn { width: 100% !important; }
}


/* v7.0.313 Updates Modal True Rank-size Layout */
.home-update-dialog.updates-hall-dialog::backdrop {
  background: rgba(4, 6, 10, .74) !important;
  backdrop-filter: blur(8px) !important;
}

.home-update-dialog.updates-hall-dialog {
  width: min(1120px, calc(100dvw - 26px)) !important;
  max-width: min(1120px, calc(100dvw - 26px)) !important;
  height: min(820px, calc(100dvh - 26px)) !important;
  max-height: min(820px, calc(100dvh - 26px)) !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
  color: rgba(245, 234, 208, .96) !important;
}

.home-update-shell.updates-rank-shell {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: 142px minmax(0, 1fr) 66px !important;
  padding: 0 22px 20px !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  border: 1px solid rgba(222, 198, 160, .16) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(216, 176, 106, .11), transparent 38%),
    linear-gradient(145deg, rgba(29, 22, 16, .98), rgba(9, 11, 16, .98)) !important;
  box-shadow: 0 30px 100px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.045) !important;
}

.home-update-shell.updates-rank-shell::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(216, 176, 106, .16), transparent 32%),
    radial-gradient(circle at 90% 8%, rgba(198, 161, 103, .10), transparent 30%),
    linear-gradient(115deg, transparent 0 40%, rgba(255,255,255,.035) 48%, transparent 56% 100%) !important;
}

.home-update-shell.updates-rank-shell > * {
  position: relative !important;
  z-index: 1 !important;
}

.home-update-head.updates-rank-head {
  min-height: 142px !important;
  height: 142px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  margin: 0 -22px 14px !important;
  padding: 24px 72px 22px !important;
  border-bottom: 1px solid rgba(222, 198, 160, .14) !important;
  background:
    linear-gradient(180deg, rgba(21, 15, 10, .62), rgba(21, 15, 10, .90)),
    radial-gradient(circle at 50% 0%, rgba(216, 176, 106, .20), transparent 38%),
    url('/assets/ui/leaderboards/hall-of-fame-header-bg.png') center/cover no-repeat !important;
}

.home-update-title-block {
  display: grid !important;
  justify-items: center !important;
  gap: 6px !important;
  align-content: center !important;
}

.home-update-kicker {
  display: inline-flex !important;
  width: max-content !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(222, 198, 160, .18) !important;
  background: rgba(216, 176, 106, .10) !important;
  color: rgba(243, 232, 213, .78) !important;
  font-size: .60rem !important;
  font-weight: 1000 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

.home-update-head.updates-rank-head h2 {
  margin: 0 !important;
  color: var(--rq-warm-cream, #f4ead8) !important;
  font-size: clamp(2.25rem, 4.2vw, 4rem) !important;
  line-height: 1 !important;
  letter-spacing: -.055em !important;
  text-align: center !important;
}

.home-update-head.updates-rank-head p {
  max-width: 620px !important;
  margin: 0 auto !important;
  text-align: center !important;
  color: rgba(243, 232, 213, .72) !important;
  font-size: .88rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

.home-update-close-btn {
  position: absolute !important;
  top: 22px !important;
  right: 22px !important;
  min-width: 92px !important;
  min-height: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(222, 198, 160, .20) !important;
  background: rgba(8, 10, 15, .32) !important;
  color: rgba(244, 233, 207, .92) !important;
}

.home-update-content.updates-rank-content {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) !important;
  gap: 16px !important;
  padding: 0 0 14px !important;
  overflow: hidden !important;
}

.updates-feature-panel,
.updates-timeline-panel {
  border: 1px solid rgba(222, 198, 160, .13) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(216, 176, 106, .14), transparent 36%),
    linear-gradient(180deg, rgba(45, 34, 24, .78), rgba(10, 13, 18, .88)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 38px rgba(0,0,0,.22) !important;
}

.updates-feature-panel {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  min-height: 0 !important;
  padding: 24px !important;
  background:
    linear-gradient(180deg, rgba(8, 9, 12, .16), rgba(10, 12, 16, .92)),
    radial-gradient(circle at 50% 24%, rgba(230, 187, 94, .24), transparent 28%),
    url('/assets/ui/leaderboards/hall-of-fame-header-bg.png') center/cover no-repeat !important;
}

.updates-feature-panel::after {
  content: "" !important;
  position: absolute !important;
  width: 230px !important;
  height: 230px !important;
  right: -58px !important;
  top: 38px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(228, 190, 105, .18) !important;
  background: radial-gradient(circle, rgba(228, 190, 105, .16), transparent 67%) !important;
  box-shadow: inset 0 0 38px rgba(228, 190, 105, .08) !important;
  pointer-events: none !important;
}

.updates-feature-kicker,
.updates-entry-tag {
  display: inline-flex !important;
  width: max-content !important;
  align-items: center !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(222, 198, 160, .14) !important;
  background: rgba(8, 10, 15, .36) !important;
  color: rgba(238, 198, 112, .94) !important;
  font-size: .58rem !important;
  font-weight: 1000 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.updates-feature-date {
  margin-top: 12px !important;
  color: rgba(238, 198, 112, .88) !important;
  font-size: .70rem !important;
  font-weight: 1000 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.updates-feature-panel h3 {
  max-width: 310px !important;
  margin: 9px 0 10px !important;
  color: rgba(255, 248, 224, .98) !important;
  font-size: clamp(2rem, 3.2vw, 3.2rem) !important;
  line-height: .94 !important;
  letter-spacing: -.04em !important;
  text-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
}

.updates-feature-panel p {
  max-width: 320px !important;
  margin: 0 !important;
  color: rgba(238, 229, 207, .74) !important;
  font-size: .88rem !important;
  font-weight: 750 !important;
  line-height: 1.45 !important;
}

.updates-feature-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 18px !important;
}

.updates-feature-tags span {
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: rgba(216, 176, 106, .12) !important;
  border: 1px solid rgba(222, 198, 160, .12) !important;
  color: rgba(244, 233, 207, .84) !important;
  font-size: .66rem !important;
  font-weight: 950 !important;
  letter-spacing: .06em !important;
}

.updates-timeline-panel {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  padding: 18px !important;
  overflow: hidden !important;
}

.updates-timeline-heading {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 0 2px 14px !important;
  border-bottom: 1px solid rgba(222, 198, 160, .10) !important;
}

.updates-timeline-heading span {
  color: rgba(238, 198, 112, .88) !important;
  font-size: .62rem !important;
  font-weight: 1000 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
}

.updates-timeline-heading strong {
  color: rgba(255, 246, 222, .96) !important;
  font-size: 1.22rem !important;
  letter-spacing: -.02em !important;
}

.updates-timeline-list {
  position: relative !important;
  display: grid !important;
  gap: 10px !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding-top: 14px !important;
}

.updates-timeline-list::before {
  content: "" !important;
  position: absolute !important;
  left: 59px !important;
  top: 22px !important;
  bottom: 14px !important;
  width: 1px !important;
  background: linear-gradient(180deg, rgba(232, 190, 105, .0), rgba(232, 190, 105, .30), rgba(232, 190, 105, .0)) !important;
}

.updates-timeline-entry {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  gap: 12px !important;
  min-height: 92px !important;
  padding: 12px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(222, 198, 160, .10) !important;
  background: linear-gradient(180deg, rgba(33, 27, 20, .72), rgba(12, 13, 16, .72)) !important;
}

.updates-timeline-entry.is-featured {
  border-color: rgba(228, 190, 105, .30) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(228, 190, 105, .14), transparent 36%),
    linear-gradient(180deg, rgba(46, 35, 22, .82), rgba(12, 13, 16, .82)) !important;
}

.updates-timeline-date {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  width: 72px !important;
  height: 68px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(222, 198, 160, .16) !important;
  background: rgba(8, 10, 15, .36) !important;
  z-index: 1 !important;
}

.updates-timeline-date b {
  color: rgba(255, 226, 151, .98) !important;
  font-size: .86rem !important;
  line-height: 1 !important;
}

.updates-timeline-date span {
  margin-top: 3px !important;
  color: rgba(238, 229, 207, .62) !important;
  font-size: .62rem !important;
  font-weight: 900 !important;
}

.updates-timeline-copy h3 {
  margin: 7px 0 5px !important;
  color: rgba(255, 248, 224, .98) !important;
  font-size: 1.15rem !important;
  line-height: 1.05 !important;
  letter-spacing: -.015em !important;
}

.updates-timeline-copy p {
  margin: 0 !important;
  color: rgba(226, 213, 184, .70) !important;
  font-size: .80rem !important;
  font-weight: 650 !important;
  line-height: 1.34 !important;
}

.home-update-actions.updates-rank-actions {
  display: flex !important;
  align-items: end !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  padding: 0 !important;
}

.home-update-actions.updates-rank-actions .secondary-btn,
.home-update-actions.updates-rank-actions .primary-btn {
  min-width: 190px !important;
  height: 48px !important;
  border-radius: 16px !important;
}

.home-update-actions.updates-rank-actions .primary-btn {
  background: linear-gradient(180deg, #efcf84, #b98230) !important;
  color: #17110a !important;
  border-color: rgba(255, 230, 160, .38) !important;
}

@media (max-width: 900px) {
  .home-update-dialog.updates-hall-dialog {
    width: min(720px, calc(100dvw - 22px)) !important;
    height: min(820px, calc(100dvh - 22px)) !important;
  }
  .home-update-shell.updates-rank-shell { grid-template-rows: 142px minmax(0, 1fr) auto !important; padding: 0 14px 16px !important; }
  .home-update-head.updates-rank-head { margin: 0 -14px 14px !important; padding: 22px 64px 20px !important; }
  .home-update-content.updates-rank-content { grid-template-columns: 1fr !important; overflow: auto !important; padding-right: 4px !important; }
  .updates-feature-panel { min-height: 280px !important; }
}

@media (max-width: 650px) {
  .home-update-dialog.updates-hall-dialog { width: min(560px, calc(100dvw - 18px)) !important; }
  .home-update-head.updates-rank-head h2 { font-size: clamp(2.55rem, 13vw, 3.8rem) !important; }
  .home-update-head.updates-rank-head p { font-size: .78rem !important; }
  .home-update-close-btn { min-width: 44px !important; width: 44px !important; padding: 0 !important; }
  .home-update-close-btn em { display: none !important; }
  .updates-timeline-entry { grid-template-columns: 78px minmax(0, 1fr) !important; }
  .home-update-actions.updates-rank-actions { flex-direction: column-reverse !important; align-items: stretch !important; }
  .home-update-actions.updates-rank-actions .secondary-btn,
  .home-update-actions.updates-rank-actions .primary-btn { width: 100% !important; }
}


/* v7.0.314 Updates Modal Interactive History */
.home-update-head.updates-rank-head {
  justify-content: center !important;
  align-items: center !important;
  padding: 24px 86px 22px !important;
}

.home-update-kicker,
.home-update-head.updates-rank-head p {
  display: none !important;
}

.home-update-head.updates-rank-head h2 {
  font-size: clamp(3.25rem, 6vw, 5.8rem) !important;
  letter-spacing: -.07em !important;
  text-transform: none !important;
}

.home-update-content.updates-rank-content.updates-split-content {
  grid-template-columns: 335px minmax(0, 1fr) !important;
  gap: 16px !important;
}

.updates-history-panel,
.updates-open-panel {
  border: 1px solid rgba(222, 198, 160, .14) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(216, 176, 106, .13), transparent 36%),
    linear-gradient(180deg, rgba(43, 33, 23, .80), rgba(9, 11, 15, .90)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 38px rgba(0,0,0,.22) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.updates-history-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  padding: 18px !important;
}

.updates-history-heading {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 0 2px 14px !important;
  border-bottom: 1px solid rgba(222, 198, 160, .11) !important;
}

.updates-history-heading span {
  color: rgba(238, 198, 112, .92) !important;
  font-size: .62rem !important;
  font-weight: 1000 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
}

.updates-history-heading strong {
  color: rgba(242, 231, 207, .72) !important;
  font-size: .74rem !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.updates-history-list {
  display: grid !important;
  align-content: start !important;
  gap: 10px !important;
  min-height: 0 !important;
  padding-top: 14px !important;
  overflow: hidden !important;
}

.updates-history-item {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 4px 10px !important;
  width: 100% !important;
  min-height: 82px !important;
  padding: 13px 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(222, 198, 160, .10) !important;
  background: linear-gradient(180deg, rgba(35, 29, 21, .78), rgba(12, 13, 16, .78)) !important;
  color: rgba(244, 234, 213, .92) !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.updates-history-item:hover,
.updates-history-item.is-active {
  border-color: rgba(235, 196, 108, .38) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(228, 190, 105, .16), transparent 42%),
    linear-gradient(180deg, rgba(52, 39, 24, .88), rgba(14, 14, 17, .88)) !important;
}

.updates-history-item.is-active::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 14px !important;
  bottom: 14px !important;
  width: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #f3d58a, #a86e22) !important;
  box-shadow: 0 0 18px rgba(232, 190, 105, .36) !important;
}

.updates-history-date {
  grid-column: 1 / -1 !important;
  color: rgba(238, 198, 112, .88) !important;
  font-size: .64rem !important;
  font-weight: 1000 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.updates-history-item strong {
  color: rgba(255, 248, 224, .98) !important;
  font-size: .98rem !important;
  line-height: 1.05 !important;
  letter-spacing: -.01em !important;
}

.updates-history-item em {
  color: rgba(226, 213, 184, .60) !important;
  font-size: .68rem !important;
  font-style: normal !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.updates-history-item b {
  align-self: center !important;
  padding: 5px 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(238, 198, 112, .28) !important;
  background: rgba(216, 176, 106, .14) !important;
  color: rgba(255, 226, 151, .98) !important;
  font-size: .58rem !important;
  line-height: 1 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}

.updates-open-panel {
  position: relative !important;
  padding: 18px !important;
}

.updates-open-entry {
  display: none !important;
  height: 100% !important;
  min-height: 0 !important;
  grid-template-rows: 178px auto auto auto 1fr !important;
  align-content: start !important;
  gap: 12px !important;
}

.updates-open-entry.is-active {
  display: grid !important;
}

.updates-open-banner {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 178px !important;
  padding: 18px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(222, 198, 160, .14) !important;
  background:
    linear-gradient(180deg, rgba(8, 9, 12, .10), rgba(10, 12, 16, .82)),
    radial-gradient(circle at 50% 18%, rgba(230, 187, 94, .20), transparent 30%),
    url('/assets/ui/leaderboards/hall-of-fame-header-bg.png') center/cover no-repeat !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.updates-open-banner::after {
  content: "" !important;
  position: absolute !important;
  width: 260px !important;
  height: 260px !important;
  right: -62px !important;
  top: -54px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(228, 190, 105, .18) !important;
  background: radial-gradient(circle, rgba(228, 190, 105, .16), transparent 67%) !important;
  pointer-events: none !important;
}

.updates-open-banner span,
.updates-open-banner strong {
  position: relative !important;
  z-index: 1 !important;
}

.updates-open-banner span {
  padding: 6px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(222, 198, 160, .14) !important;
  background: rgba(8, 10, 15, .40) !important;
  color: rgba(242, 231, 207, .70) !important;
  font-size: .64rem !important;
  font-weight: 1000 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.updates-open-banner strong {
  color: rgba(255, 226, 151, .94) !important;
  font-size: .74rem !important;
  font-weight: 1000 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

.updates-open-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  color: rgba(238, 198, 112, .92) !important;
  font-size: .68rem !important;
  font-weight: 1000 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.updates-open-meta span {
  padding: 6px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(238, 198, 112, .24) !important;
  background: rgba(216, 176, 106, .12) !important;
}

.updates-open-meta b {
  color: rgba(242, 231, 207, .66) !important;
  font-weight: 1000 !important;
}

.updates-open-entry h3 {
  margin: 0 !important;
  color: rgba(255, 248, 224, .98) !important;
  font-size: clamp(2.15rem, 4vw, 3.7rem) !important;
  line-height: .96 !important;
  letter-spacing: -.055em !important;
}

.updates-open-entry p {
  max-width: 660px !important;
  margin: 0 !important;
  color: rgba(233, 222, 198, .76) !important;
  font-size: .94rem !important;
  font-weight: 750 !important;
  line-height: 1.45 !important;
}

.updates-open-entry ul {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.updates-open-entry li {
  min-height: 74px !important;
  padding: 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(222, 198, 160, .10) !important;
  background: rgba(8, 10, 15, .28) !important;
  color: rgba(244, 234, 213, .78) !important;
  font-size: .76rem !important;
  font-weight: 850 !important;
  line-height: 1.3 !important;
}

.updates-feature-panel,
.updates-timeline-panel {
  display: none !important;
}

@media (max-width: 900px) {
  .home-update-content.updates-rank-content.updates-split-content { grid-template-columns: 1fr !important; overflow: auto !important; }
  .updates-history-panel { min-height: 330px !important; }
  .updates-open-entry ul { grid-template-columns: 1fr !important; }
}


/* v7.0.316 Updates Beta Start Polish */
.home-update-content.updates-rank-content.updates-split-content.updates-beta-only-content {
  grid-template-columns: 315px minmax(0, 1fr) !important;
}

.updates-beta-history-item {
  min-height: 104px !important;
  align-content: center !important;
}

.updates-beta-history-item .updates-history-date {
  display: none !important;
}

.updates-beta-entry .updates-open-meta b {
  color: rgba(255, 226, 151, .82) !important;
}

.updates-beta-entry h3 {
  font-size: clamp(3.3rem, 6.2vw, 5.4rem) !important;
  letter-spacing: -.075em !important;
}

.updates-beta-entry p {
  max-width: 720px !important;
  font-size: 1.02rem !important;
}

.updates-beta-banner {
  background:
    linear-gradient(180deg, rgba(8, 9, 12, .10), rgba(10, 12, 16, .82)),
    radial-gradient(circle at 20% 18%, rgba(235, 199, 120, .24), transparent 28%),
    radial-gradient(circle at 82% 22%, rgba(139, 96, 36, .34), transparent 31%),
    url('/assets/ui/leaderboards/hall-of-fame-header-bg.png') center/cover no-repeat !important;
}

.home-update-actions.updates-rank-actions {
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
}

.home-update-actions.updates-rank-actions .secondary-btn,
.home-update-actions.updates-rank-actions .primary-btn {
  min-width: 190px !important;
  height: 48px !important;
  border-radius: 14px !important;
  font-weight: 1000 !important;
  letter-spacing: .02em !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 14px 28px rgba(0,0,0,.22) !important;
}

.home-update-actions.updates-rank-actions .secondary-btn {
  border: 1px solid rgba(216, 180, 112, .22) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(225, 184, 101, .10), transparent 62%),
    linear-gradient(180deg, rgba(42, 35, 24, .96), rgba(15, 14, 13, .98)) !important;
  color: rgba(245, 232, 205, .94) !important;
}

.home-update-actions.updates-rank-actions .secondary-btn:hover:not(:disabled) {
  border-color: rgba(237, 202, 126, .38) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(225, 184, 101, .18), transparent 64%),
    linear-gradient(180deg, rgba(54, 43, 27, .98), rgba(18, 16, 13, .98)) !important;
}

.home-update-actions.updates-rank-actions .primary-btn {
  background: linear-gradient(180deg, #f0d287, #b98230) !important;
  color: #17110a !important;
  border: 1px solid rgba(255, 230, 160, .46) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.18) !important;
}

@media (max-width: 900px) {
  .home-update-content.updates-rank-content.updates-split-content.updates-beta-only-content { grid-template-columns: 1fr !important; }
}


/* v7.0.317 Updates Image Render Polish */
.home-update-head.updates-rank-head {
  background:
    linear-gradient(180deg, rgba(6, 7, 9, .16), rgba(6, 7, 9, .70)),
    radial-gradient(circle at 50% 42%, rgba(231, 191, 111, .16), transparent 34%),
    url('/assets/ui/updates/updates-header.png') center/cover no-repeat !important;
}

.home-update-head.updates-rank-head h2 {
  color: rgba(255, 242, 205, .98) !important;
  text-shadow: 0 3px 0 rgba(0,0,0,.44), 0 18px 44px rgba(0,0,0,.72), 0 0 34px rgba(220, 168, 74, .22) !important;
}

.updates-open-banner.updates-beta-banner {
  min-height: 196px !important;
  background:
    linear-gradient(180deg, rgba(8, 9, 12, .02), rgba(10, 12, 16, .12)),
    url('/assets/ui/updates/beta-start-hero.png') center/cover no-repeat !important;
  border-color: rgba(237, 199, 112, .24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 16px 30px rgba(0,0,0,.20) !important;
}

.updates-open-banner.updates-beta-banner::after {
  display: none !important;
  content: none !important;
}

.updates-open-banner.updates-beta-banner span,
.updates-open-banner.updates-beta-banner strong {
  display: none !important;
}

.updates-beta-history-item {
  background:
    linear-gradient(90deg, rgba(8, 9, 12, .84), rgba(14, 14, 17, .82)),
    url('/assets/ui/updates/beta-start-poster.png') right center/auto 116% no-repeat !important;
}

.action-hub-news-item .action-hub-news-art {
  width: 31px !important;
  height: 31px !important;
  border-radius: 9px !important;
  background:
    linear-gradient(180deg, rgba(8, 9, 12, .04), rgba(8, 9, 12, .42)),
    url('/assets/ui/updates/beta-start-poster.png') center/cover no-repeat !important;
  border: 1px solid rgba(236, 196, 108, .24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 0 18px rgba(218, 165, 71, .12) !important;
  font-size: 0 !important;
}

body:not(.is-playing) .action-hub-news-item,
body.rq-scaled-menu:not(.is-playing) .action-hub-news-item {
  grid-template-columns: 31px minmax(0, 1fr) !important;
}


/* v7.0.317 Updates Image Render Polish */
.updates-open-banner.updates-beta-banner {
  background:
    linear-gradient(180deg, rgba(8, 9, 12, .18), rgba(10, 12, 16, .36)),
    rgba(8, 8, 10, .96) !important;
  min-height: 196px !important;
  isolation: isolate !important;
}

.updates-open-banner.updates-beta-banner > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  z-index: 0 !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
}

.updates-open-banner.updates-beta-banner::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.18)),
    linear-gradient(90deg, rgba(0,0,0,.20), transparent 25%, transparent 75%, rgba(0,0,0,.20)) !important;
}

.updates-beta-entry .updates-open-meta {
  margin-top: 16px !important;
  padding: 0 8px !important;
}

.updates-beta-entry .updates-open-meta span,
.updates-beta-entry .updates-open-meta b {
  position: relative !important;
  z-index: 2 !important;
}

.updates-beta-entry {
  grid-template-rows: 196px auto auto auto 1fr !important;
  gap: 12px !important;
}


/* v7.0.319 Main Menu Indicator + Season Close Polish */
.action-hub-grid .menu-card-btn[data-menu-action="missions"] {
  position: relative !important;
  overflow: hidden !important;
}

.action-hub-grid .menu-card-btn[data-menu-action="missions"].has-claim-indicator .action-hub-indicator.is-claim {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 9 !important;
  pointer-events: none !important;
}

.season-dialog-head-premium,
.season-dialog-head {
  position: relative !important;
  overflow: hidden !important;
}

.season-close-btn,
.season-dialog .dialog-close-btn,
#closeSeasonDialogBtn {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 30 !important;
  margin: 0 !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 760px) {
  .season-close-btn,
  .season-dialog .dialog-close-btn,
  #closeSeasonDialogBtn {
    top: 12px !important;
    right: 12px !important;
  }
}

/* v7.0.319 Main Menu Indicator + Season Close Polish */


/* v7.0.324 Shop Safe Load Hotfix */
.home-update-head.updates-rank-head h2,
.home-update-head.updates-rank-head h2 span {
  display: block !important;
  font-size: clamp(4.35rem, 7.6vw, 7.2rem) !important;
  line-height: .88 !important;
  letter-spacing: -.085em !important;
  font-weight: 1000 !important;
  text-align: center !important;
  text-transform: none !important;
  color: rgba(255, 244, 214, .99) !important;
  text-shadow: 0 4px 0 rgba(0,0,0,.46), 0 22px 52px rgba(0,0,0,.78), 0 0 38px rgba(223, 174, 80, .28) !important;
}

.home-update-title-block {
  width: 100% !important;
  justify-items: center !important;
}

/* Keep the shop on the same modal scale as Ranks/Hall while letting the items scroll inside. */
.shop-dialog::backdrop {
  background: rgba(4, 6, 10, .74) !important;
  backdrop-filter: blur(8px) !important;
}

.shop-dialog {
  width: min(1120px, calc(100dvw - 26px)) !important;
  max-width: min(1120px, calc(100dvw - 26px)) !important;
  height: min(820px, calc(100dvh - 26px)) !important;
  max-height: min(820px, calc(100dvh - 26px)) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(245, 234, 208, .96) !important;
  overflow: hidden !important;
}

.shop-dialog-card {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  display: grid !important;
  grid-template-rows: 142px 42px 62px auto auto minmax(0, 1fr) auto !important;
  gap: 10px !important;
  padding: 0 22px 18px !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  border: 1px solid rgba(222, 198, 160, .16) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(216, 176, 106, .12), transparent 38%),
    linear-gradient(145deg, rgba(29, 22, 16, .98), rgba(9, 11, 16, .98)) !important;
  box-shadow: 0 30px 100px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.045) !important;
}

.shop-dialog-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(216, 176, 106, .16), transparent 32%),
    radial-gradient(circle at 90% 8%, rgba(198, 161, 103, .10), transparent 30%),
    linear-gradient(115deg, transparent 0 40%, rgba(255,255,255,.035) 48%, transparent 56% 100%) !important;
}

.shop-dialog-card > * {
  position: relative !important;
  z-index: 1 !important;
}

.shop-dialog-card > .leaderboard-card-head {
  min-height: 142px !important;
  height: 142px !important;
  margin: 0 -22px 2px !important;
  padding: 24px 86px 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  border-bottom: 1px solid rgba(222, 198, 160, .14) !important;
  background:
    linear-gradient(180deg, rgba(6, 7, 9, .18), rgba(6, 7, 9, .72)),
    radial-gradient(circle at 50% 42%, rgba(231, 191, 111, .16), transparent 34%),
    url('/assets/ui/updates/updates-header.png') center/cover no-repeat !important;
}

.shop-dialog-card > .leaderboard-card-head h2 {
  margin: 0 !important;
  color: rgba(255, 244, 214, .99) !important;
  font-size: clamp(3.45rem, 5.7vw, 5.85rem) !important;
  line-height: .9 !important;
  letter-spacing: -.075em !important;
  text-shadow: 0 4px 0 rgba(0,0,0,.46), 0 22px 52px rgba(0,0,0,.78), 0 0 38px rgba(223, 174, 80, .25) !important;
}

.shop-dialog-card > .leaderboard-card-head p {
  margin: 8px 0 0 !important;
  color: rgba(244, 232, 204, .74) !important;
  font-size: .88rem !important;
  font-weight: 850 !important;
  letter-spacing: .01em !important;
}

.shop-close-btn {
  position: absolute !important;
  top: 22px !important;
  right: 22px !important;
  min-width: 92px !important;
  min-height: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(222, 198, 160, .22) !important;
  background: rgba(8, 10, 15, .34) !important;
  color: rgba(244, 233, 207, .94) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 22px rgba(0,0,0,.28) !important;
}

.shop-balance-row,
.shop-preview-row-compact,
.shop-tabs-characters-only,
.shop-status,
.shop-pager {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.shop-balance-row {
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: max-content !important;
  justify-self: center !important;
  padding: 7px 18px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(225, 184, 101, .18), transparent 58%),
    linear-gradient(180deg, rgba(42, 35, 24, .96), rgba(15, 14, 13, .98)) !important;
  border: 1px solid rgba(216, 180, 112, .22) !important;
}

.shop-balance-row strong,
.shop-balance-row span {
  color: rgba(255, 226, 151, .98) !important;
  font-weight: 1000 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.shop-preview-row-compact {
  min-height: 62px !important;
  grid-template-columns: 44px 1fr !important;
  align-items: center !important;
  padding: 8px 12px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(216,176,106,.13), transparent 38%),
    rgba(21, 17, 13, .62) !important;
  border: 1px solid rgba(222, 198, 160, .12) !important;
}

.shop-preview-placeholder {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  background: rgba(216,176,106,.10) !important;
  border: 1px solid rgba(222,198,160,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055) !important;
}

.shop-tabs-characters-only {
  display: none !important;
}

.shop-tier-strip {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 8px !important;
  min-height: 74px !important;
  overflow: hidden !important;
}

.shop-tier-strip button {
  min-height: 72px !important;
  border-radius: 17px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(218, 176, 91, .15), transparent 48%),
    linear-gradient(180deg, rgba(39, 31, 21, .78), rgba(13, 13, 14, .88)) !important;
  border: 1px solid rgba(222, 198, 160, .13) !important;
  color: rgba(246, 235, 214, .86) !important;
}

.shop-tier-strip button.active {
  transform: none !important;
  border-color: rgba(230, 194, 112, .55) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(230, 194, 112, .25), transparent 50%),
    linear-gradient(180deg, rgba(49, 39, 24, .92), rgba(17, 15, 12, .94)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 24px rgba(214, 165, 69, .18) !important;
}

.shop-status {
  min-height: 38px !important;
  overflow: hidden !important;
}

.shop-status-line {
  border-radius: 16px !important;
  background: rgba(18, 15, 11, .64) !important;
  border: 1px solid rgba(222, 198, 160, .11) !important;
  color: rgba(245, 233, 205, .82) !important;
}

.shop-grid {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-content: start !important;
  gap: 12px !important;
  padding: 2px 4px 10px 0 !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(216,176,106,.44) rgba(8,7,5,.42) !important;
}

.shop-grid::-webkit-scrollbar { width: 10px !important; }
.shop-grid::-webkit-scrollbar-track { background: rgba(8,7,5,.42) !important; border-radius: 999px !important; }
.shop-grid::-webkit-scrollbar-thumb { background: rgba(216,176,106,.44) !important; border-radius: 999px !important; }

.shop-item.shop-item-static {
  min-height: 286px !important;
  padding: 12px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(218, 176, 91, .11), transparent 38%),
    linear-gradient(180deg, rgba(31, 25, 18, .88), rgba(10, 10, 11, .94)) !important;
  border-color: rgba(222, 198, 160, .14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 42px rgba(0,0,0,.25) !important;
}

.shop-item-static .static-card-preview {
  height: 124px !important;
  min-height: 124px !important;
  max-height: 124px !important;
  background: linear-gradient(180deg, rgba(236,226,205,.80), rgba(149,150,146,.76)) !important;
}

.shop-card-price {
  background: rgba(12, 10, 8, .54) !important;
  border-color: rgba(222, 198, 160, .10) !important;
}

.shop-card-action {
  min-height: 40px !important;
  border-radius: 14px !important;
}

.shop-pager {
  min-height: 44px !important;
  padding: 6px !important;
  border-radius: 18px !important;
  background: rgba(16, 13, 10, .62) !important;
  border: 1px solid rgba(222, 198, 160, .10) !important;
}

@media (max-width: 1100px) {
  .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .shop-tier-strip { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; min-height: 148px !important; }
  .shop-dialog-card { grid-template-rows: 142px 42px 62px auto auto minmax(0, 1fr) auto !important; }
}

@media (max-width: 760px) {
  .home-update-head.updates-rank-head h2,
  .home-update-head.updates-rank-head h2 span { font-size: clamp(3.1rem, 16vw, 4.4rem) !important; }
  .shop-dialog { width: min(560px, calc(100dvw - 18px)) !important; height: min(820px, calc(100dvh - 18px)) !important; }
  .shop-dialog-card { padding: 0 14px 16px !important; grid-template-rows: 118px 42px 58px auto auto minmax(0, 1fr) auto !important; }
  .shop-dialog-card > .leaderboard-card-head { min-height: 118px !important; height: 118px !important; margin: 0 -14px 10px !important; padding: 22px 64px 20px !important; }
  .shop-dialog-card > .leaderboard-card-head h2 { font-size: clamp(2.55rem, 12vw, 3.8rem) !important; }
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .shop-tier-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; min-height: 296px !important; overflow-y: auto !important; }
  .shop-item.shop-item-static { min-height: 264px !important; }
}

/* v7.0.320 Shop Header + Updates Title Polish */


/* v7.0.320 Shop Header + Updates Title Polish */
/* Match Updates and Shop title scale to the existing Ranks/Missions/Season modal titles. */
.home-update-head.updates-rank-head h2,
.home-update-head.updates-rank-head h2 span,
.shop-dialog-card > .leaderboard-card-head h2 {
  display: inline-block !important;
  margin: 0 !important;
  color: #f8efe0 !important;
  font-size: clamp(2.45rem, 4.1vw, 3.55rem) !important;
  line-height: .92 !important;
  letter-spacing: -.055em !important;
  font-weight: 1000 !important;
  text-align: center !important;
  text-transform: none !important;
  text-shadow: 0 10px 28px rgba(0,0,0,.52) !important;
}

.shop-dialog-card > .leaderboard-card-head p,
.shop-dialog-card > .leaderboard-card-head h2::before,
.shop-dialog-card > .leaderboard-card-head h2::after {
  display: none !important;
  content: none !important;
}

.shop-dialog {
  height: min(870px, calc(100dvh - 12px)) !important;
  max-height: min(870px, calc(100dvh - 12px)) !important;
}

.shop-dialog-card {
  grid-template-rows: 142px 42px minmax(0, auto) minmax(0, 1fr) auto !important;
  gap: 10px !important;
  padding-bottom: 16px !important;
}

.shop-dialog-card > .leaderboard-card-head {
  min-height: 142px !important;
  height: 142px !important;
  margin-bottom: 2px !important;
}

.shop-preview-row-compact,
.shop-tabs-characters-only {
  display: none !important;
}

.shop-tier-strip {
  min-height: 66px !important;
}

.shop-tier-strip button {
  min-height: 64px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.shop-status {
  min-height: 34px !important;
}

.shop-grid {
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 0 6px 18px 0 !important;
  grid-auto-rows: minmax(286px, auto) !important;
}

.shop-item.shop-item-static {
  min-height: 286px !important;
}

.shop-pager {
  min-height: 42px !important;
}

@media (max-width: 1100px) {
  .shop-dialog-card { grid-template-rows: 142px 42px minmax(0, auto) minmax(0, 1fr) auto !important; }
}

@media (max-width: 760px) {
  .shop-dialog { height: min(850px, calc(100dvh - 10px)) !important; }
  .shop-dialog-card { grid-template-rows: 118px 42px minmax(0, auto) minmax(0, 1fr) auto !important; }
  .shop-dialog-card > .leaderboard-card-head h2,
  .home-update-head.updates-rank-head h2,
  .home-update-head.updates-rank-head h2 span { font-size: clamp(2.25rem, 10vw, 3.25rem) !important; }
}


/* v7.0.324 Shop Safe Load Hotfix
   Make the shop scroll area show full companion cards/actions instead of clipping the View/Preview buttons. */
.shop-dialog {
  height: min(920px, calc(100dvh - 8px)) !important;
  max-height: min(920px, calc(100dvh - 8px)) !important;
}

.shop-dialog-card {
  grid-template-rows: 142px 42px minmax(0, auto) minmax(0, 1fr) !important;
  gap: 8px !important;
  padding-bottom: 18px !important;
}

.shop-grid {
  min-height: 0 !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  align-content: start !important;
  grid-auto-rows: minmax(328px, max-content) !important;
  padding: 0 8px 24px 0 !important;
}

.shop-item.shop-item-static {
  min-height: 328px !important;
  height: auto !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 12px !important;
}

.shop-item.shop-item-static .shop-item-body {
  display: grid !important;
  gap: 7px !important;
  flex: 0 0 auto !important;
}

.shop-item-static .static-card-preview {
  height: 124px !important;
  min-height: 124px !important;
  max-height: 124px !important;
  flex: 0 0 124px !important;
}

.shop-card-price {
  flex: 0 0 auto !important;
  min-height: 36px !important;
}

.shop-card-action {
  flex: 0 0 auto !important;
  min-height: 42px !important;
  margin-top: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.shop-pager {
  display: none !important;
}

@media (max-width: 1100px) {
  .shop-dialog { height: min(900px, calc(100dvh - 8px)) !important; }
  .shop-grid { grid-auto-rows: minmax(320px, max-content) !important; }
  .shop-item.shop-item-static { min-height: 320px !important; }
}

@media (max-width: 760px) {
  .shop-dialog { height: min(900px, calc(100dvh - 8px)) !important; }
  .shop-dialog-card { grid-template-rows: 118px 42px minmax(0, auto) minmax(0, 1fr) !important; }
  .shop-grid { grid-auto-rows: minmax(306px, max-content) !important; }
  .shop-item.shop-item-static { min-height: 306px !important; }
  .shop-item-static .static-card-preview { height: 112px !important; min-height: 112px !important; max-height: 112px !important; flex-basis: 112px !important; }
}


/* v7.0.324 Shop Safe Load Hotfix
   Conservative shop layout: no risky JS pager mutation, no hard grid viewport rewrite.
   Keep the modal large, hide only the visual pager strip, and provide extra bottom space
   so View/Preview buttons are not sliced by the scroll edge. */
.shop-dialog {
  height: min(920px, calc(100dvh - 8px)) !important;
  max-height: min(920px, calc(100dvh - 8px)) !important;
}

.shop-dialog-card {
  padding-bottom: 22px !important;
}

#shopPager,
.shop-pager {
  display: none !important;
}

.shop-grid {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 90px !important;
  scroll-padding-bottom: 90px !important;
  align-content: start !important;
}

.shop-item.shop-item-static {
  min-height: 330px !important;
  overflow: visible !important;
}

.shop-card-action {
  margin-top: auto !important;
  min-height: 40px !important;
}

@media (max-width: 760px) {
  .shop-dialog { height: min(920px, calc(100dvh - 8px)) !important; }
  .shop-grid { padding-bottom: 110px !important; scroll-padding-bottom: 110px !important; }
}


/* v7.0.326 Map Labels Safe Load Hotfix: labels overlay uses safe z-index tile layer instead of custom Leaflet pane. */
body.single-adventure-map-primary .game-screen .map,
body.single-adventure-map-primary .game-screen .leaflet-container {
  background:
    radial-gradient(circle at 46% 40%, rgba(203, 177, 105, .18), transparent 46%),
    linear-gradient(180deg, #19464f 0%, #123841 45%, #0b2931 100%) !important;
}
body.single-adventure-map-primary .game-screen .leaflet-tile-pane {
  filter: saturate(1.08) contrast(1.14) brightness(.92) sepia(.16) hue-rotate(-7deg) !important;
  opacity: .985 !important;
}
body.single-adventure-map-primary .rq-map-label-tiles,
body.single-adventure-map-primary .rq-map-label-tiles .leaflet-tile {
  pointer-events: none !important;
}
body.single-adventure-map-primary .rq-map-label-tiles {
  filter: saturate(.78) sepia(.22) hue-rotate(-8deg) brightness(1.06) contrast(1.08) !important;
  opacity: .92 !important;
}
body.single-adventure-map-primary .game-screen .leaflet-tile {
  image-rendering: auto !important;
  transform: translateZ(0);
}
body.single-adventure-map-primary .game-screen .map::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 410 !important;
  pointer-events: none !important;
  background:
    linear-gradient(115deg, rgba(255, 229, 151, .16) 0 7%, transparent 7% 17%, rgba(42, 126, 101, .13) 17% 26%, transparent 26% 39%, rgba(208, 154, 74, .11) 39% 48%, transparent 48% 63%, rgba(29, 91, 108, .14) 63% 72%, transparent 72% 100%),
    linear-gradient(32deg, transparent 0 10%, rgba(246, 210, 132, .10) 10% 18%, transparent 18% 31%, rgba(25, 103, 88, .12) 31% 46%, transparent 46% 57%, rgba(235, 181, 89, .08) 57% 65%, transparent 65% 100%),
    radial-gradient(circle at 18% 16%, rgba(252, 218, 135, .22), transparent 28%),
    radial-gradient(circle at 79% 74%, rgba(57, 152, 124, .15), transparent 36%),
    linear-gradient(180deg, rgba(10, 17, 17, .04), rgba(97, 63, 26, .08)) !important;
  mix-blend-mode: overlay !important;
  opacity: .24 !important;
}
body.single-adventure-map-primary .game-screen .map::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 411 !important;
  pointer-events: none !important;
  background:
    repeating-linear-gradient(60deg, rgba(255, 232, 177, .055) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(120deg, rgba(0, 0, 0, .075) 0 1px, transparent 1px 104px),
    radial-gradient(circle at 50% 43%, rgba(255, 244, 202, .07), transparent 38%),
    radial-gradient(circle at 50% 50%, transparent 48%, rgba(0, 0, 0, .34) 100%) !important;
  box-shadow: inset 0 0 88px rgba(0, 0, 0, .24), inset 0 0 0 1px rgba(233, 200, 132, .10) !important;
  mix-blend-mode: soft-light !important;
  opacity: .86 !important;
}
body.single-adventure-map-primary .leaflet-overlay-pane svg path.leaflet-interactive {
  vector-effect: non-scaling-stroke;
}
body.single-adventure-map-primary .rq-hint-circle {
  stroke: rgba(245, 194, 92, .98) !important;
  fill: rgba(245, 194, 92, .11) !important;
  filter: drop-shadow(0 0 12px rgba(245, 194, 92, .36)) drop-shadow(0 0 28px rgba(245, 194, 92, .18)) !important;
}
body.single-adventure-map-primary .rq-hint-circle-label {
  background: linear-gradient(135deg, rgba(30, 22, 12, .95), rgba(65, 44, 18, .88)) !important;
  border-color: rgba(245, 194, 92, .74) !important;
  color: #fff3d0 !important;
}
body.single-adventure-map-primary .rq-map-pin {
  border-color: rgba(255, 232, 173, .92) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.32), 0 0 0 5px rgba(214, 153, 54, .12), inset 0 1px 0 rgba(255,255,255,.26) !important;
}
body.single-adventure-map-primary .rq-map-pin.guess {
  background: linear-gradient(180deg, #f2c76a 0%, #a9651b 100%) !important;
}
body.single-adventure-map-primary .rq-map-pin.answer {
  background: linear-gradient(180deg, #9ee08f 0%, #276f38 100%) !important;
}
body.single-adventure-map-primary .rq-map-pin-label,
body.single-adventure-map-primary .leaflet-tooltip.rq-map-pin-tooltip {
  background: rgba(24, 18, 10, .95) !important;
  border-color: rgba(255, 226, 164, .42) !important;
  color: #fff4d6 !important;
}
body.single-adventure-map-primary .result-travel-line {
  stroke: #f2b94b !important;
  stroke-width: 4.6 !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.34)) drop-shadow(0 0 8px rgba(242,185,75,.28)) !important;
}
body.single-adventure-map-primary .leaflet-control-zoom {
  border-radius: 18px !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.38), 0 0 0 1px rgba(229, 190, 117, .15) !important;
}
body.single-adventure-map-primary .leaflet-control-zoom a {
  background: linear-gradient(180deg, rgba(44, 34, 20, .92), rgba(18, 15, 11, .94)) !important;
  color: #f7d992 !important;
}
body.single-adventure-map-primary .leaflet-control-zoom a:hover {
  background: linear-gradient(180deg, rgba(83, 57, 22, .96), rgba(34, 24, 12, .96)) !important;
}
body.single-adventure-map-primary .leaflet-control-attribution {
  background: rgba(11, 9, 7, .52) !important;
  color: rgba(255, 239, 203, .58) !important;
  border-radius: 10px 0 0 0 !important;
}
@media (max-width: 920px) and (orientation: landscape) {
  body.single-adventure-map-primary .game-screen .leaflet-tile-pane {
    filter: saturate(1.03) contrast(1.1) brightness(.95) sepia(.14) hue-rotate(-6deg) !important;
  }
  body.single-adventure-map-primary .game-screen .map::before {
    opacity: .18 !important;
  }
  body.single-adventure-map-primary .game-screen .map::after {
    opacity: .46 !important;
    box-shadow: inset 0 0 58px rgba(0,0,0,.22) !important;
  }
  body.single-adventure-map-primary .rq-map-label-tiles {
    opacity: .82 !important;
  }
}



/* v7.0.327 Map Visual Tuning Phase 2: darker game-map colors, stronger play readability and amber hint circle. */
body.single-adventure-map-primary .game-screen .map,
body.single-adventure-map-primary .game-screen .leaflet-container {
  background:
    radial-gradient(circle at 48% 42%, rgba(215, 174, 87, .20), transparent 44%),
    radial-gradient(circle at 18% 74%, rgba(45, 104, 91, .20), transparent 34%),
    linear-gradient(180deg, #0d3339 0%, #0a2930 46%, #061c23 100%) !important;
}
body.single-adventure-map-primary .game-screen .leaflet-tile-pane {
  filter: saturate(1.18) contrast(1.22) brightness(.72) sepia(.34) hue-rotate(-13deg) !important;
  opacity: .98 !important;
  transition: opacity .22s ease, filter .22s ease !important;
}
body.single-adventure-map-primary .rq-map-label-tiles {
  filter: saturate(.7) sepia(.42) hue-rotate(-13deg) brightness(1.22) contrast(1.32) drop-shadow(0 1px 0 rgba(255, 239, 196, .16)) !important;
  opacity: .72 !important;
  mix-blend-mode: multiply !important;
}
body.single-adventure-map-primary .game-screen .map::before {
  background:
    linear-gradient(116deg, rgba(255, 220, 142, .18) 0 8%, transparent 8% 19%, rgba(50, 133, 103, .14) 19% 28%, transparent 28% 41%, rgba(209, 139, 58, .14) 41% 50%, transparent 50% 65%, rgba(21, 83, 105, .17) 65% 75%, transparent 75% 100%),
    linear-gradient(33deg, transparent 0 11%, rgba(244, 197, 111, .12) 11% 20%, transparent 20% 33%, rgba(34, 109, 91, .13) 33% 48%, transparent 48% 59%, rgba(224, 148, 65, .10) 59% 67%, transparent 67% 100%),
    radial-gradient(circle at 18% 16%, rgba(252, 211, 116, .18), transparent 30%),
    radial-gradient(circle at 79% 74%, rgba(47, 146, 119, .15), transparent 38%),
    linear-gradient(180deg, rgba(14, 18, 13, .08), rgba(93, 58, 20, .12)) !important;
  mix-blend-mode: multiply !important;
  opacity: .34 !important;
}
body.single-adventure-map-primary .game-screen .map::after {
  background:
    repeating-linear-gradient(60deg, rgba(255, 224, 156, .045) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(120deg, rgba(0, 0, 0, .09) 0 1px, transparent 1px 108px),
    radial-gradient(circle at 50% 43%, rgba(255, 228, 163, .07), transparent 35%),
    radial-gradient(circle at 50% 50%, transparent 38%, rgba(0, 0, 0, .42) 100%) !important;
  box-shadow: inset 0 0 118px rgba(0, 0, 0, .42), inset 0 0 0 1px rgba(238, 194, 105, .12) !important;
  mix-blend-mode: overlay !important;
  opacity: .74 !important;
}
body.single-adventure-map-primary .leaflet-tile,
body.single-adventure-map-primary .rq-map-label-tiles .leaflet-tile {
  will-change: transform, opacity !important;
  backface-visibility: hidden !important;
}
.rq-hint-circle,
path.rq-hint-circle,
.leaflet-interactive.rq-hint-circle,
body.single-adventure-map-primary .rq-hint-circle {
  stroke: rgba(255, 195, 72, .98) !important;
  stroke-width: 2.7px !important;
  stroke-dasharray: 10 8 !important;
  fill: rgba(255, 185, 57, .13) !important;
  filter: drop-shadow(0 0 9px rgba(255, 190, 72, .45)) drop-shadow(0 0 26px rgba(255, 158, 43, .22)) !important;
}
body.single-adventure-map-primary .rq-hint-circle-label {
  background: linear-gradient(135deg, rgba(27, 18, 8, .96), rgba(79, 49, 16, .9)) !important;
  border-color: rgba(255, 198, 78, .86) !important;
  color: #fff2c5 !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.38), 0 0 0 1px rgba(255, 217, 127, .12) inset !important;
}
body.single-adventure-map-primary .leaflet-control-attribution {
  opacity: .58 !important;
}
body.single-adventure-map-primary .leaflet-control-attribution:hover {
  opacity: .9 !important;
}
@media (max-width: 920px) and (orientation: landscape) {
  body.single-adventure-map-primary .game-screen .leaflet-tile-pane {
    filter: saturate(1.1) contrast(1.16) brightness(.78) sepia(.28) hue-rotate(-11deg) !important;
  }
  body.single-adventure-map-primary .rq-map-label-tiles {
    opacity: .68 !important;
  }
  body.single-adventure-map-primary .game-screen .map::before {
    opacity: .24 !important;
  }
  body.single-adventure-map-primary .game-screen .map::after {
    opacity: .62 !important;
    box-shadow: inset 0 0 72px rgba(0,0,0,.34) !important;
  }
}


/* v7.0.328 Map Visual Recovery: remove failed polygon/faceted overlay, keep clean labels and smoother movement. */
body.single-adventure-map-primary .game-screen .map,
body.single-adventure-map-primary .game-screen .leaflet-container {
  background:
    radial-gradient(circle at 46% 38%, rgba(203, 177, 105, .10), transparent 48%),
    linear-gradient(180deg, #789199 0%, #6f898f 45%, #657f86 100%) !important;
}
body.single-adventure-map-primary .game-screen .leaflet-tile-pane {
  filter: saturate(.96) contrast(1.04) brightness(.86) sepia(.10) hue-rotate(-6deg) !important;
  opacity: .98 !important;
  transition: opacity .18s ease !important;
}
body.single-adventure-map-primary .game-screen .map::before,
body.single-adventure-map-primary .game-screen .map::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
body.single-adventure-map-primary .rq-map-label-tiles {
  filter: saturate(.78) sepia(.14) hue-rotate(-6deg) brightness(.95) contrast(1.18) !important;
  opacity: .78 !important;
}
body.single-adventure-map-primary .leaflet-tile-container {
  transition: opacity .16s ease !important;
}
body.single-adventure-map-primary .rq-hint-circle {
  stroke: rgba(235, 176, 64, .98) !important;
  fill: rgba(235, 176, 64, .10) !important;
  stroke-width: 3 !important;
  stroke-dasharray: 10 8 !important;
  filter: drop-shadow(0 0 10px rgba(235,176,64,.34)) drop-shadow(0 0 24px rgba(235,176,64,.18)) !important;
}
body.single-adventure-map-primary .rq-hint-circle-label {
  background: linear-gradient(135deg, rgba(27, 21, 12, .96), rgba(64, 42, 16, .91)) !important;
  border-color: rgba(235, 176, 64, .75) !important;
  color: #fff0c8 !important;
}
@media (max-width: 920px) and (orientation: landscape) {
  body.single-adventure-map-primary .game-screen .leaflet-tile-pane {
    filter: saturate(.96) contrast(1.03) brightness(.88) sepia(.08) hue-rotate(-5deg) !important;
  }
  body.single-adventure-map-primary .rq-map-label-tiles {
    opacity: .72 !important;
  }
}


/* v7.0.329 Custom Game Map Fantasy Overlay Prototype: superseded by v7.0.330 clean map recovery. */
body.single-adventure-map-primary .game-screen .map,
body.single-adventure-map-primary .game-screen .leaflet-container {
  background:
    radial-gradient(circle at 48% 36%, rgba(255, 231, 174, .20), transparent 42%),
    radial-gradient(circle at 18% 72%, rgba(126, 165, 148, .20), transparent 36%),
    linear-gradient(180deg, #a8c1bd 0%, #9ab6b0 48%, #8ba9a5 100%) !important;
}
body.single-adventure-map-primary .game-screen .leaflet-tile-pane {
  filter: saturate(1.02) contrast(1.08) brightness(.93) sepia(.16) hue-rotate(-5deg) !important;
  opacity: .985 !important;
  transition: opacity .18s ease, filter .18s ease !important;
}
body.single-adventure-map-primary .game-screen .map::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 410 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 238, 190, .22), transparent 38%),
    radial-gradient(circle at 76% 72%, rgba(96, 145, 128, .13), transparent 34%),
    linear-gradient(90deg, rgba(180, 136, 73, .055), transparent 24%, transparent 76%, rgba(180, 136, 73, .055)),
    linear-gradient(180deg, rgba(255, 245, 207, .06), rgba(58, 38, 17, .06)) !important;
  mix-blend-mode: soft-light !important;
  opacity: .62 !important;
}
body.single-adventure-map-primary .game-screen .map::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 411 !important;
  pointer-events: none !important;
  background:
    repeating-linear-gradient(0deg, rgba(104, 78, 38, .035) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, rgba(104, 78, 38, .030) 0 1px, transparent 1px 128px),
    radial-gradient(circle at 50% 50%, transparent 46%, rgba(24, 17, 9, .18) 100%) !important;
  box-shadow: inset 0 0 82px rgba(25, 18, 10, .22), inset 0 0 0 1px rgba(236, 198, 126, .10) !important;
  mix-blend-mode: multiply !important;
  opacity: .38 !important;
}
body.single-adventure-map-primary .rq-map-label-tiles {
  filter: saturate(.82) sepia(.18) hue-rotate(-5deg) brightness(.98) contrast(1.16) !important;
  opacity: .86 !important;
  mix-blend-mode: multiply !important;
}
body.single-adventure-map-primary .leaflet-tile-container {
  transition: opacity .14s ease !important;
}
body.single-adventure-map-primary .leaflet-control-attribution {
  background: rgba(35, 28, 18, .48) !important;
  color: rgba(255, 239, 204, .56) !important;
}
body.single-adventure-map-primary .rq-hint-circle {
  stroke: rgba(238, 181, 70, .98) !important;
  fill: rgba(238, 181, 70, .12) !important;
  stroke-width: 3 !important;
  stroke-dasharray: 10 8 !important;
  filter: drop-shadow(0 0 10px rgba(238,181,70,.38)) drop-shadow(0 0 24px rgba(238,181,70,.20)) !important;
}
body.single-adventure-map-primary .rq-hint-circle-label {
  background: linear-gradient(135deg, rgba(29, 22, 11, .96), rgba(70, 45, 16, .92)) !important;
  border-color: rgba(238, 181, 70, .78) !important;
  color: #fff1ca !important;
}
@media (max-width: 920px) and (orientation: landscape) {
  body.single-adventure-map-primary .game-screen .leaflet-tile-pane {
    filter: saturate(1) contrast(1.06) brightness(.94) sepia(.12) hue-rotate(-5deg) !important;
  }
  body.single-adventure-map-primary .game-screen .map::before {
    opacity: .42 !important;
  }
  body.single-adventure-map-primary .game-screen .map::after {
    opacity: .28 !important;
    box-shadow: inset 0 0 58px rgba(25,18,10,.18) !important;
  }
  body.single-adventure-map-primary .rq-map-label-tiles {
    opacity: .82 !important;
  }
}


/* v7.0.330 GeoGuessr-like Clean Map Recovery: clean single tile layer, stable pins, no experimental fantasy overlays. */
body.single-adventure-map-primary .game-screen .map,
body.single-adventure-map-primary .game-screen .leaflet-container {
  background: #d8e6e3 !important;
}
body.single-adventure-map-primary .game-screen .leaflet-tile-pane,
body.single-adventure-map-primary .game-screen .leaflet-tile {
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}
body.single-adventure-map-primary .game-screen .map::before,
body.single-adventure-map-primary .game-screen .map::after,
body.single-adventure-map-primary .map::before,
body.single-adventure-map-primary .map::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: none !important;
  box-shadow: none !important;
}
body.single-adventure-map-primary .rq-map-label-tiles,
body.single-adventure-map-primary .leaflet-tile.rq-map-label-tiles {
  display: none !important;
}
body.single-adventure-map-primary .rq-hint-circle {
  stroke: rgba(224, 151, 42, .96) !important;
  fill: rgba(224, 151, 42, .10) !important;
  stroke-width: 3 !important;
  stroke-dasharray: 10 8 !important;
  filter: drop-shadow(0 0 10px rgba(224, 151, 42, .28)) !important;
}
body.single-adventure-map-primary .rq-hint-circle-label {
  background: linear-gradient(135deg, rgba(33, 25, 14, .96), rgba(77, 52, 20, .92)) !important;
  border-color: rgba(230, 181, 95, .76) !important;
  color: #fff3d0 !important;
}
body.single-adventure-map-primary .leaflet-container,
body.single-adventure-map-primary .leaflet-pane,
body.single-adventure-map-primary .leaflet-tile-pane,
body.single-adventure-map-primary .leaflet-marker-pane,
body.single-adventure-map-primary .leaflet-overlay-pane {
  pointer-events: auto;
}
body.single-adventure-map-primary .leaflet-control-attribution {
  background: rgba(255, 255, 255, .72) !important;
  color: rgba(58, 54, 48, .72) !important;
  border-radius: 10px 0 0 0 !important;
}


/* v7.0.334 Map Tile Render Recovery: smoother map movement and cleaner country/city focused CARTO Voyager style. */
body.single-adventure-map-primary .game-screen .map,
body.single-adventure-map-primary .game-screen .leaflet-container {
  background: #72cfe2 !important;
}
body.single-adventure-map-primary .game-screen .leaflet-tile-pane,
body.single-adventure-map-primary .game-screen .leaflet-tile {
  filter: saturate(1.18) contrast(1.03) brightness(1.035) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  image-rendering: auto !important;
  backface-visibility: hidden !important;
  will-change: transform, opacity !important;
}
body.single-adventure-map-primary .leaflet-tile-container {
  will-change: transform !important;
}
body.single-adventure-map-primary .leaflet-zoom-animated {
  transition-timing-function: cubic-bezier(.22, .72, .18, 1) !important;
}
body.single-adventure-map-primary .game-screen .map::before,
body.single-adventure-map-primary .game-screen .map::after,
body.single-adventure-map-primary .map::before,
body.single-adventure-map-primary .map::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: none !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
}
body.single-adventure-map-primary .rq-map-label-tiles,
body.single-adventure-map-primary .leaflet-tile.rq-map-label-tiles {
  display: none !important;
}
body.single-adventure-map-primary .leaflet-container,
body.single-adventure-map-primary .leaflet-pane,
body.single-adventure-map-primary .leaflet-tile-pane,
body.single-adventure-map-primary .leaflet-marker-pane,
body.single-adventure-map-primary .leaflet-overlay-pane,
body.single-adventure-map-primary .leaflet-shadow-pane {
  pointer-events: auto !important;
}
body.single-adventure-map-primary .rq-hint-circle {
  stroke: rgba(230, 164, 54, .98) !important;
  fill: rgba(230, 164, 54, .10) !important;
  stroke-width: 3 !important;
  stroke-dasharray: 10 8 !important;
  filter: drop-shadow(0 0 10px rgba(230,164,54,.28)) !important;
}
body.single-adventure-map-primary .rq-hint-circle-label {
  background: linear-gradient(135deg, rgba(33, 25, 14, .96), rgba(77, 52, 20, .92)) !important;
  border-color: rgba(230, 181, 95, .76) !important;
  color: #fff3d0 !important;
}
body.single-adventure-map-primary .leaflet-control-attribution {
  background: rgba(255, 255, 255, .72) !important;
  color: rgba(45, 50, 48, .66) !important;
  border-radius: 10px 0 0 0 !important;
}
body.single-adventure-map-fallback .game-screen .leaflet-tile-pane,
body.single-adventure-map-fallback .game-screen .leaflet-tile {
  filter: saturate(1.08) contrast(1.02) brightness(1.015) !important;
}
@media (max-width: 920px) and (orientation: landscape) {
  body.single-adventure-map-primary .game-screen .leaflet-tile-pane,
  body.single-adventure-map-primary .game-screen .leaflet-tile {
    filter: saturate(1.12) contrast(1.02) brightness(1.025) !important;
  }
}


/* v7.0.336 Map Visibility Recovery + Color Balance: undo overbright map polish and keep readable clean colors. */
body.single-adventure-map-primary .game-screen .map,
body.single-adventure-map-primary .game-screen .leaflet-container {
  background: #84d6e4 !important;
}
body.single-adventure-map-primary .game-screen .leaflet-tile-pane,
body.single-adventure-map-primary .game-screen .leaflet-tile {
  filter: saturate(1.08) contrast(1.08) brightness(.96) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  image-rendering: auto !important;
  backface-visibility: hidden !important;
  will-change: transform !important;
}
body.single-adventure-map-primary .game-screen .map::before,
body.single-adventure-map-primary .game-screen .map::after,
body.single-adventure-map-primary .map::before,
body.single-adventure-map-primary .map::after,
body.single-adventure-map-primary .leaflet-container::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: none !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
}
body.single-adventure-map-primary .leaflet-container {
  cursor: grab !important;
}
body.single-adventure-map-primary .leaflet-container:active,
body.single-adventure-map-primary .leaflet-container.leaflet-grabbing {
  cursor: grabbing !important;
}
body.single-adventure-map-primary .leaflet-control-attribution {
  background: rgba(255, 255, 255, .82) !important;
  color: rgba(35, 42, 45, .76) !important;
}
body.single-adventure-map-primary .rq-hint-circle {
  stroke: rgba(230, 164, 54, .98) !important;
  fill: rgba(230, 164, 54, .10) !important;
  stroke-width: 3 !important;
  stroke-dasharray: 10 8 !important;
}
@media (max-width: 920px) and (orientation: landscape) {
  body.single-adventure-map-primary .game-screen .leaflet-tile-pane,
  body.single-adventure-map-primary .game-screen .leaflet-tile {
    filter: saturate(1.05) contrast(1.06) brightness(.98) !important;
  }
}


/* v7.0.344 Leaflet World Wrap Recovery: one stable map renderer, Google-like horizontal world wrap, no MapLibre hybrid layer. */
.maplibre-visual-layer,
#mapLibreVisualLayer {
  display: none !important;
  pointer-events: none !important;
}
body.maplibre-visual-active .game-screen .leaflet-tile-pane,
body.maplibre-visual-active .game-screen .leaflet-overlay-pane,
body.maplibre-visual-active .game-screen .leaflet-marker-pane,
body.maplibre-visual-active .game-screen .leaflet-shadow-pane,
body.maplibre-visual-active .game-screen .leaflet-tooltip-pane,
body.maplibre-visual-active .game-screen .leaflet-control-container {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
body.single-adventure-map-primary .game-screen .map,
body.single-adventure-map-primary .game-screen .leaflet-container {
  background: #bfe7ef !important;
}
body.single-adventure-map-primary .game-screen .leaflet-tile-pane,
body.single-adventure-map-primary .game-screen .leaflet-tile {
  filter: saturate(1.10) contrast(1.07) brightness(.985) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  image-rendering: auto !important;
}
body.single-adventure-map-primary .rq-map-relief-layer,
body.single-adventure-map-primary .rq-map-relief-layer .leaflet-tile,
body.single-adventure-map-primary .leaflet-tile.rq-map-relief-layer {
  display: none !important;
  opacity: 0 !important;
}
body.single-adventure-map-primary .game-screen .map::before,
body.single-adventure-map-primary .game-screen .map::after,
body.single-adventure-map-primary .map::before,
body.single-adventure-map-primary .map::after,
body.single-adventure-map-primary .leaflet-container::before,
body.single-adventure-map-primary .leaflet-container::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}
body.single-adventure-map-primary .leaflet-control-attribution {
  background: rgba(255,255,255,.76) !important;
  color: rgba(38,48,55,.72) !important;
}
body.single-adventure-map-primary .rq-hint-circle {
  stroke: rgba(230, 164, 54, .98) !important;
  fill: rgba(230, 164, 54, .10) !important;
  stroke-width: 3 !important;
  stroke-dasharray: 10 8 !important;
  filter: drop-shadow(0 0 10px rgba(230,164,54,.28)) !important;
}
body.single-adventure-map-primary .rq-hint-circle-label {
  background: linear-gradient(135deg, rgba(33, 25, 14, .96), rgba(77, 52, 20, .92)) !important;
  border-color: rgba(230, 181, 95, .76) !important;
  color: #fff3d0 !important;
}

/* v7.0.345 Pure MapLibre Gameplay Map Prototype: one smooth vector renderer for map, input, pins, hint circle and result line. */
.maplibre-gameplay-map {
  position: absolute;
  inset: 0;
  z-index: 14;
  opacity: 0;
  pointer-events: auto;
  background: #9fd8eb;
  transition: opacity .22s ease;
}
body.maplibre-gameplay-active .maplibre-gameplay-map {
  opacity: 1;
}
body.maplibre-gameplay-active .game-screen .leaflet-tile-pane,
body.maplibre-gameplay-active .game-screen .leaflet-overlay-pane,
body.maplibre-gameplay-active .game-screen .leaflet-marker-pane,
body.maplibre-gameplay-active .game-screen .leaflet-shadow-pane,
body.maplibre-gameplay-active .game-screen .leaflet-tooltip-pane,
body.maplibre-gameplay-active .game-screen .leaflet-popup-pane,
body.maplibre-gameplay-active .game-screen .leaflet-control-container {
  opacity: 0 !important;
  pointer-events: none !important;
}
body.maplibre-gameplay-active .game-screen .leaflet-container {
  background: #9fd8eb !important;
}
body.maplibre-gameplay-active .game-screen .leaflet-map-pane {
  pointer-events: none !important;
}
body.maplibre-gameplay-active .maplibregl-canvas,
body.maplibre-gameplay-active .maplibregl-canvas-container {
  cursor: grab;
}
body.maplibre-gameplay-active .maplibregl-canvas:active,
body.maplibre-gameplay-active .maplibregl-canvas-container.maplibregl-interactive:active {
  cursor: grabbing;
}
body.maplibre-gameplay-active .maplibregl-ctrl-bottom-right {
  bottom: 40px;
  right: 10px;
}
body.maplibre-gameplay-active .maplibregl-ctrl-group {
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(34, 25, 13, .82) !important;
  border: 1px solid rgba(224, 176, 86, .28) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.22) !important;
}
body.maplibre-gameplay-active .maplibregl-ctrl button {
  background-color: rgba(34, 25, 13, .82) !important;
  color: #f7df9e !important;
}
body.maplibre-gameplay-active .maplibregl-ctrl button span {
  filter: sepia(1) saturate(1.2) brightness(.78);
}
body.maplibre-gameplay-active .maplibregl-ctrl-attrib {
  background: rgba(255,255,255,.72) !important;
  color: rgba(32,42,48,.72) !important;
  border-radius: 10px 0 0 0 !important;
}
.maplibre-game-marker,
.maplibre-hint-label-wrap,
.maplibre-distance-wrap {
  pointer-events: none !important;
  transform-origin: center bottom;
}
body.maplibre-game-camera-moving .maplibre-game-marker,
body.maplibre-game-camera-moving .maplibre-hint-label-wrap,
body.maplibre-game-camera-moving .maplibre-distance-wrap {
  transition: opacity .08s ease;
  opacity: .82;
}
body.maplibre-gameplay-fallback .maplibre-gameplay-map {
  display: none !important;
}

/* v7.0.347 Core Gameplay Flow: stronger signal lock flow, score breakdown, countdown intro and final quest summary. */
.rq-tuning-countdown {
  width: 58px;
  height: 58px;
  margin-top: 10px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  color: #2d1703;
  background: linear-gradient(180deg, rgba(255, 244, 207, .98), rgba(245, 158, 11, .92));
  border: 1px solid rgba(255, 255, 255, .52);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(255,255,255,.18);
  font-weight: 1000;
  font-size: 1.55rem;
  letter-spacing: -.04em;
  animation: rqCountdownPulse .95s ease-in-out infinite;
}
.rq-tuning-countdown.is-go {
  width: auto;
  min-width: 72px;
  padding: 0 14px;
  font-size: 1.18rem;
  letter-spacing: .02em;
}
@keyframes rqCountdownPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.075); }
}
.score-breakdown-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 8px;
}
.score-breakdown-card > div {
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255, 247, 221, .12);
  border: 1px solid rgba(255, 232, 174, .24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.score-breakdown-card span,
.final-run-summary span {
  display: block;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-weight: 900;
  font-size: .68rem;
  color: rgba(255, 241, 205, .76);
}
.score-breakdown-card strong,
.final-run-summary strong {
  display: block;
  margin-top: 4px;
  color: #fff6d8;
  font-size: .96rem;
  line-height: 1.2;
}
.score-breakdown-card small {
  display: block;
  margin-top: 2px;
  color: rgba(255, 232, 174, .78);
  font-weight: 800;
  font-size: .72rem;
}
.reveal-details-expanded {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.final-message {
  display: grid;
  gap: 10px;
  max-width: 760px;
  margin-inline: auto;
}
.final-message > strong {
  display: block;
  color: #fff4d4;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
}
.final-message > span {
  display: block;
  color: rgba(255, 239, 198, .84);
}
.final-run-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.final-run-summary > div {
  min-height: 82px;
  padding: 12px 13px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(60, 34, 8, .52), rgba(22, 13, 4, .48));
  border: 1px solid rgba(255, 214, 130, .22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 26px rgba(0,0,0,.18);
}
body[data-signal-state="danger"] .audio-card,
.game-screen .audio-card[data-signal-state="danger"] {
  box-shadow: 0 0 0 4px rgba(245, 158, 11, .22), 0 22px 48px rgba(0,0,0,.33);
}
body[data-signal-state="danger"] .timer-danger #timerLabel,
body.rq-timer-danger #timerLabel {
  animation: rqCountdownPulse .72s ease-in-out infinite;
}
@media (max-width: 760px) {
  .score-breakdown-card,
  .reveal-details-expanded,
  .final-run-summary {
    grid-template-columns: 1fr;
  }
}

/* v7.0.347 Gameplay Result HUD: preload radio during intro countdown, stabilize gameplay avatar and replace PNG round reveal panel. */
.result-modal.result-solo-reveal {
  left: 22px !important;
  right: auto !important;
  top: 112px !important;
  bottom: auto !important;
  width: min(560px, calc(100vw - 44px)) !important;
  aspect-ratio: auto !important;
  max-height: calc(100vh - 136px) !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
  background: linear-gradient(145deg, rgba(19, 25, 44, .96), rgba(38, 26, 47, .94) 46%, rgba(61, 36, 28, .94)) !important;
  border: 1px solid rgba(255, 212, 139, .32) !important;
  border-radius: 28px !important;
  box-shadow: 0 28px 78px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .13) !important;
  color: #fff7de !important;
}

.result-modal.result-solo-reveal::before {
  content: '' !important;
  position: absolute !important;
  inset: -1px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 202, 93, .22), transparent 38%),
    radial-gradient(circle at 90% 18%, rgba(78, 199, 255, .14), transparent 34%),
    linear-gradient(120deg, rgba(255,255,255,.12), transparent 28%, rgba(255,255,255,.06) 72%, transparent) !important;
  border-radius: inherit !important;
  filter: none !important;
  pointer-events: none !important;
}

.result-modal.result-solo-reveal::after {
  content: '';
  position: absolute;
  left: 22px;
  right: 22px;
  top: 11px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 196, 78, .95), rgba(115, 221, 255, .88), rgba(255, 255, 255, .18));
  box-shadow: 0 0 18px rgba(255, 196, 78, .35);
  pointer-events: none;
}

.result-modal.result-solo-reveal .round-reveal-shell {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 20px !important;
  color: inherit !important;
}

.result-modal.result-solo-reveal .round-reveal-content {
  width: 100% !important;
  height: auto !important;
  display: grid !important;
  grid-template-rows: none !important;
  gap: 12px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.result-modal.result-solo-reveal .round-reveal-topline {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 !important;
  color: rgba(255, 236, 188, .72) !important;
  font-size: .7rem !important;
  font-weight: 1000 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

.result-modal.result-solo-reveal .round-reveal-topline b {
  color: #ffd57a !important;
  font-style: normal !important;
}

.result-modal.result-solo-reveal .round-reveal-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: stretch !important;
}

.result-modal.result-solo-reveal .round-reveal-title {
  min-width: 0 !important;
  padding: 16px 16px 15px !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .075) !important;
  border: 1px solid rgba(255, 255, 255, .11) !important;
}

.result-modal.result-solo-reveal .round-reveal-title span,
.result-modal.result-solo-reveal .round-points span,
.result-modal.result-solo-reveal .reveal-distance span,
.result-modal.result-solo-reveal .reveal-location-card span,
.result-modal.result-solo-reveal .reveal-details span,
.result-modal.result-solo-reveal .score-breakdown-card span {
  display: block !important;
  color: rgba(255, 226, 166, .75) !important;
  font-size: .66rem !important;
  font-weight: 1000 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

.result-modal.result-solo-reveal .round-reveal-title strong {
  display: block !important;
  margin-top: 5px !important;
  color: #fff7de !important;
  font-size: clamp(1.45rem, 3.5vw, 2.05rem) !important;
  line-height: 1 !important;
  text-shadow: 0 8px 22px rgba(0,0,0,.35) !important;
}

.result-modal.result-solo-reveal .round-reveal-title em {
  display: block !important;
  margin-top: 8px !important;
  color: rgba(255, 248, 222, .76) !important;
  font-size: .84rem !important;
  font-style: normal !important;
  line-height: 1.28 !important;
}

.result-modal.result-solo-reveal .round-points {
  min-width: 132px !important;
  display: grid !important;
  align-content: center !important;
  padding: 14px 15px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(255, 199, 86, .24), rgba(255, 255, 255, .07)) !important;
  border: 1px solid rgba(255, 209, 118, .28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 12px 24px rgba(0,0,0,.18) !important;
  text-align: center !important;
}

.result-modal.result-solo-reveal .round-points strong {
  display: block !important;
  margin-top: 5px !important;
  color: #ffd978 !important;
  font-size: 1.65rem !important;
  line-height: 1 !important;
}

.result-modal.result-solo-reveal .reveal-main-grid {
  display: grid !important;
  grid-template-columns: .9fr 1.1fr !important;
  gap: 12px !important;
}

.result-modal.result-solo-reveal .reveal-distance,
.result-modal.result-solo-reveal .reveal-location-card,
.result-modal.result-solo-reveal .reveal-details > div,
.result-modal.result-solo-reveal .score-breakdown-card > div {
  min-width: 0 !important;
  padding: 12px 13px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .072) !important;
  border: 1px solid rgba(255, 255, 255, .105) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.result-modal.result-solo-reveal .reveal-distance strong,
.result-modal.result-solo-reveal .reveal-location-card strong,
.result-modal.result-solo-reveal .reveal-details strong,
.result-modal.result-solo-reveal .score-breakdown-card strong {
  display: block !important;
  margin-top: 5px !important;
  color: #fff7de !important;
  line-height: 1.12 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.result-modal.result-solo-reveal .reveal-distance strong {
  color: #8fe7ff !important;
  font-size: 1.55rem !important;
}

.result-modal.result-solo-reveal .reveal-location-card small,
.result-modal.result-solo-reveal .score-breakdown-card small {
  display: block !important;
  margin-top: 5px !important;
  color: rgba(255, 248, 222, .64) !important;
  font-size: .72rem !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere !important;
}

.result-modal.result-solo-reveal .score-breakdown-card {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
}

.result-modal.result-solo-reveal .reveal-details {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.result-modal.result-solo-reveal .auto-next-note {
  align-self: auto !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border-radius: 999px !important;
  text-align: center !important;
  color: rgba(255, 246, 219, .88) !important;
  font-size: .76rem !important;
  font-weight: 1000 !important;
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  transform: none !important;
}

body.showing-round-result .game-avatar-shell {
  opacity: .55 !important;
  pointer-events: none !important;
  transition: opacity .18s ease !important;
}

@media (max-width: 760px) {
  .result-modal.result-solo-reveal {
    left: 12px !important;
    top: 96px !important;
    width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 112px) !important;
  }
  .result-modal.result-solo-reveal .round-reveal-shell { padding: 14px !important; }
  .result-modal.result-solo-reveal .round-reveal-head,
  .result-modal.result-solo-reveal .reveal-main-grid,
  .result-modal.result-solo-reveal .score-breakdown-card,
  .result-modal.result-solo-reveal .reveal-details {
    grid-template-columns: 1fr !important;
  }
  .result-modal.result-solo-reveal .round-points { min-width: 0 !important; }
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal {
  left: 12px !important;
  right: auto !important;
  top: max(72px, calc(var(--rq-safe-top, 0px) + 58px)) !important;
  width: min(500px, 48vw) !important;
  max-height: calc(100vh - max(92px, calc(var(--rq-safe-top, 0px) + 78px))) !important;
  overflow-y: auto !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .round-reveal-shell {
  padding: 12px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .round-reveal-head,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .reveal-main-grid,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .score-breakdown-card,
body.rq-phone-landscape.showing-round-result.is-playing .result-modal.result-solo-reveal .reveal-details {
  grid-template-columns: 1fr !important;
}

/* v7.0.348 Combo reveal dock: compact bottom bar + right detail card in RadioQuest warm theme */
.result-modal.round-result-hud-combo {
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  overflow: visible !important;
  animation: none !important;
  z-index: 970 !important;
  pointer-events: none !important;
}

.result-modal.round-result-hud-combo .round-result-layout {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.result-modal.round-result-hud-combo .round-result-dock,
.result-modal.round-result-hud-combo .round-result-bar {
  pointer-events: none;
  border-radius: 24px;
  border: 1px solid rgba(240, 200, 120, 0.20);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015) 28%, rgba(0,0,0,.03)),
    linear-gradient(180deg, rgba(52, 31, 18, .90), rgba(14, 10, 12, .92));
  box-shadow: 0 24px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
  color: #f8f1e4;
  backdrop-filter: blur(14px);
}

.result-modal.round-result-hud-combo .round-result-dock {
  position: fixed;
  top: max(86px, calc(env(safe-area-inset-top) + 84px));
  right: 18px;
  width: min(320px, calc(100vw - 36px));
  padding: 14px;
  display: grid;
  gap: 10px;
}

.result-modal.round-result-hud-combo .round-result-dock-head,
.result-modal.round-result-hud-combo .round-result-bar-copy span,
.result-modal.round-result-hud-combo .round-result-bar-stat span,
.result-modal.round-result-hud-combo .round-result-dock-points span,
.result-modal.round-result-hud-combo .round-result-dock-grid span,
.result-modal.round-result-hud-combo .score-breakdown-card span {
  color: rgba(244, 223, 196, .72) !important;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.result-modal.round-result-hud-combo .round-result-dock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.result-modal.round-result-hud-combo .round-result-dock-head b {
  color: #f0c878;
  font-size: .86rem;
}

.result-modal.round-result-hud-combo .round-result-dock-grade {
  display: grid;
  gap: 4px;
  padding: 12px 13px;
  border-radius: 18px;
  border: 1px solid rgba(240, 200, 120, 0.14);
  background: rgba(255,255,255,.045);
}

.result-modal.round-result-hud-combo .round-result-dock-grade em {
  color: #f0c878;
  font-style: normal;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.result-modal.round-result-hud-combo .round-result-dock-grade strong,
.result-modal.round-result-hud-combo .round-result-bar-copy strong {
  color: #fff6e7;
  font-size: clamp(1.2rem, 2.2vw, 1.72rem);
  line-height: .98;
  letter-spacing: -.05em;
}

.result-modal.round-result-hud-combo .round-result-dock-grade small,
.result-modal.round-result-hud-combo .round-result-bar-copy small {
  color: rgba(244, 223, 196, .82);
  font-size: .84rem;
  line-height: 1.35;
}

.result-modal.round-result-hud-combo .round-result-dock-points {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(240, 200, 120, 0.14);
  background: linear-gradient(135deg, rgba(240,200,120,.12), rgba(255,255,255,.04));
}

.result-modal.round-result-hud-combo .round-result-dock-points strong {
  color: #f8f1e4;
  font-size: 1.55rem;
  line-height: 1;
}

.result-modal.round-result-hud-combo .score-breakdown-card {
  display: grid;
  gap: 8px;
}

.result-modal.round-result-hud-combo .score-breakdown-card > div,
.result-modal.round-result-hud-combo .round-result-dock-grid > div,
.result-modal.round-result-hud-combo .round-result-bar-stat {
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(240, 200, 120, 0.12);
  background: rgba(255,255,255,.04);
}

.result-modal.round-result-hud-combo .score-breakdown-card strong,
.result-modal.round-result-hud-combo .round-result-dock-grid strong,
.result-modal.round-result-hud-combo .round-result-bar-stat strong {
  display: block;
  color: #fff6e7;
  font-size: .98rem;
  line-height: 1.1;
  margin-top: 3px;
}

.result-modal.round-result-hud-combo .score-breakdown-card small {
  display: block;
  color: rgba(244, 223, 196, .68);
  margin-top: 3px;
  font-size: .74rem;
}

.result-modal.round-result-hud-combo .round-result-dock-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.result-modal.round-result-hud-combo .round-result-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(760px, calc(100vw - 420px));
  max-width: calc(100vw - 36px);
  min-height: 92px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(110px, .5fr)) auto;
  gap: 10px;
  align-items: stretch;
}

.result-modal.round-result-hud-combo .round-result-bar-copy {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
}

.result-modal.round-result-hud-combo .round-result-bar-copy strong {
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
}

.result-modal.round-result-hud-combo .round-result-bar-copy small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-modal.round-result-hud-combo .round-result-bar-timer {
  align-self: stretch;
  justify-self: end;
  min-width: 150px;
  margin: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 10px 14px;
  border-radius: 18px;
  border: 1px solid rgba(240, 200, 120, 0.18);
  background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(255,255,255,.05));
  color: #fff6e7;
  font-weight: 900;
}

body.showing-round-result .bottom-panel {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.showing-round-result .audio-card {
  opacity: .92;
}

.result-modal.round-result-hud-combo.result-grade-excellent .round-result-dock,
.result-modal.round-result-hud-combo.result-grade-excellent .round-result-bar {
  border-color: rgba(52, 211, 153, 0.28);
  box-shadow: 0 24px 70px rgba(0,0,0,.34), 0 0 0 1px rgba(52, 211, 153, .08) inset;
}

.result-modal.round-result-hud-combo.result-grade-good .round-result-dock,
.result-modal.round-result-hud-combo.result-grade-good .round-result-bar {
  border-color: rgba(240, 200, 120, 0.24);
}

.result-modal.round-result-hud-combo.result-grade-far .round-result-dock,
.result-modal.round-result-hud-combo.result-grade-skipped .round-result-dock,
.result-modal.round-result-hud-combo.result-grade-far .round-result-bar,
.result-modal.round-result-hud-combo.result-grade-skipped .round-result-bar {
  border-color: rgba(249, 115, 22, 0.28);
  box-shadow: 0 24px 70px rgba(0,0,0,.34), 0 0 0 1px rgba(249, 115, 22, .08) inset;
}

@media (max-width: 1180px) {
  .result-modal.round-result-hud-combo .round-result-bar {
    width: min(680px, calc(100vw - 360px));
    grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(96px, .45fr)) auto;
  }
  .result-modal.round-result-hud-combo .round-result-dock {
    width: min(288px, calc(100vw - 28px));
    right: 14px;
  }
}

@media (max-width: 920px) {
  .result-modal.round-result-hud-combo .round-result-dock {
    top: max(78px, calc(env(safe-area-inset-top) + 76px));
    right: 12px;
    width: min(250px, calc(100vw - 24px));
    padding: 12px;
    gap: 8px;
  }

  .result-modal.round-result-hud-combo .round-result-dock-grid {
    grid-template-columns: 1fr;
  }

  .result-modal.round-result-hud-combo .round-result-bar {
    left: 12px;
    right: 12px;
    bottom: 12px;
    transform: none;
    width: auto;
    max-width: none;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) repeat(2, minmax(88px, auto));
  }

  .result-modal.round-result-hud-combo .round-result-bar-timer {
    grid-column: 1 / -1;
    justify-self: stretch;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .result-modal.round-result-hud-combo .round-result-dock {
    top: max(74px, calc(env(safe-area-inset-top) + 72px));
    width: min(220px, calc(100vw - 24px));
  }

  .result-modal.round-result-hud-combo .round-result-bar {
    grid-template-columns: 1fr 1fr;
  }

  .result-modal.round-result-hud-combo .round-result-bar-copy {
    grid-column: 1 / -1;
  }

  .result-modal.round-result-hud-combo .round-result-bar-copy strong {
    font-size: 1.08rem;
  }
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal.round-result-hud-combo {
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal.round-result-hud-combo .round-result-dock {
  top: max(60px, calc(env(safe-area-inset-top) + 58px)) !important;
  right: 8px !important;
  width: min(220px, calc(48vw - 10px)) !important;
  max-height: calc(100dvh - 132px) !important;
  overflow: auto !important;
  border-radius: 16px !important;
  padding: 10px !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal.round-result-hud-combo .round-result-dock-grade strong {
  font-size: .96rem !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal.round-result-hud-combo .round-result-bar {
  left: 8px !important;
  right: 8px !important;
  bottom: 8px !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  border-radius: 16px !important;
  padding: 9px !important;
  grid-template-columns: 1fr auto auto !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal.round-result-hud-combo .round-result-bar-copy {
  grid-column: 1 / -1 !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal.round-result-hud-combo .round-result-bar-copy strong {
  font-size: .96rem !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal.round-result-hud-combo .round-result-bar-copy small {
  font-size: .68rem !important;
}

body.rq-phone-landscape.showing-round-result.is-playing .result-modal.round-result-hud-combo .round-result-bar-timer {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  padding: 8px 10px !important;
}

/* v7.0.349 Premium gameplay polish: result HUD, lock feel, reveal pressure */
.result-modal.round-result-hud-combo.round-result-premium-live .round-result-bar,
.result-modal.round-result-hud-combo.round-result-premium-live .round-result-dock {
  overflow: hidden;
}

.result-modal.round-result-hud-combo.round-result-premium-live .round-result-bar::before,
.result-modal.round-result-hud-combo.round-result-premium-live .round-result-dock::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(240, 200, 120, .13) 44%, rgba(255, 246, 231, .18) 50%, rgba(240, 200, 120, .08) 56%, transparent 100%);
  transform: translateX(-120%);
  animation: rqSignalSweep 2.45s ease-out .08s both;
}

@keyframes rqSignalSweep {
  0% { transform: translateX(-120%); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

.result-modal.round-result-hud-combo.round-result-premium-live .round-result-dock-points strong,
.result-modal.round-result-hud-combo.round-result-premium-live .round-result-bar-stat strong {
  text-shadow: 0 0 22px rgba(240, 200, 120, .28);
}

.result-modal.round-result-hud-combo.result-grade-excellent.round-result-premium-live .round-result-dock-points strong,
.result-modal.round-result-hud-combo.result-grade-excellent.round-result-premium-live .round-result-bar-stat strong {
  color: #c8f7d6 !important;
  text-shadow: 0 0 26px rgba(52, 211, 153, .32);
}

.result-modal.round-result-hud-combo.result-grade-far.round-result-premium-live .round-result-dock-points strong,
.result-modal.round-result-hud-combo.result-grade-skipped.round-result-premium-live .round-result-dock-points strong,
.result-modal.round-result-hud-combo.result-grade-far.round-result-premium-live .round-result-bar-stat strong,
.result-modal.round-result-hud-combo.result-grade-skipped.round-result-premium-live .round-result-bar-stat strong {
  color: #ffd0a3 !important;
  text-shadow: 0 0 24px rgba(249, 115, 22, .30);
}

body.rq-guess-target-ready .bottom-panel {
  border-color: rgba(240, 200, 120, .42) !important;
  box-shadow: 0 20px 66px rgba(0,0,0,.34), 0 0 0 1px rgba(240,200,120,.14) inset, 0 0 34px rgba(240, 160, 64, .13) !important;
}

body.rq-guess-target-ready #guessBtn.ready,
body.rq-guess-target-ready #guessBtn:not(:disabled) {
  box-shadow: 0 0 0 5px rgba(240, 200, 120, .13), 0 14px 36px rgba(240, 160, 64, .24) !important;
}

body.rq-signal-lock-pulse .rq-map-pin-shell.guess .rq-map-pin,
body.rq-signal-lock-pulse .maplibre-guess-marker,
body.rq-signal-lock-pulse .custom-pin.guess {
  animation: rqLockPulse .42s ease-in-out 0s 2;
}

@keyframes rqLockPulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(240, 200, 120, 0)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 18px rgba(240, 200, 120, .58)); transform: scale(1.12); }
}

.stat-time.timer-warning,
body.rq-timer-warning .stat-time {
  border-color: rgba(240, 200, 120, .32) !important;
  box-shadow: 0 16px 44px rgba(0,0,0,.25), 0 0 0 1px rgba(240,200,120,.10) inset !important;
}

.stat-time.timer-hint,
body.rq-timer-hint .stat-time {
  border-color: rgba(245, 158, 11, .42) !important;
  box-shadow: 0 16px 44px rgba(0,0,0,.25), 0 0 28px rgba(245, 158, 11, .15), 0 0 0 1px rgba(245,158,11,.12) inset !important;
}

.stat-time.timer-danger,
body.rq-timer-danger .stat-time {
  border-color: rgba(251, 113, 133, .52) !important;
  box-shadow: 0 16px 44px rgba(0,0,0,.28), 0 0 34px rgba(251, 113, 133, .20), 0 0 0 1px rgba(251,113,133,.14) inset !important;
  animation: rqTimerPulse .58s ease-in-out infinite alternate;
}

@keyframes rqTimerPulse {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-1px) scale(1.035); }
}

body.rq-timer-danger .timer strong,
body.rq-timer-danger .stat-time strong {
  color: #ffd3d9 !important;
  text-shadow: 0 0 18px rgba(251, 113, 133, .42);
}

.result-modal.round-result-hud-combo .round-result-bar-copy small {
  color: rgba(244, 223, 196, .86) !important;
}

/* v7.0.350 Guess Interaction Polish: soft lock, warm signal band, mystery card, active map feedback */
body.rq-guess-target-ready .bottom-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), transparent 44%),
    linear-gradient(135deg, rgba(65, 38, 20, .86), rgba(20, 13, 13, .88)) !important;
}

body.rq-guess-refined .bottom-panel {
  animation: rqSoftTargetRefined .48s ease-out 1;
}

body.rq-guess-refined .rq-map-pin-shell.guess .rq-map-pin,
body.rq-guess-refined .custom-pin.guess,
body.rq-guess-refined .maplibre-game-marker .rq-map-pin.guess {
  animation: rqSoftTargetRefinedPin .56s ease-out 1;
}

@keyframes rqSoftTargetRefined {
  0% { transform: translateX(-50%) translateY(0) scale(1); box-shadow: 0 20px 66px rgba(0,0,0,.34), 0 0 0 1px rgba(240,200,120,.14) inset; }
  42% { transform: translateX(-50%) translateY(-2px) scale(1.012); box-shadow: 0 24px 76px rgba(0,0,0,.36), 0 0 0 1px rgba(240,200,120,.26) inset, 0 0 38px rgba(245,158,11,.20); }
  100% { transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes rqSoftTargetRefinedPin {
  0% { filter: drop-shadow(0 0 0 rgba(240, 200, 120, 0)); transform: scale(1); }
  45% { filter: drop-shadow(0 0 18px rgba(240, 200, 120, .54)); transform: scale(1.14); }
  100% { filter: drop-shadow(0 0 0 rgba(240, 200, 120, 0)); transform: scale(1); }
}

.rq-map-pin-shell.guess.refined .rq-map-pin,
.rq-map-pin.refined {
  box-shadow: 0 0 0 5px rgba(240, 200, 120, .16), 0 14px 32px rgba(0,0,0,.32) !important;
}

body.rq-signal-lock-pulse .rq-map-pin-shell.guess::after,
body.rq-last-second-lock .rq-map-pin-shell.guess::after,
body.rq-timeout-autolock .rq-map-pin-shell.guess::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 34px;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: 2px solid rgba(240, 200, 120, .44);
  transform: translate(-50%, -50%);
  animation: rqLockScanRing .72s ease-out 2;
  pointer-events: none;
}

@keyframes rqLockScanRing {
  from { opacity: .86; transform: translate(-50%, -50%) scale(.28); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}

body.rq-last-second-lock .bottom-panel,
body.rq-timeout-autolock .bottom-panel {
  border-color: rgba(249, 115, 22, .48) !important;
  box-shadow: 0 20px 66px rgba(0,0,0,.36), 0 0 0 1px rgba(249,115,22,.16) inset, 0 0 40px rgba(249,115,22,.20) !important;
}

.rq-hint-circle-reveal .rq-hint-circle-label,
.rq-hint-circle-reveal .maplibre-hint-label-wrap .rq-hint-circle-label {
  animation: rqSignalBandPop .72s ease-out 1;
}

.rq-hint-circle-reveal .rq-hint-circle,
body.rq-hint-circle-reveal path.rq-hint-circle {
  animation: rqSignalBandSweep 1.15s ease-out 1, rqHintCirclePulse 1.45s ease-in-out infinite 1.15s;
}

@keyframes rqSignalBandPop {
  0% { opacity: 0; transform: scale(.88); filter: blur(3px); }
  58% { opacity: 1; transform: scale(1.05); filter: blur(0); }
  100% { transform: scale(1); }
}

@keyframes rqSignalBandSweep {
  0% { opacity: 0; stroke-width: 1; filter: drop-shadow(0 0 0 rgba(251, 191, 36, 0)); }
  55% { opacity: 1; stroke-width: 5; filter: drop-shadow(0 0 22px rgba(251, 191, 36, .44)); }
  100% { opacity: .88; stroke-width: 3; }
}

.rq-round-mystery-card {
  position: fixed;
  left: 50%;
  top: max(86px, calc(env(safe-area-inset-top) + 82px));
  z-index: 995;
  width: min(360px, calc(100vw - 32px));
  padding: 14px 16px;
  border-radius: 22px;
  border: 1px solid rgba(240, 200, 120, .26);
  background:
    linear-gradient(135deg, rgba(245,158,11,.13), transparent 38%),
    linear-gradient(180deg, rgba(55, 32, 18, .93), rgba(13, 10, 12, .94));
  box-shadow: 0 24px 72px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.04) inset;
  color: #fff6e7;
  display: grid;
  gap: 4px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -12px) scale(.96);
  transition: opacity .22s ease, transform .22s ease, filter .22s ease;
  overflow: hidden;
  backdrop-filter: blur(14px);
}

.rq-round-mystery-card.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.rq-round-mystery-card.is-hiding {
  opacity: 0;
  transform: translate(-50%, -8px) scale(.98);
  filter: blur(2px);
}

.rq-round-mystery-card span {
  color: rgba(240, 200, 120, .88);
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.rq-round-mystery-card strong {
  font-size: clamp(1rem, 2vw, 1.28rem);
  letter-spacing: -.035em;
}

.rq-round-mystery-card small {
  color: rgba(244, 223, 196, .74);
  font-weight: 750;
}

.rq-round-mystery-scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0%, rgba(240,200,120,.18) 42%, rgba(255,255,255,.20) 50%, rgba(240,200,120,.10) 58%, transparent 100%);
  transform: translateX(-120%);
  animation: rqMysteryScan 1.05s ease-out infinite;
}

@keyframes rqMysteryScan {
  to { transform: translateX(120%); }
}

body.rq-replay-pulse .audio-card {
  border-color: rgba(240, 200, 120, .36) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.32), 0 0 0 1px rgba(240,200,120,.12) inset, 0 0 38px rgba(245,158,11,.14) !important;
}

body.rq-replay-pulse .wave-orb {
  animation: rqReplayOrbPulse .72s ease-out 1;
}

@keyframes rqReplayOrbPulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(240, 200, 120, 0)); }
  48% { transform: scale(1.12); filter: drop-shadow(0 0 20px rgba(240, 200, 120, .42)); }
  100% { transform: scale(1); }
}

@media (max-width: 920px) {
  .rq-round-mystery-card {
    top: max(74px, calc(env(safe-area-inset-top) + 70px));
    width: min(320px, calc(100vw - 24px));
    padding: 12px 14px;
  }
}

body.rq-phone-landscape .rq-round-mystery-card {
  top: max(58px, calc(env(safe-area-inset-top) + 54px));
  width: min(300px, calc(60vw - 16px));
  padding: 9px 12px;
  border-radius: 16px;
}

body.rq-phone-landscape .rq-round-mystery-card strong {
  font-size: .92rem;
}

/* v7.0.351 Gameplay HUD Warm Polish: mascot anchor, smaller layered audio card, warm command bar, premium top HUD, subtle map atmosphere */

@keyframes rqWarmFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes rqSoftPulse {
  0%, 100% { box-shadow: 0 16px 42px rgba(0,0,0,.22), 0 0 0 1px rgba(240, 200, 120, .08) inset; }
  50% { box-shadow: 0 18px 48px rgba(0,0,0,.28), 0 0 0 1px rgba(240, 200, 120, .12) inset, 0 0 22px rgba(245, 158, 11, .08); }
}
@keyframes rqSignalSweepAmbient {
  0% { transform: translateX(-14%) scaleX(1.05); opacity: .08; }
  50% { opacity: .14; }
  100% { transform: translateX(14%) scaleX(1.08); opacity: .08; }
}
@keyframes rqGoldShimmer {
  0% { transform: translateX(-120%); opacity: 0; }
  18%, 68% { opacity: .22; }
  100% { transform: translateX(140%); opacity: 0; }
}

body.is-playing .map::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(80% 65% at 12% 78%, rgba(245, 158, 11, .10), transparent 62%),
    radial-gradient(54% 44% at 82% 12%, rgba(248, 191, 36, .08), transparent 62%),
    linear-gradient(180deg, rgba(93, 54, 18, .05), rgba(255,255,255,0) 34%, rgba(65, 35, 12, .06));
  opacity: .7;
  z-index: 401;
  animation: rqWarmFloat 14s ease-in-out infinite;
}

body.is-playing .map::after {
  background:
    linear-gradient(112deg, transparent 0%, rgba(248, 191, 36, .08) 46%, rgba(245, 158, 11, .14) 50%, rgba(248, 191, 36, .08) 54%, transparent 100%) !important;
  opacity: .16 !important;
  animation: rqSignalSweepAmbient 12s linear infinite !important;
}

body.is-playing .game-avatar-shell,
body.showing-round-result .game-avatar-shell,
body.showing-round-result .game-avatar3d,
body.showing-round-result .game-avatar-bubble {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

body.is-playing .game-avatar-shell {
  isolation: isolate;
}

body.is-playing .game-avatar-shell::before {
  content: "";
  position: absolute;
  left: 18px;
  bottom: 14px;
  width: 178px;
  height: 42px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(245, 158, 11, .30), rgba(120, 74, 19, .22) 48%, rgba(0,0,0,0) 78%);
  filter: blur(4px);
  z-index: 0;
  animation: rqSoftPulse 5.6s ease-in-out infinite;
}

body.is-playing .game-avatar3d,
body.is-playing .game-avatar3d *,
body.is-playing .game-avatar3d canvas {
  opacity: 1 !important;
  filter: none !important;
}

body.is-playing .game-avatar3d {
  position: relative;
  z-index: 1;
  transform: translateZ(0);
}

body.is-playing .game-avatar-bubble {
  position: relative;
  z-index: 2;
  align-self: center;
  margin-top: 18px !important;
  max-width: 178px;
  padding: 11px 13px !important;
  border-radius: 18px 18px 18px 8px !important;
  border: 1px solid rgba(240, 200, 120, .24) !important;
  background: linear-gradient(180deg, rgba(62, 37, 18, .94), rgba(20, 13, 11, .96)) !important;
  color: #fff4e1 !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05) !important;
  backdrop-filter: blur(12px);
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.22;
}

body.is-playing .game-avatar-bubble::before {
  left: -7px !important;
  top: 20px !important;
  width: 14px !important;
  height: 14px !important;
  background: linear-gradient(180deg, rgba(62, 37, 18, .94), rgba(20, 13, 11, .96)) !important;
  border-left: 1px solid rgba(240, 200, 120, .24) !important;
  border-bottom: 1px solid rgba(240, 200, 120, .24) !important;
}

body.is-playing .game-avatar-bubble::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffd27a, #f59e0b);
  box-shadow: 0 0 12px rgba(245, 158, 11, .36);
}

body.is-playing .top-hud {
  gap: 10px !important;
}

body.is-playing .top-hud .logo-lockup,
body.is-playing .top-hud .mode-badge,
body.is-playing .top-hud .stat {
  border: 1px solid rgba(240, 200, 120, .22) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015) 28%, rgba(0,0,0,.03)),
    linear-gradient(180deg, rgba(66, 39, 21, .92), rgba(22, 15, 12, .94)) !important;
  color: #fff4e1 !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05) !important;
  backdrop-filter: blur(14px);
}

body.is-playing .top-hud .logo-lockup {
  min-height: 54px;
}

body.is-playing .top-hud .logo-dot {
  background: radial-gradient(circle at 35% 35%, #ffd27a, #f59e0b 62%, #7c4a12 100%) !important;
  box-shadow: 0 0 18px rgba(245, 158, 11, .34), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

body.is-playing .top-hud .logo-lockup strong,
body.is-playing .top-hud .mode-badge strong,
body.is-playing .top-hud .stat strong {
  color: #fff7ea !important;
}

body.is-playing .top-hud .logo-lockup small,
body.is-playing .top-hud .mode-badge span,
body.is-playing .top-hud .stat span {
  color: rgba(246, 223, 188, .76) !important;
  letter-spacing: .13em;
}

body.is-playing .top-hud .stat.timer-warning,
body.is-playing .top-hud .stat.timer-hint,
body.is-playing .top-hud .stat.timer-danger {
  animation: rqSoftPulse 1.35s ease-in-out infinite;
}

body.is-playing .audio-card {
  width: min(300px, calc(100vw - 28px)) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: grid !important;
  gap: 8px !important;
}

body.is-playing .audio-card-main,
body.is-playing .audio-card-actions {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(240, 200, 120, .20);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015) 28%, rgba(0,0,0,.03)),
    linear-gradient(180deg, rgba(66, 39, 21, .94), rgba(22, 15, 12, .96));
  box-shadow: 0 18px 48px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
  color: #fff4e1;
  backdrop-filter: blur(14px);
  overflow: hidden;
}

body.is-playing .audio-card-main::after,
body.is-playing .audio-card-actions::after,
body.is-playing .bottom-panel::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -20%;
  width: 42%;
  background: linear-gradient(104deg, transparent 0%, rgba(255,255,255,.04) 40%, rgba(255, 210, 122, .10) 50%, rgba(255,255,255,.04) 60%, transparent 100%);
  pointer-events: none;
  transform: translateX(-120%);
}

body[data-signal-state="locked"] .audio-card-main::after,
body.rq-replay-pulse .audio-card-main::after,
body.rq-guess-target-ready .bottom-panel::after {
  animation: rqGoldShimmer 1.35s ease;
}

body.is-playing .audio-card-main {
  padding: 12px 14px 10px !important;
}

body.is-playing .audio-card-actions {
  padding: 8px !important;
}

body.is-playing .audio-card-headline {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

body.is-playing .audio-copy {
  min-width: 0;
}

body.is-playing .audio-copy-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

body.is-playing .audio-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(240, 200, 120, .18);
  background: rgba(255,255,255,.04);
  color: #f6d7a7;
  font-size: .63rem;
  font-weight: 1000;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.is-playing #audioSubStatus {
  display: block;
  min-width: 0;
  color: rgba(246, 223, 188, .66);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: right;
}

body.is-playing .audio-card .wave-orb {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(255, 210, 122, .92), rgba(245, 158, 11, .82)) !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, .25), inset 0 1px 0 rgba(255,255,255,.2) !important;
}

body.is-playing .audio-card .wave-orb::before,
body.is-playing .audio-card .wave-orb::after {
  border-color: rgba(245, 158, 11, .34) !important;
}

body.is-playing .audio-copy h2 {
  margin: 0 0 3px !important;
  color: #fff7ea !important;
  font-size: 1.08rem !important;
  letter-spacing: -.02em;
}

body.is-playing .audio-copy p {
  margin: 0 !important;
  color: rgba(255, 244, 225, .9) !important;
  font-size: .84rem !important;
  line-height: 1.28 !important;
  min-height: 2.3em;
}

body.is-playing .audio-card audio {
  width: 100%;
  margin: 0 !important;
  border-radius: 14px;
  background: rgba(255,255,255,.96);
}

body.is-playing .audio-card .actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

body.is-playing .audio-card .actions-row .secondary-btn {
  min-width: 0;
  padding: 9px 10px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(240, 200, 120, .16) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), rgba(31, 22, 19, .88) !important;
  color: #fff2dc !important;
  box-shadow: none !important;
  font-size: .78rem !important;
}

body.is-playing .audio-card .actions-row .secondary-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(240, 200, 120, .26) !important;
}

body[data-signal-state="locked"] .audio-card-main {
  border-color: rgba(240, 200, 120, .28);
}

body[data-signal-state="danger"] .audio-card-main,
body[data-signal-state="danger"] .bottom-panel {
  border-color: rgba(249, 115, 22, .32) !important;
}

body.is-playing .bottom-panel {
  position: fixed;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  width: min(560px, calc(100vw - 34px)) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  overflow: visible !important;
}

body.is-playing .bottom-panel .guess-copy,
body.is-playing .bottom-panel .primary-btn {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(240, 200, 120, .20) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015) 28%, rgba(0,0,0,.03)),
    linear-gradient(180deg, rgba(66, 39, 21, .94), rgba(22, 15, 12, .96)) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05) !important;
  color: #fff4e1 !important;
  backdrop-filter: blur(14px);
}

body.is-playing .bottom-panel .guess-copy {
  padding: 12px 16px !important;
}

body.is-playing .bottom-panel .guess-copy span {
  display: block;
  margin-bottom: 5px;
  color: rgba(246, 223, 188, .72) !important;
  font-size: .65rem !important;
  font-weight: 1000 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
}

body.is-playing .bottom-panel .guess-copy strong {
  display: block;
  color: #fff7ea !important;
  font-size: .98rem !important;
  line-height: 1.18 !important;
}

body.is-playing .bottom-panel .guess-copy small {
  display: block;
  margin-top: 5px;
  color: rgba(246, 223, 188, .7);
  font-size: .73rem;
  line-height: 1.2;
}

body.is-playing .bottom-panel .primary-btn {
  min-width: 178px;
  padding: 0 20px !important;
  font-size: .92rem !important;
  font-weight: 1000 !important;
  letter-spacing: .02em;
  color: #fff7ea !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease !important;
}

body.is-playing .bottom-panel .primary-btn:not(:disabled) {
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 26%, rgba(0,0,0,.02)), linear-gradient(135deg, #a96816, #f0b24e) !important;
  border-color: rgba(255, 210, 122, .46) !important;
  color: #24180e !important;
  box-shadow: 0 18px 40px rgba(245, 158, 11, .20), inset 0 1px 0 rgba(255,255,255,.35) !important;
}

body.is-playing .bottom-panel .primary-btn:not(:disabled):hover {
  transform: translateY(-1px);
  filter: saturate(1.04);
}

body.is-playing .bottom-panel .primary-btn:disabled,
body.is-playing .bottom-panel .primary-btn.is-disabled {
  background: linear-gradient(180deg, rgba(62, 44, 29, .92), rgba(31, 22, 19, .96)) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: rgba(246, 223, 188, .52) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.02) !important;
}

body.rq-guess-refined .bottom-panel .guess-copy {
  animation: rqWarmFloat .58s ease;
}

body.rq-last-second-lock .bottom-panel .primary-btn:not(:disabled),
body.rq-timeout-autolock .bottom-panel .primary-btn:not(:disabled) {
  animation: rqSoftPulse 1.1s ease-in-out infinite;
}

@media (max-width: 920px) {
  body.is-playing .audio-card {
    width: min(270px, calc(100vw - 18px)) !important;
    gap: 6px !important;
  }
  body.is-playing .audio-card-main {
    padding: 10px 11px 9px !important;
  }
  body.is-playing .audio-card .wave-orb {
    width: 38px !important;
    height: 38px !important;
  }
  body.is-playing .audio-copy h2 {
    font-size: .96rem !important;
  }
  body.is-playing .audio-copy p {
    font-size: .76rem !important;
    min-height: 2.1em;
  }
  body.is-playing .audio-card .actions-row .secondary-btn {
    font-size: .72rem !important;
    padding: 8px 9px !important;
  }
  body.is-playing .bottom-panel {
    width: calc(100vw - 16px) !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  body.is-playing .bottom-panel .primary-btn {
    min-width: 0;
    min-height: 52px;
  }
  body.is-playing .game-avatar-bubble {
    max-width: 150px;
    margin-top: 10px !important;
    font-size: .78rem !important;
  }
}

body.rq-phone-landscape.is-playing .audio-card {
  gap: 6px !important;
  width: 218px !important;
}

body.rq-phone-landscape.is-playing .audio-card-main {
  padding: 8px 9px 8px !important;
  border-radius: 15px !important;
}

body.rq-phone-landscape.is-playing .audio-card-actions {
  padding: 6px !important;
  border-radius: 14px !important;
}

body.rq-phone-landscape.is-playing .audio-card-headline {
  grid-template-columns: 34px 1fr !important;
  gap: 7px !important;
  margin-bottom: 6px !important;
}

body.rq-phone-landscape.is-playing .audio-card .wave-orb {
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
}

body.rq-phone-landscape.is-playing #audioSubStatus {
  font-size: .54rem !important;
}

body.rq-phone-landscape.is-playing .audio-copy h2 {
  font-size: .78rem !important;
}

body.rq-phone-landscape.is-playing .audio-copy p {
  font-size: .66rem !important;
  min-height: 1.9em !important;
}

body.rq-phone-landscape.is-playing .audio-card .actions-row .secondary-btn {
  font-size: .60rem !important;
  padding: 5px 6px !important;
}

body.rq-phone-landscape.is-playing .game-avatar-shell::before {
  width: 110px;
  height: 24px;
  left: 6px;
  bottom: 10px;
}

body.rq-phone-landscape.is-playing .game-avatar-bubble {
  max-width: 126px !important;
  margin-top: 12px !important;
  padding: 7px 8px !important;
  font-size: .66rem !important;
}

body.rq-phone-landscape.is-playing .bottom-panel .guess-copy {
  padding: 9px 12px !important;
}

body.rq-phone-landscape.is-playing .bottom-panel .guess-copy strong {
  font-size: .84rem !important;
}

body.rq-phone-landscape.is-playing .bottom-panel .guess-copy small {
  font-size: .62rem !important;
}

body.rq-phone-landscape.is-playing .bottom-panel .primary-btn {
  min-height: 44px !important;
  font-size: .74rem !important;
}

/* v7.0.352 Warm HUD Settling + 10k scoring: lower-left radio card, calmer status surfaces, and score scaling bump */
body.is-playing .audio-copy p,
body.is-playing .game-avatar-bubble,
body.is-playing .bottom-panel .guess-copy strong,
body.is-playing .bottom-panel .guess-copy small {
  transition: opacity .18s ease, transform .18s ease, color .18s ease;
}

body.is-playing .audio-copy p {
  min-height: 2.7em;
}

body.is-playing .game-avatar-bubble {
  min-height: 62px;
}

@media (min-width: 921px) {
  body.is-playing .audio-card {
    left: 18px !important;
    right: auto !important;
    top: auto !important;
    bottom: 18px !important;
    width: min(300px, 24vw) !important;
  }

  body.is-playing .audio-card-main {
    min-height: 132px;
  }

  body.is-playing .game-avatar-shell {
    bottom: 248px !important;
  }
}

@media (max-width: 920px) and (orientation: landscape) {
  body.is-playing .audio-card {
    top: auto !important;
    bottom: max(6px, env(safe-area-inset-bottom)) !important;
    left: max(6px, env(safe-area-inset-left)) !important;
  }
}

/* v7.0.353 Custom Radio Player + Economy Feel */
body.is-playing .audio-card-main {
  min-height: 0 !important;
}

body.is-playing .audio-card audio {
  display: none !important;
}

.custom-radio-player {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 38px 92px;
  gap: 8px;
  align-items: center;
  padding: 10px 10px 8px;
  border-radius: 18px;
  border: 1px solid rgba(240, 200, 120, .14);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018)), rgba(24, 18, 14, .62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.radio-main-btn,
.radio-icon-btn {
  appearance: none;
  border: 1px solid rgba(240, 200, 120, .18);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)), rgba(38, 27, 18, .92);
  color: #fff6e7;
  border-radius: 14px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease;
}

.radio-main-btn {
  width: 44px;
  height: 44px;
  font-size: 1.05rem;
  font-weight: 1000;
  box-shadow: 0 10px 24px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.08);
}

.radio-icon-btn {
  width: 38px;
  height: 38px;
  font-size: .96rem;
}

.radio-main-btn:hover,
.radio-icon-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(240, 200, 120, .3);
}

.custom-radio-player.is-playing .radio-main-btn {
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)), linear-gradient(135deg, #b36b18, #f0b24e);
  color: #24180e;
  border-color: rgba(255, 210, 122, .42);
  box-shadow: 0 14px 30px rgba(245, 158, 11, .22), inset 0 1px 0 rgba(255,255,255,.24);
}

.radio-player-copy {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.radio-player-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.radio-live-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(240, 200, 120, .18);
  background: rgba(255,255,255,.05);
  color: #f5d39c;
  font-size: .58rem;
  font-weight: 1000;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.custom-radio-player.is-playing .radio-live-pill {
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02)), rgba(245, 158, 11, .16);
  color: #fff7ea;
}

#radioTimeLabel {
  color: #fff4e1;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.radio-signal-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}

.radio-signal-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 18%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(245, 158, 11, .86), rgba(255, 210, 122, .96));
  box-shadow: 0 0 18px rgba(245, 158, 11, .26);
  transition: width .38s ease;
}

.radio-volume-slider {
  width: 100%;
  accent-color: #f0b24e;
  cursor: pointer;
}

.audio-card-main[data-signal-state="danger"] .custom-radio-player,
body[data-signal-state="danger"] .custom-radio-player {
  border-color: rgba(249, 115, 22, .24);
}

.economy-pulse-card {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border-radius: 18px;
  border: 1px solid rgba(240, 200, 120, .16);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)), rgba(38, 27, 18, .52);
}

.economy-pulse-card span {
  color: rgba(246, 223, 188, .72);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.economy-pulse-card strong {
  color: #fff7ea;
  font-size: 1rem;
  line-height: 1.12;
}

.economy-pulse-card small {
  color: rgba(246, 223, 188, .72);
  font-size: .73rem;
  line-height: 1.25;
}

.reward-pace-stat strong {
  white-space: nowrap;
}

.final-message .economy-pulse-card {
  margin-top: 12px;
}

@media (max-width: 920px) {
  .custom-radio-player {
    grid-template-columns: 40px minmax(0, 1fr) 34px 78px;
    gap: 6px;
    padding: 9px 9px 7px;
  }

  .radio-main-btn {
    width: 40px;
    height: 40px;
  }

  .radio-icon-btn {
    width: 34px;
    height: 34px;
  }
}

body.rq-phone-landscape.is-playing .custom-radio-player {
  grid-template-columns: 34px minmax(0, 1fr) 28px 62px !important;
  gap: 5px !important;
  padding: 6px 7px !important;
  border-radius: 13px !important;
}

body.rq-phone-landscape.is-playing .radio-main-btn {
  width: 34px !important;
  height: 34px !important;
  font-size: .86rem !important;
}

body.rq-phone-landscape.is-playing .radio-icon-btn {
  width: 28px !important;
  height: 28px !important;
  font-size: .74rem !important;
}

body.rq-phone-landscape.is-playing .radio-live-pill {
  min-width: 40px !important;
  font-size: .5rem !important;
  padding: 3px 6px !important;
}

body.rq-phone-landscape.is-playing #radioTimeLabel {
  font-size: .66rem !important;
}

/* v7.0.354 Compact Radio UI Cleanup: lighter radio strip, minimized result radio, calmer reward text */
body.is-playing .audio-card {
  width: min(280px, 22vw) !important;
  gap: 6px !important;
}

body.is-playing .audio-card-main {
  padding: 9px 10px 8px !important;
  border-radius: 20px !important;
}

body.is-playing .audio-card-actions {
  padding: 6px !important;
  border-radius: 17px !important;
}

body.is-playing .audio-card-headline {
  grid-template-columns: 36px minmax(0, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 7px !important;
}

body.is-playing .audio-card .wave-orb {
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
}

body.is-playing .audio-copy-top {
  margin-bottom: 3px !important;
}

body.is-playing .audio-pill {
  padding: 3px 7px !important;
  font-size: .56rem !important;
}

body.is-playing #audioSubStatus {
  font-size: .55rem !important;
  opacity: .74;
}

body.is-playing .audio-copy h2 {
  font-size: .94rem !important;
  margin-bottom: 2px !important;
}

body.is-playing .audio-copy p {
  min-height: 1.25em !important;
  font-size: .74rem !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-radio-player {
  grid-template-columns: 36px minmax(0, 1fr) 32px !important;
  gap: 7px !important;
  padding: 7px !important;
  border-radius: 15px !important;
}

.radio-main-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  font-size: .88rem !important;
}

.radio-icon-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 11px !important;
  font-size: .82rem !important;
}

.radio-player-copy {
  gap: 5px !important;
}

.radio-live-pill {
  min-width: 42px !important;
  padding: 3px 7px !important;
  font-size: .52rem !important;
}

#radioTimeLabel {
  font-size: .7rem !important;
}

.radio-signal-track {
  height: 6px !important;
}

.radio-volume-slider {
  display: none !important;
}

body.is-playing .audio-card .actions-row {
  gap: 6px !important;
}

body.is-playing .audio-card .actions-row .secondary-btn {
  padding: 7px 8px !important;
  border-radius: 13px !important;
  font-size: .70rem !important;
}

body.showing-round-result.is-playing .audio-card {
  width: 230px !important;
  opacity: .94 !important;
}

body.showing-round-result.is-playing .audio-card .audio-card-headline {
  display: none !important;
}

body.showing-round-result.is-playing .audio-card-main {
  padding: 7px !important;
}

body.showing-round-result.is-playing .audio-card-actions {
  display: none !important;
}

body.showing-round-result.is-playing .custom-radio-player {
  grid-template-columns: 32px minmax(0, 1fr) !important;
  padding: 6px !important;
}

body.showing-round-result.is-playing .radio-icon-btn {
  display: none !important;
}

body.showing-round-result.is-playing .radio-main-btn {
  width: 32px !important;
  height: 32px !important;
}

.economy-pulse-card.no-rc-yet {
  border-color: rgba(240, 200, 120, .11);
  background: rgba(38, 27, 18, .38);
}

.economy-pulse-card.no-rc-yet strong {
  color: #f6d7a7;
}

.reward-pace-stat strong {
  font-size: .9rem !important;
}

@media (max-width: 920px) {
  body.is-playing .audio-card {
    width: min(248px, calc(100vw - 18px)) !important;
  }

  .custom-radio-player {
    grid-template-columns: 34px minmax(0, 1fr) 30px !important;
  }
}

body.rq-phone-landscape.is-playing .audio-card {
  width: 200px !important;
}

body.rq-phone-landscape.is-playing .custom-radio-player {
  grid-template-columns: 30px minmax(0, 1fr) 26px !important;
}

body.rq-phone-landscape.is-playing .radio-volume-slider {
  display: none !important;
}


/* v7.0.355 Result de-duplication + richer mini radio: remove bottom reveal bar, keep the dock primary, and make post-lock radio less tiny. */
.result-modal.round-result-hud-combo .round-result-dock {
  gap: 11px;
}

.result-modal.round-result-hud-combo .round-result-dock-timer {
  margin: 0;
  display: grid;
  place-items: center;
  min-height: 48px;
  padding: 11px 14px;
  border-radius: 18px;
  border: 1px solid rgba(240, 200, 120, 0.16);
  background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(255,255,255,.04));
  color: #fff6e7;
  text-align: center;
  font-size: .9rem;
  font-weight: 900;
}

body.showing-round-result.is-playing .audio-card {
  width: min(258px, calc(100vw - 24px)) !important;
  opacity: .96 !important;
}

body.showing-round-result.is-playing .audio-card .audio-card-headline {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 7px !important;
  margin-bottom: 6px !important;
}

body.showing-round-result.is-playing .audio-card .wave-orb {
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
}

body.showing-round-result.is-playing .audio-card .audio-copy h2 {
  font-size: .82rem !important;
  margin-bottom: 1px !important;
}

body.showing-round-result.is-playing .audio-card .audio-copy p {
  min-height: 1.1em !important;
  font-size: .68rem !important;
}

body.showing-round-result.is-playing .audio-card-main {
  padding: 8px 8px 7px !important;
}

body.showing-round-result.is-playing .audio-card-actions {
  display: none !important;
}

body.showing-round-result.is-playing .custom-radio-player {
  grid-template-columns: 32px minmax(0, 1fr) 28px !important;
  gap: 6px !important;
  padding: 6px !important;
}

body.showing-round-result.is-playing .radio-main-btn {
  width: 32px !important;
  height: 32px !important;
}

body.showing-round-result.is-playing .radio-icon-btn {
  display: grid !important;
  width: 28px !important;
  height: 28px !important;
  font-size: .74rem !important;
}

body.showing-round-result.is-playing .radio-live-pill {
  min-width: 39px !important;
  font-size: .49rem !important;
}

body.showing-round-result.is-playing #radioTimeLabel {
  font-size: .66rem !important;
}

@media (max-width: 920px) {
  body.showing-round-result.is-playing .audio-card {
    width: min(232px, calc(100vw - 18px)) !important;
  }

  .result-modal.round-result-hud-combo .round-result-dock-timer {
    min-height: 44px;
    font-size: .84rem;
  }
}


/* v7.0.356 Final Result Text Polish: calmer post-lock radio copy and slightly shorter right result dock. */
.result-modal.round-result-hud-combo .round-result-dock {
  padding: 12px !important;
  gap: 8px !important;
  width: min(302px, calc(100vw - 36px)) !important;
}

.result-modal.round-result-hud-combo .round-result-dock-grade {
  padding: 10px 11px !important;
  border-radius: 16px !important;
}

.result-modal.round-result-hud-combo .round-result-dock-grade strong {
  font-size: clamp(1.06rem, 1.8vw, 1.46rem) !important;
}

.result-modal.round-result-hud-combo .round-result-dock-grade small {
  font-size: .78rem !important;
  line-height: 1.25 !important;
}

.result-modal.round-result-hud-combo .round-result-dock-points,
.result-modal.round-result-hud-combo .economy-pulse-card,
.result-modal.round-result-hud-combo .score-breakdown-card > div,
.result-modal.round-result-hud-combo .round-result-dock-grid > div {
  padding: 8px 10px !important;
  border-radius: 15px !important;
}

.result-modal.round-result-hud-combo .round-result-dock-points strong {
  font-size: 1.36rem !important;
}

.result-modal.round-result-hud-combo .score-breakdown-card,
.result-modal.round-result-hud-combo .round-result-dock-grid {
  gap: 6px !important;
}

.result-modal.round-result-hud-combo .score-breakdown-card strong,
.result-modal.round-result-hud-combo .round-result-dock-grid strong {
  font-size: .88rem !important;
}

.result-modal.round-result-hud-combo .economy-pulse-card strong {
  font-size: .92rem !important;
}

.result-modal.round-result-hud-combo .economy-pulse-card small {
  font-size: .68rem !important;
}

.result-modal.round-result-hud-combo .round-result-dock-timer {
  min-height: 42px !important;
  padding: 9px 12px !important;
  border-radius: 15px !important;
  font-size: .84rem !important;
}

body.showing-round-result.is-playing .audio-card .audio-copy p {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* v7.0.357 Companion Bubble Hold: keep the latest meaningful mascot message instead of snapping back to generic idle copy. */

/* v7.0.358 Final Screen Warm Compact Polish: bring final results in line with warm gameplay UI and reduce scroll pressure. */
.final-screen {
  width: min(100% - 32px, 1120px) !important;
  padding: 24px 0 40px !important;
  gap: 18px !important;
}

.final-hero-card {
  width: min(100%, 860px) !important;
  margin-inline: auto !important;
  padding: 22px 28px 24px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(240, 200, 120, .20) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014) 26%, rgba(0,0,0,.04)),
    linear-gradient(180deg, rgba(52, 31, 18, .86), rgba(14, 10, 12, .91)) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.055) !important;
  backdrop-filter: blur(15px) !important;
}

.final-screen .brand-pill {
  margin-bottom: 10px !important;
  border-color: rgba(240, 200, 120, .24) !important;
  background: rgba(245, 158, 11, .12) !important;
  color: #f6d7a7 !important;
  box-shadow: none !important;
}

.final-hero-card h1 {
  margin: 0 !important;
  font-size: clamp(2.1rem, 4.7vw, 3.9rem) !important;
  line-height: .96 !important;
  letter-spacing: -.07em !important;
  color: #fff4df !important;
}

.final-score {
  margin: 8px auto 6px !important;
  font-size: clamp(4.1rem, 8.2vw, 6.8rem) !important;
  line-height: .9 !important;
  letter-spacing: -.09em !important;
  background: linear-gradient(180deg, #fff1c6 0%, #f7bc55 48%, #f59e0b 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: 0 18px 46px rgba(245,158,11,.12) !important;
}

.final-message {
  gap: 7px !important;
  max-width: 760px !important;
}

.final-message > strong {
  color: #fff6e7 !important;
  font-size: clamp(1.08rem, 2vw, 1.35rem) !important;
}

.final-message > span {
  color: rgba(246, 223, 188, .84) !important;
  font-size: .94rem !important;
}

.final-message .economy-pulse-card {
  width: min(100%, 360px) !important;
  margin: 8px auto 0 !important;
  padding: 9px 12px !important;
  border-radius: 18px !important;
}

.final-message .economy-pulse-card strong {
  font-size: .96rem !important;
}

.final-message .economy-pulse-card small {
  font-size: .74rem !important;
}

.final-run-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

.final-run-summary > div {
  min-height: 58px !important;
  padding: 9px 11px !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(60, 34, 8, .38), rgba(20, 12, 5, .42)) !important;
  border-color: rgba(240, 200, 120, .16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.final-run-summary span {
  font-size: .59rem !important;
  letter-spacing: .13em !important;
  color: rgba(246, 223, 188, .72) !important;
}

.final-run-summary strong {
  margin-top: 3px !important;
  font-size: .86rem !important;
  line-height: 1.18 !important;
  color: #fff6e7 !important;
}

.save-status {
  width: min(100%, 680px) !important;
  margin: 12px auto 0 !important;
  display: grid !important;
  gap: 3px !important;
  place-items: center !important;
  padding: 10px 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(52, 211, 153, .18) !important;
  background: linear-gradient(180deg, rgba(52, 211, 153, .08), rgba(255,255,255,.02)) !important;
  color: #d7ffe8 !important;
  font-size: .86rem !important;
  line-height: 1.25 !important;
}

.save-status::before {
  display: none !important;
}

.save-status .save-status-label {
  color: #86efac !important;
  font-size: .62rem !important;
  font-weight: 1000 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
}

.save-status strong {
  color: #ecfff3 !important;
  font-size: .92rem !important;
}

.save-status small {
  color: rgba(215, 255, 232, .72) !important;
  font-size: .74rem !important;
}

.final-actions {
  margin-top: 14px !important;
  gap: 10px !important;
}

.final-actions .primary-btn {
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)), linear-gradient(135deg, #b36b18, #f0b24e) !important;
  color: #24180e !important;
  border-color: rgba(255, 210, 122, .44) !important;
  box-shadow: 0 16px 38px rgba(245, 158, 11, .18), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

.final-actions .secondary-btn {
  border-color: rgba(240, 200, 120, .18) !important;
  color: #fff4df !important;
  background: rgba(31, 22, 19, .72) !important;
}

.final-columns {
  width: min(100%, 980px) !important;
  margin: 0 auto !important;
  gap: 16px !important;
  align-items: start !important;
}

.final-columns .profile-card,
.final-columns .leaderboard-card {
  border-color: rgba(240, 200, 120, .14) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
    linear-gradient(180deg, rgba(28, 22, 18, .88), rgba(10, 9, 10, .90)) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.profile-level-row span {
  color: #86efac !important;
}

@media (min-width: 1020px) and (max-height: 940px) {
  .final-screen {
    padding-top: 14px !important;
    gap: 14px !important;
  }

  .final-hero-card {
    padding: 18px 26px 19px !important;
  }

  .final-score {
    font-size: clamp(3.65rem, 7.2vw, 5.6rem) !important;
    margin: 5px auto 4px !important;
  }

  .final-run-summary > div {
    min-height: 52px !important;
    padding: 8px 10px !important;
  }

  .save-status {
    margin-top: 9px !important;
    padding: 8px 12px !important;
  }

  .final-actions {
    margin-top: 10px !important;
  }
}

@media (max-width: 760px) {
  .final-screen {
    width: min(100% - 18px, 680px) !important;
    padding-top: 16px !important;
  }

  .final-hero-card {
    padding: 18px 16px 20px !important;
  }

  .final-run-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .final-columns {
    grid-template-columns: 1fr !important;
  }
}

/* v7.0.359 Final Score + Leaderboard Layout: score left, leaderboard right, no profile card on final screen. */
.final-screen {
  width: min(100% - 32px, 1280px) !important;
  padding: 22px 0 34px !important;
  gap: 0 !important;
}

.final-results-layout {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: 18px;
  align-items: start;
  margin: 0 auto;
}

.final-results-layout .final-hero-card,
.final-results-layout .final-leaderboard-card {
  margin: 0 !important;
  width: 100% !important;
  min-width: 0;
}

.final-results-layout .final-hero-card {
  padding: 20px 24px 21px !important;
}

.final-results-layout .final-leaderboard-card {
  min-height: 0;
  max-height: calc(100vh - 78px);
  overflow: hidden;
  border-color: rgba(240, 200, 120, .16) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
    linear-gradient(180deg, rgba(28, 22, 18, .88), rgba(10, 9, 10, .90)) !important;
  box-shadow: 0 22px 62px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.final-results-layout .leaderboard-card-head {
  margin-bottom: 12px !important;
}

.final-results-layout .leaderboard-card-head h2 {
  color: #fff4df !important;
}

.final-results-layout .leaderboard-select {
  border-color: rgba(240, 200, 120, .18) !important;
  background-color: rgba(31, 22, 19, .78) !important;
  color: #fff4df !important;
}

.final-results-layout .leaderboard-list {
  max-height: calc(100vh - 188px);
  overflow: auto;
  padding-right: 4px;
}

.final-results-layout .leaderboard-row {
  border-color: rgba(240, 200, 120, .10) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), rgba(20, 14, 12, .54) !important;
}

.final-results-layout .leaderboard-row:first-child {
  border-color: rgba(240, 200, 120, .34) !important;
  background: linear-gradient(180deg, rgba(245,158,11,.10), rgba(255,255,255,.02)), rgba(26, 18, 13, .66) !important;
}

.final-columns,
.final-screen .profile-card {
  display: none !important;
}

@media (min-width: 1020px) and (max-height: 940px) {
  .final-results-layout .final-hero-card {
    padding: 17px 22px 18px !important;
  }

  .final-results-layout .final-leaderboard-card {
    max-height: calc(100vh - 58px);
  }

  .final-results-layout .leaderboard-list {
    max-height: calc(100vh - 166px);
  }
}

@media (max-width: 980px) {
  .final-screen {
    width: min(100% - 18px, 760px) !important;
    padding-top: 16px !important;
  }

  .final-results-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .final-results-layout .final-leaderboard-card,
  .final-results-layout .leaderboard-list {
    max-height: none;
  }
}

/* v7.0.360 Final Layout Alignment Polish: balanced score/leaderboard columns, compact score card, reward strip and clearer player rank. */
.final-screen {
  width: min(100% - 28px, 1360px) !important;
  padding: 18px 0 28px !important;
}

.final-results-layout {
  grid-template-columns: minmax(500px, .96fr) minmax(460px, 1.04fr) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

.final-results-layout .final-hero-card {
  padding: 17px 22px 18px !important;
  border-radius: 25px !important;
  display: grid !important;
  align-content: start !important;
}

.final-results-layout .final-leaderboard-card {
  min-height: 100% !important;
  padding: 17px 18px 18px !important;
  border-radius: 25px !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.final-screen .brand-pill {
  margin-bottom: 8px !important;
  padding: 6px 12px !important;
  font-size: .64rem !important;
}

.final-hero-card h1 {
  font-size: clamp(1.9rem, 4vw, 3.25rem) !important;
}

.final-score {
  margin: 4px auto 4px !important;
  font-size: clamp(3.55rem, 7vw, 5.5rem) !important;
}

.final-message {
  gap: 5px !important;
}

.final-message > strong {
  font-size: clamp(1rem, 1.7vw, 1.22rem) !important;
}

.final-message > span {
  font-size: .86rem !important;
}

.final-message .economy-pulse-card {
  width: min(100%, 460px) !important;
  margin: 7px auto 0 !important;
  padding: 8px 13px !important;
  border-radius: 16px !important;
  grid-template-columns: auto 1fr !important;
  align-items: center !important;
  text-align: left !important;
  column-gap: 12px !important;
  row-gap: 1px !important;
}

.final-message .economy-pulse-card span {
  grid-row: 1 / 3 !important;
  align-self: center !important;
  padding: 5px 8px !important;
  border-radius: 999px !important;
  background: rgba(245, 158, 11, .10) !important;
  border: 1px solid rgba(240, 200, 120, .14) !important;
  white-space: nowrap !important;
}

.final-message .economy-pulse-card strong {
  font-size: .9rem !important;
}

.final-message .economy-pulse-card small {
  font-size: .68rem !important;
}

.final-run-summary {
  gap: 7px !important;
  margin-top: 8px !important;
}

.final-run-summary > div {
  min-height: 48px !important;
  padding: 7px 9px !important;
  border-radius: 14px !important;
}

.final-run-summary span {
  font-size: .54rem !important;
}

.final-run-summary strong {
  font-size: .8rem !important;
}

.save-status {
  margin-top: 8px !important;
  padding: 8px 12px !important;
  border-radius: 16px !important;
}

.save-status .save-status-label {
  font-size: .58rem !important;
}

.save-status strong {
  font-size: .86rem !important;
}

.save-status small {
  font-size: .68rem !important;
}

.final-actions {
  margin-top: 9px !important;
}

.final-actions .primary-btn,
.final-actions .secondary-btn {
  min-height: 44px !important;
  padding: 0 18px !important;
}

.final-results-layout .leaderboard-card-head {
  margin-bottom: 10px !important;
}

.final-results-layout .leaderboard-card-head h2 {
  font-size: clamp(1.35rem, 2.1vw, 1.85rem) !important;
}

.final-results-layout .leaderboard-list {
  display: grid !important;
  gap: 9px !important;
  align-content: start !important;
  max-height: calc(100vh - 156px) !important;
}

.final-results-layout .leaderboard-row {
  min-height: 72px !important;
  padding: 11px 13px !important;
  border-radius: 16px !important;
}

.final-results-layout .leaderboard-row.with-avatar > strong:first-child {
  min-width: 34px !important;
}

.final-results-layout .leaderboard-row.is-you {
  border-color: rgba(245, 158, 11, .48) !important;
  background:
    linear-gradient(180deg, rgba(245, 158, 11, .16), rgba(255,255,255,.025)),
    rgba(32, 22, 14, .78) !important;
  box-shadow: 0 14px 36px rgba(245, 158, 11, .10), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

.leaderboard-you-chip {
  display: inline-flex;
  align-items: center;
  margin-left: 7px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(240, 200, 120, .28);
  background: rgba(245, 158, 11, .14);
  color: #f6d7a7;
  font-size: .58rem;
  font-style: normal;
  font-weight: 1000;
  letter-spacing: .12em;
  vertical-align: middle;
}

.final-your-rank-strip {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(245, 158, 11, .30);
  background:
    linear-gradient(180deg, rgba(245, 158, 11, .14), rgba(255,255,255,.025)),
    rgba(32, 22, 14, .72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.final-your-rank-strip span {
  color: rgba(246, 223, 188, .74);
  font-size: .62rem;
  font-weight: 1000;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.final-your-rank-strip strong {
  color: #fff6e7;
  font-size: 1rem;
  line-height: 1.1;
}

.final-your-rank-strip small {
  color: rgba(246, 223, 188, .72);
  font-size: .74rem;
  line-height: 1.25;
}

.final-your-rank-strip.muted {
  border-color: rgba(240, 200, 120, .14);
  background: rgba(31, 22, 19, .50);
}

@media (min-width: 1020px) and (max-height: 940px) {
  .final-screen {
    padding-top: 12px !important;
  }

  .final-results-layout .final-hero-card,
  .final-results-layout .final-leaderboard-card {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }

  .final-score {
    font-size: clamp(3.25rem, 6.4vw, 4.75rem) !important;
  }

  .final-results-layout .leaderboard-list {
    max-height: calc(100vh - 138px) !important;
  }

  .final-results-layout .leaderboard-row {
    min-height: 66px !important;
    padding: 9px 12px !important;
  }
}

@media (max-width: 1080px) {
  .final-results-layout {
    grid-template-columns: 1fr !important;
  }

  .final-results-layout .final-leaderboard-card {
    min-height: 0 !important;
  }
}

@media (max-width: 760px) {
  .final-message .economy-pulse-card {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  .final-message .economy-pulse-card span {
    grid-row: auto !important;
    justify-self: center !important;
  }
}


/* v7.0.361 Final Screen Vertical Balance: center the final score + leaderboard layout and make long leaderboards scroll inside the card. */
.final-screen:not(.hidden) {
  min-height: 100dvh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(100% - 28px, 1380px) !important;
  padding: clamp(58px, 7vh, 92px) 0 clamp(42px, 6vh, 76px) !important;
}

.final-results-layout {
  align-items: stretch !important;
  min-height: min(560px, calc(100dvh - 170px)) !important;
  max-height: min(720px, calc(100dvh - 118px)) !important;
}

.final-results-layout .final-hero-card,
.final-results-layout .final-leaderboard-card {
  height: 100% !important;
  min-height: 0 !important;
}

.final-results-layout .final-hero-card {
  align-content: center !important;
}

.final-results-layout .final-leaderboard-card {
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
}

.final-results-layout .leaderboard-list {
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 6px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(240, 200, 120, .35) rgba(255,255,255,.05);
}

.final-results-layout .leaderboard-list::-webkit-scrollbar {
  width: 8px;
}

.final-results-layout .leaderboard-list::-webkit-scrollbar-track {
  background: rgba(255,255,255,.045);
  border-radius: 999px;
}

.final-results-layout .leaderboard-list::-webkit-scrollbar-thumb {
  background: rgba(240, 200, 120, .32);
  border-radius: 999px;
}

.final-your-rank-strip {
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(12px);
}

@media (min-width: 1020px) and (max-height: 940px) {
  .final-screen:not(.hidden) {
    padding-top: clamp(42px, 6vh, 76px) !important;
    padding-bottom: clamp(32px, 5vh, 58px) !important;
  }

  .final-results-layout {
    min-height: min(520px, calc(100dvh - 132px)) !important;
    max-height: calc(100dvh - 106px) !important;
  }
}

@media (max-width: 1080px) {
  .final-screen:not(.hidden) {
    min-height: auto !important;
    display: block !important;
    padding-top: 18px !important;
  }

  .final-results-layout {
    min-height: 0 !important;
    max-height: none !important;
  }

  .final-results-layout .final-hero-card,
  .final-results-layout .final-leaderboard-card {
    height: auto !important;
  }

  .final-results-layout .leaderboard-list {
    max-height: none !important;
    overflow: visible !important;
  }

  .final-your-rank-strip {
    position: static;
  }
}


/* v7.0.362 Mission Daily Rotation Fix: missions reset reloads the board at midnight and stale CLAIM indicators are cleared. */

/* v7.0.364 Unified Modal Close Buttons + shared modal sizing
   Keeps the existing WaveQuest warm/glass UI, but makes Shop, Hall, Season,
   Missions, Inventory, Mode Select, Updates and PvP use the same close control. */
:root {
  --rq-modal-sync-width: min(1180px, calc(100dvw - 22px));
  --rq-modal-sync-height: calc(100dvh - 18px);
}

.shop-dialog,
.hall-dialog.leaderboard-dialog,
.missions-dialog,
.inventory-dialog,
.mode-select-dialog,
.season-dialog,
.pvp-dialog,
.shop-detail-dialog,
.home-update-dialog {
  width: var(--rq-modal-sync-width) !important;
  max-width: var(--rq-modal-sync-width) !important;
  max-height: var(--rq-modal-sync-height) !important;
}

.action-more-dialog {
  width: min(520px, calc(100dvw - 22px)) !important;
  max-width: min(520px, calc(100dvw - 22px)) !important;
}

.shop-dialog-card,
.hall-of-fame-card,
.missions-dialog-card,
.inventory-dialog-shell,
.mode-select-shell,
.season-dialog-shell,
.pvp-dialog-card,
.shop-detail-card,
.home-update-shell {
  max-height: calc(100dvh - 20px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.rq-window-close-btn,
.shop-close-btn.rq-window-close-btn,
.shop-detail-close-btn.rq-window-close-btn,
.hall-close-btn.rq-window-close-btn,
.missions-close-btn.rq-window-close-btn,
.home-update-close-btn.rq-window-close-btn,
.dialog-close-btn.rq-window-close-btn,
.season-close-btn.rq-window-close-btn,
#pvpDialog .rq-window-close-btn,
#closeSeasonDialogBtn.rq-window-close-btn,
#closeInventoryDialogBtn.rq-window-close-btn,
#closeModeSelectBtn.rq-window-close-btn,
#closeActionMoreBtn.rq-window-close-btn {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: auto !important;
  min-width: 86px !important;
  height: auto !important;
  min-height: 38px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(222, 198, 160, .18) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.10), transparent 44%),
    rgba(40, 29, 21, .78) !important;
  color: rgba(243, 232, 213, .94) !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}

.rq-window-close-btn > span,
.shop-close-btn.rq-window-close-btn > span,
.shop-detail-close-btn.rq-window-close-btn > span,
.hall-close-btn.rq-window-close-btn > span,
.missions-close-btn.rq-window-close-btn > span,
.home-update-close-btn.rq-window-close-btn > span,
.dialog-close-btn.rq-window-close-btn > span,
.season-close-btn.rq-window-close-btn > span,
#pvpDialog .rq-window-close-btn > span,
#closeSeasonDialogBtn.rq-window-close-btn > span {
  width: 22px !important;
  height: 22px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(248, 113, 113, .28), rgba(127, 29, 29, .38)) !important;
  color: #fecaca !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
  font-style: normal !important;
  text-shadow: 0 1px 4px rgba(127, 29, 29, .50) !important;
}

.rq-window-close-btn > em,
.shop-close-btn.rq-window-close-btn > em,
.shop-detail-close-btn.rq-window-close-btn > em,
.hall-close-btn.rq-window-close-btn > em,
.missions-close-btn.rq-window-close-btn > em,
.home-update-close-btn.rq-window-close-btn > em,
.dialog-close-btn.rq-window-close-btn > em,
.season-close-btn.rq-window-close-btn > em,
#pvpDialog .rq-window-close-btn > em,
#closeSeasonDialogBtn.rq-window-close-btn > em {
  display: inline !important;
  font-style: normal !important;
  font-size: .78rem !important;
  font-weight: 1000 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  color: rgba(243, 232, 213, .94) !important;
}

.rq-window-close-btn:hover,
.shop-close-btn.rq-window-close-btn:hover,
.shop-detail-close-btn.rq-window-close-btn:hover,
.hall-close-btn.rq-window-close-btn:hover,
.missions-close-btn.rq-window-close-btn:hover,
.home-update-close-btn.rq-window-close-btn:hover,
.dialog-close-btn.rq-window-close-btn:hover,
.season-close-btn.rq-window-close-btn:hover,
#pvpDialog .rq-window-close-btn:hover,
#closeSeasonDialogBtn.rq-window-close-btn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(248, 113, 113, .34) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.32), 0 0 22px rgba(248, 113, 113, .12) !important;
}

.rq-window-close-btn:active,
.shop-close-btn.rq-window-close-btn:active,
.shop-detail-close-btn.rq-window-close-btn:active,
.hall-close-btn.rq-window-close-btn:active,
.missions-close-btn.rq-window-close-btn:active,
.home-update-close-btn.rq-window-close-btn:active,
.dialog-close-btn.rq-window-close-btn:active,
.season-close-btn.rq-window-close-btn:active,
#pvpDialog .rq-window-close-btn:active,
#closeSeasonDialogBtn.rq-window-close-btn:active {
  transform: translateY(0) scale(.98) !important;
}

@media (max-width: 760px) {
  :root {
    --rq-modal-sync-width: calc(100dvw - 6px);
    --rq-modal-sync-height: calc(100dvh - 8px);
  }

  .rq-window-close-btn,
  .shop-close-btn.rq-window-close-btn,
  .shop-detail-close-btn.rq-window-close-btn,
  .hall-close-btn.rq-window-close-btn,
  .missions-close-btn.rq-window-close-btn,
  .home-update-close-btn.rq-window-close-btn,
  .dialog-close-btn.rq-window-close-btn,
  .season-close-btn.rq-window-close-btn,
  #pvpDialog .rq-window-close-btn,
  #closeSeasonDialogBtn.rq-window-close-btn {
    min-width: 44px !important;
    width: 44px !important;
    min-height: 42px !important;
    padding: 8px !important;
  }

  .rq-window-close-btn > em,
  .shop-close-btn.rq-window-close-btn > em,
  .shop-detail-close-btn.rq-window-close-btn > em,
  .hall-close-btn.rq-window-close-btn > em,
  .missions-close-btn.rq-window-close-btn > em,
  .home-update-close-btn.rq-window-close-btn > em,
  .dialog-close-btn.rq-window-close-btn > em,
  .season-close-btn.rq-window-close-btn > em,
  #pvpDialog .rq-window-close-btn > em,
  #closeSeasonDialogBtn.rq-window-close-btn > em {
    display: none !important;
  }

  .rq-window-close-btn > span,
  .shop-close-btn.rq-window-close-btn > span,
  .shop-detail-close-btn.rq-window-close-btn > span,
  .hall-close-btn.rq-window-close-btn > span,
  .missions-close-btn.rq-window-close-btn > span,
  .home-update-close-btn.rq-window-close-btn > span,
  .dialog-close-btn.rq-window-close-btn > span,
  .season-close-btn.rq-window-close-btn > span,
  #pvpDialog .rq-window-close-btn > span,
  #closeSeasonDialogBtn.rq-window-close-btn > span {
    width: 24px !important;
    height: 24px !important;
  }
}


/* v7.0.365 Modal Close Real Sync
   Hard-syncs every main-menu modal close control to the Shop reference.
   This block intentionally overrides older per-window close styles. */
:root {
  --rq-close-sync-width: 86px;
  --rq-close-sync-height: 38px;
  --rq-close-sync-dot: 22px;
  --rq-close-sync-top: 18px;
  --rq-close-sync-right: 18px;
}

/* Every title/header that owns a modal close becomes the same positioning frame. */
.shop-dialog .leaderboard-card-head,
.shop-detail-card .shop-detail-head,
#menuLeaderboardDialog .hall-header,
#missionsDialog .missions-header,
#inventoryDialog .inventory-dialog-head,
#modeSelectDialog .mode-select-head,
#seasonDialog .season-dialog-head,
#seasonDialog .season-dialog-head-clean,
#homeUpdateDialog .home-update-head,
#actionMoreDialog .action-more-head,
#pvpDialog .pvp-dialog-head,
#pvpDialog .pvp-head,
#pvpDialog .pvp-dialog-header {
  position: relative !important;
  min-height: 72px !important;
  padding-right: 126px !important;
}

/* The close target list is deliberately broad: some windows use old custom classes,
   some use dialog-close-btn, and a few are generated by JS. */
.rq-window-close-btn,
#closeShopBtn,
#closeShopDetailBtn,
#closeMenuLeaderboardBtn,
#closeMissionsBtn,
#closeSeasonDialogBtn,
#closeInventoryDialogBtn,
#closeModeSelectBtn,
#closeActionMoreBtn,
#closeHomeUpdateBtn,
#closePvpDialogBtn,
.shop-close-btn,
.shop-detail-close-btn,
.hall-close-btn,
.missions-close-btn,
.season-close-btn,
.home-update-close-btn,
.dialog-close-btn.rq-window-close-btn,
#pvpDialog .ghost-btn[aria-label*="Close"],
#pvpDialog button[aria-label*="Close"] {
  position: absolute !important;
  top: var(--rq-close-sync-top) !important;
  right: var(--rq-close-sync-right) !important;
  z-index: 25 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: var(--rq-close-sync-width) !important;
  min-width: var(--rq-close-sync-width) !important;
  max-width: var(--rq-close-sync-width) !important;
  height: var(--rq-close-sync-height) !important;
  min-height: var(--rq-close-sync-height) !important;
  max-height: var(--rq-close-sync-height) !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(222, 198, 160, .20) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.10), transparent 44%),
    rgba(40, 29, 21, .84) !important;
  color: rgba(243, 232, 213, .95) !important;
  font-size: 0 !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08) !important;
  cursor: pointer !important;
  transform: none !important;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
  overflow: visible !important;
}

/* Do not trust older markup. Hide old span/em/text rendering and draw one unified Shop-style face. */
.rq-window-close-btn > span,
.rq-window-close-btn > em,
#closeShopBtn > span,
#closeShopBtn > em,
#closeShopDetailBtn > span,
#closeShopDetailBtn > em,
#closeMenuLeaderboardBtn > span,
#closeMenuLeaderboardBtn > em,
#closeMissionsBtn > span,
#closeMissionsBtn > em,
#closeSeasonDialogBtn > span,
#closeSeasonDialogBtn > em,
#closeInventoryDialogBtn > span,
#closeInventoryDialogBtn > em,
#closeModeSelectBtn > span,
#closeModeSelectBtn > em,
#closeActionMoreBtn > span,
#closeActionMoreBtn > em,
#closeHomeUpdateBtn > span,
#closeHomeUpdateBtn > em,
#closePvpDialogBtn > span,
#closePvpDialogBtn > em {
  display: none !important;
}

.rq-window-close-btn::before,
#closeShopBtn::before,
#closeShopDetailBtn::before,
#closeMenuLeaderboardBtn::before,
#closeMissionsBtn::before,
#closeSeasonDialogBtn::before,
#closeInventoryDialogBtn::before,
#closeModeSelectBtn::before,
#closeActionMoreBtn::before,
#closeHomeUpdateBtn::before,
#closePvpDialogBtn::before,
.shop-close-btn::before,
.shop-detail-close-btn::before,
.hall-close-btn::before,
.missions-close-btn::before,
.season-close-btn::before,
.home-update-close-btn::before,
.dialog-close-btn.rq-window-close-btn::before,
#pvpDialog .ghost-btn[aria-label*="Close"]::before,
#pvpDialog button[aria-label*="Close"]::before {
  content: "×" !important;
  flex: 0 0 var(--rq-close-sync-dot) !important;
  width: var(--rq-close-sync-dot) !important;
  height: var(--rq-close-sync-dot) !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(248, 113, 113, .46), rgba(127, 29, 29, .58)) !important;
  color: #ffe3e3 !important;
  font-size: 1.05rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 5px rgba(127, 29, 29, .68) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 10px rgba(248,113,113,.10) !important;
}

.rq-window-close-btn::after,
#closeShopBtn::after,
#closeShopDetailBtn::after,
#closeMenuLeaderboardBtn::after,
#closeMissionsBtn::after,
#closeSeasonDialogBtn::after,
#closeInventoryDialogBtn::after,
#closeModeSelectBtn::after,
#closeActionMoreBtn::after,
#closeHomeUpdateBtn::after,
#closePvpDialogBtn::after,
.shop-close-btn::after,
.shop-detail-close-btn::after,
.hall-close-btn::after,
.missions-close-btn::after,
.season-close-btn::after,
.home-update-close-btn::after,
.dialog-close-btn.rq-window-close-btn::after,
#pvpDialog .ghost-btn[aria-label*="Close"]::after,
#pvpDialog button[aria-label*="Close"]::after {
  content: "Close" !important;
  display: inline-block !important;
  color: rgba(243, 232, 213, .96) !important;
  font-size: .78rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  font-style: normal !important;
}

.rq-window-close-btn:hover,
#closeShopBtn:hover,
#closeShopDetailBtn:hover,
#closeMenuLeaderboardBtn:hover,
#closeMissionsBtn:hover,
#closeSeasonDialogBtn:hover,
#closeInventoryDialogBtn:hover,
#closeModeSelectBtn:hover,
#closeActionMoreBtn:hover,
#closeHomeUpdateBtn:hover,
#closePvpDialogBtn:hover,
.shop-close-btn:hover,
.shop-detail-close-btn:hover,
.hall-close-btn:hover,
.missions-close-btn:hover,
.season-close-btn:hover,
.home-update-close-btn:hover,
.dialog-close-btn.rq-window-close-btn:hover,
#pvpDialog .ghost-btn[aria-label*="Close"]:hover,
#pvpDialog button[aria-label*="Close"]:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(248, 113, 113, .38) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.34), 0 0 22px rgba(248, 113, 113, .14), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.rq-window-close-btn:active,
#closeShopBtn:active,
#closeShopDetailBtn:active,
#closeMenuLeaderboardBtn:active,
#closeMissionsBtn:active,
#closeSeasonDialogBtn:active,
#closeInventoryDialogBtn:active,
#closeModeSelectBtn:active,
#closeActionMoreBtn:active,
#closeHomeUpdateBtn:active,
#closePvpDialogBtn:active,
.shop-close-btn:active,
.shop-detail-close-btn:active,
.hall-close-btn:active,
.missions-close-btn:active,
.season-close-btn:active,
.home-update-close-btn:active,
.dialog-close-btn.rq-window-close-btn:active,
#pvpDialog .ghost-btn[aria-label*="Close"]:active,
#pvpDialog button[aria-label*="Close"]:active {
  transform: translateY(0) scale(.98) !important;
}

/* Season/Hall/Missions had older offsets that could push the button outside the frame. */
#seasonDialog .season-close-btn,
#menuLeaderboardDialog .hall-close-btn,
#missionsDialog .missions-close-btn,
#inventoryDialog #closeInventoryDialogBtn {
  top: var(--rq-close-sync-top) !important;
  right: var(--rq-close-sync-right) !important;
  left: auto !important;
  bottom: auto !important;
}

@media (max-width: 760px) {
  :root {
    --rq-close-sync-width: 44px;
    --rq-close-sync-height: 42px;
    --rq-close-sync-dot: 24px;
    --rq-close-sync-top: 12px;
    --rq-close-sync-right: 12px;
  }

  .shop-dialog .leaderboard-card-head,
  .shop-detail-card .shop-detail-head,
  #menuLeaderboardDialog .hall-header,
  #missionsDialog .missions-header,
  #inventoryDialog .inventory-dialog-head,
  #modeSelectDialog .mode-select-head,
  #seasonDialog .season-dialog-head,
  #seasonDialog .season-dialog-head-clean,
  #homeUpdateDialog .home-update-head,
  #actionMoreDialog .action-more-head,
  #pvpDialog .pvp-dialog-head,
  #pvpDialog .pvp-head,
  #pvpDialog .pvp-dialog-header {
    padding-right: 68px !important;
  }

  .rq-window-close-btn,
  #closeShopBtn,
  #closeShopDetailBtn,
  #closeMenuLeaderboardBtn,
  #closeMissionsBtn,
  #closeSeasonDialogBtn,
  #closeInventoryDialogBtn,
  #closeModeSelectBtn,
  #closeActionMoreBtn,
  #closeHomeUpdateBtn,
  #closePvpDialogBtn,
  .shop-close-btn,
  .shop-detail-close-btn,
  .hall-close-btn,
  .missions-close-btn,
  .season-close-btn,
  .home-update-close-btn,
  .dialog-close-btn.rq-window-close-btn,
  #pvpDialog .ghost-btn[aria-label*="Close"],
  #pvpDialog button[aria-label*="Close"] {
    padding: 8px !important;
    gap: 0 !important;
  }

  .rq-window-close-btn::after,
  #closeShopBtn::after,
  #closeShopDetailBtn::after,
  #closeMenuLeaderboardBtn::after,
  #closeMissionsBtn::after,
  #closeSeasonDialogBtn::after,
  #closeInventoryDialogBtn::after,
  #closeModeSelectBtn::after,
  #closeActionMoreBtn::after,
  #closeHomeUpdateBtn::after,
  #closePvpDialogBtn::after,
  .shop-close-btn::after,
  .shop-detail-close-btn::after,
  .hall-close-btn::after,
  .missions-close-btn::after,
  .season-close-btn::after,
  .home-update-close-btn::after,
  .dialog-close-btn.rq-window-close-btn::after,
  #pvpDialog .ghost-btn[aria-label*="Close"]::after,
  #pvpDialog button[aria-label*="Close"]::after {
    display: none !important;
    content: "" !important;
  }
}


/* v7.0.366 Missions Season Ranks Close Hotfix
   Final targeted correction for the three legacy menu shells that kept overriding
   the shared Shop-like close button: Daily Contracts, Season League and Hall of Fame. */
#missionsDialog .missions-dialog-card,
#menuLeaderboardDialog .hall-of-fame-card,
#seasonDialog .season-dialog-shell,
#seasonDialog .season-dialog-shell-premium {
  position: relative !important;
}

/* Season intentionally hides its old header, but v7.0.294 made that header 0px wide.
   Keep it invisible while restoring a full-width positioning layer for the close button. */
#seasonDialog .season-dialog-head-clean,
#seasonDialog .season-dialog-head-premium,
#seasonDialog .season-dialog-head {
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  z-index: 70 !important;
  pointer-events: none !important;
}

#missionsDialog .missions-header,
#menuLeaderboardDialog .hall-header {
  overflow: visible !important;
}

/* Stronger than the older span/em rules inside season/hall/mission headers. */
#missionsDialog #closeMissionsBtn > span,
#missionsDialog #closeMissionsBtn > em,
#menuLeaderboardDialog #closeMenuLeaderboardBtn > span,
#menuLeaderboardDialog #closeMenuLeaderboardBtn > em,
#seasonDialog #closeSeasonDialogBtn > span,
#seasonDialog #closeSeasonDialogBtn > em,
#missionsDialog .missions-header #closeMissionsBtn > span,
#missionsDialog .missions-header #closeMissionsBtn > em,
#menuLeaderboardDialog .hall-header #closeMenuLeaderboardBtn > span,
#menuLeaderboardDialog .hall-header #closeMenuLeaderboardBtn > em,
#seasonDialog .season-dialog-head #closeSeasonDialogBtn > span,
#seasonDialog .season-dialog-head #closeSeasonDialogBtn > em {
  display: none !important;
  visibility: hidden !important;
}

#missionsDialog #closeMissionsBtn,
#menuLeaderboardDialog #closeMenuLeaderboardBtn,
#seasonDialog #closeSeasonDialogBtn {
  position: absolute !important;
  top: 18px !important;
  right: 22px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 90 !important;
  pointer-events: auto !important;
  width: 86px !important;
  min-width: 86px !important;
  max-width: 86px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 8px 12px !important;
  transform: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

#missionsDialog #closeMissionsBtn::before,
#menuLeaderboardDialog #closeMenuLeaderboardBtn::before,
#seasonDialog #closeSeasonDialogBtn::before {
  content: "×" !important;
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(248, 113, 113, .46), rgba(127, 29, 29, .58)) !important;
  color: #ffe3e3 !important;
  font-size: 1.05rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 5px rgba(127, 29, 29, .68) !important;
}

#missionsDialog #closeMissionsBtn::after,
#menuLeaderboardDialog #closeMenuLeaderboardBtn::after,
#seasonDialog #closeSeasonDialogBtn::after {
  content: "Close" !important;
  display: inline-block !important;
  color: rgba(243, 232, 213, .96) !important;
  font-size: .78rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  font-style: normal !important;
}

@media (max-width: 760px) {
  #missionsDialog #closeMissionsBtn,
  #menuLeaderboardDialog #closeMenuLeaderboardBtn,
  #seasonDialog #closeSeasonDialogBtn {
    top: 12px !important;
    right: 12px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 8px !important;
    gap: 0 !important;
  }

  #missionsDialog #closeMissionsBtn::after,
  #menuLeaderboardDialog #closeMenuLeaderboardBtn::after,
  #seasonDialog #closeSeasonDialogBtn::after {
    content: "" !important;
    display: none !important;
  }
}


/* v7.0.367 Menu Modal Layout Sync
   Scope is intentionally limited: Daily Contracts, Season League, Hall of Fame / Ranks
   and Start Playing mode select. Shop and Character Shelf / Collection are not touched. */
#missionsDialog,
#menuLeaderboardDialog,
#seasonDialog,
#modeSelectDialog {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

#missionsDialog .rq-menu-sync-panel,
#menuLeaderboardDialog .rq-menu-sync-panel,
#seasonDialog .rq-menu-sync-panel {
  position: relative !important;
  width: min(1180px, calc(100dvw - 22px)) !important;
  max-width: min(1180px, calc(100dvw - 22px)) !important;
  max-height: calc(100dvh - 22px) !important;
  margin: 0 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

#modeSelectDialog .rq-menu-sync-panel {
  position: relative !important;
  width: min(860px, calc(100dvw - 22px)) !important;
  max-width: min(860px, calc(100dvw - 22px)) !important;
  max-height: calc(100dvh - 22px) !important;
  margin: 0 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

#missionsDialog .missions-header,
#menuLeaderboardDialog .hall-header,
#modeSelectDialog .mode-select-head {
  padding-right: 132px !important;
  overflow: visible !important;
}

#seasonDialog .season-dialog-head-clean,
#seasonDialog .season-dialog-head-premium,
#seasonDialog .season-dialog-head {
  display: none !important;
}

#missionsDialog .rq-menu-sync-close,
#menuLeaderboardDialog .rq-menu-sync-close,
#seasonDialog .rq-menu-sync-close,
#modeSelectDialog .rq-menu-sync-close {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 140 !important;
  pointer-events: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 86px !important;
  min-width: 86px !important;
  max-width: 86px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(222, 198, 160, .18) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.10), transparent 44%),
    rgba(40, 29, 21, .78) !important;
  color: rgba(243, 232, 213, .94) !important;
  font-size: .78rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transform: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

#missionsDialog .rq-menu-sync-close:hover,
#menuLeaderboardDialog .rq-menu-sync-close:hover,
#seasonDialog .rq-menu-sync-close:hover,
#modeSelectDialog .rq-menu-sync-close:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(248, 113, 113, .34) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.32), 0 0 22px rgba(248, 113, 113, .12) !important;
}

#missionsDialog .rq-menu-sync-close:active,
#menuLeaderboardDialog .rq-menu-sync-close:active,
#seasonDialog .rq-menu-sync-close:active,
#modeSelectDialog .rq-menu-sync-close:active {
  transform: translateY(0) scale(.98) !important;
}

#missionsDialog .rq-menu-sync-close > span,
#missionsDialog .rq-menu-sync-close > em,
#menuLeaderboardDialog .rq-menu-sync-close > span,
#menuLeaderboardDialog .rq-menu-sync-close > em,
#seasonDialog .rq-menu-sync-close > span,
#seasonDialog .rq-menu-sync-close > em,
#modeSelectDialog .rq-menu-sync-close > span,
#modeSelectDialog .rq-menu-sync-close > em {
  display: none !important;
  visibility: hidden !important;
}

#missionsDialog .rq-menu-sync-close::before,
#menuLeaderboardDialog .rq-menu-sync-close::before,
#seasonDialog .rq-menu-sync-close::before,
#modeSelectDialog .rq-menu-sync-close::before {
  content: "×" !important;
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(248, 113, 113, .46), rgba(127, 29, 29, .58)) !important;
  color: #ffe3e3 !important;
  font-size: 1.05rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 5px rgba(127, 29, 29, .68) !important;
}

#missionsDialog .rq-menu-sync-close::after,
#menuLeaderboardDialog .rq-menu-sync-close::after,
#seasonDialog .rq-menu-sync-close::after,
#modeSelectDialog .rq-menu-sync-close::after {
  content: "Close" !important;
  display: inline-block !important;
  color: rgba(243, 232, 213, .96) !important;
  font-size: .78rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  font-style: normal !important;
}

@media (max-width: 760px) {
  #missionsDialog .rq-menu-sync-panel,
  #menuLeaderboardDialog .rq-menu-sync-panel,
  #seasonDialog .rq-menu-sync-panel,
  #modeSelectDialog .rq-menu-sync-panel {
    width: calc(100dvw - 6px) !important;
    max-width: calc(100dvw - 6px) !important;
    max-height: calc(100dvh - 8px) !important;
  }

  #missionsDialog .rq-menu-sync-close,
  #menuLeaderboardDialog .rq-menu-sync-close,
  #seasonDialog .rq-menu-sync-close,
  #modeSelectDialog .rq-menu-sync-close {
    top: 12px !important;
    right: 12px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 8px !important;
    gap: 0 !important;
  }

  #missionsDialog .rq-menu-sync-close::after,
  #menuLeaderboardDialog .rq-menu-sync-close::after,
  #seasonDialog .rq-menu-sync-close::after,
  #modeSelectDialog .rq-menu-sync-close::after {
    content: "" !important;
    display: none !important;
  }

  #missionsDialog .missions-header,
  #menuLeaderboardDialog .hall-header,
  #modeSelectDialog .mode-select-head {
    padding-right: 62px !important;
  }
}

/* v7.0.368 Mode Select Size Restore + Season Banner Width Fix
   Restores Start Playing / Choose Game Mode to the pre-sync large layout while keeping
   only the unified close button, and stretches the Season hero banner to the full panel width. */
#modeSelectDialog.mode-select-dialog {
  position: fixed !important;
  inset: 0 !important;
  margin: auto !important;
  width: var(--rq-menu-modal-w, min(1200px, calc(100dvw - 42px))) !important;
  height: var(--rq-menu-modal-h, min(800px, calc(100dvh - 36px))) !important;
  max-width: var(--rq-menu-modal-w, min(1200px, calc(100dvw - 42px))) !important;
  max-height: var(--rq-menu-modal-h, min(800px, calc(100dvh - 36px))) !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  transform: none !important;
}

#modeSelectDialog .mode-select-shell.rq-menu-sync-panel,
#modeSelectDialog .rq-menu-sync-panel-start {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#modeSelectDialog .mode-select-head {
  padding-right: 132px !important;
}

#modeSelectDialog .mode-select-head > div {
  padding-right: 0 !important;
}

#modeSelectDialog .rq-menu-sync-close {
  top: 24px !important;
  right: 24px !important;
}

#seasonDialog .season-dialog-body-premium,
#seasonDialog .season-dialog-body {
  padding-top: 0 !important;
}

#seasonDialog .season-tabs-hero-overhaul {
  width: calc(100% + 44px) !important;
  max-width: calc(100% + 44px) !important;
  margin: 0 -22px 10px !important;
  border-radius: 28px 28px 0 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 760px) {
  #modeSelectDialog.mode-select-dialog {
    width: calc(100dvw - 14px) !important;
    height: calc(100dvh - 14px) !important;
    max-width: calc(100dvw - 14px) !important;
    max-height: calc(100dvh - 14px) !important;
  }

  #modeSelectDialog .mode-select-shell.rq-menu-sync-panel,
  #modeSelectDialog .rq-menu-sync-panel-start {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
  }

  #modeSelectDialog .rq-menu-sync-close {
    top: 12px !important;
    right: 12px !important;
  }

  #seasonDialog .season-tabs-hero-overhaul {
    width: calc(100% + 24px) !important;
    max-width: calc(100% + 24px) !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
  }
}

/* v7.0.369 Banner Title Center Sync + Start Playing Close Match
   Keeps Shop and Collection untouched. Unifies the top banner copy treatment for
   Missions, Season, Hall of Fame / Ranks and Start Playing, and hard-matches the
   Start Playing close button to the same pill used by Season / Ranks / Missions. */
:root {
  --rq-banner-kicker-size: .66rem;
  --rq-banner-title-size: clamp(2.45rem, 4vw, 3.55rem);
  --rq-banner-subtitle-size: .86rem;
  --rq-banner-side-safe: 128px;
}

#missionsDialog .missions-header,
#menuLeaderboardDialog .hall-header,
#modeSelectDialog .mode-select-head,
#seasonDialog .season-tabs-hero-overhaul {
  position: relative !important;
  overflow: visible !important;
}

#missionsDialog .missions-header > div,
#menuLeaderboardDialog .hall-header > div,
#modeSelectDialog .mode-select-head > div,
#seasonDialog .season-hero-copy,
#seasonDialog .season-hero-copy-single-title {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  text-align: center !important;
  gap: 7px !important;
}

#missionsDialog .missions-header > div,
#menuLeaderboardDialog .hall-header > div {
  padding-left: var(--rq-banner-side-safe) !important;
  padding-right: var(--rq-banner-side-safe) !important;
}

#modeSelectDialog .mode-select-head > div {
  padding-left: calc(var(--rq-banner-side-safe) + 8px) !important;
  padding-right: calc(var(--rq-banner-side-safe) + 8px) !important;
}

#seasonDialog .season-tabs-hero-overhaul {
  position: relative !important;
  display: block !important;
  min-height: 158px !important;
  padding: 22px 22px 20px !important;
}

#seasonDialog .season-hero-copy,
#seasonDialog .season-hero-copy-single-title {
  min-height: 116px !important;
  padding-left: calc(var(--rq-banner-side-safe) + 20px) !important;
  padding-right: calc(var(--rq-banner-side-safe) + 20px) !important;
}

#seasonDialog .season-tabs-rank,
#seasonDialog .season-hero-rank-card {
  position: absolute !important;
  top: 50% !important;
  right: 22px !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

#missionsDialog .missions-header span,
#menuLeaderboardDialog .hall-kicker,
#seasonDialog .season-hero-copy > span,
#seasonDialog .season-hero-copy-single-title > span,
#modeSelectDialog .mode-select-head span {
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 4px 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,231,191,.20) !important;
  background: rgba(0,0,0,.22) !important;
  color: rgba(255,232,176,.96) !important;
  font-size: var(--rq-banner-kicker-size) !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-weight: 950 !important;
}

#missionsDialog .missions-header h2,
#menuLeaderboardDialog .hall-header h2,
#menuLeaderboardDialog .hall-header h2 span,
#seasonDialog .season-hero-copy > strong,
#seasonDialog .season-hero-copy-single-title > strong,
#modeSelectDialog .mode-select-head strong {
  margin: 0 !important;
  color: #f8efe0 !important;
  font-size: var(--rq-banner-title-size) !important;
  line-height: .92 !important;
  letter-spacing: -.055em !important;
  font-weight: 950 !important;
  text-align: center !important;
  text-shadow: 0 10px 28px rgba(0,0,0,.52) !important;
}

#missionsDialog .missions-header small,
#menuLeaderboardDialog .hall-header small,
#seasonDialog .season-hero-copy > small,
#seasonDialog .season-hero-copy-single-title > small,
#modeSelectDialog .mode-select-head small {
  display: block !important;
  margin: 0 !important;
  max-width: 64ch !important;
  color: rgba(246,237,219,.75) !important;
  font-size: var(--rq-banner-subtitle-size) !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

#modeSelectDialog #closeModeSelectBtn,
#modeSelectDialog #closeModeSelectBtn.dialog-close-btn,
#modeSelectDialog .rq-menu-sync-close {
  top: 20px !important;
  right: 20px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 140 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 86px !important;
  min-width: 86px !important;
  max-width: 86px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(222, 198, 160, .18) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.10), transparent 44%),
    rgba(40, 29, 21, .78) !important;
  color: rgba(243, 232, 213, .94) !important;
  font-size: 0 !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08) !important;
  cursor: pointer !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

#modeSelectDialog #closeModeSelectBtn > span,
#modeSelectDialog #closeModeSelectBtn > em,
#modeSelectDialog .rq-menu-sync-close > span,
#modeSelectDialog .rq-menu-sync-close > em {
  display: none !important;
  visibility: hidden !important;
}

#modeSelectDialog #closeModeSelectBtn::before,
#modeSelectDialog .rq-menu-sync-close::before {
  content: "×" !important;
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(248, 113, 113, .46), rgba(127, 29, 29, .58)) !important;
  color: #ffe3e3 !important;
  font-size: 1.05rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 5px rgba(127, 29, 29, .68) !important;
}

#modeSelectDialog #closeModeSelectBtn::after,
#modeSelectDialog .rq-menu-sync-close::after {
  content: "Close" !important;
  display: inline-block !important;
  color: rgba(243, 232, 213, .96) !important;
  font-size: .78rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  font-style: normal !important;
}

#modeSelectDialog #closeModeSelectBtn:hover,
#modeSelectDialog .rq-menu-sync-close:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(248, 113, 113, .34) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.32), 0 0 22px rgba(248, 113, 113, .12) !important;
}

#modeSelectDialog #closeModeSelectBtn:active,
#modeSelectDialog .rq-menu-sync-close:active {
  transform: translateY(0) scale(.98) !important;
}

@media (max-width: 760px) {
  :root {
    --rq-banner-side-safe: 64px;
  }

  #seasonDialog .season-tabs-hero-overhaul {
    min-height: auto !important;
    padding: 14px 12px 12px !important;
    display: grid !important;
    gap: 10px !important;
  }

  #seasonDialog .season-hero-copy,
  #seasonDialog .season-hero-copy-single-title {
    min-height: 0 !important;
    padding-left: 52px !important;
    padding-right: 52px !important;
  }

  #seasonDialog .season-tabs-rank,
  #seasonDialog .season-hero-rank-card {
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 auto !important;
  }

  #missionsDialog .missions-header > div,
  #menuLeaderboardDialog .hall-header > div,
  #modeSelectDialog .mode-select-head > div {
    padding-left: 56px !important;
    padding-right: 56px !important;
  }

  #missionsDialog .missions-header h2,
  #menuLeaderboardDialog .hall-header h2,
  #menuLeaderboardDialog .hall-header h2 span,
  #seasonDialog .season-hero-copy > strong,
  #seasonDialog .season-hero-copy-single-title > strong,
  #modeSelectDialog .mode-select-head strong {
    font-size: clamp(1.9rem, 8vw, 2.5rem) !important;
  }

  #modeSelectDialog #closeModeSelectBtn,
  #modeSelectDialog #closeModeSelectBtn.dialog-close-btn,
  #modeSelectDialog .rq-menu-sync-close {
    top: 12px !important;
    right: 12px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 8px !important;
    gap: 0 !important;
  }

  #modeSelectDialog #closeModeSelectBtn::after,
  #modeSelectDialog .rq-menu-sync-close::after {
    content: "" !important;
    display: none !important;
  }
}

/* v7.0.370 UX Foundation: Modal Polish, Loading States, Toasts, Onboarding and Patch Notes
   UI-only patch: final sync for Missions / Season / Ranks, shared loading states,
   toast notifications, first-time guide and updated Hot New patch notes. */
:root {
  --rq-ux-panel-gap: 14px;
  --rq-ux-card-radius: 20px;
  --rq-ux-panel-border: 1px solid rgba(222,198,160,.18);
}

/* Final sync for the three menu information windows only. */
#missionsDialog .rq-menu-sync-panel,
#menuLeaderboardDialog .rq-menu-sync-panel,
#seasonDialog .rq-menu-sync-panel {
  scrollbar-gutter: stable !important;
  border-radius: 28px !important;
  border: 1px solid rgba(222,198,160,.20) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(226,184,99,.09), transparent 35%),
    linear-gradient(180deg, rgba(33,28,20,.96), rgba(9,8,7,.98)) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

#missionsDialog .missions-header,
#menuLeaderboardDialog .hall-header,
#seasonDialog .season-tabs-hero-overhaul {
  min-height: 154px !important;
  border-radius: 28px 28px 0 0 !important;
  border-bottom: 1px solid rgba(222,198,160,.14) !important;
}

#missionsDialog .missions-status,
#missionsDialog .missions-body,
#menuLeaderboardDialog .hall-view-tabs,
#menuLeaderboardDialog .leaderboard-tabs,
#menuLeaderboardDialog .hall-leaderboard-list,
#seasonDialog .season-dialog-body {
  margin-left: 22px !important;
  margin-right: 22px !important;
}

#missionsDialog .missions-status {
  margin-top: 18px !important;
}

#missionsDialog .missions-body,
#menuLeaderboardDialog .hall-leaderboard-list,
#seasonDialog .season-dialog-body {
  padding-bottom: 22px !important;
}

#missionsDialog .mission-card,
#missionsDialog .weekly-chest-card,
#menuLeaderboardDialog .hall-section-card,
#menuLeaderboardDialog .season-hall-board,
#menuLeaderboardDialog .hall-empty-state,
#seasonDialog .season-tab-card,
#seasonDialog .season-trophy-card,
#seasonDialog .season-info-card,
#seasonDialog .season-stats-card,
#seasonDialog .season-top-card-premium {
  border-radius: var(--rq-ux-card-radius) !important;
  border: var(--rq-ux-panel-border) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 16px 38px rgba(0,0,0,.22) !important;
}

#seasonDialog .season-tabbar {
  margin: 0 22px 12px !important;
}

/* Shared loading / error states. */
.rq-window-state,
.missions-loading-card,
.hall-loading-scan,
.leaderboard-empty,
.season-loading,
.season-error {
  width: min(560px, calc(100% - 24px)) !important;
  min-height: 210px !important;
  margin: 24px auto !important;
  padding: 26px 24px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 12px !important;
  text-align: center !important;
  border-radius: 24px !important;
  border: 1px solid rgba(222,198,160,.18) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(226,184,99,.13), transparent 42%),
    linear-gradient(180deg, rgba(35,29,20,.92), rgba(9,8,6,.96)) !important;
  color: rgba(246,237,219,.82) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 18px 42px rgba(0,0,0,.25) !important;
}

.rq-window-state strong,
.missions-loading-card strong,
.hall-loading-scan strong,
.leaderboard-empty strong,
.season-loading strong,
.season-error strong {
  color: #f8efe0 !important;
  font-size: 1.1rem !important;
  font-weight: 1000 !important;
  letter-spacing: -.02em !important;
}

.rq-window-state em,
.missions-loading-card span,
.hall-loading-scan span,
.leaderboard-empty span,
.season-loading span,
.season-error span {
  max-width: 46ch !important;
  color: rgba(246,237,219,.70) !important;
  font-style: normal !important;
  font-size: .86rem !important;
  line-height: 1.45 !important;
}

.rq-state-orb {
  width: 46px !important;
  height: 46px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,231,191,.28) !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,232,176,.78), rgba(190,130,44,.22) 48%, rgba(0,0,0,.20) 70%),
    rgba(216,176,106,.14) !important;
  box-shadow: 0 0 26px rgba(216,176,106,.18), inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.rq-window-state-loading .rq-state-orb {
  animation: rqStatePulse 1.35s ease-in-out infinite !important;
}

.rq-window-state-error .rq-state-orb {
  background:
    radial-gradient(circle at 50% 38%, rgba(254,202,202,.82), rgba(127,29,29,.30) 52%, rgba(0,0,0,.22) 72%),
    rgba(127,29,29,.16) !important;
  border-color: rgba(248,113,113,.34) !important;
}

@keyframes rqStatePulse {
  0%, 100% { transform: scale(1); opacity: .82; }
  50% { transform: scale(1.07); opacity: 1; }
}

.rq-state-retry-btn {
  min-width: 142px !important;
  margin-top: 6px !important;
}

/* Toast stack. */
.rq-toast-stack {
  position: fixed !important;
  right: 22px !important;
  bottom: 22px !important;
  z-index: 9999 !important;
  display: grid !important;
  gap: 10px !important;
  pointer-events: none !important;
}

.rq-toast {
  width: min(360px, calc(100dvw - 32px)) !important;
  padding: 13px 15px !important;
  display: grid !important;
  gap: 4px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(222,198,160,.20) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(226,184,99,.13), transparent 45%),
    linear-gradient(180deg, rgba(34,27,18,.96), rgba(9,8,6,.98)) !important;
  color: rgba(246,237,219,.84) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.055) !important;
  opacity: 0 !important;
  transform: translateY(12px) scale(.98) !important;
  transition: opacity .22s ease, transform .22s ease !important;
  pointer-events: auto !important;
}

.rq-toast.is-visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.rq-toast strong {
  color: #f8efe0 !important;
  font-size: .84rem !important;
  font-weight: 1000 !important;
}

.rq-toast span {
  color: rgba(246,237,219,.72) !important;
  font-size: .76rem !important;
  line-height: 1.35 !important;
}

.rq-toast-success { border-color: rgba(134,239,172,.24) !important; }
.rq-toast-error { border-color: rgba(248,113,113,.34) !important; }
.rq-toast-warning { border-color: rgba(251,191,36,.32) !important; }

/* First-time onboarding. */
.rq-onboarding-dialog {
  width: min(760px, calc(100dvw - 28px)) !important;
  max-width: min(760px, calc(100dvw - 28px)) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.rq-onboarding-shell {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 30px !important;
  border: 1px solid rgba(222,198,160,.22) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(226,184,99,.16), transparent 38%),
    linear-gradient(180deg, rgba(35,29,20,.97), rgba(8,7,6,.99)) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.rq-onboarding-head {
  position: relative !important;
  min-height: 140px !important;
  padding: 26px 132px 24px !important;
  display: grid !important;
  place-items: center !important;
  gap: 7px !important;
  text-align: center !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.42)),
    url('/assets/ui/leaderboards/hall-of-fame-header-bg.png') center/cover no-repeat !important;
  border-bottom: 1px solid rgba(222,198,160,.14) !important;
}

.rq-onboarding-head span {
  padding: 4px 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,231,191,.20) !important;
  background: rgba(0,0,0,.22) !important;
  color: rgba(255,232,176,.96) !important;
  font-size: .66rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-weight: 950 !important;
}

.rq-onboarding-head strong {
  color: #f8efe0 !important;
  font-size: clamp(2.15rem, 4vw, 3rem) !important;
  line-height: .94 !important;
  letter-spacing: -.055em !important;
  text-shadow: 0 10px 28px rgba(0,0,0,.52) !important;
}

.rq-onboarding-close {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
}

.rq-onboarding-body {
  padding: 22px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.rq-onboarding-body article {
  min-height: 160px !important;
  padding: 18px 14px !important;
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 8px !important;
  text-align: center !important;
  border-radius: 20px !important;
  border: 1px solid rgba(222,198,160,.16) !important;
  background: linear-gradient(180deg, rgba(28,23,17,.90), rgba(10,9,7,.96)) !important;
}

.rq-onboarding-body b {
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #efcf84, #b37a2d) !important;
  color: #221506 !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.24) !important;
}

.rq-onboarding-body strong {
  color: #f8efe0 !important;
  font-size: .96rem !important;
}

.rq-onboarding-body span {
  color: rgba(246,237,219,.70) !important;
  font-size: .76rem !important;
  line-height: 1.38 !important;
}

.rq-onboarding-actions {
  padding: 16px 22px 22px !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

/* Patch notes polish. */
.home-update-dialog .updates-history-heading span,
.home-update-dialog .updates-open-meta span {
  letter-spacing: .18em !important;
}

.home-update-dialog .updates-open-entry ul b {
  color: rgba(255,232,176,.96) !important;
}

.home-update-dialog .updates-history-item strong {
  letter-spacing: -.02em !important;
}

@media (max-width: 760px) {
  .rq-toast-stack {
    right: 12px !important;
    bottom: 12px !important;
  }

  #missionsDialog .missions-status,
  #missionsDialog .missions-body,
  #menuLeaderboardDialog .hall-view-tabs,
  #menuLeaderboardDialog .leaderboard-tabs,
  #menuLeaderboardDialog .hall-leaderboard-list,
  #seasonDialog .season-dialog-body {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  .rq-onboarding-head {
    min-height: 116px !important;
    padding: 18px 64px 16px !important;
  }

  .rq-onboarding-body {
    grid-template-columns: 1fr !important;
    padding: 14px !important;
  }

  .rq-onboarding-body article {
    min-height: 108px !important;
  }

  .rq-onboarding-actions {
    padding: 12px 14px 16px !important;
  }
}


/* v7.0.371 Beta News + Onboarding Backdrop Hotfix
   Keeps the Updates window as a simple Beta Start announcement, removes the
   duplicated Got it action, and makes first-time onboarding feel like a real
   modal by darkening the whole background. */
.home-update-head .home-update-title-block h2 span {
  text-transform: none !important;
}

.home-update-content.updates-beta-start-only-content {
  grid-template-columns: 285px minmax(0, 1fr) !important;
}

.updates-beta-start-only-content .updates-history-panel {
  min-height: 0 !important;
}

.updates-beta-start-only-content .updates-history-list {
  gap: 12px !important;
}

.updates-beta-start-only-content .updates-history-item {
  min-height: 118px !important;
}

.updates-beta-start-only-content .updates-open-entry h3 {
  font-size: clamp(3.4rem, 7vw, 5.8rem) !important;
  letter-spacing: -.075em !important;
}

.updates-beta-start-only-content .updates-open-entry ul {
  display: none !important;
}

.home-update-actions.updates-rank-actions {
  justify-content: flex-end !important;
}

.home-update-actions.updates-rank-actions #hideHomeUpdateTodayBtn {
  min-width: 190px !important;
}

.rq-onboarding-dialog {
  z-index: 2600 !important;
}

.rq-onboarding-dialog::backdrop {
  background:
    radial-gradient(circle at 50% 22%, rgba(213,170,88,.10), transparent 34%),
    rgba(0,0,0,.86) !important;
  backdrop-filter: blur(9px) brightness(.52) !important;
}

body.rq-onboarding-open .start-screen,
body.rq-onboarding-open .game-shell,
body.rq-onboarding-open .main-shell,
body.rq-onboarding-open #startScreen {
  filter: brightness(.45) blur(1.5px) !important;
}

.rq-onboarding-dialog {
  width: min(700px, calc(100dvw - 32px)) !important;
  max-width: min(700px, calc(100dvw - 32px)) !important;
}

.rq-onboarding-shell {
  border-radius: 28px !important;
  box-shadow: 0 36px 120px rgba(0,0,0,.76), 0 0 0 1px rgba(255,235,190,.06), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

.rq-onboarding-head {
  min-height: 128px !important;
  padding: 24px 128px 22px !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55)),
    radial-gradient(circle at 50% 0%, rgba(226,184,99,.14), transparent 44%),
    url('/assets/ui/leaderboards/hall-of-fame-header-bg.png') center/cover no-repeat !important;
}

.rq-onboarding-body {
  padding: 20px !important;
  gap: 10px !important;
}

.rq-onboarding-body article {
  min-height: 138px !important;
  border-color: rgba(222,198,160,.13) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(226,184,99,.07), transparent 44%),
    linear-gradient(180deg, rgba(24,20,15,.94), rgba(6,6,5,.98)) !important;
}

.rq-onboarding-actions {
  padding: 14px 20px 20px !important;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.22)) !important;
}

@media (max-width: 900px) {
  .home-update-content.updates-beta-start-only-content {
    grid-template-columns: 1fr !important;
  }

  .updates-beta-start-only-content .updates-history-panel {
    min-height: auto !important;
  }
}

@media (max-width: 760px) {
  .rq-onboarding-dialog {
    width: calc(100dvw - 16px) !important;
    max-width: calc(100dvw - 16px) !important;
  }

  .rq-onboarding-head {
    min-height: 108px !important;
    padding: 18px 64px 16px !important;
  }

  .rq-onboarding-head strong {
    font-size: clamp(1.9rem, 8vw, 2.45rem) !important;
  }

  .rq-onboarding-body article {
    min-height: 96px !important;
  }
}