/* SpintriX V2.9 Phase 2: shared competitive UI presentation. */
.sx-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: currentColor;
}
.sx-icon svg { display: block; width: 100%; height: 100%; }
.sx-icon--lg { width: 28px; height: 28px; }
.sx-icon--sm { width: 16px; height: 16px; }

.panel, .menu, .dialog, .settings-dialog, .profile-dialog {
  border-radius: var(--sx-radius-lg);
}
.panel h2, .settings-content h3, .profile-content h3 {
  font-family: var(--sx-font-display);
  letter-spacing: 0;
}
.title h2, .settings-content h3, .profile-content > section > h3 {
  display: flex;
  align-items: center;
  gap: var(--sx-space-2);
}

.menu-action-grid button, #dailyBtn, #onlineBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sx-space-2);
}
.menu-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.menu-action-grid button {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  align-content: center;
  justify-items: center;
  min-width: 0;
  overflow: hidden;
  gap: 6px;
  padding: 8px;
  text-align: left;
}
.menu-action-grid button .sx-icon { width: 20px; height: 20px; justify-self: center; }
.menu-action-grid button b {
  min-width: 0;
  justify-self: start;
  overflow-wrap: anywhere;
  line-height: 1.15;
}
.menu-action-grid button kbd {
  min-width: 20px;
  padding: 2px 5px;
  border: 1px solid var(--sx-color-active-border);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-color-arena);
  color: var(--sx-color-text-secondary);
  font: 800 10px/14px var(--sx-font-display);
  justify-self: end;
}
.quality-launcher { display: inline-flex; align-items: center; gap: 6px; }
.quality-launcher .sx-icon { color: var(--sx-color-cyan-highlight); }
.menu-action-grid .sx-icon { color: var(--sx-color-cyan-highlight); }
.menu-action-grid button:nth-child(2) .sx-icon,
.menu-action-grid button:nth-child(5) .sx-icon { color: var(--sx-color-purple-highlight); }
.menu-action-grid button span { filter: none; }

/* Sports HUD: stable side lanes and a dominant central score cluster. */
.hud {
  inset: auto;
  grid-template-columns: minmax(76px, 1fr) minmax(180px, 1.45fr) minmax(76px, 1fr);
  align-items: stretch;
  min-height: 68px;
  gap: 8px;
  text-shadow: none;
}
.hud > div {
  min-width: 0;
  min-height: 68px;
  border: var(--sx-border-width) solid rgba(64, 85, 117, .72);
  border-radius: var(--sx-radius-md);
  background: rgba(5, 7, 13, .82);
}
.hud-side {
  display: grid;
  align-content: center;
  padding: 9px 12px;
}
.hud-player { border-left: 3px solid var(--sx-color-cyan) !important; }
.hud-rival { border-right: 3px solid var(--sx-color-purple) !important; text-align: right; }
.hud .hud-role {
  margin: 0;
  color: #d6e0f0;
  font: 750 var(--sx-type-micro)/var(--sx-line-micro) var(--sx-font-display);
}
.hud .hud-player-state {
  width: 42px;
  height: 3px;
  margin-top: 8px;
  background: var(--sx-color-cyan);
  box-shadow: var(--sx-glow-ui);
}
.hud-center {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(72px, .65fr);
  align-items: center;
  overflow: hidden;
  border-color: rgba(32, 231, 255, .42) !important;
}
.hud-score, .hud-combo {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 66px;
  padding: 7px 12px;
  text-align: center;
}
.hud-combo { border-left: 1px solid var(--sx-color-border); background: rgba(155, 92, 255, .08); }
.hud #hudScore {
  color: var(--sx-color-text);
  font: 850 34px/34px var(--sx-font-display);
  font-variant-numeric: tabular-nums;
}
.hud #hudCombo { color: var(--sx-color-purple-highlight); font: 800 21px/23px var(--sx-font-display); }
.hud #hudBoss { color: var(--sx-color-purple-highlight); font: 850 25px/27px var(--sx-font-display); font-variant-numeric: tabular-nums; }
.hud #hudLives { color: var(--sx-color-cyan-highlight); font: 850 25px/27px var(--sx-font-display); font-variant-numeric: tabular-nums; }
.hud-side { position: relative; }
.hud-player .hud-player-state { position: absolute; right: 8px; bottom: 8px; width: 20px; height: 3px; }
.hud-rival[data-objective="tour-score"] #hudBoss { color: var(--sx-color-cyan-highlight); font-size: 20px; }
.hud .hud-meta { margin-top: 1px; color: #c0ccdf; font-size: 11px; font-weight: 750; }

/* Shop and cosmetics have distinct state/readability treatments. */
.tabs {
  padding: 3px;
  border: 1px solid var(--sx-color-border);
  border-radius: var(--sx-radius-md);
  background: var(--sx-color-arena);
}
.tabs button { border-color: transparent; background: transparent; }
.tabs button.active {
  border-color: rgba(32, 231, 255, .52);
  background: var(--sx-color-cyan-soft);
  color: var(--sx-color-cyan-highlight);
}
.upgrades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.upgrade {
  min-height: 76px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  padding: 10px;
  border-color: var(--sx-color-border);
  background: var(--sx-color-surface);
}
.upgrade .icon {
  width: 42px;
  height: 42px;
  border-color: rgba(32, 231, 255, .28);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-color-cyan-soft);
  color: var(--sx-color-cyan-highlight);
}
.upgrade .icon .sx-icon { width: 23px; height: 23px; }
.upgrade > span:nth-child(2) { min-width: 0; color: var(--sx-color-text); }
.upgrade small { overflow: hidden; color: var(--sx-color-text-secondary); text-overflow: ellipsis; white-space: nowrap; }
.upgrade .cost { padding-left: 6px; color: var(--sx-color-warning); font-family: var(--sx-font-mono); font-weight: 800; }
.upgrade:disabled { background: rgba(14, 21, 36, .58); }
.skin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.skin {
  position: relative;
  min-height: 92px;
  border-color: var(--sx-color-border);
  background: var(--sx-color-surface);
  color: var(--sx-color-text-secondary);
}
.skin i { width: 42px; height: 24px; border-radius: var(--sx-radius-sm); box-shadow: 0 0 10px color-mix(in srgb, var(--swatch) 38%, transparent); }
.skin.active { border-color: var(--sx-color-cyan); background: var(--sx-color-cyan-soft); color: var(--sx-color-text); }
.skin.active::after {
  content: "EQUIPPED";
  position: absolute;
  top: 5px;
  right: 5px;
  color: var(--sx-color-cyan-highlight);
  font: 800 8px/1 var(--sx-font-display);
}
#profilePanel { border-top-color: rgba(255, 209, 102, .55); }
#profilePanel .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#profilePanel .stat:nth-child(5), #profilePanel .stat:nth-child(6) { border-color: rgba(255, 209, 102, .28); }
#profilePanel .stat:nth-child(7) { border-color: rgba(155, 92, 255, .32); }
#dailyBtn {
  width: 100%;
  margin-top: 10px;
  border-color: rgba(255, 209, 102, .7);
  background: rgba(255, 209, 102, .11);
  color: var(--sx-color-warning);
}
#dailyBtn:disabled { border-color: rgba(67, 217, 156, .35); color: var(--sx-color-success); background: rgba(67, 217, 156, .07); }

/* Profile separates identity, XP, Ranked, daily, stats, frames and achievements. */
.profile-modal { backdrop-filter: none; -webkit-backdrop-filter: none; }
.profile-dialog { border-color: rgba(32, 231, 255, .36); background: var(--sx-color-surface); }
.profile-head {
  border-bottom-color: var(--sx-color-border);
  background: linear-gradient(90deg, rgba(32, 231, 255, .08), transparent 48%, rgba(155, 92, 255, .08));
}
.profile-head > div > span { color: var(--sx-color-cyan-highlight); font: 800 10px/1 var(--sx-font-display); text-transform: uppercase; }
.profile-content { gap: 0; padding: 0 18px 18px; }
.profile-content > section { padding: 16px 0; border-bottom: 1px solid var(--sx-color-border); }
.profile-identity {
  grid-template-columns: auto minmax(0, 1fr) 138px;
  border-left: 3px solid var(--sx-color-cyan);
  padding-left: 14px !important;
  background: linear-gradient(90deg, rgba(32, 231, 255, .07), transparent 58%);
}
.profile-identity h3 { font-size: 23px; }
.profile-level {
  min-height: 82px;
  display: grid;
  align-content: center;
  border: 1px solid rgba(32, 231, 255, .35);
  border-radius: var(--sx-radius-md);
  background: var(--sx-color-cyan-soft);
}
.profile-level strong { color: var(--sx-color-cyan-highlight); font-family: var(--sx-font-display); font-variant-numeric: tabular-nums; }
.profile-xp { background: rgba(255, 209, 102, .035); }
.profile-xp > div:first-child b { color: var(--sx-color-warning); font-family: var(--sx-font-mono); }
.profile-xp-bar { height: 8px; border-radius: var(--sx-radius-sm); background: var(--sx-color-arena); }
.profile-xp-bar i { background: linear-gradient(90deg, #d5a932, var(--sx-color-warning)); }
.profile-summary { grid-template-columns: 1.15fr .85fr; }
.profile-summary > div {
  min-height: 66px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  border-radius: var(--sx-radius-md);
}
.profile-summary > div:first-child { border-color: rgba(255, 209, 102, .34); background: rgba(255, 209, 102, .07); }
.profile-summary > div:last-child { border-color: rgba(32, 231, 255, .25); background: rgba(32, 231, 255, .05); }
.profile-summary .sx-icon { color: var(--sx-color-warning); }
.profile-summary > div:last-child .sx-icon { color: var(--sx-color-cyan); }
.profile-summary span, .profile-summary b { margin: 0; }
.profile-ranked {
  margin: 0 -18px;
  padding: 18px !important;
  border-block: 1px solid rgba(155, 92, 255, .32) !important;
  background: linear-gradient(115deg, rgba(155, 92, 255, .14), rgba(14, 21, 36, .15) 66%);
}
.profile-ranked .profile-section-title h3 { color: var(--sx-color-purple-highlight); }
.profile-ranked-grid { grid-template-columns: 1.2fr 1fr 1fr 1.2fr 1.2fr; }
.profile-ranked-grid > div { border-color: rgba(155, 92, 255, .22); border-radius: var(--sx-radius-sm); background: rgba(5, 7, 13, .44); }
.profile-ranked-grid b { font-family: var(--sx-font-display); font-variant-numeric: tabular-nums; }
.profile-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-block: 1px solid var(--sx-color-border); }
.profile-stats div { padding: 11px 9px; border: 0; border-right: 1px solid var(--sx-color-border); border-radius: 0; background: transparent; }
.profile-stats div:nth-child(5n) { border-right: 0; }
.profile-stats b { color: var(--sx-color-cyan-highlight); font: 800 17px/1.2 var(--sx-font-display); font-variant-numeric: tabular-nums; }
.profile-frame-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.profile-frame-option { min-height: 118px; border-color: var(--sx-color-border); border-radius: var(--sx-radius-md); background: var(--sx-color-surface-elevated); }
.profile-frame-option.selected { border-color: var(--sx-color-cyan); background: var(--sx-color-cyan-soft); }
.profile-achievements { grid-template-columns: 1fr 1fr; }
.profile-achievement { min-height: 58px; border-color: var(--sx-color-border); border-radius: var(--sx-radius-sm); background: transparent; }
.profile-achievement .sx-icon { color: var(--sx-color-text-disabled); }
.profile-achievement.complete { border-color: rgba(67, 217, 156, .42); color: var(--sx-color-success); background: rgba(67, 217, 156, .05); }
.profile-achievement.complete .sx-icon { color: var(--sx-color-success); }

/* Settings uses distinct operational lanes, without changing Settings V2 behavior. */
.settings-launcher { display: inline-grid; place-items: center; }
.settings-launcher .sx-icon { width: 22px; height: 22px; }
.settings-modal { backdrop-filter: none; -webkit-backdrop-filter: none; }
.settings-dialog { width: min(780px, 100%); border-color: rgba(32, 231, 255, .34); background: var(--sx-color-surface); }
.settings-head { background: linear-gradient(90deg, rgba(32, 231, 255, .08), transparent); }
.settings-content { grid-template-columns: 1fr 1fr; gap: 10px; }
.settings-content section { position: relative; overflow: hidden; border-color: var(--sx-color-border); border-radius: var(--sx-radius-md); background: var(--sx-color-arena); }
.settings-content section::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--settings-tone, var(--sx-color-cyan)); }
.settings-content section[data-settings-section="audio"] { --settings-tone: var(--sx-color-warning); }
.settings-content section[data-settings-section="graphics"] { --settings-tone: var(--sx-color-cyan); }
.settings-content section[data-settings-section="controls"] { --settings-tone: var(--sx-color-purple); }
.settings-content section[data-settings-section="display"] { --settings-tone: var(--sx-color-success); }
.settings-content h3 { color: var(--settings-tone, var(--sx-color-cyan)); }
.settings-content h3 .sx-icon { width: 17px; height: 17px; }
.settings-range, .settings-toggle, .settings-field { border-top: 1px solid rgba(42, 56, 82, .58); }
.settings-content h3 + :is(.settings-range, .settings-toggle, .settings-field) { border-top: 0; }
.settings-range output { color: var(--sx-color-warning); font-family: var(--sx-font-mono); }
.settings-toggle i { border-radius: var(--sx-radius-pill); background: var(--sx-color-surface-interactive); }
.settings-toggle input:checked + i { border-color: var(--settings-tone, var(--sx-color-cyan)); background: color-mix(in srgb, var(--settings-tone, var(--sx-color-cyan)) 34%, var(--sx-color-surface-interactive)); }
.settings-segmented { min-width: min(330px, 62%); border: 1px solid var(--sx-color-border); border-radius: var(--sx-radius-md); background: var(--sx-color-surface); }
.settings-segmented button.active { border-color: var(--sx-color-cyan); background: var(--sx-color-cyan-soft); color: var(--sx-color-cyan-highlight); }

/* Multiplayer: competitive arena-first layout with compact operational panels. */
.multiplayer-screen .app { grid-template-columns: minmax(0, 1fr) minmax(350px, 410px); gap: 10px; padding: 10px; }
.multiplayer-screen .side { gap: 8px; }
.multiplayer-screen .panel { padding: 11px 12px; border-radius: var(--sx-radius-md); background: var(--sx-color-surface); box-shadow: none; }
.multiplayer-screen .side > .panel:first-child { border-top: 2px solid var(--sx-color-cyan); }
.multiplayer-screen .side > .panel:first-child h1 { font: 800 20px/1.15 var(--sx-font-display); }
.multiplayer-screen .note { margin-top: 5px; line-height: 1.3; }
.mode-selector { padding: 5px !important; border-color: rgba(155, 92, 255, .32) !important; }
.segmented { border-color: var(--sx-color-border); border-radius: var(--sx-radius-sm); background: var(--sx-color-arena); }
.segmented button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.segmented button.active { border-color: var(--sx-color-cyan); background: var(--sx-color-cyan-soft); color: var(--sx-color-cyan-highlight); }
#rankedModeBtn.active { border-color: var(--sx-color-purple); background: var(--sx-color-purple-soft); color: var(--sx-color-purple-highlight); }
#lobbyPanel { border-left: 3px solid var(--sx-color-cyan); }
.ranked-lobby, .ranked-board { border-left: 3px solid var(--sx-color-purple) !important; background: linear-gradient(115deg, rgba(155, 92, 255, .1), var(--sx-color-surface) 58%) !important; }
.ranked-head { min-height: 54px; }
.ranked-head > b { color: var(--sx-color-text); font: 850 21px/1 var(--sx-font-display); font-variant-numeric: tabular-nums; }
.rank-badge { position: relative; border-radius: var(--sx-radius-sm); padding-left: 30px; background: color-mix(in srgb, var(--rank-tone) 10%, var(--sx-color-arena)); }
.rank-badge::before { content: ""; position: absolute; left: 9px; width: 12px; height: 12px; border: 2px solid currentColor; transform: rotate(45deg); }
.ranked-meta > div { border-color: rgba(155, 92, 255, .2); border-radius: var(--sx-radius-sm); background: rgba(5, 7, 13, .48); }
.ranked-search { min-height: 48px; border-color: var(--sx-color-purple); background: var(--sx-color-purple); color: var(--sx-color-text); box-shadow: var(--sx-glow-purple); }
.ranked-board-row { grid-template-columns: 26px minmax(0, 1fr) auto 58px; min-height: 48px; border-top-color: rgba(155, 92, 255, .17); }
.ranked-board-row > b { color: var(--sx-color-purple-highlight); font-family: var(--sx-font-display); }
.ranked-board-row > strong { color: var(--sx-color-text); font-family: var(--sx-font-mono); }
.ranked-board-row em { color: var(--sx-color-text); font-style: normal; }
.ranked-board-row .country-flag, .player-card .country-flag, .scoreboard .country-flag { width: 24px; height: 16px; }
.player-card b, .scoreboard span { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; }
.room-code { border-radius: var(--sx-radius-sm); color: var(--sx-color-warning); font-family: var(--sx-font-mono); }
.players { gap: 6px; }
.player-card { min-height: 68px; display: grid; align-content: center; border-color: var(--sx-color-border); border-radius: var(--sx-radius-sm); background: var(--sx-color-arena); }
.player-card.me { border-color: var(--sx-color-cyan); }
.player-card.ready { box-shadow: inset 0 0 0 1px rgba(67, 217, 156, .42); }
.vs { color: var(--sx-color-purple-highlight); font: 850 13px/1 var(--sx-font-display); }
.status { border-left: 3px solid var(--sx-color-purple); border-radius: var(--sx-radius-sm); background: var(--sx-color-arena); }
.scoreboard { min-width: 280px; justify-content: center; border-radius: var(--sx-radius-md); border-color: rgba(32, 231, 255, .34); background: rgba(5, 7, 13, .88); backdrop-filter: none; }
.scoreboard b { min-width: 26px; color: var(--sx-color-text); font: 850 26px/1 var(--sx-font-display); font-variant-numeric: tabular-nums; text-align: center; }
.scoreboard > strong { color: var(--sx-color-purple-highlight); }
.dialog { border-color: rgba(32, 231, 255, .38); border-radius: var(--sx-radius-lg); background: var(--sx-color-surface); }
.powers .power { border-radius: var(--sx-radius-sm); }
.chat, .ranked-board { scrollbar-color: var(--sx-color-border-active) var(--sx-color-arena); }

body[data-quality-effective="low"] :is(.upgrade .icon, .ranked-search, .hud-player-state, .skin i) { box-shadow: none; }
body[data-quality-effective="low"] :is(.profile-head, .profile-identity, .profile-ranked, .ranked-lobby, .ranked-board) { background-image: none !important; }
.performance-post-reduced :is(.profile-head, .profile-identity, .profile-ranked, .ranked-lobby, .ranked-board) { background-image: none !important; }

@media (max-width: 860px), (pointer: coarse) {
  .menu-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-action-grid button { grid-template-columns: 20px minmax(0, 1fr); }
  [data-open-settings] kbd { display: none; }
  .hud {
    inset: auto;
    grid-template-columns: minmax(58px, .64fr) minmax(140px, 1.32fr) minmax(84px, 1fr);
    min-height: 58px;
    gap: 5px;
  }
  .hud > div, .hud-score, .hud-combo { min-height: 58px; }
  .hud-side { padding: 7px 8px; }
  .hud .hud-role { font-size: 9px; }
  .hud #hudScore { font-size: 27px; line-height: 28px; }
  .hud #hudCombo { font-size: 17px; line-height: 20px; }
  .hud #hudBoss { font-size: 20px; line-height: 22px; }
  .hud span { font-size: 9px; }
  .upgrades { grid-template-columns: 1fr; }
  #profilePanel .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .multiplayer-screen .app { display: block; height: auto; min-height: 100vh; padding: 8px; }
  .multiplayer-screen .side { margin-top: 8px; }
  .multiplayer-screen .arena { height: 58svh; min-height: 300px; }
  .multiplayer-screen .dialog { width: min(440px, calc(100% - 20px)); padding: 15px; }
  .multiplayer-screen .dialog h2 { font-size: 26px; }
}

@media (max-width: 620px) {
  .settings-content { grid-template-columns: 1fr; }
  .settings-content section { padding: 10px 11px 10px 13px; }
  .settings-field { align-items: stretch; }
  .settings-segmented { width: 100%; min-width: 0; }
  .profile-content { padding-inline: 12px; }
  .profile-identity { grid-template-columns: auto minmax(0, 1fr); padding-left: 10px !important; }
  .profile-level { grid-column: 1 / -1; min-height: 58px; }
  .profile-summary { grid-template-columns: 1fr; }
  .profile-ranked { margin-inline: -12px; padding-inline: 12px !important; }
  .profile-ranked-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-ranked-grid > div:last-child { grid-column: 1 / -1; }
  .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-stats div, .profile-stats div:nth-child(5n) { border-right: 1px solid var(--sx-color-border); border-bottom: 1px solid var(--sx-color-border); }
  .profile-stats div:nth-child(2n) { border-right: 0; }
  .profile-frame-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-achievements { grid-template-columns: 1fr; }
  .ranked-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ranked-meta > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 430px) {
  .hud { inset: auto; grid-template-columns: 54px minmax(132px, 1fr) minmax(80px, .94fr); }
  .hud-side { padding-inline: 6px; }
  .hud-score, .hud-combo { padding-inline: 6px; }
  .hud .hud-player-state { width: 30px; }
  .scoreboard { min-width: 240px; max-width: calc(100% - 20px); }
  .players { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); }
}

@media (pointer: coarse) and (orientation: landscape), (max-width: 860px) and (orientation: landscape) {
  .hud {
    grid-template-columns: minmax(62px, .64fr) minmax(150px, 1.26fr) minmax(120px, 1.18fr);
    min-height: 52px;
  }
  .hud > div, .hud-score, .hud-combo { min-height: 52px; }
  .hud-side { padding-block: 4px; }
  .hud #hudScore { font-size: 24px; line-height: 25px; }
  .hud #hudCombo { font-size: 15px; line-height: 18px; }
  .hud #hudBoss { font-size: 18px; line-height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-xp-bar i, .settings-toggle i, .settings-toggle i::after { transition: none !important; }
}
.reduced-motion .profile-xp-bar i, .reduced-motion .settings-toggle i, .reduced-motion .settings-toggle i::after { transition: none !important; }