/* ==========================================================================
   Design „Glass“ (Apple-Stil) – wird über style.css geladen.
   Durchscheinende Flächen mit Unschärfe, weiche Ecken, ruhige Animationen.
   ========================================================================== */
:root {
  --bg: rgba(10, 12, 20, .42);
  --bg-2: rgba(16, 19, 30, .55);
  --panel: rgba(255, 255, 255, .055);
  --panel-2: rgba(255, 255, 255, .085);
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);
  --text: #f5f5f7;
  --muted: rgba(235, 235, 245, .58);
  --ct: #64b5ff;
  --t: #ffad4a;
  --ok: #32d74b;
  --bad: #ff453a;
  --busy: #ffd60a;
  --radius: 18px;
  --panel-solid: rgba(28, 30, 42, .94);
  --glass-blur: blur(28px) saturate(180%);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .05);
  --glass-shadow: 0 20px 50px -20px rgba(0, 0, 0, .65);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --font-head: -apple-system, "SF Pro Display", "Inter", system-ui, sans-serif;
  --font-body: -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif;
}

body {
  background: #05060a;
  font-size: 15px; letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
}

/* Bunte, langsam treibende Lichter hinter dem Glas */
.bg-orbs { display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-orbs i {
  position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%;
  filter: blur(90px); opacity: .5; mix-blend-mode: screen;
  animation: orb 28s var(--ease) infinite alternate;
}
.bg-orbs i:nth-child(1) { background: var(--accent-2); top: -18vmax; right: -10vmax; }
.bg-orbs i:nth-child(2) { background: #2f6bff; bottom: -22vmax; left: -14vmax; animation-duration: 34s; animation-delay: -8s; }
.bg-orbs i:nth-child(3) { background: #a24bff; top: 30%; left: 40%; width: 34vmax; height: 34vmax; opacity: .28; animation-duration: 40s; animation-delay: -16s; }
@keyframes orb {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(8vmax, 6vmax) scale(1.15); }
  100% { transform: translate(-6vmax, 10vmax) scale(.92); }
}

/* Überschriften: klar statt Militär-Look */
h1, h2, h3 { letter-spacing: -.02em; }
h1 { font-weight: 700; }
h2 { text-transform: none; letter-spacing: -.015em; font-size: 21px; font-weight: 700; }
h3 { letter-spacing: .02em; font-size: 13px; }

/* ---------- Glas-Flächen ---------- */
.top, .card, .statusbar, .stat, .srv-slot, .picker, .actionbar, .toast, .match, .tb-result,
.extras-row, .imp-result, .glove-pattern, .as-bar, .maint-banner, .flash, .lc-inline, .pack, .viz-tip {
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.card, .statusbar, .stat, .srv-slot, .picker, .match {
  background: linear-gradient(160deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03));
  border: 1px solid var(--line);
  box-shadow: var(--glass-edge), var(--glass-shadow);
}
.card { border-radius: 22px; padding: 24px; }
.card.notch::before {
  top: 0; left: 24px; right: 24px; width: auto; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 80%, transparent), transparent);
}

/* Lichtreflex, der dem Mauszeiger folgt (Position setzt fx.js) */
.card::after, .srv-slot::after, .stat::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -200px), rgba(255, 255, 255, .07), transparent 45%);
  opacity: 0; transition: opacity .4s;
}
.card:hover::after, .srv-slot:hover::after, .stat:hover::after { opacity: 1; }
.srv-slot, .stat { position: relative; overflow: hidden; }
.card:hover { border-color: rgba(255, 255, 255, .14); }

/* Kopfzeile: schwebende Glasleiste */
.top {
  margin: 12px auto 0; max-width: 1180px; width: calc(100% - 24px);
  top: 12px; border-radius: 20px; padding: 10px 14px 10px 18px;
  background: rgba(22, 24, 34, .55);
  border: 1px solid var(--line);
  box-shadow: var(--glass-edge), 0 12px 40px -12px rgba(0, 0, 0, .6);
  animation: drop-in .7s var(--ease) both;
}
.brand { font-family: var(--font-head); text-transform: none; letter-spacing: -.02em; font-size: 19px; }
.brand-mark {
  clip-path: none; border-radius: 11px; width: 34px; height: 34px; font-size: 14px;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent-2) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .5s var(--spring);
}
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.08); }
nav { gap: 4px; }
nav a, .linklike {
  padding: 7px 12px; border-radius: 99px; font-weight: 500;
  transition: background .25s, color .25s;
}
nav a:hover, .linklike:hover { background: rgba(255, 255, 255, .08); }
nav .me { padding: 0 6px; }
.avatar { border-radius: 50%; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; overflow: hidden;
  border-radius: 99px; padding: 10px 18px;
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: transform .35s var(--spring), background .25s, border-color .25s, box-shadow .25s, filter .25s;
}
.btn:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .2); transform: translateY(-1px); }
.btn:active { transform: scale(.96); transition-duration: .08s; }
.btn.primary {
  font-family: var(--font-body); text-transform: none; letter-spacing: -.01em; font-size: 15px; font-weight: 600;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--accent-2) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.btn.primary::after {  /* Glanz, der über den Button läuft */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .8s var(--ease);
}
.btn.primary:hover::after { transform: translateX(120%); }
.btn.big { font-size: 18px; padding: 15px 34px; }
.btn.steam { background: rgba(23, 26, 33, .7); }
.btn .ripple {
  position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0);
  background: rgba(255, 255, 255, .35); animation: ripple .6s var(--ease) forwards;
}
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* ---------- Formulare ---------- */
input, select {
  border-radius: 12px; background: rgba(0, 0, 0, .28); border-color: rgba(255, 255, 255, .1);
  transition: border-color .2s, box-shadow .25s, background .2s;
}
input:hover, select:hover { border-color: rgba(255, 255, 255, .18); }
input:focus, select:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); background: rgba(0, 0, 0, .38); }
select option { background: #1c1e28; }
code, .log { background: rgba(0, 0, 0, .3); border-color: rgba(255, 255, 255, .08); border-radius: 12px; }

/* Schalter wie bei iOS */
.switch { width: 50px; height: 30px; background: rgba(120, 120, 128, .32); transition: background .3s var(--ease); }
.switch::after {
  top: 2px; left: 2px; width: 26px; height: 26px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .3), 0 1px 1px rgba(0, 0, 0, .16);
  transition: transform .4s var(--spring), width .2s;
}
.toggle input:checked + .switch { background: var(--ok); }
.toggle input:checked + .switch::after { transform: translateX(20px); }
.toggle:active .switch::after { width: 32px; }
.toggle input:checked:active + .switch::after { transform: translateX(14px); }

/* Segment-Auswahl wie bei iOS */
.segmented { border-radius: 12px; background: rgba(118, 118, 128, .2); border-color: transparent; padding: 3px; }
.segmented .choice span { border-radius: 9px; transition: background .3s var(--ease), color .2s, box-shadow .3s; }
.segmented .choice input:checked + span { background: rgba(255, 255, 255, .16); box-shadow: 0 3px 10px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .12); }

.chip { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); }
.chip.active { background: linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--accent-2) 60%, transparent); }
.pill { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .12); }

/* ---------- Kacheln ---------- */
.mode-card, .map-tile, .skin-card, .slot, .checklist label, .preset, .team {
  border-radius: 16px;
  transition: transform .45s var(--spring), box-shadow .3s, border-color .25s, background .25s;
}
.mode-card { background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .09); }
.mode-card:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .075); }
.choice input:checked + .mode-card {
  background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--accent-2) 50%, transparent);
}
.mode-card strong { font-family: var(--font-head); text-transform: none; letter-spacing: -.01em; font-size: 17px; }
.map-tile { font-family: var(--font-head); text-transform: none; letter-spacing: -.01em; font-weight: 700; }
.map-tile:hover { transform: translateY(-4px) scale(1.02); }
.choice input:checked + .map-tile { box-shadow: 0 0 0 2px var(--accent), 0 14px 34px -10px color-mix(in srgb, var(--accent-2) 60%, transparent); }
.choice input:checked + .map-tile::after { animation: pop .45s var(--spring); }
.skin-card { background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02) 75%); border-color: rgba(255, 255, 255, .09); }
.skin-card:hover { transform: translateY(-4px) scale(1.02); }
.skin-card img { transition: transform .5s var(--spring); }
.skin-card:hover img { transform: scale(1.08) rotate(-2deg); }
.checklist label { border-radius: 12px; background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08); }
.team.ct { background: linear-gradient(180deg, rgba(100, 181, 255, .16), rgba(100, 181, 255, .02)); }
.team.t { background: linear-gradient(180deg, rgba(255, 173, 74, .16), rgba(255, 173, 74, .02)); }
.team-name { font-family: var(--font-head); text-transform: none; letter-spacing: .02em; }
.stepper button { border-radius: 50%; background: rgba(255, 255, 255, .08); transition: transform .35s var(--spring), background .2s; }
.stepper button:active { transform: scale(.88); }
.stepper input { font-family: var(--font-head); font-weight: 700; }
.preset { box-shadow: var(--glass-shadow); }
.preset:hover { transform: translateY(-4px); }
.preset-name { font-family: var(--font-head); text-transform: none; letter-spacing: -.01em; }
@keyframes pop { from { transform: scale(0); } }

/* ---------- Tabs als Glas-Segment mit gleitender Markierung ---------- */
.tabs {
  position: relative; display: inline-flex; max-width: 100%; gap: 2px; padding: 4px;
  border: 1px solid var(--line); border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge);
}
.tabs + * { clear: both; }
.tab {
  position: relative; z-index: 1; border: 0; border-radius: 12px; padding: 9px 18px;
  font: 600 15px var(--font-body); text-transform: none; letter-spacing: -.01em;
}
.tab.active { color: var(--text); border-bottom: 0; }
.tabs:not(.has-ind) .tab.active { background: rgba(255, 255, 255, .14); }
.tab-ind {
  display: block; position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 12px;
  background: rgba(255, 255, 255, .14);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .15);
  transition: transform .5s var(--spring), width .5s var(--spring);
}
.tab-panel.active { animation: panel-in .55s var(--ease) backwards; }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }

/* ---------- Startseite ---------- */
.hero {
  border-radius: 28px; border-color: rgba(255, 255, 255, .12);
  box-shadow: var(--glass-edge), 0 30px 80px -30px rgba(0, 0, 0, .8);
}
.hero h1 {
  font-family: var(--font-head); text-transform: none; letter-spacing: -.035em; font-weight: 800;
  background: linear-gradient(180deg, #fff 20%, color-mix(in srgb, var(--accent) 45%, #fff) 75%, var(--accent-2));
  -webkit-background-clip: text; background-clip: text;
  animation: rise .9s var(--ease) .15s both;
}
.hero .tags, .hero .scoreline, .hero .join-box { animation: rise .9s var(--ease) both; }
.hero .scoreline { animation-delay: .25s; }
.hero .tags { animation-delay: .35s; }
.hero .join-box { animation-delay: .45s; }
.scoreline { font-family: var(--font-head); }
.scoreline .num { font-weight: 800; letter-spacing: -.03em; }
.join-box .btn.primary.big { animation: breathe 3.2s ease-in-out 1.4s infinite; }
@keyframes breathe { 50% { box-shadow: 0 10px 40px -4px color-mix(in srgb, var(--accent-2) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45); } }

/* ---------- Leisten, Fenster, Meldungen ---------- */
.statusbar { border-radius: 20px; }
.actionbar {
  left: 50%; right: auto; bottom: 14px; transform: translateX(-50%);
  width: min(1160px, calc(100% - 24px)); border-radius: 22px;
  background: rgba(22, 24, 34, .6); border: 1px solid var(--line);
  box-shadow: var(--glass-edge), 0 20px 50px -10px rgba(0, 0, 0, .7);
  animation: bar-up .7s var(--ease) .3s both;
}
@keyframes bar-up { from { opacity: 0; transform: translate(-50%, 30px); } }
.overlay { background: rgba(0, 0, 0, .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: fade .3s ease both; }
.picker { border-radius: 26px; background: rgba(28, 30, 42, .72); animation: sheet .5s var(--spring) both; }
@keyframes sheet { from { opacity: 0; transform: translateY(24px) scale(.96); } }
@keyframes fade { from { opacity: 0; } }
.flash, .maint-banner { border-radius: 16px; animation: drop-in .6s var(--spring) both; }
.toast { border-radius: 16px; background: rgba(30, 32, 44, .75); animation: toast-in .5s var(--spring); }
.dl-bar { background: rgba(0, 0, 0, .3); border-color: rgba(255, 255, 255, .08); }
.dl-fill {
  background: linear-gradient(90deg, var(--accent-2), var(--accent), var(--accent-2)); background-size: 200% 100%;
  animation: flow 2s linear infinite;
}
.dl-pct, .stat-value, .m-map { font-family: var(--font-head); letter-spacing: -.02em; }
@keyframes flow { to { background-position: -200% 0; } }
.dot.on { animation: ping 2s var(--ease) infinite; }
@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(50, 215, 75, .6), 0 0 10px var(--ok); }
  100% { box-shadow: 0 0 0 10px rgba(50, 215, 75, 0), 0 0 10px var(--ok); }
}
.token-table tbody tr td { transition: background .2s; }
.token-table tbody tr:hover td { background: rgba(255, 255, 255, .04); }
.rank-bar .seg { transform-origin: left; animation: grow-x .9s var(--ease) both; }
@keyframes grow-x { from { transform: scaleX(0); } }
.live-radar canvas { background: rgba(0, 0, 0, .3); }

/* ---------- Einblenden ---------- */
@keyframes drop-in { from { opacity: 0; transform: translateY(-14px); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
.reveal { opacity: 0; transform: translateY(22px) scale(.985); filter: blur(4px); }
.reveal.shown {
  opacity: 1; transform: none; filter: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease), border-color .2s;
  transition-delay: var(--d, 0s), var(--d, 0s), var(--d, 0s), 0s;
}

@media (max-width: 600px) {
  .top { width: calc(100% - 16px); margin-top: 8px; top: 8px; }
  .card { padding: 18px; border-radius: 18px; }
  .tabs { display: flex; overflow-x: auto; }
}