:root {
  --bg: #071018;
  --bg-2: #081521;
  --panel: rgba(8, 19, 31, 0.72);
  --panel-strong: rgba(7, 17, 28, 0.92);
  --panel-soft: rgba(15, 29, 44, 0.68);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f2f7fb;
  --muted: #9db0bf;
  --accent: #43e3ea;
  --accent-2: #59c7ff;
  --accent-3: #76f2ba;
  --glow: rgba(67, 227, 234, 0.25);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }
html, body, #app {
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #0d1f2e, #071018 52%);
  color: var(--text);
}
body { overflow: hidden; }
button { font: inherit; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(89, 199, 255, 0.18), transparent 24%),
    radial-gradient(circle at 85% 12%, rgba(118, 242, 186, 0.12), transparent 20%),
    linear-gradient(180deg, rgba(1, 9, 15, 0.18), rgba(3, 9, 15, 0.72));
}

.screen {
  display: none;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
}
.screen.active { display: flex; }
.hidden { display: none !important; }

.ambient {
  position: absolute;
  border-radius: 999px;
  filter: blur(90px);
  opacity: 0.7;
  pointer-events: none;
}
.ambient-a {
  width: 280px;
  height: 280px;
  left: 5%;
  top: 10%;
  background: rgba(89, 199, 255, 0.12);
}
.ambient-b {
  width: 340px;
  height: 340px;
  right: 6%;
  bottom: 12%;
  background: rgba(67, 227, 234, 0.12);
}

.glass, .glass-shell {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(10, 22, 34, 0.84), rgba(8, 18, 29, 0.74));
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.eyebrow {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.btn {
  border: 0;
  border-radius: 16px;
  padding: 14px 22px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: 0.42; cursor: not-allowed; transform: none; }
.btn-primary {
  color: #041218;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  box-shadow: 0 14px 34px rgba(67, 227, 234, 0.25);
}
.btn-secondary {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
}
.big-center-btn {
  display: block;
  min-width: 220px;
  margin: 18px auto 0;
}

.menu-screen {
  align-items: center;
  justify-content: center;
  padding: 28px;
  overflow: auto;
}
.menu-shell {
  position: relative;
  width: min(1240px, 100%);
  border: 1px solid var(--line);
  border-radius: 34px;
  padding: clamp(28px, 5vw, 46px);
  background:
    radial-gradient(circle at top right, rgba(89, 199, 255, 0.16), transparent 28%),
    radial-gradient(circle at bottom left, rgba(118, 242, 186, 0.1), transparent 24%),
    linear-gradient(180deg, rgba(7, 18, 28, 0.92), rgba(5, 14, 24, 0.88));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.menu-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.25;
  pointer-events: none;
}
.menu-topline, .hero-grid, .menu-stats { position: relative; z-index: 1; }
.menu-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}
.logo-lockup {
  display: flex;
  align-items: center;
  gap: 18px;
}
.logo-lockup-menu {
  gap: 16px;
}
.brand-logo {
  display: block;
  object-fit: contain;
}
.brand-logo-menu {
  width: clamp(110px, 13vw, 165px);
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28));
}
.brand-logo-hud {
  width: 72px;
  max-width: 10vw;
  height: auto;
  display: block;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  font-weight: 900;
  font-size: 23px;
  letter-spacing: -0.05em;
  color: #041218;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 12px 28px rgba(67, 227, 234, 0.18);
}
.brand-mark.small {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  font-size: 14px;
}

.brand-home-btn {
  border: 0;
  cursor: pointer;
  padding: 0;
  background: transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.brand-logo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
}
.brand-home-btn:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 14px 32px rgba(67, 227, 234, 0.28);
  filter: brightness(1.06);
}
.brand-home-btn:active {
  transform: scale(0.97);
}
.brand-home-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.menu-topline h1 {
  margin: 4px 0 0;
  font-size: clamp(32px, 5vw, 56px);
  letter-spacing: -0.05em;
}
.menu-badge {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(89, 199, 255, 0.24);
  color: var(--accent);
  background: rgba(89, 199, 255, 0.08);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero-grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(380px, 0.88fr);
  gap: 24px;
  align-items: stretch;
}
.hero-copy {
  padding: 18px 0;
  max-width: 700px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(118, 242, 186, 0.24);
  color: var(--accent-3);
  background: rgba(118, 242, 186, 0.08);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero-copy h2 {
  margin: 18px 0 14px;
  font-size: clamp(40px, 5.9vw, 76px);
  line-height: 0.97;
  letter-spacing: -0.055em;
}
.hero-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.75;
  max-width: 620px;
}
.menu-actions, .final-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.menu-preview-card {
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(12, 24, 37, 0.95), rgba(8, 18, 28, 0.92));
  box-shadow: var(--shadow);
}
.preview-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 12px;
}
.preview-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
}
.preview-pill {
  margin-left: auto;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(67, 227, 234, 0.24);
  color: var(--accent);
  background: rgba(67, 227, 234, 0.08);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.preview-scene {
  position: relative;
  min-height: 430px;
  border-radius: 20px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.4)),
    url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1400&q=80') center/cover;
}
.preview-hud-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 16px;
}
.mini-chip {
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(8, 17, 27, 0.72);
  color: rgba(255,255,255,0.9);
  font-size: 12px;
  font-weight: 700;
}
.mini-chip.active {
  color: var(--accent);
  border-color: rgba(67, 227, 234, 0.24);
}
.preview-stats {
  display: flex;
  gap: 10px;
}
.preview-stats div {
  min-width: 84px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 17, 27, 0.72);
}
.preview-stats span, .preview-stats strong { display: block; }
.preview-stats span { font-size: 10px; color: var(--muted); letter-spacing: 0.12em; font-weight: 700; }
.preview-stats strong { margin-top: 5px; font-size: 18px; }
.preview-view { position: absolute; inset: 0; }
.preview-clue {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: min(340px, calc(100% - 32px));
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(7, 17, 28, 0.76);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
  line-height: 1.6;
}
.preview-map-card {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 220px;
  border-radius: 20px;
  padding: 12px;
  background: rgba(7, 17, 28, 0.76);
  border: 1px solid rgba(255,255,255,0.08);
}
.preview-map {
  height: 120px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 35% 40%, rgba(118, 242, 186, 0.24), transparent 22%),
    linear-gradient(180deg, rgba(67, 227, 234, 0.14), rgba(89, 199, 255, 0.02)),
    #102432;
}
.preview-guess-btn {
  margin-top: 12px;
  text-align: center;
  padding: 13px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: #041218;
  font-weight: 900;
  letter-spacing: 0.14em;
}
.menu-stats {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.menu-stats > div {
  padding: 18px 18px 16px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
}
.menu-stats strong, .menu-stats span { display: block; }
.menu-stats strong { font-size: 24px; }
.menu-stats span { margin-top: 5px; color: var(--muted); font-size: 13px; }
.menu-stats.compact {
  margin-top: 28px;
}
.menu-stats.compact strong {
  font-size: 20px;
}

.game-screen {
  align-items: stretch;
  justify-content: center;
  padding: 12px;
}
.game-shell {
  width: 100%;
  height: 100%;
  position: relative;
}
.hud-bar {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 30;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border-radius: 22px;
}
.hud-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hud-brand-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hud-brand-copy strong {
  font-size: 20px;
  letter-spacing: -0.04em;
}
.hud-brand-copy span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.2em;
  white-space: nowrap;
}
.hud-center {
  display: flex;
  justify-content: center;
}
.mode-pill {
  padding: 12px 18px;
  border-radius: 16px;
  border: 1px solid rgba(67, 227, 234, 0.22);
  background: rgba(67, 227, 234, 0.09);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.hud-metrics {
  display: flex;
  gap: 10px;
}
.metric-card {
  position: relative;
  min-width: 112px;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
}
.metric-card span, .metric-card strong { display: block; }
.metric-card span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.metric-card strong {
  margin-top: 4px;
  font-size: 18px;
}
.metric-card-time {
  padding-right: 50px;
}
.timer-ring {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: conic-gradient(var(--accent) 0deg, rgba(255,255,255,0.12) 0deg 360deg);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}
.timer-ring::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: rgba(5, 14, 24, 0.95);
}

.play-stage {
  width: 100%;
  height: 100%;
}
.viewer-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid var(--line);
  background: #08111a;
  box-shadow: var(--shadow);
}
.viewer-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 8, 14, 0.56), transparent 18%, transparent 66%, rgba(3, 9, 14, 0.48));
  pointer-events: none;
  z-index: 2;
}
.streetview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.viewer-overlay {
  position: absolute;
  z-index: 4;
}
.compass-wrap {
  top: 96px;
  left: 22px;
  padding: 14px 18px 18px;
  border-radius: 20px;
}
.compass-row {
  display: flex;
  gap: 22px;
  align-items: center;
  color: #d4e0ea;
  font-weight: 600;
}
.compass-row .active {
  color: var(--accent);
}
.compass-pointer {
  width: 0;
  height: 0;
  margin: 10px auto 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 10px solid var(--accent);
  filter: drop-shadow(0 0 10px rgba(67, 227, 234, 0.8));
}
.top-action-wrap {
  top: 96px;
  right: 22px;
}
.hud-icon-btn {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid var(--line);
  color: var(--text);
  background: rgba(9, 20, 32, 0.75);
  cursor: pointer;
  font-size: 18px;
}
.hud-icon-btn.subtle {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  font-size: 16px;
}
.clue-panel {
  left: 22px;
  bottom: 38px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  width: min(460px, calc(100% - 44px));
  padding: 18px 20px;
  border-radius: 22px;
}
.clue-text {
  margin-top: 8px;
  color: #e5edf4;
  line-height: 1.6;
  font-size: 15px;
}
.clue-hint-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  border: 1px solid rgba(67, 227, 234, 0.24);
  color: var(--accent);
  background: rgba(67, 227, 234, 0.08);
}
.clue-hint-badge span { font-size: 20px; }
.clue-hint-badge strong { margin-top: 3px; font-size: 12px; letter-spacing: 0.12em; }
.utility-footer {
  left: 26px;
  right: 26px;
  bottom: 10px;
  display: flex;
  gap: 22px;
  color: rgba(255,255,255,0.72);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.map-dock {
  right: 22px;
  bottom: 24px;
  width: min(340px, calc(100vw - 44px));
}
.mini-map-card {
  padding: 14px;
  border-radius: 24px;
}
.mini-map-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.mini-map-head strong { display: block; margin-top: 4px; font-size: 17px; }
.mini-map-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.expand-map-btn {
  border-color: rgba(67, 227, 234, 0.22);
  color: var(--accent);
  background: rgba(67, 227, 234, 0.08);
}
.expand-map-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(67, 227, 234, 0.16);
}
.map {
  width: 100%;
  height: 210px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  background: #102432;
}
.map-foot {
  margin-top: 10px;
}
.guess-status {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  min-height: 38px;
}
.guess-cta {
  width: 100%;
  margin-top: 12px;
  border: 0;
  border-radius: 22px;
  padding: 18px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #041218;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  box-shadow: 0 18px 36px rgba(67, 227, 234, 0.24);
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.guess-cta:hover { transform: translateY(-1px); }
.guess-cta:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.guess-cta-icon {
  font-size: 22px;
  line-height: 1;
}
.street-status {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 32px;
  text-align: center;
  background: linear-gradient(135deg, rgba(8, 19, 31, 0.92), rgba(7, 17, 28, 0.84));
}
.fallback-icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: rgba(67, 227, 234, 0.08);
  color: var(--accent);
  font-size: 32px;
  margin-bottom: 14px;
}
.street-status h3 {
  margin: 0;
  font-size: 30px;
  letter-spacing: -0.04em;
}
.street-status p {
  max-width: 520px;
  margin: 12px auto 0;
  color: var(--muted);
  line-height: 1.7;
}

.result-screen, .final-screen {
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: auto;
}
.result-shell, .final-card, .modal-card {
  width: min(1100px, 100%);
  border-radius: 30px;
  padding: 24px;
}
.result-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-end;
  margin-bottom: 18px;
}
.result-header h2, .final-card h2, .modal-card h2 {
  margin: 6px 0 0;
  font-size: clamp(32px, 5vw, 54px);
  letter-spacing: -0.045em;
}
.result-subtext, .final-card p, .modal-card p, .modal-card li {
  color: var(--muted);
  line-height: 1.7;
}
.score-badge {
  min-width: 160px;
  padding: 14px 18px;
  border-radius: 22px;
  border: 1px solid rgba(67, 227, 234, 0.24);
  background: rgba(67, 227, 234, 0.08);
}
.score-badge span, .score-badge strong { display: block; }
.score-badge span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.score-badge strong {
  margin-top: 8px;
  font-size: 34px;
  color: var(--accent);
}
.result-map {
  width: 100%;
  height: min(50vh, 460px);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  background: #102432;
}
.result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.result-stat {
  padding: 18px;
  border-radius: 20px;
}
.result-stat span, .result-stat strong { display: block; }
.result-stat span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
}
.result-stat strong {
  margin-top: 8px;
  font-size: 20px;
}
.final-card {
  width: min(760px, 100%);
  text-align: center;
}
.trophy {
  width: 92px;
  height: 92px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  background: rgba(67, 227, 234, 0.08);
  border: 1px solid rgba(67, 227, 234, 0.18);
  color: var(--accent);
  font-size: 42px;
}
.final-score {
  margin: 24px 0 12px;
  font-size: clamp(58px, 9vw, 100px);
  font-weight: 900;
  letter-spacing: -0.07em;
}
.final-score small {
  color: var(--muted);
  font-size: 18px;
  letter-spacing: normal;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 8, 13, 0.74);
  backdrop-filter: blur(14px);
}
.modal-card {
  position: relative;
  max-height: min(92vh, 860px);
  overflow: auto;
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 24px;
  cursor: pointer;
}
.map-modal {
  place-items: end;
  padding: 22px;
}
.map-modal-card {
  width: min(980px, calc(100vw - 44px));
  height: min(78vh, 760px);
  padding: 22px;
  transform-origin: bottom right;
  animation: mapExpandIn 180ms ease-out;
}
@keyframes mapExpandIn {
  from { opacity: 0; transform: translate(18px, 18px) scale(.96); }
  to { opacity: 1; transform: translate(0, 0) scale(1); }
}
.map-modal-head h3 {
  margin: 8px 0 0;
  font-size: 30px;
  letter-spacing: -0.04em;
}
.large-map {
  width: 100%;
  height: calc(100% - 74px);
  margin-top: 16px;
  border-radius: 22px;
  overflow: hidden;
  background: #102432;
}

.gm-style, .gm-style iframe {
  border-radius: inherit;
}


@media (max-width: 860px) {
  .brand-logo-hud { width: 60px; max-width: 14vw; }
}

@media (max-width: 640px) {
  .brand-logo-menu { width: 105px; }
  .brand-logo-hud { width: 52px; max-width: 16vw; }
}
@media (max-width: 1100px) {
  body { overflow: auto; }
  .screen { height: auto; min-height: 100vh; min-height: 100dvh; }
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hud-bar {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .hud-center {
    justify-content: flex-start;
  }
  .hud-metrics {
    flex-wrap: wrap;
  }
  .game-screen {
    padding: 0;
  }
  .game-shell {
    min-height: 100vh;
    min-height: 100dvh;
  }
  .viewer-frame {
    min-height: 100vh;
    min-height: 100dvh;
    border-radius: 0;
  }
}

@media (max-width: 860px) {
  .menu-topline,
  .result-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .menu-stats,
  .result-grid,
  .menu-stats.compact {
    grid-template-columns: 1fr;
  }
  .hud-brand-copy strong { font-size: 24px; }
  .hud-brand-copy span { letter-spacing: 0.18em; }
  .compass-wrap,
  .clue-panel,
  .map-dock {
    left: 16px;
    right: 16px;
    width: auto;
  }
  .compass-wrap {
    top: 150px;
  }
  .map-dock {
    bottom: 20px;
  }
  .clue-panel {
    bottom: 326px;
  }
  .utility-footer {
    display: none;
  }
  .map {
    height: 170px;
  }
}

@media (max-width: 640px) {
  .menu-screen,
  .result-screen,
  .final-screen { padding: 14px; }
  .menu-shell,
  .result-shell,
  .final-card,
  .modal-card { padding: 18px; border-radius: 24px; }
  .brand-mark { width: 54px; height: 54px; font-size: 20px; border-radius: 18px; }
  .hero-copy h2 { font-size: clamp(34px, 11vw, 52px); }
  .preview-scene { min-height: 360px; }
  .preview-map-card { width: 184px; }
  .hud-bar {
    left: 10px;
    right: 10px;
    top: 10px;
    padding: 12px 14px;
    gap: 12px;
  }
  .mode-pill { padding: 10px 14px; }
  .metric-card {
    min-width: 96px;
    padding: 10px 12px;
  }
  .metric-card strong { font-size: 16px; }
  .street-status h3 { font-size: 24px; }
  .clue-panel {
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
  }
  .clue-hint-badge {
    width: 54px;
    height: 54px;
    border-radius: 16px;
  }
  .guess-cta {
    padding: 16px;
    letter-spacing: 0.14em;
  }
}

/* Premium interaction layer */
.screen.active {
  animation: screenFadeIn 360ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes screenFadeIn {
  from { opacity: 0; transform: scale(.992); }
  to { opacity: 1; transform: scale(1); }
}
.viewer-frame.round-enter .streetview {
  animation: panoramaReveal 650ms ease-out both;
}
@keyframes panoramaReveal {
  from { opacity: .25; filter: blur(8px) saturate(.7); transform: scale(1.01); }
  to { opacity: 1; filter: blur(0) saturate(1); transform: scale(1); }
}

.mode-config {
  position: relative;
  z-index: 1;
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr auto;
  gap: 14px;
  padding: 16px;
  border-radius: 22px;
}
.mode-config-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.segmented {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.segment,
.sound-toggle {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 14px;
  color: var(--muted);
  background: rgba(255,255,255,.04);
  font-weight: 800;
  cursor: pointer;
  transition: .2s ease;
}
.segment:hover,
.sound-toggle:hover {
  color: var(--text);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}
.segment.active,
.sound-toggle.active {
  color: #041218;
  border-color: rgba(67,227,234,.35);
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  box-shadow: 0 10px 22px rgba(67,227,234,.15);
}
.sound-group { min-width: 130px; }
.status-retry { margin-top: 18px; }

.timer-ring.warning {
  box-shadow: 0 0 22px rgba(255, 176, 74, .35);
}
.timer-ring.danger {
  box-shadow: 0 0 26px rgba(255, 90, 110, .48);
  animation: ttTimerDangerPulse .8s ease-in-out infinite;
}
.timer-ring.critical {
  box-shadow: 0 0 34px rgba(255, 54, 84, .72);
  animation: ttTimerCriticalPulse .42s ease-in-out infinite;
}
.metric-card-time.warning strong { color: #ffc36a; }
.metric-card-time.danger strong { color: #ff7b91; }
.metric-card-time.critical strong { color: #ff4968; text-shadow: 0 0 16px rgba(255,73,104,.62); }
.metric-card-time.critical { animation: ttTimerCriticalCard .42s ease-in-out infinite; }
@keyframes ttTimerDangerPulse { 50% { transform: scale(1.045); box-shadow: 0 0 32px rgba(255, 90, 110, .62); } }
@keyframes ttTimerCriticalPulse { 50% { transform: scale(1.10); box-shadow: 0 0 42px rgba(255, 54, 84, .88); } }
@keyframes ttTimerCriticalCard { 50% { filter: brightness(1.16); } }

.cinematic-screen {
  background:
    radial-gradient(circle at 50% 12%, rgba(67,227,234,.13), transparent 28%),
    linear-gradient(180deg, #06111b, #040b12);
}
.cinematic-card {
  position: relative;
  overflow: hidden;
}
.cinematic-card::before {
  content: "";
  position: absolute;
  inset: -30% 0 auto;
  height: 280px;
  background: radial-gradient(circle, rgba(67,227,234,.13), transparent 60%);
  pointer-events: none;
}
.cinematic-map-wrap {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 22px 54px rgba(0,0,0,.35);
}
.result-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 80px rgba(0,0,0,.3);
  background: linear-gradient(180deg, transparent 65%, rgba(2,8,13,.22));
}
.result-map-label {
  position: absolute;
  z-index: 3;
  top: 16px;
  padding: 8px 11px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
}
.guess-label {
  left: 16px;
  color: #dce8f0;
  background: rgba(7,17,28,.76);
}
.actual-label {
  right: 16px;
  color: #041218;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
}
.result-shell.result-perfect .score-badge {
  animation: scorePop 600ms cubic-bezier(.2,1.2,.2,1) both;
  box-shadow: 0 0 42px rgba(67,227,234,.2);
}
@keyframes scorePop {
  0% { transform: scale(.75); opacity: .2; }
  65% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

@media (max-width: 860px) {
  .mode-config { grid-template-columns: 1fr; }
  .sound-group { min-width: 0; }
}

@media (max-width: 700px) {
  .map-modal { padding: 10px; }
  .map-modal-card {
    width: calc(100vw - 20px);
    height: min(82vh, 720px);
    border-radius: 22px;
  }
}

/* Daily Challenge + persistent stats */
.btn-daily {
  color: #071018;
  background: linear-gradient(135deg, #ffd56a, #ff9e57);
  box-shadow: 0 14px 34px rgba(255, 172, 81, .2);
}
.btn-daily:hover { box-shadow: 0 18px 38px rgba(255, 172, 81, .26); }
.daily-status-text {
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.final-record-text {
  min-height: 24px;
  margin: 8px 0 2px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Expanded map action dock: submit without closing the map. */
.map-modal-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.large-map {
  flex: 1;
  height: auto;
  min-height: 260px;
}
.expanded-map-footer {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 14px;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.expanded-map-status {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.expanded-guess-cta {
  margin-top: 0;
  min-height: 56px;
}

@media (max-width: 700px) {
  .expanded-map-footer {
    grid-template-columns: 1fr;
  }
  .expanded-guess-cta {
    width: 100%;
  }
}


/* =========================
   Multiplayer foundation
   ========================= */
.multiplayer-screen,
.lobby-screen {
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: auto;
}

.multiplayer-shell,
.lobby-shell {
  position: relative;
  width: min(780px, 100%);
  padding: 36px;
  border-radius: 30px;
}

.multiplayer-shell h2,
.lobby-shell h2 {
  margin: 8px 0;
  font-size: clamp(36px, 6vw, 60px);
  letter-spacing: -0.05em;
}

.multiplayer-back {
  left: auto;
  right: 14px;
}

.multiplayer-form {
  margin-top: 28px;
  display: grid;
  gap: 16px;
}

.multiplayer-form label {
  display: grid;
  gap: 8px;
}

.multiplayer-form label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.multiplayer-form input {
  width: 100%;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  outline: 0;
  background: rgba(255,255,255,.05);
  color: var(--text);
  font: inherit;
  font-size: 17px;
}

.multiplayer-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(67,227,234,.1);
}

.room-code-input {
  text-transform: uppercase;
  letter-spacing: .22em;
  font-weight: 900 !important;
}

.multiplayer-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
}
.multiplayer-divider::before,
.multiplayer-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

.multiplayer-error {
  min-height: 22px;
  color: #ff7b88;
  line-height: 1.5;
}

.lobby-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

#lobbyRoomCode {
  color: var(--accent);
  letter-spacing: .08em;
}

.lobby-meta {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.lobby-meta > div {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}

.lobby-meta span,
.lobby-meta strong { display: block; }
.lobby-meta span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}
.lobby-meta strong { margin-top: 6px; }

.lobby-player-card {
  margin-top: 18px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.025);
}

.lobby-player-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.lobby-player-heading h3 { margin: 5px 0 0; }

.lobby-player-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.lobby-player {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
}

.lobby-player-name { font-weight: 700; }
.lobby-player-name small {
  margin-left: 8px;
  color: var(--accent);
  font-size: 10px;
  letter-spacing: .1em;
}
.lobby-ready,
.lobby-not-ready {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}
.lobby-ready { color: var(--accent-3); }
.lobby-not-ready { color: var(--muted); }

.lobby-status {
  margin-top: 18px;
  text-align: center;
  color: var(--muted);
  min-height: 24px;
}

@media (max-width: 640px) {
  .multiplayer-screen, .lobby-screen { padding: 14px; }
  .multiplayer-shell, .lobby-shell { padding: 24px 18px; }
  .lobby-header { align-items: flex-start; flex-direction: column; }
  .lobby-meta { grid-template-columns: 1fr; }
}

/* =========================
   Multiplayer round engine
   ========================= */
.mp-waiting-overlay {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 8;
  width: min(520px, calc(100% - 40px));
  padding: 28px;
  border-radius: 26px;
  text-align: center;
}
.mp-waiting-overlay h3 { margin: 4px 0 8px; font-size: 30px; letter-spacing: -.04em; }
.mp-waiting-overlay p { color: var(--muted); }
.mp-waiting-players { display: grid; gap: 8px; margin-top: 16px; text-align: left; }
.mp-waiting-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
}
.mp-waiting-player strong { font-size: 13px; }
.mp-waiting-player span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.mp-waiting-player .done { color: var(--accent-3); }

.mp-leaderboard-wrap { margin-top: 14px; padding: 18px; border-radius: 22px; }
.mp-leaderboard { display: grid; gap: 10px; margin-top: 14px; }
.mp-leader-row {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.035);
}
.mp-leader-row.me { border-color: rgba(67,227,234,.34); background: rgba(67,227,234,.07); }
.mp-rank { color: var(--accent); font-weight: 900; font-size: 18px; }
.mp-player-name { font-weight: 800; }
.mp-round-points { color: var(--accent-3); font-weight: 900; }
.mp-total-points { color: var(--muted); font-size: 12px; font-weight: 800; }
.mp-final-leaderboard { margin-top: 24px; text-align: left; }

@media (max-width: 640px) {
  .mp-leader-row { grid-template-columns: 40px minmax(0,1fr) auto; }
  .mp-total-points { grid-column: 2 / -1; }
}

/* Multiplayer result-map recovery state */
.mp-map-fallback {
  width: 100%;
  height: 100%;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px;
  text-align: center;
  color: var(--muted);
  background:
    radial-gradient(circle at 50% 35%, rgba(67, 227, 234, 0.08), transparent 30%),
    #102432;
}
.mp-map-fallback strong {
  color: var(--text);
  font-size: 20px;
}
.mp-map-fallback span {
  max-width: 460px;
  line-height: 1.6;
}
.mp-map-fallback .btn {
  margin-top: 6px;
}

/* Multiplayer leave + realtime notices */
.hud-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.leave-game-btn {
  border: 1px solid rgba(255, 108, 122, 0.34);
  border-radius: 14px;
  padding: 10px 14px;
  color: #ffd7dc;
  background: rgba(115, 24, 38, 0.42);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.leave-game-btn:hover {
  transform: translateY(-1px);
  background: rgba(150, 30, 49, 0.56);
  border-color: rgba(255, 127, 141, 0.56);
}

.game-toast-host {
  position: fixed;
  top: 92px;
  left: 50%;
  z-index: 1600;
  display: grid;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
  transform: translateX(-50%);
  pointer-events: none;
}
.game-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(7, 18, 29, .94);
  color: var(--text);
  box-shadow: 0 18px 45px rgba(0,0,0,.34);
  backdrop-filter: blur(16px);
  animation: toastIn .22s ease both;
}
.game-toast.leave { border-color: rgba(255, 111, 127, .32); }
.game-toast.disconnect { border-color: rgba(255, 194, 92, .32); }
.game-toast.reconnect { border-color: rgba(118, 242, 186, .32); }
.game-toast-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  font-weight: 900;
}
.game-toast-text { font-size: 14px; font-weight: 700; }
.game-toast.out { animation: toastOut .2s ease both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-8px) scale(.98); } }

/* Keep player names visible on multiplayer result markers. */
.mp-player-map-label {
  text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.9);
}

@media (max-width: 760px) {
  .leave-game-btn { padding: 9px 10px; font-size: 10px; }
  .game-toast-host { top: 150px; }
}


.game-toast.locked { border-color: rgba(67, 227, 234, .36); }
.game-toast.locked .game-toast-icon { color: var(--accent); background: rgba(67, 227, 234, .1); }

.mp-player-info-pill {
  display: grid;
  gap: 2px;
  min-width: 92px;
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(7, 18, 29, .94);
  color: #fff;
  border: 1px solid rgba(67, 227, 234, .28);
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
.mp-player-info-pill strong { font-size: 12px; line-height: 1.1; }
.mp-player-info-pill span { font-size: 10px; color: #9db0bf; }

.mp-result-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.btn-danger-soft {
  color: #ffd7dc;
  background: rgba(115, 24, 38, .38);
  border: 1px solid rgba(255, 108, 122, .32);
}
.btn-danger-soft:hover { background: rgba(150, 30, 49, .52); }

/* Champion celebration */
.mp-champion-screen {
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 215, 90, .14), transparent 28%),
    radial-gradient(circle at 50% 30%, rgba(67, 227, 234, .08), transparent 34%);
}
.mp-champion-card {
  position: relative;
  overflow: hidden;
  width: min(860px, 100%);
}
.mp-champion-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: -4px -4px 24px;
  padding: 34px 24px 30px;
  border-radius: 28px;
  border: 1px solid rgba(255, 216, 102, .24);
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 218, 102, .20), transparent 32%),
    linear-gradient(180deg, rgba(38, 32, 16, .72), rgba(7, 18, 29, .76));
  text-align: center;
  box-shadow: inset 0 0 42px rgba(255, 215, 90, .06), 0 18px 60px rgba(0,0,0,.28);
  animation: championStageIn .7s cubic-bezier(.2,.85,.25,1) both;
}
.mp-champion-crown {
  width: 82px;
  height: 82px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 26px;
  font-size: 48px;
  line-height: 1;
  color: #ffe07a;
  background: radial-gradient(circle, rgba(255, 224, 122, .18), rgba(255, 224, 122, .04));
  border: 1px solid rgba(255, 224, 122, .28);
  filter: drop-shadow(0 0 18px rgba(255, 214, 80, .28));
  animation: championCrown 1.4s ease-in-out infinite alternate;
}
.mp-champion-stage h2 {
  margin: 7px 0 6px;
  font-size: clamp(44px, 8vw, 78px);
  letter-spacing: -.055em;
  background: linear-gradient(180deg, #fff9da, #f5c95d 70%, #dca72e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 10px 34px rgba(230, 176, 52, .15);
}
.mp-champion-score {
  margin-top: 6px;
  color: #d9e7f1;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .12em;
}
.mp-champion-score span {
  color: var(--accent-3);
  font-size: 30px;
  letter-spacing: -.03em;
}
.mp-champion-badge {
  display: inline-flex;
  margin-top: 16px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 224, 122, .34);
  color: #ffe48a;
  background: rgba(255, 224, 122, .08);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
}
.mp-final-label { margin-top: 2px; text-align: left; }
.mp-final-title {
  margin: 7px 0 0;
  text-align: left;
  font-size: 30px;
  letter-spacing: -.04em;
}
.mp-leader-row.champion-row {
  border-color: rgba(255, 220, 95, .42);
  background: linear-gradient(90deg, rgba(255, 220, 95, .10), rgba(67, 227, 234, .05));
  box-shadow: 0 0 0 1px rgba(255, 220, 95, .05), 0 10px 28px rgba(0,0,0,.16);
  animation: championRowPulse 1.6s ease-in-out infinite alternate;
}
.mp-leader-row.champion-row .mp-rank { color: #ffe06e; }
.mp-champion-confetti {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.mp-confetti-piece {
  --x: 50%;
  --delay: 0s;
  --duration: 3s;
  --drift: 0px;
  --spin: 720deg;
  --size: 8px;
  position: absolute;
  left: var(--x);
  top: -20px;
  width: var(--size);
  height: calc(var(--size) * 1.8);
  border-radius: 2px;
  background: linear-gradient(180deg, #ffe16a, #43e3ea);
  opacity: 0;
  animation: championConfetti var(--duration) var(--delay) cubic-bezier(.18,.8,.28,1) forwards;
}
@keyframes championStageIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes championCrown {
  from { transform: translateY(0) rotate(-2deg) scale(1); }
  to { transform: translateY(-5px) rotate(2deg) scale(1.04); }
}
@keyframes championRowPulse {
  from { box-shadow: 0 0 0 rgba(255, 220, 95, 0); }
  to { box-shadow: 0 0 26px rgba(255, 220, 95, .10); }
}
@keyframes championConfetti {
  0% { opacity: 0; transform: translate3d(0,-15px,0) rotate(0deg); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--drift), 360px, 0) rotate(var(--spin)); }
}

/* Extra black-map hardening: keep Google containers composited and opaque. */
.map,
.large-map,
.result-map,
#mpResultMap {
  isolation: isolate;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout paint;
  background: #102432;
}
.map > div,
.large-map > div,
.result-map > div,
#mpResultMap > div {
  min-width: 100%;
  min-height: 100%;
}

@media (max-width: 640px) {
  .mp-champion-stage { padding: 26px 14px 24px; }
  .mp-champion-crown { width: 68px; height: 68px; font-size: 40px; border-radius: 22px; }
  .mp-final-title { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .mp-champion-stage,
  .mp-champion-crown,
  .mp-leader-row.champion-row,
  .mp-confetti-piece {
    animation: none !important;
  }
}


.mp-final-actions {
  justify-content: center;
  align-items: center;
}
.mp-final-actions .btn {
  min-width: 170px;
}


/* Final pre-launch lobby copy control */
.lobby-room-code-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.lobby-room-code-row h2 {
  margin-right: 2px;
}
.btn-copy-room {
  padding: 9px 14px;
  border-radius: 12px;
  color: var(--accent);
  border: 1px solid rgba(67, 227, 234, .28);
  background: rgba(67, 227, 234, .08);
  box-shadow: none;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.btn-copy-room:hover {
  background: rgba(67, 227, 234, .14);
}
.btn-copy-room.copied {
  color: #06150f;
  background: var(--accent-3);
  border-color: transparent;
}

/* =========================================================
   Accounts / profile / skin shop foundation
   ========================================================= */
.menu-top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.account-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 178px;
  padding: 8px 10px 8px 8px;
  border-radius: 18px;
  border: 1px solid var(--line);
  color: var(--text);
  background: rgba(255,255,255,.045);
  cursor: pointer;
  text-align: left;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.account-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(67,227,234,.28);
  background: rgba(67,227,234,.07);
}
.account-avatar,
.profile-avatar-large {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 16px;
  color: #06150f;
  font-weight: 900;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  box-shadow: 0 10px 22px rgba(67,227,234,.18);
  overflow: hidden;
}
.account-avatar {
  width: 38px;
  height: 38px;
  font-size: 14px;
}
.profile-avatar-large {
  width: 82px;
  height: 82px;
  border-radius: 26px;
  font-size: 28px;
}
.account-avatar img,
.profile-avatar-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.account-copy strong {
  max-width: 108px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.account-copy small {
  margin-top: 3px;
  color: var(--accent-3);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
}
.account-chevron { color: var(--muted); }
.account-card { width: min(720px, 100%); }
.account-profile-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-right: 42px;
}
.account-profile-head h2 { margin-bottom: 4px; }
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin: 24px 0;
}
.profile-stats-grid > div,
.shop-wallet {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.035);
}
.profile-stats-grid span,
.profile-stats-grid strong,
.shop-wallet span,
.shop-wallet strong { display: block; }
.profile-stats-grid span,
.shop-wallet span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}
.profile-stats-grid strong,
.shop-wallet strong {
  margin-top: 6px;
  font-size: 22px;
}
.social-auth-panel,
.signed-in-panel {
  padding: 18px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.025);
}
.social-auth-panel p { color: var(--muted); line-height: 1.6; }
.social-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 14px;
}
.social-btn {
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.055);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}
.social-btn:hover { border-color: rgba(255,255,255,.22); }
.social-btn.google { box-shadow: inset 3px 0 0 #4285f4; }
.profile-name-edit label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.profile-name-row {
  display: flex;
  gap: 10px;
}
.profile-name-row input {
  min-width: 0;
  flex: 1;
  padding: 13px 15px;
  border-radius: 14px;
  border: 1px solid var(--line);
  outline: 0;
  background: rgba(255,255,255,.05);
  color: var(--text);
}
.profile-name-row input:focus { border-color: var(--accent); }
.profile-actions-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.account-status {
  min-height: 20px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}
.account-status.error { color: #ff8794; }
.account-status.success { color: var(--accent-3); }
.shop-card { width: min(1050px, 100%); }
.shop-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding-right: 46px;
}
.shop-wallet { min-width: 130px; }
.skin-shop-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  margin-top: 22px;
}
.skin-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
}
.skin-card.equipped { border-color: rgba(67,227,234,.42); box-shadow: 0 0 28px rgba(67,227,234,.08); }
.skin-preview {
  height: 130px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), transparent 20%), var(--skin-bg, #163344);
}
.skin-preview-badge {
  width: 70px;
  height: 70px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  color: var(--skin-fg, white);
  font-weight: 900;
  font-size: 22px;
  background: var(--skin-accent, #43e3ea);
  box-shadow: 0 15px 34px rgba(0,0,0,.28);
}
.skin-card h3 { margin: 0; font-size: 18px; }
.skin-rarity {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}
.skin-price {
  margin-top: 12px;
  color: var(--accent-3);
  font-weight: 800;
}
.skin-card .btn { width: 100%; margin-top: 12px; padding: 11px 12px; }
.shop-economy-note {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,220,95,.14);
  background: rgba(255,220,95,.055);
}
.shop-economy-note span { color: var(--muted); font-size: 13px; line-height: 1.5; }

/* Equipped profile skin themes */
body[data-profile-skin="explorer"] .account-avatar,
body[data-profile-skin="explorer"] .profile-avatar-large { background: linear-gradient(135deg, #43e3ea, #76f2ba); }
body[data-profile-skin="neon-cyan"] .account-avatar,
body[data-profile-skin="neon-cyan"] .profile-avatar-large { background: linear-gradient(135deg, #00f0ff, #3875ff); color: white; box-shadow: 0 0 26px rgba(0,240,255,.25); }
body[data-profile-skin="sabah-sunset"] .account-avatar,
body[data-profile-skin="sabah-sunset"] .profile-avatar-large { background: linear-gradient(135deg, #ff8a42, #ff4f88); color: white; box-shadow: 0 0 26px rgba(255,94,100,.22); }
body[data-profile-skin="champion-gold"] .account-avatar,
body[data-profile-skin="champion-gold"] .profile-avatar-large { background: linear-gradient(135deg, #ffe173, #c99019); color: #231600; box-shadow: 0 0 28px rgba(255,215,70,.28); }

@media (max-width: 900px) {
  .menu-top-actions { flex-wrap: wrap; justify-content: flex-end; }
  .skin-shop-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .menu-top-actions { width: 100%; justify-content: stretch; }
  .account-pill { flex: 1; }
  .menu-badge { display: none; }
  .profile-stats-grid,
  .social-buttons,
  .skin-shop-grid { grid-template-columns: 1fr; }
  .account-profile-head,
  .shop-header { align-items: flex-start; flex-direction: column; }
  .profile-name-row { flex-direction: column; }
}

/* =========================================================
   TOMMYTRACE AVATAR + WARDROBE V1
   ========================================================= */

.character-preview {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 180px;
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--avatar-accent, #43e3ea) 28%, transparent), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.08);
}

.character-preview-large { min-height: 330px; }
.shop-character-preview { width: min(280px, 100%); min-height: 240px; margin: 10px auto 20px; }

.character-stage {
  position: relative;
  width: 210px;
  height: 280px;
  display: grid;
  place-items: center;
}

.character-stage.compact {
  width: 42px;
  height: 42px;
  transform: scale(.72);
}

.character-glow {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--avatar-accent, #43e3ea) 28%, transparent), transparent 70%);
  filter: blur(5px);
}

.character-face {
  position: absolute;
  top: 36px;
  font-size: 92px;
  line-height: 1;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.32));
  z-index: 2;
}

.character-cosmetic {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.28));
}
.character-hat { top: 7px; font-size: 54px; }
.character-glasses { top: 84px; font-size: 40px; }
.character-shirt { top: 154px; font-size: 76px; z-index: 1; }
.character-shoes { bottom: 4px; font-size: 48px; }

.account-avatar .character-stage,
.profile-avatar-large .character-stage {
  transform-origin: center;
}
.account-avatar .character-stage { transform: scale(.42); }
.profile-avatar-large .character-stage { transform: scale(.62); }
.account-avatar.character-preview-ready,
.profile-avatar-large.character-preview-ready {
  overflow: hidden;
  padding: 0;
}

.avatar-picker-modal { z-index: 1200; }
.avatar-picker-card { width: min(1080px, 100%); }
.avatar-picker-kicker {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
}
.avatar-picker-card h2 { margin-bottom: 8px; }
.avatar-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.avatar-choice-card {
  position: relative;
  min-height: 190px;
  padding: 18px;
  display: grid;
  align-content: end;
  text-align: left;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text);
  background:
    radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--avatar-accent, #43e3ea) 24%, transparent), transparent 32%),
    rgba(255,255,255,.035);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.avatar-choice-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--avatar-accent, #43e3ea) 65%, white 8%);
  box-shadow: 0 16px 34px rgba(0,0,0,.26);
}
.avatar-choice-card.selected { box-shadow: inset 0 0 0 2px var(--avatar-accent, #43e3ea); }
.avatar-choice-art {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 76px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.28));
}
.avatar-choice-copy strong,
.avatar-choice-copy span { display: block; }
.avatar-choice-copy strong { font-size: 18px; }
.avatar-choice-copy span { color: var(--muted); font-size: 12px; margin-top: 4px; line-height: 1.4; }
.avatar-choice-card small {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 8px;
  border-radius: 999px;
  color: #06151a;
  background: var(--accent-3);
  font-weight: 900;
  font-size: 9px;
  letter-spacing: .12em;
}

.customize-card { width: min(1000px, 100%); }
.customize-layout {
  display: grid;
  grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr);
  gap: 24px;
}
.customize-preview-panel {
  text-align: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255,255,255,.025);
}
.customize-preview-panel h3 { margin: 14px 0; font-size: 28px; }
.wardrobe-panel h2 { margin: 5px 0 18px; }
.wardrobe-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.wardrobe-slot {
  min-height: 122px;
  padding: 16px;
  display: grid;
  gap: 5px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.035);
  color: var(--text);
  cursor: pointer;
  transition: .18s ease;
}
.wardrobe-slot:hover { transform: translateY(-2px); border-color: rgba(67,227,234,.32); }
.wardrobe-slot > span { font-size: 34px; }
.wardrobe-slot > strong { font-size: 15px; }
.wardrobe-slot > small { color: var(--muted); font-size: 11px; }

.shop-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px;
  padding: 6px;
  margin: 12px 0 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.025);
}
.shop-tab {
  border: 0;
  border-radius: 13px;
  padding: 11px 12px;
  color: var(--muted);
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}
.shop-tab.active {
  color: #071018;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
}

.cosmetic-shop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.cosmetic-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 10px;
  padding: 17px;
  min-height: 270px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.cosmetic-card.equipped { box-shadow: inset 0 0 0 1px var(--accent); }
.cosmetic-card.rarity-rare { border-color: rgba(89,199,255,.24); }
.cosmetic-card.rarity-epic { border-color: rgba(186,112,255,.28); }
.cosmetic-card.rarity-legendary { border-color: rgba(255,216,91,.32); }
.cosmetic-card.rarity-champion { border-color: rgba(67,227,234,.45); box-shadow: 0 0 24px rgba(67,227,234,.08); }
.cosmetic-icon {
  height: 86px;
  display: grid;
  place-items: center;
  font-size: 58px;
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}
.cosmetic-info h3 { margin: 4px 0 5px; font-size: 18px; }
.cosmetic-info p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.cosmetic-rarity { color: var(--accent); font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.cosmetic-price { font-weight: 900; font-size: 14px; }

@media (max-width: 900px) {
  .avatar-picker-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .customize-layout { grid-template-columns: 1fr; }
  .cosmetic-shop-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .avatar-picker-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .wardrobe-slots { grid-template-columns: 1fr; }
  .shop-tabs { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cosmetic-shop-grid { grid-template-columns: 1fr; }
  .character-stage { transform: scale(.9); }
}

/* === Progression V10 === */
.profile-xp-track{height:10px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;margin:12px 0 18px;border:1px solid var(--line)}
.profile-xp-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-3));box-shadow:0 0 18px rgba(67,227,234,.4);transition:width .45s ease}
.profile-best-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}
.profile-best-grid>div{padding:12px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.profile-best-grid span,.profile-best-grid strong{display:block}.profile-best-grid span{font-size:9px;letter-spacing:.12em;color:var(--muted);font-weight:800}.profile-best-grid strong{margin-top:5px;font-size:16px}
.profile-history-block{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.profile-match-history{display:grid;gap:8px;margin-top:10px;max-height:220px;overflow:auto;padding-right:4px}
.profile-history-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:11px 12px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid var(--line)}
.profile-history-row strong{font-size:13px}.profile-history-row span{font-size:11px;color:var(--muted)}.profile-history-row b{font-size:12px;color:var(--accent);font-weight:800}.profile-history-row--rewarded-ad{background:linear-gradient(180deg,rgba(255,215,92,.08),rgba(255,255,255,.03));border-color:rgba(255,215,92,.18)}.profile-history-row--rewarded-ad strong{color:#ffe48d}.profile-history-row--rewarded-ad b{color:#ffd96b}.history-empty{color:var(--muted);font-size:13px;padding:10px 0}
.lobby-player-main{display:flex;align-items:center;gap:12px;min-width:0}.lobby-mini-avatar,.leader-mini-avatar{position:relative;display:grid;place-items:center;flex:0 0 auto;border-radius:14px;background:rgba(255,255,255,.055);border:1px solid var(--line);overflow:hidden}.lobby-mini-avatar{width:48px;height:48px;font-size:26px}.leader-mini-avatar{width:38px;height:38px;font-size:21px;border-radius:12px}
.mini-cosmetic{position:absolute;pointer-events:none;line-height:1}.mini-hat{top:-2px;font-size:19px}.mini-glasses{top:18px;font-size:15px}.mini-shirt{bottom:-3px;left:4px;font-size:15px}.mini-shoes{bottom:-4px;right:3px;font-size:12px}.player-level-chip{display:inline-flex;margin-left:6px;padding:3px 6px;border-radius:999px;background:rgba(67,227,234,.09);border:1px solid rgba(67,227,234,.18);font-size:9px!important;color:var(--accent)!important;letter-spacing:.06em}
.mp-player-copy{display:flex;align-items:center;gap:10px;min-width:0;flex:1}.mp-leader-row{grid-template-columns:auto minmax(0,1fr) auto auto auto!important}
.mp-champion-avatar{position:relative;width:112px;height:112px;margin:8px auto 12px;display:grid;place-items:center;border-radius:34px;background:radial-gradient(circle,rgba(67,227,234,.18),rgba(255,255,255,.035));border:1px solid rgba(67,227,234,.24);font-size:62px;box-shadow:0 0 50px rgba(67,227,234,.14)}
.mp-champion-avatar .mini-hat{top:-8px;font-size:38px}.mp-champion-avatar .mini-glasses{top:40px;font-size:28px}.mp-champion-avatar .mini-shirt{bottom:-10px;left:10px;font-size:30px}.mp-champion-avatar .mini-shoes{bottom:-10px;right:10px;font-size:24px}
.progression-reward-card{width:min(520px,100%);text-align:center;overflow:hidden}.reward-burst{width:78px;height:78px;margin:0 auto 14px;display:grid;place-items:center;border-radius:24px;background:rgba(67,227,234,.1);color:var(--accent);font-size:38px;animation:rewardPulse 1.4s ease-in-out infinite}.reward-placement{color:var(--muted);margin:6px 0 20px}.reward-items{display:grid;grid-template-columns:1fr 1fr;gap:12px}.reward-item{padding:18px;border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.04)}.reward-item span,.reward-item strong{display:block}.reward-item span{font-size:10px;letter-spacing:.15em;color:var(--muted);font-weight:800}.reward-item strong{margin-top:7px;font-size:22px}.reward-item.xp strong{color:var(--accent)}.reward-item.coins strong{color:#ffd76b}.reward-level{margin:16px 0;padding:12px;border-radius:16px;background:rgba(255,255,255,.035);font-weight:800}.reward-level.level-up{color:#ffd76b;animation:levelPop .65s cubic-bezier(.2,.8,.2,1)}
@keyframes rewardPulse{50%{transform:scale(1.08);box-shadow:0 0 35px rgba(67,227,234,.2)}}@keyframes levelPop{0%{transform:scale(.75);opacity:.3}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@media(max-width:640px){.profile-best-grid{grid-template-columns:1fr}.profile-history-row{grid-template-columns:1fr auto}.profile-history-row b{grid-column:1/-1}.reward-items{grid-template-columns:1fr}.mp-leader-row{grid-template-columns:auto minmax(0,1fr) auto!important}.mp-total-points{display:none}}


/* === V10.3 Avatar/Profile + shop lock feedback === */
.account-avatar,
.profile-avatar-large {
  background: linear-gradient(145deg, rgba(15,31,44,.96), rgba(8,20,30,.96));
  border: 1px solid color-mix(in srgb, var(--avatar-accent, #43e3ea) 35%, rgba(255,255,255,.08));
}
.avatar-bust {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--avatar-accent, #43e3ea) 30%, transparent), transparent 58%),
    linear-gradient(145deg, rgba(255,255,255,.05), transparent 64%);
}
.avatar-bust::after {
  content: '';
  position: absolute;
  inset: auto 10% -26% 10%;
  height: 54%;
  border-radius: 50% 50% 18% 18%;
  background: color-mix(in srgb, var(--avatar-accent, #43e3ea) 24%, #132230);
  z-index: -1;
}
.avatar-bust-face { position: absolute; top: 12%; font-size: 47px; line-height: 1; z-index: 2; filter: drop-shadow(0 7px 10px rgba(0,0,0,.28)); }
.avatar-bust-hat { position: absolute; top: -3%; font-size: 30px; z-index: 5; }
.avatar-bust-glasses { position: absolute; top: 34%; font-size: 22px; z-index: 6; }
.avatar-bust-shirt { position: absolute; bottom: -3%; font-size: 34px; z-index: 1; }
.avatar-bust.mini .avatar-bust-face { top: 12%; font-size: 28px; }
.avatar-bust.mini .avatar-bust-hat { top: -4%; font-size: 18px; }
.avatar-bust.mini .avatar-bust-glasses { top: 35%; font-size: 13px; }
.avatar-bust.mini .avatar-bust-shirt { bottom: -10%; font-size: 21px; }

.customize-preview-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.cosmetic-card.locked {
  border-color: rgba(255,255,255,.07);
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012));
}
.cosmetic-card.locked .cosmetic-info,
.cosmetic-card.locked .cosmetic-price { opacity: .68; }
.cosmetic-card.affordable {
  border-color: color-mix(in srgb, var(--accent) 42%, rgba(255,255,255,.08));
  box-shadow: inset 0 0 0 1px rgba(67,227,234,.07), 0 12px 28px rgba(0,0,0,.12);
}
.cosmetic-icon { position: relative; cursor: pointer; user-select: none; }
.cosmetic-lock-badge {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 14px;
  background: rgba(5,12,19,.88);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
}
.cosmetic-price small { display: block; margin-top: 3px; color: #ffb6a8; font-size: 10px; font-weight: 800; }
.locked-buy-btn { cursor: pointer !important; opacity: .78; filter: saturate(.65); }

@keyframes shopRejectShake {
  0%,100% { transform: translateX(0) rotate(0); }
  18% { transform: translateX(-8px) rotate(-2deg); }
  36% { transform: translateX(7px) rotate(2deg); }
  54% { transform: translateX(-5px) rotate(-1deg); }
  72% { transform: translateX(4px) rotate(1deg); }
  88% { transform: translateX(-2px); }
}
.shop-reject-shake { animation: shopRejectShake .48s cubic-bezier(.36,.07,.19,.97); }

.reward-earned-text {
  margin: -2px 0 10px;
  color: #dffcff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
}


/* =========================================================
   TOMMYTRACE BOSS DEMO V11 · CINEMATIC 3D CHARACTER SHOWROOM
   ========================================================= */
:root{--tt-gold:#ffd65a;--tt-pink:#ff5bbb;--tt-purple:#a875ff;--tt-blue:#4aa8ff;--tt-green:#67f3a6}
.customize-card,.shop-card{overflow:hidden;background:linear-gradient(145deg,rgba(7,20,31,.98),rgba(9,17,33,.97));box-shadow:0 32px 100px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.05)}
.showroom-shell,.shop-showroom{position:relative;isolation:isolate;overflow:hidden;border:1px solid rgba(89,213,255,.16);border-radius:28px;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--avatar-accent,#43e3ea) 18%,transparent),transparent 34%),linear-gradient(180deg,#0c2130 0%,#09141e 68%,#070d13 100%);box-shadow:inset 0 0 60px rgba(43,198,255,.04),0 22px 55px rgba(0,0,0,.28)}
.shop-showroom{width:min(420px,100%);margin:8px auto 18px;padding:0 26px 30px}.showroom-shell{padding:0 18px 36px}
.showroom-rays{position:absolute;inset:-35%;z-index:-3;background:repeating-conic-gradient(from 0deg,rgba(71,222,255,.08) 0 7deg,transparent 7deg 18deg);animation:ttRaySpin 26s linear infinite;mask-image:radial-gradient(circle,black,transparent 65%)}
.showroom-orbit{position:absolute;left:50%;top:46%;width:74%;aspect-ratio:1;border:1px solid rgba(87,230,255,.22);border-radius:50%;transform:translate(-50%,-50%) rotateX(72deg);box-shadow:0 0 34px rgba(65,217,255,.2),inset 0 0 34px rgba(65,217,255,.12);animation:ttOrbitPulse 3s ease-in-out infinite}
.showroom-sparkles span{position:absolute;color:#baf7ff;text-shadow:0 0 14px #4ee6ff;animation:ttSpark 2.6s ease-in-out infinite}.showroom-sparkles span:nth-child(1){left:12%;top:20%}.showroom-sparkles span:nth-child(2){right:14%;top:28%;animation-delay:.55s}.showroom-sparkles span:nth-child(3){left:18%;bottom:22%;animation-delay:1.1s}.showroom-sparkles span:nth-child(4){right:16%;bottom:18%;animation-delay:1.65s}
.showroom-platform{position:absolute;left:50%;bottom:24px;width:72%;height:42px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(63,226,255,.7),rgba(20,108,255,.22) 38%,rgba(3,12,22,.8) 68%);box-shadow:0 0 30px rgba(48,213,255,.36),0 14px 30px rgba(0,0,0,.42);z-index:-1}.showroom-platform:after{content:'';position:absolute;inset:10px 7%;border:2px solid rgba(120,238,255,.8);border-radius:50%;box-shadow:0 0 20px rgba(74,220,255,.7)}
.rotate-hint{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);font-size:9px;white-space:nowrap;letter-spacing:.12em;font-weight:900;color:#99ddea;opacity:.8}
.interactive-character{cursor:grab;touch-action:none;user-select:none;border:0;background:transparent}.interactive-character.is-rotating{cursor:grabbing}
.character-preview-large{min-height:410px}.shop-character-preview{min-height:350px;width:100%;margin:0;background:transparent;border:0}
.tt3d-stage{width:250px;height:360px;perspective:900px;overflow:visible}.tt3d-rotator{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(var(--rotation-y,0deg));transition:transform .12s ease-out}.is-rotating .tt3d-rotator{transition:none}.tt3d-model{position:absolute;inset:0;transform-style:preserve-3d;animation:ttIdle 2.9s ease-in-out infinite}
.tt3d-body{position:absolute;left:50%;top:10px;width:180px;height:335px;transform:translateX(-50%);filter:drop-shadow(0 24px 24px rgba(0,0,0,.4))}
.tt3d-head{position:absolute;left:50%;top:18px;width:126px;height:120px;transform:translateX(-50%);z-index:8}.tt3d-face{position:absolute;inset:18px 12px 4px;border-radius:50% 50% 46% 46%;background:radial-gradient(circle at 62% 30%,#fff6 0 3%,transparent 4%),linear-gradient(145deg,#ffd7bd,var(--skin));box-shadow:inset -12px -10px 18px rgba(116,52,31,.14),0 10px 18px rgba(0,0,0,.22)}
.tt3d-hair-back{position:absolute;inset:2px 8px 28px;border-radius:56% 56% 42% 44%;background:linear-gradient(145deg,var(--hair2),var(--hair) 60%);box-shadow:inset 8px 5px 12px #fff1,inset -8px -8px 15px #0003}.tt3d-hair-fringe{position:absolute;top:12px;width:44px;height:45px;border-radius:65% 22% 70% 25%;background:linear-gradient(150deg,var(--hair2),var(--hair));z-index:4;box-shadow:inset 4px 3px 6px #fff1}.tt3d-hair-fringe.f1{left:18px;transform:rotate(18deg)}.tt3d-hair-fringe.f2{left:46px;top:5px;transform:rotate(2deg)}.tt3d-hair-fringe.f3{right:14px;transform:rotate(-24deg)}
.tt3d-eye{position:absolute;top:62px;width:18px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 32%,white 0 9%,#4f7795 10% 28%,#172332 29% 70%,#070b10 71%);z-index:6;box-shadow:0 2px 2px rgba(0,0,0,.2)}.tt3d-eye.e1{left:34px}.tt3d-eye.e2{right:34px}.tt3d-brow{position:absolute;top:53px;width:18px;height:4px;border-radius:50%;background:var(--hair);z-index:6}.tt3d-brow.b1{left:34px;transform:rotate(-5deg)}.tt3d-brow.b2{right:34px;transform:rotate(5deg)}.tt3d-nose{position:absolute;left:50%;top:79px;width:7px;height:8px;border-radius:50%;background:#b9785f55;z-index:6}.tt3d-mouth{position:absolute;left:50%;top:92px;width:22px;height:9px;border-bottom:3px solid #984f50;border-radius:0 0 50% 50%;transform:translateX(-50%);z-index:6}.tt3d-cheek{position:absolute;top:82px;width:18px;height:9px;border-radius:50%;background:#ff7e8f33;filter:blur(1px);z-index:5}.tt3d-cheek.c1{left:22px}.tt3d-cheek.c2{right:22px}.tt3d-ear{position:absolute;top:59px;width:22px;height:30px;border-radius:50%;background:var(--skin);box-shadow:inset -5px -3px 6px #a85e4930}.tt3d-ear-left{left:1px}.tt3d-ear-right{right:1px}
.tt3d-neck{position:absolute;left:50%;top:124px;width:30px;height:26px;transform:translateX(-50%);border-radius:0 0 12px 12px;background:var(--skin)}.tt3d-torso{position:absolute;left:50%;top:142px;width:108px;height:104px;transform:translateX(-50%);border-radius:35px 35px 24px 24px;background:linear-gradient(145deg,#fff8,var(--top) 32%,color-mix(in srgb,var(--top) 72%,#0b1d2d));box-shadow:inset 10px 5px 12px #fff4,inset -12px -10px 18px #0002}.tt3d-logo{position:absolute;left:50%;top:170px;transform:translateX(-50%);width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:#0d83dc;color:#fff;font:bold 18px/1 Inter;box-shadow:0 0 13px #33caff88}
.tt3d-arm{position:absolute;top:150px;width:30px;height:104px;border-radius:20px;background:linear-gradient(90deg,var(--top),color-mix(in srgb,var(--top) 70%,#071625));z-index:-1}.tt3d-arm.a1{left:22px;transform:rotate(9deg)}.tt3d-arm.a2{right:22px;transform:rotate(-9deg)}.tt3d-hand{position:absolute;top:236px;width:27px;height:29px;border-radius:50%;background:var(--skin)}.tt3d-hand.h1{left:18px}.tt3d-hand.h2{right:18px}.tt3d-leg{position:absolute;top:236px;width:43px;height:78px;border-radius:12px 12px 18px 18px;background:linear-gradient(145deg,color-mix(in srgb,var(--pants) 75%,#fff),var(--pants));box-shadow:inset -8px -5px 10px #0002}.tt3d-leg.l1{left:45px;transform:rotate(2deg)}.tt3d-leg.l2{right:45px;transform:rotate(-2deg)}.tt3d-shoe{position:absolute;top:300px;width:55px;height:29px;border-radius:18px 22px 10px 11px;background:linear-gradient(160deg,#fff,var(--shoe) 55%,#98b9d3);box-shadow:0 8px 10px #0004,inset 0 3px #fff}.tt3d-shoe.s1{left:34px;transform:rotate(-3deg)}.tt3d-shoe.s2{right:34px;transform:rotate(3deg)}
.tt3d-equip{position:absolute;z-index:20;filter:drop-shadow(0 8px 8px #0005);pointer-events:none}.tt3d-equip-hat{left:50%;top:-20px;transform:translateX(-50%);font-size:66px}.tt3d-equip-glasses{left:50%;top:53px;transform:translateX(-50%);font-size:39px}.tt3d-equip-shirt{left:50%;top:135px;transform:translateX(-50%);font-size:94px;opacity:.38;mix-blend-mode:screen}.tt3d-equip-shoes{left:50%;top:288px;transform:translateX(-50%);font-size:70px;opacity:.5}
.tt3d-bust{position:relative;width:100%;height:100%;display:grid;place-items:center;overflow:hidden;isolation:isolate}.tt3d-bust-halo{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--avatar-accent) 35%,transparent),transparent 70%);filter:blur(3px)}.tt3d-bust-torso{position:absolute;left:50%;bottom:-22%;width:76%;height:55%;transform:translateX(-50%);border-radius:50% 50% 20% 20%;background:linear-gradient(145deg,#fff8,var(--top));box-shadow:inset -8px -6px 10px #0002}.tt3d-bust .tt3d-head{transform:translateX(-50%) scale(.66);top:-2px}.tt3d-bust.mini .tt3d-head{transform:translateX(-50%) scale(.39);top:-21px}.tt3d-bust.mini .tt3d-bust-torso{bottom:-28%}
.account-avatar,.profile-avatar-large{background:linear-gradient(145deg,#102231,#08131c)!important;box-shadow:inset 0 0 20px color-mix(in srgb,var(--avatar-accent,#43e3ea) 10%,transparent),0 7px 18px #0004}.profile-avatar-large{width:96px;height:96px;border-radius:26px}.account-avatar{width:44px;height:44px}
.avatar-choice-art.tt3d-avatar-card-art{height:98px;font-size:0}.tt3d-choice-head{position:relative;width:78px;height:82px;margin:0 auto;background:linear-gradient(145deg,#ffd8bf,var(--skin));border-radius:48% 48% 44% 44%;box-shadow:0 12px 20px #0004,inset -9px -7px 12px #8d4b3730}.tt3d-choice-head i{position:absolute;inset:-5px -3px 36px;background:linear-gradient(145deg,var(--hair2),var(--hair));border-radius:54% 54% 42% 42%}.tt3d-choice-head b,.tt3d-choice-head em{position:absolute;top:40px;width:10px;height:15px;border-radius:50%;background:#15202c;box-shadow:inset 3px 3px #fff}.tt3d-choice-head b{left:21px}.tt3d-choice-head em{right:21px}.tt3d-choice-head span{position:absolute;left:50%;top:61px;width:20px;height:8px;transform:translateX(-50%);border-bottom:3px solid #9a5053;border-radius:50%}
.cosmetic-card{overflow:hidden;transform-style:preserve-3d;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s;background:linear-gradient(155deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 55%,rgba(0,0,0,.08));box-shadow:0 14px 28px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.07)}.cosmetic-card:before{content:'';position:absolute;inset:-80% -40%;background:linear-gradient(110deg,transparent 43%,rgba(255,255,255,.15) 50%,transparent 57%);transform:translateX(-45%);transition:transform .55s ease;pointer-events:none}.cosmetic-card:hover{transform:translateY(-6px) rotateX(2deg);box-shadow:0 24px 40px rgba(0,0,0,.33),0 0 25px rgba(74,204,255,.08)}.cosmetic-card:hover:before{transform:translateX(45%)}.cosmetic-icon{height:108px;font-size:68px;background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.14),transparent 42%),linear-gradient(145deg,rgba(255,255,255,.06),rgba(2,9,15,.25));box-shadow:inset 0 1px rgba(255,255,255,.08),inset 0 -16px 28px rgba(0,0,0,.12);text-shadow:0 8px 12px #0005;transform:translateZ(18px);transition:transform .2s}.cosmetic-card:hover .cosmetic-icon{transform:translateZ(28px) scale(1.08) rotate(-2deg)}
.cosmetic-card.rarity-rare{background:radial-gradient(circle at 50% 4%,rgba(58,174,255,.14),transparent 35%),linear-gradient(155deg,rgba(55,143,255,.08),rgba(255,255,255,.018))}.cosmetic-card.rarity-epic{background:radial-gradient(circle at 50% 4%,rgba(185,88,255,.2),transparent 38%),linear-gradient(155deg,rgba(118,52,204,.11),rgba(255,255,255,.018));box-shadow:0 14px 32px #0004,0 0 18px rgba(176,87,255,.08)}.cosmetic-card.rarity-legendary{background:radial-gradient(circle at 50% 4%,rgba(255,190,52,.2),transparent 40%),linear-gradient(155deg,rgba(176,111,17,.14),rgba(255,255,255,.02));animation:ttLegendaryPulse 2.2s ease-in-out infinite}.cosmetic-card.rarity-champion{background:radial-gradient(circle at 50% 4%,rgba(65,231,255,.22),transparent 40%),linear-gradient(155deg,rgba(24,127,160,.14),rgba(255,255,255,.02));animation:ttChampionPulse 1.9s ease-in-out infinite}
.cosmetic-card.locked{filter:saturate(.72)}.cosmetic-lock-badge{background:linear-gradient(145deg,#182535,#080d13);border-color:#ffffff24;box-shadow:0 8px 18px #0006,0 0 14px #ff5a6a18}.cosmetic-card.locked:hover .cosmetic-lock-badge{animation:ttLockNudge .7s ease}
.shop-wallet{position:relative;overflow:hidden;background:linear-gradient(145deg,#2a220c,#151007);border-color:#ffd65a44}.shop-wallet:before{content:none;display:none}.shop-wallet strong{color:#ffe47e;text-shadow:0 0 12px #ffd65a44}
.reward-earned-text{font-size:18px;color:#fff;text-shadow:0 0 18px rgba(75,226,255,.24)}.progression-reward-card{overflow:hidden;border-color:#ffd65a55;background:radial-gradient(circle at 50% -20%,rgba(255,211,69,.18),transparent 48%),linear-gradient(145deg,#0a1b26,#081018);box-shadow:0 35px 100px #0009,0 0 50px #ffcc3a22}.reward-burst span{display:block;animation:ttRewardStar 1.2s cubic-bezier(.2,.9,.2,1) both;color:#ffe276;text-shadow:0 0 35px #ffbf36}.reward-confetti{position:absolute;inset:0;pointer-events:none}.reward-confetti i{position:absolute;width:7px;height:15px;border-radius:3px;background:#5feaff;animation:ttConfetti 1.5s ease-out infinite}.reward-confetti i:nth-child(2n){background:#ffd65a}.reward-confetti i:nth-child(3n){background:#ff6bb7}.reward-confetti i:nth-child(1){left:12%;top:10%;animation-delay:.1s}.reward-confetti i:nth-child(2){left:24%;top:3%;animation-delay:.6s}.reward-confetti i:nth-child(3){left:40%;top:7%;animation-delay:.3s}.reward-confetti i:nth-child(4){left:57%;top:2%;animation-delay:.8s}.reward-confetti i:nth-child(5){left:72%;top:9%;animation-delay:.15s}.reward-confetti i:nth-child(6){left:86%;top:5%;animation-delay:.48s}.reward-confetti i:nth-child(7){left:33%;top:0%;animation-delay:.95s}.reward-confetti i:nth-child(8){left:65%;top:0%;animation-delay:.72s}
.btn-primary,.btn-daily{position:relative;overflow:hidden}.btn-primary:after,.btn-daily:after{content:'';position:absolute;inset:-120% -30%;background:linear-gradient(110deg,transparent 42%,#fff7 50%,transparent 58%);transform:translateX(-70%);animation:ttButtonShine 4.4s ease-in-out infinite;pointer-events:none}
@keyframes ttIdle{0%,100%{transform:translateY(0) rotateZ(-.3deg)}50%{transform:translateY(-8px) rotateZ(.3deg)}}@keyframes ttRaySpin{to{transform:rotate(360deg)}}@keyframes ttOrbitPulse{50%{opacity:.4;filter:brightness(1.5)}}@keyframes ttSpark{0%,100%{transform:scale(.6) rotate(0);opacity:.2}50%{transform:scale(1.35) rotate(80deg);opacity:1}}@keyframes ttLegendaryPulse{50%{box-shadow:0 18px 36px #0005,0 0 25px #ffbe3440}}@keyframes ttChampionPulse{50%{box-shadow:0 18px 36px #0005,0 0 30px #52e9ff50}}@keyframes ttLockNudge{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}65%{transform:rotate(8deg)}}@keyframes ttRewardStar{0%{transform:scale(.1) rotate(-120deg);opacity:0}70%{transform:scale(1.35) rotate(12deg);opacity:1}100%{transform:scale(1) rotate(0)}}@keyframes ttConfetti{0%{transform:translateY(-15px) rotate(0);opacity:0}18%{opacity:1}100%{transform:translateY(230px) rotate(420deg);opacity:0}}@keyframes ttButtonShine{0%,72%{transform:translateX(-70%)}88%,100%{transform:translateX(70%)}}
@media(max-width:900px){.character-preview-large{min-height:360px}.tt3d-stage{transform:scale(.88)}.shop-showroom{width:100%}}@media(max-width:640px){.tt3d-stage{transform:scale(.76)}.shop-character-preview{min-height:300px}.showroom-shell{padding-bottom:30px}.rotate-hint{font-size:7px}.cosmetic-card:hover{transform:translateY(-3px)}}

/* =========================================================
   TOMMYTRACE V12 — CINEMATIC HOME / WARDROBE VISUAL PASS
   ========================================================= */
.v12-home{background:#06111f;overflow:auto;min-height:100%;color:#f5fbff}.v12-home .v12-bg-layer{position:absolute;inset:0;background:
radial-gradient(circle at 50% 12%,rgba(28,151,255,.22),transparent 30%),
radial-gradient(circle at 82% 65%,rgba(255,173,59,.13),transparent 32%),
linear-gradient(180deg,#071425 0%,#06101c 58%,#030a12 100%);pointer-events:none}
.v12-home-shell{position:relative;z-index:1;max-width:1650px;margin:0 auto;padding:18px 26px 30px;min-height:100%;display:flex;flex-direction:column;gap:18px}
.v12-topbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;padding:8px 12px;border:1px solid rgba(116,188,255,.18);border-radius:22px;background:rgba(6,17,31,.78);backdrop-filter:blur(22px);box-shadow:0 12px 50px rgba(0,0,0,.22)}
.v12-brand{border:0;background:transparent;padding:0 8px;cursor:pointer}.v12-brand img{width:215px;max-height:64px;object-fit:contain;display:block}
.v12-nav{display:flex;justify-content:center;gap:6px;min-width:0}.v12-nav-btn{border:1px solid transparent;background:transparent;color:#c9d8e9;border-radius:13px;padding:11px 14px;font-weight:800;display:flex;align-items:center;gap:8px;cursor:pointer;transition:.2s}.v12-nav-btn:hover,.v12-nav-btn.active{color:white;border-color:#2e9dff;background:linear-gradient(180deg,rgba(37,142,255,.26),rgba(11,67,120,.18));box-shadow:inset 0 0 18px rgba(40,154,255,.13)}
.v12-top-actions{display:flex;align-items:center;gap:10px}.v12-wallet,.v12-account{min-height:50px;border:1px solid rgba(107,185,255,.22);border-radius:15px;background:rgba(11,26,43,.88);display:flex;align-items:center;gap:9px;padding:8px 12px;color:white}.v12-wallet span:last-child{font-size:10px;color:#8097ad;font-weight:900}.coin-orb{width:29px;height:29px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#fff078,#ff9d00);color:#8c5700;box-shadow:0 0 22px rgba(255,175,28,.45)}.v12-account{cursor:pointer;text-align:left}.v12-account>span:nth-child(2){display:flex;flex-direction:column;min-width:110px}.v12-account small{color:#8fa7bd}.v12-avatar-chip{width:37px;height:37px;border-radius:12px;overflow:hidden}
.v12-main-grid{display:grid;grid-template-columns:minmax(280px,.82fr) minmax(440px,1.15fr) minmax(360px,.92fr);gap:18px;align-items:stretch;min-height:650px}.v12-left-rail,.v12-right-rail{min-width:0}.v12-left-rail{display:flex;flex-direction:column;justify-content:center;padding:20px 0}.v12-kicker{font-size:12px;letter-spacing:.2em;color:#38c9ff;font-weight:900;margin-bottom:13px}.v12-left-rail h1{font-size:clamp(36px,4vw,68px);line-height:.94;margin:0 0 18px;letter-spacing:-.05em}.v12-left-rail h1 span{color:#8fe4ff}.v12-lead{color:#9bb0c5;line-height:1.65;max-width:510px;margin:0 0 22px}
.v12-action-stack{display:grid;gap:10px;max-width:470px}.v12-action-card{position:relative;overflow:hidden;border:1px solid rgba(74,164,240,.28);background:linear-gradient(135deg,rgba(14,33,53,.95),rgba(9,20,34,.94));color:white;border-radius:18px;min-height:68px;padding:11px 14px;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:12px;text-align:left;cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s}.v12-action-card:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.07),transparent 54%);transform:translateX(-120%);transition:.45s}.v12-action-card:hover:before{transform:translateX(120%)}.v12-action-card:hover{transform:translateX(5px);border-color:#47bbff;box-shadow:0 12px 34px rgba(0,138,255,.14)}.v12-action-card.primary{border-color:#35d1ff;background:linear-gradient(135deg,rgba(6,121,217,.72),rgba(12,44,76,.92));box-shadow:0 0 25px rgba(38,180,255,.17)}.v12-action-card.wardrobe{border-color:rgba(173,112,255,.45)}.v12-action-icon{width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:23px}.v12-action-card span:nth-child(2){display:flex;flex-direction:column}.v12-action-card strong{font-size:18px}.v12-action-card small{color:#8fa7bd;margin-top:2px}.v12-action-card>b{font-size:22px;color:#74ccff}
.v12-character-stage{position:relative;border:1px solid rgba(80,172,255,.18);border-radius:28px;overflow:hidden;min-height:650px;background:#071524;display:flex;align-items:flex-end;justify-content:center;box-shadow:inset 0 0 100px rgba(0,96,190,.08)}.v12-character-stage:before{content:"";position:absolute;inset:0;background:url('assets/backgrounds/home-hero-borneo.webp') center/cover no-repeat;opacity:.34;filter:saturate(.96) brightness(.66)}.v12-character-stage:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,15,27,.16),rgba(4,13,23,.03) 40%,#07131f 96%);pointer-events:none}.v12-room-glow{position:absolute;width:420px;height:420px;border-radius:50%;background:#1999ff;filter:blur(140px);opacity:.16;top:110px}.v12-character-card{position:absolute;inset:28px 40px 64px;border-radius:24px;overflow:hidden;transform-style:preserve-3d;transition:transform .13s ease-out;z-index:2}.v12-character-image{width:100%;height:100%;object-fit:cover;object-position:center;display:block;filter:saturate(1.06) contrast(1.03)}.v12-character-vignette{position:absolute;inset:0;box-shadow:inset 0 -100px 100px rgba(3,10,17,.9),inset 0 0 70px rgba(5,16,28,.25)}.v12-stage-badge{position:absolute;left:50%;bottom:15px;transform:translateX(-50%);padding:7px 13px;border:1px solid rgba(67,190,255,.35);border-radius:999px;background:rgba(3,16,29,.68);font-size:10px;font-weight:900;letter-spacing:.17em;color:#8bdcff}.v12-platform{position:absolute;z-index:3;bottom:22px;width:62%;height:42px;border-radius:50%;border:2px solid #238fef;background:radial-gradient(ellipse,#1e7ed9 0%,#0a2d50 48%,#061422 70%);box-shadow:0 0 45px rgba(24,153,255,.38),inset 0 0 16px #2eb8ff}.v12-platform span{position:absolute;inset:8px 15%;border-radius:50%;border:1px solid rgba(132,224,255,.72)}.v12-rotate-copy{position:absolute;z-index:4;bottom:2px;color:#7e9bb4;font-size:10px;font-weight:800}
.v12-right-rail{display:grid;grid-template-rows:auto auto 1fr;gap:12px}.v12-profile-card,.v12-reward-card,.v12-featured{border:1px solid rgba(100,181,255,.21);border-radius:20px;background:linear-gradient(145deg,rgba(12,29,48,.95),rgba(5,16,29,.94));box-shadow:0 18px 45px rgba(0,0,0,.16)}.v12-profile-card{padding:16px}.v12-profile-head{display:grid;grid-template-columns:60px 1fr auto;align-items:center;gap:11px}.v12-profile-avatar{width:60px;height:60px;border-radius:16px;background:linear-gradient(135deg,#51e7d7,#6aa7ff);display:grid;place-items:center;overflow:hidden}.v12-profile-head>div{display:flex;flex-direction:column}.v12-profile-head strong{font-size:18px}.v12-profile-head small{color:#92a9bd}.v12-level-chip{border:1px solid rgba(73,188,255,.28);border-radius:10px;padding:7px 9px;color:#79d6ff;font-size:11px;font-weight:900}.v12-xp-line{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin-top:13px;color:#7f99ae;font-size:10px;font-weight:800}.v12-xp-line>div{height:8px;border-radius:99px;background:#172b3d;overflow:hidden}.v12-xp-line i{display:block;width:0;height:100%;background:linear-gradient(90deg,#2bb9ff,#62f4df);border-radius:99px;transition:width .4s}.v12-mini-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:13px;border-top:1px solid rgba(112,174,225,.13)}.v12-mini-stats div{text-align:center;padding:12px 6px 2px}.v12-mini-stats strong{display:block;font-size:18px}.v12-mini-stats span{font-size:10px;color:#8199ad}
.v12-reward-card{padding:13px 15px;display:flex;gap:12px;align-items:center;border-color:rgba(255,187,43,.38);box-shadow:inset 0 0 25px rgba(255,173,28,.05)}.v12-reward-icon{font-size:35px;filter:drop-shadow(0 0 12px rgba(255,188,37,.4))}.v12-reward-card div:last-child{display:flex;flex-direction:column}.v12-reward-card span{font-size:10px;letter-spacing:.13em;color:#d7a945;font-weight:900}.v12-reward-card strong{margin-top:3px;color:#f9d77b;font-size:14px}
.v12-featured{padding:14px;min-height:0}.v12-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.v12-section-head>div{display:flex;flex-direction:column}.v12-section-head span{color:#5acfff;font-size:10px;font-weight:900;letter-spacing:.14em}.v12-section-head strong{font-size:17px}.v12-section-head button{border:1px solid rgba(85,180,255,.28);background:#0f2840;color:#bfe7ff;border-radius:10px;padding:7px 10px;cursor:pointer}.v12-item-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.v12-item-card{min-width:0;border:1px solid rgba(94,168,226,.2);background:#0b1d31;color:white;border-radius:12px;padding:5px;display:flex;flex-direction:column;gap:4px;text-align:left;cursor:pointer;transition:.2s;overflow:hidden}.v12-item-card:hover{transform:translateY(-3px);border-color:#48bdff}.v12-item-card.epic{border-color:rgba(196,73,255,.44);box-shadow:inset 0 0 14px rgba(185,57,255,.06)}.v12-item-card img{width:100%;aspect-ratio:.9;object-fit:cover;border-radius:8px}.v12-item-card span{font-size:10px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v12-item-card small{color:#ffc34d;font-size:9px}.v12-mode-strip{padding:12px 15px!important;margin:0!important}

/* Make existing wardrobe feel like a game showroom */
.customize-card,.shop-card{max-width:1280px!important;background:linear-gradient(145deg,rgba(7,21,36,.98),rgba(5,13,24,.99))!important;border:1px solid rgba(70,169,255,.35)!important;box-shadow:0 28px 90px rgba(0,0,0,.55),inset 0 0 60px rgba(23,140,255,.035)!important}.customize-layout{grid-template-columns:minmax(400px,.9fr) minmax(500px,1.1fr)!important}.customize-preview-panel{background:linear-gradient(180deg,rgba(10,31,50,.9),rgba(6,17,30,.92));border-radius:22px;padding:20px;border:1px solid rgba(77,172,248,.18)}.showroom-shell,.shop-showroom{min-height:520px!important;border-radius:24px!important;background:radial-gradient(circle at 50% 30%,rgba(45,145,230,.2),transparent 36%),linear-gradient(180deg,#0b2136,#061421)!important;border:1px solid rgba(70,170,255,.24)!important}.wardrobe-panel{padding:18px;border-radius:22px;background:rgba(8,22,37,.77);border:1px solid rgba(86,169,236,.18)}.wardrobe-slots{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}.wardrobe-slot{min-height:110px!important;border-radius:17px!important;background:linear-gradient(145deg,#102b45,#091827)!important;border-color:rgba(78,171,244,.26)!important}.wardrobe-slot:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,118,255,.15)}.shop-card{max-height:94vh;overflow:auto}.shop-item-card{transition:.18s!important}.shop-item-card:hover{transform:translateY(-4px) scale(1.015)}

@media(max-width:1200px){.v12-main-grid{grid-template-columns:minmax(260px,.8fr) minmax(360px,1fr)}.v12-right-rail{grid-column:1/-1;grid-template-columns:1fr 1fr}.v12-featured{grid-column:1/-1}.v12-nav-btn span{display:none}.v12-brand img{width:175px}}
@media(max-width:820px){.v12-home-shell{padding:10px}.v12-topbar{grid-template-columns:1fr auto}.v12-nav{order:3;grid-column:1/-1;overflow-x:auto;justify-content:flex-start}.v12-wallet{display:none}.v12-main-grid{display:flex;flex-direction:column}.v12-character-stage{min-height:520px;order:-1}.v12-left-rail{padding:4px}.v12-left-rail h1{font-size:42px}.v12-right-rail{display:grid;grid-template-columns:1fr}.v12-featured{grid-column:auto}.v12-item-grid{grid-template-columns:repeat(3,1fr)}.v12-mode-strip{overflow:auto}.customize-layout{grid-template-columns:1fr!important}.showroom-shell,.shop-showroom{min-height:410px!important}}

/* =========================================================
   V12.1 — FITTED WARDROBE + ONE-SCREEN HOME + MAP HARDENING
   ========================================================= */
/* Wearables are drawn as fitted layers, never emoji overlays. */
.tt3d-equip{display:none!important}
.tt-wearable{position:absolute;pointer-events:none;z-index:30;transform-style:preserve-3d}
.tt-wearable-hat{left:50%;top:-16px;width:126px;height:58px;transform:translateX(-50%);filter:drop-shadow(0 8px 8px #0006)}
.tt-wearable-hat .hat-crown{position:absolute;left:18px;right:18px;top:8px;height:38px;border-radius:52% 52% 28% 28%;background:linear-gradient(145deg,#316cff,#173579 58%,#0a1737);box-shadow:inset 10px 6px 12px #ffffff28,inset -8px -8px 12px #0005}
.tt-wearable-hat .hat-brim{position:absolute;left:38px;top:39px;width:78px;height:17px;border-radius:50%;background:linear-gradient(180deg,#2458c7,#0d245a);transform:skewX(-10deg) rotate(-3deg);box-shadow:0 5px 6px #0005}
.tt-wearable-hat .hat-badge{position:absolute;left:50%;top:17px;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#20bff1;color:white;font:900 12px/1 Inter;box-shadow:0 0 10px #24c8ff88}
.tt-wear-hat-explorer-cap-2 .hat-crown,.tt-wear-hat-sabah-cap-1 .hat-crown{background:linear-gradient(145deg,#18a886,#176b68 58%,#0d3038)}
.tt-wear-hat-explorer-cap-3 .hat-crown,.tt-wear-hat-sabah-cap-2 .hat-crown{background:linear-gradient(145deg,#7d49ff,#24347f 60%,#0c173d);box-shadow:inset 10px 6px 12px #fff3,0 0 18px #6d7bff77}
.tt-wear-hat-champion-crown{top:-27px;height:76px;filter:drop-shadow(0 0 12px #ffc73c88)}
.tt-wear-hat-champion-crown b{position:absolute;left:25px;right:25px;bottom:6px;height:24px;border-radius:6px 6px 13px 13px;background:linear-gradient(#ffe88b,#d79216);border:2px solid #fff1a3;box-shadow:inset 0 -7px 8px #a55a11}
.tt-wear-hat-champion-crown .crown-point{position:absolute;bottom:23px;width:27px;height:43px;background:linear-gradient(145deg,#fff09a,#e19b15);clip-path:polygon(50% 0,100% 100%,0 100%)}
.tt-wear-hat-champion-crown .p1{left:23px;transform:rotate(-10deg)}.tt-wear-hat-champion-crown .p2{left:49px;height:53px}.tt-wear-hat-champion-crown .p3{right:23px;transform:rotate(10deg)}

.tt-wearable-glasses{left:50%;top:56px;width:82px;height:30px;transform:translateX(-50%)}
.tt-wearable-glasses .lens{position:absolute;top:2px;width:31px;height:23px;border:4px solid #17293a;border-radius:44% 44% 48% 48%;background:linear-gradient(145deg,#c8f7ff55,#2e6c8855);box-shadow:inset 0 0 7px #fff4}.tt-wearable-glasses .l{left:4px}.tt-wearable-glasses .r{right:4px}.tt-wearable-glasses .bridge{position:absolute;left:34px;top:10px;width:14px;height:4px;background:#17293a;border-radius:4px}
.tt-wear-glasses-aviators-1 .lens,.tt-wear-glasses-aviators-2 .lens{background:linear-gradient(#1b2531,#080b0f);border-color:#c39c54}.tt-wear-glasses-aviators-2 .lens{border-color:#ffd65f;box-shadow:0 0 8px #ffd65f55}
.tt-wear-glasses-neon-visor-1,.tt-wear-glasses-neon-visor-2{top:58px;width:88px;height:25px;border-radius:10px;background:linear-gradient(90deg,#17eaff33,#33bbffdd,#8afaff77);border:2px solid #53eaff;box-shadow:0 0 14px #2edfffaa}.tt-wear-glasses-neon-visor-1>* ,.tt-wear-glasses-neon-visor-2>*{display:none}
.tt-wear-glasses-neon-visor-2{background:linear-gradient(90deg,#34fff2,#4c7cff,#cc4dff);animation:visorScan 1.4s linear infinite}
@keyframes visorScan{50%{filter:hue-rotate(35deg) brightness(1.2)}}

/* Clothing changes the actual torso instead of sitting over it. */
.tt3d-body[class*="tt-wear-shirt-explorer-jacket"] .tt3d-torso,.tt3d-body[class*="tt-wear-shirt-sabah-jacket"] .tt3d-torso,.tt3d-body.tt-wear-shirt-champion-jacket .tt3d-torso{background:linear-gradient(145deg,#31465d,#172839 55%,#0c1722)}
.tt3d-body.tt-wear-shirt-sabah-jacket-1 .tt3d-torso,.tt3d-body.tt-wear-shirt-sabah-jacket-2 .tt3d-torso{background:linear-gradient(145deg,#447d56,#1f4a35 55%,#10251b)}
.tt3d-body.tt-wear-shirt-neon-hoodie-1 .tt3d-torso{background:linear-gradient(145deg,#6a55ff,#114b88 48%,#052940);box-shadow:inset 10px 5px 12px #fff4,0 0 20px #4aafff66}
.tt3d-body.tt-wear-shirt-champion-jacket .tt3d-torso{background:linear-gradient(145deg,#382b18,#1e1b14 55%,#0b0b0a);border:2px solid #d9a93b;box-shadow:0 0 16px #ffc53b44}
.tt-wearable-jacket{position:absolute;left:50%;top:145px;width:104px;height:100px;transform:translateX(-50%);z-index:9}.tt-wearable-jacket .lapel{position:absolute;top:3px;width:42px;height:63px;border:2px solid #ffffff24;background:#0f1f2e55;clip-path:polygon(0 0,100% 20%,65% 100%,0 62%)}.tt-wearable-jacket .lapel.left{left:1px}.tt-wearable-jacket .lapel.right{right:1px;transform:scaleX(-1)}.tt-wearable-jacket .zip{position:absolute;left:50%;top:22px;width:2px;height:70px;background:#9eb4c655}.tt-wearable-jacket .jacket-badge{position:absolute;right:13px;top:45px;font-size:8px;color:#69dfff;border:1px solid #69dfff66;border-radius:4px;padding:2px}
.tt-wearable-hoodie{position:absolute;left:50%;top:126px;width:118px;height:58px;transform:translateX(-50%);z-index:8}.tt-wearable-hoodie .hood{position:absolute;left:22px;right:22px;top:0;height:42px;border:9px solid #5d60e7;border-bottom:0;border-radius:50% 50% 20% 20%;opacity:.7}.tt-wearable-hoodie .cord{position:absolute;top:25px;width:2px;height:26px;background:#d6f6ff}.tt-wearable-hoodie .c1{left:48px}.tt-wearable-hoodie .c2{right:48px}

/* Fitted shoe silhouettes. */
.tt3d-body.tt-wear-shoes-hiking-boots-1 .tt3d-shoe,.tt3d-body.tt-wear-shoes-hiking-boots-2 .tt3d-shoe{height:35px;top:294px;border-radius:10px 15px 8px 8px;background:linear-gradient(145deg,#8b6241,#3c2a1f 60%,#1d1713);border-bottom:6px solid #171412}
.tt3d-body.tt-wear-shoes-neon-sneakers-1 .tt3d-shoe,.tt3d-body.tt-wear-shoes-neon-sneakers-2 .tt3d-shoe{background:linear-gradient(145deg,#f8ffff,#69e8ff 45%,#1b70d8);box-shadow:0 0 13px #42ddffcc,inset 0 3px #fff}
.tt3d-body.tt-wear-shoes-champion-shoes .tt3d-shoe{background:linear-gradient(145deg,#fff4c0,#ffcc43 50%,#ad6512);box-shadow:0 0 14px #ffcb3baa,inset 0 3px #fff6c2}

/* Bust preview also reflects outfit color cleanly. */
.tt3d-bust-torso.tt-wear-shirt-explorer-jacket-1,.tt3d-bust-torso.tt-wear-shirt-explorer-jacket-2,.tt3d-bust-torso.tt-wear-shirt-explorer-jacket-3{background:linear-gradient(145deg,#415972,#172839)}
.tt3d-bust-torso.tt-wear-shirt-sabah-jacket-1,.tt3d-bust-torso.tt-wear-shirt-sabah-jacket-2{background:linear-gradient(145deg,#5d9069,#214432)}
.tt3d-bust-torso.tt-wear-shirt-neon-hoodie-1{background:linear-gradient(145deg,#735cff,#144f8e);box-shadow:0 0 12px #42c9ff88}
.tt3d-bust-torso.tt-wear-shirt-champion-jacket{background:linear-gradient(145deg,#4c391d,#16130e);border:1px solid #d7a83b}

/* Desktop main menu = exactly one screen, no scrolling. */
@media (min-width:1101px){
  .v12-home{overflow:hidden!important;height:100dvh!important;min-height:0!important}
  .v12-home-shell{height:100dvh;min-height:0;padding:10px 18px 12px;gap:10px;overflow:hidden}
  .v12-topbar{min-height:62px;padding:5px 9px;gap:14px;flex:0 0 auto}.v12-brand img{width:185px;max-height:52px}.v12-nav-btn{padding:8px 11px}.v12-wallet,.v12-account{min-height:44px;padding:5px 9px}
  .v12-main-grid{flex:1;min-height:0!important;grid-template-columns:minmax(250px,.78fr) minmax(360px,1.05fr) minmax(320px,.88fr);gap:12px;overflow:hidden}
  .v12-left-rail{padding:4px 0;justify-content:center}.v12-kicker{margin-bottom:7px}.v12-left-rail h1{font-size:clamp(34px,3.2vw,54px);margin-bottom:10px}.v12-lead{font-size:13px;line-height:1.45;margin-bottom:10px}
  .v12-action-stack{gap:6px}.v12-action-card{min-height:54px;padding:7px 10px;border-radius:14px;grid-template-columns:38px 1fr auto;gap:9px}.v12-action-icon{width:36px;height:36px;border-radius:10px;font-size:18px}.v12-action-card strong{font-size:15px}.v12-action-card small{font-size:10px}
  .v12-character-stage{min-height:0!important;height:100%;border-radius:22px}.v12-character-card{inset:12px 24px 50px}.v12-platform{bottom:15px;height:32px}.v12-rotate-copy{font-size:8px}
  .v12-right-rail{gap:8px;min-height:0;grid-template-rows:auto auto minmax(0,1fr)}.v12-profile-card{padding:10px}.v12-profile-head{grid-template-columns:48px 1fr auto}.v12-profile-avatar{width:48px;height:48px}.v12-profile-head strong{font-size:15px}.v12-mini-stats{margin-top:8px}.v12-mini-stats div{padding:7px 4px 0}.v12-mini-stats strong{font-size:15px}.v12-xp-line{margin-top:8px}
  .v12-reward-card{padding:8px 11px}.v12-reward-icon{font-size:26px}.v12-featured{padding:9px;overflow:hidden}.v12-section-head{margin-bottom:6px}.v12-item-grid{gap:5px}.v12-item-card{padding:4px}.v12-item-card img{aspect-ratio:1.18;min-height:0}.v12-item-card span{font-size:9px}.v12-item-card small{font-size:8px}
  .v12-mode-strip{flex:0 0 auto;padding:7px 10px!important;min-height:52px}.v12-mode-strip .mode-config-group{gap:5px}.v12-mode-strip .segment,.v12-mode-strip .sound-toggle{padding:7px 10px!important;font-size:10px}
}
@media (min-width:1101px) and (max-height:760px){.v12-featured{display:none}.v12-right-rail{grid-template-rows:auto auto}.v12-character-card{inset:8px 18px 42px}.v12-action-card:nth-child(4){display:none}}

/* Keep Google canvases/tiles painted and sized after screen transitions. */
.streetview,.map,.large-map{background:#0b2032;contain:layout paint;transform:translateZ(0)}
.streetview,.streetview>div,.streetview .gm-style{width:100%!important;height:100%!important;min-width:1px!important;min-height:1px!important}
.game-screen.active .streetview{visibility:visible!important;opacity:1!important}

/* =========================================================
   V12.3 — LIVE MENU AVATAR + FACE-CROPPED PROFILE PORTRAITS
   ========================================================= */
/* Menu hero uses the player's actual CSS character model rather than a static image. */
.v12-live-avatar-card{display:grid;place-items:end center;overflow:visible!important;background:transparent!important;touch-action:none}
.v12-live-avatar-mount{position:absolute;inset:0;display:grid;place-items:end center;z-index:1;overflow:visible;cursor:grab;touch-action:none}
.v12-live-avatar-mount.is-rotating{cursor:grabbing}
.v12-live-avatar-mount .tt3d-stage{position:relative;width:290px;height:440px;transform-origin:50% 100%;filter:drop-shadow(0 28px 22px rgba(0,0,0,.42));overflow:visible}
.v12-live-avatar-mount .tt3d-model{animation:ttMenuHeroIdle 3.2s ease-in-out infinite}
.v12-live-avatar-mount .tt3d-body{transform-origin:50% 82%}
.v12-live-avatar-mount .tt3d-head{filter:drop-shadow(0 8px 8px rgba(0,0,0,.15))}
@keyframes ttMenuHeroIdle{0%,100%{transform:translateY(0) rotateZ(-.35deg)}48%{transform:translateY(-7px) rotateZ(.35deg)}60%{transform:translateY(-5px) rotateZ(.15deg)}}
@media(prefers-reduced-motion:reduce){.v12-live-avatar-mount .tt3d-model{animation:none!important}}

/* Profile chips should read as portraits: face first, tiny hint of shoulders. */
.account-avatar,.v12-profile-avatar,.profile-avatar-large{position:relative;overflow:hidden!important;background:linear-gradient(145deg,#102231,#08131c)!important}
.account-avatar .tt3d-bust,.v12-profile-avatar .tt3d-bust,.profile-avatar-large .tt3d-bust{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.account-avatar .tt3d-bust-halo,.v12-profile-avatar .tt3d-bust-halo,.profile-avatar-large .tt3d-bust-halo{inset:-5%;opacity:.82}
.account-avatar .tt3d-bust-torso,.v12-profile-avatar .tt3d-bust-torso{width:88%;height:42%;bottom:-24%}
.profile-avatar-large .tt3d-bust-torso{width:86%;height:42%;bottom:-20%}
.account-avatar .tt3d-bust.mini .tt3d-head{top:2px;left:50%;transform:translateX(-50%) scale(.44);transform-origin:50% 20%}
#menuProfileAvatarMount .tt3d-bust.mini .tt3d-head{top:8px;left:50%;transform:translateX(-50%) scale(.54);transform-origin:50% 20%}
#menuProfileAvatarMount .tt3d-bust-torso{width:90%;height:40%;bottom:-23%}
.profile-avatar-large .tt3d-bust .tt3d-head{top:12px;left:50%;transform:translateX(-50%) scale(.78);transform-origin:50% 20%}
.v12-profile-avatar>span{display:block;width:100%;height:100%}
.v12-profile-avatar #menuProfileAvatarMount{position:absolute;inset:0}

/* Keep live hero inside one-screen desktop layouts. */
@media(min-width:1101px){
  .v12-live-avatar-mount .tt3d-stage{height:min(440px,62vh);width:min(290px,41vh)}
}
@media(min-width:1101px) and (max-height:760px){
  .v12-live-avatar-mount .tt3d-stage{height:350px;width:230px}
}
@media(max-width:820px){
  .v12-live-avatar-mount .tt3d-stage{height:390px;width:255px}
}

/* V12.4 PRE-LAUNCH CLEANUP */
.compass-wrap,.compass-row,.compass-pointer{display:none!important}
.v12-google-login{min-height:46px;border:1px solid rgba(95,170,255,.28);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(232,241,250,.98));color:#172536;display:flex;align-items:center;gap:8px;padding:6px 11px;font-weight:800;font-size:14px;cursor:pointer;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.16);transition:transform .18s,border-color .18s}
.v12-google-login:hover{transform:translateY(-1px);border-color:#67b7ff}.v12-google-login.hidden{display:none!important}.google-g{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:conic-gradient(from -45deg,#4285f4 0 25%,#34a853 0 50%,#fbbc05 0 75%,#ea4335 0);color:white;font-size:13px;font-weight:900;border:3px solid white}
@media(max-width:1150px){.v12-google-login span:last-child{display:none}.v12-google-login{padding:6px 9px;min-height:42px}}
\n\n/* FINAL PRE-LAUNCH: professional avatar assets */\n.pro-avatar-stage,.pro-avatar-portrait{position:relative;width:100%;height:100%;display:grid;place-items:center;overflow:hidden}\n.pro-avatar-stage img{width:min(92%,720px);height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 28px 28px rgba(0,0,0,.38));user-select:none;pointer-events:none;transform-origin:50% 62%;animation:proAvatarIdle 4.2s ease-in-out infinite}\n.uses-pro-avatar{perspective:1100px;touch-action:pan-y}\n.uses-pro-avatar .pro-avatar-stage{transform-style:preserve-3d;transition:transform .16s ease}\n.uses-pro-avatar.is-rotating .pro-avatar-stage{transition:none}\n.pro-avatar-portrait img{width:185%;height:185%;object-fit:contain;object-position:center 4%;transform:translateY(4%);filter:drop-shadow(0 6px 12px rgba(0,0,0,.22));user-select:none;pointer-events:none}\n#accountAvatar .pro-avatar-portrait img,.v12-avatar-chip .pro-avatar-portrait img{width:205%;height:205%;transform:translateY(7%)}\n.v12-profile-avatar .pro-avatar-portrait img{width:195%;height:195%;transform:translateY(6%)}\n.cosmetic-icon img{width:100%;height:100%;max-width:132px;max-height:132px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.28));pointer-events:none}\n@keyframes proAvatarIdle{0%,100%{transform:translateY(0) rotateZ(-.4deg)}50%{transform:translateY(-9px) rotateZ(.4deg)}}\n@media(prefers-reduced-motion:reduce){.pro-avatar-stage img{animation:none}}\n\n/* Main menu must fit a normal desktop viewport without page scrolling. */\n@media (min-width: 821px) {\n  body:has(#menuScreen.active){overflow:hidden}\n  #menuScreen.active{height:100vh;min-height:0;overflow:hidden}\n  #menuScreen .v12-home-shell{height:100%;min-height:0;padding-top:12px;padding-bottom:12px;gap:10px}\n  #menuScreen .v12-main-grid{min-height:0;flex:1;grid-template-rows:minmax(0,1fr)}\n  #menuScreen .v12-character-stage{min-height:0;height:100%}\n  #menuScreen .v12-mode-strip{flex:0 0 auto}\n}\n

/* PRE-LAUNCH FIX: guest Google CTA must remain visible even when top bar gets tight. */

/* Wardrobe and shop now use the exact same professional avatar render as the main menu. */
#customizeAvatarPreview.uses-pro-avatar,#shopAvatarPreview.uses-pro-avatar{display:grid;place-items:center;overflow:visible;perspective:1100px}
#customizeAvatarPreview .pro-avatar-stage,#shopAvatarPreview .pro-avatar-stage{width:100%;height:100%;display:grid;place-items:end center;overflow:visible;transform-style:preserve-3d;transition:transform .16s ease}
#customizeAvatarPreview .pro-avatar-stage img,#shopAvatarPreview .pro-avatar-stage img{width:auto;max-width:96%;height:96%;max-height:96%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 24px 22px rgba(0,0,0,.38));animation:proAvatarIdle 4.2s ease-in-out infinite}
#customizeAvatarPreview.is-rotating .pro-avatar-stage,#shopAvatarPreview.is-rotating .pro-avatar-stage{transition:none}
@media(prefers-reduced-motion:reduce){#customizeAvatarPreview .pro-avatar-stage img,#shopAvatarPreview .pro-avatar-stage img{animation:none}}


/* V13 DUEL */
.duel-entry-btn{font-size:1.12rem;letter-spacing:.08em;min-height:54px;background:linear-gradient(135deg,#1dd9ff,#5374ff 58%,#8d5cff);box-shadow:0 14px 32px rgba(42,116,255,.26)}
.duel-entry-copy{margin:-2px 0 4px;color:var(--muted,#9fb0c8);font-size:.78rem;text-align:center}
.duel-screen{align-items:center;justify-content:center;padding:24px}
.duel-shell{width:min(760px,94vw);text-align:center;padding:32px;position:relative;overflow:hidden}
.duel-shell::before{content:"";position:absolute;inset:-35%;background:radial-gradient(circle,rgba(54,198,255,.15),transparent 42%);animation:duelPulse 3.2s ease-in-out infinite;pointer-events:none}
.duel-versus{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;margin:28px auto 18px;max-width:650px}
.duel-player-card{position:relative;z-index:1;min-height:210px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(21,34,59,.92),rgba(8,15,30,.9));border-radius:22px;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.duel-player-card.me{border-color:rgba(45,211,255,.34)}
.duel-player-card.opponent.searching{opacity:.78}
.duel-avatar{width:106px;height:106px;border-radius:26px;background:radial-gradient(circle at 50% 30%,rgba(78,216,255,.24),rgba(16,31,57,.9));display:grid;place-items:center;font-size:2rem;overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.duel-avatar img{width:100%;height:100%;object-fit:cover;object-position:center 18%;transform:scale(1.45)}
.duel-player-card strong{font-size:1.05rem}.duel-player-card span{font-size:.72rem;color:#8fa4c0;letter-spacing:.08em}
.duel-vs{font-weight:1000;font-size:1.35rem;letter-spacing:.12em;color:#dce8ff;text-shadow:0 0 18px rgba(64,196,255,.45)}
.duel-search-timer{font-size:1.05rem;font-variant-numeric:tabular-nums;color:#c9d8eb;margin:8px 0 18px}
.duel-countdown{position:relative;z-index:2;font-size:5rem;font-weight:1000;line-height:1;color:#fff;text-shadow:0 0 34px rgba(45,211,255,.8);animation:duelCount .75s ease both;margin:8px auto 20px}
.duel-long-wait{position:relative;z-index:2;margin:12px auto 16px;padding:14px 16px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(10,20,38,.72)}
.duel-long-wait p{margin:0 0 10px;color:#aebed4}
@keyframes duelPulse{0%,100%{transform:scale(.9);opacity:.55}50%{transform:scale(1.08);opacity:1}}
@keyframes duelCount{0%{transform:scale(.55);opacity:0}55%{transform:scale(1.16);opacity:1}100%{transform:scale(1);opacity:1}}
@media(max-width:650px){.duel-versus{grid-template-columns:1fr;gap:10px}.duel-vs{padding:2px}.duel-player-card{min-height:150px}.duel-avatar{width:82px;height:82px}.duel-shell{padding:22px 16px}}
@media(prefers-reduced-motion:reduce){.duel-shell::before,.duel-countdown{animation:none!important}}

/* V14 LEADERBOARDS */
.v14-profile-leaderboard-btn{width:100%;margin-top:10px;min-height:50px;border:1px solid rgba(99,203,255,.24);border-radius:14px;background:linear-gradient(145deg,rgba(25,48,75,.88),rgba(12,25,43,.92));color:#eef8ff;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:9px 12px;text-align:left;cursor:pointer;transition:transform .18s,border-color .18s,background .18s}.v14-profile-leaderboard-btn:hover{transform:translateY(-1px);border-color:rgba(255,211,92,.55);background:linear-gradient(145deg,rgba(36,61,91,.96),rgba(16,31,51,.96))}.v14-profile-leaderboard-btn>span:first-child{font-size:1.2rem}.v14-profile-leaderboard-btn>span:nth-child(2){display:flex;flex-direction:column}.v14-profile-leaderboard-btn strong{font-size:.78rem}.v14-profile-leaderboard-btn small{font-size:.6rem;color:#8ea9c3;margin-top:2px}.v14-profile-leaderboard-btn>b{font-size:1rem;color:#7adfff}
.leaderboard-modal{z-index:1200}.leaderboard-card{width:min(940px,94vw);max-height:min(860px,92vh);overflow:hidden;padding:26px 28px 24px;background:linear-gradient(180deg,rgba(10,24,42,.98),rgba(5,13,26,.98));border-color:rgba(116,206,255,.19)}.leaderboard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-right:38px}.leaderboard-head h2{margin:3px 0 4px;font-size:2rem}.leaderboard-head p{margin:0;color:#8fa5be;font-size:.78rem}.leaderboard-refresh{border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.045);color:#dcecff;padding:10px 12px;display:flex;align-items:center;gap:7px;cursor:pointer}.leaderboard-refresh.is-loading{opacity:.55;pointer-events:none}.leaderboard-refresh.is-loading:first-letter{animation:lbSpin .8s linear infinite}
.leaderboard-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0 8px}.leaderboard-tab{min-height:44px;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:rgba(255,255,255,.035);color:#9fb5cc;font-weight:800;cursor:pointer}.leaderboard-tab.active{color:#fff;border-color:rgba(62,208,255,.45);background:linear-gradient(135deg,rgba(24,169,229,.18),rgba(81,90,255,.17));box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.leaderboard-podium{min-height:214px;display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:12px;margin:12px 0 14px;padding:8px 10px 0;border-radius:18px;background:radial-gradient(circle at 50% 100%,rgba(66,184,255,.12),transparent 58%)}.lb-podium-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;border:1px solid rgba(255,255,255,.09);border-bottom:0;border-radius:18px 18px 6px 6px;padding:12px 8px 10px;background:linear-gradient(180deg,rgba(31,51,76,.92),rgba(10,22,40,.96));min-width:0}.lb-podium-slot.place-1{min-height:196px;border-color:rgba(255,211,73,.32);background:linear-gradient(180deg,rgba(70,58,24,.42),rgba(13,24,41,.98))}.lb-podium-slot.place-2{min-height:164px}.lb-podium-slot.place-3{min-height:148px}.lb-podium-slot strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem}.lb-podium-slot span,.lb-podium-slot small{font-size:.58rem;color:#91a6bd}.lb-podium-slot b{font-size:1rem;color:#fff}.lb-crown{position:absolute;top:-11px;right:12px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#10243a;border:1px solid rgba(255,255,255,.14);font-size:.75rem;font-weight:900}.place-1 .lb-crown{background:linear-gradient(145deg,#ffd95d,#a66f13);color:#171006;font-size:1rem}.lb-avatar{display:grid;place-items:center;overflow:hidden;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:radial-gradient(circle at 50% 28%,rgba(77,210,255,.2),rgba(10,22,39,.94));color:#fff;font-weight:900}.lb-avatar img{width:100%;height:100%;object-fit:cover;object-position:center 16%;transform:scale(1.25)}.lb-avatar.podium{width:74px;height:74px;border-radius:22px;margin-bottom:2px}.place-1 .lb-avatar.podium{width:88px;height:88px;border-color:rgba(255,220,109,.35)}.lb-avatar.row{width:40px;height:40px;border-radius:12px;flex:none}.lb-avatar.fallback{font-size:1rem;background:linear-gradient(145deg,#174866,#263b6a)}.lb-podium-empty{width:64px;height:64px;border:1px dashed rgba(255,255,255,.16);border-radius:18px;display:grid;place-items:center;color:#68829e;font-weight:900}
.leaderboard-you-card{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 12px}.leaderboard-you-card>div{border:1px solid rgba(56,202,255,.16);border-radius:13px;background:linear-gradient(135deg,rgba(24,117,159,.12),rgba(42,58,114,.12));padding:9px 12px;display:flex;align-items:baseline;gap:8px}.leaderboard-you-card span{font-size:.58rem;color:#8ea7c0;letter-spacing:.08em}.leaderboard-you-card strong{font-size:1.05rem}.leaderboard-you-card small{font-size:.52rem;color:#7891aa}
.leaderboard-table-head,.lb-row{display:grid;grid-template-columns:72px minmax(210px,1fr) 90px 120px;align-items:center;gap:8px}.leaderboard-table-head{padding:0 13px 6px;color:#69839e;font-size:.57rem;font-weight:800;letter-spacing:.08em}.leaderboard-rows{max-height:260px;overflow:auto;padding-right:3px}.lb-row{min-height:54px;padding:6px 12px;margin-bottom:5px;border:1px solid rgba(255,255,255,.07);border-radius:13px;background:rgba(255,255,255,.025)}.lb-row.is-me{border-color:rgba(64,207,255,.42);background:linear-gradient(90deg,rgba(28,142,188,.14),rgba(59,87,194,.08))}.lb-rank{font-weight:900;color:#d9e9f8}.lb-player{display:flex;align-items:center;gap:10px;min-width:0}.lb-player>div{display:flex;flex-direction:column;min-width:0}.lb-player strong{font-size:.76rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-player strong em{font-style:normal;font-size:.48rem;color:#6de6ff;margin-left:5px;border:1px solid rgba(79,217,255,.25);border-radius:5px;padding:1px 4px}.lb-player span,.lb-wins span,.lb-score span{font-size:.5rem;color:#718aa4;letter-spacing:.08em}.lb-wins,.lb-score{display:flex;flex-direction:column}.lb-wins strong{font-size:.75rem}.lb-score{align-items:flex-end}.lb-score strong{font-size:.85rem;color:#fff}.leaderboard-status{min-height:18px;margin-top:7px;text-align:center;font-size:.62rem;color:#8199b2}.leaderboard-status[data-kind="error"]{color:#ff8e9b}.leaderboard-status[data-kind="success"]{color:#78d9c8}.lb-empty-state{min-height:86px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#829ab3;gap:3px}.lb-empty-state strong{color:#b9cce0}@keyframes lbSpin{to{transform:rotate(360deg)}}
@media(max-width:760px){.leaderboard-card{padding:20px 14px 16px}.leaderboard-head p{display:none}.leaderboard-refresh span{display:none}.leaderboard-podium{min-height:188px;gap:6px}.lb-podium-slot.place-1{min-height:176px}.lb-podium-slot.place-2{min-height:148px}.lb-podium-slot.place-3{min-height:136px}.lb-avatar.podium{width:58px;height:58px}.place-1 .lb-avatar.podium{width:68px;height:68px}.leaderboard-table-head,.lb-row{grid-template-columns:44px minmax(150px,1fr) 70px 84px}.leaderboard-table-head{font-size:.5rem;padding-inline:8px}.lb-row{padding-inline:8px}.lb-avatar.row{width:34px;height:34px}.lb-player span{display:none}.leaderboard-rows{max-height:320px}}@media(max-width:520px){.leaderboard-tabs{gap:5px}.leaderboard-tab{font-size:.7rem}.leaderboard-podium{grid-template-columns:1fr 1.08fr 1fr}.lb-podium-slot{padding-inline:4px}.lb-podium-slot strong{font-size:.62rem}.lb-wins{display:none}.leaderboard-table-head,.lb-row{grid-template-columns:40px minmax(140px,1fr) 78px}.leaderboard-table-head span:nth-child(3){display:none}.leaderboard-you-card{grid-template-columns:1fr}.v12-nav #leaderboardNavBtn span{display:none}}

/* V14.1 player-name identity */
.profile-name-rules {
  margin-top: 7px;
  color: rgba(217, 236, 255, .62);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: .02em;
}
.profile-name-edit.needs-name {
  border-color: rgba(67, 227, 234, .5);
  box-shadow: 0 0 0 1px rgba(67, 227, 234, .12), 0 0 26px rgba(67, 227, 234, .08);
}
.profile-name-edit.needs-name label::after {
  content: ' • REQUIRED';
  color: #43e3ea;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}
.profile-name-row input.invalid-name {
  border-color: rgba(255, 101, 117, .8) !important;
  animation: ttNameShake .28s ease;
}
@keyframes ttNameShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}


/* V14.2 player-name typing reliability */
.profile-name-edit,.profile-name-row{position:relative;z-index:45;pointer-events:auto}
.profile-name-row input#profileNameInput{position:relative;z-index:50;pointer-events:auto!important;user-select:text!important;-webkit-user-select:text!important;touch-action:manipulation;cursor:text}
.profile-name-row input#profileNameInput.is-editing{border-color:rgba(67,227,234,.9);box-shadow:0 0 0 3px rgba(67,227,234,.12),0 0 24px rgba(67,227,234,.08);background:rgba(255,255,255,.075)}

/* V14.3 Global identity */
.account-country-flag,.profile-country-flag{display:inline-flex;align-items:center;justify-content:center;margin-right:.35rem;line-height:1;font-style:normal}.profile-country-flag{font-size:.9em}.profile-country-edit{margin:14px 0 4px}.profile-country-edit>label{display:block;margin-bottom:7px;font-weight:800;color:#eefbff}.profile-country-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px}.profile-country-row select{min-width:0;border:1px solid rgba(122,224,255,.22);background:rgba(5,18,31,.88);color:#f4fbff;border-radius:12px;padding:11px 12px;font:inherit;outline:none}.profile-country-row select:focus{border-color:rgba(82,232,244,.72);box-shadow:0 0 0 3px rgba(82,232,244,.1)}

/* V14.4 profile editor interaction repair */
.profile-name-edit,.profile-country-edit,.profile-name-row,.profile-country-row{position:relative;z-index:20;pointer-events:auto}
.profile-name-row input,.profile-country-row select,.profile-name-row button,.profile-country-row button{position:relative;z-index:21;pointer-events:auto!important}
.profile-country-row{display:flex;gap:10px}
.profile-country-row select{min-width:0;flex:1;padding:13px 15px;border-radius:14px;border:1px solid var(--line);outline:0;background:#0d1a25;color:var(--text);font:inherit}
.profile-country-row select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(67,227,234,.12)}
.profile-name-edit:focus-within,.profile-country-edit:focus-within{filter:brightness(1.04)}
@media(max-width:640px){.profile-country-row{flex-direction:column}}

/* TommyTrace V15 — Ranked DUEL */
.leaderboard-mode-tabs{display:flex;gap:8px;margin:18px 0 6px;padding:5px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);border-radius:14px;width:max-content;max-width:100%}.leaderboard-mode-tab{min-height:40px;padding:0 15px;border:0;border-radius:10px;background:transparent;color:#8ea5bd;font-weight:800;letter-spacing:.04em;cursor:pointer;transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}.leaderboard-mode-tab:hover{transform:translateY(-1px);color:#eaf8ff}.leaderboard-mode-tab.active{background:linear-gradient(135deg,rgba(45,206,255,.18),rgba(111,92,255,.2));color:#fff;box-shadow:inset 0 0 0 1px rgba(91,215,255,.28),0 8px 24px rgba(24,126,190,.14)}
.duel-rating-result{margin:18px auto 4px;width:min(620px,100%);padding:18px 20px;border-radius:18px;border:1px solid rgba(90,218,255,.24);background:linear-gradient(135deg,rgba(12,34,56,.9),rgba(34,22,62,.88));box-shadow:inset 0 0 28px rgba(69,190,255,.05)}.duel-rating-tier{text-align:center;font-weight:900;letter-spacing:.18em;font-size:.72rem;color:#8eeaff}.duel-rating-flow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;margin-top:10px}.duel-rating-flow span{display:flex;flex-direction:column;align-items:center;gap:2px}.duel-rating-flow small{font-size:.55rem;letter-spacing:.14em;color:#7290ad}.duel-rating-flow strong{font-size:1.55rem;color:#f6fbff}.duel-rating-flow b{font-size:1.4rem;color:#72f2a9;min-width:68px;text-align:center}.duel-rating-flow b[data-direction="down"]{color:#ff7887}.duel-rating-flow b[data-direction="flat"]{color:#b5c3d2}.duel-rating-result-text{text-align:center;margin-top:9px;font-size:.73rem;color:#b9cce0}.profile-stats-grid #profileDuelRating,.profile-stats-grid #profileDuelTier{color:#82e8ff}
@media(max-width:600px){.leaderboard-mode-tabs{width:100%}.leaderboard-mode-tab{flex:1;padding-inline:8px;font-size:.68rem}.duel-rating-flow{gap:8px}.duel-rating-flow strong{font-size:1.25rem}.duel-rating-flow b{font-size:1.15rem}}

/* V15.2 profile editor visibility / short-screen hardening */
.account-modal .account-card{max-height:min(88vh,900px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:22px}
.profile-country-edit{display:block!important;visibility:visible!important;opacity:1!important}
.profile-country-row select{appearance:auto;-webkit-appearance:menulist;cursor:pointer}
@media(max-height:760px){.account-modal .account-card{max-height:92vh}.profile-stats-grid{gap:8px}.profile-best-grid{gap:8px}}


/* V15.3 — real country flag images (avoids Windows rendering emoji as ISO letters) */
.account-country-flag,.profile-country-flag{vertical-align:middle;min-width:28px}
.tt-country-flag-img{display:block;width:28px;height:20px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.18);flex:0 0 auto}
.account-chip .tt-country-flag-img{width:24px;height:18px}
.profile-country-flag .tt-country-flag-img{width:32px;height:23px;border-radius:4px}
.lb-player-name-with-flag{display:inline-flex;align-items:center;gap:7px;min-width:0}
.lb-country-flag{display:block;width:24px;height:18px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.16);flex:0 0 auto}
.lb-country-fallback{display:inline-flex;align-items:center;justify-content:center;width:24px;height:18px;flex:0 0 auto}

/* =========================================================
   V15.5 MOBILE FRIENDLY PASS
   Same runtime / same game logic — responsive layout only.
   ========================================================= */
:root{
  --tt-safe-top: env(safe-area-inset-top, 0px);
  --tt-safe-right: env(safe-area-inset-right, 0px);
  --tt-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tt-safe-left: env(safe-area-inset-left, 0px);
}

@media (max-width: 820px){
  html{overflow-x:hidden;-webkit-text-size-adjust:100%}
  body{overflow-x:hidden;overscroll-behavior-y:none}
  button,select,input{font-size:16px}
  button{touch-action:manipulation}

  /* --- Main menu --- */
  #menuScreen.active{min-height:100dvh;height:auto;overflow:visible}
  #menuScreen .v12-home-shell{
    padding:calc(8px + var(--tt-safe-top)) calc(10px + var(--tt-safe-right)) calc(14px + var(--tt-safe-bottom)) calc(10px + var(--tt-safe-left));
    gap:10px;
  }
  #menuScreen .v12-topbar{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    padding:7px 8px;
    border-radius:18px;
  }
  #menuScreen .v12-brand{min-width:0;justify-self:start}
  #menuScreen .v12-brand img{width:132px;max-width:39vw;height:auto}
  #menuScreen .v12-top-actions{gap:6px;min-width:0}
  #menuScreen .v12-google-login{min-height:40px;padding:5px 8px;border-radius:12px;font-size:13px}
  #menuScreen .google-g{width:22px;height:22px;font-size:12px;border-width:2px}
  #menuScreen .v12-account{min-height:44px;padding:5px 7px;gap:6px;border-radius:13px;max-width:154px}
  #menuScreen .v12-avatar-chip{width:34px;height:34px;min-width:34px;border-radius:10px}
  #menuScreen .v12-account strong{font-size:.68rem;max-width:74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #menuScreen .v12-account small{font-size:.56rem}
  #menuScreen .account-chevron{display:none}

  #menuScreen .v12-nav{
    grid-column:1/-1;
    order:3;
    display:flex;
    gap:6px;
    width:100%;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding:1px 1px 3px;
    scroll-snap-type:x proximity;
  }
  #menuScreen .v12-nav::-webkit-scrollbar{display:none}
  #menuScreen .v12-nav-btn{
    flex:0 0 auto;
    min-width:48px;
    min-height:44px;
    padding:8px 10px;
    border-radius:12px;
    scroll-snap-align:start;
  }
  #menuScreen .v12-nav-btn span{display:none!important}

  #menuScreen .v12-main-grid{display:flex;flex-direction:column;gap:10px;min-height:0}
  #menuScreen .v12-character-stage{
    order:-1;
    min-height:330px;
    height:42dvh;
    max-height:430px;
    border-radius:24px;
    overflow:hidden;
  }
  #menuScreen .v12-character-card{inset:6px 8px 34px;border-radius:22px}
  #menuScreen .v12-live-avatar-mount .pro-avatar-stage img{max-width:86%;height:96%}
  #menuScreen .v12-platform{bottom:10px;transform:translateX(-50%) scale(.78)}
  #menuScreen .v12-rotate-copy{display:none}
  #menuScreen .v12-stage-badge{font-size:.58rem;padding:6px 9px}

  #menuScreen .v12-left-rail{padding:2px 0}
  #menuScreen .v12-kicker{font-size:.62rem;letter-spacing:.13em}
  #menuScreen .v12-left-rail h1{font-size:clamp(28px,8.6vw,42px);line-height:1.02;margin:5px 0 7px}
  #menuScreen .v12-lead{font-size:.78rem;line-height:1.45;margin-bottom:8px}
  #menuScreen .v12-action-stack{gap:7px}
  #menuScreen .v12-action-card{min-height:60px;padding:9px 12px;border-radius:16px}
  #menuScreen .v12-action-icon{width:38px;height:38px;min-width:38px;font-size:1.05rem}
  #menuScreen .v12-action-card strong{font-size:.88rem}
  #menuScreen .v12-action-card small{font-size:.62rem;margin-top:2px}

  #menuScreen .v12-right-rail{display:grid;grid-template-columns:1fr;gap:9px}
  #menuScreen .v12-profile-card{padding:12px;border-radius:18px}
  #menuScreen .v12-profile-avatar{width:48px;height:48px;border-radius:14px}
  #menuScreen .v12-profile-head strong{font-size:.82rem}
  #menuScreen .v12-profile-head small{font-size:.6rem}
  #menuScreen .v12-mini-stats{gap:5px}
  #menuScreen .v12-mini-stats>div{padding:8px 4px}
  #menuScreen .v12-mini-stats strong{font-size:.9rem}
  #menuScreen .v12-mini-stats span{font-size:.52rem}
  #menuScreen .v12-reward-card{min-height:70px;padding:10px 12px;border-radius:17px}
  #menuScreen .v12-reward-icon{font-size:1.55rem}
  #menuScreen .v12-featured{display:none}

  #menuScreen .v12-mode-strip{
    display:flex;
    gap:8px;
    width:100%;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding:9px;
    border-radius:17px;
    scroll-snap-type:x proximity;
  }
  #menuScreen .v12-mode-strip::-webkit-scrollbar{display:none}
  #menuScreen .mode-config-group{flex:0 0 auto;min-width:max-content;scroll-snap-align:start}
  #menuScreen .segmented{flex-wrap:nowrap}
  #menuScreen .segment,#menuScreen .sound-toggle{min-height:42px;padding:8px 11px}

  /* --- Street View / gameplay --- */
  #gameScreen.active{height:100dvh;min-height:100dvh;overflow:hidden}
  #gameScreen .game-shell{height:100dvh;min-height:100dvh;overflow:hidden}
  #gameScreen .viewer-frame{height:100dvh;min-height:100dvh;border-radius:0}
  #gameScreen .hud-bar{
    top:calc(6px + var(--tt-safe-top));
    left:calc(7px + var(--tt-safe-left));
    right:calc(7px + var(--tt-safe-right));
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    padding:7px 8px;
    gap:6px;
    border-radius:16px;
    z-index:25;
  }
  #gameScreen .hud-brand{min-width:0;gap:6px}
  #gameScreen .brand-logo-hud{width:42px;max-width:none}
  #gameScreen .hud-brand-copy strong{font-size:15px}
  #gameScreen .hud-brand-copy span{display:none}
  #gameScreen .hud-center{display:none}
  #gameScreen .hud-metrics{display:flex;justify-content:flex-end;gap:4px;flex-wrap:nowrap}
  #gameScreen .metric-card{min-width:0;padding:6px 7px;border-radius:10px}
  #gameScreen .metric-card span{font-size:.45rem}
  #gameScreen .metric-card strong{font-size:12px;white-space:nowrap}
  #gameScreen .metric-card-time{min-width:54px}
  #gameScreen .timer-ring{display:none}

  #gameScreen .clue-panel{display:none}
  #gameScreen .map-dock{
    left:calc(8px + var(--tt-safe-left));
    right:calc(8px + var(--tt-safe-right));
    bottom:calc(9px + var(--tt-safe-bottom));
    width:auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) 74px;
    align-items:end;
    gap:7px;
    z-index:24;
  }
  #gameScreen .mini-map-card{min-width:0;border-radius:17px;padding:8px}
  #gameScreen .mini-map-head{margin-bottom:5px}
  #gameScreen .mini-map-head .eyebrow{display:none}
  #gameScreen .mini-map-head strong{font-size:.7rem}
  #gameScreen .hud-icon-btn{width:36px;height:36px;min-width:36px}
  #gameScreen .map{height:145px;border-radius:12px}
  #gameScreen .map-foot{min-height:23px}
  #gameScreen .guess-status{font-size:.58rem;line-height:1.2}
  #gameScreen .guess-cta{
    min-height:88px;
    height:88px;
    padding:8px 5px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:4px;
    border-radius:17px;
    font-size:.7rem;
    letter-spacing:.05em;
  }
  #gameScreen .guess-cta-icon{font-size:1.25rem}
  #gameScreen .street-status{left:50%;top:50%;width:min(88vw,360px);transform:translate(-50%,-50%);padding:18px;border-radius:20px}
  #gameScreen .street-status h3{font-size:1.22rem}
  #gameScreen .street-status p{font-size:.76rem}
  #gameScreen .mp-waiting-overlay{width:min(90vw,390px);padding:18px}

  /* --- Expanded guess map --- */
  .map-modal .modal-card,.map-modal .large-map-card{width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;border-radius:0!important;padding:calc(10px + var(--tt-safe-top)) calc(10px + var(--tt-safe-right)) calc(12px + var(--tt-safe-bottom)) calc(10px + var(--tt-safe-left))!important}
  .large-map{height:calc(100% - 68px);margin-top:8px;border-radius:16px}

  /* --- Profile / account --- */
  .account-modal{align-items:flex-end!important;padding:0!important}
  .account-modal .account-card{
    width:100%!important;
    max-width:none!important;
    max-height:92dvh!important;
    border-radius:24px 24px 0 0!important;
    padding:18px 15px calc(18px + var(--tt-safe-bottom))!important;
  }
  .profile-hero{gap:12px}
  .profile-avatar-large{width:74px;height:74px;min-width:74px;border-radius:20px}
  .profile-identity h2{font-size:clamp(1.45rem,8vw,2rem);overflow-wrap:anywhere}
  .profile-stats-grid,.profile-best-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .profile-stat-card{padding:10px!important}
  .profile-country-row{display:grid!important;grid-template-columns:1fr auto;align-items:end;gap:8px}
  .profile-country-row select,.profile-country-row input{width:100%;min-height:46px}

  /* --- Wardrobe / shop --- */
  .customize-modal,.shop-modal{align-items:flex-end!important;padding:0!important}
  .customize-card,.shop-card{
    width:100%!important;
    max-width:none!important;
    max-height:94dvh!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    border-radius:24px 24px 0 0!important;
    padding:16px 12px calc(20px + var(--tt-safe-bottom))!important;
  }
  .customize-layout{display:flex!important;flex-direction:column!important;gap:10px!important}
  .customize-preview-panel{padding:10px!important;border-radius:18px!important}
  .showroom-shell,.shop-showroom{min-height:300px!important;height:38dvh;max-height:390px;padding-bottom:18px!important}
  #customizeAvatarPreview .pro-avatar-stage img,#shopAvatarPreview .pro-avatar-stage img{height:94%;max-width:88%}
  .wardrobe-panel{padding:10px!important;border-radius:18px!important}
  .wardrobe-slots{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .wardrobe-slot{min-height:92px!important}
  .shop-header{gap:8px}
  .shop-wallet{min-width:105px;padding:8px 10px}
  .shop-tabs{display:flex!important;overflow-x:auto;gap:6px;scrollbar-width:none}
  .shop-tabs::-webkit-scrollbar{display:none}
  .shop-tab{flex:0 0 auto;min-width:92px;min-height:44px}
  .shop-items-grid,.cosmetic-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .shop-item-card,.cosmetic-card{min-width:0;padding:9px!important}
  .cosmetic-icon{height:92px!important}

  /* --- Leaderboard --- */
  .leaderboard-modal{align-items:flex-end!important;padding:0!important}
  .leaderboard-card{
    width:100%!important;
    max-width:none!important;
    max-height:94dvh!important;
    border-radius:24px 24px 0 0!important;
    padding:17px 11px calc(16px + var(--tt-safe-bottom))!important;
  }
  .leaderboard-head{padding-right:34px;gap:8px}
  .leaderboard-head h2{font-size:1.35rem}
  .leaderboard-mode-tabs{overflow-x:auto;scrollbar-width:none}
  .leaderboard-mode-tabs::-webkit-scrollbar{display:none}
  .leaderboard-mode-tab{flex:0 0 auto;min-height:42px}
  .leaderboard-podium{min-height:166px;margin-top:8px}
  .leaderboard-rows{max-height:36dvh!important;overflow-y:auto}
  .leaderboard-table-head,.lb-row{grid-template-columns:38px minmax(0,1fr) 76px!important;gap:5px!important}
  .lb-wins,.leaderboard-table-head span:nth-child(3){display:none!important}
  .lb-player{min-width:0}
  .lb-player strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* --- DUEL / multiplayer / lobby --- */
  .duel-screen,.multiplayer-screen,.lobby-screen{padding:calc(10px + var(--tt-safe-top)) calc(10px + var(--tt-safe-right)) calc(12px + var(--tt-safe-bottom)) calc(10px + var(--tt-safe-left))!important}
  .duel-shell,.multiplayer-shell,.lobby-shell{width:100%!important;max-width:620px;padding:18px 12px!important;border-radius:22px!important}
  .duel-versus{grid-template-columns:1fr auto 1fr!important;gap:6px!important;margin:16px auto 12px!important}
  .duel-player-card{min-height:142px!important;padding:10px 6px!important;border-radius:16px!important}
  .duel-avatar{width:70px!important;height:70px!important;border-radius:18px!important}
  .duel-vs{font-size:.88rem!important;padding:0!important}
  .duel-player-card strong{font-size:.72rem!important;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .duel-player-card span{font-size:.52rem!important}
  .duel-countdown{font-size:3.6rem!important}
  .multiplayer-form{gap:10px}
  .multiplayer-form input{min-height:48px}
  .lobby-player-list{max-height:42dvh;overflow-y:auto}

  /* --- General mobile dialogs/results --- */
  .modal{padding:10px}
  .modal-card{max-height:92dvh;overflow-y:auto;overscroll-behavior:contain}
  .result-screen,.final-screen{padding:calc(10px + var(--tt-safe-top)) 10px calc(12px + var(--tt-safe-bottom))}
  .result-shell,.final-card{width:100%;max-width:760px;padding:16px 12px;border-radius:22px}
  .btn,.btn-primary,.btn-secondary{min-height:46px}
}

@media (max-width: 430px){
  #menuScreen .v12-brand img{width:112px;max-width:36vw}
  #menuScreen .v12-account{max-width:132px}
  #menuScreen .v12-account strong{max-width:60px}
  #menuScreen .v12-character-stage{min-height:300px;height:39dvh}
  #menuScreen .v12-left-rail h1{font-size:29px}
  #menuScreen .v12-action-card{min-height:57px}
  #menuScreen .v12-reward-card{display:none}
  #menuScreen .v12-profile-card{padding:10px}
  #menuScreen .v12-mini-stats span{font-size:.48rem}

  #gameScreen .hud-bar{grid-template-columns:auto 1fr}
  #gameScreen .hud-brand-copy{display:none}
  #gameScreen .brand-logo-hud{width:38px}
  #gameScreen .metric-card{padding:5px 6px}
  #gameScreen .metric-card span{display:none}
  #gameScreen .metric-card strong{font-size:11px}
  #gameScreen .map-dock{grid-template-columns:minmax(0,1fr) 66px}
  #gameScreen .map{height:128px}
  #gameScreen .guess-cta{height:80px;min-height:80px;font-size:.63rem}

  .profile-stats-grid,.profile-best-grid{grid-template-columns:1fr 1fr!important}
  .shop-items-grid,.cosmetic-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .leaderboard-podium{gap:3px;padding-inline:2px}
  .lb-avatar.podium{width:48px!important;height:48px!important}
  .place-1 .lb-avatar.podium{width:56px!important;height:56px!important}
}

/* Phone landscape: keep Street View clear and controls shallow. */
@media (max-width: 920px) and (orientation: landscape) and (max-height: 520px){
  #gameScreen .hud-bar{top:4px;padding:4px 7px}
  #gameScreen .brand-logo-hud{width:34px}
  #gameScreen .map-dock{left:auto;width:min(43vw,360px);bottom:6px;grid-template-columns:minmax(0,1fr) 64px}
  #gameScreen .map{height:104px}
  #gameScreen .mini-map-head{display:none}
  #gameScreen .guess-cta{height:72px;min-height:72px}
  #menuScreen .v12-character-stage{height:58dvh;min-height:240px}
}

/* V15.6 — saved multiplayer identity */
.multiplayer-identity-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 10px 14px;
  border: 1px solid rgba(92, 219, 255, .24);
  border-radius: 14px;
  background: rgba(8, 30, 47, .72);
}
.multiplayer-identity-summary span {
  color: var(--muted, #9db2c3);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.multiplayer-identity-summary strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #eafaff;
  font-size: 1rem;
}
@media (max-width: 640px) {
  .multiplayer-identity-summary { min-height: 50px; padding: 9px 12px; }
}

/* =========================================================
   V16.2 VISUAL POLISH — MENU + WARDROBE
   ========================================================= */

/* Main menu hierarchy: four obvious primary actions, utilities de-emphasised. */
.v16-primary-actions{gap:10px!important}
.v16-primary-actions .v12-action-card{min-height:64px;padding:12px 16px;border-radius:18px}
.v16-primary-actions .v12-action-card strong{font-size:1.02rem;letter-spacing:.035em}
.v16-primary-actions .v12-action-card small{font-size:.72rem;opacity:.78}
.v16-action-play{border-color:rgba(70,218,255,.58)!important;background:linear-gradient(135deg,rgba(28,193,255,.28),rgba(29,99,214,.22))!important;box-shadow:0 14px 34px rgba(18,139,236,.18),inset 0 1px rgba(255,255,255,.08)!important}
.v16-action-duel{border-color:rgba(171,111,255,.42)!important;background:radial-gradient(circle at 12% 50%,rgba(153,84,255,.2),transparent 36%),linear-gradient(145deg,rgba(65,35,117,.34),rgba(12,27,48,.86))!important}
.v16-action-multiplayer{border-color:rgba(69,227,194,.26)!important}
.v16-action-daily{border-color:rgba(255,196,73,.26)!important}
.v16-secondary-actions{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap}
.v16-secondary-actions button{min-height:34px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);color:#8fa6bd;border-radius:10px;padding:7px 11px;font:inherit;font-size:.72rem;font-weight:800;cursor:pointer;transition:.18s}
.v16-secondary-actions button:hover{color:#dff6ff;border-color:rgba(67,227,234,.26);background:rgba(67,227,234,.06)}

/* Reduce duplicated navigation competition on desktop: keep the utility destinations. */
@media(min-width:1050px){
  #playNavBtn,#mapsNavBtn,#multiplayerNavBtn,#dailyNavBtn{display:none!important}
  .v12-nav{justify-content:flex-end}
}

/* Cleaner profile/header treatment. */
.v12-profile-card{background:linear-gradient(155deg,rgba(12,31,49,.9),rgba(8,19,31,.92))!important;border-color:rgba(99,190,255,.16)!important;box-shadow:0 18px 50px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.045)}
.v12-profile-head>div strong{font-size:.96rem}.v12-profile-head>div small{font-size:.67rem;opacity:.64}
.v12-level-chip{background:rgba(53,213,255,.08)!important;border-color:rgba(53,213,255,.18)!important;color:#7feaff!important}
.v12-reward-card{background:linear-gradient(145deg,rgba(46,37,13,.5),rgba(14,24,35,.9))!important;border-color:rgba(255,208,76,.18)!important}
.v12-featured{opacity:.94}

/* One-screen desktop: never require scrolling, even around common 768px laptop heights. */
@media(min-width:821px){
  #menuScreen.active{height:100vh!important;min-height:0!important;overflow:hidden!important}
  #menuScreen .v12-home-shell{height:100%;max-height:100vh;box-sizing:border-box;overflow:hidden;padding:10px 16px!important;gap:8px!important}
  #menuScreen .v12-topbar{min-height:56px!important}
  #menuScreen .v12-main-grid{min-height:0!important;overflow:hidden}
  #menuScreen .v12-left-rail,#menuScreen .v12-right-rail{min-height:0;overflow:hidden}
  #menuScreen .v12-left-rail h1{margin-top:5px;margin-bottom:6px;line-height:.96}
  #menuScreen .v12-lead{margin-bottom:8px}
  #menuScreen .v12-mode-strip{padding:8px 10px!important}
}
@media(min-width:821px) and (max-height:820px){
  #menuScreen .v12-kicker{font-size:.62rem}
  #menuScreen .v12-left-rail h1{font-size:clamp(2rem,4.2vw,3.55rem)!important}
  #menuScreen .v12-lead{font-size:.76rem;line-height:1.45;max-width:46ch}
  #menuScreen .v16-primary-actions{gap:7px!important}
  #menuScreen .v16-primary-actions .v12-action-card{min-height:55px;padding:9px 13px}
  #menuScreen .v12-featured{display:none!important}
  #menuScreen .v12-reward-card{padding:10px 12px!important}
  #menuScreen .v12-profile-card{padding:12px!important}
  #menuScreen .v12-character-stage .pro-avatar-stage img{max-height:96%!important}
}
@media(min-width:821px) and (max-height:700px){
  #menuScreen .v12-reward-card{display:none!important}
  #menuScreen .v12-mini-stats{margin-top:4px!important}
  #menuScreen .v12-profile-card{align-self:start}
}

/* Premium live avatar wardrobe layers. These sit on the SAME high-detail avatar used on the menu. */
.pro-avatar-stage,.pro-avatar-portrait{isolation:isolate}
.pro-avatar-stage>img:not(.pro-wearable),.pro-avatar-portrait>img:not(.pro-wearable){position:relative;z-index:1}
.pro-wearable{position:absolute!important;z-index:5!important;height:auto!important;object-fit:contain!important;pointer-events:none!important;user-select:none!important;animation:none!important;filter:drop-shadow(0 8px 11px rgba(0,0,0,.38))!important;transform-origin:center center!important}
.pro-avatar-stage .pro-wearable-hat{width:36%!important;left:50%!important;top:1.5%!important;transform:translateX(-50%) rotate(-2deg)!important}
.pro-avatar-stage .pro-wearable-glasses{width:25%!important;left:50%!important;top:18.5%!important;transform:translateX(-50%)!important;z-index:7!important}
.pro-avatar-stage .pro-wearable-shirt{width:43%!important;left:50%!important;top:29%!important;transform:translateX(-50%)!important;z-index:4!important;opacity:.98}
.pro-avatar-stage .pro-wearable-shoes{width:39%!important;left:50%!important;bottom:1.2%!important;transform:translateX(-50%)!important;z-index:6!important}
.pro-avatar-portrait .pro-wearable-hat{width:82%!important;left:50%!important;top:-3%!important;transform:translateX(-50%) rotate(-2deg)!important;z-index:8!important}
.pro-avatar-portrait .pro-wearable-glasses{width:52%!important;left:50%!important;top:32%!important;transform:translateX(-50%)!important;z-index:9!important}

/* Wardrobe showroom now reads like a premium game locker, not a form. */
.customize-card,.shop-card{background:radial-gradient(circle at 24% 22%,rgba(38,157,255,.1),transparent 31%),linear-gradient(155deg,rgba(7,24,38,.985),rgba(4,13,22,.99))!important;border-color:rgba(92,196,255,.18)!important;box-shadow:0 32px 90px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.055)!important}
.customize-preview-panel,.wardrobe-panel{border-radius:22px}
.showroom-shell,.shop-showroom{background:radial-gradient(circle at 50% 40%,rgba(42,210,255,.14),transparent 34%),linear-gradient(180deg,rgba(7,28,45,.8),rgba(2,12,20,.92));border:1px solid rgba(73,207,255,.18);box-shadow:inset 0 1px rgba(255,255,255,.04),0 20px 48px rgba(0,0,0,.24)}
.showroom-platform{filter:drop-shadow(0 0 14px rgba(53,221,255,.28))}
.rotate-hint{letter-spacing:.15em;color:#74dff5!important;opacity:.76}

.wardrobe-slots{gap:10px!important}
.wardrobe-slot{position:relative;overflow:hidden;min-height:105px!important;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018))!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:inset 0 1px rgba(255,255,255,.05);transition:transform .18s,border-color .18s,box-shadow .18s!important}
.wardrobe-slot:after{content:'';position:absolute;inset:auto 12px 0;height:2px;background:linear-gradient(90deg,transparent,rgba(66,219,255,.7),transparent);opacity:.35}
.wardrobe-slot:hover{transform:translateY(-3px)!important;border-color:rgba(68,221,255,.33)!important;box-shadow:0 12px 28px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.06)}
.wardrobe-slot>span{font-size:28px!important}.wardrobe-slot>strong{letter-spacing:.04em}.wardrobe-slot>small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Shop cards: stronger lock/owned/equipped/affordable states. */
.cosmetic-shop-grid{gap:13px!important}
.cosmetic-card{position:relative;border-radius:18px!important;padding:11px!important;min-height:286px;cursor:default}
.cosmetic-card.previewing{border-color:rgba(89,222,255,.72)!important;box-shadow:0 18px 38px rgba(0,0,0,.3),0 0 0 2px rgba(70,212,255,.13),0 0 34px rgba(70,212,255,.1)!important}
.cosmetic-card.equipped{border-color:rgba(92,244,149,.58)!important;box-shadow:0 18px 36px rgba(0,0,0,.28),0 0 24px rgba(77,230,137,.11),inset 0 0 0 1px rgba(77,230,137,.18)!important}
.cosmetic-card.equipped:after{content:'EQUIPPED';position:absolute;top:10px;left:10px;z-index:9;border-radius:999px;padding:4px 7px;background:#69ed9a;color:#07150e;font-size:.52rem;font-weight:1000;letter-spacing:.07em}
.cosmetic-card.affordable:not(.equipped){border-color:rgba(98,207,255,.34)}
.cosmetic-card.locked{filter:saturate(.56) brightness(.79)!important;border-color:rgba(255,255,255,.07)!important}
.cosmetic-card.locked .cosmetic-icon img{filter:grayscale(.15) brightness(.72) drop-shadow(0 8px 10px rgba(0,0,0,.28))!important}
.cosmetic-lock-badge{width:38px!important;height:38px!important;display:grid!important;place-items:center!important;border-radius:13px!important;font-size:17px!important;right:9px!important;top:9px!important;background:rgba(5,10,16,.88)!important;backdrop-filter:blur(8px)}
.cosmetic-info h3{margin-top:3px!important}.cosmetic-info p{min-height:32px;color:#7f94aa!important;font-size:.68rem!important;line-height:1.4}
.cosmetic-price{min-height:34px;display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-weight:900!important;color:#ffd96b!important}
.cosmetic-price small{display:block;width:100%;color:#ff8291!important;font-weight:800;font-size:.6rem}
.cosmetic-card .btn{min-height:42px;border-radius:12px;font-weight:900;letter-spacing:.025em}
.cosmetic-card .btn:disabled{opacity:1!important;background:linear-gradient(135deg,rgba(76,224,132,.24),rgba(28,102,68,.2))!important;color:#8ff1b2!important;border-color:rgba(86,231,143,.24)!important}
.locked-buy-btn{background:rgba(255,255,255,.035)!important;color:#b6c2cf!important;border-color:rgba(255,255,255,.08)!important}
#shopStatusText.error{color:#ff8191!important;font-weight:800}
#shopStatusText.success{color:#7ff0ae!important;font-weight:800}
.shop-reject-shake{filter:drop-shadow(0 0 12px rgba(255,74,92,.35))}

/* Make the actual cosmetic art larger and more premium. */
.cosmetic-icon{height:126px!important;border-radius:14px!important}
.cosmetic-icon img{max-width:145px!important;max-height:118px!important;transform:scale(1.02);transition:transform .2s ease,filter .2s ease}
.cosmetic-card:hover .cosmetic-icon img{transform:scale(1.08);filter:drop-shadow(0 12px 16px rgba(0,0,0,.34))}

@media(max-width:820px){
  .v16-secondary-actions{justify-content:center}
  .v16-primary-actions .v12-action-card{min-height:60px}
  .cosmetic-card{min-height:250px}
  .pro-avatar-stage .pro-wearable-hat{width:39%!important}
  .pro-avatar-stage .pro-wearable-glasses{width:27%!important}
  .pro-avatar-stage .pro-wearable-shirt{width:47%!important}
  .pro-avatar-stage .pro-wearable-shoes{width:43%!important}
}


/* V16.3 — integrated 3D avatar library + fitted wearable pass */
.avatar-choice-art.has-3d-art{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  overflow:hidden!important;
  min-height:150px!important;
  background:radial-gradient(circle at 50% 40%,rgba(65,218,255,.13),transparent 58%)!important;
}
.avatar-choice-art.has-3d-art img{
  width:auto!important;
  height:148px!important;
  max-width:100%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.3));
  transform:translateY(4px);
}

/* All 12 generated characters share a normalized 600x900 frame. */
.pro-avatar-stage>img:not(.pro-wearable){
  width:auto!important;
  height:100%!important;
  max-width:100%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
}
.pro-avatar-portrait>img:not(.pro-wearable){
  width:145%!important;
  height:145%!important;
  max-width:none!important;
  object-fit:contain!important;
  object-position:center 19%!important;
  transform:translate(-15%,-7%);
}

/* Important: cosmetics are now fitted to the body rather than displayed as
   giant shop artwork on top of the explorer. */
.pro-avatar-stage .pro-wearable-hat{
  width:25%!important;
  left:50%!important;
  top:3.8%!important;
  transform:translateX(-50%) rotate(-1deg)!important;
  z-index:10!important;
}
.pro-avatar-stage .pro-wearable-glasses{
  width:17.5%!important;
  left:50%!important;
  top:18.2%!important;
  transform:translateX(-50%)!important;
  z-index:11!important;
}
.pro-avatar-stage .pro-wearable-shirt{
  width:28%!important;
  left:50%!important;
  top:34%!important;
  transform:translateX(-50%) scaleY(.94)!important;
  z-index:6!important;
  clip-path:polygon(14% 5%,86% 5%,100% 29%,84% 43%,78% 100%,22% 100%,16% 43%,0 29%)!important;
  filter:drop-shadow(0 7px 8px rgba(0,0,0,.28))!important;
}
.pro-avatar-stage .pro-wearable-shoes{
  width:26%!important;
  left:50%!important;
  bottom:1.3%!important;
  transform:translateX(-50%)!important;
  z-index:12!important;
}

/* Portraits only need head accessories. */
.pro-avatar-portrait .pro-wearable-hat{
  width:60%!important;
  left:50%!important;
  top:-1%!important;
  transform:translateX(-50%)!important;
}
.pro-avatar-portrait .pro-wearable-glasses{
  width:37%!important;
  left:50%!important;
  top:29%!important;
  transform:translateX(-50%)!important;
}

/* Slight per-avatar fitting corrections for different hair silhouettes. */
.pro-avatar-stage[data-avatar-id="mina"] .pro-wearable-hat,
.pro-avatar-stage[data-avatar-id="zara"] .pro-wearable-hat,
.pro-avatar-stage[data-avatar-id="luna"] .pro-wearable-hat,
.pro-avatar-stage[data-avatar-id="maya"] .pro-wearable-hat,
.pro-avatar-stage[data-avatar-id="sora"] .pro-wearable-hat{top:2.6%!important;width:26%!important}
.pro-avatar-stage[data-avatar-id="ari"] .pro-wearable-hat,
.pro-avatar-stage[data-avatar-id="nova"] .pro-wearable-hat{top:3%!important;width:27%!important}
.pro-avatar-stage[data-avatar-id="finn"] .pro-wearable-glasses,
.pro-avatar-stage[data-avatar-id="leo"] .pro-wearable-glasses{top:17.4%!important}

/* Mobile keeps the same fit instead of making wearable art huge again. */
@media(max-width:820px){
  .pro-avatar-stage .pro-wearable-hat{width:26%!important}
  .pro-avatar-stage .pro-wearable-glasses{width:18.5%!important}
  .pro-avatar-stage .pro-wearable-shirt{width:29%!important}
  .pro-avatar-stage .pro-wearable-shoes{width:27%!important}
  .avatar-choice-art.has-3d-art{min-height:128px!important}
  .avatar-choice-art.has-3d-art img{height:126px!important}
}

/* V16.5 — wardrobe consistency polish */
/* When a baked 3D promo render cannot represent the equipped state, the live
   character rig takes over. Keep that transition visually intentional. */
#customizeAvatarPreview:not(.uses-pro-avatar) .tt3d-stage,
#shopAvatarPreview:not(.uses-pro-avatar) .tt3d-stage,
#menuHeroAvatarMount:not(.uses-pro-avatar) .tt3d-stage{
  transform-origin:50% 100%;
  filter:drop-shadow(0 26px 24px rgba(0,0,0,.42));
}
#customizeAvatarPreview:not(.uses-pro-avatar) .tt3d-model,
#shopAvatarPreview:not(.uses-pro-avatar) .tt3d-model,
#menuHeroAvatarMount:not(.uses-pro-avatar) .tt3d-model{
  animation:ttMenuHeroIdle 3.2s ease-in-out infinite;
}
/* Slightly fuller live-rig proportions so switching to no-hat/no-glasses does
   not feel like the avatar suddenly shrank. */
#customizeAvatarPreview:not(.uses-pro-avatar) .tt3d-stage,
#shopAvatarPreview:not(.uses-pro-avatar) .tt3d-stage{width:285px;height:410px}
#customizeAvatarPreview:not(.uses-pro-avatar) .tt3d-model,
#shopAvatarPreview:not(.uses-pro-avatar) .tt3d-model{transform:scale(1.08);transform-origin:50% 78%}
#menuHeroAvatarMount:not(.uses-pro-avatar) .tt3d-stage{width:300px;height:440px}
#menuHeroAvatarMount:not(.uses-pro-avatar) .tt3d-model{transform:scale(1.12);transform-origin:50% 82%}
@media(max-width:640px){
  #customizeAvatarPreview:not(.uses-pro-avatar) .tt3d-stage,
  #shopAvatarPreview:not(.uses-pro-avatar) .tt3d-stage{width:230px;height:340px}
  #menuHeroAvatarMount:not(.uses-pro-avatar) .tt3d-stage{width:235px;height:350px}
}
@media(prefers-reduced-motion:reduce){
  #customizeAvatarPreview:not(.uses-pro-avatar) .tt3d-model,
  #shopAvatarPreview:not(.uses-pro-avatar) .tt3d-model,
  #menuHeroAvatarMount:not(.uses-pro-avatar) .tt3d-model{animation:none!important}
}

/* V16.7 premium 3D wardrobe pass: hide baked default gear when slot is empty or replaced */
.pro-clear{position:absolute!important;pointer-events:none!important;z-index:4!important}
.pro-clear-hat{left:50%!important;top:0.8%!important;width:40%!important;height:18%!important;transform:translateX(-50%)!important}
.pro-clear-hat .clear-hair-back{position:absolute;left:4%;right:4%;top:3%;height:70%;border-radius:48% 48% 38% 38%;background:linear-gradient(180deg,var(--hair2),var(--hair) 58%,color-mix(in srgb,var(--hair) 82%,#000));box-shadow:0 8px 12px rgba(0,0,0,.22), inset 0 6px 8px rgba(255,255,255,.08)}
.pro-clear-hat .clear-hair-f1,.pro-clear-hat .clear-hair-f2,.pro-clear-hat .clear-hair-f3{position:absolute;background:linear-gradient(180deg,var(--hair2),var(--hair));box-shadow:0 4px 6px rgba(0,0,0,.15)}
.pro-clear-hat .clear-hair-f1{left:11%;top:53%;width:26%;height:24%;border-radius:62% 28% 64% 34%;transform:rotate(16deg)}
.pro-clear-hat .clear-hair-f2{left:38%;top:46%;width:28%;height:25%;border-radius:58% 36% 60% 36%;transform:rotate(-1deg)}
.pro-clear-hat .clear-hair-f3{right:12%;top:54%;width:23%;height:22%;border-radius:26% 62% 34% 64%;transform:rotate(-16deg)}

.pro-clear-glasses{left:50%!important;top:18.1%!important;width:24%!important;height:9%!important;transform:translateX(-50%)!important;z-index:6!important}
.pro-clear-glasses .clear-eye{position:absolute;top:40%;width:24%;height:44%;border-radius:50%;background:radial-gradient(circle at 38% 35%,#fff 0 14%,#547a96 15% 32%,#172332 33% 70%,#070b10 71%);box-shadow:0 2px 2px rgba(0,0,0,.18)}
.pro-clear-glasses .clear-eye.e1{left:16%}
.pro-clear-glasses .clear-eye.e2{right:16%}
.pro-clear-glasses .clear-brow{position:absolute;top:15%;width:23%;height:8%;border-radius:99px;background:var(--hair)}
.pro-clear-glasses .clear-brow.b1{left:17%;transform:rotate(-6deg)}
.pro-clear-glasses .clear-brow.b2{right:17%;transform:rotate(6deg)}

.pro-clear-shirt{left:50%!important;top:29%!important;width:44%!important;height:30%!important;transform:translateX(-50%)!important;z-index:3!important}
.pro-clear-shirt .clear-shirt-body{position:absolute;inset:0;border-radius:18% 18% 14% 14%;background:linear-gradient(155deg,#fff8,color-mix(in srgb,var(--top) 76%,#dbe9f7) 28%,color-mix(in srgb,var(--top) 78%,#0f2233));box-shadow:inset 0 10px 12px rgba(255,255,255,.12), inset 0 -10px 18px rgba(0,0,0,.16)}
.pro-clear-shirt .clear-shirt-logo{position:absolute;left:50%;top:36%;transform:translateX(-50%);width:18%;height:18%;display:grid;place-items:center;border-radius:999px;background:#1596de;color:#fff;font:800 14px/1 Inter,Arial,sans-serif;box-shadow:0 0 10px rgba(67,227,234,.35)}

.pro-clear-shoes{left:50%!important;bottom:1.3%!important;width:38%!important;height:13%!important;transform:translateX(-50%)!important;z-index:5!important}
.pro-clear-shoes .clear-sock{position:absolute;bottom:8%;width:33%;height:66%;border-radius:40% 40% 28% 28%;background:linear-gradient(180deg,#f4fbff,#dbe7f0 60%,#c4d4e1);box-shadow:0 5px 8px rgba(0,0,0,.2)}
.pro-clear-shoes .clear-sock.s1{left:11%;transform:rotate(-6deg)}
.pro-clear-shoes .clear-sock.s2{right:11%;transform:rotate(6deg)}

.pro-avatar-stage[data-avatar-id="mina"] .pro-clear-hat,
.pro-avatar-stage[data-avatar-id="zara"] .pro-clear-hat,
.pro-avatar-stage[data-avatar-id="luna"] .pro-clear-hat,
.pro-avatar-stage[data-avatar-id="maya"] .pro-clear-hat,
.pro-avatar-stage[data-avatar-id="sora"] .pro-clear-hat{top:1.5%!important;width:34%!important}
.pro-avatar-stage[data-avatar-id="ari"] .pro-clear-hat,
.pro-avatar-stage[data-avatar-id="nova"] .pro-clear-hat{top:1.9%!important;width:35%!important}
.pro-avatar-stage[data-avatar-id="leo"] .pro-clear-glasses,
.pro-avatar-stage[data-avatar-id="finn"] .pro-clear-glasses{top:17.4%!important}
.pro-avatar-stage[data-avatar-id="ari"] .pro-clear-shirt,
.pro-avatar-stage[data-avatar-id="nova"] .pro-clear-shirt{top:30%!important}

.pro-avatar-portrait .pro-clear-hat{left:50%!important;top:2%!important;width:76%!important;height:30%!important;transform:translateX(-50%)!important}
.pro-avatar-portrait .pro-clear-glasses{left:50%!important;top:32%!important;width:48%!important;height:14%!important;transform:translateX(-50%)!important}
@media (max-width:820px){
  .pro-avatar-stage .pro-clear-hat{width:42%!important}
  .pro-avatar-stage .pro-clear-glasses{width:26%!important}
  .pro-avatar-stage .pro-clear-shirt{width:48%!important}
  .pro-avatar-stage .pro-clear-shoes{width:40%!important}
}

/* V17 FINAL PRE-DEPLOY POLISH */
@media (min-width:821px){
  /* Primary modes already live in the large action rail. Keep top navigation quiet. */
  #playNavBtn,#mapsNavBtn,#multiplayerNavBtn,#dailyNavBtn{display:none!important}
  .v12-nav{justify-content:flex-end;gap:8px}
  .v12-nav-btn{min-width:auto;padding-inline:13px}
}

.v16-primary-actions .v12-action-card{min-height:68px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease}
.v16-primary-actions .v12-action-card:hover{transform:translateX(4px);border-color:rgba(83,226,255,.5);box-shadow:0 12px 30px rgba(0,0,0,.24),0 0 0 1px rgba(83,226,255,.08)}
.v16-primary-actions .v16-action-play{box-shadow:0 16px 42px rgba(36,204,231,.13)}
.v16-primary-actions .v16-action-duel{border-color:rgba(255,190,76,.28)}
.v16-primary-actions .v16-action-duel:hover{border-color:rgba(255,190,76,.62);box-shadow:0 12px 32px rgba(255,174,52,.12)}
.v16-secondary-actions button{min-height:40px;opacity:.88}
.v16-secondary-actions button:hover{opacity:1}

/* Multiplayer identity now uses the same premium 3D avatar language as the rest of the game. */
.lobby-mini-avatar.uses-3d-avatar,.leader-mini-avatar.uses-3d-avatar,.mp-champion-avatar-inner.uses-3d-avatar{background:radial-gradient(circle at 50% 22%,rgba(67,227,234,.2),rgba(5,18,31,.96));overflow:hidden;isolation:isolate}
.lobby-mini-avatar.uses-3d-avatar>img:not(.mp-mini-country-flag),.leader-mini-avatar.uses-3d-avatar>img:not(.mp-mini-country-flag),.mp-champion-avatar-inner.uses-3d-avatar>img:not(.mp-mini-country-flag){position:absolute;width:165%;height:165%;max-width:none;max-height:none;object-fit:contain;object-position:center 10%;transform:translateY(9%);filter:drop-shadow(0 5px 8px rgba(0,0,0,.24))}
.leader-mini-avatar.uses-3d-avatar>img:not(.mp-mini-country-flag){width:178%;height:178%;transform:translateY(10%)}
.mp-champion-avatar-inner.uses-3d-avatar>img:not(.mp-mini-country-flag){width:150%;height:150%;transform:translateY(8%)}
.mp-mini-country-flag{position:absolute!important;right:2px!important;bottom:2px!important;width:18px!important;height:13px!important;object-fit:cover!important;border-radius:3px!important;border:1px solid rgba(255,255,255,.8)!important;z-index:8!important;box-shadow:0 2px 5px rgba(0,0,0,.38)!important;transform:none!important}

.duel-player-card{transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.duel-player-card.me{border-color:rgba(67,227,234,.35);box-shadow:inset 0 0 0 1px rgba(67,227,234,.05)}
.duel-player-card.opponent:not(.searching){border-color:rgba(255,190,76,.3);box-shadow:inset 0 0 0 1px rgba(255,190,76,.05)}
.duel-search-timer{font-variant-numeric:tabular-nums;letter-spacing:.08em}
.duel-long-wait{border:1px solid rgba(255,190,76,.18);border-radius:16px;background:rgba(255,181,60,.045);padding:12px}

.lobby-status,#mpResultStatus,#mpFinalStatus{min-height:24px;display:flex;align-items:center;justify-content:center;text-align:center}
.mp-result-actions,.mp-final-actions{gap:10px;flex-wrap:wrap}
.mp-result-actions .btn,.mp-final-actions .btn{min-height:48px}

/* Stronger focus accessibility without changing the visual theme. */
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #58e8f2!important;outline-offset:3px!important}

@media(max-width:820px){
  .v16-primary-actions .v12-action-card{min-height:60px}
  .v16-primary-actions .v12-action-card:hover{transform:none}
  .mp-result-actions .btn,.mp-final-actions .btn{flex:1 1 145px}
}

/* V17.1 true modular WebGL avatar */
.uses-webgl-avatar{position:relative!important;overflow:hidden!important;touch-action:none!important}
.uses-webgl-avatar .tt-webgl-avatar{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:3;cursor:grab;filter:drop-shadow(0 26px 24px rgba(0,0,0,.32))}
.uses-webgl-avatar .tt-webgl-avatar:active{cursor:grabbing}
#menuHeroAvatarMount.uses-webgl-avatar{overflow:visible!important}
#customizeAvatarPreview.uses-webgl-avatar,#shopAvatarPreview.uses-webgl-avatar{min-height:360px;background:radial-gradient(circle at 50% 65%,rgba(67,227,234,.13),transparent 48%)}
@media(max-width:820px){#customizeAvatarPreview.uses-webgl-avatar,#shopAvatarPreview.uses-webgl-avatar{min-height:320px}}

/* Kill the failed raster-erasing experiment completely. */
.pro-clear{display:none!important}

/* V17.3 production avatar rollback: premium illustrated 3D art, no primitive WebGL mannequin */
.tt-webgl-avatar{display:none!important}
#menuHeroAvatarMount,#customizeAvatarPreview,#shopAvatarPreview{overflow:hidden!important;display:grid!important;place-items:center!important}
#menuHeroAvatarMount .pro-avatar-stage,#customizeAvatarPreview .pro-avatar-stage,#shopAvatarPreview .pro-avatar-stage{
  width:100%!important;height:100%!important;display:grid!important;place-items:center!important;overflow:hidden!important;
}
#menuHeroAvatarMount .pro-avatar-stage>img:not(.pro-wearable),
#customizeAvatarPreview .pro-avatar-stage>img:not(.pro-wearable),
#shopAvatarPreview .pro-avatar-stage>img:not(.pro-wearable){
  width:auto!important;height:94%!important;max-width:92%!important;max-height:94%!important;object-fit:contain!important;
  object-position:center center!important;transform:none!important;margin:0!important;
  filter:drop-shadow(0 22px 20px rgba(0,0,0,.36))!important;
}
#customizeAvatarPreview,#shopAvatarPreview{min-height:0!important;padding:8px 8px 4px!important}
#customizeAvatarPreview .pro-avatar-stage,#shopAvatarPreview .pro-avatar-stage{align-items:center!important}
#menuHeroAvatarMount .pro-avatar-stage{align-items:center!important}
@media(max-width:820px){
  #menuHeroAvatarMount .pro-avatar-stage>img:not(.pro-wearable),
  #customizeAvatarPreview .pro-avatar-stage>img:not(.pro-wearable),
  #shopAvatarPreview .pro-avatar-stage>img:not(.pro-wearable){height:92%!important;max-height:92%!important;max-width:96%!important}
}

/* V18.2 recovery: clean base avatar framing, stable and click-safe */
#menuHeroAvatarMount,#customizeAvatarPreview,#shopAvatarPreview{position:relative!important;overflow:hidden!important}
#menuHeroAvatarMount .pro-avatar-stage,#customizeAvatarPreview .pro-avatar-stage,#shopAvatarPreview .pro-avatar-stage{
  width:100%!important;height:100%!important;display:grid!important;place-items:center!important;overflow:hidden!important;
  transform-style:preserve-3d;transition:transform .16s ease-out;
}
#menuHeroAvatarMount .pro-avatar-stage>img:not(.pro-wearable),
#customizeAvatarPreview .pro-avatar-stage>img:not(.pro-wearable),
#shopAvatarPreview .pro-avatar-stage>img:not(.pro-wearable){
  width:auto!important;height:88%!important;max-height:88%!important;max-width:90%!important;
  object-fit:contain!important;object-position:center center!important;transform:none!important;margin:0!important;
  filter:drop-shadow(0 22px 22px rgba(0,0,0,.34))!important;pointer-events:none!important;
}
#customizeAvatarPreview,#shopAvatarPreview{padding:8px 8px 42px!important}
#menuHeroAvatarMount{padding-bottom:34px!important}
.pro-wearable,.pro-clear,.tt-webgl-avatar{display:none!important}
@media(max-width:820px){
 #menuHeroAvatarMount .pro-avatar-stage>img:not(.pro-wearable),
 #customizeAvatarPreview .pro-avatar-stage>img:not(.pro-wearable),
 #shopAvatarPreview .pro-avatar-stage>img:not(.pro-wearable){height:86%!important;max-height:86%!important;max-width:94%!important}
}

/* V18.3 visible cosmetic rig: one normalized 600x900 art frame per avatar. */
.pro-avatar-stage,.pro-avatar-portrait{position:relative!important;display:grid!important;place-items:center!important;overflow:visible!important}
.avatar-art-frame{position:relative;width:min(66.6667%,420px);aspect-ratio:2/3;max-height:92%;height:auto;isolation:isolate;transform-style:preserve-3d}
.avatar-base-layer{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;object-position:center center!important;transform:none!important;animation:none!important;z-index:1!important;filter:drop-shadow(0 18px 18px rgba(0,0,0,.30))!important}
.avatar-layer{position:absolute!important;z-index:6!important;pointer-events:none!important;user-select:none!important;height:auto!important;object-fit:contain!important;animation:none!important;filter:drop-shadow(0 6px 8px rgba(0,0,0,.30))!important}
.avatar-layer-hat{width:43%!important;left:50%!important;top:5.5%!important;transform:translateX(-50%)!important;z-index:10!important}
.avatar-layer-glasses{width:30%!important;left:50%!important;top:24%!important;transform:translateX(-50%)!important;z-index:11!important}
.avatar-layer-shirt{width:50%!important;left:50%!important;top:39%!important;transform:translateX(-50%) scaleY(.86)!important;z-index:7!important;clip-path:polygon(12% 5%,88% 5%,100% 31%,84% 45%,78% 100%,22% 100%,16% 45%,0 31%)!important}
.avatar-layer-shoes{width:47%!important;left:50%!important;bottom:2.5%!important;transform:translateX(-50%)!important;z-index:12!important}
/* Hair / head silhouette adjustments for the 12 clean base avatars. */
.avatar-art-frame[data-avatar-id="mina"] .avatar-layer-hat,
.avatar-art-frame[data-avatar-id="zara"] .avatar-layer-hat,
.avatar-art-frame[data-avatar-id="maya"] .avatar-layer-hat,
.avatar-art-frame[data-avatar-id="luna"] .avatar-layer-hat,
.avatar-art-frame[data-avatar-id="sora"] .avatar-layer-hat{top:4.1%!important;width:45%!important}
.avatar-art-frame[data-avatar-id="ari"] .avatar-layer-hat,
.avatar-art-frame[data-avatar-id="nova"] .avatar-layer-hat{top:4.7%!important;width:45%!important}
.avatar-art-frame[data-avatar-id="mina"] .avatar-layer-glasses,
.avatar-art-frame[data-avatar-id="zara"] .avatar-layer-glasses,
.avatar-art-frame[data-avatar-id="maya"] .avatar-layer-glasses,
.avatar-art-frame[data-avatar-id="luna"] .avatar-layer-glasses,
.avatar-art-frame[data-avatar-id="sora"] .avatar-layer-glasses{top:23.2%!important;width:31%!important}
/* Profile chips use the same rig but crop the frame around the face. */
.pro-avatar-portrait .avatar-art-frame{width:220%!important;max-width:none!important;max-height:none!important;transform:translateY(24%)!important}
.pro-avatar-portrait .avatar-layer-shirt,.pro-avatar-portrait .avatar-layer-shoes{display:none!important}
#menuHeroAvatarMount .avatar-art-frame,#customizeAvatarPreview .avatar-art-frame,#shopAvatarPreview .avatar-art-frame{height:90%!important;width:auto!important;aspect-ratio:2/3!important;max-height:90%!important;max-width:92%!important}
#menuHeroAvatarMount .pro-avatar-stage,#customizeAvatarPreview .pro-avatar-stage,#shopAvatarPreview .pro-avatar-stage{overflow:visible!important}
#customizeAvatarPreview,#shopAvatarPreview{padding:8px 8px 30px!important}
@media(max-width:820px){
  #menuHeroAvatarMount .avatar-art-frame,#customizeAvatarPreview .avatar-art-frame,#shopAvatarPreview .avatar-art-frame{height:87%!important;max-height:87%!important}
  .avatar-layer-hat{width:45%!important}.avatar-layer-glasses{width:31%!important}.avatar-layer-shirt{width:52%!important}.avatar-layer-shoes{width:49%!important}
}

/* V18.4 hard avatar visibility fix — fixed art frame, no zero-height percentage chain */
#menuHeroAvatarMount .pro-avatar-stage,
#customizeAvatarPreview .pro-avatar-stage,
#shopAvatarPreview .pro-avatar-stage{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  overflow:visible!important;
  display:block!important;
}
#menuHeroAvatarMount .avatar-art-frame,
#customizeAvatarPreview .avatar-art-frame,
#shopAvatarPreview .avatar-art-frame{
  position:absolute!important;
  left:50%!important;
  top:49%!important;
  width:min(74%,440px)!important;
  height:88%!important;
  max-width:440px!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  transform:translate(-50%,-50%)!important;
  overflow:visible!important;
  opacity:1!important;
  visibility:visible!important;
  z-index:5!important;
}
#menuHeroAvatarMount .avatar-base-layer,
#customizeAvatarPreview .avatar-base-layer,
#shopAvatarPreview .avatar-base-layer{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  opacity:1!important;
  visibility:visible!important;
  z-index:1!important;
}
/* Keep cosmetics relative to the exact same stable frame. */
#menuHeroAvatarMount .avatar-layer,
#customizeAvatarPreview .avatar-layer,
#shopAvatarPreview .avatar-layer{display:block!important;opacity:1!important;visibility:visible!important}
/* Profile/account avatars also get a guaranteed visible clean base. */
.pro-avatar-portrait{position:absolute!important;inset:0!important;overflow:hidden!important;display:block!important}
.pro-avatar-portrait .avatar-art-frame{position:absolute!important;left:50%!important;top:12%!important;width:190%!important;height:190%!important;max-width:none!important;max-height:none!important;transform:translateX(-50%)!important}
.pro-avatar-portrait .avatar-base-layer{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;object-fit:contain!important;object-position:center 8%!important;opacity:1!important;visibility:visible!important}
@media(max-width:820px){
  #menuHeroAvatarMount .avatar-art-frame,#customizeAvatarPreview .avatar-art-frame,#shopAvatarPreview .avatar-art-frame{width:min(82%,390px)!important;height:86%!important;top:48%!important}
}

/* V18.5 robust avatar renderer — guaranteed visible in main menu + wardrobe */
#menuHeroAvatarMount,
#customizeAvatarPreview,
#shopAvatarPreview,
#menuProfileAvatarMount,
#accountAvatar,
#profileAvatarLarge {
  position: relative !important;
  overflow: hidden !important;
}

#menuHeroAvatarMount,
#customizeAvatarPreview,
#shopAvatarPreview {
  display: grid !important;
  place-items: center !important;
}

.tt-avatar-shell {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform-style: preserve-3d;
  transition: transform .18s ease;
  will-change: transform;
  pointer-events: none;
}

.tt-avatar-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 20px 28px rgba(0,0,0,.34));
}

#menuHeroAvatarMount .tt-avatar-image {
  height: min(90%, 640px);
  max-width: min(92%, 430px);
}

#customizeAvatarPreview .tt-avatar-image,
#shopAvatarPreview .tt-avatar-image {
  height: min(88%, 560px);
  max-width: min(92%, 370px);
}

#menuProfileAvatarMount .tt-avatar-shell,
#accountAvatar .tt-avatar-shell,
#profileAvatarLarge .tt-avatar-shell {
  align-items: center;
}

#menuProfileAvatarMount .tt-avatar-image,
#accountAvatar .tt-avatar-image {
  height: 190%;
  max-width: none;
  transform: translateY(24%);
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.28));
}

#profileAvatarLarge .tt-avatar-image {
  height: 170%;
  max-width: none;
  transform: translateY(18%);
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.28));
}

#menuHeroAvatarMount.is-rotating,
#customizeAvatarPreview.is-rotating,
#shopAvatarPreview.is-rotating {
  cursor: grabbing;
}

#menuHeroAvatarMount:not(.is-rotating),
#customizeAvatarPreview:not(.is-rotating),
#shopAvatarPreview:not(.is-rotating) {
  cursor: grab;
}

/* V19 — whole-avatar skin system. No wearable overlays. */
.avatar-skin-shell{position:relative;width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center;transform-style:preserve-3d;transition:transform .18s ease;pointer-events:none;will-change:transform}
.avatar-skin-image{display:block;width:auto;height:92%;max-width:94%;max-height:92%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 22px 24px rgba(0,0,0,.34));user-select:none;pointer-events:none;will-change:transform}
#menuHeroAvatarMount .avatar-skin-shell{align-items:center;justify-content:center}
#menuHeroAvatarMount .avatar-skin-shell{align-items:flex-end;justify-content:center;padding-bottom:18px}
#menuHeroAvatarMount .avatar-skin-image{height:98%;max-height:98%;max-width:96%;object-position:center bottom;transform:translate3d(var(--avatar-hero-x,0px),var(--avatar-hero-y,-8px),0) scale(var(--avatar-hero-scale,1.28));transform-origin:50% 100%}
#customizeAvatarPreview .avatar-skin-shell,#shopAvatarPreview .avatar-skin-shell{align-items:center;justify-content:center}
#customizeAvatarPreview .avatar-skin-image,#shopAvatarPreview .avatar-skin-image{height:93%;max-height:93%;max-width:94%;object-position:center center;transform:translate3d(var(--avatar-preview-x,0px),var(--avatar-preview-y,0px),0) scale(var(--avatar-preview-scale,1.04));transform-origin:50% 78%}
#accountAvatar .avatar-skin-shell,#menuProfileAvatarMount .avatar-skin-shell,#profileAvatarLarge .avatar-skin-shell{align-items:center;justify-content:center}
#accountAvatar .avatar-skin-image,#menuProfileAvatarMount .avatar-skin-image{height:176%;max-width:none;object-position:center 12%;transform:translate3d(var(--avatar-chip-x,0px),var(--avatar-chip-y,24px),0) scale(var(--avatar-chip-scale,1.08));transform-origin:50% 14%;filter:drop-shadow(0 8px 14px rgba(0,0,0,.28))}
#profileAvatarLarge .avatar-skin-image{height:158%;max-width:none;object-position:center 10%;transform:translate3d(var(--avatar-profile-x,0px),var(--avatar-profile-y,14px),0) scale(var(--avatar-profile-scale,1.05));transform-origin:50% 14%;filter:drop-shadow(0 12px 18px rgba(0,0,0,.28))}
.avatar-skin-emblem{position:absolute;right:12%;top:12%;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;font-size:22px;color:#fff;box-shadow:0 0 24px currentColor;background:rgba(8,18,30,.72);border:1px solid currentColor;animation:avatarEmblemPulse 2s ease-in-out infinite alternate}
.avatar-skin-emblem.rare{color:#69dfff}.avatar-skin-emblem.epic{color:#bd7cff}.avatar-skin-emblem.legendary{color:#ffd566}
@keyframes avatarEmblemPulse{from{transform:scale(.96);filter:brightness(.9)}to{transform:scale(1.06);filter:brightness(1.25)}}

.avatar-effect-frost:before,.avatar-effect-sunset:before,.avatar-effect-neon:before,.avatar-effect-forest:before,.avatar-effect-void:before,.avatar-effect-solar:before{content:'';position:absolute;inset:8% 12%;border-radius:42%;pointer-events:none;z-index:0;filter:blur(28px);opacity:.35}
.avatar-effect-frost:before{background:radial-gradient(circle,#7cecff55,transparent 62%)}
.avatar-effect-sunset:before{background:radial-gradient(circle,#ff9f5c55,transparent 62%)}
.avatar-effect-neon:before{background:radial-gradient(circle,#c35cff66,transparent 62%)}
.avatar-effect-forest:before{background:radial-gradient(circle,#57dd8b55,transparent 62%)}
.avatar-effect-void:before{background:radial-gradient(circle,#6d55ff66,transparent 62%)}
.avatar-effect-solar:before{background:radial-gradient(circle,#ffc44d77,transparent 62%);animation:solarAura 2.2s ease-in-out infinite alternate}
@keyframes solarAura{from{opacity:.25;transform:scale(.94)}to{opacity:.55;transform:scale(1.04)}}

/* V20.5 — premium emblem/aura click effects for the main-menu avatar */
#menuHeroAvatarMount.avatar-click-enabled{position:relative!important;isolation:isolate;outline:none;overflow:visible!important}
#menuHeroAvatarMount.avatar-click-enabled:focus-visible{box-shadow:0 0 0 2px rgba(125,236,255,.3),0 0 0 5px rgba(125,236,255,.12)}
#menuHeroAvatarMount .avatar-click-fx-layer{position:absolute;inset:-5% -8% -2%;pointer-events:none;z-index:12;overflow:visible;perspective:900px}
#menuHeroAvatarMount .avatar-click-aura{position:absolute;left:50%;top:58%;width:58%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.45);opacity:0;background:radial-gradient(circle,transparent 0 32%,color-mix(in srgb,var(--fx-primary,#7cecff) 40%,transparent) 46%,transparent 67%),conic-gradient(from 0deg,transparent 0 14%,color-mix(in srgb,var(--fx-secondary,#fff) 55%,transparent) 18%,transparent 24% 48%,color-mix(in srgb,var(--fx-primary,#7cecff) 38%,transparent) 53%,transparent 60% 100%);filter:blur(.3px) drop-shadow(0 0 18px var(--fx-primary,#7cecff));animation:avatarAuraFlash 1.05s cubic-bezier(.18,.8,.18,1) forwards}
#menuHeroAvatarMount .avatar-click-ring{position:absolute;left:50%;top:59%;width:42%;aspect-ratio:1;border-radius:50%;border:2px solid var(--ring-color,#7cecff);transform:translate(-50%,-50%) scale(.45) rotateX(63deg);opacity:.95;box-shadow:0 0 16px var(--ring-color,#7cecff),inset 0 0 16px color-mix(in srgb,var(--ring-color,#7cecff) 45%,transparent);animation:avatarEmblemRing 1.15s cubic-bezier(.13,.74,.18,1) var(--ring-delay,0ms) forwards}
#menuHeroAvatarMount .avatar-click-ring.ring-2{top:54%;width:52%;border-style:dashed;animation-duration:1.32s;transform:translate(-50%,-50%) scale(.36) rotateX(63deg) rotateZ(26deg)}
#menuHeroAvatarMount .avatar-click-ring.ring-3{top:50%;width:62%;border-width:1px;border-style:double;animation-duration:1.48s;transform:translate(-50%,-50%) scale(.30) rotateX(63deg) rotateZ(-34deg)}
#menuHeroAvatarMount .avatar-click-emblem{--radius:180px;position:absolute;left:50%;top:55%;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;font-size:28px;font-weight:900;line-height:1;color:var(--emblem-color,#fff);text-shadow:0 0 8px currentColor,0 0 20px currentColor;filter:drop-shadow(0 0 8px currentColor);opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(0) rotate(calc(-1 * var(--angle))) scale(.2);animation:avatarOrbitEmblem 1.2s cubic-bezier(.13,.78,.18,1) var(--emblem-delay,0ms) forwards}
#menuHeroAvatarMount .rarity-legendary .avatar-click-emblem{--radius:215px;width:52px;height:52px;font-size:34px}
#menuHeroAvatarMount .avatar-click-particle{position:absolute;left:50%;top:57%;display:grid;place-items:center;width:var(--size,10px);height:var(--size,10px);border-radius:999px;opacity:0;background:radial-gradient(circle at 35% 35%,#fff 0 18%,var(--particle-color,#7cecff) 42%,transparent 72%);box-shadow:0 0 14px var(--particle-color,#7cecff),0 0 30px color-mix(in srgb,var(--particle-color,#7cecff) 62%,transparent);color:var(--particle-color,#7cecff);font-size:var(--size,16px);font-weight:900;line-height:1;text-shadow:0 0 8px currentColor,0 0 16px currentColor;transform:translate(-50%,-50%) translate(0,0) rotate(0deg) scale(.15);animation:avatarClickParticle 1.05s cubic-bezier(.13,.74,.16,1) var(--delay,0ms) forwards}
#menuHeroAvatarMount .avatar-click-particle.diamond{border-radius:2px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
#menuHeroAvatarMount .avatar-click-particle.glyph{background:none;box-shadow:none;width:auto;height:auto;filter:drop-shadow(0 0 8px currentColor)}
#menuHeroAvatarMount .avatar-click-legendary-crest{position:absolute;left:50%;top:48%;width:180px;height:180px;transform:translate(-50%,-50%) scale(.25) rotate(-18deg);opacity:0;border:2px solid var(--crest-color,#ffd247);border-radius:50%;box-shadow:0 0 28px var(--crest-color,#ffd247),inset 0 0 30px color-mix(in srgb,var(--crest-color,#ffd247) 38%,transparent);animation:legendaryCrest 1.42s cubic-bezier(.12,.82,.16,1) forwards}
#menuHeroAvatarMount .avatar-click-legendary-crest:before,#menuHeroAvatarMount .avatar-click-legendary-crest:after{content:'';position:absolute;inset:14px;border:1px dashed currentColor;border-radius:50%;color:var(--crest-color,#ffd247)}
#menuHeroAvatarMount .avatar-click-legendary-crest:after{inset:30px;transform:rotate(45deg);border-style:solid;border-radius:22%}
#menuHeroAvatarMount .avatar-click-legendary-crest b,#menuHeroAvatarMount .avatar-click-legendary-crest i,#menuHeroAvatarMount .avatar-click-legendary-crest strong{position:absolute;color:var(--crest-color,#ffd247);font-style:normal;font-size:30px;text-shadow:0 0 10px currentColor}
#menuHeroAvatarMount .avatar-click-legendary-crest b{left:50%;top:-20px;transform:translateX(-50%)}
#menuHeroAvatarMount .avatar-click-legendary-crest i{right:-15px;top:50%;transform:translateY(-50%)}
#menuHeroAvatarMount .avatar-click-legendary-crest strong{left:-15px;top:50%;transform:translateY(-50%)}
#menuHeroAvatarMount .theme-frost .avatar-click-aura{filter:blur(.4px) drop-shadow(0 0 24px #7cecff)}
#menuHeroAvatarMount .theme-neon .avatar-click-ring{border-radius:28%;transform:translate(-50%,-50%) scale(.45) rotateX(56deg) rotateZ(45deg)}
#menuHeroAvatarMount .theme-forest .avatar-click-ring{border-style:dotted}
#menuHeroAvatarMount .theme-void .avatar-click-aura{background:radial-gradient(circle,rgba(108,92,255,.18) 0 18%,transparent 35%),conic-gradient(from 0deg,transparent,#9f73ff88,transparent,#655cff88,transparent)}
#menuHeroAvatarMount .theme-solar .avatar-click-aura{background:repeating-conic-gradient(from 0deg,#ffd24700 0 8deg,#ffd247aa 9deg 11deg,#ffd24700 12deg 22deg),radial-gradient(circle,#fff5bd55 0 17%,#ffd24722 33%,transparent 65%)}
#menuHeroAvatarMount.avatar-burst-active .avatar-skin-image{animation:avatarBurstPop .62s ease}
#menuHeroAvatarMount.avatar-burst-active .avatar-skin-emblem{animation:avatarEmblemPulse .2s ease 0s 3 alternate}
@keyframes avatarAuraFlash{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-16deg)}18%{opacity:.95}65%{opacity:.7}100%{opacity:0;transform:translate(-50%,-50%) scale(1.18) rotate(20deg)}}
@keyframes avatarEmblemRing{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotateX(63deg) rotateZ(-40deg)}18%{opacity:1}72%{opacity:.72}100%{opacity:0;transform:translate(-50%,-50%) scale(1.45) rotateX(63deg) rotateZ(135deg)}}
@keyframes avatarOrbitEmblem{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(0) rotate(calc(-1 * var(--angle))) scale(.2)}20%{opacity:1}58%{opacity:1;transform:translate(-50%,-50%) rotate(calc(var(--angle) + 28deg)) translateY(calc(-1 * var(--radius))) rotate(calc(-1 * (var(--angle) + 28deg))) scale(1.18)}100%{opacity:0;transform:translate(-50%,-50%) rotate(calc(var(--angle) + 74deg)) translateY(calc(-1 * (var(--radius) + 32px))) rotate(calc(-1 * (var(--angle) + 74deg))) scale(.7)}}
@keyframes avatarClickParticle{0%{opacity:0;transform:translate(-50%,-50%) translate(0,0) rotate(0deg) scale(.15)}10%{opacity:1}62%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) translate(var(--tx),var(--ty)) rotate(var(--spin,90deg)) scale(1.12)}}
@keyframes legendaryCrest{0%{opacity:0;transform:translate(-50%,-50%) scale(.22) rotate(-24deg)}20%{opacity:1}62%{opacity:.95;transform:translate(-50%,-50%) scale(1) rotate(10deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.34) rotate(38deg)}}
@keyframes avatarBurstPop{0%{transform:translateY(0) scale(1);filter:drop-shadow(0 22px 24px rgba(0,0,0,.34)) brightness(1)}35%{transform:translateY(-9px) scale(1.045);filter:drop-shadow(0 30px 34px rgba(0,0,0,.4)) brightness(1.2)}100%{transform:translateY(0) scale(1);filter:drop-shadow(0 22px 24px rgba(0,0,0,.34)) brightness(1)}}
@media(prefers-reduced-motion:reduce){#menuHeroAvatarMount .avatar-click-aura,#menuHeroAvatarMount .avatar-click-ring,#menuHeroAvatarMount .avatar-click-emblem,#menuHeroAvatarMount .avatar-click-particle,#menuHeroAvatarMount .avatar-click-legendary-crest,#menuHeroAvatarMount.avatar-burst-active .avatar-skin-image{animation:none!important}}

.avatar-collection-panel{display:flex;flex-direction:column;gap:14px}
.avatar-collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-height:390px;overflow:auto;padding:2px}
.avatar-collection-card{position:relative;display:grid;grid-template-rows:150px auto auto;gap:7px;padding:10px;border-radius:18px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(145deg,rgba(17,39,60,.92),rgba(6,18,30,.92));color:var(--text);cursor:pointer;overflow:hidden;transition:.18s ease;text-align:left}
.avatar-collection-card:hover{transform:translateY(-3px);border-color:rgba(82,220,255,.4);box-shadow:0 14px 28px rgba(0,0,0,.25)}
.avatar-collection-card.equipped{border-color:#59e8f3;box-shadow:0 0 0 1px rgba(89,232,243,.2),0 0 26px rgba(89,232,243,.12)}
.avatar-collection-card img{width:100%;height:150px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 10px 12px rgba(0,0,0,.28))}
.avatar-collection-card span{display:flex;flex-direction:column;min-width:0}.avatar-collection-card strong{font-size:13px}.avatar-collection-card small{margin-top:2px;font-size:9px;letter-spacing:.08em;color:#8ca8bb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar-collection-card>b{font-size:9px;letter-spacing:.09em;color:#72e8f2}.avatar-collection-card.premium>b{color:#ffd66d}

.cosmetic-shop-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
.avatar-store-card{position:relative;overflow:hidden;display:grid;grid-template-rows:270px auto auto auto;gap:9px;padding:12px;border-radius:22px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(160deg,rgba(14,34,53,.98),rgba(5,14,25,.98));box-shadow:0 16px 35px rgba(0,0,0,.22);transition:.2s ease}
.avatar-store-card:hover{transform:translateY(-4px);box-shadow:0 22px 42px rgba(0,0,0,.3)}
.avatar-store-card.rare{border-color:rgba(73,202,255,.3)}.avatar-store-card.epic{border-color:rgba(175,91,255,.36)}.avatar-store-card.legendary{border-color:rgba(255,200,70,.52);box-shadow:0 16px 36px rgba(255,173,36,.08)}
.avatar-store-card.equipped{box-shadow:0 0 0 2px rgba(89,232,243,.45),0 18px 42px rgba(0,0,0,.28)}
.avatar-store-card.locked{opacity:.75}
.avatar-store-visual{position:relative;border:0;border-radius:18px;overflow:hidden;background:radial-gradient(circle at 50% 32%,rgba(74,220,255,.17),rgba(5,16,27,.85) 62%);cursor:pointer;padding:0}
.avatar-store-card.effect-sunset .avatar-store-visual{background:radial-gradient(circle at 50% 32%,rgba(255,138,64,.2),rgba(5,16,27,.88) 64%)}
.avatar-store-card.effect-neon .avatar-store-visual,.avatar-store-card.effect-void .avatar-store-visual{background:radial-gradient(circle at 50% 32%,rgba(159,73,255,.23),rgba(5,16,27,.9) 64%)}
.avatar-store-card.effect-forest .avatar-store-visual{background:radial-gradient(circle at 50% 32%,rgba(71,209,119,.2),rgba(5,16,27,.9) 64%)}
.avatar-store-card.effect-solar .avatar-store-visual{background:radial-gradient(circle at 50% 32%,rgba(255,191,49,.28),rgba(5,16,27,.9) 64%)}
.avatar-store-visual img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 16px 18px rgba(0,0,0,.34));transition:transform .22s ease}.avatar-store-visual:hover img{transform:scale(1.035)}
.avatar-store-rarity{position:absolute;left:10px;top:10px;padding:5px 8px;border-radius:999px;background:rgba(3,11,18,.72);border:1px solid rgba(255,255,255,.12);font-size:9px;font-weight:900;letter-spacing:.12em;color:#99eaff}.epic .avatar-store-rarity{color:#d59cff}.legendary .avatar-store-rarity{color:#ffd76a}
.avatar-store-info h3{margin:0;font-size:18px}.avatar-store-info p{margin:4px 0 0;font-size:10px;font-weight:800;letter-spacing:.09em;color:#87a5b8}
.avatar-store-price{font-size:13px;font-weight:900;color:#ffd662}

@media(max-width:900px){.avatar-collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cosmetic-shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.avatar-store-card{grid-template-rows:230px auto auto auto}}
@media(max-width:600px){.avatar-collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.avatar-collection-card{grid-template-rows:120px auto auto}.avatar-collection-card img{height:120px}.cosmetic-shop-grid{grid-template-columns:1fr!important}.avatar-store-card{grid-template-rows:250px auto auto auto}.avatar-skin-image{max-width:96%}}

/* V19.1 — clean main menu + dedicated Play Setup splash */
#menuScreen .v12-home-shell{
  padding-bottom:14px!important;
}

.play-setup-modal{
  z-index:2100;
  padding:24px;
  background:rgba(1,8,15,.74);
  backdrop-filter:blur(15px);
}
.play-setup-card{
  width:min(930px,calc(100vw - 32px));
  max-height:min(900px,92dvh);
  overflow:auto;
  padding:0!important;
  border-radius:30px!important;
  border:1px solid rgba(72,209,255,.25)!important;
  background:
    radial-gradient(circle at 84% 8%,rgba(48,202,255,.15),transparent 30%),
    linear-gradient(150deg,rgba(8,28,46,.99),rgba(4,14,26,.99) 62%,rgba(5,12,21,.99))!important;
  box-shadow:0 32px 100px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.05)!important;
}
.play-setup-hero{
  position:relative;
  min-height:176px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  padding:34px 74px 30px 34px;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(120deg,rgba(24,94,143,.18),transparent 60%);
}
.play-setup-copy{position:relative;z-index:2;max-width:590px}
.play-setup-copy h2{margin:7px 0 8px;font-size:clamp(34px,5vw,54px);line-height:.98;letter-spacing:-.045em;color:#f4fbff}
.play-setup-copy p{margin:0;max-width:540px;color:#9eb4c5;font-size:14px;line-height:1.55}
.play-setup-globe{position:absolute;right:28px;top:50%;width:128px;height:128px;transform:translateY(-50%);display:grid;place-items:center;border-radius:50%;border:1px solid rgba(81,226,255,.28);background:radial-gradient(circle,rgba(66,226,255,.16),rgba(35,120,205,.04) 60%,transparent 62%);box-shadow:0 0 42px rgba(40,208,255,.14)}
.play-setup-globe span{font-size:72px;color:#66e6ff;filter:drop-shadow(0 0 13px rgba(72,224,255,.36))}
.play-setup-globe i{position:absolute;width:86%;height:35%;border:1px solid rgba(99,227,255,.22);border-radius:50%}

.play-setup-grid{display:grid;grid-template-columns:1fr;gap:12px;padding:22px 26px 10px}
.play-setup-option{padding:16px;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015));box-shadow:inset 0 1px rgba(255,255,255,.035)}
.play-setup-option-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.play-setup-option-head>span{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:rgba(58,218,255,.1);border:1px solid rgba(72,220,255,.2);color:#63e6ff;font-size:11px;font-weight:900;letter-spacing:.08em}
.play-setup-option-head div{display:flex;flex-direction:column;gap:2px}
.play-setup-option-head strong{font-size:12px;letter-spacing:.13em;color:#eefbff}
.play-setup-option-head small{font-size:11px;color:#8198aa}
.play-setup-segments{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px!important;background:transparent!important;padding:0!important;border:0!important}
.play-setup-segments.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.play-setup-segments .segment{
  min-height:62px;
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:10px 14px!important;
  border-radius:14px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  background:rgba(6,18,31,.72)!important;
  color:#aec0cf!important;
  font-weight:800!important;
  box-shadow:none!important;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.play-setup-segments .segment b{font-size:19px;font-weight:700}
.play-setup-segments .segment span{font-size:13px}
.play-setup-segments .segment small{font-size:9px;color:#8095a6}
.play-setup-segments .segment:hover{transform:translateY(-2px);border-color:rgba(75,222,255,.35)!important}
.play-setup-segments .segment.active{
  color:#04131e!important;
  border-color:#62ecf5!important;
  background:linear-gradient(135deg,#55e8f3,#70e6c8)!important;
  box-shadow:0 8px 24px rgba(56,217,236,.15)!important;
}
.play-setup-segments .segment.active small{color:rgba(3,25,34,.62)}
.play-setup-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 26px 24px}
.play-setup-audio{display:flex;align-items:center;gap:9px;min-width:0}
.play-setup-sound,.play-setup-music{min-width:118px;height:48px;border-radius:14px!important;white-space:nowrap}
.music-volume-control{height:48px;min-width:210px;display:grid;grid-template-columns:auto minmax(88px,1fr) 40px;align-items:center;gap:9px;padding:0 12px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(6,18,31,.72);color:#aec0cf;font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.music-volume-control input{width:100%;min-width:88px;accent-color:#55e8f3;cursor:pointer}
.music-volume-control output{font-variant-numeric:tabular-nums;text-align:right;color:#dffcff;font-size:10px;letter-spacing:0}
.play-setup-start{min-width:270px;min-height:54px;display:flex!important;align-items:center;justify-content:center;gap:18px;font-size:13px!important;letter-spacing:.08em}
.play-setup-start b{font-size:19px}

@media(max-width:720px){
  .play-setup-modal{padding:10px}
  .play-setup-card{width:100%;max-height:95dvh;border-radius:23px!important}
  .play-setup-hero{min-height:145px;padding:24px 62px 22px 20px}
  .play-setup-copy h2{font-size:34px}
  .play-setup-copy p{font-size:12px}
  .play-setup-globe{right:-18px;width:105px;height:105px;opacity:.72}
  .play-setup-grid{padding:14px 14px 6px;gap:9px}
  .play-setup-option{padding:12px}
  .play-setup-segments .segment{min-height:54px;padding:8px 7px!important;gap:5px;flex-direction:column}
  .play-setup-segments .segment b{font-size:16px}
  .play-setup-footer{padding:10px 14px 16px;flex-direction:column-reverse;align-items:stretch}
  .play-setup-audio{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .play-setup-start,.play-setup-sound,.play-setup-music{width:100%;min-width:0}
  .music-volume-control{grid-column:1/-1;width:100%;min-width:0;grid-template-columns:auto minmax(0,1fr) 40px}
}


/* V19.2 runtime regression fixes */
.play-setup-card>.modal-close{z-index:100!important;pointer-events:auto!important}
.play-setup-globe,.play-setup-globe *{pointer-events:none!important}
.play-setup-card{isolation:isolate}
#closePlaySetupBtn{position:absolute!important;top:14px!important;right:14px!important;z-index:100!important}

/* V19.3 Daily Challenge countdown + completion state */
#dailyBtn.daily-completed{
  cursor:not-allowed!important;
  border-color:rgba(129,231,204,.42)!important;
  background-image:url('assets/v12/mode-daily-borneo.webp')!important;
  background-size:108%!important;
  background-position:center center!important;
  box-shadow:inset 0 0 0 1px rgba(168,240,221,.10),0 12px 26px rgba(0,0,0,.18)!important;
}
#dailyBtn.daily-completed:before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:url('assets/v12/mode-daily-borneo.webp') center center/cover no-repeat!important;
  filter:blur(4px) saturate(.92) brightness(.86)!important;
  transform:scale(1.08)!important;
  opacity:.92!important;
}
#dailyBtn.daily-completed:after{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(8,24,28,.40) 0%,rgba(9,31,35,.24) 40%,rgba(48,73,58,.18) 100%),linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 58%),radial-gradient(circle at 84% 10%,rgba(255,235,165,.18),transparent 38%)!important;
}
#dailyBtn.daily-completed:hover{transform:translateY(-3px) scale(1.008)!important;box-shadow:inset 0 0 0 1px rgba(179,245,228,.12),0 16px 30px rgba(0,0,0,.22)!important;background-size:112%!important;background-position:52% 46%!important}
#dailyBtn.daily-completed .v12-action-icon{
  color:#083027!important;
  background:linear-gradient(145deg,rgba(163,255,222,.94),rgba(94,232,190,.90))!important;
  border-color:rgba(255,255,255,.38)!important;
  font-weight:1000!important;
}
#dailyBtn.daily-completed strong{color:#a9ffe0!important}
#dailyBtn.daily-completed small{color:#e8fff6!important}
#dailyBtn.daily-completed>b{font-size:15px;filter:saturate(.88);opacity:.96}
#dailyBtn.daily-available small{font-variant-numeric:tabular-nums}

/* V19.5 Street View first-round compositor fix.
   Google Street View can initialize as a black surface when an ancestor is
   running a CSS transform animation. Gameplay must enter with a stable,
   untransformed render surface; other screens keep the premium transition. */
#gameScreen.active {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
#gameScreen,
#gameScreen .game-shell,
#gameScreen .viewer-frame,
#gameScreen #viewer,
#gameScreen #streetView {
  transform: none !important;
}
/* Keep Google's panorama canvas out of our CSS compositor effects. */
#gameScreen #streetView,
#gameScreen .streetview,
#gameScreen .viewer-frame.round-enter .streetview {
  animation: none !important;
  filter: none !important;
  transform: none !important;
  contain: none !important;
  opacity: 1 !important;
}


/* V19.8 Profile Sign Out restoration */
.profile-signout-btn{
  margin-left:auto;
  color:#ffd9df!important;
  border-color:rgba(255,108,122,.34)!important;
  background:rgba(115,24,38,.28)!important;
}
.profile-signout-btn:hover{
  background:rgba(150,30,49,.46)!important;
  border-color:rgba(255,127,141,.55)!important;
}
@media(max-width:640px){.profile-signout-btn{margin-left:0;width:100%}}

/* V19.9 — DUEL player country flags */
.duel-avatar{position:relative!important;overflow:visible!important}
.duel-avatar>img:not(.duel-country-flag){border-radius:inherit;overflow:hidden}
.duel-country-flag{
  position:absolute!important;
  right:-7px!important;
  bottom:-6px!important;
  z-index:12!important;
  width:32px!important;
  height:23px!important;
  object-fit:cover!important;
  object-position:center!important;
  transform:none!important;
  border-radius:6px!important;
  border:2px solid rgba(255,255,255,.94)!important;
  box-shadow:0 5px 14px rgba(0,0,0,.46),0 0 0 2px rgba(8,20,35,.72)!important;
  background:#0b1a2a!important;
}
.duel-avatar-fallback{display:grid;place-items:center;width:100%;height:100%;font-weight:900;color:#d9f7ff}
@media(max-width:650px){
  .duel-country-flag{width:27px!important;height:20px!important;right:-6px!important;bottom:-5px!important}
}

/* V20.0 — DUEL match-found/countdown layout + visible flags + safe leave */
.duel-shell{
  width:min(820px,calc(100vw - 32px))!important;
  min-height:540px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  padding:34px 38px 30px!important;
  overflow:visible!important;
}
.duel-versus{
  width:100%!important;
  max-width:680px!important;
  grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr)!important;
  align-items:stretch!important;
  gap:18px!important;
  margin:26px auto 16px!important;
}
.duel-player-card{
  min-height:210px!important;
  padding:18px 16px 16px!important;
  justify-content:flex-start!important;
  gap:8px!important;
  overflow:hidden!important;
}
.duel-avatar{
  position:relative!important;
  width:118px!important;
  height:118px!important;
  flex:0 0 118px!important;
  margin-bottom:4px!important;
  border-radius:24px!important;
  overflow:hidden!important;
}
.duel-avatar .duel-avatar-art{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:scale(1.52) translateY(11%)!important;
  transform-origin:center center!important;
  border-radius:0!important;
}
.duel-player-name-row{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  width:100%!important;
  min-height:28px!important;
  margin-top:1px!important;
}
.duel-player-name-row strong{
  min-width:0!important;
  max-width:180px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:1.05rem!important;
  line-height:1.2!important;
}
.duel-player-flag{
  display:inline-grid!important;
  place-items:center!important;
  width:30px!important;
  height:22px!important;
  flex:0 0 30px!important;
  overflow:hidden!important;
  border-radius:5px!important;
  border:1px solid rgba(255,255,255,.72)!important;
  background:rgba(255,255,255,.06)!important;
  box-shadow:0 3px 8px rgba(0,0,0,.3)!important;
  font-size:16px!important;
  line-height:1!important;
}
.duel-player-flag img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  transform:none!important;
  border-radius:0!important;
}
.duel-player-card>span{
  margin-top:0!important;
  font-size:.72rem!important;
  line-height:1.25!important;
  text-align:center!important;
}
.duel-vs{
  display:grid!important;
  place-items:center!important;
  align-self:center!important;
  font-size:1.55rem!important;
}
.duel-countdown{
  min-height:88px!important;
  display:grid!important;
  place-items:center!important;
  margin:6px auto 10px!important;
  font-size:4.8rem!important;
}
.duel-countdown.hidden{display:none!important}
.duel-prestart-actions{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:10px!important;
  min-height:48px!important;
  margin-top:4px!important;
}
#duelLeaveBtn{
  min-width:150px!important;
  font-weight:900!important;
}
#duelLeaveBtn.hidden,#duelCancelBtn.hidden{display:none!important}

@media(max-width:650px){
  .duel-shell{min-height:500px!important;padding:22px 12px 20px!important}
  .duel-versus{grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr)!important;gap:7px!important;margin:18px auto 12px!important}
  .duel-player-card{min-height:166px!important;padding:10px 6px!important;gap:5px!important}
  .duel-avatar{width:78px!important;height:78px!important;flex-basis:78px!important;border-radius:17px!important}
  .duel-avatar .duel-avatar-art{transform:scale(1.48) translateY(11%)!important}
  .duel-player-name-row{gap:5px!important}
  .duel-player-name-row strong{font-size:.72rem!important;max-width:92px!important}
  .duel-player-flag{width:24px!important;height:17px!important;flex-basis:24px!important;font-size:12px!important}
  .duel-player-card>span{font-size:.52rem!important}
  .duel-countdown{font-size:3.5rem!important;min-height:66px!important}
  .duel-prestart-actions{width:100%!important}
  #duelLeaveBtn,#duelCancelBtn{flex:1 1 0!important;min-width:0!important}
}

/* V20.8 — GLOBAL AVATAR POSITIONING STANDARD
   User reference: horizontal center = 50%; visible feet baseline = 84.5% of stage height.
   All avatar surfaces share the same anchor model so swapping avatars never shifts them sideways. */
:root{
  --tt-avatar-center-x:50%;
  --tt-avatar-feet-y:84.5%;
}
.avatar-global-anchor{
  --avatar-visible-bottom:2.2%;
  --avatar-global-x:0px;
  --avatar-global-y:0px;
  --avatar-global-scale:1;
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate;
}
.avatar-global-anchor .avatar-global-art{
  position:absolute!important;
  left:var(--tt-avatar-center-x)!important;
  top:auto!important;
  right:auto!important;
  bottom:calc(100% - var(--tt-avatar-feet-y) - var(--avatar-visible-bottom))!important;
  width:auto!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform:translate3d(calc(-50% + var(--avatar-global-x)),var(--avatar-global-y),0) scale(var(--avatar-global-scale))!important;
  transform-origin:50% 100%!important;
  margin:0!important;
}

/* The transparent 600x900 production avatars leave ~2-3% beneath the shoes.
   New generated premium avatars reach almost exactly to the image edge. */
.avatar-global-anchor[data-avatar-id="atlas"],
.avatar-global-anchor[data-avatar-id="celeste"],
.avatar-global-anchor[data-avatar-id="orion"],
.avatar-global-anchor[data-avatar-id="stella"]{--avatar-visible-bottom:0.5%}

/* Main showcase: same center + feet line, with only scale changing by character silhouette. */
#menuHeroAvatarMount.avatar-global-anchor,
#menuHeroAvatarMount .avatar-global-anchor{
  --avatar-global-scale:1.10;
  overflow:visible!important;
}
#menuHeroAvatarMount .avatar-global-anchor{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
/* V20.9 hero correction: keep the user-defined center/feet baseline, but restore a large showcase model. */
#menuHeroAvatarMount .avatar-global-art{
  left:50%!important;
  bottom:calc(100% - var(--tt-avatar-feet-y) - var(--avatar-visible-bottom))!important;
  height:88%!important;
  min-height:500px!important;
  max-height:96%!important;
  width:auto!important;
  max-width:96%!important;
  transform:translate3d(calc(-50% + var(--avatar-global-x)),var(--avatar-global-y),0) scale(1.08)!important;
  transform-origin:50% 100%!important;
}
#menuHeroAvatarMount[data-avatar-id="sora"] .avatar-global-art{height:91%!important;transform:translate3d(calc(-50% + var(--avatar-global-x)),var(--avatar-global-y),0) scale(1.10)!important}
#menuHeroAvatarMount[data-avatar-id="maya"] .avatar-global-art{height:90%!important;transform:translate3d(calc(-50% + var(--avatar-global-x)),var(--avatar-global-y),0) scale(1.09)!important}
#menuHeroAvatarMount[data-avatar-id="jax"] .avatar-global-art,
#menuHeroAvatarMount[data-avatar-id="tommy"] .avatar-global-art{height:89%!important;transform:translate3d(calc(-50% + var(--avatar-global-x)),var(--avatar-global-y),0) scale(1.09)!important}
#menuHeroAvatarMount[data-avatar-id="atlas"] .avatar-global-art,
#menuHeroAvatarMount[data-avatar-id="celeste"] .avatar-global-art,
#menuHeroAvatarMount[data-avatar-id="orion"] .avatar-global-art,
#menuHeroAvatarMount[data-avatar-id="stella"] .avatar-global-art{height:86%!important;transform:translate3d(calc(-50% + var(--avatar-global-x)),var(--avatar-global-y),0) scale(1.05)!important}

/* Wardrobe / shop large previews use the same reference baseline. */
#customizeAvatarPreview .avatar-global-anchor,
#shopAvatarPreview .avatar-global-anchor{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
#customizeAvatarPreview .avatar-global-art,
#shopAvatarPreview .avatar-global-art{height:72%!important}

/* Profile + account squares: full character remains centered on the same X axis and feet reference.
   Scale is larger so the identity is readable without allowing the face to drift to one side. */
#accountAvatar .avatar-global-anchor,
#menuProfileAvatarMount .avatar-global-anchor,
#profileAvatarLarge .avatar-global-anchor{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
#accountAvatar .avatar-global-art,
#menuProfileAvatarMount .avatar-global-art{height:118%!important;--avatar-global-scale:1.08;--avatar-global-y:0px}
#profileAvatarLarge .avatar-global-art{height:112%!important;--avatar-global-scale:1.06;--avatar-global-y:0px}

/* Avatar collection cards now have a dedicated image stage instead of relying on intrinsic image padding. */
.avatar-collection-card{grid-template-rows:150px auto auto!important}
.avatar-collection-visual{width:100%;height:150px;min-height:0;border-radius:12px;background:radial-gradient(circle at 50% 58%,rgba(61,205,255,.08),transparent 66%)}
.avatar-collection-visual .avatar-global-art{height:90%!important;--avatar-global-scale:1}

/* Store cards: every product is placed on the exact same visual center and shoe line. */
.avatar-store-visual.avatar-global-anchor{--tt-avatar-feet-y:88%;}
.avatar-store-visual .avatar-global-art{height:91%!important;--avatar-global-scale:1}
.avatar-store-visual:hover .avatar-global-art{--avatar-global-scale:1.035}

/* Multiplayer / DUEL identity squares use the same center-axis rule. */
.duel-avatar.avatar-global-anchor{--tt-avatar-feet-y:91%;--avatar-visible-bottom:1.5%}
.duel-avatar.avatar-global-anchor .avatar-global-art{height:142%!important;--avatar-global-scale:1}
.lobby-mini-avatar.avatar-global-anchor,
.leader-mini-avatar.avatar-global-anchor,
.mp-champion-avatar-inner.avatar-global-anchor{--tt-avatar-feet-y:93%;--avatar-visible-bottom:1.5%}
.lobby-mini-avatar.avatar-global-anchor .avatar-global-art{height:150%!important;--avatar-global-scale:1}
.leader-mini-avatar.avatar-global-anchor .avatar-global-art{height:158%!important;--avatar-global-scale:1}
.mp-champion-avatar-inner.avatar-global-anchor .avatar-global-art{height:142%!important;--avatar-global-scale:1}

/* Per-avatar horizontal correction is intentionally tiny: the reference center line is authoritative. */
[data-avatar-id="stella"]{--avatar-global-x:-2px}
[data-avatar-id="tommy"]{--avatar-global-x:1px}
[data-avatar-id="finn"]{--avatar-global-x:1px}
[data-avatar-id="jax"]{--avatar-global-x:1px}

/* Remove older transforms that fought the global anchor. */
.duel-avatar.avatar-global-anchor .duel-avatar-art,
.lobby-mini-avatar.avatar-global-anchor>img.avatar-global-art,
.leader-mini-avatar.avatar-global-anchor>img.avatar-global-art,
.mp-champion-avatar-inner.avatar-global-anchor>img.avatar-global-art{
  inset:auto!important;
}

@media(max-width:600px){
  .avatar-collection-visual{height:120px}
  .avatar-collection-card{grid-template-rows:120px auto auto!important}
  #menuHeroAvatarMount .avatar-global-art{height:82%!important;min-height:0!important;max-height:92%!important;transform:translate3d(calc(-50% + var(--avatar-global-x)),var(--avatar-global-y),0) scale(1.04)!important}
}

/* Avatar picker follows the same 50% / 84.5% reference geometry. */
.avatar-choice-art.has-3d-art.avatar-global-anchor{
  position:absolute!important;
  top:16px!important;
  left:0!important;
  right:0!important;
  height:150px!important;
  min-height:150px!important;
  display:block!important;
}
.avatar-choice-art.has-3d-art.avatar-global-anchor .avatar-global-art{
  height:90%!important;
  --avatar-global-scale:1;
}
@media(max-width:820px){
  .avatar-choice-art.has-3d-art.avatar-global-anchor{height:128px!important;min-height:128px!important}
  .avatar-choice-art.has-3d-art.avatar-global-anchor .avatar-global-art{height:90%!important}
}


/* V21.2 — robust hero + wardrobe avatar visibility and positioning.
   User reference: big body in frame, centered, feet near the platform/baseline. */
#menuHeroAvatarMount,
#customizeAvatarPreview,
#shopAvatarPreview{
  position:relative!important;
  overflow:hidden!important;
}
#menuHeroAvatarMount > .avatar-skin-shell.avatar-global-anchor,
#customizeAvatarPreview > .avatar-skin-shell.avatar-global-anchor,
#shopAvatarPreview > .avatar-skin-shell.avatar-global-anchor{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  overflow:visible!important;
}
#menuHeroAvatarMount > .avatar-skin-shell.avatar-global-anchor > .avatar-global-art{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:24px!important;
  width:auto!important;
  height:88%!important;
  min-height:430px!important;
  max-height:92%!important;
  max-width:90%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform:translate(calc(-50% + var(--avatar-global-x,0px)), var(--avatar-global-y,0px)) scale(1.05)!important;
  transform-origin:50% 100%!important;
  margin:0!important;
}
#customizeAvatarPreview > .avatar-skin-shell.avatar-global-anchor > .avatar-global-art,
#shopAvatarPreview > .avatar-skin-shell.avatar-global-anchor > .avatar-global-art{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:20px!important;
  width:auto!important;
  height:84%!important;
  min-height:320px!important;
  max-height:88%!important;
  max-width:88%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform:translate(calc(-50% + var(--avatar-global-x,0px)), var(--avatar-global-y,0px)) scale(1.02)!important;
  transform-origin:50% 100%!important;
  margin:0!important;
}
/* Slight per-avatar main showcase tuning so all chosen explorers stay big and centered. */
#menuHeroAvatarMount > .avatar-skin-shell.avatar-global-anchor[data-avatar-id="atlas"] > .avatar-global-art,
#menuHeroAvatarMount > .avatar-skin-shell.avatar-global-anchor[data-avatar-id="celeste"] > .avatar-global-art,
#menuHeroAvatarMount > .avatar-skin-shell.avatar-global-anchor[data-avatar-id="orion"] > .avatar-global-art,
#menuHeroAvatarMount > .avatar-skin-shell.avatar-global-anchor[data-avatar-id="stella"] > .avatar-global-art{
  height:85%!important;
  min-height:400px!important;
  max-width:92%!important;
  transform:translate(calc(-50% + var(--avatar-global-x,0px)), var(--avatar-global-y,0px)) scale(1.00)!important;
}
#menuHeroAvatarMount > .avatar-skin-shell.avatar-global-anchor[data-avatar-id="sora"] > .avatar-global-art,
#menuHeroAvatarMount > .avatar-skin-shell.avatar-global-anchor[data-avatar-id="maya"] > .avatar-global-art{
  height:90%!important;
  transform:translate(calc(-50% + var(--avatar-global-x,0px)), var(--avatar-global-y,0px)) scale(1.08)!important;
}
#menuHeroAvatarMount > .avatar-skin-shell.avatar-global-anchor[data-avatar-id="tommy"] > .avatar-global-art,
#menuHeroAvatarMount > .avatar-skin-shell.avatar-global-anchor[data-avatar-id="jax"] > .avatar-global-art{
  height:89%!important;
  transform:translate(calc(-50% + var(--avatar-global-x,0px)), var(--avatar-global-y,0px)) scale(1.07)!important;
}
#customizeAvatarPreview > .avatar-skin-shell.avatar-global-anchor[data-avatar-id="atlas"] > .avatar-global-art,
#customizeAvatarPreview > .avatar-skin-shell.avatar-global-anchor[data-avatar-id="celeste"] > .avatar-global-art,
#customizeAvatarPreview > .avatar-skin-shell.avatar-global-anchor[data-avatar-id="orion"] > .avatar-global-art,
#customizeAvatarPreview > .avatar-skin-shell.avatar-global-anchor[data-avatar-id="stella"] > .avatar-global-art,
#shopAvatarPreview > .avatar-skin-shell.avatar-global-anchor[data-avatar-id="atlas"] > .avatar-global-art,
#shopAvatarPreview > .avatar-skin-shell.avatar-global-anchor[data-avatar-id="celeste"] > .avatar-global-art,
#shopAvatarPreview > .avatar-skin-shell.avatar-global-anchor[data-avatar-id="orion"] > .avatar-global-art,
#shopAvatarPreview > .avatar-skin-shell.avatar-global-anchor[data-avatar-id="stella"] > .avatar-global-art{
  height:80%!important;
  max-width:90%!important;
  transform:translate(calc(-50% + var(--avatar-global-x,0px)), var(--avatar-global-y,0px)) scale(0.98)!important;
}
@media(max-width:600px){
  #menuHeroAvatarMount > .avatar-skin-shell.avatar-global-anchor > .avatar-global-art{
    height:82%!important;
    min-height:0!important;
    max-height:88%!important;
    max-width:92%!important;
  }
  #customizeAvatarPreview > .avatar-skin-shell.avatar-global-anchor > .avatar-global-art,
  #shopAvatarPreview > .avatar-skin-shell.avatar-global-anchor > .avatar-global-art{
    height:78%!important;
    min-height:0!important;
    max-height:84%!important;
    max-width:90%!important;
  }
}


/* V21.3 — DEDICATED AVATAR SHOWCASE RENDERER
   Main menu / Wardrobe preview / Store preview are intentionally isolated from the
   global avatar anchor rules. This prevents the hero from disappearing when other
   avatar surfaces are adjusted. */
#menuHeroAvatarMount,
#customizeAvatarPreview,
#shopAvatarPreview{
  position:relative!important;
  display:block!important;
  overflow:hidden!important;
  padding:0!important;
}
#menuHeroAvatarMount > .dedicated-avatar-showcase-shell,
#customizeAvatarPreview > .dedicated-avatar-showcase-shell,
#shopAvatarPreview > .dedicated-avatar-showcase-shell{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  overflow:visible!important;
  pointer-events:none!important;
  transform-style:preserve-3d!important;
  transition:transform .16s ease-out!important;
  z-index:5!important;
}
#menuHeroAvatarMount > .dedicated-avatar-showcase-shell > .dedicated-avatar-showcase-image{
  position:absolute!important;
  left:50%!important;
  bottom:18px!important;
  top:auto!important;
  right:auto!important;
  display:block!important;
  width:auto!important;
  height:84%!important;
  max-height:84%!important;
  max-width:88%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform:translateX(-50%)!important;
  transform-origin:50% 100%!important;
  opacity:1!important;
  visibility:visible!important;
  filter:drop-shadow(0 24px 26px rgba(0,0,0,.38))!important;
  z-index:6!important;
}
#customizeAvatarPreview > .dedicated-avatar-showcase-shell > .dedicated-avatar-showcase-image,
#shopAvatarPreview > .dedicated-avatar-showcase-shell > .dedicated-avatar-showcase-image{
  position:absolute!important;
  left:50%!important;
  bottom:18px!important;
  top:auto!important;
  right:auto!important;
  display:block!important;
  width:auto!important;
  height:82%!important;
  max-height:82%!important;
  max-width:86%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform:translateX(-50%)!important;
  transform-origin:50% 100%!important;
  opacity:1!important;
  visibility:visible!important;
  filter:drop-shadow(0 20px 22px rgba(0,0,0,.34))!important;
  z-index:6!important;
}
/* Generated premium images fill their canvas more fully, so use a slightly smaller height. */
#menuHeroAvatarMount > .dedicated-avatar-showcase-shell[data-avatar-id="atlas"] > .dedicated-avatar-showcase-image,
#menuHeroAvatarMount > .dedicated-avatar-showcase-shell[data-avatar-id="celeste"] > .dedicated-avatar-showcase-image,
#menuHeroAvatarMount > .dedicated-avatar-showcase-shell[data-avatar-id="orion"] > .dedicated-avatar-showcase-image,
#menuHeroAvatarMount > .dedicated-avatar-showcase-shell[data-avatar-id="stella"] > .dedicated-avatar-showcase-image{height:80%!important;max-height:80%!important;max-width:90%!important}
#customizeAvatarPreview > .dedicated-avatar-showcase-shell[data-avatar-id="atlas"] > .dedicated-avatar-showcase-image,
#customizeAvatarPreview > .dedicated-avatar-showcase-shell[data-avatar-id="celeste"] > .dedicated-avatar-showcase-image,
#customizeAvatarPreview > .dedicated-avatar-showcase-shell[data-avatar-id="orion"] > .dedicated-avatar-showcase-image,
#customizeAvatarPreview > .dedicated-avatar-showcase-shell[data-avatar-id="stella"] > .dedicated-avatar-showcase-image,
#shopAvatarPreview > .dedicated-avatar-showcase-shell[data-avatar-id="atlas"] > .dedicated-avatar-showcase-image,
#shopAvatarPreview > .dedicated-avatar-showcase-shell[data-avatar-id="celeste"] > .dedicated-avatar-showcase-image,
#shopAvatarPreview > .dedicated-avatar-showcase-shell[data-avatar-id="orion"] > .dedicated-avatar-showcase-image,
#shopAvatarPreview > .dedicated-avatar-showcase-shell[data-avatar-id="stella"] > .dedicated-avatar-showcase-image{height:78%!important;max-height:78%!important;max-width:88%!important}
/* Narrower starter silhouettes get a little more size without changing their center/baseline. */
#menuHeroAvatarMount > .dedicated-avatar-showcase-shell[data-avatar-id="sora"] > .dedicated-avatar-showcase-image,
#menuHeroAvatarMount > .dedicated-avatar-showcase-shell[data-avatar-id="maya"] > .dedicated-avatar-showcase-image{height:88%!important;max-height:88%!important}
#menuHeroAvatarMount > .dedicated-avatar-showcase-shell[data-avatar-id="tommy"] > .dedicated-avatar-showcase-image,
#menuHeroAvatarMount > .dedicated-avatar-showcase-shell[data-avatar-id="jax"] > .dedicated-avatar-showcase-image{height:86%!important;max-height:86%!important}
/* Emblem sits relative to the dedicated shell instead of the old global anchor. */
#menuHeroAvatarMount > .dedicated-avatar-showcase-shell > .avatar-skin-emblem,
#customizeAvatarPreview > .dedicated-avatar-showcase-shell > .avatar-skin-emblem,
#shopAvatarPreview > .dedicated-avatar-showcase-shell > .avatar-skin-emblem{z-index:8!important}
@media(max-width:600px){
  #menuHeroAvatarMount > .dedicated-avatar-showcase-shell > .dedicated-avatar-showcase-image{height:78%!important;max-height:78%!important;max-width:92%!important;bottom:12px!important}
  #customizeAvatarPreview > .dedicated-avatar-showcase-shell > .dedicated-avatar-showcase-image,
  #shopAvatarPreview > .dedicated-avatar-showcase-shell > .dedicated-avatar-showcase-image{height:75%!important;max-height:75%!important;max-width:90%!important;bottom:12px!important}
}

/* V21.4 — MAIN MENU HERO HARD ISOLATION
   These classes are unique to the center showcase and are intentionally not shared
   with profile, store, wardrobe, collection, DUEL or multiplayer avatars. */
#menuHeroAvatarMount{position:absolute!important;inset:0!important;display:block!important;overflow:visible!important;padding:0!important;z-index:6!important}
#menuHeroAvatarMount>.tt-main-menu-avatar-shell{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;overflow:visible!important;pointer-events:none!important;z-index:20!important;transform-style:preserve-3d!important;transition:transform .16s ease-out!important}
#menuHeroAvatarMount>.tt-main-menu-avatar-shell>.tt-main-menu-avatar-image{position:absolute!important;display:block!important;left:50%!important;right:auto!important;top:auto!important;bottom:46px!important;width:auto!important;max-width:92%!important;object-fit:contain!important;object-position:center bottom!important;transform-origin:50% 100%!important;opacity:1!important;visibility:visible!important;z-index:21!important}
#v12CharacterCard>.v12-character-vignette{z-index:22!important;pointer-events:none!important}
#v12CharacterCard>.v12-stage-badge{z-index:23!important}

/* V21.5 — PERMANENT MAIN-MENU HERO LAYER
   This is intentionally independent from every other avatar renderer. */
#menuHeroAvatarMount{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  overflow:visible!important;
  padding:0!important;
  z-index:10!important;
  opacity:1!important;
  visibility:visible!important;
}
#menuHeroAvatarLayer.tt-menu-hero-layer{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  overflow:visible!important;
  pointer-events:none!important;
  z-index:30!important;
  opacity:1!important;
  visibility:visible!important;
  transform-style:preserve-3d!important;
  transition:transform .16s ease-out!important;
}
#menuHeroAvatarImage.tt-menu-hero-image{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:42px!important;
  display:block!important;
  width:auto!important;
  height:var(--tt-hero-height,88%)!important;
  max-height:88%!important;
  max-width:92%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform:translateX(calc(-50% + var(--tt-hero-x,0px)))!important;
  transform-origin:50% 100%!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:none!important;
  z-index:31!important;
  filter:drop-shadow(0 24px 26px rgba(0,0,0,.38))!important;
}
#v12CharacterCard>.v12-character-vignette{z-index:32!important;pointer-events:none!important}
#v12CharacterCard>.v12-stage-badge{z-index:33!important}
@media(max-width:600px){
  #menuHeroAvatarImage.tt-menu-hero-image{bottom:34px!important;height:min(var(--tt-hero-height,82%),82%)!important;max-height:82%!important;max-width:94%!important}
}


/* V21.6 — final main-menu avatar override: keep the hero image visible if any older rule lingers. */
#menuHeroAvatarMount > .tt-main-menu-hero-shell,
#menuHeroAvatarLayer.tt-main-menu-hero-shell{display:block!important;opacity:1!important;visibility:visible!important;overflow:visible!important;pointer-events:none!important;z-index:26!important}
#menuHeroAvatarMount .tt-main-menu-hero-image,
#menuHeroAvatarImage.tt-main-menu-hero-image{display:block!important;opacity:1!important;visibility:visible!important}


/* V21.7 — hard fix the left wardrobe preview and avatar-store preview.
   These two showcases now mirror the main-menu strategy with visibility safeguards. */
#customizeAvatarPreview > .dedicated-avatar-showcase-shell,
#shopAvatarPreview > .dedicated-avatar-showcase-shell{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  overflow:visible!important;
  pointer-events:none!important;
  z-index:20!important;
}
#customizeAvatarPreview .dedicated-avatar-showcase-image,
#shopAvatarPreview .dedicated-avatar-showcase-image{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
}


/* V21.8 — PERMANENT WARDROBE + STORE PREVIEW LAYERS
   Same successful strategy as the main-menu hero: static HTML image, JS only changes src. */
#customizeAvatarPreview,
#shopAvatarPreview{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  z-index:10!important;
  opacity:1!important;
  visibility:visible!important;
}
#customizeAvatarLayer.tt-permanent-preview-layer,
#shopAvatarLayer.tt-permanent-preview-layer{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  overflow:visible!important;
  pointer-events:none!important;
  z-index:20!important;
  opacity:1!important;
  visibility:visible!important;
  transform-style:preserve-3d!important;
  transition:transform .16s ease-out!important;
}
#customizeAvatarImage.tt-permanent-preview-image,
#shopAvatarImage.tt-permanent-preview-image{
  position:absolute!important;
  display:block!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:34px!important;
  width:auto!important;
  height:var(--tt-preview-height,83%)!important;
  max-height:86%!important;
  max-width:var(--tt-preview-max-width,86%)!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform:translateX(calc(-50% + var(--tt-preview-x,0px)))!important;
  transform-origin:50% 100%!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:none!important;
  z-index:21!important;
  filter:drop-shadow(0 22px 24px rgba(0,0,0,.36))!important;
}
.showroom-shell > #customizeAvatarPreview,
.shop-showroom > #shopAvatarPreview{
  position:absolute!important;
  inset:0!important;
}
.showroom-shell > .showroom-platform,
.shop-showroom > .showroom-platform{z-index:6!important}
.showroom-shell > .rotate-hint,
.shop-showroom > .rotate-hint{z-index:30!important}
.showroom-shell > .showroom-sparkles,
.shop-showroom > .showroom-sparkles{z-index:5!important}
@media(max-width:600px){
  #customizeAvatarImage.tt-permanent-preview-image,
  #shopAvatarImage.tt-permanent-preview-image{
    bottom:26px!important;
    height:min(var(--tt-preview-height,78%),78%)!important;
    max-height:78%!important;
    max-width:90%!important;
  }
}


/* V21.9 — dedicated DUEL matchup avatar positioning fix.
   The matchmaking cards no longer use the shared avatar-global anchor.
   This keeps the avatar centered and fully visible inside the square on
   the “Finding an opponent” screen. */
.duel-avatar.dedicated-duel-avatar-host{
  position:relative!important;
  overflow:hidden!important;
  display:block!important;
  isolation:isolate;
}
.duel-avatar .dedicated-duel-avatar-shell{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  overflow:hidden!important;
  pointer-events:none!important;
  z-index:2!important;
}
.duel-avatar .dedicated-duel-avatar-image{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:-6px!important;
  width:auto!important;
  height:128%!important;
  max-height:128%!important;
  max-width:96%!important;
  display:block!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform:translateX(-50%)!important;
  transform-origin:50% 100%!important;
  opacity:1!important;
  visibility:visible!important;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.32))!important;
}
.duel-avatar[data-avatar-id="atlas"] .dedicated-duel-avatar-image,
.duel-avatar[data-avatar-id="celeste"] .dedicated-duel-avatar-image,
.duel-avatar[data-avatar-id="orion"] .dedicated-duel-avatar-image,
.duel-avatar[data-avatar-id="stella"] .dedicated-duel-avatar-image{
  height:116%!important;
  max-height:116%!important;
  max-width:94%!important;
  bottom:-3px!important;
}
.duel-avatar[data-avatar-id="sora"] .dedicated-duel-avatar-image,
.duel-avatar[data-avatar-id="maya"] .dedicated-duel-avatar-image,
.duel-avatar[data-avatar-id="tommy"] .dedicated-duel-avatar-image,
.duel-avatar[data-avatar-id="jax"] .dedicated-duel-avatar-image{
  height:132%!important;
  max-height:132%!important;
}
@media(max-width:650px){
  .duel-avatar .dedicated-duel-avatar-image{
    height:130%!important;
    max-height:130%!important;
    bottom:-7px!important;
  }
  .duel-avatar[data-avatar-id="atlas"] .dedicated-duel-avatar-image,
  .duel-avatar[data-avatar-id="celeste"] .dedicated-duel-avatar-image,
  .duel-avatar[data-avatar-id="orion"] .dedicated-duel-avatar-image,
  .duel-avatar[data-avatar-id="stella"] .dedicated-duel-avatar-image{
    height:118%!important;
    max-height:118%!important;
    bottom:-4px!important;
  }
}

/* =========================================================
   TOMMYTRACE V22.2 — AVATAR-FIRST LOBBY HOME
   Keeps the existing game/account systems; presentation only.
   ========================================================= */
#menuScreen.tt-lobby-home{background:#04111d!important;color:#f6fbff!important;overflow:hidden!important}
#menuScreen.tt-lobby-home .v12-bg-layer{background:radial-gradient(circle at 62% 28%,rgba(20,175,255,.24),transparent 29%),radial-gradient(circle at 70% 78%,rgba(42,234,190,.10),transparent 32%),linear-gradient(180deg,#071a2d 0%,#061522 62%,#03101a 100%)!important}
#menuScreen .tt-lobby-shell{max-width:1600px!important;padding:12px 22px 16px!important;gap:12px!important}
#menuScreen .tt-lobby-topbar{min-height:62px;border-radius:18px;background:rgba(5,25,45,.86);border-color:rgba(82,193,255,.20);box-shadow:0 10px 36px rgba(0,0,0,.22);backdrop-filter:blur(20px)}
#menuScreen .tt-lobby-topbar .v12-brand img{width:210px;max-height:52px}
#menuScreen .tt-hidden-nav-proxy{display:none!important}
#menuScreen .tt-lobby-main{min-height:0;flex:1;display:grid;grid-template-rows:minmax(0,1fr) auto auto;gap:12px}

#menuScreen .tt-lobby-hero{position:relative;min-height:0;overflow:hidden;border-radius:28px;border:1px solid rgba(94,191,255,.20);background:linear-gradient(145deg,#092744,#0a3856 44%,#07506a);box-shadow:0 22px 65px rgba(0,0,0,.30);isolation:isolate}
#menuScreen .tt-lobby-room-art{position:absolute;inset:-8%;z-index:-4;background:url('assets/backgrounds/home-hero-borneo.webp') center center/cover no-repeat;filter:saturate(.95) brightness(.62);transform:scale(1.02);opacity:.9}
#menuScreen .tt-lobby-scrim{position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,rgba(4,22,42,.98) 0%,rgba(5,29,51,.91) 29%,rgba(7,42,64,.34) 54%,rgba(7,32,49,.28) 72%,rgba(3,17,29,.72) 100%),linear-gradient(180deg,rgba(26,157,255,.06),rgba(2,14,24,.22))}
#menuScreen .tt-lobby-hero:after{content:'';position:absolute;inset:auto -4% -22% -4%;height:48%;z-index:-2;background:radial-gradient(ellipse at 60% 18%,rgba(45,205,255,.16),transparent 48%),linear-gradient(180deg,transparent,rgba(2,13,22,.58));pointer-events:none}

#menuScreen .tt-lobby-copy{position:absolute;z-index:5;left:clamp(28px,4.2vw,68px);top:50%;transform:translateY(-50%);width:min(470px,34vw)}
#menuScreen .tt-lobby-copy .v12-kicker{margin:0 0 10px;font-size:11px;letter-spacing:.27em;color:#79ddff}
#menuScreen .tt-lobby-copy h1{margin:0;font-size:clamp(42px,4.5vw,74px);line-height:.91;letter-spacing:-.055em;text-shadow:0 8px 25px rgba(0,0,0,.28)}
#menuScreen .tt-lobby-copy h1 span{color:#58dcff;text-shadow:0 0 24px rgba(41,201,255,.20)}
#menuScreen .tt-lobby-lead{margin:14px 0 16px;color:#d3e6f4;font-size:clamp(13px,1vw,16px);line-height:1.5;max-width:430px}

#menuScreen .tt-player-summary{display:grid;grid-template-columns:64px minmax(0,1fr);gap:13px;align-items:center;padding:11px 14px;border-radius:19px;border:1px solid rgba(104,203,255,.30);background:linear-gradient(135deg,rgba(8,43,73,.93),rgba(6,28,49,.91));box-shadow:inset 0 1px rgba(255,255,255,.06),0 12px 28px rgba(0,0,0,.20);backdrop-filter:blur(14px)}
#menuScreen .tt-player-portrait{position:relative;width:60px;height:60px;border-radius:18px;overflow:hidden;border:2px solid #46d8ff;background:#0a1d2d;box-shadow:0 0 22px rgba(44,210,255,.25)}
#menuScreen .tt-player-portrait>span{position:absolute;inset:0}
#menuScreen .tt-player-copy{min-width:0}
#menuScreen .tt-player-name{display:flex;align-items:center;justify-content:space-between;gap:10px}.tt-player-name strong{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tt-player-name>span{font-size:12px;color:#b7cfe1}.tt-player-name b{color:white}
#menuScreen .tt-player-xp{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:7px}.tt-player-xp>div{height:8px;border-radius:999px;background:#0c2538;overflow:hidden;border:1px solid rgba(255,255,255,.08)}.tt-player-xp i{display:block;height:100%;width:0;background:linear-gradient(90deg,#12bbff,#5aeeef);box-shadow:0 0 12px #42dcff}.tt-player-xp strong{font-size:10px;color:#cfe5f5;white-space:nowrap}
#menuScreen .tt-player-mini{display:flex;gap:14px;margin-top:8px;color:#82a9c1;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.tt-player-mini b{color:#f3fbff;font-size:10px}

#menuScreen .tt-play-now{position:relative;overflow:hidden;width:100%;margin-top:12px;min-height:74px;padding:10px 18px;border-radius:22px;border:1px solid rgba(218,250,255,.88);display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;text-align:left;color:#fff;background:linear-gradient(180deg,#27d7ff 0%,#078bff 48%,#075bd7 100%);box-shadow:0 0 0 2px rgba(34,206,255,.14),0 0 30px rgba(0,170,255,.50),0 15px 28px rgba(0,67,141,.35),inset 0 1px rgba(255,255,255,.55);cursor:pointer;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}
#menuScreen .tt-play-now:after{content:'';position:absolute;inset:-120% -35%;background:linear-gradient(110deg,transparent 43%,rgba(255,255,255,.60) 50%,transparent 57%);transform:translateX(-70%);animation:ttLobbyShine 4s ease-in-out infinite;pointer-events:none}
#menuScreen .tt-play-now:hover{transform:translateY(-2px) scale(1.008);filter:brightness(1.06);box-shadow:0 0 36px rgba(0,203,255,.65),0 18px 34px rgba(0,57,130,.42),inset 0 1px rgba(255,255,255,.62)}
#menuScreen .tt-play-now .v12-action-icon{font-size:28px;text-align:center}.tt-play-now span:nth-child(2){display:flex;flex-direction:column}.tt-play-now strong{font-size:27px;line-height:1}.tt-play-now small{margin-top:4px;color:#d9f7ff;font-size:10px;font-weight:800}.tt-play-now>b{font-size:30px}
#menuScreen .tt-avatar-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.tt-avatar-actions button{min-height:46px;border-radius:15px;border:1px solid rgba(80,198,255,.46);background:rgba(6,39,67,.86);color:#eefbff;font-weight:850;cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.05);transition:.18s}.tt-avatar-actions button:hover{transform:translateY(-2px);border-color:#5ed9ff;background:rgba(8,59,95,.94)}

#menuScreen .tt-lobby-character{position:absolute;z-index:3;left:47%;top:3%;bottom:0;width:31%;min-height:0!important;display:grid;place-items:end center;pointer-events:auto}
#menuScreen .tt-lobby-character .v12-character-card{position:absolute;inset:0;min-height:0!important}
#menuScreen .tt-lobby-character .v12-live-avatar-mount{inset:1% 0 7%}
#menuScreen .tt-lobby-character .pro-avatar-stage img{height:100%;max-width:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 28px 24px rgba(0,0,0,.42))}
#menuScreen .tt-character-halo{position:absolute;left:50%;bottom:14%;width:75%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(84,220,255,.28),rgba(48,165,255,.06) 42%,transparent 70%);filter:blur(9px);pointer-events:none}
#menuScreen .tt-lobby-platform{position:absolute;z-index:0;bottom:5%;left:50%;width:73%;height:38px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(93,234,255,.76),rgba(18,118,209,.24) 38%,rgba(3,13,22,.78) 70%);box-shadow:0 0 28px rgba(40,196,255,.36),0 14px 26px rgba(0,0,0,.42)}
#menuScreen .tt-lobby-character .v12-rotate-copy{bottom:1.7%;font-size:8px;color:#9edcf1;letter-spacing:.14em}

#menuScreen .tt-destination-sign{display:none!important}
#menuScreen .tt-destination-sign>span{justify-self:end;margin-right:8px;color:#8ee6ff;font-size:9px;font-weight:900;letter-spacing:.25em}
#menuScreen .tt-destination-sign>b{display:block;padding:9px 16px;border-radius:8px;border:1px solid rgba(179,225,255,.42);background:linear-gradient(180deg,#173958,#0a243c);color:#f7fbff;font-size:16px;letter-spacing:.07em;text-align:center;box-shadow:0 6px 14px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.12);text-shadow:0 2px 4px #0008}.tt-destination-sign>b:nth-of-type(2){transform:translateX(10px)}.tt-destination-sign>b:nth-of-type(3){transform:translateX(-3px)}

#menuScreen .tt-mode-row{display:grid;grid-template-columns:1fr 1fr 1fr .54fr;gap:10px;min-height:112px}
#menuScreen .tt-mode-card{position:relative;overflow:hidden;isolation:isolate;min-width:0;border-radius:19px;border:1px solid rgba(146,224,255,.36);padding:14px 16px;display:grid;grid-template-columns:50px minmax(0,1fr) auto;align-items:center;gap:12px;text-align:left;color:white;background:linear-gradient(135deg,#0d3451,#081c32);background-size:104%;background-position:center center;box-shadow:0 16px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -20px 36px rgba(0,0,0,.08);cursor:pointer;transition:transform .24s ease,border-color .24s ease,filter .24s ease,background-size .42s ease,background-position .42s ease,box-shadow .24s ease}
#menuScreen .tt-mode-card:before{content:'';position:absolute;inset:0;z-index:0;opacity:1;pointer-events:none;background:linear-gradient(90deg,rgba(4,18,32,.56) 0%,rgba(5,24,40,.34) 40%,rgba(5,20,34,.10) 100%),linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 24%,rgba(255,255,255,0) 54%)}
#menuScreen .tt-mode-card:after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 18% 0%,rgba(255,255,255,.20),transparent 24%),linear-gradient(120deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.02) 20%,transparent 44%,transparent 100%)}
#menuScreen .tt-mode-card:hover{transform:translateY(-5px) scale(1.012);border-color:#9cecff;filter:brightness(1.08) saturate(1.04);background-size:110%;background-position:52% 46%;box-shadow:0 22px 44px rgba(0,0,0,.28),0 0 0 1px rgba(168,237,255,.16),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -16px 34px rgba(0,0,0,.06)}
#menuScreen .tt-mode-card>span,#menuScreen .tt-mode-card>b{position:relative;z-index:1;transition:transform .24s ease,filter .24s ease}
#menuScreen .tt-mode-card:hover>span:nth-child(2){transform:translateX(3px)}
#menuScreen .tt-mode-card:hover>b{transform:translateX(5px)}
#menuScreen .tt-mode-card>span:nth-child(2){display:flex;flex-direction:column;min-width:0}.tt-mode-card strong{font-size:16px;letter-spacing:.01em;text-shadow:0 2px 12px rgba(0,0,0,.32)}.tt-mode-card small{margin-top:5px;color:#eef8ff;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 10px rgba(0,0,0,.28);opacity:.96}.tt-mode-card>b{font-size:25px;text-shadow:0 2px 10px rgba(0,0,0,.35)}.tt-mode-icon{position:relative;z-index:1;width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.08));backdrop-filter:blur(10px);border:1px solid rgba(217,244,255,.48);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 20px rgba(0,0,0,.18);font-size:22px;transition:transform .24s ease,box-shadow .24s ease,background .24s ease}
#menuScreen .tt-mode-card:hover .tt-mode-icon{transform:translate3d(2px,-1px,0) scale(1.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 24px rgba(0,0,0,.22),0 0 18px rgba(127,225,255,.12)}
#menuScreen .tt-mode-solo{background-image:url('assets/v12/mode-solo-borneo.webp')}
#menuScreen .tt-mode-duel{background-image:url('assets/v12/mode-duel-borneo.webp')}#menuScreen .tt-mode-duel:before{background:linear-gradient(90deg,rgba(4,12,26,.60) 0%,rgba(10,23,44,.36) 38%,rgba(84,18,31,.14) 100%),linear-gradient(180deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,0) 54%)}#menuScreen .tt-mode-duel:after{background:linear-gradient(110deg,transparent 50%,rgba(255,73,73,.15) 100%),radial-gradient(circle at 22% 18%,rgba(97,184,255,.20),transparent 26%),linear-gradient(120deg,rgba(255,255,255,.08),transparent 30%)}
#menuScreen .tt-mode-daily{background-image:url('assets/v12/mode-daily-borneo.webp')}#menuScreen .tt-mode-daily:before{background:linear-gradient(90deg,rgba(18,16,10,.52) 0%,rgba(33,28,16,.26) 40%,rgba(103,74,24,.08) 100%),linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 58%)}#menuScreen .tt-mode-daily:after{background:radial-gradient(circle at 84% 10%,rgba(255,226,128,.28),transparent 38%),linear-gradient(120deg,rgba(255,255,255,.08),transparent 30%)}
#menuScreen .tt-mode-private{background:linear-gradient(145deg,#17344f,#10283f 56%,#0c1d2d)}#menuScreen .tt-mode-private:before{background:linear-gradient(90deg,rgba(7,21,34,.34),rgba(7,21,34,.12))}#menuScreen .tt-mode-private:after{background:radial-gradient(circle at 15% 0%,rgba(255,255,255,.16),transparent 22%)}#menuScreen .tt-mode-compact{grid-template-columns:42px 1fr auto;padding:12px}.tt-mode-compact strong{font-size:14px}.tt-mode-compact small{font-size:9px}.tt-mode-compact .tt-mode-icon{width:38px;height:38px;font-size:18px}

#menuScreen .tt-avatar-progress-row{display:grid;grid-template-columns:1.05fr 1.25fr auto;gap:10px;min-height:86px}
#menuScreen .tt-next-unlock,#menuScreen .tt-featured-skins{min-width:0;border-radius:18px;border:1px solid rgba(95,182,240,.22);background:rgba(6,29,49,.88);box-shadow:0 10px 24px rgba(0,0,0,.20);backdrop-filter:blur(14px)}
#menuScreen .tt-next-unlock{display:grid;grid-template-columns:66px minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 14px;color:white;text-align:left;cursor:pointer}.tt-next-unlock img{width:62px;height:62px;object-fit:contain;border-radius:14px;background:radial-gradient(circle,#164b6a,#0a2032)}.tt-next-unlock span{display:flex;flex-direction:column}.tt-next-unlock small,.tt-featured-copy small{color:#6edbff;font-size:9px;letter-spacing:.14em;font-weight:900}.tt-next-unlock strong,.tt-featured-copy strong{margin-top:3px;font-size:14px}.tt-next-unlock em{margin-top:4px;color:#92acc0;font-size:10px;font-style:normal}.tt-next-unlock>b{font-size:22px}
#menuScreen .tt-featured-skins{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding:9px 12px}.tt-featured-copy{display:flex;flex-direction:column;min-width:132px}.tt-featured-list{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;min-width:0}.tt-featured-list button{height:62px;border-radius:13px;border:1px solid rgba(91,195,255,.22);background:linear-gradient(145deg,#12354f,#091a2a);padding:2px;overflow:hidden;cursor:pointer;transition:.18s}.tt-featured-list button:hover{transform:translateY(-3px);border-color:#66dfff}.tt-featured-list img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 7px rgba(0,0,0,.30))}
#menuScreen .tt-how-link{align-self:stretch;min-width:96px;border-radius:18px;border:1px solid rgba(95,182,240,.22);background:rgba(6,29,49,.88);color:#cce8f8;font-weight:800;cursor:pointer}.tt-how-link:hover{border-color:#5fd7ff;color:white}
#menuScreen .tt-profile-leaderboard-proxy,#menuScreen .tt-last-reward-proxy{display:none!important}
@keyframes ttLobbyShine{0%,72%{transform:translateX(-75%)}90%,100%{transform:translateX(75%)}}

@media(min-width:821px) and (max-height:790px){
  #menuScreen .tt-lobby-main{grid-template-rows:minmax(0,1fr) 96px 72px}
  #menuScreen .tt-lobby-copy{width:min(430px,33vw)}
  #menuScreen .tt-lobby-copy h1{font-size:clamp(38px,4vw,62px)}
  #menuScreen .tt-lobby-lead{margin:9px 0 10px}
  #menuScreen .tt-player-summary{padding:8px 12px}.tt-player-mini{display:none!important}
  #menuScreen .tt-play-now{min-height:62px;margin-top:9px}.tt-play-now strong{font-size:23px}
  #menuScreen .tt-avatar-actions button{min-height:40px}
  #menuScreen .tt-mode-row{min-height:96px}.tt-mode-card{padding-top:9px!important;padding-bottom:9px!important}
  #menuScreen .tt-avatar-progress-row{min-height:72px}.tt-next-unlock img{width:52px;height:52px}.tt-featured-list button{height:52px}
}
@media(max-width:1100px){
  #menuScreen.tt-lobby-home{overflow:auto!important}
  #menuScreen .tt-lobby-shell{height:auto!important;min-height:100dvh!important;overflow:visible!important}
  #menuScreen .tt-lobby-main{display:flex;flex-direction:column}
  #menuScreen .tt-lobby-hero{min-height:670px}
  #menuScreen .tt-lobby-copy{left:28px;width:44%;top:48%}
  #menuScreen .tt-lobby-character{left:52%;width:38%}
  #menuScreen .tt-destination-sign{right:18px;width:150px}.tt-destination-sign>b{font-size:13px!important}
  #menuScreen .tt-mode-row{grid-template-columns:1fr 1fr}.tt-mode-private{grid-column:span 1}
  #menuScreen .tt-avatar-progress-row{grid-template-columns:1fr 1fr}.tt-how-link{grid-column:1/-1;min-height:48px}
}
@media(max-width:820px){
  #menuScreen .tt-lobby-topbar{grid-template-columns:1fr auto}.tt-lobby-topbar .v12-nav{grid-column:1/-1;order:3}.tt-lobby-topbar .v12-brand img{width:170px!important}
  #menuScreen .tt-lobby-hero{min-height:820px;border-radius:22px}
  #menuScreen .tt-lobby-copy{left:18px;right:18px;top:24px;transform:none;width:auto;text-align:left}.tt-lobby-copy h1{font-size:46px!important}.tt-lobby-lead{max-width:390px}
  #menuScreen .tt-lobby-character{left:15%;right:15%;top:280px;bottom:5px;width:auto;height:520px}
  #menuScreen .tt-destination-sign{display:none}
  #menuScreen .tt-player-summary{max-width:470px}.tt-play-now{max-width:470px}.tt-avatar-actions{max-width:470px}
  #menuScreen .tt-mode-row{grid-template-columns:1fr}.tt-mode-card{min-height:92px}.tt-mode-private{min-height:80px}
  #menuScreen .tt-avatar-progress-row{grid-template-columns:1fr}.tt-featured-skins{grid-template-columns:1fr}.tt-featured-list{margin-top:7px}
}
@media(max-width:540px){
  #menuScreen .tt-lobby-shell{padding:8px!important}.tt-lobby-topbar{padding:7px!important}.tt-lobby-topbar .v12-brand img{width:145px!important}
  #menuScreen .tt-lobby-hero{min-height:760px}.tt-lobby-copy h1{font-size:39px!important}.tt-lobby-lead{font-size:12px!important}
  #menuScreen .tt-player-summary{grid-template-columns:52px 1fr}.tt-player-portrait{width:50px!important;height:50px!important}.tt-player-mini{display:none!important}
  #menuScreen .tt-play-now{min-height:64px}.tt-play-now strong{font-size:23px}.tt-avatar-actions{grid-template-columns:1fr 1fr}.tt-avatar-actions button{font-size:11px}
  #menuScreen .tt-lobby-character{top:285px;left:4%;right:4%;height:455px}
  #menuScreen .tt-featured-list{grid-template-columns:repeat(5,minmax(46px,1fr))}.tt-featured-list button{height:54px}.tt-next-unlock{grid-template-columns:58px 1fr auto!important}.tt-next-unlock img{width:54px!important;height:54px!important}
}

/* =========================================================
   V22.6 — CLEANER MENU NAVIGATION
   Remove duplicate Private/How-to-Play tiles and keep
   Multiplayer in the top navigation instead of Wardrobe.
   ========================================================= */
#menuScreen #multiplayerBtn,
#menuScreen #howBtn{
  display:none!important;
}

#menuScreen #wardrobeNavBtn{
  display:none!important;
}

#menuScreen #multiplayerNavBtn{
  display:inline-flex!important;
}

#menuScreen .tt-mode-row{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

#menuScreen .tt-avatar-progress-row{
  grid-template-columns:1.05fr 1.25fr!important;
}

@media(max-width:1100px){
  #menuScreen .tt-mode-row{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  #menuScreen .tt-avatar-progress-row{
    grid-template-columns:1fr 1fr!important;
  }
}

@media(max-width:820px){
  #menuScreen .tt-mode-row{
    grid-template-columns:1fr!important;
  }
  #menuScreen .tt-avatar-progress-row{
    grid-template-columns:1fr!important;
  }
}

/* =========================================================
   TOMMYTRACE V22.8 — Avatar open stage + premium daily complete
   ========================================================= */
#menuScreen .tt-lobby-character{
  border:none!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
#menuScreen .tt-lobby-character::before{
  content:''!important;
  position:absolute!important;
  inset:10% 8% 12%!important;
  z-index:0!important;
  border-radius:50% 50% 42% 42% / 42% 42% 58% 58%!important;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(7,26,48,.38) 0%, rgba(8,31,57,.26) 30%, rgba(9,36,64,.12) 52%, rgba(9,36,64,0) 74%),
    radial-gradient(ellipse at 50% 78%, rgba(44,204,255,.16) 0%, rgba(44,204,255,.05) 30%, rgba(44,204,255,0) 62%)!important;
  filter:blur(10px)!important;
  opacity:1!important;
  transform:none!important;
  pointer-events:none!important;
}
#menuScreen .tt-lobby-character::after{
  content:''!important;
  position:absolute!important;
  left:14%!important;
  right:14%!important;
  bottom:18%!important;
  height:46%!important;
  z-index:0!important;
  background:linear-gradient(180deg, rgba(8,24,44,0) 0%, rgba(5,18,31,.10) 55%, rgba(4,15,28,.18) 100%)!important;
  border-radius:0 0 42% 42%!important;
  pointer-events:none!important;
}
#menuScreen .tt-lobby-character .v12-character-card{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  overflow:visible!important;
}
#v12CharacterCard>.v12-character-vignette{
  box-shadow:none!important;
  background:radial-gradient(circle at 50% 30%, rgba(120,227,255,.06), transparent 44%)!important;
}
#menuScreen .tt-character-halo{
  width:82%!important;
  bottom:17%!important;
  background:radial-gradient(circle, rgba(104,231,255,.30), rgba(62,189,255,.10) 38%, transparent 72%)!important;
  filter:blur(12px)!important;
}
#menuScreen .tt-lobby-platform{
  width:66%!important;
  height:32px!important;
  bottom:8%!important;
  background:radial-gradient(ellipse, rgba(102,236,255,.58), rgba(35,150,226,.20) 36%, rgba(3,13,22,0) 72%)!important;
  box-shadow:0 0 22px rgba(60,207,255,.22), 0 14px 26px rgba(0,0,0,.22)!important;
}
#menuHeroAvatarImage.tt-menu-hero-image{
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.26)) drop-shadow(0 0 20px rgba(103,231,255,.10))!important;
}

#dailyBtn.daily-completed{
  border-color:rgba(144,238,212,.50)!important;
  box-shadow:inset 0 0 0 1px rgba(186,247,231,.12), 0 14px 28px rgba(0,0,0,.20)!important;
}
#dailyBtn.daily-completed .v12-action-icon{
  color:#083328!important;
  background:linear-gradient(180deg, rgba(199,255,234,.92), rgba(114,241,201,.88))!important;
  border-color:rgba(255,255,255,.42)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    0 0 18px rgba(115,244,201,.36),
    0 0 32px rgba(115,244,201,.16)!important;
}
#dailyBtn.daily-completed .v12-action-icon::after{
  content:'';
  position:absolute;
  inset:-5px;
  border-radius:inherit;
  background:radial-gradient(circle, rgba(131,247,209,.26), rgba(131,247,209,0) 70%);
  z-index:-1;
  filter:blur(6px);
}
#dailyBtn.daily-completed > span:nth-child(2)::after{
  content:'COMPLETED TODAY';
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  margin-top:7px;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(214,255,241,.32);
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  color:#eafff7;
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 6px 16px rgba(0,0,0,.12);
  backdrop-filter:blur(8px);
}
#dailyBtn.daily-completed > b{
  display:grid!important;
  place-items:center!important;
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(221,255,245,.34);
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 8px 18px rgba(0,0,0,.16);
  backdrop-filter:blur(8px);
  color:#ebfff8!important;
  font-size:16px!important;
  line-height:1;
  opacity:1!important;
}
#dailyBtn.daily-completed strong{
  text-shadow:0 0 18px rgba(124,248,208,.10), 0 2px 10px rgba(0,0,0,.25)!important;
}
#dailyBtn.daily-completed small{
  color:#effff9!important;
}

/* =========================================================
   TOMMYTRACE V22.9 — Premium hero avatar ambience
   Soft pedestal glow + floating particles + legendary aura
   ========================================================= */
#menuHeroAvatarLayer.tt-main-menu-hero-shell .tt-hero-ambient-fx{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:24;
  overflow:visible;
}
#menuHeroAvatarLayer.tt-main-menu-hero-shell .tt-hero-pedestal-glow{
  position:absolute;
  left:50%;
  bottom:8%;
  width:72%;
  height:88px;
  transform:translateX(-50%);
  border-radius:50%;
  background:
    radial-gradient(ellipse at center, rgba(155,240,255,.50) 0%, rgba(82,200,255,.28) 28%, rgba(39,140,214,.14) 44%, rgba(5,18,34,0) 74%),
    radial-gradient(ellipse at center, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 58%);
  filter:blur(8px);
  opacity:.98;
  animation:ttHeroPedestalPulse 3.6s ease-in-out infinite;
}
#menuHeroAvatarLayer.tt-main-menu-hero-shell.premium .tt-hero-pedestal-glow{
  width:76%;
  height:96px;
  filter:blur(9px);
}
#menuHeroAvatarLayer.tt-main-menu-hero-shell .tt-hero-particles{
  position:absolute;
  left:10%;
  right:10%;
  top:10%;
  bottom:12%;
  overflow:visible;
}
#menuHeroAvatarLayer.tt-main-menu-hero-shell .tt-hero-particle{
  position:absolute;
  left:var(--x,50%);
  bottom:var(--y,20%);
  width:var(--size,6px);
  height:var(--size,6px);
  border-radius:999px;
  background:radial-gradient(circle at 35% 35%, #fff 0 18%, var(--particle-color, #7cecff) 42%, rgba(255,255,255,0) 75%);
  box-shadow:0 0 12px var(--particle-color, #7cecff), 0 0 24px color-mix(in srgb, var(--particle-color, #7cecff) 58%, transparent);
  opacity:0;
  transform:translate3d(0,0,0) scale(.65);
  animation:ttHeroParticleFloat var(--dur,6s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
}
#menuHeroAvatarLayer.tt-main-menu-hero-shell.starter .tt-hero-particle{
  opacity:.55;
}
#menuHeroAvatarLayer.tt-main-menu-hero-shell .tt-hero-legendary-aura{
  position:absolute;
  left:50%;
  top:50%;
  width:66%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  z-index:25;
  opacity:.92;
  filter:drop-shadow(0 0 24px rgba(255,211,99,.16));
}
#menuHeroAvatarLayer.tt-main-menu-hero-shell .tt-hero-aura-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1.5px solid rgba(255,214,111,.46);
  box-shadow:0 0 18px rgba(255,214,111,.16), inset 0 0 16px rgba(255,214,111,.10);
}
#menuHeroAvatarLayer.tt-main-menu-hero-shell .tt-hero-aura-ring.ring-1{
  animation:ttHeroAuraSpin 13s linear infinite;
}
#menuHeroAvatarLayer.tt-main-menu-hero-shell .tt-hero-aura-ring.ring-2{
  inset:12%;
  border-style:dashed;
  opacity:.82;
  animation:ttHeroAuraSpinReverse 10s linear infinite;
}
#menuHeroAvatarLayer.tt-main-menu-hero-shell .tt-hero-aura-ring.ring-3{
  inset:24%;
  border-width:1px;
  opacity:.72;
  transform:rotate(45deg);
  border-radius:24%;
  animation:ttHeroAuraPulse 2.8s ease-in-out infinite;
}
#menuHeroAvatarLayer.tt-main-menu-hero-shell .tt-hero-aura-crest{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:#ffe189;
  font-size:28px;
  font-weight:900;
  text-shadow:0 0 12px rgba(255,225,137,.78), 0 0 28px rgba(255,180,45,.38);
  animation:ttHeroAuraCrest 3.2s ease-in-out infinite;
}
#menuHeroAvatarLayer.tt-main-menu-hero-shell.starter .tt-hero-legendary-aura,
#menuHeroAvatarLayer.tt-main-menu-hero-shell.rare .tt-hero-legendary-aura,
#menuHeroAvatarLayer.tt-main-menu-hero-shell.epic .tt-hero-legendary-aura{
  display:none;
}
#menuHeroAvatarLayer.tt-main-menu-hero-shell.rare .tt-hero-pedestal-glow{
  background:
    radial-gradient(ellipse at center, rgba(128,235,255,.54) 0%, rgba(74,186,255,.28) 28%, rgba(33,113,204,.12) 46%, rgba(5,18,34,0) 74%),
    radial-gradient(ellipse at center, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 58%);
}
#menuHeroAvatarLayer.tt-main-menu-hero-shell.epic .tt-hero-pedestal-glow{
  background:
    radial-gradient(ellipse at center, rgba(194,133,255,.38) 0%, rgba(98,220,255,.28) 28%, rgba(55,143,255,.14) 46%, rgba(5,18,34,0) 74%),
    radial-gradient(ellipse at center, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 58%);
}
#menuHeroAvatarLayer.tt-main-menu-hero-shell.legendary .tt-hero-pedestal-glow{
  background:
    radial-gradient(ellipse at center, rgba(255,231,141,.32) 0%, rgba(112,232,255,.28) 26%, rgba(68,167,255,.16) 44%, rgba(5,18,34,0) 74%),
    radial-gradient(ellipse at center, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 58%);
}
@keyframes ttHeroParticleFloat{
  0%{opacity:0;transform:translate3d(0,8px,0) scale(.62)}
  15%{opacity:.95}
  50%{opacity:.7}
  100%{opacity:0;transform:translate3d(var(--drift,0px),-132px,0) scale(1.05)}
}
@keyframes ttHeroPedestalPulse{
  0%,100%{transform:translateX(-50%) scale(1);opacity:.90}
  50%{transform:translateX(-50%) scale(1.05);opacity:1}
}
@keyframes ttHeroAuraSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes ttHeroAuraSpinReverse{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}
@keyframes ttHeroAuraPulse{0%,100%{opacity:.56;transform:rotate(45deg) scale(.96)}50%{opacity:.92;transform:rotate(45deg) scale(1.03)}}
@keyframes ttHeroAuraCrest{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.94}50%{transform:translate(-50%,-50%) scale(1.10);opacity:1}}
@media (prefers-reduced-motion:reduce){
  #menuHeroAvatarLayer.tt-main-menu-hero-shell .tt-hero-particle,
  #menuHeroAvatarLayer.tt-main-menu-hero-shell .tt-hero-pedestal-glow,
  #menuHeroAvatarLayer.tt-main-menu-hero-shell .tt-hero-aura-ring,
  #menuHeroAvatarLayer.tt-main-menu-hero-shell .tt-hero-aura-crest{animation:none!important}
}

/* V20 — Mobile gameplay: Street View first, map on demand. */
.mobile-map-btn {
  display: none;
}

@media (max-width: 820px) {
  html, body, #app {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  #gameScreen.active {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  #gameScreen .game-shell,
  #gameScreen .play-stage,
  #gameScreen .viewer-frame,
  #gameScreen #streetView {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
  }

  /* Compact mobile HUD: home + round/score/timer only. */
  #gameScreen .hud-bar {
    top: calc(7px + var(--tt-safe-top));
    left: calc(7px + var(--tt-safe-left));
    right: calc(7px + var(--tt-safe-right));
    width: auto;
    min-height: 48px;
    padding: 5px 6px;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 6px;
    border-radius: 16px;
    background: rgba(4, 18, 31, .82);
    border-color: rgba(109, 221, 255, .18);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  #gameScreen .hud-brand { width: 42px; min-width: 42px; }
  #gameScreen .brand-home-btn { width: 42px; height: 38px; min-width: 42px; padding: 0; border-radius: 12px; }
  #gameScreen .brand-logo-hud { width: 34px; height: 34px; object-fit: contain; }
  #gameScreen .hud-brand-copy,
  #gameScreen .hud-center { display: none !important; }
  #gameScreen .hud-metrics {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }
  #gameScreen .metric-card {
    min-width: 0;
    min-height: 38px;
    padding: 4px 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 11px;
    background: rgba(255,255,255,.045);
  }
  #gameScreen .metric-card span {
    display: block;
    margin: 0 0 1px;
    font-size: .43rem;
    letter-spacing: .12em;
    opacity: .72;
  }
  #gameScreen .metric-card strong { font-size: 12px; line-height: 1.05; }
  #gameScreen .metric-card-time { min-width: 0; }
  #gameScreen .timer-ring { display: none; }

  /* The desktop minimap wastes most of a phone viewport. Use the full-screen map instead. */
  #gameScreen .map-dock,
  #gameScreen .clue-panel,
  #gameScreen .utility-footer {
    display: none !important;
  }

  #gameScreen .mobile-map-btn {
    position: absolute;
    right: calc(12px + var(--tt-safe-right));
    bottom: calc(14px + var(--tt-safe-bottom));
    z-index: 31;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 128px;
    min-height: 54px;
    padding: 8px 13px 8px 9px;
    border: 1px solid rgba(87, 220, 255, .42);
    border-radius: 18px;
    color: #ecfbff;
    background: rgba(5, 27, 43, .90);
    box-shadow: 0 12px 30px rgba(0,0,0,.34), 0 0 24px rgba(67,227,234,.10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    touch-action: manipulation;
  }
  #gameScreen .mobile-map-btn:active { transform: scale(.97); }
  #gameScreen .mobile-map-btn.has-guess {
    border-color: rgba(111, 255, 193, .62);
    box-shadow: 0 12px 30px rgba(0,0,0,.34), 0 0 26px rgba(87,255,190,.13);
  }
  #gameScreen .mobile-map-icon {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    flex: 0 0 37px;
    border-radius: 12px;
    font-size: 22px;
    color: var(--accent);
    background: rgba(67,227,234,.11);
  }
  #gameScreen .mobile-map-btn.has-guess .mobile-map-icon { color: #79f7bf; background: rgba(87,255,190,.10); }
  #gameScreen .mobile-map-copy { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
  #gameScreen .mobile-map-copy strong { font-size: .78rem; letter-spacing: .12em; }
  #gameScreen .mobile-map-copy small { margin-top: 4px; color: rgba(226,242,251,.68); font-size: .58rem; white-space: nowrap; }

  /* Mobile guess map behaves like a dedicated game screen. */
  .map-modal {
    padding: 0 !important;
    overscroll-behavior: none;
  }
  .map-modal .map-modal-card {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    padding: calc(8px + var(--tt-safe-top)) calc(8px + var(--tt-safe-right)) calc(9px + var(--tt-safe-bottom)) calc(8px + var(--tt-safe-left)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #071523;
  }
  .map-modal .modal-close {
    top: calc(8px + var(--tt-safe-top));
    right: calc(8px + var(--tt-safe-right));
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 14px;
    z-index: 6;
  }
  .map-modal .map-modal-head {
    min-height: 48px;
    padding: 2px 52px 4px 4px;
  }
  .map-modal .map-modal-head .eyebrow { font-size: .56rem; }
  .map-modal .map-modal-head h3 { margin-top: 2px; font-size: 1rem; }
  .map-modal .large-map {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    margin-top: 2px;
    border-radius: 15px;
  }
  .map-modal .expanded-map-footer {
    grid-template-columns: minmax(0, 1fr) minmax(132px, 168px);
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
  }
  .map-modal .expanded-map-status {
    max-height: 34px;
    overflow: hidden;
    font-size: .65rem;
    line-height: 1.25;
  }
  .map-modal .large-map > #map {
  width: 100% !important;
  height: 100% !important;
  min-height: 100%;
  border: 0 !important;
  border-radius: inherit !important;
}

.map-modal .expanded-guess-cta {
    width: 100%;
    min-height: 52px;
    height: 52px;
    margin: 0;
    border-radius: 15px;
    font-size: .75rem;
  }
}

@media (max-width: 430px) and (orientation: portrait) {
  #gameScreen .hud-bar { grid-template-columns: 38px minmax(0, 1fr); }
  #gameScreen .hud-brand { width: 38px; min-width: 38px; }
  #gameScreen .brand-home-btn { width: 38px; min-width: 38px; }
  #gameScreen .brand-logo-hud { width: 31px; height: 31px; }
  #gameScreen .metric-card span { font-size: .39rem; }
  #gameScreen .metric-card strong { font-size: 11px; }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 520px) {
  #gameScreen .hud-bar {
    top: calc(4px + var(--tt-safe-top));
    left: calc(5px + var(--tt-safe-left));
    right: auto;
    width: min(390px, calc(100vw - 10px - var(--tt-safe-left) - var(--tt-safe-right)));
    min-height: 42px;
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 3px 5px;
    border-radius: 14px;
  }
  #gameScreen .hud-brand { width: 36px; min-width: 36px; }
  #gameScreen .brand-home-btn { width: 36px; height: 34px; min-width: 36px; }
  #gameScreen .brand-logo-hud { width: 29px; height: 29px; }
  #gameScreen .metric-card { min-height: 33px; padding: 3px 4px; }
  #gameScreen .metric-card span { display: none; }
  #gameScreen .metric-card strong { font-size: 11px; }
  #gameScreen .mobile-map-btn {
    right: calc(8px + var(--tt-safe-right));
    bottom: calc(8px + var(--tt-safe-bottom));
    min-width: 112px;
    min-height: 48px;
    padding: 6px 10px 6px 7px;
    border-radius: 15px;
  }
  #gameScreen .mobile-map-icon { width: 34px; height: 34px; flex-basis: 34px; font-size: 20px; }
  #gameScreen .mobile-map-copy strong { font-size: .70rem; }
  #gameScreen .mobile-map-copy small { font-size: .52rem; }
  .map-modal .map-modal-head { min-height: 38px; }
  .map-modal .map-modal-head .eyebrow { display: none; }
  .map-modal .map-modal-head h3 { font-size: .88rem; }
  .map-modal .expanded-map-footer {
    grid-template-columns: minmax(0,1fr) 150px;
    margin-top: 6px;
    padding-top: 6px;
  }
  .map-modal .expanded-guess-cta { min-height: 46px; height: 46px; }
}

/* =========================================================
   V22.10 — MOBILE TOPBAR CLEANUP
   Cleaner mobile header: remove crowded nav strip, keep
   logo + wallet + profile, and place Google sign-in on its
   own row only when it is visible.
   ========================================================= */
@media(max-width:820px){
  #menuScreen .tt-lobby-topbar{
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:start!important;
    row-gap:8px!important;
    padding:8px!important;
  }

  #menuScreen .tt-lobby-topbar .v12-nav{
    display:none!important;
  }

  #menuScreen .tt-lobby-topbar .v12-brand{
    align-self:center!important;
    min-width:0!important;
  }

  #menuScreen .tt-lobby-topbar .v12-brand img{
    width:112px!important;
    max-width:30vw!important;
    max-height:44px!important;
  }

  #menuScreen .v12-top-actions{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    grid-template-areas:
      "wallet account"
      "google google"!important;
    align-items:center!important;
    justify-items:stretch!important;
    gap:8px!important;
    width:min(58vw,225px)!important;
    min-width:min(58vw,225px)!important;
    margin-left:auto!important;
  }

  #menuScreen .v12-wallet{
    grid-area:wallet;
    min-width:0!important;
    min-height:42px!important;
    padding:0 10px!important;
    border-radius:14px!important;
    justify-content:center!important;
  }

  #menuScreen .v12-wallet strong{
    font-size:.98rem!important;
  }

  #menuScreen .v12-wallet span:last-child{
    font-size:.56rem!important;
    letter-spacing:.12em!important;
  }

  #menuScreen .v12-google-login{
    grid-area:google;
    width:100%!important;
    min-height:38px!important;
    padding:6px 10px!important;
    border-radius:12px!important;
    justify-content:center!important;
    font-size:12px!important;
  }

  #menuScreen .v12-account{
    grid-area:account;
    min-width:0!important;
    max-width:none!important;
    width:100%!important;
    min-height:42px!important;
    padding:6px 8px!important;
    gap:7px!important;
    border-radius:14px!important;
    justify-content:flex-start!important;
  }

  #menuScreen .v12-avatar-chip{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    border-radius:10px!important;
  }

  #menuScreen .v12-account strong{
    display:block!important;
    max-width:82px!important;
    font-size:.72rem!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  #menuScreen .v12-account small{
    display:block!important;
    font-size:.57rem!important;
    line-height:1.15!important;
  }

  #menuScreen .account-country-flag{
    margin-right:.2rem!important;
    font-size:.88em!important;
  }
}

@media(max-width:540px){
  #menuScreen .tt-lobby-topbar{
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:start!important;
  }

  #menuScreen .tt-lobby-topbar .v12-brand img{
    width:82px!important;
    max-width:none!important;
    max-height:38px!important;
  }

  #menuScreen .v12-top-actions{
    width:100%!important;
    min-width:0!important;
    grid-template-columns:50px minmax(0,1fr)!important;
    gap:6px!important;
  }

  #menuScreen .v12-wallet{
    width:50px!important;
    min-width:50px!important;
    padding:0!important;
    gap:0!important;
  }

  #menuScreen .v12-wallet span:last-child{
    display:none!important;
  }

  #menuScreen .v12-wallet strong{
    font-size:.92rem!important;
  }

  #menuScreen .coin-orb{
    font-size:1rem!important;
  }

  #menuScreen .v12-account{
    padding:6px 7px!important;
  }

  #menuScreen .v12-account strong{
    max-width:74px!important;
    font-size:.69rem!important;
  }

  #menuScreen .v12-account small{
    font-size:.55rem!important;
  }

  #menuScreen .v12-google-login span:last-child{
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}

@media(max-width:420px){
  #menuScreen .tt-lobby-topbar .v12-brand img{
    width:74px!important;
    max-height:34px!important;
  }

  #menuScreen .v12-top-actions{
    grid-template-columns:46px minmax(0,1fr)!important;
    gap:6px!important;
  }

  #menuScreen .v12-wallet{
    width:46px!important;
    min-width:46px!important;
    min-height:40px!important;
  }

  #menuScreen .v12-account strong{
    max-width:66px!important;
    font-size:.67rem!important;
  }
}

/* =========================================================
   V22.11 — PREMIUM MOBILE APP BAR
   Turn the crowded mobile header into a cleaner single-line
   glass app bar with compact utility buttons.
   ========================================================= */
@media(max-width:820px){
  #menuScreen .tt-lobby-topbar{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    min-height:64px!important;
    padding:10px 12px!important;
    border-radius:20px!important;
    background:linear-gradient(145deg,rgba(6,29,49,.92),rgba(4,18,31,.88))!important;
    border:1px solid rgba(96,206,255,.18)!important;
    box-shadow:0 14px 36px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.06)!important;
    overflow:hidden!important;
  }

  #menuScreen .tt-lobby-topbar::after{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 42%);
  }

  #menuScreen .tt-lobby-topbar .v12-brand{
    position:relative;
    z-index:1;
    flex:0 0 auto;
    display:flex!important;
    align-items:center!important;
    min-width:0!important;
  }

  #menuScreen .tt-lobby-topbar .v12-brand img{
    width:96px!important;
    max-width:none!important;
    max-height:40px!important;
    filter:drop-shadow(0 4px 14px rgba(0,0,0,.18));
  }

  #menuScreen .tt-lobby-topbar .v12-nav{
    display:none!important;
  }

  #menuScreen .v12-top-actions{
    position:relative;
    z-index:1;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
    width:auto!important;
    min-width:0!important;
    margin-left:auto!important;
  }

  #menuScreen .v12-wallet,
  #menuScreen .v12-google-login,
  #menuScreen .v12-account{
    min-height:42px!important;
    border-radius:14px!important;
    border:1px solid rgba(126,220,255,.18)!important;
    background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.02))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 20px rgba(0,0,0,.16)!important;
    backdrop-filter:blur(14px)!important;
  }

  #menuScreen .v12-wallet{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    min-width:76px!important;
    padding:0 12px!important;
  }

  #menuScreen .v12-wallet .coin-orb{
    font-size:1rem!important;
    color:#ffd970!important;
    text-shadow:0 0 14px rgba(255,214,88,.35)!important;
  }

  #menuScreen .v12-wallet strong{
    font-size:.94rem!important;
    letter-spacing:.01em!important;
  }

  #menuScreen .v12-wallet span:last-child{
    display:none!important;
  }

  #menuScreen .v12-google-login{
    width:42px!important;
    min-width:42px!important;
    padding:0!important;
    display:inline-grid!important;
    place-items:center!important;
  }

  #menuScreen .v12-google-login .google-g{
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    font-size:12px!important;
    border-width:2px!important;
    box-shadow:0 4px 10px rgba(0,0,0,.10)!important;
  }

  #menuScreen .v12-google-login span:last-child{
    display:none!important;
  }

  #menuScreen .v12-account{
    width:44px!important;
    min-width:44px!important;
    padding:0!important;
    display:inline-grid!important;
    place-items:center!important;
    justify-content:center!important;
    gap:0!important;
  }

  #menuScreen .v12-account > span:nth-child(2),
  #menuScreen .v12-account .account-chevron{
    display:none!important;
  }

  #menuScreen .v12-avatar-chip{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    border-radius:10px!important;
    box-shadow:0 4px 12px rgba(0,0,0,.18)!important;
  }
}

@media(max-width:540px){
  #menuScreen .tt-lobby-topbar{
    gap:8px!important;
    min-height:58px!important;
    padding:8px 10px!important;
    border-radius:18px!important;
  }

  #menuScreen .tt-lobby-topbar .v12-brand img{
    width:86px!important;
    max-height:36px!important;
  }

  #menuScreen .v12-top-actions{
    gap:6px!important;
  }

  #menuScreen .v12-wallet{
    min-width:70px!important;
    min-height:40px!important;
    padding:0 10px!important;
  }

  #menuScreen .v12-wallet strong{
    font-size:.9rem!important;
  }

  #menuScreen .v12-google-login,
  #menuScreen .v12-account{
    width:40px!important;
    min-width:40px!important;
    min-height:40px!important;
  }

  #menuScreen .v12-avatar-chip{
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
  }
}

@media(max-width:420px){
  #menuScreen .tt-lobby-topbar .v12-brand img{
    width:80px!important;
    max-height:34px!important;
  }

  #menuScreen .v12-wallet{
    min-width:64px!important;
    padding:0 8px!important;
  }

  #menuScreen .v12-google-login,
  #menuScreen .v12-account{
    width:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    border-radius:13px!important;
  }
}

/* =========================================================
   V22.12 — MOBILE FEATURED EXPLORERS OVERFLOW FIX
   Keep the featured avatars contained inside the card on
   small screens instead of overflowing out of the right side.
   ========================================================= */
#menuScreen .tt-featured-skins{
  min-width:0!important;
  overflow:hidden!important;
}
#menuScreen .tt-featured-list{
  min-width:0!important;
}

@media(max-width:820px){
  #menuScreen .tt-avatar-progress-row > *{
    min-width:0!important;
  }

  #menuScreen .tt-featured-skins{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
    overflow:hidden!important;
  }

  #menuScreen .tt-featured-copy{
    min-width:0!important;
  }

  #menuScreen .tt-featured-list{
    display:flex!important;
    grid-template-columns:none!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    padding:2px 2px 4px 0!important;
  }

  #menuScreen .tt-featured-list::-webkit-scrollbar{
    display:none!important;
  }

  #menuScreen .tt-featured-list button{
    flex:0 0 64px!important;
    width:64px!important;
    min-width:64px!important;
    height:64px!important;
  }
}

@media(max-width:540px){
  #menuScreen .tt-featured-skins{
    padding:10px 12px!important;
    border-radius:18px!important;
  }

  #menuScreen .tt-featured-copy strong{
    font-size:12px!important;
  }

  #menuScreen .tt-featured-list{
    gap:7px!important;
  }

  #menuScreen .tt-featured-list button{
    flex:0 0 60px!important;
    width:60px!important;
    min-width:60px!important;
    height:60px!important;
    border-radius:14px!important;
  }
}

/* =========================================================
   V22.13 — PREMIUM MOBILE FEATURED ROW
   Add snap-scrolling avatar chips and a subtle fade edge so
   the horizontal explorer row feels intentional and premium.
   ========================================================= */
@media(max-width:820px){
  #menuScreen .tt-featured-skins{
    position:relative!important;
  }

  /* soft glass fade on the right to hint there is more content */
  #menuScreen .tt-featured-skins::after{
    content:'';
    position:absolute;
    top:56px;
    right:0;
    bottom:10px;
    width:34px;
    pointer-events:none;
    z-index:3;
    background:linear-gradient(90deg, rgba(6,29,49,0) 0%, rgba(6,29,49,.72) 48%, rgba(6,29,49,.96) 100%);
  }

  #menuScreen .tt-featured-list{
    scroll-snap-type:x mandatory!important;
    scroll-padding-left:0!important;
    scroll-padding-right:18px!important;
    padding-right:20px!important;
    mask-image:linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 84%, rgba(0,0,0,.92) 90%, rgba(0,0,0,.55) 96%, rgba(0,0,0,0) 100%);
    -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 84%, rgba(0,0,0,.92) 90%, rgba(0,0,0,.55) 96%, rgba(0,0,0,0) 100%);
  }

  #menuScreen .tt-featured-list button{
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
    position:relative;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
    box-shadow:0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04)!important;
  }

  #menuScreen .tt-featured-list button:hover,
  #menuScreen .tt-featured-list button:focus-visible{
    transform:translateY(-2px)!important;
    border-color:rgba(122,228,255,.48)!important;
    box-shadow:0 12px 24px rgba(0,0,0,.22), 0 0 0 1px rgba(122,228,255,.10)!important;
    outline:none!important;
  }

  #menuScreen .tt-featured-list button:active{
    transform:scale(.97)!important;
  }
}

@media(max-width:540px){
  #menuScreen .tt-featured-skins::after{
    top:54px;
    bottom:8px;
    width:28px;
  }

  #menuScreen .tt-featured-list{
    scroll-padding-right:16px!important;
    padding-right:18px!important;
  }
}

/* =========================================================
   V22.14 — CLEANER MULTIPLAYER ROUND RESULT MAP
   Remove duplicate player names from map callouts and use
   cleaner score-first chips instead.
   ========================================================= */
.mp-player-map-label{
  text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.9);
  letter-spacing:.02em;
}

.mp-player-info-pill.result-score-pill{
  gap:4px;
  min-width:102px;
  padding:8px 10px;
  border-radius:14px;
  background:rgba(7,18,29,.96);
}

.mp-player-info-pill.result-score-pill .pill-kicker{
  display:block;
  font-size:9px;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#79dfff;
  font-weight:900;
}

.mp-player-info-pill.result-score-pill strong{
  font-size:13px;
  line-height:1.1;
}

.mp-player-info-pill.result-score-pill.me{
  border-color:rgba(99,240,198,.46);
  box-shadow:0 8px 22px rgba(0,0,0,.28),0 0 0 1px rgba(99,240,198,.10);
}
.mp-player-info-pill.result-score-pill.me .pill-kicker{
  color:#7cf3cf;
}

.mp-player-info-pill.result-score-pill.leader{
  border-color:rgba(255,215,102,.46);
  box-shadow:0 8px 22px rgba(0,0,0,.28),0 0 0 1px rgba(255,215,102,.10);
}
.mp-player-info-pill.result-score-pill.leader .pill-kicker{
  color:#ffd96a;
}

@media(max-width:760px){
  .mp-player-info-pill.result-score-pill{
    min-width:96px;
    padding:7px 9px;
  }
  .mp-player-info-pill.result-score-pill .pill-kicker{
    font-size:8px;
  }
  .mp-player-info-pill.result-score-pill strong{
    font-size:12px;
  }
}

/* =========================================================
   V22.15 — PREMIUM MULTIPLAYER RESULT SCREEN
   Make the round-complete screen feel more premium without
   changing the existing structure or logic.
   ========================================================= */
#mpResultScreen .result-shell{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 84% 14%, rgba(59,217,255,.12), transparent 20%),
    radial-gradient(circle at 14% 86%, rgba(54,153,255,.10), transparent 24%),
    linear-gradient(180deg, rgba(7,29,48,.96), rgba(4,17,29,.98));
  border:1px solid rgba(106,216,255,.16);
  box-shadow:0 26px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
}
#mpResultScreen .result-shell::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 26%);
}
#mpResultScreen .result-header{
  align-items:flex-start;
  margin-bottom:20px;
}
#mpResultScreen .eyebrow{
  color:#7fdfff;
}
#mpResultTitle{
  margin-top:4px;
  letter-spacing:-.052em;
  text-shadow:0 10px 30px rgba(0,0,0,.18);
}
#mpResultLocation{
  max-width:60ch;
  font-size:1.02rem;
}
#mpResultScreen .score-badge{
  min-width:205px;
  padding:16px 18px;
  border-radius:24px;
  border:1px solid rgba(89,224,255,.24);
  background:linear-gradient(145deg, rgba(8,42,62,.82), rgba(8,27,44,.92));
  box-shadow:0 18px 36px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(89,224,255,.05);
}
#mpResultScreen .score-badge span{
  color:#9db7c9;
}
#mpResultScreen .score-badge strong{
  margin-top:10px;
  font-size:clamp(38px,4vw,54px);
  line-height:.95;
  letter-spacing:-.04em;
  text-shadow:0 0 24px rgba(67,227,234,.16);
}
#mpResultMap{
  border-radius:28px;
  border:1px solid rgba(108,215,255,.14);
  box-shadow:0 18px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
}
#mpResultScreen .mp-leaderboard-wrap{
  margin-top:18px;
  padding:20px;
  border-radius:24px;
  border:1px solid rgba(111,210,255,.14);
  background:linear-gradient(180deg, rgba(8,24,39,.78), rgba(8,20,33,.92));
  box-shadow:0 16px 36px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03);
}
#mpResultScreen .mp-leaderboard-wrap .eyebrow{
  font-size:.72rem;
  letter-spacing:.18em;
}
#mpResultScreen .mp-leaderboard{
  gap:12px;
  margin-top:16px;
}
#mpResultScreen .mp-leader-row{
  position:relative;
  grid-template-columns:56px minmax(0,1fr) auto auto;
  gap:14px;
  padding:15px 16px;
  border-radius:18px;
  border:1px solid rgba(126,210,255,.11);
  background:linear-gradient(145deg, rgba(255,255,255,.038), rgba(255,255,255,.022));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
#mpResultScreen .mp-leader-row.me{
  border-color:rgba(89,226,255,.28);
  background:linear-gradient(145deg, rgba(67,227,234,.10), rgba(255,255,255,.028));
  box-shadow:0 12px 28px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 1px rgba(89,226,255,.04);
}
#mpResultScreen .mp-leader-row.runnerup-row:not(.champion-row){
  border-color:rgba(178,201,223,.18);
  background:linear-gradient(145deg, rgba(181,203,225,.08), rgba(255,255,255,.02));
}
#mpResultScreen .mp-rank{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:15px;
  background:linear-gradient(145deg, rgba(19,58,82,.95), rgba(10,28,44,.92));
  border:1px solid rgba(111,220,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  font-size:17px;
}
#mpResultScreen .mp-leader-row.champion-row .mp-rank{
  background:linear-gradient(145deg, rgba(93,69,19,.98), rgba(34,28,13,.94));
  border-color:rgba(255,221,113,.34);
  box-shadow:0 0 0 1px rgba(255,221,113,.08), inset 0 1px 0 rgba(255,255,255,.05);
}
#mpResultScreen .mp-player-copy{
  gap:12px;
}
#mpResultScreen .mp-player-name{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:1.12rem;
  letter-spacing:-.01em;
}
#mpResultScreen .mp-round-points{
  min-width:118px;
  text-align:right;
  font-size:1.5rem;
  line-height:1;
  letter-spacing:-.03em;
  text-shadow:0 0 20px rgba(91,255,194,.10);
}
#mpResultScreen .mp-total-points{
  min-width:92px;
  text-align:right;
  padding:9px 12px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  font-size:12px;
  color:#a6bac8;
}
#mpResultScreen .mp-result-actions{
  margin-top:20px;
}
#mpResultScreen .mp-result-actions .btn{
  min-width:190px;
  border-radius:16px;
}
#mpResultStatus{
  margin-top:10px;
  color:#9ab3c3;
}

@media(max-width:820px){
  #mpResultScreen .result-header{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
  }
  #mpResultScreen .score-badge{
    min-width:0;
    width:100%;
  }
  #mpResultScreen .score-badge strong{
    font-size:2.2rem;
  }
  #mpResultScreen .mp-leaderboard-wrap{
    padding:16px 14px;
  }
  #mpResultScreen .mp-leader-row{
    grid-template-columns:48px minmax(0,1fr) auto;
    gap:10px;
    padding:13px 12px;
  }
  #mpResultScreen .mp-total-points{
    grid-column:2 / -1;
    justify-self:end;
    margin-top:-2px;
  }
  #mpResultScreen .mp-round-points{
    min-width:0;
    font-size:1.2rem;
  }
  #mpResultScreen .mp-player-name{
    font-size:1rem;
  }
}

@media(max-width:540px){
  #mpResultScreen .result-shell{
    padding:14px 10px;
    border-radius:22px;
  }
  #mpResultTitle{
    font-size:2.2rem;
  }
  #mpResultLocation{
    font-size:.88rem;
  }
  #mpResultMap{
    height:min(40vh, 320px);
    border-radius:22px;
  }
  #mpResultScreen .mp-leader-row{
    padding:12px 10px;
  }
  #mpResultScreen .mp-rank{
    width:42px;
    height:42px;
    border-radius:13px;
    font-size:15px;
  }
  #mpResultScreen .mp-round-points{
    font-size:1.08rem;
  }
}

/* =========================================================
   V22.16 — PREMIUM FINAL LEADERBOARD / CHAMPION SCREEN
   Bring the champion screen up to the same premium level as
   the upgraded round-result page.
   ========================================================= */
#mpFinalScreen{
  background:
    radial-gradient(circle at 50% 8%, rgba(255,218,104,.16), transparent 24%),
    radial-gradient(circle at 14% 22%, rgba(67,227,234,.08), transparent 26%),
    linear-gradient(180deg, rgba(3,12,20,.96), rgba(6,18,30,.98));
}

#mpFinalScreen .mp-champion-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(115,216,255,.14);
  background:
    radial-gradient(circle at 86% 10%, rgba(59,217,255,.10), transparent 18%),
    radial-gradient(circle at 8% 92%, rgba(255,214,97,.08), transparent 22%),
    linear-gradient(180deg, rgba(7,26,43,.96), rgba(6,16,27,.98));
  box-shadow:0 28px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
}
#mpFinalScreen .mp-champion-card::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 24%);
}

#mpFinalScreen .mp-champion-stage{
  margin:-2px -2px 26px;
  padding:36px 24px 32px;
  border-radius:30px;
  border:1px solid rgba(255,222,119,.24);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,226,128,.22), transparent 30%),
    radial-gradient(circle at 50% 32%, rgba(67,227,234,.09), transparent 42%),
    linear-gradient(180deg, rgba(44,35,13,.62), rgba(8,19,30,.90));
  box-shadow:inset 0 0 46px rgba(255,214,90,.07), 0 22px 56px rgba(0,0,0,.28);
}
#mpFinalScreen .mp-champion-stage .eyebrow{
  color:#9feaff;
  letter-spacing:.2em;
}
#mpFinalScreen .mp-champion-crown{
  box-shadow:0 0 0 1px rgba(255,224,122,.08), 0 0 26px rgba(255,214,80,.18);
}
#mpFinalScreen .mp-champion-avatar{
  width:126px;
  height:126px;
  margin:10px auto 14px;
  border-radius:38px;
  border:1px solid rgba(118,230,255,.22);
  background:
    radial-gradient(circle at 50% 18%, rgba(67,227,234,.24), rgba(7,18,29,.96));
  box-shadow:0 18px 38px rgba(0,0,0,.24), 0 0 34px rgba(67,227,234,.10);
}
#mpFinalScreen .mp-champion-stage h2{
  margin-top:8px;
  text-shadow:0 12px 36px rgba(228,178,60,.18);
}
#mpFinalScreen .mp-champion-score{
  margin-top:8px;
  color:#cedae4;
  font-size:13px;
  letter-spacing:.18em;
}
#mpFinalScreen .mp-champion-score span{
  display:inline-block;
  margin-right:8px;
  font-size:clamp(34px, 4vw, 46px);
  line-height:.95;
  color:#72f2d1;
  text-shadow:0 0 22px rgba(114,242,209,.14);
}
#mpFinalScreen .mp-champion-badge{
  margin-top:18px;
  padding:10px 16px;
  border-radius:999px;
  background:linear-gradient(145deg, rgba(255,224,122,.12), rgba(255,224,122,.05));
  box-shadow:0 10px 24px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.05);
}

#mpFinalScreen .duel-rating-result{
  margin:0 auto 22px;
  width:min(680px,100%);
  border-radius:22px;
  border:1px solid rgba(96,216,255,.16);
  background:linear-gradient(145deg, rgba(10,31,48,.92), rgba(24,15,42,.90));
  box-shadow:0 16px 36px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.04);
}

#mpFinalScreen .mp-final-label{
  color:#8fe7ff;
  letter-spacing:.18em;
}
#mpFinalScreen .mp-final-title{
  margin-top:5px;
  font-size:clamp(30px, 4vw, 42px);
  letter-spacing:-.045em;
}
#mpFinalScreen .mp-final-title + .result-subtext{
  max-width:60ch;
}
#mpFinalScreen .mp-final-leaderboard{
  margin-top:18px;
  display:grid;
  gap:12px;
}
#mpFinalScreen .mp-leader-row{
  position:relative;
  grid-template-columns:56px minmax(0,1fr) auto auto;
  gap:14px;
  align-items:center;
  padding:16px 18px;
  border-radius:20px;
  border:1px solid rgba(120,205,255,.12);
  background:linear-gradient(145deg, rgba(255,255,255,.034), rgba(255,255,255,.018));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
#mpFinalScreen .mp-leader-row.me{
  border-color:rgba(89,226,255,.28);
  background:linear-gradient(145deg, rgba(67,227,234,.08), rgba(255,255,255,.02));
  box-shadow:0 14px 30px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.03), 0 0 0 1px rgba(89,226,255,.04);
}
#mpFinalScreen .mp-leader-row.champion-row{
  border-color:rgba(255,220,95,.40);
  background:linear-gradient(90deg, rgba(255,220,95,.12), rgba(67,227,234,.04));
  box-shadow:0 16px 36px rgba(0,0,0,.16), 0 0 0 1px rgba(255,220,95,.05);
}
#mpFinalScreen .mp-leader-row.runnerup-row:not(.champion-row){
  border-color:rgba(195,211,226,.16);
  background:linear-gradient(145deg, rgba(194,210,225,.08), rgba(255,255,255,.02));
}
#mpFinalScreen .mp-rank{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:15px;
  background:linear-gradient(145deg, rgba(19,58,82,.95), rgba(10,28,44,.92));
  border:1px solid rgba(111,220,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  font-size:17px;
}
#mpFinalScreen .mp-leader-row.champion-row .mp-rank{
  background:linear-gradient(145deg, rgba(96,72,22,.98), rgba(37,29,14,.94));
  border-color:rgba(255,221,113,.34);
}
#mpFinalScreen .mp-player-copy{
  gap:12px;
}
#mpFinalScreen .mp-player-name{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:1.08rem;
  letter-spacing:-.01em;
}
#mpFinalScreen .mp-round-points{
  min-width:126px;
  text-align:right;
  font-size:1.18rem;
  color:#f6fbff;
}
#mpFinalScreen .mp-total-points{
  min-width:98px;
  text-align:right;
  padding:9px 12px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  color:#a7bbc9;
  font-size:12px;
}
#mpFinalScreen .mp-final-actions{
  margin-top:22px;
}
#mpFinalScreen .mp-final-actions .btn{
  min-width:190px;
  border-radius:16px;
}
#mpFinalStatus{
  margin-top:10px;
  color:#9ab3c3;
}

@media(max-width:820px){
  #mpFinalScreen .mp-champion-card{
    padding:16px 12px;
    border-radius:24px;
  }
  #mpFinalScreen .mp-champion-stage{
    margin:0 0 20px;
    padding:28px 16px 24px;
    border-radius:24px;
  }
  #mpFinalScreen .mp-champion-avatar{
    width:110px;
    height:110px;
    border-radius:32px;
  }
  #mpFinalScreen .mp-final-leaderboard{
    gap:10px;
  }
  #mpFinalScreen .mp-leader-row{
    grid-template-columns:48px minmax(0,1fr) auto;
    gap:10px;
    padding:13px 12px;
  }
  #mpFinalScreen .mp-total-points{
    grid-column:2 / -1;
    justify-self:end;
    margin-top:-2px;
  }
  #mpFinalScreen .mp-round-points{
    min-width:0;
    font-size:1.05rem;
  }
}

@media(max-width:540px){
  #mpFinalScreen .mp-champion-stage h2{
    font-size:2.6rem;
  }
  #mpFinalScreen .mp-champion-score span{
    font-size:2rem;
  }
  #mpFinalScreen .mp-final-title{
    font-size:2rem;
  }
  #mpFinalScreen .mp-leader-row{
    padding:12px 10px;
  }
  #mpFinalScreen .mp-rank{
    width:42px;
    height:42px;
    border-radius:13px;
    font-size:15px;
  }
  #mpFinalScreen .mp-round-points{
    font-size:1rem;
  }
}

/* =========================================================
   V22.17 — FULL PREMIUM POLISH PASS
   Unify multiplayer, duel, private lobby, rewards, profile,
   customize, and avatar store screens with a cleaner, more
   premium TommyTrace presentation.
   ========================================================= */

/* ---- Multiplayer entry / private room screen ---- */
#multiplayerScreen{
  background:
    radial-gradient(circle at 84% 10%, rgba(56,214,255,.12), transparent 22%),
    radial-gradient(circle at 14% 92%, rgba(255,212,98,.08), transparent 20%),
    linear-gradient(180deg, rgba(4,15,25,.96), rgba(6,21,34,.99));
}
#multiplayerScreen .multiplayer-shell{
  position:relative;
  overflow:hidden;
  width:min(760px, 100%);
  border:1px solid rgba(103,215,255,.16);
  background:
    radial-gradient(circle at 50% -8%, rgba(67,227,234,.14), transparent 28%),
    linear-gradient(180deg, rgba(8,28,46,.95), rgba(7,18,29,.98));
  box-shadow:0 28px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
}
#multiplayerScreen .multiplayer-shell::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 24%);
}
#multiplayerScreen .multiplayer-form{
  position:relative;
  z-index:1;
  margin-top:18px;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(107,214,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.018));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
#multiplayerScreen .multiplayer-form label > span,
#multiplayerScreen .multiplayer-identity-summary > span{
  color:#8fe8ff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
#multiplayerScreen .multiplayer-form input{
  margin-top:8px;
  min-height:50px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
#multiplayerScreen .multiplayer-form input:focus{
  border-color:rgba(95,227,255,.44);
  box-shadow:0 0 0 3px rgba(67,227,234,.10), inset 0 1px 0 rgba(255,255,255,.03);
}
#multiplayerScreen .multiplayer-identity-summary{
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(110,213,255,.12);
  background:linear-gradient(145deg, rgba(11,37,55,.88), rgba(9,24,39,.92));
}
#multiplayerScreen .multiplayer-identity-summary strong{
  margin-top:5px;
  display:block;
  font-size:1rem;
  color:#f6fbff;
}
#multiplayerScreen .multiplayer-divider{
  position:relative;
  margin:8px 0;
}
#multiplayerScreen .multiplayer-divider span{
  color:#8aa6b8;
  letter-spacing:.18em;
  font-size:10px;
  font-weight:900;
}
#multiplayerScreen #createRoomBtn,
#multiplayerScreen #joinRoomBtn{
  min-height:50px;
  border-radius:16px;
}
#multiplayerScreen .duel-entry-btn{
  min-height:58px;
  border-radius:18px;
  box-shadow:0 18px 34px rgba(42,116,255,.22), inset 0 1px 0 rgba(255,255,255,.14);
}
#multiplayerScreen .duel-entry-copy{
  color:#b3c7d7;
  font-size:.74rem;
  letter-spacing:.08em;
}

/* ---- Duel matchmaking ---- */
#duelScreen{
  background:
    radial-gradient(circle at 50% 8%, rgba(88,224,255,.12), transparent 24%),
    radial-gradient(circle at 50% 32%, rgba(123,95,255,.10), transparent 28%),
    linear-gradient(180deg, rgba(3,13,23,.97), rgba(7,20,33,.99));
}
#duelScreen .duel-shell{
  border:1px solid rgba(104,217,255,.16);
  background:
    radial-gradient(circle at 50% -8%, rgba(67,227,234,.14), transparent 26%),
    linear-gradient(180deg, rgba(8,29,48,.95), rgba(6,18,32,.98));
  box-shadow:0 28px 72px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
}
#duelScreen .duel-player-card{
  border-color:rgba(255,255,255,.10);
  box-shadow:0 14px 32px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
}
#duelScreen .duel-player-card.me{
  border-color:rgba(67,227,234,.28);
  background:linear-gradient(180deg, rgba(17,39,62,.94), rgba(8,16,31,.92));
}
#duelScreen .duel-player-card.opponent:not(.searching){
  border-color:rgba(255,191,83,.28);
  background:linear-gradient(180deg, rgba(44,33,19,.84), rgba(16,17,28,.92));
}
#duelScreen .duel-avatar{
  box-shadow:0 12px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
}
#duelScreen .duel-vs{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  margin-inline:auto;
  border-radius:20px;
  border:1px solid rgba(106,216,255,.20);
  background:linear-gradient(145deg, rgba(14,37,58,.92), rgba(9,22,36,.92));
  box-shadow:0 12px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
}
#duelScreen .duel-search-timer{
  padding:10px 14px;
  display:inline-flex;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
#duelScreen .duel-long-wait{
  border-color:rgba(255,199,86,.18);
  background:linear-gradient(180deg, rgba(255,193,64,.05), rgba(255,255,255,.015));
}
#duelScreen .duel-prestart-actions .btn{
  min-width:170px;
  border-radius:16px;
}

/* ---- Private lobby ---- */
#lobbyScreen{
  background:
    radial-gradient(circle at 86% 10%, rgba(59,217,255,.10), transparent 22%),
    radial-gradient(circle at 10% 88%, rgba(255,214,97,.07), transparent 20%),
    linear-gradient(180deg, rgba(4,15,25,.96), rgba(6,21,34,.99));
}
#lobbyScreen .lobby-shell{
  position:relative;
  overflow:hidden;
  width:min(980px,100%);
  border:1px solid rgba(108,215,255,.16);
  background:
    radial-gradient(circle at 50% -12%, rgba(67,227,234,.13), transparent 28%),
    linear-gradient(180deg, rgba(8,29,47,.95), rgba(6,17,29,.98));
  box-shadow:0 28px 72px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
}
#lobbyScreen .lobby-shell::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 24%);
}
#lobbyScreen .lobby-room-code-row h2{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
#lobbyScreen #lobbyRoomCode{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:98px;
  padding:8px 14px;
  border-radius:14px;
  border:1px solid rgba(112,214,255,.18);
  background:linear-gradient(145deg, rgba(12,41,62,.92), rgba(8,22,38,.90));
  color:#8feaff;
  letter-spacing:.14em;
}
#lobbyScreen .lobby-meta{
  gap:14px;
}
#lobbyScreen .lobby-meta > div{
  padding:16px 18px;
  border-radius:20px;
  border:1px solid rgba(112,214,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
#lobbyScreen .lobby-player-card{
  margin-top:18px;
  padding:18px;
  border-radius:24px;
  border:1px solid rgba(110,213,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.018));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
#lobbyScreen .lobby-player-heading h3{
  font-size:1.9rem;
  letter-spacing:-.04em;
}
#lobbyScreen .lobby-player{
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(145deg, rgba(255,255,255,.03), rgba(255,255,255,.018));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
#lobbyScreen .lobby-player-name{
  font-size:1rem;
}
#lobbyScreen .lobby-ready,
#lobbyScreen .lobby-not-ready{
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  font-size:11px;
  letter-spacing:.12em;
}
#lobbyScreen .lobby-ready{
  border-color:rgba(114,242,209,.22);
  background:rgba(114,242,209,.06);
}
#lobbyScreen .lobby-not-ready{
  border-color:rgba(255,255,255,.08);
}
#lobbyScreen #readyBtn,
#lobbyScreen #leaveRoomBtn,
#lobbyScreen #startMultiplayerBtn,
#lobbyScreen #copyRoomCodeBtn{
  border-radius:16px;
}
#lobbyScreen #startMultiplayerBtn{
  min-width:240px;
  margin-top:18px;
  box-shadow:0 16px 34px rgba(45,214,255,.20);
}
#lobbyScreen #lobbyStatus{
  margin-top:16px;
  color:#9db4c4;
}

/* ---- Reward overlay ---- */
#progressionRewardModal .progression-reward-card{
  border-radius:28px;
  border:1px solid rgba(255,214,90,.28);
  background:
    radial-gradient(circle at 50% -10%, rgba(255,214,90,.20), transparent 36%),
    radial-gradient(circle at 12% 92%, rgba(67,227,234,.08), transparent 18%),
    linear-gradient(180deg, rgba(12,26,37,.97), rgba(8,15,24,.99));
  box-shadow:0 30px 78px rgba(0,0,0,.40), 0 0 50px rgba(255,204,58,.12), inset 0 1px 0 rgba(255,255,255,.04);
}
#progressionRewardModal .reward-placement{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#d8e7f3;
}
#progressionRewardModal .reward-items{
  gap:14px;
  margin-top:4px;
}
#progressionRewardModal .reward-item{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
#progressionRewardModal .reward-level{
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
#progressionRewardModal #rewardContinueBtn{
  min-width:220px;
  min-height:52px;
  border-radius:18px;
  margin-top:4px;
}

/* ---- Profile / account modal ---- */
#accountModal .account-card{
  border-radius:28px;
  border:1px solid rgba(107,214,255,.16);
  background:
    radial-gradient(circle at 88% 10%, rgba(67,227,234,.12), transparent 18%),
    linear-gradient(180deg, rgba(8,28,46,.96), rgba(6,17,29,.99));
  box-shadow:0 28px 72px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
}
#accountModal .account-profile-head{
  padding:0 42px 18px 0;
  margin-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
#accountModal .profile-stats-grid > div,
#accountModal .profile-best-grid > div,
#accountModal .social-auth-panel,
#accountModal .signed-in-panel,
#accountModal .profile-history-block{
  border-color:rgba(109,214,255,.12);
  background:linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
#accountModal .profile-xp-track{
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
}
#accountModal .profile-history-block{
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.06);
}
#accountModal .profile-match-history{
  padding-right:6px;
}
#accountModal .social-btn{
  min-height:46px;
  border-radius:14px;
}
#accountModal .profile-name-row input{
  min-height:48px;
  border-radius:15px;
  border-color:rgba(255,255,255,.08);
}
#accountModal .profile-actions-row .btn{
  border-radius:14px;
}

/* ---- Store / customize consistency ---- */
#customizeModal .customize-card,
#shopModal .shop-card,
#avatarPickerModal .avatar-picker-card{
  border-radius:28px;
}
#customizeModal .customize-preview-panel,
#customizeModal .wardrobe-panel,
#shopModal .shop-showroom,
#avatarPickerModal .avatar-choice-card{
  box-shadow:0 16px 36px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03);
}
#customizeModal .showroom-shell,
#shopModal .shop-showroom{
  position:relative;
}
#customizeModal .showroom-shell::after,
#shopModal .shop-showroom::after{
  content:'';
  position:absolute;
  left:12%;
  right:12%;
  bottom:12px;
  height:28px;
  border-radius:50%;
  background:radial-gradient(ellipse, rgba(81,230,255,.34), rgba(27,128,206,.10) 42%, rgba(5,14,22,0) 72%);
  pointer-events:none;
  z-index:1;
}
#customizeModal .wardrobe-slot,
#shopModal .skin-card,
#shopModal .cosmetic-card,
#avatarPickerModal .avatar-choice-card{
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
#customizeModal .wardrobe-slot:hover,
#shopModal .skin-card:hover,
#shopModal .cosmetic-card:hover,
#avatarPickerModal .avatar-choice-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(0,0,0,.20), 0 0 0 1px rgba(96,218,255,.06);
}
#shopModal .shop-header,
#customizeModal .customize-preview-panel h3{
  position:relative;
  z-index:1;
}
#shopModal .shop-economy-note{
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
#shopModal .shop-tabs{
  border-color:rgba(255,255,255,.07);
  background:rgba(255,255,255,.03);
}
#shopModal .shop-tab{
  min-height:44px;
}
#shopModal .shop-item-card button,
#shopModal .skin-card button,
#shopModal .cosmetic-card button,
#customizeModal .wardrobe-slot,
#avatarPickerModal .avatar-choice-card{
  border-radius:16px;
}

/* ---- Mobile tightening for the polished screens ---- */
@media(max-width:820px){
  #multiplayerScreen .multiplayer-shell,
  #duelScreen .duel-shell,
  #lobbyScreen .lobby-shell,
  #accountModal .account-card,
  #customizeModal .customize-card,
  #shopModal .shop-card,
  #avatarPickerModal .avatar-picker-card{
    border-radius:24px;
  }

  #multiplayerScreen .multiplayer-form,
  #lobbyScreen .lobby-player-card{
    padding:14px;
    border-radius:20px;
  }

  #lobbyScreen .lobby-header{
    gap:12px;
  }
  #lobbyScreen #startMultiplayerBtn,
  #progressionRewardModal #rewardContinueBtn,
  #duelScreen .duel-prestart-actions .btn{
    width:100%;
    min-width:0;
  }
  #duelScreen .duel-vs{
    width:56px;
    height:56px;
    border-radius:18px;
    font-size:1.05rem;
  }
  #accountModal .account-profile-head{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    padding-right:34px;
  }
  #accountModal .profile-stats-grid,
  #accountModal .profile-best-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:540px){
  #multiplayerScreen .multiplayer-shell,
  #duelScreen .duel-shell,
  #lobbyScreen .lobby-shell,
  #progressionRewardModal .progression-reward-card,
  #accountModal .account-card{
    padding:14px 10px;
  }
  #lobbyScreen .lobby-meta{
    grid-template-columns:1fr;
    gap:10px;
  }
  #lobbyScreen .lobby-player{
    padding:12px;
  }
  #progressionRewardModal .reward-items{
    grid-template-columns:1fr;
  }
  #accountModal .profile-stats-grid,
  #accountModal .profile-best-grid,
  #accountModal .social-buttons{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   V22.18 — FINAL QA HARDENING PASS
   Catch small layout bugs: horizontal overflow, long-name
   truncation, modal/action consistency, and mobile-safe rows.
   ========================================================= */

/* Prevent accidental horizontal bleed on polished screens */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
.screen,
.modal,
.glass-shell,
.modal-card,
.result-shell,
.final-card,
.multiplayer-shell,
.lobby-shell,
.duel-shell,
.account-card,
.shop-card,
.customize-card,
.avatar-picker-card {
  max-width: 100%;
}

/* Safer flex/grid children for truncation */
.lobby-player-main,
.mp-player-copy,
.duel-player-name-row,
.account-profile-head,
.profile-name-row,
.shop-header,
.result-header,
.lobby-room-code-row,
.multiplayer-identity-summary,
.v12-top-actions,
.v12-account,
.v12-brand,
.tt-featured-copy,
.tt-featured-skins,
.tt-featured-list,
.social-buttons,
.final-actions,
.mp-result-actions,
.mp-final-actions,
.profile-actions-row,
.customize-preview-actions {
  min-width: 0;
}

/* Long names should not break layouts */
.lobby-player-name,
.mp-player-name,
#duelMyName,
#duelOpponentName,
#multiplayerIdentityName,
#profileDisplayName,
#accountName,
#mpChampionName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Long location text should wrap nicely */
#mpResultLocation,
#actualText,
.result-subtext,
#finalMessage,
#rewardEarnedText {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Numeric areas look cleaner and avoid jitter */
.score-badge strong,
#mpChampionScore,
.mp-round-points,
.mp-total-points,
#roundScore,
#finalScore,
#distanceText,
#totalScoreText,
#duelRatingBefore,
#duelRatingAfter,
#duelRatingDelta,
#rewardXp,
#rewardCoins {
  font-variant-numeric: tabular-nums;
}

/* Utility button consistency */
.btn,
.btn-primary,
.btn-secondary,
.btn-danger-soft,
.btn-copy-room,
.shop-tab {
  touch-action: manipulation;
}

/* Action rows wrap more gracefully */
.final-actions,
.mp-result-actions,
.mp-final-actions,
.profile-actions-row,
.customize-preview-actions,
.duel-prestart-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Map / result containers stay clipped */
.result-map,
#resultMap,
#mpResultMap,
.map,
.large-map,
.cinematic-map-wrap {
  max-width: 100%;
  overflow: hidden;
}

/* Mobile-specific last-mile fixes */
@media(max-width:820px){
  .screen,
  .modal {
    overflow-x: hidden;
  }

  .result-header,
  .shop-header,
  .account-profile-head,
  .lobby-room-code-row {
    flex-wrap: wrap;
  }

  .shop-header,
  .result-header,
  .lobby-header {
    gap: 12px;
  }

  .lobby-room-code-row h2,
  .result-header h2,
  .final-card h2,
  .modal-card h2,
  .mp-final-title,
  #mpResultTitle {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .social-buttons,
  .profile-stats-grid,
  .profile-best-grid,
  .result-grid {
    min-width: 0;
  }

  .multiplayer-form,
  .lobby-player-card,
  .mp-leaderboard-wrap,
  .progression-reward-card,
  .customize-preview-panel,
  .wardrobe-panel,
  .shop-economy-note {
    overflow: hidden;
  }

  .mp-leader-row,
  .lobby-player,
  .profile-history-row,
  .reward-item,
  .skin-card,
  .cosmetic-card,
  .avatar-choice-card {
    min-width: 0;
  }

  .mp-round-points,
  .mp-total-points {
    white-space: nowrap;
  }

  .profile-name-row,
  .duel-prestart-actions,
  .final-actions,
  .mp-result-actions,
  .mp-final-actions,
  .profile-actions-row,
  .customize-preview-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .profile-name-row .btn,
  .duel-prestart-actions .btn,
  .final-actions .btn,
  .mp-result-actions .btn,
  .mp-final-actions .btn,
  .profile-actions-row .btn,
  .customize-preview-actions .btn,
  .shop-header .shop-wallet {
    width: 100%;
    min-width: 0;
  }

  .modal-close,
  .multiplayer-back {
    z-index: 20;
  }
}

@media(max-width:540px){
  .score-badge,
  .shop-wallet,
  .duel-rating-result {
    width: 100%;
    min-width: 0;
  }

  .profile-name-row input,
  .multiplayer-form input,
  .room-code-input {
    width: 100%;
    min-width: 0;
  }

  .lobby-player-list,
  .profile-match-history {
    padding-right: 0;
  }
}

/* =========================================================
   V22.19 — CHAMPION SCREEN FINAL ROUND ANSWER
   Show the last round's actual location on the winner page.
   ========================================================= */
#mpFinalScreen .mp-final-location-reveal{
  margin:14px 0 18px;
  padding:16px 18px;
  border-radius:20px;
  border:1px solid rgba(117,216,255,.14);
  background:
    radial-gradient(circle at 0% 50%, rgba(67,227,234,.10), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:0 14px 30px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.03);
}
#mpFinalScreen .mp-final-location-reveal .eyebrow{
  color:#8fe8ff;
  margin-bottom:8px;
}
#mpFinalScreen .mp-final-location-reveal strong{
  display:block;
  font-size:1.08rem;
  line-height:1.3;
  color:#f7fbff;
  letter-spacing:-.01em;
}
#mpFinalScreen .mp-final-location-reveal span{
  display:block;
  margin-top:6px;
  color:#9cb4c4;
  font-size:.84rem;
  line-height:1.45;
}
@media(max-width:540px){
  #mpFinalScreen .mp-final-location-reveal{
    padding:14px;
    border-radius:18px;
  }
  #mpFinalScreen .mp-final-location-reveal strong{
    font-size:1rem;
  }
}

/* =========================================================
   V22.20 — ENHANCED FINAL ANSWER CARD
   Premium location reveal with pin accent and mini map.
   ========================================================= */
#mpFinalScreen .mp-final-location-reveal{
  display:grid;
  grid-template-columns:minmax(0,1fr) 190px;
  align-items:stretch;
  gap:14px;
}
#mpFinalScreen .mp-final-location-copy{
  min-width:0;
  display:grid;
  align-content:start;
}
#mpFinalScreen .mp-final-location-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
}
#mpFinalScreen .mp-final-location-pin{
  width:40px;
  height:40px;
  min-width:40px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid rgba(117,216,255,.16);
  background:linear-gradient(145deg, rgba(66,227,234,.14), rgba(255,255,255,.03));
  box-shadow:0 10px 20px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.04);
  font-size:18px;
}
#mpFinalScreen .mp-final-location-head > div{
  min-width:0;
}
#mpFinalScreen .mp-final-location-reveal strong{
  overflow-wrap:anywhere;
  word-break:break-word;
}
#mpFinalScreen .mp-final-location-map{
  min-height:122px;
  border-radius:18px;
  border:1px solid rgba(116,216,255,.14);
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(67,227,234,.12), transparent 34%),
    linear-gradient(145deg, rgba(10,33,49,.92), rgba(6,18,29,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
@media(max-width:820px){
  #mpFinalScreen .mp-final-location-reveal{
    grid-template-columns:1fr;
  }
  #mpFinalScreen .mp-final-location-map{
    min-height:150px;
  }
}
@media(max-width:540px){
  #mpFinalScreen .mp-final-location-head{
    gap:10px;
  }
  #mpFinalScreen .mp-final-location-pin{
    width:36px;
    height:36px;
    min-width:36px;
    border-radius:12px;
    font-size:16px;
  }
  #mpFinalScreen .mp-final-location-map{
    min-height:138px;
    border-radius:16px;
  }
}


/* =========================================================
   V22.21 — PREMIUM FINAL ANSWER REVEAL PLUS
   Add actual-location chip, structured city/region/country
   line, and a more premium mini-map treatment.
   ========================================================= */
#mpFinalScreen .mp-final-location-chip,
#mpFinalScreen .mp-final-location-map-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  min-height:28px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(121,228,255,.18);
  background:linear-gradient(145deg, rgba(67,227,234,.12), rgba(255,255,255,.03));
  color:#9feaff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  box-shadow:0 8px 20px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.04);
}
#mpFinalScreen .mp-final-location-chip{ margin:12px 0 10px; }
#mpFinalScreen .mp-final-location-parts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}
#mpFinalScreen .mp-final-location-parts span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  color:#dfeaf2;
  font-size:.78rem;
  line-height:1;
}
#mpFinalScreen .mp-final-location-parts span:empty{ display:none; }
#mpFinalScreen .mp-final-location-map-wrap{
  position:relative;
  min-width:0;
}
#mpFinalScreen .mp-final-location-map-chip{
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
  pointer-events:none;
}
#mpFinalScreen .mp-final-location-map{
  box-shadow:0 12px 28px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.03);
}
#mpFinalScreen .mp-final-location-map::after{
  content:'';
  position:absolute;
  inset:auto 14px 12px 14px;
  height:24px;
  border-radius:999px;
  background:radial-gradient(ellipse, rgba(67,227,234,.18), rgba(67,227,234,0) 72%);
  pointer-events:none;
}
@media(max-width:540px){
  #mpFinalScreen .mp-final-location-parts{
    gap:6px;
  }
  #mpFinalScreen .mp-final-location-parts span{
    font-size:.72rem;
    padding:0 10px;
  }
}

/* =========================================================
   V22.22 — FINAL CELEBRATION MICRO-POLISH
   Tighter confetti rhythm and a little more depth on the
   champion reveal without making it visually noisy.
   ========================================================= */
#mpFinalScreen .mp-confetti-piece{
  box-shadow:0 0 10px rgba(255,255,255,.08);
}
#mpFinalScreen .mp-confetti-piece.soft-burst{
  opacity:.78;
  filter:saturate(.9) brightness(1.05);
}
#mpFinalScreen .mp-champion-crown{
  will-change:transform,filter;
}
#mpFinalScreen .mp-champion-stage{
  transform-origin:50% 16%;
}
#mpFinalScreen .mp-champion-badge{
  animation:ttChampionBadgeIn .62s .28s cubic-bezier(.2,.85,.25,1) both;
}
#mpFinalScreen .mp-final-location-map-chip{
  box-shadow:0 8px 22px rgba(0,0,0,.18),0 0 18px rgba(67,227,234,.08);
}
@keyframes ttChampionBadgeIn{
  from{opacity:0;transform:translateY(7px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@media(prefers-reduced-motion:reduce){
  #mpFinalScreen .mp-champion-badge{animation:none!important}
}

/* =========================================================
   V22.22 — DESKTOP GAMEPLAY HUD REDESIGN
   Premium PC layout: Street View first, compact HUD, cleaner
   floating map card, integrated guess CTA, smaller clue panel.
   Mobile layout remains unchanged via min-width breakpoint.
   ========================================================= */
@media (min-width: 821px) {
  #gameScreen {
    padding: 8px;
    background: #030a11;
  }

  #gameScreen .viewer-frame {
    border-radius: 24px;
    border-color: rgba(125, 214, 255, .12);
    box-shadow: 0 20px 50px rgba(0,0,0,.28);
  }

  #gameScreen .viewer-frame::before {
    background:
      linear-gradient(180deg, rgba(2,8,14,.42), transparent 14%, transparent 74%, rgba(2,8,14,.36));
  }

  /* Thin segmented top HUD instead of one oversized dashboard bar. */
  #gameScreen .hud-bar {
    top: 12px;
    left: 14px;
    right: 14px;
    min-height: 58px;
    padding: 0;
    gap: 12px;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  #gameScreen .hud-brand,
  #gameScreen .hud-center,
  #gameScreen .hud-metrics {
    min-height: 58px;
    border-radius: 18px;
    border: 1px solid rgba(126,214,255,.14);
    background: rgba(4,19,31,.78);
    box-shadow: 0 12px 32px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.035);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  #gameScreen .hud-brand {
    padding: 7px 13px 7px 8px;
    gap: 9px;
  }
  #gameScreen .brand-home-btn {
    width: 46px;
    height: 44px;
    min-width: 46px;
    border-radius: 14px;
    padding: 0;
    border-color: rgba(255,255,255,.06);
    background: rgba(255,255,255,.025);
  }
  #gameScreen .brand-logo-hud {
    width: 39px;
    height: 39px;
    object-fit: contain;
  }
  #gameScreen .hud-brand-copy strong {
    font-size: 16px;
    letter-spacing: -.03em;
  }
  #gameScreen .hud-brand-copy span {
    font-size: 6.8px;
    letter-spacing: .18em;
    opacity: .72;
  }

  #gameScreen .hud-center {
    justify-self: center;
    width: max-content;
    padding: 7px;
    align-items: center;
    gap: 8px;
  }
  #gameScreen .mode-pill {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    padding: 0 15px;
    border-radius: 13px;
    border-color: rgba(72,220,234,.22);
    background: linear-gradient(145deg, rgba(67,227,234,.10), rgba(255,255,255,.025));
    font-size: 11px;
    letter-spacing: .08em;
    white-space: nowrap;
  }
  #gameScreen .leave-game-btn {
    min-height: 42px;
    padding: 0 13px;
    border-radius: 13px;
    font-size: 10px;
    letter-spacing: .08em;
  }

  #gameScreen .hud-metrics {
    padding: 7px;
    gap: 6px;
  }
  #gameScreen .metric-card {
    min-width: 92px;
    min-height: 42px;
    padding: 6px 10px;
    border-radius: 13px;
    border-color: rgba(255,255,255,.06);
    background: rgba(255,255,255,.032);
  }
  #gameScreen .metric-card span {
    font-size: 7px;
    letter-spacing: .14em;
    opacity: .74;
  }
  #gameScreen .metric-card strong {
    margin-top: 2px;
    font-size: 15px;
  }
  #gameScreen .metric-card-time {
    min-width: 104px;
    padding-right: 36px;
  }
  #gameScreen .timer-ring {
    width: 24px;
    height: 24px;
    right: 8px;
  }
  #gameScreen .timer-ring::after { inset: 3px; }

  /* Minimal clue card — enough guidance without covering scenery. */
  #gameScreen .clue-panel {
    left: 18px;
    bottom: 18px;
    width: min(360px, calc(100% - 420px));
    min-height: 70px;
    padding: 12px 14px;
    gap: 12px;
    border-radius: 18px;
    border-color: rgba(105,216,255,.12);
    background: rgba(5,22,35,.78);
    box-shadow: 0 12px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  #gameScreen .clue-panel .eyebrow {
    font-size: 7px;
    letter-spacing: .18em;
  }
  #gameScreen .clue-text {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #gameScreen .clue-hint-badge {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 14px;
  }
  #gameScreen .clue-hint-badge span { font-size: 15px; }
  #gameScreen .clue-hint-badge strong { font-size: 8px; letter-spacing: .11em; }

  /* Hide decorative footer words on desktop gameplay to reduce clutter. */
  #gameScreen .utility-footer {
    display: none !important;
  }

  /* Floating map card with CTA visually integrated into one unit. */
  #gameScreen .map-dock {
    right: 18px;
    bottom: 18px;
    width: 330px;
    padding: 8px;
    border-radius: 22px;
    border: 1px solid rgba(105,216,255,.14);
    background: rgba(4,20,32,.84);
    box-shadow: 0 18px 42px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.035);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  #gameScreen .mini-map-card {
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  #gameScreen .mini-map-head {
    margin: 0;
    padding: 6px 6px 8px;
  }
  #gameScreen .mini-map-head .eyebrow {
    font-size: 7px;
    letter-spacing: .18em;
  }
  #gameScreen .mini-map-head strong {
    margin-top: 2px;
    font-size: 14px;
  }
  #gameScreen .mini-map-actions { gap: 5px; }
  #gameScreen .hud-icon-btn.subtle {
    width: 31px;
    height: 31px;
    border-radius: 10px;
    font-size: 13px;
  }
  #gameScreen .map {
    height: 188px;
    border-radius: 15px;
    border-color: rgba(255,255,255,.07);
  }
  #gameScreen .map-foot {
    margin: 0;
    padding: 8px 6px 3px;
  }
  #gameScreen .guess-status {
    min-height: 18px;
    font-size: 10px;
    line-height: 1.3;
  }
  #gameScreen .guess-cta {
    margin-top: 7px;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 15px;
    font-size: 12px;
    letter-spacing: .16em;
    box-shadow: 0 12px 26px rgba(67,227,234,.18), inset 0 1px 0 rgba(255,255,255,.18);
  }
  #gameScreen .guess-cta-icon { font-size: 16px; }

  /* Keep map/card proportions comfortable on common laptop widths. */
  @media (max-width: 1280px) {
    #gameScreen .hud-brand-copy span { display: none; }
    #gameScreen .hud-brand-copy strong { font-size: 15px; }
    #gameScreen .metric-card { min-width: 82px; }
    #gameScreen .map-dock { width: 304px; }
    #gameScreen .map { height: 170px; }
    #gameScreen .clue-panel { width: min(330px, calc(100% - 360px)); }
  }
}


/* =========================================================
   V22.34 — DUEL LOGIN REQUIRED POPUP
   Professional gate for guest users entering ranked duel.
   ========================================================= */
.duel-login-required-modal{
  z-index:1205;
}
.duel-login-required-card{
  width:min(520px, 94vw);
  padding:24px 24px 22px;
  border-radius:28px;
  border:1px solid rgba(111,214,255,.16);
  background:
    radial-gradient(circle at 82% 14%, rgba(67,227,234,.12), transparent 20%),
    radial-gradient(circle at 10% 100%, rgba(255,214,97,.08), transparent 18%),
    linear-gradient(180deg, rgba(8,28,46,.98), rgba(6,17,29,.995));
  box-shadow:0 30px 76px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.04);
}
.duel-login-required-hero{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding-right:36px;
}
.duel-login-required-icon{
  width:56px;
  height:56px;
  min-width:56px;
  display:grid;
  place-items:center;
  border-radius:18px;
  border:1px solid rgba(117,216,255,.16);
  background:linear-gradient(145deg, rgba(67,227,234,.12), rgba(255,255,255,.04));
  box-shadow:0 12px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
  font-size:1.45rem;
}
.duel-login-required-hero h2{
  margin:6px 0 8px;
  font-size:2rem;
  letter-spacing:-.04em;
}
.duel-login-required-hero p{
  margin:0;
  color:#a8bfd0;
  font-size:.95rem;
  line-height:1.6;
}
.duel-login-required-points{
  margin-top:18px;
  padding:16px 18px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.duel-login-required-points strong{
  display:block;
  color:#f7fbff;
  font-size:.9rem;
  margin-bottom:6px;
}
.duel-login-required-points span{
  color:#9cb4c4;
  font-size:.86rem;
  line-height:1.5;
}
.duel-login-required-actions{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.duel-login-required-actions .btn{
  min-width:170px;
  min-height:50px;
  border-radius:16px;
}
@media(max-width:540px){
  .duel-login-required-card{
    padding:18px 16px 16px;
    border-radius:24px;
  }
  .duel-login-required-hero{
    gap:12px;
    padding-right:28px;
  }
  .duel-login-required-icon{
    width:48px;
    height:48px;
    min-width:48px;
    border-radius:16px;
    font-size:1.2rem;
  }
  .duel-login-required-hero h2{
    font-size:1.5rem;
  }
  .duel-login-required-actions .btn{
    width:100%;
    min-width:0;
  }
}

/* =========================================================
   V22.35 — GUEST DUEL LOCK + AUTO COUNTRY UX
   ========================================================= */
#menuScreen #menuDuelBtn.login-required{
  border-color:rgba(255,194,92,.30)!important;
  background-image:linear-gradient(145deg,rgba(21,39,59,.90),rgba(30,26,36,.94))!important;
  box-shadow:inset 0 0 0 1px rgba(255,194,92,.04),0 12px 28px rgba(0,0,0,.18)!important;
}
#menuScreen #menuDuelBtn.login-required .tt-mode-icon{
  filter:saturate(.78);
}
#menuScreen #menuDuelBtn.login-required small{
  color:#f1c878!important;
}
#menuScreen #menuDuelBtn.login-required > b{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:12px;
  border:1px solid rgba(255,194,92,.18);
  background:rgba(255,194,92,.06);
  font-size:14px;
}
#multiplayerScreen #duelBtn.login-required{
  position:relative;
  background:linear-gradient(135deg,#17344c,#263048 62%,#49333b)!important;
  border:1px solid rgba(255,194,92,.24)!important;
  color:#f5f8fb!important;
  box-shadow:0 14px 28px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
#multiplayerScreen .duel-entry-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
#multiplayerScreen .duel-entry-gate-text{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 9px;
  border-radius:999px;
  border:1px solid rgba(255,207,111,.22);
  background:rgba(255,194,92,.08);
  color:#ffd987;
  font-size:9px;
  font-weight:900;
  letter-spacing:.13em;
}
#multiplayerScreen .duel-entry-gate-text.hidden{display:none!important}
#multiplayerScreen #duelBtn.login-required .duel-entry-lock::after{
  content:'🔒';
  margin-left:4px;
  font-size:.78em;
}
.profile-country-edit .profile-name-rules{
  line-height:1.45;
}


/* =========================================================
   V22.35 — PROFILE PRIORITY ORDER + DUEL NAME HANDOFF
   Put identity controls first and stats/history below.
   ========================================================= */
#accountModal .profile-edit-primary{
  margin-top:6px;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(105,216,255,.14);
  background:
    radial-gradient(circle at 100% 0%, rgba(67,227,234,.08), transparent 24%),
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.022));
  box-shadow:0 14px 32px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.03);
}
#accountModal .profile-edit-primary .profile-name-edit{
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(89,226,255,.16);
  background:rgba(67,227,234,.035);
}
#accountModal .profile-edit-primary .profile-country-edit{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.06);
}
#accountModal .profile-stats-section{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.07);
}
#accountModal .profile-stats-section>.eyebrow{
  margin-bottom:10px;
  color:#8fe8ff;
}
#accountModal .profile-history-bottom{
  margin-top:20px;
}
#accountModal #profileNameInput.needs-attention{
  border-color:rgba(89,226,255,.58)!important;
  box-shadow:0 0 0 3px rgba(67,227,234,.12), 0 0 24px rgba(67,227,234,.08)!important;
}
#accountModal #profileNameInput:focus{
  border-color:rgba(89,226,255,.62)!important;
  box-shadow:0 0 0 3px rgba(67,227,234,.11)!important;
}
@media(max-width:640px){
  #accountModal .profile-edit-primary{padding:14px;border-radius:20px}
  #accountModal .profile-edit-primary .profile-name-edit{padding:12px}
}

/* =========================================================
   V22.40 — GENERATED DUEL MATCH-FOUND ARENA
   Uses the generated TommyTrace arena art as the desktop visual
   layer while all player identity/rating data remains live HTML.
   Mobile keeps the existing responsive DUEL layout.
   ========================================================= */
@media (min-width: 821px) {
  #duelScreen.duel-match-found-mode {
    padding: 14px;
    background:
      radial-gradient(circle at 50% 12%, rgba(33,155,255,.12), transparent 28%),
      #020b15;
    overflow: hidden;
  }

  #duelScreen.duel-match-found-mode .duel-shell.duel-match-found-mode {
    position: relative;
    width: min(1536px, calc(100vw - 28px));
    max-width: 1536px;
    aspect-ratio: 3 / 2;
    min-height: 0;
    max-height: calc(100dvh - 28px);
    padding: 0;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(82,190,255,.18);
    background: #03101e url('assets/duel-match/finding-opponent-arena.webp') center / 100% 100% no-repeat;
    box-shadow: 0 28px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
    isolation: isolate;
  }

  #duelScreen.duel-match-found-mode .duel-shell.duel-match-found-mode::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(0,9,20,.05), transparent 22%, transparent 78%, rgba(0,8,18,.08)),
      radial-gradient(circle at 50% 55%, transparent 48%, rgba(0,7,15,.12) 100%);
    animation: none;
  }

  /* The generated artwork already contains the cinematic header. */
  #duelScreen.duel-match-found-mode .duel-shell > .eyebrow,
  #duelScreen.duel-match-found-mode #duelTitle,
  #duelScreen.duel-match-found-mode #duelSubtitle,
  #duelScreen.duel-match-found-mode #duelSearchTimer,
  #duelScreen.duel-match-found-mode .duel-vs {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  #duelScreen.duel-match-found-mode .duel-versus {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    max-width: none;
    margin: 0;
    pointer-events: none;
  }

  #duelScreen.duel-match-found-mode .duel-player-card {
    position: absolute;
    top: 29.4%;
    width: 33.1%;
    height: 32.3%;
    min-height: 0;
    padding: 3.3% 3% 2.3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(5px, .65vw, 10px);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: auto;
    opacity: 1;
    transform: none;
    animation: duelGeneratedCardIn .55s cubic-bezier(.2,.8,.2,1) both;
  }

  #duelScreen.duel-match-found-mode .duel-player-card.me {
    left: 6.45%;
    animation-delay: .05s;
  }

  #duelScreen.duel-match-found-mode .duel-player-card.opponent {
    right: 6.45%;
    animation-delay: .12s;
  }

  #duelScreen.duel-match-found-mode .duel-player-card.opponent.searching {
    opacity: .55;
  }

  #duelScreen.duel-match-found-mode .duel-avatar {
    width: clamp(94px, 9.2vw, 142px);
    height: clamp(94px, 9.2vw, 142px);
    flex: 0 0 auto;
    margin-top: -.7%;
    border-radius: clamp(20px, 2vw, 30px);
    border: 1px solid rgba(255,255,255,.18);
    background: radial-gradient(circle at 50% 26%, rgba(95,214,255,.18), rgba(5,18,31,.72));
    box-shadow: 0 14px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
  }

  #duelScreen.duel-match-found-mode .duel-player-card.opponent .duel-avatar {
    border-color: rgba(255,199,78,.28);
    background: radial-gradient(circle at 50% 26%, rgba(255,191,70,.14), rgba(26,18,8,.72));
  }

  #duelScreen.duel-match-found-mode .duel-player-name-row {
    min-width: 0;
    max-width: 92%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(7px, .7vw, 11px);
    margin-top: 1%;
  }

  #duelScreen.duel-match-found-mode .duel-player-flag {
    width: clamp(28px, 2.7vw, 42px) !important;
    height: clamp(19px, 1.8vw, 28px) !important;
    flex-basis: auto !important;
    border-radius: 5px;
    box-shadow: 0 3px 9px rgba(0,0,0,.28);
  }

  #duelScreen.duel-match-found-mode .duel-player-name-row strong {
    max-width: min(21vw, 260px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #f7fbff;
    font-size: clamp(16px, 1.55vw, 25px) !important;
    line-height: 1.1;
    letter-spacing: -.02em;
    text-shadow: 0 5px 14px rgba(0,0,0,.30);
  }

  #duelScreen.duel-match-found-mode .duel-player-card > span {
    color: #81d9ff;
    font-size: clamp(9px, .82vw, 13px) !important;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-shadow: 0 3px 10px rgba(0,0,0,.28);
  }

  #duelScreen.duel-match-found-mode .duel-player-card.opponent > span {
    color: #ffc661;
  }

  /* Countdown lives over the generated GO graphic. When GO arrives, the
     HTML overlay disappears and reveals the generated GO art underneath. */
  #duelScreen.duel-match-found-mode .duel-countdown {
    position: absolute;
    z-index: 8;
    left: 50%;
    top: 68.7%;
    width: clamp(150px, 19vw, 290px);
    min-height: clamp(110px, 11vw, 168px);
    margin: 0;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(2,23,45,.94) 0 39%, rgba(2,22,42,.72) 52%, rgba(2,15,29,0) 72%);
    color: #fff;
    font-size: clamp(68px, 8vw, 128px);
    font-weight: 1000;
    line-height: 1;
    text-shadow: 0 0 18px #59e7ff, 0 0 46px rgba(34,170,255,.65);
    pointer-events: none;
  }

  #duelScreen.duel-match-found-mode .duel-countdown.is-go {
    opacity: 0;
    visibility: hidden;
  }

  #duelScreen.duel-match-found-mode .duel-countdown.hidden {
    display: none !important;
  }

  /* The generated Leave Game graphic is the visible button. The real HTML
     button remains positioned over it so behavior/accessibility stay real. */
  #duelScreen.duel-match-found-mode .duel-prestart-actions {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: block;
    margin: 0;
    pointer-events: none;
  }

  #duelScreen.duel-match-found-mode #duelCancelBtn {
    display: none !important;
  }

  #duelScreen.duel-match-found-mode #duelLeaveBtn {
    position: absolute;
    left: 50%;
    bottom: 7.2%;
    width: 25.8%;
    height: 9.4%;
    min-width: 0;
    min-height: 0;
    transform: translateX(-50%);
    border: 0 !important;
    border-radius: 999px;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    text-shadow: none !important;
    opacity: .01;
    pointer-events: auto;
    cursor: pointer;
  }

  #duelScreen.duel-match-found-mode #duelLeaveBtn:hover,
  #duelScreen.duel-match-found-mode #duelLeaveBtn:focus-visible {
    opacity: 1;
    color: #fff !important;
    background: rgba(255,45,94,.14) !important;
    outline: 2px solid rgba(255,132,170,.85) !important;
    outline-offset: 4px !important;
  }

  #duelScreen.duel-match-found-mode #duelError {
    position: absolute;
    z-index: 12;
    left: 50%;
    bottom: 2.2%;
    width: min(620px, 76%);
    transform: translateX(-50%);
    margin: 0;
    font-size: .72rem;
    pointer-events: none;
  }

  #duelScreen.duel-match-found-mode .duel-long-wait {
    display: none !important;
  }

  @keyframes duelGeneratedCardIn {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
}

@media (min-width: 821px) and (max-height: 760px) {
  #duelScreen.duel-match-found-mode .duel-shell.duel-match-found-mode {
    width: min(1125px, calc((100dvh - 24px) * 1.5));
  }
}

@media (prefers-reduced-motion: reduce) {
  #duelScreen.duel-match-found-mode .duel-player-card {
    animation: none !important;
  }
}

/* V22.40 — Generated DUEL card transparency fix.
   Older opponent-card rules had higher specificity and painted a dark panel
   over the generated gold frame. In match-found mode the generated arena art
   owns the card background; the live player DOM must remain transparent. */
@media (min-width: 651px) {
  #duelScreen.duel-match-found-mode .duel-player-card,
  #duelScreen.duel-match-found-mode .duel-player-card.me,
  #duelScreen.duel-match-found-mode .duel-player-card.opponent,
  #duelScreen.duel-match-found-mode .duel-player-card.opponent:not(.searching),
  #duelScreen.duel-match-found-mode .duel-player-card.opponent.searching {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
  }
}

/* =========================================================
   V22.44 — DUEL SEARCH TEMPLATE MODE
   Reuse the same generated arena/template for the "Finding an opponent"
   desktop screen while keeping the UI dynamic and mobile-safe.
   ========================================================= */
@media (min-width: 651px) {
  #duelScreen.duel-search-template-mode {
    padding: 12px;
    display: grid;
    place-items: center;
    background:
      radial-gradient(circle at 50% 12%, rgba(67,227,234,.08), transparent 26%),
      linear-gradient(180deg, #020a14, #041225 42%, #06192f);
  }

  #duelScreen.duel-search-template-mode .duel-shell.duel-search-template-mode {
    position: relative;
    width: min(1400px, calc(100vw - 24px));
    aspect-ratio: 3 / 2;
    min-height: 0;
    max-height: calc(100dvh - 28px);
    padding: 0;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(82,190,255,.18);
    background: #03101e url('assets/duel-match/finding-opponent-arena.webp') center / 100% 100% no-repeat;
    box-shadow: 0 28px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
    isolation: isolate;
  }

  /* Darken the original MATCH FOUND / GO text baked into the template so we
     can reuse the same artwork for the searching state with fresh copy. */
  #duelScreen.duel-search-template-mode .duel-shell.duel-search-template-mode::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      radial-gradient(circle at 50% 16.5%, rgba(2,14,28,.96) 0 12%, rgba(2,14,28,.88) 16%, rgba(2,14,28,.58) 25%, rgba(2,14,28,0) 38%),
      radial-gradient(circle at 50% 69%, rgba(2,14,28,.96) 0 8%, rgba(2,14,28,.82) 12%, rgba(2,14,28,.40) 20%, rgba(2,14,28,0) 30%),
      linear-gradient(180deg, rgba(0,9,20,.08), transparent 20%, transparent 80%, rgba(0,8,18,.12));
  }

  #duelScreen.duel-search-template-mode .duel-shell > .eyebrow {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 5.2%;
    transform: translateX(-50%);
    margin: 0;
    color: #a9d7ff;
    text-shadow: 0 4px 14px rgba(0,0,0,.28);
  }

  #duelScreen.duel-search-template-mode #duelTitle {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 10.6%;
    width: min(78%, 920px);
    margin: 0;
    transform: translateX(-50%);
    text-align: center;
    color: #f7fbff;
    font-size: clamp(44px, 4vw, 68px);
    line-height: .98;
    letter-spacing: -.045em;
    text-shadow: 0 10px 28px rgba(0,0,0,.34), 0 0 20px rgba(76,205,255,.18);
  }

  #duelScreen.duel-search-template-mode #duelSubtitle {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 22.6%;
    width: min(76%, 760px);
    margin: 0;
    transform: translateX(-50%);
    text-align: center;
    color: #d5e6f2;
    font-size: clamp(17px, 1.3vw, 23px);
    text-shadow: 0 4px 14px rgba(0,0,0,.25);
  }

  #duelScreen.duel-search-template-mode .duel-versus {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    max-width: none;
    margin: 0;
    pointer-events: none;
  }

  #duelScreen.duel-search-template-mode .duel-player-card {
    position: absolute;
    top: 29.4%;
    width: 33.1%;
    height: 32.3%;
    min-height: 0;
    padding: 3.3% 3% 2.3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(5px, .65vw, 10px);
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: auto;
    opacity: 1;
    transform: none;
  }

  #duelScreen.duel-search-template-mode .duel-player-card.me {
    left: 6.45%;
  }

  #duelScreen.duel-search-template-mode .duel-player-card.opponent {
    right: 6.45%;
  }

  #duelScreen.duel-search-template-mode .duel-player-card.opponent.searching {
    opacity: .96;
  }

  #duelScreen.duel-search-template-mode .duel-avatar {
    width: clamp(94px, 9.2vw, 142px);
    height: clamp(94px, 9.2vw, 142px);
    flex: 0 0 auto;
    margin-top: -.7%;
    border-radius: clamp(20px, 2vw, 30px);
    border: 1px solid rgba(255,255,255,.18);
    background: radial-gradient(circle at 50% 26%, rgba(95,214,255,.18), rgba(5,18,31,.72));
    box-shadow: 0 14px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
  }

  #duelScreen.duel-search-template-mode .duel-player-card.opponent .duel-avatar {
    border-color: rgba(255,199,78,.28);
    background: radial-gradient(circle at 50% 26%, rgba(255,191,70,.14), rgba(26,18,8,.72));
  }

  #duelScreen.duel-search-template-mode .duel-player-card.opponent.searching .duel-avatar {
    border-color: rgba(255,199,78,.42);
    box-shadow: 0 0 0 1px rgba(255,199,78,.18), 0 14px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
  }

  #duelScreen.duel-search-template-mode .duel-player-name-row {
    min-width: 0;
    max-width: 92%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(7px, .7vw, 11px);
    margin-top: 1%;
  }

  #duelScreen.duel-search-template-mode .duel-player-flag {
    width: clamp(28px, 2.7vw, 42px) !important;
    height: clamp(19px, 1.8vw, 28px) !important;
    flex-basis: auto !important;
    border-radius: 5px;
    box-shadow: 0 3px 9px rgba(0,0,0,.28);
  }

  #duelScreen.duel-search-template-mode .duel-player-name-row strong {
    max-width: min(21vw, 260px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #f7fbff;
    font-size: clamp(16px, 1.55vw, 25px) !important;
    line-height: 1.1;
    letter-spacing: -.02em;
    text-shadow: 0 5px 14px rgba(0,0,0,.30);
  }

  #duelScreen.duel-search-template-mode .duel-player-card > span {
    color: #81d9ff;
    font-size: clamp(9px, .82vw, 13px) !important;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-shadow: 0 3px 10px rgba(0,0,0,.28);
  }

  #duelScreen.duel-search-template-mode .duel-player-card.opponent > span {
    color: #ffc661;
  }

  /* Template already contains VS. Hide HTML text badge but keep semantics. */
  #duelScreen.duel-search-template-mode .duel-vs {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 69.6%;
    width: auto;
    min-width: 170px;
    min-height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 24px;
    transform: translateX(-50%);
    border-radius: 999px;
    border: 1px solid rgba(92,223,255,.18);
    background: linear-gradient(145deg, rgba(7,27,51,.90), rgba(2,14,28,.72));
    box-shadow: 0 16px 36px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04);
    color: #f7fbff;
    font-size: clamp(32px, 3vw, 52px);
    font-weight: 1000;
    letter-spacing: -.04em;
    text-shadow: 0 0 18px rgba(89,231,255,.28);
    font-variant-numeric: tabular-nums;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer::before {
    content: 'SEARCHING';
    color: #79e6ff;
    font-size: clamp(10px, .8vw, 12px);
    font-weight: 900;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-right: 2px;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer.hidden {
    display: none !important;
  }

  #duelScreen.duel-search-template-mode #duelCountdown {
    display: none !important;
  }

  #duelScreen.duel-search-template-mode .duel-prestart-actions {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: block;
    margin: 0;
    pointer-events: none;
  }

  /* Reuse the template's Leave Game button area while searching. */
  #duelScreen.duel-search-template-mode #duelCancelBtn {
    position: absolute;
    left: 50%;
    bottom: 7.2%;
    width: 25.8%;
    height: 9.4%;
    min-width: 0;
    min-height: 0;
    transform: translateX(-50%);
    border: 0 !important;
    border-radius: 999px;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    text-shadow: none !important;
    opacity: .01;
    pointer-events: auto;
    cursor: pointer;
  }

  #duelScreen.duel-search-template-mode #duelCancelBtn:hover,
  #duelScreen.duel-search-template-mode #duelCancelBtn:focus-visible {
    opacity: 1;
    color: #fff !important;
    background: rgba(255,45,94,.14) !important;
    outline: 2px solid rgba(255,132,170,.85) !important;
    outline-offset: 4px !important;
  }

  #duelScreen.duel-search-template-mode #duelLeaveBtn {
    display: none !important;
  }

  #duelScreen.duel-search-template-mode .duel-long-wait {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 18.2%;
    width: min(520px, 54%);
    padding: 12px 16px;
    transform: translateX(-50%);
    border-radius: 18px;
    border: 1px solid rgba(117,216,255,.12);
    background: linear-gradient(145deg, rgba(10,31,46,.86), rgba(4,16,28,.82));
    box-shadow: 0 14px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03);
    text-align: center;
  }

  #duelScreen.duel-search-template-mode .duel-long-wait p {
    margin: 0 0 10px;
    color: #dce8f2;
    font-size: .95rem;
  }

  #duelScreen.duel-search-template-mode .duel-long-wait .btn {
    min-width: 170px;
  }

  #duelScreen.duel-search-template-mode #duelError {
    position: absolute;
    z-index: 12;
    left: 50%;
    bottom: 2.2%;
    width: min(620px, 76%);
    transform: translateX(-50%);
    margin: 0;
    font-size: .72rem;
    pointer-events: none;
  }
}

@media (min-width: 651px) and (max-height: 760px) {
  #duelScreen.duel-search-template-mode .duel-shell.duel-search-template-mode {
    width: min(1125px, calc((100dvh - 24px) * 1.5));
  }
}

@media (prefers-reduced-motion: reduce) {
  #duelScreen.duel-search-template-mode .duel-player-card {
    animation: none !important;
  }
}

/* =========================================================
   V22.45 — DUEL GO REVEAL TIMING
   The GO artwork is baked into the generated arena. Cover it during
   3 → 2 → 1, then reveal it only at the real GO moment.
   ========================================================= */
@media (min-width:821px){
  #duelScreen.duel-match-found-mode .duel-shell.duel-match-found-mode::after{
    content:'';
    position:absolute;
    z-index:6;
    left:50%;
    top:69.2%;
    width:35%;
    height:22%;
    transform:translate(-50%,-50%);
    pointer-events:none;
    border-radius:50%;
    background:
      radial-gradient(ellipse at center,
        rgba(2,18,36,.995) 0%,
        rgba(3,20,39,.98) 35%,
        rgba(4,24,45,.91) 54%,
        rgba(3,20,38,.58) 70%,
        rgba(3,18,35,0) 88%);
    filter:blur(.2px);
    opacity:1;
    transition:opacity .22s ease;
  }

  #duelScreen.duel-match-found-mode .duel-shell.duel-match-found-mode.duel-go-revealed::after{
    opacity:0;
  }

  #duelScreen.duel-match-found-mode .duel-countdown{
    z-index:8;
  }
}

@media (prefers-reduced-motion: reduce){
  #duelScreen.duel-match-found-mode .duel-shell.duel-match-found-mode::after{
    transition:none!important;
  }
}

/* =========================================================
   V22.45 — DUEL SEARCH HEADER POSITIONING FIX
   Clean single-line search title and fully suppress baked
   MATCH FOUND / GO artwork while matchmaking is active.
   ========================================================= */
@media (min-width: 651px) {
  #duelScreen.duel-search-template-mode .duel-shell.duel-search-template-mode::before {
    background:
      linear-gradient(180deg,
        rgba(2,14,28,.28) 0%,
        rgba(2,14,28,.95) 7%,
        rgba(2,14,28,.98) 12%,
        rgba(2,14,28,.97) 26%,
        rgba(2,14,28,.56) 31%,
        rgba(2,14,28,0) 39%),
      radial-gradient(ellipse at 50% 69%,
        rgba(2,14,28,.98) 0 11%,
        rgba(2,14,28,.90) 15%,
        rgba(2,14,28,.54) 22%,
        rgba(2,14,28,0) 32%),
      linear-gradient(180deg, rgba(0,9,20,.08), transparent 42%, transparent 80%, rgba(0,8,18,.12));
  }

  #duelScreen.duel-search-template-mode .duel-shell > .eyebrow {
    top: 6.1%;
    width: auto;
    white-space: nowrap;
    font-size: clamp(10px, .8vw, 13px);
    letter-spacing: .18em;
    color: #9fdcff;
  }

  #duelScreen.duel-search-template-mode #duelTitle {
    top: 11.1%;
    width: 78%;
    max-width: 900px;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(34px, 3.35vw, 56px);
    line-height: 1.02;
    letter-spacing: -.038em;
  }

  #duelScreen.duel-search-template-mode #duelSubtitle {
    top: 21.8%;
    width: 70%;
    max-width: 760px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(14px, 1.15vw, 20px);
    line-height: 1.25;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer {
    top: 70.8%;
  }
}

/* Smaller desktop/laptop widths need a little tighter typography while still
   using the cinematic desktop template. */
@media (min-width: 651px) and (max-width: 980px) {
  #duelScreen.duel-search-template-mode #duelTitle {
    top: 11.6%;
    width: 74%;
    font-size: clamp(30px, 5vw, 44px);
  }

  #duelScreen.duel-search-template-mode #duelSubtitle {
    top: 22.2%;
    width: 72%;
    font-size: clamp(13px, 2vw, 18px);
  }
}

/* V22.46 — DUEL SEARCH TIMER SPACING */
@media (min-width: 651px) {
  #duelScreen.duel-search-template-mode #duelSearchTimer {
    top: 67.6% !important;
  }
}

/* V22.47 — DUEL SEARCH TIMER SIZE + PARTICLE FX */
@media (min-width: 651px) {
  #duelScreen.duel-search-template-mode #duelSearchTimer {
    top: 67.2% !important;
    min-width: 150px;
    min-height: 54px;
    padding: 0 20px;
    gap: 8px;
    font-size: clamp(28px, 2.5vw, 42px);
    border-width: 1px;
    box-shadow:
      0 14px 32px rgba(0,0,0,.24),
      0 0 0 1px rgba(112,227,255,.06),
      0 0 26px rgba(68,218,255,.12),
      inset 0 1px 0 rgba(255,255,255,.05);
    overflow: visible;
    isolation: isolate;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer::before {
    font-size: clamp(9px, .72vw, 11px);
    margin-right: 0;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer::after {
    content: '';
    position: absolute;
    inset: -10px -16px;
    border-radius: 999px;
    pointer-events: none;
    background:
      radial-gradient(circle at 18% 42%, rgba(108,242,255,.92) 0 2px, rgba(108,242,255,.28) 2px, transparent 5px),
      radial-gradient(circle at 76% 24%, rgba(255,215,112,.88) 0 2px, rgba(255,215,112,.24) 2px, transparent 5px),
      radial-gradient(circle at 82% 72%, rgba(84,231,255,.82) 0 1.6px, rgba(84,231,255,.20) 1.6px, transparent 4px),
      radial-gradient(circle at 34% 82%, rgba(180,242,255,.78) 0 1.7px, rgba(180,242,255,.18) 1.7px, transparent 4px);
    opacity: .95;
    animation: duelSearchTimerParticles 4.6s linear infinite;
    z-index: -1;
    filter: drop-shadow(0 0 5px rgba(101,230,255,.34));
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer > * {
    position: relative;
    z-index: 1;
  }
}

@keyframes duelSearchTimerParticles {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: .72;
  }
  25% {
    opacity: .98;
  }
  50% {
    transform: rotate(180deg) scale(1.02);
    opacity: .82;
  }
  75% {
    opacity: .98;
  }
  100% {
    transform: rotate(360deg) scale(1);
    opacity: .72;
  }
}

@media (prefers-reduced-motion: reduce) {
  #duelScreen.duel-search-template-mode #duelSearchTimer::after {
    animation: none !important;
  }
}

/* =========================================================
   V22.48 — MOBILE USES SAME DUEL TEMPLATE AS DESKTOP
   Apply the generated arena look to mobile for both searching and
   match-found states, with portrait-safe responsive positioning.
   ========================================================= */
@media (max-width: 650px) {
  #duelScreen.duel-search-template-mode,
  #duelScreen.duel-match-found-mode {
    padding: 8px;
    display: grid;
    place-items: center;
    background:
      radial-gradient(circle at 50% 12%, rgba(67,227,234,.08), transparent 28%),
      linear-gradient(180deg, #020a14, #041225 42%, #06192f);
  }

  #duelScreen.duel-search-template-mode .duel-shell,
  #duelScreen.duel-match-found-mode .duel-shell {
    position: relative;
    width: min(100vw - 16px, 430px);
    height: min(calc(100dvh - 16px), 860px);
    min-height: 620px;
    padding: 0;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(82,190,255,.18);
    background: #03101e url('assets/duel-match/finding-opponent-arena.webp') center / cover no-repeat;
    box-shadow: 0 24px 72px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
    isolation: isolate;
  }

  /* --- MATCH FOUND mobile template --- */
  #duelScreen.duel-match-found-mode .duel-shell.duel-match-found-mode::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(0,9,20,.06), transparent 22%, transparent 78%, rgba(0,8,18,.08)),
      radial-gradient(circle at 50% 57%, transparent 45%, rgba(0,7,15,.14) 100%);
  }

  #duelScreen.duel-match-found-mode .duel-shell > .eyebrow,
  #duelScreen.duel-match-found-mode #duelTitle,
  #duelScreen.duel-match-found-mode #duelSubtitle,
  #duelScreen.duel-match-found-mode #duelSearchTimer,
  #duelScreen.duel-match-found-mode .duel-vs {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  #duelScreen.duel-match-found-mode .duel-versus,
  #duelScreen.duel-search-template-mode .duel-versus {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    max-width: none;
    margin: 0;
    pointer-events: none;
  }

  #duelScreen.duel-match-found-mode .duel-player-card,
  #duelScreen.duel-search-template-mode .duel-player-card {
    position: absolute;
    top: 28.5%;
    width: 42.5%;
    height: 24.5%;
    min-height: 0;
    padding: 8.5% 4% 5.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: auto;
    transform: none;
  }

  #duelScreen.duel-match-found-mode .duel-player-card.me,
  #duelScreen.duel-search-template-mode .duel-player-card.me {
    left: 5%;
  }

  #duelScreen.duel-match-found-mode .duel-player-card.opponent,
  #duelScreen.duel-search-template-mode .duel-player-card.opponent {
    right: 5%;
  }

  #duelScreen.duel-search-template-mode .duel-player-card.opponent.searching {
    opacity: .96;
  }

  #duelScreen.duel-match-found-mode .duel-avatar,
  #duelScreen.duel-search-template-mode .duel-avatar {
    width: clamp(82px, 22vw, 108px);
    height: clamp(82px, 22vw, 108px);
    flex: 0 0 auto;
    margin-top: 0;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.18);
    background: radial-gradient(circle at 50% 26%, rgba(95,214,255,.18), rgba(5,18,31,.72));
    box-shadow: 0 12px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
  }

  #duelScreen.duel-match-found-mode .duel-player-card.opponent .duel-avatar,
  #duelScreen.duel-search-template-mode .duel-player-card.opponent .duel-avatar {
    border-color: rgba(255,199,78,.28);
    background: radial-gradient(circle at 50% 26%, rgba(255,191,70,.14), rgba(26,18,8,.72));
  }

  #duelScreen.duel-match-found-mode .duel-player-name-row,
  #duelScreen.duel-search-template-mode .duel-player-name-row {
    min-width: 0;
    max-width: 98%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 2px;
  }

  #duelScreen.duel-match-found-mode .duel-player-flag,
  #duelScreen.duel-search-template-mode .duel-player-flag {
    width: 28px !important;
    height: 19px !important;
    flex-basis: auto !important;
    border-radius: 4px;
    box-shadow: 0 3px 9px rgba(0,0,0,.28);
  }

  #duelScreen.duel-match-found-mode .duel-player-name-row strong,
  #duelScreen.duel-search-template-mode .duel-player-name-row strong {
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #f7fbff;
    font-size: clamp(14px, 4.8vw, 22px) !important;
    line-height: 1.06;
    letter-spacing: -.02em;
    text-shadow: 0 5px 14px rgba(0,0,0,.30);
  }

  #duelScreen.duel-match-found-mode .duel-player-card > span,
  #duelScreen.duel-search-template-mode .duel-player-card > span {
    color: #81d9ff;
    font-size: clamp(8px, 2.2vw, 11px) !important;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0 3px 10px rgba(0,0,0,.28);
  }

  #duelScreen.duel-match-found-mode .duel-player-card.opponent > span,
  #duelScreen.duel-search-template-mode .duel-player-card.opponent > span {
    color: #ffc661;
  }

  #duelScreen.duel-match-found-mode .duel-countdown {
    position: absolute;
    z-index: 8;
    left: 50%;
    top: 69.2%;
    width: 150px;
    min-height: 116px;
    margin: 0;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(2,23,45,.94) 0 39%, rgba(2,22,42,.72) 52%, rgba(2,15,29,0) 72%);
    color: #fff;
    font-size: clamp(64px, 18vw, 96px);
    font-weight: 1000;
    line-height: 1;
    text-shadow: 0 0 18px #59e7ff, 0 0 46px rgba(34,170,255,.65);
    pointer-events: none;
  }

  #duelScreen.duel-match-found-mode .duel-countdown.is-go {
    opacity: 0;
    visibility: hidden;
  }

  #duelScreen.duel-match-found-mode .duel-countdown.hidden {
    display: none !important;
  }

  #duelScreen.duel-match-found-mode .duel-shell.duel-match-found-mode::after {
    content: '';
    position: absolute;
    z-index: 6;
    left: 50%;
    top: 69.2%;
    width: 62%;
    height: 18%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    border-radius: 50%;
    background:
      radial-gradient(ellipse at center,
        rgba(2,18,36,.995) 0%,
        rgba(3,20,39,.98) 35%,
        rgba(4,24,45,.91) 54%,
        rgba(3,20,38,.58) 70%,
        rgba(3,18,35,0) 88%);
    opacity: 1;
    transition: opacity .22s ease;
  }

  #duelScreen.duel-match-found-mode .duel-shell.duel-match-found-mode.duel-go-revealed::after {
    opacity: 0;
  }

  #duelScreen.duel-match-found-mode .duel-prestart-actions,
  #duelScreen.duel-search-template-mode .duel-prestart-actions {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: block;
    margin: 0;
    pointer-events: none;
  }

  #duelScreen.duel-match-found-mode #duelCancelBtn {
    display: none !important;
  }

  #duelScreen.duel-match-found-mode #duelLeaveBtn,
  #duelScreen.duel-search-template-mode #duelCancelBtn {
    position: absolute;
    left: 50%;
    bottom: 7.3%;
    width: 50%;
    height: 8.2%;
    min-width: 0;
    min-height: 0;
    transform: translateX(-50%);
    border: 0 !important;
    border-radius: 999px;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    text-shadow: none !important;
    opacity: .01;
    pointer-events: auto;
    cursor: pointer;
  }

  #duelScreen.duel-match-found-mode #duelLeaveBtn:hover,
  #duelScreen.duel-match-found-mode #duelLeaveBtn:focus-visible,
  #duelScreen.duel-search-template-mode #duelCancelBtn:hover,
  #duelScreen.duel-search-template-mode #duelCancelBtn:focus-visible {
    opacity: 1;
    color: #fff !important;
    background: rgba(255,45,94,.14) !important;
    outline: 2px solid rgba(255,132,170,.85) !important;
    outline-offset: 4px !important;
  }

  #duelScreen.duel-search-template-mode #duelLeaveBtn {
    display: none !important;
  }

  #duelScreen.duel-match-found-mode #duelError,
  #duelScreen.duel-search-template-mode #duelError {
    position: absolute;
    z-index: 12;
    left: 50%;
    bottom: 1.8%;
    width: min(88%, 340px);
    transform: translateX(-50%);
    margin: 0;
    font-size: .72rem;
    pointer-events: none;
  }

  #duelScreen.duel-match-found-mode .duel-long-wait {
    display: none !important;
  }

  /* --- SEARCHING mobile template --- */
  #duelScreen.duel-search-template-mode .duel-shell.duel-search-template-mode::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(180deg,
        rgba(2,14,28,.34) 0%,
        rgba(2,14,28,.94) 7%,
        rgba(2,14,28,.98) 12%,
        rgba(2,14,28,.97) 26%,
        rgba(2,14,28,.56) 31%,
        rgba(2,14,28,0) 40%),
      radial-gradient(circle at 50% 68.5%, rgba(2,14,28,.97) 0 7%, rgba(2,14,28,.86) 11%, rgba(2,14,28,.35) 18%, rgba(2,14,28,0) 28%),
      linear-gradient(180deg, rgba(0,9,20,.10), transparent 22%, transparent 80%, rgba(0,8,18,.12));
  }

  #duelScreen.duel-search-template-mode .duel-shell > .eyebrow {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 4.8%;
    transform: translateX(-50%);
    margin: 0;
    color: #a9d7ff;
    text-shadow: 0 4px 14px rgba(0,0,0,.28);
    font-size: 11px;
  }

  #duelScreen.duel-search-template-mode #duelTitle {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 9.6%;
    width: min(86%, 330px);
    margin: 0;
    transform: translateX(-50%);
    text-align: center;
    color: #f7fbff;
    font-size: clamp(34px, 11vw, 52px);
    line-height: .92;
    letter-spacing: -.045em;
    text-shadow: 0 10px 28px rgba(0,0,0,.34), 0 0 20px rgba(76,205,255,.18);
    text-wrap: balance;
  }

  #duelScreen.duel-search-template-mode #duelSubtitle {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 21.4%;
    width: min(82%, 320px);
    margin: 0;
    transform: translateX(-50%);
    text-align: center;
    color: #d5e6f2;
    font-size: clamp(15px, 4vw, 18px);
    line-height: 1.3;
    text-shadow: 0 4px 14px rgba(0,0,0,.25);
    text-wrap: balance;
  }

  #duelScreen.duel-search-template-mode .duel-vs {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 68%;
    width: auto;
    min-width: 148px;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    transform: translateX(-50%);
    border-radius: 999px;
    border: 1px solid rgba(92,223,255,.18);
    background: linear-gradient(145deg, rgba(7,27,51,.90), rgba(2,14,28,.72));
    box-shadow: 0 14px 32px rgba(0,0,0,.24), 0 0 26px rgba(68,218,255,.12), inset 0 1px 0 rgba(255,255,255,.05);
    color: #f7fbff;
    font-size: clamp(28px, 8.2vw, 40px);
    font-weight: 1000;
    letter-spacing: -.04em;
    text-shadow: 0 0 18px rgba(89,231,255,.28);
    font-variant-numeric: tabular-nums;
    overflow: visible;
    isolation: isolate;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer::before {
    content: 'SEARCHING';
    color: #79e6ff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .20em;
    text-transform: uppercase;
    margin-right: 0;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer::after {
    content: '';
    position: absolute;
    inset: -10px -14px;
    border-radius: 999px;
    pointer-events: none;
    background:
      radial-gradient(circle at 18% 42%, rgba(108,242,255,.92) 0 2px, rgba(108,242,255,.28) 2px, transparent 5px),
      radial-gradient(circle at 76% 24%, rgba(255,215,112,.88) 0 2px, rgba(255,215,112,.24) 2px, transparent 5px),
      radial-gradient(circle at 82% 72%, rgba(84,231,255,.82) 0 1.6px, rgba(84,231,255,.20) 1.6px, transparent 4px),
      radial-gradient(circle at 34% 82%, rgba(180,242,255,.78) 0 1.7px, rgba(180,242,255,.18) 1.7px, transparent 4px);
    opacity: .9;
    animation: duelSearchTimerParticles 4.6s linear infinite;
    z-index: -1;
    filter: drop-shadow(0 0 5px rgba(101,230,255,.34));
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer.hidden {
    display: none !important;
  }

  #duelScreen.duel-search-template-mode #duelCountdown {
    display: none !important;
  }

  #duelScreen.duel-search-template-mode .duel-long-wait {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 17%;
    width: min(86%, 320px);
    padding: 12px 14px;
    transform: translateX(-50%);
    border-radius: 18px;
    border: 1px solid rgba(117,216,255,.12);
    background: linear-gradient(145deg, rgba(10,31,46,.86), rgba(4,16,28,.82));
    box-shadow: 0 14px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03);
    text-align: center;
  }

  #duelScreen.duel-search-template-mode .duel-long-wait p {
    margin: 0 0 10px;
    color: #dce8f2;
    font-size: .9rem;
  }

  #duelScreen.duel-search-template-mode .duel-long-wait .btn {
    min-width: 160px;
  }
}

@media (max-width: 650px) and (max-height: 760px) {
  #duelScreen.duel-search-template-mode .duel-shell,
  #duelScreen.duel-match-found-mode .duel-shell {
    min-height: 0;
    height: calc(100dvh - 14px);
  }

  #duelScreen.duel-search-template-mode #duelTitle {
    font-size: clamp(30px, 9.2vw, 44px);
    top: 8.8%;
  }

  #duelScreen.duel-search-template-mode #duelSubtitle {
    top: 18.8%;
    font-size: clamp(13px, 3.6vw, 16px);
  }

  #duelScreen.duel-match-found-mode .duel-player-card,
  #duelScreen.duel-search-template-mode .duel-player-card {
    top: 27.4%;
    height: 25%;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer,
  #duelScreen.duel-match-found-mode .duel-countdown {
    top: 66.8%;
  }
}

@media (max-width: 650px) and (prefers-reduced-motion: reduce) {
  #duelScreen.duel-search-template-mode #duelSearchTimer::after,
  #duelScreen.duel-match-found-mode .duel-player-card,
  #duelScreen.duel-search-template-mode .duel-player-card {
    animation: none !important;
  }

  #duelScreen.duel-match-found-mode .duel-shell.duel-match-found-mode::after {
    transition: none !important;
  }
}

/* =========================================================
   V22.49 — DUEL TEMPLATE SCREEN TRANSITION FIX
   Prevent templated DUEL searching/match-found screens from remaining
   visible after gameplay starts. This especially affected portrait mobile,
   where the DUEL screen could still cover the game after showScreen('game').
   ========================================================= */
#duelScreen.duel-search-template-mode:not(.active),
#duelScreen.duel-match-found-mode:not(.active) {
  display: none !important;
}


/* =========================================================
   V22.50 — DUEL FINAL / WINNER FLOW POLISH
   Premium end-of-match presentation for Ranked Duel.
   ========================================================= */
#mpFinalScreen.duel-final-mode .mp-champion-stage{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,214,92,.14), transparent 28%),
    radial-gradient(circle at 16% 18%, rgba(67,227,234,.12), transparent 24%),
    linear-gradient(180deg, rgba(10,31,48,.97), rgba(10,18,34,.96));
  border-color: rgba(255,213,97,.16);
  box-shadow: 0 24px 64px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(255,224,122,.04);
}
#mpFinalScreen.duel-final-mode .mp-champion-crown{
  box-shadow: 0 18px 40px rgba(0,0,0,.20), 0 0 24px rgba(255,211,84,.22), inset 0 1px 0 rgba(255,255,255,.08);
}
#mpFinalScreen.duel-final-mode .mp-champion-badge{
  background: linear-gradient(145deg, rgba(255,224,122,.14), rgba(255,224,122,.06));
  border: 1px solid rgba(255,224,122,.16);
}
#mpFinalScreen .duel-final-hero-meta{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:16px;
}
#mpFinalScreen .duel-final-chip{
  min-width:172px;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.022));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  text-align:center;
}
#mpFinalScreen .duel-final-chip small{
  display:block;
  margin-bottom:6px;
  color:#98b3c4;
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.16em;
}
#mpFinalScreen .duel-final-chip strong{
  display:block;
  color:#f7fbff;
  font-size:1.22rem;
  letter-spacing:-.02em;
}
#mpFinalScreen .duel-final-chip.outcome-chip[data-outcome="win"]{
  border-color: rgba(115,242,169,.18);
  background: linear-gradient(145deg, rgba(79,228,161,.13), rgba(255,255,255,.02));
}
#mpFinalScreen .duel-final-chip.outcome-chip[data-outcome="win"] strong,
#mpFinalScreen .duel-rating-result[data-outcome="win"] #duelRatingDelta{
  color:#76f4b0;
}
#mpFinalScreen .duel-final-chip.outcome-chip[data-outcome="loss"]{
  border-color: rgba(255,120,135,.18);
  background: linear-gradient(145deg, rgba(255,120,135,.14), rgba(255,255,255,.02));
}
#mpFinalScreen .duel-final-chip.outcome-chip[data-outcome="loss"] strong,
#mpFinalScreen .duel-rating-result[data-outcome="loss"] #duelRatingDelta{
  color:#ff8f9b;
}
#mpFinalScreen .duel-final-chip.outcome-chip[data-outcome="draw"]{
  border-color: rgba(185,205,222,.16);
}
#mpFinalScreen .duel-final-chip.outcome-chip[data-outcome="draw"] strong,
#mpFinalScreen .duel-rating-result[data-outcome="draw"] #duelRatingDelta{
  color:#dbe7ef;
}
#mpFinalScreen .duel-final-summary{
  max-width:58ch;
  margin:12px auto 0;
  color:#cbd8e4;
  font-size:.98rem;
  line-height:1.55;
  text-align:center;
}
#mpFinalScreen .duel-rating-result{
  position:relative;
  overflow:hidden;
}
#mpFinalScreen .duel-rating-result::before{
  content:'';
  position:absolute;
  inset:auto -18% 58% auto;
  width:240px;
  height:240px;
  background:radial-gradient(circle, rgba(67,227,234,.14), transparent 66%);
  pointer-events:none;
}
#mpFinalScreen .duel-rating-result::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent);
  transform:translateX(-115%);
  animation: duelFinalShine 3.8s ease-in-out infinite;
}
#mpFinalScreen .duel-rating-flow{
  gap:22px;
  margin-top:12px;
}
#mpFinalScreen .duel-rating-flow strong{
  font-size:1.72rem;
}
#mpFinalScreen .duel-rating-flow b{
  min-width:82px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
#mpFinalScreen .duel-rating-tier{
  margin-bottom:2px;
  font-size:.72rem;
}
#mpFinalScreen .duel-rating-result-text{
  margin-top:12px;
  font-size:.78rem;
  letter-spacing:.05em;
  text-transform:uppercase;
}
#mpFinalScreen.duel-final-mode .mp-final-title + .result-subtext{
  color:#c7d8e8;
}
#mpFinalScreen.duel-final-mode .mp-final-actions .btn{
  min-width:200px;
}
#mpFinalStatus{ text-align:center; }

@keyframes duelFinalShine {
  0%, 72% { transform: translateX(-115%); }
  90%, 100% { transform: translateX(115%); }
}

@media(max-width:820px){
  #mpFinalScreen .duel-final-chip{
    min-width:150px;
    flex:1 1 0;
  }
}
@media(max-width:540px){
  #mpFinalScreen .duel-final-hero-meta{
    gap:10px;
    margin-top:14px;
  }
  #mpFinalScreen .duel-final-chip{
    min-width:0;
    width:100%;
    padding:11px 12px;
    border-radius:16px;
  }
  #mpFinalScreen .duel-final-chip strong{
    font-size:1.06rem;
  }
  #mpFinalScreen .duel-final-summary{
    font-size:.9rem;
  }
  #mpFinalScreen .duel-rating-flow{
    grid-template-columns:1fr;
    gap:12px;
  }
  #mpFinalScreen .duel-rating-flow b{
    justify-self:center;
  }
}
@media (prefers-reduced-motion: reduce){
  #mpFinalScreen .duel-rating-result::after{
    animation:none !important;
  }
}


/* =========================================================
   V22.51 — LIVE DUEL GAMEPLAY HUD POLISH
   Premium gameplay HUD for Ranked Duel while preserving the shared
   underlying Solo/Daily/Multiplayer logic.
   ========================================================= */
#gameScreen[data-live-mode="duel"] .viewer-frame::before {
  background:
    linear-gradient(180deg, rgba(2, 8, 14, 0.78) 0%, rgba(3, 10, 18, 0.28) 16%, transparent 25%, transparent 63%, rgba(3, 9, 14, 0.62) 100%),
    radial-gradient(circle at 18% 0%, rgba(65, 214, 255, 0.14), transparent 22%),
    radial-gradient(circle at 82% 0%, rgba(255, 196, 82, 0.12), transparent 22%);
}

#gameScreen[data-live-mode="duel"] .hud-bar {
  top: 14px;
  left: 14px;
  right: 14px;
  padding: 14px 16px;
  border-radius: 26px;
  border: 1px solid rgba(108, 210, 255, 0.18);
  background:
    linear-gradient(90deg, rgba(18, 49, 84, 0.72) 0%, rgba(10, 24, 42, 0.88) 36%, rgba(10, 24, 42, 0.88) 64%, rgba(74, 54, 16, 0.58) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255,255,255,0.03),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 28px 0 54px rgba(75, 202, 255, 0.06),
    inset -28px 0 54px rgba(255, 196, 82, 0.05);
  backdrop-filter: blur(18px);
}

#gameScreen[data-live-mode="duel"] .hud-brand {
  min-width: 220px;
  gap: 12px;
}
#gameScreen[data-live-mode="duel"] .hud-brand-copy strong {
  font-size: 1.8rem;
  letter-spacing: -0.045em;
}
#gameScreen[data-live-mode="duel"] .hud-brand-copy span {
  color: #b7cddd;
}

#gameScreen[data-live-mode="duel"] .hud-center {
  gap: 12px;
}
#gameScreen[data-live-mode="duel"] .mode-pill {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border-color: rgba(86, 219, 255, 0.20);
  background:
    linear-gradient(145deg, rgba(12, 57, 75, 0.74), rgba(6, 23, 38, 0.88));
  box-shadow:
    0 10px 24px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 22px rgba(65, 214, 255, 0.08);
  color: #eef8ff;
  letter-spacing: 0.11em;
}
#gameScreen[data-live-mode="duel"] .leave-game-btn {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border-color: rgba(255, 98, 124, 0.34);
  background: linear-gradient(180deg, rgba(123, 26, 46, 0.64), rgba(83, 16, 29, 0.66));
  box-shadow: 0 12px 28px rgba(74, 8, 24, 0.24), inset 0 1px 0 rgba(255,255,255,0.06);
  letter-spacing: 0.12em;
}

#gameScreen[data-live-mode="duel"] .hud-metrics {
  gap: 12px;
}
#gameScreen[data-live-mode="duel"] .metric-card {
  min-width: 118px;
  padding: 11px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.09);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.028));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
#gameScreen[data-live-mode="duel"] .metric-card span {
  font-size: 9px;
  color: #9ab3c6;
  letter-spacing: 0.18em;
}
#gameScreen[data-live-mode="duel"] .metric-card strong {
  margin-top: 5px;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
  color: #f9fcff;
}
#gameScreen[data-live-mode="duel"] .metric-card:nth-child(1) {
  border-color: rgba(89, 207, 255, 0.18);
}
#gameScreen[data-live-mode="duel"] .metric-card:nth-child(2) {
  border-color: rgba(118, 242, 186, 0.15);
}
#gameScreen[data-live-mode="duel"] .metric-card-time {
  min-width: 136px;
  padding-right: 56px;
  border-color: rgba(255, 203, 95, 0.18);
  background: linear-gradient(180deg, rgba(255, 203, 95, 0.07), rgba(255,255,255,0.025));
}
#gameScreen[data-live-mode="duel"] .timer-ring {
  right: 14px;
  width: 32px;
  height: 32px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.07), 0 0 16px rgba(84, 229, 255, 0.08);
}
#gameScreen[data-live-mode="duel"] .timer-ring::after {
  background: rgba(6, 15, 25, 0.95);
}

#gameScreen[data-live-mode="duel"] .clue-panel {
  left: 20px;
  bottom: 24px;
  width: min(420px, calc(100% - 388px));
  min-width: 280px;
  padding: 16px 18px;
  border-radius: 24px;
  border: 1px solid rgba(91, 206, 255, 0.16);
  background:
    linear-gradient(145deg, rgba(7, 24, 40, 0.92), rgba(5, 16, 28, 0.76));
  box-shadow: 0 18px 40px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.04);
}
#gameScreen[data-live-mode="duel"] .clue-panel .eyebrow {
  color: #7eeaff;
}
#gameScreen[data-live-mode="duel"] .clue-text {
  margin-top: 7px;
  color: #dfebf4;
  font-size: 14px;
  line-height: 1.52;
}
#gameScreen[data-live-mode="duel"] .clue-hint-badge {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 30%, rgba(71, 219, 255, 0.16), rgba(7, 24, 40, 0.78));
  box-shadow: 0 0 0 1px rgba(67,227,234,0.18), 0 0 16px rgba(67,227,234,0.14);
  animation: duelLivePulse 2.7s ease-in-out infinite;
}
#gameScreen[data-live-mode="duel"] .clue-hint-badge strong {
  letter-spacing: 0.18em;
}

#gameScreen[data-live-mode="duel"] .utility-footer {
  left: 22px;
  right: 22px;
  bottom: 8px;
  opacity: 0.92;
}

#gameScreen[data-live-mode="duel"] .map-dock {
  right: 20px;
  bottom: 20px;
  width: min(340px, calc(100vw - 40px));
}
#gameScreen[data-live-mode="duel"] .mini-map-card {
  padding: 15px 15px 10px;
  border-radius: 24px;
  border: 1px solid rgba(95, 206, 255, 0.18);
  background:
    linear-gradient(145deg, rgba(8, 24, 40, 0.92), rgba(6, 16, 28, 0.82));
  box-shadow:
    0 20px 46px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -18px 36px rgba(67, 227, 234, 0.02);
}
#gameScreen[data-live-mode="duel"] .mini-map-head {
  margin-bottom: 13px;
}
#gameScreen[data-live-mode="duel"] .mini-map-head strong {
  font-size: 18px;
}
#gameScreen[data-live-mode="duel"] .mini-map-actions .hud-icon-btn.subtle {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: rgba(255,255,255,0.04);
}
#gameScreen[data-live-mode="duel"] .map {
  height: 214px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
#gameScreen[data-live-mode="duel"] .map-foot {
  margin-top: 6px;
}
#gameScreen[data-live-mode="duel"] .guess-status {
  min-height: 18px;
  font-size: 12px;
  line-height: 1.25;
  color: #b8cbda;
}
#gameScreen[data-live-mode="duel"] .guess-cta {
  margin-top: 8px;
  min-height: 62px;
  border-radius: 22px;
  padding: 18px 22px;
  letter-spacing: 0.16em;
  color: #041218;
  background:
    linear-gradient(135deg, #70f0ff 0%, #4fd0ff 34%, #6ef2ba 100%);
  box-shadow:
    0 18px 38px rgba(61, 214, 244, 0.26),
    inset 0 1px 0 rgba(255,255,255,0.34),
    0 0 0 1px rgba(119, 245, 255, 0.08);
}
#gameScreen[data-live-mode="duel"] .guess-cta:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    0 22px 42px rgba(61, 214, 244, 0.30),
    inset 0 1px 0 rgba(255,255,255,0.38),
    0 0 0 1px rgba(119, 245, 255, 0.10);
}
#gameScreen[data-live-mode="duel"] .guess-cta:disabled {
  opacity: 0.52;
  background: linear-gradient(135deg, rgba(93, 121, 136, 0.92), rgba(69, 95, 107, 0.92));
  color: rgba(232, 244, 250, 0.76);
  box-shadow: none;
}

#gameScreen[data-live-mode="duel"] .mobile-map-btn {
  border: 1px solid rgba(90, 220, 255, 0.18);
  background: linear-gradient(145deg, rgba(9, 29, 47, 0.94), rgba(6, 17, 28, 0.86));
  box-shadow: 0 16px 34px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.04);
}

#gameScreen[data-live-mode="duel"] .mp-waiting-overlay {
  width: min(520px, calc(100% - 34px));
  padding: 24px 24px 20px;
  border-radius: 28px;
  border: 1px solid rgba(95, 206, 255, 0.18);
  background:
    radial-gradient(circle at top, rgba(67, 227, 234, 0.10), transparent 36%),
    linear-gradient(145deg, rgba(10, 31, 48, 0.97), rgba(9, 18, 34, 0.96));
  box-shadow: 0 26px 58px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.04);
}
#gameScreen[data-live-mode="duel"] .mp-waiting-overlay h3 {
  margin-top: 6px;
  font-size: clamp(28px, 4vw, 34px);
}
#gameScreen[data-live-mode="duel"] .mp-waiting-overlay p {
  color: #cfdeea;
}
#gameScreen[data-live-mode="duel"] .mp-waiting-player {
  border-color: rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
}
#gameScreen[data-live-mode="duel"] .mp-waiting-player .done {
  color: #76f2ba;
}

@keyframes duelLivePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 1px rgba(67,227,234,0.18), 0 0 16px rgba(67,227,234,0.14);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 0 0 1px rgba(67,227,234,0.24), 0 0 24px rgba(67,227,234,0.18);
  }
}

@media (max-width: 1180px) {
  #gameScreen[data-live-mode="duel"] .clue-panel {
    width: min(380px, calc(100% - 372px));
  }
}

@media (max-width: 980px) {
  #gameScreen[data-live-mode="duel"] .hud-bar {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  #gameScreen[data-live-mode="duel"] .hud-brand,
  #gameScreen[data-live-mode="duel"] .hud-center,
  #gameScreen[data-live-mode="duel"] .hud-metrics {
    width: 100%;
    justify-content: center;
  }
  #gameScreen[data-live-mode="duel"] .clue-panel {
    width: min(350px, calc(100% - 370px));
    min-width: 250px;
  }
}

@media (max-width: 760px) {
  #gameScreen[data-live-mode="duel"] .clue-panel {
    width: calc(100% - 28px);
    min-width: 0;
    bottom: 152px;
  }
  #gameScreen[data-live-mode="duel"] .map-dock {
    right: 14px;
    left: 14px;
    bottom: 72px;
    width: auto;
  }
  #gameScreen[data-live-mode="duel"] .utility-footer {
    display: none;
  }
}

@media (max-width: 650px) {
  #gameScreen[data-live-mode="duel"] .hud-bar {
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    left: 8px;
    right: 8px;
    padding: 10px 10px 9px;
    border-radius: 20px;
    gap: 8px;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
  }
  #gameScreen[data-live-mode="duel"] .hud-brand {
    width: 40px;
    min-width: 40px;
    justify-content: center;
  }
  #gameScreen[data-live-mode="duel"] .hud-brand-copy {
    display: none;
  }
  #gameScreen[data-live-mode="duel"] .hud-center,
  #gameScreen[data-live-mode="duel"] .hud-metrics {
    width: 100%;
    justify-content: flex-end;
  }
  #gameScreen[data-live-mode="duel"] .hud-center {
    grid-column: 2;
    gap: 6px;
    flex-wrap: wrap;
  }
  #gameScreen[data-live-mode="duel"] .mode-pill,
  #gameScreen[data-live-mode="duel"] .leave-game-btn {
    min-height: 32px;
    padding: 0 11px;
    font-size: 10px;
    border-radius: 999px;
    letter-spacing: 0.09em;
  }
  #gameScreen[data-live-mode="duel"] .hud-metrics {
    grid-column: 1 / -1;
    gap: 5px;
    flex-wrap: nowrap;
    margin-top: 2px;
  }
  #gameScreen[data-live-mode="duel"] .metric-card {
    flex: 1 1 0;
    min-width: 0;
    min-height: 39px;
    padding: 6px 8px;
    border-radius: 12px;
  }
  #gameScreen[data-live-mode="duel"] .metric-card span {
    font-size: .42rem;
  }
  #gameScreen[data-live-mode="duel"] .metric-card strong {
    margin-top: 2px;
    font-size: 12px;
    white-space: nowrap;
  }
  #gameScreen[data-live-mode="duel"] .metric-card-time {
    padding-right: 32px;
  }
  #gameScreen[data-live-mode="duel"] .timer-ring {
    right: 8px;
    width: 18px;
    height: 18px;
  }
  #gameScreen[data-live-mode="duel"] .timer-ring::after {
    inset: 3px;
  }
  #gameScreen[data-live-mode="duel"] .clue-panel {
    left: 8px;
    right: 8px;
    width: auto;
    bottom: 112px;
    padding: 12px 13px;
    border-radius: 18px;
    gap: 10px;
  }
  #gameScreen[data-live-mode="duel"] .clue-text {
    font-size: 12.5px;
    line-height: 1.45;
  }
  #gameScreen[data-live-mode="duel"] .clue-hint-badge {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
  #gameScreen[data-live-mode="duel"] .clue-hint-badge span { font-size: 17px; }
  #gameScreen[data-live-mode="duel"] .clue-hint-badge strong { font-size: 10px; }
  #gameScreen[data-live-mode="duel"] .map-dock {
    display: none;
  }
  #gameScreen[data-live-mode="duel"] .mobile-map-btn {
    right: 10px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    min-width: 134px;
    border-radius: 18px;
  }
  #gameScreen[data-live-mode="duel"] .mp-waiting-overlay {
    width: min(92vw, 360px);
    padding: 20px 18px 16px;
    border-radius: 22px;
  }
  #gameScreen[data-live-mode="duel"] .mp-waiting-overlay h3 {
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #gameScreen[data-live-mode="duel"] .clue-hint-badge {
    animation: none !important;
  }
}


/* =========================================================
   V22.52 — DUEL SOUND / ANIMATION FEEL + MASTER BUILD POLISH
   Final release candidate polish for matchmaking and gameplay motion.
   ========================================================= */
#gameScreen[data-live-mode="duel"].active .hud-bar {
  animation: duelHudSlideIn .42s ease both;
}
#gameScreen[data-live-mode="duel"].active .clue-panel {
  animation: duelPanelRise .42s ease .06s both;
}
#gameScreen[data-live-mode="duel"].active .map-dock {
  animation: duelPanelRise .42s ease .11s both;
}
#gameScreen[data-live-mode="duel"] .guess-cta:not(:disabled) {
  animation: duelGuessReadyPulse 2.6s ease-in-out infinite;
}
#gameScreen[data-live-mode="duel"] .guess-cta:not(:disabled)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 15%, rgba(255,255,255,0.24) 50%, transparent 85%);
  transform: translateX(-120%);
  animation: duelGuessShine 2.8s ease-in-out infinite;
  pointer-events: none;
}
#gameScreen[data-live-mode="duel"] .guess-cta { position: relative; overflow: hidden; }
#gameScreen[data-live-mode="duel"] .metric-card {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
#gameScreen[data-live-mode="duel"] .metric-card:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 24px rgba(0,0,0,.18);
}
#duelScreen.duel-search-template-mode .duel-shell::after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.03) 48%, transparent 100%);
  transform: translateX(-115%);
  animation: duelSearchSweep 3.9s ease-in-out infinite;
}
#duelScreen.duel-search-template-mode .duel-player-card.searching {
  animation: duelSearchCardFloat 2.8s ease-in-out infinite;
}
#duelScreen.duel-search-template-mode #duelSearchTimer {
  box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 0 22px rgba(78, 216, 255, .10);
  animation: duelTimerOrbit 2.4s ease-in-out infinite;
}
#duelScreen.duel-match-found-mode .duel-shell {
  animation: duelMatchFoundFlash .48s ease both;
}
#duelScreen.duel-match-found-mode #duelCountdown:not(.hidden) {
  text-shadow: 0 0 18px rgba(97, 233, 255, .26), 0 0 34px rgba(255, 213, 106, .14);
}
#gameScreen[data-live-mode="duel"] .mp-waiting-overlay {
  animation: duelWaitOverlayIn .28s ease both;
}

@keyframes duelHudSlideIn {
  from { opacity: 0; transform: translateY(-8px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes duelPanelRise {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes duelGuessReadyPulse {
  0%,100% { box-shadow: 0 18px 38px rgba(61, 214, 244, 0.26), inset 0 1px 0 rgba(255,255,255,0.34), 0 0 0 1px rgba(119, 245, 255, 0.08); }
  50% { box-shadow: 0 22px 44px rgba(61, 214, 244, 0.32), inset 0 1px 0 rgba(255,255,255,0.36), 0 0 0 1px rgba(119, 245, 255, 0.12), 0 0 24px rgba(93, 233, 255, 0.18); }
}
@keyframes duelGuessShine {
  0%, 68% { transform: translateX(-120%); }
  92%, 100% { transform: translateX(120%); }
}
@keyframes duelSearchSweep {
  0%, 72% { transform: translateX(-115%); }
  92%, 100% { transform: translateX(115%); }
}
@keyframes duelSearchCardFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes duelTimerOrbit {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes duelMatchFoundFlash {
  0% { transform: scale(.985); filter: saturate(.92); }
  45% { transform: scale(1.01); filter: saturate(1.06); }
  100% { transform: scale(1); filter: saturate(1); }
}
@keyframes duelWaitOverlayIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(.98); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (max-width: 650px) {
  #gameScreen[data-live-mode="duel"].active .hud-bar,
  #gameScreen[data-live-mode="duel"].active .clue-panel,
  #gameScreen[data-live-mode="duel"].active .map-dock {
    animation-duration: .32s;
  }
}

@media (prefers-reduced-motion: reduce) {
  #gameScreen[data-live-mode="duel"].active .hud-bar,
  #gameScreen[data-live-mode="duel"].active .clue-panel,
  #gameScreen[data-live-mode="duel"].active .map-dock,
  #gameScreen[data-live-mode="duel"] .guess-cta:not(:disabled),
  #gameScreen[data-live-mode="duel"] .guess-cta:not(:disabled)::after,
  #duelScreen.duel-search-template-mode .duel-shell::after,
  #duelScreen.duel-search-template-mode .duel-player-card.searching,
  #duelScreen.duel-search-template-mode #duelSearchTimer,
  #duelScreen.duel-match-found-mode .duel-shell,
  #gameScreen[data-live-mode="duel"] .mp-waiting-overlay {
    animation: none !important;
  }
}

/* =========================================================
   V22.53 — DESKTOP HOME / GAME-LAUNCHER POLISH
   Desktop-only visual refinement. Mobile remains unchanged.
   ========================================================= */
@media (min-width: 1101px) {
  #menuScreen.tt-lobby-home {
    background:
      radial-gradient(circle at 68% 24%, rgba(50,190,255,.10), transparent 28%),
      linear-gradient(180deg, #061724 0%, #03101a 100%) !important;
  }

  #menuScreen.tt-lobby-home .v12-bg-layer {
    background:
      radial-gradient(circle at 67% 24%, rgba(42,195,255,.24), transparent 26%),
      radial-gradient(circle at 78% 80%, rgba(67,227,190,.08), transparent 27%),
      linear-gradient(180deg,#071a2d 0%,#061522 62%,#03101a 100%) !important;
  }

  #menuScreen .tt-lobby-shell {
    max-width: 1680px !important;
    padding: 14px 24px 18px !important;
    gap: 14px !important;
  }

  /* Header / launcher navigation */
  #menuScreen .tt-lobby-topbar {
    min-height: 66px;
    padding: 8px 12px 8px 18px;
    border-radius: 20px;
    border: 1px solid rgba(103,204,255,.16);
    background:
      linear-gradient(180deg, rgba(9,34,57,.88), rgba(5,23,40,.84));
    box-shadow:
      0 14px 38px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.045),
      0 0 0 1px rgba(50,177,255,.025);
  }

  #menuScreen .tt-lobby-topbar .v12-brand {
    padding: 0 8px 0 2px;
    transition: transform .18s ease, filter .18s ease;
  }
  #menuScreen .tt-lobby-topbar .v12-brand:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
  }
  #menuScreen .tt-lobby-topbar .v12-brand img {
    width: 218px;
    max-height: 54px;
  }

  #menuScreen .v12-nav {
    gap: 5px;
    padding: 4px;
    border: 1px solid rgba(255,255,255,.045);
    border-radius: 15px;
    background: rgba(2,13,23,.34);
  }
  #menuScreen .v12-nav-btn {
    min-height: 38px;
    padding: 0 13px;
    border-radius: 11px;
    color: #9fb6c9;
    transition: transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease;
  }
  #menuScreen .v12-nav-btn:hover {
    transform: translateY(-1px);
    color: #effaff;
    background: rgba(83,201,255,.07);
  }
  #menuScreen .v12-nav-btn.active {
    color: #fff;
    border-color: rgba(91,215,255,.20);
    background: linear-gradient(145deg, rgba(37,160,224,.20), rgba(14,73,113,.16));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 20px rgba(0,0,0,.14);
  }

  #menuScreen .v12-top-actions {
    gap: 8px;
  }
  #menuScreen .v12-wallet,
  #menuScreen .v12-account {
    border-color: rgba(255,255,255,.075);
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }
  #menuScreen .v12-wallet {
    min-height: 46px;
    padding: 6px 12px;
  }
  #menuScreen .v12-google-login {
    min-height: 42px;
    padding: 5px 10px;
    border-radius: 13px;
    font-size: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,.14);
  }
  #menuScreen .v12-account {
    min-height: 48px;
    padding: 5px 8px 5px 6px;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
  }
  #menuScreen .v12-account:hover {
    transform: translateY(-1px);
    border-color: rgba(91,215,255,.22);
    background: rgba(71,173,226,.07);
  }

  /* Main hero becomes the clear focal point */
  #menuScreen .tt-lobby-main {
    gap: 14px;
  }
  #menuScreen .tt-lobby-hero {
    border-radius: 30px;
    border-color: rgba(104,204,255,.18);
    box-shadow:
      0 28px 75px rgba(0,0,0,.31),
      inset 0 1px 0 rgba(255,255,255,.035),
      0 0 0 1px rgba(69,184,255,.025);
  }
  #menuScreen .tt-lobby-room-art {
    inset: -5%;
    filter: saturate(1.02) brightness(.65) contrast(1.03);
    transform: scale(1.025);
  }
  #menuScreen .tt-lobby-scrim {
    background:
      linear-gradient(90deg,rgba(3,19,37,.985) 0%,rgba(5,27,49,.93) 29%,rgba(6,39,62,.34) 54%,rgba(7,32,49,.22) 72%,rgba(3,17,29,.74) 100%),
      linear-gradient(180deg,rgba(26,157,255,.035),rgba(2,14,24,.20));
  }

  #menuScreen .tt-lobby-copy {
    left: clamp(34px, 4.4vw, 74px);
    width: min(500px, 34vw);
  }
  #menuScreen .tt-lobby-copy .v12-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 10px;
    margin-bottom: 13px;
    border: 1px solid rgba(91,215,255,.15);
    border-radius: 999px;
    background: rgba(32,147,200,.08);
    color: #87e6ff;
    font-size: 9px;
    letter-spacing: .25em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  }
  #menuScreen .tt-lobby-copy h1 {
    font-size: clamp(48px,4.7vw,78px);
    line-height: .89;
    letter-spacing: -.06em;
    text-shadow: 0 12px 32px rgba(0,0,0,.34);
  }
  #menuScreen .tt-lobby-copy h1 span {
    background: linear-gradient(90deg,#78efff,#4ccfff 55%,#81f1c4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
  }
  #menuScreen .tt-lobby-lead {
    margin: 16px 0 17px;
    max-width: 455px;
    color: #cee0ed;
  }

  /* Player status panel */
  #menuScreen .tt-player-summary {
    padding: 11px 14px;
    border-radius: 20px;
    border-color: rgba(103,207,255,.22);
    background:
      linear-gradient(145deg,rgba(9,43,71,.90),rgba(5,25,44,.86));
    box-shadow:
      0 14px 32px rgba(0,0,0,.20),
      inset 0 1px rgba(255,255,255,.045);
  }
  #menuScreen .tt-player-portrait {
    border-color: rgba(87,221,255,.70);
    box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 0 22px rgba(44,210,255,.19);
  }
  #menuScreen .tt-player-xp>div {
    height: 7px;
    background: rgba(5,21,34,.76);
  }
  #menuScreen .tt-player-xp i {
    background: linear-gradient(90deg,#20caff,#65eaff,#72f0ba);
  }

  /* Main CTA */
  #menuScreen .tt-play-now {
    min-height: 76px;
    margin-top: 13px;
    border-radius: 23px;
    border-color: rgba(224,252,255,.80);
    background: linear-gradient(135deg,#31dff5 0%,#1598ff 48%,#446cf1 100%);
    box-shadow:
      0 0 0 1px rgba(116,235,255,.10),
      0 0 32px rgba(0,177,255,.30),
      0 18px 36px rgba(0,54,124,.31),
      inset 0 1px rgba(255,255,255,.52);
  }
  #menuScreen .tt-play-now:hover {
    transform: translateY(-2px) scale(1.006);
    box-shadow:
      0 0 0 1px rgba(159,246,255,.18),
      0 0 38px rgba(0,203,255,.42),
      0 22px 40px rgba(0,57,130,.36),
      inset 0 1px rgba(255,255,255,.62);
  }
  #menuScreen .tt-play-now strong {
    font-size: 26px;
    letter-spacing: -.02em;
  }
  #menuScreen .tt-play-now small {
    color: #e4f8ff;
  }

  #menuScreen .tt-avatar-actions {
    gap: 8px;
  }
  #menuScreen .tt-avatar-actions button {
    border-color: rgba(91,198,255,.24);
    background: linear-gradient(145deg,rgba(9,43,70,.75),rgba(5,26,45,.72));
    color: #dceef8;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  }

  /* Avatar hero staging */
  #menuScreen .tt-lobby-character {
    left: 46.5%;
    width: 32.5%;
  }
  #menuScreen .tt-lobby-character::before {
    inset: 8% 4% 11% !important;
    background:
      radial-gradient(ellipse at 50% 45%, rgba(6,28,52,.28) 0%, rgba(8,31,57,.17) 34%, rgba(9,36,64,0) 70%),
      radial-gradient(ellipse at 50% 78%, rgba(55,213,255,.17) 0%, rgba(44,204,255,.04) 35%, rgba(44,204,255,0) 66%) !important;
  }
  #menuScreen .tt-character-halo {
    width: 88% !important;
    bottom: 15% !important;
    opacity: .92;
  }
  #menuScreen .tt-lobby-platform {
    width: 72% !important;
    bottom: 7.5% !important;
    box-shadow: 0 0 30px rgba(60,207,255,.25), 0 15px 28px rgba(0,0,0,.20) !important;
  }
  #menuScreen .tt-lobby-character .v12-rotate-copy {
    bottom: 2.3%;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(3,18,31,.40);
    border: 1px solid rgba(101,213,255,.10);
  }

  /* Launcher mode cards */
  #menuScreen .tt-mode-row {
    gap: 12px;
    min-height: 118px;
  }
  #menuScreen .tt-mode-card {
    min-height: 118px;
    border-radius: 21px;
    border-color: rgba(137,218,255,.27);
    box-shadow: 0 14px 30px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.05);
  }
  #menuScreen .tt-mode-card:hover {
    transform: translateY(-4px) scale(1.008);
    border-color: rgba(151,231,255,.55);
    box-shadow:
      0 22px 42px rgba(0,0,0,.28),
      0 0 0 1px rgba(168,237,255,.08),
      inset 0 1px 0 rgba(255,255,255,.15);
  }
  #menuScreen .tt-mode-card strong {
    font-size: 17px;
  }
  #menuScreen .tt-mode-card small {
    margin-top: 6px;
    color: #e7f3f9;
    opacity: .91;
  }
  #menuScreen .tt-mode-icon {
    width: 46px;
    height: 46px;
    border-radius: 15px;
  }
  #menuScreen .tt-mode-duel {
    border-color: rgba(118,196,255,.34);
  }
  #menuScreen .tt-mode-daily.daily-completed {
    border-color: rgba(127,240,202,.42) !important;
  }

  /* Bottom collection strip */
  #menuScreen .tt-avatar-progress-row {
    gap: 12px;
    min-height: 88px;
  }
  #menuScreen .tt-next-unlock,
  #menuScreen .tt-featured-skins {
    border-radius: 20px;
    border-color: rgba(95,182,240,.16);
    background:
      linear-gradient(145deg,rgba(7,31,51,.88),rgba(5,22,38,.84));
    box-shadow: 0 12px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035);
  }
  #menuScreen .tt-next-unlock {
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
  }
  #menuScreen .tt-next-unlock:hover {
    transform: translateY(-2px);
    border-color: rgba(96,216,255,.32);
    background: linear-gradient(145deg,rgba(9,40,65,.92),rgba(5,26,44,.88));
  }
  #menuScreen .tt-featured-list button {
    border-color: rgba(91,195,255,.16);
    background: linear-gradient(145deg,#102e47,#081824);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  }
  #menuScreen .tt-featured-list button:hover {
    transform: translateY(-3px) scale(1.025);
    border-color: rgba(101,222,255,.44);
    box-shadow: 0 10px 20px rgba(0,0,0,.16), 0 0 18px rgba(78,214,255,.08);
  }
}

@media (min-width: 1101px) and (max-height: 790px) {
  #menuScreen .tt-lobby-topbar { min-height: 58px; }
  #menuScreen .tt-lobby-topbar .v12-brand img { width: 190px; }
  #menuScreen .tt-lobby-copy h1 { font-size: clamp(40px,4vw,62px); }
  #menuScreen .tt-play-now { min-height: 62px; }
  #menuScreen .tt-mode-row { min-height: 96px; }
  #menuScreen .tt-mode-card { min-height: 96px; }
  #menuScreen .tt-avatar-progress-row { min-height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  #menuScreen .tt-play-now:after { animation: none !important; }
}

/* =========================================================
   V22.54 — MOBILE DUEL SEARCH TIMER FIX
   Tighten the mobile searching timer on iPhone/mobile web so it stays
   visually centered, smaller, and cleaner above the Leave Game button.
   ========================================================= */
@media (max-width: 650px) {
  #duelScreen.duel-search-template-mode #duelSearchTimer {
    left: 50% !important;
    top: 66.3% !important;
    transform: translateX(-50%) !important;
    width: min(76%, 286px) !important;
    max-width: 286px;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 0 15px !important;
    gap: 10px !important;
    justify-content: space-between !important;
    box-sizing: border-box;
    font-size: clamp(22px, 7vw, 31px) !important;
    border-radius: 999px;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer::before {
    font-size: 8px !important;
    letter-spacing: 0.18em !important;
    flex: 0 0 auto;
  }
}

@media (max-width: 430px) {
  #duelScreen.duel-search-template-mode #duelSearchTimer {
    width: min(74%, 272px) !important;
    top: 65.9% !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    gap: 9px !important;
    font-size: clamp(20px, 6.6vw, 29px) !important;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer::after {
    inset: -8px -10px !important;
  }
}

/* =========================================================
   V22.55 — PROFILE AVATAR HEAD ZOOM
   Make the profile portrait focus more on the explorer's head/upper body
   instead of showing too much of the full body.
   ========================================================= */
#profileAvatarLarge {
  overflow: hidden;
}

#profileAvatarLarge .avatar-skin-image {
  height: 192% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center 2% !important;
  transform: translate3d(var(--avatar-profile-x, 0px), calc(var(--avatar-profile-y, 14px) + 28px), 0) scale(1.2) !important;
  transform-origin: 50% 8% !important;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.30)) !important;
}

@media (max-width: 700px) {
  #profileAvatarLarge .avatar-skin-image {
    height: 198% !important;
    object-position: center 1% !important;
    transform: translate3d(var(--avatar-profile-x, 0px), calc(var(--avatar-profile-y, 14px) + 30px), 0) scale(1.22) !important;
  }
}

/* =========================================================
   V22.56 — MOBILE ROUND COMPLETE ONE-SCREEN FIT
   Compress the multiplayer round-result screen on mobile web so the
   content fits much closer to one viewport from top to bottom.
   ========================================================= */
@media (max-width: 540px) {
  #mpResultScreen {
    padding: 8px;
  }

  #mpResultScreen .result-shell {
    min-height: calc(100dvh - 16px);
    padding: 12px 10px 10px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: flex-start;
    overflow: hidden;
  }

  #mpResultScreen .result-header {
    margin-bottom: 0;
    gap: 10px;
  }

  #mpResultScreen .eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
  }

  #mpResultTitle {
    margin-top: 2px;
    font-size: clamp(1.95rem, 9vw, 2.35rem);
    line-height: 0.96;
  }

  #mpResultLocation {
    font-size: 0.84rem;
    line-height: 1.35;
  }

  #mpResultScreen .score-badge {
    padding: 12px 14px;
    border-radius: 18px;
  }

  #mpResultScreen .score-badge strong {
    margin-top: 6px;
    font-size: clamp(2rem, 10vw, 2.45rem);
  }

  #mpResultMap {
    height: clamp(150px, 24vh, 210px);
    min-height: 150px;
    border-radius: 20px;
  }

  #mpResultScreen .mp-leaderboard-wrap {
    margin-top: 0;
    padding: 12px 10px;
    border-radius: 20px;
  }

  #mpResultScreen .mp-leaderboard {
    gap: 8px;
    margin-top: 10px;
  }

  #mpResultScreen .mp-leader-row {
    grid-template-columns: 42px minmax(0,1fr) auto;
    gap: 8px;
    padding: 10px 10px;
    border-radius: 15px;
  }

  #mpResultScreen .mp-rank {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 14px;
  }

  #mpResultScreen .mp-player-copy {
    gap: 8px;
  }

  #mpResultScreen .mp-player-name {
    gap: 6px;
    font-size: 0.95rem;
    line-height: 1.05;
  }

  #mpResultScreen .mp-player-name .country-flag {
    transform: scale(0.92);
    transform-origin: left center;
  }

  #mpResultScreen .mp-round-points {
    min-width: 0;
    font-size: 1rem;
  }

  #mpResultScreen .mp-total-points {
    margin-top: -4px;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 11px;
  }

  #mpResultScreen .mp-result-actions {
    margin-top: auto;
    padding-top: 2px;
  }

  #mpResultScreen .mp-result-actions .btn {
    min-width: 0;
    width: 100%;
    min-height: 46px;
    border-radius: 15px;
    font-size: 0.98rem;
  }

  #mpResultStatus {
    margin-top: 6px;
    font-size: 0.78rem;
    line-height: 1.3;
    text-align: center;
  }
}

@media (max-width: 430px) and (max-height: 920px) {
  #mpResultScreen .result-shell {
    min-height: calc(100dvh - 12px);
    padding: 10px 8px 8px;
    gap: 8px;
  }

  #mpResultTitle {
    font-size: clamp(1.8rem, 8.2vw, 2.2rem);
  }

  #mpResultLocation {
    font-size: 0.8rem;
  }

  #mpResultScreen .score-badge {
    padding: 10px 12px;
  }

  #mpResultMap {
    height: clamp(138px, 22vh, 188px);
    min-height: 138px;
  }

  #mpResultScreen .mp-leaderboard-wrap {
    padding: 10px 8px;
  }

  #mpResultScreen .mp-leader-row {
    padding: 9px 8px;
    gap: 7px;
  }

  #mpResultScreen .mp-rank {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }

  #mpResultScreen .mp-player-name {
    font-size: 0.91rem;
  }

  #mpResultScreen .mp-round-points {
    font-size: 0.95rem;
  }

  #mpResultScreen .mp-result-actions .btn {
    min-height: 42px;
  }

  #mpResultStatus {
    font-size: 0.74rem;
  }
}

/* =========================================================
   V22.60 — MOBILE LANDSCAPE TOP UI + GAMEPLAY DECLUTTER
   1) Clean up the lobby header alignment in phone/tablet landscape.
   2) Make the in-game landscape HUD less cluttered and more view-first.
   ========================================================= */
@media (max-width: 980px) and (orientation: landscape) and (max-height: 560px) {
  /* ---------- Lobby / home topbar ---------- */
  #menuScreen .v12-home-shell {
    gap: 8px !important;
    padding-top: calc(6px + var(--tt-safe-top)) !important;
  }

  #menuScreen .tt-lobby-topbar,
  #menuScreen .v12-topbar {
    display: grid !important;
    grid-template-columns: auto auto minmax(0,1fr) !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    min-height: 52px !important;
    padding: 6px 8px !important;
    border-radius: 16px !important;
  }

  #menuScreen .tt-lobby-topbar .v12-brand,
  #menuScreen .v12-topbar .v12-brand {
    min-width: auto !important;
    align-self: center !important;
  }

  #menuScreen .tt-lobby-topbar .v12-brand img,
  #menuScreen .v12-topbar .v12-brand img {
    width: 64px !important;
    max-width: none !important;
    max-height: 32px !important;
    object-fit: contain;
  }

  #menuScreen .tt-lobby-topbar .v12-nav,
  #menuScreen .v12-topbar .v12-nav {
    display: flex !important;
    grid-column: auto !important;
    order: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    width: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    scrollbar-width: none;
  }

  #menuScreen .tt-lobby-topbar .v12-nav::-webkit-scrollbar,
  #menuScreen .v12-topbar .v12-nav::-webkit-scrollbar {
    display: none;
  }

  #menuScreen .tt-lobby-topbar .v12-nav-btn,
  #menuScreen .v12-topbar .v12-nav-btn {
    min-width: 30px !important;
    width: 30px !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    flex: 0 0 auto;
  }

  #menuScreen .tt-lobby-topbar .v12-top-actions,
  #menuScreen .v12-topbar .v12-top-actions {
    display: flex !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    overflow: hidden;
  }

  #menuScreen .v12-wallet {
    min-height: 34px !important;
    padding: 4px 8px !important;
    gap: 6px !important;
    border-radius: 11px !important;
    flex: 0 0 auto;
  }

  #menuScreen .coin-orb {
    width: 21px !important;
    height: 21px !important;
    font-size: 11px !important;
  }

  #menuScreen .v12-wallet strong {
    font-size: 12px !important;
    line-height: 1;
  }

  #menuScreen .v12-wallet span:last-child {
    font-size: 8px !important;
  }

  #menuScreen .v12-google-login {
    min-height: 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    border-radius: 11px !important;
    justify-content: center !important;
    gap: 0 !important;
    flex: 0 0 auto;
  }

  #menuScreen .v12-google-login span:last-child {
    display: none !important;
  }

  #menuScreen .google-g {
    width: 20px !important;
    height: 20px !important;
    font-size: 11px !important;
  }

  #menuScreen .v12-account {
    min-height: 34px !important;
    max-width: 134px !important;
    padding: 4px 6px !important;
    gap: 5px !important;
    border-radius: 11px !important;
    flex: 1 1 auto;
    min-width: 0 !important;
  }

  #menuScreen .v12-avatar-chip {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 9px !important;
  }

  #menuScreen .v12-account strong {
    font-size: .72rem !important;
    max-width: 56px !important;
  }

  #menuScreen .v12-account small {
    font-size: .5rem !important;
  }

  #menuScreen .account-chevron {
    display: block !important;
    font-size: 12px !important;
    opacity: .75;
  }

  /* ---------- In-game landscape HUD ---------- */
  #gameScreen .hud-bar {
    top: calc(4px + var(--tt-safe-top)) !important;
    left: calc(5px + var(--tt-safe-left)) !important;
    right: auto !important;
    width: min(360px, calc(100vw - 10px - var(--tt-safe-left) - var(--tt-safe-right))) !important;
    min-height: 38px !important;
    grid-template-columns: 34px minmax(0,1fr) !important;
    padding: 3px 5px !important;
    gap: 5px !important;
    border-radius: 13px !important;
    background: rgba(4, 19, 31, .56) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  #gameScreen .hud-brand {
    min-height: 32px !important;
    width: 34px !important;
    min-width: 34px !important;
    justify-content: center !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 11px !important;
  }

  #gameScreen .brand-home-btn {
    width: 34px !important;
    height: 32px !important;
    min-width: 34px !important;
    border-radius: 10px !important;
  }

  #gameScreen .brand-logo-hud {
    width: 27px !important;
    height: 27px !important;
  }

  #gameScreen .hud-brand-copy,
  #gameScreen .hud-center {
    display: none !important;
  }

  #gameScreen .hud-metrics {
    min-height: 32px !important;
    padding: 0 !important;
    gap: 4px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #gameScreen .metric-card {
    min-width: 54px !important;
    min-height: 32px !important;
    padding: 4px 6px !important;
    border-radius: 10px !important;
    background: rgba(7, 24, 38, .84) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
  }

  #gameScreen .metric-card span {
    display: none !important;
  }

  #gameScreen .metric-card strong {
    margin-top: 0 !important;
    font-size: 11px !important;
    letter-spacing: -.02em;
  }

  #gameScreen .metric-card-time {
    min-width: 70px !important;
    padding-right: 24px !important;
  }

  #gameScreen .timer-ring {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%);
  }

  #gameScreen .timer-ring::after {
    inset: 3px !important;
  }

  #gameScreen .map-dock {
    left: auto !important;
    right: calc(6px + var(--tt-safe-right)) !important;
    bottom: calc(6px + var(--tt-safe-bottom)) !important;
    width: min(38vw, 292px) !important;
    padding: 6px !important;
    gap: 6px !important;
    grid-template-columns: minmax(0,1fr) 58px !important;
    border-radius: 16px !important;
    background: rgba(4, 20, 32, .68) !important;
    box-shadow: 0 14px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  #gameScreen .mini-map-card {
    padding: 0 !important;
    border-radius: 13px !important;
  }

  #gameScreen .mini-map-head,
  #gameScreen .guess-status {
    display: none !important;
  }

  #gameScreen .map {
    height: 94px !important;
    border-radius: 11px !important;
  }

  #gameScreen .map-foot {
    min-height: 0 !important;
    margin: 0 !important;
  }

  #gameScreen .guess-cta {
    min-height: 58px !important;
    height: 58px !important;
    padding: 6px 4px !important;
    gap: 2px !important;
    border-radius: 13px !important;
    font-size: .58rem !important;
    letter-spacing: .08em !important;
  }

  #gameScreen .guess-cta-icon {
    font-size: 1rem !important;
  }

  #gameScreen .street-status {
    width: min(78vw, 330px) !important;
    padding: 14px !important;
  }

  #gameScreen .street-status h3 {
    font-size: 1.05rem !important;
  }

  #gameScreen .street-status p {
    font-size: .7rem !important;
  }
}

/* =========================================================
   DUEL RESPONSIVE PLAYER LAYOUT — CONSOLIDATED FINAL
   Single source of truth for Finding Match / Match Found cards.
   Base/mobile landscape reference + desktop centered stack + portrait stack.
   Replaces legacy V22.57, V22.58, V22.59, V22.61, V22.62 and V22.63 overrides.
   ========================================================= */
#duelScreen.duel-search-template-mode .duel-player-card,
#duelScreen.duel-match-found-mode .duel-player-card {
  display: grid !important;
  align-content: center !important;
  align-items: center !important;
  row-gap: 8px !important;
  column-gap: 14px !important;
  overflow: hidden !important;
}

#duelScreen.duel-search-template-mode .duel-player-card.me,
#duelScreen.duel-match-found-mode .duel-player-card.me {
  grid-template-columns: clamp(92px, 9vw, 138px) minmax(0, 1fr) !important;
  grid-template-areas:
    "avatar name"
    "avatar status" !important;
  padding: 0 8.5% 0 11% !important;
  justify-items: start !important;
}

#duelScreen.duel-search-template-mode .duel-player-card.opponent,
#duelScreen.duel-match-found-mode .duel-player-card.opponent {
  grid-template-columns: minmax(0, 1fr) clamp(92px, 9vw, 138px) !important;
  grid-template-areas:
    "name avatar"
    "status avatar" !important;
  padding: 0 11% 0 8.5% !important;
  justify-items: end !important;
}

#duelScreen.duel-search-template-mode .duel-player-card .duel-avatar,
#duelScreen.duel-match-found-mode .duel-player-card .duel-avatar {
  grid-area: avatar !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  align-self: center !important;
}

#duelScreen.duel-search-template-mode .duel-player-card.me .duel-avatar,
#duelScreen.duel-match-found-mode .duel-player-card.me .duel-avatar {
  justify-self: start !important;
}

#duelScreen.duel-search-template-mode .duel-player-card.opponent .duel-avatar,
#duelScreen.duel-match-found-mode .duel-player-card.opponent .duel-avatar {
  justify-self: end !important;
}

#duelScreen.duel-search-template-mode .duel-player-card .duel-player-name-row,
#duelScreen.duel-match-found-mode .duel-player-card .duel-player-name-row {
  grid-area: name !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

#duelScreen.duel-search-template-mode .duel-player-card.me .duel-player-name-row,
#duelScreen.duel-match-found-mode .duel-player-card.me .duel-player-name-row {
  justify-content: flex-start !important;
  text-align: left !important;
}

#duelScreen.duel-search-template-mode .duel-player-card.opponent .duel-player-name-row,
#duelScreen.duel-match-found-mode .duel-player-card.opponent .duel-player-name-row {
  justify-content: flex-end !important;
  text-align: right !important;
}

#duelScreen.duel-search-template-mode .duel-player-card .duel-player-name-row strong,
#duelScreen.duel-match-found-mode .duel-player-card .duel-player-name-row strong {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#duelScreen.duel-search-template-mode .duel-player-card > span,
#duelScreen.duel-match-found-mode .duel-player-card > span {
  grid-area: status !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  line-height: 1.15 !important;
}

#duelScreen.duel-search-template-mode .duel-player-card.me > span,
#duelScreen.duel-match-found-mode .duel-player-card.me > span {
  text-align: left !important;
}

#duelScreen.duel-search-template-mode .duel-player-card.opponent > span,
#duelScreen.duel-match-found-mode .duel-player-card.opponent > span {
  text-align: right !important;
}

@media (max-width: 900px) {
  #duelScreen.duel-search-template-mode .duel-player-card.me,
  #duelScreen.duel-match-found-mode .duel-player-card.me {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    padding: 0 7.5% 0 9.5% !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card.opponent,
  #duelScreen.duel-match-found-mode .duel-player-card.opponent {
    grid-template-columns: minmax(0, 1fr) 92px !important;
    padding: 0 9.5% 0 7.5% !important;
  }
}

@media (max-width: 650px) {
  #duelScreen.duel-search-template-mode .duel-player-card,
  #duelScreen.duel-match-found-mode .duel-player-card {
    row-gap: 4px !important;
    column-gap: 8px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card.me,
  #duelScreen.duel-match-found-mode .duel-player-card.me {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    padding: 0 5% 0 8% !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card.opponent,
  #duelScreen.duel-match-found-mode .duel-player-card.opponent {
    grid-template-columns: minmax(0, 1fr) 64px !important;
    padding: 0 8% 0 5% !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card .duel-player-name-row,
  #duelScreen.duel-match-found-mode .duel-player-card .duel-player-name-row {
    gap: 4px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card .duel-player-name-row strong,
  #duelScreen.duel-match-found-mode .duel-player-card .duel-player-name-row strong {
    font-size: 12px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card > span,
  #duelScreen.duel-match-found-mode .duel-player-card > span {
    font-size: 6.5px !important;
    letter-spacing: .08em !important;
  }
}

@media (max-width: 430px) {
  #duelScreen.duel-search-template-mode .duel-player-card.me,
  #duelScreen.duel-match-found-mode .duel-player-card.me {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    padding: 0 4% 0 6.5% !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card.opponent,
  #duelScreen.duel-match-found-mode .duel-player-card.opponent {
    grid-template-columns: minmax(0, 1fr) 58px !important;
    padding: 0 6.5% 0 4% !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card .duel-player-name-row strong,
  #duelScreen.duel-match-found-mode .duel-player-card .duel-player-name-row strong {
    font-size: 11px !important;
  }
}


@media (min-width: 651px) {
  #duelScreen.duel-search-template-mode .duel-player-card,
  #duelScreen.duel-match-found-mode .duel-player-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    gap: 6px !important;
    padding: 8.5% 4% 5.5% !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card.me,
  #duelScreen.duel-match-found-mode .duel-player-card.me,
  #duelScreen.duel-search-template-mode .duel-player-card.opponent,
  #duelScreen.duel-match-found-mode .duel-player-card.opponent {
    padding-left: 4% !important;
    padding-right: 4% !important;
    justify-items: initial !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card .duel-avatar,
  #duelScreen.duel-match-found-mode .duel-player-card .duel-avatar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 2 !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-name-row,
  #duelScreen.duel-match-found-mode .duel-player-name-row {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 98% !important;
    margin: 2px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-align: center !important;
    z-index: 3 !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-name-row strong,
  #duelScreen.duel-match-found-mode .duel-player-name-row strong {
    display: inline-block !important;
    max-width: 112px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card > span,
  #duelScreen.duel-match-found-mode .duel-player-card > span {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    text-align: center !important;
    z-index: 3 !important;
  }
}


@media (max-width: 650px) and (orientation: portrait) {
  #duelScreen.duel-search-template-mode .duel-player-card,
  #duelScreen.duel-match-found-mode .duel-player-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 4px !important;
    padding: 6px 4px 2px !important;
    overflow: hidden !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card .duel-avatar,
  #duelScreen.duel-match-found-mode .duel-player-card .duel-avatar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 14px !important;
    z-index: 2 !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card .duel-avatar .dedicated-duel-avatar-image,
  #duelScreen.duel-match-found-mode .duel-player-card .duel-avatar .dedicated-duel-avatar-image {
    height: 116% !important;
    max-height: 116% !important;
    bottom: -2px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-name-row,
  #duelScreen.duel-match-found-mode .duel-player-name-row {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    width: auto !important;
    max-width: 94% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    text-align: center !important;
    z-index: 3 !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-flag,
  #duelScreen.duel-match-found-mode .duel-player-flag {
    width: 18px !important;
    height: 12px !important;
    border-radius: 2px !important;
    flex: 0 0 auto !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-name-row strong,
  #duelScreen.duel-match-found-mode .duel-player-name-row strong {
    max-width: 64px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card > span,
  #duelScreen.duel-match-found-mode .duel-player-card > span {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    width: auto !important;
    max-width: 94% !important;
    margin: 0 !important;
    font-size: 6px !important;
    line-height: 1.1 !important;
    letter-spacing: .08em !important;
    text-align: center !important;
    z-index: 3 !important;
  }
}

@media (max-width: 430px) and (orientation: portrait) {
  #duelScreen.duel-search-template-mode .duel-player-card,
  #duelScreen.duel-match-found-mode .duel-player-card {
    gap: 3px !important;
    padding: 4px 2px 0 !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card .duel-avatar,
  #duelScreen.duel-match-found-mode .duel-player-card .duel-avatar {
    width: 54px !important;
    height: 54px !important;
    border-radius: 13px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-name-row strong,
  #duelScreen.duel-match-found-mode .duel-player-name-row strong {
    max-width: 58px !important;
    font-size: 9px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card > span,
  #duelScreen.duel-match-found-mode .duel-player-card > span {
    font-size: 5.6px !important;
  }
}

/* V22.64 — Desktop hover-lock guess map + same-map result continuity */
@media (min-width: 821px) {
  #gameScreen .map-dock {
    transition: width .24s ease, transform .24s ease, bottom .24s ease, right .24s ease;
    transform-origin: bottom right;
  }

  #gameScreen .mini-map-card {
    transition: box-shadow .24s ease, border-color .24s ease;
  }

  #gameScreen .map-dock.desktop-map-locked {
    width: min(720px, 48vw) !important;
    right: 22px !important;
    bottom: 22px !important;
    z-index: 45;
  }

  #gameScreen .map-dock.desktop-map-locked .mini-map-card {
    border-color: rgba(95, 226, 255, .32);
    box-shadow: 0 28px 70px rgba(0,0,0,.42), 0 0 0 1px rgba(67,227,234,.08), inset 0 1px 0 rgba(255,255,255,.05);
  }

  #gameScreen .map-dock.desktop-map-locked .map {
    height: min(52vh, 500px) !important;
  }

  #gameScreen .map-dock.desktop-map-locked .expand-map-btn {
    display: inline-grid !important;
  }

  #resultMap > #map,
  #mpResultMap > #map,
  #map.desktop-result-live-map {
    width: 100% !important;
    height: 100% !important;
    min-height: 430px;
    border: 0 !important;
    border-radius: inherit !important;
  }

  #resultMap:has(> #map),
  #mpResultMap:has(> #map) {
    min-height: 430px;
  }
}


/* V22.66 — Solo final screen Round 5 result map */
.solo-final-round5-card {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(92, 211, 255, .18);
  border-radius: 20px;
  background: rgba(6, 23, 38, .58);
  text-align: left;
  overflow: hidden;
}
.solo-final-round5-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.solo-final-round5-head > div { display: flex; flex-direction: column; gap: 3px; }
.solo-final-round5-head strong { font-size: 15px; }
.solo-final-round5-location {
  max-width: 55%;
  color: #b7cad8;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.solo-final-round5-map {
  width: 100%;
  height: clamp(280px, 38vh, 420px);
  border-radius: 16px;
  overflow: hidden;
  background: #0b2232;
}
.solo-final-round5-map > #map,
#soloFinalRound5Map > #map.desktop-result-live-map {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border-radius: inherit !important;
}
@media (max-width: 820px) {
  .solo-final-round5-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  .solo-final-round5-location { max-width: 100%; text-align: left; white-space: normal; }
  .solo-final-round5-map { height: 300px; }
}

/* V22.65 — DUEL top HUD follows the Solo/Daily HUD layout */
#gameScreen[data-live-mode="duel"] .hud-bar {
  top: 12px !important;
  left: 14px !important;
  right: 14px !important;
  min-height: 58px !important;
  padding: 0 !important;
  gap: 12px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#gameScreen[data-live-mode="duel"] .hud-brand,
#gameScreen[data-live-mode="duel"] .hud-center,
#gameScreen[data-live-mode="duel"] .hud-metrics {
  min-height: 58px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(126,214,255,.14) !important;
  background: rgba(4,19,31,.78) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.035) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

#gameScreen[data-live-mode="duel"] .hud-brand {
  min-width: 0 !important;
  padding: 7px 13px 7px 8px !important;
  gap: 9px !important;
}
#gameScreen[data-live-mode="duel"] .brand-home-btn {
  width: 46px !important;
  height: 44px !important;
  min-width: 46px !important;
  border-radius: 14px !important;
  padding: 0 !important;
  border-color: rgba(255,255,255,.06) !important;
  background: rgba(255,255,255,.025) !important;
}
#gameScreen[data-live-mode="duel"] .brand-logo-hud {
  width: 39px !important;
  height: 39px !important;
  object-fit: contain !important;
}
#gameScreen[data-live-mode="duel"] .hud-brand-copy strong {
  font-size: 16px !important;
  letter-spacing: -.03em !important;
}
#gameScreen[data-live-mode="duel"] .hud-brand-copy span {
  font-size: 6.8px !important;
  letter-spacing: .18em !important;
  opacity: .72 !important;
  color: inherit !important;
}

#gameScreen[data-live-mode="duel"] .hud-center {
  justify-self: center !important;
  width: max-content !important;
  padding: 7px !important;
  align-items: center !important;
  gap: 8px !important;
}
#gameScreen[data-live-mode="duel"] .mode-pill {
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 15px !important;
  border-radius: 13px !important;
  border-color: rgba(72,220,234,.22) !important;
  background: linear-gradient(145deg, rgba(67,227,234,.10), rgba(255,255,255,.025)) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
  color: inherit !important;
}
#gameScreen[data-live-mode="duel"] .leave-game-btn {
  min-height: 42px !important;
  padding: 0 13px !important;
  border-radius: 13px !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
  box-shadow: none !important;
}

#gameScreen[data-live-mode="duel"] .hud-metrics {
  gap: 6px !important;
  padding: 7px !important;
}
#gameScreen[data-live-mode="duel"] .metric-card {
  min-width: 92px !important;
  min-height: 42px !important;
  padding: 6px 10px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  background: rgba(255,255,255,.032) !important;
  box-shadow: none !important;
}
#gameScreen[data-live-mode="duel"] .metric-card span {
  font-size: 7px !important;
  letter-spacing: .14em !important;
  opacity: .74 !important;
  color: inherit !important;
}
#gameScreen[data-live-mode="duel"] .metric-card strong {
  margin-top: 2px !important;
  font-size: 15px !important;
  letter-spacing: normal !important;
  color: inherit !important;
}
#gameScreen[data-live-mode="duel"] .metric-card:nth-child(1),
#gameScreen[data-live-mode="duel"] .metric-card:nth-child(2),
#gameScreen[data-live-mode="duel"] .metric-card-time {
  border-color: rgba(255,255,255,.06) !important;
  background: rgba(255,255,255,.032) !important;
}
#gameScreen[data-live-mode="duel"] .metric-card-time {
  min-width: 104px !important;
  padding-right: 36px !important;
}
#gameScreen[data-live-mode="duel"] .timer-ring {
  right: 8px !important;
  width: 24px !important;
  height: 24px !important;
  box-shadow: none !important;
}
#gameScreen[data-live-mode="duel"] .timer-ring::after {
  inset: 3px !important;
  background: inherit !important;
}

@media (max-width: 650px) {
  #gameScreen[data-live-mode="duel"] .hud-bar {
    top: calc(4px + var(--tt-safe-top)) !important;
    left: calc(5px + var(--tt-safe-left)) !important;
    right: auto !important;
    width: min(360px, calc(100vw - 10px - var(--tt-safe-left) - var(--tt-safe-right))) !important;
    min-height: 38px !important;
    grid-template-columns: 34px minmax(0,1fr) !important;
    padding: 3px 5px !important;
    gap: 5px !important;
    border-radius: 13px !important;
    background: rgba(4, 19, 31, .56) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  #gameScreen[data-live-mode="duel"] .hud-brand {
    min-height: 32px !important;
    width: 34px !important;
    min-width: 34px !important;
    justify-content: center !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 11px !important;
  }

  #gameScreen[data-live-mode="duel"] .brand-home-btn {
    width: 34px !important;
    height: 32px !important;
    min-width: 34px !important;
    border-radius: 10px !important;
  }

  #gameScreen[data-live-mode="duel"] .brand-logo-hud {
    width: 27px !important;
    height: 27px !important;
  }

  #gameScreen[data-live-mode="duel"] .hud-brand-copy,
  #gameScreen[data-live-mode="duel"] .hud-center {
    display: none !important;
  }

  #gameScreen[data-live-mode="duel"] .hud-metrics {
    min-height: 32px !important;
    width: auto !important;
    padding: 0 !important;
    gap: 4px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    margin-top: 0 !important;
  }

  #gameScreen[data-live-mode="duel"] .metric-card {
    flex: initial !important;
    min-width: 54px !important;
    min-height: 32px !important;
    padding: 4px 6px !important;
    border-radius: 10px !important;
    background: rgba(7, 24, 38, .84) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
  }

  #gameScreen[data-live-mode="duel"] .metric-card span {
    display: none !important;
  }

  #gameScreen[data-live-mode="duel"] .metric-card strong {
    margin-top: 0 !important;
    font-size: 11px !important;
    letter-spacing: -.02em !important;
    white-space: nowrap !important;
  }

  #gameScreen[data-live-mode="duel"] .metric-card-time {
    min-width: 70px !important;
    padding-right: 24px !important;
  }

  #gameScreen[data-live-mode="duel"] .timer-ring {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  #gameScreen[data-live-mode="duel"] .timer-ring::after {
    inset: 3px !important;
  }
}

/* V22.66 — Ranked DUEL mobile web top UI follows Solo mobile top UI */
@media (max-width: 650px) {
  #gameScreen[data-live-mode="duel"] .hud-bar {
    top: calc(4px + var(--tt-safe-top)) !important;
    left: calc(5px + var(--tt-safe-left)) !important;
    right: auto !important;
    width: min(360px, calc(100vw - 10px - var(--tt-safe-left) - var(--tt-safe-right))) !important;
    min-height: 38px !important;
    grid-template-columns: 34px minmax(0,1fr) !important;
    padding: 3px 5px !important;
    gap: 5px !important;
    border-radius: 13px !important;
    background: rgba(4, 19, 31, .56) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  #gameScreen[data-live-mode="duel"] .hud-brand {
    min-height: 32px !important;
    width: 34px !important;
    min-width: 34px !important;
    justify-content: center !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 11px !important;
  }

  #gameScreen[data-live-mode="duel"] .brand-home-btn {
    width: 34px !important;
    height: 32px !important;
    min-width: 34px !important;
    border-radius: 10px !important;
  }

  #gameScreen[data-live-mode="duel"] .brand-logo-hud {
    width: 27px !important;
    height: 27px !important;
  }

  #gameScreen[data-live-mode="duel"] .hud-brand-copy,
  #gameScreen[data-live-mode="duel"] .hud-center {
    display: none !important;
  }

  #gameScreen[data-live-mode="duel"] .hud-metrics {
    min-height: 32px !important;
    padding: 0 !important;
    gap: 4px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    width: auto !important;
    margin-top: 0 !important;
  }

  #gameScreen[data-live-mode="duel"] .metric-card {
    flex: initial !important;
    min-width: 54px !important;
    min-height: 32px !important;
    padding: 4px 6px !important;
    border-radius: 10px !important;
    background: rgba(7, 24, 38, .84) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
  }

  #gameScreen[data-live-mode="duel"] .metric-card span {
    display: none !important;
  }

  #gameScreen[data-live-mode="duel"] .metric-card strong {
    margin-top: 0 !important;
    font-size: 11px !important;
    letter-spacing: -.02em !important;
    white-space: nowrap !important;
  }

  #gameScreen[data-live-mode="duel"] .metric-card-time {
    min-width: 70px !important;
    padding-right: 24px !important;
  }

  #gameScreen[data-live-mode="duel"] .timer-ring {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  #gameScreen[data-live-mode="duel"] .timer-ring::after {
    inset: 3px !important;
  }
}

/* V22.67 — Force ranked DUEL mobile HUD into one single row */
@media (max-width: 650px) {
  #gameScreen[data-live-mode="duel"] .hud-bar {
    align-items: center !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
  }

  #gameScreen[data-live-mode="duel"] .hud-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  #gameScreen[data-live-mode="duel"] .hud-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 0 !important;
    align-self: center !important;
    justify-self: stretch !important;
    justify-content: stretch !important;
    flex-wrap: nowrap !important;
  }

  #gameScreen[data-live-mode="duel"] .metric-card {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* V22.68 — First-time onboarding + guided tutorial */
.tt-onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(circle at 50% 18%, rgba(41, 182, 255, .18), transparent 34%),
    linear-gradient(180deg, rgba(2, 10, 20, .78), rgba(1, 7, 14, .94));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.tt-onboarding-overlay.hidden { display: none !important; }
.tt-onboarding-card {
  width: min(520px, 100%);
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(100, 214, 255, .24);
  background: linear-gradient(145deg, rgba(8, 27, 47, .96), rgba(4, 15, 28, .97));
  box-shadow: 0 34px 100px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.06);
  text-align: center;
}
.tt-onboarding-logo { width: min(240px, 58vw); max-height: 78px; object-fit: contain; margin-bottom: 18px; }
.tt-onboarding-step { display: grid; gap: 13px; }
.tt-onboarding-step.hidden { display: none !important; }
.tt-onboarding-kicker { color: #5adfff; font-size: 10px; font-weight: 900; letter-spacing: .2em; }
.tt-onboarding-step h1, .tt-onboarding-step h2 { margin: 0; color: #f4fbff; letter-spacing: -.04em; }
.tt-onboarding-step h1 { font-size: clamp(30px, 6vw, 46px); }
.tt-onboarding-step h2 { font-size: clamp(25px, 5vw, 36px); }
.tt-onboarding-step p { margin: 0 auto 4px; max-width: 410px; color: #a9bfd2; line-height: 1.55; }
.tt-onboarding-step small { color: #7692aa; line-height: 1.45; }
.tt-onboarding-google,
.tt-onboarding-guest,
.tt-onboarding-continue {
  width: 100%;
  min-height: 54px;
  border-radius: 16px;
  font-weight: 850;
  cursor: pointer;
}
.tt-onboarding-google {
  border: 1px solid rgba(255,255,255,.18);
  background: #fff;
  color: #112131;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 14px 34px rgba(0,0,0,.24);
}
.tt-onboarding-guest {
  border: 1px solid rgba(94, 204, 255, .2);
  background: rgba(255,255,255,.04);
  color: #dff6ff;
}
.tt-onboarding-name {
  width: 100%;
  min-height: 56px;
  border-radius: 16px;
  border: 1px solid rgba(91, 205, 255, .28);
  background: rgba(2, 14, 25, .8);
  color: #fff;
  padding: 0 16px;
  font-size: 16px;
  outline: none;
  text-align: center;
}
.tt-onboarding-name:focus { border-color: #59dcff; box-shadow: 0 0 0 3px rgba(89,220,255,.11); }
.tt-onboarding-name-hint, .tt-onboarding-status { min-height: 18px; color: #7f9ab1; font-size: 12px; }
.tt-onboarding-status.error { color: #ff9bad; }
.tt-onboarding-status.success { color: #78efbf; }

.tt-tutorial-guide {
  position: fixed;
  inset: 0;
  z-index: 11000;
  pointer-events: none;
}
.tt-tutorial-guide.hidden { display: none !important; }
.tt-tutorial-card {
  position: fixed;
  width: min(360px, calc(100vw - 20px));
  padding: 15px;
  border-radius: 18px;
  border: 1px solid rgba(94, 220, 255, .32);
  background: rgba(4, 20, 34, .96);
  box-shadow: 0 22px 64px rgba(0,0,0,.46), inset 0 1px rgba(255,255,255,.05);
  pointer-events: auto;
}
.tt-tutorial-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.tt-tutorial-progress { color: #5ee3ff; font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.tt-tutorial-skip { border: 0; background: transparent; color: #8099ad; font-size: 11px; cursor: pointer; }
.tt-tutorial-card h3 { margin: 0 0 6px; font-size: 20px; color: #f4fbff; }
#tutorialText { color: #b6c8d7; line-height: 1.45; font-size: 13px; }
.tt-tutorial-next { width: 100%; margin-top: 12px; min-height: 42px; }
.tt-tutorial-arrow {
  position: fixed;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  color: #ffd84d;
  -webkit-text-stroke: 1.6px rgba(9, 26, 36, 0.92);
  text-shadow:
    0 2px 0 rgba(9, 26, 36, 0.95),
    0 0 10px rgba(255, 214, 73, 0.75),
    0 0 20px rgba(255, 214, 73, 0.55);
  filter: drop-shadow(0 0 10px rgba(255, 214, 73, .55));
  animation: ttTutorialArrow 1s ease-in-out infinite;
}
@keyframes ttTutorialArrow { 50% { transform: translateY(6px); } }
.tt-tutorial-target {
  z-index: 10950 !important;
  outline: 3px solid rgba(74, 226, 255, .95) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 9999px rgba(0, 6, 14, .58), 0 0 34px rgba(75, 226, 255, .5) !important;
}
.tt-tutorial-modes { display: grid; gap: 7px; margin-top: 8px; }
.tt-tutorial-modes > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 12px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.06); }
.tt-tutorial-modes b { color: #effbff; font-size: 12px; }
.tt-tutorial-modes span { color: #8da7bb; font-size: 11px; text-align: right; }

@media (max-width: 650px) {
  .tt-onboarding-overlay { padding: 12px; }
  .tt-onboarding-card { padding: 20px 16px; border-radius: 22px; }
  .tt-onboarding-logo { width: 190px; margin-bottom: 10px; }
  .tt-onboarding-step { gap: 10px; }
  .tt-onboarding-step p { font-size: 13px; }
  .tt-onboarding-google, .tt-onboarding-guest, .tt-onboarding-continue { min-height: 49px; }
  .tt-tutorial-card { width: min(320px, calc(100vw - 16px)); padding: 13px; }
  .tt-tutorial-card h3 { font-size: 17px; }
  #tutorialText { font-size: 12px; line-height: 1.4; }
  .tt-tutorial-target { outline-width: 2px !important; outline-offset: 2px !important; }
  .tt-tutorial-arrow {
    font-size: 28px;
    -webkit-text-stroke: 1.4px rgba(9, 26, 36, 0.94);
    text-shadow:
      0 2px 0 rgba(9, 26, 36, 0.96),
      0 0 8px rgba(255, 214, 73, 0.75),
      0 0 16px rgba(255, 214, 73, 0.55);
  }

  /* Keep the tutorial MAP target anchored to the normal mobile bottom-right CTA. */
  #gameScreen .mobile-map-btn.tt-tutorial-target {
    position: absolute !important;
    right: calc(12px + var(--tt-safe-right));
    bottom: calc(14px + var(--tt-safe-bottom));
  }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 520px) {
  #gameScreen .mobile-map-btn.tt-tutorial-target {
    right: calc(8px + var(--tt-safe-right));
    bottom: calc(8px + var(--tt-safe-bottom));
  }
}


/* Main menu: replace duplicate avatar actions with one aligned Leaderboard CTA. */
#menuScreen .tt-main-leaderboard-action {
  grid-template-columns: 1fr;
  width: 100%;
}
#menuScreen .tt-main-leaderboard-action .tt-menu-leaderboard-btn {
  width: 100%;
  min-height: 52px;
  padding: 9px 16px;
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  text-align: left;
  border-radius: 17px;
  border: 1px solid rgba(99,207,255,.34);
  background: linear-gradient(145deg,rgba(9,48,78,.90),rgba(5,28,48,.88));
  color: #eefbff;
  box-shadow: 0 10px 24px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.05);
}
#menuScreen .tt-main-leaderboard-action .tt-menu-leaderboard-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(94,225,255,.82);
  background: linear-gradient(145deg,rgba(11,65,101,.96),rgba(7,38,64,.94));
  box-shadow: 0 13px 28px rgba(0,0,0,.22), 0 0 22px rgba(50,205,255,.14), inset 0 1px rgba(255,255,255,.07);
}
#menuScreen .tt-menu-leaderboard-icon {
  display: grid;
  place-items: center;
  font-size: 20px;
}
#menuScreen .tt-menu-leaderboard-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.05;
}
#menuScreen .tt-menu-leaderboard-copy strong {
  font-size: 14px;
  letter-spacing: .045em;
}
#menuScreen .tt-menu-leaderboard-copy small {
  margin-top: 4px;
  color: #8fb0c4;
  font-size: 10px;
  font-weight: 700;
}
#menuScreen .tt-menu-leaderboard-btn > b {
  font-size: 22px;
  color: #68ddff;
}
@media (max-width: 650px) {
  #menuScreen .tt-main-leaderboard-action .tt-menu-leaderboard-btn {
    min-height: 48px;
    border-radius: 15px;
    padding: 8px 13px;
  }
  #menuScreen .tt-menu-leaderboard-copy strong { font-size: 13px; }
  #menuScreen .tt-menu-leaderboard-copy small { font-size: 9px; }
}


/* Dedicated portrait artwork for compact player identity UI. */
.tt-portrait-avatar-image,
#accountAvatar .tt-portrait-avatar-image,
#menuProfileAvatarMount .tt-portrait-avatar-image,
#profileAvatarLarge .tt-portrait-avatar-image {
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.24))!important;
}
#profileAvatarLarge .tt-portrait-avatar-image {
  width:108%!important;
  height:108%!important;
  left:-4%!important;
  top:-4%!important;
}
.lobby-mini-avatar>img.avatar-global-art,
.leader-mini-avatar>img.avatar-global-art,
.mp-champion-avatar-inner>img.avatar-global-art {
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
}
.duel-avatar .dedicated-duel-avatar-shell { overflow:hidden!important; border-radius:inherit!important; }
.duel-avatar .dedicated-duel-avatar-image {
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
}
.lb-avatar img { width:100%!important; height:100%!important; object-fit:contain!important; object-position:center!important; }
.profile-actions-row .profile-tutorial-btn { min-width:0; }

/* Main-menu compact player summary: always show portrait in the left square. */
#menuScreen .tt-player-portrait {
  display:block;
}
#menuProfileAvatarMount {
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
}
#menuProfileAvatarMount .avatar-skin-shell,
#menuProfileAvatarMount .avatar-global-anchor,
#menuProfileAvatarMount .pro-avatar-portrait {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
  overflow:hidden !important;
  border-radius:inherit !important;
}
#menuProfileAvatarMount .tt-portrait-avatar-image,
#menuProfileAvatarMount .avatar-global-art,
#menuProfileAvatarMount .avatar-skin-image,
#menuProfileAvatarMount .pro-avatar-portrait img {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center 20% !important;
  transform:scale(1.18) !important;
  transform-origin:50% 18% !important;
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.26)) !important;
}

/* V22.68 — DUEL searching/match-found portrait box positioning refinement.
   Use the user's 2nd screenshot as the reference: shift the inner avatar
   box left within the card so it sits more naturally in the framed area. */
@media (min-width: 651px) {
  #duelScreen.duel-search-template-mode .duel-player-card .duel-avatar,
  #duelScreen.duel-match-found-mode .duel-player-card .duel-avatar {
    transform: translateX(-16%);
  }

  #duelScreen.duel-search-template-mode .duel-player-card.me .duel-avatar,
  #duelScreen.duel-match-found-mode .duel-player-card.me .duel-avatar {
    transform: translateX(-17%);
  }

  #duelScreen.duel-search-template-mode .duel-player-card.opponent .duel-avatar,
  #duelScreen.duel-match-found-mode .duel-player-card.opponent .duel-avatar {
    transform: translateX(-13%);
  }
}

@media (max-width: 650px) {
  #duelScreen.duel-search-template-mode .duel-player-card .duel-avatar,
  #duelScreen.duel-match-found-mode .duel-player-card .duel-avatar {
    transform: translateX(-10%);
  }

  #duelScreen.duel-search-template-mode .duel-player-card.me .duel-avatar,
  #duelScreen.duel-match-found-mode .duel-player-card.me .duel-avatar {
    transform: translateX(-11%);
  }

  #duelScreen.duel-search-template-mode .duel-player-card.opponent .duel-avatar,
  #duelScreen.duel-match-found-mode .duel-player-card.opponent .duel-avatar {
    transform: translateX(-8%);
  }
}

/* V22.69 — DUEL matchup alignment + portrait centering.
   Keep both player stacks on the same baseline regardless of whether
   rating/status text wraps to one or two lines. */
@media (min-width: 651px) {
  #duelScreen.duel-search-template-mode .duel-player-card,
  #duelScreen.duel-match-found-mode .duel-player-card {
    justify-content: flex-start !important;
    padding-top: 4.0% !important;
    padding-bottom: 2.3% !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card .duel-avatar,
  #duelScreen.duel-match-found-mode .duel-player-card .duel-avatar {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 auto clamp(5px,.55vw,8px) !important;
    transform: none !important;
    flex: 0 0 auto !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-name-row,
  #duelScreen.duel-match-found-mode .duel-player-name-row {
    min-height: clamp(25px,2.2vw,34px) !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card > span,
  #duelScreen.duel-match-found-mode .duel-player-card > span {
    min-height: clamp(28px,2.3vw,36px) !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.05 !important;
  }
}

/* Force dedicated DUEL portraits to be centered inside their square.
   This overrides old full-body avatar positioning rules. */
#duelScreen .duel-avatar.dedicated-duel-avatar-host .dedicated-duel-avatar-shell {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  transform: none !important;
  border-radius: inherit !important;
}
#duelScreen .duel-avatar.dedicated-duel-avatar-host .dedicated-duel-avatar-image {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: 50% 18% !important;
  transform: scale(1.04) !important;
  transform-origin: 50% 20% !important;
  margin: 0 !important;
}

@media (max-width: 650px) {
  #duelScreen.duel-search-template-mode .duel-player-card,
  #duelScreen.duel-match-found-mode .duel-player-card {
    justify-content: flex-start !important;
    padding-top: 7.5% !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card .duel-avatar,
  #duelScreen.duel-match-found-mode .duel-player-card .duel-avatar {
    margin: 0 auto 5px !important;
    transform: none !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-name-row,
  #duelScreen.duel-match-found-mode .duel-player-name-row {
    min-height: 24px !important;
    margin: 0 !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card > span,
  #duelScreen.duel-match-found-mode .duel-player-card > span {
    min-height: 26px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* Admin avatar grants */
.profile-actions-row .profile-admin-btn {
  min-width: 0;
  border-color: rgba(255, 206, 92, .38);
  color: #ffe7a5;
}
.admin-avatar-card {
  width: min(680px, calc(100vw - 24px));
  max-height: min(88vh, 760px);
  overflow: auto;
  padding: 24px;
}
.admin-avatar-card h2 { margin: 4px 0 6px; }
.admin-avatar-search { display: grid; gap: 7px; margin-top: 18px; }
.admin-avatar-search > label,
.admin-grant-controls > label:not(.admin-equip-toggle) {
  color: #9db3c5;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.admin-avatar-search-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.admin-avatar-search-row input,
.admin-avatar-choice-row select {
  min-width: 0;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(107, 183, 230, .24);
  background: rgba(5, 18, 31, .8);
  color: #f4fbff;
  padding: 0 12px;
  outline: none;
}
.admin-avatar-search-row input:focus,
.admin-avatar-choice-row select:focus {
  border-color: rgba(74, 222, 255, .72);
  box-shadow: 0 0 0 3px rgba(74, 222, 255, .09);
}
.admin-player-results {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  max-height: 235px;
  overflow: auto;
}
.admin-empty-state {
  padding: 18px;
  border: 1px dashed rgba(124, 169, 201, .18);
  border-radius: 14px;
  color: #7f98ac;
  text-align: center;
  font-size: 12px;
}
.admin-player-row {
  width: 100%;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 13px;
  border: 1px solid rgba(112, 179, 224, .14);
  background: rgba(255,255,255,.025);
  color: #eef8ff;
  text-align: left;
  cursor: pointer;
}
.admin-player-row:hover,
.admin-player-row.selected {
  border-color: rgba(76, 219, 255, .55);
  background: rgba(50, 185, 228, .09);
}
.admin-player-row-portrait,
.admin-selected-portrait,
.admin-avatar-preview {
  overflow: hidden;
  background: linear-gradient(145deg,#10283b,#071520);
  border: 1px solid rgba(104, 209, 255, .24);
}
.admin-player-row-portrait { width: 46px; height: 46px; border-radius: 12px; }
.admin-player-row-portrait img,
.admin-selected-portrait img,
.admin-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
.admin-player-row-copy { display: flex; min-width: 0; flex-direction: column; }
.admin-player-row-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.admin-player-row-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #849eb2; font-size: 10px; margin-top: 2px; }
.admin-player-row > b { color: #8fdfff; font-size: 10px; text-transform: uppercase; }
.admin-grant-controls {
  display: grid;
  gap: 10px;
  margin-top: 15px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(105, 189, 235, .18);
  background: rgba(5, 17, 29, .56);
}
.admin-selected-player {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 11px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.admin-selected-portrait { width: 58px; height: 58px; border-radius: 15px; }
.admin-selected-player > div:last-child { display: flex; min-width: 0; flex-direction: column; }
.admin-selected-player small { color: #69d8ff; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.admin-selected-player strong { font-size: 16px; margin-top: 2px; }
.admin-selected-player span { color: #849eb2; font-size: 10px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-avatar-choice-row { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: center; }
.admin-avatar-preview { width: 58px; height: 58px; border-radius: 15px; }
.admin-equip-toggle { display: flex; gap: 8px; align-items: center; color: #b7c9d7; font-size: 12px; cursor: pointer; }
.admin-equip-toggle input { width: 17px; height: 17px; accent-color: #4ddfff; }
.admin-avatar-ownership-hint {
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(83, 197, 255, .07);
  color: #9fdfff;
  font-size: 11px;
}
.admin-avatar-ownership-hint.owned { background: rgba(92, 230, 155, .08); color: #85e8b6; }
.admin-danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 5px;
  padding: 13px;
  border-radius: 13px;
  border: 1px solid rgba(255, 92, 112, .24);
  background: linear-gradient(135deg, rgba(127, 21, 37, .14), rgba(56, 11, 21, .18));
}
.admin-danger-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.admin-danger-copy strong { color: #ff9eaa; font-size: 12px; letter-spacing: .03em; }
.admin-danger-copy span { color: #a99098; font-size: 10px; line-height: 1.35; }
.admin-delete-user-btn,
.admin-delete-confirm-btn {
  border: 1px solid rgba(255, 89, 110, .52) !important;
  background: linear-gradient(180deg, rgba(211, 47, 70, .94), rgba(143, 25, 45, .96)) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(108, 8, 29, .22);
}
.admin-delete-user-btn:hover:not(:disabled),
.admin-delete-confirm-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.admin-delete-user-btn:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
.admin-delete-confirm-modal { z-index: 1200; background: rgba(2, 6, 12, .78); backdrop-filter: blur(12px); }
.admin-delete-confirm-card { width: min(470px, calc(100vw - 28px)); padding: 26px; text-align: center; }
.admin-danger-icon {
  width: 54px; height: 54px; margin: 0 auto 11px; display: grid; place-items: center;
  border-radius: 17px; border: 1px solid rgba(255, 94, 113, .45);
  background: radial-gradient(circle at 50% 35%, rgba(255, 104, 120, .26), rgba(122, 17, 36, .19));
  color: #ff8d9b; font-size: 30px; font-weight: 950;
  box-shadow: 0 0 30px rgba(212, 35, 61, .13);
}
.admin-danger-eyebrow { color: #ff8c9a; }
.admin-delete-confirm-card h2 { margin: 5px 0 8px; }
.admin-delete-confirm-copy { margin: 0 auto; max-width: 380px; color: #a9bac7; font-size: 12px; line-height: 1.55; }
.admin-delete-confirm-copy strong { color: #fff; }
.admin-delete-summary {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 18px 0; text-align: left;
}
.admin-delete-summary span {
  position: relative; padding: 9px 9px 9px 26px; border-radius: 10px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.065);
  color: #afbeca; font-size: 10px;
}
.admin-delete-summary span::before { content: '×'; position: absolute; left: 10px; top: 7px; color: #ff7586; font-weight: 950; font-size: 14px; }
.admin-delete-confirm-actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 9px; }
.admin-delete-confirm-actions .btn { width: 100%; }
@media (max-width: 650px) {
  .admin-avatar-card { padding: 18px 14px; max-height: 92vh; }
  .admin-avatar-search-row { grid-template-columns: 1fr; }
  .admin-avatar-search-row .btn { width: 100%; }
  .admin-player-results { max-height: 190px; }
  .admin-player-row { grid-template-columns: 42px minmax(0,1fr); }
  .admin-player-row > b { display: none; }
  .admin-player-row-portrait { width: 42px; height: 42px; }
  .admin-danger-zone { align-items: stretch; flex-direction: column; }
  .admin-delete-user-btn { width: 100%; }
  .admin-delete-summary { grid-template-columns: 1fr; }
  .admin-delete-confirm-actions { grid-template-columns: 1fr; }
}

/* V22.70 — DUEL player identity readability shadows.
   A neutral near-black/navy shadow keeps the flag, player name and
   rating/rank readable over both the cyan and gold arena artwork without
   changing the existing responsive positioning. */
#duelScreen.duel-search-template-mode .duel-player-name-row strong,
#duelScreen.duel-match-found-mode .duel-player-name-row strong {
  text-shadow:
    0 2px 2px rgba(0, 0, 0, .72),
    0 5px 12px rgba(2, 12, 25, .56) !important;
}

#duelScreen.duel-search-template-mode .duel-player-card > span,
#duelScreen.duel-match-found-mode .duel-player-card > span {
  text-shadow:
    0 2px 2px rgba(0, 0, 0, .68),
    0 4px 10px rgba(2, 12, 25, .52) !important;
}

#duelScreen.duel-search-template-mode .duel-player-flag,
#duelScreen.duel-match-found-mode .duel-player-flag {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .52),
    0 6px 13px rgba(2, 12, 25, .38) !important;
  text-shadow:
    0 2px 2px rgba(0, 0, 0, .62),
    0 4px 8px rgba(2, 12, 25, .42) !important;
}

#duelScreen.duel-search-template-mode .duel-player-flag img,
#duelScreen.duel-match-found-mode .duel-player-flag img {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .42)) !important;
}


/* =========================================================
   V22.61 — MAIN MENU MUSIC VOLUME POPOVER
   Compact speaker control in the lobby header. The slider is
   the source of truth: 0 = muted, 100 = maximum music volume.
   ========================================================= */
#menuScreen .menu-music-control{
  position:relative;
  flex:0 0 auto;
}
#menuScreen .menu-music-button{
  width:46px;
  min-width:46px;
  height:46px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(126,220,255,.18);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  color:#effcff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 20px rgba(0,0,0,.16);
  backdrop-filter:blur(14px);
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
#menuScreen .menu-music-button:hover{
  transform:translateY(-1px);
  border-color:rgba(91,215,255,.38);
  background:linear-gradient(145deg,rgba(62,197,245,.13),rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 24px rgba(0,0,0,.20),0 0 20px rgba(60,214,244,.08);
}
#menuScreen .menu-music-button:focus-visible{
  outline:2px solid rgba(87,231,244,.82);
  outline-offset:3px;
}
#menuScreen .menu-music-button span{
  font-size:20px;
  line-height:1;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.35));
}
#menuScreen .menu-music-button.muted{
  color:#9cb0c1;
  border-color:rgba(255,255,255,.09);
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
}
#menuScreen .menu-music-popover{
  position:fixed;
  z-index:12000;
  width:224px;
  padding:13px 14px 11px;
  border:1px solid rgba(92,219,244,.23);
  border-radius:16px;
  background:linear-gradient(160deg,rgba(8,27,44,.98),rgba(4,17,30,.98));
  box-shadow:0 18px 48px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.07),0 0 26px rgba(67,227,234,.07);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}
#menuScreen .menu-music-popover.hidden{display:none!important}
#menuScreen .menu-music-popover-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
  color:#dff9ff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
#menuScreen .menu-music-popover-head output{
  color:#72edf5;
  font-size:11px;
  letter-spacing:0;
  font-variant-numeric:tabular-nums;
}
#menuScreen #menuMusicVolume{
  display:block;
  width:100%;
  margin:0;
  accent-color:#54e7f1;
  cursor:pointer;
}
#menuScreen .menu-music-scale{
  display:flex;
  justify-content:space-between;
  margin-top:4px;
  color:#6f879a;
  font-size:8px;
  font-weight:800;
  letter-spacing:.04em;
}

@media(max-width:820px){
  #menuScreen .menu-music-button{
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
    border-radius:14px!important;
  }
  #menuScreen .menu-music-button span{font-size:18px}
  #menuScreen .menu-music-popover{width:min(220px,calc(100vw - 20px))}
}
@media(max-width:540px){
  #menuScreen .menu-music-button{
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
  }
}
@media(max-width:420px){
  #menuScreen .menu-music-button{
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    border-radius:13px!important;
  }
  #menuScreen .menu-music-button span{font-size:17px}
}
@media (max-width:980px) and (orientation:landscape) and (max-height:560px){
  #menuScreen .menu-music-button{
    width:34px!important;
    min-width:34px!important;
    height:34px!important;
    border-radius:11px!important;
  }
  #menuScreen .menu-music-button span{font-size:16px}
  #menuScreen .menu-music-popover{width:210px;padding:10px 12px 9px}
}

/* =========================================================
   V22.62 — MAIN MENU MUSIC POPOVER STACKING FIX
   Keep the music slider above the hero/background/cards.
   ========================================================= */
#menuScreen .tt-lobby-topbar,
#menuScreen .v12-topbar{
  position:relative !important;
  z-index:20000 !important;
  overflow:visible !important;
  isolation:auto !important;
}
#menuScreen .v12-top-actions,
#menuScreen .menu-music-control{
  position:relative !important;
  z-index:20001 !important;
  overflow:visible !important;
}
#menuScreen .menu-music-popover{
  z-index:2147483000 !important;
  pointer-events:auto !important;
}
#menuScreen .tt-lobby-main,
#menuScreen .tt-lobby-hero{
  z-index:1 !important;
}


/* =========================================================
   V22.64 — FEATURED EXPLORERS EPIC + LEGENDARY SHOWCASE
   Replace the starter avatars in the main-menu featured row
   with premium Epic/Legendary picks and visible rarity chips.
   ========================================================= */
#menuScreen .tt-featured-list .tt-featured-avatar-chip{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:2px!important;
  padding:3px 4px 5px!important;
}
#menuScreen .tt-featured-list .tt-featured-avatar-chip img{
  width:100%!important;
  height:calc(100% - 16px)!important;
  max-height:44px;
  object-fit:contain!important;
}
#menuScreen .tt-featured-list .tt-featured-rarity{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  width:100%;
  padding:2px 5px;
  border-radius:999px;
  font-size:7px;
  font-weight:900;
  letter-spacing:.11em;
  line-height:1;
  text-transform:uppercase;
  color:#eefbff;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(4,13,22,.68);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
#menuScreen .tt-featured-list .tt-featured-avatar-chip.rarity-epic{
  border-color:rgba(194,108,255,.34)!important;
  background:linear-gradient(155deg,rgba(41,20,69,.92),rgba(10,24,40,.96))!important;
  box-shadow:0 10px 22px rgba(0,0,0,.20), inset 0 0 18px rgba(175,91,255,.06)!important;
}
#menuScreen .tt-featured-list .tt-featured-avatar-chip.rarity-epic .tt-featured-rarity{
  color:#e9c6ff;
  border-color:rgba(212,147,255,.26);
  background:linear-gradient(160deg,rgba(98,42,149,.72),rgba(45,19,76,.82));
}
#menuScreen .tt-featured-list .tt-featured-avatar-chip.rarity-legendary{
  border-color:rgba(255,208,89,.40)!important;
  background:linear-gradient(155deg,rgba(63,39,8,.95),rgba(11,25,41,.97))!important;
  box-shadow:0 10px 24px rgba(0,0,0,.22), inset 0 0 24px rgba(255,189,61,.08)!important;
}
#menuScreen .tt-featured-list .tt-featured-avatar-chip.rarity-legendary .tt-featured-rarity{
  color:#ffe59a;
  border-color:rgba(255,211,96,.32);
  background:linear-gradient(160deg,rgba(151,96,20,.76),rgba(78,50,9,.86));
}
#menuScreen .tt-featured-list .tt-featured-avatar-chip:hover{
  transform:translateY(-3px)!important;
}
@media(max-width:820px){
  #menuScreen .tt-featured-list .tt-featured-avatar-chip{
    padding:4px 4px 5px!important;
  }
  #menuScreen .tt-featured-list .tt-featured-avatar-chip img{
    max-height:45px;
  }
}
@media(max-width:540px){
  #menuScreen .tt-featured-list .tt-featured-rarity{
    font-size:6px;
    letter-spacing:.09em;
    padding:2px 4px;
  }
}


/* =========================================================
   V22.65 — DESKTOP MUSIC POPOVER TRUE SPEAKER ANCHOR
   Desktop uses the speaker wrapper as the positioning context
   instead of viewport coordinates, preventing header offsets.
   Mobile keeps the existing viewport-aware positioning.
   ========================================================= */
@media(min-width:821px){
  #menuScreen .menu-music-control{
    position:relative!important;
    overflow:visible!important;
  }
  #menuScreen .menu-music-popover{
    position:absolute!important;
    left:0!important;
    right:auto!important;
    top:calc(100% + 10px)!important;
    transform:none!important;
  }
}


/* =========================================================
   V22.65 — FEATURED EXPLORER → EXACT SHOP AVATAR FLOW
   The Featured Explorer shortcut previews and focuses its exact
   shop card. Insufficient purchases stay clickable for feedback.
   ========================================================= */
#shopModal .avatar-store-card.previewing{
  border-color:rgba(93,232,245,.72)!important;
  box-shadow:0 0 0 2px rgba(85,229,242,.16),0 18px 44px rgba(0,0,0,.32),0 0 30px rgba(66,218,239,.10)!important;
}
#shopModal .avatar-store-card.previewing::after{
  content:'PREVIEW';
  position:absolute;
  top:12px;
  right:12px;
  z-index:5;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(111,239,247,.30);
  background:rgba(5,25,38,.84);
  color:#8ff6fb;
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
  pointer-events:none;
}
#shopModal .avatar-store-card.featured-avatar-focus{
  animation:ttFeaturedAvatarFocus 1.05s ease both;
}
#shopModal .avatar-store-card .btn.insufficient-coins{
  cursor:pointer!important;
  opacity:1!important;
  color:#ffd4d8!important;
  border-color:rgba(255,91,111,.34)!important;
  background:linear-gradient(160deg,rgba(96,26,40,.72),rgba(51,17,28,.78))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
#shopModal .avatar-store-card .btn.insufficient-coins:hover{
  transform:translateY(-1px);
  border-color:rgba(255,108,126,.58)!important;
  box-shadow:0 8px 20px rgba(94,20,35,.24),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
@keyframes ttFeaturedAvatarFocus{
  0%{transform:translateY(0) scale(1);filter:brightness(1)}
  38%{transform:translateY(-5px) scale(1.018);filter:brightness(1.14)}
  100%{transform:translateY(0) scale(1);filter:brightness(1)}
}


/* =========================================================
   V22.67 — FEATURED EXPLORERS HOVER SHINE + PARTICLES
   Add a premium shiny sweep and floating particle effect when
   hovering the featured avatar boxes on web/desktop.
   ========================================================= */
#menuScreen .tt-featured-list .tt-featured-avatar-chip{
  position:relative;
  isolation:isolate;
  overflow:hidden!important;
}
#menuScreen .tt-featured-list .tt-featured-avatar-chip img,
#menuScreen .tt-featured-list .tt-featured-avatar-chip .tt-featured-rarity{
  position:relative;
  z-index:3;
}
#menuScreen .tt-featured-list .tt-featured-avatar-chip::before,
#menuScreen .tt-featured-list .tt-featured-avatar-chip::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .22s ease, transform .28s ease;
}
#menuScreen .tt-featured-list .tt-featured-avatar-chip::before{
  z-index:1;
  inset:-8% -35%;
  background:linear-gradient(115deg,
    rgba(255,255,255,0) 8%,
    rgba(255,255,255,.05) 22%,
    rgba(255,255,255,.22) 34%,
    rgba(255,255,255,.58) 44%,
    rgba(255,255,255,.15) 54%,
    rgba(255,255,255,0) 68%);
  transform:translateX(-140%) skewX(-24deg);
  mix-blend-mode:screen;
}
#menuScreen .tt-featured-list .tt-featured-avatar-chip::after{
  z-index:2;
  background:
    radial-gradient(circle at 18% 26%, rgba(255,255,255,.95) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 78% 20%, rgba(255,255,255,.88) 0 1.7px, transparent 2.3px),
    radial-gradient(circle at 28% 72%, rgba(255,255,255,.82) 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 64% 58%, rgba(255,255,255,.86) 0 1.4px, transparent 2px),
    radial-gradient(circle at 86% 74%, rgba(255,255,255,.92) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 46% 36%, rgba(255,255,255,.78) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 50% 50%, rgba(191,118,255,.20), transparent 58%);
  transform:scale(.92);
  filter:drop-shadow(0 0 10px rgba(255,255,255,.18));
}
#menuScreen .tt-featured-list .tt-featured-avatar-chip.rarity-legendary::after{
  background:
    radial-gradient(circle at 18% 26%, rgba(255,249,224,.98) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 78% 20%, rgba(255,238,173,.90) 0 1.7px, transparent 2.3px),
    radial-gradient(circle at 28% 72%, rgba(255,248,210,.86) 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 64% 58%, rgba(255,237,166,.92) 0 1.4px, transparent 2px),
    radial-gradient(circle at 86% 74%, rgba(255,246,206,.94) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 46% 36%, rgba(255,232,147,.82) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 50% 50%, rgba(255,201,84,.24), transparent 58%);
}
#menuScreen .tt-featured-list .tt-featured-avatar-chip.rarity-epic::after{
  background:
    radial-gradient(circle at 18% 26%, rgba(248,236,255,.98) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 78% 20%, rgba(229,191,255,.90) 0 1.7px, transparent 2.3px),
    radial-gradient(circle at 28% 72%, rgba(244,221,255,.86) 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 64% 58%, rgba(231,190,255,.92) 0 1.4px, transparent 2px),
    radial-gradient(circle at 86% 74%, rgba(250,239,255,.94) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 46% 36%, rgba(216,163,255,.82) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 50% 50%, rgba(191,118,255,.22), transparent 58%);
}
@media (hover:hover) and (pointer:fine){
  #menuScreen .tt-featured-list .tt-featured-avatar-chip{
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
  }
  #menuScreen .tt-featured-list .tt-featured-avatar-chip:hover,
  #menuScreen .tt-featured-list .tt-featured-avatar-chip:focus-visible{
    box-shadow:
      0 14px 28px rgba(0,0,0,.28),
      0 0 0 1px rgba(255,255,255,.05),
      0 0 24px rgba(106,229,255,.08)!important;
  }
  #menuScreen .tt-featured-list .tt-featured-avatar-chip.rarity-epic:hover,
  #menuScreen .tt-featured-list .tt-featured-avatar-chip.rarity-epic:focus-visible{
    box-shadow:
      0 15px 30px rgba(0,0,0,.30),
      0 0 0 1px rgba(239,221,255,.05),
      0 0 26px rgba(191,118,255,.22)!important;
  }
  #menuScreen .tt-featured-list .tt-featured-avatar-chip.rarity-legendary:hover,
  #menuScreen .tt-featured-list .tt-featured-avatar-chip.rarity-legendary:focus-visible{
    box-shadow:
      0 15px 30px rgba(0,0,0,.30),
      0 0 0 1px rgba(255,248,214,.06),
      0 0 28px rgba(255,201,84,.24)!important;
  }
  #menuScreen .tt-featured-list .tt-featured-avatar-chip:hover::before,
  #menuScreen .tt-featured-list .tt-featured-avatar-chip:focus-visible::before{
    opacity:1;
    animation:ttFeaturedExplorerShine .95s cubic-bezier(.15,.64,.17,1) forwards;
  }
  #menuScreen .tt-featured-list .tt-featured-avatar-chip:hover::after,
  #menuScreen .tt-featured-list .tt-featured-avatar-chip:focus-visible::after{
    opacity:1;
    animation:ttFeaturedExplorerParticles 1.55s ease-in-out infinite alternate;
  }
  #menuScreen .tt-featured-list .tt-featured-avatar-chip:hover img,
  #menuScreen .tt-featured-list .tt-featured-avatar-chip:focus-visible img{
    transform:translateY(-2px) scale(1.03);
    filter:drop-shadow(0 8px 10px rgba(0,0,0,.34));
    transition:transform .2s ease, filter .2s ease;
  }
}
@keyframes ttFeaturedExplorerShine{
  0%{opacity:0;transform:translateX(-140%) skewX(-24deg)}
  12%{opacity:.95}
  100%{opacity:0;transform:translateX(150%) skewX(-24deg)}
}
@keyframes ttFeaturedExplorerParticles{
  0%{opacity:.12;transform:translateY(3px) scale(.92)}
  50%{opacity:.95;transform:translateY(-2px) scale(1)}
  100%{opacity:.42;transform:translateY(-5px) scale(1.03)}
}

/* =========================================================
   V22.72 — DUEL IDENTITY HIGH-CONTRAST SHADOW / OUTLINE
   The earlier soft shadow was too subtle on the bright arena.
   Add a thin dark-navy outline plus layered near-black shadows
   so player name and rating/rank remain visibly separated from
   both cyan and gold background artwork without moving anything.
   ========================================================= */
#duelScreen.duel-search-template-mode .duel-player-name-row strong,
#duelScreen.duel-match-found-mode .duel-player-name-row strong {
  -webkit-text-stroke: .7px rgba(1, 7, 15, .92) !important;
  paint-order: stroke fill !important;
  text-shadow:
    -1px -1px 0 rgba(1, 7, 15, .82),
     1px -1px 0 rgba(1, 7, 15, .82),
    -1px  1px 0 rgba(1, 7, 15, .82),
     1px  1px 0 rgba(1, 7, 15, .82),
     0 3px 3px rgba(0, 0, 0, .82),
     0 6px 13px rgba(0, 8, 20, .72),
     0 0 10px rgba(0, 0, 0, .35) !important;
}

#duelScreen.duel-search-template-mode .duel-player-card > span,
#duelScreen.duel-match-found-mode .duel-player-card > span {
  -webkit-text-stroke: .48px rgba(1, 8, 18, .94) !important;
  paint-order: stroke fill !important;
  text-shadow:
    -1px -1px 0 rgba(1, 8, 18, .76),
     1px -1px 0 rgba(1, 8, 18, .76),
    -1px  1px 0 rgba(1, 8, 18, .76),
     1px  1px 0 rgba(1, 8, 18, .76),
     0 3px 3px rgba(0, 0, 0, .78),
     0 6px 12px rgba(0, 8, 20, .68),
     0 0 9px rgba(0, 0, 0, .30) !important;
}

#duelScreen.duel-search-template-mode .duel-player-flag,
#duelScreen.duel-match-found-mode .duel-player-flag {
  box-shadow:
    0 0 0 1px rgba(1, 8, 18, .80),
    0 3px 5px rgba(0, 0, 0, .72),
    0 7px 15px rgba(0, 8, 20, .58) !important;
}

#duelScreen.duel-search-template-mode .duel-player-flag img,
#duelScreen.duel-match-found-mode .duel-player-flag img {
  filter:
    drop-shadow(0 2px 2px rgba(0, 0, 0, .70))
    drop-shadow(0 4px 6px rgba(0, 8, 20, .45)) !important;
}

/* =========================================================
   V22.69 — AVATAR SHOP CLOSE BUTTON HIT-AREA FIX
   Keep the entire close control above the shop header/wallet
   and provide a slightly larger invisible click target.
   ========================================================= */
#shopModal #closeShopBtn{
  position:absolute!important;
  top:14px!important;
  right:14px!important;
  z-index:500!important;
  pointer-events:auto!important;
  isolation:isolate;
  touch-action:manipulation;
}
#shopModal #closeShopBtn::before{
  content:'';
  position:absolute;
  inset:-7px;
  border-radius:18px;
  pointer-events:auto;
  z-index:-1;
}
#shopModal .shop-header{
  z-index:1!important;
}

/* =========================================================
   V22.69 — LEADERBOARD + AVATAR STORE CINEMATIC BACKGROUNDS
   Optimized WebP backgrounds with dark glass overlays so
   content remains readable while the artwork stays visible.
   ========================================================= */
#leaderboardModal .leaderboard-card{
  background-image:
    linear-gradient(180deg, rgba(3,12,23,.72) 0%, rgba(4,15,28,.80) 48%, rgba(3,10,20,.91) 100%),
    radial-gradient(circle at 73% 18%, rgba(47,132,255,.14), transparent 42%),
    url('assets/backgrounds/leaderboard.webp') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
  border-color:rgba(116,206,255,.28) !important;
  box-shadow:0 34px 110px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
#leaderboardModal .leaderboard-head,
#leaderboardModal .leaderboard-mode-tabs,
#leaderboardModal .leaderboard-podium,
#leaderboardModal .leaderboard-you-card,
#leaderboardModal .leaderboard-table-head,
#leaderboardModal .leaderboard-rows,
#leaderboardModal .leaderboard-status{
  position:relative;
  z-index:1;
}
#leaderboardModal .leaderboard-mode-tabs,
#leaderboardModal .leaderboard-you-card > div,
#leaderboardModal .lb-podium-slot,
#leaderboardModal .lb-row{
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
#leaderboardModal .lb-podium-slot{
  background:linear-gradient(180deg,rgba(25,45,69,.82),rgba(6,18,34,.90)) !important;
}
#leaderboardModal .lb-podium-slot.place-1{
  background:linear-gradient(180deg,rgba(71,57,20,.58),rgba(8,20,35,.91)) !important;
}
#leaderboardModal .lb-row{
  background:rgba(7,19,34,.78) !important;
}
#leaderboardModal .leaderboard-head p,
#leaderboardModal .leaderboard-table-head{
  text-shadow:0 2px 8px rgba(0,0,0,.72);
}

#shopModal .shop-card{
  background-image:
    linear-gradient(180deg, rgba(3,10,20,.70) 0%, rgba(4,13,25,.79) 44%, rgba(2,9,18,.91) 100%),
    radial-gradient(circle at 50% 20%, rgba(79,116,255,.12), transparent 43%),
    url('assets/backgrounds/avatar-store.webp') !important;
  background-size:cover !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
  border-color:rgba(100,184,255,.30) !important;
  box-shadow:0 34px 110px rgba(0,0,0,.64), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
#shopModal .shop-header,
#shopModal .shop-showroom,
#shopModal .cosmetic-shop-grid,
#shopModal .shop-economy-note,
#shopModal .account-status{
  position:relative;
  z-index:1;
}
#shopModal .shop-header h2,
#shopModal .shop-header .eyebrow,
#shopModal .shop-header .result-subtext{
  text-shadow:0 3px 12px rgba(0,0,0,.76);
}
#shopModal .shop-showroom{
  background:
    radial-gradient(circle at 50% 30%,rgba(58,151,238,.21),transparent 37%),
    linear-gradient(180deg,rgba(7,28,48,.77),rgba(4,15,28,.86)) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
#shopModal .avatar-store-card{
  backdrop-filter:blur(11px);
  -webkit-backdrop-filter:blur(11px);
}
#shopModal .shop-economy-note{
  background:rgba(4,14,26,.68) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

@media(max-width:820px){
  /* Mobile browsers handle fixed element backgrounds inconsistently; keep
     the same artwork but attach it to the scrolling card instead. */
  #leaderboardModal .leaderboard-card,
  #shopModal .shop-card{
    background-attachment:scroll !important;
  }
  #leaderboardModal .leaderboard-card{
    background-position:center center !important;
  }
  #shopModal .shop-card{
    background-position:center top !important;
  }
}

@media(prefers-reduced-motion:reduce){
  #leaderboardModal .leaderboard-card,
  #shopModal .shop-card{
    background-attachment:scroll !important;
  }
}

/* =========================================================
   V22.70 — LEADERBOARD CLOSE HIT AREA + MAIN MENU ART PILL
   Match the Avatar Store close-button reliability and reuse
   the cinematic leaderboard artwork on the main-menu CTA.
   ========================================================= */
#leaderboardModal #closeLeaderboardBtn{
  position:absolute!important;
  top:14px!important;
  right:14px!important;
  z-index:500!important;
  pointer-events:auto!important;
  isolation:isolate;
  touch-action:manipulation;
}
#leaderboardModal #closeLeaderboardBtn::before{
  content:'';
  position:absolute;
  inset:-7px;
  border-radius:18px;
  pointer-events:auto;
  z-index:-1;
}
#leaderboardModal .leaderboard-head{
  z-index:1!important;
}

#menuScreen .tt-main-leaderboard-action .tt-menu-leaderboard-btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background-image:
    linear-gradient(90deg,rgba(3,15,29,.92) 0%,rgba(5,25,43,.80) 47%,rgba(4,17,31,.76) 100%),
    url('assets/backgrounds/leaderboard.webp') !important;
  background-size:cover!important;
  background-position:center 54%!important;
  background-repeat:no-repeat!important;
  border-color:rgba(105,211,255,.38)!important;
  box-shadow:0 11px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 28px rgba(16,92,148,.09)!important;
}
#menuScreen .tt-main-leaderboard-action .tt-menu-leaderboard-btn::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 76% 42%,rgba(76,171,255,.17),transparent 36%),
    linear-gradient(180deg,rgba(255,255,255,.025),rgba(0,0,0,.08));
}
#menuScreen .tt-main-leaderboard-action .tt-menu-leaderboard-btn > *{
  position:relative;
  z-index:1;
}
#menuScreen .tt-main-leaderboard-action .tt-menu-leaderboard-btn:hover{
  border-color:rgba(117,229,255,.82)!important;
  background-image:
    linear-gradient(90deg,rgba(3,15,29,.84) 0%,rgba(5,25,43,.69) 47%,rgba(4,17,31,.66) 100%),
    url('assets/backgrounds/leaderboard.webp') !important;
  box-shadow:0 14px 30px rgba(0,0,0,.26),0 0 23px rgba(52,203,255,.16),inset 0 1px 0 rgba(255,255,255,.09)!important;
}
#menuScreen .tt-menu-leaderboard-icon{
  text-shadow:0 3px 10px rgba(0,0,0,.80),0 0 12px rgba(255,211,92,.18);
}
#menuScreen .tt-menu-leaderboard-copy strong{
  text-shadow:0 2px 8px rgba(0,0,0,.92);
}
#menuScreen .tt-menu-leaderboard-copy small{
  color:#c0d5e4!important;
  text-shadow:0 2px 7px rgba(0,0,0,.90);
}
#menuScreen .tt-menu-leaderboard-btn > b{
  text-shadow:0 2px 8px rgba(0,0,0,.88);
}


/* =========================================================
   V22.73 — MAIN MENU PLAY NOW PILL CINEMATIC BACKGROUND
   Apply the provided cosmic/world image to the Play Now pill
   with a dark glass overlay so the CTA stays readable.
   ========================================================= */
#menuScreen .tt-play-now{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-color:rgba(178,230,255,.92)!important;
  background:
    radial-gradient(circle at 50% 50%, rgba(104,160,255,.10) 0%, rgba(104,160,255,0) 52%),
    linear-gradient(140deg, rgba(5,16,33,.22) 0%, rgba(5,16,33,.55) 55%, rgba(4,16,30,.76) 100%),
    url('assets/backgrounds/play-now-pill.webp') center 56%/cover no-repeat !important;
  box-shadow:
    0 0 0 2px rgba(103,212,255,.14),
    0 0 28px rgba(53,150,255,.28),
    0 18px 34px rgba(2,29,72,.34),
    inset 0 1px 0 rgba(255,255,255,.38)!important;
}
#menuScreen .tt-play-now::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(90deg, rgba(4,13,27,.52) 0%, rgba(4,13,27,.18) 36%, rgba(4,13,27,.28) 62%, rgba(4,13,27,.52) 100%),
    linear-gradient(180deg, rgba(14,36,86,.16) 0%, rgba(5,14,30,.18) 38%, rgba(6,17,34,.42) 100%);
  pointer-events:none;
}
#menuScreen .tt-play-now > *{
  position:relative;
  z-index:2;
}
#menuScreen .tt-play-now .v12-action-icon,
#menuScreen .tt-play-now strong,
#menuScreen .tt-play-now small,
#menuScreen .tt-play-now > b{
  text-shadow:
    0 2px 8px rgba(0,0,0,.42),
    0 1px 1px rgba(1,10,21,.36);
}
#menuScreen .tt-play-now .v12-action-icon{
  filter:drop-shadow(0 4px 10px rgba(52,163,255,.36));
}
#menuScreen .tt-play-now small{
  color:#e3f5ff!important;
}
#menuScreen .tt-play-now:hover{
  filter:brightness(1.04)!important;
  box-shadow:
    0 0 34px rgba(84,180,255,.30),
    0 20px 38px rgba(2,29,72,.40),
    inset 0 1px 0 rgba(255,255,255,.46)!important;
}
@media(max-width:820px){
  #menuScreen .tt-play-now{
    background-position:center 52%!important;
  }
}

/* =========================================================
   V22.74 — MAIN MENU COUNTRY FLAG SIZE POLISH
   Slightly reduce the country flag beside player names so it
   balances better with the typography without looking tiny.
   ========================================================= */
#menuScreen .v12-account .account-country-flag{
  min-width:24px!important;
  margin-right:.28rem!important;
}
#menuScreen .v12-account .account-country-flag .tt-country-flag-img{
  width:24px!important;
  height:17px!important;
  border-radius:3px!important;
}
#menuScreen .tt-player-name .account-country-flag{
  min-width:24px!important;
  margin-right:.28rem!important;
}
#menuScreen .tt-player-name .account-country-flag .tt-country-flag-img{
  width:24px!important;
  height:17px!important;
  border-radius:3px!important;
}


/* =========================================================
   V22.74 — FEATURED EXPLORERS AVATAR-STORE BACKGROUND REUSE
   Reuse the Avatar Store showroom background inside the
   Featured Explorers panel with a dark glass overlay.
   ========================================================= */
#menuScreen .tt-featured-skins{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background:
    linear-gradient(135deg, rgba(4,14,25,.84) 0%, rgba(5,19,34,.72) 32%, rgba(5,19,34,.76) 68%, rgba(4,14,25,.86) 100%),
    url('assets/backgrounds/avatar-store.webp') center center / cover no-repeat!important;
  border-color:rgba(106,196,255,.24)!important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 50px rgba(77,177,255,.05)!important;
}
#menuScreen .tt-featured-skins::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 72% 42%, rgba(117,191,255,.14) 0%, rgba(117,191,255,0) 34%),
    linear-gradient(90deg, rgba(3,12,22,.78) 0%, rgba(3,12,22,.52) 22%, rgba(3,12,22,.34) 48%, rgba(3,12,22,.58) 76%, rgba(3,12,22,.78) 100%);
}
#menuScreen .tt-featured-skins > *{
  position:relative;
  z-index:2;
}
#menuScreen .tt-featured-copy small,
#menuScreen .tt-featured-copy strong{
  text-shadow:
    0 2px 8px rgba(0,0,0,.44),
    0 1px 1px rgba(1,10,20,.36);
}
#menuScreen .tt-featured-list button,
#menuScreen .tt-featured-list .tt-featured-avatar-chip{
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}


/* =========================================================
   V22.75 — NEXT EXPLORER CINEMATIC BACKGROUND
   Reuse the provided explorer-world artwork inside the
   Next Explorer card while preserving text/avatar readability.
   ========================================================= */
#menuScreen .tt-next-unlock{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background:
    linear-gradient(115deg, rgba(3,12,22,.88) 0%, rgba(4,15,27,.70) 34%, rgba(4,15,27,.50) 58%, rgba(3,12,22,.82) 100%),
    url('assets/backgrounds/next-explorer-pill.webp') center 50% / cover no-repeat!important;
  border-color:rgba(124,204,255,.28)!important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 42px rgba(87,175,255,.05)!important;
}
#menuScreen .tt-next-unlock::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 58% 46%, rgba(92,175,255,.15) 0%, rgba(92,175,255,0) 38%),
    linear-gradient(90deg, rgba(2,10,19,.82) 0%, rgba(2,10,19,.48) 34%, rgba(2,10,19,.30) 58%, rgba(2,10,19,.70) 100%);
}
#menuScreen .tt-next-unlock > *{
  position:relative;
  z-index:2;
}
#menuScreen .tt-next-unlock img{
  background:rgba(7,23,38,.70)!important;
  border:1px solid rgba(112,206,255,.20);
  box-shadow:0 7px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}
#menuScreen .tt-next-unlock small,
#menuScreen .tt-next-unlock strong,
#menuScreen .tt-next-unlock em,
#menuScreen .tt-next-unlock > b{
  text-shadow:
    0 2px 8px rgba(0,0,0,.48),
    0 1px 1px rgba(0,0,0,.30);
}
#menuScreen .tt-next-unlock:hover{
  border-color:rgba(137,221,255,.40)!important;
  box-shadow:
    0 15px 32px rgba(0,0,0,.28),
    0 0 24px rgba(79,171,255,.10),
    inset 0 1px 0 rgba(255,255,255,.06)!important;
}


/* =========================================================
   V22.76 — START EXPEDITION BORNEO BACKGROUND
   Reuse the existing home-hero-borneo artwork as the full
   Choose Your Challenge background with readable glass UI.
   ========================================================= */
.play-setup-modal{
  background:rgba(1,7,13,.72)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
.play-setup-card{
  position:relative!important;
  isolation:isolate!important;
  background:
    linear-gradient(180deg,rgba(2,12,22,.64) 0%,rgba(3,15,27,.72) 32%,rgba(2,11,20,.84) 100%),
    radial-gradient(circle at 72% 14%,rgba(63,183,255,.10),transparent 34%),
    url('assets/backgrounds/home-hero-borneo.webp') center center / cover no-repeat!important;
  border-color:rgba(111,214,255,.30)!important;
  box-shadow:
    0 34px 105px rgba(0,0,0,.68),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 0 90px rgba(3,12,23,.22)!important;
}
.play-setup-card::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(90deg,rgba(2,10,18,.32),rgba(2,10,18,.10) 42%,rgba(2,10,18,.24)),
    linear-gradient(180deg,rgba(5,18,31,.08),rgba(3,12,22,.30) 54%,rgba(2,9,17,.48));
}
.play-setup-card > *{
  position:relative;
  z-index:2;
}
.play-setup-hero{
  background:
    linear-gradient(90deg,rgba(4,18,32,.72) 0%,rgba(4,18,32,.38) 58%,rgba(4,18,32,.12) 100%)!important;
  border-bottom-color:rgba(155,223,255,.12)!important;
}
.play-setup-copy h2,
.play-setup-copy p,
.play-setup-copy .eyebrow{
  text-shadow:0 2px 10px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.48);
}
.play-setup-option{
  border-color:rgba(151,216,255,.13)!important;
  background:linear-gradient(145deg,rgba(5,20,34,.80),rgba(4,15,27,.68))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 10px 26px rgba(0,0,0,.10)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}
.play-setup-segments .segment{
  background:rgba(3,14,25,.76)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}
.play-setup-segments .segment.active{
  background:linear-gradient(135deg,#55e8f3,#70e6c8)!important;
}
.play-setup-footer{
  background:linear-gradient(180deg,rgba(2,11,20,0),rgba(2,11,20,.30));
}
.music-volume-control,
.play-setup-sound,
.play-setup-music{
  backdrop-filter:blur(9px)!important;
  -webkit-backdrop-filter:blur(9px)!important;
}
@media(max-width:720px){
  .play-setup-card{
    background-position:center center!important;
  }
  .play-setup-hero{
    background:linear-gradient(90deg,rgba(4,18,32,.78),rgba(4,18,32,.42))!important;
  }
  .play-setup-option{
    background:linear-gradient(145deg,rgba(5,20,34,.86),rgba(4,15,27,.76))!important;
  }
}


/* =========================================================
   V22.76 — TOMMYTRACE MULTIPLAYER CINEMATIC BACKGROUND
   Reuse the provided global-hub artwork as the background for
   the TommyTrace Multiplayer screen with a dark glass overlay.
   ========================================================= */
#multiplayerScreen{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 12%, rgba(105,189,255,.12), transparent 26%),
    linear-gradient(180deg, rgba(4,13,25,.26), rgba(4,13,25,.62) 56%, rgba(4,13,25,.86) 100%),
    url('assets/backgrounds/leaderboard.webp') center center / cover no-repeat fixed!important;
}
#multiplayerScreen::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(3,10,19,.72) 0%, rgba(3,10,19,.44) 26%, rgba(3,10,19,.32) 48%, rgba(3,10,19,.44) 72%, rgba(3,10,19,.74) 100%),
    linear-gradient(180deg, rgba(5,18,34,.18) 0%, rgba(5,18,34,.14) 28%, rgba(5,18,34,.50) 100%);
  z-index:0;
}
#multiplayerScreen > *{
  position:relative;
  z-index:1;
}
#multiplayerScreen .multiplayer-shell{
  border:1px solid rgba(108,214,255,.18)!important;
  background:
    radial-gradient(circle at 50% -10%, rgba(99,210,255,.15), transparent 28%),
    linear-gradient(180deg, rgba(6,21,38,.84), rgba(6,17,29,.92))!important;
  box-shadow:0 30px 76px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.05)!important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
#multiplayerScreen .multiplayer-form{
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 12px 26px rgba(0,0,0,.16)!important;
}
#multiplayerScreen .multiplayer-back,
#multiplayerScreen .multiplayer-shell h2,
#multiplayerScreen .multiplayer-shell .eyebrow,
#multiplayerScreen .multiplayer-shell p,
#multiplayerScreen .multiplayer-form label > span,
#multiplayerScreen .multiplayer-identity-summary > span,
#multiplayerScreen .multiplayer-identity-summary strong,
#multiplayerScreen .multiplayer-divider span,
#multiplayerScreen .duel-entry-copy{
  text-shadow:0 2px 10px rgba(0,0,0,.42), 0 1px 1px rgba(0,0,0,.30);
}
@media(max-width:820px){
  #multiplayerScreen{
    background:
      linear-gradient(180deg, rgba(4,13,25,.46), rgba(4,13,25,.74) 58%, rgba(4,13,25,.90) 100%),
      url('assets/backgrounds/leaderboard.webp') center center / cover no-repeat!important;
  }
}


/* =========================================================
   V22.77 — MULTIPLAYER INNER PANEL BACKGROUND REUSE
   Reuse the same multiplayer HQ artwork inside the main
   Play with Friends panel with a darker glass treatment.
   ========================================================= */
#multiplayerScreen .multiplayer-shell{
  position:relative;
  isolation:isolate;
  background:
    linear-gradient(135deg, rgba(5,18,34,.80) 0%, rgba(6,19,35,.70) 34%, rgba(6,18,31,.78) 68%, rgba(5,15,27,.86) 100%),
    url('assets/backgrounds/leaderboard.webp') center center / cover no-repeat!important;
}
#multiplayerScreen .multiplayer-shell::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 50% 18%, rgba(107,196,255,.10), transparent 28%),
    linear-gradient(90deg, rgba(4,12,22,.82) 0%, rgba(4,12,22,.56) 22%, rgba(4,12,22,.34) 48%, rgba(4,12,22,.58) 76%, rgba(4,12,22,.84) 100%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 18%, rgba(4,12,22,.26) 58%, rgba(4,12,22,.54) 100%);
}
#multiplayerScreen .multiplayer-shell > *{
  position:relative;
  z-index:1;
}
#multiplayerScreen .multiplayer-form{
  background:linear-gradient(180deg, rgba(6,22,38,.56), rgba(6,18,31,.70))!important;
  border-color:rgba(107,214,255,.14)!important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
#multiplayerScreen .multiplayer-shell h2,
#multiplayerScreen .multiplayer-shell p,
#multiplayerScreen .multiplayer-shell .eyebrow,
#multiplayerScreen .multiplayer-form label > span,
#multiplayerScreen .multiplayer-identity-summary > span,
#multiplayerScreen .multiplayer-identity-summary strong,
#multiplayerScreen .multiplayer-divider span,
#multiplayerScreen .duel-entry-copy{
  text-shadow:0 2px 10px rgba(0,0,0,.45), 0 1px 1px rgba(0,0,0,.34);
}


/* =========================================================
   V22.78 — PLAYER PROFILE LEADERBOARD BACKGROUND REUSE
   Reuse the Leaderboard cinematic artwork inside the Player
   Profile modal with layered glass for readability.
   ========================================================= */
#accountModal .account-card{
  position:relative;
  isolation:isolate;
  overflow:auto;
  background:
    linear-gradient(140deg, rgba(5,17,31,.84) 0%, rgba(5,18,32,.72) 38%, rgba(5,17,30,.80) 72%, rgba(4,14,26,.90) 100%),
    url('assets/backgrounds/leaderboard.webp') center center / cover no-repeat fixed!important;
  border-color:rgba(111,210,255,.20)!important;
  box-shadow:
    0 30px 76px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 80px rgba(66,153,255,.04)!important;
}
#accountModal .account-card::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 78% 10%, rgba(79,180,255,.13), transparent 24%),
    linear-gradient(90deg, rgba(3,11,21,.76) 0%, rgba(3,11,21,.48) 28%, rgba(3,11,21,.36) 52%, rgba(3,11,21,.56) 78%, rgba(3,11,21,.80) 100%),
    linear-gradient(180deg, rgba(5,16,29,.10) 0%, rgba(5,16,29,.22) 42%, rgba(5,16,29,.58) 100%);
}
#accountModal .account-card > *{
  position:relative;
  z-index:1;
}
#accountModal .account-profile-head{
  background:linear-gradient(180deg, rgba(7,24,42,.28), rgba(7,24,42,.10));
}
#accountModal .signed-in-panel,
#accountModal .profile-stats-grid > div,
#accountModal .profile-best-grid > div,
#accountModal .profile-history-block,
#accountModal .social-auth-panel{
  background:linear-gradient(145deg, rgba(7,26,44,.72), rgba(6,19,33,.64))!important;
  border-color:rgba(112,214,255,.14)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 10px 24px rgba(0,0,0,.12)!important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
#accountModal .profile-name-row input,
#accountModal .profile-country-row select{
  background:rgba(10,29,45,.78)!important;
  border-color:rgba(255,255,255,.10)!important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
#accountModal .account-profile-head h2,
#accountModal .account-profile-head p,
#accountModal .eyebrow,
#accountModal .profile-name-edit label,
#accountModal .profile-country-edit label,
#accountModal .profile-name-rules,
#accountModal .profile-stats-grid span,
#accountModal .profile-stats-grid strong,
#accountModal .profile-best-grid span,
#accountModal .profile-best-grid strong{
  text-shadow:0 2px 10px rgba(0,0,0,.44), 0 1px 1px rgba(0,0,0,.30);
}
@media(max-width:820px){
  #accountModal .account-card{
    background:
      linear-gradient(180deg, rgba(5,17,31,.74), rgba(4,14,26,.90) 62%, rgba(4,14,26,.95) 100%),
      url('assets/backgrounds/leaderboard.webp') center center / cover no-repeat!important;
  }
}


/* =========================================================
   V22.79 — DAILY CHALLENGE REWARD CELEBRATION
   Clear Round 5 popup with coin/streak emphasis.
   ========================================================= */
#progressionRewardModal.daily-reward-mode .progression-reward-card{
  border-color:rgba(255,216,92,.46)!important;
  background:
    radial-gradient(circle at 50% -10%, rgba(255,220,88,.25), transparent 38%),
    radial-gradient(circle at 12% 92%, rgba(67,227,234,.10), transparent 20%),
    linear-gradient(180deg, rgba(12,27,39,.98), rgba(7,15,24,.995))!important;
  box-shadow:0 34px 90px rgba(0,0,0,.48),0 0 62px rgba(255,199,48,.17),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
#progressionRewardModal.daily-reward-mode .reward-burst{
  color:#ffe477!important;
  background:radial-gradient(circle,rgba(255,211,74,.22),rgba(255,193,46,.07) 62%,transparent 70%)!important;
  box-shadow:0 0 34px rgba(255,197,46,.17)!important;
}
#progressionRewardModal.daily-reward-mode #rewardTitle{
  color:#fff6cb;
  text-shadow:0 2px 18px rgba(255,201,58,.22),0 2px 8px rgba(0,0,0,.38);
}
#progressionRewardModal.daily-reward-mode #rewardEarnedText{
  color:#fff;
  font-weight:800;
  line-height:1.5;
}
#progressionRewardModal.daily-reward-mode #rewardPlacement{
  color:#ffe48a;
  border-color:rgba(255,213,87,.22);
  background:rgba(255,204,70,.07);
}
#progressionRewardModal.daily-reward-mode .reward-item.coins{
  border-color:rgba(255,211,85,.30);
  background:linear-gradient(145deg,rgba(255,204,65,.10),rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 24px rgba(255,194,43,.07);
}
#progressionRewardModal.daily-reward-mode .reward-item.coins strong{
  color:#ffe078;
  text-shadow:0 0 18px rgba(255,195,47,.20);
}


/* =========================================================
   V22.80 — LEADERBOARD ACTION ALIGNMENT + SAFER COMPACT MAP
   - Refresh is icon-only and aligned with the close button.
   - Desktop idle guess map is much smaller before hover so
     accidental pointer entry is less likely to expand it.
   ========================================================= */
#leaderboardModal .leaderboard-head{
  padding-right:104px!important;
}
#leaderboardModal #leaderboardRefreshBtn{
  position:absolute!important;
  top:14px!important;
  right:62px!important;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  padding:0!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:14px!important;
  line-height:1!important;
  font-size:19px!important;
  z-index:500!important;
  gap:0!important;
}
#leaderboardModal #leaderboardRefreshBtn .leaderboard-refresh-icon{
  display:block!important;
  line-height:1!important;
  transform-origin:50% 50%;
}
#leaderboardModal #leaderboardRefreshBtn.is-loading .leaderboard-refresh-icon{
  animation:ttLeaderboardRefreshSpin .75s linear infinite;
}
@keyframes ttLeaderboardRefreshSpin{
  to{transform:rotate(360deg)}
}

@media (min-width:821px){
  /* Small idle footprint: only the map preview can trigger the hover lock. */
  #gameScreen .map-dock:not(.desktop-map-locked){
    right:14px!important;
    bottom:14px!important;
    width:174px!important;
    padding:4px!important;
    gap:4px!important;
    grid-template-columns:minmax(0,1fr) 40px!important;
    border-radius:14px!important;
    background:rgba(4,20,32,.76)!important;
    box-shadow:0 10px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.035)!important;
  }
  #gameScreen .map-dock:not(.desktop-map-locked) .mini-map-card{
    padding:0!important;
    border-radius:10px!important;
    overflow:hidden!important;
  }
  #gameScreen .map-dock:not(.desktop-map-locked) .mini-map-head,
  #gameScreen .map-dock:not(.desktop-map-locked) .map-foot,
  #gameScreen .map-dock:not(.desktop-map-locked) .guess-status{
    display:none!important;
  }
  #gameScreen .map-dock:not(.desktop-map-locked) .map{
    height:62px!important;
    min-height:62px!important;
    border-radius:10px!important;
  }
  #gameScreen .map-dock:not(.desktop-map-locked) .guess-cta{
    min-height:42px!important;
    height:42px!important;
    margin:0!important;
    padding:3px 2px!important;
    gap:1px!important;
    border-radius:10px!important;
    font-size:8px!important;
    letter-spacing:.04em!important;
    box-shadow:0 8px 18px rgba(67,227,234,.14), inset 0 1px 0 rgba(255,255,255,.15)!important;
  }
  #gameScreen .map-dock:not(.desktop-map-locked) .guess-cta-icon{
    font-size:13px!important;
  }

  /* Preserve the existing large hover-locked map dimensions. */
  #gameScreen .map-dock.desktop-map-locked{
    width:min(720px,48vw)!important;
    right:22px!important;
    bottom:22px!important;
  }
  #gameScreen .map-dock.desktop-map-locked .map{
    height:min(52vh,500px)!important;
    min-height:0!important;
  }
}

@media(max-width:760px){
  #leaderboardModal .leaderboard-head{
    padding-right:92px!important;
  }
}


/* =========================================================
   V22.81 — DAILY GLOBAL SOLO LEADERBOARD
   Today's best Solo World score only. Resets at 00:00 Malaysia Time (UTC+8).
   Lifetime Solo best remains stored in the player profile.
   ========================================================= */
#leaderboardModal .leaderboard-reset-countdown{
  display:inline-flex;
  align-items:center;
  min-height:27px;
  margin-top:9px;
  padding:0 10px;
  border:1px solid rgba(105,218,255,.20);
  border-radius:999px;
  background:rgba(4,18,34,.58);
  color:#8fe8ff;
  font-size:.60rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 8px 20px rgba(0,0,0,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  text-shadow:0 2px 8px rgba(0,0,0,.55);
}
#leaderboardModal .leaderboard-reset-countdown.hidden{
  display:none!important;
}
@media(max-width:760px){
  #leaderboardModal .leaderboard-reset-countdown{
    min-height:24px;
    margin-top:7px;
    padding:0 8px;
    font-size:.53rem;
    letter-spacing:.055em;
  }
}


/* =========================================================
   V22.83 — LEADERBOARD OPEN / STACKING HARDENING
   Keep the launcher clickable and the modal above every menu layer.
   ========================================================= */
#menuScreen .tt-main-leaderboard-action,
#menuScreen #menuLeaderboardBtn,
#leaderboardNavBtn,
#profileLeaderboardBtn{
  position:relative;
  pointer-events:auto!important;
}
#menuScreen .tt-main-leaderboard-action,
#menuScreen #menuLeaderboardBtn{
  z-index:25!important;
}
#leaderboardModal{
  z-index:5000!important;
  pointer-events:auto!important;
}
#leaderboardModal .leaderboard-card{
  position:relative;
  z-index:1;
  pointer-events:auto;
}


/* V22.84 — LEADERBOARD MODE TAB CLICK RELIABILITY */
#leaderboardModal .leaderboard-mode-tabs{
  position:relative!important;
  z-index:4!important;
  pointer-events:auto!important;
}
#leaderboardModal .leaderboard-mode-tab{
  position:relative;
  z-index:1;
  pointer-events:auto!important;
  touch-action:manipulation;
}


/* V22.85 — HARDEN LEADERBOARD MODE SWITCHING */
#leaderboardModal .leaderboard-mode-tabs{
  isolation:isolate!important;
}
#leaderboardModal .leaderboard-mode-tab{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:148px;
  user-select:none;
  -webkit-user-select:none;
  cursor:pointer!important;
}
#leaderboardModal .leaderboard-mode-tab::before,
#leaderboardModal .leaderboard-mode-tab::after{
  pointer-events:none!important;
}


/* =========================================================
   V22.84 — LEADERBOARD REFRESH NEXT TO RESET PILL
   Move the refresh icon beside the RESET IN pill instead of
   floating near the close button on desktop.
   ========================================================= */
#leaderboardModal .leaderboard-head{
  padding-right:64px!important;
}
#leaderboardModal .leaderboard-head > div:first-child{
  min-width:0;
}
#leaderboardModal .leaderboard-meta-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:9px;
  flex-wrap:wrap;
}
#leaderboardModal .leaderboard-reset-countdown{
  margin-top:0!important;
}
#leaderboardModal #leaderboardRefreshBtn{
  position:static!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  padding:0!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:12px!important;
  line-height:1!important;
  font-size:17px!important;
  z-index:auto!important;
  gap:0!important;
  flex:0 0 auto;
}
@media(max-width:760px){
  #leaderboardModal .leaderboard-head{
    padding-right:54px!important;
  }
  #leaderboardModal .leaderboard-meta-row{
    gap:8px;
    margin-top:7px;
  }
  #leaderboardModal #leaderboardRefreshBtn{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    min-height:30px!important;
    border-radius:10px!important;
    font-size:15px!important;
  }
}

/* V22.88 — deterministic leaderboard loading */
#leaderboardModal .leaderboard-status[data-kind="error"]{
  color:#ffb4b4!important;
}
#leaderboardModal .leaderboard-status[data-kind="success"]{
  color:#8fe8ff!important;
}


/* =========================================================
   V22.89 — ADMIN DUEL HISTORY CLEAR
   Admin-only per-player history reset. Current rating is preserved.
   ========================================================= */
#leaderboardModal .lb-player{
  position:relative;
}
#leaderboardModal .lb-player-copy{
  min-width:0;
  flex:1 1 auto;
}
#leaderboardModal .lb-admin-history-clear{
  flex:0 0 auto;
  width:30px;
  height:30px;
  min-width:30px;
  padding:0;
  margin-left:auto;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,117,117,.22);
  border-radius:9px;
  background:rgba(92,17,27,.34);
  color:#ffc1c1;
  font-size:13px;
  line-height:1;
  cursor:pointer;
  opacity:.76;
  transition:transform .16s ease, opacity .16s ease, border-color .16s ease, background .16s ease;
}
#leaderboardModal .lb-admin-history-clear:hover{
  opacity:1;
  transform:translateY(-1px);
  border-color:rgba(255,117,117,.48);
  background:rgba(122,25,37,.52);
}
#leaderboardModal .lb-admin-history-clear:focus-visible{
  outline:2px solid rgba(255,170,170,.72);
  outline-offset:2px;
}

.duel-history-confirm-modal{
  z-index:1700!important;
  background:rgba(1,7,14,.76)!important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.duel-history-confirm-card{
  width:min(520px,92vw)!important;
  padding:30px!important;
  border:1px solid rgba(255,124,124,.20)!important;
  background:
    radial-gradient(circle at 50% -12%, rgba(255,107,107,.10), transparent 34%),
    linear-gradient(180deg, rgba(11,28,45,.98), rgba(6,16,27,.99))!important;
  box-shadow:0 34px 90px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.duel-history-danger-icon{
  width:52px;
  height:52px;
  margin:0 auto 12px;
  display:grid;
  place-items:center;
  border-radius:16px;
  border:1px solid rgba(255,118,118,.24);
  background:rgba(111,24,34,.28);
  color:#ffb5b5;
  font-size:26px;
  font-weight:900;
}
.duel-history-admin-eyebrow{
  color:#ffb2b2!important;
  text-align:center;
}
.duel-history-confirm-card h2{
  margin:8px 0 8px;
  text-align:center;
}
.duel-history-confirm-copy{
  margin:0 0 16px;
  text-align:center;
  color:#b9c8d7;
}
.duel-history-confirm-summary{
  display:grid;
  gap:8px;
  margin:16px 0 20px;
  padding:16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(255,255,255,.035);
  color:#aebfd0;
  font-size:.82rem;
}
.duel-history-confirm-summary strong{
  color:#ffe09a;
}
.duel-history-confirm-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.duel-history-clear-confirm-btn{
  border-color:rgba(255,113,113,.34)!important;
  background:linear-gradient(180deg, rgba(197,53,67,.94), rgba(142,31,44,.96))!important;
  color:#fff!important;
}
.duel-history-clear-confirm-btn:disabled{
  opacity:.58;
  cursor:wait;
}
#duelHistoryClearStatus[data-kind="success"]{
  color:#9ff3d5!important;
}
#duelHistoryClearStatus[data-kind="error"]{
  color:#ffb0b0!important;
}
@media(max-width:760px){
  #leaderboardModal .lb-admin-history-clear{
    width:28px;
    height:28px;
    min-width:28px;
    border-radius:8px;
    font-size:12px;
  }
  .duel-history-confirm-card{
    padding:24px 18px!important;
  }
}


/* =========================================================
   V22.91 — FRIENDLY DUEL INVITES
   Ranked search fallback after 20s. Friend matches are unranked.
   ========================================================= */
#duelScreen .duel-long-wait-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
#duelScreen .duel-invite-friend-btn{
  border-color:rgba(255,201,99,.28)!important;
  background:linear-gradient(180deg,rgba(65,50,27,.86),rgba(28,31,42,.92))!important;
  color:#ffe4a7!important;
}
#duelScreen .duel-friendly-invite{
  width:min(560px,100%);
  margin:14px auto 4px;
  padding:16px;
  border:1px solid rgba(255,202,105,.20);
  border-radius:18px;
  background:
    radial-gradient(circle at 50% -25%,rgba(255,196,75,.13),transparent 48%),
    linear-gradient(180deg,rgba(11,31,48,.90),rgba(7,19,31,.95));
  box-shadow:0 18px 42px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.04);
  text-align:center;
}
#duelScreen .duel-friendly-kicker{
  color:#ffd77c;
  font-size:.66rem;
  font-weight:950;
  letter-spacing:.16em;
}
#duelScreen .duel-friendly-invite p{
  margin:7px 0 13px;
  color:#aebfd0;
  font-size:.78rem;
}
#duelScreen .duel-friendly-code-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(2,13,23,.56);
}
#duelScreen .duel-friendly-code-row span{
  color:#8da6b8;
  font-size:.60rem;
  font-weight:900;
  letter-spacing:.14em;
}
#duelScreen .duel-friendly-code-row strong{
  color:#fff0b9;
  font-size:1.35rem;
  letter-spacing:.18em;
  text-shadow:0 0 18px rgba(255,203,83,.20);
}
#duelScreen .duel-friendly-share-actions{
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:9px;
}
#duelScreen .duel-friendly-share-actions .btn{
  min-height:44px;
}
#duelScreen #duelFriendlyInviteStatus{
  display:block;
  margin-top:10px;
  color:#8fe8ff;
  font-size:.68rem;
}
#duelScreen .duel-friendly-share-actions .copied{
  border-color:rgba(107,239,192,.42)!important;
  box-shadow:0 0 0 2px rgba(107,239,192,.08)!important;
}
@media(max-width:620px){
  #duelScreen .duel-long-wait-actions,
  #duelScreen .duel-friendly-share-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  #duelScreen .duel-friendly-invite{
    padding:13px;
  }
}


/* =========================================================
   V22.92 — HOST-CONTROLLED PRIVATE LOBBY SETTINGS
   Region, difficulty and mode stay editable until the match starts.
   ========================================================= */
#lobbyScreen .lobby-settings-head{
  position:relative;
  z-index:1;
  margin-top:22px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}
#lobbyScreen .lobby-settings-head p{
  margin:5px 0 0;
  color:#8ea7b9;
  font-size:.73rem;
}
#lobbyScreen .lobby-settings-role{
  flex:0 0 auto;
  padding:7px 10px;
  border:1px solid rgba(255,206,111,.20);
  border-radius:999px;
  background:rgba(83,58,19,.24);
  color:#ffe0a1;
  font-size:.58rem;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
#lobbyScreen .lobby-meta{
  margin-top:10px!important;
}
#lobbyScreen .lobby-setting-card{
  min-width:0;
}
#lobbyScreen .lobby-setting-select{
  width:100%;
  min-height:46px;
  margin-top:8px;
  padding:0 38px 0 13px;
  border:1px solid rgba(111,220,255,.20);
  border-radius:13px;
  background:linear-gradient(180deg,rgba(11,37,56,.94),rgba(7,24,39,.96));
  color:#f4fbff;
  font:inherit;
  font-size:.86rem;
  font-weight:800;
  cursor:pointer;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
#lobbyScreen .lobby-setting-select:hover{
  border-color:rgba(111,220,255,.36);
}
#lobbyScreen .lobby-setting-select:focus{
  border-color:rgba(95,227,255,.52);
  box-shadow:0 0 0 3px rgba(67,227,234,.09),inset 0 1px 0 rgba(255,255,255,.04);
}
#lobbyScreen .lobby-setting-select:disabled{
  opacity:.58;
  cursor:wait;
}
#lobbyScreen .lobby-setting-select option{
  background:#0a2033;
  color:#f4fbff;
}
@media(max-width:760px){
  #lobbyScreen .lobby-settings-head{
    align-items:flex-start;
  }
  #lobbyScreen .lobby-settings-head p{
    font-size:.66rem;
  }
  #lobbyScreen .lobby-setting-select{
    min-height:44px;
    font-size:.80rem;
  }
}
@media(max-width:520px){
  #lobbyScreen .lobby-settings-head{
    display:block;
  }
  #lobbyScreen .lobby-settings-role{
    display:inline-flex;
    margin-top:9px;
  }
}


/* =========================================================
   V22.93 — MULTIPLAYER LOBBY BACKGROUND REUSE
   Reuse the same multiplayer HQ cinematic artwork on the
   private multiplayer lobby page and inside the lobby shell.
   ========================================================= */
#lobbyScreen{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 52% 10%, rgba(104,191,255,.10), transparent 24%),
    linear-gradient(180deg, rgba(4,13,25,.30), rgba(4,13,25,.66) 56%, rgba(4,13,25,.88) 100%),
    url('assets/backgrounds/leaderboard.webp') center center / cover no-repeat fixed!important;
}
#lobbyScreen::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(90deg, rgba(3,10,19,.76) 0%, rgba(3,10,19,.46) 26%, rgba(3,10,19,.32) 48%, rgba(3,10,19,.46) 72%, rgba(3,10,19,.78) 100%),
    linear-gradient(180deg, rgba(5,18,34,.14) 0%, rgba(5,18,34,.14) 28%, rgba(5,18,34,.54) 100%);
}
#lobbyScreen > *{
  position:relative;
  z-index:1;
}
#lobbyScreen .lobby-shell{
  position:relative;
  isolation:isolate;
  border:1px solid rgba(108,214,255,.18)!important;
  background:
    linear-gradient(135deg, rgba(5,18,34,.82) 0%, rgba(6,19,35,.72) 34%, rgba(6,18,31,.80) 68%, rgba(5,15,27,.88) 100%),
    url('assets/backgrounds/leaderboard.webp') center center / cover no-repeat!important;
  box-shadow:0 30px 76px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05)!important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
#lobbyScreen .lobby-shell::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 48% 0%, rgba(98,209,255,.12), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.015) 18%, rgba(0,0,0,.12) 100%);
}
#lobbyScreen .lobby-shell > *{
  position:relative;
  z-index:1;
}
#lobbyScreen .lobby-shell h1,
#lobbyScreen .lobby-shell h2,
#lobbyScreen .lobby-shell .eyebrow,
#lobbyScreen .lobby-shell p,
#lobbyScreen .lobby-shell span,
#lobbyScreen .lobby-shell strong,
#lobbyScreen #lobbyStatus{
  text-shadow:0 2px 10px rgba(0,0,0,.42), 0 1px 1px rgba(0,0,0,.30);
}
@media(max-width:820px){
  #lobbyScreen{
    background:
      linear-gradient(180deg, rgba(4,13,25,.48), rgba(4,13,25,.76) 58%, rgba(4,13,25,.92) 100%),
      url('assets/backgrounds/leaderboard.webp') center center / cover no-repeat!important;
  }
}


/* =========================================================
   V22.94 — MULTIPLAYER COPY INVITE LINK
   Shareable ?room=XXXXX deep link for private multiplayer.
   ========================================================= */
#lobbyScreen .lobby-room-code-row{
  gap:12px;
}
#lobbyScreen .lobby-share-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
#lobbyScreen .lobby-share-actions .btn-copy-room{
  min-height:36px;
  padding:0 14px;
  white-space:nowrap;
}
#lobbyScreen .lobby-copy-link{
  border-color:rgba(255,205,101,.20)!important;
  background:linear-gradient(180deg,rgba(80,58,24,.30),rgba(13,31,45,.72))!important;
  color:#ffe5a7!important;
}
#lobbyScreen .lobby-copy-link:hover{
  border-color:rgba(255,205,101,.42)!important;
}
@media(max-width:620px){
  #lobbyScreen .lobby-share-actions{
    width:100%;
  }
  #lobbyScreen .lobby-share-actions .btn-copy-room{
    flex:1 1 130px;
  }
}


/* =========================================================
   V23.01 — MOBILE MULTIPLAYER TOP-BAR SHORTCUT
   The full desktop nav is hidden on phones, so expose a
   dedicated Multiplayer shortcut in the compact mobile app bar.
   ========================================================= */
#menuScreen .mobile-multiplayer-button{
  display:none;
}

@media(max-width:820px){
  #menuScreen .mobile-multiplayer-button{
    display:inline-grid!important;
    place-items:center!important;
    flex:0 0 auto!important;
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    padding:0!important;
    border-radius:14px!important;
    border:1px solid rgba(126,220,255,.20)!important;
    background:linear-gradient(145deg,rgba(39,155,224,.15),rgba(255,255,255,.025))!important;
    color:#e9f9ff!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.055),
      0 8px 20px rgba(0,0,0,.16)!important;
    backdrop-filter:blur(14px)!important;
    cursor:pointer!important;
    -webkit-tap-highlight-color:transparent;
    transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
  }

  #menuScreen .mobile-multiplayer-button svg{
    width:21px!important;
    height:21px!important;
    fill:currentColor!important;
    filter:drop-shadow(0 0 7px rgba(87,205,255,.22));
    pointer-events:none;
  }

  #menuScreen .mobile-multiplayer-button:active{
    transform:scale(.94);
  }

  #menuScreen .mobile-multiplayer-button:focus-visible{
    outline:2px solid rgba(91,215,255,.72);
    outline-offset:2px;
  }
}

@media(max-width:540px){
  #menuScreen .mobile-multiplayer-button{
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    border-radius:13px!important;
  }
  #menuScreen .mobile-multiplayer-button svg{
    width:20px!important;
    height:20px!important;
  }
}

@media(max-width:420px){
  #menuScreen .mobile-multiplayer-button{
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;
  }
  #menuScreen .mobile-multiplayer-button svg{
    width:19px!important;
    height:19px!important;
  }
}

/* Preserve the compact landscape phone header. */
@media(max-width:980px) and (orientation:landscape) and (max-height:560px){
  #menuScreen .mobile-multiplayer-button{
    display:inline-grid!important;
    width:34px!important;
    min-width:34px!important;
    height:34px!important;
    min-height:34px!important;
    border-radius:11px!important;
  }
  #menuScreen .mobile-multiplayer-button svg{
    width:17px!important;
    height:17px!important;
  }
}


/* =========================================================
   V23.10 — ADMIN LIVE OPS / FEATURE FLAGS / AUDIT LOG
   ========================================================= */
.admin-avatar-card{
  width:min(980px,94vw)!important;
  max-height:min(88vh,880px)!important;
  overflow:auto!important;
}
.admin-console-tabs{
  display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 18px;
  padding:6px; border:1px solid rgba(255,255,255,.08);
  border-radius:16px; background:rgba(3,10,20,.45);
}
.admin-console-tab{
  border:0; border-radius:11px; padding:10px 14px; cursor:pointer;
  background:transparent; color:rgba(235,247,255,.66);
  font-weight:800; letter-spacing:.02em;
}
.admin-console-tab.active{
  color:#fff; background:linear-gradient(145deg,rgba(42,172,235,.28),rgba(255,255,255,.08));
  box-shadow:inset 0 0 0 1px rgba(117,217,255,.20);
}
.admin-console-pane{display:none}
.admin-console-pane.active{display:block}
.admin-pane-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:14px;
}
.admin-pane-head>div{display:grid;gap:3px}
.admin-pane-head strong{font-size:15px;color:#f2fbff}
.admin-pane-head span{font-size:12px;color:rgba(223,239,249,.57)}
.admin-refresh-btn{padding:8px 12px!important;min-height:34px!important}
.admin-live-metrics{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-bottom:16px;
}
.admin-live-metric{
  padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(145deg,rgba(9,28,45,.78),rgba(7,15,28,.62));
}
.admin-live-metric small{display:block;color:rgba(216,235,247,.55);font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.admin-live-metric strong{display:block;margin-top:5px;color:#f7fdff;font-size:22px}
.admin-live-section{margin-top:14px}
.admin-live-section-title{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px}
.admin-live-section-title strong{font-size:13px}
.admin-live-section-title span{font-size:11px;color:rgba(220,238,248,.5)}
.admin-live-list,.admin-audit-list{display:grid;gap:7px}
.admin-live-row,.admin-audit-row{
  display:grid;gap:4px;padding:10px 12px;border-radius:12px;
  border:1px solid rgba(255,255,255,.07);background:rgba(2,10,19,.42);
}
.admin-live-row-main,.admin-audit-row-main{display:flex;align-items:center;justify-content:space-between;gap:10px}
.admin-live-row strong,.admin-audit-row strong{font-size:12px;color:#f0faff}
.admin-live-row span,.admin-audit-row span,.admin-live-row small,.admin-audit-row small{
  font-size:11px;color:rgba(217,236,247,.58)
}
.admin-room-badge{
  display:inline-flex;align-items:center;border-radius:999px;padding:3px 7px;
  font-size:9px!important;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(64,190,255,.12);border:1px solid rgba(86,201,255,.16);color:#b9ebff!important;
}
.admin-feature-warning{
  margin-bottom:12px;padding:10px 12px;border-radius:12px;
  border:1px solid rgba(255,190,74,.18);background:rgba(255,167,36,.07);
  color:rgba(255,229,187,.8);font-size:11px;
}
.admin-feature-flags-list{display:grid;gap:8px}
.admin-feature-flag{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 13px;border-radius:13px;border:1px solid rgba(255,255,255,.08);
  background:rgba(3,12,23,.48);
}
.admin-feature-flag-copy{display:grid;gap:3px}
.admin-feature-flag-copy strong{font-size:12px;color:#f3fbff}
.admin-feature-flag-copy span{font-size:11px;color:rgba(215,235,246,.55)}
.admin-flag-toggle{
  position:relative;display:inline-flex;flex:0 0 auto;width:48px;height:27px;
  border-radius:999px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,92,92,.18);cursor:pointer;padding:0;
}
.admin-flag-toggle::after{
  content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;
  background:#fff;transition:transform .18s ease;
}
.admin-flag-toggle.on{background:rgba(49,218,154,.22);border-color:rgba(88,237,179,.25)}
.admin-flag-toggle.on::after{transform:translateX(21px)}
.admin-flag-toggle:disabled{opacity:.48;cursor:wait}
.admin-audit-list{max-height:480px;overflow:auto;padding-right:2px}
.admin-audit-action{color:#8fddff!important;text-transform:uppercase;letter-spacing:.05em;font-weight:900}
.admin-audit-detail{overflow-wrap:anywhere}
@media(max-width:760px){
  .admin-avatar-card{width:96vw!important;max-height:91vh!important}
  .admin-live-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-console-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-console-tab{padding:9px 8px;font-size:11px}
  .admin-pane-head{align-items:flex-start}
}

.feature-disabled{
  opacity:.5!important;
  filter:saturate(.45)!important;
  cursor:not-allowed!important;
}


/* V23.13 — admin new-player presence list */
.admin-player-presence{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px!important;
  font-weight:900;
}
.admin-presence-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  display:inline-block;
  flex:0 0 auto;
  background:rgba(160,176,190,.55);
  box-shadow:0 0 0 2px rgba(160,176,190,.08);
}
.admin-player-presence.online{color:#8ff0c5!important}
.admin-player-presence.online .admin-presence-dot{
  background:#55e39d;
  box-shadow:0 0 9px rgba(85,227,157,.55),0 0 0 2px rgba(85,227,157,.10);
}
.admin-player-presence.offline{color:rgba(211,226,236,.48)!important}


/* V23.14 — admin destructive room/player controls */
.admin-live-row-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.admin-danger-mini-btn{
  border:1px solid rgba(255,105,105,.24);
  background:rgba(180,39,52,.16);
  color:#ffb6bc;
  border-radius:9px;
  padding:5px 8px;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}
.admin-danger-mini-btn:hover{
  background:rgba(207,48,62,.24);
  border-color:rgba(255,118,118,.38);
  color:#ffd6d9;
}
.admin-danger-mini-btn:active{transform:scale(.97)}


/* =========================================================
   V23.20 — PLAYER MODERATION / BAN SYSTEM
   ========================================================= */
.admin-moderation-zone{
  margin-top:16px;padding:14px;border-radius:15px;
  border:1px solid rgba(255,184,84,.16);
  background:linear-gradient(145deg,rgba(75,48,8,.15),rgba(9,16,27,.55));
  display:grid;gap:9px;
}
.admin-moderation-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.admin-moderation-head>div{display:grid;gap:3px}
.admin-moderation-head strong{font-size:13px;color:#fff}
.admin-moderation-head span{font-size:11px;color:rgba(223,236,245,.58)}
.admin-ban-badge{
  padding:5px 9px;border-radius:999px;font-size:9px!important;font-weight:950;letter-spacing:.08em;
  border:1px solid rgba(255,255,255,.10);
}
.admin-ban-badge.active{background:rgba(66,210,145,.12);color:#91f0c3!important;border-color:rgba(83,229,163,.22)}
.admin-ban-badge.temporary{background:rgba(255,179,57,.12);color:#ffd28b!important;border-color:rgba(255,183,73,.24)}
.admin-ban-badge.permanent{background:rgba(255,75,88,.12);color:#ffadb5!important;border-color:rgba(255,91,104,.24)}
.admin-moderation-zone label{font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:rgba(219,235,245,.55)}
.admin-moderation-zone input,.admin-moderation-zone select{
  width:100%;min-height:40px;border-radius:11px;
  border:1px solid rgba(255,255,255,.10);background:rgba(1,9,17,.62);
  color:#eefaff;padding:9px 11px;
}
.admin-ban-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:3px}
.admin-temp-ban-btn{
  background:rgba(174,112,20,.18)!important;color:#ffd593!important;
  border:1px solid rgba(255,185,74,.24)!important;
}
.admin-permanent-ban-btn{
  background:rgba(178,42,54,.18)!important;color:#ffb1b7!important;
  border:1px solid rgba(255,103,116,.25)!important;
}
.player-ban-overlay{
  position:fixed;inset:0;z-index:1000000;display:grid;place-items:center;
  padding:20px;background:rgba(0,5,10,.94);backdrop-filter:blur(16px);
}
.player-ban-overlay.hidden{display:none!important}
.player-ban-card{
  width:min(520px,94vw);padding:28px;border-radius:24px;text-align:center;
  border:1px solid rgba(255,100,112,.20);
  background:linear-gradient(155deg,#0b1824,#070d15);
  box-shadow:0 30px 90px rgba(0,0,0,.55);
}
.player-ban-icon{font-size:38px;margin-bottom:8px}
.player-ban-card h2{margin:7px 0 8px;font-size:28px}
.player-ban-card>p{color:rgba(222,236,245,.67);line-height:1.55}
.player-ban-info{
  margin-top:12px;padding:12px;border-radius:13px;text-align:left;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
  display:grid;gap:4px;
}
.player-ban-info span{font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:rgba(216,234,245,.48)}
.player-ban-info strong{font-size:13px;color:#fff;overflow-wrap:anywhere}
.player-ban-note{font-size:11px!important;margin:15px 0!important}
body.player-banned{overflow:hidden!important}


/* =========================================================
   V23.30 — OPERATIONS, ANNOUNCEMENTS & PLAYER REPORTS
   ========================================================= */
.global-announcement-banner{
  position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:999990;
  width:min(720px,calc(100vw - 28px));padding:11px 44px 11px 14px;border-radius:14px;
  border:1px solid rgba(126,196,255,.20);background:rgba(7,18,30,.94);
  box-shadow:0 14px 44px rgba(0,0,0,.34);backdrop-filter:blur(14px);
}
.global-announcement-banner.hidden,.readonly-banner.hidden,.maintenance-overlay.hidden{display:none!important}
.global-announcement-copy{display:grid;gap:2px}
.global-announcement-copy strong{font-size:12px;color:#fff}
.global-announcement-copy span{font-size:11px;line-height:1.4;color:rgba(226,240,248,.75)}
.global-announcement-banner button{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border:0;border-radius:8px;background:rgba(255,255,255,.06);
  color:#fff;font-size:18px;cursor:pointer
}
.global-announcement-banner[data-severity="success"]{border-color:rgba(84,225,160,.26)}
.global-announcement-banner[data-severity="warning"]{border-color:rgba(255,191,86,.28)}
.global-announcement-banner[data-severity="critical"]{border-color:rgba(255,93,105,.30)}

.readonly-banner{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:999980;
  display:flex;align-items:center;gap:10px;width:min(700px,calc(100vw - 28px));
  padding:10px 14px;border-radius:13px;border:1px solid rgba(255,184,77,.26);
  background:rgba(47,31,8,.94);box-shadow:0 12px 38px rgba(0,0,0,.32);backdrop-filter:blur(12px);
}
.readonly-banner strong{font-size:10px;letter-spacing:.08em;color:#ffd18a}
.readonly-banner span{font-size:11px;color:rgba(255,240,216,.72)}

.maintenance-overlay{
  position:fixed;inset:0;z-index:999995;display:grid;place-items:center;padding:22px;
  background:radial-gradient(circle at 50% 35%,rgba(19,67,98,.28),rgba(0,5,10,.96) 60%);
  backdrop-filter:blur(18px);
}
.maintenance-card{
  width:min(560px,94vw);padding:34px 30px;text-align:center;border-radius:26px;
  background:linear-gradient(155deg,rgba(12,29,43,.97),rgba(5,12,20,.98));
  border:1px solid rgba(116,191,244,.16);box-shadow:0 30px 100px rgba(0,0,0,.55)
}
.maintenance-symbol{font-size:42px;margin-bottom:10px}
.maintenance-card h2{margin:8px 0 10px;font-size:30px}
.maintenance-card p{color:rgba(222,237,246,.68);line-height:1.6}
.maintenance-pulse{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:18px;font-size:11px;color:rgba(223,240,250,.58)}
.maintenance-pulse i{width:8px;height:8px;border-radius:999px;background:#ffc65d;box-shadow:0 0 14px rgba(255,198,93,.55)}

.report-player-card{width:min(560px,94vw)}
.report-player-card label,.admin-ops-card label,.admin-reports-toolbar label{
  display:block;margin-top:9px;font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:rgba(219,235,245,.56)
}
.report-player-card input,.report-player-card select,.report-player-card textarea,
.admin-ops-card input,.admin-ops-card select,.admin-ops-card textarea,.admin-reports-toolbar select,
.admin-report-row select,.admin-report-row textarea{
  width:100%;border-radius:11px;border:1px solid rgba(255,255,255,.09);background:rgba(1,9,17,.62);
  color:#edf9ff;padding:10px 11px;outline:none
}
.report-player-card textarea,.admin-ops-card textarea,.admin-report-row textarea{resize:vertical}
.report-player-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}

.admin-ops-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:15px}
.admin-ops-card{padding:14px;border-radius:15px;background:rgba(4,14,24,.50);border:1px solid rgba(255,255,255,.07)}
.admin-ops-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}
.admin-ops-card-head>div{display:grid;gap:3px}
.admin-ops-card-head strong{font-size:13px;color:#fff}
.admin-ops-card-head span{font-size:10px;color:rgba(219,235,245,.50)}
.admin-ops-inline{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.admin-ops-state{padding:5px 8px;border-radius:999px;font-size:9px!important;font-weight:950;letter-spacing:.07em}
.admin-ops-state.normal{background:rgba(69,213,151,.12);color:#93efc3!important}
.admin-ops-state.read_only{background:rgba(255,180,69,.12);color:#ffd18a!important}
.admin-ops-state.maintenance{background:rgba(255,86,98,.12);color:#ffafb6!important}

.admin-announcement-row,.admin-report-row{
  padding:12px;border-radius:13px;background:rgba(4,13,22,.52);border:1px solid rgba(255,255,255,.06);display:grid;gap:8px
}
.admin-announcement-row-head,.admin-report-row-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.admin-announcement-row strong,.admin-report-row strong{font-size:12px;color:#fff}
.admin-announcement-row small,.admin-report-row small{font-size:10px;color:rgba(220,235,244,.52);line-height:1.45}
.admin-announcement-actions,.admin-report-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.admin-announcement-pill,.admin-report-status{
  padding:4px 7px;border-radius:999px;font-size:9px;font-weight:900;text-transform:uppercase;
  background:rgba(255,255,255,.06);color:rgba(230,241,247,.66)
}
.admin-announcement-pill.active,.admin-report-status.open{color:#8feec1;background:rgba(70,211,150,.10)}
.admin-report-status.reviewing{color:#ffd38f;background:rgba(255,184,70,.10)}
.admin-report-status.actioned{color:#98cfff;background:rgba(79,160,229,.10)}
.admin-report-status.dismissed{color:rgba(220,230,236,.55)}
.admin-reports-toolbar{display:flex;align-items:end;gap:8px;margin-bottom:12px}
.admin-reports-toolbar label{margin:0}
.admin-reports-toolbar select{width:180px}
.admin-reports-list{display:grid;gap:9px}
.admin-report-details{font-size:11px!important;color:rgba(230,241,247,.76)!important;white-space:pre-wrap;overflow-wrap:anywhere}
.profile-report-btn{border-color:rgba(255,184,84,.18)!important}

@media (max-width:760px){
  .admin-ops-grid{grid-template-columns:1fr}
  .admin-ops-inline{grid-template-columns:1fr}
  .global-announcement-banner{top:8px}
}


/* =========================================================
   V23.40 — SYSTEM HEALTH + ANTI-CHEAT + REPORT SHORTCUTS
   ========================================================= */
.admin-health-note{
  margin:0 0 12px;padding:9px 11px;border-radius:11px;
  border:1px solid rgba(115,190,240,.10);
  background:rgba(10,27,40,.30);
  color:rgba(219,235,245,.55);font-size:10px;line-height:1.45
}
.admin-health-events{display:grid;gap:8px}
.admin-health-event{
  display:grid;gap:5px;padding:11px 12px;border-radius:12px;
  background:rgba(4,13,22,.50);border:1px solid rgba(255,255,255,.055)
}
.admin-health-event-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.admin-health-event-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.admin-health-event-title strong{font-size:11px;color:#fff;text-transform:uppercase}
.admin-health-event-time{font-size:9px;color:rgba(220,235,244,.46);white-space:nowrap}
.admin-health-event-message{font-size:11px;color:rgba(230,241,247,.72);overflow-wrap:anywhere}
.admin-health-event-meta{font-size:9px;color:rgba(210,227,238,.44);overflow-wrap:anywhere}
.admin-health-severity{
  padding:3px 6px;border-radius:999px;font-size:8px;font-weight:950;letter-spacing:.07em;
  background:rgba(255,255,255,.06);color:rgba(230,240,246,.65)
}
.admin-health-severity.warning{background:rgba(255,181,70,.11);color:#ffd28d}
.admin-health-severity.error{background:rgba(255,94,107,.10);color:#ffb0b7}
.admin-health-severity.critical{background:rgba(255,60,75,.16);color:#ff929c}

.admin-anticheat-row{
  padding:12px;border-radius:13px;background:rgba(4,13,22,.52);
  border:1px solid rgba(255,255,255,.06);display:grid;gap:8px
}
.admin-anticheat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.admin-anticheat-head>div{display:grid;gap:3px}
.admin-anticheat-head strong{font-size:12px;color:#fff}
.admin-anticheat-head small,.admin-anticheat-meta{font-size:10px;color:rgba(220,235,244,.52)}
.admin-anticheat-details{
  padding:8px 9px;border-radius:9px;background:rgba(255,255,255,.025);
  font-size:10px;color:rgba(225,238,246,.67);overflow-wrap:anywhere
}
.admin-risk-pill{
  padding:4px 7px;border-radius:999px;font-size:8px;font-weight:950;letter-spacing:.06em;text-transform:uppercase
}
.admin-risk-pill.low{background:rgba(80,175,230,.10);color:#a6d9fa}
.admin-risk-pill.medium{background:rgba(255,183,70,.10);color:#ffd18a}
.admin-risk-pill.high,.admin-risk-pill.critical{background:rgba(255,85,100,.12);color:#ffadb6}
.admin-report-shortcuts{display:flex;gap:7px;flex-wrap:wrap;padding-top:3px}
.admin-report-shortcut-btn{
  min-height:30px!important;padding:5px 9px!important;font-size:9px!important
}
.admin-report-shortcut-btn.warning{
  border-color:rgba(255,181,70,.22)!important;color:#ffd28d!important;background:rgba(130,82,12,.15)!important
}
.admin-report-shortcut-btn.danger{
  border-color:rgba(255,93,105,.24)!important;color:#ffb0b7!important;background:rgba(155,34,46,.14)!important
}


/* =========================================================
   V23.50 — RECOVERY TOOLS + RATE LIMITING + RELEASE DIAGNOSTICS
   ========================================================= */
.admin-recovery-zone{
  margin-top:16px;padding:14px;border-radius:15px;
  border:1px solid rgba(95,177,235,.14);
  background:linear-gradient(145deg,rgba(15,51,77,.14),rgba(6,15,24,.50));
  display:grid;gap:10px
}
.admin-recovery-head>div{display:grid;gap:3px}
.admin-recovery-head strong{font-size:13px;color:#fff}
.admin-recovery-head span{font-size:10px;color:rgba(219,235,245,.52)}
.admin-recovery-actions{display:flex;gap:8px;flex-wrap:wrap}
.admin-release-diagnostics{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px
}
.admin-diagnostic-row{
  min-height:54px;padding:10px 11px;border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(4,13,22,.48);display:grid;gap:3px
}
.admin-diagnostic-row small{
  font-size:9px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(216,233,244,.44)
}
.admin-diagnostic-row strong{
  font-size:11px;color:#edf9ff;overflow-wrap:anywhere
}
.admin-diagnostic-row.good strong{color:#91efc2}
.admin-diagnostic-row.warn strong{color:#ffd18a}
.admin-diagnostic-row.bad strong{color:#ffadb6}
.admin-force-close-btn{
  border:1px solid rgba(255,102,114,.24)!important;
  background:rgba(167,38,50,.15)!important;color:#ffb0b7!important
}
@media(max-width:700px){
  .admin-release-diagnostics{grid-template-columns:1fr}
}


/* =========================================================
   RC1.1 — IN-GAME QUICK AUDIO + LOCATION REPORT
   Desktop: speaker in HUD, report just above clue card.
   Mobile: speaker/report stacked on the left side.
   ========================================================= */
#gameScreen .game-audio-quick-btn,
#gameScreen .game-report-location-btn{
  border:1px solid rgba(116,210,255,.17);
  background:linear-gradient(145deg,rgba(7,24,39,.88),rgba(4,14,25,.78));
  color:#eefaff;
  box-shadow:0 10px 28px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,opacity .16s ease;
}
#gameScreen .game-audio-quick-btn:hover,
#gameScreen .game-report-location-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(108,224,255,.34);
  background:linear-gradient(145deg,rgba(11,38,59,.94),rgba(5,19,32,.86));
}
#gameScreen .game-audio-quick-btn:active,
#gameScreen .game-report-location-btn:active{transform:scale(.96)}

#gameScreen .game-audio-quick-btn{
  width:42px;height:42px;min-width:42px;
  display:grid;place-items:center;
  padding:0;border-radius:13px;
  font-size:18px;
  order:-1;
}
#gameScreen .game-audio-quick-btn.muted{
  border-color:rgba(255,130,130,.17);
  background:linear-gradient(145deg,rgba(58,20,27,.78),rgba(20,10,16,.74));
}
#gameScreen .game-report-location-btn{
  position:absolute;
  left:18px;
  bottom:102px;
  z-index:18;
  min-height:35px;
  display:flex;align-items:center;gap:7px;
  padding:7px 11px;
  border-radius:12px;
  font-size:11px;
}
#gameScreen .game-report-location-btn span{font-size:14px}
#gameScreen .game-report-location-btn b{
  font-size:9px;
  letter-spacing:.07em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* DUEL has a taller clue card. Keep the report button immediately above it. */
#gameScreen[data-live-mode="duel"] .game-report-location-btn{
  left:20px;
  bottom:130px;
}

/* Mobile web: both controls become compact emoji buttons stacked on the left. */
@media (max-width:820px){
  #gameScreen .game-audio-quick-btn,
  #gameScreen .game-report-location-btn{
    position:fixed!important;
    left:max(10px, calc(env(safe-area-inset-left) + 4px))!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    padding:0!important;
    border-radius:12px!important;
    display:grid!important;
    place-items:center!important;
    z-index:1200!important;
    font-size:17px!important;
  }
  #gameScreen .game-audio-quick-btn{
    top:auto!important;
    bottom:max(132px, calc(env(safe-area-inset-bottom) + 98px))!important;
  }
  #gameScreen .game-report-location-btn{
    top:auto!important;
    bottom:max(84px, calc(env(safe-area-inset-bottom) + 50px))!important;
  }
  #gameScreen .game-report-location-btn b{display:none!important}
  #gameScreen .game-report-location-btn span{font-size:17px!important}
}

/* Short landscape phones: keep them bottom-left but more compact so they do not overlap the HUD or map controls. */
@media (max-width:920px) and (max-height:520px){
  #gameScreen .game-audio-quick-btn,
  #gameScreen .game-report-location-btn{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
    border-radius:11px!important;
  }
  #gameScreen .game-audio-quick-btn{
    bottom:max(98px, calc(env(safe-area-inset-bottom) + 74px))!important;
  }
  #gameScreen .game-report-location-btn{
    bottom:max(54px, calc(env(safe-area-inset-bottom) + 30px))!important;
  }
}


/* =========================================================
   RC1.3 — MOBILE HUD CLEANUP
   Portrait: Report above Speaker at bottom-left.
   Landscape mobile: hide clue coach card and keep report icon-only.
   ========================================================= */

/* Portrait mobile — compact two-button stack at bottom-left.
   Speaker is the lowest button; Report sits directly above it. */
@media (max-width:820px) and (orientation:portrait){
  #gameScreen .game-audio-quick-btn,
  #gameScreen .game-report-location-btn{
    position:fixed!important;
    left:max(10px, calc(env(safe-area-inset-left) + 4px))!important;
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
    padding:0!important;
    border-radius:11px!important;
    display:grid!important;
    place-items:center!important;
    z-index:1200!important;
  }
  #gameScreen .game-audio-quick-btn{
    top:auto!important;
    bottom:max(12px, calc(env(safe-area-inset-bottom) + 8px))!important;
  }
  #gameScreen .game-report-location-btn,
  #gameScreen[data-live-mode="duel"] .game-report-location-btn{
    top:auto!important;
    bottom:max(56px, calc(env(safe-area-inset-bottom) + 52px))!important;
  }
  #gameScreen .game-report-location-btn b{display:none!important}
  #gameScreen .game-report-location-btn span,
  #gameScreen .game-audio-quick-btn span{font-size:16px!important}
}

/* Mobile landscape — remove the clue coaching panel to maximize Street View,
   and reduce the location report control to its flag icon only. */
@media (orientation:landscape) and (max-height:560px) and (max-width:1180px){
  #gameScreen .clue-panel{
    display:none!important;
  }
  #gameScreen .game-report-location-btn,
  #gameScreen[data-live-mode="duel"] .game-report-location-btn{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
    padding:0!important;
    gap:0!important;
    border-radius:11px!important;
    display:grid!important;
    place-items:center!important;
  }
  #gameScreen .game-report-location-btn b{display:none!important}
  #gameScreen .game-report-location-btn span{font-size:16px!important}
}


/* =========================================================
   RC1.4 — PORTRAIT BOTTOM-LEFT STACK + LANDSCAPE MOBILE MAP SYNC
   Force portrait mobile report/speaker buttons to the bottom-left stack,
   and make short landscape mobile browsers use the same full-screen guess
   map behaviour as portrait mobile.
   ========================================================= */
#gameScreen.tt-mobile-portrait-hud .hud-metrics{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  width:100%!important;
  gap:4px!important;
}
#gameScreen.tt-mobile-portrait-hud .game-audio-quick-btn,
#gameScreen.tt-mobile-portrait-hud .game-report-location-btn{
  position:fixed!important;
  left:max(10px, calc(env(safe-area-inset-left) + 4px))!important;
  right:auto!important;
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  padding:0!important;
  margin:0!important;
  border-radius:11px!important;
  display:grid!important;
  place-items:center!important;
  z-index:1400!important;
}
#gameScreen.tt-mobile-portrait-hud .game-audio-quick-btn{
  top:auto!important;
  bottom:max(12px, calc(env(safe-area-inset-bottom) + 8px))!important;
}
#gameScreen.tt-mobile-portrait-hud .game-report-location-btn,
#gameScreen.tt-mobile-portrait-hud[data-live-mode="duel"] .game-report-location-btn{
  top:auto!important;
  bottom:max(56px, calc(env(safe-area-inset-bottom) + 52px))!important;
}
#gameScreen.tt-mobile-portrait-hud .game-audio-quick-btn span,
#gameScreen.tt-mobile-portrait-hud .game-report-location-btn span{
  font-size:16px!important;
}
#gameScreen.tt-mobile-portrait-hud .game-report-location-btn b{display:none!important}

#gameScreen.tt-mobile-landscape-hud .clue-panel,
#gameScreen.tt-mobile-landscape-hud .utility-footer,
#gameScreen.tt-mobile-landscape-hud .map-dock{
  display:none!important;
}
#gameScreen.tt-mobile-landscape-hud .mobile-map-btn{
  position:absolute!important;
  right:calc(8px + var(--tt-safe-right))!important;
  bottom:calc(8px + var(--tt-safe-bottom))!important;
  z-index:31!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-width:112px!important;
  min-height:48px!important;
  padding:6px 10px 6px 7px!important;
  border-radius:15px!important;
}
#gameScreen.tt-mobile-landscape-hud .mobile-map-icon{
  width:34px!important;
  height:34px!important;
  flex-basis:34px!important;
  font-size:20px!important;
}
#gameScreen.tt-mobile-landscape-hud .mobile-map-copy strong{font-size:.70rem!important}
#gameScreen.tt-mobile-landscape-hud .mobile-map-copy small{font-size:.52rem!important}
#gameScreen.tt-mobile-landscape-hud .game-report-location-btn,
#gameScreen.tt-mobile-landscape-hud[data-live-mode="duel"] .game-report-location-btn{
  position:fixed!important;
  left:max(10px, calc(env(safe-area-inset-left) + 4px))!important;
  bottom:max(54px, calc(env(safe-area-inset-bottom) + 30px))!important;
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  padding:0!important;
  gap:0!important;
  border-radius:11px!important;
  display:grid!important;
  place-items:center!important;
  z-index:1400!important;
}
#gameScreen.tt-mobile-landscape-hud .game-audio-quick-btn{
  position:fixed!important;
  left:max(10px, calc(env(safe-area-inset-left) + 4px))!important;
  bottom:max(98px, calc(env(safe-area-inset-bottom) + 74px))!important;
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  padding:0!important;
  border-radius:11px!important;
  display:grid!important;
  place-items:center!important;
  z-index:1400!important;
}
#gameScreen.tt-mobile-landscape-hud .game-report-location-btn b{display:none!important}
#gameScreen.tt-mobile-landscape-hud .game-report-location-btn span,
#gameScreen.tt-mobile-landscape-hud .game-audio-quick-btn span{font-size:16px!important}

@media (orientation:landscape) and (max-height:560px) and (max-width:1180px){
  .map-modal{
    padding:0!important;
    overscroll-behavior:none;
  }
  .map-modal .map-modal-card{
    width:100vw!important;
    height:100dvh!important;
    max-width:none!important;
    max-height:none!important;
    padding:calc(8px + var(--tt-safe-top)) calc(8px + var(--tt-safe-right)) calc(9px + var(--tt-safe-bottom)) calc(8px + var(--tt-safe-left))!important;
    border:0!important;
    border-radius:0!important;
    background:#071523!important;
  }
  .map-modal .modal-close{
    top:calc(8px + var(--tt-safe-top))!important;
    right:calc(8px + var(--tt-safe-right))!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    border-radius:14px!important;
    z-index:6!important;
  }
  .map-modal .map-modal-head{
    min-height:38px!important;
    padding:2px 52px 4px 4px!important;
  }
  .map-modal .map-modal-head .eyebrow{display:none!important}
  .map-modal .map-modal-head h3{margin-top:2px!important;font-size:.88rem!important}
  .map-modal .large-map{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    margin-top:2px!important;
    border-radius:15px!important;
  }
  .map-modal .expanded-map-footer{
    grid-template-columns:minmax(0,1fr) 150px!important;
    gap:8px!important;
    margin-top:6px!important;
    padding-top:6px!important;
  }
  .map-modal .expanded-map-status{
    max-height:34px!important;
    overflow:hidden!important;
    font-size:.65rem!important;
    line-height:1.25!important;
  }
  .map-modal .expanded-guess-cta{
    width:100%!important;
    min-height:46px!important;
    height:46px!important;
    margin:0!important;
    border-radius:15px!important;
    font-size:.75rem!important;
  }
}


/* =========================================================
   RC1.5 — PORTRAIT SPEAKER HARD FIX
   Some mobile browsers ignored the advanced safe-area max()/env()
   expressions, which left the speaker in its static HUD position.
   Provide plain left/bottom fallbacks first, then safe-area overrides.
   ========================================================= */
#gameScreen.tt-mobile-portrait-hud .game-audio-quick-btn,
#gameScreen.tt-mobile-portrait-hud .game-report-location-btn{
  position: fixed !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
}
#gameScreen.tt-mobile-portrait-hud .game-audio-quick-btn{
  left: 10px !important;
  bottom: 12px !important;
  left: max(10px, calc(env(safe-area-inset-left) + 4px)) !important;
  bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px)) !important;
}
#gameScreen.tt-mobile-portrait-hud .game-report-location-btn,
#gameScreen.tt-mobile-portrait-hud[data-live-mode="duel"] .game-report-location-btn{
  left: 10px !important;
  bottom: 56px !important;
  left: max(10px, calc(env(safe-area-inset-left) + 4px)) !important;
  bottom: max(56px, calc(env(safe-area-inset-bottom) + 52px)) !important;
}

#gameScreen.tt-mobile-landscape-hud .game-audio-quick-btn,
#gameScreen.tt-mobile-landscape-hud .game-report-location-btn{
  position: fixed !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
}
#gameScreen.tt-mobile-landscape-hud .game-report-location-btn,
#gameScreen.tt-mobile-landscape-hud[data-live-mode="duel"] .game-report-location-btn{
  left: 10px !important;
  bottom: 54px !important;
  left: max(10px, calc(env(safe-area-inset-left) + 4px)) !important;
  bottom: max(54px, calc(env(safe-area-inset-bottom) + 30px)) !important;
}
#gameScreen.tt-mobile-landscape-hud .game-audio-quick-btn{
  left: 10px !important;
  bottom: 98px !important;
  left: max(10px, calc(env(safe-area-inset-left) + 4px)) !important;
  bottom: max(98px, calc(env(safe-area-inset-bottom) + 74px)) !important;
}


/* =========================================================
   RC1.6 — PORTRAIT SPEAKER DOM RELOCATION FIX
   On portrait mobile, move the gameplay speaker button out of the HUD
   metrics row and anchor it directly inside the Street View viewer so it
   cannot remain trapped in the top bar.
   ========================================================= */
#gameScreen.tt-mobile-portrait-hud .viewer-frame .game-audio-quick-btn{
  position:absolute!important;
  top:auto!important;
  right:auto!important;
  left:10px!important;
  bottom:12px!important;
  left:max(10px, calc(env(safe-area-inset-left) + 4px))!important;
  bottom:max(12px, calc(env(safe-area-inset-bottom) + 8px))!important;
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  margin:0!important;
  padding:0!important;
  border-radius:11px!important;
  display:grid!important;
  place-items:center!important;
  order:initial!important;
  z-index:1400!important;
}
#gameScreen.tt-mobile-portrait-hud .viewer-frame .game-audio-quick-btn span{
  font-size:16px!important;
}


/* =========================================================
   RC1.7 — PORTRAIT MOBILE COMPACT TOP HUD
   Final direction: keep the speaker inside the top HUD instead of trying to
   float it at the bottom.  This rule uses only CSS media queries, so it does
   not depend on touch-device detection.
   ========================================================= */
@media (max-width:650px) and (orientation:portrait){
  #gameScreen .hud-bar{
    top:calc(6px + var(--tt-safe-top))!important;
    left:calc(6px + var(--tt-safe-left))!important;
    right:calc(6px + var(--tt-safe-right))!important;
    width:auto!important;
    min-height:46px!important;
    height:auto!important;
    padding:4px!important;
    gap:0!important;
    grid-template-columns:minmax(0,1fr)!important;
    border-radius:15px!important;
    background:rgba(4,18,31,.82)!important;
    border:1px solid rgba(109,221,255,.18)!important;
    box-shadow:0 10px 28px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.03)!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
  }

  /* Portrait uses one clean row: Speaker | Round | Score | Time. */
  #gameScreen .hud-brand,
  #gameScreen .hud-brand-copy,
  #gameScreen .hud-center{
    display:none!important;
  }

  #gameScreen .hud-metrics,
  #gameScreen.tt-mobile-portrait-hud .hud-metrics,
  #gameScreen[data-live-mode="duel"] .hud-metrics{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    min-height:38px!important;
    display:grid!important;
    grid-template-columns:36px repeat(3,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:4px!important;
    padding:0!important;
    margin: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;
  }

  #gameScreen .hud-metrics > .game-audio-quick-btn,
  #gameScreen.tt-mobile-portrait-hud .hud-metrics > .game-audio-quick-btn,
  #gameScreen[data-live-mode="duel"] .hud-metrics > .game-audio-quick-btn{
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    width:36px!important;
    height:38px!important;
    min-width:36px!important;
    min-height:38px!important;
    margin:0!important;
    padding:0!important;
    order:0!important;
    align-self:stretch!important;
    justify-self:stretch!important;
    display:grid!important;
    place-items:center!important;
    border-radius:10px!important;
    z-index:auto!important;
    transform:none!important;
  }
  #gameScreen .hud-metrics > .game-audio-quick-btn span{
    font-size:15px!important;
    line-height:1!important;
  }

  #gameScreen .hud-metrics > .metric-card,
  #gameScreen[data-live-mode="duel"] .hud-metrics > .metric-card{
    min-width:0!important;
    width:auto!important;
    min-height:38px!important;
    height:38px!important;
    padding:4px 3px!important;
    border-radius:10px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    background:rgba(255,255,255,.045)!important;
    border:1px solid rgba(255,255,255,.035)!important;
    box-shadow:none!important;
  }
  #gameScreen .hud-metrics > .metric-card span,
  #gameScreen[data-live-mode="duel"] .hud-metrics > .metric-card span{
    display:block!important;
    margin:0 0 1px!important;
    font-size:5.5px!important;
    line-height:1!important;
    letter-spacing:.11em!important;
    opacity:.68!important;
  }
  #gameScreen .hud-metrics > .metric-card strong,
  #gameScreen[data-live-mode="duel"] .hud-metrics > .metric-card strong{
    margin:1px 0 0!important;
    font-size:11px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  #gameScreen .hud-metrics > .metric-card-time,
  #gameScreen[data-live-mode="duel"] .hud-metrics > .metric-card-time{
    min-width:0!important;
    padding-right:3px!important;
  }
  #gameScreen .hud-metrics .timer-ring,
  #gameScreen[data-live-mode="duel"] .hud-metrics .timer-ring{
    display:none!important;
  }

  /* Report remains the compact bottom-left control. */
  #gameScreen .game-report-location-btn,
  #gameScreen.tt-mobile-portrait-hud .game-report-location-btn,
  #gameScreen[data-live-mode="duel"] .game-report-location-btn{
    position:fixed!important;
    top:auto!important;
    right:auto!important;
    left:10px!important;
    bottom:12px!important;
    left:max(10px, calc(env(safe-area-inset-left) + 4px))!important;
    bottom:max(12px, calc(env(safe-area-inset-bottom) + 8px))!important;
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
    padding:0!important;
    gap:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:11px!important;
    z-index:1400!important;
  }
  #gameScreen .game-report-location-btn b{display:none!important}
  #gameScreen .game-report-location-btn span{font-size:16px!important}

  /* Neutralize older bottom-floating speaker rules if the portrait class exists. */
  #gameScreen.tt-mobile-portrait-hud .viewer-frame > .game-audio-quick-btn{
    display:none!important;
  }
}

/* Landscape mobile keeps the portrait-style full-screen guess-map behavior. */
@media (orientation:landscape) and (max-height:560px) and (max-width:1180px){
  #gameScreen .map-dock{display:none!important}
  #gameScreen .mobile-map-btn{display:flex!important}
}


/* =========================================================
   RC1.8 — PORTRAIT TOP HUD: LOGO | ROUND | SCORE | TIME | SPEAKER
   Speaker is explicitly the final item at the far-right edge of the top HUD.
   The TommyTrace logo remains in its own left slot and can never be covered.
   ========================================================= */
@media (max-width:650px) and (orientation:portrait){
  #gameScreen .hud-bar,
  #gameScreen[data-live-mode="duel"] .hud-bar{
    top:calc(6px + var(--tt-safe-top))!important;
    left:calc(6px + var(--tt-safe-left))!important;
    right:calc(6px + var(--tt-safe-right))!important;
    width:auto!important;
    min-height:46px!important;
    height:auto!important;
    padding:4px!important;
    gap:4px!important;
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    align-items:stretch!important;
    border-radius:15px!important;
    background:rgba(4,18,31,.84)!important;
    border:1px solid rgba(109,221,255,.18)!important;
    box-shadow:0 10px 28px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.03)!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
  }

  #gameScreen .hud-brand,
  #gameScreen[data-live-mode="duel"] .hud-brand{
    display:flex!important;
    grid-column:1!important;
    grid-row:1!important;
    width:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    height:38px!important;
    padding:0!important;
    margin:0!important;
    align-items:center!important;
    justify-content:center!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  #gameScreen .hud-brand-copy,
  #gameScreen .hud-center,
  #gameScreen[data-live-mode="duel"] .hud-brand-copy,
  #gameScreen[data-live-mode="duel"] .hud-center{
    display:none!important;
  }
  #gameScreen .brand-home-btn,
  #gameScreen[data-live-mode="duel"] .brand-home-btn{
    display:grid!important;
    place-items:center!important;
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    padding:0!important;
    margin:0!important;
    border-radius:10px!important;
  }
  #gameScreen .brand-logo-hud,
  #gameScreen[data-live-mode="duel"] .brand-logo-hud{
    width:31px!important;
    height:31px!important;
    max-width:31px!important;
    max-height:31px!important;
    object-fit:contain!important;
  }

  #gameScreen .hud-metrics,
  #gameScreen.tt-mobile-portrait-hud .hud-metrics,
  #gameScreen[data-live-mode="duel"] .hud-metrics{
    grid-column:2!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    min-height:38px!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr)) 34px!important;
    align-items:stretch!important;
    gap:4px!important;
    padding:0!important;
    margin: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;
  }

  #gameScreen .hud-metrics > .metric-card,
  #gameScreen[data-live-mode="duel"] .hud-metrics > .metric-card{
    min-width:0!important;
    width:auto!important;
    min-height:38px!important;
    height:38px!important;
    padding:4px 2px!important;
    border-radius:10px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    background:rgba(255,255,255,.045)!important;
    border:1px solid rgba(255,255,255,.035)!important;
    box-shadow:none!important;
  }
  #gameScreen .hud-metrics > .metric-card span,
  #gameScreen[data-live-mode="duel"] .hud-metrics > .metric-card span{
    display:block!important;
    margin:0 0 1px!important;
    font-size:5.3px!important;
    line-height:1!important;
    letter-spacing:.10em!important;
    opacity:.68!important;
  }
  #gameScreen .hud-metrics > .metric-card strong,
  #gameScreen[data-live-mode="duel"] .hud-metrics > .metric-card strong{
    margin:1px 0 0!important;
    font-size:10.5px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  #gameScreen .hud-metrics > .metric-card-time,
  #gameScreen[data-live-mode="duel"] .hud-metrics > .metric-card-time{
    min-width:0!important;
    padding-right:2px!important;
  }
  #gameScreen .hud-metrics .timer-ring,
  #gameScreen[data-live-mode="duel"] .hud-metrics .timer-ring{
    display:none!important;
  }

  /* Speaker: always the last grid item, at the far right of the HUD. */
  #gameScreen .hud-metrics > .game-audio-quick-btn,
  #gameScreen.tt-mobile-portrait-hud .hud-metrics > .game-audio-quick-btn,
  #gameScreen[data-live-mode="duel"] .hud-metrics > .game-audio-quick-btn{
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    grid-column:4!important;
    grid-row:1!important;
    width:34px!important;
    min-width:34px!important;
    height:38px!important;
    min-height:38px!important;
    margin:0!important;
    padding:0!important;
    order:99!important;
    align-self:stretch!important;
    justify-self:stretch!important;
    display:grid!important;
    place-items:center!important;
    border-radius:10px!important;
    z-index:auto!important;
    transform:none!important;
  }
  #gameScreen .hud-metrics > .game-audio-quick-btn span,
  #gameScreen[data-live-mode="duel"] .hud-metrics > .game-audio-quick-btn span{
    font-size:15px!important;
    line-height:1!important;
  }

  /* Any stale speaker left inside the Street View surface is not part of the portrait layout. */
  #gameScreen.tt-mobile-portrait-hud .viewer-frame > .game-audio-quick-btn{
    display:none!important;
  }
}

@media (max-width:390px) and (orientation:portrait){
  #gameScreen .hud-bar,
  #gameScreen[data-live-mode="duel"] .hud-bar{
    grid-template-columns:34px minmax(0,1fr)!important;
    gap:3px!important;
    padding:3px!important;
  }
  #gameScreen .hud-brand,
  #gameScreen[data-live-mode="duel"] .hud-brand,
  #gameScreen .brand-home-btn,
  #gameScreen[data-live-mode="duel"] .brand-home-btn{
    width:34px!important;
    min-width:34px!important;
    height:36px!important;
    min-height:36px!important;
  }
  #gameScreen .brand-logo-hud,
  #gameScreen[data-live-mode="duel"] .brand-logo-hud{
    width:28px!important;
    height:28px!important;
  }
  #gameScreen .hud-metrics,
  #gameScreen[data-live-mode="duel"] .hud-metrics{
    grid-template-columns:repeat(3,minmax(0,1fr)) 32px!important;
    gap:3px!important;
  }
  #gameScreen .hud-metrics > .game-audio-quick-btn,
  #gameScreen[data-live-mode="duel"] .hud-metrics > .game-audio-quick-btn{
    grid-column:4!important;
    width:32px!important;
    min-width:32px!important;
    height:36px!important;
    min-height:36px!important;
  }
  #gameScreen .hud-metrics > .metric-card,
  #gameScreen[data-live-mode="duel"] .hud-metrics > .metric-card{
    height:36px!important;
    min-height:36px!important;
  }
  #gameScreen .hud-metrics > .metric-card strong,
  #gameScreen[data-live-mode="duel"] .hud-metrics > .metric-card strong{
    font-size:10px!important;
  }
}


/* =========================================================
   RC1.9 — LANDSCAPE MOBILE TOP HUD MATCHES PORTRAIT
   Same structure/order as portrait mobile:
   TommyTrace logo | Round | Score | Time | Speaker
   ========================================================= */
@media (orientation:landscape) and (max-height:560px) and (max-width:1180px){
  #gameScreen .hud-bar,
  #gameScreen[data-live-mode="duel"] .hud-bar{
    top:calc(6px + var(--tt-safe-top))!important;
    left:calc(6px + var(--tt-safe-left))!important;
    right:auto!important;
    width:min(430px, calc(100vw - 12px - var(--tt-safe-left) - var(--tt-safe-right)))!important;
    min-height:46px!important;
    height:auto!important;
    padding:4px!important;
    gap:4px!important;
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    align-items:stretch!important;
    border-radius:15px!important;
    background:rgba(4,18,31,.84)!important;
    border:1px solid rgba(109,221,255,.18)!important;
    box-shadow:0 10px 28px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.03)!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
  }

  #gameScreen .hud-brand,
  #gameScreen[data-live-mode="duel"] .hud-brand{
    display:flex!important;
    grid-column:1!important;
    grid-row:1!important;
    width:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    height:38px!important;
    padding:0!important;
    margin:0!important;
    align-items:center!important;
    justify-content:center!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  #gameScreen .hud-brand-copy,
  #gameScreen .hud-center,
  #gameScreen[data-live-mode="duel"] .hud-brand-copy,
  #gameScreen[data-live-mode="duel"] .hud-center{
    display:none!important;
  }
  #gameScreen .brand-home-btn,
  #gameScreen[data-live-mode="duel"] .brand-home-btn{
    display:grid!important;
    place-items:center!important;
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    padding:0!important;
    margin:0!important;
    border-radius:10px!important;
  }
  #gameScreen .brand-logo-hud,
  #gameScreen[data-live-mode="duel"] .brand-logo-hud{
    width:31px!important;
    height:31px!important;
    max-width:31px!important;
    max-height:31px!important;
    object-fit:contain!important;
  }

  #gameScreen .hud-metrics,
  #gameScreen.tt-mobile-landscape-hud .hud-metrics,
  #gameScreen[data-live-mode="duel"] .hud-metrics{
    grid-column:2!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    min-height:38px!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr)) 34px!important;
    align-items:stretch!important;
    gap:4px!important;
    padding:0!important;
    margin: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;
  }

  #gameScreen .hud-metrics > .metric-card,
  #gameScreen[data-live-mode="duel"] .hud-metrics > .metric-card{
    min-width:0!important;
    width:auto!important;
    min-height:38px!important;
    height:38px!important;
    padding:4px 2px!important;
    border-radius:10px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    background:rgba(255,255,255,.045)!important;
    border:1px solid rgba(255,255,255,.035)!important;
    box-shadow:none!important;
  }
  #gameScreen .hud-metrics > .metric-card span,
  #gameScreen[data-live-mode="duel"] .hud-metrics > .metric-card span{
    display:block!important;
    margin:0 0 1px!important;
    font-size:5.3px!important;
    line-height:1!important;
    letter-spacing:.10em!important;
    opacity:.68!important;
  }
  #gameScreen .hud-metrics > .metric-card strong,
  #gameScreen[data-live-mode="duel"] .hud-metrics > .metric-card strong{
    margin:1px 0 0!important;
    font-size:10.5px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  #gameScreen .hud-metrics > .metric-card-time,
  #gameScreen[data-live-mode="duel"] .hud-metrics > .metric-card-time{
    min-width:0!important;
    padding-right:2px!important;
  }
  #gameScreen .hud-metrics .timer-ring,
  #gameScreen[data-live-mode="duel"] .hud-metrics .timer-ring{
    display:none!important;
  }

  #gameScreen .hud-metrics > .game-audio-quick-btn,
  #gameScreen.tt-mobile-landscape-hud .hud-metrics > .game-audio-quick-btn,
  #gameScreen[data-live-mode="duel"] .hud-metrics > .game-audio-quick-btn{
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    grid-column:4!important;
    grid-row:1!important;
    width:34px!important;
    min-width:34px!important;
    height:38px!important;
    min-height:38px!important;
    margin:0!important;
    padding:0!important;
    order:99!important;
    align-self:stretch!important;
    justify-self:stretch!important;
    display:grid!important;
    place-items:center!important;
    border-radius:10px!important;
    z-index:auto!important;
    transform:none!important;
  }
  #gameScreen .hud-metrics > .game-audio-quick-btn span,
  #gameScreen[data-live-mode="duel"] .hud-metrics > .game-audio-quick-btn span{
    font-size:15px!important;
    line-height:1!important;
  }
}


/* =========================================================
   RC1.10 — LANDSCAPE MOBILE HUD REPOSITION
   Match the user's reference: keep a single compact row and push the
   speaker button to the true far-right edge of the top HUD.
   ========================================================= */
@media (orientation:landscape) and (max-height:560px) and (max-width:1180px){
  #gameScreen .hud-bar,
  #gameScreen[data-live-mode="duel"] .hud-bar{
    left:calc(6px + var(--tt-safe-left))!important;
    right:calc(6px + var(--tt-safe-right))!important;
    width:auto!important;
    max-width:none!important;
    grid-template-columns:38px minmax(0, 1fr)!important;
  }

  #gameScreen .hud-metrics,
  #gameScreen.tt-mobile-landscape-hud .hud-metrics,
  #gameScreen[data-live-mode="duel"] .hud-metrics{
    width:100%!important;
    grid-template-columns:minmax(70px,1fr) minmax(70px,1fr) minmax(82px,1fr) 40px!important;
    gap:6px!important;
  }

  #gameScreen .hud-metrics > .metric-card,
  #gameScreen[data-live-mode="duel"] .hud-metrics > .metric-card{
    padding:4px 6px!important;
  }

  #gameScreen .hud-metrics > .metric-card span,
  #gameScreen[data-live-mode="duel"] .hud-metrics > .metric-card span{
    font-size:5.4px!important;
  }

  #gameScreen .hud-metrics > .metric-card strong,
  #gameScreen[data-live-mode="duel"] .hud-metrics > .metric-card strong{
    font-size:10.8px!important;
  }

  #gameScreen .hud-metrics > .game-audio-quick-btn,
  #gameScreen.tt-mobile-landscape-hud .hud-metrics > .game-audio-quick-btn,
  #gameScreen[data-live-mode="duel"] .hud-metrics > .game-audio-quick-btn{
    grid-column:4!important;
    justify-self:end!important;
    width:40px!important;
    min-width:40px!important;
    height:38px!important;
    min-height:38px!important;
    border-radius:10px!important;
  }
}


/* =========================================================
   RC1.11 — LANDSCAPE MOBILE MAP BUTTON STYLE FIX
   Landscape widths can exceed the portrait mobile breakpoint, so the
   dark glass MAP button styling must be explicitly applied here.
   ========================================================= */
@media (orientation:landscape) and (max-height:560px) and (max-width:1180px){
  #gameScreen .mobile-map-btn,
  #gameScreen.tt-mobile-landscape-hud .mobile-map-btn{
    position:absolute!important;
    right:calc(8px + var(--tt-safe-right))!important;
    bottom:calc(8px + var(--tt-safe-bottom))!important;
    z-index:31!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    min-width:112px!important;
    min-height:48px!important;
    padding:6px 10px 6px 7px!important;
    border:1px solid rgba(87,220,255,.42)!important;
    border-radius:15px!important;
    color:#ecfbff!important;
    background:rgba(5,27,43,.90)!important;
    box-shadow:0 12px 30px rgba(0,0,0,.34),0 0 24px rgba(67,227,234,.10)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    appearance:none!important;
    -webkit-appearance:none!important;
    touch-action:manipulation!important;
  }

  #gameScreen .mobile-map-btn:active{
    transform:scale(.97)!important;
  }

  #gameScreen .mobile-map-btn.has-guess{
    border-color:rgba(111,255,193,.62)!important;
    box-shadow:0 12px 30px rgba(0,0,0,.34),0 0 26px rgba(87,255,190,.13)!important;
  }

  #gameScreen .mobile-map-icon,
  #gameScreen.tt-mobile-landscape-hud .mobile-map-icon{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    flex:0 0 34px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:11px!important;
    font-size:20px!important;
    line-height:1!important;
    color:var(--accent)!important;
    background:rgba(67,227,234,.11)!important;
  }

  #gameScreen .mobile-map-btn.has-guess .mobile-map-icon{
    color:#79f7bf!important;
    background:rgba(87,255,190,.10)!important;
  }

  #gameScreen .mobile-map-copy,
  #gameScreen.tt-mobile-landscape-hud .mobile-map-copy{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    min-width:0!important;
    line-height:1.05!important;
  }

  #gameScreen .mobile-map-copy strong{
    display:block!important;
    font-size:.70rem!important;
    line-height:1!important;
    letter-spacing:.12em!important;
    color:#ecfbff!important;
  }

  #gameScreen .mobile-map-copy small{
    display:block!important;
    margin-top:4px!important;
    font-size:.52rem!important;
    line-height:1!important;
    white-space:nowrap!important;
    color:rgba(226,242,251,.68)!important;
  }
}


/* RC1.13 — ADMIN GOOGLE MAPS COST FORECAST */
.admin-maps-forecast-note{display:grid;gap:4px;margin-bottom:14px;padding:12px 14px;border-radius:14px;border:1px solid rgba(67,227,234,.18);background:linear-gradient(145deg,rgba(25,101,124,.14),rgba(5,18,31,.62))}.admin-maps-forecast-note strong{font-size:12px;color:#a9f6ff}.admin-maps-forecast-note span{font-size:11px;line-height:1.5;color:rgba(222,241,250,.67)}
.admin-forecast-section{margin-top:15px}.admin-forecast-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.admin-forecast-metric{min-width:0;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(145deg,rgba(9,28,45,.82),rgba(7,15,28,.65))}.admin-forecast-metric small{display:block;font-size:9px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:rgba(216,235,247,.53)}.admin-forecast-metric strong{display:block;margin-top:5px;font-size:20px;line-height:1.05;color:#f7fdff;overflow-wrap:anywhere}.admin-forecast-metric span{display:block;margin-top:6px;font-size:9.5px;line-height:1.35;color:rgba(216,235,247,.48)}.admin-forecast-metric.cost{border-color:rgba(102,239,192,.18);background:linear-gradient(145deg,rgba(28,116,85,.18),rgba(7,20,26,.68))}.admin-forecast-metric.cost strong{color:#98f2c9}
.admin-forecast-calculator{padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(3,12,23,.48)}.admin-forecast-presets{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 12px}.admin-forecast-presets button{min-width:52px;padding:7px 10px;border-radius:10px;border:1px solid rgba(89,204,255,.17);background:rgba(44,151,205,.09);color:#ccefff;font-size:10px;font-weight:900;cursor:pointer}.admin-forecast-presets button:hover{background:rgba(44,151,205,.18);border-color:rgba(89,204,255,.3)}
.admin-forecast-input-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}.admin-forecast-input-grid label{display:grid;gap:6px}.admin-forecast-input-grid label span{font-size:10px;font-weight:850;color:rgba(220,238,248,.6)}.admin-forecast-input-grid input{width:100%;min-height:38px;padding:8px 10px;border-radius:11px;border:1px solid rgba(255,255,255,.1);background:rgba(2,10,18,.72);color:#f5fbff;outline:none}.admin-forecast-input-grid input:focus{border-color:rgba(67,227,234,.35);box-shadow:0 0 0 3px rgba(67,227,234,.06)}
.admin-forecast-plan-advice{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:11px;padding:11px 12px;border-radius:12px;border:1px solid rgba(255,211,102,.15);background:rgba(165,112,28,.07)}.admin-forecast-plan-advice>div{display:grid;gap:2px}.admin-forecast-plan-advice small{font-size:8px;letter-spacing:.09em;color:rgba(255,225,165,.58)}.admin-forecast-plan-advice strong{font-size:12px;color:#ffe0a0}.admin-forecast-plan-advice span{font-size:10px;line-height:1.4;color:rgba(239,232,216,.6);text-align:right;max-width:58%}.admin-forecast-pricing{display:grid;gap:4px;margin-top:14px;padding:11px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.07);background:rgba(2,10,19,.38)}.admin-forecast-pricing strong{font-size:11px;color:#eefaff}.admin-forecast-pricing span,.admin-forecast-pricing small{font-size:9.5px;line-height:1.45;color:rgba(216,235,247,.5)}
@media(max-width:820px){.admin-forecast-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-forecast-input-grid{grid-template-columns:1fr}.admin-forecast-plan-advice{align-items:flex-start;flex-direction:column}.admin-forecast-plan-advice span{max-width:none;text-align:left}}@media(max-width:480px){.admin-forecast-metrics{grid-template-columns:1fr 1fr}.admin-forecast-metric strong{font-size:17px}}


/* RC1.14 — LIVE GOOGLE MAPS CLOUD MONITORING */
.admin-google-live-section{padding:14px;border-radius:16px;border:1px solid rgba(67,227,234,.13);background:linear-gradient(145deg,rgba(8,37,55,.58),rgba(3,12,22,.58))}
.admin-google-live-methods{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px}.admin-google-live-methods:empty{display:none}.admin-google-live-methods-title{font-size:8.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:rgba(207,234,246,.5);margin-right:2px}.admin-google-live-method-chip{padding:5px 7px;border-radius:999px;border:1px solid rgba(96,199,244,.12);background:rgba(55,150,196,.07);font-size:8.5px;color:rgba(218,241,251,.62);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-google-live-setup{margin-top:10px;padding:8px 10px;border-radius:11px;border:1px solid rgba(255,255,255,.06);background:rgba(2,10,18,.34);color:rgba(218,237,247,.55)}.admin-google-live-setup summary{cursor:pointer;font-size:9px;font-weight:850;color:rgba(221,242,251,.66)}.admin-google-live-setup span{display:block;margin-top:7px;font-size:9px;line-height:1.5}.admin-google-live-setup code{font-size:8.5px;color:#9fe8f3;background:rgba(67,227,234,.07);padding:1px 4px;border-radius:4px}
.admin-forecast-metric.good{border-color:rgba(102,239,192,.17)}.admin-forecast-metric.good strong{color:#98f2c9}.admin-forecast-metric.warn{border-color:rgba(255,205,96,.23);background:linear-gradient(145deg,rgba(130,88,20,.15),rgba(7,18,26,.68))}.admin-forecast-metric.warn strong{color:#ffd879}.admin-forecast-metric.danger{border-color:rgba(255,93,110,.3);background:linear-gradient(145deg,rgba(135,31,45,.18),rgba(24,8,15,.72))}.admin-forecast-metric.danger strong{color:#ff9ba7}
@media(max-width:820px){.admin-google-live-method-chip{max-width:190px}}

/* RC1.22 instrumentation windows */
.admin-instrumentation-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.admin-instrumentation-window-btn{padding:6px 10px!important;min-height:30px!important;font-size:11px!important;white-space:nowrap}
@media(max-width:720px){.admin-instrumentation-title{align-items:flex-start}.admin-instrumentation-actions{justify-content:flex-start}.admin-instrumentation-window-btn{width:auto!important}}

/* =========================================================
   RC1.24 — FINDING OPPONENT CINEMATIC ARENA REDESIGN
   Uses the new user-approved arena background and a live DOM UI.
   Match-found mode intentionally keeps its existing template.
   ========================================================= */
@media (min-width: 651px) {
  #duelScreen.duel-search-template-mode {
    padding: 0;
    background: #020914;
  }

  #duelScreen.duel-search-template-mode .duel-shell.duel-search-template-mode {
    width: min(1536px, 100vw);
    height: min(864px, 100dvh);
    max-width: 100vw;
    max-height: 100dvh;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 0;
    background:
      linear-gradient(180deg, rgba(1,7,15,.10), rgba(1,7,15,.14)),
      url('assets/duel-match/finding-opponent-arena.webp') center / cover no-repeat;
    box-shadow: none;
  }

  #duelScreen.duel-search-template-mode .duel-shell.duel-search-template-mode::before {
    background:
      radial-gradient(ellipse at 50% 43%, rgba(4,14,27,.10) 0 28%, rgba(2,9,18,.34) 70%, rgba(1,6,13,.52) 100%),
      linear-gradient(90deg, rgba(0,16,38,.18), transparent 34%, transparent 66%, rgba(55,31,0,.13));
  }

  #duelScreen.duel-search-template-mode .duel-shell.duel-search-template-mode::after {
    content: '';
    position: absolute;
    inset: 7.8% 15.5% 7.7%;
    z-index: 2;
    pointer-events: none;
    border: 1px solid rgba(119,218,255,.24);
    border-radius: clamp(22px, 2vw, 34px);
    background: linear-gradient(180deg, rgba(5,20,38,.38), rgba(3,13,25,.23));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 30px 80px rgba(0,0,0,.24),
      0 0 55px rgba(37,165,255,.05);
    backdrop-filter: blur(1.8px);
  }

  #duelScreen.duel-search-template-mode .duel-shell > .eyebrow {
    z-index: 5;
    top: 11.0%;
    color: #8edcff;
    font-size: clamp(11px, .78vw, 14px);
    font-weight: 900;
    letter-spacing: .22em;
  }

  #duelScreen.duel-search-template-mode .duel-shell > .eyebrow::before {
    content: '♛';
    display: block;
    margin-bottom: 2px;
    color: #ffd56a;
    font-size: clamp(18px, 1.5vw, 28px);
    line-height: 1;
    text-shadow: 0 0 18px rgba(255,197,68,.42);
  }

  #duelScreen.duel-search-template-mode #duelTitle {
    z-index: 5;
    top: 16.2%;
    width: 70%;
    max-width: 980px;
    white-space: nowrap;
    font-size: clamp(42px, 4vw, 66px);
    line-height: 1;
    letter-spacing: -.045em;
    text-shadow: 0 10px 30px rgba(0,0,0,.42), 0 0 24px rgba(76,205,255,.18);
  }

  #duelScreen.duel-search-template-mode #duelSubtitle {
    z-index: 5;
    top: 25.0%;
    width: 66%;
    max-width: 760px;
    color: #d8e8f6;
    font-size: clamp(15px, 1.25vw, 21px);
  }

  #duelScreen.duel-search-template-mode .duel-versus {
    z-index: 5;
  }

  #duelScreen.duel-search-template-mode .duel-player-card {
    top: 32.0%;
    width: 22.2%;
    height: 29.8%;
    padding: 2.1% 1.8% 1.7%;
    gap: clamp(5px, .55vw, 9px);
    border-radius: clamp(20px, 1.8vw, 30px) !important;
    backdrop-filter: blur(7px);
    overflow: hidden;
  }

  #duelScreen.duel-search-template-mode .duel-player-card.me {
    left: 22.0%;
    border: 1px solid rgba(77,212,255,.62) !important;
    background: linear-gradient(155deg, rgba(5,42,78,.78), rgba(3,15,31,.72)) !important;
    box-shadow:
      0 0 0 1px rgba(79,217,255,.18),
      0 0 34px rgba(0,174,255,.24),
      inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card.opponent {
    right: 22.0%;
    border: 1px solid rgba(255,197,72,.62) !important;
    background: linear-gradient(155deg, rgba(74,48,5,.72), rgba(29,19,5,.74)) !important;
    box-shadow:
      0 0 0 1px rgba(255,195,66,.16),
      0 0 34px rgba(255,177,33,.20),
      inset 0 1px 0 rgba(255,255,255,.07) !important;
  }

  #duelScreen.duel-search-template-mode .duel-avatar {
    width: clamp(100px, 8.4vw, 138px);
    height: clamp(100px, 8.4vw, 138px);
    margin-top: 0;
    border-radius: clamp(20px, 1.5vw, 26px);
    overflow: hidden;
  }

  #duelScreen.duel-search-template-mode .duel-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #duelScreen.duel-search-template-mode .duel-player-card.opponent.searching .duel-avatar {
    position: relative;
    display: grid;
    place-items: center;
    color: #ffe6a0;
    font-size: clamp(36px, 3.5vw, 58px);
    font-weight: 900;
    background:
      radial-gradient(circle at 50% 50%, rgba(255,198,77,.16), transparent 48%),
      repeating-radial-gradient(circle at 50% 50%, rgba(255,199,80,.14) 0 1px, transparent 1px 16px),
      rgba(18,13,6,.82);
    box-shadow: inset 0 0 32px rgba(255,191,53,.12), 0 0 20px rgba(255,180,35,.10);
  }

  #duelScreen.duel-search-template-mode .duel-player-card.opponent.searching .duel-avatar::before {
    content: '';
    position: absolute;
    inset: 8%;
    border-radius: inherit;
    border: 1px solid rgba(255,210,104,.20);
    background: linear-gradient(180deg, transparent 46%, rgba(123,255,220,.88) 49%, rgba(123,255,220,.22) 52%, transparent 55%);
    animation: duelOpponentRadarScan 2.3s ease-in-out infinite;
    pointer-events: none;
  }

  #duelScreen.duel-search-template-mode .duel-player-card.opponent.searching .duel-avatar::after {
    content: '';
    position: absolute;
    inset: -28%;
    border-radius: 50%;
    border: 1px solid rgba(255,199,73,.14);
    box-shadow: inset 0 0 0 16px rgba(255,199,73,.015), inset 0 0 0 34px rgba(255,199,73,.012);
    animation: duelOpponentRadarSpin 7s linear infinite;
    pointer-events: none;
  }

  #duelScreen.duel-search-template-mode .duel-player-name-row {
    width: 92%;
    max-width: 92%;
    justify-content: center;
    gap: 7px;
  }

  #duelScreen.duel-search-template-mode .duel-player-name-row strong {
    max-width: 72%;
    font-size: clamp(18px, 1.45vw, 25px) !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card > span {
    max-width: 96%;
    text-align: center;
    font-size: clamp(9px, .7vw, 12px) !important;
    letter-spacing: .12em;
  }

  #duelScreen.duel-search-template-mode .duel-player-card.opponent .duel-player-name-row strong {
    color: #fff5d5;
  }

  #duelScreen.duel-search-template-mode .duel-vs {
    position: absolute !important;
    left: 50% !important;
    top: 47.0% !important;
    width: clamp(94px, 8.5vw, 136px) !important;
    height: clamp(94px, 8.5vw, 136px) !important;
    display: grid !important;
    place-items: center !important;
    transform: translate(-50%, -50%) !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    border-radius: 50% !important;
    border: 1px solid rgba(153,224,255,.34) !important;
    background:
      radial-gradient(circle at 38% 42%, rgba(23,151,255,.38), transparent 38%),
      radial-gradient(circle at 62% 58%, rgba(255,185,53,.34), transparent 42%),
      rgba(4,17,32,.88) !important;
    box-shadow:
      0 0 0 7px rgba(45,190,255,.07),
      0 0 0 13px rgba(255,191,63,.035),
      0 0 38px rgba(48,190,255,.30),
      0 0 54px rgba(255,180,36,.18),
      inset 0 0 26px rgba(255,255,255,.07) !important;
    color: #f8fbff !important;
    font-size: clamp(31px, 3.1vw, 50px) !important;
    font-weight: 1000 !important;
    letter-spacing: -.05em !important;
    text-shadow: 0 0 20px rgba(112,225,255,.65), 0 0 30px rgba(255,204,102,.28) !important;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer {
    top: 68.8% !important;
    min-width: clamp(270px, 25vw, 390px);
    min-height: 64px;
    padding: 0 28px;
    gap: 12px;
    border: 1px solid rgba(87,216,255,.42);
    background: linear-gradient(145deg, rgba(5,34,65,.90), rgba(2,16,31,.84));
    box-shadow:
      0 15px 38px rgba(0,0,0,.32),
      0 0 30px rgba(62,208,255,.14),
      inset 0 1px 0 rgba(255,255,255,.08);
    font-size: clamp(30px, 2.6vw, 43px);
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer::before {
    content: 'Searching  •';
    color: #d7f5ff;
    font-size: clamp(13px, 1vw, 17px);
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: none;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer::after {
    inset: -9px -13px;
    opacity: .72;
  }

  #duelScreen.duel-search-template-mode #duelCancelBtn {
    left: 50%;
    bottom: 10.3%;
    width: clamp(210px, 19vw, 300px);
    height: 58px;
    transform: translateX(-50%);
    border: 1px solid rgba(255,97,132,.80) !important;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(133,18,49,.94), rgba(70,8,28,.96)) !important;
    box-shadow:
      0 12px 30px rgba(0,0,0,.30),
      0 0 24px rgba(255,40,91,.20),
      inset 0 1px 0 rgba(255,255,255,.11) !important;
    color: #fff !important;
    font-size: clamp(15px, 1vw, 18px);
    font-weight: 850;
    text-shadow: 0 2px 8px rgba(0,0,0,.28) !important;
    opacity: 1;
  }

  #duelScreen.duel-search-template-mode #duelCancelBtn::before {
    content: '↪';
    display: inline-block;
    margin-right: 9px;
    transform: rotate(180deg);
    font-size: 1.05em;
  }

  #duelScreen.duel-search-template-mode #duelCancelBtn:hover,
  #duelScreen.duel-search-template-mode #duelCancelBtn:focus-visible {
    color: #fff !important;
    background: linear-gradient(180deg, rgba(166,25,62,.98), rgba(89,11,36,.98)) !important;
    border-color: rgba(255,145,169,.95) !important;
    outline: none !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.34), 0 0 30px rgba(255,48,98,.28) !important;
  }
}

@keyframes duelOpponentRadarScan {
  0%, 100% { transform: translateY(-30%); opacity: .28; }
  50% { transform: translateY(30%); opacity: .95; }
}
@keyframes duelOpponentRadarSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 650px) {
  #duelScreen.duel-search-template-mode {
    padding: 0;
    background: #020914;
  }

  #duelScreen.duel-search-template-mode .duel-shell.duel-search-template-mode {
    width: 100vw;
    height: 100dvh;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background:
      linear-gradient(180deg, rgba(1,7,15,.10), rgba(1,7,15,.18)),
      url('assets/duel-match/finding-opponent-arena.webp') center / cover no-repeat;
  }

  #duelScreen.duel-search-template-mode .duel-shell.duel-search-template-mode::before {
    background: radial-gradient(ellipse at 50% 43%, rgba(4,14,27,.08), rgba(1,7,14,.43) 86%);
  }

  #duelScreen.duel-search-template-mode .duel-shell.duel-search-template-mode::after {
    content: '';
    position: absolute;
    inset: 4.5% 3.2% 4.5%;
    z-index: 2;
    pointer-events: none;
    border: 1px solid rgba(110,214,255,.20);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(4,18,34,.32), rgba(2,12,23,.20));
    backdrop-filter: blur(1px);
  }

  #duelScreen.duel-search-template-mode .duel-shell > .eyebrow { top: 6.5%; z-index: 5; }
  #duelScreen.duel-search-template-mode #duelTitle {
    top: 10.2%;
    z-index: 5;
    width: 90%;
    font-size: clamp(30px, 9.5vw, 43px);
    line-height: 1;
  }
  #duelScreen.duel-search-template-mode #duelSubtitle {
    top: 18.0%;
    z-index: 5;
    width: 84%;
    font-size: clamp(13px, 3.8vw, 17px);
  }

  #duelScreen.duel-search-template-mode .duel-player-card {
    top: 28.2%;
    width: 43.2%;
    height: 27%;
    padding: 7.2% 3.2% 4.5%;
    border-radius: 20px !important;
    backdrop-filter: blur(7px);
  }
  #duelScreen.duel-search-template-mode .duel-player-card.me {
    left: 4.1%;
    border: 1px solid rgba(77,212,255,.58) !important;
    background: linear-gradient(155deg, rgba(5,42,78,.77), rgba(3,15,31,.72)) !important;
    box-shadow: 0 0 24px rgba(0,174,255,.19), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }
  #duelScreen.duel-search-template-mode .duel-player-card.opponent {
    right: 4.1%;
    border: 1px solid rgba(255,197,72,.58) !important;
    background: linear-gradient(155deg, rgba(74,48,5,.70), rgba(29,19,5,.73)) !important;
    box-shadow: 0 0 24px rgba(255,177,33,.16), inset 0 1px 0 rgba(255,255,255,.07) !important;
  }

  #duelScreen.duel-search-template-mode .duel-avatar {
    width: clamp(74px, 21vw, 102px);
    height: clamp(74px, 21vw, 102px);
    border-radius: 18px;
  }
  #duelScreen.duel-search-template-mode .duel-player-card.opponent.searching .duel-avatar {
    position: relative;
    display: grid;
    place-items: center;
    font-size: clamp(30px, 9vw, 46px);
    background:
      radial-gradient(circle at 50% 50%, rgba(255,198,77,.16), transparent 48%),
      repeating-radial-gradient(circle at 50% 50%, rgba(255,199,80,.14) 0 1px, transparent 1px 14px),
      rgba(18,13,6,.82);
  }
  #duelScreen.duel-search-template-mode .duel-player-card.opponent.searching .duel-avatar::before {
    content: '';
    position: absolute;
    inset: 8%;
    border-radius: inherit;
    background: linear-gradient(180deg, transparent 46%, rgba(123,255,220,.88) 49%, rgba(123,255,220,.22) 52%, transparent 55%);
    animation: duelOpponentRadarScan 2.3s ease-in-out infinite;
  }

  #duelScreen.duel-search-template-mode .duel-player-name-row strong {
    font-size: clamp(14px, 4.1vw, 18px) !important;
    max-width: 72%;
  }
  #duelScreen.duel-search-template-mode .duel-player-card > span {
    font-size: clamp(8px, 2.2vw, 10px) !important;
    letter-spacing: .08em;
  }

  #duelScreen.duel-search-template-mode .duel-vs {
    position: absolute !important;
    left: 50% !important;
    top: 43.0% !important;
    width: 64px !important;
    height: 64px !important;
    display: grid !important;
    place-items: center !important;
    transform: translate(-50%, -50%) !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    border-radius: 50% !important;
    border: 1px solid rgba(153,224,255,.30) !important;
    background: radial-gradient(circle at 38% 42%, rgba(23,151,255,.38), transparent 38%), radial-gradient(circle at 62% 58%, rgba(255,185,53,.34), transparent 42%), rgba(4,17,32,.90) !important;
    box-shadow: 0 0 23px rgba(48,190,255,.24), 0 0 30px rgba(255,180,36,.14) !important;
    color: #fff !important;
    font-size: 24px !important;
    font-weight: 1000 !important;
    text-shadow: 0 0 16px rgba(112,225,255,.55) !important;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer {
    top: 61.5% !important;
    min-width: min(76vw, 315px);
    min-height: 58px;
    padding: 0 18px;
    gap: 9px;
    font-size: clamp(27px, 8vw, 36px);
  }
  #duelScreen.duel-search-template-mode #duelSearchTimer::before {
    content: 'Searching  •';
    font-size: clamp(11px, 3vw, 14px);
    letter-spacing: 0;
    text-transform: none;
    color: #d7f5ff;
  }

  #duelScreen.duel-search-template-mode #duelCancelBtn {
    display: block !important;
    left: 50%;
    bottom: 9.2%;
    width: min(62vw, 250px);
    height: 54px;
    transform: translateX(-50%);
    border: 1px solid rgba(255,97,132,.80) !important;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(133,18,49,.94), rgba(70,8,28,.96)) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.30), 0 0 24px rgba(255,40,91,.20) !important;
    color: #fff !important;
    font-size: 16px;
    font-weight: 850;
    opacity: 1;
  }
  #duelScreen.duel-search-template-mode #duelCancelBtn::before {
    content: '↪';
    display: inline-block;
    margin-right: 8px;
    transform: rotate(180deg);
  }

  #duelScreen.duel-search-template-mode .duel-long-wait {
    bottom: 17.8%;
    width: min(86%, 340px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #duelScreen.duel-search-template-mode .duel-player-card.opponent.searching .duel-avatar::before,
  #duelScreen.duel-search-template-mode .duel-player-card.opponent.searching .duel-avatar::after {
    animation: none !important;
  }
}

/* =========================================================
   RC1.25 — FINDING OPPONENT RESPONSIVE LAYOUT CLEANUP
   Desktop, portrait and landscape share the same composition
   without stretching cards or obscuring matchmaking controls.
   ========================================================= */

#duelScreen.duel-search-template-mode {
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
  overflow: hidden !important;
  background: #020914 !important;
}

#duelScreen.duel-search-template-mode .duel-shell.duel-search-template-mode {
  position: relative !important;
  inset: auto !important;
  width: min(1180px, calc(100vw - 64px)) !important;
  height: min(720px, calc(100dvh - 48px)) !important;
  min-height: 590px !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(108,205,255,.28) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(180deg, rgba(2,10,20,.16), rgba(2,10,20,.24)),
    url('assets/duel-match/finding-opponent-arena.webp') center center / cover no-repeat !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

#duelScreen.duel-search-template-mode .duel-shell.duel-search-template-mode::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(3,14,27,.05) 0%, rgba(2,10,21,.24) 58%, rgba(1,7,15,.50) 100%) !important;
  pointer-events: none !important;
}

#duelScreen.duel-search-template-mode .duel-shell.duel-search-template-mode::after {
  content: '' !important;
  position: absolute !important;
  inset: 2.8% !important;
  z-index: 1 !important;
  border: 1px solid rgba(109,218,255,.17) !important;
  border-radius: 25px !important;
  background: linear-gradient(180deg, rgba(2,14,28,.13), rgba(2,12,24,.05)) !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
}

#duelScreen.duel-search-template-mode .duel-shell > .eyebrow,
#duelScreen.duel-search-template-mode #duelTitle,
#duelScreen.duel-search-template-mode #duelSubtitle,
#duelScreen.duel-search-template-mode .duel-versus,
#duelScreen.duel-search-template-mode #duelSearchTimer,
#duelScreen.duel-search-template-mode #duelCountdown,
#duelScreen.duel-search-template-mode .duel-prestart-actions,
#duelScreen.duel-search-template-mode .duel-long-wait,
#duelScreen.duel-search-template-mode #duelError {
  z-index: 5 !important;
}

#duelScreen.duel-search-template-mode .duel-shell > .eyebrow {
  position: absolute !important;
  top: 5.2% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  margin: 0 !important;
  font-size: clamp(12px, .9vw, 15px) !important;
  letter-spacing: .20em !important;
  white-space: nowrap !important;
}

#duelScreen.duel-search-template-mode #duelTitle {
  position: absolute !important;
  top: 9.2% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(90%, 900px) !important;
  margin: 0 !important;
  font-size: clamp(38px, 4vw, 62px) !important;
  line-height: .98 !important;
  letter-spacing: -.035em !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

#duelScreen.duel-search-template-mode #duelSubtitle {
  position: absolute !important;
  top: 18.4% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(82%, 760px) !important;
  margin: 0 !important;
  font-size: clamp(15px, 1.25vw, 20px) !important;
  line-height: 1.25 !important;
  text-align: center !important;
  white-space: normal !important;
}

#duelScreen.duel-search-template-mode .duel-versus {
  position: absolute !important;
  top: 27.5% !important;
  left: 50% !important;
  width: min(77%, 900px) !important;
  height: 35.5% !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  grid-template-columns: minmax(250px, 1fr) 112px minmax(250px, 1fr) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: clamp(22px, 3vw, 42px) !important;
  overflow: visible !important;
}

#duelScreen.duel-search-template-mode .duel-player-card,
#duelScreen.duel-search-template-mode .duel-player-card.me,
#duelScreen.duel-search-template-mode .duel-player-card.opponent {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 330px !important;
  height: 100% !important;
  max-height: 250px !important;
  min-height: 220px !important;
  padding: 18px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 26px !important;
  overflow: hidden !important;
}

#duelScreen.duel-search-template-mode .duel-player-card.me {
  justify-self: end !important;
}

#duelScreen.duel-search-template-mode .duel-player-card.opponent {
  justify-self: start !important;
}

#duelScreen.duel-search-template-mode .duel-player-card .duel-avatar {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  width: clamp(96px, 8.5vw, 126px) !important;
  height: clamp(96px, 8.5vw, 126px) !important;
  flex: 0 0 auto !important;
  margin: 0 0 2px !important;
  border-radius: 22px !important;
}

#duelScreen.duel-search-template-mode .duel-player-name-row {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  text-align: center !important;
}

#duelScreen.duel-search-template-mode .duel-player-name-row strong {
  max-width: calc(100% - 34px) !important;
  font-size: clamp(18px, 1.45vw, 23px) !important;
  line-height: 1.05 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#duelScreen.duel-search-template-mode .duel-player-card.opponent.searching .duel-player-name-row strong {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  font-size: clamp(16px, 1.3vw, 21px) !important;
}

#duelScreen.duel-search-template-mode .duel-player-flag {
  flex: 0 0 auto !important;
  font-size: clamp(19px, 1.4vw, 23px) !important;
}

#duelScreen.duel-search-template-mode .duel-player-card > span {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: clamp(10px, .82vw, 12px) !important;
  line-height: 1.2 !important;
  letter-spacing: .10em !important;
  white-space: normal !important;
}

#duelScreen.duel-search-template-mode .duel-vs {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  width: 108px !important;
  height: 108px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  font-size: 42px !important;
  line-height: 1 !important;
  overflow: visible !important;
}

#duelScreen.duel-search-template-mode #duelSearchTimer {
  position: absolute !important;
  top: 68.2% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(480px, 48%) !important;
  min-width: 380px !important;
  height: 66px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  border-radius: 999px !important;
  font-size: clamp(31px, 2.7vw, 44px) !important;
  line-height: 1 !important;
}

#duelScreen.duel-search-template-mode #duelSearchTimer::before {
  content: 'Searching  •' !important;
  position: static !important;
  transform: none !important;
  display: inline-block !important;
  font-size: clamp(14px, 1.05vw, 17px) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

#duelScreen.duel-search-template-mode #duelSearchTimer::after {
  display: none !important;
}

#duelScreen.duel-search-template-mode .duel-prestart-actions {
  position: absolute !important;
  left: 50% !important;
  bottom: 6.5% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  margin: 0 !important;
}

#duelScreen.duel-search-template-mode #duelCancelBtn {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  width: 260px !important;
  height: 56px !important;
  margin: 0 !important;
}

/* Long-wait state becomes a proper bottom sheet instead of covering the cards. */
#duelScreen.duel-search-template-mode .duel-long-wait {
  position: absolute !important;
  left: 50% !important;
  bottom: 4.5% !important;
  transform: translateX(-50%) !important;
  width: min(620px, 72%) !important;
  margin: 0 !important;
  padding: 16px 18px !important;
  border: 1px solid rgba(132,215,255,.25) !important;
  border-radius: 18px !important;
  background: rgba(3,15,29,.94) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05) !important;
  backdrop-filter: blur(16px) !important;
}

#duelScreen.duel-search-template-mode .duel-long-wait p {
  margin: 0 0 12px !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

#duelScreen.duel-search-template-mode .duel-long-wait-actions {
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
}

#duelScreen.duel-search-template-mode .duel-long-wait .btn {
  min-width: 170px !important;
  height: 48px !important;
}

#duelScreen.duel-search-template-mode .duel-shell:has(.duel-long-wait:not(.hidden)) #duelSearchTimer,
#duelScreen.duel-search-template-mode .duel-shell:has(.duel-long-wait:not(.hidden)) .duel-prestart-actions {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* -------- Portrait phone -------- */
@media (max-width: 650px) and (orientation: portrait) {
  #duelScreen.duel-search-template-mode {
    padding: 0 !important;
  }

  #duelScreen.duel-search-template-mode .duel-shell.duel-search-template-mode {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-position: center center !important;
  }

  #duelScreen.duel-search-template-mode .duel-shell.duel-search-template-mode::after {
    inset: 1.5% 2.8% !important;
    border-radius: 22px !important;
  }

  #duelScreen.duel-search-template-mode .duel-shell > .eyebrow {
    top: 6.0% !important;
    font-size: 10px !important;
    letter-spacing: .17em !important;
  }

  #duelScreen.duel-search-template-mode #duelTitle {
    top: 10.0% !important;
    width: 90% !important;
    font-size: clamp(31px, 9.2vw, 42px) !important;
    line-height: .98 !important;
    white-space: normal !important;
  }

  #duelScreen.duel-search-template-mode #duelSubtitle {
    top: 19.3% !important;
    width: 86% !important;
    font-size: clamp(12px, 3.6vw, 15px) !important;
    line-height: 1.22 !important;
  }

  #duelScreen.duel-search-template-mode .duel-versus {
    top: 30.0% !important;
    width: 91% !important;
    height: 22.5% !important;
    grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card,
  #duelScreen.duel-search-template-mode .duel-player-card.me,
  #duelScreen.duel-search-template-mode .duel-player-card.opponent {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 9px 6px !important;
    gap: 4px !important;
    border-radius: 19px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card .duel-avatar {
    width: clamp(64px, 18vw, 78px) !important;
    height: clamp(64px, 18vw, 78px) !important;
    border-radius: 15px !important;
    margin-bottom: 1px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-name-row {
    gap: 4px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-name-row strong,
  #duelScreen.duel-search-template-mode .duel-player-card.opponent.searching .duel-player-name-row strong {
    max-width: calc(100% - 22px) !important;
    font-size: clamp(11px, 3.4vw, 14px) !important;
    white-space: nowrap !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card.opponent.searching .duel-player-name-row strong {
    max-width: none !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-flag {
    font-size: 13px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card > span {
    font-size: clamp(7px, 2.05vw, 9px) !important;
    line-height: 1.12 !important;
    letter-spacing: .06em !important;
  }

  #duelScreen.duel-search-template-mode .duel-vs {
    width: 52px !important;
    height: 52px !important;
    font-size: 22px !important;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer {
    top: 59.7% !important;
    width: min(82vw, 320px) !important;
    min-width: 0 !important;
    height: 58px !important;
    padding: 0 15px !important;
    gap: 8px !important;
    font-size: clamp(29px, 8.5vw, 38px) !important;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer::before {
    font-size: clamp(11px, 3.1vw, 13px) !important;
  }

  #duelScreen.duel-search-template-mode .duel-prestart-actions {
    bottom: 7.3% !important;
  }

  #duelScreen.duel-search-template-mode #duelCancelBtn {
    width: min(64vw, 250px) !important;
    height: 52px !important;
    font-size: 15px !important;
  }

  #duelScreen.duel-search-template-mode .duel-long-wait {
    bottom: 4.0% !important;
    width: 92% !important;
    padding: 14px !important;
  }

  #duelScreen.duel-search-template-mode .duel-long-wait p {
    font-size: 12px !important;
  }

  #duelScreen.duel-search-template-mode .duel-long-wait-actions {
    gap: 8px !important;
  }

  #duelScreen.duel-search-template-mode .duel-long-wait .btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 44px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }
}

/* -------- Landscape phone/tablet -------- */
@media (max-height: 620px) and (orientation: landscape) {
  #duelScreen.duel-search-template-mode {
    padding: 0 !important;
  }

  #duelScreen.duel-search-template-mode .duel-shell.duel-search-template-mode {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  #duelScreen.duel-search-template-mode .duel-shell > .eyebrow {
    top: 4.3% !important;
    font-size: 9px !important;
  }

  #duelScreen.duel-search-template-mode #duelTitle {
    top: 8.2% !important;
    font-size: clamp(28px, 5.2vw, 42px) !important;
  }

  #duelScreen.duel-search-template-mode #duelSubtitle {
    top: 17.0% !important;
    width: 76% !important;
    font-size: clamp(12px, 1.8vw, 15px) !important;
  }

  #duelScreen.duel-search-template-mode .duel-versus {
    top: 25.0% !important;
    width: min(72%, 690px) !important;
    height: 37% !important;
    grid-template-columns: minmax(205px, 1fr) 76px minmax(205px, 1fr) !important;
    gap: 16px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card,
  #duelScreen.duel-search-template-mode .duel-player-card.me,
  #duelScreen.duel-search-template-mode .duel-player-card.opponent {
    min-height: 0 !important;
    max-height: 190px !important;
    padding: 10px 12px !important;
    gap: 4px !important;
    border-radius: 18px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card .duel-avatar {
    width: clamp(68px, 11vh, 88px) !important;
    height: clamp(68px, 11vh, 88px) !important;
    border-radius: 14px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-name-row strong,
  #duelScreen.duel-search-template-mode .duel-player-card.opponent.searching .duel-player-name-row strong {
    font-size: 14px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card > span {
    font-size: 8px !important;
  }

  #duelScreen.duel-search-template-mode .duel-vs {
    width: 72px !important;
    height: 72px !important;
    font-size: 29px !important;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer {
    top: 66.5% !important;
    width: min(380px, 44vw) !important;
    min-width: 300px !important;
    height: 48px !important;
    font-size: 28px !important;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer::before {
    font-size: 12px !important;
  }

  #duelScreen.duel-search-template-mode .duel-prestart-actions {
    bottom: 3.5% !important;
  }

  #duelScreen.duel-search-template-mode #duelCancelBtn {
    width: 220px !important;
    height: 44px !important;
    font-size: 14px !important;
  }

  #duelScreen.duel-search-template-mode .duel-long-wait {
    bottom: 2.5% !important;
    width: min(600px, 72%) !important;
    padding: 10px 12px !important;
  }

  #duelScreen.duel-search-template-mode .duel-long-wait p {
    margin-bottom: 8px !important;
    font-size: 11px !important;
  }

  #duelScreen.duel-search-template-mode .duel-long-wait .btn {
    min-width: 150px !important;
    height: 38px !important;
    font-size: 11px !important;
  }
}

/* =========================================================
   RC1.26 — FINDING OPPONENT FINAL RESPONSIVE POSITION FIX
   Fixes stretched prestart action overlay, header collisions and
   keeps controls separated on desktop, portrait and landscape.
   ========================================================= */

/* Hard reset the action layer. Older matchmaking CSS used inset:0 and
   a full-screen click layer; RC1.25 moved it but did not clear top/right. */
#duelScreen.duel-search-template-mode .duel-prestart-actions {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: 6.2% !important;
  left: 50% !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
  pointer-events: none !important;
  overflow: visible !important;
}

#duelScreen.duel-search-template-mode #duelCancelBtn {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 250px !important;
  height: 54px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 22px !important;
  border: 1px solid rgba(255,105,139,.88) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(143,19,52,.96), rgba(76,8,30,.98)) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.34), 0 0 22px rgba(255,42,91,.19), inset 0 1px 0 rgba(255,255,255,.11) !important;
  color: #fff !important;
  opacity: 1 !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
}

/* Give the header a little more breathing room. */
#duelScreen.duel-search-template-mode .duel-shell > .eyebrow {
  top: 5.0% !important;
  line-height: 1 !important;
}
#duelScreen.duel-search-template-mode #duelTitle {
  top: 10.2% !important;
}
#duelScreen.duel-search-template-mode #duelSubtitle {
  top: 19.4% !important;
}

/* Keep the cards visually centered and leave a clean lane for the timer/button. */
#duelScreen.duel-search-template-mode .duel-versus {
  top: 29.0% !important;
  height: 34.0% !important;
}
#duelScreen.duel-search-template-mode #duelSearchTimer {
  top: 67.0% !important;
}

/* Portrait: compact, readable, no full-height red overlay. */
@media (max-width: 650px) and (orientation: portrait) {
  #duelScreen.duel-search-template-mode .duel-shell > .eyebrow {
    top: 4.2% !important;
    font-size: 9px !important;
  }

  #duelScreen.duel-search-template-mode #duelTitle {
    top: 8.0% !important;
    width: 92% !important;
    font-size: clamp(27px, 8.5vw, 36px) !important;
    line-height: 1.02 !important;
  }

  #duelScreen.duel-search-template-mode #duelSubtitle {
    top: 17.2% !important;
    width: 88% !important;
    font-size: clamp(11px, 3.25vw, 14px) !important;
    line-height: 1.18 !important;
  }

  #duelScreen.duel-search-template-mode .duel-versus {
    top: 27.0% !important;
    width: 92% !important;
    height: 24.5% !important;
    grid-template-columns: minmax(0,1fr) 46px minmax(0,1fr) !important;
    gap: 5px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card,
  #duelScreen.duel-search-template-mode .duel-player-card.me,
  #duelScreen.duel-search-template-mode .duel-player-card.opponent {
    height: 100% !important;
    min-height: 0 !important;
    padding: 8px 5px !important;
    gap: 4px !important;
    border-radius: 17px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card .duel-avatar {
    width: clamp(58px, 17vw, 72px) !important;
    height: clamp(58px, 17vw, 72px) !important;
    border-radius: 13px !important;
  }

  #duelScreen.duel-search-template-mode .duel-vs {
    width: 46px !important;
    height: 46px !important;
    font-size: 19px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-name-row strong,
  #duelScreen.duel-search-template-mode .duel-player-card.opponent.searching .duel-player-name-row strong {
    font-size: clamp(10px, 3.15vw, 13px) !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card > span {
    font-size: clamp(6.7px, 2vw, 8.5px) !important;
    line-height: 1.12 !important;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer {
    top: 57.0% !important;
    width: min(78vw, 300px) !important;
    height: 54px !important;
    padding: 0 14px !important;
    gap: 7px !important;
    font-size: clamp(27px, 8vw, 35px) !important;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer::before {
    font-size: clamp(10px, 3vw, 12px) !important;
  }

  #duelScreen.duel-search-template-mode .duel-prestart-actions {
    top: auto !important;
    right: auto !important;
    bottom: 7.0% !important;
    left: 50% !important;
    width: auto !important;
    height: auto !important;
    transform: translateX(-50%) !important;
    display: block !important;
  }

  #duelScreen.duel-search-template-mode #duelCancelBtn {
    width: min(66vw, 240px) !important;
    height: 50px !important;
    padding: 0 17px !important;
    font-size: 14px !important;
  }
}

/* Landscape mobile/tablet: compact horizontal composition with an unobstructed VS. */
@media (max-height: 620px) and (orientation: landscape) {
  #duelScreen.duel-search-template-mode .duel-shell > .eyebrow {
    top: 2.6% !important;
    font-size: 8px !important;
  }

  #duelScreen.duel-search-template-mode #duelTitle {
    top: 7.0% !important;
    font-size: clamp(27px, 4.6vw, 39px) !important;
    line-height: 1 !important;
  }

  #duelScreen.duel-search-template-mode #duelSubtitle {
    top: 15.6% !important;
    width: 78% !important;
    font-size: clamp(11px, 1.7vw, 14px) !important;
  }

  #duelScreen.duel-search-template-mode .duel-versus {
    top: 24.0% !important;
    width: min(74%, 700px) !important;
    height: 36.5% !important;
    grid-template-columns: minmax(190px,1fr) 70px minmax(190px,1fr) !important;
    gap: 14px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card,
  #duelScreen.duel-search-template-mode .duel-player-card.me,
  #duelScreen.duel-search-template-mode .duel-player-card.opponent {
    max-height: 175px !important;
    padding: 9px 11px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card .duel-avatar {
    width: clamp(62px, 10.5vh, 80px) !important;
    height: clamp(62px, 10.5vh, 80px) !important;
  }

  #duelScreen.duel-search-template-mode .duel-vs {
    width: 68px !important;
    height: 68px !important;
    font-size: 27px !important;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer {
    top: 65.0% !important;
    width: min(360px, 43vw) !important;
    min-width: 280px !important;
    height: 46px !important;
    font-size: 26px !important;
  }

  #duelScreen.duel-search-template-mode .duel-prestart-actions {
    top: auto !important;
    right: auto !important;
    bottom: 3.3% !important;
    left: 50% !important;
    width: auto !important;
    height: auto !important;
    transform: translateX(-50%) !important;
    display: block !important;
  }

  #duelScreen.duel-search-template-mode #duelCancelBtn {
    width: 210px !important;
    height: 42px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
  }
}

/* =========================================================
   RC1.27 — FINDING OPPONENT VISUAL BALANCE PASS
   Final sizing/spacing polish for desktop, portrait and landscape.
   ========================================================= */

/* Desktop / large screens */
@media (min-width: 651px) and (min-height: 621px) {
  #duelScreen.duel-search-template-mode .duel-shell > .eyebrow {
    top: 3.6% !important;
    font-size: clamp(11px, .78vw, 14px) !important;
  }

  #duelScreen.duel-search-template-mode #duelTitle {
    top: 11.2% !important;
    width: min(88%, 880px) !important;
    font-size: clamp(36px, 3.55vw, 56px) !important;
    line-height: 1.02 !important;
  }

  #duelScreen.duel-search-template-mode #duelSubtitle {
    top: 19.8% !important;
    width: min(74%, 720px) !important;
    font-size: clamp(15px, 1.12vw, 19px) !important;
  }

  #duelScreen.duel-search-template-mode .duel-versus {
    top: 30.3% !important;
    width: min(79%, 930px) !important;
    height: 34.8% !important;
    grid-template-columns: minmax(270px, 1fr) 122px minmax(270px, 1fr) !important;
    gap: clamp(26px, 3.2vw, 46px) !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card,
  #duelScreen.duel-search-template-mode .duel-player-card.me,
  #duelScreen.duel-search-template-mode .duel-player-card.opponent {
    max-width: 350px !important;
    min-height: 225px !important;
    max-height: 252px !important;
    padding: 17px 22px !important;
    gap: 8px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card .duel-avatar {
    width: clamp(108px, 8.6vw, 128px) !important;
    height: clamp(108px, 8.6vw, 128px) !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-name-row strong,
  #duelScreen.duel-search-template-mode .duel-player-card.opponent.searching .duel-player-name-row strong {
    font-size: clamp(19px, 1.45vw, 24px) !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card > span {
    font-size: clamp(10px, .78vw, 12px) !important;
  }

  #duelScreen.duel-search-template-mode .duel-vs {
    width: 116px !important;
    height: 116px !important;
    font-size: 44px !important;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer {
    top: 68.4% !important;
    width: min(470px, 44%) !important;
    min-width: 360px !important;
    height: 62px !important;
    font-size: clamp(30px, 2.45vw, 40px) !important;
  }

  #duelScreen.duel-search-template-mode .duel-prestart-actions {
    bottom: 5.4% !important;
  }

  #duelScreen.duel-search-template-mode #duelCancelBtn {
    width: 268px !important;
    height: 54px !important;
  }
}

/* Portrait phones: reduce dead card space and strengthen hierarchy */
@media (max-width: 650px) and (orientation: portrait) {
  #duelScreen.duel-search-template-mode .duel-shell > .eyebrow {
    top: 2.8% !important;
    font-size: 8.5px !important;
  }

  #duelScreen.duel-search-template-mode #duelTitle {
    top: 7.8% !important;
    width: 92% !important;
    font-size: clamp(25px, 8vw, 34px) !important;
    line-height: 1.03 !important;
  }

  #duelScreen.duel-search-template-mode #duelSubtitle {
    top: 17.0% !important;
    width: 88% !important;
    font-size: clamp(11px, 3.2vw, 13.5px) !important;
  }

  #duelScreen.duel-search-template-mode .duel-versus {
    top: 28.0% !important;
    width: 94% !important;
    height: 21.5% !important;
    grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card,
  #duelScreen.duel-search-template-mode .duel-player-card.me,
  #duelScreen.duel-search-template-mode .duel-player-card.opponent {
    height: 100% !important;
    padding: 8px 7px 9px !important;
    gap: 4px !important;
    border-radius: 17px !important;
    justify-content: center !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card .duel-avatar {
    width: clamp(70px, 20vw, 84px) !important;
    height: clamp(70px, 20vw, 84px) !important;
    border-radius: 14px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-name-row {
    gap: 4px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-name-row strong,
  #duelScreen.duel-search-template-mode .duel-player-card.opponent.searching .duel-player-name-row strong {
    font-size: clamp(11.5px, 3.45vw, 14px) !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-flag {
    font-size: 14px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card > span {
    font-size: clamp(7.2px, 2.08vw, 8.8px) !important;
    letter-spacing: .045em !important;
  }

  #duelScreen.duel-search-template-mode .duel-vs {
    width: 50px !important;
    height: 50px !important;
    font-size: 20px !important;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer {
    top: 55.0% !important;
    width: min(80vw, 302px) !important;
    height: 52px !important;
    padding: 0 14px !important;
    gap: 7px !important;
    font-size: clamp(26px, 7.8vw, 34px) !important;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer::before {
    font-size: clamp(10px, 2.9vw, 12px) !important;
  }

  #duelScreen.duel-search-template-mode .duel-prestart-actions {
    bottom: 6.0% !important;
  }

  #duelScreen.duel-search-template-mode #duelCancelBtn {
    width: min(64vw, 238px) !important;
    height: 48px !important;
    font-size: 13.5px !important;
  }
}

/* Landscape phones/tablets: compact top area, stronger card content */
@media (max-height: 620px) and (orientation: landscape) {
  #duelScreen.duel-search-template-mode .duel-shell > .eyebrow {
    top: 1.8% !important;
    font-size: 7.5px !important;
  }

  #duelScreen.duel-search-template-mode #duelTitle {
    top: 7.3% !important;
    width: 86% !important;
    font-size: clamp(25px, 4.2vw, 36px) !important;
  }

  #duelScreen.duel-search-template-mode #duelSubtitle {
    top: 15.2% !important;
    width: 74% !important;
    font-size: clamp(10.5px, 1.55vw, 13px) !important;
  }

  #duelScreen.duel-search-template-mode .duel-versus {
    top: 26.0% !important;
    width: min(72%, 700px) !important;
    height: 34.0% !important;
    grid-template-columns: minmax(200px, 1fr) 76px minmax(200px, 1fr) !important;
    gap: 15px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card,
  #duelScreen.duel-search-template-mode .duel-player-card.me,
  #duelScreen.duel-search-template-mode .duel-player-card.opponent {
    max-height: 160px !important;
    min-height: 0 !important;
    padding: 8px 12px !important;
    gap: 4px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card .duel-avatar {
    width: clamp(72px, 12vh, 86px) !important;
    height: clamp(72px, 12vh, 86px) !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-name-row strong,
  #duelScreen.duel-search-template-mode .duel-player-card.opponent.searching .duel-player-name-row strong {
    font-size: 14.5px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card > span {
    font-size: 8px !important;
  }

  #duelScreen.duel-search-template-mode .duel-vs {
    width: 72px !important;
    height: 72px !important;
    font-size: 28px !important;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer {
    top: 65.5% !important;
    width: min(355px, 42vw) !important;
    min-width: 275px !important;
    height: 44px !important;
    padding: 0 18px !important;
    font-size: 25px !important;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer::before {
    font-size: 11.5px !important;
  }

  #duelScreen.duel-search-template-mode .duel-prestart-actions {
    bottom: 3.0% !important;
  }

  #duelScreen.duel-search-template-mode #duelCancelBtn {
    width: 205px !important;
    height: 40px !important;
    font-size: 12.5px !important;
  }
}

/* =========================================================
   RC1.28 — FINDING OPPONENT FINAL POLISH
   Tightens the vertical rhythm on desktop, reduces dead space
   on portrait, and gives landscape a cleaner timer gap.
   ========================================================= */

/* Desktop / large screens */
@media (min-width: 651px) and (min-height: 621px) {
  #duelScreen.duel-search-template-mode .duel-shell > .eyebrow {
    top: 3.8% !important;
  }

  #duelScreen.duel-search-template-mode #duelTitle {
    top: 10.8% !important;
    width: min(88%, 900px) !important;
    font-size: clamp(37px, 3.6vw, 57px) !important;
  }

  #duelScreen.duel-search-template-mode #duelSubtitle {
    top: 18.8% !important;
    width: min(74%, 720px) !important;
  }

  #duelScreen.duel-search-template-mode .duel-versus {
    top: 29.4% !important;
    height: 34.0% !important;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer {
    top: 70.1% !important;
    width: min(455px, 43%) !important;
    min-width: 350px !important;
  }

  #duelScreen.duel-search-template-mode .duel-prestart-actions {
    bottom: 4.9% !important;
  }
}

/* Portrait phones */
@media (max-width: 650px) and (orientation: portrait) {
  #duelScreen.duel-search-template-mode .duel-shell > .eyebrow {
    top: 3.0% !important;
    font-size: 8.5px !important;
  }

  #duelScreen.duel-search-template-mode #duelTitle {
    top: 7.2% !important;
    width: 92% !important;
    font-size: clamp(24px, 7.7vw, 33px) !important;
    line-height: 1.02 !important;
  }

  #duelScreen.duel-search-template-mode #duelSubtitle {
    top: 15.5% !important;
    width: 86% !important;
    font-size: clamp(10.5px, 3.0vw, 13px) !important;
  }

  #duelScreen.duel-search-template-mode .duel-versus {
    top: 25.8% !important;
    width: 92% !important;
    height: 20.8% !important;
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card,
  #duelScreen.duel-search-template-mode .duel-player-card.me,
  #duelScreen.duel-search-template-mode .duel-player-card.opponent {
    padding: 7px 7px 8px !important;
    gap: 3px !important;
    border-radius: 17px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card .duel-avatar {
    width: clamp(68px, 19vw, 82px) !important;
    height: clamp(68px, 19vw, 82px) !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-name-row strong,
  #duelScreen.duel-search-template-mode .duel-player-card.opponent.searching .duel-player-name-row strong {
    font-size: clamp(11.5px, 3.35vw, 13.8px) !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card > span {
    font-size: clamp(7px, 2.0vw, 8.5px) !important;
  }

  #duelScreen.duel-search-template-mode .duel-vs {
    width: 48px !important;
    height: 48px !important;
    font-size: 19px !important;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer {
    top: 52.8% !important;
    width: min(78vw, 294px) !important;
    height: 50px !important;
    padding: 0 14px !important;
    gap: 7px !important;
    font-size: clamp(25px, 7.4vw, 33px) !important;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer::before {
    font-size: clamp(10px, 2.8vw, 11.5px) !important;
  }

  #duelScreen.duel-search-template-mode .duel-prestart-actions {
    bottom: 10.2% !important;
  }

  #duelScreen.duel-search-template-mode #duelCancelBtn {
    width: min(62vw, 228px) !important;
    height: 47px !important;
    font-size: 13.5px !important;
  }
}

/* Landscape phones / tablets */
@media (max-height: 620px) and (orientation: landscape) {
  #duelScreen.duel-search-template-mode .duel-shell > .eyebrow {
    top: 2.0% !important;
  }

  #duelScreen.duel-search-template-mode #duelTitle {
    top: 6.6% !important;
    width: 84% !important;
  }

  #duelScreen.duel-search-template-mode #duelSubtitle {
    top: 14.0% !important;
    width: 72% !important;
  }

  #duelScreen.duel-search-template-mode .duel-versus {
    top: 24.2% !important;
    width: min(69%, 670px) !important;
    height: 32.0% !important;
    grid-template-columns: minmax(185px, 1fr) 70px minmax(185px, 1fr) !important;
    gap: 18px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card,
  #duelScreen.duel-search-template-mode .duel-player-card.me,
  #duelScreen.duel-search-template-mode .duel-player-card.opponent {
    max-height: 152px !important;
    padding: 8px 10px !important;
    gap: 4px !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card .duel-avatar {
    width: clamp(66px, 11vh, 82px) !important;
    height: clamp(66px, 11vh, 82px) !important;
  }

  #duelScreen.duel-search-template-mode .duel-vs {
    width: 68px !important;
    height: 68px !important;
    font-size: 27px !important;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer {
    top: 69.2% !important;
    width: min(348px, 40vw) !important;
    min-width: 270px !important;
    height: 43px !important;
    font-size: 24px !important;
  }

  #duelScreen.duel-search-template-mode #duelSearchTimer::before {
    font-size: 11px !important;
  }

  #duelScreen.duel-search-template-mode .duel-prestart-actions {
    bottom: 3.8% !important;
  }

  #duelScreen.duel-search-template-mode #duelCancelBtn {
    width: 198px !important;
    height: 40px !important;
    font-size: 12.5px !important;
  }
}

/* =========================================================
   RC1.29 — FINDING OPPONENT POSITION POLISH
   Position/spacing only. Keeps the RC1.28 visual design intact.
   - Desktop: slightly tighter subtitle-to-player-card rhythm.
   - Portrait: raises Leave Game to reduce the large dead zone.
   - Landscape: separates eyebrow/title and compacts long-wait sheet.
   ========================================================= */

/* Desktop / large screens — preserve the existing composition, only tighten
   the vertical gap between the subtitle and matchup cards. */
@media (min-width: 651px) and (min-height: 621px) {
  #duelScreen.duel-search-template-mode .duel-versus {
    top: 28.1% !important;
  }
}

/* Portrait phones — bring the exit action closer to the active matchmaking
   cluster without changing its size or visual styling. */
@media (max-width: 650px) and (orientation: portrait) {
  #duelScreen.duel-search-template-mode .duel-prestart-actions {
    bottom: 15.0% !important;
  }
}

/* Landscape phones / tablets — create a clean header stack and reclaim
   vertical space from the timeout/invite panel. */
@media (max-height: 620px) and (orientation: landscape) {
  #duelScreen.duel-search-template-mode .duel-shell > .eyebrow {
    top: 2.0% !important;
  }

  #duelScreen.duel-search-template-mode #duelTitle {
    top: 8.7% !important;
  }

  #duelScreen.duel-search-template-mode #duelSubtitle {
    top: 17.3% !important;
  }

  #duelScreen.duel-search-template-mode .duel-versus {
    top: 25.2% !important;
  }

  #duelScreen.duel-search-template-mode .duel-long-wait {
    bottom: 2.0% !important;
    width: min(590px, 62%) !important;
    padding: 8px 11px !important;
    border-radius: 16px !important;
  }

  #duelScreen.duel-search-template-mode .duel-long-wait p {
    margin-bottom: 6px !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }

  #duelScreen.duel-search-template-mode .duel-long-wait-actions {
    gap: 8px !important;
  }

  #duelScreen.duel-search-template-mode .duel-long-wait .btn {
    min-width: 138px !important;
    height: 34px !important;
    font-size: 10.5px !important;
  }
}

/* =========================================================
   RC1.30 — DUEL KEEP SEARCHING CLICK-SAFETY FIX
   Prevents the invisible Leave Game action layer from stealing
   taps/clicks from the long-wait Keep Searching / Invite panel.
   Uses sibling selectors for broad browser/WebView support rather
   than relying only on :has(). No visual redesign.
   ========================================================= */
#duelScreen.duel-search-template-mode .duel-long-wait:not(.hidden) {
  z-index: 30 !important;
  pointer-events: auto !important;
}

#duelScreen.duel-search-template-mode .duel-long-wait:not(.hidden) ~ .duel-prestart-actions {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#duelScreen.duel-search-template-mode .duel-long-wait:not(.hidden) .duel-long-wait-actions,
#duelScreen.duel-search-template-mode .duel-long-wait:not(.hidden) .duel-long-wait-actions .btn {
  position: relative !important;
  z-index: 31 !important;
  pointer-events: auto !important;
}


/* =========================================================
   RC1.31 — DUEL BLUE IDENTITY / RATING ALIGNMENT
   Alignment-only polish for Finding Opponent / Match Found.
   The blue-side flag+name row and rating/rank line now share
   the same horizontal center axis on desktop, portrait and landscape.
   Gold/opponent card styling is intentionally unchanged.
   ========================================================= */
#duelScreen.duel-search-template-mode .duel-player-card.me .duel-player-name-row,
#duelScreen.duel-match-found-mode .duel-player-card.me .duel-player-name-row {
  width: auto !important;
  max-width: 94% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
  justify-self: center !important;
  align-self: center !important;
  text-align: center !important;
}

#duelScreen.duel-search-template-mode .duel-player-card.me > span,
#duelScreen.duel-match-found-mode .duel-player-card.me > span {
  width: auto !important;
  max-width: 94% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-self: center !important;
  align-self: center !important;
  text-align: center !important;
}

/* =========================================================
   RC1.32 — DUEL GOLD SEARCH IDENTITY RESPONSIVE ALIGNMENT
   Responsive-only alignment polish for Finding Opponent.
   Desktop is intentionally untouched. On portrait and landscape,
   the gold-side flag+Searching row and WORLDWIDE QUEUE line share
   the same horizontal center axis, matching the blue card rhythm.
   ========================================================= */
@media (max-width: 650px) and (orientation: portrait) {
  #duelScreen.duel-search-template-mode .duel-player-card.opponent .duel-player-name-row {
    width: auto !important;
    max-width: 94% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    justify-self: center !important;
    align-self: center !important;
    text-align: center !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card.opponent > span {
    width: auto !important;
    max-width: 94% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
    align-self: center !important;
    text-align: center !important;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  #duelScreen.duel-search-template-mode .duel-player-card.opponent .duel-player-name-row {
    width: auto !important;
    max-width: 94% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    justify-self: center !important;
    align-self: center !important;
    text-align: center !important;
  }

  #duelScreen.duel-search-template-mode .duel-player-card.opponent > span {
    width: auto !important;
    max-width: 94% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
    align-self: center !important;
    text-align: center !important;
  }
}


/* =========================================================
   RC1.33 — UNIFIED DUEL MATCH FOUND ARENA
   Match Found now reuses the approved Finding Opponent arena/template.
   The search-template class remains the visual source of truth; this state
   only replaces the timer with a 3-2-1-GO status pill and uses the matched
   opponent data. Desktop, portrait and landscape therefore inherit the exact
   card/header positioning already polished in RC1.32.
   ========================================================= */
#duelScreen.duel-search-template-mode.duel-match-found-unified-mode #duelSearchTimer {
  display: none !important;
}

#duelScreen.duel-search-template-mode.duel-match-found-unified-mode #duelCountdown {
  position: absolute !important;
  top: 70.1% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(455px, 43%) !important;
  min-width: 350px !important;
  height: 62px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(84,205,255,.52) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(5,47,79,.84), rgba(2,27,51,.88)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.28), 0 0 28px rgba(43,186,255,.08) !important;
  color: #fff !important;
  font-size: clamp(22px, 2.2vw, 34px) !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
  text-align: center !important;
  text-shadow: 0 0 22px rgba(90,215,255,.22) !important;
  z-index: 7 !important;
  animation: duelCount .75s ease both;
  white-space: nowrap !important;
}

#duelScreen.duel-search-template-mode.duel-match-found-unified-mode #duelCountdown.hidden {
  display: none !important;
}

#duelScreen.duel-search-template-mode.duel-match-found-unified-mode #duelCountdown.is-go {
  color: #fff7cf !important;
  border-color: rgba(255,211,92,.72) !important;
  background: linear-gradient(180deg, rgba(99,64,5,.92), rgba(44,27,2,.95)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 14px 34px rgba(0,0,0,.30), 0 0 34px rgba(255,198,56,.18) !important;
  text-shadow: 0 0 22px rgba(255,216,103,.46) !important;
}

/* Match Found uses the same Leave Game control geometry as Finding Opponent. */
#duelScreen.duel-search-template-mode.duel-match-found-unified-mode #duelLeaveBtn {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 250px !important;
  height: 54px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 22px !important;
  border: 1px solid rgba(255,105,139,.88) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(143,19,52,.96), rgba(76,8,30,.98)) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.34), 0 0 22px rgba(255,42,91,.19), inset 0 1px 0 rgba(255,255,255,.11) !important;
  color: #fff !important;
  opacity: 1 !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
}

@media (max-width: 650px) and (orientation: portrait) {
  #duelScreen.duel-search-template-mode.duel-match-found-unified-mode #duelCountdown {
    top: 52.8% !important;
    width: min(78vw, 294px) !important;
    min-width: 0 !important;
    height: 50px !important;
    padding: 0 14px !important;
    font-size: clamp(17px, 5.2vw, 23px) !important;
  }

  #duelScreen.duel-search-template-mode.duel-match-found-unified-mode .duel-prestart-actions {
    bottom: 15.0% !important;
  }

  #duelScreen.duel-search-template-mode.duel-match-found-unified-mode #duelLeaveBtn {
    width: min(62vw, 228px) !important;
    height: 47px !important;
    font-size: 13.5px !important;
  }

  /* RC1.32 gold alignment also applies after the real opponent replaces
     Searching..., so both matched identity lines remain centered. */
  #duelScreen.duel-search-template-mode.duel-match-found-unified-mode .duel-player-card.opponent .duel-player-name-row,
  #duelScreen.duel-search-template-mode.duel-match-found-unified-mode .duel-player-card.opponent > span {
    width: auto !important;
    max-width: 94% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
    align-self: center !important;
    text-align: center !important;
  }
  #duelScreen.duel-search-template-mode.duel-match-found-unified-mode .duel-player-card.opponent .duel-player-name-row {
    justify-content: center !important;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  #duelScreen.duel-search-template-mode.duel-match-found-unified-mode #duelCountdown {
    top: 69.2% !important;
    width: min(348px, 40vw) !important;
    min-width: 270px !important;
    height: 43px !important;
    padding: 0 14px !important;
    font-size: 18px !important;
  }

  #duelScreen.duel-search-template-mode.duel-match-found-unified-mode .duel-prestart-actions {
    bottom: 3.8% !important;
  }

  #duelScreen.duel-search-template-mode.duel-match-found-unified-mode #duelLeaveBtn {
    width: 198px !important;
    height: 40px !important;
    font-size: 12.5px !important;
  }

  #duelScreen.duel-search-template-mode.duel-match-found-unified-mode .duel-player-card.opponent .duel-player-name-row,
  #duelScreen.duel-search-template-mode.duel-match-found-unified-mode .duel-player-card.opponent > span {
    width: auto !important;
    max-width: 94% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
    align-self: center !important;
    text-align: center !important;
  }
  #duelScreen.duel-search-template-mode.duel-match-found-unified-mode .duel-player-card.opponent .duel-player-name-row {
    justify-content: center !important;
  }
}

/* =========================================================
   RC1.34 — ADMIN DUEL HISTORY CONFIRMATION STACKING FIX
   Keep the leaderboard open underneath while ensuring the
   destructive confirmation is the top-most interactive modal.
   ========================================================= */
.duel-history-confirm-modal{
  z-index:7000!important;
  pointer-events:auto!important;
  isolation:isolate;
}
.duel-history-confirm-modal .duel-history-confirm-card{
  position:relative;
  z-index:1;
  pointer-events:auto;
}


/* =========================================================
   RC1.40 — NATIVE PORTRAIT LOBBY (isolated)
   Desktop + landscape remain on the untouched RC1.35 layout.
   Portrait order: title -> profile -> explorer -> play -> mode dock.
   ========================================================= */
.tt-native-mode-dock{display:none}

@media (max-width:600px) and (orientation:portrait){
  #menuScreen.tt-lobby-home.active{
    height:100dvh!important;
    min-height:100dvh!important;
    overflow:hidden!important;
    background:#020c15!important;
  }
  #menuScreen .tt-lobby-shell{
    width:100%!important;
    height:100dvh!important;
    min-height:0!important;
    padding:calc(5px + env(safe-area-inset-top,0px)) 6px calc(5px + env(safe-area-inset-bottom,0px))!important;
    gap:5px!important;
    overflow:hidden!important;
  }
  #menuScreen .tt-lobby-topbar{
    flex:0 0 48px!important;
    min-height:48px!important;
    height:48px!important;
    padding:4px 7px!important;
    border-radius:14px!important;
  }
  #menuScreen .tt-lobby-topbar .v12-brand img{width:74px!important;max-height:30px!important}
  #menuScreen .v12-top-actions{gap:4px!important}
  #menuScreen .v12-wallet{min-width:55px!important;height:34px!important;min-height:34px!important;padding:0 6px!important;border-radius:10px!important}
  #menuScreen .v12-google-login,
  #menuScreen .v12-account,
  #menuScreen .mobile-multiplayer-button,
  #menuScreen .menu-music-button{width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;border-radius:10px!important}
  #menuScreen .v12-avatar-chip{width:26px!important;height:26px!important;min-width:26px!important}

  #menuScreen .tt-lobby-main{
    position:relative!important;
    display:block!important;
    flex:1 1 auto!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  #menuScreen .tt-lobby-hero{
    position:absolute!important;
    inset:0!important;
    min-height:0!important;
    height:auto!important;
    border:0!important;
    border-radius:20px!important;
    overflow:hidden!important;
    isolation:isolate!important;
    box-shadow:inset 0 0 0 1px rgba(91,197,245,.15),0 16px 34px rgba(0,0,0,.24)!important;
  }
  #menuScreen .tt-lobby-room-art{
    position:absolute!important;
    inset:0!important;
    opacity:1!important;
    transform:none!important;
    background:url('assets/backgrounds/home-hero-borneo.webp') center center/cover no-repeat!important;
    filter:saturate(1.03) brightness(.82)!important;
    transition:filter .18s ease!important;
  }
  #menuScreen[data-native-mode="duel"] .tt-lobby-room-art{
    background-image:url('assets/duel-match/finding-opponent-arena.webp')!important;
    background-position:center center!important;
    filter:saturate(.95) brightness(.69)!important;
  }
  #menuScreen[data-native-mode="daily"] .tt-lobby-room-art{
    background-image:url('assets/v12/mode-daily-borneo.webp')!important;
    background-position:center center!important;
    filter:saturate(1.04) brightness(.76)!important;
  }
  #menuScreen .tt-lobby-scrim{
    position:absolute!important;
    inset:0!important;
    background:linear-gradient(180deg,rgba(2,14,25,.78) 0%,rgba(3,20,34,.34) 19%,rgba(4,24,38,.04) 43%,rgba(3,17,28,.12) 63%,rgba(2,12,21,.78) 100%)!important;
    pointer-events:none!important;
  }
  #menuScreen[data-native-mode="duel"] .tt-lobby-scrim{
    background:linear-gradient(180deg,rgba(3,9,20,.78) 0%,rgba(5,19,36,.31) 21%,rgba(7,26,48,.05) 44%,rgba(8,19,30,.24) 63%,rgba(2,9,17,.83) 100%),linear-gradient(90deg,rgba(5,15,29,.32),transparent 48%,rgba(85,43,18,.18))!important;
  }
  #menuScreen[data-native-mode="daily"] .tt-lobby-scrim{
    background:linear-gradient(180deg,rgba(3,13,23,.73) 0%,rgba(5,26,35,.27) 22%,rgba(10,44,50,.04) 45%,rgba(8,22,29,.18) 64%,rgba(3,11,18,.82) 100%),linear-gradient(90deg,rgba(7,24,31,.22),transparent 48%,rgba(98,72,22,.14))!important;
  }
  #menuScreen .tt-destination-sign{display:none!important}

  /* Copy becomes an overlay; only its interactive children accept touches. */
  #menuScreen .tt-lobby-copy{
    position:absolute!important;
    inset:0!important;
    width:auto!important;
    max-width:none!important;
    transform:none!important;
    z-index:8!important;
    pointer-events:none!important;
  }
  #menuScreen .tt-lobby-copy .v12-kicker{
    position:absolute!important;
    top:12px!important;
    left:15px!important;
    margin:0!important;
    color:#78e2ff!important;
    font-size:6.5px!important;
    font-weight:900!important;
    letter-spacing:.20em!important;
  }
  #menuScreen .tt-lobby-copy h1{
    position:absolute!important;
    top:28px!important;
    left:15px!important;
    width:min(78%,270px)!important;
    margin:0!important;
    font-size:clamp(28px,8.8vw,34px)!important;
    line-height:.91!important;
    letter-spacing:-.052em!important;
    text-shadow:0 8px 24px rgba(0,0,0,.42)!important;
  }
  #menuScreen .tt-lobby-lead{
    position:absolute!important;
    top:91px!important;
    left:16px!important;
    width:min(76%,260px)!important;
    margin:0!important;
    color:rgba(225,240,249,.82)!important;
    font-size:8px!important;
    line-height:1.25!important;
  }

  /* User-marked position: profile directly below the title, before Tommy. */
  #menuScreen .tt-player-summary{
    position:absolute!important;
    top:116px!important;
    left:12px!important;
    right:12px!important;
    bottom:auto!important;
    width:auto!important;
    max-width:none!important;
    min-height:47px!important;
    margin:0!important;
    padding:5px 8px!important;
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    gap:8px!important;
    border-radius:14px!important;
    border:1px solid rgba(101,210,255,.28)!important;
    background:linear-gradient(135deg,rgba(4,32,53,.84),rgba(4,18,31,.78))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 9px 22px rgba(0,0,0,.23)!important;
    backdrop-filter:blur(13px) saturate(1.1)!important;
    -webkit-backdrop-filter:blur(13px) saturate(1.1)!important;
    pointer-events:auto!important;
  }
  #menuScreen .tt-player-portrait{width:38px!important;height:38px!important;border-radius:11px!important}
  #menuScreen .tt-player-name strong{font-size:10px!important}
  #menuScreen .tt-player-name>span{font-size:7px!important}
  #menuScreen .tt-player-xp{gap:6px!important;margin-top:2px!important}
  #menuScreen .tt-player-xp>div{height:4px!important}
  #menuScreen .tt-player-xp strong{font-size:6.5px!important}
  #menuScreen .tt-player-mini{display:none!important}

  /* Portrait-only Leaderboard card lives under the mode dock. Desktop/landscape stay untouched. */
  #menuScreen .tt-main-leaderboard-action{
    position:absolute!important;
    z-index:26!important;
    left:12px!important;
    right:12px!important;
    top:auto!important;
    bottom:8px!important;
    width:auto!important;
    height:42px!important;
    margin:0!important;
    pointer-events:auto!important;
  }
  #menuScreen .tt-main-leaderboard-action .tt-menu-leaderboard-btn{
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    min-height:42px!important;
    padding:5px 10px!important;
    display:grid!important;
    grid-template-columns:28px minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:8px!important;
    text-align:left!important;
    border-radius:13px!important;
    border:1px solid rgba(255,213,96,.28)!important;
    background:linear-gradient(135deg,rgba(43,36,20,.82),rgba(7,25,39,.90) 48%,rgba(5,18,31,.92))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 20px rgba(0,0,0,.22)!important;
    color:#f7fbff!important;
    touch-action:manipulation!important;
  }
  #menuScreen .tt-menu-leaderboard-icon{
    width:28px!important;
    height:28px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:9px!important;
    border:1px solid rgba(255,220,109,.23)!important;
    background:rgba(255,193,45,.08)!important;
    font-size:14px!important;
  }
  #menuScreen .tt-menu-leaderboard-copy{
    display:flex!important;
    min-width:0!important;
    flex-direction:column!important;
    justify-content:center!important;
    line-height:1!important;
  }
  #menuScreen .tt-menu-leaderboard-copy strong{
    font-size:10px!important;
    letter-spacing:.04em!important;
    color:#fff!important;
  }
  #menuScreen .tt-menu-leaderboard-copy small{
    display:block!important;
    margin-top:3px!important;
    font-size:6.5px!important;
    color:#a9c1d1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #menuScreen .tt-menu-leaderboard-btn>b{
    display:block!important;
    font-size:16px!important;
    color:#d7e6ef!important;
  }

  /* Tommy is centered between the profile and Play button. */
  #menuScreen .tt-lobby-character{
    position:absolute!important;
    z-index:4!important;
    left:4px!important;
    right:4px!important;
    top:171px!important;
    bottom:194px!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    pointer-events:none!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  #menuScreen .tt-lobby-character *{pointer-events:none!important}
  #menuScreen .tt-lobby-character .v12-character-card{position:absolute!important;inset:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
  #menuScreen .tt-lobby-character .v12-live-avatar-mount{inset:0!important}
  #menuScreen .tt-lobby-character .pro-avatar-stage img,
  #menuScreen .tt-lobby-character .tt-menu-hero-image{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center bottom!important;
    filter:drop-shadow(0 20px 22px rgba(0,0,0,.34))!important;
  }
  #menuScreen .tt-character-halo{width:72%!important;bottom:3%!important;opacity:.55!important}
  #menuScreen .tt-lobby-platform{width:54%!important;height:19px!important;bottom:-1px!important;opacity:.55!important}
  #menuScreen .tt-lobby-character .v12-rotate-copy{display:none!important}

  /* User-marked position: PLAY sits below Tommy and above the mode dock. */
  #menuScreen .tt-play-now{
    position:absolute!important;
    z-index:20!important;
    left:12px!important;
    right:12px!important;
    bottom:130px!important;
    width:auto!important;
    max-width:none!important;
    height:56px!important;
    min-height:56px!important;
    margin:0!important;
    padding:5px 11px!important;
    display:grid!important;
    grid-template-columns:29px minmax(0,1fr) auto!important;
    gap:8px!important;
    border-radius:15px!important;
    border:1px solid rgba(215,248,255,.75)!important;
    background:linear-gradient(135deg,#23ccec 0%,#1789ef 55%,#355dd5 100%)!important;
    box-shadow:0 0 22px rgba(36,190,255,.22),0 12px 24px rgba(0,40,95,.24),inset 0 1px rgba(255,255,255,.30)!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }
  #menuScreen[data-native-mode="duel"] .tt-play-now{background:linear-gradient(135deg,#1daed5,#2d65c5 52%,#9a5a31 130%)!important}
  #menuScreen[data-native-mode="daily"] .tt-play-now{background:linear-gradient(135deg,#2dc7b9,#338fca 48%,#a58131 125%)!important}
  #menuScreen .tt-play-now .v12-action-icon{font-size:19px!important}
  #menuScreen .tt-play-now strong{font-size:16px!important;line-height:1!important}
  #menuScreen .tt-play-now small{margin-top:2px!important;font-size:7.2px!important;opacity:.88!important}
  #menuScreen .tt-play-now>b{font-size:19px!important}

  /* Hide the original desktop mode row in portrait only. The original
     buttons remain in the DOM and are used as the trusted launch actions. */
  #menuScreen .tt-mode-row{display:none!important}
  #menuScreen .tt-avatar-progress-row{display:none!important}

  #menuScreen .tt-native-mode-dock{
    position:absolute!important;
    z-index:24!important;
    left:9px!important;
    right:9px!important;
    bottom:57px!important;
    height:66px!important;
    padding:5px!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
    border-radius:17px!important;
    border:1px solid rgba(103,201,242,.22)!important;
    background:linear-gradient(180deg,rgba(4,20,34,.78),rgba(3,13,23,.91))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 26px rgba(0,0,0,.28)!important;
    backdrop-filter:blur(16px) saturate(1.08)!important;
    -webkit-backdrop-filter:blur(16px) saturate(1.08)!important;
    pointer-events:auto!important;
  }
  #menuScreen .tt-native-mode-tile{
    position:relative!important;
    overflow:hidden!important;
    isolation:isolate!important;
    min-width:0!important;
    height:54px!important;
    padding:5px 3px!important;
    display:grid!important;
    grid-template-rows:26px auto!important;
    align-content:center!important;
    justify-items:center!important;
    gap:2px!important;
    border-radius:13px!important;
    border:1px solid rgba(171,226,248,.18)!important;
    color:#eefaff!important;
    background-color:#071624!important;
    background-position:center!important;
    background-size:cover!important;
    box-shadow:0 6px 14px rgba(0,0,0,.20)!important;
    opacity:.76!important;
    cursor:pointer!important;
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  #menuScreen #nativeModeSoloBtn{background-image:url('assets/v12/mode-solo-borneo.webp')!important}
  #menuScreen #nativeModeDuelBtn{background-image:url('assets/v12/mode-duel-borneo.webp')!important}
  #menuScreen #nativeModeDailyBtn{background-image:url('assets/v12/mode-daily-borneo.webp')!important}
  #menuScreen .tt-native-mode-tile:before{
    content:'';position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(4,11,20,.32) 42%,rgba(3,10,18,.88));
  }
  #menuScreen .tt-native-mode-icon{
    width:26px!important;height:26px!important;display:grid!important;place-items:center!important;
    border-radius:8px!important;border:1px solid rgba(231,248,255,.20)!important;
    background:rgba(4,15,27,.46)!important;font-size:12px!important;
  }
  #menuScreen .tt-native-mode-tile strong{
    font-size:8.5px!important;line-height:1!important;letter-spacing:.10em!important;text-shadow:0 2px 7px rgba(0,0,0,.45)!important;
  }
  #menuScreen .tt-native-mode-tile.is-selected{
    opacity:1!important;
    border-color:rgba(223,248,255,.62)!important;
    box-shadow:0 8px 18px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.08),0 0 16px rgba(69,200,255,.17)!important;
    transform:translateY(-1px)!important;
  }
  #menuScreen #nativeModeDailyBtn.is-selected{box-shadow:0 8px 18px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.08),0 0 17px rgba(229,187,75,.18)!important}
}

@media (max-width:600px) and (orientation:portrait) and (max-height:690px){
  #menuScreen .tt-lobby-copy .v12-kicker{top:10px!important}
  #menuScreen .tt-lobby-copy h1{top:25px!important;font-size:27px!important}
  #menuScreen .tt-lobby-lead{display:none!important}
  #menuScreen .tt-player-summary{top:91px!important}
  #menuScreen .tt-lobby-character{top:143px!important;bottom:176px!important}
  #menuScreen .tt-play-now{bottom:118px!important;height:50px!important;min-height:50px!important}
  #menuScreen .tt-native-mode-dock{height:57px!important;bottom:52px!important}
  #menuScreen .tt-native-mode-tile{height:46px!important}
  #menuScreen .tt-main-leaderboard-action{bottom:6px!important;height:40px!important}
  #menuScreen .tt-main-leaderboard-action .tt-menu-leaderboard-btn{height:40px!important;min-height:40px!important}
}

/* =========================================================
   RC1.45 — MULTIPLAYER BACK BUTTON: HARD RIGHT-SIDE LOCK
   Keep the Back control in the top-right on desktop, portrait,
   and landscape. ID-level specificity intentionally wins over
   shared modal-close and responsive rules.
   ========================================================= */
#multiplayerScreen #multiplayerBackBtn {
  position: absolute !important;
  top: 14px !important;
  left: auto !important;
  right: 14px !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 50 !important;
}

@media (max-width: 820px) {
  #multiplayerScreen #multiplayerBackBtn {
    top: max(12px, env(safe-area-inset-top)) !important;
    left: auto !important;
    right: max(12px, env(safe-area-inset-right)) !important;
  }
}


/* =========================================================
   V22.90 — PORTRAIT LEADERBOARD FULL-HEIGHT FIX
   Prevent the leaderboard from collapsing into a short bottom sheet on
   portrait mobile. Keep it as a tall, scrollable panel that fills most
   of the viewport and gives the rows area the remaining height.
   ========================================================= */
@media (max-width: 600px) and (orientation: portrait) {
  #leaderboardModal {
    align-items: stretch !important;
    justify-content: flex-end !important;
    padding: 0 !important;
  }
  #leaderboardModal .leaderboard-card {
    width: 100% !important;
    max-width: none !important;
    min-height: 82dvh !important;
    height: min(94dvh, 860px) !important;
    max-height: 94dvh !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 16px 11px calc(16px + var(--tt-safe-bottom)) !important;
    display: grid !important;
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto !important;
    align-content: start !important;
    overflow: hidden !important;
  }
  #leaderboardModal .leaderboard-head {
    padding-right: 54px !important;
    gap: 8px !important;
  }
  #leaderboardModal .leaderboard-head h2 {
    font-size: 1.35rem !important;
  }
  #leaderboardModal .leaderboard-mode-tabs {
    margin-top: 8px !important;
  }
  #leaderboardModal .leaderboard-podium {
    min-height: 170px !important;
    margin-top: 8px !important;
  }
  #leaderboardModal .leaderboard-you-card {
    margin-top: 8px !important;
  }
  #leaderboardModal .leaderboard-rows {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }
  #leaderboardModal .leaderboard-status {
    margin-top: 8px !important;
  }
}


/* =========================================================
   V22.91 — PORTRAIT LEADERBOARD ROW VISIBILITY + CENTERING
   Keep player names visible on portrait and rebalance the layout so the
   podium and row content feel centered instead of squeezed.
   ========================================================= */
@media (max-width: 600px) and (orientation: portrait) {
  #leaderboardModal .leaderboard-card {
    margin: 0 auto !important;
  }
  #leaderboardModal .leaderboard-podium {
    width: 100% !important;
    grid-template-columns: minmax(0, .96fr) minmax(0, 1.12fr) minmax(0, .96fr) !important;
    justify-items: stretch !important;
    align-items: end !important;
    padding-inline: 4px !important;
    gap: 5px !important;
  }
  #leaderboardModal .lb-podium-slot {
    align-items: center !important;
    text-align: center !important;
  }
  #leaderboardModal .leaderboard-table-head,
  #leaderboardModal .lb-row {
    grid-template-columns: 32px minmax(0, 1fr) 74px !important;
    gap: 6px !important;
  }
  #leaderboardModal .leaderboard-table-head {
    padding-inline: 10px !important;
  }
  #leaderboardModal .lb-row {
    padding: 7px 10px !important;
  }
  #leaderboardModal .lb-rank {
    justify-self: start !important;
  }
  #leaderboardModal .lb-player {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
  }
  #leaderboardModal .lb-avatar.row {
    width: 34px !important;
    height: 34px !important;
  }
  #leaderboardModal .lb-player-copy {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  #leaderboardModal .lb-player-copy strong {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #leaderboardModal .lb-player-name-with-flag {
    display: inline-grid !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  #leaderboardModal .lb-player-name-with-flag > span:last-child {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
  }
  #leaderboardModal .lb-score {
    justify-self: end !important;
    text-align: right !important;
  }
}

/* =========================================================
   V22.92 — PORTRAIT LEADERBOARD ROOT LAYOUT RESET
   Fix the actual grid alignment issue that shifted the modal right and
   explicitly restore the identity elements hidden by legacy mobile rules.
   Portrait only; desktop/landscape remain unchanged.
   ========================================================= */
@media (max-width: 600px) and (orientation: portrait) {
  #leaderboardModal {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    place-items: stretch !important;
    justify-content: stretch !important;
    align-content: stretch !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Never let portrait layout rules override the modal's closed state. */
  #leaderboardModal.hidden {
    display: none !important;
  }

  #leaderboardModal .leaderboard-card {
    box-sizing: border-box !important;
    justify-self: stretch !important;
    align-self: end !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    height: 94dvh !important;
    max-height: 94dvh !important;
    min-height: 0 !important;
    border-radius: 24px 24px 0 0 !important;
  }

  #leaderboardModal .leaderboard-podium {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr) !important;
    gap: 5px !important;
    padding-inline: 3px !important;
    box-sizing: border-box !important;
  }

  #leaderboardModal .leaderboard-table-head,
  #leaderboardModal .lb-row {
    grid-template-columns: 30px minmax(0, 1fr) 72px !important;
    gap: 6px !important;
  }

  #leaderboardModal .lb-player {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* Legacy mobile CSS hides every span inside .lb-player. Restore only the
     identity pieces we actually need for the portrait row. */
  #leaderboardModal .lb-player > .lb-avatar.row {
    display: grid !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  #leaderboardModal .lb-player-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #leaderboardModal .lb-player-copy > strong {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: .72rem !important;
    line-height: 1.15 !important;
  }

  #leaderboardModal .lb-player-name-with-flag {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #leaderboardModal .lb-player-name-with-flag > .lb-country-flag,
  #leaderboardModal .lb-player-name-with-flag > .lb-country-fallback {
    display: block !important;
    flex: 0 0 auto !important;
  }

  #leaderboardModal .lb-player-name-with-flag > span:last-child {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #f3f9ff !important;
  }

  #leaderboardModal .lb-player-copy > span {
    display: block !important;
    margin-top: 2px !important;
    font-size: .48rem !important;
    line-height: 1 !important;
    color: #718aa4 !important;
  }

  #leaderboardModal .lb-score {
    justify-self: end !important;
    align-items: flex-end !important;
    min-width: 0 !important;
  }
}


/* =========================================================
   RC1.50 — PORTRAIT MAIN-MENU POLISH PASS
   Polish only: stronger Tommy grounding, tighter portrait spacing,
   clearer mode selection, richer Play button, and a more premium
   Leaderboard card. Layout structure stays the same.
   ========================================================= */
@media (max-width:600px) and (orientation:portrait){
  #menuScreen .tt-lobby-copy h1{
    text-shadow:0 10px 26px rgba(0,0,0,.48)!important;
  }
  #menuScreen .tt-player-summary{
    top:118px!important;
    border-color:rgba(117,220,255,.30)!important;
    background:linear-gradient(135deg,rgba(4,34,56,.88),rgba(4,18,31,.80))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 11px 28px rgba(0,0,0,.26)!important;
  }
  #menuScreen .tt-lobby-character{
    top:166px!important;
    bottom:188px!important;
  }
  #menuScreen .tt-lobby-character::before{
    background:radial-gradient(circle at 50% 72%, rgba(87,224,255,.22), rgba(40,162,232,.10) 28%, rgba(8,27,44,0) 62%)!important;
    opacity:1!important;
    transform:translateY(8px) scale(1.06)!important;
  }
  #menuScreen .tt-lobby-character::after{
    background:radial-gradient(ellipse at 50% 84%, rgba(95,230,255,.18), rgba(14,91,140,.10) 36%, transparent 72%)!important;
    opacity:.9!important;
    transform:translateY(10px) scale(1.08)!important;
  }
  #menuScreen .tt-lobby-character .pro-avatar-stage img,
  #menuScreen .tt-lobby-character .tt-menu-hero-image{
    transform:translateY(10px) scale(1.08)!important;
    filter:drop-shadow(0 24px 26px rgba(0,0,0,.38))!important;
  }
  #menuScreen .tt-character-halo{
    width:79%!important;
    bottom:4%!important;
    opacity:.72!important;
    filter:blur(5px)!important;
  }
  #menuScreen .tt-lobby-platform{
    width:62%!important;
    height:24px!important;
    bottom:2px!important;
    opacity:.72!important;
    filter:blur(.3px)!important;
  }
  #menuScreen .tt-play-now{
    bottom:132px!important;
    height:58px!important;
    min-height:58px!important;
    padding:6px 12px!important;
    border-color:rgba(232,250,255,.78)!important;
    background:linear-gradient(135deg,#2fe0ff 0%,#1898f0 52%,#355fd8 100%)!important;
    box-shadow:0 0 26px rgba(36,190,255,.24),0 14px 28px rgba(0,40,95,.28),inset 0 1px rgba(255,255,255,.32)!important;
  }
  #menuScreen .tt-play-now::before{
    background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.05) 34%,rgba(255,255,255,0) 68%)!important;
    opacity:1!important;
  }
  #menuScreen .tt-play-now .v12-action-icon{font-size:20px!important}
  #menuScreen .tt-play-now strong{font-size:16.5px!important;letter-spacing:-.01em!important}
  #menuScreen .tt-play-now small{font-size:7.4px!important;color:#e3f8ff!important}
  #menuScreen .tt-play-now>b{font-size:20px!important}
  #menuScreen[data-native-mode="duel"] .tt-play-now{
    background:linear-gradient(135deg,#26b8e2 0%,#2d6ac8 54%,#a26737 100%)!important;
    box-shadow:0 0 26px rgba(73,165,255,.20),0 14px 28px rgba(0,32,84,.30),inset 0 1px rgba(255,255,255,.26)!important;
  }
  #menuScreen[data-native-mode="daily"] .tt-play-now{
    background:linear-gradient(135deg,#31d2c4 0%,#3897cf 50%,#b58a34 100%)!important;
    box-shadow:0 0 24px rgba(74,212,195,.18),0 14px 28px rgba(0,42,88,.28),inset 0 1px rgba(255,255,255,.26)!important;
  }
  #menuScreen .tt-native-mode-dock{
    bottom:60px!important;
    height:68px!important;
    padding:6px!important;
    gap:6px!important;
    border-color:rgba(112,209,247,.24)!important;
    background:linear-gradient(180deg,rgba(5,22,36,.80),rgba(3,13,23,.93))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 30px rgba(0,0,0,.30)!important;
  }
  #menuScreen .tt-native-mode-tile{
    height:56px!important;
    border-radius:14px!important;
    opacity:.68!important;
    border-color:rgba(176,228,248,.16)!important;
    box-shadow:0 7px 15px rgba(0,0,0,.22)!important;
  }
  #menuScreen .tt-native-mode-tile:before{
    background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(4,11,20,.28) 38%,rgba(3,10,18,.88))!important;
  }
  #menuScreen .tt-native-mode-icon{
    border-color:rgba(235,248,255,.22)!important;
    background:rgba(6,19,32,.48)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09)!important;
  }
  #menuScreen .tt-native-mode-tile strong{
    color:#f4fbff!important;
    text-shadow:0 2px 8px rgba(0,0,0,.48)!important;
  }
  #menuScreen .tt-native-mode-tile.is-selected{
    opacity:1!important;
    border-color:rgba(225,248,255,.68)!important;
    box-shadow:0 10px 20px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.08),0 0 18px rgba(69,200,255,.18)!important;
    transform:translateY(-2px)!important;
  }
  #menuScreen #nativeModeDuelBtn.is-selected{
    box-shadow:0 10px 20px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.08),0 0 18px rgba(111,170,255,.16)!important;
  }
  #menuScreen #nativeModeDailyBtn.is-selected{
    box-shadow:0 10px 20px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.08),0 0 19px rgba(233,188,78,.22)!important;
  }
  #menuScreen .tt-main-leaderboard-action{
    bottom:8px!important;
    height:44px!important;
  }
  #menuScreen .tt-main-leaderboard-action .tt-menu-leaderboard-btn{
    height:44px!important;
    min-height:44px!important;
    padding:6px 10px!important;
    border-color:rgba(255,214,107,.30)!important;
    background:linear-gradient(135deg,rgba(50,39,18,.88),rgba(8,28,43,.92) 52%,rgba(4,17,29,.94))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 9px 21px rgba(0,0,0,.24)!important;
  }
  #menuScreen .tt-menu-leaderboard-icon{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;
  }
  #menuScreen .tt-menu-leaderboard-copy strong{font-size:10.4px!important}
  #menuScreen .tt-menu-leaderboard-copy small{font-size:6.7px!important;color:#b7cbda!important}
}

@media (max-width:600px) and (orientation:portrait) and (max-height:690px){
  #menuScreen .tt-lobby-character{top:146px!important;bottom:172px!important}
  #menuScreen .tt-play-now{bottom:120px!important;height:52px!important;min-height:52px!important}
  #menuScreen .tt-native-mode-dock{bottom:54px!important;height:60px!important}
  #menuScreen .tt-native-mode-tile{height:48px!important}
  #menuScreen .tt-main-leaderboard-action{bottom:6px!important;height:42px!important}
  #menuScreen .tt-main-leaderboard-action .tt-menu-leaderboard-btn{height:42px!important;min-height:42px!important}
}


/* =========================================================
   RC1.51 — PORTRAIT FEATURED EXPLORERS SHOP CARD
   Three-avatar glass shop preview under Leaderboard. Portrait only.
   ========================================================= */
#menuScreen .tt-native-featured-card{display:none}

@media (max-width:600px) and (orientation:portrait){
  #menuScreen .tt-native-featured-card{
    position:absolute!important;
    z-index:28!important;
    left:12px!important;
    right:12px!important;
    bottom:7px!important;
    height:70px!important;
    padding:5px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1.08fr) minmax(0,1.72fr)!important;
    align-items:stretch!important;
    gap:6px!important;
    border-radius:15px!important;
    border:1px solid rgba(104,195,244,.25)!important;
    background:
      radial-gradient(circle at 82% 18%,rgba(176,98,255,.10),transparent 34%),
      linear-gradient(135deg,rgba(5,27,44,.91),rgba(4,16,29,.94))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 24px rgba(0,0,0,.25)!important;
    backdrop-filter:blur(15px) saturate(1.08)!important;
    -webkit-backdrop-filter:blur(15px) saturate(1.08)!important;
    pointer-events:auto!important;
  }
  #menuScreen .tt-native-featured-copy{
    min-width:0!important;
    border:0!important;
    padding:7px 6px 6px 7px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:flex-start!important;
    position:relative!important;
    border-radius:11px!important;
    background:linear-gradient(135deg,rgba(18,53,77,.52),rgba(8,28,45,.34))!important;
    color:#f3fbff!important;
    text-align:left!important;
    cursor:pointer!important;
    touch-action:manipulation!important;
  }
  #menuScreen .tt-native-featured-copy small{
    color:#69ddff!important;
    font-size:6.2px!important;
    font-weight:900!important;
    letter-spacing:.13em!important;
    line-height:1.1!important;
  }
  #menuScreen .tt-native-featured-copy strong{
    margin-top:3px!important;
    max-width:92%!important;
    color:#fff!important;
    font-size:10.5px!important;
    line-height:1.05!important;
  }
  #menuScreen .tt-native-featured-copy > span{
    position:absolute!important;
    right:7px!important;
    bottom:7px!important;
    color:#bfeeff!important;
    font-size:13px!important;
    font-weight:900!important;
  }
  #menuScreen .tt-native-featured-list{
    min-width:0!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:4px!important;
  }
  #menuScreen .tt-native-featured-avatar{
    position:relative!important;
    overflow:hidden!important;
    min-width:0!important;
    height:60px!important;
    padding:2px 2px 11px!important;
    border-radius:11px!important;
    background:linear-gradient(180deg,rgba(31,18,54,.90),rgba(15,12,32,.95))!important;
    cursor:pointer!important;
    touch-action:manipulation!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 13px rgba(0,0,0,.22)!important;
  }
  #menuScreen .tt-native-featured-avatar img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center bottom!important;
    filter:drop-shadow(0 5px 7px rgba(0,0,0,.35))!important;
  }
  #menuScreen .tt-native-featured-avatar > span{
    position:absolute!important;
    left:3px!important;
    right:3px!important;
    bottom:2px!important;
    height:9px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:999px!important;
    font-size:5.4px!important;
    font-weight:900!important;
    letter-spacing:.04em!important;
    line-height:1!important;
  }
  #menuScreen .tt-native-featured-avatar.rarity-epic{
    border:1px solid rgba(192,96,255,.48)!important;
    box-shadow:inset 0 0 16px rgba(176,65,255,.08),0 6px 13px rgba(0,0,0,.22)!important;
  }
  #menuScreen .tt-native-featured-avatar.rarity-epic > span{
    color:#f4dcff!important;
    border:1px solid rgba(203,120,255,.35)!important;
    background:linear-gradient(180deg,rgba(118,43,171,.86),rgba(64,24,99,.94))!important;
  }
  #menuScreen .tt-native-featured-avatar.rarity-legendary{
    border:1px solid rgba(255,199,71,.52)!important;
    background:linear-gradient(180deg,rgba(64,45,12,.92),rgba(29,22,10,.96))!important;
    box-shadow:inset 0 0 18px rgba(255,192,54,.08),0 6px 13px rgba(0,0,0,.22),0 0 14px rgba(255,191,56,.06)!important;
  }
  #menuScreen .tt-native-featured-avatar.rarity-legendary > span{
    color:#fff2b5!important;
    border:1px solid rgba(255,211,91,.40)!important;
    background:linear-gradient(180deg,rgba(171,116,15,.90),rgba(94,60,8,.96))!important;
  }

  /* Stack: PLAY → modes → Leaderboard → Featured Explorers. */
  #menuScreen .tt-main-leaderboard-action{
    bottom:84px!important;
    height:44px!important;
  }
  #menuScreen .tt-native-mode-dock{
    bottom:134px!important;
  }
  #menuScreen .tt-play-now{
    bottom:208px!important;
  }
  #menuScreen .tt-lobby-character{
    bottom:270px!important;
  }
}

@media (max-width:600px) and (orientation:portrait) and (max-height:690px){
  #menuScreen .tt-native-featured-card{
    bottom:5px!important;
    height:62px!important;
  }
  #menuScreen .tt-native-featured-avatar{height:52px!important}
  #menuScreen .tt-native-featured-copy strong{font-size:9.5px!important}
  #menuScreen .tt-main-leaderboard-action{bottom:72px!important;height:40px!important}
  #menuScreen .tt-main-leaderboard-action .tt-menu-leaderboard-btn{height:40px!important;min-height:40px!important}
  #menuScreen .tt-native-mode-dock{bottom:118px!important;height:58px!important}
  #menuScreen .tt-native-mode-tile{height:46px!important}
  #menuScreen .tt-play-now{bottom:182px!important;height:50px!important;min-height:50px!important}
  #menuScreen .tt-lobby-character{bottom:238px!important}
}


/* =========================================================
   RC1.52 — PORTRAIT PREMIUM CURRENCY CHIP
   Portrait-only wallet polish: true circular coin, compact glass chip,
   cleaner spacing and a TommyTrace-style coin mark. Desktop/landscape
   remain unchanged.
   ========================================================= */
@media (max-width:600px) and (orientation:portrait){
  #menuScreen .v12-wallet{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    width:auto!important;
    min-width:62px!important;
    height:34px!important;
    min-height:34px!important;
    padding:0 8px 0 5px!important;
    gap:5px!important;
    border-radius:11px!important;
    border:1px solid rgba(126,220,255,.18)!important;
    background:linear-gradient(145deg,rgba(12,36,55,.88),rgba(5,21,35,.90))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 7px 18px rgba(0,0,0,.17)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
  }
  #menuScreen .v12-wallet .coin-orb{
    position:relative!important;
    width:23px!important;
    min-width:23px!important;
    height:23px!important;
    min-height:23px!important;
    flex:0 0 23px!important;
    display:grid!important;
    place-items:center!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:50%!important;
    border:1px solid rgba(255,235,151,.68)!important;
    background:
      radial-gradient(circle at 35% 28%,rgba(255,255,219,.78) 0 9%,transparent 10%),
      radial-gradient(circle at 42% 38%,#ffe87d 0 18%,#ffc638 42%,#e99b0f 72%,#9c5b04 100%)!important;
    color:transparent!important;
    font-size:0!important;
    line-height:1!important;
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,.62),
      inset 0 -2px 3px rgba(121,62,0,.30),
      0 0 10px rgba(255,188,41,.28)!important;
    text-shadow:none!important;
  }
  #menuScreen .v12-wallet .coin-orb::before{
    content:'T';
    position:absolute;
    inset:3px;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid rgba(130,71,0,.28);
    color:#8b5204;
    font-size:10px;
    line-height:1;
    font-weight:1000;
    font-family:Inter,system-ui,sans-serif;
    text-shadow:0 1px 0 rgba(255,245,185,.45);
  }
  #menuScreen .v12-wallet strong{
    margin:0!important;
    font-size:12px!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:.01em!important;
    color:#f4fbff!important;
    font-variant-numeric:tabular-nums;
  }
  #menuScreen .v12-wallet span:last-child{
    display:none!important;
  }
}


/* =========================================================
   RC1.53 — DUEL MATCH FOUND COUNTDOWN CENTER LOCK
   The shared duelCount keyframes animate `transform`, which temporarily
   replaced translateX(-50%) and made the unified 3-2-1 countdown jump
   between center and the right side. Preserve the centering transform in
   every animation frame.
   ========================================================= */
@keyframes duelUnifiedCountCenter {
  0%   { transform: translateX(-50%) scale(.55); opacity:0; }
  55%  { transform: translateX(-50%) scale(1.16); opacity:1; }
  100% { transform: translateX(-50%) scale(1); opacity:1; }
}
#duelScreen.duel-search-template-mode.duel-match-found-unified-mode #duelCountdown {
  transform:translateX(-50%) !important;
  transform-origin:center center !important;
  animation:duelUnifiedCountCenter .75s ease both !important;
}
#duelScreen.duel-search-template-mode.duel-match-found-unified-mode #duelCountdown.is-go {
  transform:translateX(-50%) scale(1) !important;
}


/* =========================================================
   RC1.54 — PORTRAIT SOLO ROUND RESULT: TRUE ONE-SCREEN LAYOUT
   Keep every result detail visible while fitting the full round result
   inside one portrait viewport. Desktop and landscape remain unchanged.
   ========================================================= */
@media (max-width:600px) and (orientation:portrait){
  #resultScreen.result-screen{
    height:100dvh!important;
    min-height:100dvh!important;
    padding:calc(6px + var(--tt-safe-top)) 6px calc(6px + var(--tt-safe-bottom))!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    overflow:hidden!important;
  }
  #resultScreen .result-shell{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    min-height:0!important;
    padding:10px!important;
    border-radius:18px!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr) auto 44px!important;
    gap:8px!important;
    overflow:hidden!important;
  }
  #resultScreen .result-header{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 108px!important;
    grid-template-rows:auto auto!important;
    align-items:center!important;
    gap:4px 8px!important;
    margin:0!important;
  }
  #resultScreen .result-header>div:first-child{
    min-width:0!important;
  }
  #resultScreen .result-header .eyebrow{
    font-size:8px!important;
    letter-spacing:.13em!important;
  }
  #resultScreen .result-header h2{
    margin:3px 0 0!important;
    font-size:clamp(24px,7.4vw,30px)!important;
    line-height:.98!important;
    letter-spacing:-.04em!important;
  }
  #resultScreen .result-subtext{
    grid-column:1 / -1!important;
    margin:3px 0 0!important;
    font-size:9px!important;
    line-height:1.25!important;
    color:#9eb0c2!important;
  }
  #resultScreen .score-badge{
    grid-column:2!important;
    grid-row:1 / span 2!important;
    align-self:center!important;
    width:108px!important;
    min-width:108px!important;
    padding:8px 10px!important;
    border-radius:14px!important;
  }
  #resultScreen .score-badge span{
    font-size:7px!important;
    letter-spacing:.11em!important;
  }
  #resultScreen .score-badge strong{
    margin-top:3px!important;
    font-size:23px!important;
    line-height:1!important;
  }
  #resultScreen .cinematic-map-wrap{
    min-height:0!important;
    height:100%!important;
    border-radius:16px!important;
    box-shadow:0 12px 30px rgba(0,0,0,.28)!important;
  }
  #resultScreen .result-map{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    border-radius:16px!important;
  }
  #resultScreen .result-map-label{
    top:9px!important;
    padding:5px 8px!important;
    font-size:7px!important;
    letter-spacing:.09em!important;
  }
  #resultScreen .guess-label{left:9px!important}
  #resultScreen .actual-label{right:9px!important}
  #resultScreen .result-grid{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    grid-template-areas:
      "distance total"
      "location location"!important;
    gap:6px!important;
    margin:0!important;
  }
  #resultScreen .result-stat{
    min-width:0!important;
    padding:8px 10px!important;
    border-radius:13px!important;
  }
  #resultScreen .result-stat:nth-child(1){grid-area:distance!important}
  #resultScreen .result-stat:nth-child(2){grid-area:location!important}
  #resultScreen .result-stat:nth-child(3){grid-area:total!important}
  #resultScreen .result-stat span{
    font-size:7px!important;
    letter-spacing:.12em!important;
  }
  #resultScreen .result-stat strong{
    margin-top:3px!important;
    font-size:14px!important;
    line-height:1.15!important;
    overflow-wrap:anywhere!important;
  }
  #resultScreen #actualText{
    font-size:13px!important;
  }
  #resultScreen .big-center-btn{
    width:100%!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    margin:0!important;
    padding:0 16px!important;
    border-radius:14px!important;
    font-size:13px!important;
  }
}

@media (max-width:600px) and (orientation:portrait) and (max-height:690px){
  #resultScreen .result-shell{
    padding:8px!important;
    gap:6px!important;
    grid-template-rows:auto minmax(0,1fr) auto 42px!important;
  }
  #resultScreen .result-header{
    grid-template-columns:minmax(0,1fr) 98px!important;
  }
  #resultScreen .result-header h2{font-size:23px!important}
  #resultScreen .result-subtext{font-size:8px!important}
  #resultScreen .score-badge{
    width:98px!important;
    min-width:98px!important;
    padding:7px 9px!important;
  }
  #resultScreen .score-badge strong{font-size:21px!important}
  #resultScreen .result-stat{padding:7px 9px!important}
  #resultScreen .result-stat strong{font-size:13px!important}
  #resultScreen #actualText{font-size:12px!important}
  #resultScreen .big-center-btn{height:42px!important;min-height:42px!important}
}


/* =========================================================
   RC1.55 — LANDSCAPE SOLO ROUND RESULT: TRUE ONE-SCREEN LAYOUT
   Use the wide viewport efficiently: compact header across the top,
   map on the left, stats + Next Round on the right. Portrait RC1.54
   and desktop layouts remain untouched.
   ========================================================= */
@media (orientation:landscape) and (max-width:1100px) and (max-height:600px){
  #resultScreen.result-screen{
    height:100dvh!important;
    min-height:100dvh!important;
    padding:calc(6px + var(--tt-safe-top)) calc(8px + var(--tt-safe-right)) calc(6px + var(--tt-safe-bottom)) calc(8px + var(--tt-safe-left))!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    overflow:hidden!important;
  }
  #resultScreen .result-shell{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    min-height:0!important;
    padding:10px!important;
    border-radius:18px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) clamp(210px,28vw,300px)!important;
    grid-template-rows:auto minmax(0,1fr) 44px!important;
    column-gap:10px!important;
    row-gap:8px!important;
    overflow:hidden!important;
  }
  #resultScreen .result-header{
    grid-column:1 / -1!important;
    grid-row:1!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 132px!important;
    align-items:center!important;
    gap:6px 12px!important;
    margin:0!important;
    min-height:0!important;
  }
  #resultScreen .result-header>div:first-child{
    min-width:0!important;
  }
  #resultScreen .result-header .eyebrow{
    font-size:8px!important;
    letter-spacing:.14em!important;
  }
  #resultScreen .result-header h2{
    margin:2px 0 0!important;
    font-size:clamp(25px,4.4vw,38px)!important;
    line-height:.96!important;
    letter-spacing:-.04em!important;
  }
  #resultScreen .result-subtext{
    margin:4px 0 0!important;
    font-size:9px!important;
    line-height:1.22!important;
    color:#9eafc0!important;
  }
  #resultScreen .score-badge{
    width:132px!important;
    min-width:132px!important;
    padding:8px 11px!important;
    border-radius:14px!important;
    align-self:center!important;
  }
  #resultScreen .score-badge span{
    font-size:7px!important;
    letter-spacing:.12em!important;
  }
  #resultScreen .score-badge strong{
    margin-top:3px!important;
    font-size:24px!important;
    line-height:1!important;
  }
  #resultScreen .cinematic-map-wrap{
    grid-column:1!important;
    grid-row:2 / 4!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    border-radius:16px!important;
    box-shadow:0 12px 30px rgba(0,0,0,.28)!important;
  }
  #resultScreen .result-map{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    border-radius:16px!important;
  }
  #resultScreen .result-map-label{
    top:8px!important;
    padding:5px 8px!important;
    font-size:7px!important;
    letter-spacing:.09em!important;
  }
  #resultScreen .guess-label{left:8px!important}
  #resultScreen .actual-label{right:8px!important}
  #resultScreen .result-grid{
    grid-column:2!important;
    grid-row:2!important;
    align-self:stretch!important;
    min-height:0!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
    gap:7px!important;
  }
  #resultScreen .result-stat{
    min-width:0!important;
    min-height:0!important;
    padding:9px 10px!important;
    border-radius:13px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }
  #resultScreen .result-stat span{
    font-size:7px!important;
    letter-spacing:.11em!important;
  }
  #resultScreen .result-stat strong{
    margin-top:3px!important;
    font-size:14px!important;
    line-height:1.15!important;
    overflow-wrap:anywhere!important;
  }
  #resultScreen #actualText{
    font-size:13px!important;
    line-height:1.16!important;
  }
  #resultScreen .big-center-btn{
    grid-column:2!important;
    grid-row:3!important;
    width:100%!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    margin:0!important;
    padding:0 14px!important;
    border-radius:13px!important;
    font-size:12px!important;
  }
}

@media (orientation:landscape) and (max-width:760px) and (max-height:480px){
  #resultScreen .result-shell{
    padding:7px!important;
    grid-template-columns:minmax(0,1fr) clamp(178px,31vw,220px)!important;
    grid-template-rows:auto minmax(0,1fr) 40px!important;
    column-gap:7px!important;
    row-gap:6px!important;
  }
  #resultScreen .result-header{
    grid-template-columns:minmax(0,1fr) 104px!important;
  }
  #resultScreen .result-header .eyebrow{font-size:6.5px!important}
  #resultScreen .result-header h2{font-size:22px!important}
  #resultScreen .result-subtext{font-size:7.5px!important;margin-top:2px!important}
  #resultScreen .score-badge{
    width:104px!important;
    min-width:104px!important;
    padding:6px 8px!important;
  }
  #resultScreen .score-badge span{font-size:6px!important}
  #resultScreen .score-badge strong{font-size:20px!important}
  #resultScreen .result-grid{gap:5px!important}
  #resultScreen .result-stat{padding:6px 8px!important}
  #resultScreen .result-stat span{font-size:6px!important}
  #resultScreen .result-stat strong{font-size:11px!important}
  #resultScreen #actualText{font-size:10.5px!important}
  #resultScreen .big-center-btn{height:40px!important;min-height:40px!important;font-size:11px!important}
}


/* =========================================================
   RC1.56 — SOLO / DAILY FINAL SCREEN ONE-PAGE MOBILE LAYOUT
   Portrait: compact vertical completion card with flexible Round 5 map.
   Landscape phones/tablets: summary on the left, Round 5 map on the right.
   Desktop remains unchanged.
   ========================================================= */
@media (max-width:600px) and (orientation:portrait){
  #finalScreen{
    height:100dvh!important;
    min-height:100dvh!important;
    padding:calc(6px + var(--tt-safe-top)) 6px calc(6px + var(--tt-safe-bottom))!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    overflow:hidden!important;
  }
  #finalScreen .final-card{
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    min-height:0!important;
    margin:0!important;
    padding:10px!important;
    border-radius:20px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto auto auto auto auto minmax(130px,1fr) auto!important;
    align-content:stretch!important;
    gap:4px!important;
    overflow:hidden!important;
  }
  #finalScreen .trophy{
    width:48px!important;
    height:48px!important;
    margin:0 auto 1px!important;
    border-radius:15px!important;
    font-size:24px!important;
  }
  #finalScreen .eyebrow{
    font-size:7px!important;
    line-height:1.1!important;
    letter-spacing:.14em!important;
  }
  #finalScreen .final-card>h2{
    margin:1px 0 0!important;
    font-size:23px!important;
    line-height:1.02!important;
    letter-spacing:-.035em!important;
  }
  #finalScreen .final-score{
    margin:2px 0 0!important;
    font-size:46px!important;
    line-height:.95!important;
  }
  #finalScreen .final-score small{
    font-size:13px!important;
  }
  #finalScreen #finalMessage{
    margin:1px auto 0!important;
    max-width:96%!important;
    font-size:10px!important;
    line-height:1.25!important;
  }
  #finalScreen .final-record-text{
    min-height:0!important;
    margin:1px 0 0!important;
    font-size:8px!important;
    line-height:1.15!important;
    letter-spacing:.08em!important;
  }
  #finalScreen .menu-stats.compact{
    margin:3px 0 0!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
  }
  #finalScreen .menu-stats.compact>div{
    min-width:0!important;
    padding:6px 4px!important;
    border-radius:12px!important;
  }
  #finalScreen .menu-stats.compact strong{
    font-size:13px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #finalScreen .menu-stats.compact span{
    margin-top:2px!important;
    font-size:6.5px!important;
    line-height:1.1!important;
  }
  #finalScreen .solo-final-round5-card{
    min-height:0!important;
    height:auto!important;
    margin:3px 0 0!important;
    padding:7px!important;
    border-radius:14px!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    gap:5px!important;
    overflow:hidden!important;
  }
  #finalScreen .solo-final-round5-head{
    margin:0!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)!important;
    align-items:center!important;
    gap:7px!important;
  }
  #finalScreen .solo-final-round5-head>div{
    gap:1px!important;
    min-width:0!important;
  }
  #finalScreen .solo-final-round5-head strong{
    font-size:9px!important;
    line-height:1.05!important;
  }
  #finalScreen .solo-final-round5-location{
    max-width:none!important;
    min-width:0!important;
    font-size:7.5px!important;
    line-height:1.12!important;
    text-align:right!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #finalScreen .solo-final-round5-map{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    border-radius:11px!important;
  }
  #finalScreen .final-actions{
    margin:3px 0 0!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
  }
  #finalScreen .final-actions .btn{
    width:100%!important;
    min-height:40px!important;
    height:40px!important;
    padding:6px 8px!important;
    border-radius:12px!important;
    font-size:11px!important;
  }
}

@media (max-width:600px) and (orientation:portrait) and (max-height:700px){
  #finalScreen .final-card{
    padding:7px!important;
    gap:2px!important;
    grid-template-rows:auto auto auto auto auto auto auto minmax(105px,1fr) auto!important;
  }
  #finalScreen .trophy{width:40px!important;height:40px!important;font-size:20px!important}
  #finalScreen .final-card>h2{font-size:20px!important}
  #finalScreen .final-score{font-size:39px!important}
  #finalScreen #finalMessage{font-size:8.5px!important}
  #finalScreen .menu-stats.compact>div{padding:5px 3px!important}
  #finalScreen .solo-final-round5-card{padding:5px!important}
  #finalScreen .final-actions .btn{height:36px!important;min-height:36px!important}
}

@media (orientation:landscape) and (max-width:1100px) and (max-height:600px){
  #finalScreen{
    height:100dvh!important;
    min-height:100dvh!important;
    padding:calc(5px + var(--tt-safe-top)) calc(7px + var(--tt-safe-right)) calc(5px + var(--tt-safe-bottom)) calc(7px + var(--tt-safe-left))!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    overflow:hidden!important;
  }
  #finalScreen .final-card{
    width:100%!important;
    max-width:none!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:9px 10px!important;
    border-radius:18px!important;
    display:grid!important;
    grid-template-columns:minmax(220px,.78fr) minmax(0,1.22fr)!important;
    grid-template-rows:auto auto auto auto auto auto minmax(0,1fr) auto!important;
    column-gap:12px!important;
    row-gap:3px!important;
    text-align:left!important;
    overflow:hidden!important;
  }
  #finalScreen .trophy{
    grid-column:1!important;
    grid-row:1!important;
    width:40px!important;
    height:40px!important;
    margin:0!important;
    border-radius:13px!important;
    font-size:20px!important;
  }
  #finalScreen .final-card>.eyebrow{
    grid-column:1!important;
    grid-row:2!important;
    align-self:end!important;
    font-size:7px!important;
  }
  #finalScreen .final-card>h2{
    grid-column:1!important;
    grid-row:3!important;
    margin:0!important;
    font-size:22px!important;
    line-height:1!important;
  }
  #finalScreen .final-score{
    grid-column:1!important;
    grid-row:4!important;
    margin:2px 0 0!important;
    font-size:42px!important;
    line-height:.95!important;
  }
  #finalScreen .final-score small{font-size:12px!important}
  #finalScreen #finalMessage{
    grid-column:1!important;
    grid-row:5!important;
    margin:1px 0 0!important;
    font-size:8.5px!important;
    line-height:1.2!important;
  }
  #finalScreen .final-record-text{
    grid-column:1!important;
    grid-row:6!important;
    min-height:0!important;
    margin:0!important;
    font-size:7px!important;
    line-height:1.1!important;
  }
  #finalScreen .menu-stats.compact{
    grid-column:1!important;
    grid-row:7!important;
    align-self:end!important;
    margin:3px 0 0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:4px!important;
  }
  #finalScreen .menu-stats.compact>div{
    padding:5px 7px!important;
    border-radius:10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
  }
  #finalScreen .menu-stats.compact strong{font-size:11px!important}
  #finalScreen .menu-stats.compact span{margin:0!important;font-size:6.5px!important}
  #finalScreen .solo-final-round5-card{
    grid-column:2!important;
    grid-row:1 / 8!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:7px!important;
    border-radius:14px!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    gap:5px!important;
    overflow:hidden!important;
  }
  #finalScreen .solo-final-round5-head{
    margin:0!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:center!important;
    gap:8px!important;
  }
  #finalScreen .solo-final-round5-head strong{font-size:9px!important}
  #finalScreen .solo-final-round5-location{
    max-width:none!important;
    min-width:0!important;
    font-size:7.5px!important;
    text-align:right!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #finalScreen .solo-final-round5-map{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    border-radius:10px!important;
  }
  #finalScreen .final-actions{
    grid-column:1 / 3!important;
    grid-row:8!important;
    margin:4px 0 0!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
  }
  #finalScreen .final-actions .btn{
    width:100%!important;
    min-height:36px!important;
    height:36px!important;
    padding:5px 9px!important;
    border-radius:11px!important;
    font-size:10px!important;
  }
}

@media (orientation:landscape) and (max-width:900px) and (max-height:480px){
  #finalScreen .final-card{padding:6px 8px!important;column-gap:9px!important;row-gap:1px!important}
  #finalScreen .trophy{width:34px!important;height:34px!important;font-size:17px!important}
  #finalScreen .final-card>h2{font-size:19px!important}
  #finalScreen .final-score{font-size:35px!important}
  #finalScreen #finalMessage{font-size:7.5px!important}
  #finalScreen .menu-stats.compact{gap:2px!important}
  #finalScreen .menu-stats.compact>div{padding:4px 6px!important}
  #finalScreen .final-actions .btn{height:32px!important;min-height:32px!important}
}


/* =========================================================
   RC1.58 — MATCH FOUND SINGLE LEAVE GAME CONTROL
   The unified Match Found state intentionally retains
   duel-search-template-mode for the shared arena layout. Older search
   rules force #duelCancelBtn visible with higher specificity than .hidden,
   causing two Leave Game buttons. In matched state, keep only #duelLeaveBtn.
   Applies to desktop, portrait, and landscape.
   ========================================================= */
#duelScreen.duel-search-template-mode.duel-match-found-unified-mode #duelCancelBtn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#duelScreen.duel-search-template-mode.duel-match-found-unified-mode #duelCancelBtn::before,
#duelScreen.duel-search-template-mode.duel-match-found-unified-mode #duelCancelBtn::after {
  display: none !important;
  content: none !important;
}


/* =========================================================
   RC1.59 — MOBILE GOOGLE MAP PINCH-ZOOM RENDER HARDENING
   Vector Google Maps uses its own WebGL/compositor layers. On mobile the
   old nested translateZ/contain:paint hardening can blank that surface after
   aggressive pinch zooming. Remove those compositor constraints only while
   the full-screen mobile guess map is open. Desktop remains unchanged.
   ========================================================= */
@media (max-width: 820px), (orientation: landscape) and (max-height: 560px) and (max-width: 1180px) {
  #mapModal:not(.hidden) .large-map,
  #mapModal:not(.hidden) .large-map > #map,
  #mapModal:not(.hidden) .large-map > #map > div,
  #mapModal:not(.hidden) .large-map > #map .gm-style {
    transform: none !important;
    contain: none !important;
    backface-visibility: visible !important;
    isolation: auto !important;
    filter: none !important;
  }
  #mapModal:not(.hidden) .large-map,
  #mapModal:not(.hidden) .large-map > #map {
    will-change: auto !important;
  }
}
\n\n/* TommyTrace Coin Shop — Stripe web checkout */\n.shop-wallet-actions{display:flex;align-items:center;gap:10px}.shop-wallet-button{cursor:pointer;color:inherit;font:inherit}.shop-wallet-button em{font-style:normal;font-size:9px;font-weight:950;letter-spacing:.12em;color:#ffd76b;padding-left:4px}.shop-wallet-button:hover{border-color:rgba(255,213,107,.6);box-shadow:0 0 0 1px rgba(255,213,107,.12),0 12px 28px rgba(0,0,0,.22)}\n.coin-shop-card{width:min(980px,94vw);max-height:min(850px,92vh);overflow:auto;padding:28px;background:radial-gradient(circle at 50% 0%,rgba(255,197,68,.12),transparent 36%),linear-gradient(155deg,rgba(10,25,41,.98),rgba(3,11,20,.99))}.coin-shop-head{display:flex;justify-content:space-between;gap:22px;align-items:flex-start;padding-right:45px}.coin-shop-head h2{margin:5px 0 8px}.coin-shop-balance{min-width:138px;padding:12px 15px;border:1px solid rgba(255,212,92,.24);border-radius:18px;background:rgba(7,18,30,.82);display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 8px}.coin-shop-balance span{grid-column:1/-1;font-size:9px;letter-spacing:.14em;font-weight:900;color:#8299ab}.coin-shop-balance strong{font-size:23px;color:#fff3b0}.coin-shop-balance small{font-size:18px}.coin-shop-test-badge{display:inline-flex;margin:18px 0 14px;padding:6px 10px;border-radius:999px;border:1px solid rgba(91,222,255,.3);background:rgba(64,198,255,.09);color:#8deaff;font-size:9px;font-weight:950;letter-spacing:.15em}.coin-pack-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.coin-pack-card{position:relative;min-height:200px;border:1px solid rgba(255,255,255,.1);border-radius:21px;padding:20px 12px 16px;background:linear-gradient(160deg,rgba(21,43,62,.98),rgba(6,17,28,.98));color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;transition:.2s ease;overflow:hidden}.coin-pack-card:hover{transform:translateY(-5px);border-color:rgba(255,218,111,.55);box-shadow:0 20px 38px rgba(0,0,0,.3),0 0 26px rgba(255,184,54,.09)}.coin-pack-card:disabled{opacity:.55;cursor:wait;transform:none}.coin-pack-card.featured{border-color:rgba(255,213,91,.45);background:radial-gradient(circle at 50% 28%,rgba(255,196,67,.16),transparent 45%),linear-gradient(160deg,rgba(28,48,61,.98),rgba(8,18,29,.98))}.coin-pack-card.champion{border-color:rgba(255,185,50,.55);box-shadow:inset 0 0 35px rgba(255,163,24,.07)}.coin-pack-icon{font-size:34px;filter:drop-shadow(0 0 12px rgba(255,190,45,.24))}.coin-pack-card strong{font-size:25px;line-height:1.1}.coin-pack-card small{font-size:10px;color:#93a9ba;font-weight:850;text-align:center;min-height:24px}.coin-pack-card em{font-style:normal;margin-top:9px;padding:8px 13px;border-radius:999px;background:linear-gradient(135deg,#ffe275,#f6a51f);color:#563600;font-size:12px;font-weight:950}.coin-pack-ribbon{position:absolute;top:10px;right:10px;padding:4px 7px;border-radius:999px;background:rgba(255,213,91,.12);border:1px solid rgba(255,213,91,.28);color:#ffd96b;font-size:8px;font-weight:950;letter-spacing:.1em}.coin-shop-security{margin-top:16px;padding:13px 15px;border:1px solid rgba(101,205,229,.13);border-radius:16px;background:rgba(255,255,255,.025);display:flex;gap:11px;align-items:flex-start}.coin-shop-security>span{font-size:18px}.coin-shop-security strong,.coin-shop-security small{display:block}.coin-shop-security strong{font-size:11px;letter-spacing:.05em}.coin-shop-security small{margin-top:3px;color:#8197a9;line-height:1.4}.v12-wallet{cursor:pointer}.v12-wallet:focus-visible,.shop-wallet-button:focus-visible,.coin-pack-card:focus-visible{outline:2px solid #78e9ff;outline-offset:3px}@media(max-width:900px){.coin-pack-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.coin-pack-card.champion{grid-column:1/-1}.coin-shop-head{align-items:center}}@media(max-width:560px){.coin-shop-card{padding:20px 14px}.coin-shop-head{display:block;padding-right:32px}.coin-shop-balance{margin-top:12px;width:max-content}.coin-pack-grid{grid-template-columns:1fr 1fr;gap:9px}.coin-pack-card{min-height:166px;padding:17px 8px 13px}.coin-pack-card strong{font-size:21px}.coin-pack-card em{font-size:11px}.coin-pack-card.champion{grid-column:1/-1;min-height:155px}.coin-shop-security{font-size:11px}}\n
.profile-history-row--purchase{border-color:rgba(255,209,91,.22)!important;background:linear-gradient(90deg,rgba(255,194,59,.07),rgba(255,255,255,.025))!important}.profile-history-row--purchase b{color:#ffd76b!important}

.coin-shop-recover-btn{display:block;margin:12px auto 0;padding:9px 14px;border:1px solid rgba(109,218,255,.22);border-radius:999px;background:rgba(70,185,228,.07);color:#8deaff;font:inherit;font-size:10px;font-weight:900;letter-spacing:.06em;cursor:pointer;transition:.18s ease}.coin-shop-recover-btn:hover{border-color:rgba(109,218,255,.5);background:rgba(70,185,228,.12);transform:translateY(-1px)}.coin-shop-recover-btn:disabled{opacity:.55;cursor:wait;transform:none}

#coinShopModal .coin-shop-card{
  background-image:
    linear-gradient(180deg, rgba(3,10,20,.70) 0%, rgba(4,13,25,.79) 44%, rgba(2,9,18,.91) 100%),
    radial-gradient(circle at 50% 20%, rgba(79,116,255,.12), transparent 43%),
    url('assets/backgrounds/avatar-store.webp') !important;
  background-size:cover !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
  border-color:rgba(100,184,255,.30) !important;
  box-shadow:0 34px 110px rgba(0,0,0,.64), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
#coinShopModal .coin-shop-head,
#coinShopModal .coin-shop-test-badge,
#coinShopModal .coin-pack-grid,
#coinShopModal .coin-shop-security,
#coinShopModal .coin-shop-recover-btn,
#coinShopModal .account-status,
#coinShopModal .result-subtext,
#coinShopModal .coin-shop-footnote{
  position:relative;
  z-index:1;
}
#coinShopModal .coin-shop-head h2,
#coinShopModal .coin-shop-head .eyebrow,
#coinShopModal .coin-shop-head .result-subtext,
#coinShopModal .coin-shop-balance{
  text-shadow:0 3px 12px rgba(0,0,0,.76);
}
#coinShopModal .coin-shop-balance,
#coinShopModal .coin-shop-security,
#coinShopModal .coin-shop-recover-btn,
#coinShopModal .coin-pack-card{
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
#coinShopModal .coin-pack-card{
  background:linear-gradient(160deg,rgba(14,34,53,.82),rgba(5,15,25,.86));
}
#coinShopModal .coin-pack-card.featured{
  background:radial-gradient(circle at 50% 28%,rgba(255,196,67,.16),transparent 45%),linear-gradient(160deg,rgba(28,48,61,.86),rgba(8,18,29,.88));
}
#coinShopModal .coin-shop-security{
  background:rgba(4,14,26,.68) !important;
}


/* Embedded Stripe Checkout — stays inside TommyTrace */
.stripe-checkout-modal{z-index:24000!important;background:rgba(0,7,14,.72)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.stripe-checkout-card{width:min(560px,94vw);max-height:90vh;overflow:auto;padding:22px 22px 24px;border:1px solid rgba(100,184,255,.28)!important;background-image:linear-gradient(180deg,rgba(3,10,20,.80),rgba(3,11,21,.92)),url('assets/backgrounds/avatar-store.webp')!important;background-size:cover!important;background-position:center top!important;box-shadow:0 36px 110px rgba(0,0,0,.68),inset 0 1px rgba(255,255,255,.06)!important}
.stripe-checkout-header{padding-right:42px;margin-bottom:12px}.stripe-checkout-header h2{margin:4px 0 7px;font-size:clamp(24px,4vw,34px)}.stripe-checkout-header .result-subtext{margin:0;max-width:460px}.stripe-embedded-checkout{min-height:420px;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.28)}#stripeCheckoutStatus{margin-top:12px;text-align:center}.stripe-checkout-card .modal-close{z-index:3}@media(max-width:600px){.stripe-checkout-card{width:96vw;padding:16px 12px 18px;max-height:94vh}.stripe-embedded-checkout{min-height:500px}.stripe-checkout-header{padding:0 38px 0 4px}}

/* Coin Shop close control — keep the full X hit box cleanly inside the rounded panel. */
#coinShopModal .coin-shop-card{
  padding-top:30px !important;
}
#coinShopModal #closeCoinShopBtn{
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  left:auto !important;
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  border-radius:15px !important;
  border:1px solid rgba(170,205,235,.22) !important;
  background:rgba(12,24,38,.88) !important;
  color:#f3f7fb !important;
  box-shadow:0 8px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
  z-index:50 !important;
  overflow:hidden !important;
}
#coinShopModal #closeCoinShopBtn:hover{
  background:rgba(23,40,58,.96) !important;
  border-color:rgba(190,220,245,.36) !important;
  transform:none !important;
}
#coinShopModal #closeCoinShopBtn:focus-visible{
  outline:2px solid #8deaff !important;
  outline-offset:2px !important;
}
#coinShopModal .coin-shop-head{
  padding-right:62px !important;
}
@media(max-width:560px){
  #coinShopModal #closeCoinShopBtn{
    top:10px !important;
    right:10px !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
  }
  #coinShopModal .coin-shop-head{padding-right:54px !important;}
}

/* =========================================================
   V23.60 — ADMIN PAYMENTS + COIN PURCHASE TERMS
   ========================================================= */
.admin-payment-toolbar{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px;
  padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:13px;
  background:rgba(3,12,23,.46)
}
.admin-payment-toolbar label{font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:rgba(220,238,248,.62)}
.admin-payment-toolbar select{
  min-height:36px;padding:7px 34px 7px 10px;border-radius:10px;border:1px solid rgba(104,200,255,.18);
  background:rgba(5,18,31,.9);color:#ecf8ff;font:inherit;font-size:11px;font-weight:800
}
.admin-payment-mode{
  margin-left:auto;padding:5px 8px;border-radius:999px;border:1px solid rgba(91,222,255,.24);
  background:rgba(64,198,255,.08);color:#8deaff;font-size:8px;font-weight:950;letter-spacing:.12em
}
.admin-payment-list{display:grid;gap:8px;max-height:520px;overflow:auto;padding-right:2px}
.admin-payment-row{
  display:grid;gap:7px;padding:12px 13px;border-radius:13px;border:1px solid rgba(255,255,255,.075);
  background:linear-gradient(145deg,rgba(7,22,37,.74),rgba(3,11,20,.62))
}
.admin-payment-row-main{display:flex;align-items:center;justify-content:space-between;gap:12px}
.admin-payment-who{display:grid;gap:2px;min-width:0}
.admin-payment-who strong{font-size:12px;color:#f2fbff}
.admin-payment-who span{font-size:10px;color:rgba(215,235,246,.5);overflow-wrap:anywhere}
.admin-payment-badge{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:4px 8px;border-radius:999px;
  font-size:8px;font-weight:950;letter-spacing:.08em;border:1px solid rgba(255,255,255,.12)
}
.admin-payment-badge.success{color:#8ff0c5;background:rgba(40,190,124,.12);border-color:rgba(85,227,157,.24)}
.admin-payment-badge.rejected,.admin-payment-badge.failed,.admin-payment-badge.checkout_error{color:#ffacb4;background:rgba(207,48,62,.13);border-color:rgba(255,118,118,.25)}
.admin-payment-badge.pending,.admin-payment-badge.processing,.admin-payment-badge.creating{color:#ffe09b;background:rgba(232,171,50,.11);border-color:rgba(255,207,93,.23)}
.admin-payment-badge.expired{color:#b9c5cf;background:rgba(135,150,164,.11);border-color:rgba(173,188,200,.18)}
.admin-payment-detail-grid{display:grid;grid-template-columns:minmax(0,1.6fr) .65fr .9fr;gap:10px;align-items:center}
.admin-payment-detail-grid span{font-size:10px;color:rgba(218,237,248,.62)}
.admin-payment-detail-grid b{color:#dff5ff;font-weight:850}
.admin-payment-refs{font-size:9px!important;color:rgba(199,221,234,.42)!important;overflow-wrap:anywhere}
.admin-payment-failure{
  padding:7px 9px;border-radius:9px;background:rgba(174,34,49,.09);border:1px solid rgba(255,94,110,.13);
  color:#ffb4bc;font-size:10px;line-height:1.4;overflow-wrap:anywhere
}
@media(max-width:760px){
  .admin-payment-mode{margin-left:0}
  .admin-payment-detail-grid{grid-template-columns:1fr 1fr}
  .admin-payment-detail-grid span:first-child{grid-column:1/-1}
}

.coin-shop-terms-consent{
  display:flex;align-items:flex-start;gap:10px;margin:0 0 14px;padding:11px 13px;border-radius:14px;
  border:1px solid rgba(255,214,105,.17);background:rgba(6,18,31,.60);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:rgba(225,240,249,.75);font-size:10px;line-height:1.45;transition:.18s ease
}
.coin-shop-terms-consent input{width:16px;height:16px;margin-top:1px;accent-color:#ffc94f;flex:0 0 auto;cursor:pointer}
.coin-shop-terms-consent.needs-attention{border-color:rgba(255,104,104,.6);box-shadow:0 0 0 3px rgba(255,89,89,.08);animation:coinTermsShake .26s ease 2}
@keyframes coinTermsShake{0%,100%{transform:translateX(0)}35%{transform:translateX(-4px)}70%{transform:translateX(4px)}}
.coin-shop-terms-link{
  border:0;padding:0;background:none;color:#8deaff;font:inherit;font-weight:900;text-decoration:underline;text-underline-offset:2px;cursor:pointer
}
.coin-pack-card.terms-locked,.coin-pack-card:disabled.terms-locked{
  opacity:.48!important;cursor:not-allowed!important;filter:saturate(.55);transform:none!important
}
.coin-pack-card.terms-locked:hover{border-color:rgba(255,255,255,.1);box-shadow:none}

.coin-terms-card{
  width:min(760px,94vw);max-height:min(86vh,820px);padding:26px;overflow:hidden;display:flex;flex-direction:column;
  background:radial-gradient(circle at 25% 0%,rgba(59,164,233,.12),transparent 34%),linear-gradient(155deg,rgba(8,24,38,.985),rgba(3,11,19,.99))!important
}
.coin-terms-card h2{margin:5px 0 6px}
.coin-terms-scroll{
  margin-top:14px;padding:16px 17px;overflow:auto;border-radius:16px;border:1px solid rgba(255,255,255,.08);
  background:rgba(2,10,19,.46);color:rgba(225,239,247,.74);line-height:1.6
}
.coin-terms-scroll h3{margin:13px 0 4px;color:#eefaff;font-size:12px}
.coin-terms-scroll h3:first-child{margin-top:0}
.coin-terms-scroll p{margin:0;font-size:11px}
.coin-terms-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:14px}
.coin-terms-actions .btn{min-height:38px;padding:9px 13px}
@media(max-width:560px){.coin-terms-card{padding:20px 14px}.coin-terms-actions{display:grid;grid-template-columns:1fr 1fr}.coin-terms-actions .btn{text-align:center}}
#adminPaymentMetrics{grid-template-columns:repeat(6,minmax(0,1fr))}
#adminPaymentMetrics .admin-live-metric strong{font-size:18px;overflow-wrap:anywhere}
@media(max-width:980px){#adminPaymentMetrics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){#adminPaymentMetrics{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* =========================================================
   TOMMYTRACE — CANONICAL T COIN SYSTEM
   One currency mark across Web + Android (shared source).
   Also fixes portrait Avatar Store wallet overlap.
   ========================================================= */
.tt-coin-symbol{
  --tt-coin-size:18px;
  position:relative;
  display:inline-grid!important;
  place-items:center!important;
  width:var(--tt-coin-size)!important;
  min-width:var(--tt-coin-size)!important;
  height:var(--tt-coin-size)!important;
  min-height:var(--tt-coin-size)!important;
  flex:0 0 var(--tt-coin-size)!important;
  padding:0!important;
  margin:0!important;
  border-radius:50%!important;
  border:1px solid rgba(255,235,151,.76)!important;
  background:
    radial-gradient(circle at 35% 28%,rgba(255,255,219,.86) 0 8%,transparent 9%),
    radial-gradient(circle at 42% 38%,#ffe987 0 18%,#ffc83c 42%,#e99b0f 72%,#9c5b04 100%)!important;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.66),
    inset 0 -2px 3px rgba(121,62,0,.30),
    0 0 10px rgba(255,188,41,.25)!important;
  color:transparent!important;
  font-size:0!important;
  line-height:1!important;
  text-shadow:none!important;
  vertical-align:-.18em;
  overflow:hidden!important;
}
.tt-coin-symbol::before{
  content:'T';
  position:absolute;
  inset:14%;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(130,71,0,.30);
  color:#8b5204;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:calc(var(--tt-coin-size) * .44);
  line-height:1;
  font-weight:1000;
  letter-spacing:-.04em;
  text-shadow:0 1px 0 rgba(255,245,185,.52);
  box-sizing:border-box;
}
.tt-coin-symbol--top{--tt-coin-size:29px}
.tt-coin-symbol--wallet{--tt-coin-size:21px}
.tt-coin-symbol--balance{--tt-coin-size:20px}
.tt-coin-symbol--inline{--tt-coin-size:15px}
.tt-coin-symbol--reward{--tt-coin-size:22px}
.tt-coin-symbol--pack{--tt-coin-size:38px}

/* Main menu currency chip: same T coin on desktop, landscape and portrait. */
#menuScreen .v12-wallet .coin-orb.tt-coin-symbol{
  display:inline-grid!important;
  place-items:center!important;
  overflow:hidden!important;
  color:transparent!important;
}
@media (max-width:600px) and (orientation:portrait){
  #menuScreen .v12-wallet .coin-orb.tt-coin-symbol{
    --tt-coin-size:23px;
    width:23px!important;
    min-width:23px!important;
    height:23px!important;
    min-height:23px!important;
    flex-basis:23px!important;
  }
  #menuScreen .v12-wallet .coin-orb.tt-coin-symbol::before{
    inset:14%;
    font-size:10px;
  }
}

/* Avatar Store wallet: icon is part of layout, never absolutely over the balance. */
#shopModal .shop-wallet-button::before{content:none!important;display:none!important}
#shopModal .shop-wallet-button{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  grid-template-areas:
    "label label"
    "coin value"
    "buy buy"!important;
  align-items:center!important;
  justify-items:start!important;
  column-gap:7px!important;
  row-gap:3px!important;
  min-width:118px!important;
  padding:10px 12px!important;
  overflow:visible!important;
}
#shopModal .shop-wallet-button .shop-wallet-label{
  grid-area:label!important;
  margin:0!important;
  line-height:1!important;
}
#shopModal .shop-wallet-button .tt-coin-symbol--wallet{grid-area:coin!important}
#shopModal .shop-wallet-button #shopCoins{
  grid-area:value!important;
  display:block!important;
  min-width:0!important;
  margin:0!important;
  font-size:20px!important;
  line-height:1!important;
  white-space:nowrap!important;
  color:#ffe47e!important;
}
#shopModal .shop-wallet-button em{
  grid-area:buy!important;
  justify-self:center!important;
  padding:2px 0 0!important;
  margin:0!important;
  line-height:1!important;
}

/* Coin Shop + profile + reward displays use the same symbol. */
.coin-shop-balance .tt-coin-symbol--balance{align-self:center!important}
.coin-pack-icon.tt-coin-symbol{
  display:inline-grid!important;
  margin-bottom:4px!important;
  filter:drop-shadow(0 0 12px rgba(255,190,45,.24));
}
.profile-coins-value,
.reward-coin-value{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
}
.profile-coins-value b{font:inherit;color:inherit}
.profile-history-row b .tt-coin-symbol--inline,
.avatar-store-price .tt-coin-symbol--inline,
.avatar-store-card .btn .tt-coin-symbol--inline{
  margin-left:2px!important;
}

/* Portrait fix from the supplied screenshot. Keep the wallet compact but readable. */
@media (max-width:600px) and (orientation:portrait){
  #shopModal .shop-header{
    align-items:flex-start!important;
  }
  #shopModal .shop-wallet-button{
    width:auto!important;
    min-width:106px!important;
    max-width:126px!important;
    padding:8px 10px!important;
    grid-template-columns:20px minmax(54px,1fr)!important;
    column-gap:6px!important;
    row-gap:3px!important;
  }
  #shopModal .shop-wallet-button #shopCoins{
    font-size:17px!important;
    letter-spacing:0!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  #shopModal .shop-wallet-button .tt-coin-symbol--wallet{
    --tt-coin-size:20px;
  }
}

/* Admin-only Stripe sandbox guard. Public players can see the catalog but cannot invoke test checkout. */
.coin-pack-card.admin-sandbox-locked{opacity:.58;filter:saturate(.72);cursor:not-allowed!important;transform:none!important}
.coin-pack-card.admin-sandbox-locked:hover{transform:none!important;box-shadow:none!important}
#coinShopTestBadge[hidden],#recoverCoinPurchaseBtn[hidden]{display:none!important}

/* TommyTrace Stripe LIVE + admin-only sandbox selector */
.coin-shop-admin-mode{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 10px;padding:10px 12px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.025)}
.coin-shop-admin-mode[hidden]{display:none!important}.coin-shop-admin-mode>span{font-size:9px;font-weight:950;letter-spacing:.14em;color:#8ea5b8}.coin-shop-admin-mode-buttons{display:flex;gap:6px;padding:3px;border-radius:999px;background:rgba(1,8,14,.55);border:1px solid rgba(255,255,255,.08)}
.coin-shop-admin-mode-buttons button{border:0;border-radius:999px;padding:7px 11px;background:transparent;color:#8ca5b9;font:inherit;font-size:9px;font-weight:950;letter-spacing:.1em;cursor:pointer;transition:.18s ease}
.coin-shop-admin-mode-buttons button:hover{color:#fff}.coin-shop-admin-mode-buttons button.active[data-stripe-mode="live"]{background:rgba(80,222,160,.14);color:#9ff2c5;box-shadow:inset 0 0 0 1px rgba(80,222,160,.28)}
.coin-shop-admin-mode-buttons button.active[data-stripe-mode="sandbox"]{background:rgba(64,198,255,.13);color:#8deaff;box-shadow:inset 0 0 0 1px rgba(91,222,255,.28)}
@media(max-width:560px){.coin-shop-admin-mode{align-items:flex-start;flex-direction:column}.coin-shop-admin-mode-buttons{width:100%}.coin-shop-admin-mode-buttons button{flex:1}}

/* TommyTrace Solo reconnect + safe Vercel update prompt */
.tt-solo-resume-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  width:min(100%,980px);
  margin:12px auto 2px;
  padding:14px 16px;
  border:1px solid rgba(111,235,214,.28);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(8,26,42,.9),rgba(16,45,62,.72));
  box-shadow:0 18px 45px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(16px);
}
.tt-solo-resume-card.hidden{display:none!important}
.tt-solo-resume-icon{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(116,244,212,.38);background:rgba(45,230,193,.12);
  font-size:25px;font-weight:900;color:#87f6dd;box-shadow:0 0 24px rgba(66,231,199,.14)
}
.tt-solo-resume-copy{display:flex;min-width:0;flex-direction:column;gap:2px}
.tt-solo-resume-copy small{font-size:10px;letter-spacing:.14em;font-weight:900;color:#78e8d5}
.tt-solo-resume-copy strong{font-size:16px;line-height:1.15;color:#fff}
.tt-solo-resume-copy span{font-size:12px;color:rgba(232,244,251,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt-solo-resume-actions{display:flex;gap:8px;align-items:center}
.tt-solo-resume-actions .btn{min-width:88px;padding:9px 14px}

.connection-recovery-overlay{
  position:fixed;z-index:10080;left:50%;top:max(16px,env(safe-area-inset-top));transform:translateX(-50%);
  width:min(calc(100vw - 28px),560px);pointer-events:none;
}
.connection-recovery-overlay.hidden{display:none!important}
.connection-recovery-card{
  display:flex;align-items:center;gap:13px;padding:13px 16px;border-radius:16px;
  border:1px solid rgba(255,191,76,.35);background:rgba(15,22,32,.94);backdrop-filter:blur(18px);
  box-shadow:0 16px 50px rgba(0,0,0,.38)
}
.connection-recovery-card>div:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.connection-recovery-card strong{font-size:13px;color:#fff}
.connection-recovery-card span{font-size:11px;line-height:1.35;color:rgba(235,242,248,.72)}
.connection-recovery-pulse{display:flex;align-items:center;gap:3px;min-width:29px}
.connection-recovery-pulse i{width:6px;height:6px;border-radius:50%;background:#ffbd52;animation:ttReconnectPulse 1.05s infinite ease-in-out}
.connection-recovery-pulse i:nth-child(2){animation-delay:.14s}.connection-recovery-pulse i:nth-child(3){animation-delay:.28s}
.connection-recovery-overlay.is-restored .connection-recovery-card{border-color:rgba(95,244,196,.35)}
.connection-recovery-overlay.is-restored .connection-recovery-pulse i{background:#63efc2}
@keyframes ttReconnectPulse{0%,70%,100%{opacity:.35;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}

.version-update-card{max-width:520px;text-align:center}
.version-update-icon{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 10px;border-radius:50%;font-size:32px;font-weight:900;color:#72f2d1;background:rgba(80,232,202,.11);border:1px solid rgba(114,242,209,.3);box-shadow:0 0 34px rgba(73,227,200,.12)}
.version-update-card p{max-width:430px;margin:10px auto;color:rgba(236,245,250,.72);line-height:1.5}
.version-update-build{display:inline-flex;gap:6px;align-items:center;margin:7px auto 16px;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.06);font-size:11px;color:rgba(238,246,250,.65)}
.version-update-build strong{color:#fff}
.version-update-actions{display:flex;justify-content:center;gap:10px}
.version-update-actions .btn{min-width:125px}

@media (max-width:700px){
  .tt-solo-resume-card{grid-template-columns:auto minmax(0,1fr);gap:10px 12px;padding:12px 13px;margin:10px 0 0}
  .tt-solo-resume-icon{width:40px;height:40px;font-size:21px}
  .tt-solo-resume-copy strong{font-size:14px}
  .tt-solo-resume-copy span{font-size:10.5px}
  .tt-solo-resume-actions{grid-column:1/-1;width:100%}
  .tt-solo-resume-actions .btn{flex:1;min-width:0}
  .connection-recovery-overlay{top:max(10px,env(safe-area-inset-top));width:calc(100vw - 20px)}
  .connection-recovery-card{padding:11px 13px;border-radius:14px}
}


/* =========================================================
   Malaysia Day 2026 exclusive avatar claim
   ========================================================= */
.tt-malaysia-day-event-card{position:relative;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:14px;margin:12px 0 2px;padding:13px 15px;border-radius:20px;overflow:hidden;background:linear-gradient(115deg,rgba(4,24,62,.94),rgba(13,50,105,.9) 50%,rgba(77,14,25,.88));border:1px solid rgba(246,200,76,.52);box-shadow:0 18px 44px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08)}
.tt-malaysia-day-event-card::before{content:"";position:absolute;inset:-60%;background:conic-gradient(from 20deg,transparent 0 18%,rgba(47,115,255,.12) 22%,transparent 27% 48%,rgba(216,52,69,.10) 52%,transparent 57% 74%,rgba(246,200,76,.12) 78%,transparent 84%);animation:malaysiaDaySweep 14s linear infinite;pointer-events:none}
.tt-malaysia-day-event-card>*{position:relative;z-index:1}.tt-malaysia-day-flag{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:radial-gradient(circle at 32% 28%,#f6d55d 0 7%,transparent 8%),linear-gradient(145deg,#153f94,#0a245d 56%,#d63246 57% 100%);box-shadow:0 0 22px rgba(47,115,255,.35),0 0 14px rgba(246,200,76,.18);border:1px solid rgba(255,255,255,.14)}
.tt-malaysia-day-flag b{color:#ffe376;text-shadow:0 0 12px rgba(255,223,107,.8);font-size:22px}.tt-malaysia-day-card-portraits{display:flex;align-items:center;width:76px}.tt-malaysia-day-card-portraits img{width:47px;height:47px;border-radius:50%;object-fit:cover;object-position:center top;border:2px solid rgba(246,200,76,.8);background:#0c2f6b;box-shadow:0 5px 16px rgba(0,0,0,.26)}.tt-malaysia-day-card-portraits img+img{margin-left:-17px;border-color:rgba(216,52,69,.9)}
.tt-malaysia-day-card-copy{min-width:0;display:flex;flex-direction:column;gap:2px}.tt-malaysia-day-card-copy small{font-size:9px;font-weight:900;letter-spacing:.15em;color:#ffd962}.tt-malaysia-day-card-copy strong{font-size:14px;color:#fff}.tt-malaysia-day-card-copy span{font-size:11px;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tt-malaysia-day-event-card>.btn{min-width:86px}
@keyframes malaysiaDaySweep{to{transform:rotate(360deg)}}

.malaysia-day-modal{z-index:10080}.malaysia-day-card{position:relative;width:min(980px,94vw);max-height:min(92vh,900px);overflow:auto;padding:24px;background:radial-gradient(circle at 50% 0,rgba(47,115,255,.18),transparent 38%),radial-gradient(circle at 88% 22%,rgba(216,52,69,.13),transparent 30%),linear-gradient(160deg,rgba(4,20,52,.98),rgba(5,15,34,.985));border:1px solid rgba(246,200,76,.5);box-shadow:0 34px 90px rgba(0,0,0,.62),0 0 55px rgba(47,115,255,.12)}
.malaysia-day-card::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(90deg,transparent,rgba(246,200,76,.13),transparent) top/100% 1px no-repeat}.malaysia-day-head{text-align:center;padding:3px 42px 16px}.malaysia-day-kicker{font-size:10px;font-weight:950;letter-spacing:.2em;color:#f6cb59}.malaysia-day-head h2{margin:7px 0 4px;font-size:clamp(24px,3vw,40px);letter-spacing:-.025em}.malaysia-day-head p{margin:0;color:rgba(255,255,255,.72)}.malaysia-day-date{display:inline-flex;margin-top:10px;padding:6px 11px;border-radius:999px;background:rgba(216,52,69,.16);border:1px solid rgba(246,200,76,.28);font-size:10px;font-weight:900;letter-spacing:.12em;color:#ffe28a}
.malaysia-day-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.malaysia-day-choice{--md-primary:#2f73ff;--md-secondary:#f6c84c;--md-accent:#d83445;position:relative;display:flex;flex-direction:column;min-width:0;padding:13px;border-radius:24px;background:linear-gradient(160deg,rgba(12,41,91,.82),rgba(4,17,40,.94));border:1px solid color-mix(in srgb,var(--md-secondary) 42%,transparent);box-shadow:0 18px 46px rgba(0,0,0,.3);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.malaysia-day-suria{--md-primary:#2f73ff;--md-secondary:#d83445;--md-accent:#f6c84c}.malaysia-day-choice:hover{transform:translateY(-3px);border-color:rgba(246,200,76,.72);box-shadow:0 22px 55px rgba(0,0,0,.38),0 0 26px rgba(47,115,255,.16)}
.malaysia-day-choice-art{position:relative;height:min(46vh,420px);min-height:300px;border-radius:18px;overflow:hidden;background:radial-gradient(ellipse at 50% 78%,color-mix(in srgb,var(--md-primary) 30%,transparent),transparent 45%),linear-gradient(180deg,rgba(255,255,255,.025),rgba(0,0,0,.18));border:1px solid rgba(255,255,255,.07)}.malaysia-day-choice-art>img{position:absolute;z-index:3;left:50%;bottom:-1%;height:96%;max-width:96%;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 22px 24px rgba(0,0,0,.5))}.malaysia-day-aura{position:absolute;z-index:1;inset:0;pointer-events:none}.malaysia-day-aura::before{content:"";position:absolute;left:50%;bottom:5%;width:66%;aspect-ratio:1;border-radius:50%;transform:translateX(-50%) rotateX(68deg);background:radial-gradient(ellipse,rgba(255,255,255,.22),color-mix(in srgb,var(--md-primary) 52%,transparent) 28%,transparent 68%);border:2px solid color-mix(in srgb,var(--md-secondary) 70%,transparent);box-shadow:0 0 28px var(--md-primary),0 0 54px color-mix(in srgb,var(--md-secondary) 30%,transparent);animation:mdPulse 2.6s ease-in-out infinite}.malaysia-day-aura::after{content:"";position:absolute;inset:10% 12% 5%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 12%,var(--md-primary) 14%,transparent 17% 42%,var(--md-secondary) 45%,transparent 49% 69%,var(--md-accent) 72%,transparent 76%);filter:blur(8px);opacity:.52;animation:malaysiaDaySweep 9s linear infinite}.malaysia-day-aura i{position:absolute;z-index:2;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff,0 0 16px var(--md-secondary);animation:mdSpark 3s ease-in-out infinite}.malaysia-day-aura i:nth-child(1){left:18%;top:28%}.malaysia-day-aura i:nth-child(2){right:19%;top:43%;animation-delay:.8s;background:var(--md-secondary)}.malaysia-day-aura i:nth-child(3){left:28%;bottom:25%;animation-delay:1.6s;background:var(--md-accent)}
@keyframes mdPulse{50%{opacity:.72;transform:translateX(-50%) rotateX(68deg) scale(1.06)}}@keyframes mdSpark{0%,100%{transform:translateY(8px) scale(.55);opacity:.15}50%{transform:translateY(-12px) scale(1);opacity:1}}
.malaysia-day-exclusive-badge{position:absolute;z-index:5;left:50%;top:12px;transform:translateX(-50%);white-space:nowrap;padding:6px 10px;border-radius:999px;background:linear-gradient(100deg,#102f76,#a91e31);border:1px solid rgba(246,200,76,.72);box-shadow:0 6px 20px rgba(0,0,0,.3);font-size:9px;font-weight:950;letter-spacing:.1em;color:#ffe68e}.malaysia-day-choice-copy{padding:12px 4px 10px}.malaysia-day-choice-copy h3{margin:0 0 3px;font-size:22px}.malaysia-day-choice-copy p{margin:0;min-height:38px;font-size:11px;line-height:1.45;color:rgba(255,255,255,.68)}.malaysia-day-claim-btn{width:100%}.malaysia-day-choice.is-selected{border-color:#f6cc5b;box-shadow:0 0 0 1px rgba(246,204,91,.28),0 0 38px rgba(246,200,76,.15)}.malaysia-day-choice.is-selected::after{content:"CLAIMED";position:absolute;right:22px;top:26px;z-index:7;padding:5px 8px;border-radius:999px;background:#f6c84c;color:#0a1c43;font-size:9px;font-weight:1000;letter-spacing:.12em}.malaysia-day-choice.is-locked{filter:saturate(.46);opacity:.58}.malaysia-day-choice.is-locked:hover{transform:none}.malaysia-day-claim-btn.locked{opacity:.75}
.malaysia-day-warning{margin-top:14px;padding:11px 13px;border-radius:15px;display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;background:rgba(216,52,69,.09);border:1px solid rgba(216,52,69,.25)}.malaysia-day-warning strong{font-size:10px;letter-spacing:.12em;color:#ff9aa5}.malaysia-day-warning span{font-size:11px;color:rgba(255,255,255,.7)}.malaysia-day-google-gate{margin-top:13px;padding:12px;border-radius:17px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09)}.malaysia-day-google-gate>div{display:flex;flex-direction:column;gap:2px}.malaysia-day-google-gate strong{font-size:13px}.malaysia-day-google-gate span{font-size:11px;color:rgba(255,255,255,.65)}.malaysia-day-google-gate .google-g{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#fff;color:#4285f4;font-weight:1000}.malaysia-day-card>.account-status{text-align:center;margin-top:10px;min-height:18px}

.avatar-store-card.event-exclusive{order:-10;border-color:rgba(246,200,76,.5);background:radial-gradient(circle at 50% 15%,rgba(47,115,255,.14),transparent 45%),rgba(4,18,43,.88);box-shadow:0 15px 40px rgba(0,0,0,.28),0 0 22px rgba(246,200,76,.07)}.avatar-store-card.event-exclusive .avatar-store-rarity{color:#ffe279;border-color:rgba(246,200,76,.42);background:linear-gradient(90deg,rgba(15,49,117,.9),rgba(150,25,44,.86))}.avatar-store-card.event-exclusive .avatar-store-price{color:#ffe279;letter-spacing:.04em;font-size:10px}.avatar-store-card.effect-malaysia-aiman .avatar-store-visual::after,.avatar-store-card.effect-malaysia-suria .avatar-store-visual::after{content:"";position:absolute;inset:7% 9% 3%;z-index:0;border-radius:50%;background:conic-gradient(from 20deg,transparent,#2f73ff33,transparent 35%,#f6c84c33,transparent 62%,#d8344533,transparent);filter:blur(5px);animation:malaysiaDaySweep 9s linear infinite}.avatar-store-card.event-exclusive .avatar-global-art{z-index:1}
.tt-hero-ambient-fx.theme-malaysia-aiman .tt-hero-pedestal-glow,.tt-hero-ambient-fx.theme-malaysia-suria .tt-hero-pedestal-glow{background:radial-gradient(ellipse at center,rgba(246,200,76,.42),rgba(47,115,255,.24) 35%,transparent 70%)}.tt-hero-ambient-fx.theme-malaysia-aiman .tt-hero-legendary-aura,.tt-hero-ambient-fx.theme-malaysia-suria .tt-hero-legendary-aura{filter:drop-shadow(0 0 14px rgba(47,115,255,.25))}.avatar-click-fx-layer.theme-malaysia-aiman,.avatar-click-fx-layer.theme-malaysia-suria{filter:drop-shadow(0 0 10px rgba(246,200,76,.25))}

@media(max-width:760px){.tt-malaysia-day-event-card{grid-template-columns:auto minmax(0,1fr) auto;gap:9px;padding:10px 11px}.tt-malaysia-day-flag{width:40px;height:40px;border-radius:13px}.tt-malaysia-day-card-portraits{display:none}.tt-malaysia-day-card-copy small{font-size:7.5px}.tt-malaysia-day-card-copy strong{font-size:11px}.tt-malaysia-day-card-copy span{font-size:9px}.tt-malaysia-day-event-card>.btn{min-width:62px;padding:8px 10px;font-size:10px}.malaysia-day-card{width:96vw;padding:16px 12px;max-height:94vh}.malaysia-day-head{padding:4px 34px 12px}.malaysia-day-head h2{font-size:25px}.malaysia-day-choice-grid{gap:9px}.malaysia-day-choice{padding:8px;border-radius:18px}.malaysia-day-choice-art{height:38vh;min-height:245px;border-radius:14px}.malaysia-day-exclusive-badge{font-size:7px;padding:5px 7px}.malaysia-day-choice-copy{padding:9px 2px 7px}.malaysia-day-choice-copy h3{font-size:18px}.malaysia-day-choice-copy p{font-size:9px;min-height:40px}.malaysia-day-claim-btn{font-size:10px;padding:9px 7px}.malaysia-day-warning{font-size:9px}.malaysia-day-google-gate{flex-direction:column;align-items:stretch;text-align:center}}
@media(max-width:470px){.malaysia-day-choice-grid{grid-template-columns:1fr}.malaysia-day-choice-art{height:46vh;min-height:300px}.malaysia-day-choice-copy p{min-height:0}.malaysia-day-card{padding-bottom:22px}.malaysia-day-head p{font-size:11px}.malaysia-day-date{font-size:8px}.malaysia-day-warning{position:sticky;bottom:0;z-index:10;background:rgba(6,17,38,.96);backdrop-filter:blur(12px)}}
.avatar-effect-malaysia-aiman:before,.avatar-effect-malaysia-suria:before{content:'';position:absolute;inset:7% 10%;border-radius:44%;pointer-events:none;z-index:0;filter:blur(24px);opacity:.38;background:radial-gradient(circle at 50% 72%,rgba(246,200,76,.42),rgba(47,115,255,.28) 30%,rgba(216,52,69,.16) 48%,transparent 70%);animation:mdPulse 2.8s ease-in-out infinite alternate}
.avatar-effect-malaysia-aiman .avatar-skin-emblem,.avatar-effect-malaysia-suria .avatar-skin-emblem{color:#ffe16f;border-color:rgba(246,200,76,.65);background:linear-gradient(145deg,rgba(20,63,148,.88),rgba(151,26,45,.78));box-shadow:0 0 16px rgba(47,115,255,.32),0 0 22px rgba(216,52,69,.16)}
.malaysia-day-google-gate[hidden]{display:none!important}
.malaysia-day-choice-art::before{content:"";position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:.075;filter:blur(1px) saturate(1.15);transform:scale(1.03);pointer-events:none}.malaysia-day-aiman .malaysia-day-choice-art::before{background-image:url('assets/events/malaysia-day-2026/aiman-poster.webp')}.malaysia-day-suria .malaysia-day-choice-art::before{background-image:url('assets/events/malaysia-day-2026/suria-poster.webp')}


/* =========================================================
   RC1.60 — MALAYSIA DAY PORTRAIT CARD POSITION + FLAG EMBLEM
   Move the Malaysia Day claim card to the user-marked portrait slot
   (between the hero explorer and PLAY SOLO), and replace the small
   preview icon with a Malaysia flag badge wrapped in a shiny gold emblem.
   ========================================================= */
.tt-malaysia-day-flag{
  position:relative;
  width:50px;
  height:50px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,232,170,.95);
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.55), rgba(255,255,255,0) 26%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CclipPath id='r'%3E%3Crect x='0' y='0' width='64' height='64' rx='12' ry='12'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23r)'%3E%3Crect width='64' height='64' fill='%23ffffff'/%3E%3Cg fill='%23d43043'%3E%3Crect y='0' width='64' height='4.923'/%3E%3Crect y='9.846' width='64' height='4.923'/%3E%3Crect y='19.692' width='64' height='4.923'/%3E%3Crect y='29.538' width='64' height='4.923'/%3E%3Crect y='39.384' width='64' height='4.923'/%3E%3Crect y='49.230' width='64' height='4.923'/%3E%3Crect y='59.076' width='64' height='4.924'/%3E%3C/g%3E%3Crect width='33' height='34.5' fill='%2301348b'/%3E%3Ccircle cx='15.6' cy='16.4' r='8.5' fill='%23f7c941'/%3E%3Ccircle cx='18.5' cy='16.4' r='7.0' fill='%2301348b'/%3E%3Cg transform='translate(24 16.4)' fill='%23f7c941'%3E%3Cpolygon points='0,-7.2 1.4,-2.0 6.3,-3.7 3.0,0.5 7.6,2.5 2.2,2.4 2.8,7.8 0,3.3 -2.8,7.8 -2.2,2.4 -7.6,2.5 -3.0,0.5 -6.3,-3.7 -1.4,-2.0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;
  box-shadow:
    0 0 0 2px rgba(246,198,73,.28),
    0 10px 22px rgba(0,0,0,.26),
    0 0 18px rgba(246,198,73,.34),
    inset 0 1px 0 rgba(255,255,255,.42);
}
.tt-malaysia-day-flag::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:18px;
  border:2px solid rgba(246,198,73,.88);
  box-shadow:0 0 0 1px rgba(255,234,188,.55), 0 0 15px rgba(246,198,73,.24);
  pointer-events:none;
}
.tt-malaysia-day-flag::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  background:linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,0) 28%, rgba(255,210,82,.08) 72%, rgba(255,255,255,.12));
  pointer-events:none;
}
.tt-malaysia-day-flag > *{display:none!important}

@media (max-width:600px) and (orientation:portrait){
  /* Stack for portrait mobile:
     Malaysia Day banner -> Play Solo -> mode dock -> Leaderboard -> Featured.
     This matches the user-marked placement above the main action button. */
  #menuScreen .tt-malaysia-day-event-card{
    position:absolute!important;
    z-index:22!important;
    left:12px!important;
    right:12px!important;
    bottom:274px!important;
    margin:0!important;
    min-height:62px!important;
    padding:10px 11px!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    gap:10px!important;
    border-radius:16px!important;
    background:linear-gradient(115deg,rgba(5,27,66,.94),rgba(12,54,108,.90) 54%,rgba(84,16,29,.88))!important;
    box-shadow:0 12px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08)!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }
  #menuScreen .tt-malaysia-day-event-card::before{opacity:.9!important}
  #menuScreen .tt-malaysia-day-flag{
    width:42px!important;
    height:42px!important;
    border-radius:13px!important;
  }
  #menuScreen .tt-malaysia-day-card-portraits{display:none!important}
  #menuScreen .tt-malaysia-day-card-copy{
    gap:1px!important;
    align-self:center!important;
  }
  #menuScreen .tt-malaysia-day-card-copy small{
    font-size:6.8px!important;
    letter-spacing:.14em!important;
    color:#ffe28a!important;
  }
  #menuScreen .tt-malaysia-day-card-copy strong{
    font-size:11.3px!important;
    line-height:1.08!important;
  }
  #menuScreen .tt-malaysia-day-card-copy span{
    font-size:8.8px!important;
    color:rgba(255,255,255,.74)!important;
  }
  #menuScreen .tt-malaysia-day-event-card > .btn{
    min-width:70px!important;
    height:40px!important;
    padding:0 12px!important;
    font-size:10px!important;
    border-radius:13px!important;
  }
  #menuScreen .tt-play-now{bottom:205px!important}
  #menuScreen .tt-native-mode-dock{bottom:131px!important}
  #menuScreen .tt-main-leaderboard-action{bottom:81px!important}
  #menuScreen .tt-native-featured-card{bottom:4px!important}
  #menuScreen .tt-lobby-character{bottom:335px!important}
}

@media (max-width:600px) and (orientation:portrait) and (max-height:690px){
  #menuScreen .tt-malaysia-day-event-card{
    bottom:242px!important;
    min-height:56px!important;
    padding:8px 10px!important;
  }
  #menuScreen .tt-malaysia-day-flag{
    width:38px!important;
    height:38px!important;
    border-radius:12px!important;
  }
  #menuScreen .tt-malaysia-day-card-copy strong{font-size:10.5px!important}
  #menuScreen .tt-malaysia-day-card-copy span{font-size:8.1px!important}
  #menuScreen .tt-malaysia-day-event-card > .btn{
    min-width:64px!important;
    height:36px!important;
    font-size:9.5px!important;
  }
  #menuScreen .tt-play-now{bottom:178px!important}
  #menuScreen .tt-native-mode-dock{bottom:116px!important}
  #menuScreen .tt-main-leaderboard-action{bottom:70px!important}
  #menuScreen .tt-native-featured-card{bottom:4px!important}
  #menuScreen .tt-lobby-character{bottom:296px!important}
}


/* =========================================================
   RC1.61 — MALAYSIA DAY PORTRAIT COMPACT PREMIUM CARD
   Slimmer event banner with stronger hierarchy so it sits cleanly
   between the hero art and the PLAY SOLO action on portrait phones.
   ========================================================= */
@media (max-width:600px) and (orientation:portrait){
  #menuScreen .tt-malaysia-day-event-card{
    bottom:270px!important;
    min-height:52px!important;
    height:52px!important;
    padding:6px 8px!important;
    gap:8px!important;
    border-radius:14px!important;
    border-color:rgba(250,210,102,.48)!important;
    background:
      radial-gradient(circle at 10% 50%,rgba(246,198,73,.12),transparent 28%),
      linear-gradient(115deg,rgba(4,25,63,.96),rgba(11,51,101,.93) 56%,rgba(72,14,28,.91))!important;
    box-shadow:0 10px 24px rgba(0,0,0,.25),0 0 18px rgba(246,198,73,.05),inset 0 1px 0 rgba(255,255,255,.08)!important;
  }
  #menuScreen .tt-malaysia-day-flag{
    width:36px!important;
    height:36px!important;
    border-radius:11px!important;
    box-shadow:0 0 0 1px rgba(246,198,73,.34),0 6px 13px rgba(0,0,0,.24),0 0 13px rgba(246,198,73,.28)!important;
  }
  #menuScreen .tt-malaysia-day-flag::before{inset:-2px!important;border-radius:13px!important;border-width:1.5px!important}
  #menuScreen .tt-malaysia-day-flag::after{border-radius:11px!important}
  #menuScreen .tt-malaysia-day-card-copy{gap:0!important}
  #menuScreen .tt-malaysia-day-card-copy small{
    font-size:5.9px!important;
    line-height:1.05!important;
    letter-spacing:.13em!important;
  }
  #menuScreen .tt-malaysia-day-card-copy strong{
    margin-top:2px!important;
    font-size:10.2px!important;
    line-height:1.02!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #menuScreen .tt-malaysia-day-card-copy span{
    margin-top:2px!important;
    font-size:7.4px!important;
    line-height:1!important;
  }
  #menuScreen .tt-malaysia-day-event-card > .btn{
    min-width:58px!important;
    width:58px!important;
    height:34px!important;
    min-height:34px!important;
    padding:0 8px!important;
    border-radius:11px!important;
    font-size:8.7px!important;
    font-weight:900!important;
    box-shadow:0 6px 14px rgba(31,202,220,.15),inset 0 1px 0 rgba(255,255,255,.22)!important;
  }
  #menuScreen .tt-play-now{bottom:205px!important}
  #menuScreen .tt-lobby-character{bottom:329px!important}
}

@media (max-width:600px) and (orientation:portrait) and (max-height:690px){
  #menuScreen .tt-malaysia-day-event-card{
    bottom:238px!important;
    min-height:48px!important;
    height:48px!important;
    padding:5px 7px!important;
  }
  #menuScreen .tt-malaysia-day-flag{width:33px!important;height:33px!important}
  #menuScreen .tt-malaysia-day-card-copy small{font-size:5.4px!important}
  #menuScreen .tt-malaysia-day-card-copy strong{font-size:9.5px!important}
  #menuScreen .tt-malaysia-day-card-copy span{font-size:6.9px!important}
  #menuScreen .tt-malaysia-day-event-card > .btn{width:54px!important;min-width:54px!important;height:32px!important;min-height:32px!important;font-size:8.2px!important}
  #menuScreen .tt-play-now{bottom:178px!important}
  #menuScreen .tt-lobby-character{bottom:290px!important}
}


/* =========================================================
   RC1.62 — PORTRAIT SOLO RESUME / ABANDON VISIBILITY FIX
   The recovery card previously stayed in normal document flow while the
   portrait home layout is absolute-positioned, so it could sit outside the
   visible viewport. Anchor it into the portrait action stack and keep both
   recovery buttons fully tappable. Malaysia Day stays in its marked slot.
   ========================================================= */
@media (max-width:600px) and (orientation:portrait){
  #menuScreen #soloResumeCard.tt-solo-resume-card:not(.hidden){
    position:absolute!important;
    z-index:25!important;
    left:12px!important;
    right:12px!important;
    bottom:327px!important;
    width:auto!important;
    height:54px!important;
    min-height:54px!important;
    margin:0!important;
    padding:6px 7px!important;
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr) auto!important;
    grid-template-rows:1fr!important;
    align-items:center!important;
    gap:7px!important;
    border-radius:14px!important;
    border:1px solid rgba(111,235,214,.34)!important;
    background:linear-gradient(135deg,rgba(5,31,45,.96),rgba(11,55,66,.94) 54%,rgba(8,35,55,.95))!important;
    box-shadow:0 11px 27px rgba(0,0,0,.28),0 0 18px rgba(66,231,199,.05),inset 0 1px 0 rgba(255,255,255,.07)!important;
    backdrop-filter:blur(15px) saturate(1.08)!important;
    -webkit-backdrop-filter:blur(15px) saturate(1.08)!important;
    pointer-events:auto!important;
  }
  #menuScreen #soloResumeCard .tt-solo-resume-icon{
    width:32px!important;
    height:32px!important;
    font-size:17px!important;
    border-radius:10px!important;
    flex:0 0 32px!important;
  }
  #menuScreen #soloResumeCard .tt-solo-resume-copy{
    min-width:0!important;
    gap:0!important;
    overflow:hidden!important;
  }
  #menuScreen #soloResumeCard .tt-solo-resume-copy small{
    font-size:5.8px!important;
    line-height:1!important;
    letter-spacing:.11em!important;
  }
  #menuScreen #soloResumeCard .tt-solo-resume-copy strong{
    margin-top:3px!important;
    font-size:10.2px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #menuScreen #soloResumeCard .tt-solo-resume-copy span{
    display:none!important;
  }
  #menuScreen #soloResumeCard .tt-solo-resume-actions{
    grid-column:auto!important;
    width:auto!important;
    display:grid!important;
    grid-template-columns:repeat(2,54px)!important;
    gap:5px!important;
    align-items:center!important;
  }
  #menuScreen #soloResumeCard .tt-solo-resume-actions .btn{
    width:54px!important;
    min-width:54px!important;
    height:34px!important;
    min-height:34px!important;
    margin:0!important;
    padding:0 4px!important;
    border-radius:10px!important;
    font-size:8.5px!important;
    line-height:1!important;
    font-weight:900!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }
  #menuScreen #soloResumeCard #soloAbandonBtn{
    border-color:rgba(255,255,255,.16)!important;
    background:rgba(5,19,29,.72)!important;
    color:#c9d8e2!important;
  }

  /* Reserve vertical room for the recovery strip without disturbing the
     Malaysia Day card's user-approved position above PLAY SOLO. */
  #menuScreen.has-solo-resume .tt-lobby-character{
    bottom:390px!important;
  }
}

@media (max-width:600px) and (orientation:portrait) and (max-height:690px){
  #menuScreen #soloResumeCard.tt-solo-resume-card:not(.hidden){
    bottom:291px!important;
    height:49px!important;
    min-height:49px!important;
    padding:5px 6px!important;
    grid-template-columns:30px minmax(0,1fr) auto!important;
    gap:5px!important;
  }
  #menuScreen #soloResumeCard .tt-solo-resume-icon{width:29px!important;height:29px!important;font-size:15px!important}
  #menuScreen #soloResumeCard .tt-solo-resume-copy small{font-size:5.2px!important}
  #menuScreen #soloResumeCard .tt-solo-resume-copy strong{font-size:9.3px!important}
  #menuScreen #soloResumeCard .tt-solo-resume-actions{grid-template-columns:repeat(2,50px)!important;gap:4px!important}
  #menuScreen #soloResumeCard .tt-solo-resume-actions .btn{width:50px!important;min-width:50px!important;height:31px!important;min-height:31px!important;font-size:7.8px!important}
  #menuScreen.has-solo-resume .tt-lobby-character{bottom:348px!important}
}


/* =========================================================
   RC1.61 — DESKTOP HERO LEADERBOARD CLIP FIX
   Prevent the main-menu leaderboard CTA from getting cut off on
   desktop heights around ~900px by tightening the left content stack
   and nudging the hero copy upward slightly.
   ========================================================= */
@media (min-width:1101px) and (max-height:950px){
  #menuScreen .tt-lobby-copy{
    top:47%!important;
    width:min(490px,33vw)!important;
  }
  #menuScreen .tt-lobby-lead{
    margin:13px 0 14px!important;
  }
  #menuScreen .tt-player-summary{
    padding:10px 13px!important;
  }
  #menuScreen .tt-play-now{
    min-height:68px!important;
    margin-top:10px!important;
    border-radius:21px!important;
  }
  #menuScreen .tt-play-now strong{
    font-size:24px!important;
  }
  #menuScreen .tt-main-leaderboard-action .tt-menu-leaderboard-btn{
    min-height:48px!important;
    padding:8px 15px!important;
    border-radius:16px!important;
  }
  #menuScreen .tt-menu-leaderboard-copy strong{
    font-size:13px!important;
  }
  #menuScreen .tt-menu-leaderboard-copy small{
    font-size:9px!important;
  }
}


/* =========================================================
   RC1.62 — START EXPEDITION STANDS OUT
   Give selected map/difficulty/play-style chips a cooler, darker
   blue treatment so the mint START EXPEDITION button remains the
   primary focal action.
   ========================================================= */
.play-setup-segments .segment.active{
  background:linear-gradient(135deg, rgba(49,110,186,.92), rgba(78,156,226,.88))!important;
  color:#f3fbff!important;
  border-color:rgba(140,216,255,.38)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 10px 24px rgba(22,82,150,.22)!important;
}
.play-setup-segments .segment.active b,
.play-setup-segments .segment.active span,
.play-setup-segments .segment.active small{
  color:inherit!important;
}
.play-setup-segments .segment.active small{
  opacity:.84!important;
}
.play-setup-segments .segment:not(.active):hover{
  background:rgba(7,23,38,.88)!important;
  border-color:rgba(128,205,255,.18)!important;
}
.play-setup-start{
  box-shadow:0 18px 42px rgba(77,225,202,.18), 0 6px 18px rgba(0,0,0,.18)!important;
}
.play-setup-start:hover{
  box-shadow:0 22px 48px rgba(77,225,202,.22), 0 8px 22px rgba(0,0,0,.20)!important;
}


/* =========================================================
   RC1.63 — PORTRAIT PLAY SETUP ONE-SCREEN + FEATURED ART PILL
   Keep Choose Your Challenge fully inside one portrait viewport and
   reuse the cinematic Next Explorer artwork inside Featured Explorers.
   ========================================================= */
@media (max-width:600px) and (orientation:portrait){
  .play-setup-modal{
    padding:4px max(4px,env(safe-area-inset-right,0px)) max(4px,env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px))!important;
    align-items:center!important;
    overflow:hidden!important;
  }
  .play-setup-card{
    width:100%!important;
    height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 8px)!important;
    max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 8px)!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    border-radius:20px!important;
  }
  #closePlaySetupBtn{
    top:8px!important;
    right:8px!important;
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
  }
  .play-setup-hero{
    flex:0 0 auto!important;
    min-height:104px!important;
    padding:13px 48px 11px 13px!important;
    gap:8px!important;
  }
  .play-setup-copy .eyebrow{font-size:8px!important;letter-spacing:.15em!important}
  .play-setup-copy h2{margin:4px 0 4px!important;font-size:27px!important;line-height:.95!important}
  .play-setup-copy p{max-width:82%!important;font-size:9.5px!important;line-height:1.25!important}
  .play-setup-globe{right:-8px!important;width:78px!important;height:78px!important;opacity:.58!important}
  .play-setup-globe span{font-size:50px!important}
  .play-setup-grid{
    flex:1 1 auto!important;min-height:0!important;display:grid!important;
    grid-template-rows:repeat(3,minmax(0,1fr))!important;gap:6px!important;
    padding:7px 9px 4px!important;overflow:hidden!important;
  }
  .play-setup-option{
    min-height:0!important;padding:7px 8px!important;border-radius:14px!important;
    display:flex!important;flex-direction:column!important;justify-content:center!important;
  }
  .play-setup-option-head{gap:7px!important;margin-bottom:5px!important;min-height:25px!important}
  .play-setup-option-head>span{width:25px!important;height:25px!important;flex-basis:25px!important;border-radius:8px!important;font-size:8px!important}
  .play-setup-option-head strong{font-size:9.5px!important;letter-spacing:.11em!important}
  .play-setup-option-head small{font-size:7.4px!important;line-height:1.05!important}
  .play-setup-segments{gap:5px!important}
  .play-setup-segments .segment{min-height:39px!important;padding:4px 3px!important;gap:1px!important;flex-direction:column!important;border-radius:11px!important}
  .play-setup-segments .segment b{font-size:13px!important;line-height:1!important}
  .play-setup-segments .segment span{font-size:9.5px!important;line-height:1!important}
  .play-setup-segments .segment small{font-size:6.8px!important;line-height:1!important}
  .play-setup-footer{
    flex:0 0 auto!important;padding:5px 9px 8px!important;gap:6px!important;
    flex-direction:column!important;align-items:stretch!important;
  }
  .play-setup-audio{width:100%!important;display:grid!important;grid-template-columns:auto auto minmax(0,1fr)!important;gap:5px!important}
  .play-setup-sound,.play-setup-music{width:auto!important;min-width:0!important;height:32px!important;min-height:32px!important;padding:0 8px!important;border-radius:10px!important;font-size:8.5px!important}
  .music-volume-control{grid-column:auto!important;width:100%!important;min-width:0!important;height:32px!important;padding:0 7px!important;grid-template-columns:auto minmax(0,1fr) 28px!important;gap:5px!important;border-radius:10px!important;font-size:7px!important}
  .music-volume-control input{min-width:0!important}
  .music-volume-control output{font-size:7.5px!important}
  .play-setup-start{order:2!important;width:100%!important;min-width:0!important;min-height:44px!important;height:44px!important;border-radius:13px!important;font-size:11px!important;gap:12px!important}

  #menuScreen .tt-native-featured-card{
    position:absolute!important;isolation:isolate!important;overflow:hidden!important;
    background:
      linear-gradient(105deg,rgba(3,13,24,.88) 0%,rgba(4,18,31,.70) 39%,rgba(4,15,27,.58) 64%,rgba(3,12,22,.84) 100%),
      url('assets/backgrounds/next-explorer-pill.webp') center 50% / cover no-repeat!important;
    border-color:rgba(124,204,255,.31)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 24px rgba(0,0,0,.27),inset 0 0 38px rgba(87,175,255,.05)!important;
  }
  #menuScreen .tt-native-featured-card::before{
    content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(circle at 54% 44%,rgba(92,175,255,.14),transparent 36%),linear-gradient(90deg,rgba(2,10,19,.42),rgba(2,10,19,.08) 52%,rgba(2,10,19,.28));
  }
  #menuScreen .tt-native-featured-card > *{position:relative!important;z-index:1!important}
  #menuScreen .tt-native-featured-copy{
    background:linear-gradient(135deg,rgba(5,24,40,.68),rgba(6,28,45,.42))!important;
    border:1px solid rgba(126,211,255,.10)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
  }
}

@media (max-width:600px) and (orientation:portrait) and (max-height:690px){
  .play-setup-card{border-radius:17px!important}
  .play-setup-hero{min-height:82px!important;padding:9px 44px 7px 10px!important}
  .play-setup-copy h2{margin:2px 0 2px!important;font-size:23px!important}
  .play-setup-copy p{display:none!important}
  .play-setup-globe{width:62px!important;height:62px!important;right:-6px!important}
  .play-setup-globe span{font-size:40px!important}
  .play-setup-grid{gap:4px!important;padding:5px 7px 3px!important}
  .play-setup-option{padding:5px 6px!important;border-radius:12px!important}
  .play-setup-option-head{margin-bottom:3px!important;min-height:21px!important}
  .play-setup-option-head>span{width:21px!important;height:21px!important;flex-basis:21px!important;font-size:7px!important}
  .play-setup-option-head strong{font-size:8.5px!important}
  .play-setup-option-head small{display:none!important}
  .play-setup-segments .segment{min-height:34px!important;padding:3px 2px!important}
  .play-setup-segments .segment b{font-size:11px!important}
  .play-setup-segments .segment span{font-size:8.5px!important}
  .play-setup-segments .segment small{font-size:6px!important}
  .play-setup-footer{padding:4px 7px 6px!important;gap:4px!important}
  .play-setup-sound,.play-setup-music,.music-volume-control{height:28px!important;min-height:28px!important}
  .play-setup-start{height:39px!important;min-height:39px!important;font-size:10px!important}
}

/* =========================================================
   RC1.64 — PORTRAIT PLAY SETUP DENSITY FIX + AUDIO COLORS
   Remove stretched empty space in portrait setup cards by letting each
   section size to its content. Keep START EXPEDITION as the only mint CTA.
   Give SFX and Music distinct secondary colors.
   ========================================================= */
@media (max-width:600px) and (orientation:portrait){
  .play-setup-modal{
    padding:6px max(6px,env(safe-area-inset-right,0px)) max(6px,env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px))!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
  }
  .play-setup-card{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 12px)!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    border-radius:20px!important;
  }
  .play-setup-hero{
    flex:0 0 auto!important;
    min-height:92px!important;
    padding:12px 48px 10px 12px!important;
  }
  .play-setup-copy .eyebrow{font-size:7.5px!important;letter-spacing:.14em!important}
  .play-setup-copy h2{margin:3px 0 3px!important;font-size:26px!important;line-height:.96!important}
  .play-setup-copy p{font-size:8.7px!important;line-height:1.22!important;max-width:88%!important}
  .play-setup-globe{right:-7px!important;width:72px!important;height:72px!important;opacity:.56!important}
  .play-setup-globe span{font-size:46px!important}

  .play-setup-grid{
    flex:0 0 auto!important;
    min-height:0!important;
    display:grid!important;
    grid-template-rows:none!important;
    gap:6px!important;
    padding:7px 8px 4px!important;
    overflow:visible!important;
  }
  .play-setup-option{
    min-height:0!important;
    height:auto!important;
    padding:7px 8px!important;
    border-radius:13px!important;
    display:block!important;
  }
  .play-setup-option-head{
    gap:7px!important;
    margin-bottom:5px!important;
    min-height:23px!important;
  }
  .play-setup-option-head>span{
    width:23px!important;
    height:23px!important;
    flex:0 0 23px!important;
    border-radius:8px!important;
    font-size:7.5px!important;
  }
  .play-setup-option-head strong{font-size:9px!important;letter-spacing:.10em!important}
  .play-setup-option-head small{font-size:6.8px!important;line-height:1.05!important}
  .play-setup-segments{gap:5px!important}
  .play-setup-segments .segment{
    min-height:38px!important;
    padding:4px 3px!important;
    gap:1px!important;
    flex-direction:column!important;
    border-radius:10px!important;
  }
  .play-setup-segments .segment b{font-size:12px!important;line-height:1!important}
  .play-setup-segments .segment span{font-size:9px!important;line-height:1!important}
  .play-setup-segments .segment small{font-size:6.2px!important;line-height:1!important}

  .play-setup-footer{
    flex:0 0 auto!important;
    padding:5px 8px 8px!important;
    gap:6px!important;
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .play-setup-audio{
    width:100%!important;
    display:grid!important;
    grid-template-columns:auto auto minmax(0,1fr)!important;
    gap:5px!important;
  }
  .play-setup-sound,.play-setup-music{
    width:auto!important;
    min-width:0!important;
    height:31px!important;
    min-height:31px!important;
    padding:0 8px!important;
    border-radius:10px!important;
    font-size:8.2px!important;
    color:#f4fbff!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 14px rgba(0,0,0,.16)!important;
  }
  .play-setup-sound.active{
    border-color:rgba(103,194,255,.48)!important;
    background:linear-gradient(135deg,#2f8fca,#3269b5)!important;
  }
  .play-setup-music.active{
    border-color:rgba(177,145,255,.48)!important;
    background:linear-gradient(135deg,#7b5fd0,#5d47aa)!important;
  }
  .play-setup-sound:not(.active),.play-setup-music:not(.active){
    color:#9eb4c7!important;
    border-color:rgba(255,255,255,.10)!important;
    background:rgba(5,19,32,.86)!important;
    box-shadow:none!important;
  }
  .music-volume-control{
    grid-column:auto!important;
    width:100%!important;
    min-width:0!important;
    height:31px!important;
    padding:0 7px!important;
    grid-template-columns:auto minmax(0,1fr) 28px!important;
    gap:5px!important;
    border-radius:10px!important;
    font-size:6.8px!important;
    background:rgba(5,18,31,.88)!important;
    border-color:rgba(130,170,210,.15)!important;
  }
  .music-volume-control input{min-width:0!important;accent-color:#6e75d4!important}
  .music-volume-control output{font-size:7.2px!important}
  .play-setup-start{
    order:2!important;
    width:100%!important;
    min-width:0!important;
    min-height:43px!important;
    height:43px!important;
    border-radius:12px!important;
    font-size:10.5px!important;
    gap:12px!important;
  }
}

@media (max-width:600px) and (orientation:portrait) and (max-height:690px){
  .play-setup-modal{padding:4px!important}
  .play-setup-card{max-height:calc(100dvh - 8px)!important;border-radius:17px!important}
  .play-setup-hero{min-height:77px!important;padding:8px 42px 6px 9px!important}
  .play-setup-copy h2{font-size:22px!important;margin:1px 0 2px!important}
  .play-setup-copy p{display:none!important}
  .play-setup-globe{width:58px!important;height:58px!important;right:-5px!important}
  .play-setup-globe span{font-size:37px!important}
  .play-setup-grid{gap:4px!important;padding:5px 6px 3px!important}
  .play-setup-option{padding:5px 6px!important;border-radius:11px!important}
  .play-setup-option-head{margin-bottom:3px!important;min-height:20px!important}
  .play-setup-option-head>span{width:20px!important;height:20px!important;flex-basis:20px!important;font-size:6.7px!important}
  .play-setup-option-head strong{font-size:8.2px!important}
  .play-setup-option-head small{display:none!important}
  .play-setup-segments .segment{min-height:33px!important;padding:3px 2px!important}
  .play-setup-segments .segment b{font-size:10.5px!important}
  .play-setup-segments .segment span{font-size:8px!important}
  .play-setup-segments .segment small{font-size:5.7px!important}
  .play-setup-footer{padding:4px 6px 6px!important;gap:4px!important}
  .play-setup-sound,.play-setup-music,.music-volume-control{height:27px!important;min-height:27px!important}
  .play-setup-start{height:38px!important;min-height:38px!important;font-size:9.5px!important}
}


/* =========================================================
   RC1.64 — PLAY SETUP GLASS PANELS REUSE HERO BACKGROUND
   Apply the same scenic Start Expedition background treatment inside
   the Map / Difficulty / Play Style glass panels for a more cohesive look.
   ========================================================= */
.play-setup-option{
  position:relative!important;
  isolation:isolate!important;
  background:
    linear-gradient(180deg,rgba(3,14,25,.84) 0%,rgba(3,15,27,.78) 42%,rgba(2,11,20,.88) 100%),
    radial-gradient(circle at 82% 18%,rgba(88,192,255,.11),transparent 32%),
    url('assets/backgrounds/home-hero-borneo.webp') center center / cover no-repeat!important;
  border-color:rgba(151,216,255,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 26px rgba(0,0,0,.14)!important;
  overflow:hidden!important;
}
.play-setup-option::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(90deg,rgba(3,11,20,.34),rgba(3,11,20,.14) 45%,rgba(3,11,20,.28)),
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 26%,rgba(2,9,17,.18) 100%);
}
.play-setup-option > *{
  position:relative;
  z-index:1;
}
@media(max-width:720px){
  .play-setup-option{
    background-position:center center!important;
  }
}

/* =========================================================
   RC1.65 — PLAYER SELF-SERVICE ACCOUNT DELETION
   Google Play-ready in-app deletion path with explicit typed confirmation.
   ========================================================= */
#accountModal .profile-delete-account-btn{
  border-color:rgba(255,106,124,.22)!important;
  color:#ffb5bf!important;
  background:linear-gradient(145deg,rgba(76,20,31,.42),rgba(34,15,24,.52))!important;
}
#accountModal .profile-delete-account-btn:hover{
  border-color:rgba(255,112,131,.50)!important;
  color:#ffd9de!important;
  background:linear-gradient(145deg,rgba(101,25,40,.58),rgba(47,17,28,.66))!important;
}
.delete-account-modal{z-index:1700!important}
.delete-account-card{
  width:min(560px,92vw)!important;
  padding:26px!important;
  border-color:rgba(255,104,121,.20)!important;
  background:
    radial-gradient(circle at 85% 5%,rgba(255,76,102,.10),transparent 26%),
    linear-gradient(160deg,rgba(9,28,45,.98),rgba(6,17,30,.99))!important;
  box-shadow:0 32px 90px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.delete-account-card h2{margin:7px 0 8px;font-size:30px;line-height:1.02}
.delete-account-summary{
  margin:18px 0 12px;
  padding:12px 14px;
  border:1px solid rgba(111,214,255,.13);
  border-radius:14px;
  background:rgba(90,195,255,.045);
}
.delete-account-summary span{display:block;color:#7f9aac;font-size:9px;font-weight:900;letter-spacing:.12em}
.delete-account-summary strong{display:block;margin-top:4px;color:#edf9ff;font-size:13px;word-break:break-word}
.delete-account-warning{
  margin-bottom:14px;
  padding:13px 14px;
  border:1px solid rgba(255,103,121,.20);
  border-radius:14px;
  background:rgba(255,74,96,.065);
  color:#ffcbd2;
  font-size:11px;
  line-height:1.55;
}
.delete-account-confirm-label{display:block;margin:0 0 7px;color:#d7e7ef;font-size:11px;font-weight:800}
.delete-account-confirm-input{
  width:100%;height:46px;padding:0 13px;
  border:1px solid rgba(255,255,255,.12);border-radius:13px;
  outline:none;background:rgba(4,15,26,.86);color:#fff;font:inherit;font-weight:800;letter-spacing:.08em;
}
.delete-account-confirm-input:focus{border-color:rgba(255,105,124,.58);box-shadow:0 0 0 3px rgba(255,86,108,.08)}
.delete-account-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:9px;margin-top:14px}
.delete-account-danger{
  border:1px solid rgba(255,151,164,.34)!important;
  color:#fff!important;
  background:linear-gradient(135deg,#e1495b,#b51f35)!important;
  box-shadow:0 12px 26px rgba(193,35,56,.18)!important;
}
.delete-account-danger:disabled{opacity:.42!important;filter:saturate(.65);cursor:not-allowed!important}
.delete-account-web-link{display:inline-block;margin-top:10px;color:#8fe6ff;font-size:10px;text-decoration:none}
.delete-account-web-link:hover{text-decoration:underline}
@media(max-width:600px){
  .delete-account-card{width:95vw!important;padding:20px 16px!important;border-radius:20px!important}
  .delete-account-card h2{font-size:25px}
  .delete-account-actions{grid-template-columns:1fr!important}
}


/* =========================================================
   RC1.65 — DAILY + DUEL RECONNECT / ABANDON + PORTRAIT STACK
   Daily reuses the single-player recovery card. DUEL/private matches get a
   matching recovery strip with a distinct blue/gold multiplayer treatment.
   ========================================================= */
.tt-multiplayer-resume-card{
  border-color:rgba(111,192,255,.32);
  background:linear-gradient(135deg,rgba(7,25,48,.94),rgba(15,48,82,.82) 58%,rgba(66,43,13,.72));
}
.tt-multiplayer-resume-card .tt-solo-resume-icon{
  color:#9bdcff;border-color:rgba(114,202,255,.4);background:rgba(58,153,255,.12);
  box-shadow:0 0 24px rgba(65,166,255,.13)
}
.tt-multiplayer-resume-card .tt-solo-resume-copy small{color:#8fd4ff}

@media (max-width:600px) and (orientation:portrait){
  #menuScreen #multiplayerResumeCard.tt-solo-resume-card:not(.hidden){
    position:absolute!important;z-index:25!important;left:12px!important;right:12px!important;bottom:327px!important;
    width:auto!important;height:54px!important;min-height:54px!important;margin:0!important;padding:6px 7px!important;
    display:grid!important;grid-template-columns:34px minmax(0,1fr) auto!important;grid-template-rows:1fr!important;
    align-items:center!important;gap:7px!important;border-radius:14px!important;pointer-events:auto!important;
  }
  #menuScreen #multiplayerResumeCard .tt-solo-resume-icon{width:32px!important;height:32px!important;font-size:17px!important;border-radius:10px!important}
  #menuScreen #multiplayerResumeCard .tt-solo-resume-copy{min-width:0!important;gap:0!important;overflow:hidden!important}
  #menuScreen #multiplayerResumeCard .tt-solo-resume-copy small{font-size:5.8px!important;line-height:1!important;letter-spacing:.11em!important}
  #menuScreen #multiplayerResumeCard .tt-solo-resume-copy strong{margin-top:3px!important;font-size:10.2px!important;line-height:1.05!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  #menuScreen #multiplayerResumeCard .tt-solo-resume-copy span{display:none!important}
  #menuScreen #multiplayerResumeCard .tt-solo-resume-actions{grid-column:auto!important;width:auto!important;display:grid!important;grid-template-columns:repeat(2,54px)!important;gap:5px!important}
  #menuScreen #multiplayerResumeCard .tt-solo-resume-actions .btn{width:54px!important;min-width:54px!important;height:34px!important;min-height:34px!important;padding:0 4px!important;border-radius:10px!important;font-size:8.5px!important}
  #menuScreen #multiplayerResumeCard #multiplayerAbandonBtn{border-color:rgba(255,255,255,.16)!important;background:rgba(5,19,29,.72)!important;color:#c9d8e2!important}
  #menuScreen.has-multiplayer-resume .tt-lobby-character{bottom:390px!important}
}
@media (max-width:600px) and (orientation:portrait) and (max-height:690px){
  #menuScreen #multiplayerResumeCard.tt-solo-resume-card:not(.hidden){bottom:291px!important;height:49px!important;min-height:49px!important;padding:5px 6px!important;grid-template-columns:30px minmax(0,1fr) auto!important;gap:5px!important}
  #menuScreen #multiplayerResumeCard .tt-solo-resume-icon{width:29px!important;height:29px!important;font-size:15px!important}
  #menuScreen #multiplayerResumeCard .tt-solo-resume-copy small{font-size:5.2px!important}
  #menuScreen #multiplayerResumeCard .tt-solo-resume-copy strong{font-size:9.3px!important}
  #menuScreen #multiplayerResumeCard .tt-solo-resume-actions{grid-template-columns:repeat(2,50px)!important;gap:4px!important}
  #menuScreen #multiplayerResumeCard .tt-solo-resume-actions .btn{width:50px!important;min-width:50px!important;height:31px!important;min-height:31px!important;font-size:7.8px!important}
  #menuScreen.has-multiplayer-resume .tt-lobby-character{bottom:348px!important}
}


/* =========================================================
   RC1.66 — DESKTOP CUSTOMIZE AVATAR CONTAINMENT
   Keep every full-character render fully inside the showroom card. The old
   permanent preview layers used overflow:visible, allowing tall portraits such
   as Maya to spill over the card edge and cover nearby UI.
   ========================================================= */
@media (min-width:821px){
  #customizeModal .customize-preview-panel,
  #customizeModal .showroom-shell{
    overflow:hidden!important;
  }
  #customizeModal #customizeAvatarPreview,
  #customizeModal #customizeAvatarLayer.tt-permanent-preview-layer{
    overflow:hidden!important;
  }
  #customizeModal #customizeAvatarImage.tt-permanent-preview-image{
    height:min(var(--tt-preview-height,80%),80%)!important;
    max-height:80%!important;
    max-width:min(var(--tt-preview-max-width,84%),84%)!important;
    bottom:38px!important;
  }
}

/* RC1.66 — portrait guess-map touch stability. Keep Google's live surface
   free from transforms/containment and make the modal map the permanent mobile
   home of the interactive map node. */
@media (max-width:820px), (orientation:landscape) and (max-height:560px) and (max-width:1180px){
  #mapModal:not(.hidden) #largeMap,
  #mapModal:not(.hidden) #map{
    transform:none!important;
    contain:none!important;
    isolation:auto!important;
    backface-visibility:visible!important;
    will-change:auto!important;
    touch-action:none;
  }
  #mapModal:not(.hidden) #map,
  #mapModal:not(.hidden) #map .gm-style,
  #mapModal:not(.hidden) #map .gm-style > div{
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
  }
}

/* =========================================================
   RC1.67 — COMPACT PORTRAIT HOME FOR OLDER / SHORTER PHONES
   Target older portrait devices around 360–430px wide and <=740px tall.
   The previous rule ordering pushed the profile back down to 118px and left
   too little vertical room for the explorer. This compact stack restores the
   profile upward, trims the lower action cards, and gives the hero avatar a
   visibly larger, fully-contained stage without covering any tappable UI.
   ========================================================= */
@media (max-width:600px) and (orientation:portrait) and (max-height:740px){
  /* Header/copy: keep the two-line title readable but reclaim vertical space. */
  #menuScreen .tt-lobby-copy .v12-kicker{
    top:8px!important;
    left:14px!important;
    font-size:5.9px!important;
    letter-spacing:.18em!important;
  }
  #menuScreen .tt-lobby-copy h1{
    top:22px!important;
    left:14px!important;
    width:min(78%,250px)!important;
    font-size:25px!important;
    line-height:.90!important;
  }
  #menuScreen .tt-lobby-lead{display:none!important}

  /* Profile bar: tighter and higher so the avatar starts immediately below it. */
  #menuScreen .tt-player-summary{
    top:91px!important;
    left:11px!important;
    right:11px!important;
    min-height:43px!important;
    height:43px!important;
    padding:4px 7px!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    gap:7px!important;
    border-radius:13px!important;
  }
  #menuScreen .tt-player-portrait{
    width:34px!important;
    height:34px!important;
    border-radius:10px!important;
  }
  #menuScreen .tt-player-name strong{font-size:9.4px!important}
  #menuScreen .tt-player-name>span{font-size:6.4px!important}
  #menuScreen .tt-player-xp{margin-top:1px!important;gap:5px!important}
  #menuScreen .tt-player-xp>div{height:3px!important}
  #menuScreen .tt-player-xp strong{font-size:5.9px!important}

  /* Give the explorer a larger clean stage between profile + event card. */
  #menuScreen .tt-lobby-character{
    top:136px!important;
    bottom:268px!important;
    left:2px!important;
    right:2px!important;
    overflow:visible!important;
  }
  #menuScreen .tt-lobby-character .pro-avatar-stage img,
  #menuScreen .tt-lobby-character .tt-menu-hero-image{
    transform:translateY(4px) scale(1.14)!important;
    transform-origin:center bottom!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center bottom!important;
  }
  #menuScreen .tt-character-halo{width:76%!important;bottom:2%!important}
  #menuScreen .tt-lobby-platform{width:58%!important;height:18px!important;bottom:0!important}

  /* Compact the bottom stack to make room for the explorer. */
  #menuScreen .tt-malaysia-day-event-card{
    bottom:216px!important;
    min-height:44px!important;
    height:44px!important;
    padding:4px 7px!important;
    gap:6px!important;
    border-radius:12px!important;
  }
  #menuScreen .tt-malaysia-day-flag{width:31px!important;height:31px!important;border-radius:10px!important}
  #menuScreen .tt-malaysia-day-card-copy small{font-size:5px!important}
  #menuScreen .tt-malaysia-day-card-copy strong{font-size:9px!important}
  #menuScreen .tt-malaysia-day-card-copy span{font-size:6.4px!important}
  #menuScreen .tt-malaysia-day-event-card > .btn{
    width:50px!important;
    min-width:50px!important;
    height:30px!important;
    min-height:30px!important;
    padding:0 6px!important;
    border-radius:10px!important;
    font-size:7.8px!important;
  }

  #menuScreen .tt-play-now{
    bottom:164px!important;
    height:46px!important;
    min-height:46px!important;
    padding:4px 10px!important;
    border-radius:13px!important;
  }
  #menuScreen .tt-play-now .v12-action-icon{font-size:17px!important}
  #menuScreen .tt-play-now strong{font-size:14.5px!important}
  #menuScreen .tt-play-now small{font-size:6.5px!important;margin-top:1px!important}
  #menuScreen .tt-play-now>b{font-size:17px!important}

  #menuScreen .tt-native-mode-dock{
    bottom:106px!important;
    height:52px!important;
    padding:4px!important;
    gap:4px!important;
    border-radius:13px!important;
  }
  #menuScreen .tt-native-mode-tile{
    height:42px!important;
    border-radius:11px!important;
  }
  #menuScreen .tt-native-mode-icon{width:23px!important;height:23px!important;font-size:10px!important}
  #menuScreen .tt-native-mode-tile strong{font-size:7.8px!important}

  #menuScreen .tt-main-leaderboard-action{
    bottom:64px!important;
    height:36px!important;
  }
  #menuScreen .tt-main-leaderboard-action .tt-menu-leaderboard-btn{
    height:36px!important;
    min-height:36px!important;
    padding:4px 8px!important;
    grid-template-columns:24px minmax(0,1fr) auto!important;
    gap:6px!important;
    border-radius:11px!important;
  }
  #menuScreen .tt-menu-leaderboard-icon{width:24px!important;height:24px!important;font-size:12px!important;border-radius:8px!important}
  #menuScreen .tt-menu-leaderboard-copy strong{font-size:9.2px!important}
  #menuScreen .tt-menu-leaderboard-copy small{font-size:5.8px!important;margin-top:2px!important}
  #menuScreen .tt-menu-leaderboard-btn>b{font-size:14px!important}

  /* Featured Explorers: shorter pill but preserve all three preview cards. */
  #menuScreen .tt-native-featured-card{
    bottom:4px!important;
    height:54px!important;
    padding:4px!important;
    gap:5px!important;
    border-radius:13px!important;
  }
  #menuScreen .tt-native-featured-copy{
    padding:5px 5px 4px 6px!important;
    border-radius:9px!important;
  }
  #menuScreen .tt-native-featured-copy small{font-size:5.2px!important;letter-spacing:.11em!important}
  #menuScreen .tt-native-featured-copy strong{margin-top:2px!important;font-size:8.6px!important;line-height:1.02!important}
  #menuScreen .tt-native-featured-copy > span{right:5px!important;bottom:5px!important;font-size:11px!important}
  #menuScreen .tt-native-featured-list{gap:3px!important}
  #menuScreen .tt-native-featured-avatar{
    height:46px!important;
    padding:1px 1px 9px!important;
    border-radius:9px!important;
  }
  #menuScreen .tt-native-featured-avatar > span{
    left:2px!important;
    right:2px!important;
    bottom:1px!important;
    height:8px!important;
    font-size:4.7px!important;
  }

  /* Resume/Abandon states remain usable on short phones. They take the slot
     directly above the Malaysia Day card and deliberately reduce avatar height. */
  #menuScreen #soloResumeCard.tt-solo-resume-card:not(.hidden),
  #menuScreen #multiplayerResumeCard.tt-solo-resume-card:not(.hidden){
    bottom:265px!important;
    height:44px!important;
    min-height:44px!important;
    padding:4px 5px!important;
    grid-template-columns:28px minmax(0,1fr) auto!important;
    gap:4px!important;
  }
  #menuScreen #soloResumeCard .tt-solo-resume-icon,
  #menuScreen #multiplayerResumeCard .tt-solo-resume-icon{
    width:27px!important;
    height:27px!important;
    font-size:14px!important;
  }
  #menuScreen #soloResumeCard .tt-solo-resume-copy small,
  #menuScreen #multiplayerResumeCard .tt-solo-resume-copy small{font-size:4.9px!important}
  #menuScreen #soloResumeCard .tt-solo-resume-copy strong,
  #menuScreen #multiplayerResumeCard .tt-solo-resume-copy strong{font-size:8.6px!important}
  #menuScreen #soloResumeCard .tt-solo-resume-actions,
  #menuScreen #multiplayerResumeCard .tt-solo-resume-actions{
    grid-template-columns:repeat(2,46px)!important;
    gap:3px!important;
  }
  #menuScreen #soloResumeCard .tt-solo-resume-actions .btn,
  #menuScreen #multiplayerResumeCard .tt-solo-resume-actions .btn{
    width:46px!important;
    min-width:46px!important;
    height:28px!important;
    min-height:28px!important;
    font-size:7.1px!important;
  }
  #menuScreen.has-solo-resume .tt-lobby-character,
  #menuScreen.has-multiplayer-resume .tt-lobby-character{
    top:136px!important;
    bottom:314px!important;
  }
}

/* Very short legacy phones get one final density step without hiding features. */
@media (max-width:600px) and (orientation:portrait) and (max-height:640px){
  #menuScreen .tt-lobby-copy h1{top:21px!important;font-size:23px!important}
  #menuScreen .tt-player-summary{top:86px!important;height:40px!important;min-height:40px!important}
  #menuScreen .tt-player-portrait{width:31px!important;height:31px!important}
  #menuScreen .tt-lobby-character{top:128px!important;bottom:258px!important}
  #menuScreen .tt-lobby-character .pro-avatar-stage img,
  #menuScreen .tt-lobby-character .tt-menu-hero-image{transform:translateY(3px) scale(1.12)!important}
  #menuScreen .tt-malaysia-day-event-card{bottom:208px!important;height:42px!important;min-height:42px!important}
  #menuScreen .tt-play-now{bottom:158px!important;height:44px!important;min-height:44px!important}
  #menuScreen .tt-native-mode-dock{bottom:103px!important;height:49px!important}
  #menuScreen .tt-native-mode-tile{height:39px!important}
  #menuScreen .tt-main-leaderboard-action{bottom:61px!important;height:35px!important}
  #menuScreen .tt-main-leaderboard-action .tt-menu-leaderboard-btn{height:35px!important;min-height:35px!important}
  #menuScreen .tt-native-featured-card{height:51px!important}
  #menuScreen .tt-native-featured-avatar{height:43px!important}
  #menuScreen.has-solo-resume .tt-lobby-character,
  #menuScreen.has-multiplayer-resume .tt-lobby-character{bottom:302px!important}
}


/* =========================================================
   RC1.68 — ADMIN MALAYSIA DAY CLAIM VIEW
   Admin-only claim history showing player identity + chosen explorer.
   ========================================================= */
.admin-event-toolbar{display:flex;align-items:center;gap:10px;margin:12px 0 14px;padding:10px 12px;border:1px solid rgba(112,197,255,.14);border-radius:14px;background:rgba(5,20,34,.54)}
.admin-event-toolbar label{font-size:10px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;color:#8faec4}
.admin-event-toolbar select{min-width:160px;height:36px;padding:0 34px 0 11px;border-radius:10px;border:1px solid rgba(117,203,255,.18);background:#061726;color:#f3fbff;font-weight:800}
.admin-event-claims-list{display:grid;gap:8px;max-height:52vh;overflow:auto;padding-right:3px}
.admin-event-claim-row{display:grid;grid-template-columns:50px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:10px 11px;border:1px solid rgba(115,202,255,.14);border-radius:15px;background:linear-gradient(145deg,rgba(6,24,40,.82),rgba(4,17,30,.72));box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.admin-event-avatar{width:50px;height:50px;border-radius:13px;overflow:hidden;border:1px solid rgba(115,217,255,.32);background:radial-gradient(circle at 50% 80%,rgba(50,177,255,.28),rgba(3,16,29,.92));display:grid;place-items:center}
.admin-event-avatar img{width:100%;height:100%;object-fit:contain;object-position:center bottom}
.admin-event-avatar.aiman{box-shadow:0 0 18px rgba(70,163,255,.10),inset 0 0 14px rgba(255,206,80,.05)}
.admin-event-avatar.suria{box-shadow:0 0 18px rgba(255,96,114,.08),inset 0 0 14px rgba(255,206,80,.05)}
.admin-event-identity{min-width:0;display:flex;flex-direction:column;gap:2px}
.admin-event-identity strong{font-size:13px;color:#f4fbff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-event-identity span{font-size:10px;color:#9ab0c2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-event-identity small{font-size:8px;color:#708ca1}
.admin-event-choice{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:82px}
.admin-event-choice-pill{display:inline-flex;align-items:center;justify-content:center;min-width:72px;padding:5px 9px;border-radius:999px;border:1px solid rgba(115,211,255,.26);background:rgba(10,36,56,.88);font-size:9px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;color:#dff8ff}
.admin-event-choice-pill.aiman{border-color:rgba(255,207,82,.40);background:linear-gradient(135deg,rgba(32,88,166,.94),rgba(166,117,26,.72))}
.admin-event-choice-pill.suria{border-color:rgba(255,171,89,.42);background:linear-gradient(135deg,rgba(39,91,169,.92),rgba(155,48,74,.72))}
.admin-event-choice small{font-size:7.5px;color:#7e99ad}
.admin-event-open-player{min-height:34px!important;padding:6px 10px!important;font-size:9px!important;border-radius:10px!important}
@media(max-width:720px){
  .admin-event-claim-row{grid-template-columns:44px minmax(0,1fr) auto;gap:9px;padding:9px}
  .admin-event-avatar{width:44px;height:44px}
  .admin-event-open-player{grid-column:2 / -1;width:100%}
  .admin-event-choice{min-width:70px}
  .admin-event-choice-pill{min-width:64px;padding:4px 7px;font-size:8px}
  .admin-event-toolbar{align-items:flex-start;flex-direction:column}
  .admin-event-toolbar select{width:100%}
}


/* =========================================================
   V28 — EQUIPPED AVATAR GAMEPLAY COMPANION
   Uses the unchanged V17 avatar assets. Cosmetic only.
   ========================================================= */
#gameScreen .gameplay-avatar-companion{
  position:absolute;
  right:24px;
  bottom:350px;
  width:clamp(118px,12vw,176px);
  height:clamp(164px,18vw,246px);
  z-index:18;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  opacity:.96;
  transform:translateZ(0);
  transition:opacity .18s ease, transform .18s ease;
}
#gameScreen .gameplay-avatar-companion.hidden{
  display:none!important;
}
#gameScreen .gameplay-avatar-image{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 14px 15px rgba(0,0,0,.44));
  transform-origin:50% 100%;
}
#gameScreen .gameplay-avatar-floor{
  position:absolute;
  z-index:1;
  left:18%;
  right:18%;
  bottom:1px;
  height:13px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(4,10,17,.52),rgba(4,10,17,.16) 54%,transparent 76%);
  filter:blur(2px);
}
/* Keep the companion clearly behind gameplay controls and Street View status UI. */
#gameScreen .street-status,
#gameScreen .mp-waiting-overlay,
#gameScreen .map-dock,
#gameScreen .mobile-map-btn,
#gameScreen .game-report-location-btn{
  isolation:isolate;
}

@media(max-width:820px){
  #gameScreen .gameplay-avatar-companion{
    position:absolute;
    right:calc(12px + var(--tt-safe-right));
    bottom:calc(78px + var(--tt-safe-bottom));
    width:104px;
    height:150px;
    z-index:22;
    opacity:.93;
  }
}

@media(max-width:430px) and (orientation:portrait){
  #gameScreen .gameplay-avatar-companion{
    right:calc(8px + var(--tt-safe-right));
    bottom:calc(72px + var(--tt-safe-bottom));
    width:88px;
    height:130px;
  }
}

@media(max-width:920px) and (orientation:landscape) and (max-height:560px){
  #gameScreen .gameplay-avatar-companion,
  #gameScreen.tt-mobile-landscape-hud .gameplay-avatar-companion{
    right:calc(8px + var(--tt-safe-right));
    bottom:calc(62px + var(--tt-safe-bottom));
    width:82px;
    height:118px;
    opacity:.90;
  }
}

/* On compact older-phone portrait screens, keep Street View as the priority. */
@media(max-width:390px) and (max-height:680px) and (orientation:portrait){
  #gameScreen .gameplay-avatar-companion{
    width:76px;
    height:112px;
    bottom:calc(68px + var(--tt-safe-bottom));
  }
}

@media(prefers-reduced-motion:reduce){
  #gameScreen .gameplay-avatar-companion{transition:none!important}
}


/* V30 — TommyTrace branded player guess marker.
   Uses the user-supplied transparent red pin artwork. Required Google map
   attribution remains untouched. */
.tt-user-map-pin{
  width:24px;
  height:36px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  pointer-events:none;
  transform-origin:50% 100%;
  filter:drop-shadow(0 6px 7px rgba(0,0,0,.34)) drop-shadow(0 0 5px rgba(255,36,42,.42));
}
.tt-user-map-pin img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  user-select:none;
  -webkit-user-drag:none;
}
.tt-user-map-pin.compact{
  width:28px;
  height:42px;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.32)) drop-shadow(0 0 4px rgba(255,36,42,.38));
}
@media(max-width:560px){
  .tt-user-map-pin{width:26px;height:39px}
  .tt-user-map-pin.compact{width:22px;height:33px}
}

/* V31 — premium branded actual-answer marker.
   Uses the user-supplied gold ACTUAL pin so the answer is immediately
   distinguishable from the red player guess marker. */
.tt-actual-map-pin{
  width:42px;
  height:60px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  pointer-events:none;
  transform-origin:50% 100%;
  filter:drop-shadow(0 7px 9px rgba(0,0,0,.38)) drop-shadow(0 0 9px rgba(255,191,38,.62));
}
.tt-actual-map-pin img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  user-select:none;
  -webkit-user-drag:none;
}
 .tt-actual-map-pin.compact{
  width:34px;
  height:49px;
}
@media(max-width:560px){
  .tt-actual-map-pin{width:38px;height:54px}
  .tt-actual-map-pin.compact{width:32px;height:46px}
}

/* V34 — result map polish: premium pin hierarchy, calmer labels and entrance motion. */
.tt-user-map-pin.result-entry,
.tt-actual-map-pin.result-entry{
  opacity:0;
  will-change:transform,opacity;
  animation:ttResultPinIn .52s cubic-bezier(.18,.9,.28,1.18) forwards;
}
.tt-user-map-pin.result-entry{animation-delay:.04s}
.tt-actual-map-pin.result-entry{animation-delay:.14s}
@keyframes ttResultPinIn{
  0%{opacity:0;transform:translateY(-10px) scale(.74)}
  62%{opacity:1;transform:translateY(1px) scale(1.05)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

#resultScreen .result-map-label{
  opacity:0;
  animation:ttResultLabelIn .38s ease-out .18s forwards;
  box-shadow:0 5px 16px rgba(0,0,0,.22);
}
#resultScreen .guess-label{
  color:#fff5f5;
  border-color:rgba(255,104,104,.28);
  background:linear-gradient(135deg,rgba(79,12,17,.90),rgba(28,14,20,.84));
  box-shadow:0 5px 16px rgba(0,0,0,.22),0 0 12px rgba(255,51,59,.12);
}
#resultScreen .actual-label{
  color:#2a1800;
  border-color:rgba(255,239,169,.72);
  background:linear-gradient(135deg,#fff0a4,#f2b52d 66%,#d98a0c);
  box-shadow:0 5px 16px rgba(0,0,0,.22),0 0 15px rgba(255,193,47,.26);
}
@keyframes ttResultLabelIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}

@media(prefers-reduced-motion:reduce){
  .tt-user-map-pin.result-entry,
  .tt-actual-map-pin.result-entry,
  #resultScreen .result-map-label{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
}

/* V35 — Friends, friends-only chat, and opt-in DUEL voice. */
.tt-social-nav-btn{position:relative}
.tt-social-badge,.tt-social-inline-badge{
  display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:linear-gradient(135deg,#ffcf58,#ff9f2f);color:#241200;font-size:10px;font-weight:950;line-height:1;
  box-shadow:0 0 0 2px rgba(5,18,29,.85),0 4px 12px rgba(255,175,53,.28)
}
.tt-social-nav-btn .tt-social-badge{position:absolute;top:-7px;right:-7px}
.tt-social-inline-badge{vertical-align:middle;margin-left:5px;min-width:17px;height:17px;font-size:9px}

.social-modal{z-index:3250}
.social-card{width:min(780px,94vw);max-height:min(760px,90vh);overflow:hidden;padding:24px;display:flex;flex-direction:column}
.social-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-right:34px}
.social-head h2{margin:5px 0 5px;font-size:28px}
.social-total-chip{flex:0 0 auto;display:grid;place-items:center;min-width:86px;padding:10px 14px;border:1px solid rgba(255,205,92,.25);border-radius:15px;background:linear-gradient(180deg,rgba(255,200,72,.12),rgba(255,255,255,.025));box-shadow:inset 0 1px rgba(255,255,255,.08)}
.social-total-chip span{font-size:9px;letter-spacing:.12em;color:#c7b77e;font-weight:900}.social-total-chip strong{font-size:24px;color:#ffe083}
.social-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:19px 0 14px;padding:5px;border-radius:16px;background:rgba(1,11,20,.56);border:1px solid rgba(255,255,255,.07)}
.social-tabs button{min-height:42px;border:0;border-radius:12px;background:transparent;color:#93a9b8;font-weight:850;font-size:12px;cursor:pointer;transition:.18s ease}
.social-tabs button:hover{color:#fff;background:rgba(255,255,255,.045)}
.social-tabs button.active{color:#f1fbff;background:linear-gradient(180deg,rgba(66,210,232,.17),rgba(29,111,150,.11));box-shadow:inset 0 0 0 1px rgba(113,230,244,.18)}
.social-pane{display:none;min-height:350px;max-height:480px;overflow:auto;padding:2px 3px 5px}.social-pane.active{display:block}
.social-list{display:grid;gap:9px}
.social-empty{min-height:92px;padding:22px;border:1px dashed rgba(255,255,255,.10);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#839aa9;gap:5px;background:rgba(255,255,255,.018)}
.social-empty strong{color:#dcecf4}.social-empty span{font-size:11px}
.social-player-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 12px;border:1px solid rgba(255,255,255,.075);border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.015));transition:.16s ease}
.social-player-row:hover{border-color:rgba(102,218,239,.19);background:linear-gradient(135deg,rgba(70,210,235,.055),rgba(255,255,255,.018))}
.social-avatar{width:48px;height:48px;flex:0 0 48px;border-radius:14px;display:inline-grid;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:radial-gradient(circle at 50% 70%,rgba(60,206,225,.18),rgba(4,16,26,.88));box-shadow:0 8px 22px rgba(0,0,0,.24)}
.social-avatar img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.social-player-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.social-player-copy strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#eefaff;font-size:13px}.social-player-copy span{color:#8098a8;font-size:10px;font-weight:700;letter-spacing:.02em}
.social-row-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.social-action{height:34px;padding:0 10px;border-radius:10px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.035);color:#b8cbd6;font-size:10px;font-weight:900;cursor:pointer;white-space:nowrap}.social-action.primary{border-color:rgba(75,222,241,.24);background:linear-gradient(180deg,rgba(51,210,233,.18),rgba(29,118,158,.12));color:#dffbff}.social-action.subtle:hover,.social-action.primary:hover{filter:brightness(1.14)}.social-action.sent{cursor:default;opacity:.66}.social-action:disabled{opacity:.56;cursor:default}
.social-search-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-bottom:10px}.social-search-row input{height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(0,10,18,.58);color:#eefaff;padding:0 13px;outline:none}.social-search-row input:focus{border-color:rgba(80,222,242,.48);box-shadow:0 0 0 3px rgba(80,222,242,.08)}
.social-safety-note{font-size:10px;line-height:1.5;color:#7891a1;padding:0 2px 11px}
#socialStatus{min-height:21px;margin-top:8px}

.social-chat-view{min-height:540px;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:10px}
.social-chat-head{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:10px;padding-right:34px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.07)}
.social-chat-back{width:36px;height:36px;border-radius:11px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.035);color:#dff6ff;font-size:18px;cursor:pointer}.social-chat-head .social-avatar{width:42px;height:42px;flex-basis:42px;border-radius:12px}.social-chat-head>div:nth-of-type(1){min-width:0}.social-chat-head strong{display:block;color:#f3fbff;font-size:14px}.social-chat-head small{display:block;color:#7e96a5;margin-top:2px;font-size:10px}
.social-chat-menu{display:flex;gap:6px}.social-chat-menu button{height:31px;padding:0 9px;border-radius:9px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025);color:#9cb0bd;font-size:9px;font-weight:900;cursor:pointer}.social-chat-menu button.danger{color:#ffb2b2;border-color:rgba(255,83,83,.18)}
.social-message-list{min-height:300px;max-height:480px;overflow:auto;padding:10px 5px 5px;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin}.social-message{max-width:min(78%,520px);display:flex;flex-direction:column;gap:3px}.social-message.mine{align-self:flex-end;align-items:flex-end}.social-message.theirs{align-self:flex-start;align-items:flex-start}.social-message-body{padding:9px 11px;border-radius:14px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.48}.social-message.mine .social-message-body{background:linear-gradient(135deg,rgba(33,186,216,.28),rgba(23,113,160,.23));border:1px solid rgba(96,228,244,.20);color:#ecfdff;border-bottom-right-radius:5px}.social-message.theirs .social-message-body{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.075);color:#dce9f0;border-bottom-left-radius:5px}.social-message small{font-size:8px;color:#617888;padding:0 4px}.social-chat-empty{margin:auto;width:100%}
.social-message-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.07)}.social-message-form input{height:45px;border-radius:13px;border:1px solid rgba(255,255,255,.10);background:rgba(0,10,18,.62);color:#eefaff;padding:0 13px;outline:none}.social-message-form input:focus{border-color:rgba(79,220,241,.45);box-shadow:0 0 0 3px rgba(79,220,241,.07)}.social-message-form button{min-width:82px}.social-chat-foot{display:flex;justify-content:space-between;gap:12px;color:#607988;font-size:9px;min-height:16px}.social-chat-foot [data-kind="error"]{color:#ffaaaa}

.duel-voice-dock{position:fixed;z-index:2450;top:max(86px,calc(env(safe-area-inset-top) + 72px));right:max(16px,env(safe-area-inset-right));width:min(300px,calc(100vw - 28px));padding:10px;border-radius:15px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(145deg,rgba(5,19,31,.94),rgba(7,31,44,.91));box-shadow:0 16px 48px rgba(0,0,0,.34);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:width .18s ease,padding .18s ease,transform .18s ease,opacity .18s ease}
.duel-voice-head{display:flex;align-items:flex-start;justify-content:space-between;gap:9px}.duel-voice-head-main{display:flex;align-items:center;gap:9px;min-width:0;flex:1}.duel-voice-head strong{display:block;color:#eefdff;font-size:10px;letter-spacing:.11em}.duel-voice-head small{display:block;margin-top:2px;color:#7f99a8;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.duel-voice-dot{width:9px;height:9px;border-radius:50%;background:#50616c;box-shadow:0 0 0 4px rgba(255,255,255,.025);flex:0 0 auto}.duel-voice-minimize-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:#d5e8f0;font-size:16px;font-weight:900;cursor:pointer;line-height:1;flex:0 0 auto}.duel-voice-minimize-btn:hover{filter:brightness(1.14)}.duel-voice-dock[data-state="waiting"] .duel-voice-dot,.duel-voice-dock[data-state="connecting"] .duel-voice-dot{background:#f3bf48;box-shadow:0 0 0 4px rgba(243,191,72,.08),0 0 12px rgba(243,191,72,.35)}.duel-voice-dock[data-state="connected"] .duel-voice-dot{background:#58e3ae;box-shadow:0 0 0 4px rgba(88,227,174,.08),0 0 12px rgba(88,227,174,.38)}.duel-voice-dock[data-state="error"] .duel-voice-dot{background:#ff6868}.duel-voice-dock.minimized{width:min(188px,calc(100vw - 16px));padding:8px 9px}.duel-voice-dock.minimized .duel-voice-actions,.duel-voice-dock.minimized .duel-voice-safety{display:none}.duel-voice-dock.minimized .duel-voice-head strong{font-size:9px;letter-spacing:.10em}.duel-voice-dock.minimized .duel-voice-head small{max-width:106px}.duel-voice-dock.minimized .duel-voice-minimize-btn{font-size:14px}
.duel-voice-actions{display:flex;gap:5px;margin-top:8px}.duel-voice-actions button{flex:1;min-width:0;height:31px;padding:0 7px;border-radius:9px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);color:#adc2ce;font-size:9px;font-weight:900;cursor:pointer;white-space:nowrap}.duel-voice-actions button:hover{filter:brightness(1.16)}.duel-voice-actions .duel-voice-join{color:#e8fdff;border-color:rgba(75,223,242,.22);background:linear-gradient(180deg,rgba(45,201,225,.20),rgba(21,112,154,.14))}.duel-voice-actions button.active{color:#ffe09b;border-color:rgba(255,199,74,.22);background:rgba(255,187,55,.08)}.duel-voice-actions button.danger{color:#ffb5b5}.duel-voice-actions button:disabled{opacity:.45;cursor:not-allowed}.duel-voice-dock audio{display:none}

@media(max-width:1120px){.v12-nav .tt-social-nav-btn span:nth-child(2){display:none}.v12-nav .tt-social-nav-btn{min-width:42px}}
@media(max-width:700px){
  .social-card{width:96vw;max-height:92vh;padding:17px 14px;border-radius:20px}.social-head h2{font-size:23px}.social-total-chip{min-width:70px;padding:8px 10px}.social-pane{min-height:320px;max-height:58vh}.social-player-row{grid-template-columns:auto minmax(0,1fr);gap:9px;padding:10px}.social-row-actions{grid-column:1/-1;justify-content:flex-end}.social-row-actions .social-action{min-width:76px}.social-avatar{width:44px;height:44px;flex-basis:44px}.social-chat-view{min-height:66vh}.social-chat-head{grid-template-columns:auto auto minmax(0,1fr);padding-right:28px}.social-chat-menu{grid-column:1/-1;justify-content:flex-end}.social-message{max-width:86%}.social-message-list{max-height:55vh}.social-chat-foot{flex-direction:column;gap:2px}.duel-voice-dock{top:max(74px,calc(env(safe-area-inset-top) + 62px));right:8px;width:min(264px,calc(100vw - 16px));padding:8px}.duel-voice-dock.minimized{width:min(170px,calc(100vw - 12px));padding:7px 8px}.duel-voice-actions button{font-size:8px;padding:0 5px}.duel-voice-head small{max-width:220px}
}
@media(max-width:430px){.social-tabs button{font-size:10px}.social-search-row{grid-template-columns:1fr}.social-search-row button{width:100%}.social-head{gap:8px}.social-total-chip{min-width:62px}.duel-voice-dock{width:min(240px,calc(100vw - 14px));right:7px}.duel-voice-dock.minimized{width:min(160px,calc(100vw - 10px))}.duel-voice-actions{flex-wrap:wrap}.duel-voice-actions button{flex:1 1 46%}}
.duel-voice-safety{display:flex;justify-content:flex-end;gap:7px;margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.055)}
.duel-voice-safety button{border:0;background:transparent;color:#687f8e;font-size:8px;font-weight:850;cursor:pointer;padding:2px 3px}.duel-voice-safety button:hover{color:#b7cbd6}.duel-voice-safety button:last-child:hover{color:#ffaaaa}


/* V37 — social presence, friend game invites, leaderboard friend actions, and room voice mini controls. */
.social-presence{display:inline-flex!important;align-items:center;gap:4px;font-size:9px!important;font-weight:850!important;letter-spacing:.02em!important}
.social-presence.online{color:#69e4b5!important}.social-presence.offline{color:#607784!important}
.social-game-invite-row{border-color:rgba(255,198,73,.16);background:linear-gradient(135deg,rgba(255,188,58,.05),rgba(255,255,255,.018))}
.social-game-invite-meta{color:#d7b66a!important;font-size:9px!important;font-weight:900!important;letter-spacing:.04em!important}
.social-action.invite{border-color:rgba(255,197,73,.20);background:linear-gradient(180deg,rgba(255,196,66,.12),rgba(143,95,16,.08));color:#ffe2a0}.social-action.invite:hover{filter:brightness(1.14)}

.duel-voice-head-main{gap:8px}.duel-voice-head-controls{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.duel-voice-speaking{display:inline-flex;align-items:flex-end;gap:2px;height:14px;margin-left:auto;opacity:.25;transition:opacity .15s ease}
.duel-voice-speaking i{display:block;width:2px;height:5px;border-radius:999px;background:#65e8ba;transform-origin:center bottom}
.duel-voice-speaking i:nth-child(2){height:9px}.duel-voice-speaking i:nth-child(3){height:6px}
.duel-voice-dock.speaking .duel-voice-speaking{opacity:1}.duel-voice-dock.speaking .duel-voice-speaking i{animation:ttVoiceBars .55s ease-in-out infinite alternate}.duel-voice-dock.speaking .duel-voice-speaking i:nth-child(2){animation-delay:.12s}.duel-voice-dock.speaking .duel-voice-speaking i:nth-child(3){animation-delay:.24s}
@keyframes ttVoiceBars{from{transform:scaleY(.55);opacity:.65}to{transform:scaleY(1.35);opacity:1}}
.duel-voice-mini-mute{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:#d5e8f0;font-size:13px;cursor:pointer;line-height:1}.duel-voice-mini-mute[aria-pressed="true"]{color:#ffd98b;border-color:rgba(255,195,73,.22);background:rgba(255,188,58,.08)}
.duel-voice-dock:not(.minimized) .duel-voice-mini-mute{display:none!important}.duel-voice-dock.minimized .duel-voice-speaking{margin-left:2px}.duel-voice-dock.minimized .duel-voice-head-main{gap:6px}.duel-voice-dock.minimized .duel-voice-head-controls{gap:4px}
@media(prefers-reduced-motion:reduce){.duel-voice-dock.speaking .duel-voice-speaking i{animation:none}}

.lb-friend-action{margin-left:7px;min-width:72px;height:28px;padding:0 8px;border-radius:9px;border:1px solid rgba(77,218,239,.20);background:rgba(42,183,214,.09);color:#dffaff;font-size:8px;font-weight:900;cursor:pointer;white-space:nowrap}.lb-friend-action:hover{filter:brightness(1.14)}.lb-friend-action[data-state="friends"],.lb-friend-action[data-state="outgoing"]{border-color:rgba(255,203,84,.16);background:rgba(255,190,58,.055);color:#d8c38d;cursor:default}.lb-friend-action[data-state="incoming"]{border-color:rgba(255,203,84,.22);color:#ffe3a0}.lb-friend-action:disabled{opacity:.68;cursor:default}
@media(max-width:760px){.lb-friend-action{min-width:34px;width:34px;padding:0;font-size:0}.lb-friend-action::after{content:'+';font-size:15px}.lb-friend-action[data-state="friends"]::after{content:'✓';font-size:12px}.lb-friend-action[data-state="outgoing"]::after{content:'…';font-size:13px}.lb-friend-action[data-state="incoming"]::after{content:'!';font-size:12px}}

/* User requested the desktop top-nav Leaderboard shortcut removed. Main-menu Leaderboard remains. */
@media(min-width:821px){#menuScreen #leaderboardNavBtn{display:none!important}}


/* V38 — invite online friends from the active private lobby. */
.lobby-invite-friends-btn{border-color:rgba(92,230,190,.22)!important;color:#dffdf1!important;background:linear-gradient(180deg,rgba(50,211,163,.13),rgba(23,111,95,.08))!important}
.lobby-invite-friends-btn:hover{filter:brightness(1.14)}
.social-room-invite-player{border-color:rgba(92,230,190,.14);background:linear-gradient(135deg,rgba(62,217,174,.045),rgba(255,255,255,.018))}
.social-room-invite-player .social-action.invite{min-width:106px}

/* V38 — gameplay avatar rarity ambience, adapted from the main-menu rarity FX. */
#gameScreen .gameplay-avatar-companion{isolation:isolate;overflow:visible}
#gameScreen .gameplay-avatar-rarity-fx{position:absolute;inset:-9% -12% -2%;z-index:0;pointer-events:none;overflow:visible}
#gameScreen .gameplay-avatar-aura{position:absolute;left:50%;top:48%;width:82%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,var(--gameplay-avatar-glow,rgba(89,214,255,.28)) 0%,color-mix(in srgb,var(--gameplay-avatar-glow,rgba(89,214,255,.28)) 56%,transparent) 32%,transparent 68%);filter:blur(13px);opacity:.72;animation:ttGameplayAvatarAura 2.8s ease-in-out infinite alternate}
#gameScreen .gameplay-rarity-rare .gameplay-avatar-aura{opacity:.58}
#gameScreen .gameplay-rarity-epic .gameplay-avatar-aura{opacity:.78;filter:blur(14px)}
#gameScreen .gameplay-rarity-legendary .gameplay-avatar-aura{opacity:.96;filter:blur(15px)}
#gameScreen .gameplay-avatar-pedestal-glow{position:absolute;left:50%;bottom:2%;width:76%;height:13%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at center,var(--gameplay-avatar-glow,rgba(89,214,255,.34)) 0%,transparent 72%);filter:blur(5px);animation:ttGameplayAvatarPedestal 3.2s ease-in-out infinite}
#gameScreen .gameplay-avatar-particles{position:absolute;inset:6% 5% 7%;overflow:visible}
#gameScreen .gameplay-avatar-particles i{position:absolute;left:var(--x,50%);bottom:var(--y,12%);width:var(--size,4px);height:var(--size,4px);border-radius:999px;background:radial-gradient(circle at 35% 35%,#fff 0 18%,var(--particle-color,#7cecff) 42%,transparent 75%);box-shadow:0 0 8px var(--particle-color,#7cecff),0 0 16px color-mix(in srgb,var(--particle-color,#7cecff) 55%,transparent);opacity:0;animation:ttGameplayAvatarParticle var(--dur,5s) ease-in-out infinite;animation-delay:var(--delay,0s)}
#gameScreen .gameplay-avatar-legendary-rings{position:absolute;left:50%;top:49%;width:80%;aspect-ratio:1;transform:translate(-50%,-50%);filter:drop-shadow(0 0 10px rgba(255,214,111,.22));opacity:.84}
#gameScreen .gameplay-avatar-legendary-rings i{position:absolute;inset:4%;border:1px solid rgba(255,220,126,.48);border-radius:50%;animation:ttGameplayLegendarySpin 11s linear infinite}
#gameScreen .gameplay-avatar-legendary-rings i:nth-child(2){inset:19%;border-style:dashed;animation-direction:reverse;animation-duration:8s}
#gameScreen .gameplay-avatar-legendary-rings b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#ffe18a;font-size:14px;text-shadow:0 0 10px rgba(255,225,138,.72);animation:ttGameplayLegendaryCrest 2.4s ease-in-out infinite}
#gameScreen .gameplay-avatar-image{z-index:2}
#gameScreen .gameplay-avatar-floor{z-index:1}
@keyframes ttGameplayAvatarAura{from{transform:translate(-50%,-50%) scale(.94);opacity:.55}to{transform:translate(-50%,-50%) scale(1.04);opacity:.95}}
@keyframes ttGameplayAvatarPedestal{0%,100%{transform:translateX(-50%) scale(1);opacity:.68}50%{transform:translateX(-50%) scale(1.08);opacity:1}}
@keyframes ttGameplayAvatarParticle{0%{opacity:0;transform:translate3d(0,5px,0) scale(.7)}18%{opacity:.95}58%{opacity:.65}100%{opacity:0;transform:translate3d(var(--drift,0px),-72px,0) scale(1.08)}}
@keyframes ttGameplayLegendarySpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes ttGameplayLegendaryCrest{0%,100%{transform:translate(-50%,-50%) scale(.92);opacity:.72}50%{transform:translate(-50%,-50%) scale(1.12);opacity:1}}
@media(max-width:820px){#gameScreen .gameplay-avatar-rarity-fx{inset:-7% -10% -2%}#gameScreen .gameplay-avatar-particles i:nth-child(n+9){display:none}}
@media(max-width:430px){#gameScreen .gameplay-avatar-particles i:nth-child(n+7){display:none}#gameScreen .gameplay-avatar-legendary-rings b{font-size:11px}}
@media(prefers-reduced-motion:reduce){#gameScreen .gameplay-avatar-aura,#gameScreen .gameplay-avatar-pedestal-glow,#gameScreen .gameplay-avatar-particles i,#gameScreen .gameplay-avatar-legendary-rings i,#gameScreen .gameplay-avatar-legendary-rings b{animation:none!important}}

/* =========================================================
   V40 — PLAYER PROFILE CLOSE BUTTON RIGHT-SIDE FIX
   Keep the Player Profile exit X anchored to the top-right.
   The profile background layering rule makes direct children
   position:relative, so restore absolute positioning here.
   ========================================================= */
#accountModal .account-card > #closeAccountBtn{
  position:absolute!important;
  top:14px!important;
  right:14px!important;
  left:auto!important;
  inset-inline-start:auto!important;
  inset-inline-end:14px!important;
  z-index:30!important;
}
@media(max-width:820px){
  #accountModal .account-card > #closeAccountBtn{
    top:12px!important;
    right:12px!important;
    inset-inline-end:12px!important;
  }
}


/* V42 — Main-menu-first guided tutorial */
#menuScreen .tt-player-summary.tt-tutorial-target,\n#menuScreen .tt-mode-row.tt-tutorial-target,\n#playSetupModal .play-setup-grid.tt-tutorial-target {\n  position: relative;\n  border-radius: 20px;\n}\n#playSetupModal .play-setup-grid.tt-tutorial-target {\n  z-index: 10960 !important;\n}\n@media (max-width: 650px) {\n  #menuScreen .tt-mode-row.tt-tutorial-target { border-radius: 16px; }\n}\n
/* V43 — Portrait-mobile guided tutorial polish */
@media (max-width: 650px) and (orientation: portrait) {
  .tt-tutorial-guide {
    z-index: 12000;
    overflow: hidden;
  }

  .tt-tutorial-card {
    width: auto !important;
    max-width: none !important;
    max-height: min(38dvh, 290px);
    overflow-y: auto;
    padding: 11px 12px 12px;
    border-radius: 16px;
    box-sizing: border-box;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .tt-tutorial-card-docked-top {
    margin-top: max(0px, env(safe-area-inset-top));
  }

  .tt-tutorial-card-docked-bottom {
    margin-top: calc(-1 * max(0px, env(safe-area-inset-bottom)));
  }

  .tt-tutorial-card-top {
    margin-bottom: 5px;
  }

  .tt-tutorial-progress {
    font-size: 9px;
  }

  .tt-tutorial-skip {
    min-height: 28px;
    padding: 2px 4px;
    font-size: 10px;
  }

  .tt-tutorial-card h3 {
    margin-bottom: 4px;
    font-size: 15px;
    line-height: 1.15;
  }

  #tutorialText {
    font-size: 11px;
    line-height: 1.32;
  }

  .tt-tutorial-next {
    min-height: 38px;
    margin-top: 8px;
    padding-block: 7px;
    font-size: 12px;
  }

  .tt-tutorial-modes {
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-top: 6px;
  }

  .tt-tutorial-modes > div {
    display: block;
    padding: 7px 8px;
  }

  .tt-tutorial-modes b,
  .tt-tutorial-modes span {
    display: block;
    text-align: left;
  }

  .tt-tutorial-modes b { font-size: 10px; }
  .tt-tutorial-modes span { margin-top: 2px; font-size: 9px; line-height: 1.2; }

  .tt-tutorial-arrow {
    z-index: 12002;
    font-size: 24px;
    pointer-events: none;
  }

  .tt-tutorial-target {
    z-index: 11950 !important;
    outline-width: 2px !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 9999px rgba(0, 6, 14, .48), 0 0 24px rgba(75, 226, 255, .55) !important;
  }

  /* Keep important portrait gameplay controls above the tutorial dim layer. */
  #gameScreen .mobile-map-btn.tt-tutorial-target,
  #mapModal .guess-btn.tt-tutorial-target,
  #mapModal #largeGuessBtn.tt-tutorial-target {
    z-index: 11960 !important;
  }

  /* Prevent the full Street View/map targets from creating awkward rounded
     outlines across the entire phone viewport. */
  #streetView.tt-tutorial-target,
  #largeMap.tt-tutorial-target,
  #resultMap.tt-tutorial-target {
    outline-offset: -2px !important;
  }
}


/* V44 — Portrait tutorial layout fix */
@media (max-width: 650px) and (orientation: portrait) {
  .tt-tutorial-guide {
    overflow: visible !important;
  }

  .tt-tutorial-card {
    position: fixed !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(31dvh, 230px) !important;
    padding: 10px 12px 11px !important;
    border-radius: 16px !important;
    overflow-y: auto !important;
    box-shadow: 0 12px 34px rgba(0,0,0,.42) !important;
  }

  .tt-tutorial-card-docked-top,
  .tt-tutorial-card-docked-bottom {
    margin: 0 !important;
  }

  .tt-tutorial-card-top {
    margin-bottom: 4px !important;
  }

  .tt-tutorial-progress {
    font-size: 9px !important;
    letter-spacing: .11em !important;
  }

  .tt-tutorial-skip {
    min-height: 24px !important;
    font-size: 10px !important;
  }

  .tt-tutorial-card h3 {
    margin: 0 0 3px !important;
    font-size: 15px !important;
    line-height: 1.12 !important;
  }

  #tutorialText {
    font-size: 10.5px !important;
    line-height: 1.28 !important;
  }

  .tt-tutorial-next {
    min-height: 36px !important;
    margin-top: 7px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
  }

  .tt-tutorial-modes {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin-top: 5px !important;
  }

  .tt-tutorial-modes > div {
    min-width: 0 !important;
    padding: 6px 7px !important;
    border-radius: 10px !important;
  }

  .tt-tutorial-modes b {
    font-size: 9.5px !important;
    white-space: nowrap;
  }

  .tt-tutorial-modes span {
    margin-top: 1px !important;
    font-size: 8.5px !important;
    line-height: 1.15 !important;
  }

  .tt-tutorial-arrow {
    display: none !important;
  }

  /* Avoid darkening the entire hero so heavily on the first menu steps. */
  #menuScreen .tt-tutorial-target {
    box-shadow: 0 0 0 9999px rgba(0, 6, 14, .30), 0 0 20px rgba(75, 226, 255, .55) !important;
  }

  /* The PLAY target lives near the bottom; leave enough space around it. */
  .tt-tutorial-guide[data-tutorial-step="menu-play"] .tt-tutorial-card {
    max-height: min(27dvh, 190px) !important;
  }

  /* Mode explanation should stay compact enough to reveal the highlighted row. */
  .tt-tutorial-guide[data-tutorial-step="menu-modes"] .tt-tutorial-card {
    max-height: min(34dvh, 245px) !important;
  }
}