/* VOID demo usability + performance update */
:root {
  --radius: 6px;
  --void-card-radius: 6px;
  --void-soft-radius: 4px;
  --void-side-dur: 280ms;
}

/* Performance: keep the visual language, remove the most expensive continuous work. */
.panel,
.stats-strip,
.quick-card,
.live-room-card,
.void-card,
.auth-box,
.void-beta-modal,
.music-panel__card,
.theme-drawer__panel {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.page-glow { opacity: .28 !important; animation: none !important; filter: blur(28px) !important; }
.hero__visual img,
.league-shield { animation: none !important; }
.home-news-section,
.live-rooms-section,
.quick-grid,
.footer,
.main-grid {
  content-visibility: auto;
  contain-intrinsic-size: 1px 420px;
}

/* Slightly square cards and controls. Circular status dots/avatars remain circular. */
.panel,
.stats-strip,
.quick-card,
.live-room-card,
.void-card,
.auth-box,
.gradient-btn,
.outline-btn,
.void-btn,
.nav__item,
.void-beta-badge,
.v4-annc,
.theme-section,
.theme-swatch,
.theme-drawer__close,
.music-panel__close,
.music-panel__controls button,
.music-panel__modes button,
.music-panel__volume button,
.music-track,
.live-room-card__join,
.vip-plan,
.vip-table-wrap,
.vip-note {
  border-radius: var(--void-card-radius) !important;
}

/* Header/menu icons */
.nav__icon img { width: 20px; height: 20px; object-fit: contain; opacity: .92; }
.nav__item:hover .nav__icon img,
.nav__item.is-active .nav__icon img { opacity: 1; filter: drop-shadow(0 0 5px var(--void-primary)); }
.void-beta-badge {
  min-height: 30px;
  padding: 0 11px !important;
  border: 1px solid color-mix(in srgb, var(--void-primary) 32%, var(--line));
  background: color-mix(in srgb, var(--void-primary) 7%, var(--void-surface));
  box-shadow: none !important;
  letter-spacing: .08em;
}
.void-beta-badge__dot { display: none !important; }
.void-beta-badge__text { font-size: 10px; font-weight: 800; color: color-mix(in srgb, var(--void-primary) 78%, white); }

/* Announcement: no longer a full-width strip stuck to the viewport top. */
.v4-annc-bar {
  margin: 10px 14px 0 !important;
  display: grid;
  gap: 8px;
  position: relative !important;
  inset: auto !important;
  z-index: 5;
}
.v4-annc {
  min-height: 48px;
  padding: 11px 46px 11px 15px !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "dot title cta" "dot message cta";
  column-gap: 11px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--void-primary) 28%, var(--line)) !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--void-primary) 10%, transparent), transparent 42%),
    linear-gradient(180deg, var(--void-panel-1), var(--void-panel-2)) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.18) !important;
}
.v4-annc__dot { grid-area: dot; width: 7px !important; height: 7px !important; background: var(--void-primary) !important; box-shadow: 0 0 10px color-mix(in srgb, var(--void-primary) 55%, transparent); }
.v4-annc__title { grid-area: title; font-size: 13px; }
.v4-annc__msg { grid-area: message; min-width: 0; color: var(--muted); font-size: 12.5px; white-space: normal !important; }
.v4-annc__cta { grid-area: cta; }
.v4-annc__close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }

/* Featured announcements empty state */
.fu-carousel__empty {
  min-height: 250px;
  display: grid !important;
  place-items: center;
  padding: 32px;
  text-align: center;
  color: color-mix(in srgb, var(--text) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--void-primary) 28%, var(--line));
  border-radius: var(--void-card-radius);
  background:
    radial-gradient(circle at 75% 25%, color-mix(in srgb, var(--void-primary) 15%, transparent), transparent 38%),
    linear-gradient(145deg, var(--void-panel-1), var(--void-panel-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 18px 44px rgba(0,0,0,.2);
  font-weight: 700;
}
.fu-carousel__empty::before {
  content: "DUYURULAR";
  display: block;
  position: absolute;
  margin-top: -56px;
  color: var(--void-primary);
  font-family: "Orbitron", "Manrope", sans-serif;
  font-size: 12px;
  letter-spacing: .16em;
}

/* Homepage stats with optimized, theme-specific icons */
.stats-strip { min-height: 92px; }
.stat { gap: 14px !important; padding: 15px 24px !important; min-width: 0; }
.stat__icon--image,
.stat__icon--coin {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--void-primary) 35%, transparent));
}
.stat__icon--coin {
  border: 2px solid var(--gold);
  border-radius: 50% !important;
  position: relative;
  box-shadow: inset 0 0 0 3px rgba(255,186,24,.12), 0 0 12px rgba(255,186,24,.2);
}
.stat__icon--coin::after {
  content: "V";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--gold);
  font-family: "Orbitron", sans-serif;
  font-size: 19px;
  font-weight: 900;
}
html[data-void-theme="classic"] .stat__icon[data-stat-kind="players"] { background-image:url('/assets/images/stats-icons/classic/players.webp'); }
html[data-void-theme="classic"] .stat__icon[data-stat-kind="matches"] { background-image:url('/assets/images/stats-icons/classic/matches.webp'); }
html[data-void-theme="classic"] .stat__icon[data-stat-kind="goals"] { background-image:url('/assets/images/stats-icons/classic/goals.webp'); }
html[data-void-theme="classic"] .stat__icon[data-stat-kind="teams"] { background-image:url('/assets/images/stats-icons/classic/teams.webp'); }
html[data-void-theme="purple"] .stat__icon[data-stat-kind="players"] { background-image:url('/assets/images/stats-icons/purple/players.webp'); }
html[data-void-theme="purple"] .stat__icon[data-stat-kind="matches"] { background-image:url('/assets/images/stats-icons/purple/matches.webp'); }
html[data-void-theme="purple"] .stat__icon[data-stat-kind="goals"] { background-image:url('/assets/images/stats-icons/purple/goals.webp'); }
html[data-void-theme="purple"] .stat__icon[data-stat-kind="teams"] { background-image:url('/assets/images/stats-icons/purple/teams.webp'); }
html[data-void-theme="red"] .stat__icon[data-stat-kind="players"] { background-image:url('/assets/images/stats-icons/red/players.webp'); }
html[data-void-theme="red"] .stat__icon[data-stat-kind="matches"] { background-image:url('/assets/images/stats-icons/red/matches.webp'); }
html[data-void-theme="red"] .stat__icon[data-stat-kind="goals"] { background-image:url('/assets/images/stats-icons/red/goals.webp'); }
html[data-void-theme="red"] .stat__icon[data-stat-kind="teams"] { background-image:url('/assets/images/stats-icons/red/teams.webp'); }
html[data-void-theme="green"] .stat__icon[data-stat-kind="players"] { background-image:url('/assets/images/stats-icons/green/players.webp'); }
html[data-void-theme="green"] .stat__icon[data-stat-kind="matches"] { background-image:url('/assets/images/stats-icons/green/matches.webp'); }
html[data-void-theme="green"] .stat__icon[data-stat-kind="goals"] { background-image:url('/assets/images/stats-icons/green/goals.webp'); }
html[data-void-theme="green"] .stat__icon[data-stat-kind="teams"] { background-image:url('/assets/images/stats-icons/green/teams.webp'); }
html[data-void-theme="gold"] .stat__icon[data-stat-kind="players"] { background-image:url('/assets/images/stats-icons/gold/players.webp'); }
html[data-void-theme="gold"] .stat__icon[data-stat-kind="matches"] { background-image:url('/assets/images/stats-icons/gold/matches.webp'); }
html[data-void-theme="gold"] .stat__icon[data-stat-kind="goals"] { background-image:url('/assets/images/stats-icons/gold/goals.webp'); }
html[data-void-theme="gold"] .stat__icon[data-stat-kind="teams"] { background-image:url('/assets/images/stats-icons/gold/teams.webp'); }

/* League card */
.league-card { min-height: 325px; padding: 38px 34px !important; isolation: isolate; }
.league-card::after { display: none !important; }
.league-shield {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center;
  opacity: .88;
  filter: none !important;
  z-index: -1 !important;
}
.league-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(3,7,13,.96) 0%, rgba(3,7,13,.78) 44%, rgba(3,7,13,.08) 78%);
}
.league-copy { z-index: 1; max-width: 310px; }
.league-copy h2 { font-size: 38px; margin-bottom: 12px; }
.league-copy p { color: color-mix(in srgb, var(--text) 75%, transparent); font-size: 15px; font-weight: 600; line-height: 1.55; margin: 0 0 24px; }
.league-soon {
  display: inline-flex !important;
  width: auto;
  min-height: 38px;
  align-items: center;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--void-primary) 38%, var(--line));
  background: color-mix(in srgb, var(--void-primary) 8%, rgba(5,9,16,.8));
  color: var(--void-primary) !important;
  font-size: 12px !important;
  letter-spacing: .12em !important;
  border-radius: var(--void-card-radius);
}

/* Rich quick cards using provided art */
.quick-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 12px !important; }
.quick-card { grid-column: span 2; min-height: 190px !important; padding: 25px 24px !important; align-items: flex-end !important; border-color: color-mix(in srgb, var(--void-primary) 18%, var(--line)) !important; }
.quick-card:nth-child(4), .quick-card:nth-child(5) { grid-column: span 3; }
.quick-card::before {
  z-index: 1;
  opacity: 1 !important;
  background: linear-gradient(90deg, rgba(3,7,13,.98) 0%, rgba(3,7,13,.80) 46%, rgba(3,7,13,.12) 78%) !important;
}
.quick-visual-img {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: .9;
  filter: none !important;
  transform: none !important;
}
.quick-card > div, .quick-card > b { z-index: 2 !important; }
.quick-card > div { max-width: 58%; }
.quick-card h3 { font-family: "Orbitron", "Manrope", sans-serif; font-size: 14px; }
.quick-card p { font-size: 13px; }
.quick-card:hover { transform: translateY(-2px) !important; }
.quick-card:hover .quick-visual-img { transform: scale(1.012) !important; }

/* Live rooms */
[hidden] { display: none !important; }
.live-room-card__logo {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.live-room-card__logo.is-placeholder { opacity: .36; }
.live-room-card__penalty[hidden] { display: none !important; }
.live-room-card__badge-icon:empty,
.live-room-card__state [data-room-state-icon]:empty { display:none; }
.live-room-card__join { min-width: 84px; }

/* Side panels: soft slide left on open, right on close. */
.void-side-panel,
.music-panel.void-side-panel,
.theme-drawer.void-side-panel {
  transition: visibility 0s linear var(--void-side-dur);
}
.void-side-panel.is-open,
.music-panel.void-side-panel.is-open,
.theme-drawer.void-side-panel.is-open {
  transition-delay: 0s;
}
.void-side-panel__backdrop,
.theme-drawer__backdrop { backdrop-filter: none !important; transition: opacity var(--void-side-dur) ease !important; }
.void-side-panel__sheet,
.music-panel__card.void-side-panel__sheet,
.theme-drawer__panel.void-side-panel__sheet {
  transform: translateX(104%) !important;
  transition: transform var(--void-side-dur) cubic-bezier(.22,.75,.2,1) !important;
  will-change: transform;
}
.void-side-panel.is-open .void-side-panel__sheet,
.music-panel.is-open .music-panel__card,
.theme-drawer.is-open .theme-drawer__panel { transform: translateX(0) !important; }
.theme-drawer__head .eyebrow,
.music-panel__head .eyebrow { display: none !important; }
.theme-section h3 { margin: 0 0 12px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.theme-section { padding: 14px !important; border: 1px solid var(--line); background: color-mix(in srgb, var(--void-surface) 72%, transparent); }
.theme-swatches { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.theme-swatch { min-height: 42px; }
.music-panel__now { grid-template-columns: 1fr !important; padding: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--void-surface) 80%, transparent); }
.music-panel__cover { display: none !important; }

/* VIP page */
.vip-page { margin: 18px 14px 28px; }
.vip-hero { padding: 30px; display:flex; justify-content:space-between; gap:24px; align-items:center; }
.vip-hero__copy { max-width: 760px; }
.vip-hero h1 { margin: 8px 0 10px; font-family:"Orbitron",sans-serif; font-size: clamp(28px,4vw,48px); }
.vip-hero p { margin:0; color:var(--muted); line-height:1.7; }
.vip-hero__mark { width:100px; height:100px; object-fit:contain; opacity:.95; filter:drop-shadow(0 0 15px color-mix(in srgb,var(--void-primary) 30%,transparent)); }
.vip-plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px; }
.vip-plan { padding:20px; border:1px solid var(--line); background:linear-gradient(160deg,var(--void-panel-1),var(--void-panel-2)); }
.vip-plan--elite { --vip-tone:#ffba18; }
.vip-plan--ultra { --vip-tone:#9b3bff; }
.vip-plan--prime { --vip-tone:#ffd34e; }
.vip-plan { border-color:color-mix(in srgb,var(--vip-tone) 42%,var(--line)); box-shadow:inset 0 2px 0 color-mix(in srgb,var(--vip-tone) 65%,transparent); }
.vip-plan__top { display:flex; justify-content:space-between; align-items:start; gap:12px; }
.vip-plan h2 { margin:0; font-family:"Orbitron",sans-serif; font-size:20px; }
.vip-plan small { color:var(--muted); }
.vip-plan__price { color:var(--vip-tone); font-size:26px; font-weight:900; }
.vip-plan__command { display:inline-flex; margin-top:14px; padding:6px 9px; border:1px solid color-mix(in srgb,var(--vip-tone) 38%,var(--line)); color:var(--vip-tone); font-family:monospace; }
.vip-table-wrap { margin-top:12px; overflow:auto; border:1px solid var(--line); background:linear-gradient(160deg,var(--void-panel-1),var(--void-panel-2)); }
.vip-table { width:100%; min-width:780px; border-collapse:collapse; }
.vip-table th,.vip-table td { padding:11px 14px; border-bottom:1px solid var(--line); text-align:center; }
.vip-table th:first-child,.vip-table td:first-child { text-align:left; width:46%; }
.vip-table thead th { position:sticky; top:0; background:#07101b; z-index:1; font-size:12px; letter-spacing:.06em; }
.vip-table tbody tr:hover { background:color-mix(in srgb,var(--void-primary) 5%,transparent); }
.vip-yes { color:#67f0a0; font-weight:900; }
.vip-no { color:#ff5d72; font-weight:900; }
.vip-power { color:var(--void-primary); font-weight:900; }
.vip-notes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px; }
.vip-note { padding:18px; border:1px solid var(--line); background:linear-gradient(160deg,var(--void-panel-1),var(--void-panel-2)); }
.vip-note h3 { margin:0 0 10px; font-size:14px; color:var(--void-primary); }
.vip-note p,.vip-note li { color:var(--muted); font-size:13px; line-height:1.6; }
.vip-note ul { margin:0; padding-left:18px; }

@media (max-width: 1200px) {
  .stats-strip { grid-template-columns: repeat(3,1fr) !important; }
  .stat:nth-child(3)::after { display:none; }
  .quick-grid { grid-template-columns: repeat(2,1fr) !important; }
  .quick-card,.quick-card:nth-child(4),.quick-card:nth-child(5) { grid-column: auto; }
}
@media (max-width: 800px) {
  .v4-annc { grid-template-columns:auto 1fr; grid-template-areas:"dot title" "dot message" "dot cta"; }
  .stats-strip { grid-template-columns: repeat(2,1fr) !important; }
  .stat { padding:14px 16px !important; }
  .stat__icon--image,.stat__icon--coin { flex-basis:42px; width:42px; height:42px; }
  .quick-grid { grid-template-columns:1fr !important; }
  .quick-card { min-height:170px !important; }
  .quick-card > div { max-width:66%; }
  .vip-plans,.vip-notes { grid-template-columns:1fr; }
  .vip-hero { align-items:flex-start; padding:22px; }
  .vip-hero__mark { width:72px; height:72px; }
}
@media (max-width: 520px) {
  .stats-strip { grid-template-columns:1fr !important; }
  .stat::after { display:none !important; }
  .quick-card > div { max-width:72%; }
  .vip-hero__mark { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
.fu-carousel__empty { position: relative; }

/* ========================================================================== 
   Revision 2 — compact professional UI
   ========================================================================== */
:root { --void-corner: 9px; --void-corner-sm: 6px; }
:where(.panel,.quick-card,.feature,.stat,.league-card,.home-news-card,.live-room-card,.vip-package,.patch-card,.home-patch-card,.community-bar,.void-card) {
  border-radius: var(--void-corner) !important;
}
:where(button,.gradient-btn,.outline-btn,.void-btn,.st-tab,.st-period-btn,.st-page-btn,.st-link,.live-room-card__join,.vip-package__action) {
  border-radius: var(--void-corner-sm) !important;
}

/* New crisp menu icons */
.nav__icon { width: 20px !important; height: 20px !important; display:grid !important; place-items:center; }
.nav__icon img { width:20px !important; height:20px !important; object-fit:contain; opacity:.92; filter:none !important; }
.nav__item.is-active .nav__icon img,.nav__item:hover .nav__icon img { opacity:1; filter:drop-shadow(0 0 5px color-mix(in srgb,var(--void-primary) 38%,transparent)) !important; }

/* User photo fallback: icon, never account initial */
.void-avatar__fallback-img,.v4-auth__avatar-fallback { width:70% !important; height:70% !important; object-fit:contain; opacity:.8; }
.v4-auth__avatar-fallback { padding:4px; border:1px solid var(--void-border-soft); background:var(--void-surface-strong); }

/* Online community card */
.community-bar { border:1px solid color-mix(in srgb,var(--void-primary) 34%,var(--void-border-soft)) !important; background:linear-gradient(145deg,rgba(3,10,18,.92),rgba(8,13,24,.82)) !important; box-shadow:inset 3px 0 0 var(--void-primary); }

/* Announcement / hero CMS */
.fu-carousel__empty { min-height:330px; display:flex !important; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:7px; padding:30px !important; border:1px solid color-mix(in srgb,var(--void-primary) 28%,var(--void-border-soft)); background:radial-gradient(circle at 78% 28%,color-mix(in srgb,var(--void-primary) 18%,transparent),transparent 42%),linear-gradient(145deg,#07101b,#03070d); }
.fu-carousel__empty::before { display:none !important; }
.fu-carousel__empty strong { font-family:Orbitron,Manrope,sans-serif; letter-spacing:.09em; font-size:18px; color:var(--text); }
.fu-carousel__empty span { color:var(--muted); font-size:13px; max-width:38ch; }
.fu-slide__media--empty { display:grid !important; place-items:center; overflow:hidden; background:radial-gradient(circle,color-mix(in srgb,var(--fu-badge) 30%,transparent),transparent 60%); }
.fu-slide__media--empty span { font:900 clamp(34px,5vw,76px)/1 Orbitron,sans-serif; letter-spacing:.18em; color:color-mix(in srgb,var(--fu-badge) 60%,transparent); transform:rotate(-7deg); }
.fu-slide__media--empty i { position:absolute; width:190px; aspect-ratio:1; border:1px solid color-mix(in srgb,var(--fu-badge) 30%,transparent); transform:rotate(45deg); }

/* News previews */
.home-news-section,.home-patches-section { margin-top:14px; }
.home-news-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.home-news-card { min-height:300px; overflow:hidden; position:relative; display:flex !important; flex-direction:column; border:1px solid var(--void-border-soft); background:linear-gradient(155deg,var(--void-panel-1),var(--void-panel-2)); color:inherit; text-decoration:none; transition:transform .22s ease,border-color .22s ease; }
.home-news-card:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--void-primary) 45%,var(--void-border-soft)); }
.home-news-card > img,.home-news-card__ph { width:100%; height:160px; object-fit:cover; background:linear-gradient(135deg,color-mix(in srgb,var(--void-primary) 18%,#06101b),#02070d); display:grid; place-items:center; font-size:34px; }
.home-news-card > div { padding:16px; display:grid; gap:8px; }
.home-news-card__cat { width:max-content; padding:4px 7px; border-left:2px solid var(--void-primary); color:var(--void-primary); font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.home-news-card strong { font-size:16px; line-height:1.25; }
.home-news-card p { margin:0; color:var(--muted); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; line-height:1.55; font-size:13px; }

/* Live rooms — football score application layout */
.live-rooms-grid { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px !important; }
.live-room-card { display:grid !important; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"main aside" "goal goal"; overflow:hidden; min-height:260px; border:1px solid var(--void-border-soft) !important; background:linear-gradient(155deg,rgba(7,15,27,.98),rgba(3,8,15,.98)) !important; box-shadow:none !important; }
.live-room-card.is-online { border-color:color-mix(in srgb,var(--void-primary) 34%,var(--void-border-soft)) !important; }
.live-room-card__main { grid-area:main; padding:16px 18px 12px !important; min-width:0; }
.live-room-card__aside { grid-area:aside; display:flex !important; align-items:flex-start; padding:15px 15px 0 0 !important; }
.live-room-card__goal { grid-area:goal; min-height:54px !important; border-top:1px solid var(--void-border-soft); padding:11px 16px !important; background:rgba(255,255,255,.018) !important; }
.live-room-card__head { padding:0 0 13px !important; border-bottom:1px solid var(--void-border-soft); }
.live-room-card__name { font-size:12px !important; color:var(--muted) !important; letter-spacing:.03em; font-weight:750 !important; max-width:70%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.live-room-card__badge { min-height:25px !important; padding:4px 8px !important; font-size:9px !important; letter-spacing:.08em; border-radius:5px !important; }
.live-room-card__match { display:grid !important; grid-template-columns:1fr auto 1fr !important; align-items:center; gap:14px !important; padding:18px 2px 14px !important; }
.live-room-card__team { display:grid !important; justify-items:center; gap:8px !important; min-width:0; }
.live-room-card__logo { width:44px !important; height:44px !important; object-fit:contain !important; background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }
.live-room-card__logo.is-placeholder { opacity:.25; }
.live-room-card__team-name { max-width:145px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px !important; font-weight:800 !important; text-align:center; }
.live-room-card__score { min-width:92px; margin:0 !important; padding:7px 10px !important; font:900 25px/1 Orbitron,Manrope,sans-serif !important; letter-spacing:.06em; text-align:center; color:var(--text) !important; border-inline:1px solid var(--void-border-soft); }
.live-room-card__stats { display:flex !important; justify-content:center !important; gap:15px !important; padding:9px 0 0 !important; border-top:1px solid var(--void-border-soft); color:var(--muted); }
.live-room-card__stat { font-size:11px !important; }
.live-room-card__stat-icon { opacity:.62; filter:grayscale(1); }
.live-room-card__join { min-width:72px !important; height:30px !important; padding:0 10px !important; font-size:9px !important; letter-spacing:.08em; }
.live-room-card__penalty { margin:0 auto 8px !important; width:max-content; padding:5px 8px !important; border:1px solid color-mix(in srgb,#ff3b5c 50%,transparent); background:rgba(255,59,92,.08); }
.live-room-card__goal-label { font-size:9px !important; letter-spacing:.08em; }
.live-room-card__goal-empty,.live-room-card__goal-scorer,.live-room-card__goal-assist { font-size:11px !important; }

/* VIP: separate, understandable packages */
.vip-packages { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:14px; align-items:stretch; }
.vip-package { --vip-tone:var(--void-primary); position:relative; padding:22px; display:flex; flex-direction:column; min-height:540px; border:1px solid color-mix(in srgb,var(--vip-tone) 38%,var(--void-border-soft)); background:linear-gradient(165deg,color-mix(in srgb,var(--vip-tone) 7%,var(--void-panel-1)),var(--void-panel-2)); overflow:hidden; }
.vip-package::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--vip-tone); }
.vip-package--elite { --vip-tone:#ffba18; }.vip-package--ultra { --vip-tone:#9b3bff; }.vip-package--prime { --vip-tone:#ffd75f; }
.vip-package.is-featured { transform:translateY(-5px); box-shadow:0 14px 40px rgba(0,0,0,.28); }
.vip-package__popular { position:absolute; top:0; right:0; padding:6px 9px; background:var(--vip-tone); color:#fff; font-size:9px; font-weight:900; letter-spacing:.09em; }
.vip-package__head { padding-bottom:18px; border-bottom:1px solid var(--void-border-soft); display:grid; gap:14px; }
.vip-package__eyebrow { color:var(--vip-tone); font-size:10px; font-weight:900; letter-spacing:.18em; }
.vip-package h2 { margin:5px 0 8px; font-family:Orbitron,sans-serif; font-size:22px; }
.vip-package__head p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.vip-package__price { color:var(--vip-tone); font:900 30px/1 Orbitron,sans-serif; }
.vip-package__features { list-style:none; padding:18px 0; margin:0; display:grid; gap:12px; flex:1; }
.vip-package__features li { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:color-mix(in srgb,var(--text) 88%,transparent); line-height:1.4; }
.vip-package__features li span { flex:0 0 28px; color:var(--vip-tone); font-weight:900; }
.vip-package footer { padding-top:15px; border-top:1px solid var(--void-border-soft); }
.vip-package__action { display:flex; align-items:center; justify-content:center; height:42px; text-decoration:none; border:1px solid color-mix(in srgb,var(--vip-tone) 52%,var(--void-border-soft)); color:var(--vip-tone); font-weight:900; font-size:12px; }
.vip-package__action:hover { background:color-mix(in srgb,var(--vip-tone) 10%,transparent); }

/* Statistics */
.st-hero { grid-template-columns:minmax(0,1.5fr) minmax(260px,.65fr); align-items:end; border-left:3px solid var(--void-primary) !important; }
.st-hero__note { border:1px solid var(--void-border-soft) !important; background:rgba(255,255,255,.025) !important; }
.st-tab,.st-period-btn,.st-search input,.st-link { border-radius:6px !important; }
.st-period-btn:not(:disabled) { opacity:1; }
.st-table-host { min-height:430px; transition:opacity .18s ease,transform .18s ease; }
.st-table-host.is-updating { opacity:.48; transform:translateY(2px); pointer-events:none; }
.st-table-scroll { border-radius:7px !important; }
.st-table tbody tr { animation:stRowIn .22s ease both; }
@keyframes stRowIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

/* Homepage patch-note summaries */
.home-patches-panel { padding:22px; }
.home-patches-intro { margin:-3px 0 16px; color:var(--muted); font-size:13px; }
.home-patches-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.home-patch-card { --patch-color:var(--void-primary); padding:17px; display:flex; flex-direction:column; gap:9px; min-height:185px; color:inherit; text-decoration:none; border:1px solid var(--void-border-soft); border-top:2px solid var(--patch-color); background:linear-gradient(155deg,color-mix(in srgb,var(--patch-color) 5%,var(--void-panel-1)),var(--void-panel-2)); transition:transform .2s ease,border-color .2s ease; }
.home-patch-card:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--patch-color) 45%,var(--void-border-soft)); }
.home-patch-card__top { display:flex; justify-content:space-between; gap:8px; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.07em; }
.home-patch-card__top span { color:var(--patch-color); }.home-patch-card__top time { color:var(--muted); }
.home-patch-card h3 { margin:4px 0 0; font-size:15px; }.home-patch-card p { margin:0; color:var(--muted); font-size:12.5px; line-height:1.55; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden; }
.home-patch-card b { margin-top:auto; color:var(--patch-color); font-size:11px; }
.home-patches-empty { grid-column:1/-1; min-height:130px; display:grid; place-content:center; justify-items:center; gap:5px; border:1px dashed var(--void-border-soft); color:var(--muted); }
.home-patches-empty strong { color:var(--text); }

/* Minimal legal footer */
.footer--legal { margin-top:28px !important; padding:18px 20px !important; border-top:1px solid var(--void-border-soft) !important; background:transparent !important; }
.footer__legal { margin:0 auto; max-width:1050px; color:var(--muted); text-align:center; font-size:11px; line-height:1.65; }

@media (max-width:1000px) {
  .live-rooms-grid,.home-news-grid,.home-patches-grid { grid-template-columns:1fr !important; }
  .vip-packages { grid-template-columns:1fr; }.vip-package { min-height:0; }.vip-package.is-featured { transform:none; }
  .st-hero { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  .live-room-card { grid-template-columns:1fr; grid-template-areas:"main" "aside" "goal"; }
  .live-room-card__aside { padding:0 16px 13px !important; }.live-room-card__join { width:100%; }
  .live-room-card__match { gap:7px !important; }.live-room-card__score { min-width:70px; font-size:20px !important; }
}
.fu-carousel__empty[hidden] { display:none !important; }
.live-room-card[data-room-id="3"] .live-room-card__logo,
.live-room-card[data-room-id="4"] .live-room-card__logo { display:none !important; }
/* ========================================================================
   VOID Header / Ayarlar Merkezi / Minimal Footer — 2026-08
   ======================================================================== */
.topbar .logo-wrap {
  width: auto;
  min-width: 224px;
  flex: 0 0 auto;
}

.brand-wordmark--header {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 3px 0;
  background: none;
  color: var(--void-primary);
  filter: drop-shadow(0 0 calc(12px * var(--void-glow-level)) color-mix(in srgb, var(--void-primary) 38%, transparent));
}

.brand-wordmark--header .brand-wordmark__void,
.brand-wordmark--header .brand-wordmark__haxball {
  color: inherit;
  background: linear-gradient(105deg, color-mix(in srgb, var(--void-primary) 72%, white), var(--void-primary) 54%, color-mix(in srgb, var(--void-secondary) 58%, var(--void-primary)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-wordmark--header .brand-wordmark__void {
  font-size: 25px;
  line-height: .9;
  letter-spacing: .075em;
  font-weight: 900;
}

.brand-wordmark--header .brand-wordmark__divider {
  width: 1px;
  height: 27px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--void-primary) 65%, transparent), transparent);
  box-shadow: 0 0 calc(10px * var(--void-glow-level)) color-mix(in srgb, var(--void-primary) 38%, transparent);
}

.brand-wordmark--header .brand-wordmark__haxball {
  font-size: 11px;
  line-height: 1;
  letter-spacing: .31em;
  font-weight: 800;
  opacity: .92;
}

.topbar .actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.void-header-badge {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--void-primary) 38%, transparent);
  background: color-mix(in srgb, var(--void-surface) 88%, transparent);
  color: color-mix(in srgb, var(--void-primary) 82%, white);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 5%, transparent);
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}

.void-header-badge--link:hover,
.void-header-badge--link:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--void-primary) 66%, transparent);
  background: color-mix(in srgb, var(--void-primary) 9%, var(--void-surface));
  color: white;
}

.header-icon-btn {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--void-primary) 26%, var(--void-border-soft));
  border-radius: 5px;
  background: color-mix(in srgb, var(--void-surface) 90%, transparent);
  color: color-mix(in srgb, var(--void-primary) 78%, white);
  cursor: pointer;
  text-decoration: none;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 5%, transparent);
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.header-icon-btn:hover,
.header-icon-btn:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--void-primary) 66%, transparent);
  background: color-mix(in srgb, var(--void-primary) 10%, var(--void-surface));
  box-shadow: 0 0 calc(16px * var(--void-glow-level)) color-mix(in srgb, var(--void-primary) 24%, transparent);
}

.header-action-icon {
  width: 18px;
  height: 18px;
  display: block;
  background: currentColor;
  -webkit-mask: var(--header-icon) center / contain no-repeat;
  mask: var(--header-icon) center / contain no-repeat;
  transition: transform .48s cubic-bezier(.2,.75,.2,1), color .2s ease;
  transform-origin: center;
}

.header-action-icon--discord { --header-icon: url('/assets/images/ui/discord-fill.png'); }
.header-action-icon--settings { --header-icon: url('/assets/images/ui/settings.png'); }
.header-icon-btn:hover .header-action-icon,
.header-icon-btn:focus-visible .header-action-icon { transform: rotate(360deg); }

.topbar .header-login-btn,
.topbar .actions .header-login-btn {
  min-width: 104px;
  width: auto;
  height: 39px;
  padding: 0 18px;
  border-radius: 5px;
  font-size: 12px;
}

.footer.footer--minimal {
  min-height: 84px;
  padding: 22px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid color-mix(in srgb, var(--void-primary) 12%, transparent);
  text-align: center;
}

.footer--minimal .footer__legal {
  margin: 0;
  max-width: 1100px;
  color: color-mix(in srgb, var(--text) 54%, transparent);
  font-size: 11px;
  line-height: 1.65;
  letter-spacing: .015em;
}

/* Birleşik Özelleştir + Müzik paneli */
.void-dock--preferences {
  position: relative;
  z-index: 10030;
}

.preferences-drawer {
  position: fixed;
  inset: 0;
  z-index: 10030;
  visibility: hidden;
  pointer-events: none;
}

.preferences-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 3, 9, .62);
  opacity: 0;
  transition: opacity .24s ease;
}

.preferences-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(440px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--void-primary) 7%, transparent), transparent 42%),
    color-mix(in srgb, var(--void-bg-2) 96%, #03070d);
  border-left: 1px solid color-mix(in srgb, var(--void-primary) 28%, var(--void-border-soft));
  box-shadow: -24px 0 70px rgba(0,0,0,.44);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.22,.8,.22,1);
  overflow: hidden;
}

.preferences-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}
.preferences-drawer.is-open .preferences-drawer__backdrop { opacity: 1; }
.preferences-drawer.is-open .preferences-drawer__panel { transform: translateX(0); }

.preferences-drawer__head {
  min-height: 86px;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--void-primary) 16%, var(--void-border-soft));
}
.preferences-drawer__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--void-primary);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .18em;
}
.preferences-drawer__head h2 {
  margin: 0;
  font-family: "Orbitron", "Manrope", sans-serif;
  font-size: 21px;
  letter-spacing: .045em;
}
.preferences-drawer__close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--void-border-soft);
  border-radius: 5px;
  background: var(--void-surface);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.preferences-drawer__close:hover { color: var(--void-primary); border-color: var(--void-primary-a35); transform: rotate(90deg); }

.preferences-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--void-primary) 12%, var(--void-border-soft));
}
.preferences-tab {
  height: 40px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font: 800 11px/1 "Manrope", sans-serif;
  letter-spacing: .06em;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.preferences-tab:hover { color: var(--text); background: color-mix(in srgb, var(--void-primary) 5%, transparent); }
.preferences-tab.is-active {
  color: var(--void-primary);
  border-color: color-mix(in srgb, var(--void-primary) 35%, transparent);
  background: color-mix(in srgb, var(--void-primary) 9%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 5%, transparent);
}

.preferences-drawer__body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.preferences-panel {
  height: 100%;
  padding: 16px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--void-primary) 35%, transparent) transparent;
}
.preferences-panel[hidden] { display: none !important; }
.preferences-panel.is-active { animation: voidPreferencesPanel .24s ease both; }
@keyframes voidPreferencesPanel { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }

.preferences-card {
  margin: 0 0 10px;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--void-primary) 14%, var(--void-border-soft));
  border-radius: 6px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--void-primary) 4%, transparent), var(--void-surface));
}
.preferences-card__title {
  margin-bottom: 13px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.preferences-card__title h3 { margin: 0; font-size: 12px; letter-spacing: .04em; }
.preferences-card__title span { color: var(--muted); font-size: 9px; }
.preferences-card--compact { display: grid; gap: 12px; }

.preferences-drawer .theme-swatches {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.preferences-drawer .theme-swatch {
  min-width: 0;
  height: 64px;
  padding: 8px 4px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--void-border-soft);
  border-radius: 5px;
  background: var(--void-surface);
  color: var(--muted);
  cursor: pointer;
}
.preferences-drawer .theme-swatch__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sw1), var(--sw2));
  box-shadow: 0 0 12px color-mix(in srgb, var(--sw1) 32%, transparent);
}
.preferences-drawer .theme-swatch__label { font-size: 8px; font-weight: 800; }
.preferences-drawer .theme-swatch.is-active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--void-primary) 62%, transparent);
  background: color-mix(in srgb, var(--void-primary) 8%, var(--void-surface));
}
.preferences-drawer .theme-reset-btn { width: 100%; height: 41px; margin-top: 5px; }

.preferences-now-playing {
  min-height: 118px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 17px;
  border: 1px solid color-mix(in srgb, var(--void-primary) 26%, var(--void-border-soft));
  border-radius: 6px;
  background:
    radial-gradient(circle at 90% 15%, color-mix(in srgb, var(--void-primary) 16%, transparent), transparent 40%),
    var(--void-surface);
}
.preferences-now-playing > div:last-child { min-width: 0; display: grid; gap: 4px; }
.preferences-now-playing small { color: var(--void-primary); font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.preferences-now-playing strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
.preferences-now-playing span { color: var(--muted); font-size: 11px; }
.preferences-now-playing__pulse { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; gap: 3px; border-radius: 50%; background: color-mix(in srgb, var(--void-primary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--void-primary) 30%, transparent); }
.preferences-now-playing__pulse span { width: 3px; height: 17px; background: var(--void-primary); border-radius: 3px; animation: voidEqualizer 1s ease-in-out infinite; }
.preferences-now-playing__pulse span:nth-child(2) { height: 27px; animation-delay: -.25s; }
.preferences-now-playing__pulse span:nth-child(3) { height: 12px; animation-delay: -.5s; }
@keyframes voidEqualizer { 0%,100% { transform: scaleY(.55); opacity: .65; } 50% { transform: scaleY(1); opacity: 1; } }

.preferences-music-controls {
  margin: 16px 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.preferences-music-controls button {
  width: 43px;
  height: 43px;
  border: 1px solid var(--void-border-soft);
  border-radius: 5px;
  background: var(--void-surface);
  color: var(--text);
  cursor: pointer;
}
.preferences-music-controls .preferences-play {
  width: 54px;
  height: 54px;
  border-color: color-mix(in srgb, var(--void-primary) 58%, transparent);
  background: var(--void-grad);
  color: white;
  box-shadow: 0 0 calc(20px * var(--void-glow-level)) color-mix(in srgb, var(--void-primary) 32%, transparent);
}
.preferences-volume,
.preferences-modes {
  margin-bottom: 10px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--void-border-soft);
  border-radius: 5px;
  background: var(--void-surface);
}
.preferences-volume button,
.preferences-modes button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--void-border-soft);
  border-radius: 4px;
  background: color-mix(in srgb, var(--void-bg-2) 82%, transparent);
  color: var(--text);
  font: 700 10px/1 "Manrope", sans-serif;
  cursor: pointer;
}
.preferences-volume input { flex: 1; accent-color: var(--void-primary); }
.preferences-modes { display: grid; grid-template-columns: 1fr 1fr; }
.preferences-empty { padding: 18px; text-align: center; color: var(--muted); font-size: 11px; border: 1px dashed var(--void-border-soft); border-radius: 5px; }
.preferences-playlist { display: grid; gap: 7px; margin-top: 10px; }
.preferences-playlist .music-track {
  width: 100%;
  padding: 11px 12px;
  display: grid;
  gap: 3px;
  text-align: left;
  border: 1px solid var(--void-border-soft);
  border-radius: 5px;
  background: var(--void-surface);
  color: var(--text);
  cursor: pointer;
}
.preferences-playlist .music-track.is-active { border-color: color-mix(in srgb, var(--void-primary) 55%, transparent); background: color-mix(in srgb, var(--void-primary) 7%, var(--void-surface)); }
.preferences-playlist .music-track__title { font-size: 11px; font-weight: 800; }
.preferences-playlist .music-track__artist { color: var(--muted); font-size: 9px; }

body.void-preferences-open { overflow: hidden; }

@media (max-width: 1320px) {
  .topbar { gap: 18px; }
  .topbar .logo-wrap { min-width: 188px; }
  .nav { gap: 16px; }
  .nav__item { font-size: 13px; }
  .void-header-badge { padding-inline: 8px; font-size: 8px; }
}

@media (max-width: 1100px) {
  .topbar .actions { margin-left: auto; }
  .void-header-badge--link { display: none; }
  .void-header-badge { min-width: 32px; padding: 0 7px; }
  .topbar .header-login-btn,
  .topbar .actions .header-login-btn { min-width: 92px; height: 37px; padding-inline: 14px; }
}

@media (max-width: 720px) {
  .brand-wordmark--header .brand-wordmark__void { font-size: 20px; }
  .brand-wordmark--header .brand-wordmark__haxball,
  .brand-wordmark--header .brand-wordmark__divider { display: none; }
  .topbar .logo-wrap { min-width: auto; }
  .void-header-badge { display: none; }
  .header-icon-btn { width: 34px; height: 34px; flex-basis: 34px; }
  .topbar .header-login-btn,
  .topbar .actions .header-login-btn { min-width: 76px; height: 35px; padding: 0 11px; font-size: 11px; }
  .preferences-drawer__panel { width: min(400px, 100%); }
  .preferences-drawer .theme-swatches { grid-template-columns: repeat(3, 1fr); }
}

/* ========================================================================
   VIP Karşılaştırma Tablosu
   ======================================================================== */
.vip-comparison {
  margin-top: 14px;
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--void-primary) 18%, var(--void-border-soft));
  border-radius: 7px;
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--void-primary) 5%, transparent), transparent 48%),
    linear-gradient(180deg, var(--void-panel-1), var(--void-panel-2));
  box-shadow: 0 18px 48px rgba(0,0,0,.24), inset 0 1px 0 color-mix(in srgb, white 5%, transparent);
}
.vip-comparison__intro {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
  align-items: end;
  gap: 30px;
  padding: 4px 4px 20px;
}
.vip-comparison__intro h2 {
  margin: 7px 0 0;
  font-family: "Orbitron", "Manrope", sans-serif;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.15;
}
.vip-comparison__intro p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.vip-matrix-wrap {
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--void-primary) 18%, var(--void-border-soft));
  border-radius: 6px;
  background: color-mix(in srgb, var(--void-bg-2) 91%, transparent);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--void-primary) 35%, transparent) transparent;
}
.vip-matrix {
  width: 100%;
  min-width: 820px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.vip-matrix th,
.vip-matrix td {
  padding: 13px 16px;
  border-right: 1px solid color-mix(in srgb, var(--void-primary) 9%, var(--void-border-soft));
  border-bottom: 1px solid color-mix(in srgb, var(--void-primary) 9%, var(--void-border-soft));
  text-align: center;
  vertical-align: middle;
}
.vip-matrix tr > *:last-child { border-right: 0; }
.vip-matrix tbody tr:last-child > * { border-bottom: 0; }
.vip-matrix__feature-head,
.vip-matrix tbody th,
.vip-matrix tfoot th {
  width: 40%;
  text-align: left;
}
.vip-matrix__feature-head {
  color: color-mix(in srgb, var(--text) 78%, transparent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--void-primary) 4%, var(--void-bg-2));
}
.vip-matrix__plan {
  position: relative;
  width: 20%;
  height: 136px;
  padding-block: 18px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--plan-tone) 10%, var(--void-bg-2)), var(--void-bg-2));
  box-shadow: inset 0 3px 0 var(--plan-tone);
}
.vip-matrix__plan--elite { --plan-tone: #ffba18; }
.vip-matrix__plan--ultra { --plan-tone: #9b3bff; }
.vip-matrix__plan--prime { --plan-tone: #ffd75f; }
.vip-matrix__plan-name { display: block; margin-bottom: 9px; color: color-mix(in srgb, var(--plan-tone) 78%, white); font: 900 15px/1 "Orbitron", sans-serif; }
.vip-matrix__plan strong { display: block; color: var(--plan-tone); font: 900 25px/1 "Orbitron", sans-serif; }
.vip-matrix__plan small { display: block; margin-top: 8px; color: var(--muted); font-size: 9px; }
.vip-matrix__recommended {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--plan-tone) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--plan-tone) 42%, transparent);
  color: color-mix(in srgb, var(--plan-tone) 80%, white);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .08em;
}
.vip-matrix tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--void-bg-2) 97%, transparent);
  color: color-mix(in srgb, var(--text) 87%, transparent);
  font-size: 12px;
  font-weight: 700;
}
.vip-matrix tbody td { color: var(--muted); font-size: 13px; background: color-mix(in srgb, var(--void-panel-1) 72%, transparent); }
.vip-matrix tbody tr:nth-child(even) td,
.vip-matrix tbody tr:nth-child(even) th { background: color-mix(in srgb, var(--void-primary) 3%, var(--void-bg-2)); }
.vip-matrix tbody tr:hover td,
.vip-matrix tbody tr:hover th { background: color-mix(in srgb, var(--void-primary) 7%, var(--void-bg-2)); }
.vip-check,
.vip-cross {
  width: 27px;
  height: 27px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 900;
}
.vip-check { color: #68f7a3; background: rgba(0,230,118,.08); border: 1px solid rgba(0,230,118,.22); text-shadow: 0 0 12px rgba(0,230,118,.32); }
.vip-cross { color: #ff6c80; background: rgba(255,59,92,.07); border: 1px solid rgba(255,59,92,.18); }
.vip-value { color: var(--void-primary); font-family: "Orbitron", sans-serif; font-weight: 900; }
.vip-matrix tfoot th,
.vip-matrix tfoot td { padding-block: 15px; border-bottom: 0; background: color-mix(in srgb, var(--void-bg-2) 96%, transparent); }
.vip-matrix tfoot a {
  min-width: 96px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--void-primary) 42%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--void-primary) 8%, transparent);
  color: var(--void-primary);
  font-size: 10px;
  font-weight: 900;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.vip-matrix tfoot a:hover { transform: translateY(-1px); background: var(--void-primary); color: #021016; }
.vip-comparison__notice {
  margin-top: 12px;
  padding: 13px 15px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--void-primary) 15%, var(--void-border-soft));
  border-radius: 5px;
  background: color-mix(in srgb, var(--void-primary) 4%, transparent);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}
.vip-comparison__notice strong { color: var(--void-primary); white-space: nowrap; }

@media (max-width: 780px) {
  .vip-comparison { padding: 14px; }
  .vip-comparison__intro { grid-template-columns: 1fr; gap: 10px; }
  .vip-comparison__intro p { font-size: 12px; }
  .vip-comparison__notice { flex-direction: column; gap: 5px; }
}