/* Premium design layer - loaded after main.css/game.css/lobby.css on every
   page. Adds gradients, glassmorphism, motion and the new nav/hero/loading
   treatments without altering any existing selector's layout behavior. */

:root {
  --gradient-primary: linear-gradient(135deg, var(--accent-teal) 0%, var(--accent-teal-dark) 100%);
  --gradient-dark: linear-gradient(135deg, var(--bg-surface-1) 0%, var(--bg-surface-2) 100%);
  --gradient-gold: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-gold-dark) 100%);
  --gradient-danger: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-red-dark) 100%);
  --gradient-card: linear-gradient(135deg, var(--bg-surface-1) 0%, var(--bg-surface-2) 100%);
}

body {
  font-variant-numeric: tabular-nums;
  animation: tw-page-fade-in 0.2s ease;
  font-size: 14px;
  line-height: 1.6;
}

h1, h2, h3, h4, .title {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.mono, .topbar-pnl-value, .position-row .pnl, table td.mono,
.pnl-value, .coin-balance, .war-rating, .price-display, .timer, .match-pnl,
[class*="balance"], [class*="amount"], [class*="coins"], [class*="rating"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.label, .stat-label, .section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

@keyframes tw-page-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---- glassmorphism ---------------------------------------------------------- */

.panel,
.sabotage-panel,
.leaderboard-panel,
.trading-panel,
.room-code-panel,
.chat-panel {
  background: var(--overlay-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-normal);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ---- buttons: gradient + glow + press state -------------------------------- */

.btn {
  transition: transform 0.08s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.btn:active {
  transform: scale(0.97);
}

/* Primary/CTA buttons are always GOLD (COD-style menu chrome) - --grad-gold-btn
   is a theme variable, not tied to the legacy "teal" name, so this can't
   accidentally end up sharing --gradient-primary's teal/buy meaning. */
.btn-primary {
  background: var(--grad-gold-btn);
  color: var(--btn-cta-text);
  border: none;
}

.btn-buy {
  background: linear-gradient(135deg, var(--buy-color) 0%, var(--buy-color-dark) 100%);
  border: none;
}

.btn-buy:hover {
  box-shadow: 0 0 20px var(--teal-glow);
}

.btn-sell {
  background: var(--gradient-danger);
  border: none;
}

.btn-sell:hover {
  box-shadow: 0 0 20px var(--red-glow);
}

/* ---- P&L flash on change (JS toggles these classes briefly) ---------------- */
/* tw-flash-up is kept as a fixed teal/green, NOT var(--teal-glow) - Combat
   repoints --teal to crimson red, which would make a price going UP flash
   red (reads as a loss). tw-flash-down is safe to theme since --red/--sell
   never diverge from "danger" across themes. */

@keyframes tw-flash-up {
  0% { background-color: rgba(0, 200, 150, 0.35); }
  100% { background-color: transparent; }
}

@keyframes tw-flash-down {
  0% { background-color: var(--red-glow); }
  100% { background-color: transparent; }
}

.tw-flash-up { animation: tw-flash-up 0.6s ease; }
.tw-flash-down { animation: tw-flash-down 0.6s ease; }

/* ---- micro animations: coin balance, pnl tick, rank change ----------------- */

@keyframes tw-coin-flash {
  0% { color: var(--text-secondary); }
  50% { color: var(--accent-gold); text-shadow: 0 0 15px var(--glow-gold); }
  100% { color: var(--text-primary); }
}
.coin-flash { animation: tw-coin-flash 0.6s ease; }

@keyframes tw-pnl-update {
  0% { opacity: 1; }
  50% { opacity: 0.6; }
  100% { opacity: 1; }
}
.pnl-update { animation: tw-pnl-update 0.3s ease; }

@keyframes tw-rank-slide-up {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes tw-rank-slide-down {
  from { transform: translateY(-10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.rank-slide-up { animation: tw-rank-slide-up 0.25s ease; }
.rank-slide-down { animation: tw-rank-slide-down 0.25s ease; }

/* ---- War Lord username treatment (wherever a War Lord's name is shown) ----- */

.tw-name-warlord {
  color: var(--accent-gold);
  text-shadow: 0 0 20px var(--glow-gold);
}

/* ---- leaderboard row motion + medal glow ----------------------------------- */

.leaderboard-table tr {
  transition: transform 0.3s ease;
}

@keyframes tw-row-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.leaderboard-table tbody tr {
  animation: tw-row-in 0.25s ease;
}

.leaderboard-table tr.rank-1 {
  box-shadow: inset 3px 0 0 var(--gold);
  background: linear-gradient(90deg, var(--gold-subtle), transparent 60%);
}

.leaderboard-table tr.rank-2 {
  box-shadow: inset 3px 0 0 #c0c0c0;
  background: linear-gradient(90deg, rgba(192, 192, 192, 0.1), transparent 60%);
}

.leaderboard-table tr.rank-3 {
  box-shadow: inset 3px 0 0 #cd7f32;
  background: linear-gradient(90deg, rgba(205, 127, 50, 0.1), transparent 60%);
}

/* ---- timer pulse under 60s -------------------------------------------------- */

.topbar-timer.low {
  animation: tw-timer-pulse 1s infinite;
}

@keyframes tw-timer-pulse {
  0%, 100% { color: var(--sell); text-shadow: 0 0 12px var(--red-glow); }
  50% { color: var(--red-bright); text-shadow: 0 0 4px var(--red-glow); }
}

/* ---- gradient P&L text ------------------------------------------------------ */

.tw-pnl-gradient-up {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tw-pnl-gradient-down {
  background: var(--gradient-danger);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- nav bar ----------------------------------------------------------------- */

.tw-navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--overlay-soft);
  flex-wrap: wrap;
}

.tw-navbar .tw-logo-link {
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 2px;
  text-decoration: none;
}

.tw-navbar .tw-logo-link .grad {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tw-nav-links {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}

.tw-notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--badge-red);
  color: var(--btn-danger-text);
  font-size: 9px;
  font-weight: 800;
  min-width: 14px;
  height: 14px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

.tw-notif-panel {
  position: absolute;
  top: 54px;
  right: 16px;
  width: 300px;
  max-height: 380px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  z-index: 200;
  padding: 8px;
}

.tw-notif-panel .notif-item {
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}

.tw-notif-panel .notif-item:last-child { border-bottom: none; }
.tw-notif-panel .notif-empty { padding: 16px; text-align: center; color: var(--text-secondary); font-size: 13px; }

.tw-nav-links a {
  position: relative;
  padding: 8px 14px;
  min-height: 40px;
  display: flex;
  align-items: center;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border-radius: 8px;
}

.tw-nav-links a:hover {
  color: var(--text);
  background: var(--overlay-soft);
}

.tw-nav-links a.active {
  color: var(--text);
}

.tw-nav-links a.active::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  background: var(--gradient-primary);
  border-radius: 2px;
}

.tw-nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tw-nav-icon-btn {
  width: 38px;
  height: 38px;
  min-height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-normal);
  background: var(--overlay-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  color: var(--text);
  position: relative;
}

.tw-nav-icon-btn:hover {
  background: var(--overlay-medium);
}

/* Left-side identity cluster: avatar, username, tier icon, rating, and a
   thin progress bar toward the next tier - always visible once logged in,
   sitting right after the logo so the bar reads left-to-right as
   brand -> who you are -> your stuff -> quick actions. */
.tw-nav-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 999px;
}

.tw-nav-identity:hover {
  background: var(--overlay-soft);
}

.tw-nav-identity-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 90px;
}

.tw-nav-identity-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tw-nav-tier {
  font-size: 13px;
  line-height: 1;
}

.tw-nav-progress {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--overlay-soft);
  overflow: hidden;
}

.tw-nav-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: var(--gradient-primary);
  box-shadow: 0 0 4px var(--glow-teal);
  transition: width 0.3s ease;
}

.tw-nav-spacer {
  flex: 1;
}

.tw-login-icon-link {
  text-decoration: none;
}

.tw-account-name {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-account-dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  text-align: left;
  padding: 10px;
  border-radius: 8px;
  border: none;
  background: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.tw-account-dropdown-item:hover {
  background: var(--overlay-soft);
}

.tw-account-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}

.tw-logout-item {
  color: var(--accent);
}

.tw-hamburger {
  display: none;
}

@media (max-width: 900px) {
  .tw-nav-links { display: none; }
  .tw-hamburger { display: flex; }
}

@media (max-width: 480px) {
  /* Keep only what a trader needs at a glance on a phone-width nav bar -
     coin balance, friends, and the hamburger (which already has
     Profile/Settings/logout reachable inside it) - everything else folds
     away since it's one tap from there instead. */
  #twNavIdentity,
  #twNotifBtn,
  #twLogoutBtn {
    display: none !important;
  }
}

.tw-nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.6);
}

.tw-nav-drawer .drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 260px;
  background: var(--surface);
  border-left: 1px solid var(--border-normal);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tw-nav-drawer a {
  padding: 12px 10px;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--text);
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
}

.tw-nav-drawer a:hover {
  background: var(--overlay-soft);
}

/* ---- hero / home page -------------------------------------------------------- */

.tw-hero-section {
  position: relative;
  overflow: hidden;
  padding: 70px 20px 50px 20px;
  text-align: center;
  /* Same background treatment as the logged-out login hero (.tw-login-hero)
     so the two never look like different apps - see the shared ::before/
     ::after ambient glow blobs below. */
  background:
    radial-gradient(ellipse at 30% 60%, var(--teal-subtle) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 40%, var(--gold-subtle) 0%, transparent 50%),
    var(--grad-hero);
}

.tw-hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.tw-hero-candle {
  position: absolute;
  width: 6px;
  border-radius: 1px;
  opacity: 0.35;
}

.tw-hero-candle::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -8px;
  bottom: -8px;
  width: 1px;
  background: var(--candle-color);
  transform: translateX(-50%);
}

.tw-hero-candle.tw-candle-up {
  bottom: -40px;
  animation: tw-float-up linear infinite;
}

.tw-hero-candle.tw-candle-down {
  top: -40px;
  animation: tw-float-down linear infinite;
}

@keyframes tw-float-up {
  from { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.35; }
  90% { opacity: 0.35; }
  to { transform: translateY(-110vh) rotate(8deg); opacity: 0; }
}

@keyframes tw-float-down {
  from { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.35; }
  90% { opacity: 0.35; }
  to { transform: translateY(110vh) rotate(-8deg); opacity: 0; }
}

.tw-hero-content {
  position: relative;
  z-index: 1;
}

.tw-hero-tagline {
  font-size: 18px;
  color: var(--text-secondary);
  margin-top: 10px;
  min-height: 24px;
}

.tw-hero-tagline .tw-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent);
  margin-left: 2px;
  vertical-align: middle;
  animation: tw-caret-blink 1s step-end infinite;
}

@keyframes tw-caret-blink {
  50% { opacity: 0; }
}

.tw-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 900px;
  margin: 34px auto 0 auto;
}

@media (max-width: 700px) {
  .tw-stats-bar { grid-template-columns: repeat(2, 1fr); }
}

.tw-stat-card {
  background: var(--overlay-soft);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-normal);
  border-radius: 10px;
  padding: 16px;
}

.tw-stat-card .value {
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.tw-stat-card .label {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.tw-featured-match {
  max-width: 480px;
  margin: 24px auto 0 auto;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--overlay-soft);
  border: 1px solid var(--border-normal);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* ---- loading screen ----------------------------------------------------------- */

.tw-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--gradient-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.tw-loading-logo {
  font-size: 32px;
  font-weight: 800;
}

.tw-loading-logo .grad {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tw-loading-spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--border-strong);
  border-top-color: var(--accent);
  animation: tw-spin 0.8s linear infinite;
}

@keyframes tw-spin {
  to { transform: rotate(360deg); }
}

.tw-loading-tip {
  color: var(--text-secondary);
  font-size: 13px;
  font-style: italic;
  max-width: 320px;
  text-align: center;
}

/* ---- sabotage card glow when playable ----------------------------------------- */

.sabotage-card {
  background: var(--bg-surface-1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-subtle);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.sabotage-card:not(.used) {
  border: 1px solid var(--gold-border);
  box-shadow: 0 0 10px var(--gold-subtle);
}

.sabotage-card:not(.used):hover {
  border: 1px solid var(--gold);
  box-shadow: 0 0 20px var(--gold-glow);
  transform: translateY(-2px) scale(1.02);
}

.sabotage-card.selected {
  box-shadow: 0 0 0 2px var(--accent), 0 0 16px var(--gold-glow);
}

.sabotage-card.used {
  opacity: 0.35;
  filter: grayscale(80%);
  pointer-events: none;
}

/* ---- responsive nav container helper ------------------------------------------- */

.tw-page-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- trading floor: match screen background + chart glow + active tab --------- */

.game-shell {
  background: var(--gradient-hero);
  background-size: 400% 400%;
  animation: tw-gradient-shift 15s ease infinite;
}

@keyframes tw-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.chart-section {
  border: 1px solid var(--chart-border);
  box-shadow: 0 0 40px var(--gold-subtle) inset;
}

.instrument-tab.active {
  box-shadow: 0 0 15px var(--gold-glow);
  border-bottom: 2px solid var(--accent-teal);
}

/* ---- trading floor: ticker tape ------------------------------------------------ */

.tw-ticker-wrap {
  overflow: hidden;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  padding: 8px 0;
}

.tw-ticker-track {
  display: inline-flex;
  animation: tw-ticker-scroll 45s linear infinite;
}

.tw-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
}

.tw-ticker-item .sym { color: var(--text-secondary); }
.tw-ticker-item .chg.up { color: var(--buy, #00c896); }
.tw-ticker-item .chg.down { color: var(--sell, #ff4444); }

@keyframes tw-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---- full-bleed login (logged-out home screen) ---------------------------------- */

.tw-login-hero {
  position: relative;
  min-height: calc(100vh - 74px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 30% 60%, var(--teal-subtle) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 40%, var(--gold-subtle) 0%, transparent 50%),
    var(--grad-hero);
}

/* Two large, slowly-pulsing ambient glow blobs (spike green / crush red) -
   the base gradient above is too subtle (0.08 alpha) to read as "ambient
   light" on its own, so these sit on top of it for real presence without
   competing with the form for attention (z-index 0, same layer as the
   chart canvas, blurred well past legibility). */
.tw-login-hero::before,
.tw-login-hero::after,
.tw-hero-section::before,
.tw-hero-section::after {
  content: '';
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(70px);
  animation: tw-login-ambient-pulse 7s ease-in-out infinite;
}
.tw-login-hero::before,
.tw-hero-section::before {
  bottom: -18%;
  left: 6%;
  width: 42vw;
  height: 42vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--buy, #00c896) 22%, transparent) 0%, transparent 70%);
}
.tw-login-hero::after,
.tw-hero-section::after {
  bottom: -20%;
  right: 4%;
  width: 38vw;
  height: 38vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--sell, #ff3d5c) 18%, transparent) 0%, transparent 70%);
  animation-delay: 1.2s;
  animation-duration: 8.5s;
}

@keyframes tw-login-ambient-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.18); opacity: 1; }
}

.tw-login-topbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  /* Only .tw-login-version lives here now - the logo was removed since
     #twNav (nav.js) already renders one on every page, this one duplicated
     it. flex-end keeps the version tag pinned to its original top-right spot
     instead of collapsing to flex-start with only one child left. */
  justify-content: flex-end;
  padding: 24px 28px 0;
}

.tw-login-version {
  color: var(--text-muted);
  font-size: 12px;
  font-family: var(--mono);
}

.tw-login-spacer {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 20px;
  min-height: 0;
}

@media (max-width: 700px) {
  .tw-login-spacer { display: none; }
}

.tw-login-bottom {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 0 20px 8px;
}

.tw-login-social-row {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.tw-login-social-row .google-signin-btn,
.tw-login-social-row .apple-signin-btn {
  flex: 1;
  height: 52px;
  min-height: 52px;
  border-radius: 10px;
  background: rgba(20, 20, 30, 0.55);
  border: 1px solid var(--border-normal);
  color: var(--text);
  backdrop-filter: blur(6px);
}

.tw-login-social-row .google-signin-btn:hover,
.tw-login-social-row .apple-signin-btn:hover {
  background: rgba(30, 30, 42, 0.7);
}

.tw-login-bottom input {
  background: rgba(10, 10, 18, 0.6);
  border: 1px solid var(--border-normal);
}

.tw-login-legal-links {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 14px 0 22px;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.tw-login-legal-links a {
  color: var(--accent-gold);
  text-decoration: none;
}

.tw-login-legal-links a:hover {
  text-decoration: underline;
}

.tw-login-legal-links .sep {
  color: var(--accent-teal);
  margin: 0 8px;
}

@media (max-width: 700px) {
  .tw-login-social-row { flex-direction: column; }
}

/* Decorative candlestick chart drawn behind the login hero (see the
   loginChartCanvas script in index.html) - sits under the existing radial
   glow background and above nothing, so it never competes with the real
   form for attention. */
.tw-login-chart-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.3;
  pointer-events: none;
}

.tw-login-headline {
  position: relative;
  z-index: 1;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 600;
  text-align: center;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 auto;
  max-width: 780px;
  padding: 0 20px;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
}

.tw-login-headline .word {
  display: inline-block;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(40%);
  animation: tw-login-headline-in 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes tw-login-headline-in {
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

.tw-login-stats-bar {
  position: relative;
  z-index: 1;
  margin-top: 32px;
}

/* ---- trading floor hub: 3-column layout ------------------------------------------ */

.tw-hub-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 220px;
  gap: 16px;
  align-items: start;
}

@media (max-width: 900px) {
  .tw-hub-grid {
    grid-template-columns: 1fr;
  }
  .tw-hub-left {
    flex-direction: row !important;
    overflow-x: auto;
  }
  .tw-hub-left .tw-hub-card {
    min-width: 200px;
  }
}

.tw-hub-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Used to cap at 480px with overflow-y: auto, which silently clipped
     content with no visible scrollbar the moment there was enough to fill
     it (4 hub cards + partner cards routinely exceeds 480px) - it just
     looked like the extra content wasn't there at all. This column grows
     naturally instead now, same as the center/right hub columns. */
}

.tw-hub-card {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tw-hub-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow);
}

.tw-hub-card-icon {
  font-size: 22px;
  margin-bottom: 6px;
}

.tw-hub-card-title {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.tw-hub-card-meta {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.tw-hub-center {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tw-hub-identity {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tw-hub-identity-meta {
  flex: 1;
  min-width: 0;
}

.tw-hub-identity-name {
  font-size: 18px;
  font-weight: 800;
}

.tw-hub-identity-stats {
  display: flex;
  gap: 14px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.tw-hub-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tw-hub-mode-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, filter 0.15s ease;
}

.tw-hub-mode-btn:hover {
  border-left-color: var(--accent-teal);
  filter: brightness(1.15);
}

.tw-hub-mode-btn .icon {
  font-size: 18px;
}

.tw-hub-mode-btn .meta {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.tw-hub-mode-btn .label {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.03em;
}

.tw-hub-mode-btn .sub {
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tw-hub-start-btn {
  margin-top: 6px;
  padding: 16px 14px;
  border-radius: var(--radius);
  border: none;
  background: var(--gradient-primary);
  color: var(--btn-primary-text);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 0 20px var(--glow-teal);
}

.tw-hub-start-btn:hover {
  filter: brightness(1.08);
}

.tw-hub-private-row {
  margin-top: 4px;
}

/* ---- trading floor hub: staggered card entrance ----------------------------------
   Every interactive card/button in the hub (left-column tournament/battle-pass/
   shop/daily cards, the center identity panel + join row + private war row,
   the right-column mode buttons, the trading partner cards) fades and slides
   up on load, each a beat behind the last, so the hub reads as one cascading
   reveal instead of everything just appearing at once. Hover states (lift,
   border glow, shine sweep) are unchanged - this only covers the initial
   entrance. */
.tw-hub-left > .tw-hub-card,
.tw-hub-center > *,
.tw-hub-right > .tw-hub-mode-btn,
.tw-hub-right > .tw-hub-start-btn,
.tw-partner-card {
  animation: tw-card-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes tw-card-in {
  from { opacity: 0; transform: translateY(28px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.tw-hub-left > .tw-hub-card:nth-child(1) { animation-delay: 0.05s; }
.tw-hub-left > .tw-hub-card:nth-child(2) { animation-delay: 0.16s; }
.tw-hub-left > .tw-hub-card:nth-child(3) { animation-delay: 0.27s; }
.tw-hub-left > .tw-hub-card:nth-child(4) { animation-delay: 0.38s; }
.tw-hub-left > .tw-hub-card:nth-child(5) { animation-delay: 0.49s; }

.tw-hub-center > *:nth-child(1) { animation-delay: 0.08s; }
.tw-hub-center > *:nth-child(2) { animation-delay: 0.2s; }
.tw-hub-center > *:nth-child(3) { animation-delay: 0.32s; }
.tw-hub-center > *:nth-child(4) { animation-delay: 0.44s; }
.tw-hub-center > *:nth-child(5) { animation-delay: 0.56s; }

.tw-hub-right > .tw-hub-mode-btn:nth-child(1) { animation-delay: 0.08s; }
.tw-hub-right > .tw-hub-mode-btn:nth-child(2) { animation-delay: 0.17s; }
.tw-hub-right > .tw-hub-mode-btn:nth-child(3) { animation-delay: 0.26s; }
.tw-hub-right > .tw-hub-mode-btn:nth-child(4) { animation-delay: 0.35s; }
.tw-hub-right > .tw-hub-mode-btn:nth-child(5) { animation-delay: 0.44s; }
.tw-hub-right > .tw-hub-mode-btn:nth-child(6) { animation-delay: 0.53s; }
.tw-hub-right > .tw-hub-start-btn { animation-delay: 0.64s; }

.tw-partner-card:nth-child(1) { animation-delay: 0.08s; }
.tw-partner-card:nth-child(2) { animation-delay: 0.17s; }
.tw-partner-card:nth-child(3) { animation-delay: 0.26s; }
.tw-partner-card:nth-child(4) { animation-delay: 0.35s; }
.tw-partner-card:nth-child(5) { animation-delay: 0.44s; }
.tw-partner-card:nth-child(n+6) { animation-delay: 0.53s; }

/* General-purpose reveal for everything below the hub grid (the activity
   ticker, the leaderboard preview, Recent Activity / Hot Streaks / War Lord
   Spotlight) so the whole page cascades in as one continuous sequence
   instead of the hub grid being the only part that moves. Each element
   sets its own --reveal-delay inline to continue that sequence - see the
   style="--reveal-delay:...' attributes in index.html. */
.tw-reveal {
  animation: tw-card-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--reveal-delay, 0s);
}

/* Corner status badges - LIVE already pulses (its own dot animation);
   NEW/FREE/HOT get a slow shimmer sweep (see .tw-corner-badge.badge-new
   etc. further down, next to their background/gradient definitions) so
   nothing on the hub reads as static once the entrance cascade finishes. */
@keyframes tw-badge-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ---- trading floor hub: bottom activity ticker ----------------------------------- */

.tw-hub-ticker-wrap {
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  white-space: nowrap;
  padding: 10px 0;
  margin-top: 16px;
}

.tw-hub-ticker-track {
  display: inline-flex;
  animation: tw-ticker-scroll 40s linear infinite;
}

.tw-hub-ticker-item {
  display: inline-flex;
  padding: 0 24px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* ---- trading floor: mode action grid -------------------------------------------- */

.tw-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.tw-mode-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  color: var(--text);
  transition: border-color 0.15s, transform 0.15s;
}

.tw-mode-btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.tw-mode-btn .icon { font-size: 24px; margin-bottom: 4px; }
.tw-mode-btn .label { font-weight: 700; font-size: 13px; }
.tw-mode-btn .meta { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

/* ---- trading floor: widgets grid ------------------------------------------------ */

.tw-widgets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 20px;
}

@media (max-width: 900px) {
  .tw-widgets-grid { grid-template-columns: 1fr; }
}

.tw-activity-row, .tw-streak-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.tw-activity-row:last-child, .tw-streak-row:last-child { border-bottom: none; }

.tw-warlord-spotlight {
  text-align: center;
  padding: 10px 0;
}

.tw-warlord-spotlight .crown { font-size: 32px; }
.tw-warlord-spotlight .name { font-weight: 800; font-size: 16px; margin: 4px 0; }
.tw-warlord-spotlight .meta { color: var(--text-secondary); font-size: 12px; }

.tw-daily-widget {
  background: linear-gradient(135deg, var(--gold-subtle), var(--gold-border));
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  margin-top: 16px;
}

/* ---- lottie celebratory overlays ------------------------------------------------ */

.tw-lottie-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.tw-lottie-anim {
  position: absolute;
  width: 400px;
  height: 400px;
  max-width: 90vw;
  max-height: 90vw;
}

.tw-lottie-icon {
  font-size: 72px;
  animation: tw-lottie-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

.tw-lottie-label {
  position: absolute;
  bottom: 30%;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--gold, #ffd700);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  animation: tw-lottie-pop 0.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes tw-lottie-pop {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ---- broker partners: interactive cards below Private War in the hub center --- */

.tw-partners-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin: 16px 0 8px 2px;
}

/* Fills the space below the Private War row that's otherwise left empty -
   the hub grid uses align-items: start (each column keeps its own natural
   height, none stretch to match the tallest), so this can't rely on flex-
   grow to match the left/right columns; sized generously enough on its own
   (2-wide, tall cards) to read as intentional rather than left over. */
.tw-partner-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.tw-partner-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, var(--radius));
  padding: 26px 16px;
  min-height: 168px;
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.tw-partner-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow);
}

/* Slow diagonal light sweep - purely decorative "alive" feel, runs
   continuously but subtly so it reads as premium rather than distracting. */
.tw-partner-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.09) 50%, transparent 60%);
  background-size: 250% 250%;
  animation: tw-partner-shine-sweep 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes tw-partner-shine-sweep {
  0% { background-position: 200% 0%; }
  100% { background-position: -100% 0%; }
}

.tw-partner-logo {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.tw-partner-logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  font-weight: 800;
  font-size: 18px;
  color: var(--text-secondary);
}

.tw-partner-name {
  position: relative;
  z-index: 1;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
}

.tw-corner-badge.badge-partner { background: var(--badge-red); }

.tw-partner-card.tier-title {
  border-color: var(--gold, #ffd700);
  box-shadow: 0 0 0 1px var(--gold-subtle, rgba(255, 215, 0, 0.15));
}
.tw-partner-card.tier-title .badge-partner {
  background: linear-gradient(135deg, var(--gold, #ffd700), var(--warning, #ff8c00));
  color: #241300;
}
.tw-partner-card.tier-title .tw-partner-logo,
.tw-partner-card.tier-title .tw-partner-name { font-weight: 800; }

.tw-partner-card.tier-official { border-color: var(--accent-teal, var(--accent)); }
.tw-partner-card.tier-official .badge-partner { background: var(--accent-teal, var(--accent)); color: var(--btn-primary-text); }

.tw-partner-card.tier-featured .tw-partner-name { color: var(--text-secondary); font-weight: 600; }
.tw-partner-card.tier-featured .badge-partner { background: var(--surface-3); color: var(--text-secondary); }

/* ---- friends panel (Block 12, COD style) ----------------------------------------- */

.tw-friends-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 260px;
  height: 100vh;
  background: rgba(10, 10, 20, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid var(--overlay-medium);
  z-index: 300;
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform 0.2s ease;
}

.tw-friends-panel.collapsed { transform: translateX(260px); }

/* The panel is a tray, not a layout column: closed by default, slides in
   over the page on demand (same pattern as the hamburger drawer), and never
   shifts or resizes page content. This backdrop only exists while open, so
   clicking anywhere outside the tray closes it. */
.tw-friends-panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 290;
  background: transparent;
}

.tw-friends-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.tw-friends-panel-header h3 { margin: 0; font-size: 15px; }

.tw-friends-panel-body { flex: 1; overflow-y: auto; padding: 12px; }

.tw-friends-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
  margin: 14px 0 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: default;
}

.tw-friends-section-label.collapsible { cursor: pointer; }

.tw-friend-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
}

.tw-friend-card-top { display: flex; align-items: center; gap: 8px; }

.tw-friend-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  color: var(--btn-primary-text);
  flex-shrink: 0;
  position: relative;
}

.tw-friend-status-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid rgba(10, 10, 20, 0.95);
}

.tw-friend-status-dot.online { background: var(--buy); }
.tw-friend-status-dot.in_lobby { background: var(--gold); }
.tw-friend-status-dot.in_match { background: var(--red); }
.tw-friend-status-dot.offline { background: var(--neutral); }

.tw-friend-name { font-weight: 700; font-size: 13px; line-height: 1.2; }
.tw-friend-meta { font-size: 11px; color: var(--text-secondary); line-height: 1.3; }
.tw-friend-status-text { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }

.tw-friend-actions { display: flex; gap: 6px; margin-top: 8px; }
.tw-friend-actions button {
  flex: 1;
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.tw-friend-actions button.primary { background: var(--gradient-primary); color: var(--btn-primary-text); border-color: transparent; font-weight: 700; }

.tw-friends-empty { font-size: 12px; color: var(--text-secondary); padding: 8px 0; }

.tw-friends-toggle-btn { position: relative; }
.tw-friends-online-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  background: var(--accent);
  color: var(--btn-primary-text);
  font-size: 9px;
  font-weight: 800;
  min-width: 14px;
  height: 14px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

@media (max-width: 900px) {
  .tw-friends-panel { width: 85vw; max-width: 320px; transform: translateX(100%); }
  .tw-friends-panel:not(.collapsed) { transform: translateX(0); }
}

/* ---- add friend search modal ----------------------------------------------------- */

.tw-search-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
}

.tw-search-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  width: 380px;
  max-width: 92vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.tw-search-modal input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  margin-bottom: 12px;
}

.tw-search-results { overflow-y: auto; flex: 1; }

.tw-search-result-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
}

.tw-search-result-row:last-child { border-bottom: none; }

/* ---- battle invite popups (COD style) --------------------------------------------- */

.tw-invite-stack {
  position: fixed;
  bottom: 20px;
  right: 280px;
  z-index: 600;
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
}

@media (max-width: 900px) {
  .tw-invite-stack { right: 16px; }
}

.tw-invite-popup {
  width: 320px;
  max-width: 88vw;
  background: rgba(10, 14, 12, 0.97);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  animation: tw-invite-slide-up 0.3s ease;
}

.tw-invite-popup.declining { animation: tw-invite-fade-out 0.3s ease forwards; }
.tw-invite-popup.accepting { animation: tw-invite-flash-green 0.4s ease forwards; }

@keyframes tw-invite-slide-up {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes tw-invite-fade-out {
  to { transform: translateY(20px); opacity: 0; }
}

/* Fixed green, not var(--teal-glow) - same reasoning as tw-flash-up: an
   "invite accepted" confirmation must never render as red in Combat. */
@keyframes tw-invite-flash-green {
  0% { box-shadow: 0 0 0 0 rgba(0, 200, 150, 0.6); }
  100% { box-shadow: 0 0 0 20px rgba(0, 200, 150, 0); opacity: 0; transform: scale(0.96); }
}

.tw-invite-title { font-weight: 800; font-size: 13px; letter-spacing: 0.5px; color: var(--accent); margin-bottom: 8px; }
.tw-invite-body { display: flex; gap: 10px; margin-bottom: 10px; }
.tw-invite-body .name { font-weight: 700; font-size: 14px; }
.tw-invite-body .sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.tw-invite-progress-wrap { background: var(--surface-2); border-radius: 999px; height: 6px; overflow: hidden; margin-bottom: 4px; }
.tw-invite-progress-bar { height: 100%; background: var(--gradient-primary); transition: width 1s linear; }
.tw-invite-expiry-label { font-size: 10px; color: var(--text-secondary); margin-bottom: 10px; }
.tw-invite-actions { display: flex; gap: 8px; }
.tw-invite-actions button { flex: 1; padding: 8px; border-radius: 8px; font-weight: 700; font-size: 12px; cursor: pointer; border: none; }
.tw-invite-actions .accept { background: var(--gradient-primary); color: var(--btn-primary-text); }
.tw-invite-actions .decline { background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border); }

/* ---- lobby loadout modal (Block 12, Part D) --------------------------------------- */

.tw-loadout-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
  padding: 20px;
}

.tw-loadout-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  width: 640px;
  max-width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.tw-loadout-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tw-loadout-tabs button { padding: 8px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-secondary); cursor: pointer; font-weight: 600; font-size: 13px; }
.tw-loadout-tabs button.active { background: var(--gradient-primary); color: var(--btn-primary-text); border-color: transparent; }
.tw-loadout-body { overflow-y: auto; flex: 1; }

.tw-loadout-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tw-loadout-card { background: var(--surface-2); border: 2px solid var(--border); border-radius: var(--radius); padding: 12px; text-align: center; position: relative; }
.tw-loadout-card.dealt { border-color: var(--accent); }
.tw-loadout-card.dimmed { opacity: 0.4; }
.tw-loadout-card.selectable { cursor: pointer; }
.tw-loadout-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tw-loadout-card .icon { font-size: 26px; margin-bottom: 4px; }
.tw-loadout-card .name { font-weight: 700; font-size: 12px; }
.tw-loadout-card .type-badge { font-size: 9px; text-transform: uppercase; color: var(--text-secondary); margin: 3px 0; }
.tw-loadout-card .desc { font-size: 10px; color: var(--text-secondary); }
.tw-loadout-card .played-count { font-size: 10px; color: var(--gold); margin-top: 4px; }
.tw-loadout-card .selected-check { position: absolute; top: 6px; right: 6px; color: var(--accent); font-weight: 800; }

.tw-loadout-skins-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tw-loadout-skin-slot { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; text-align: center; }
.tw-loadout-skin-slot .slot-label { font-size: 10px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 6px; }
.tw-loadout-skin-slot .slot-value { font-weight: 700; margin-bottom: 8px; }

.tw-loadout-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tw-loadout-stat-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; text-align: center; }
.tw-loadout-stat-card .value { font-size: 20px; font-weight: 800; }
.tw-loadout-stat-card .label { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

.tw-opponent-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; }
.tw-opponent-card .opp-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tw-opponent-card .opp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 12px; color: var(--text-secondary); }

.tw-invite-friends-list { max-height: 320px; overflow-y: auto; }
.tw-invite-friend-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.tw-invite-friend-row:last-child { border-bottom: none; }

/* ============================================================
   Cosmetics: avatar frames, nameplate effects, profile backgrounds
   ============================================================ */

.tw-avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.tw-avatar-circle {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--btn-primary-text);
  overflow: hidden;
}
.tw-avatar-frame {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
}
.tw-avatar-frame.frame-none { display: none; }
.tw-avatar-frame.frame-basic { border: 2px solid rgba(255, 255, 255, 0.3); }

.tw-avatar-frame.frame-teal-ring {
  border: 3px solid var(--accent-teal, #00c896);
  box-shadow: 0 0 10px rgba(0, 200, 150, 0.5), inset 0 0 10px rgba(0, 200, 150, 0.1);
  animation: twFrameTealPulse 2s ease-in-out infinite;
}
@keyframes twFrameTealPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(0, 200, 150, 0.5); }
  50% { box-shadow: 0 0 20px rgba(0, 200, 150, 0.8); }
}

.tw-avatar-frame.frame-gold-sparkle {
  border: 3px solid var(--gold, #ffd700);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
  animation: twFrameGoldSpin 3s linear infinite;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 215, 0, 0.3) 30deg, transparent 60deg, transparent 360deg);
}
@keyframes twFrameGoldSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.tw-avatar-frame.frame-fire-ring {
  border: 3px solid var(--accent-red, #ff4444);
  box-shadow: 0 0 20px rgba(255, 68, 68, 0.7), 0 0 40px rgba(255, 140, 0, 0.3);
  animation: twFrameFirePulse 0.8s ease-in-out infinite;
}
@keyframes twFrameFirePulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 68, 68, 0.7); }
  50% { box-shadow: 0 0 30px rgba(255, 140, 0, 0.9); }
}

.tw-avatar-frame.frame-war-lord-crown {
  border: 3px solid var(--gold, #ffd700);
  background: conic-gradient(#ffd700, #ffa500, #ffd700, #ff8c00, #ffd700);
  animation: twFrameCrownRotate 4s linear infinite;
  -webkit-mask: radial-gradient(circle at center, transparent 60%, black 62%);
  mask: radial-gradient(circle at center, transparent 60%, black 62%);
}
@keyframes twFrameCrownRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Nameplate effects - applied directly to username text nodes */
.tw-nameplate.nameplate-standard { color: inherit; }

.tw-nameplate.nameplate-flame {
  background: linear-gradient(90deg, #ff4444, #ff8c00, #ffd700, #ff8c00, #ff4444);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: twNameplateMove 2s linear infinite;
}

.tw-nameplate.nameplate-lightning {
  background: linear-gradient(90deg, #4fc3f7, #ffffff, #ffd700, #ffffff, #4fc3f7);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: twNameplateMove 1.5s linear infinite;
}

.tw-nameplate.nameplate-matrix-rain {
  color: #00ff88;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
  font-family: var(--mono);
}

.tw-nameplate.nameplate-rainbow {
  background: linear-gradient(90deg, #ff4444, #ff8c00, #ffd700, #00c896, #4fc3f7, #a855f7);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: twNameplateMove 3s linear infinite;
}

@keyframes twNameplateMove { to { background-position: 200% center; } }

/* Profile backgrounds - applied to the profile header card */
.tw-profile-header { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.tw-profile-header.profile-bg-terminal-dark { background: linear-gradient(135deg, #080810 0%, #0f1018 100%); }

.tw-profile-header.profile-bg-neon-city { background: linear-gradient(135deg, #0a0820 0%, #1a0840 50%, #0a0820 100%); }
.tw-profile-header.profile-bg-neon-city::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 200, 150, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 200, 150, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
}

.tw-profile-header.profile-bg-gold-rush { background: linear-gradient(135deg, #1a1000 0%, #2a1800 50%, #1a1000 100%); }
.tw-profile-header.profile-bg-gold-rush::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.1) 0%, transparent 60%);
  pointer-events: none;
}

.tw-profile-header.profile-bg-deep-space { background: linear-gradient(135deg, #000008 0%, #040020 50%, #000008 100%); }
.tw-profile-header.profile-bg-deep-space::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, white, transparent),
    radial-gradient(1px 1px at 27% 68%, white, transparent),
    radial-gradient(1px 1px at 42% 15%, white, transparent),
    radial-gradient(1px 1px at 58% 78%, white, transparent),
    radial-gradient(1px 1px at 73% 34%, white, transparent),
    radial-gradient(1px 1px at 88% 58%, white, transparent),
    radial-gradient(1px 1px at 15% 88%, white, transparent),
    radial-gradient(1px 1px at 63% 8%, white, transparent);
  opacity: 0.6;
  pointer-events: none;
}

.tw-profile-header.profile-bg-blood-red-market { background: linear-gradient(135deg, #1a0000 0%, #2a0000 50%, #1a0000 100%); }
.tw-profile-header.profile-bg-blood-red-market::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 70%, rgba(255, 68, 68, 0.15) 0%, transparent 50%);
  pointer-events: none;
}

.tw-profile-header > * { position: relative; z-index: 1; }

/* Shop item live cosmetic preview */
.tw-shop-preview { display: flex; align-items: center; justify-content: center; padding: 10px 0; min-height: 50px; }

/* ═══════════════════════════════════════════════════════════════════════
   Shared visual language - used across leaderboard rows, friends panel,
   lobby/pre-match cards, results screens, match feed, home hub cards, etc.
   Kept here (loaded on every page) rather than per-feature CSS files so a
   single tweak stays consistent everywhere it appears.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- player identity badge: [Avatar] [Username] [TierIcon] [Rating] --- */

.tw-player-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}

.tw-player-badge-name {
  font-weight: 600;
}

.tw-player-badge-tier {
  font-size: 13px;
  line-height: 1;
}

.tw-player-badge-rating {
  color: var(--text-secondary);
  font-size: 12px;
}

/* ---- corner status badges (NEW / FREE / LIVE / HOT) -------------------- */

.tw-corner-badge {
  position: absolute;
  top: -6px;
  left: -6px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--btn-danger-text);
  z-index: 2;
  white-space: nowrap;
}

/* Gradients (not flat fills) so the shimmer animation below has something
   to actually animate across - see .tw-corner-badge.badge-new etc. */
.tw-corner-badge.badge-new { background: linear-gradient(135deg, var(--badge-red), var(--warning), var(--badge-red)); }
.tw-corner-badge.badge-free { background: linear-gradient(135deg, var(--badge-red), var(--warning), var(--badge-red)); }
.tw-corner-badge.badge-hot { background: linear-gradient(135deg, var(--warning), var(--badge-red)); }

.tw-corner-badge.badge-new,
.tw-corner-badge.badge-free,
.tw-corner-badge.badge-hot {
  background-size: 200% 100%;
  animation: tw-badge-shimmer 2.4s ease-in-out infinite;
}

.tw-corner-badge.badge-live {
  background: var(--badge-red);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tw-corner-badge.badge-live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: tw-live-pulse 1.2s ease-in-out infinite;
}

@keyframes tw-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Small gold diamond marking anything that costs coins/premium currency */
.tw-premium-diamond {
  color: var(--gold);
  font-size: 11px;
  margin-left: 4px;
}

/* ---- progress bars ------------------------------------------------------ */

.tw-progress-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--overlay-soft);
  overflow: hidden;
}

.tw-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--gradient-primary);
  box-shadow: 0 0 6px var(--glow-teal);
  transition: width 0.3s ease;
}

/* ---- coin display -------------------------------------------------------- */

.tw-coin-value {
  font-family: var(--mono);
  color: var(--gold);
  font-weight: 700;
}

/* ---- time-remaining chips ------------------------------------------------- */

.tw-time-remaining {
  color: var(--accent-gold);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---- skeleton loading shimmer --------------------------------------------- */

.tw-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--overlay-soft);
  border-radius: var(--radius);
  min-height: 14px;
}

.tw-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--overlay-medium), transparent);
  animation: tw-skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes tw-skeleton-shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

/* ---- admin-managed promotional popup (fires once/day after login) -------------- */

.tw-promo-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: tw-page-fade-in 0.2s ease;
}

.tw-promo-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

.tw-promo-image {
  position: absolute;
  inset: 0 0 30% 0;
}

.tw-promo-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  min-height: 180px;
  background: var(--bg);
  padding: 20px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.tw-promo-headline {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
}

.tw-promo-subtext {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.tw-promo-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--gradient-gold);
  color: var(--btn-cta-text);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-decoration: none;
}

.tw-promo-btn:hover {
  filter: brightness(1.06);
}