:root {
  --theme-primary: #53b7ff;
  --theme-secondary: #7c4dff;
  --theme-accent: #22f0ff;
  --theme-hot: #ff6bcb;
  --theme-gold: #ffd25f;
  --theme-shell-top: #0c1630;
  --theme-shell-bottom: #050914;
  --theme-panel-1: rgba(9, 16, 34, 0.88);
  --theme-panel-2: rgba(7, 10, 24, 0.96);
  --theme-border: rgba(111, 170, 255, 0.26);
  --theme-glow: rgba(83, 183, 255, 0.32);
  --theme-shadow: rgba(5, 10, 25, 0.72);
  --theme-text: #f8fbff;
  --theme-muted: #b8c6e4;
  --container-width: min(1340px, calc(100% - 32px));
  --surface-radius: 26px;
  --card-padding: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top, color-mix(in srgb, var(--theme-primary) 24%, transparent), transparent 34%),
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--theme-hot) 24%, transparent), transparent 22%),
    linear-gradient(180deg, var(--theme-shell-top), var(--theme-shell-bottom) 58%, #02040b 100%);
  color: var(--theme-text);
}
a { color: color-mix(in srgb, var(--theme-primary) 72%, white 28%); text-decoration: none; }
a:hover { text-decoration: underline; }
.site-shell { position: relative; min-height: 100vh; overflow-x: hidden; overflow-y: visible; }
.site-backdrop {
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--theme-primary) 16%, transparent), transparent 25%),
    radial-gradient(circle at 84% 8%, color-mix(in srgb, var(--theme-secondary) 18%, transparent), transparent 26%),
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--theme-accent) 12%, transparent), transparent 32%);
  opacity: .95;
}
.site-sparks { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.site-sparks span {
  position: absolute; display: block; width: 9px; height: 9px; border-radius: 999px;
  background: radial-gradient(circle, white 0%, var(--theme-gold) 36%, rgba(255,255,255,0) 72%);
  filter: drop-shadow(0 0 18px var(--theme-glow)); opacity: .7; animation: sparkFloat 14s linear infinite;
}
.site-sparks span:nth-child(1){left:8%; top:18%; animation-duration:13s; animation-delay:-2s}
.site-sparks span:nth-child(2){left:24%; top:72%; animation-duration:18s; animation-delay:-7s}
.site-sparks span:nth-child(3){left:45%; top:10%; animation-duration:16s; animation-delay:-5s}
.site-sparks span:nth-child(4){left:66%; top:78%; animation-duration:20s; animation-delay:-11s}
.site-sparks span:nth-child(5){left:84%; top:24%; animation-duration:15s; animation-delay:-3s}
.site-sparks span:nth-child(6){left:92%; top:58%; animation-duration:17s; animation-delay:-9s}
.container { position: relative; z-index: 1; width: var(--container-width); margin: 0 auto; padding: 24px 0 56px; }
.topbar-wrap { position: sticky; top: 0; z-index: 15; padding-top: 10px; margin-bottom: 20px; }
.topbar {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
  padding: 18px 20px;
  background: linear-gradient(180deg, rgba(8, 14, 30, .86), rgba(8, 11, 24, .92));
  border: 1px solid var(--theme-border);
  border-radius: 26px;
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 60px var(--theme-shadow), inset 0 1px 0 rgba(255,255,255,.05);
}
.brand-area { display: flex; flex-direction: column; gap: 4px; }
.brand-kicker, .hero-kicker {
  display: inline-flex; width: fit-content; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 900; letter-spacing: .18em;
  text-transform: uppercase; color: #fff;
  background: linear-gradient(90deg, color-mix(in srgb, var(--theme-primary) 80%, transparent), color-mix(in srgb, var(--theme-hot) 72%, transparent));
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 10px 26px color-mix(in srgb, var(--theme-primary) 20%, transparent);
}
.brand { font-size: clamp(30px, 4.2vw, 42px); font-weight: 900; letter-spacing: .04em; text-shadow: 0 0 24px color-mix(in srgb, var(--theme-primary) 32%, transparent); }
.topbar-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.topbar-stats { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.topbar-pill {
  display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 999px; font-size: 12px; font-weight: 800;
  color: color-mix(in srgb, var(--theme-text) 94%, white 6%);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
}
.nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.nav a {
  position: relative; padding: 12px 16px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(19, 28, 53, .84), rgba(9, 14, 28, .92));
  border: 1px solid rgba(255,255,255,.08); color: var(--theme-text); font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 20px rgba(0,0,0,.18);
}
.nav a:hover { text-decoration: none; transform: translateY(-1px); }
.card, .player-bar {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--theme-panel-1), var(--theme-panel-2));
  border: 1px solid var(--theme-border);
  border-radius: var(--surface-radius);
  padding: var(--card-padding);
  box-shadow: 0 20px 50px var(--theme-shadow), inset 0 1px 0 rgba(255,255,255,.04);
}
.card::before, .player-bar::before, .hero-card::before, .room-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 8%, transparent), transparent 36%, color-mix(in srgb, var(--theme-secondary) 8%, transparent) 100%);
  opacity: .75;
}
.hero-card {
  padding: 32px; border-radius: 30px;
  background:
    radial-gradient(circle at 80% 10%, rgba(255,255,255,.16), transparent 30%),
    linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 45%, rgba(8,14,30,.92)), color-mix(in srgb, var(--theme-secondary) 40%, rgba(8,14,30,.92)) 54%, rgba(8,12,24,.98));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 28px 70px var(--theme-shadow), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.hero-title { font-size: clamp(38px, 6vw, 64px); font-weight: 900; line-height: 1.02; margin: 12px 0 14px; text-shadow: 0 0 24px color-mix(in srgb, var(--theme-primary) 22%, transparent); }
.hero-subtitle { max-width: 860px; font-size: 16px; color: #eef6ff; line-height: 1.9; }
.hero-live-badge {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: white;
  padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.hero-stat, .feature-card, .news-card, .reward-row, .leader-row, .player-chip, .season-history-card, .room-card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
}
.hero-stat { padding: 18px; }
.hero-stat strong { display: block; font-size: 28px; margin-bottom: 6px; color: white; }
.feature-grid, .news-grid, .live-match-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.feature-card { padding: 18px; }
.feature-card h3, .news-card h3, .match-board-top h2, .room-card strong, h2, h3, h4 { color: white; }
.grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; align-items: start; }
.muted { color: var(--theme-muted); }
.small { font-size: 13px; }
label { display: block; font-weight: 800; margin-bottom: 7px; }
input[type="text"], input[type="password"], input[type="number"], select, textarea {
  width: 100%; box-sizing: border-box; padding: 13px 14px; border-radius: 15px;
  border: 1px solid rgba(255,255,255,.10); background: rgba(5, 9, 21, .84); color: var(--theme-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--theme-muted) 72%, transparent); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.inline-checks, .actions, .stat-row, .room-meta, .topbar-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.checkbox { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 15px; padding: 12px 17px; cursor: pointer;
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
  color: white; font-weight: 900; box-shadow: 0 14px 28px color-mix(in srgb, var(--theme-primary) 22%, transparent);
}
button:hover, .btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-secondary { background: linear-gradient(180deg, rgba(63, 76, 110, .95), rgba(41, 49, 74, .95)); box-shadow: none; }
.btn-danger { background: linear-gradient(135deg, #ff6542, #c91f4f); box-shadow: none; }
.btn-ghost {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.10); box-shadow: none;
}
.btn-primary { background: linear-gradient(135deg, var(--theme-gold), #ff8f3c); color: #1d1205; }
.btn-large { padding: 15px 24px; font-size: 18px; }
.room-list { display: grid; gap: 14px; }
.room-card { padding: 18px; box-shadow: 0 16px 34px rgba(0,0,0,.18); }
.badge, .title-mark {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 999px;
  font-size: 13px; font-weight: 800; color: var(--theme-text);
  background: rgba(6, 12, 28, .84); border: 1px solid rgba(255,255,255,.10);
}
.title-mark { background: linear-gradient(135deg, rgba(69,66,188,.85), rgba(109,53,221,.82)); }
.badge-accent {
  background: linear-gradient(135deg, var(--theme-gold), #ff8f3c); border-color: transparent; color: #1d1205;
}
.badge-warning { background: linear-gradient(135deg, #ffa947, #8e4c0a); border-color: transparent; }
.badge-success { background: linear-gradient(135deg, #42d99b, #11795a); border-color: transparent; }
.badge-danger { background: linear-gradient(135deg, #ff7053, #8f1f31); border-color: transparent; }
.flash {
  padding: 15px 16px; border-radius: 16px; margin-bottom: 18px; border: 1px solid transparent;
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
}
.flash-success { background: rgba(6, 64, 42, .78); border-color: rgba(62, 197, 139, .35); }
.flash-error { background: rgba(100, 20, 30, .82); border-color: rgba(255, 114, 132, .38); }
.ticker-banner {
  display: flex; gap: 14px; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-radius: 18px; border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(90deg, color-mix(in srgb, var(--theme-primary) 18%, transparent), color-mix(in srgb, var(--theme-secondary) 16%, transparent));
  backdrop-filter: blur(12px);
}
.ticker-banner strong { color: white; white-space: nowrap; }
.ticker-banner span { flex: 1; }
.season-banner {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; padding: 20px; border-radius: 26px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, color-mix(in srgb, var(--theme-gold) 18%, transparent), color-mix(in srgb, var(--theme-hot) 16%, transparent), color-mix(in srgb, var(--theme-secondary) 16%, transparent));
}
.season-copy h2 { margin: 0 0 8px; font-size: 32px; }
.season-kicker { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: 12px; font-weight: 800; letter-spacing: .06em; color: white; margin-bottom: 10px; }
.season-block { padding: 17px; border-radius: 18px; background: rgba(7, 11, 24, .44); border: 1px solid rgba(255,255,255,.08); }
.news-card { padding: 18px; }
.leaderboard-preview, .reward-preview, .season-history-list { display: flex; flex-direction: column; gap: 10px; }
.leader-row, .reward-row { padding: 14px 16px; display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.leader-rank { display: inline-flex; margin-right: 10px; padding: 5px 8px; border-radius: 999px; background: rgba(255, 209, 91, .18); color: #ffe08a; font-size: 12px; font-weight: 900; }
.leader-score { display: flex; flex-direction: column; align-items: flex-end; }
.leader-score strong { font-size: 20px; }
.player-chip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.player-chip { padding: 15px; display: flex; flex-direction: column; gap: 6px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 12px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; vertical-align: top; }
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 10px 16px; }
.compact-kv { grid-template-columns: 140px 1fr; gap: 8px 12px; }
.section-gap { margin-top: 20px; }
.code, .notice { background: rgba(5, 9, 22, .92); border: 1px solid rgba(255,255,255,.10); border-radius: 15px; padding: 14px 16px; white-space: pre-wrap; word-break: break-word; }
.notice-warning { background: rgba(255, 183, 62, .10); border-color: rgba(255, 183, 62, .24); }
.board-view { white-space: normal !important; line-height: 1; overflow: auto; }
.board-view.board-large { display: block; max-width: 100%; padding: 14px; border-radius: 24px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); }
.board-view.board-large .arena-board { margin: 0 auto; }
.match-board-top { position: relative; }
.match-board-heading { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.board-legend { margin-top: 10px; margin-bottom: 12px; }
.arena-board {
  display: grid; gap: 3px; align-items: center; justify-content: start; padding: 8px; border-radius: 20px;
  background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 18px 40px rgba(0,0,0,.18);
}
.arena-cell {
  width: var(--cell-size); height: var(--cell-size); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
  border-radius: 11px; font-weight: 900; font-size: calc(var(--cell-size) * .42); transition: transform .08s linear, filter .12s linear, background .12s linear;
}
.arena-cell::before {
  content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 45%);
}
.arena-cell span { position: relative; z-index: 2; text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.arena-cell.is-floor { background: linear-gradient(180deg, #19253a, #0c1221); }
.arena-cell.is-wall { background: linear-gradient(180deg, #7b8cab, #44516a); box-shadow: inset 0 -5px 0 rgba(0,0,0,.22); }
.arena-cell.is-breakable { background: linear-gradient(180deg, #d18c2b, #754213); box-shadow: inset 0 -5px 0 rgba(0,0,0,.22); }
.arena-cell.has-player { background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.34), rgba(255,255,255,0) 55%), linear-gradient(180deg, #33c2ff, #2654ef); color: white; transform: scale(1.04); }
.arena-cell.has-npc { background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.30), rgba(255,255,255,0) 55%), linear-gradient(180deg, #49e0a6, #0b9f63); color: white; transform: scale(1.04); }
.arena-cell.team-1 { outline: 2px solid rgba(83, 183, 255, .55); }
.arena-cell.team-2 { outline: 2px solid rgba(255, 104, 120, .55); }
.arena-cell.team-3 { outline: 2px solid rgba(255, 214, 98, .55); }
.arena-cell.has-bomb { background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.24), rgba(15,23,42,.06)), linear-gradient(180deg, #434f69, #121827); color: white; animation: pulseBomb .7s infinite alternate; }
.arena-cell.bomb-remote { background: linear-gradient(180deg, #9a5dff, #511ab9); }
.arena-cell.bomb-pierce { background: linear-gradient(180deg, #ff9a38, #b04a11); }
.arena-cell.has-flame { background: radial-gradient(circle, #fff2a0 0%, #ffb627 36%, #ff5b35 72%, rgba(0,0,0,0) 73%); color: white; }
.arena-cell.fx-flame { animation: flameBurst .18s ease-out infinite alternate; }
.arena-cell.has-item { color: #1d1400; text-shadow: 0 1px 0 rgba(255,255,255,.45); box-shadow: inset 0 0 0 2px rgba(255,245,171,.55), 0 0 20px rgba(255,220,96,.34); }
.arena-cell.has-item::after { content: ''; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, #fff7ca 0%, #ffd94f 54%, rgba(255,255,255,0) 73%); opacity: .98; }
.arena-cell.has-item span { z-index: 3; font-size: calc(var(--cell-size) * .34); font-weight: 900; }
.arena-cell.item-bomb_up { background: linear-gradient(180deg, #fff1a0, #ffb534); }
.arena-cell.item-range_up { background: linear-gradient(180deg, #ffd0aa, #ff7a38); }
.arena-cell.item-shield { background: linear-gradient(180deg, #d9ecff, #79b8ff); }
.arena-cell.item-remote_unlock { background: linear-gradient(180deg, #efdbff, #ae68ff); }
.arena-cell.item-pierce_unlock { background: linear-gradient(180deg, #ffe4cf, #ff9650); }
.countdown-banner {
  display: flex; align-items: center; justify-content: center; font-size: clamp(30px, 5vw, 46px); font-weight: 900;
  padding: 14px 18px; border-radius: 22px;
  background: linear-gradient(90deg, var(--theme-secondary), var(--theme-primary));
  color: white; box-shadow: 0 16px 50px color-mix(in srgb, var(--theme-primary) 28%, transparent); margin: 14px 0;
}
.match-grid-wide { grid-template-columns: minmax(0, 1.18fr) minmax(310px, .82fr); align-items: start; }
.match-grid-after-board { margin-top: 18px; }
.match-events { max-height: 360px; overflow: auto; }
.match-event-row { padding: 8px 10px; border-radius: 11px; background: rgba(255,255,255,.04); margin-bottom: 7px; }
.realtime-data-hook { display: none; }
[data-chat-shortcut-form] { display: inline-flex; }
.player-command-bar { margin-bottom: 18px; }
.player-bar-main, .player-badge-cluster, .player-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.player-bar-main { justify-content: space-between; }
.room-status-panel, .quick-entry-card, .create-room-panel, .active-room-banner { border-color: color-mix(in srgb, var(--theme-primary) 42%, rgba(255,255,255,.1)); }
.active-room-strip { box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 16px 38px color-mix(in srgb, var(--theme-primary) 22%, transparent); }
.site-footer {
  margin-top: 28px; padding: 24px; border-radius: 28px; border: 1px solid var(--theme-border);
  background: linear-gradient(180deg, rgba(5, 9, 20, .96), rgba(8, 12, 23, .98)); box-shadow: 0 20px 46px var(--theme-shadow);
  text-align: center;
}
.site-footer-inner { max-width: 780px; margin: 0 auto; }
.site-footer-links-inline { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.site-footer-inline-link { color: var(--theme-text); font-weight: 800; }
.site-footer-separator { color: var(--theme-muted); }
.site-footer-brand-line { font-size: 24px; font-weight: 900; line-height: 1.4; color: white; }
.site-footer-description { margin-top: 8px; line-height: 1.8; }
.site-footer-copy { margin-top: 8px; color: color-mix(in srgb, var(--theme-muted) 88%, white 12%); font-size: 13px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.footer-note { margin-bottom: 10px; }
.mobile-pad-wrap { display: flex; justify-content: center; }
.mobile-pad { display: grid; grid-template-columns: 72px 72px 72px; grid-template-rows: 72px 72px 72px; gap: 8px; align-items: center; justify-items: center; }
.mobile-pad form { margin: 0; }
.mobile-pad button { width: 72px; height: 72px; border-radius: 16px; font-size: 20px; }
.pad-up { grid-column: 2; grid-row: 1; }
.pad-left { grid-column: 1; grid-row: 2; }
.pad-center { grid-column: 2; grid-row: 2; }
.pad-right { grid-column: 3; grid-row: 2; }
.pad-down { grid-column: 2; grid-row: 3; }
@keyframes pulseBomb { from { transform: scale(.92); } to { transform: scale(1.03); } }
@keyframes flameBurst { from { filter: brightness(1); } to { filter: brightness(1.35) saturate(1.15); } }
.fx-knockback { animation: boardKnockback var(--knockback-ms,220ms) cubic-bezier(.22,.61,.36,1); }
@keyframes boardKnockback {
  0% { transform: translate3d(0,0,0) scale(1); }
  20% { transform: translate3d(12px,-6px,0) scale(1.02); }
  45% { transform: translate3d(-10px,5px,0) scale(.995); }
  70% { transform: translate3d(6px,-3px,0) scale(1.01); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
@keyframes sparkFloat {
  0% { transform: translate3d(0, 0, 0) scale(.7); opacity: .2; }
  50% { opacity: .95; }
  100% { transform: translate3d(0, -80px, 0) scale(1.15); opacity: 0; }
}
.density-standard .site-sparks { opacity: .45; }
.density-rich .site-sparks { opacity: .75; }
.density-extreme .site-sparks { opacity: 1; }
.density-extreme .hero-card, .density-extreme .topbar, .density-extreme .card, .density-extreme .room-card {
  box-shadow: 0 24px 62px var(--theme-shadow), 0 0 30px color-mix(in srgb, var(--theme-primary) 10%, transparent), inset 0 1px 0 rgba(255,255,255,.05);
}


.hero-card-visual {
  position: relative;
  min-height: min(76vw, 760px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    linear-gradient(180deg, rgba(6, 12, 28, .08) 0%, rgba(6, 12, 28, .20) 26%, rgba(6, 12, 28, .90) 100%),
    var(--hero-bg) center center / cover no-repeat;
}
.hero-card-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: calc(var(--hero-bg-strength, 72) / 100);
  background:
    radial-gradient(circle at 50% 18%, rgba(143, 222, 255, .34), rgba(143, 222, 255, 0) 28%),
    linear-gradient(180deg, rgba(8, 14, 28, .04) 0%, rgba(8, 14, 28, .16) 40%, rgba(5, 8, 18, .68) 100%);
}
.hero-card-visual > * {
  position: relative;
  z-index: 1;
}
.hero-card-visual .hero-subtitle,
.hero-card-visual .hero-live-badge,
.hero-card-visual .muted {
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
.hero-card-visual .feature-grid {
  margin-top: 18px;
}
.header-avatar,
.arena-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 18px;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.30), rgba(255,255,255,0) 58%), rgba(4, 8, 18, .52);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
}
.header-avatar {
  width: 52px;
  height: 52px;
  border-radius: 16px;
}
.header-avatar img,
.arena-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.arena-avatar {
  width: calc(var(--cell-size) * .92);
  height: calc(var(--cell-size) * .92);
  padding: 4px;
}
.character-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.character-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
  overflow: hidden;
}
.character-card.is-selected {
  border-color: rgba(255, 210, 95, .72);
  box-shadow: 0 0 0 1px rgba(255, 210, 95, .30) inset, 0 20px 42px rgba(0,0,0,.24);
}
.character-card-art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 164px;
  padding: 18px;
  background:
    radial-gradient(circle at top, rgba(83, 183, 255, .26), rgba(83, 183, 255, 0) 48%),
    linear-gradient(180deg, rgba(13, 22, 44, .86), rgba(8, 12, 24, .96));
}
.character-card-art img {
  width: min(100%, 144px);
  height: 144px;
  object-fit: contain;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.38));
}
.character-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 18px;
}
.character-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.character-card .actions {
  margin-top: auto;
}
.character-card .actions form {
  width: 100%;
}
.character-card .actions button {
  width: 100%;
}
.shop-current-preview {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}
.shop-current-preview img {
  width: 68px;
  height: 68px;
  object-fit: contain;
}
.badge-rarity-common { background: linear-gradient(135deg, #697a98, #46526c); }
.badge-rarity-uncommon { background: linear-gradient(135deg, #41c980, #168b58); }
.badge-rarity-rare { background: linear-gradient(135deg, #4da8ff, #3757ff); }
.badge-rarity-epic { background: linear-gradient(135deg, #a464ff, #6f31dd); }
.badge-rarity-legendary { background: linear-gradient(135deg, #ffd25f, #ff8f3c); color: #2f1a00; }

@media (max-width: 1180px) {
  .match-grid-wide, .grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .hero-stats, .feature-grid, .news-grid, .live-match-grid { grid-template-columns: 1fr 1fr; }
  .season-banner { grid-template-columns: 1fr; }
  .ticker-banner { flex-direction: column; align-items: flex-start; }
  .topbar-wrap { position: relative; top: auto; }
}
@media (max-width: 760px) {
  :root { --container-width: min(100% - 20px, 1000px); --card-padding: 18px; }
  .form-grid, .kv, .compact-kv, .hero-stats, .feature-grid, .news-grid, .live-match-grid { grid-template-columns: 1fr; }
  .topbar { padding: 16px; }
  .topbar-side { align-items: flex-start; }
  .nav { justify-content: flex-start; }
  .brand { font-size: 28px; }
  .hero-card { padding: 24px; }
  .mobile-pad button { width: 64px; height: 64px; }
  .site-footer { padding: 20px 16px; }
}