:root {
  --av-primary: #0f766e;
  --av-accent: #2563eb;
  --av-bg: #f6f7f9;
  --av-ink: #122027;
  --av-card: #fff;
  --av-muted: color-mix(in srgb, var(--av-ink) 62%, white);
  --av-safe-b: env(safe-area-inset-bottom, 0px);
  --av-safe-t: env(safe-area-inset-top, 0px);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--av-bg);
  color: var(--av-ink);
  min-height: 100dvh;
  padding-bottom: calc(4.5rem + var(--av-safe-b));
}
.wrap { width: min(52rem, calc(100% - 2rem)); margin: 0 auto; }
.app-header {
  position: sticky; top: 0; z-index: 4;
  padding: calc(0.75rem + var(--av-safe-t)) 0 0.75rem;
  background: color-mix(in srgb, var(--av-bg) 88%, white);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--av-ink) 8%, transparent);
}
.block { padding: 2rem 0; animation: rise .7s ease both; }
.block:nth-child(2) { animation-delay: .06s; }
.block:nth-child(3) { animation-delay: .12s; }
.hero { padding: 3.6rem 0 2.4rem; }
.hero h1 { font-size: clamp(1.9rem, 6vw, 3rem); line-height: 1.1; margin: 0 0 0.75rem; }
.kicker {
  letter-spacing: .18em; text-transform: uppercase; font-size: .72rem;
  font-weight: 800; color: var(--av-primary); margin: 0 0 .5rem;
}
.lead { font-size: 1.05rem; line-height: 1.55; color: var(--av-muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0.7rem 1.15rem; border-radius: 12px; border: 0;
  background: var(--av-primary); color: #fff; font-weight: 650; text-decoration: none; cursor: pointer;
}
.btn-ghost {
  background: transparent; color: var(--av-ink);
  border: 1px solid color-mix(in srgb, var(--av-ink) 18%, transparent);
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.grid { display: grid; gap: 0.85rem; }
@media (min-width: 720px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .columns.grid { grid-template-columns: repeat(2, 1fr); }
}
.card {
  background: var(--av-card); border-radius: 16px; padding: 1.1rem;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--av-ink) 6%, transparent);
}
.card h3 { margin: 0 0 0.4rem; }
.card p, .prose p { line-height: 1.55; }
.contact-form { display: grid; gap: 0.75rem; }
.contact-form label { display: grid; gap: 0.3rem; font-weight: 600; font-size: 0.92rem; }
.contact-form input, .contact-form textarea {
  min-height: 44px; border: 1px solid color-mix(in srgb, var(--av-ink) 14%, transparent);
  border-radius: 12px; padding: 0.65rem 0.8rem; font: inherit; background: #fff;
}
.block.image img { width: 100%; border-radius: 16px; display: block; }
.spacer-s { height: 1rem; } .spacer-m { height: 2.25rem; } .spacer-l { height: 4rem; }
.app-nav {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-around; gap: 0.25rem;
  padding: 0.4rem 0.5rem calc(0.4rem + var(--av-safe-b));
  background: color-mix(in srgb, #fff 92%, var(--av-bg));
  border-top: 1px solid color-mix(in srgb, var(--av-ink) 10%, transparent);
  backdrop-filter: blur(14px);
}
.app-nav a {
  flex: 1; min-height: 44px; display: grid; place-items: center;
  text-decoration: none; color: var(--av-ink); font-weight: 650; font-size: 0.86rem; border-radius: 10px;
}
.app-nav a:hover { background: color-mix(in srgb, var(--av-primary) 10%, transparent); }
.maintenance { display: grid; place-items: center; min-height: 100dvh; text-align: center; }
.form-status { color: var(--av-primary); font-weight: 650; }
.form-status.is-error { color: #b42318; }
.muted { color: var(--av-muted); }

.match-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.match-list li {
  display: grid; grid-template-columns: 8rem 1fr auto; gap: .8rem; align-items: center;
  background: var(--av-card); border-radius: 14px; padding: .85rem 1rem;
}
.table-wrap { overflow-x: auto; border-radius: 16px; background: var(--av-card); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .7rem .85rem; text-align: left; }
tr.is-self { background: color-mix(in srgb, var(--av-primary) 14%, transparent); font-weight: 700; }
.player .num { font-size: 1.5rem; font-weight: 800; color: var(--av-primary); display: block; }
.fact strong { font-size: 1.6rem; display: block; }

.jumbo-arena { position: relative; padding: 2.5rem 1rem 2rem; overflow: hidden; }
.jumbo-arena::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--av-primary) 28%, transparent), transparent 70%),
    linear-gradient(180deg, #081018, #05070a);
}
.jumbo-rig { position: relative; width: min(42rem, 100%); margin: 0 auto; }
.jumbo-gantry { height: 28px; position: relative; }
.jumbo-gantry span {
  display: block; height: 8px; border-radius: 99px;
  background: linear-gradient(90deg, #8aa, #eef, #8aa);
  box-shadow: 0 0 16px rgb(126 200 240 / 35%);
}
.jumbo-gantry i {
  position: absolute; top: 8px; width: 2px; height: 36px;
  background: linear-gradient(#9ab, transparent); opacity: .7;
}
.jumbo-gantry i:nth-child(2) { left: 18%; }
.jumbo-gantry i:nth-child(3) { left: 38%; }
.jumbo-gantry i:nth-child(4) { right: 38%; }
.jumbo-gantry i:nth-child(5) { right: 18%; }
.jumbo-cube {
  margin-top: 1.2rem; border-radius: 18px; padding: 1.2rem 1rem 1rem;
  background: linear-gradient(180deg, #121820, #0a1016);
  border: 1px solid rgb(126 200 240 / 22%);
  box-shadow: 0 24px 60px rgb(0 0 0 / 45%), inset 0 1px 0 rgb(255 255 255 / 8%);
  animation: hang 3.6s ease-in-out infinite;
}
.jumbo-tag {
  margin: 0 0 .6rem; text-align: center; letter-spacing: .22em;
  text-transform: uppercase; font-size: .68rem; color: #7ec8f0;
  animation: blink 1.6s steps(2) infinite;
}
.jumbo-duel { display: grid; grid-template-columns: 1fr auto 1fr; gap: .6rem; align-items: center; }
.jumbo-club { display: grid; justify-items: center; gap: .35rem; color: #eaf6ff; font-size: .85rem; }
.jumbo-club img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 6px 12px rgb(0 0 0 / 40%)); }
.led {
  font-family: Orbitron, ui-monospace, monospace; font-size: clamp(1.8rem, 7vw, 2.8rem);
  letter-spacing: .08em; color: #8ce7ff;
  text-shadow: 0 0 12px #5ad7ff, 0 0 28px rgb(90 215 255 / 40%);
}
.jumbo-clock { margin: .2rem 0 0; text-align: center; color: #9bb8c8; font-size: .78rem; }
.jumbo-venue { text-align: center; color: #8aa3b3; font-size: .8rem; }
.jumbo-flanks { display: flex; justify-content: space-between; margin-top: .8rem; color: #9bb; font-size: .75rem; }
.jumbo-flanks b { display: block; color: #dff; font-size: .95rem; }

body.theme-ice {
  font-family: Manrope, Outfit, system-ui, sans-serif;
  color-scheme: dark;
  background:
    radial-gradient(900px 420px at 10% -10%, rgb(126 200 240 / 16%), transparent 50%),
    radial-gradient(700px 380px at 90% 0%, rgb(214 31 58 / 14%), transparent 46%),
    var(--av-bg);
}
body.theme-ice .app-header {
  background: rgb(5 7 10 / 72%);
  border-bottom-color: rgb(126 200 240 / 12%);
}
body.theme-ice .app-nav {
  background: rgb(8 12 16 / 88%);
  border-top-color: rgb(126 200 240 / 12%);
}
body.theme-ice .app-nav a { color: #eaf6ff; }
body.theme-ice .card {
  background: rgb(12 18 24 / 78%);
  border: 1px solid rgb(126 200 240 / 12%);
  box-shadow: 0 16px 40px rgb(0 0 0 / 28%);
}
body.theme-ice .btn-ghost { color: #eaf6ff; border-color: rgb(126 200 240 / 28%); }
body.theme-ice .match-list li { background: rgb(12 18 24 / 78%); }
body.theme-ice .table-wrap { background: rgb(12 18 24 / 78%); }
body.theme-ice h1, body.theme-ice h2 { font-family: Outfit, Manrope, sans-serif; }

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes hang {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
@keyframes blink { 50% { opacity: .45; } }

@media (max-width: 640px) {
  .match-list li { grid-template-columns: 1fr; }
  .jumbo-club img { width: 42px; height: 42px; }
}