/* The Maximum website: the same red theme as the launcher. */
:root {
  --bg: #0d0505;
  --bg-2: #140707;
  --card: rgba(255, 255, 255, 0.035);
  --card-hover: rgba(255, 255, 255, 0.06);
  --border: rgba(249, 115, 22, 0.14);
  --text: #fff3f0;
  --muted: #c9a39b;
  --faint: #8d665e;
  --accent: #f97316;
  --accent-2: #e11d48;
  --gradient: linear-gradient(135deg, #f97316, #e11d48);
  --green: #34d399;
  --yellow: #fbbf24;
  --red: #f87171;
  --radius: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  font-family: "Geist", "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1100px 650px at 85% -10%, rgba(124, 45, 18, 0.45), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(225, 29, 72, 0.12), transparent 60%),
    var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
[hidden] { display: none !important; }
.wrap { width: min(1160px, 100% - 32px); margin: 0 auto; }
.wrap.narrow { width: min(780px, 100% - 32px); }
.gradient-text { background: linear-gradient(90deg, #fdba74, #fb7185); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 20px; border-radius: 11px; font-weight: 800; letter-spacing: .3px;
  background: var(--gradient); color: #fff; box-shadow: 0 10px 30px rgba(234, 88, 12, 0.3);
  transition: transform .12s, filter .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 14px 38px rgba(234, 88, 12, 0.42); }
.btn-small { padding: 9px 15px; font-size: 14px; }
.btn-small svg { width: 16px; height: 16px; }
.btn-big { padding: 16px 26px; font-size: 17px; }
.btn-discord { background: #5865f2; box-shadow: 0 10px 30px rgba(88, 101, 242, 0.3); }
.btn-discord:hover { box-shadow: 0 14px 38px rgba(88, 101, 242, 0.42); }
.icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--muted); }
.icon-btn:hover { background: var(--card-hover); color: #fff; }
.icon-btn svg { width: 22px; height: 22px; }

/* ---------- Navigation ---------- */
.nav { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(14px); background: rgba(13, 5, 5, 0.72); border-bottom: 1px solid rgba(249, 115, 22, 0.08); }
.nav-inner { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: 4px; font-size: 17px; }
.brand span { background: linear-gradient(90deg, #fdba74, #fb7185); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-links { display: flex; gap: 22px; margin-left: 12px; font-size: 15px; color: var(--muted); }
.nav-links a:hover { color: #fff; }
.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* ---------- Hero ---------- */
.hero { padding: 72px 0 40px; }
.hero-inner { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; }
.live-pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--border); font-size: 14px; color: var(--muted); }
.live-pill:hover { color: #fff; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); flex-shrink: 0; }
.dot.online { background: var(--green); box-shadow: 0 0 10px rgba(52, 211, 153, 0.8); }
.dot.offline { background: var(--red); }
h1 { font-size: clamp(40px, 6vw, 70px); line-height: 1.04; letter-spacing: -1.5px; font-weight: 900; margin: 22px 0 18px; }
.lead { font-size: 19px; color: var(--muted); max-width: 560px; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.download-note { margin-top: 14px; font-size: 14px; color: var(--faint); }

.hero-art { position: relative; height: 440px; display: grid; place-items: center; }
.glow { position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(225, 29, 72, 0.45), rgba(249, 115, 22, 0.15) 45%, transparent 70%); filter: blur(10px); animation: pulse 5s ease-in-out infinite; }
.hero-logo { position: relative; width: min(320px, 70%); filter: drop-shadow(0 20px 50px rgba(225, 29, 72, 0.45)); animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-12px) rotate(-1deg); } }
@keyframes pulse { 50% { transform: scale(1.08); opacity: .85; } }
.float-card { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: rgba(28, 10, 9, 0.88); border: 1px solid var(--border); backdrop-filter: blur(10px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.float-label { display: block; font-size: 12px; color: var(--muted); }
.shop-card { right: 0; bottom: 34px; max-width: 290px; }
.shop-card img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: radial-gradient(circle at 50% 30%, var(--r1, #6b6b6b), var(--r2, #34343a) 80%); }
.shop-card b { display: block; font-size: 16px; }
.price { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: #fdba74; }
.players-card { left: 0; top: 40px; flex-direction: column; align-items: flex-start; gap: 0; }
.big-number { font-size: 30px; font-weight: 900; line-height: 1.1; }

/* ---------- Sections ---------- */
.section { padding: 56px 0; }
.section-title { font-size: clamp(28px, 4vw, 40px); font-weight: 900; letter-spacing: -.5px; margin-bottom: 10px; }
.section-sub { color: var(--muted); margin-bottom: 26px; }
.title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.title-row .section-title { margin: 0; }
.reset { color: var(--muted); font-size: 15px; }
.empty { color: var(--faint); padding: 24px 0; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.step { position: relative; padding: 26px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); }
.step-number { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--gradient); font-weight: 900; font-size: 18px; margin-bottom: 16px; }
.step h3, .feature h3, .mode h3 { font-size: 19px; margin-bottom: 6px; }
.step p, .feature p, .mode p { color: var(--muted); font-size: 15px; }

.modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mode { position: relative; padding: 22px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); overflow: hidden; }
.mode.arena { background: linear-gradient(160deg, rgba(225, 29, 72, 0.14), var(--card) 60%); }
.mode .state { display: inline-block; margin-top: 16px; padding: 4px 10px; border-radius: 7px; font-size: 12px; font-weight: 800; letter-spacing: .6px; background: rgba(255, 255, 255, 0.06); color: var(--muted); }
.state.ready { background: rgba(52, 211, 153, 0.14); color: var(--green); }
.state.playing { background: rgba(251, 191, 36, 0.14); color: var(--yellow); }
.state.starting { background: rgba(147, 197, 253, 0.12); color: #93c5fd; }
.state.offline { background: rgba(248, 113, 113, 0.12); color: var(--red); }

.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px; }
.feature { padding: 22px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); transition: background .15s, transform .15s; }
.feature:hover { background: var(--card-hover); transform: translateY(-2px); }

/* ---------- Item shop ---------- */
.shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.tile {
  --r1: #6b6b6b; --r2: #34343a;
  position: relative; aspect-ratio: 1 / 1.15; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  background: radial-gradient(circle at 50% 30%, var(--r1), var(--r2) 78%);
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tile-info { position: relative; padding: 12px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.88) 55%); }
.tile-name { font-weight: 900; font-size: 15px; text-transform: uppercase; line-height: 1.2; }
.tile-kind { font-size: 12px; color: rgba(255, 255, 255, 0.7); }
.tile .price { margin-top: 4px; color: #fff; }
.vbucks { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, #93c5fd, #3b5bdb); box-shadow: inset 0 0 0 1px #c7d2fe; }
.rarity-uncommon { --r1: #69bb1e; --r2: #1b4d14; }
.rarity-rare { --r1: #2cc3fc; --r2: #143a78; }
.rarity-epic { --r1: #c359ff; --r2: #3e1c6e; }
.rarity-legendary { --r1: #ea8d23; --r2: #6a2b14; }
.rarity-mythic { --r1: #ffd84f; --r2: #6e4d07; }
.rarity-marvel { --r1: #e53a46; --r2: #4c0f16; }
.rarity-dc { --r1: #6687f0; --r2: #1a2456; }
.rarity-icon { --r1: #36b7b7; --r2: #0d3443; }
.rarity-gaminglegends { --r1: #8a7bff; --r2: #241a5e; }
.rarity-starwars { --r1: #405a8a; --r2: #0b1120; }
.rarity-shadow { --r1: #5a5a66; --r2: #101015; }
.rarity-slurp { --r1: #29f1f2; --r2: #0c4d8f; }
.rarity-frozen { --r1: #c4dff7; --r2: #3c5e96; }
.rarity-lava { --r1: #f8a23c; --r2: #6b2310; }
.rarity-dark { --r1: #ff42e7; --r2: #3a0d47; }

/* ---------- Leaderboard ---------- */
.board { display: grid; gap: 6px; }
.board-row { display: grid; grid-template-columns: 40px 40px 1fr auto auto; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); }
.rank { font-weight: 900; color: var(--muted); text-align: center; }
.rank-1 { color: #fcd34d; } .rank-2 { color: #e5e7eb; } .rank-3 { color: #fdba74; }
.avatar { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); font-weight: 900; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.board-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-stat { text-align: right; font-weight: 800; }
.board-stat small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .6px; color: var(--muted); }

/* ---------- FAQ ---------- */
details { border-radius: 12px; background: var(--card); border: 1px solid var(--border); margin-bottom: 10px; }
summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 800; font-size: 17px; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--accent); font-size: 22px; line-height: 1; transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
details p { padding: 0 22px 20px; color: var(--muted); }

/* ---------- Call to action ---------- */
.cta { display: flex; align-items: center; gap: 24px; padding: 32px; border-radius: 20px; background: linear-gradient(120deg, rgba(249, 115, 22, 0.18), rgba(225, 29, 72, 0.16)); border: 1px solid rgba(249, 115, 22, 0.25); }
.cta h2 { font-size: 30px; font-weight: 900; }
.cta p { color: var(--muted); }
.cta-buttons { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.footer { padding: 36px 0 48px; border-top: 1px solid rgba(249, 115, 22, 0.08); margin-top: 30px; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.footer nav { display: flex; gap: 20px; color: var(--muted); }
.footer nav a:hover { color: #fff; }
.legal { width: 100%; font-size: 13px; color: var(--faint); }

/* ---------- Status page ---------- */
.status-page { padding: 60px 0; }
.status-head { display: flex; align-items: center; gap: 16px; padding: 26px; border-radius: 18px; background: var(--card); border: 1px solid var(--border); margin: 26px 0 18px; }
.status-head .dot { width: 16px; height: 16px; }
.status-head h2 { font-size: 26px; }
.status-head p { color: var(--muted); }
.status-list { display: grid; gap: 8px; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); }
.status-row .state { padding: 4px 10px; border-radius: 7px; font-size: 12px; font-weight: 800; letter-spacing: .6px; }
.updated { margin-top: 14px; color: var(--faint); font-size: 14px; }

/* ---------- 404 ---------- */
.not-found { min-height: 70vh; display: grid; place-items: center; text-align: center; }
.not-found img { width: 120px; margin-bottom: 18px; }
.not-found p { color: var(--muted); margin: 8px 0 24px; }

/* ---------- Phones and small windows ---------- */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .hero { padding-top: 40px; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-art { height: 360px; }
  .steps { grid-template-columns: 1fr; }
  .modes, .features { grid-template-columns: repeat(2, 1fr); }
  .cta { flex-direction: column; text-align: center; }
  .cta-buttons { margin: 0; justify-content: center; }
}
@media (max-width: 560px) {
  .modes, .features { grid-template-columns: 1fr; }
  .hero-buttons .btn { width: 100%; }
  .float-card { transform: scale(.88); }
  .board-row { grid-template-columns: 30px 36px 1fr auto; gap: 10px; }
  .board-row .board-stat:last-child { display: none; }
  .nav-actions .btn-small { padding: 9px 12px; }
}