*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --if-bg: #070b12;
  --if-bg-elevated: #0c121c;
  --if-bg-panel: rgba(8, 12, 20, 0.92);
  --if-bg-glass: rgba(10, 14, 24, 0.78);
  --if-border: rgba(148, 163, 184, 0.14);
  --if-border-strong: rgba(226, 232, 240, 0.16);
  --if-border-accent: rgba(245, 158, 11, 0.42);
  --if-accent: #f59e0b;
  --if-accent-hot: #fbbf24;
  --if-accent-deep: #d97706;
  --if-accent-soft: rgba(245, 158, 11, 0.14);
  --if-cyan: #38bdf8;
  --if-text: #e8eef6;
  --if-text-muted: #94a3b8;
  --if-text-dim: #64748b;
  --if-success: #22c55e;
  --if-danger: #f87171;
  --if-radius: 2px;
  --if-radius-sm: 1px;
  --if-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  --if-blur: blur(14px);
  --if-font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --if-display: "Teko", "Arial Narrow", Impact, sans-serif;
  --if-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--if-bg);
  font-family: var(--if-font);
  color: var(--if-text);
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--if-accent);
  outline-offset: 2px;
}

#tank-canvas {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 0;
  cursor: default;
  background: #0a1018;
}

.overlay {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(80% 60% at 50% 40%, rgba(245, 158, 11, 0.08), transparent 55%),
    rgba(4, 8, 14, 0.9);
  backdrop-filter: blur(8px);
  overflow-y: auto;
  padding: 1rem;
}
.overlay.hidden { display: none; }

.hidden { display: none !important; }

/* ===== IRON FRONT HANGAR SHELL ===== */
.wot-shell {
  position: fixed; inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: 56px 1fr auto 74px;
  grid-template-columns: 1fr;
  pointer-events: none;
}

.wot-shell.hidden { display: none; }

.wot-shell > * { pointer-events: auto; }

.wot-topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0 1rem 0 0.85rem;
  background:
    linear-gradient(180deg, rgba(14, 20, 32, 0.98), rgba(6, 10, 16, 0.94));
  border-bottom: 1px solid var(--if-border-accent);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03);
  backdrop-filter: var(--if-blur);
  position: relative;
}
.wot-topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.55), transparent);
  pointer-events: none;
}

.wot-topbar-left {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.wot-badge {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--if-text-dim);
  white-space: nowrap;
  text-transform: uppercase;
}

.wot-logo {
  font-family: var(--if-display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #f8fafc;
  line-height: 0.9;
  white-space: nowrap;
  text-transform: uppercase;
}
.wot-logo span { color: var(--if-accent-hot); }

.wot-resources {
  display: flex;
  gap: 0.28rem;
  margin-left: auto;
  flex-wrap: wrap;
  align-items: center;
}

.wot-res {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.28rem 0.5rem;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-sm);
  font-size: 0.66rem;
  min-width: 0;
  transition: border-color 0.15s var(--if-ease), background 0.15s var(--if-ease), box-shadow 0.15s var(--if-ease);
}
.wot-res:hover {
  border-color: rgba(245, 158, 11, 0.28);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.06);
}
.wot-res-xp {
  border-color: rgba(74, 222, 128, 0.35);
  background: rgba(74, 222, 128, 0.05);
}
.wot-res-xp .wot-res-icon { color: #4ade80; }
.wot-res-xp strong { color: #86efac; }
.wot-res-dub {
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.06);
}
.wot-res-credits {
  border-color: rgba(186, 198, 214, 0.45);
  background: rgba(148, 163, 184, 0.08);
}
.wot-res-credits .wot-res-icon { color: #e2e8f0; }
.wot-res-credits strong { color: #f1f5f9; }
.wot-res-dub .wot-res-icon { color: #fbbf24; }
.wot-res-dub strong { color: #fde68a; }
.wot-res-coal {
  border-color: rgba(120, 113, 108, 0.45);
  background: rgba(68, 64, 60, 0.12);
}
.wot-res-coal .wot-res-icon { color: #a8a29e; }
.wot-res-coal strong { color: #d6d3d1; }
.wot-res-steel {
  border-color: rgba(148, 163, 184, 0.5);
  background: rgba(100, 116, 139, 0.1);
}
.wot-res-steel .wot-res-icon { color: #94a3b8; }
.wot-res-steel strong { color: #cbd5e1; }

/* Währungs-Embleme (Credits / Kohle / Stahl) */
.if-ico {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  flex-shrink: 0;
  vertical-align: -0.08em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.wot-res-icon.if-ico,
.wot-shop-balance-icon.if-ico {
  font-size: 0;
  width: 0.9rem;
  height: 0.9rem;
  opacity: 1;
}
.if-ico-credits {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8.2' r='6.2' fill='%235a6470'/%3E%3Ccircle cx='8' cy='7.6' r='6.2' fill='%2398a4b4'/%3E%3Ccircle cx='8' cy='7.6' r='5.35' fill='%23d7dfe8'/%3E%3Ccircle cx='8' cy='7.6' r='4.45' fill='%23aeb9c8'/%3E%3Ccircle cx='8' cy='7.6' r='3.55' fill='%23eef3f8'/%3E%3Ccircle cx='8' cy='7.6' r='2.35' fill='none' stroke='%238992a0' stroke-width='.85'/%3E%3Cpath fill='%2377808c' d='M8 5.55l.55 1.15 1.25.18-.9.88.21 1.25L8 8.25l-1.11.76.21-1.25-.9-.88 1.25-.18z'/%3E%3Cpath fill='%23ffffff' opacity='.4' d='M4.4 4.6A5.1 5.1 0 0 1 8 2.9a5.1 5.1 0 0 1 3.6 1.5'/%3E%3C/svg%3E");
}
.if-ico-coal {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%233f3a36' d='M8.1 1.2 12.8 3.6l1.4 5.1-3.2 4.9-5.1-.6L2.2 8.4l1.6-4.7z'/%3E%3Cpath fill='%235c554f' d='M8.1 2.4 11.9 4.3l1 3.8-2.4 3.6-3.8-.4L4 8.1l1.2-3.5z'/%3E%3Cpath fill='%237a736c' d='M7.6 4.2 10.2 5.4l.4 2.1-1.8 1.9-2.2-.2-.9-2z'/%3E%3Cpath fill='%239c958c' opacity='.55' d='M7.9 4.8 9.4 5.5l.15.85-1 .95'/%3E%3C/svg%3E");
}
.if-ico-steel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7c8f' d='M8 1.2 13.6 4.4v7.2L8 14.8 2.4 11.6V4.4z'/%3E%3Cpath fill='%239aa8b8' d='M8 2.4 12.3 4.8v6.4L8 13.6 3.7 11.2V4.8z'/%3E%3Cpath fill='%23dce4ee' d='M8 4.1 10.7 5.6v4.8L8 11.9 5.3 10.4V5.6z'/%3E%3Cpath fill='%23f1f5f9' d='M8 5.2 9.6 6.1v3.8L8 10.8 6.4 9.9V6.1z'/%3E%3Cpath fill='%2364748b' opacity='.45' d='M8 5.8 9.1 6.4v3.2L8 10.2 6.9 9.6V6.4z'/%3E%3C/svg%3E");
}
.if-ico-dublonen {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23b45309' d='M8 1.4 14 8 8 14.6 2 8z'/%3E%3Cpath fill='%23fbbf24' d='M8 2.6 12.6 8 8 13.4 3.4 8z'/%3E%3Cpath fill='%23fde68a' d='M8 4.2 10.8 8 8 11.8 5.2 8z'/%3E%3C/svg%3E");
}
.if-ico-xp {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23f59e0b' d='M9.2 1.5 6.8 7.2H3.4l5.2 7.3L11 8.8h3.6z'/%3E%3Cpath fill='%23fde68a' d='M9 3.2 7.2 7.5H5l3.6 5 1.6-3.8h2.4z'/%3E%3C/svg%3E");
}
.if-ico-freexp {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230ea5e9' d='M8 1.6 9.6 6.2 14.4 6.4 10.6 9.4 12 14.2 8 11.6 4 14.2 5.4 9.4 1.6 6.4 6.4 6.2z'/%3E%3Cpath fill='%237dd3fc' d='M8 3.4 9.1 6.6l3.2.15-2.5 2 .9 3.1L8 10.2l-2.7 1.65.9-3.1-2.5-2 3.2-.15z'/%3E%3C/svg%3E");
}
.if-ico-prem {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%237c3aed' d='M3.2 3.2h9.6v9.6H3.2z'/%3E%3Cpath fill='%23a78bfa' d='M4.4 4.4h7.2v7.2H4.4z'/%3E%3Cpath fill='%23ede9fe' d='M6.2 5.2h1.4v5.6H6.2zm2.2 0H11v1.3H9.7v1.2H10.8v1.2H9.7v1.9H8.4z'/%3E%3C/svg%3E");
}

/* Nav-Icons (Mask → Farbe von currentColor) */
.wot-nav-icon.if-ico {
  font-size: 0;
  width: 1.42rem;
  height: 1.42rem;
  background-color: currentColor;
  background-image: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  opacity: 0.84;
  transition: opacity 0.18s ease, transform 0.18s ease, filter 0.18s ease;
}
.wot-nav-btn:hover .wot-nav-icon.if-ico {
  opacity: 1;
  transform: translateY(-1px);
}
.wot-nav-btn.selected .wot-nav-icon.if-ico {
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.55));
}
.if-ico-nav-garage {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3.2 11.1 12 4.2l8.8 6.9v9.4h-5.2v-5.1H8.4v5.1H3.2z'/%3E%3Cpath fill='%23000' d='M9.2 15.4h5.6v1.5H9.2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3.2 11.1 12 4.2l8.8 6.9v9.4h-5.2v-5.1H8.4v5.1H3.2z'/%3E%3Cpath fill='%23000' d='M9.2 15.4h5.6v1.5H9.2z'/%3E%3C/svg%3E");
}
.if-ico-nav-shop {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8.2 7.2V6.1a3.8 3.8 0 0 1 7.6 0v1.1h2.7l-1.15 13.1H6.65L5.5 7.2zm1.55 0h4.5V6.1a2.25 2.25 0 0 0-4.5 0z'/%3E%3Cpath fill='%23000' d='M9.5 11.2h1.4v5H9.5zm3.6 0h1.4v5h-1.4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8.2 7.2V6.1a3.8 3.8 0 0 1 7.6 0v1.1h2.7l-1.15 13.1H6.65L5.5 7.2zm1.55 0h4.5V6.1a2.25 2.25 0 0 0-4.5 0z'/%3E%3Cpath fill='%23000' d='M9.5 11.2h1.4v5H9.5zm3.6 0h1.4v5h-1.4z'/%3E%3C/svg%3E");
}
.if-ico-nav-crew {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3.3c-2.75 0-4.7 1.75-5 4.2-.2 1.45.25 2.55 1 3.35L7.2 12.1c-.35.55.05 1.2.7 1.2h8.2c.65 0 1.05-.65.7-1.2l-.8-1.25c.75-.8 1.2-1.9 1-3.35C16.7 5.05 14.75 3.3 12 3.3z'/%3E%3Cpath fill='%23000' d='M5.1 19.9c.55-3.25 3-4.9 6.9-4.9s6.35 1.65 6.9 4.9z'/%3E%3Cpath fill='%23000' d='M10.2 8h3.6v1.25h-3.6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3.3c-2.75 0-4.7 1.75-5 4.2-.2 1.45.25 2.55 1 3.35L7.2 12.1c-.35.55.05 1.2.7 1.2h8.2c.65 0 1.05-.65.7-1.2l-.8-1.25c.75-.8 1.2-1.9 1-3.35C16.7 5.05 14.75 3.3 12 3.3z'/%3E%3Cpath fill='%23000' d='M5.1 19.9c.55-3.25 3-4.9 6.9-4.9s6.35 1.65 6.9 4.9z'/%3E%3Cpath fill='%23000' d='M10.2 8h3.6v1.25h-3.6z'/%3E%3C/svg%3E");
}
.if-ico-nav-tech {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2.7 13.95 8.2l5.7.4-4.4 3.7 1.4 5.5L12 14.7 7.35 17.8l1.4-5.5-4.4-3.7 5.7-.4z'/%3E%3Ccircle fill='%23000' cx='5.2' cy='19.5' r='1.55'/%3E%3Ccircle fill='%23000' cx='12' cy='20.2' r='1.55'/%3E%3Ccircle fill='%23000' cx='18.8' cy='19.5' r='1.55'/%3E%3Cpath fill='%23000' d='M11.35 15.1h1.3v2.9h-1.3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2.7 13.95 8.2l5.7.4-4.4 3.7 1.4 5.5L12 14.7 7.35 17.8l1.4-5.5-4.4-3.7 5.7-.4z'/%3E%3Ccircle fill='%23000' cx='5.2' cy='19.5' r='1.55'/%3E%3Ccircle fill='%23000' cx='12' cy='20.2' r='1.55'/%3E%3Ccircle fill='%23000' cx='18.8' cy='19.5' r='1.55'/%3E%3Cpath fill='%23000' d='M11.35 15.1h1.3v2.9h-1.3z'/%3E%3C/svg%3E");
}
.if-ico-nav-missions {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8.1 3.2h7.8v2.5l1.55 1.15v2.15H6.55V6.85L8.1 5.7z'/%3E%3Cpath fill='%23000' d='M7 9.3h10v11.3l-5-2.45-5 2.45z'/%3E%3Cpath fill='%23000' d='M10.1 12.1 11 14l2.15.25-1.55 1.45.4 2.1L11 16.7l-2 1.1.4-2.1-1.55-1.45L9.95 14z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8.1 3.2h7.8v2.5l1.55 1.15v2.15H6.55V6.85L8.1 5.7z'/%3E%3Cpath fill='%23000' d='M7 9.3h10v11.3l-5-2.45-5 2.45z'/%3E%3Cpath fill='%23000' d='M10.1 12.1 11 14l2.15.25-1.55 1.45.4 2.1L11 16.7l-2 1.1.4-2.1-1.55-1.45L9.95 14z'/%3E%3C/svg%3E");
}
.if-ico-nav-event {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2.4 14.2 8.5h6.4l-5.15 3.85 1.95 6.35L12 15.2 6.6 18.7l1.95-6.35L3.4 8.5h6.4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2.4 14.2 8.5h6.4l-5.15 3.85 1.95 6.35L12 15.2 6.6 18.7l1.95-6.35L3.4 8.5h6.4z'/%3E%3C/svg%3E");
}
.if-ico-nav-collections {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5.1 7.5h13.8v12.3H5.1z'/%3E%3Cpath fill='%23000' d='M6.7 5.2h10.6v1.8H6.7z'/%3E%3Cpath fill='%23000' d='M8.1 3.3h7.8v1.55H8.1z'/%3E%3Cpath fill='%23000' d='M8.3 11.3h7.4v1.4H8.3zm0 2.9h5.4v1.4H8.3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5.1 7.5h13.8v12.3H5.1z'/%3E%3Cpath fill='%23000' d='M6.7 5.2h10.6v1.8H6.7z'/%3E%3Cpath fill='%23000' d='M8.1 3.3h7.8v1.55H8.1z'/%3E%3Cpath fill='%23000' d='M8.3 11.3h7.4v1.4H8.3zm0 2.9h5.4v1.4H8.3z'/%3E%3C/svg%3E");
}
.if-ico-nav-season {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7.1 3.3h9.8v1.55H16v4.5c0 2.25-1.75 4.1-4 4.1s-4-1.85-4-4.1V4.85H7.1z'/%3E%3Cpath fill='%23000' d='M4.5 5.15h2.3v2.5c0 1.35-.95 2.4-2.15 2.55-.75.1-1.35-.5-1.35-1.25V6.4c0-.7.55-1.25 1.2-1.25zm12.7 0h2.3c.65 0 1.2.55 1.2 1.25v2.55c0 .75-.6 1.35-1.35 1.25-1.2-.15-2.15-1.2-2.15-2.55z'/%3E%3Cpath fill='%23000' d='M10.5 14.5h3v2.25h-3zm-2.5 3.55h8v1.55h-8zm-1.2 2.25h10.4V21.6H6.8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7.1 3.3h9.8v1.55H16v4.5c0 2.25-1.75 4.1-4 4.1s-4-1.85-4-4.1V4.85H7.1z'/%3E%3Cpath fill='%23000' d='M4.5 5.15h2.3v2.5c0 1.35-.95 2.4-2.15 2.55-.75.1-1.35-.5-1.35-1.25V6.4c0-.7.55-1.25 1.2-1.25zm12.7 0h2.3c.65 0 1.2.55 1.2 1.25v2.55c0 .75-.6 1.35-1.35 1.25-1.2-.15-2.15-1.2-2.15-2.55z'/%3E%3Cpath fill='%23000' d='M10.5 14.5h3v2.25h-3zm-2.5 3.55h8v1.55h-8zm-1.2 2.25h10.4V21.6H6.8z'/%3E%3C/svg%3E");
}
.if-ico-nav-devblog {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.1 3.4h11.8v17.2H6.1z'/%3E%3Cpath fill='%23000' d='M9.1 2.35h5.8v2.3H9.1z'/%3E%3Cpath fill='%23000' d='M8.35 8.5h7.3v1.35H8.35zm0 3.15h7.3v1.35H8.35zm0 3.15h5.2v1.35H8.35z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.1 3.4h11.8v17.2H6.1z'/%3E%3Cpath fill='%23000' d='M9.1 2.35h5.8v2.3H9.1z'/%3E%3Cpath fill='%23000' d='M8.35 8.5h7.3v1.35H8.35zm0 3.15h7.3v1.35H8.35zm0 3.15h5.2v1.35H8.35z'/%3E%3C/svg%3E");
}
.if-ico-nav-clan {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2.7 19 5.4v6.4c0 4.2-2.75 7.45-7 9.25-4.25-1.8-7-5.05-7-9.25V5.4z'/%3E%3Cpath fill='%23000' d='M12 6.1 14.8 12.2H9.2z'/%3E%3Cpath fill='%23000' d='M9.5 13.5h5v1.45h-5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2.7 19 5.4v6.4c0 4.2-2.75 7.45-7 9.25-4.25-1.8-7-5.05-7-9.25V5.4z'/%3E%3Cpath fill='%23000' d='M12 6.1 14.8 12.2H9.2z'/%3E%3Cpath fill='%23000' d='M9.5 13.5h5v1.45h-5z'/%3E%3C/svg%3E");
}
.if-ico-nav-stats {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4.3 19.15h15.4v1.55H4.3z'/%3E%3Cpath fill='%23000' d='M5.5 10.1h3.2v8.3H5.5zm5.15-5.5h3.2v13.8h-3.2zm5.15 3.2h3.2v10.6h-3.2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4.3 19.15h15.4v1.55H4.3z'/%3E%3Cpath fill='%23000' d='M5.5 10.1h3.2v8.3H5.5zm5.15-5.5h3.2v13.8h-3.2zm5.15 3.2h3.2v10.6h-3.2z'/%3E%3C/svg%3E");
}

.wot-res-freexp {
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.05);
}
.wot-res-freexp .wot-res-icon { color: #38bdf8; }
.wot-res-freexp strong { color: #7dd3fc; }
.wot-res-prem {
  border-color: rgba(167, 139, 250, 0.4);
  background: rgba(167, 139, 250, 0.07);
}
.wot-res-prem .wot-res-icon {
  color: #a78bfa;
  font-weight: 800;
  font-size: 0.68rem;
}
.wot-res-prem strong { color: #c4b5fd; }
.wot-res-prem.is-active {
  border-color: rgba(167, 139, 250, 0.65);
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.2);
}
.wot-res-battles strong { color: #94a3b8; }
.wot-res-wins strong { color: #86efac; }

.wot-res-icon { opacity: 0.75; font-size: 0.75rem; }
.wot-res-label {
  color: var(--if-text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.52rem;
  font-weight: 600;
}
.wot-res strong {
  font-family: var(--if-display);
  font-size: 1.15rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-left: 0.12rem;
  letter-spacing: 0.02em;
  line-height: 1;
}

.wot-back {
  font-size: 0.72rem;
  color: #64748b;
  text-decoration: none;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}
.wot-back:hover { color: #f59e0b; border-color: rgba(245, 158, 11, 0.4); }

/* Panels */
.wot-panel {
  grid-row: 2;
  grid-column: 1;
  position: relative;
  display: grid;
  grid-template-columns: 240px 1fr 220px;
  grid-template-rows: 1fr auto;
  gap: 0;
  min-height: 0;
  pointer-events: none;
}
.wot-panel-garage {
  grid-template-columns: minmax(176px, 198px) 1fr minmax(268px, 340px);
}
.wot-panel > * { pointer-events: auto; }
.wot-panel.hidden { display: none; }

/* Garage layout */
.wot-hangar-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 72%, transparent 35%, rgba(8, 12, 20, 0.55) 100%),
    linear-gradient(90deg, rgba(8, 12, 20, 0.72) 0%, transparent 22%, transparent 78%, rgba(8, 12, 20, 0.72) 100%);
}
.wot-panel-garage.wot-hangar-eu .wot-hangar-vignette {
  background:
    radial-gradient(ellipse 70% 55% at 50% 72%, transparent 35%, rgba(8, 8, 10, 0.62) 100%),
    linear-gradient(90deg, rgba(26, 26, 26, 0.55) 0%, transparent 28%, transparent 72%, rgba(80, 20, 20, 0.35) 100%),
    linear-gradient(180deg, rgba(255, 206, 0, 0.04), transparent 40%);
}
.wot-panel-garage.wot-hangar-s1f .wot-hangar-vignette {
  background:
    radial-gradient(ellipse 70% 55% at 50% 72%, transparent 32%, rgba(10, 8, 4, 0.68) 100%),
    linear-gradient(90deg, rgba(20, 14, 6, 0.65) 0%, transparent 24%, transparent 76%, rgba(20, 14, 6, 0.65) 100%),
    linear-gradient(180deg, rgba(245, 158, 11, 0.07), transparent 42%);
}
.eu-hangar-flag {
  position: absolute;
  top: 12%;
  right: 6%;
  width: 56px;
  height: 84px;
  z-index: 2;
  pointer-events: none;
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, #1a1a1a 0%, #1a1a1a 33.2%, #c8102e 33.2%, #c8102e 66.4%, #ffce00 66.4%, #ffce00 100%);
  transform-origin: top center;
  animation: eu-hangar-flag-wave 4.5s ease-in-out infinite;
}
.eu-hangar-flag::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -18px;
  width: 3px;
  height: 22px;
  margin-left: -1.5px;
  background: linear-gradient(180deg, #94a3b8, #64748b);
  border-radius: 1px;
}
.eu-hangar-flag.hidden { display: none; }
@keyframes eu-hangar-flag-wave {
  0%, 100% { transform: rotate(-2deg) skewX(-1deg); }
  50% { transform: rotate(2.5deg) skewX(1.5deg); }
}
.wot-panel-garage > *:not(.wot-hangar-vignette) { position: relative; z-index: 1; }

.wot-hangar-panel {
  padding: 0.5rem 0.58rem;
  background: linear-gradient(165deg, var(--if-bg-glass), rgba(6, 10, 18, 0.82));
  border: 1px solid var(--if-border);
  border-top: 2px solid var(--if-border-accent);
  border-radius: var(--if-radius);
  box-shadow: var(--if-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: var(--if-blur);
}
.wot-hangar-panel-right {
  max-height: calc(100vh - 148px);
  min-width: 268px;
  overflow-y: auto;
  overflow-x: hidden;
}
.wot-hangar-panel-label {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f59e0b;
  margin-bottom: 0.4rem;
  padding-bottom: 0.22rem;
  border-bottom: 1px solid rgba(245, 158, 11, 0.2);
}

.wot-garage-left {
  grid-row: 1;
  grid-column: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.45rem;
  padding: 0.55rem 0.45rem 3.35rem 0.55rem;
  background: none;
  min-height: 0;
}

.wot-tank-plate { margin-bottom: 0.45rem; }

.wot-tier-badge {
  display: inline-block;
  padding: 0.08rem 0.32rem;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #1a1408;
  background: linear-gradient(180deg, #fcd34d, #f59e0b);
  border: 1px solid #d97706;
  margin-bottom: 0.22rem;
}

.wot-tank-name {
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #f8fafc;
  line-height: 1.12;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.wot-tank-meta {
  margin-top: 0.15rem;
  font-size: 0.64rem;
  color: #94a3b8;
  letter-spacing: 0.03em;
}

.wot-stat-bars {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

.wot-stat-row {
  display: grid;
  grid-template-columns: 3.4rem 1fr 1.55rem;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.55rem;
}
.wot-stat-row span:first-child {
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.wot-stat-row strong {
  text-align: right;
  color: #e2e8f0;
  font-size: 0.62rem;
}
.wot-stat-bar {
  height: 4px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.wot-stat-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #b45309, #f59e0b);
}

.wot-garage-center {
  grid-row: 1 / 3;
  grid-column: 2;
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 0.75rem;
  min-height: 0;
}
.wot-hangar-frame {
  position: absolute;
  inset: 12% 10% 22%;
  pointer-events: none;
}
.wot-hangar-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: rgba(245, 158, 11, 0.4);
  border-style: solid;
  border-width: 0;
}
.wot-hangar-corner.tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.wot-hangar-corner.tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.wot-hangar-corner.bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.wot-hangar-corner.br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.wot-hangar-floor-line {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.35), transparent);
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.2);
}
.wot-hangar-badge {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.18rem 0.45rem;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #e2e8f0;
  background: rgba(8, 12, 20, 0.72);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 2px;
  pointer-events: none;
}
.wot-spotlight {
  position: absolute;
  bottom: 14%;
  left: 50%;
  width: min(360px, 52vw);
  height: 64px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(245, 158, 11, 0.2), transparent 72%);
  pointer-events: none;
}
.wot-hangar-hint {
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.45);
}
.wot-hangar-controls {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.35rem;
  pointer-events: auto;
  z-index: 2;
}
.wot-hangar-ctrl {
  width: 2rem;
  height: 2rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: #cbd5e1;
  background: rgba(8, 12, 20, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: var(--if-radius-sm);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.wot-hangar-ctrl:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.45);
  color: #e0f2fe;
}
.wot-hangar-compare-badge {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 92%;
  padding: 0.28rem 0.65rem;
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fde68a;
  background: rgba(8, 12, 20, 0.88);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wot-hangar-compare-badge.hidden { display: none; }

.wot-garage-right {
  grid-row: 1;
  grid-column: 3;
  align-self: end;
  padding: 0.55rem 0.45rem 3rem 0.35rem;
  background: none;
  min-width: 0;
}

.wot-module-head {
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.35rem;
  padding-bottom: 0.22rem;
  border-bottom: 1px solid rgba(245, 158, 11, 0.2);
}

.wot-param-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
}

.wot-param {
  padding: 0.28rem 0.32rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.wot-param span {
  display: block;
  font-size: 0.48rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.wot-param strong { font-size: 0.68rem; color: #e2e8f0; }

/* Panzer-Leiste (unten, alle besessenen Panzer) */
.wot-tank-bar {
  grid-column: 1 / -1;
  grid-row: 3;
  pointer-events: auto;
  padding: 0.45rem 0.75rem 0.55rem;
  background: linear-gradient(0deg, rgba(6, 9, 14, 0.98), rgba(10, 14, 22, 0.94));
  border-top: 1px solid rgba(245, 158, 11, 0.18);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
}
.wot-tank-bar.hidden { display: none; }

.wot-tank-bar-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 0.4rem;
}

.wot-tank-bar-title {
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
  flex-shrink: 0;
}

.wot-tank-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  flex: 1;
  min-width: 0;
}

.wot-filter-group {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.wot-filter-label {
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #475569;
  flex-shrink: 0;
}

.wot-filter-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}

.wot-filter-btn {
  padding: 0.2rem 0.45rem;
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #94a3b8;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.wot-filter-btn:hover {
  border-color: rgba(245, 158, 11, 0.4);
  color: #e2e8f0;
}
.wot-filter-btn.selected {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}
.wot-filter-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.wot-tank-bar-count {
  font-size: 0.58rem;
  color: #475569;
  margin-left: auto;
  flex-shrink: 0;
}

.wot-carousel-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  min-width: 0;
}
.wot-carousel-scroll-btn {
  flex-shrink: 0;
  align-self: center;
  width: 1.65rem;
  height: 2.6rem;
  padding: 0;
  font-size: 1.2rem;
  line-height: 1;
  color: #cbd5e1;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.25);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.wot-carousel-scroll-btn:hover {
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.1);
}
.wot-carousel-scroll-btn:disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

.wot-carousel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.45rem;
  max-height: 10.5rem;
  overflow-x: auto;
  overflow-y: auto;
  padding: 0.15rem 0.35rem 0.35rem 0.15rem;
  scrollbar-width: thin;
  scrollbar-color: #475569 rgba(0, 0, 0, 0.2);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.wot-carousel::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.wot-carousel::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 3px;
}
.wot-carousel::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.wot-carousel-item {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 92px;
  padding: 0.5rem 0.35rem 0.4rem;
  background: rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.08);
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.1s;
}
/* Original nation flags as card backgrounds */
.wot-carousel-flagbg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #1c1917;
}
.wot-carousel-flagimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.42;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
}
.wot-carousel-flagshade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 10, 14, 0.35) 0%, rgba(8, 10, 14, 0.72) 55%, rgba(8, 10, 14, 0.88) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 35%, transparent 65%, rgba(0, 0, 0, 0.25));
}
.wot-carousel-item:hover .wot-carousel-flagimg { opacity: 0.55; }
.wot-carousel-item.active .wot-carousel-flagimg { opacity: 0.62; }
.wot-carousel-item.active .wot-carousel-flagshade {
  background:
    linear-gradient(180deg, rgba(8, 10, 14, 0.2) 0%, rgba(8, 10, 14, 0.55) 50%, rgba(8, 10, 14, 0.82) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--carousel-nat, #f59e0b) 18%, transparent), transparent 40%);
}

.wot-carousel-item[data-nation="germany"] { --carousel-nat: #ffce00; }
.wot-carousel-item[data-nation="usa"] { --carousel-nat: #3b82f6; }
.wot-carousel-item[data-nation="ussr"] { --carousel-nat: #ef4444; }
.wot-carousel-item[data-nation="uk"] { --carousel-nat: #c8102e; }
.wot-carousel-item[data-nation="france"] { --carousel-nat: #0055a4; }
.wot-carousel-item[data-nation="japan"] { --carousel-nat: #bc002d; }
.wot-carousel-item[data-nation="poland"] { --carousel-nat: #dc143c; }
.wot-carousel-item[data-nation="italy"] { --carousel-nat: #009246; }
.wot-carousel-item[data-nation="czech"] { --carousel-nat: #11457e; }
.wot-carousel-item[data-nation="horizon"] { --carousel-nat: #ea580c; }
.wot-carousel-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--carousel-nat, transparent);
  opacity: 0.7;
  pointer-events: none;
  z-index: 2;
}
.wot-carousel-item.active::after {
  opacity: 1;
  width: 4px;
  box-shadow: 0 0 8px color-mix(in srgb, var(--carousel-nat, #f59e0b) 50%, transparent);
}
.wot-carousel-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 100%;
}
.wot-carousel-item:hover { border-color: rgba(245, 158, 11, 0.45); transform: translateY(-2px); }
.wot-carousel-item.active {
  border-color: var(--carousel-nat, #f59e0b);
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 16px color-mix(in srgb, var(--carousel-nat, #f59e0b) 28%, transparent);
}
.wot-carousel-tier,
.wot-carousel-name {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.wot-carousel-tier {
  font-size: 0.55rem;
  color: #fbbf24;
  font-weight: 700;
}
.wot-carousel-name {
  font-size: 0.58rem;
  text-align: center;
  line-height: 1.15;
  color: #cbd5e1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.wot-carousel-empty {
  font-size: 0.72rem;
  color: #64748b;
  padding: 0.5rem 0.25rem;
  font-style: italic;
}

/* Research panel */
#panel-research {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  padding: 0;
  background: linear-gradient(180deg, rgba(8, 12, 20, 0.94), rgba(8, 12, 20, 0.82));
}

.wot-research-layout {
  display: grid;
  grid-template-columns: 12rem 1fr;
  height: 100%;
  min-height: 0;
  background:
    radial-gradient(ellipse 80% 50% at 0% 0%, color-mix(in srgb, var(--tree-nat, #f59e0b) 12%, transparent), transparent 55%),
    linear-gradient(180deg, rgba(8, 12, 20, 0.98), rgba(6, 10, 16, 0.96));
}

.wot-research-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid rgba(148, 163, 184, 0.16);
  background:
    linear-gradient(180deg, rgba(8, 12, 20, 0.99), rgba(5, 8, 14, 0.98));
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03);
}

.wot-research-sidebar-title {
  flex-shrink: 0;
  margin: 0;
  padding: 0.65rem 0.55rem 0.45rem;
  font-family: var(--if-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #cbd5e1;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.wot-research-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  padding: 0.55rem 0.65rem 0.45rem;
}

.wot-research-nations-sidebar {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0.3rem 0.2rem 0.45rem 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 100%;
}

.wot-nation-playable-block {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  margin-bottom: 0.2rem;
}

.wot-nation-soon-block {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.wot-nation-scroll-hint,
.wot-shop-soon-scroll-hint {
  flex-shrink: 0;
  margin: 0 0 0.2rem;
  padding: 0.12rem 0.25rem;
  font-size: 0.48rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  text-align: center;
}

.wot-nation-soon-scroll {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding-right: 0.15rem;
  padding-bottom: 0.25rem;
}

/* Sichtbare Scrollleisten */
.wot-scroll-y {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.55) rgba(0, 0, 0, 0.25);
}
.wot-scroll-y::-webkit-scrollbar { width: 7px; }
.wot-scroll-y::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.22);
  border-radius: 4px;
}
.wot-scroll-y::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.45);
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.wot-scroll-y::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.65);
}

.wot-nation-section-label {
  flex-shrink: 0;
  margin: 0.35rem 0 0.15rem;
  padding: 0.15rem 0.25rem;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
}
.wot-nation-section-label:first-child { margin-top: 0.1rem; }
.wot-nation-section-soon { color: #94a3b8; }
.wot-nation-soon-count {
  display: inline-block;
  margin-left: 0.2rem;
  padding: 0.05rem 0.3rem;
  font-size: 0.5rem;
  background: rgba(148, 163, 184, 0.15);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #cbd5e1;
}

.wot-research-nations-sidebar .wot-research-nation {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  text-align: left;
  padding: 0.42rem 0.45rem;
  line-height: 1.2;
  border-radius: 2px;
  border-left: 3px solid transparent;
  transition: border-color 0.15s var(--if-ease), background 0.15s var(--if-ease), transform 0.15s var(--if-ease);
}
.wot-research-nations-sidebar .wot-research-nation:hover {
  transform: translateX(2px);
  background: rgba(255, 255, 255, 0.04);
}
.wot-research-nations-sidebar .wot-research-nation.selected {
  border-left-color: var(--tree-nat, #f59e0b);
  background: color-mix(in srgb, var(--tree-nat, #f59e0b) 14%, rgba(0, 0, 0, 0.35));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tree-nat, #f59e0b) 35%, transparent);
}
.wot-research-nations-sidebar .wot-research-nation[data-nation="germany"] { --tree-nat: #ffce00; }
.wot-research-nations-sidebar .wot-research-nation[data-nation="usa"] { --tree-nat: #3b82f6; }
.wot-research-nations-sidebar .wot-research-nation[data-nation="ussr"] { --tree-nat: #ef4444; }
.wot-research-nations-sidebar .wot-research-nation[data-nation="uk"] { --tree-nat: #c8102e; }
.wot-research-nations-sidebar .wot-research-nation[data-nation="france"] { --tree-nat: #60a5fa; }
.wot-research-nations-sidebar .wot-research-nation[data-nation="japan"] { --tree-nat: #f87171; }
.wot-research-nations-sidebar .wot-research-nation[data-nation="poland"] { --tree-nat: #dc143c; }
.wot-research-nations-sidebar .wot-research-nation[data-nation="italy"] { --tree-nat: #34d399; }
.wot-research-nations-sidebar .wot-research-nation[data-nation="czech"] { --tree-nat: #60a5fa; }
.wot-research-nations-sidebar .wot-research-nation[data-nation="horizon"] { --tree-nat: #fb923c; }
.wot-nat-flag {
  flex-shrink: 0;
  font-size: 0.85rem;
  line-height: 1;
}
.wot-nat-name {
  flex: 1;
  min-width: 0;
  font-size: 0.58rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wot-research-nations-sidebar .wot-soon-tab {
  flex-shrink: 0;
  font-size: 0.45rem;
  padding: 0.06rem 0.2rem;
}

.wot-tree-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}
.wot-tree-head-left {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1 1 280px;
}
.wot-tree-head h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.45rem;
  font-family: var(--if-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #f1f5f9;
  line-height: 1.1;
}
.wot-tree-head-flag { font-size: 1.1rem; line-height: 1; }
.wot-tree-head-nation {
  color: color-mix(in srgb, var(--tree-nat, #fbbf24) 80%, #fff 20%);
}
.wot-tree-head-sep { color: #475569; font-weight: 400; }
.wot-tree-head-label {
  font-size: 0.85em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
  font-weight: 500;
}
.wot-class-preview {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.25rem;
}
.wot-class-card {
  padding: 0.55rem 0.65rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  font-size: 0.68rem;
  color: #94a3b8;
  line-height: 1.4;
}
.wot-class-card h4 {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  color: #e2e8f0;
  letter-spacing: 0.04em;
}
.wot-class-card p { margin: 0; }
.wot-class-card-td { border-left: 3px solid rgba(56, 189, 248, 0.45); }
.wot-class-card-spg { border-left: 3px solid rgba(251, 146, 60, 0.45); }
.wot-class-soon {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.58rem;
  color: #f59e0b;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.wot-tree-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
}
.wot-tree-branch-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.wot-tree-filter-btn {
  padding: 0.38rem 0.72rem;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  color: #94a3b8;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.wot-tree-filter-btn:hover { border-color: rgba(245, 158, 11, 0.45); color: #e2e8f0; }
.wot-tree-filter-btn.selected {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.14);
  color: #fef3c7;
}
.wot-tree-filter-btn.has-deals {
  box-shadow: inset 0 -2px 0 rgba(245, 158, 11, 0.75);
}
.wot-tree-toolbar-hint {
  margin: 0;
  font-size: 0.64rem;
  color: #64748b;
  line-height: 1.4;
}
.wot-tree-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
}
.wot-tree-view-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-left: auto;
}
.wot-tree-view-btn {
  padding: 0.34rem 0.62rem;
  font-family: inherit;
  font-size: 0.64rem;
  font-weight: 600;
  color: #94a3b8;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
}
.wot-tree-view-btn.selected {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  color: #e0f2fe;
}
.wot-tree-next-btn {
  flex-shrink: 0;
  font-size: 0.66rem !important;
  padding: 0.38rem 0.75rem !important;
}
.wot-tree-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  padding: 0.45rem 0.55rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
}
.wot-tree-progress-text {
  font-size: 0.68rem;
  color: #cbd5e1;
  font-weight: 600;
}
.wot-tree-progress-text strong { color: #fbbf24; }
.wot-tree-progress-bar-wrap {
  flex: 1 1 140px;
  min-width: 120px;
  max-width: 320px;
  height: 6px;
  background: rgba(51, 65, 85, 0.7);
  border-radius: 3px;
  overflow: hidden;
}
.wot-tree-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #f59e0b);
  border-radius: 3px;
  transition: width 0.25s ease;
}
.wot-tree-progress-next {
  font-size: 0.62rem;
  color: #94a3b8;
}
.wot-tree-progress-next em {
  font-style: normal;
  color: #f59e0b;
  font-weight: 600;
}
.wot-tree-branch-hidden { display: none !important; }
.wot-tree-node.next-highlight {
  box-shadow: 0 0 0 2px #ffcc33, 0 0 16px rgba(255, 204, 51, 0.35);
  border-color: #ffcc33;
}

.wot-tree-node-visual .tank-icon {
  transform: scale(0.92);
}

.wot-research-nations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  max-width: 100%;
}
.wot-research-nation {
  padding: 0.35rem 0.65rem;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  color: #94a3b8;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.wot-research-nation:hover { border-color: rgba(245, 158, 11, 0.45); }
.wot-research-nation.selected {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  color: #fef3c7;
}

.tree-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.62rem;
  color: #64748b;
}
.tree-legend .dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 0.2rem;
  vertical-align: middle;
}
.dot.owned { background: #7cb342; }
.dot.avail { background: #c9a227; }
.dot.locked { background: #4a5568; }
.dot.equipped { background: #4fc3f7; }
.dot.premium { background: #e8c547; }
.dot.star { background: #ffcc33; }

/* Shop panel — Iron Front Armory layout */
#panel-shop {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: 0;
  background: linear-gradient(135deg, rgba(6, 14, 28, 0.98) 0%, rgba(8, 12, 22, 0.96) 45%, rgba(10, 8, 18, 0.98) 100%);
}

.wot-shop-layout {
  display: grid;
  grid-template-columns: 12.5rem 1fr;
  height: 100%;
  min-height: 0;
}

.wot-shop-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid rgba(56, 189, 248, 0.12);
  background: linear-gradient(180deg, rgba(4, 10, 22, 0.99), rgba(6, 12, 24, 0.98));
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03);
}

.wot-shop-sidebar-brand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 0.55rem 0.5rem;
  border-bottom: 1px solid rgba(56, 189, 248, 0.1);
}

.wot-shop-sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 800;
  color: #fde68a;
  background: linear-gradient(145deg, rgba(245, 158, 11, 0.25), rgba(180, 83, 9, 0.15));
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.wot-shop-sidebar-brand h2 {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e2e8f0;
  line-height: 1.2;
}

.wot-shop-sidebar-brand .wot-shop-sub {
  margin: 0.08rem 0 0;
  font-size: 0.48rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.wot-shop-sidebar-nav {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.35rem 0.3rem;
}

.wot-shop-sidebar-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.42rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.wot-shop-sidebar-btn:hover {
  background: rgba(56, 189, 248, 0.08);
  color: #cbd5e1;
  border-color: rgba(56, 189, 248, 0.15);
}

.wot-shop-sidebar-btn.selected {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.06));
  border-color: rgba(245, 158, 11, 0.45);
  color: #fde68a;
  box-shadow: inset 3px 0 0 #f59e0b;
}

.wot-shop-sidebar-icon {
  flex-shrink: 0;
  width: 1.1rem;
  text-align: center;
  font-size: 0.72rem;
}

.wot-shop-sidebar-divider {
  flex-shrink: 0;
  margin: 0.35rem 0.15rem 0.15rem;
  padding: 0.2rem 0.25rem 0;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #475569;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.wot-shop-sidebar-events {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.wot-shop-sidebar-btn-event {
  font-size: 0.52rem;
  padding-left: 0.55rem;
}

.wot-shop-sidebar-btn-event.selected {
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.16), rgba(96, 165, 250, 0.05));
  border-color: rgba(96, 165, 250, 0.35);
  color: #bfdbfe;
  box-shadow: inset 3px 0 0 #60a5fa;
}

.wot-shop-sidebar-foot {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.45rem 0.4rem 0.55rem;
  border-top: 1px solid rgba(56, 189, 248, 0.1);
  background: rgba(0, 0, 0, 0.22);
}

.wot-shop-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.wot-shop-main-head {
  flex-shrink: 0;
  padding: 0.55rem 0.75rem 0;
}

.wot-shop-spotlight {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, 0.18);
  background: linear-gradient(120deg, rgba(8, 20, 40, 0.95) 0%, rgba(12, 16, 32, 0.9) 50%, rgba(20, 12, 28, 0.92) 100%);
  min-height: 5.5rem;
}

.wot-shop-spotlight-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.75rem 0.85rem;
}

.wot-shop-spotlight-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 80% at 85% 50%, rgba(245, 158, 11, 0.12), transparent 55%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(56, 189, 248, 0.08), transparent 50%);
}

.wot-shop-spotlight-body {
  position: relative;
  flex: 1;
  min-width: 12rem;
}

.wot-shop-spotlight-eyebrow {
  display: inline-block;
  margin-bottom: 0.25rem;
  padding: 0.12rem 0.4rem;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fde68a;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 999px;
}

.wot-shop-spotlight-body h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: 0.02em;
}

.wot-shop-spotlight-body p {
  margin: 0;
  font-size: 0.62rem;
  color: #94a3b8;
  line-height: 1.45;
  max-width: 28rem;
}

.wot-shop-spotlight-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.35rem;
  min-width: 7rem;
}

.wot-shop-spotlight-stat {
  text-align: right;
}

.wot-shop-spotlight-stat strong {
  display: block;
  font-size: 1.15rem;
  color: #e9d5ff;
  line-height: 1.1;
}

.wot-shop-spotlight-stat span {
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.wot-shop-spotlight-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.wot-shop-spotlight-actions .btn-secondary {
  font-size: 0.55rem;
  padding: 0.32rem 0.55rem;
}

.wot-shop-spotlight-event {
  border-color: rgba(96, 165, 250, 0.25);
}

.wot-shop-spotlight-event .wot-shop-spotlight-eyebrow {
  color: #bfdbfe;
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.35);
}

/* Legacy horizontal nav — kept for compatibility */
.wot-shop-nav {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}
.wot-shop-head {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}
.wot-shop-balance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.wot-shop-balance-chip {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.45rem;
  border-radius: 6px;
  font-size: 0.62rem;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.2);
}
.wot-shop-balance-credits strong { color: #e2e8f0; }
.wot-shop-balance-dub {
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.08);
}
.wot-shop-balance-dub strong { color: #fde68a; }
.wot-shop-balance-coal {
  border-color: rgba(120, 113, 108, 0.35);
  background: rgba(68, 64, 60, 0.35);
}
.wot-shop-balance-coal strong { color: #d6d3d1; }
.wot-shop-balance-steel {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(71, 85, 105, 0.35);
}
.wot-shop-balance-steel strong { color: #cbd5e1; }
.wot-armory-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
}
.wot-armory-tab {
  font: inherit;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.45);
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.wot-armory-tab .if-ico {
  width: 0.85rem;
  height: 0.85rem;
}
.wot-armory-tab.selected {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.12);
  color: #fde68a;
}
.wot-shop-card.wot-armory-card-featured {
  border-color: rgba(148, 163, 184, 0.45);
  box-shadow: 0 0 16px rgba(148, 163, 184, 0.12);
}
.wot-armory-price-coal { color: #d6d3d1; }
.wot-armory-price-steel { color: #cbd5e1; }
.wot-shop-balance-icon { opacity: 0.85; }
.btn-grant-dublonen {
  padding: 0.28rem 0.55rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a1028;
  background: linear-gradient(180deg, #e9d5ff, #c084fc);
  border: 1px solid rgba(192, 132, 252, 0.6);
  cursor: pointer;
}
.btn-grant-dublonen:hover {
  background: linear-gradient(180deg, #f3e8ff, #d8b4fe);
}

.wot-shop-nav-btn {
  font: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.38rem 0.55rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.55);
  color: #94a3b8;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.wot-shop-nav-btn:hover {
  border-color: rgba(245, 158, 11, 0.45);
  color: #e2e8f0;
}
.wot-shop-nav-btn.selected {
  border-color: rgba(245, 158, 11, 0.75);
  background: rgba(245, 158, 11, 0.12);
  color: #fde68a;
}
.wot-shop-nav-events {
  margin-top: -0.15rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}
.wot-shop-nav-btn-event {
  font-size: 0.52rem;
  border-color: rgba(148, 163, 184, 0.22);
}
.wot-shop-nav-btn-event.selected {
  background: rgba(96, 165, 250, 0.14);
  border-color: rgba(96, 165, 250, 0.45);
  color: #bfdbfe;
}
.wot-shop-event-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.45rem 0.5rem;
  margin-bottom: 0.45rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.55);
}
.wot-shop-event-eyebrow {
  display: block;
  font-size: 0.48rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.15rem;
}
.wot-shop-event-eyebrow strong { color: #fde68a; font-weight: 700; }
.wot-shop-event-head h3 {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  color: #f1f5f9;
}
.wot-shop-event-desc {
  margin: 0;
  font-size: 0.52rem;
  color: #cbd5e1;
  line-height: 1.35;
  max-width: 36rem;
}
.wot-shop-event-bonus,
.wot-shop-event-note,
.wot-shop-event-claim-hint,
.wot-shop-event-empty {
  font-size: 0.5rem;
  color: #94a3b8;
  margin: 0.25rem 0 0.35rem;
  line-height: 1.35;
}
.wot-shop-event-claim-hint { color: #86efac; }
.wot-shop-event-head-actions { flex-shrink: 0; }
.wot-shop-event-hero { margin: 0.35rem 0; }
.wot-shop-event-info {
  padding: 0.35rem 0.45rem;
  margin-bottom: 0.35rem;
  border-radius: 0.3rem;
  border: 1px solid rgba(251, 191, 36, 0.2);
  background: rgba(30, 25, 10, 0.35);
}
.wot-shop-event-info h4 { margin: 0 0 0.15rem; font-size: 0.58rem; color: #fde68a; }
.wot-shop-event-info p { margin: 0; font-size: 0.5rem; color: #cbd5e1; }
.wot-shop-event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.4rem;
  margin-bottom: 0.45rem;
}
.shop-panel.hidden { display: none; }

.wot-shop-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.wot-shop-section-desc {
  font-size: 0.68rem;
  color: #94a3b8;
  margin: -0.25rem 0 0.65rem;
}

.wot-shop-featured-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.6));
  border: 1px solid rgba(192, 132, 252, 0.28);
}
.wot-shop-featured-text h3 {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: #f1f5f9;
  margin: 0.25rem 0 0.35rem;
}
.wot-shop-featured-text p {
  font-size: 0.68rem;
  color: #94a3b8;
  max-width: 36rem;
  line-height: 1.45;
}
.wot-shop-featured-tag {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #c084fc;
}
.wot-shop-featured-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 0.35rem 0.65rem;
  background: rgba(192, 132, 252, 0.1);
  border: 1px solid rgba(192, 132, 252, 0.35);
  min-width: 7rem;
}
.wot-shop-featured-stat strong {
  font-size: 1.15rem;
  color: #e9d5ff;
}
.wot-shop-featured-stat span {
  font-size: 0.58rem;
  color: #94a3b8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wot-shop-soon-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.wot-shop-soon-total {
  flex-shrink: 0;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28rem 0.5rem;
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 3px;
}

.wot-shop-soon-scroll {
  flex: 1;
  min-height: 0;
  max-height: 100%;
  padding-right: 0.25rem;
}

#shop-panel-currency {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#shop-panel-codes {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-bottom: 0.5rem;
}

.wot-promo-box {
  margin: 0 0 1.25rem;
  padding: 1rem 1.1rem;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(102, 192, 244, 0.22);
  border-radius: 8px;
}

.wot-promo-label {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8b96a8;
}

.wot-promo-row {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.wot-promo-input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 0.65rem 0.75rem;
  background: #0e1218;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 6px;
  color: #e8ecf2;
  font: inherit;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wot-promo-input:focus {
  outline: none;
  border-color: #66c0f4;
  box-shadow: 0 0 0 2px rgba(102, 192, 244, 0.2);
}

.wot-promo-btn {
  flex: 0 0 auto;
  min-width: 7.5rem;
  padding: 0.65rem 1rem;
}

.wot-promo-status {
  min-height: 1.25rem;
  margin: 0.65rem 0 0;
  font-size: 0.85rem;
  line-height: 1.4;
}

.wot-promo-status.ok { color: #8fd45a; }
.wot-promo-status.err { color: #e8a090; }

.wot-promo-history {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 8px;
  overflow: hidden;
}

.wot-promo-history-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.85rem;
}

.wot-promo-history-item:last-child { border-bottom: 0; }

.wot-promo-history-name {
  font-weight: 600;
  color: #d8dee9;
}

.wot-promo-history-reward {
  grid-column: 1 / -1;
  color: #8b96a8;
  font-size: 0.8rem;
}

.wot-promo-history-done {
  color: #5ba32b;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  align-self: start;
}

.wot-promo-history-empty {
  padding: 1rem;
  text-align: center;
  color: #6d7880;
  font-size: 0.85rem;
}

.wot-promo-note {
  margin-top: 0;
  opacity: 0.85;
}

.wot-shop-soon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 0.55rem;
  padding-bottom: 0.5rem;
}
.wot-shop-soon-card {
  position: relative;
  padding: 0.65rem 0.55rem 0.55rem;
  background: rgba(15, 23, 42, 0.65);
  border: 1px dashed rgba(148, 163, 184, 0.28);
  text-align: center;
}
.wot-shop-soon-flag {
  font-size: 1.6rem;
  line-height: 1;
  display: block;
  margin-bottom: 0.35rem;
}
.wot-shop-soon-card h4 {
  font-size: 0.68rem;
  color: #e2e8f0;
  margin-bottom: 0.25rem;
}
.wot-shop-soon-card p {
  font-size: 0.58rem;
  color: #64748b;
  line-height: 1.35;
  min-height: 2.2em;
}
.wot-shop-soon-badge {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.18rem 0.35rem;
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.wot-camo-swatch {
  display: block;
  width: 2rem;
  height: 2rem;
  margin: 0 auto 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

.wot-shop-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.55rem 0.75rem 0.65rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.35) rgba(0, 0, 0, 0.25);
}

.wot-shop-scroll > .shop-panel:not(.hidden) {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-height: min-content;
}

.wot-shop-crates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.65rem;
}

.wot-shop-deals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.55rem;
}

.wot-shop-daily-offers {
  margin: 0 0 1rem;
  padding: 0.7rem 0.65rem 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background:
    linear-gradient(135deg, rgba(30, 41, 59, 0.55), rgba(15, 23, 42, 0.35)),
    repeating-linear-gradient(
      -12deg,
      transparent,
      transparent 10px,
      rgba(148, 163, 184, 0.03) 10px,
      rgba(148, 163, 184, 0.03) 11px
    );
}
.wot-shop-daily-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}
.wot-shop-daily-head h3 {
  margin: 0 0 0.18rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f1f5f9;
}
.wot-shop-daily-head p {
  margin: 0;
  font-size: 0.62rem;
  line-height: 1.4;
  color: #94a3b8;
  max-width: 36rem;
}
.wot-shop-daily-head-tag {
  flex-shrink: 0;
  padding: 0.22rem 0.45rem;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #fef3c7;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(120, 53, 15, 0.45);
}
.wot-shop-daily-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}
@media (max-width: 720px) {
  .wot-shop-daily-grid {
    grid-template-columns: 1fr;
  }
}
.wot-shop-daily-offer {
  position: relative;
  overflow: hidden;
  align-items: stretch;
  text-align: left;
  gap: 0.4rem;
  min-height: 15.5rem;
  padding: 0.85rem 0.75rem 0.7rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(148, 163, 184, 0.12), transparent 55%),
    linear-gradient(165deg, rgba(24, 32, 48, 0.98), rgba(10, 14, 24, 0.96));
}
.wot-shop-daily-offer.is-free {
  border-color: rgba(74, 222, 128, 0.32);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(34, 197, 94, 0.16), transparent 55%),
    linear-gradient(165deg, rgba(16, 36, 28, 0.98), rgba(10, 16, 18, 0.96));
}
.wot-shop-daily-offer.is-paid {
  border-color: rgba(251, 191, 36, 0.34);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(251, 191, 36, 0.14), transparent 55%),
    linear-gradient(165deg, rgba(40, 30, 16, 0.98), rgba(14, 12, 10, 0.96));
}
.wot-shop-daily-offer.on-cooldown {
  opacity: 0.82;
  filter: saturate(0.85);
}
.wot-shop-daily-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #64748b, #94a3b8);
}
.wot-shop-daily-offer.is-free .wot-shop-daily-ribbon {
  background: linear-gradient(90deg, #166534, #4ade80, #86efac);
}
.wot-shop-daily-offer.is-paid .wot-shop-daily-ribbon {
  background: linear-gradient(90deg, #92400e, #f59e0b, #fde68a);
}
.wot-shop-daily-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}
.wot-shop-daily-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.45rem;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #052e16;
  background: linear-gradient(180deg, #86efac, #4ade80);
}
.wot-shop-daily-offer.is-paid .wot-shop-daily-badge {
  color: #1c1408;
  background: linear-gradient(180deg, #fde68a, #f59e0b);
}
.wot-shop-daily-status {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.14rem 0.35rem;
  border: 1px solid transparent;
}
.wot-shop-daily-status.is-ready {
  color: #86efac;
  border-color: rgba(74, 222, 128, 0.35);
  background: rgba(22, 101, 52, 0.35);
}
.wot-shop-daily-offer.is-paid .wot-shop-daily-status.is-ready {
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(120, 53, 15, 0.4);
}
.wot-shop-daily-status.is-wait {
  color: #fdba74;
  border-color: rgba(251, 146, 60, 0.35);
  background: rgba(67, 20, 7, 0.4);
  font-variant-numeric: tabular-nums;
}
.wot-shop-daily-mark {
  position: absolute;
  top: 1.7rem;
  right: 0.55rem;
  font-size: 2.2rem;
  line-height: 1;
  opacity: 0.12;
  pointer-events: none;
  color: #e2e8f0;
}
.wot-shop-daily-offer.is-free .wot-shop-daily-mark { color: #86efac; }
.wot-shop-daily-offer.is-paid .wot-shop-daily-mark { color: #fbbf24; }
.wot-shop-daily-offer h4 {
  margin: 0.15rem 0 0;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #f8fafc;
}
.wot-shop-daily-sub {
  margin: 0;
  font-size: 0.58rem;
  line-height: 1.35;
  color: #94a3b8;
}
.wot-shop-daily-rewards {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  flex: 1;
}
.wot-shop-daily-reward {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.4rem;
  font-size: 0.64rem;
  line-height: 1.25;
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.12);
}
.wot-shop-daily-reward-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  opacity: 0.95;
}
.wot-shop-daily-reward.is-credits .wot-shop-daily-reward-ico { color: #fde68a; }
.wot-shop-daily-reward.is-coal .wot-shop-daily-reward-ico { color: #94a3b8; }
.wot-shop-daily-reward.is-steel .wot-shop-daily-reward-ico { color: #7dd3fc; }
.wot-shop-daily-reward.is-xp .wot-shop-daily-reward-ico { color: #a5b4fc; }
.wot-shop-daily-reward.is-premium .wot-shop-daily-reward-ico,
.wot-shop-daily-reward.is-dublonen .wot-shop-daily-reward-ico { color: #c4b5fd; }
.wot-shop-daily-reward.is-consumable .wot-shop-daily-reward-ico { color: #86efac; }
.wot-shop-daily-footer {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.35rem;
}
.wot-shop-daily-price {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fde68a;
}
.wot-shop-daily-price.is-free {
  color: #86efac;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.btn-claim-daily-offer,
.btn-buy-daily-offer {
  width: 100%;
  padding: 0.5rem 0.4rem;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter 0.12s, transform 0.12s;
}
.btn-claim-daily-offer {
  color: #052e16;
  border-color: rgba(74, 222, 128, 0.55);
  background: linear-gradient(180deg, #86efac, #22c55e);
}
.btn-buy-daily-offer {
  color: #1c1408;
  border-color: rgba(251, 191, 36, 0.55);
  background: linear-gradient(180deg, #fde68a, #f59e0b);
}
.btn-claim-daily-offer:hover:not(:disabled),
.btn-buy-daily-offer:hover:not(:disabled) {
  filter: brightness(1.08);
}
.btn-claim-daily-offer:disabled,
.btn-buy-daily-offer:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: #94a3b8;
  background: rgba(51, 65, 85, 0.55);
  border-color: rgba(148, 163, 184, 0.18);
}

.wot-shop-category-intro {
  padding: 0.35rem 0.1rem 0.15rem;
}
.wot-shop-category-intro h3 {
  margin: 0 0 0.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 0.06em;
}
.wot-shop-quick-link {
  display: flex;
  flex-direction: column;
  min-height: 7rem;
}
.wot-shop-quick-link .btn-secondary {
  margin-top: auto;
  font-size: 0.55rem;
}
.wot-shop-einheit-camo {
  border-color: rgba(255, 206, 0, 0.28);
  background:
    linear-gradient(180deg, rgba(26, 26, 26, 0.92) 0%, rgba(26, 26, 26, 0.92) 33%, rgba(200, 16, 46, 0.35) 33%, rgba(200, 16, 46, 0.35) 66%, rgba(255, 206, 0, 0.22) 66%, rgba(255, 206, 0, 0.22) 100%),
    rgba(12, 14, 18, 0.92);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  overflow: hidden;
}
.wot-shop-einheit-camo .wot-shop-badge-de,
.wot-shop-einheit-camo .wot-shop-badge {
  background: linear-gradient(90deg, #1a1a1a 0%, #1a1a1a 33%, #c8102e 33%, #c8102e 66%, #ffce00 66%, #ffce00 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.wot-shop-einheit-timer {
  margin: 0;
  font-size: 0.58rem;
  color: #fcd34d;
}
.wot-shop-einheit-timer strong {
  color: #fef3c7;
}
.wot-shop-einheit-camo.owned {
  border-color: rgba(255, 206, 0, 0.45);
}
.wot-shop-einheit-camo .btn-buy-camo,
.wot-shop-einheit-camo .btn-eu-event-tab {
  width: 100%;
}
.wot-shop-einheit-camo .btn-eu-buy-camo:not(:disabled),
.wot-shop-einheit-camo.is-live .btn-eu-buy-camo:not(:disabled) {
  margin-top: 0.25rem;
  padding: 0.45rem 0.35rem;
  font-family: inherit;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(180deg, #1a1a1a 0%, #1a1a1a 33%, #c8102e 33%, #c8102e 66%, #ffce00 66%, #ffce00 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}
.wot-shop-einheit-camo .btn-eu-event-tab {
  margin-top: 0.15rem;
  padding: 0.42rem 0.35rem;
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  background: linear-gradient(180deg, #0d0d0d 0%, #0d0d0d 33%, #b80c28 33%, #b80c28 66%, #e6b800 66%, #e6b800 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  transition: filter 0.12s, transform 0.12s;
}
.wot-shop-einheit-camo .btn-eu-buy-camo:hover:not(:disabled),
.wot-shop-einheit-camo .btn-eu-event-tab:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}
.wot-shop-einheit-camo .btn-buy-camo:disabled,
.wot-shop-einheit-camo .btn-eu-buy-camo:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: rgba(51, 65, 85, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  text-shadow: none;
  transform: none;
}
.wot-shop-einheit-camo .btn-secondary {
  font-size: 0.55rem;
}
.wot-shop-price-old {
  display: inline-block;
  margin-right: 0.35rem;
  font-size: 0.72em;
  color: #94a3b8;
  text-decoration: line-through;
  font-weight: 600;
}
.wot-shop-sale-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0a0a0a;
  background: #ffce00;
  padding: 0.18rem 0.4rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.wot-shop-sale-tag.wot-shop-sale-soon {
  background: rgba(255, 206, 0, 0.18);
  color: #fcd34d;
  border-color: rgba(255, 206, 0, 0.35);
}
.wot-shop-eu-grid {
  align-items: stretch;
}
.wot-shop-einheit-bundle {
  border-color: rgba(255, 206, 0, 0.35);
  background:
    linear-gradient(145deg, rgba(26, 26, 26, 0.95), rgba(90, 12, 18, 0.55) 55%, rgba(40, 32, 8, 0.5)),
    rgba(12, 14, 18, 0.92);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.wot-shop-einheit-bundle.owned {
  border-color: rgba(255, 206, 0, 0.5);
}
.wot-shop-eu-bundle-list {
  list-style: none;
  margin: 0.15rem 0 0.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}
.wot-shop-eu-bundle-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.58rem;
  color: #e2e8f0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 0.18rem;
}
.wot-shop-eu-bundle-list li span {
  color: #fcd34d;
  white-space: nowrap;
}
.wot-shop-einheit-bundle .btn-buy-eu-bundle {
  width: 100%;
  margin-top: auto;
  padding: 0.48rem 0.35rem;
  font-family: inherit;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(180deg, #1a1a1a 0%, #1a1a1a 33%, #c8102e 33%, #c8102e 66%, #ffce00 66%, #ffce00 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}
.wot-shop-einheit-bundle .btn-buy-eu-bundle:hover:not(:disabled) {
  filter: brightness(1.12);
}
.wot-shop-einheit-bundle .btn-buy-eu-bundle:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: rgba(51, 65, 85, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  text-shadow: none;
}
.wot-shop-nation-bar {
  flex-wrap: wrap;
  margin-bottom: 0.45rem;
}

.wot-shop-section-title {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.45rem;
}

.wot-shop-packages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.55rem;
}

.wot-shop-tanks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.55rem;
  margin-top: 0.5rem;
}

.wot-shop-price {
  font-size: 0.78rem;
  font-weight: 800;
  color: #e9d5ff;
  margin: 0.35rem 0 0.45rem;
  margin-top: auto;
}
.wot-shop-price-free {
  color: #86efac;
  letter-spacing: 0.08em;
}
.wot-shop-badge-free {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.45);
  color: #86efac;
}
.wot-shop-tank-free {
  border-color: rgba(34, 197, 94, 0.35);
}

/* Nation flags as shop tank card backgrounds (reuse carousel flag layer) */
.wot-shop-tank {
  overflow: hidden;
  background: #14181f;
}
.wot-shop-tank > *:not(.wot-carousel-flagbg):not(.wot-shop-flag-chip) {
  position: relative;
  z-index: 1;
}
.wot-shop-tank .wot-carousel-flagimg {
  opacity: 0.36;
}
.wot-shop-tank:hover .wot-carousel-flagimg {
  opacity: 0.5;
}
/* Frankreich: Weißstreifen sonst kaum sichtbar unter dunklem Overlay */
.wot-shop-tank[data-nation="france"] .wot-carousel-flagimg {
  opacity: 0.58;
  filter: saturate(1.35) contrast(1.2) brightness(1.05);
}
.wot-shop-tank[data-nation="france"]:hover .wot-carousel-flagimg {
  opacity: 0.72;
}
.wot-shop-tank[data-nation="france"] .wot-carousel-flagshade {
  background:
    linear-gradient(180deg, rgba(8, 10, 14, 0.28) 0%, rgba(8, 10, 14, 0.62) 58%, rgba(8, 10, 14, 0.86) 100%),
    linear-gradient(90deg, rgba(0, 85, 164, 0.18), transparent 45%, rgba(239, 65, 53, 0.14));
}
.wot-shop-tank .wot-carousel-flagshade {
  background:
    linear-gradient(180deg, rgba(8, 10, 14, 0.4) 0%, rgba(8, 10, 14, 0.78) 58%, rgba(8, 10, 14, 0.92) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.22), transparent 40%, transparent 60%, rgba(0, 0, 0, 0.28));
}

.wot-shop-flag-chip {
  position: absolute;
  top: 0.4rem;
  left: 0.45rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1rem;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  background: #0c121a;
  pointer-events: none;
}
.wot-shop-flag-chip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wot-shop-flag-chip-emoji {
  width: auto;
  min-width: 1.45rem;
  height: 1.1rem;
  padding: 0 0.15rem;
  font-size: 0.75rem;
  line-height: 1;
}
.wot-shop-flag-chip-tab {
  position: static;
  width: 1.15rem;
  height: 0.78rem;
  margin-right: 0.28rem;
  box-shadow: none;
  flex-shrink: 0;
}
.wot-shop-nation {
  display: inline-flex;
  align-items: center;
}
.wot-shop-tank .wot-shop-badge {
  left: auto;
  right: 0.4rem;
}
.wot-shop-tank[data-nation="germany"] { --shop-nat: #ffce00; }
.wot-shop-tank[data-nation="usa"] { --shop-nat: #3b82f6; }
.wot-shop-tank[data-nation="ussr"] { --shop-nat: #ef4444; }
.wot-shop-tank[data-nation="uk"] { --shop-nat: #c8102e; }
.wot-shop-tank[data-nation="france"] { --shop-nat: #0055a4; }
.wot-shop-tank[data-nation="japan"] { --shop-nat: #bc002d; }
.wot-shop-tank[data-nation="poland"] { --shop-nat: #dc143c; }
.wot-shop-tank[data-nation="italy"] { --shop-nat: #009246; }
.wot-shop-tank[data-nation="czech"] { --shop-nat: #11457e; }
.wot-shop-tank[data-nation="switzerland"] { --shop-nat: #ff0000; }
.wot-shop-tank[data-nation="horizon"] { --shop-nat: #ea580c; }
.wot-shop-tank::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--shop-nat, transparent);
  opacity: 0.75;
  pointer-events: none;
  z-index: 2;
}
.wot-shop-tank h4,
.wot-shop-tank .wot-shop-tank-meta,
.wot-shop-tank .wot-shop-desc,
.wot-shop-tank .wot-premium-mark {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.wot-shop-tank:hover {
  border-color: color-mix(in srgb, var(--shop-nat, #c084fc) 45%, transparent);
}

.wot-shop-free-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  margin-bottom: 0.85rem;
  background: linear-gradient(135deg, rgba(34, 70, 45, 0.35), rgba(15, 23, 42, 0.75));
  border: 1px solid rgba(34, 197, 94, 0.45);
}
.wot-shop-free-hero-tag {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #86efac;
  margin-bottom: 0.35rem;
}
.wot-shop-free-hero h3 {
  font-size: 1rem;
  color: #f1f5f9;
  margin-bottom: 0.25rem;
}
.wot-shop-free-hero-meta {
  font-size: 0.65rem;
  color: #94a3b8;
  margin-bottom: 0.35rem;
}
.wot-shop-free-hero-desc {
  font-size: 0.68rem;
  color: #cbd5e1;
  line-height: 1.45;
  max-width: 36rem;
}
.wot-shop-free-hero-traits {
  margin: 0.55rem 0 0;
  padding-left: 1rem;
  font-size: 0.62rem;
  color: #94a3b8;
  line-height: 1.45;
}
.wot-shop-free-hero-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 8rem;
}
@media (max-width: 720px) {
  .wot-shop-free-hero {
    grid-template-columns: 1fr;
  }
  .wot-shop-free-hero-action {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.detail-traits {
  margin: 0.45rem 0 0.35rem;
  padding: 0.45rem 0.5rem;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.15);
}
.detail-traits h4 {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.35rem;
}
.detail-traits ul {
  margin: 0;
  padding-left: 1rem;
  font-size: 0.62rem;
  color: #94a3b8;
  line-height: 1.45;
}

.wot-playstyle-block {
  margin-top: 0.5rem;
  padding: 0.5rem 0.55rem;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.15);
  text-align: left;
}
.wot-playstyle-block h4 {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.4rem;
}
.wot-playstyle-list {
  list-style: none;
  margin: 0 0 0.35rem;
  padding: 0;
  font-size: 0.62rem;
  line-height: 1.45;
}
.wot-playstyle-list:last-child { margin-bottom: 0; }
.wot-playstyle-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  margin-bottom: 0.22rem;
}
.wot-playstyle-pros li { color: #bbf7d0; }
.wot-playstyle-cons li { color: #fecaca; }
.ps-mark {
  flex-shrink: 0;
  font-size: 0.58rem;
  line-height: 1.45;
}
.wot-equipped-playstyle .wot-playstyle-block {
  margin-top: 0.65rem;
}
.wot-shop-card .wot-playstyle-block {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.4rem 0.45rem;
}
.wot-shop-card .wot-playstyle-block h4 { font-size: 0.55rem; }
.wot-shop-card .wot-playstyle-list { font-size: 0.55rem; }
.wot-shop-free-hero .wot-playstyle-block {
  margin-top: 0.55rem;
  background: rgba(8, 16, 12, 0.45);
  border-color: rgba(34, 197, 94, 0.2);
}

.wot-shop-badge-bf {
  background: linear-gradient(180deg, #1a1a1a, #0a0a0a);
  color: #fbbf24;
  border: 1px solid #f59e0b;
}
.wot-shop-crate-bf {
  border-color: rgba(245, 158, 11, 0.55);
  background: linear-gradient(180deg, rgba(20, 16, 8, 0.95), rgba(8, 8, 12, 0.92));
}
.wot-shop-badge-pl {
  background: linear-gradient(180deg, #7f1d1d, #450a0a);
  color: #fecaca;
  border: 1px solid #dc2626;
}
.wot-shop-crate-pl {
  border-color: rgba(220, 38, 38, 0.5);
  background: linear-gradient(180deg, rgba(36, 12, 16, 0.95), rgba(12, 8, 10, 0.92));
}
.wot-shop-crate-pl .wot-bf-tank-pool {
  border-color: rgba(220, 38, 38, 0.22);
}
.wot-shop-crate-pl .wot-bf-collection {
  color: #fecaca;
}
.bf-crate-overlay-pl .bf-crate-modal {
  border-color: rgba(220, 38, 38, 0.45);
  box-shadow: 0 0 40px rgba(185, 28, 28, 0.25);
}
.bf-crate-overlay-pl .bf-crate-glow {
  background: radial-gradient(circle, rgba(220, 38, 38, 0.45), transparent 70%);
}
.bf-crate-overlay-pl .bf-phase-charge .bf-crate-emoji {
  filter: drop-shadow(0 0 12px rgba(248, 113, 113, 0.55));
}
.wot-shop-badge-it {
  background: linear-gradient(180deg, #14532d, #052e16);
  color: #bbf7d0;
  border: 1px solid #16a34a;
}
.wot-shop-crate-it {
  border-color: rgba(22, 163, 74, 0.5);
  background: linear-gradient(180deg, rgba(12, 36, 20, 0.95), rgba(8, 12, 10, 0.92));
}
.wot-shop-crate-it .wot-bf-tank-pool {
  border-color: rgba(22, 163, 74, 0.22);
}
.wot-shop-crate-it .wot-bf-collection {
  color: #bbf7d0;
}
.wot-shop-badge-depot {
  background: linear-gradient(180deg, #78350f, #451a03);
  color: #fde68a;
  border: 1px solid #f59e0b;
}
.wot-shop-crate-depot {
  border-color: rgba(245, 158, 11, 0.55);
  background: linear-gradient(180deg, rgba(69, 26, 3, 0.95), rgba(12, 10, 8, 0.92));
}
.wot-shop-crate-depot .wot-bf-collection {
  color: #fde68a;
}
.bf-crate-overlay-depot .bf-crate-modal {
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 0 40px rgba(180, 83, 9, 0.35);
}
.bf-crate-overlay-depot .bf-crate-glow {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.4), transparent 70%);
}
.bf-crate-overlay-depot .bf-phase-charge .bf-crate-emoji {
  filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.55));
}
.wot-shop-badge-ww2 {
  background: linear-gradient(180deg, #3d4a32, #1a2114);
  color: #d9e7b8;
  border: 1px solid #6b7c4a;
}
.wot-shop-crate-ww2 {
  border-color: rgba(107, 124, 74, 0.55);
  background: linear-gradient(180deg, rgba(28, 32, 20, 0.95), rgba(10, 12, 8, 0.92));
}
.wot-shop-crate-ww2 .wot-bf-collection {
  color: #d9e7b8;
}
.bf-crate-overlay-ww2 .bf-crate-modal {
  border-color: rgba(107, 124, 74, 0.45);
  box-shadow: 0 0 40px rgba(61, 74, 50, 0.35);
}
.bf-crate-overlay-ww2 .bf-crate-glow {
  background: radial-gradient(circle, rgba(107, 124, 74, 0.4), transparent 70%);
}
.bf-crate-overlay-ww2 .bf-phase-charge .bf-crate-emoji {
  filter: drop-shadow(0 0 12px rgba(155, 175, 110, 0.55));
}
.wot-shop-badge-anime {
  background: linear-gradient(180deg, #4a1942, #1a1028);
  color: #ffb3d9;
  border: 1px solid #ff6eb4;
}
.wot-shop-crate-anime {
  border-color: rgba(255, 110, 180, 0.5);
  background: linear-gradient(180deg, rgba(36, 16, 40, 0.95), rgba(12, 8, 16, 0.92));
}
.wot-shop-crate-anime .wot-bf-collection {
  color: #ffb3d9;
}
.bf-crate-overlay-anime .bf-crate-modal {
  border-color: rgba(255, 110, 180, 0.45);
  box-shadow: 0 0 40px rgba(255, 77, 166, 0.25);
}
.bf-crate-overlay-anime .bf-crate-glow {
  background: radial-gradient(circle, rgba(255, 110, 180, 0.4), transparent 70%);
}
.bf-crate-overlay-anime .bf-phase-charge .bf-crate-emoji {
  filter: drop-shadow(0 0 12px rgba(255, 110, 180, 0.55));
}
.bf-reward-collection .bf-reward-piece {
  font-size: 0.85rem;
  color: #fbbf24;
}
.bf-crate-overlay-it .bf-crate-modal {
  border-color: rgba(22, 163, 74, 0.45);
  box-shadow: 0 0 40px rgba(21, 128, 61, 0.25);
}
.bf-crate-overlay-it .bf-crate-glow {
  background: radial-gradient(circle, rgba(34, 197, 94, 0.45), transparent 70%);
}
.bf-crate-overlay-it .bf-phase-charge .bf-crate-emoji {
  filter: drop-shadow(0 0 12px rgba(74, 222, 128, 0.55));
}
.it-mark-alt {
  margin: 0.1rem 0 0;
  font-size: 0.48rem;
  color: rgba(187, 247, 208, 0.65);
  text-align: center;
}
.it-vorab-card {
  padding: 0.55rem 0.65rem;
  border-radius: 6px;
  border: 1px solid rgba(22, 163, 74, 0.28);
  background: rgba(12, 36, 20, 0.45);
  font-size: 0.58rem;
  color: #bbf7d0;
  line-height: 1.45;
}
.it-vorab-card p { margin: 0 0 0.35rem; }
.it-vorab-stats {
  font-size: 0.54rem;
  color: rgba(187, 247, 208, 0.85);
}
.it-vorab-card .btn-ev-link { margin-top: 0.35rem; }
.pl-mark-alt {
  margin: 0.1rem 0 0;
  font-size: 0.48rem;
  color: rgba(254, 202, 202, 0.65);
  text-align: center;
}
.pl-vorab-card {
  padding: 0.55rem 0.65rem;
  border-radius: 6px;
  border: 1px solid rgba(220, 38, 38, 0.28);
  background: rgba(36, 12, 16, 0.45);
  font-size: 0.58rem;
  color: #fecaca;
  line-height: 1.45;
}
.pl-vorab-card p { margin: 0 0 0.35rem; }
.pl-vorab-stats {
  font-size: 0.54rem;
  color: rgba(254, 202, 202, 0.85);
}
.pl-vorab-card .btn-ev-link { margin-top: 0.35rem; }
.wot-research-nation-ea {
  border-color: rgba(220, 38, 38, 0.45) !important;
  background: rgba(80, 20, 28, 0.35) !important;
}
.wot-ea-tab {
  font-size: 0.48rem;
  padding: 0.06rem 0.28rem;
  border-radius: 2px;
  background: rgba(185, 28, 28, 0.35);
  color: #fecaca;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wot-future-banner-ea {
  border-color: rgba(220, 38, 38, 0.35) !important;
  background: rgba(60, 18, 22, 0.45) !important;
  color: #fecaca !important;
}
.wot-crate-loot {
  list-style: none;
  margin: 0.35rem 0;
  padding: 0;
  font-size: 0.58rem;
  color: #94a3b8;
  text-align: left;
  width: 100%;
}
.wot-crate-loot li { margin-bottom: 0.15rem; }
.wot-shop-crate-bf-lg {
  grid-column: 1 / -1;
  max-width: 100%;
}
.wot-bf-tank-pool {
  width: 100%;
  margin: 0.4rem 0;
  padding: 0.35rem 0.4rem;
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  max-height: 11rem;
  overflow-y: auto;
}
.wot-bf-tank-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 0.5rem;
  padding: 0.2rem 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
  font-size: 0.55rem;
  text-align: left;
}
.wot-bf-tank-row-owned {
  opacity: 0.72;
  background: rgba(34, 197, 94, 0.06);
  margin: 0 -0.25rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  border-radius: 3px;
}
.wot-bf-tank-owned-badge {
  grid-column: 1 / -1;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4ade80;
}
.wot-bf-collection {
  margin: 0 0 0.35rem;
  padding: 0.28rem 0.4rem;
  font-size: 0.55rem;
  font-weight: 600;
  color: #cbd5e1;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 3px;
  text-align: left;
}
.wot-bf-collection strong { color: #fbbf24; }
.wot-bf-tank-row:last-child { border-bottom: none; }
.wot-bf-tank-name { color: #f1f5f9; font-weight: 600; grid-column: 1 / -1; }
.wot-bf-tank-nat { color: #94a3b8; }
.wot-bf-tank-stat { color: #64748b; text-align: right; }
.wot-crate-bonus {
  list-style: none;
  margin: 0.25rem 0 0.35rem;
  padding: 0;
  font-size: 0.55rem;
  color: #cbd5e1;
  text-align: left;
  width: 100%;
}
.wot-crate-bonus li { margin-bottom: 0.12rem; }

.wot-shop-price-unit {
  font-size: 0.52rem;
  font-weight: 400;
  color: #64748b;
  letter-spacing: 0.04em;
}
.wot-crate-buy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  width: 100%;
  margin-top: 0.35rem;
}
.btn-buy-crate-qty {
  flex: 1;
  min-width: 5.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.45rem 0.35rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0a0a0a;
  background: linear-gradient(180deg, #fbbf24, #d97706);
  border: 1px solid rgba(245, 158, 11, 0.7);
  cursor: pointer;
}
.btn-buy-crate-qty:hover:not(:disabled) {
  background: linear-gradient(180deg, #fcd34d, #f59e0b);
}
.btn-buy-crate-qty:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.wot-crate-qty-n {
  font-size: 0.85rem;
  font-weight: 800;
  color: #1a1008;
}
.wot-crate-qty-label { font-size: 0.52rem; }
.wot-crate-qty-price {
  font-size: 0.5rem;
  font-weight: 600;
  color: #422006;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Black Friday Kisten-Öffnung */
.bf-crate-overlay {
  z-index: 120;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(6px);
}
.bf-crate-modal {
  width: min(22rem, 92vw);
  padding: 0.85rem 1rem 1rem;
  background: linear-gradient(180deg, rgba(16, 12, 8, 0.98), rgba(8, 8, 12, 0.98));
  border: 1px solid rgba(245, 158, 11, 0.45);
  box-shadow: 0 0 40px rgba(245, 158, 11, 0.15), 0 12px 40px rgba(0, 0, 0, 0.6);
}
.bf-crate-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}
.bf-crate-modal-head h3 {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fbbf24;
}
.bf-crate-close {
  background: none;
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #94a3b8;
  width: 1.6rem;
  height: 1.6rem;
  cursor: pointer;
  font-size: 0.75rem;
}
.bf-crate-stage {
  text-align: center;
  padding: 0.35rem 0 0.5rem;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.bf-crate-stage.bf-phase-done {
  opacity: 0;
  transform: scale(0.94);
  pointer-events: none;
}
.bf-crate-scene {
  position: relative;
  width: 9.5rem;
  height: 8.5rem;
  margin: 0 auto 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bf-crate-glow {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.4), transparent 70%);
  opacity: 0;
  transform: scale(0.55);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.bf-crate-rays {
  position: absolute;
  inset: 0;
  background: conic-gradient(from 0deg, transparent, rgba(251, 191, 36, 0.22), transparent 28%);
  opacity: 0;
  animation: bf-rays-spin 3.5s linear infinite;
  animation-play-state: paused;
}
.bf-crate-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bf-crate-particle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px;
  border-radius: 50%;
  background: #fbbf24;
  opacity: 0;
  box-shadow: 0 0 8px #f59e0b;
}
.bf-crate-box {
  position: relative;
  z-index: 2;
  width: 5.2rem;
  height: 4.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center bottom;
}
.bf-crate-emoji {
  font-size: 3.2rem;
  line-height: 1;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.65));
  transition: transform 0.3s ease, filter 0.3s ease;
}
.bf-crate-lid {
  position: absolute;
  top: 0.35rem;
  left: 50%;
  width: 4.2rem;
  height: 1rem;
  margin-left: -2.1rem;
  background: linear-gradient(180deg, #2a2a2a, #0a0a0a);
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 3px 3px 0 0;
  transform-origin: center bottom;
}
.bf-crate-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 38%, rgba(255, 255, 255, 0.22) 50%, transparent 62%);
  opacity: 0;
  pointer-events: none;
}
.bf-crate-progress {
  width: min(14rem, 82%);
  height: 3px;
  margin: 0 auto 0.45rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.bf-crate-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #b45309, #fbbf24);
  transition: width 0.35s ease;
}
.bf-crate-hint {
  margin: 0;
  font-size: 0.65rem;
  color: #94a3b8;
  letter-spacing: 0.06em;
}
.bf-crate-rewards {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  max-height: 42vh;
  overflow-y: auto;
}
.bf-crate-rewards.bf-reward-visible {
  opacity: 1;
  transform: translateY(0);
}
.bf-reward-head {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fbbf24;
  margin-bottom: 0.45rem;
  text-align: center;
}
.bf-reward-highlight {
  margin-bottom: 0.45rem;
  padding: 0.4rem;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 4px;
}
.bf-reward-tank {
  font-size: 0.72rem;
  font-weight: 700;
  color: #fef3c7;
  text-align: center;
  padding: 0.15rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.bf-reward-highlight-tank {
  background: rgba(234, 179, 8, 0.16);
  border-color: rgba(250, 204, 21, 0.55);
  box-shadow: 0 0 18px rgba(234, 179, 8, 0.2);
}
.bf-tank-reveal {
  position: relative;
  margin: 0.35rem auto 0.2rem;
  padding: 0.85rem 0.7rem 0.95rem;
  max-width: 20rem;
  text-align: center;
  opacity: 0;
  transform: scale(0.82) translateY(10px);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.9, 0.2, 1.15);
}
.bf-tank-reveal.bf-tank-reveal-show {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.bf-tank-reveal-banner {
  margin: 0 0 0.55rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  color: #fde68a;
  text-shadow: 0 0 18px rgba(250, 204, 21, 0.55);
}
.bf-tank-reveal-card {
  position: relative;
  padding: 0.85rem 0.65rem 0.75rem;
  border: 1px solid rgba(250, 204, 21, 0.45);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(250, 204, 21, 0.22), transparent 55%),
    linear-gradient(180deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  overflow: hidden;
}
.bf-tank-reveal-card + .bf-tank-reveal-card {
  margin-top: 0.45rem;
}
.bf-tank-reveal-rays {
  position: absolute;
  inset: -40%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(250, 204, 21, 0.18) 28deg,
    transparent 56deg,
    rgba(253, 230, 138, 0.12) 84deg,
    transparent 112deg
  );
  opacity: 0.35;
  animation: bf-rays-spin 6s linear infinite;
  pointer-events: none;
}
.bf-tank-reveal-burst .bf-tank-reveal-rays {
  opacity: 0.7;
  animation-duration: 2.4s;
}
.bf-tank-reveal-icon {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-bottom: 0.35rem;
  filter: drop-shadow(0 0 14px rgba(250, 204, 21, 0.45));
  transform: scale(0.9);
  transition: transform 0.4s ease;
}
.bf-tank-reveal-burst .bf-tank-reveal-icon {
  transform: scale(1.08);
}
.bf-tank-reveal-eyebrow {
  position: relative;
  z-index: 1;
  margin: 0 0 0.2rem;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fbbf24;
}
.bf-tank-reveal-name {
  position: relative;
  z-index: 1;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fffbeb;
  letter-spacing: 0.04em;
}
.bf-tank-reveal-meta {
  position: relative;
  z-index: 1;
  margin-top: 0.25rem;
  font-size: 0.62rem;
  color: #cbd5e1;
}
.bf-tank-reveal-flash {
  position: absolute;
  inset: -8%;
  background: radial-gradient(circle, rgba(254, 243, 199, 0.55), transparent 62%);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.bf-tank-reveal-burst .bf-tank-reveal-flash {
  animation: bf-tank-flash 0.7s ease-out forwards;
}
@keyframes bf-tank-flash {
  0% { opacity: 0.85; transform: scale(0.7); }
  100% { opacity: 0; transform: scale(1.35); }
}
.bf-phase-tank-reveal .bf-crate-hint {
  color: #fde68a;
  font-weight: 600;
}

.bf-reward-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.62rem;
  color: #cbd5e1;
}
.bf-reward-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.22rem 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}
.bf-reward-row-tank { color: #fde68a; font-weight: 600; }
.bf-reward-qty {
  flex-shrink: 0;
  color: #fbbf24;
  font-weight: 700;
}
.bf-crate-actions {
  margin-top: 0.65rem;
  text-align: center;
}

@keyframes bf-rays-spin { to { transform: rotate(360deg); } }
@keyframes bf-crate-shake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  20% { transform: translateX(-4px) rotate(-2deg); }
  40% { transform: translateX(4px) rotate(2deg); }
  60% { transform: translateX(-3px) rotate(-1deg); }
  80% { transform: translateX(3px) rotate(1deg); }
}
@keyframes bf-particle-burst {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.2); }
}

.bf-phase-charge .bf-crate-glow {
  opacity: 0.55;
  transform: scale(0.85);
}
.bf-phase-charge .bf-crate-rays { opacity: 0.35; animation-play-state: running; }
.bf-phase-charge .bf-crate-emoji { transform: scale(1.05); filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.5)); }

.bf-phase-shake .bf-crate-glow { opacity: 0.7; transform: scale(0.95); }
.bf-phase-shake .bf-crate-box { animation: bf-crate-shake 0.12s ease-in-out infinite; }

.bf-phase-burst .bf-crate-glow {
  opacity: 1;
  transform: scale(1.35);
  transition: opacity 0.2s ease, transform 0.35s ease;
}
.bf-phase-burst .bf-crate-rays { opacity: 0.75; animation-play-state: running; }
.bf-phase-burst .bf-crate-lid { transform: rotateX(-75deg) translateY(-8px); opacity: 0.3; }
.bf-phase-burst .bf-crate-emoji { transform: scale(1.2); filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.8)); }
.bf-phase-burst .bf-crate-shine { opacity: 1; }
.bf-phase-burst .bf-crate-particle { animation: bf-particle-burst 0.55s ease-out forwards; }

.bf-phase-open .bf-crate-glow { opacity: 0.85; transform: scale(1.15); }
.bf-phase-open .bf-crate-emoji { transform: scale(1.08); }

.wot-shop-stock {
  font-size: 0.58rem;
  color: #64748b;
}
.wot-crew-label {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.35rem;
}
.wot-crew-roster {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  font-size: 0.62rem;
}
.wot-crew-roster li {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: 0.25rem;
  padding: 0.22rem 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}
.wot-crew-role { color: #64748b; }
.wot-crew-name { color: #e2e8f0; }
.wot-crew-skill { color: #94a3b8; font-size: 0.55rem; }
.wot-crew-cons {
  font-size: 0.6rem;
  color: #94a3b8;
  margin-top: 0.35rem;
}
.wot-crew-cons strong { color: #c084fc; }
.wot-crew-block {
  margin: 0.5rem 0;
  padding: 0.45rem 0.5rem;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.12);
}

.wot-shop-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.75rem 0.55rem;
  background: linear-gradient(180deg, rgba(20, 16, 36, 0.95), rgba(12, 14, 24, 0.92));
  border: 1px solid rgba(192, 132, 252, 0.25);
  text-align: center;
}
.wot-shop-package {
  align-items: stretch;
  text-align: left;
  padding-top: 1.1rem;
}
.wot-shop-badge {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1408;
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
  padding: 0.15rem 0.35rem;
}
.wot-shop-card h4 {
  font-size: 0.78rem;
  color: #f1f5f9;
  line-height: 1.2;
}
.wot-shop-desc,
.wot-shop-tanklist,
.wot-shop-extra {
  font-size: 0.62rem;
  color: #94a3b8;
  line-height: 1.35;
}
.wot-shop-tanklist { color: #cbd5e1; }
.wot-shop-tank-meta { font-size: 0.62rem; color: #94a3b8; }
.wot-premium-mark {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #c084fc;
}

.btn-buy-package,
.btn-buy-premium-card {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.45rem 0.35rem;
  font-family: inherit;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  border: 1px solid rgba(192, 132, 252, 0.45);
  background: linear-gradient(180deg, #7c3aed, #6d28d9);
  color: #fff;
  transition: filter 0.12s;
}
.btn-buy-package:hover:not(:disabled),
.btn-buy-premium-card:hover:not(:disabled) { filter: brightness(1.1); }
.btn-buy-package:disabled,
.btn-buy-premium-card:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: rgba(51, 65, 85, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
}

.wot-tree-scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.35);
  background-attachment: local;
  transition: background-image 0.35s var(--if-ease), box-shadow 0.25s ease;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--tree-nat, #c9a227) 18%, transparent),
    inset 0 40px 80px rgba(0, 0, 0, 0.2);
}

/* Sticky flag layer as fallback / accent (main bg is on .wot-tree-scroll) */
.wot-tree-flagbg {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 0;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
}
.wot-tree-flagbg.has-flag { opacity: 0; }
.wot-tree-flagimg,
.wot-tree-flagshade { display: none; }

.wot-tree-scroll[data-nation="germany"] { --tree-nat: #ffce00; }
.wot-tree-scroll[data-nation="usa"] { --tree-nat: #3b82f6; }
.wot-tree-scroll[data-nation="ussr"] { --tree-nat: #ef4444; }
.wot-tree-scroll[data-nation="uk"] { --tree-nat: #c8102e; }
.wot-tree-scroll[data-nation="france"] { --tree-nat: #0055a4; }
.wot-tree-scroll[data-nation="japan"] { --tree-nat: #bc002d; }
.wot-tree-scroll[data-nation="poland"] { --tree-nat: #dc143c; }
.wot-tree-scroll[data-nation="italy"] { --tree-nat: #009246; }
.wot-tree-scroll[data-nation="czech"] { --tree-nat: #11457e; }
.wot-tree-scroll[data-nation="horizon"] { --tree-nat: #ea580c; }
.wot-tree-scroll {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--tree-nat, transparent) 55%, transparent);
}

.wot-research-main .tree-detail {
  flex-shrink: 0;
  max-height: 38vh;
  overflow: auto;
}

@media (max-width: 720px) {
  .wot-research-layout {
    grid-template-columns: 6.5rem 1fr;
  }
  .wot-nat-name { font-size: 0.52rem; }
}

.wot-tree-grid {
  position: relative;
  z-index: 1;
  min-width: 1180px;
  min-height: 320px;
  padding: 0.75rem 0.85rem 1.25rem;
}
.wot-tree-lane-mode .wot-tree-grid {
  min-width: 0;
  min-height: 200px;
}
.wot-tree-overview-mode .wot-tree-grid {
  min-width: 1100px;
}

/* WoT Master-Grid: Ast × Stufe */
.wot-tree-master {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  position: relative;
  z-index: 1;
}
.wot-tree-master-head,
.wot-tree-master-row {
  display: grid;
  grid-template-columns: 118px repeat(10, minmax(156px, 1fr));
  gap: 0.55rem 0.65rem;
  align-items: center;
}
.wot-tree-has-star .wot-tree-master-head,
.wot-tree-has-star .wot-tree-master-row {
  grid-template-columns: 118px repeat(11, minmax(156px, 1fr));
}
.wot-tree-master-row .wot-tree-branch-col {
  position: sticky;
  left: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.2rem;
  min-height: 68px;
  padding: 0.4rem 0.45rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a8b4c4;
  background: linear-gradient(90deg, rgba(16, 22, 32, 0.92), rgba(16, 22, 32, 0.78));
  backdrop-filter: blur(4px);
  border-right: 2px solid rgba(201, 162, 39, 0.22);
  border-left: 3px solid #5a6a7c;
}
.wot-tree-master-head {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 0.35rem 0 0.45rem;
  margin-bottom: 0.15rem;
  background: linear-gradient(180deg, rgba(14, 20, 30, 0.88), rgba(14, 20, 30, 0.72));
  backdrop-filter: blur(6px);
  border-bottom: 2px solid rgba(201, 162, 39, 0.35);
}
.wot-tree-master-head .wot-tier-col-label {
  text-align: center;
  font-family: var(--if-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #c9a227;
  padding: 0.2rem;
  border-bottom: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.wot-tree-master-head .wot-tier-col-label.star-col { color: #ffcc33; }
.wot-tree-master-row {
  min-height: 76px;
  padding: 0.2rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.wot-tree-master-row[data-branch="light"] .wot-tree-branch-col { border-left-color: #8bc34a; }
.wot-tree-master-row[data-branch="medium"] .wot-tree-branch-col { border-left-color: #90a4ae; }
.wot-tree-master-row[data-branch="heavy"] .wot-tree-branch-col { border-left-color: #ff8a65; }
.wot-tree-master-row[data-branch="td"] .wot-tree-branch-col { border-left-color: #4fc3f7; }
.wot-tree-master-row[data-branch="spg"] .wot-tree-branch-col { border-left-color: #ffd54f; }
.wot-tree-master-row[data-branch="premium"] .wot-tree-branch-col {
  border-left-color: #c9a227;
  color: #e8c547;
}
.wot-tree-branch-label { line-height: 1.25; }
.wot-tree-master .wot-tree-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 72px;
}
.wot-tree-slot-empty { opacity: 0.35; }

.wot-tree-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.wot-tree-lines line,
.wot-tree-lines path.wot-tree-link {
  fill: none;
  stroke: #4a5568;
  stroke-width: 3;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.wot-tree-lines path.owned-line {
  stroke: #6a9e4a;
  stroke-width: 3.5;
  filter: none;
}
.wot-tree-lines path.avail-line {
  stroke: #c9a227;
  stroke-width: 3.25;
  filter: none;
}
.wot-tree-lines line.locked-line,
.wot-tree-lines path.locked-line {
  stroke: #3a4556;
  stroke-width: 2.5;
  stroke-dasharray: none;
  filter: none;
  opacity: 0.85;
}

.wot-tree-nodes {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-height: 360px;
}

.wot-tree-tier-labels {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}
.wot-tier-col-label {
  text-align: center;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #64748b;
  padding: 0.25rem;
  border-bottom: 2px solid rgba(245, 158, 11, 0.25);
}
.wot-tier-col-label.star-col {
  color: #fbbf24;
  border-bottom-color: rgba(251, 191, 36, 0.55);
}

.wot-tree-has-star .wot-tree-tier-labels,
.wot-tree-has-star .wot-tree-tier-row {
  grid-template-columns: repeat(11, 1fr);
}

.wot-tree-node-tier.star-tier {
  color: #fbbf24;
  font-weight: 800;
}

.wot-tree-tier-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.wot-tree-slot {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 88px;
}
.wot-tree-slot-multi {
  flex-direction: column;
  align-items: stretch;
  gap: 0.28rem;
  min-height: 0;
  padding: 0.1rem 0;
}
.wot-tree-node-compact {
  width: 100%;
  max-width: 148px;
  min-height: 58px;
  padding: 0.28rem 0.35rem 0.28rem 0.28rem;
}
.wot-tree-node-compact .wot-tree-node-visual {
  width: 44px;
  min-height: 36px;
}
.wot-tree-node-compact .wot-tree-node-name {
  font-size: 0.58rem;
  -webkit-line-clamp: 2;
}
.wot-tree-node-compact .wot-tree-node-tier { font-size: 0.62rem; }
.wot-tree-node-compact .wot-tree-node-cost { font-size: 0.5rem; }
.wot-tree-branch-count {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.55rem;
  font-weight: 700;
  padding: 0.1rem 0.35rem;
  background: rgba(201, 162, 39, 0.15);
  border: 1px solid rgba(201, 162, 39, 0.4);
  color: #e8c547;
  vertical-align: middle;
}

/* —— WoT-Fahrzeugkarte —— */
.wot-tree-node {
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: stretch;
  gap: 0;
  width: 152px;
  min-height: 68px;
  padding: 0;
  background:
    linear-gradient(180deg, rgba(42, 53, 72, 0.94) 0%, rgba(26, 35, 50, 0.95) 55%, rgba(20, 28, 40, 0.96) 100%);
  border: 1px solid #3d4a5c;
  border-radius: 2px;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  overflow: hidden;
  backdrop-filter: blur(2px);
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.wot-tree-node-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, transparent 40%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 40%);
}
.wot-tree-node-type {
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 2;
  font-size: 0.4rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.08rem 0.22rem;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  line-height: 1;
}
.wot-tree-node-check {
  position: absolute;
  top: 3px;
  right: 4px;
  z-index: 2;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 800;
  color: #0b1a0c;
  background: #7cb342;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.wot-tree-node-visual {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 66px;
  background:
    radial-gradient(ellipse at 40% 60%, rgba(80, 100, 130, 0.35), transparent 70%),
    linear-gradient(180deg, #1e2838, #121820);
  border-right: 1px solid rgba(0, 0, 0, 0.35);
}
.wot-tree-node-meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.12rem;
  padding: 0.35rem 0.45rem 0.35rem 0.4rem;
  min-width: 0;
  text-align: left;
}
.wot-tree-node.class-light { --node-class: #8bc34a; }
.wot-tree-node.class-medium { --node-class: #90a4ae; }
.wot-tree-node.class-heavy { --node-class: #ff8a65; }
.wot-tree-node.class-td { --node-class: #4fc3f7; }
.wot-tree-node.class-spg { --node-class: #ffd54f; }
.wot-tree-node.class-light .wot-tree-node-type,
.wot-tree-node.class-medium .wot-tree-node-type,
.wot-tree-node.class-heavy .wot-tree-node-type,
.wot-tree-node.class-td .wot-tree-node-type,
.wot-tree-node.class-spg .wot-tree-node-type {
  color: var(--node-class);
  border-color: color-mix(in srgb, var(--node-class) 45%, transparent);
}

.wot-tree-node:hover {
  border-color: #c9a227;
  filter: brightness(1.08);
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(201, 162, 39, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.wot-tree-node.owned,
.wot-tree-node.is-researched {
  border-color: #5a8f3c;
  background:
    linear-gradient(180deg, #2f4630 0%, #1e3020 55%, #162418 100%);
}
.wot-tree-node.owned .wot-tree-node-visual,
.wot-tree-node.is-researched .wot-tree-node-visual {
  background:
    radial-gradient(ellipse at 40% 60%, rgba(90, 140, 70, 0.28), transparent 70%),
    linear-gradient(180deg, #243528, #141c18);
}
.wot-tree-node.available {
  border-color: #c9a227;
  box-shadow:
    0 0 0 1px rgba(201, 162, 39, 0.55),
    0 0 14px rgba(201, 162, 39, 0.22),
    0 2px 0 rgba(0, 0, 0, 0.4);
  animation: tree-node-pulse 2.6s ease-in-out infinite;
}
.wot-tree-node.equipped {
  border-color: #4fc3f7;
  box-shadow:
    0 0 0 1px rgba(79, 195, 247, 0.45),
    0 0 12px rgba(79, 195, 247, 0.18);
}
.wot-tree-node.locked {
  opacity: 0.72;
  filter: saturate(0.65) brightness(0.88);
}
.wot-tree-node.locked.needs-prior {
  opacity: 0.82;
  filter: none;
  border-color: #6b7280;
}
.wot-tree-node.locked.needs-prior .wot-tree-node-cost { color: #e8c547; }
.wot-tree-node.locked.needs-xp {
  opacity: 0.88;
  filter: none;
  border-color: #5b7ea6;
}
.wot-tree-node.locked.needs-xp .wot-tree-node-cost { color: #90caf9; }
.wot-tree-node.premium {
  border-color: #c9a227;
  background:
    linear-gradient(180deg, #3a3220 0%, #2a2418 55%, #1c1810 100%);
}
.wot-tree-node.premium .wot-tree-node-visual {
  background:
    radial-gradient(ellipse at 40% 60%, rgba(201, 162, 39, 0.22), transparent 70%),
    linear-gradient(180deg, #2e2818, #18140e);
}
.wot-tree-node.premium.available {
  border-color: #e8c547;
  box-shadow:
    0 0 0 1px rgba(232, 197, 71, 0.5),
    0 0 16px rgba(201, 162, 39, 0.25);
}
.wot-tree-node.premium.owned {
  border-color: #5a8f3c;
}
.wot-tree-branch-tag.premium-tag { color: #e8c547; }
.wot-tree-branch-tag.branch-soon { color: #94a3b8; }
.wot-tree-branch-tag.branch-soon[data-branch="td"],
.wot-tree-branch-tag.branch-soon:has(+ .wot-tree-branch-desc) { color: #7dd3fc; }
.wot-tree-branch-desc {
  grid-column: 1 / -1;
  font-size: 0.62rem;
  color: #64748b;
  line-height: 1.45;
  padding: 0 0 0.35rem 0.15rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
  margin-bottom: 0.15rem;
}
.wot-tree-branch-desc em { color: #e8c547; font-style: normal; font-size: 0.58rem; }
.wot-tree-node-empty {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
  border-style: dashed !important;
  background: rgba(20, 28, 40, 0.5) !important;
  box-shadow: none !important;
  animation: none !important;
  filter: none !important;
  grid-template-columns: 1fr;
  min-height: 52px;
}
.wot-tree-node-empty .wot-tree-node-meta { align-items: center; text-align: center; }
.wot-tree-tier-row-placeholder { margin-bottom: 0.5rem; }
.wot-tree-node.selected {
  outline: 2px solid #ffcc33;
  outline-offset: 1px;
  z-index: 3;
  border-color: #ffcc33;
}

.wot-tree-node-tier {
  font-family: var(--if-display);
  font-size: 0.78rem;
  color: #e8c547;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
}
.wot-tree-node-name {
  font-size: 0.68rem;
  font-weight: 700;
  text-align: left;
  line-height: 1.15;
  color: #f1f5f9;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.wot-tree-node-cost {
  font-size: 0.55rem;
  color: #8b9bb0;
  font-variant-numeric: tabular-nums;
}
.wot-tree-node-cost.ok { color: #a5d6a7; }

@keyframes tree-node-pulse {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.45), 0 0 10px rgba(201, 162, 39, 0.15), 0 2px 0 rgba(0, 0, 0, 0.4);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(232, 197, 71, 0.7), 0 0 18px rgba(201, 162, 39, 0.28), 0 2px 0 rgba(0, 0, 0, 0.4);
  }
}

.wot-tree-branch-tag {
  grid-column: 1 / -1;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #475569;
  padding: 0.35rem 0 0.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* Lane view — one branch at a time */
.wot-tree-lane {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.wot-tree-lane-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.wot-tree-lane-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #f1f5f9;
}
.wot-tree-lane-meta {
  font-size: 0.62rem;
  color: #64748b;
}
.wot-tree-lane-desc {
  margin: 0;
  font-size: 0.62rem;
  color: #94a3b8;
  line-height: 1.45;
  max-width: 720px;
}
.wot-tree-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.25rem;
  padding: 0.65rem 0 0.25rem;
}
.wot-tree-path-arrow {
  flex: 0 0 28px;
  height: 2px;
  margin: 0 0.15rem;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.55), rgba(245, 158, 11, 0.15));
  border-radius: 1px;
}
.wot-tree-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.5rem 0.5rem;
  background: rgba(245, 158, 11, 0.06);
  border: 1px dashed rgba(245, 158, 11, 0.35);
  border-radius: 6px;
}
.wot-tree-hub-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f59e0b;
}
.wot-tree-node-path {
  width: 152px;
  min-height: 68px;
}
.wot-tree-node-hub {
  width: 152px;
}
.wot-tree-lane-empty {
  margin: 0.5rem 0;
  font-size: 0.68rem;
  color: #64748b;
}

/* Overview — all branches compact grid */
.wot-tree-overview {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.wot-tree-overview-head,
.wot-tree-overview-row {
  display: grid;
  grid-template-columns: 118px repeat(10, minmax(156px, 1fr));
  gap: 0.55rem 0.65rem;
  align-items: center;
}
.wot-tree-has-star .wot-tree-overview-head,
.wot-tree-has-star .wot-tree-overview-row {
  grid-template-columns: 118px repeat(11, minmax(156px, 1fr));
}
.wot-tree-overview-head {
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(8, 12, 20, 0.96);
  padding-bottom: 0.35rem;
  margin-bottom: 0.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.wot-tree-branch-col-label,
.wot-tree-branch-col {
  position: sticky;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  padding: 0.35rem 0.25rem;
  background: rgba(8, 12, 20, 0.92);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}
.wot-tree-branch-col.premium-tag { color: #fbbf24; }
.wot-tree-overview-row {
  padding: 0.15rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.wot-tree-overview-row:last-child { border-bottom: none; }
.wot-tree-overview .wot-tree-slot {
  min-height: 72px;
}
.wot-tree-overview .wot-tree-node {
  width: 100%;
  max-width: 152px;
}

/* Missions panel */
#panel-missions {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  padding: 0.75rem 0.85rem 0.5rem;
  background: linear-gradient(180deg, rgba(10, 14, 24, 0.96), rgba(8, 12, 20, 0.88));
}

#panel-season {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto;
  padding: 0.75rem 0.85rem 0.5rem;
  background: linear-gradient(180deg, rgba(12, 10, 24, 0.96), rgba(8, 10, 20, 0.88));
}

.wot-season-tabs {
  display: flex;
  gap: 0.35rem;
  margin: 0.45rem 0 0.5rem;
  padding: 0.2rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.wot-season-tab {
  flex: 1;
  padding: 0.42rem 0.55rem;
  font-family: inherit;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: #94a3b8;
}
.wot-season-tab:hover { color: #e2e8f0; }
.wot-season-tab.selected {
  color: #fef3c7;
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.4);
}

.wot-season-body {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.wot-season-pane {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wot-season-pane.hidden { display: none; }

.wot-season-overview-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding-right: 0.15rem;
}

.wot-season-overview-card {
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 3px solid #7c3aed;
}
.wot-season-overview-card.status-active {
  border-left-color: #f59e0b;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.12);
}
.wot-season-overview-card.status-upcoming {
  border-left-color: #38bdf8;
  opacity: 0.92;
}
.wot-season-overview-card.status-ended {
  border-left-color: #64748b;
  opacity: 0.78;
}
.wot-season-overview-card.theme-herbstfront { border-left-color: #ea580c; }
.wot-season-overview-card.theme-black_horizon { border-left-color: #a855f7; }
.wot-season-overview-card.theme-winterlegion { border-left-color: #38bdf8; }

.wot-season-overview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.55rem 0.6rem 0.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.wot-season-overview-head h3 {
  font-size: 0.78rem;
  color: #f1f5f9;
  letter-spacing: 0.06em;
}
.wot-season-overview-head p {
  font-size: 0.6rem;
  color: #94a3b8;
  margin-top: 0.15rem;
  line-height: 1.35;
}
.wot-season-overview-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  font-size: 0.58rem;
  color: #cbd5e1;
  text-align: right;
}
.wot-season-overview-badge {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
}
.wot-season-overview-badge.badge-active {
  color: #fef3c7;
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.12);
}
.wot-season-overview-badge.badge-upcoming {
  color: #bae6fd;
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(56, 189, 248, 0.1);
}
.wot-season-overview-badge.badge-ended {
  color: #94a3b8;
  border-color: rgba(100, 116, 139, 0.45);
}

.wot-season-overview-table-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.wot-season-overview-card.expanded .wot-season-overview-table-wrap {
  max-height: 520px;
  overflow: auto;
}
.wot-season-overview-toggle {
  width: 100%;
  padding: 0.38rem 0.6rem;
  font-family: inherit;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.02);
  color: #94a3b8;
  text-align: left;
}
.wot-season-overview-toggle:hover { color: #e2e8f0; }

.wot-season-overview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.58rem;
}
.wot-season-overview-table th,
.wot-season-overview-table td {
  padding: 0.32rem 0.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: top;
}
.wot-season-overview-table th {
  position: sticky;
  top: 0;
  background: rgba(12, 10, 24, 0.98);
  color: #64748b;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
}
.wot-season-overview-table td.tier-col {
  color: #fbbf24;
  font-weight: 700;
  width: 2.5rem;
  white-space: nowrap;
}
.wot-season-overview-table tr.milestone td {
  background: rgba(245, 158, 11, 0.06);
}
.wot-season-overview-table tr.milestone-premium td {
  background: rgba(168, 85, 247, 0.08);
}
.wot-season-overview-table .reward-premium {
  color: #e9d5ff;
}

.wot-missions-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}
.wot-missions-head h2 {
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: #f1f5f9;
}
.wot-missions-head p {
  font-size: 0.68rem;
  color: #94a3b8;
  margin-top: 0.2rem;
}
.wot-missions-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fef3c7;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.45);
  padding: 0.35rem 0.55rem;
}

.wot-missions-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.wot-missions-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.55rem;
}

.wot-mission-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.65rem 0.6rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid #475569;
}
.wot-mission-card.status-complete {
  border-left-color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
}
.wot-mission-card.status-claimed {
  opacity: 0.55;
  border-left-color: #22c55e;
}

.wot-mission-top {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.wot-mission-top h4 {
  font-size: 0.78rem;
  color: #f1f5f9;
}
.wot-mission-rewards {
  font-size: 0.58rem;
  color: #c084fc;
  font-weight: 600;
}
.wot-mission-desc {
  font-size: 0.65rem;
  color: #94a3b8;
  line-height: 1.35;
}
.wot-mission-bar {
  height: 4px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.wot-mission-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #d97706, #fbbf24);
}
.wot-mission-foot { margin-top: 0.15rem; }

.btn-claim-mission {
  width: 100%;
  padding: 0.4rem 0.35rem;
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  border: 1px solid rgba(245, 158, 11, 0.55);
  background: linear-gradient(180deg, #d97706, #b45309);
  color: #fff;
}
.btn-claim-mission:hover { filter: brightness(1.08); }

.mission-done-tag,
.mission-progress-tag {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mission-done-tag { color: #86efac; }
.mission-progress-tag { color: #64748b; }

.wot-missions-hint {
  font-size: 0.62rem;
  color: #64748b;
  font-style: italic;
  margin-top: 0.5rem;
  text-align: center;
}

/* —— Saison / Battle Pass —— */
.wot-ops-layout {
  display: grid;
  grid-template-columns: minmax(9.5rem, 12rem) minmax(0, 1fr);
  gap: 0.65rem;
  min-height: 0;
  flex: 1;
  margin-top: 0.35rem;
}
.wot-ops-rail {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 0;
  padding: 0.45rem;
  border: 1px solid rgba(245, 158, 11, 0.2);
  background:
    linear-gradient(165deg, rgba(245, 158, 11, 0.08), transparent 42%),
    rgba(0, 0, 0, 0.35);
}
.wot-ops-rail-head {
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f59e0b;
}
.wot-ops-chapters {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  overflow-y: auto;
  min-height: 0;
  max-height: min(58vh, 520px);
}
.wot-ops-chapter {
  appearance: none;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0.15rem 0.4rem;
  align-items: center;
  text-align: left;
  width: 100%;
  padding: 0.4rem 0.42rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.28);
  color: inherit;
  cursor: pointer;
  font-family: inherit;
}
.wot-ops-chapter-icon {
  grid-row: 1 / 3;
  width: 1.55rem;
  height: 1.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.65);
}
.wot-ops-chapter-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.wot-ops-chapter-meta strong {
  font-size: 0.62rem;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wot-ops-chapter-meta em {
  font-style: normal;
  font-size: 0.48rem;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}
.wot-ops-chapter-bar {
  grid-column: 2;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.wot-ops-chapter-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #d97706, #fbbf24);
}
.wot-ops-chapter:hover {
  border-color: rgba(245, 158, 11, 0.35);
}
.wot-ops-chapter.selected {
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.1);
  box-shadow: inset 2px 0 0 #f59e0b;
}
.wot-ops-chapter.selected .wot-ops-chapter-icon {
  color: #0c121a;
  background: linear-gradient(180deg, #fbbf24, #d97706);
  border-color: #f59e0b;
}
.wot-ops-chapter.is-ops:not(.selected) {
  border-color: rgba(56, 189, 248, 0.35);
}
.wot-ops-chapter.is-done .wot-ops-chapter-meta em { color: #86efac; }
.wot-ops-main {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
  min-height: 0;
}
.wot-ops-chapter-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-end;
  padding: 0.35rem 0.15rem 0.45rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}
.wot-ops-kicker {
  display: block;
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f59e0b;
  font-weight: 700;
  margin-bottom: 0.15rem;
}
.wot-ops-chapter-title h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: 0.02em;
}
.wot-ops-chapter-title p {
  margin: 0.15rem 0 0;
  font-size: 0.62rem;
  color: #94a3b8;
}
.wot-ops-chapter-stat {
  text-align: right;
  min-width: 6.5rem;
}
.wot-ops-chapter-stat strong {
  display: block;
  font-size: 0.85rem;
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
}
.wot-ops-chapter-stat span {
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}
.wot-ops-chapter-stat-bar {
  margin-top: 0.28rem;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.wot-ops-chapter-stat-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #d97706, #fbbf24);
}
.wot-ops-highlight:empty { display: none; }
.wot-ops-goal {
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(168, 85, 247, 0.35);
  background:
    linear-gradient(100deg, rgba(168, 85, 247, 0.14), transparent 55%),
    rgba(0, 0, 0, 0.32);
}
.wot-ops-goal.claimed { opacity: 0.65; }
.wot-ops-goal.locked { opacity: 0.72; }
.wot-ops-goal-kicker {
  display: block;
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c084fc;
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.wot-ops-goal-body {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.wot-ops-goal-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}
.wot-ops-goal-copy strong {
  font-size: 0.78rem;
  color: #f8fafc;
}
.wot-ops-goal-copy span {
  font-size: 0.55rem;
  color: #94a3b8;
}
.wot-ops-track-label {
  display: grid;
  grid-template-columns: 2.4rem 1fr 1fr;
  gap: 0.35rem;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
  padding: 0 0.15rem;
}
.wot-ops-track-label span:first-child { grid-column: 2; }
.wot-ops-track-label .is-prem { color: #c084fc; }
.wot-ops-grid {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: min(42vh, 340px);
  overflow-y: auto;
  padding-right: 0.1rem;
}
.wot-ops-tier {
  min-width: 0;
}
.wot-ops-empty {
  margin: 0.5rem 0;
  font-size: 0.62rem;
  color: #64748b;
}
.wot-season-pane#season-pane-progress,
#season-pane-progress.wot-season-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
@media (max-width: 820px) {
  .wot-ops-layout {
    grid-template-columns: 1fr;
  }
  .wot-ops-chapters {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    padding-bottom: 0.15rem;
  }
  .wot-ops-chapter {
    min-width: 9.5rem;
    flex: 0 0 auto;
  }
  .wot-ops-grid { max-height: min(48vh, 380px); }
}

.wot-season-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}
.wot-season-head h2 {
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: #f1f5f9;
}
.wot-season-head p {
  font-size: 0.68rem;
  color: #94a3b8;
  margin-top: 0.2rem;
}

.wot-season-dates {
  font-size: 0.58rem;
  color: #cbd5e1;
  letter-spacing: 0.04em;
  margin-top: 0.28rem;
}

.wot-season-status-badge {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fde68a;
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.42);
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}

.wot-season-status-badge.hidden { display: none; }

#panel-season.season-upcoming {
  background: linear-gradient(180deg, rgba(14, 12, 22, 0.96), rgba(10, 10, 18, 0.88));
}

#panel-season.season-upcoming .wot-season-bar i {
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.35), rgba(100, 116, 139, 0.25));
}

#panel-season.season-active {
  background: linear-gradient(180deg, rgba(12, 14, 28, 0.96), rgba(8, 10, 20, 0.88));
}

#panel-season.season-ended {
  opacity: 0.92;
}

.wot-bp-highlight.locked {
  opacity: 0.72;
}

#panel-season.season-black-friday {
  background: linear-gradient(180deg, rgba(8, 8, 12, 0.98), rgba(4, 4, 8, 0.92));
}

#panel-season.season-black-friday .wot-season-bar i {
  background: linear-gradient(90deg, #fbbf24, #1c1c1c);
}

#panel-season.season-paused {
  background: linear-gradient(180deg, rgba(12, 12, 18, 0.96), rgba(8, 8, 14, 0.9));
}

.wot-season-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.btn-bp-claim-all,
.btn-bp-buy-premium {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
  border-radius: 2px;
}
.btn-bp-claim-all {
  border: 1px solid rgba(245, 158, 11, 0.55);
  background: linear-gradient(180deg, #d97706, #b45309);
  color: #fff;
}
.btn-bp-buy-premium {
  border: 1px solid rgba(168, 85, 247, 0.55);
  background: linear-gradient(180deg, #7c3aed, #5b21b6);
  color: #fff;
}
.btn-bp-claim-all:disabled,
.btn-bp-buy-premium:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.wot-season-prem-tag {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #e9d5ff;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.4);
  padding: 0.35rem 0.55rem;
}
.wot-season-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  padding: 0.45rem 0.55rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.wot-season-tier {
  font-size: 0.65rem;
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: 0.08em;
  min-width: 5.5rem;
}
.wot-season-bar {
  flex: 1;
  min-width: 120px;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}
.wot-season-bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  transition: width 0.25s ease;
}
.wot-season-xp {
  font-size: 0.62rem;
  color: #94a3b8;
  min-width: 7rem;
  text-align: right;
}
.wot-bp-skip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
  padding: 0.4rem 0.55rem;
  background: rgba(168, 85, 247, 0.06);
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-radius: 4px;
}
.wot-bp-skip-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c4b5fd;
  margin-right: 0.25rem;
}
.btn-bp-skip {
  padding: 0.28rem 0.45rem;
  font-size: 0.62rem;
  font-family: inherit;
  cursor: pointer;
  border-radius: 3px;
  border: 1px solid rgba(168, 85, 247, 0.45);
  background: rgba(168, 85, 247, 0.12);
  color: #e9d5ff;
  transition: background 0.15s, border-color 0.15s;
}
.btn-bp-skip:hover:not(:disabled) {
  background: rgba(168, 85, 247, 0.22);
  border-color: rgba(196, 181, 253, 0.55);
}
.btn-bp-skip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-bp-skip-max {
  margin-left: auto;
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.1);
  color: #fde68a;
}
.wot-season-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.wot-season-missions {
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.55rem;
  background: rgba(234, 88, 12, 0.06);
  border: 1px solid rgba(251, 146, 60, 0.2);
}
.wot-season-missions.hidden { display: none; }
.wot-season-missions-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}
.wot-season-missions-head h4 {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fdba74;
  margin-right: auto;
}
.wot-season-missions-badge {
  font-size: 0.55rem;
  font-weight: 700;
  color: #fef3c7;
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.4);
  padding: 0.18rem 0.38rem;
}
.wot-season-missions-badge.hidden { display: none; }
.wot-season-missions-note {
  font-size: 0.58rem;
  color: #94a3b8;
  margin-bottom: 0.4rem;
}
.wot-season-missions-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.4rem;
  max-height: 200px;
  overflow: auto;
}
.wot-season-mission-card {
  display: flex;
  gap: 0.4rem;
  padding: 0.45rem 0.4rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 2px solid rgba(245, 158, 11, 0.45);
}
.wot-season-mission-card.status-complete {
  border-left-color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
}
.wot-season-mission-card.status-claimed { opacity: 0.55; }
.wot-season-mission-icon { font-size: 0.95rem; flex-shrink: 0; }
.wot-season-mission-body { flex: 1; min-width: 0; }
.wot-season-mission-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.3rem;
  margin-bottom: 0.12rem;
}
.wot-season-mission-top h5 {
  font-size: 0.62rem;
  color: #f1f5f9;
}
.wot-season-mission-xp {
  font-size: 0.55rem;
  font-weight: 700;
  color: #fbbf24;
  white-space: nowrap;
}
.wot-season-mission-body p {
  font-size: 0.56rem;
  color: #94a3b8;
  margin-bottom: 0.25rem;
  line-height: 1.3;
}
.wot-season-mission-foot { margin-top: 0.2rem; }
.btn-season-mission-claim {
  padding: 0.22rem 0.38rem;
  font-family: inherit;
  font-size: 0.55rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.18);
  color: #fcd34d;
}

.wot-season-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}
.wot-bp-highlight {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 4px;
}
.wot-bp-highlight-tier {
  flex: 0 0 auto;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e9d5ff;
  padding: 0.2rem 0.35rem;
  background: rgba(124, 58, 237, 0.35);
  border-radius: 2px;
}
.wot-bp-highlight-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.wot-bp-highlight-body strong {
  font-size: 0.72rem;
  color: #f1f5f9;
}
.wot-bp-highlight-body span {
  font-size: 0.58rem;
  color: #94a3b8;
}
.wot-bp-table {
  display: flex;
  flex-direction: column;
  min-width: 520px;
}
.wot-bp-table-head,
.wot-bp-tier {
  display: grid;
  grid-template-columns: 2.4rem 1fr 1fr;
  gap: 0.35rem;
  align-items: stretch;
}
.wot-bp-table-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.35rem 0.35rem 0.45rem;
  margin-bottom: 0.15rem;
  background: rgba(8, 10, 20, 0.97);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
}
.wot-bp-col-premium { color: #c084fc; }
.wot-season-track {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding-bottom: 0.35rem;
}
.wot-bp-tier {
  padding: 0.35rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.05);
  opacity: 0.55;
  border-radius: 3px;
}
.wot-bp-tier.unlocked { opacity: 1; }
.wot-bp-tier.current {
  border-color: rgba(245, 158, 11, 0.55);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.15);
}
.wot-bp-tier.milestone {
  background: rgba(245, 158, 11, 0.04);
  border-color: rgba(245, 158, 11, 0.18);
}
.wot-bp-tier.milestone-premium {
  background: rgba(168, 85, 247, 0.06);
  border-color: rgba(168, 85, 247, 0.28);
}
.wot-bp-tier-num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #64748b;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 2px;
}
.wot-bp-tier.unlocked .wot-bp-tier-num { color: #fbbf24; }
.wot-bp-tier.current .wot-bp-tier-num {
  color: #1a1408;
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
}
.wot-bp-reward {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.4rem 0.45rem;
  font-size: 0.62rem;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(15, 23, 42, 0.5);
  min-height: 3.2rem;
}
.wot-bp-reward.free { border-left: 3px solid #64748b; }
.wot-bp-reward.premium { border-left: 3px solid #a855f7; }
.wot-bp-reward.claimed { opacity: 0.5; }
.wot-bp-reward.can-claim {
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35);
}
.wot-bp-reward-label {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}
.wot-bp-reward.premium .wot-bp-reward-label { color: #c084fc; }
.wot-bp-reward-text { color: #cbd5e1; line-height: 1.35; }
.wot-bp-reward-tank {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.wot-bp-reward-tank-meta {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
}
.wot-bp-reward-tank-meta strong {
  font-size: 0.65rem;
  color: #f1f5f9;
  line-height: 1.2;
}
.wot-bp-reward-tank-meta span {
  font-size: 0.55rem;
  color: #94a3b8;
}
.btn-bp-claim {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.4rem;
  cursor: pointer;
  border: 1px solid rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
  align-self: flex-start;
}
.btn-bp-claim:disabled {
  opacity: 0.35;
  cursor: default;
}
.wot-bp-reward.locked-prem {
  opacity: 0.45;
}
.wot-season-hint {
  font-size: 0.62rem;
  color: #64748b;
  font-style: italic;
  margin-top: 0.5rem;
  text-align: center;
}

/* DevBlog */
#panel-devblog {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  padding: 0.75rem 0.85rem 0.5rem;
  background: linear-gradient(180deg, rgba(14, 10, 8, 0.96), rgba(8, 10, 18, 0.9));
}

.wot-devblog-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}
.wot-devblog-head h2 {
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: #f1f5f9;
}
.wot-devblog-head p {
  font-size: 0.68rem;
  color: #94a3b8;
  margin-top: 0.2rem;
  max-width: 36rem;
  line-height: 1.4;
}
.wot-devblog-head-badge {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fef3c7;
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.5);
  padding: 0.3rem 0.5rem;
}
.wot-devblog-head-badge.hidden { display: none; }

.wot-devblog-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 0.15rem;
}
.wot-devblog-feed {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.wot-devblog-post {
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.wot-devblog-post.theme-herbstfront {
  border-color: rgba(234, 88, 12, 0.25);
  box-shadow: 0 0 24px rgba(234, 88, 12, 0.06);
}
.wot-devblog-post.theme-herbstfront .wot-devblog-hero {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.22), rgba(120, 53, 15, 0.12) 45%, transparent 72%);
}
.wot-devblog-highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.55rem;
}
.wot-devblog-highlight {
  padding: 0.55rem 0.6rem;
  background: rgba(234, 88, 12, 0.08);
  border: 1px solid rgba(234, 88, 12, 0.22);
  border-left: 3px solid #ea580c;
}
.wot-devblog-highlight strong {
  display: block;
  font-size: 0.72rem;
  color: #fdba74;
  margin-bottom: 0.2rem;
}
.wot-devblog-highlight p {
  margin: 0;
  font-size: 0.65rem;
  color: #94a3b8;
  line-height: 1.35;
}

/* Season balance patch table */
.wot-devblog-bal-wrap {
  overflow-x: auto;
  margin-top: 0.45rem;
}
.wot-devblog-bal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.68rem;
}
.wot-devblog-bal-table th,
.wot-devblog-bal-table td {
  padding: 0.42rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  white-space: nowrap;
}
.wot-devblog-bal-table th {
  color: #94a3b8;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.58rem;
}
.wot-devblog-bal-table td { color: #e2e8f0; }
.wot-devblog-bal-from {
  color: #94a3b8;
  text-decoration: line-through;
  text-decoration-color: rgba(148, 163, 184, 0.45);
}
.wot-devblog-bal-to { font-weight: 700; }
.wot-devblog-bal-buff {
  background: rgba(34, 197, 94, 0.08);
}
.wot-devblog-bal-buff .wot-devblog-bal-to { color: #86efac; }
.wot-devblog-bal-nerf {
  background: rgba(239, 68, 68, 0.08);
}
.wot-devblog-bal-nerf .wot-devblog-bal-to { color: #fca5a5; }
.wot-devblog-bal-tag {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.12rem 0.35rem;
  border-radius: 2px;
}
.wot-devblog-bal-buff .wot-devblog-bal-tag,
.wot-devblog-bal-tag.buff {
  color: #14532d;
  background: rgba(134, 239, 172, 0.85);
}
.wot-devblog-bal-nerf .wot-devblog-bal-tag,
.wot-devblog-bal-tag.nerf {
  color: #7f1d1d;
  background: rgba(252, 165, 165, 0.9);
}
.wot-devblog-bal-legend {
  margin: 0.55rem 0 0;
  font-size: 0.62rem;
  color: #94a3b8;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.wot-devblog-post.theme-blackhorizon {
  border-color: rgba(148, 163, 184, 0.28);
  box-shadow: 0 0 24px rgba(15, 23, 42, 0.35);
}
.wot-devblog-post.theme-winterlegion {
  border-color: rgba(125, 211, 252, 0.28);
  box-shadow: 0 0 24px rgba(14, 165, 233, 0.08);
}
.wot-devblog-post.theme-feature {
  border-color: rgba(245, 158, 11, 0.28);
}
.wot-devblog-post.theme-einheitstag {
  border-color: rgba(255, 206, 0, 0.35);
  box-shadow: 0 0 24px rgba(200, 16, 46, 0.08);
}
.wot-devblog-post.theme-blackhorizon .wot-devblog-hero {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.55), rgba(15, 23, 42, 0.2) 55%, transparent 75%);
}
.wot-devblog-post.theme-winterlegion .wot-devblog-hero {
  background: linear-gradient(135deg, rgba(14, 116, 144, 0.28), rgba(15, 23, 42, 0.15) 50%, transparent 75%);
}
.wot-devblog-post.theme-feature .wot-devblog-hero {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(15, 23, 42, 0.12) 55%, transparent 75%);
}
.wot-devblog-post.theme-einheitstag .wot-devblog-hero {
  background:
    linear-gradient(135deg, rgba(26, 26, 26, 0.65), rgba(200, 16, 46, 0.28) 48%, rgba(255, 206, 0, 0.14) 100%);
}
.wot-devblog-post.theme-einheitstag .wot-devblog-highlight {
  background: rgba(200, 16, 46, 0.1);
  border-color: rgba(255, 206, 0, 0.28);
  border-left-color: #ffce00;
}
.wot-devblog-post.theme-einheitstag .wot-devblog-highlight strong {
  color: #fcd34d;
}
.wot-devblog-post.theme-ironstorm .wot-devblog-hero {
  background: linear-gradient(135deg, rgba(71, 85, 105, 0.35), rgba(15, 23, 42, 0.15) 55%, transparent 75%);
}

.wot-devblog-hero {
  padding: 0.75rem 0.7rem 0.65rem;
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.14), rgba(120, 53, 15, 0.08) 45%, transparent 70%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.wot-devblog-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.wot-devblog-hero-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
}
.wot-devblog-status {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.42rem;
  border: 1px solid rgba(251, 146, 60, 0.35);
  color: #fdba74;
  background: rgba(234, 88, 12, 0.1);
}
.wot-devblog-status.is-live {
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.1);
}
.wot-devblog-status.is-ended {
  color: #94a3b8;
  border-color: rgba(100, 116, 139, 0.35);
  background: rgba(100, 116, 139, 0.1);
}
.wot-devblog-status.is-soon {
  color: #bae6fd;
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.08);
}
.wot-devblog-badge {
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, #ea580c, #c2410c);
  padding: 0.18rem 0.38rem;
}
.wot-devblog-tag {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fdba74;
  border: 1px solid rgba(251, 146, 60, 0.35);
  padding: 0.15rem 0.35rem;
}
.wot-devblog-date {
  font-size: 0.58rem;
  color: #94a3b8;
  margin-left: auto;
}
.wot-devblog-hero h3 {
  font-size: 0.92rem;
  color: #fff7ed;
  letter-spacing: 0.06em;
  line-height: 1.25;
}
.wot-devblog-lead {
  font-size: 0.68rem;
  color: #cbd5e1;
  line-height: 1.45;
  margin-top: 0.2rem;
}
.wot-devblog-range {
  font-size: 0.6rem;
  font-weight: 600;
  color: #fdba74;
  margin-top: 0.35rem;
  letter-spacing: 0.04em;
}

.wot-devblog-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.45rem 0.7rem;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.wot-devblog-jump a {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fdba74;
  padding: 0.22rem 0.4rem;
  border: 1px solid rgba(251, 146, 60, 0.25);
  background: rgba(234, 88, 12, 0.06);
}
.wot-devblog-jump a:hover {
  color: #ffedd5;
  border-color: rgba(251, 146, 60, 0.5);
}

.wot-devblog-dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.2);
}
.wot-devblog-dl-row {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 0.5rem;
  padding: 0.38rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  align-items: baseline;
}
.wot-devblog-dl-row:last-child { border-bottom: none; }
.wot-devblog-dl dt {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
  margin: 0;
}
.wot-devblog-dl dd {
  font-size: 0.62rem;
  color: #e2e8f0;
  margin: 0;
  line-height: 1.4;
}

.wot-devblog-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.wot-devblog-lines li {
  font-size: 0.6rem;
  color: #cbd5e1;
  line-height: 1.35;
  padding-left: 0.55rem;
  position: relative;
}
.wot-devblog-lines li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: #fb923c;
  font-weight: 700;
}

.wot-devblog-event-grid,
.wot-devblog-tank-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.wot-devblog-event-block,
.wot-devblog-tank-block {
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.22);
  padding: 0.5rem 0.55rem 0.55rem;
  scroll-margin-top: 0.5rem;
}
.wot-devblog-event-block {
  border-left: 3px solid rgba(234, 88, 12, 0.55);
}
.wot-devblog-tank-block {
  border-left: 3px solid rgba(245, 158, 11, 0.55);
}
.wot-devblog-event-block h5,
.wot-devblog-tank-block h5 {
  font-size: 0.68rem;
  color: #fff7ed;
  margin-bottom: 0.4rem;
  letter-spacing: 0.04em;
}

.wot-devblog-subsection {
  margin-top: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.wot-devblog-subsection h6 {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 0.35rem;
}
.wot-devblog-mission-grid,
.wot-devblog-reward-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 0.35rem;
}
.wot-devblog-mission-item,
.wot-devblog-reward-item {
  display: flex;
  gap: 0.35rem;
  align-items: flex-start;
  padding: 0.4rem 0.42rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.06);
  min-height: 3.5rem;
}
.wot-devblog-mission-item.is-season {
  border-left: 2px solid rgba(56, 189, 248, 0.45);
}
.wot-devblog-reward-item.is-featured {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(234, 88, 12, 0.08);
}
.wot-devblog-mission-num,
.wot-devblog-reward-num {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.52rem;
  font-weight: 800;
  color: #fff7ed;
  background: rgba(234, 88, 12, 0.35);
  border: 1px solid rgba(251, 146, 60, 0.35);
}
.wot-devblog-mission-item.is-season .wot-devblog-mission-num {
  background: rgba(56, 189, 248, 0.25);
  border-color: rgba(56, 189, 248, 0.4);
}
.wot-devblog-reward-item.is-featured .wot-devblog-reward-num {
  background: rgba(245, 158, 11, 0.35);
  border-color: rgba(245, 158, 11, 0.45);
}
.wot-devblog-mission-item strong,
.wot-devblog-reward-item strong {
  display: block;
  font-size: 0.6rem;
  color: #f1f5f9;
  margin-bottom: 0.2rem;
  line-height: 1.25;
}
.wot-devblog-mission-item .wot-devblog-lines,
.wot-devblog-reward-item .wot-devblog-lines {
  margin-top: 0.1rem;
}

.wot-devblog-tier-grid {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.wot-devblog-tier-block {
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.18);
  scroll-margin-top: 0.5rem;
}
.wot-devblog-tier-block.is-milestone {
  border-color: rgba(245, 158, 11, 0.2);
}
.wot-devblog-tier-block.is-tank-tier {
  border-color: rgba(168, 85, 247, 0.28);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.06);
}
.wot-devblog-tier-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.wot-devblog-tier-num {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fbbf24;
}
.wot-devblog-tier-tag {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.35);
  padding: 0.1rem 0.3rem;
}
.wot-devblog-tier-tag.is-prem {
  color: #e9d5ff;
  border-color: rgba(168, 85, 247, 0.4);
}
.wot-devblog-tier-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 480px) {
  .wot-devblog-tier-body { grid-template-columns: 1fr; }
  .wot-devblog-dl-row { grid-template-columns: 1fr; gap: 0.15rem; }
}
.wot-devblog-tier-track {
  padding: 0.4rem 0.5rem 0.45rem;
}
.wot-devblog-tier-track.is-free {
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}
.wot-devblog-tier-track h6 {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.wot-devblog-tier-track.is-free h6 { color: #fbbf24; }
.wot-devblog-tier-track.is-premium h6 { color: #e9d5ff; }

.wot-devblog-section {
  scroll-margin-top: 0.35rem;
}

.wot-devblog-section-overview {
  padding-bottom: 0.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.wot-devblog-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 0.4rem;
}
.wot-devblog-overview-card {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
  padding: 0.5rem 0.45rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.06);
  min-height: 4.5rem;
}
.wot-devblog-overview-icon {
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.05rem;
}
.wot-devblog-overview-card strong {
  display: block;
  font-size: 0.62rem;
  color: #fff7ed;
  margin-bottom: 0.2rem;
  letter-spacing: 0.04em;
}
.wot-devblog-overview-card span {
  display: block;
  font-size: 0.56rem;
  color: #94a3b8;
  line-height: 1.35;
}

.wot-devblog-tanks-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.45rem;
}
.wot-devblog-events-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.wot-devblog-event-chip {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.4rem 0.5rem;
  background: rgba(234, 88, 12, 0.08);
  border: 1px solid rgba(251, 146, 60, 0.22);
  min-width: 8.5rem;
}
.wot-devblog-event-chip strong {
  font-size: 0.6rem;
  color: #ffedd5;
}
.wot-devblog-event-chip span {
  font-size: 0.55rem;
  color: #94a3b8;
}

.wot-devblog-tracks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}
@media (max-width: 520px) {
  .wot-devblog-tracks { grid-template-columns: 1fr; }
}
.wot-devblog-track-col {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 0.45rem 0.4rem 0.35rem;
}
.wot-devblog-track-col.is-free {
  border-top: 2px solid rgba(245, 158, 11, 0.55);
}
.wot-devblog-track-col.is-premium {
  border-top: 2px solid rgba(168, 85, 247, 0.55);
}
.wot-devblog-track-col h5 {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 0.35rem;
}
.wot-devblog-track-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
.wot-devblog-track-list li {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.35rem;
  align-items: baseline;
  font-size: 0.58rem;
  color: #cbd5e1;
  line-height: 1.3;
  padding-bottom: 0.28rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.wot-devblog-track-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.wot-devblog-track-tier {
  font-weight: 700;
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
}
.wot-devblog-track-col.is-premium .wot-devblog-track-tier {
  color: #e9d5ff;
}

.wot-devblog-details {
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.2);
}
.wot-devblog-details summary {
  cursor: pointer;
  padding: 0.45rem 0.55rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
  list-style: none;
  user-select: none;
}
.wot-devblog-details summary::-webkit-details-marker { display: none; }
.wot-devblog-details summary::before {
  content: "▸ ";
  color: #fb923c;
}
.wot-devblog-details[open] summary::before { content: "▾ "; }
.wot-devblog-details[open] summary {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
}
.wot-devblog-details .wot-devblog-table-wrap {
  max-height: 280px;
  overflow: auto;
  border: none;
}

.wot-devblog-byline {
  font-size: 0.55rem;
  color: #64748b;
  margin-top: 0.35rem;
  font-style: italic;
}

.wot-devblog-body {
  padding: 0.6rem 0.7rem 0.7rem;
}
.wot-devblog-section {
  margin-bottom: 0.75rem;
}
.wot-devblog-section:last-child { margin-bottom: 0; }
.wot-devblog-section h4 {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fb923c;
  margin-bottom: 0.4rem;
}
.wot-devblog-section p {
  font-size: 0.65rem;
  color: #cbd5e1;
  line-height: 1.45;
  margin-bottom: 0.35rem;
}
.wot-devblog-section p:last-child { margin-bottom: 0; }

.wot-devblog-highlight-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.wot-devblog-tanks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.45rem;
}
.wot-devblog-tank-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.wot-devblog-tank-tier {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fbbf24;
}
.wot-devblog-tank-card {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 0.5rem;
  background: rgba(234, 88, 12, 0.08);
  border: 1px solid rgba(251, 146, 60, 0.25);
}
.wot-devblog-tank-tier-pill {
  align-self: flex-start;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fef3c7;
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 0.12rem 0.32rem;
  margin-bottom: 0.1rem;
}
.wot-devblog-tank-nation {
  font-size: 0.55rem;
  color: #94a3b8;
}
.wot-devblog-tank-card strong {
  font-size: 0.72rem;
  color: #fff7ed;
}
.wot-devblog-tank-card span:last-child {
  font-size: 0.55rem;
  color: #cbd5e1;
}

.wot-devblog-list {
  margin: 0;
  padding-left: 1rem;
  font-size: 0.63rem;
  color: #cbd5e1;
  line-height: 1.45;
}
.wot-devblog-list li { margin-bottom: 0.25rem; }

.wot-devblog-table-wrap {
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.wot-devblog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.58rem;
}
.wot-devblog-table th,
.wot-devblog-table td {
  padding: 0.32rem 0.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: top;
  text-align: left;
}
.wot-devblog-table th {
  background: rgba(20, 12, 8, 0.95);
  color: #64748b;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wot-devblog-table td.tier-col {
  color: #fbbf24;
  font-weight: 700;
  white-space: nowrap;
}
.wot-devblog-table .reward-premium { color: #e9d5ff; }

.wot-devblog-section-note {
  font-size: 0.58rem;
  color: #64748b;
  margin: -0.2rem 0 0.4rem;
  font-style: italic;
}

.wot-devblog-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.4rem;
}
.wot-devblog-fact {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.45rem 0.5rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 2px solid rgba(234, 88, 12, 0.5);
}
.wot-devblog-fact span {
  font-size: 0.55rem;
  color: #64748b;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wot-devblog-fact strong {
  font-size: 0.65rem;
  color: #f1f5f9;
}

.wot-devblog-table-wrap-full {
  max-height: 320px;
  overflow: auto;
}

.wot-devblog-roadmap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.wot-devblog-roadmap-item {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  padding: 0.45rem 0.5rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.wot-devblog-roadmap-when {
  font-size: 0.58rem;
  font-weight: 700;
  color: #94a3b8;
  white-space: nowrap;
  min-width: 4.5rem;
}
.wot-devblog-roadmap-item strong {
  display: block;
  font-size: 0.65rem;
  color: #e2e8f0;
}
.wot-devblog-roadmap-item span {
  font-size: 0.58rem;
  color: #64748b;
}

.wot-devblog-actions {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.btn-devblog-go-season,
.btn-devblog-go-event,
.btn-devblog-go-screen {
  width: 100%;
  padding: 0.48rem 0.55rem;
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid rgba(234, 88, 12, 0.45);
  background: linear-gradient(180deg, rgba(234, 88, 12, 0.25), rgba(194, 65, 12, 0.18));
  color: #ffedd5;
}
.btn-devblog-go-season:hover,
.btn-devblog-go-event:hover,
.btn-devblog-go-screen:hover {
  filter: brightness(1.08);
  border-color: rgba(251, 146, 60, 0.65);
}
.theme-einheitstag .btn-devblog-go-event {
  border-color: rgba(255, 206, 0, 0.45);
  background: linear-gradient(180deg, #1a1a1a 0%, #1a1a1a 33%, #c8102e 33%, #c8102e 66%, #ffce00 66%, #ffce00 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.wot-devblog-foot {
  font-size: 0.6rem;
  color: #64748b;
  text-align: center;
  margin-top: 0.45rem;
  font-style: italic;
}
.wot-devblog-empty {
  font-size: 0.68rem;
  color: #94a3b8;
  text-align: center;
  padding: 1rem;
}

.rf-exchange-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.45rem;
}
.rf-tier-track {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-height: 340px;
  overflow: auto;
}
.rf-tier-card {
  min-width: 7.5rem;
  flex: 1 1 7.5rem;
}
.theme-dh .ev-pts-bar i,
.theme-dh .wot-mission-bar i {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.theme-rf .ev-pts-bar i,
.theme-rf .wot-mission-bar i {
  background: linear-gradient(90deg, #78716c, #a8a29e 55%, #94a3b8);
}

.result-bp {
  display: block;
  color: #fbbf24;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.wot-nav-btn.has-alert {
  color: #fbbf24;
}
.wot-nav-btn.has-alert .wot-nav-icon {
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}
.wot-nav-btn.wot-nav-collections {
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.22);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.1), rgba(0, 0, 0, 0.15));
}
.wot-nav-btn.wot-nav-collections .wot-nav-icon.if-ico {
  background: #fbbf24;
}
.wot-nav-btn.wot-nav-collections:hover,
.wot-nav-btn.wot-nav-collections.selected {
  color: #fff7ed;
  border-color: rgba(245, 158, 11, 0.45);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.18), rgba(0, 0, 0, 0.2));
}
.wot-nav-btn.wot-nav-collections.has-alert {
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.25);
}
#nav-dot-collections:not(.hidden) {
  top: 2px;
  right: 4px;
  width: auto;
  height: auto;
  min-width: 1.05rem;
  padding: 0.08rem 0.22rem;
  font-size: 0.5rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  color: #0c121a;
  background: #fbbf24;
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.55);
}

/* Stats panel */
#panel-stats {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(180deg, rgba(8, 12, 20, 0.94), rgba(8, 12, 20, 0.85));
  overflow-y: auto;
}

.wot-stats-head h2 {
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  color: #f1f5f9;
}
.wot-stats-head p {
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 0.25rem;
  margin-bottom: 1rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}
.stats-cell {
  padding: 0.85rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid rgba(245, 158, 11, 0.45);
}
.stats-cell span {
  display: block;
  font-size: 0.58rem;
  color: #64748b;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.stats-cell strong {
  font-size: 1.35rem;
  color: #f1f5f9;
  font-variant-numeric: tabular-nums;
}
.stats-hint {
  font-size: 0.75rem;
  color: #64748b;
  text-align: center;
}

.tree-detail {
  position: relative;
  display: flex;
  gap: 1rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(245, 158, 11, 0.2);
}
.tree-detail-close {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 2;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  font-family: inherit;
  font-size: 0.72rem;
  line-height: 1;
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tree-detail-close:hover {
  color: #f8fafc;
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(30, 41, 59, 0.95);
}
.tree-detail.hidden { display: none; }
.tree-detail-body { flex: 1; padding-right: 1.75rem; }
.tree-detail h3 { font-size: 1rem; color: #f1f5f9; margin-bottom: 0.2rem; }
.tree-detail p { font-size: 0.75rem; color: #64748b; }
.detail-lore,
.wot-shop-inspect-lore {
  margin: 0.65rem 0 0.35rem;
  padding: 0.55rem 0.65rem;
  background: rgba(15, 23, 42, 0.55);
  border-left: 3px solid rgba(245, 158, 11, 0.45);
  border-radius: 0 4px 4px 0;
}
.detail-lore h4,
.wot-shop-inspect-lore h4 {
  margin: 0 0 0.3rem;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fbbf24;
}
.detail-lore p,
.wot-shop-inspect-lore p {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #cbd5e1;
}
.wot-shop-card-inspectable {
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.wot-shop-card-inspectable:hover {
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.2);
  transform: translateY(-1px);
}
.wot-shop-inspect-hint {
  margin: 0.15rem 0 0.35rem;
  font-size: 0.58rem;
  color: #fbbf24;
  letter-spacing: 0.04em;
}
.wot-shop-inspect {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.wot-shop-inspect.hidden { display: none; }
.wot-shop-inspect-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.72);
}
.wot-shop-inspect-panel {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 1rem;
  width: min(640px, 100%);
  max-height: min(88vh, 720px);
  overflow: auto;
  padding: 1rem 1.1rem 1.1rem;
  background: linear-gradient(165deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 6px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.wot-shop-inspect-preview {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-width: 110px;
}
.wot-shop-inspect-body {
  flex: 1;
  min-width: 0;
  padding-right: 1.5rem;
}
.wot-shop-inspect-body h3 {
  font-size: 1.05rem;
  color: #f1f5f9;
  margin: 0 0 0.2rem;
}
.wot-shop-inspect-body > p {
  font-size: 0.75rem;
  color: #94a3b8;
  margin: 0 0 0.55rem;
}
@media (max-width: 560px) {
  .wot-shop-inspect-panel {
    flex-direction: column;
    align-items: center;
  }
  .wot-shop-inspect-body { padding-right: 0; width: 100%; }
}

.detail-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
  margin: 0.5rem 0;
  font-size: 0.68rem;
}
.detail-stats div {
  padding: 0.35rem;
  background: rgba(0, 0, 0, 0.35);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.detail-stats span { display: block; color: #64748b; font-size: 0.55rem; }

.detail-req { font-size: 0.72rem; color: #94a3b8; margin-bottom: 0.5rem; }
.detail-actions { display: flex; gap: 0.45rem; }

.btn-secondary, .btn-research {
  flex: 1;
  padding: 0.58rem 0.7rem;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid var(--if-border-strong);
  border-radius: var(--if-radius-sm);
  transition: filter 0.15s var(--if-ease), border-color 0.15s var(--if-ease), box-shadow 0.15s var(--if-ease);
}
.btn-secondary {
  background: linear-gradient(180deg, rgba(40, 52, 68, 0.95), rgba(18, 26, 38, 0.98));
  color: #dbe4f0;
}
.btn-secondary:hover {
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.12);
}
.btn-research {
  background: linear-gradient(180deg, var(--if-accent-hot), var(--if-accent-deep));
  border-color: var(--if-accent);
  color: #0c121a;
}
.btn-research:hover { filter: brightness(1.06); }
.btn-research:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }

.btn-buy-premium {
  flex: 1;
  padding: 0.55rem;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  border: 1px solid rgba(192, 132, 252, 0.55);
  background: linear-gradient(180deg, #8b5cf6, #7c3aed);
  color: #fff;
}
.btn-buy-premium:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-shop-link {
  flex: 1;
  padding: 0.55rem;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  border: 1px solid rgba(192, 132, 252, 0.35);
  background: rgba(30, 20, 48, 0.8);
  color: #c084fc;
}
.btn-shop-link:hover { background: rgba(40, 28, 62, 0.9); }

/* Bottom nav (Iron Front tabs) */
.wot-nav {
  grid-column: 1 / -1;
  grid-row: 4;
  display: flex;
  align-items: stretch;
  background:
    linear-gradient(0deg, rgba(4, 8, 14, 0.98), rgba(10, 14, 22, 0.94));
  border-top: 1px solid rgba(245, 158, 11, 0.22);
  min-height: 74px;
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.35);
  position: relative;
}
.wot-nav::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.45), transparent);
  pointer-events: none;
}
.wot-nav-items {
  flex: 1;
  display: flex;
  align-items: stretch;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.wot-nav-items::-webkit-scrollbar { display: none; }

.wot-nav-btn {
  flex: 1;
  max-width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  padding: 0.55rem 0.4rem 0.45rem;
  background: transparent;
  border: none;
  border-top: 3px solid transparent;
  color: var(--if-text-dim);
  font-family: inherit;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.18s var(--if-ease), border-color 0.18s var(--if-ease), background 0.18s var(--if-ease);
}
.wot-nav-btn:hover {
  color: var(--if-text);
  background: rgba(255, 255, 255, 0.035);
}
.wot-nav-btn.selected {
  color: var(--if-accent-hot);
  border-top-color: var(--if-accent);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.03));
  box-shadow: inset 0 1px 0 rgba(251, 191, 36, 0.18);
}
.wot-nav-btn { position: relative; }
.wot-nav-icon { font-size: 1.15rem; line-height: 1; }

/* Battle dock — Modus-Karten + Schlacht-Button */
.wot-battle-dock {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0.5rem 0.6rem 0.48rem;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(10, 14, 24, 0.94), rgba(6, 10, 18, 0.98));
  border: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.5),
    0 0 32px rgba(245, 158, 11, 0.1);
  backdrop-filter: blur(10px);
  max-width: min(680px, 96vw);
  width: 100%;
}

.wot-battle-dock-top {
  display: flex;
  align-items: stretch;
  gap: 0.65rem;
  width: 100%;
}

.wot-battle-dock-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  width: 100%;
}

.wot-gfx-advice {
  margin: 0;
  padding: 0.35rem 0.55rem;
  font-size: 0.58rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: #fde68a;
  background: rgba(120, 53, 15, 0.35);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-left: 3px solid #f59e0b;
}

.wot-gfx-advice strong {
  color: #fbbf24;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.55rem;
}

.wot-gfx-advice em {
  font-style: normal;
  font-weight: 700;
  color: #fef3c7;
}

.wot-battle-modes {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.wot-battle-modes-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.65rem;
}

.wot-battle-modes-title {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
}

.wot-battle-mode-detail {
  font-size: 0.52rem;
  color: #94a3b8;
  text-align: right;
  line-height: 1.35;
  max-width: 16rem;
}

.wot-battle-mode-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.28rem;
}

.wot-battle-mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  min-height: 3.35rem;
  padding: 0.28rem 0.2rem;
  font: inherit;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.55);
  color: #94a3b8;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s;
}

.wot-battle-mode-card:hover {
  border-color: rgba(245, 158, 11, 0.35);
  color: #cbd5e1;
  background: rgba(245, 158, 11, 0.08);
  transform: translateY(-1px);
}

.wot-battle-mode-card.selected {
  border-color: rgba(245, 158, 11, 0.65);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.06));
  color: #fde68a;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.15), inset 0 0 0 1px rgba(251, 191, 36, 0.12);
}

.wot-battle-mode-card.bonus {
  border-color: rgba(56, 189, 248, 0.38);
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.1), rgba(15, 23, 42, 0.55));
}

.wot-battle-mode-card.bonus:hover {
  border-color: rgba(56, 189, 248, 0.5);
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.16), rgba(245, 158, 11, 0.06));
}

.wot-battle-mode-card.bonus.selected {
  border-color: rgba(56, 189, 248, 0.55);
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.18), rgba(245, 158, 11, 0.08));
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.12);
}

.wot-battle-mode-card.rotation {
  border-color: rgba(167, 139, 250, 0.35);
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.12), rgba(15, 23, 42, 0.55));
}
.wot-battle-mode-card.rotation:hover {
  border-color: rgba(196, 181, 253, 0.5);
}
.wot-battle-mode-card.rotation.selected {
  border-color: rgba(196, 181, 253, 0.65);
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.18);
}
.wot-battle-mode-card.rotation .wot-battle-mode-tag {
  color: #c4b5fd;
}

.wot-battle-mode-icon {
  font-size: 0.95rem;
  line-height: 1;
}

.wot-battle-mode-name {
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.15;
}

.wot-battle-mode-tag {
  font-size: 0.42rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  opacity: 0.9;
}

.wot-battle-mode-card.selected .wot-battle-mode-tag {
  color: #fbbf24;
}

.wot-battle-mode-card.bonus .wot-battle-mode-tag {
  color: #7dd3fc;
}

.wot-battle-action {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.35rem;
  flex-shrink: 0;
  min-width: 11.5rem;
}

.wot-battle-btn {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-width: 11.5rem;
  min-height: 3.35rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #fde68a 0%, #f59e0b 42%, #d97706 100%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  color: #1a1408;
  font-family: inherit;
  cursor: pointer;
  box-shadow:
    0 6px 28px rgba(245, 158, 11, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: filter 0.15s, transform 0.12s, box-shadow 0.15s;
  animation: battle-dock-pulse 3.2s ease-in-out infinite;
}

.wot-battle-btn-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: battle-btn-shine 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes battle-btn-shine {
  0%, 72%, 100% { transform: translateX(-120%); }
  38% { transform: translateX(120%); }
}

@keyframes battle-dock-pulse {
  0%, 100% {
    box-shadow:
      0 6px 28px rgba(245, 158, 11, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.45);
  }
  50% {
    box-shadow:
      0 8px 36px rgba(245, 158, 11, 0.62),
      0 0 24px rgba(251, 191, 36, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }
}

.wot-battle-dock .wot-battle-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
}

.wot-battle-dock .wot-battle-btn:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

.wot-battle-icon {
  flex-shrink: 0;
  font-size: 1.35rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.wot-battle-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  text-align: left;
}

.wot-battle-main {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1.15;
  white-space: nowrap;
}

.wot-battle-sub {
  font-size: 0.46rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.82;
  margin-top: 0.12rem;
  max-width: 9.5rem;
  white-space: normal;
  line-height: 1.25;
}

.wot-panel-garage > .wot-battle-dock {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: start;
  position: relative;
  z-index: 20;
  margin-top: -3.35rem;
}
.wot-battle-dock.hidden { display: none; }

.wot-battle-dock-settings {
  display: none;
}

/* Legacy — Nav-Battle-Strip entfernt */
.wot-battle-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.35rem 0.75rem 0.35rem 0.85rem;
  border-left: 1px solid rgba(245, 158, 11, 0.28);
  background: linear-gradient(90deg, rgba(8, 12, 20, 0.35), rgba(14, 18, 28, 0.98));
}
.wot-battle-wrap.hidden { display: none; }

.wot-battle-wrap .wot-battle-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 124px;
  padding: 0.4rem 0.9rem;
  background: linear-gradient(180deg, #fcd34d 0%, #f59e0b 48%, #d97706 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--if-radius);
  color: #1a1408;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: filter 0.15s, transform 0.12s, box-shadow 0.15s;
}
.wot-battle-wrap .wot-battle-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(245, 158, 11, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.wot-battle-wrap .wot-battle-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 12px rgba(245, 158, 11, 0.35);
}
.wot-battle-wrap .wot-battle-main {
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1.1;
}
.wot-battle-wrap .wot-battle-sub {
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  opacity: 0.8;
  margin-top: 0.1rem;
  max-width: 140px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-start {
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--if-accent-hot), var(--if-accent-deep));
  border: 1px solid var(--if-accent);
  border-radius: var(--if-radius-sm);
  color: #0c121a;
  cursor: pointer;
  font-family: var(--if-display);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.28);
  transition: filter 0.15s var(--if-ease), box-shadow 0.15s var(--if-ease), transform 0.12s var(--if-ease);
}
.btn-start:hover {
  filter: brightness(1.06);
  box-shadow: 0 10px 28px rgba(245, 158, 11, 0.38);
  transform: translateY(-1px);
}

/* ===== PANZER-ICON (CSS) ===== */
.tank-icon {
  position: relative;
  width: 72px;
  height: 52px;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.25));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
}

.tank-icon::before {
  content: "";
  position: absolute;
  bottom: 10px; left: 50%;
  width: 46px; height: 14px;
  transform: translateX(-50%);
  background: var(--tank-hull, #4a5040);
  border-radius: 2px;
  box-shadow: -18px 0 0 -2px #1a1c18, 18px 0 0 -2px #1a1c18;
}

.tank-icon::after {
  content: "";
  position: absolute;
  bottom: 20px; left: 50%;
  width: 22px; height: 12px;
  transform: translateX(-50%);
  background: var(--tank-turret, #6a7050);
  border-radius: 2px;
  box-shadow: 14px 2px 0 -4px var(--tank-barrel, #4a5040);
}

.tank-icon-light { --tank-hull: #4a6050; --tank-turret: #6a9070; }
.tank-icon-medium { --tank-hull: #4a5568; --tank-turret: #687888; }
.tank-icon-heavy { --tank-hull: #484038; --tank-turret: #706858; }
.tank-icon-td { --tank-hull: #3a4840; --tank-turret: #4a5850; --tank-barrel: #3a4840; }
.tank-icon-td::after {
  width: 14px;
  height: 8px;
  bottom: 17px;
  border-radius: 1px 4px 4px 1px;
  box-shadow: 22px 1px 0 -3px var(--tank-barrel);
}
.tank-icon-spg { --tank-hull: #504838; --tank-turret: #605848; --tank-barrel: #3a3830; }
.tank-icon-spg::before {
  height: 11px;
  width: 40px;
  border-radius: 3px 3px 1px 1px;
  box-shadow: -16px 0 0 -2px #1a1c18, 16px 0 0 -2px #1a1c18, 28px -4px 0 -4px var(--tank-barrel);
}
.tank-icon-spg::after {
  display: none;
}
.tank-icon-nation-de { filter: hue-rotate(-10deg); }
.tank-icon-nation-us { filter: hue-rotate(25deg) saturate(0.9); }
.tank-icon-nation-ru { filter: hue-rotate(-30deg) saturate(1.1); }
.tank-icon-nation-gb { filter: hue-rotate(60deg) saturate(0.85); }
.tank-icon-nation-fr { filter: hue-rotate(180deg) saturate(0.9); }
.tank-icon-nation-jp { filter: hue-rotate(35deg) brightness(1.05); }
.tank-icon-nation-neutral { filter: grayscale(0.3); }

.tank-icon-premium {
  box-shadow: 0 0 0 2px rgba(192, 132, 252, 0.55);
  border-radius: 2px;
}
.tank-icon-premium::before {
  box-shadow: inset 0 0 6px rgba(192, 132, 252, 0.35);
}

.tank-icon-sm {
  width: 56px;
  height: 40px;
}
.tank-icon-sm::before { width: 36px; height: 11px; bottom: 8px; }
.tank-icon-sm::after { width: 18px; height: 10px; bottom: 16px; box-shadow: 11px 2px 0 -3px var(--tank-barrel); }

.tank-icon-lg {
  width: 96px;
  height: 68px;
}
.tank-icon-lg::before { width: 58px; height: 17px; bottom: 13px; }
.tank-icon-lg::after { width: 28px; height: 14px; bottom: 26px; box-shadow: 18px 2px 0 -4px var(--tank-barrel); }

/* Result / Menu card */
.menu-card {
  text-align: center;
  padding: 1.75rem 1.4rem;
  max-width: 440px;
  width: 92%;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(245, 158, 11, 0.1), transparent 55%),
    linear-gradient(180deg, rgba(14, 20, 32, 0.98), rgba(6, 10, 16, 0.98));
  border: 1px solid var(--if-border-accent);
  border-radius: var(--if-radius-sm);
  box-shadow: var(--if-shadow);
}
.menu-card h2 {
  font-family: var(--if-display);
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.result-card h2 { font-size: 1.8rem; margin-bottom: 0.4rem; }
.result-card h2.victory { color: #86efac; }
.result-card h2.defeat { color: #f87171; }
.result-xp {
  margin: 0.65rem 0;
  padding: 0.65rem;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.result-dub {
  display: block;
  font-size: 1.05rem;
  color: #e9d5ff;
}
.result-prem {
  font-size: 0.72rem;
  color: #94a3b8;
}
.result-missions {
  display: block;
  font-size: 0.78rem;
  color: #86efac;
  margin-top: 0.25rem;
}
.result-stats {
  margin: 0.75rem 0;
  text-align: left;
  font-size: 0.82rem;
  line-height: 1.9;
  color: #94a3b8;
}
.result-stats strong { color: #e2e8f0; float: right; }
.result-card .btn-secondary { width: 100%; margin-top: 0.45rem; padding: 0.7rem; }

/* Boot loading screen */
.if-boot {
  --boot-accent: #e8a317;
  --boot-accent-hot: #f5c84a;
  --boot-ink: #f4f1ea;
  --boot-muted: rgba(226, 232, 240, 0.72);
  --boot-dim: rgba(148, 163, 184, 0.78);
  --boot-display: "Oswald", "Segoe UI", sans-serif;
  --boot-ui: "Barlow", "Segoe UI", sans-serif;
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: #06080d;
  font-family: var(--boot-ui);
  transition: opacity 0.65s ease, visibility 0.65s ease;
}
.if-boot.hidden {
  display: none;
}
.if-boot.if-boot-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.if-boot-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.if-boot-art {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(1.08) contrast(1.08) brightness(0.92);
  transform-origin: 55% 40%;
  animation: if-boot-ken 18s ease-in-out infinite alternate;
}
@keyframes if-boot-ken {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.08) translate(-1.2%, -0.8%); }
}
.if-boot-wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 8, 13, 0.35) 0%, rgba(6, 8, 13, 0.15) 38%, rgba(6, 8, 13, 0.55) 68%, rgba(6, 8, 13, 0.92) 100%),
    radial-gradient(ellipse 70% 45% at 70% 35%, rgba(232, 163, 23, 0.12), transparent 60%),
    radial-gradient(ellipse 50% 40% at 15% 80%, rgba(56, 90, 120, 0.18), transparent 55%);
  pointer-events: none;
}
.if-boot-horizon {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 34%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 163, 23, 0.55), transparent);
  box-shadow: 0 0 24px rgba(232, 163, 23, 0.35);
  animation: if-boot-horizon 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes if-boot-horizon {
  0%, 100% { opacity: 0.35; transform: scaleX(0.92); }
  50% { opacity: 0.85; transform: scaleX(1); }
}
.if-boot-grain {
  position: absolute;
  inset: 0;
  opacity: 0.07;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.if-boot-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255, 255, 255, 0.015) 3px,
    rgba(255, 255, 255, 0.015) 4px
  );
  pointer-events: none;
  animation: if-boot-scan 7s linear infinite;
}
@keyframes if-boot-scan {
  0% { transform: translateY(0); }
  100% { transform: translateY(4px); }
}
.if-boot-hud {
  position: relative;
  z-index: 2;
  width: min(560px, 92vw);
  margin: 0 auto 7vh;
  padding: 0 0.25rem;
  text-align: left;
  animation: if-boot-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes if-boot-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.if-boot-ops {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--boot-accent);
  margin-bottom: 0.55rem;
}
.if-boot-logo {
  font-family: var(--boot-display);
  font-size: clamp(2.8rem, 11vw, 4.4rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 0.92;
  color: var(--boot-ink);
  margin: 0 0 0.4rem;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55);
}
.if-boot-logo span {
  color: var(--boot-accent-hot);
}
.if-boot-sub {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--boot-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.35rem;
}
.if-boot-progress {
  max-width: 28rem;
}
.if-boot-bar {
  position: relative;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  margin-bottom: 0.55rem;
}
.if-boot-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: translateX(-100%);
  animation: if-boot-sheen 2.2s ease-in-out infinite;
}
@keyframes if-boot-sheen {
  0% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}
.if-boot-bar i {
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #b45309, var(--boot-accent), var(--boot-accent-hot));
  transition: width 0.28s ease-out;
  box-shadow: 0 0 14px rgba(232, 163, 23, 0.55);
}
.if-boot-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.68rem;
  color: var(--boot-dim);
}
#if-boot-status {
  text-align: left;
  flex: 1;
  letter-spacing: 0.04em;
  font-weight: 500;
}
#if-boot-pct {
  font-family: var(--boot-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--boot-accent-hot);
  font-variant-numeric: tabular-nums;
}
.if-boot-players {
  margin: 0.65rem 0 0;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #86efac;
  font-variant-numeric: tabular-nums;
  min-height: 1em;
}
.if-boot-players:empty { display: none; }
.if-boot-tip {
  margin-top: 1.15rem;
  max-width: 28rem;
  font-size: 0.72rem;
  color: rgba(148, 163, 184, 0.9);
  line-height: 1.5;
  min-height: 2.6em;
  border-left: 2px solid rgba(232, 163, 23, 0.45);
  padding-left: 0.7rem;
}
.if-boot-credit {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 1.1rem;
  margin: 0;
  text-align: center;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.45;
}
@media (max-width: 560px) {
  .if-boot-hud {
    margin-bottom: 5.5vh;
    text-align: left;
  }
  .if-boot-logo {
    letter-spacing: 0.05em;
  }
  .if-boot-horizon {
    bottom: 42%;
  }
}

/* Boot — Tag der Deutschen Einheit (Schwarz · Rot · Gold) */
.if-boot.if-boot-eu {
  --boot-accent: #dd0000;
  --boot-accent-hot: #ffce00;
  --boot-ink: #fef3c7;
  --boot-muted: rgba(254, 243, 199, 0.78);
  --boot-dim: rgba(226, 232, 240, 0.72);
  background: #0a0a0a;
}
.if-boot.if-boot-eu .if-boot-stage::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  z-index: 3;
  background: linear-gradient(180deg, #1a1a1a 0%, #1a1a1a 33.33%, #c8102e 33.33%, #c8102e 66.66%, #ffce00 66.66%, #ffce00 100%);
  box-shadow: 4px 0 24px rgba(200, 16, 46, 0.25);
  pointer-events: none;
}
.if-boot.if-boot-eu .if-boot-wash {
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.4) 0%, rgba(10, 10, 10, 0.18) 36%, rgba(10, 10, 10, 0.58) 68%, rgba(10, 10, 10, 0.94) 100%),
    linear-gradient(90deg, rgba(26, 26, 26, 0.45) 0%, rgba(200, 16, 46, 0.22) 48%, rgba(255, 206, 0, 0.16) 100%),
    radial-gradient(ellipse 70% 45% at 72% 32%, rgba(221, 0, 0, 0.18), transparent 58%),
    radial-gradient(ellipse 45% 35% at 18% 78%, rgba(255, 206, 0, 0.1), transparent 55%);
}
.if-boot.if-boot-eu .if-boot-horizon {
  background: linear-gradient(90deg, transparent, #1a1a1a 18%, #c8102e 50%, #ffce00 82%, transparent);
  box-shadow: 0 0 28px rgba(200, 16, 46, 0.35), 0 0 18px rgba(255, 206, 0, 0.2);
}
.if-boot.if-boot-eu .if-boot-bar i {
  background: linear-gradient(90deg, #1a1a1a 0%, #c8102e 48%, #ffce00 100%);
  box-shadow: 0 0 14px rgba(200, 16, 46, 0.45), 0 0 10px rgba(255, 206, 0, 0.25);
}
.if-boot.if-boot-eu .if-boot-tip {
  border-left-color: rgba(255, 206, 0, 0.55);
  color: rgba(254, 243, 199, 0.88);
}
.if-boot.if-boot-eu .if-boot-logo span {
  text-shadow: 0 0 18px rgba(255, 206, 0, 0.25);
}

/* Match loading — Tag der Deutschen Einheit */
.match-loading.match-loading-eu {
  background: #0a0a0a;
}
.match-loading.match-loading-eu .match-loading-art-shade {
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.4) 0%, rgba(10, 10, 10, 0.88) 55%, rgba(10, 10, 10, 0.96) 100%),
    linear-gradient(90deg, rgba(26, 26, 26, 0.35) 0%, rgba(200, 16, 46, 0.18) 50%, rgba(255, 206, 0, 0.12) 100%),
    radial-gradient(ellipse 80% 60% at 50% 30%, transparent 20%, rgba(10, 10, 10, 0.65) 100%);
}
.match-loading.match-loading-eu .match-loading-inner {
  border-color: rgba(255, 206, 0, 0.28);
  background:
    linear-gradient(135deg, rgba(26, 26, 26, 0.82), rgba(90, 10, 10, 0.55), rgba(50, 40, 8, 0.45));
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(200, 16, 46, 0.15);
}
.match-loading.match-loading-eu .match-loading-mode {
  color: #fcd34d;
}
.match-loading.match-loading-eu .match-loading-map {
  color: #fef3c7;
}
.match-loading.match-loading-eu .load-objective {
  color: #ffce00;
}
.match-loading.match-loading-eu::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  z-index: 2;
  background: linear-gradient(180deg, #1a1a1a 0%, #1a1a1a 33.33%, #c8102e 33.33%, #c8102e 66.66%, #ffce00 66.66%, #ffce00 100%);
  pointer-events: none;
}

/* ===== Einheitstag Trailer (Loading) ===== */
.eu-trailer {
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #050505;
  color: #fef3c7;
}
.eu-trailer.hidden { display: none; }
.eu-trailer-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.eu-trailer-flag {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      #1a1a1a 0%, #1a1a1a 33.2%,
      #c8102e 33.2%, #c8102e 66.4%,
      #ffce00 66.4%, #ffce00 100%);
  opacity: 0.22;
  transform: scale(1.08);
  filter: saturate(1.05) contrast(1.05);
  animation: eu-trailer-flag-breathe 6s ease-in-out infinite;
}
@keyframes eu-trailer-flag-breathe {
  0%, 100% { transform: scale(1.06); opacity: 0.18; }
  50% { transform: scale(1.12); opacity: 0.28; }
}
.eu-trailer-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 42%, transparent 10%, rgba(0, 0, 0, 0.55) 70%, rgba(0, 0, 0, 0.92) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, transparent 35%, transparent 65%, rgba(0, 0, 0, 0.55) 100%);
}
.eu-trailer-beams {
  position: absolute;
  inset: -20%;
  background:
    conic-gradient(from 210deg at 50% 55%,
      transparent 0deg,
      rgba(255, 206, 0, 0.07) 18deg,
      transparent 36deg,
      rgba(200, 16, 46, 0.08) 54deg,
      transparent 72deg,
      rgba(255, 255, 255, 0.04) 90deg,
      transparent 120deg);
  animation: eu-trailer-beams 14s linear infinite;
  opacity: 0.85;
  mix-blend-mode: screen;
}
@keyframes eu-trailer-beams {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.eu-trailer-sparks {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.eu-trailer-sparks i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffce00;
  box-shadow: 0 0 10px #ffce00, 0 0 18px rgba(200, 16, 46, 0.7);
  opacity: 0;
  animation: eu-trailer-spark 1.4s ease-out forwards;
}
@keyframes eu-trailer-spark {
  0% { opacity: 0; transform: translateY(8px) scale(0.4); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-90px) scale(0.15); }
}
.eu-trailer-letterbox {
  position: absolute;
  left: 0;
  right: 0;
  height: 9vh;
  background: #000;
  z-index: 2;
}
.eu-trailer-letterbox-top { top: 0; }
.eu-trailer-letterbox-bottom { bottom: 0; }
.eu-trailer-hud {
  position: absolute;
  top: calc(9vh + 0.7rem);
  left: 1.5rem;
  right: 1.5rem;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.eu-trailer-tag {
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  font-weight: 800;
  color: #ffce00;
  text-transform: uppercase;
  white-space: nowrap;
}
.eu-trailer-progress {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
}
.eu-trailer-progress i,
#eu-trailer-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #1a1a1a 0%, #c8102e 45%, #ffce00 100%);
  box-shadow: 0 0 10px rgba(255, 206, 0, 0.45);
  transition: width 0.4s ease;
}
.eu-trailer-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: min(40rem, 92vw);
  padding: 1.5rem 1.25rem;
  opacity: 0;
  transform: translateY(22px) scale(0.97);
}
.eu-trailer-content.eu-trailer-in {
  animation: eu-trailer-content-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes eu-trailer-content-in {
  from { opacity: 0; transform: translateY(22px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.eu-trailer-eyebrow {
  margin: 0 0 0.65rem;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #fcd34d;
  font-weight: 700;
}
.eu-trailer-title {
  margin: 0 0 0.85rem;
  font-size: clamp(2rem, 7vw, 3.8rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.02;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 0 28px rgba(200, 16, 46, 0.55),
    0 0 48px rgba(255, 206, 0, 0.28),
    0 2px 0 rgba(0, 0, 0, 0.45);
}
.eu-trailer-line {
  margin: 0 auto;
  max-width: 32rem;
  font-size: clamp(0.92rem, 2.2vw, 1.12rem);
  line-height: 1.55;
  color: rgba(254, 243, 199, 0.88);
}
.eu-trailer-skip {
  position: fixed;
  bottom: max(1.1rem, calc(9vh + 0.45rem));
  right: 1.35rem;
  z-index: 5;
  appearance: none;
  border: 1px solid rgba(255, 206, 0, 0.45);
  background: rgba(10, 10, 10, 0.72);
  color: #ffce00;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.55rem 0.95rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.eu-trailer-skip:hover {
  background: rgba(200, 16, 46, 0.35);
  border-color: #ffce00;
  color: #fff;
  transform: translateY(-1px);
}
.eu-trailer-skip:focus-visible {
  outline: 2px solid #ffce00;
  outline-offset: 3px;
}

/* Moods */
.eu-trailer.mood-dawn .eu-trailer-flag { opacity: 0.16; filter: brightness(0.85); }
.eu-trailer.mood-dawn .eu-trailer-title {
  text-shadow: 0 0 24px rgba(255, 255, 255, 0.2), 0 0 40px rgba(255, 206, 0, 0.2);
}
.eu-trailer.mood-charge .eu-trailer-flag { opacity: 0.28; animation-duration: 3.5s; }
.eu-trailer.mood-charge .eu-trailer-beams { opacity: 1; }
.eu-trailer.mood-fire .eu-trailer-flag {
  opacity: 0.34;
  filter: saturate(1.25) brightness(1.05);
}
.eu-trailer.mood-fire .eu-trailer-title {
  color: #fff;
  text-shadow: 0 0 20px #c8102e, 0 0 48px rgba(255, 206, 0, 0.45);
}
.eu-trailer.mood-gold .eu-trailer-flag { opacity: 0.3; }
.eu-trailer.mood-gold .eu-trailer-title {
  color: #ffce00;
  text-shadow: 0 0 28px rgba(255, 206, 0, 0.55), 0 0 12px rgba(200, 16, 46, 0.4);
}
.eu-trailer.mood-finale .eu-trailer-flag {
  opacity: 0.38;
  animation-duration: 2.4s;
}
.eu-trailer.mood-finale .eu-trailer-title {
  letter-spacing: 0.14em;
  text-shadow: 0 0 32px rgba(200, 16, 46, 0.7), 0 0 60px rgba(255, 206, 0, 0.5);
}
.eu-trailer.mood-finale .eu-trailer-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 48%, rgba(255, 206, 0, 0.18), transparent 55%);
  animation: eu-trailer-finale-pulse 1.2s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes eu-trailer-finale-pulse {
  from { opacity: 0.45; }
  to { opacity: 1; }
}

.if-boot.if-boot-trailer {
  filter: brightness(0.35) saturate(0.7);
}

.btn-eu-trailer {
  font-size: 0.72rem !important;
  letter-spacing: 0.08em;
  border-color: rgba(255, 206, 0, 0.4) !important;
  color: #ffce00 !important;
}

@media (max-width: 640px) {
  .eu-trailer-hud { left: 0.85rem; right: 0.85rem; }
  .eu-trailer-skip {
    left: 0.85rem;
    right: 0.85rem;
    text-align: center;
  }
  .eu-trailer-letterbox { height: 7vh; }
}

/* Match loading screen */
.match-loading {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: #060910;
  pointer-events: auto;
  overflow: hidden;
}
.match-loading.hidden { display: none; }

.match-loading-art-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.match-loading-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0.55;
  filter: saturate(1.08);
}
.match-loading-art-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 9, 16, 0.35) 0%, rgba(6, 9, 16, 0.88) 55%, rgba(6, 9, 16, 0.96) 100%),
    radial-gradient(ellipse 80% 60% at 50% 30%, transparent 20%, rgba(6, 9, 16, 0.65) 100%);
}

.match-loading-inner {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.75rem;
  background: rgba(8, 12, 20, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
}

.match-loading-head { text-align: center; }
.load-server-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #86efac;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 999px;
}
.load-server-meta::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
}
.load-player-pop {
  margin-bottom: 0.35rem;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}
.load-player-pop:empty { display: none; }
.load-mm-meta {
  display: block;
  margin: 0.2rem auto 0.35rem;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #94a3b8;
}
.load-objective {
  margin: 0 0 0.35rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #fbbf24;
  text-align: center;
}
.match-loading-mode {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.35rem;
}
.match-loading-map {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #f1f5f9;
  text-transform: uppercase;
}
.match-loading-mapdesc {
  font-size: 0.78rem;
  color: #94a3b8;
  margin-top: 0.25rem;
}

.match-loading-body {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 1rem;
  align-items: stretch;
}

.match-loading-mapview {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.map-preview {
  position: relative;
  flex: 1;
  min-height: 180px;
  border: 2px solid rgba(245, 158, 11, 0.35);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.45), 0 8px 32px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.map-preview[data-map="steppes"] {
  background:
    radial-gradient(ellipse at 30% 70%, rgba(90, 120, 60, 0.45), transparent 55%),
    linear-gradient(165deg, #5a7048 0%, #3a4a30 42%, #2a3820 100%);
}
.map-preview[data-map="enclave"] {
  background:
    linear-gradient(120deg, rgba(0,0,0,0.25) 0 18%, transparent 19%),
    linear-gradient(165deg, #585040 0%, #3a3830 50%, #242018 100%);
}
.map-preview[data-map="highland"] {
  background:
    radial-gradient(circle at 70% 35%, rgba(120, 130, 110, 0.4), transparent 45%),
    linear-gradient(165deg, #607060 0%, #404840 45%, #283028 100%);
}
.map-preview[data-map="frontline"] {
  background:
    linear-gradient(90deg, transparent 46%, rgba(80, 90, 60, 0.5) 48% 52%, transparent 54%),
    linear-gradient(165deg, #506048 0%, #384438 50%, #283428 100%);
}
.map-preview[data-map="ravine"] {
  background:
    linear-gradient(90deg, #243028 0%, #3a4840 38%, #2a3830 62%, #1e2820 100%);
}
.map-preview[data-map="urban"] {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.18) 0 12px, transparent 12px 28px),
    linear-gradient(165deg, #5a5a64 0%, #3a3a40 45%, #222228 100%);
}
.map-preview[data-map="tundra"] {
  background:
    radial-gradient(ellipse at 50% 80%, rgba(255,255,255,0.35), transparent 50%),
    linear-gradient(165deg, #c0d0d8 0%, #8898a0 48%, #607080 100%);
}
.map-preview[data-map="industrial"] {
  background:
    repeating-linear-gradient(0deg, rgba(255,200,80,0.06) 0 2px, transparent 2px 18px),
    linear-gradient(165deg, #505048 0%, #353530 50%, #1e1e18 100%);
}
.map-preview[data-map="riverford"] {
  background:
    linear-gradient(90deg, #3a4a34 0%, #3a4a34 42%, #3a6878 46%, #3a6878 54%, #3a4a34 58%, #3a4a34 100%),
    linear-gradient(165deg, #5a7048 0%, #3a4a34 50%, #2a3828 100%);
  background-blend-mode: normal;
}

.map-preview-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 12% 12%;
  opacity: 0.6;
}

.map-preview-zone {
  position: absolute;
  top: 8%;
  bottom: 8%;
  width: 22%;
  border-radius: 2px;
  opacity: 0.35;
}
.map-preview-zone-blue {
  left: 4%;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.5), transparent);
  border-left: 3px solid #38bdf8;
}
.map-preview-zone-red {
  right: 4%;
  background: linear-gradient(-90deg, rgba(248, 113, 113, 0.5), transparent);
  border-right: 3px solid #f87171;
}

.map-preview-objs {
  position: absolute;
  inset: 0;
}
.map-preview-objs span {
  position: absolute;
  background: rgba(20, 24, 28, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.map-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.68rem;
  color: #94a3b8;
}
.map-preview-meta span {
  padding: 0.25rem 0.5rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
#load-premium {
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.35);
}

.match-loading-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.65rem;
  align-items: start;
}

.load-team {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.65rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  min-height: 100%;
}
.load-team-blue { border-top: 3px solid #38bdf8; }
.load-team-red { border-top: 3px solid #f87171; }

.load-team-head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.load-team-label {
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
}
.load-team-head strong {
  font-size: 0.78rem;
  color: #e2e8f0;
}

.load-vs {
  align-self: center;
  font-size: 1.1rem;
  font-weight: 900;
  color: #475569;
  letter-spacing: 0.08em;
  padding-top: 2rem;
}

.load-roster {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.load-roster-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.35rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
}
.load-roster-row.is-player {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.35);
}
.load-roster-info {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}
.load-roster-name {
  font-size: 0.68rem;
  font-weight: 700;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.load-roster-meta {
  font-size: 0.55rem;
  color: #64748b;
}
.load-hp-bar {
  height: 4px;
  margin-top: 0.2rem;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.load-hp-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #15803d, #86efac);
}
.load-roster-hp {
  font-size: 0.52rem;
  color: #86efac;
  font-weight: 700;
  margin-top: 0.1rem;
}

.match-loading-foot {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-top: 0.25rem;
}
.load-tip {
  font-size: 0.68rem;
  color: #94a3b8;
  font-style: italic;
  text-align: center;
  min-height: 1.2em;
}
.load-bar-wrap {
  height: 6px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.load-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #d97706, #fbbf24, #f59e0b);
  transition: width 0.18s ease-out;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.45);
}
.load-status {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
  text-align: center;
}

@media (max-width: 720px) {
  .match-loading-body {
    grid-template-columns: 1fr;
  }
  .match-loading-teams {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .load-vs {
    padding: 0;
    text-align: center;
  }
}

/* HUD */
#hud.hidden { display: none; }
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }

.hud-top {
  position: absolute; top: 1rem; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 1.5rem;
}

.hud-tank-name {
  position: absolute; top: 1rem; left: 1rem;
  font-size: 0.72rem; letter-spacing: 0.1em;
  color: #94a3b8; text-transform: uppercase;
}
.hud-match-meta {
  position: absolute;
  top: 2.15rem;
  left: 1rem;
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #22c55e;
  font-variant-numeric: tabular-nums;
}
.hud-match-meta:empty { display: none; }

.hud-objective {
  position: absolute;
  top: 4.2rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(420px, 90vw);
  padding: 0.22rem 0.65rem;
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: center;
  color: #fde68a;
  background: rgba(8, 12, 20, 0.72);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 999px;
  pointer-events: none;
}
.hud-objective:empty { display: none; }

.hud-respawn {
  position: absolute;
  left: 50%;
  bottom: 28%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.65rem 1.2rem;
  background: rgba(8, 12, 20, 0.88);
  border: 1px solid rgba(248, 113, 113, 0.45);
  border-radius: var(--if-radius-sm);
  pointer-events: none;
  animation: respawnPulse 1.2s ease infinite;
}
.hud-respawn.hidden { display: none; }
.hud-respawn-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #f87171;
}
.hud-respawn strong {
  font-size: 2rem;
  font-weight: 900;
  color: #fef2f2;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
@keyframes respawnPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(248, 113, 113, 0); }
  50% { box-shadow: 0 0 18px rgba(248, 113, 113, 0.35); }
}

.load-roster-row.is-platoon {
  border-left: 2px solid rgba(251, 191, 36, 0.55);
}

.hud-team { font-size: 1.8rem; font-weight: 800; }
.hud-alive {
  position: absolute;
  top: 2.35rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}
.team-blue { color: #38bdf8; }
.team-red { color: #f87171; }
.hud-vs { color: #475569; font-size: 1.2rem; }
.hud-timer { font-size: 1rem; color: #94a3b8; font-variant-numeric: tabular-nums; }
.hud-map-name {
  position: absolute;
  top: 3.1rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.hud-tickets {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.5rem;
  background: rgba(8, 12, 20, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 4px;
}
.hud-tickets.hidden { display: none; }
.hud-ticket {
  position: relative;
  width: 52px;
  height: 6px;
  background: rgba(30, 41, 59, 0.9);
  border-radius: 3px;
  overflow: hidden;
}
.hud-ticket i {
  display: block;
  height: 100%;
  width: 100%;
  transition: width 0.35s ease;
}
.hud-ticket-blue i { background: linear-gradient(90deg, #0284c7, #38bdf8); }
.hud-ticket-red i { background: linear-gradient(90deg, #dc2626, #f87171); }
.hud-ticket span {
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.52rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #cbd5e1;
}
.hud-ticket-label {
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #64748b;
}

.hud-capture-bar {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}
.hud-capture-bar.hidden { display: none; }
.cap-zone {
  position: relative;
  width: 36px;
  height: 22px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 3px;
  overflow: hidden;
  text-align: center;
}
.cap-zone span {
  position: relative;
  z-index: 1;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 20px;
  color: #e2e8f0;
}
.cap-zone i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: #94a3b8;
  transition: width 0.25s ease;
}
.cap-zone-blue { border-color: rgba(56, 189, 248, 0.45); }
.cap-zone-blue i { background: #38bdf8; }
.cap-zone-red { border-color: rgba(248, 113, 113, 0.45); }
.cap-zone-red i { background: #f87171; }

.hud-battlelog {
  position: absolute;
  left: 1rem;
  bottom: 6.5rem;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  pointer-events: none;
}
.hud-battlelog-line {
  padding: 0.2rem 0.45rem;
  font-size: 0.58rem;
  font-weight: 600;
  color: #cbd5e1;
  background: rgba(8, 12, 20, 0.72);
  border-left: 2px solid rgba(148, 163, 184, 0.35);
  border-radius: 0 3px 3px 0;
  animation: blFadeIn 0.2s ease;
}
.hud-bl-cmd { border-left-color: #38bdf8; color: #bae6fd; }
.hud-bl-ping { border-left-color: #fbbf24; color: #fde68a; }
.hud-bl-streak { border-left-color: #f59e0b; color: #fcd34d; }
.hud-bl-system { border-left-color: #64748b; color: #94a3b8; font-style: italic; }
.hud-bl-ally { border-left-color: #38bdf8; color: #bae6fd; }
.hud-bl-enemy { border-left-color: #f87171; color: #fecaca; }
.hud-bl-death { border-left-color: #ef4444; color: #fca5a5; font-weight: 700; }
@keyframes blFadeIn {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: none; }
}

.hud-quickcmds {
  position: absolute;
  right: 1rem;
  bottom: 6.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  pointer-events: none;
}
.hud-qcmd {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.54rem;
  color: #64748b;
  padding: 0.15rem 0.35rem;
  background: rgba(8, 12, 20, 0.65);
  border-radius: 3px;
}
.hud-qcmd kbd {
  font-size: 0.5rem;
  padding: 0.1rem 0.3rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  color: #94a3b8;
}
.hud-qcmd.flash {
  background: rgba(56, 189, 248, 0.25);
  color: #e0f2fe;
  transform: scale(1.05);
  transition: transform 0.15s ease, background 0.15s ease;
}
.hud-qcmd-ping { color: #94a3b8; }

.hud-damage-panel {
  position: absolute;
  top: 3.5rem;
  right: 1rem;
  min-width: 118px;
  padding: 0.45rem 0.55rem;
  background: rgba(8, 12, 20, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 4px;
  font-size: 0.62rem;
  pointer-events: none;
}
.hud-dmg-row {
  display: flex;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.12rem 0;
  color: #94a3b8;
}
.hud-dmg-row strong {
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}
.hud-dmg-row:first-child strong { color: #fde68a; }

.hud-consumables {
  position: absolute;
  bottom: 5.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  pointer-events: auto;
}
.hud-cons-btn {
  font: inherit;
  font-size: 0.62rem;
  padding: 0.32rem 0.5rem;
  background: rgba(8, 12, 20, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #e2e8f0;
  border-radius: 3px;
  cursor: pointer;
}
.hud-cons-btn kbd {
  font-size: 0.55rem;
  color: #fbbf24;
  margin-right: 0.2rem;
}
.hud-cons-btn.used { opacity: 0.45; }
.hud-cons-btn.passive { border-color: rgba(96, 165, 250, 0.35); color: #93c5fd; }

.hud-ammo {
  position: absolute;
  bottom: 8.1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.35rem;
  pointer-events: auto;
  z-index: 4;
}
.hud-ammo-btn {
  font: inherit;
  min-width: 3.4rem;
  padding: 0.28rem 0.42rem;
  background: rgba(8, 12, 20, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: #e2e8f0;
  border-radius: 3px;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.28rem;
  row-gap: 0.05rem;
  align-items: center;
}
.hud-ammo-btn kbd {
  grid-row: 1 / span 2;
  font-size: 0.55rem;
  color: var(--ammo-col, #fbbf24);
}
.hud-ammo-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ammo-col, #e2e8f0);
}
.hud-ammo-count {
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  color: #cbd5e1;
}
.hud-ammo-btn.selected {
  border-color: var(--ammo-col, #fbbf24);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ammo-col, #fbbf24) 45%, transparent);
  background: rgba(20, 28, 40, 0.95);
}
.hud-ammo-btn.empty {
  opacity: 0.35;
  cursor: default;
}

.wot-mini-event-pill {
  flex: 1 1 100%;
  margin-top: 0.25rem;
  padding: 0.28rem 0.45rem;
  font-size: 0.58rem;
  color: #fde68a;
  background: rgba(120, 80, 20, 0.25);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 3px;
  text-align: center;
}

.wot-carousel-wrap.compare-pick {
  outline: 2px dashed rgba(251, 191, 36, 0.55);
  outline-offset: 2px;
  border-radius: var(--if-radius-sm);
  animation: comparePickPulse 1.4s ease infinite;
}
@keyframes comparePickPulse {
  0%, 100% { outline-color: rgba(251, 191, 36, 0.35); }
  50% { outline-color: rgba(251, 191, 36, 0.75); }
}
.wot-carousel-item.compare-candidate {
  border-color: rgba(251, 191, 36, 0.45);
  cursor: crosshair;
}
.wot-carousel-item.compare-candidate:hover {
  border-color: #fbbf24;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.35);
}
.wot-carousel-item.compare-selected {
  border-color: #f87171;
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.4);
}

.wot-loadout-summary {
  margin-bottom: 0.5rem;
  padding: 0.45rem 0.5rem;
  background: rgba(56, 189, 248, 0.06);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: var(--if-radius-sm);
}
.wot-loadout-summary-inner { display: flex; flex-direction: column; gap: 0.35rem; }
.wot-loadout-summary-tank {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.wot-loadout-summary-tank strong { font-size: 0.72rem; color: #e2e8f0; }
.wot-loadout-summary-tank span { font-size: 0.55rem; color: #64748b; }
.wot-loadout-bonus-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.wot-loadout-bonus-list li {
  font-size: 0.52rem;
  padding: 0.15rem 0.35rem;
  color: #86efac;
  background: rgba(34, 197, 94, 0.1);
  border-radius: 3px;
}
.wot-loadout-summary-empty {
  margin: 0;
  font-size: 0.52rem;
  color: #64748b;
  font-style: italic;
}
.wot-loadout-rec {
  margin-top: 0.35rem;
  padding: 0.45rem 0.5rem;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: var(--if-radius-sm);
}
.wot-loadout-rec.is-match {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.3);
}
.wot-loadout-rec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.2rem;
}
.wot-loadout-rec-head strong {
  font-size: 0.62rem;
  color: #fbbf24;
}
.wot-loadout-rec.is-match .wot-loadout-rec-head strong { color: #86efac; }
.wot-loadout-rec-badge {
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1rem 0.3rem;
  color: #78350f;
  background: rgba(251, 191, 36, 0.85);
  border-radius: 2px;
}
.wot-loadout-rec-badge.ok {
  color: #14532d;
  background: rgba(134, 239, 172, 0.9);
}
.wot-loadout-rec-reason {
  margin: 0 0 0.3rem;
  font-size: 0.55rem;
  color: #94a3b8;
  line-height: 1.35;
}
.wot-loadout-rec-list {
  margin: 0 0 0.35rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.wot-loadout-rec-list li {
  font-size: 0.52rem;
  padding: 0.12rem 0.3rem;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.45);
  border-radius: 3px;
}
.wot-loadout-rec-list li.on {
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
}
.wot-loadout-rec-list li.miss { color: #fca5a5; }
.wot-loadout-rec-note {
  margin: 0 0 0.35rem;
  font-size: 0.5rem;
  color: #94a3b8;
}
.wot-loadout-rec .btn-apply-loadout-rec {
  font-size: 0.58rem;
  padding: 0.28rem 0.5rem;
}
.wot-loadout-section { margin-bottom: 0.55rem; }
.wot-loadout-slot-count {
  font-weight: 500;
  color: #475569;
  margin-left: 0.25rem;
}
.wot-module-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  margin-bottom: 0.45rem;
}
.wot-module-card {
  padding: 0.4rem 0.35rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--if-radius-sm);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.wot-module-card.filled { border-color: rgba(56, 189, 248, 0.35); }
.wot-module-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wot-module-card-slot { font-size: 0.48rem; color: #64748b; letter-spacing: 0.08em; }
.wot-module-card-icon { font-size: 1rem; }
.wot-module-card-icon.empty { color: #475569; opacity: 0.6; }
.wot-module-card-desc {
  margin: 0;
  font-size: 0.48rem;
  color: #94a3b8;
  line-height: 1.3;
  min-height: 1.6em;
}
.wot-module-card-desc.muted { color: #64748b; font-style: italic; }
.wot-module-shop-details { margin-top: 0.35rem; }
.wot-module-shop-toggle {
  font-size: 0.58rem;
  font-weight: 600;
  color: #94a3b8;
  cursor: pointer;
  list-style: none;
  padding: 0.3rem 0;
}
.wot-module-shop-toggle::-webkit-details-marker { display: none; }
.wot-module-shop-details[open] .wot-module-shop-toggle { color: #fbbf24; }
.wot-module-buy-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.wot-module-buy-head span { font-size: 1rem; }
.wot-cons-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
}
.wot-cons-card {
  padding: 0.4rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--if-radius-sm);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.wot-cons-card.filled { border-color: rgba(245, 158, 11, 0.35); }
.wot-cons-card.empty-stock { opacity: 0.75; border-color: rgba(248, 113, 113, 0.35); }
.wot-cons-card-body {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  min-height: 2.5rem;
}
.wot-cons-card-body strong {
  display: block;
  font-size: 0.62rem;
  color: #e2e8f0;
}
.wot-cons-card-body span {
  display: block;
  font-size: 0.48rem;
  color: #64748b;
  margin-top: 0.08rem;
}
.wot-cons-icon { font-size: 1.25rem; line-height: 1; }
.wot-cons-icon.empty { color: #475569; }
.wot-cons-key kbd {
  font-size: 0.58rem;
  padding: 0.12rem 0.35rem;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 3px;
  color: #fde68a;
}

.wot-loadout-tank {
  font-size: 0.62rem;
  color: #94a3b8;
  margin-bottom: 0.35rem;
}
.wot-module-select, .wot-cons-select {
  width: 100%;
  font: inherit;
  font-size: 0.58rem;
  padding: 0.28rem 0.35rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  border-radius: 3px;
}
.wot-module-shop {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.35rem;
  max-height: 140px;
  overflow-y: auto;
}
.wot-module-head-sm { font-size: 0.58rem; color: #64748b; margin: 0.35rem 0 0.2rem; }
.wot-loadout-hint { font-size: 0.55rem; color: #64748b; margin-top: 0.35rem; }
.wot-cons-slot { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.3rem; }
.wot-cons-key {
  width: 1.1rem;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: #fbbf24;
}
.wot-credit-item.owned { opacity: 0.75; }

.wot-tank-stats-card {
  padding: 0.65rem;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}
.wot-tank-stats-card h4 { margin: 0 0 0.4rem; font-size: 0.78rem; color: #e2e8f0; }
.wot-tank-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.35rem;
  font-size: 0.62rem;
}
.wot-tank-stats-grid span { display: block; color: #64748b; }
.wot-tank-stats-grid strong { color: #e2e8f0; }

.wot-wishlist-box {
  padding: 0.55rem 0.6rem;
  margin-bottom: 0.45rem;
  background: rgba(96, 165, 250, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 4px;
}
.wot-wishlist-box h4 { margin: 0 0 0.25rem; font-size: 0.68rem; color: #93c5fd; }
.wot-wishlist-desc { font-size: 0.58rem; color: #94a3b8; margin: 0 0 0.35rem; }
.wot-wishlist-top {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.6rem;
  color: #cbd5e1;
}
.wot-wishlist-top li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}
.wot-shop-soon-card.voted {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(96, 165, 250, 0.1);
  cursor: pointer;
}
.wot-shop-soon-card[data-wish-nation] { cursor: pointer; }
.wot-shop-soon-card[data-wish-nation]:hover { border-color: rgba(251, 191, 36, 0.45); }

.hud-bottom {
  position: absolute; bottom: 1.5rem; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 2rem;
}

.hud-health { min-width: 200px; }
.hud-health-bar {
  height: 8px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 0.25rem;
}
.hud-health-fill {
  height: 100%;
  background: linear-gradient(90deg, #15803d, #86efac);
  transition: width 0.2s;
}
#health-text { font-size: 0.75rem; color: #94a3b8; }

.hud-reload { text-align: center; min-width: 70px; }
.hud-zoom {
  text-align: center;
  min-width: 52px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #cbd5e1;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  background: rgba(8, 12, 20, 0.55);
  user-select: none;
}
.hud-zoom-max {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.45);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.15);
}
.reload-ring {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.15);
  margin: 0 auto 0.25rem;
}
#reload-text { font-size: 0.65rem; color: #64748b; }
.hud-kills { font-size: 0.85rem; color: #94a3b8; }
.hud-kills strong { color: #e2e8f0; font-size: 1.1rem; }

.hud-controls {
  position: absolute;
  left: 1rem;
  bottom: 5.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  max-width: 320px;
  padding: 0.45rem 0.55rem;
  background: rgba(8, 12, 20, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.58rem;
  color: #94a3b8;
  letter-spacing: 0.04em;
}
.hud-controls kbd {
  display: inline-block;
  min-width: 1.1em;
  padding: 0.1rem 0.3rem;
  margin-right: 0.15rem;
  font-family: inherit;
  font-size: 0.58rem;
  font-weight: 700;
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2px;
}

#minimap {
  position: absolute; top: 1rem; right: 1rem;
  border: 1px solid rgba(245, 158, 11, 0.25);
  background: rgba(8, 12, 20, 0.8);
}

.crosshair {
  position: absolute; top: 50%; left: 50%;
  width: 24px; height: 24px;
  transform: translate(-50%, -50%);
}
.crosshair span { position: absolute; background: rgba(226, 232, 240, 0.75); }
.crosshair span:nth-child(1) { top: 0; left: 50%; width: 1px; height: 6px; transform: translateX(-50%); }
.crosshair span:nth-child(2) { bottom: 0; left: 50%; width: 1px; height: 6px; transform: translateX(-50%); }
.crosshair span:nth-child(3) { left: 0; top: 50%; height: 1px; width: 6px; transform: translateY(-50%); }
.crosshair span:nth-child(4) { right: 0; top: 50%; height: 1px; width: 6px; transform: translateY(-50%); }
.crosshair-dot {
  position: absolute; top: 50%; left: 50%;
  width: 3px; height: 3px;
  background: rgba(251, 191, 36, 0.95);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.killfeed {
  position: absolute; top: 3.5rem; right: 1rem;
  display: flex; flex-direction: column; gap: 0.25rem;
  max-width: 280px; font-size: 0.62rem; text-align: right;
}
.killfeed > div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  flex-wrap: wrap;
  padding: 0.28rem 0.45rem;
  background: rgba(8, 12, 20, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--if-radius-sm);
  animation: killfeed-in 0.25s ease;
}
@keyframes killfeed-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}
.killfeed .kf-blue { color: #7dd3fc; font-weight: 700; }
.killfeed .kf-red { color: #fca5a5; font-weight: 700; }
.killfeed .kf-sep { color: #475569; font-size: 0.55rem; }
.killfeed .kf-tank { color: #64748b; font-size: 0.55rem; }

.hud-squad {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  width: 168px;
  max-height: 52vh;
  overflow: auto;
  pointer-events: none;
}
.hud-squad-row {
  display: grid;
  grid-template-columns: 1.4rem 1fr auto;
  gap: 0.3rem;
  align-items: center;
  padding: 0.32rem 0.4rem;
  background: rgba(8, 12, 20, 0.78);
  border: 1px solid rgba(56, 189, 248, 0.15);
  border-left: 2px solid rgba(56, 189, 248, 0.45);
  border-radius: var(--if-radius-sm);
  backdrop-filter: blur(4px);
}
.hud-squad-row.is-player {
  border-color: rgba(245, 158, 11, 0.35);
  border-left-color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
}
.hud-squad-row.dead { opacity: 0.45; }
.hud-squad-role { font-size: 0.72rem; text-align: center; }
.hud-squad-info { min-width: 0; }
.hud-squad-name {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-squad-tank {
  display: block;
  font-size: 0.5rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-squad-hp {
  height: 3px;
  margin-top: 0.15rem;
  background: rgba(51, 65, 85, 0.7);
  border-radius: 2px;
  overflow: hidden;
}
.hud-squad-hp i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #4ade80);
}
.hud-squad-row.dead .hud-squad-hp i { background: #475569; width: 0 !important; }
.hud-squad-k {
  font-size: 0.58rem;
  font-weight: 800;
  color: #94a3b8;
}
.hud-squad-platoon {
  margin-left: 0.2rem;
  color: #fbbf24;
  font-size: 0.62rem;
}
.hud-squad-respawn {
  font-size: 0.56rem;
  font-weight: 800;
  color: #f87171;
  font-variant-numeric: tabular-nums;
}
.hud-squad-dead-label {
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #64748b;
}

.hud-scoreboard {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 8, 14, 0.72);
  backdrop-filter: blur(4px);
  pointer-events: auto;
  z-index: 12;
}
.hud-scoreboard.hidden { display: none; }
.hud-scoreboard-inner {
  width: min(640px, 92vw);
  max-height: 80vh;
  overflow: auto;
  background: rgba(10, 14, 22, 0.95);
  border: 1px solid var(--if-border-accent);
  border-radius: var(--if-radius);
  box-shadow: var(--if-shadow);
}
.hud-scoreboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e2e8f0;
}
.hud-scoreboard-head kbd {
  font-size: 0.58rem;
  padding: 0.15rem 0.4rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  color: #94a3b8;
}
.hud-scoreboard-grid { padding: 0.35rem 0.5rem 0.55rem; }
.hud-sb-head,
.hud-sb-row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 0.55fr 0.48fr 0.28fr 0.48fr 0.38fr;
  gap: 0.3rem;
  align-items: center;
  padding: 0.3rem 0.35rem;
  font-size: 0.62rem;
}
.hud-sb-head {
  color: #64748b;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 0.15rem;
}
.hud-sb-row { color: #cbd5e1; border-radius: 3px; }
.hud-sb-row.sb-blue { border-left: 2px solid rgba(56, 189, 248, 0.5); }
.hud-sb-row.sb-red { border-left: 2px solid rgba(248, 113, 113, 0.5); }
.hud-sb-row.is-player { background: rgba(245, 158, 11, 0.1); font-weight: 700; }
.hud-scoreboard-foot {
  padding: 0.45rem 0.75rem 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #64748b;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.result-team-stats {
  width: 100%;
  margin: 0.75rem 0 0.5rem;
  padding: 0.65rem 0.75rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--if-radius-sm);
  text-align: left;
}
.result-team-stats.hidden { display: none; }
.result-team-title {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
}
.result-mvp {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  color: #fbbf24;
  font-weight: 600;
}
.result-team-grid { display: flex; flex-direction: column; gap: 0.25rem; }
.result-team-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: 0.35rem;
  font-size: 0.64rem;
  color: #cbd5e1;
  padding: 0.25rem 0.3rem;
  border-radius: 3px;
}
.result-team-row.is-player {
  background: rgba(245, 158, 11, 0.1);
  color: #fef3c7;
}
.result-team-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}
.result-team-col h4 {
  margin: 0 0 0.35rem;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #38bdf8;
}
.result-team-col-enemy h4 { color: #f87171; }
.result-accolade-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 0.65rem;
}
.result-accolade {
  flex: 1 1 100px;
  min-width: 90px;
  padding: 0.4rem 0.45rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--if-radius-sm);
  text-align: center;
}
.result-accolade-icon { display: block; font-size: 1rem; margin-bottom: 0.15rem; }
.result-accolade-title {
  display: block;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}
.result-accolade-who {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: #e2e8f0;
  margin-top: 0.1rem;
}
.result-accolade-sub {
  display: block;
  font-size: 0.56rem;
  color: #64748b;
  margin-top: 0.05rem;
}

/* ===== Iron Front Gefechtszusammenfassung ===== */
.battle-summary-overlay {
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background: rgba(4, 6, 10, 0.94);
}
.battle-summary {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  max-height: 100vh;
  overflow: hidden;
}
.battle-summary-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.5rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(20, 28, 40, 0.98), rgba(10, 14, 22, 0.95));
  flex-shrink: 0;
}
.battle-summary-banner.victory {
  background: linear-gradient(135deg, rgba(22, 78, 48, 0.55) 0%, rgba(10, 18, 28, 0.95) 55%);
  border-bottom-color: rgba(134, 239, 172, 0.25);
}
.battle-summary-banner.defeat {
  background: linear-gradient(135deg, rgba(100, 28, 28, 0.5) 0%, rgba(10, 14, 22, 0.95) 55%);
  border-bottom-color: rgba(248, 113, 113, 0.25);
}
.result-eu-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  padding: 0.55rem 1.5rem;
  border-bottom: 1px solid rgba(255, 206, 0, 0.22);
  background:
    linear-gradient(90deg, rgba(26, 26, 26, 0.95) 0%, rgba(200, 16, 46, 0.35) 48%, rgba(255, 206, 0, 0.18) 100%);
}
.result-eu-banner.hidden { display: none; }
.result-eu-banner-flag {
  width: 28px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, #1a1a1a 0%, #1a1a1a 33.2%, #c8102e 33.2%, #c8102e 66.4%, #ffce00 66.4%, #ffce00 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.result-eu-banner-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}
.result-eu-banner-text strong {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fef3c7;
}
.result-eu-banner-text span {
  font-size: 0.72rem;
  color: rgba(254, 243, 199, 0.88);
}
.result-eu-banner-btn {
  flex-shrink: 0;
  appearance: none;
  border: 1px solid rgba(255, 206, 0, 0.45);
  background: rgba(10, 10, 10, 0.55);
  color: #ffce00;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 0.65rem;
  cursor: pointer;
}
.result-eu-banner-btn:hover {
  background: rgba(200, 16, 46, 0.35);
  color: #fff;
}
.battle-summary-banner-main h1 {
  margin: 0;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.1;
}
.battle-summary-banner.victory h1 { color: #86efac; text-shadow: 0 0 24px rgba(134, 239, 172, 0.25); }
.battle-summary-banner.defeat h1 { color: #f87171; text-shadow: 0 0 24px rgba(248, 113, 113, 0.2); }
.battle-summary-banner-main p {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: #cbd5e1;
  max-width: 36rem;
}
.battle-summary-meta {
  text-align: right;
  font-size: 0.72rem;
  color: #94a3b8;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.battle-summary-meta strong { color: #e2e8f0; display: block; font-size: 0.85rem; }
.battle-summary-body {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.battle-summary-personal {
  padding: 1rem 1.1rem;
  background: rgba(0, 0, 0, 0.28);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  overflow-y: auto;
}
.bs-tank-head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}
.bs-tank-tier {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  height: 2.1rem;
  font-size: 0.82rem;
  font-weight: 800;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fde68a;
}
.bs-tank-tier.star {
  background: rgba(168, 85, 247, 0.2);
  border-color: rgba(192, 132, 252, 0.5);
  color: #e9d5ff;
}
.bs-tank-info h3 {
  margin: 0;
  font-size: 1rem;
  color: #f8fafc;
  line-height: 1.25;
}
.bs-tank-info p {
  margin: 0.2rem 0 0;
  font-size: 0.68rem;
  color: #94a3b8;
  letter-spacing: 0.04em;
}
.bs-hp-bar {
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
  margin: 0.5rem 0 0.85rem;
}
.bs-hp-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #86efac);
  border-radius: 3px;
}
.bs-hp-bar.dead i { background: #475569; width: 0 !important; }
.bs-base-xp {
  margin: 0.55rem 0 0.65rem;
  padding: 0.55rem 0.65rem;
  border-radius: 6px;
  border: 1px solid rgba(56, 189, 248, 0.28);
  background: rgba(8, 20, 32, 0.55);
}
.bs-base-xp-label {
  display: block;
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7dd3fc;
  margin-bottom: 0.15rem;
}
.bs-base-xp-val {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: #f8fafc;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.bs-base-xp-break {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.18rem;
}
.bs-base-xp-break li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.55rem;
  color: #94a3b8;
}
.bs-base-xp-break em {
  font-style: normal;
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}
.bs-xp-cell { color: #7dd3fc; font-weight: 700; }
.bs-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
}
.bs-stat {
  padding: 0.45rem 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--if-radius-sm);
}
.bs-stat-val {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: #f1f5f9;
  font-variant-numeric: tabular-nums;
}
.bs-stat-label {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  margin-top: 0.1rem;
}
.bs-medals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}
.bs-medal {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.45rem;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 600;
  color: #fde68a;
}
.bs-rewards {
  padding: 0.65rem 0.7rem;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-radius: var(--if-radius-sm);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.bs-reward-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.78rem;
  color: #cbd5e1;
}
.bs-reward-row strong {
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
}
.bs-reward-note {
  font-size: 0.68rem;
  color: #86efac;
  margin-top: 0.15rem;
  line-height: 1.45;
}
.bs-reward-row.repair span,
.bs-reward-row.repair strong { color: #fca5a5; }
.bs-reward-row.payout strong { color: #86efac; font-size: 0.88rem; }
.battle-summary-teams {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-y: auto;
  padding: 0.85rem 1rem 0.75rem;
}
.bs-teams-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
  gap: 0.5rem;
}
.bs-teams-score {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}
.bs-teams-score span { color: #38bdf8; }
.bs-teams-score .vs { color: #64748b; margin: 0 0.25rem; }
.bs-teams-score .enemy { color: #f87171; }
.bs-team-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  flex: 1;
}
.bs-team-panel {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--if-radius-sm);
  overflow: hidden;
}
.bs-team-panel.ally { border-top: 2px solid rgba(56, 189, 248, 0.55); }
.bs-team-panel.enemy { border-top: 2px solid rgba(248, 113, 113, 0.55); }
.bs-team-panel h4 {
  margin: 0;
  padding: 0.45rem 0.55rem;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.bs-team-panel.ally h4 { color: #38bdf8; }
.bs-team-panel.enemy h4 { color: #f87171; }
.bs-team-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.64rem;
  font-variant-numeric: tabular-nums;
}
.bs-team-table thead th {
  padding: 0.35rem 0.4rem;
  text-align: left;
  font-size: 0.54rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}
.bs-team-table thead th.num { text-align: right; }
.bs-team-table tbody td {
  padding: 0.32rem 0.4rem;
  color: #cbd5e1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
}
.bs-team-table tbody tr:last-child td { border-bottom: none; }
.bs-team-table tbody tr.is-player {
  background: rgba(245, 158, 11, 0.12);
}
.bs-team-table tbody tr.is-player td { color: #fef3c7; font-weight: 600; }
.bs-team-table tbody tr.dead { opacity: 0.45; }
.bs-team-table tbody td.num {
  text-align: right;
  font-weight: 600;
  color: #e2e8f0;
}
.bs-tier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.2rem;
  padding: 0 0.2rem;
  font-size: 0.58rem;
  font-weight: 800;
  border-radius: 2px;
  background: rgba(100, 116, 139, 0.35);
  color: #e2e8f0;
}
.bs-tier.star {
  background: rgba(126, 34, 206, 0.35);
  color: #e9d5ff;
}
.bs-class {
  font-size: 0.72rem;
  opacity: 0.85;
}
.bs-player-cell {
  max-width: 5.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bs-tank-cell {
  max-width: 6.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #94a3b8;
  font-size: 0.6rem;
}
.bs-team-table tbody tr.is-player .bs-tank-cell { color: #fde68a; }
.battle-summary-actions {
  display: flex;
  gap: 0.65rem;
  justify-content: center;
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 12, 18, 0.92);
  flex-shrink: 0;
}
.battle-summary-actions .btn-start,
.battle-summary-actions .btn-secondary {
  min-width: 11rem;
  padding: 0.75rem 1.25rem;
}
@media (max-width: 900px) {
  .battle-summary-body { grid-template-columns: 1fr; }
  .battle-summary-personal {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    max-height: none;
  }
  .battle-summary-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.9rem 1rem;
  }
  .battle-summary-meta { text-align: left; }
}
@media (max-width: 640px) {
  .bs-team-columns { grid-template-columns: 1fr; }
  .battle-summary-actions { flex-direction: column; }
  .battle-summary-actions .btn-start,
  .battle-summary-actions .btn-secondary { width: 100%; min-width: 0; }
}

@media (max-width: 520px) {
  .result-team-columns { grid-template-columns: 1fr; }
  .hud-battlelog { max-width: 160px; font-size: 0.52rem; }
  .hud-quickcmds { display: none; }
  .hud-tickets { transform: scale(0.9); }
}

.hud-message {
  position: absolute; top: 30%; left: 50%;
  transform: translateX(-50%);
  font-size: 1.3rem; font-weight: 700;
  letter-spacing: 0.12em; color: #fbbf24;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
  animation: msgFade 2.5s ease forwards;
}
.hud-message.hidden { display: none; }

@keyframes msgFade {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px); }
  15% { opacity: 1; transform: translateX(-50%) translateY(0); }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

.wot-claim-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0.55rem 0.45rem;
  padding: 0.38rem 0.55rem;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.12), rgba(245, 158, 11, 0.1));
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 4px;
  font-size: 0.62rem;
  color: #bbf7d0;
}
.wot-claim-banner.hidden { display: none; }
.wot-claim-banner-icon { font-size: 0.85rem; }
.btn-claim-banner-quick {
  margin-left: auto;
  padding: 0.28rem 0.5rem;
  font-size: 0.58rem;
  font-family: inherit;
  cursor: pointer;
  border-radius: 3px;
  border: 1px solid rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
}
.btn-claim-banner-quick:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-missions-claim-all {
  padding: 0.32rem 0.55rem;
  font-size: 0.62rem;
  font-family: inherit;
  cursor: pointer;
  border-radius: 3px;
  border: 1px solid rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.12);
  color: #fde68a;
}
.btn-missions-claim-all.hidden { display: none; }
.touch-aim {
  position: fixed;
  top: 0;
  right: 0;
  width: 52%;
  height: 100%;
  pointer-events: auto;
  z-index: 21;
  touch-action: none;
}
.touch-hint {
  position: fixed;
  right: 1rem;
  top: 42%;
  margin: 0;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  pointer-events: none;
  z-index: 22;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.touch-hint.hidden { display: none; }
.touch-controls { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.touch-controls.hidden { display: none; }
.touch-stick {
  position: absolute; bottom: 2rem; left: 2rem;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  pointer-events: auto;
}
.touch-stick-knob {
  position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; margin: -22px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.35);
  border: 1px solid rgba(251, 191, 36, 0.45);
}
.touch-fire {
  position: absolute; bottom: 2.5rem; right: 2rem;
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(180,60,40,0.5);
  border: 2px solid rgba(220,100,80,0.6);
  color: #fff; font-weight: 700; font-size: 0.7rem;
  pointer-events: auto; font-family: inherit;
}

@media (max-width: 900px) {
  .wot-shell { grid-template-rows: 52px 1fr auto auto; }
  .wot-panel { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; }
  .wot-garage-left, .wot-garage-right {
    grid-column: 1;
    background: rgba(8, 12, 20, 0.88);
    padding-bottom: 0.75rem;
  }
  .wot-garage-left { grid-row: 1; align-self: start; }
  .wot-garage-center {
    display: flex;
    grid-row: 2;
    grid-column: 1;
    min-height: 9rem;
    max-height: 28vh;
    padding-bottom: 0.5rem;
    opacity: 0.95;
  }
  .wot-garage-center .wot-hangar-frame { inset: 4% 6% 8%; }
  .wot-garage-center .wot-hangar-hint { font-size: 0.5rem; }
  .wot-garage-right { grid-row: 3; }
  .wot-tank-filters { width: 100%; }
  .wot-tank-bar-count { margin-left: 0; width: 100%; }
  .wot-nav { min-height: auto; }
  .wot-nav-items { flex-wrap: wrap; }
  .wot-battle-wrap {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-left: none;
    border-top: 1px solid rgba(245, 158, 11, 0.2);
    order: 2;
  }
  .wot-nav-items { order: 1; width: 100%; }
  .wot-nav { flex-wrap: wrap; }
  .wot-battle-btn {
    min-width: 120px;
    padding: 0.45rem 1rem;
  }
  .wot-battle-btn:hover { transform: translateY(-1px); }
  .wot-carousel-wrap { gap: 0.15rem; }
  .wot-module-cards { grid-template-columns: 1fr; }
  .wot-cons-cards { grid-template-columns: 1fr; }
  .wot-hangar-controls { bottom: 10%; }
  .wot-cmp-row { grid-template-columns: 1fr; }
  .wot-cmp-vs { display: none; }
  .wot-carousel-wrap.compare-pick { outline-width: 1px; }
  .wot-carousel-scroll-btn { width: 1.35rem; height: 2.2rem; font-size: 1rem; }
  .wot-carousel { max-height: 8.5rem; padding-right: 0.15rem; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .detail-stats { grid-template-columns: repeat(2, 1fr); }
  .tree-detail { flex-direction: column; align-items: center; }
  .hud-squad { width: 140px; left: 0.35rem; }
  .hud-scoreboard-inner { width: 96vw; }
}

@media (max-width: 520px) {
  .wot-logo { font-size: 1rem; }
  .wot-badge { display: none; }
  .wot-res-label { display: none; }
  .wot-resources { gap: 0.25rem; }
}

/* —— Standalone / neue Systeme —— */
.wot-settings-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #c8d0dc;
  width: 2.25rem; height: 2.25rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  margin-left: 0.5rem;
}
.wot-settings-btn:hover { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.35); }

.wot-mode-select { display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem; font-size: 0.62rem; color: #8898a8; }
.wot-mode-select-input {
  background: rgba(8,12,20,0.9);
  border: 1px solid rgba(255,255,255,0.15);
  color: #e8ecf0;
  padding: 0.18rem 0.38rem;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.64rem;
  max-width: 148px;
}

.wot-garage-tabs { display: flex; gap: 0.25rem; margin-bottom: 0.4rem; }
.wot-gtab {
  flex: 1; padding: 0.28rem 0.35rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255,255,255,0.08);
  color: #8898a8; font-size: 0.58rem;
  cursor: pointer; border-radius: 2px; font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.wot-gtab:hover { color: #cbd5e1; background: rgba(255,255,255,0.06); }
.wot-gtab.selected {
  background: rgba(245,158,11,0.14);
  border-color: rgba(245,158,11,0.45);
  color: #fbbf24;
  box-shadow: inset 0 -2px 0 rgba(245, 158, 11, 0.65);
}

.wot-camo-list, .wot-captain-list { display: flex; flex-direction: column; gap: 0.4rem; max-height: 220px; overflow-y: auto; }
.wot-camo-item, .wot-captain-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px; cursor: pointer; font-size: 0.72rem;
}
.wot-camo-item.active, .wot-captain-item.active { border-color: rgba(96,160,64,0.5); background: rgba(96,160,64,0.08); }
.wot-camo-swatch { width: 1.25rem; height: 1.25rem; border-radius: 3px; border: 1px solid rgba(255,255,255,0.2); }

.wot-captains-head { padding: 1rem 1.25rem 0; }
.wot-captains-scroll { padding: 1rem 1.25rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; overflow-y: auto; max-height: calc(100vh - 220px); }
.wot-captain-card {
  background: rgba(8,12,20,0.85);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px; padding: 0.75rem;
}
.wot-captain-card.equipped { border-color: rgba(245,158,11,0.45); }
.wot-captain-card h4 { margin: 0 0 0.25rem; font-size: 0.85rem; }
.wot-captain-card p { margin: 0; font-size: 0.72rem; color: #8898a8; }

.wot-research-nation-soon { opacity: 0.88; border-style: dashed !important; }
.wot-research-nation-soon .wot-soon-tab {
  font-size: 0.55rem;
  color: #f59e0b;
  font-style: normal;
  margin-left: 0.25rem;
  letter-spacing: 0.04em;
}
.wot-nation-divider {
  width: 1px;
  height: 1.4rem;
  background: rgba(255,255,255,0.12);
  margin: 0 0.15rem;
  align-self: center;
}
.wot-future-banner {
  margin-top: 0.5rem;
  padding: 0.45rem 0.65rem;
  font-size: 0.68rem;
  color: #c8a860;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 4px;
  line-height: 1.35;
}
.wot-tree-future-mode .wot-tree-node.soon-node {
  opacity: 0.72;
  filter: saturate(0.75);
}
.wot-tree-future-mode .wot-tree-node.soon-node .wot-tree-node-cost {
  color: #f59e0b;
}
.detail-soon-tag {
  display: inline-block;
  padding: 0.35rem 0.65rem;
  font-size: 0.72rem;
  color: #f59e0b;
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.tank-icon-nation-it { filter: hue-rotate(80deg) saturate(0.9); }
.tank-icon-nation-pl { filter: hue-rotate(-20deg) saturate(0.95); }
.tank-icon-nation-cz { filter: hue-rotate(140deg) saturate(0.85); }
.tank-icon-nation-se { filter: hue-rotate(200deg) saturate(0.8); }

.wot-shop-items, .wot-shop-camos, .wot-shop-captains {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
}

.detail-compare {
  margin: 0.5rem 0;
  padding: 0.5rem;
  background: rgba(0,0,0,0.3);
  border-radius: 4px;
  font-size: 0.72rem;
}
.detail-compare table { width: 100%; border-collapse: collapse; }
.detail-compare td, .detail-compare th { padding: 0.2rem 0.35rem; text-align: left; }
.detail-compare th { color: #8898a8; font-weight: 500; }

.wot-nav-dot {
  position: absolute; top: 4px; right: 8px;
  width: 8px; height: 8px;
  background: #f59e0b;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(245,158,11,0.6);
}

.settings-card { max-width: 420px; text-align: left; }
.settings-version {
  margin: -0.35rem 0 0.75rem;
  font-size: 0.78rem;
  color: var(--if-text-muted);
}
.btn-settings-changelog {
  width: 100%;
  margin: 0.25rem 0 0.75rem;
  padding: 0.65rem;
  font-size: 0.78rem;
}
.settings-studio,
.changelog-studio,
.wot-topbar-credit,
.load-studio,
.battle-summary-studio {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--if-text-muted);
  text-align: center;
  opacity: 0.82;
}
.settings-studio { margin: 0 0 0.75rem; }
.changelog-studio { margin: 0.75rem 0; }
.wot-topbar-credit {
  flex: 0 1 auto;
  max-width: 9rem;
  margin-right: 0.35rem;
  font-size: 0.52rem;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  user-select: none;
  opacity: 0.55;
}
@media (max-width: 1100px) {
  .wot-topbar-credit { display: none; }
}
.load-studio {
  margin-top: 0.45rem;
  font-size: 0.58rem;
  opacity: 0.65;
}
.battle-summary-studio {
  flex: 1 1 100%;
  width: 100%;
  margin-top: 0.35rem;
  font-size: 0.6rem;
  opacity: 0.7;
}
.changelog-card {
  max-width: 440px;
  text-align: left;
}
.changelog-stand {
  margin: -0.25rem 0 0.85rem;
  font-size: 0.76rem;
  color: var(--if-text-muted);
}
.changelog-list {
  max-height: min(52vh, 360px);
  overflow-y: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0.65rem;
}
.changelog-entry {
  margin-bottom: 0.5rem;
  font-size: 0.78rem;
  color: var(--if-text-muted);
}
.changelog-entry summary {
  cursor: pointer;
  color: var(--if-text);
  list-style: none;
}
.changelog-entry summary::-webkit-details-marker { display: none; }
.changelog-entry-date {
  font-size: 0.72rem;
  color: var(--if-text-muted);
  font-weight: normal;
}
.changelog-entry ul {
  margin: 0.4rem 0 0 1rem;
  padding: 0;
}
.changelog-entry li { margin-bottom: 0.25rem; }
.settings-grid { display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0; }
.settings-grid label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.8rem; color: var(--if-text-muted); }
.settings-select {
  width: 100%;
  padding: 0.45rem 0.55rem;
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--if-text);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-sm);
  cursor: pointer;
}
.settings-select:focus-visible { outline-color: var(--if-accent); }
.settings-check { flex-direction: row !important; align-items: center; }
.settings-gfx-hint {
  margin: -0.35rem 0 0;
  font-size: 0.62rem;
  line-height: 1.35;
  color: #fbbf24;
}

.damage-floats {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 25;
  overflow: hidden;
}
.dmg-float {
  position: absolute;
  font-weight: 800;
  font-size: 0.85rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.5);
  transform: translate(-50%, -50%);
  animation: dmg-rise 1.1s ease-out forwards;
  white-space: nowrap;
}
.dmg-float.hit { color: #ffe066; }
.dmg-float.pen { color: #ff8844; }
.dmg-float.front-hard { color: #fb923c; font-size: 0.78rem; }
.dmg-float.crit { color: #ff4444; font-size: 1.05rem; letter-spacing: 0.02em; }
.dmg-float.ricochet { color: #93c5fd; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; }
.dmg-float.zero { color: #6688aa; font-size: 0.7rem; }
@keyframes dmg-rise {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 36px)) scale(0.85); }
}

#garage-viewport { cursor: grab; }
#garage-viewport.dragging { cursor: grabbing; }
#garage-viewport.bf-garage .wot-spotlight {
  background: radial-gradient(ellipse, rgba(251, 191, 36, 0.32), rgba(0, 0, 0, 0.12) 55%, transparent 72%);
}
#garage-viewport.bf-garage .wot-hangar-hint { color: rgba(251, 191, 36, 0.55); }
#garage-viewport.bf-garage .wot-hangar-corner { border-color: rgba(251, 191, 36, 0.55); }
#garage-viewport.bf-garage .wot-hangar-floor-line {
  background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.5), transparent);
}
#garage-viewport.bf-garage .wot-hangar-badge {
  border-color: rgba(251, 191, 36, 0.5);
  color: #fde68a;
}
.wot-shell[data-active-panel="garage"] .wot-topbar {
  border-bottom-color: rgba(245, 158, 11, 0.22);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

/* Credits, Vergleich, Versorgung */
.wot-garage-repair {
  margin-top: 0.45rem;
  padding: 0.45rem;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.35);
}
.wot-repair-hint { font-size: 0.62rem; color: #fca5a5; margin-bottom: 0.3rem; }
.wot-garage-compare-head {
  display: flex;
  gap: 0.28rem;
  margin-top: 0.4rem;
}
.wot-garage-compare {
  margin-top: 0.3rem;
  overflow-x: auto;
  font-size: 0.58rem;
}
.btn-garage-compare.active {
  border-color: rgba(251, 191, 36, 0.55);
  color: #fde68a;
  background: rgba(251, 191, 36, 0.12);
}
.wot-cmp-cards {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.wot-cmp-cards-head {
  display: flex;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.15rem;
}
.wot-cmp-tag {
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.35rem;
  border-radius: 3px;
}
.wot-cmp-tag-a { color: #38bdf8; background: rgba(56, 189, 248, 0.12); }
.wot-cmp-tag-b { color: #f87171; background: rgba(248, 113, 113, 0.12); }
.wot-cmp-metric {
  padding: 0.35rem 0.4rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--if-radius-sm);
}
.wot-cmp-metric-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
  font-size: 0.52rem;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wot-cmp-delta { font-size: 0.5rem; font-weight: 800; }
.wot-cmp-delta-win { color: #86efac; }
.wot-cmp-delta-lose { color: #94a3b8; }
.wot-cmp-delta-neutral { color: #64748b; }
.wot-cmp-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.35rem;
  align-items: end;
}
.wot-cmp-vs {
  font-size: 0.48rem;
  color: #475569;
  padding-bottom: 0.35rem;
}
.wot-cmp-side {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}
.wot-cmp-side-a strong { color: #38bdf8; }
.wot-cmp-side-b strong { color: #f87171; }
.wot-cmp-name {
  font-size: 0.48rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wot-cmp-bar {
  height: 4px;
  background: rgba(30, 41, 59, 0.9);
  border-radius: 2px;
  overflow: hidden;
}
.wot-cmp-bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.wot-cmp-fill-win { background: linear-gradient(90deg, #22c55e, #86efac); }
.wot-cmp-fill-lose { background: linear-gradient(90deg, #475569, #64748b); }
.wot-cmp-fill-neutral { background: #64748b; }
.wot-cmp-side strong {
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
}
.wot-compare-table {
  width: 100%;
  border-collapse: collapse;
}
.wot-compare-table th,
.wot-compare-table td {
  padding: 0.2rem 0.35rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.wot-compare-table th { color: #8898a8; font-weight: 500; }
.wot-compare-table td.cmp-better { color: #86efac; }
.wot-compare-table td.cmp-worse { color: #94a3b8; }
.wot-credit-shop { margin-top: 0.5rem; }
.wot-module-head-sm { font-size: 0.55rem; margin-bottom: 0.3rem; }
.wot-credit-shop-list {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  max-height: 130px;
  overflow-y: auto;
}
.wot-credit-item {
  padding: 0.38rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.wot-credit-item h4 { font-size: 0.64rem; margin-bottom: 0.12rem; }
.wot-credit-item p { font-size: 0.56rem; color: #94a3b8; margin-bottom: 0.25rem; }
.wot-credit-stock { font-size: 0.52rem; color: #64748b; }
.wot-credit-price {
  font-size: 0.68rem;
  color: #e2e8f0;
  margin: 0.18rem 0;
  font-variant-numeric: tabular-nums;
}
.wot-credit-item .btn-secondary { width: 100%; font-size: 0.56rem; padding: 0.28rem; }

/* Garage: kompakte Leiste & Schlacht-Button */
#wot-menu[data-active-panel="garage"] .wot-tank-bar {
  padding: 0.28rem 0.55rem 0.38rem;
}
#wot-menu[data-active-panel="garage"] .wot-tank-bar-head {
  margin-bottom: 0.25rem;
  gap: 0.3rem 0.6rem;
}
#wot-menu[data-active-panel="garage"] .wot-carousel {
  max-height: 7.25rem;
  gap: 0.28rem;
}
#wot-menu[data-active-panel="garage"] .wot-carousel-item {
  width: 74px;
  padding: 0.32rem 0.22rem 0.28rem;
  border-width: 1px;
  gap: 0.12rem;
}
#wot-menu[data-active-panel="garage"] .wot-carousel-flag {
  font-size: 2rem;
}
#wot-menu[data-active-panel="garage"] .wot-carousel-name {
  font-size: 0.5rem;
}
#wot-menu[data-active-panel="garage"] .wot-filter-btn {
  padding: 0.12rem 0.32rem;
  font-size: 0.55rem;
}
#wot-menu[data-active-panel="garage"] .wot-filter-group {
  gap: 0.25rem;
}
#wot-menu[data-active-panel="garage"] .wot-tank-filters {
  gap: 0.35rem 0.55rem;
}
#wot-menu[data-active-panel="garage"] .wot-battle-btn {
  min-width: 96px;
  padding: 0.26rem 0.55rem;
}
#wot-menu[data-active-panel="garage"] .wot-battle-main {
  font-size: 0.72rem;
}
#wot-menu[data-active-panel="garage"] .wot-battle-sub {
  font-size: 0.42rem;
}
#wot-menu[data-active-panel="garage"] .wot-mode-select {
  font-size: 0.52rem;
}
#wot-menu[data-active-panel="garage"] .wot-mode-select-input {
  font-size: 0.52rem;
  max-width: 110px;
}
#wot-menu[data-active-panel="garage"] .wot-panel-garage .btn-secondary,
#wot-menu[data-active-panel="garage"] .wot-panel-garage .btn-garage-repair,
#wot-menu[data-active-panel="garage"] .wot-panel-garage .btn-garage-compare {
  font-size: 0.56rem;
  padding: 0.3rem 0.38rem;
}
#wot-menu[data-active-panel="garage"] .wot-res {
  padding: 0.2rem 0.42rem;
  font-size: 0.58rem;
  gap: 0.22rem;
}
#wot-menu[data-active-panel="garage"] .wot-res strong {
  font-size: 0.75rem;
}
#wot-menu[data-active-panel="garage"] .wot-res-label {
  font-size: 0.5rem;
}
#wot-menu[data-active-panel="garage"] .wot-logo {
  font-size: 1.05rem;
}
#wot-menu[data-active-panel="garage"] .wot-topbar {
  padding: 0 0.6rem 0 0.5rem;
  gap: 0.45rem;
}
#wot-menu[data-active-panel="garage"] .wot-nav-btn {
  padding: 0.38rem 0.3rem 0.32rem;
  font-size: 0.52rem;
  max-width: 130px;
  gap: 0.2rem;
}
#wot-menu[data-active-panel="garage"] .wot-nav-icon.if-ico {
  width: 1.2rem;
  height: 1.2rem;
}
.wot-panel-garage .wot-equipped-playstyle .wot-playstyle-block {
  margin-top: 0.4rem;
  font-size: 0.58rem;
}
.wot-panel-garage .wot-camo-list,
.wot-panel-garage .wot-captain-pick {
  max-height: none;
  gap: 0.28rem;
}
.wot-panel-garage .wot-camo-item,
.wot-panel-garage .wot-captain-item {
  padding: 0.35rem 0.42rem;
  font-size: 0.62rem;
}
.wot-camo-panel {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 0;
}
.wot-camo-active {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.45rem;
  align-items: center;
  padding: 0.45rem 0.5rem;
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.12), rgba(0, 0, 0, 0.28));
}
.wot-camo-active-swatch {
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
}
.wot-camo-active-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}
.wot-camo-active-kicker {
  font-size: 0.48rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f59e0b;
  font-weight: 700;
}
.wot-camo-active-body strong {
  font-size: 0.72rem;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wot-camo-active-bonus {
  font-size: 0.55rem;
  color: #94a3b8;
  line-height: 1.3;
}
.wot-camo-shop-btn {
  font-size: 0.55rem !important;
  padding: 0.28rem 0.45rem !important;
  white-space: nowrap;
}
.wot-camo-pack-hint {
  margin: 0;
  font-size: 0.52rem;
  color: #94a3b8;
  line-height: 1.35;
}
.wot-camo-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.wot-camo-filter {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.25);
  color: #94a3b8;
  font-size: 0.52rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.22rem 0.4rem;
  cursor: pointer;
  font-family: inherit;
}
.wot-camo-filter em {
  font-style: normal;
  font-weight: 700;
  color: #cbd5e1;
  font-variant-numeric: tabular-nums;
}
.wot-camo-filter:hover { color: #e2e8f0; border-color: rgba(245, 158, 11, 0.35); }
.wot-camo-filter.selected {
  color: #0c121a;
  background: linear-gradient(180deg, #fbbf24, #d97706);
  border-color: #f59e0b;
  font-weight: 700;
}
.wot-camo-filter.selected em { color: #0c121a; }
.wot-camo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
  max-height: min(48vh, 380px);
  overflow-y: auto;
  padding-right: 0.1rem;
  align-content: start;
}
.wot-camo-grid.is-empty {
  grid-template-columns: 1fr;
}
.wot-camo-group-label {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
  margin: 0.2rem 0 0;
  padding: 0.28rem 0 0.05rem;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}
.wot-camo-group-label:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.wot-camo-group-label em {
  font-style: normal;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}
.wot-camo-tile {
  appearance: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.35rem;
  align-items: center;
  text-align: left;
  width: 100%;
  padding: 0.32rem 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.28);
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  min-height: 2.55rem;
}
.wot-camo-tile:hover {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.06);
}
.wot-camo-tile.active {
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.12);
  box-shadow: inset 2px 0 0 #f59e0b;
}
.wot-camo-tile.locked {
  opacity: 0.4;
  cursor: not-allowed;
}
.wot-camo-tile.is-empty { opacity: 0.55; }
.wot-camo-tile.is-elite {
  border-color: rgba(251, 191, 36, 0.35);
}
.wot-camo-tile-swatch {
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}
.wot-camo-tile-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.wot-camo-tile-name {
  font-size: 0.58rem;
  font-weight: 700;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wot-camo-tile-perks {
  font-size: 0.48rem;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wot-camo-tile-badge {
  font-size: 0.45rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.12rem 0.25rem;
  white-space: nowrap;
}
.wot-camo-tile-badge.is-perma {
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.28);
}
.wot-camo-tile-badge.is-consumable {
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.wot-camo-tile-badge.is-empty {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.22);
}
.wot-camo-empty {
  margin: 0.35rem 0;
  font-size: 0.6rem;
  color: #64748b;
  line-height: 1.4;
}
.wot-camo-item {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  text-align: left;
  width: 100%;
}
.wot-camo-item.locked {
  opacity: 0.45;
  cursor: not-allowed;
}
.wot-camo-item-body {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
  flex: 1;
}
.wot-camo-item-name { font-weight: 700; color: #e2e8f0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.wot-camo-item-bonus { font-size: 0.58rem; color: #94a3b8; line-height: 1.25; }
.wot-camo-type {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.08rem 0.28rem;
  border-radius: 3px;
  text-transform: uppercase;
}
.wot-camo-type.is-perma {
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.28);
}
.wot-camo-type.is-consumable {
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.wot-camo-shop-note {
  font-size: 0.62rem;
  color: #94a3b8;
  line-height: 1.4;
  margin: 0.35rem 0 0.55rem;
  padding: 0.4rem 0.5rem;
  background: rgba(148, 163, 184, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 4px;
}
@media (max-width: 520px) {
  .wot-camo-grid { grid-template-columns: 1fr; }
}
.wot-mission-tag {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #94a3b8;
  padding: 0.1rem 0.32rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 3px;
  vertical-align: middle;
}
.wot-mission-card.is-basexp {
  border-left-color: #38bdf8;
}
.wot-mission-card.is-basexp .wot-mission-tag {
  color: #7dd3fc;
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.08);
}
.wot-camo-shop-details {
  margin-top: 0.55rem;
  font-size: 0.62rem;
}
.wot-camo-shop-details summary {
  cursor: pointer;
  color: #f59e0b;
  padding: 0.35rem 0;
}
.wot-camo-shop-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.35rem;
  max-height: 200px;
  overflow-y: auto;
}
.wot-camo-shop-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.45rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
}
.wot-camo-shop-item div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.wot-camo-shop-item span { font-size: 0.58rem; color: #94a3b8; }
.wot-captain-card-active {
  padding: 0.45rem 0.5rem;
  margin-bottom: 0.45rem;
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 4px;
}
.wot-captain-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}
.wot-captain-tag {
  font-size: 0.52rem;
  padding: 0.08rem 0.28rem;
  background: rgba(245, 158, 11, 0.15);
  border-radius: 3px;
  color: #fbbf24;
}
.wot-captain-tag.muted { background: rgba(100, 116, 139, 0.2); color: #94a3b8; }
.wot-captain-pick-label {
  font-size: 0.58rem;
  color: #64748b;
  margin: 0 0 0.35rem;
}
.wot-captain-pick {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  max-height: min(28vh, 220px);
  overflow-y: auto;
}
.wot-crew-rec {
  margin: 0 0 0.45rem;
  padding: 0.45rem 0.5rem;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 4px;
}
.wot-crew-rec strong {
  display: block;
  font-size: 0.62rem;
  color: #fbbf24;
  margin-bottom: 0.15rem;
}
.wot-crew-rec p {
  margin: 0 0 0.25rem;
  font-size: 0.55rem;
  color: #94a3b8;
  line-height: 1.35;
}
.wot-crew-rec-hint {
  font-size: 0.5rem;
  color: #64748b;
}
.wot-crew-cards {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: min(48vh, 380px);
  overflow-y: auto;
  padding-right: 0.15rem;
}
.wot-crew-card {
  padding: 0.45rem 0.5rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 4px;
}
.wot-crew-card.rec-ok {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.06);
}
.wot-crew-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}
.wot-crew-skill-live {
  color: #86efac;
  font-style: normal;
  font-weight: 600;
}
.wot-crew-retrain-hint {
  font-size: 0.58rem;
  color: #94a3b8;
  align-self: center;
}
.wot-captains-crew-overview {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}
.wot-captains-crew-overview h3 {
  margin: 0 0 0.25rem;
  font-size: 0.9rem;
}
.wot-captains-crew-list {
  margin: 0.4rem 0 0.6rem;
  padding-left: 1.1rem;
  font-size: 0.72rem;
  color: #cbd5e1;
}
.wot-captains-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.55rem;
}
.wot-camo-shop-item {
  display: grid;
  grid-template-columns: 1.4rem 1fr auto;
  gap: 0.45rem;
  align-items: center;
}
.wot-camo-shop-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.wot-camo-shop-body strong {
  font-size: 0.72rem;
}
.wot-camo-shop-body span {
  font-size: 0.58rem;
  color: #94a3b8;
}
.wot-crew-name-input,
.wot-crew-skill-select {
  width: 100%;
  margin-bottom: 0.3rem;
  padding: 0.28rem 0.35rem;
  font-size: 0.62rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  color: #e2e8f0;
}
.wot-crew-skill-desc {
  font-size: 0.56rem;
  color: #64748b;
  margin: 0 0 0.35rem;
}
.wot-crew-lvl-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  margin-bottom: 0.35rem;
  overflow: hidden;
}
.wot-crew-lvl-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #86efac);
  border-radius: 2px;
}
.wot-crew-max { font-size: 0.58rem; color: #86efac; font-weight: 700; }
.wot-crew-perk-sum {
  margin-top: 0.45rem;
  font-size: 0.58rem;
  color: #94a3b8;
  line-height: 1.35;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.wot-crew-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0.55rem 0;
}
.wot-crew-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
  padding: 0.45rem 0.5rem;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
}
.wot-crew-tank-sum {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}
.wot-crew-tank-sum strong {
  font-size: 0.72rem;
  color: #f1f5f9;
}
.wot-crew-tank-sum span {
  font-size: 0.56rem;
  color: #94a3b8;
}
.wot-crew-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}
.wot-crew-transfer-select {
  flex: 1 1 120px;
  min-width: 0;
  padding: 0.28rem 0.35rem;
  font-size: 0.58rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  color: #e2e8f0;
}
.wot-crew-skill-label {
  display: block;
  font-size: 0.52rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}
.wot-crew-skill-label.secondary {
  margin-top: 0.25rem;
  color: #7c8a9a;
}
.wot-crew-skill-locked {
  font-size: 0.54rem;
  color: #475569;
  font-style: italic;
  margin: 0.2rem 0 0.35rem;
}
.wot-crew-xp-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.15rem;
}
.wot-crew-xp-label {
  font-size: 0.54rem;
  color: #86efac;
  font-weight: 600;
}
.wot-crew-card[data-role="commander"] {
  border-color: rgba(245, 158, 11, 0.25);
}
.wot-crew-avatar {
  --crew-hue: 200;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #f8fafc;
  background: hsl(var(--crew-hue), 42%, 32%);
  border: 1px solid hsla(var(--crew-hue), 50%, 55%, 0.45);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.wot-crew-avatar.sm {
  width: 1.65rem;
  height: 1.65rem;
  font-size: 0.52rem;
}
.wot-crew-barracks-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.45rem;
}
.wot-crew-barracks-actions .btn-secondary {
  font-size: 0.55rem;
  padding: 0.22rem 0.4rem;
}
.wot-crew-barracks-pick {
  flex: 1;
  min-width: 7rem;
  font-size: 0.55rem;
  padding: 0.22rem 0.3rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #e2e8f0;
  border-radius: 3px;
}
.wot-crew-barracks {
  margin-top: 0.25rem;
}
.wot-crew-barracks-empty,
.wot-crew-barracks-hint {
  font-size: 0.58rem;
  color: #64748b;
  margin: 0.35rem 0 0;
  line-height: 1.4;
}
.wot-crew-barracks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.4rem;
}
.wot-crew-barracks-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.5rem;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 4px;
}
.wot-crew-barracks-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.wot-crew-barracks-meta strong {
  font-size: 0.62rem;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wot-crew-barracks-meta span {
  font-size: 0.52rem;
  color: #94a3b8;
}
.wot-captains-equipped-note {
  font-size: 0.62rem;
  color: #94a3b8;
  margin: 0 0 0.65rem;
  padding: 0.4rem 0.5rem;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  border-left: 3px solid #f59e0b;
}
.wot-panel-garage .wot-gtab-panel {
  min-height: 320px;
  max-height: min(62vh, 520px);
  overflow-y: auto;
}
.wot-panel-garage .wot-loadout-section .wot-module-shop-details[open] .wot-module-buy-list {
  max-height: 240px;
}
.wot-panel-garage .wot-compare-table th,
.wot-panel-garage .wot-compare-table td {
  padding: 0.1rem 0.22rem;
}

/* #17 Drop-Raten */
.crate-drop-card { max-width: 520px; width: 100%; text-align: left; }
.crate-drop-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.crate-drop-head h2 { font-size: 1rem; letter-spacing: 0.08em; }
.crate-drop-body { max-height: 50vh; overflow-y: auto; margin-bottom: 0.75rem; }
.crate-rates-table { width: 100%; border-collapse: collapse; font-size: 0.72rem; }
.crate-rates-table th, .crate-rates-table td { padding: 0.35rem 0.45rem; border-bottom: 1px solid rgba(255,255,255,0.06); text-align: left; }
.crate-rates-table th { color: #94a3b8; font-weight: 600; }
.crate-rates-table td strong { color: #fbbf24; }
.crate-rates-note { font-size: 0.62rem; color: #64748b; margin-top: 0.5rem; }
.btn-crate-rates { width: 100%; margin: 0.35rem 0 0.5rem; font-size: 0.62rem; padding: 0.32rem; }

/* #18 Saison-Shop */
.wot-season-shop-head { margin-bottom: 0.75rem; }
.wot-shop-season-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.55rem;
}
.wot-season-shop-card { position: relative; }
.wot-season-discount {
  position: absolute; top: 0.45rem; right: 0.45rem;
  font-size: 0.58rem; font-weight: 700; color: #1a1408;
  background: #fbbf24; padding: 0.12rem 0.35rem;
}
.wot-season-type { display: block; font-size: 0.55rem; color: #94a3b8; margin-bottom: 0.2rem; letter-spacing: 0.08em; text-transform: uppercase; }
.btn-buy-season {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.45rem 0.35rem;
  font-family: inherit;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  border: 1px solid rgba(245, 158, 11, 0.5);
  background: linear-gradient(180deg, #f59e0b, #d97706);
  color: #1a1408;
  transition: filter 0.12s;
}
.btn-buy-season:hover:not(:disabled) { filter: brightness(1.08); }
.btn-buy-season:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  color: #94a3b8;
  background: rgba(51, 65, 85, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
}

/* #22 Tutorial */
.tutorial-overlay {
  position: fixed; inset: 0; z-index: 190;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 1rem 1rem 5.5rem;
  pointer-events: none;
}
.tutorial-overlay.hidden { display: none; }
.tutorial-card {
  pointer-events: auto;
  max-width: 320px;
  padding: 0.85rem 1rem;
  background: rgba(8, 12, 20, 0.94);
  border: 1px solid rgba(245, 158, 11, 0.4);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.tutorial-eyebrow { font-size: 0.55rem; letter-spacing: 0.16em; color: #f59e0b; }
.tutorial-card h2 { font-size: 0.95rem; margin: 0.35rem 0; }
.tutorial-text { font-size: 0.68rem; color: #94a3b8; line-height: 1.45; margin-bottom: 0.55rem; }
.tutorial-steps { list-style: none; margin: 0 0 0.65rem; padding: 0; font-size: 0.62rem; }
.tutorial-steps li { display: flex; gap: 0.35rem; padding: 0.22rem 0; color: #64748b; }
.tutorial-steps li span {
  width: 1.1rem; height: 1.1rem; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.15); font-size: 0.55rem; flex-shrink: 0;
}
.tutorial-steps li.active { color: #fbbf24; font-weight: 600; }
.tutorial-steps li.active span { border-color: #f59e0b; background: rgba(245,158,11,0.15); }
.tutorial-steps li.done { color: #86efac; }
.tutorial-steps li.done span { border-color: rgba(134,239,172,0.4); }
.tutorial-actions { display: flex; flex-direction: column; gap: 0.35rem; }
.tutorial-actions .btn-start, .tutorial-actions .btn-secondary { width: 100%; padding: 0.4rem; font-size: 0.65rem; }
.wot-tutorial-target {
  position: relative;
  z-index: 185 !important;
  box-shadow: 0 0 0 2px #f59e0b, 0 0 20px rgba(245, 158, 11, 0.45) !important;
  animation: tut-pulse 1.4s ease-in-out infinite;
}
@keyframes tut-pulse {
  0%, 100% { box-shadow: 0 0 0 2px #f59e0b, 0 0 16px rgba(245, 158, 11, 0.35); }
  50% { box-shadow: 0 0 0 3px #fbbf24, 0 0 28px rgba(251, 191, 36, 0.55); }
}

/* Operation Eiserner Löwe — Event-Panel */
#panel-event.wot-panel-event {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  padding: 0;
  min-height: 0;
  overflow: hidden;
  background: #0a0e14;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
}

#panel-event .il-event-content,
#panel-event .bh-event-content,
#panel-event .pl-event-content,
#panel-event .it-event-content,
#panel-event .il-event-showcase {
  pointer-events: auto;
}

.wot-event-tab-panel {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wot-event-tab-panel.hidden { display: none; }

/* Scrollbarer Event-Inhalt in allen Tabs */
.wot-event-tab-panel > [class$="-event-content"] {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

/* IL: dezenter Hintergrund, kein 3D-Strip */
.wot-event-tab-panel[data-event-panel="iron-lion"] .il-event-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.22;
  pointer-events: none;
}
.wot-event-tab-panel[data-event-panel="iron-lion"] .il-event-showcase {
  display: none;
}
.wot-event-tab-panel[data-event-panel="iron-lion"] .il-event-content {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  justify-content: flex-start;
  height: auto;
  scrollbar-width: thin;
}

.bh-event-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(88, 52, 160, 0.35), transparent 70%),
    linear-gradient(180deg, rgba(12, 8, 24, 0.95), rgba(8, 10, 18, 0.98));
}
.bh-event-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(8, 6, 14, 0.85) 100%);
}
.bh-event-content {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

.pl-event-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(196, 30, 58, 0.28), transparent 70%),
    linear-gradient(180deg, rgba(24, 12, 14, 0.95), rgba(10, 10, 14, 0.98));
}
.pl-event-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(12, 8, 10, 0.88) 100%);
}
.pl-event-content {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

.it-event-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(22, 163, 74, 0.28), transparent 70%),
    linear-gradient(180deg, rgba(10, 24, 14, 0.95), rgba(8, 12, 10, 0.98));
}
.it-event-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(8, 14, 10, 0.88) 100%);
}
.it-event-content {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.sa-event-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(37, 99, 235, 0.28), transparent 70%),
    linear-gradient(180deg, rgba(12, 20, 36, 0.95), rgba(8, 12, 20, 0.98));
}
.sa-event-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(8, 12, 20, 0.88) 100%);
}
.bf-event-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(64, 64, 64, 0.35), transparent 70%),
    linear-gradient(180deg, rgba(8, 8, 12, 0.96), rgba(4, 4, 8, 0.98));
}
.bf-event-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(4, 4, 8, 0.9) 100%);
}
.ad-event-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 55% at 50% 0%, rgba(196, 30, 58, 0.22), transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 80%, rgba(22, 101, 52, 0.18), transparent 55%),
    linear-gradient(180deg, rgba(10, 18, 12, 0.96), rgba(6, 10, 8, 0.98));
}
.ad-event-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(6, 12, 8, 0.92) 100%);
}
.bz-event-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(56, 189, 248, 0.14), transparent 58%),
    linear-gradient(180deg, rgba(8, 20, 32, 0.96), rgba(6, 12, 20, 0.98));
}

/* —— Einheitliches Event-Layout —— */
.ev-event-shell {
  padding: 0.65rem 0.75rem 1.1rem;
  max-width: 1100px;
  margin: 0 auto;
}

.ev-event-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.75rem;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.55rem 0.65rem;
  margin-bottom: 0.55rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 10, 16, 0.72);
  backdrop-filter: blur(8px);
}
.theme-il .ev-event-header {
  border-color: rgba(251, 191, 36, 0.28);
  background: linear-gradient(135deg, rgba(20, 14, 8, 0.88), rgba(12, 10, 8, 0.82));
}
.theme-bh .ev-event-header {
  border-color: rgba(139, 92, 246, 0.32);
  background: linear-gradient(135deg, rgba(20, 14, 36, 0.9), rgba(14, 10, 24, 0.85));
}
.theme-pl .ev-event-header {
  border-color: rgba(220, 38, 38, 0.35);
  background: linear-gradient(135deg, rgba(36, 12, 16, 0.92), rgba(18, 10, 12, 0.86));
}
.theme-it .ev-event-header {
  border-color: rgba(22, 163, 74, 0.35);
  background: linear-gradient(135deg, rgba(12, 36, 20, 0.92), rgba(8, 18, 12, 0.86));
}
.theme-an .ev-event-header {
  border-color: rgba(236, 72, 153, 0.38);
  background: linear-gradient(135deg, rgba(28, 10, 32, 0.92), rgba(16, 8, 24, 0.86));
}

.ev-event-header-main { flex: 1; min-width: 180px; }
.ev-event-header-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  min-width: 168px;
}

.ev-event-eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
}
.theme-il .ev-event-eyebrow { color: #fbbf24; }
.theme-bh .ev-event-eyebrow { color: #a78bfa; }
.theme-pl .ev-event-eyebrow { color: #fca5a5; }
.theme-it .ev-event-eyebrow { color: #86efac; }
.theme-an .ev-event-eyebrow { color: #f9a8d4; }

.ev-event-header h2 {
  margin: 0;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  color: #f8fafc;
}
.theme-il .ev-event-header h2 { color: #fef3c7; }
.theme-bh .ev-event-header h2 { color: #f5f3ff; }
.theme-pl .ev-event-header h2 { color: #fef2f2; }
.theme-it .ev-event-header h2 { color: #f0fdf4; }
.theme-an .ev-event-header h2 { color: #fdf2f8; }

.ev-event-desc {
  margin: 0.22rem 0 0;
  font-size: 0.6rem;
  color: #94a3b8;
  line-height: 1.45;
  max-width: 34rem;
}
.theme-bh .ev-event-desc { color: #c4b5fd; }
.theme-pl .ev-event-desc { color: #fecaca; }
.theme-it .ev-event-desc { color: #bbf7d0; }
.theme-an .ev-event-desc { color: #fbcfe8; }

.ev-event-bonus {
  margin: 0.22rem 0 0;
  font-size: 0.54rem;
  color: #64748b;
}
.theme-il .ev-event-bonus { color: rgba(251, 191, 36, 0.75); }
.theme-bh .ev-event-bonus { color: rgba(196, 181, 253, 0.8); }
.theme-pl .ev-event-bonus { color: rgba(254, 202, 202, 0.85); }
.theme-it .ev-event-bonus { color: rgba(187, 247, 208, 0.85); }
.theme-an .ev-event-bonus { color: rgba(251, 207, 232, 0.85); }

.ev-countdown {
  color: inherit;
  font-variant-numeric: tabular-nums;
  opacity: 0.95;
}

.ev-event-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: flex-end;
}

.ev-event-points {
  width: 100%;
  padding: 0.38rem 0.48rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.28);
}
.theme-il .ev-event-points { border-color: rgba(251, 191, 36, 0.28); }
.theme-bh .ev-event-points { border-color: rgba(139, 92, 246, 0.28); }
.theme-pl .ev-event-points { border-color: rgba(220, 38, 38, 0.3); }
.theme-it .ev-event-points { border-color: rgba(22, 163, 74, 0.3); }
.theme-an .ev-event-points { border-color: rgba(236, 72, 153, 0.32); }

.ev-pts-label {
  font-size: 0.48rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
}
.ev-pts-val {
  display: block;
  font-size: 0.82rem;
  color: #e2e8f0;
  margin: 0.1rem 0 0.28rem;
}
.theme-il .ev-pts-val { color: #fde68a; }
.theme-bh .ev-pts-val { color: #ddd6fe; }
.theme-pl .ev-pts-val { color: #fecaca; }
.theme-it .ev-pts-val { color: #bbf7d0; }
.theme-an .ev-pts-val { color: #fbcfe8; }
.ev-pts-val small { font-size: 0.62em; font-weight: 500; color: #64748b; }
.ev-pts-bar {
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.ev-pts-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}
.theme-il .ev-pts-bar i { background: linear-gradient(90deg, #b45309, #fbbf24); }
.theme-bh .ev-pts-bar i { background: linear-gradient(90deg, #6d28d9, #a78bfa); }
.theme-pl .ev-pts-bar i { background: linear-gradient(90deg, #b91c1c, #f87171); }
.theme-it .ev-pts-bar i { background: linear-gradient(90deg, #15803d, #4ade80); }
.theme-sa .ev-event-header {
  border-color: rgba(59, 130, 246, 0.35);
  background: linear-gradient(135deg, rgba(12, 24, 48, 0.92), rgba(8, 16, 32, 0.86));
}
.theme-sa .ev-event-eyebrow { color: #93c5fd; }
.theme-sa .ev-event-header h2 { color: #eff6ff; }
.theme-sa .ev-event-desc { color: #bfdbfe; }
.theme-sa .ev-event-bonus { color: rgba(191, 219, 254, 0.85); }
.theme-sa .ev-event-points { border-color: rgba(59, 130, 246, 0.3); }
.theme-sa .ev-pts-val { color: #bfdbfe; }
.theme-sa .ev-pts-bar i { background: linear-gradient(90deg, #1d4ed8, #60a5fa); }
.theme-sa .ev-section { border-color: rgba(59, 130, 246, 0.16); }
.theme-sa .ev-section-title { color: #93c5fd; }
.theme-sa .sa-event-complete {
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.14);
  border: 1px solid rgba(59, 130, 246, 0.32);
}
.theme-bf .ev-event-header {
  border-color: rgba(64, 64, 64, 0.45);
  background: linear-gradient(135deg, rgba(12, 12, 16, 0.95), rgba(24, 24, 28, 0.9));
}
.theme-bf .ev-event-eyebrow { color: #d4d4d4; }
.theme-bf .ev-event-header h2 { color: #fafafa; }
.theme-bf .ev-event-desc { color: #a3a3a3; }
.theme-bf .ev-event-bonus { color: rgba(212, 212, 212, 0.85); }
.theme-bf .ev-event-points { border-color: rgba(82, 82, 82, 0.35); }
.theme-bf .ev-pts-val { color: #e5e5e5; }
.theme-bf .ev-pts-bar i { background: linear-gradient(90deg, #262626, #737373); }
.theme-bf .ev-section { border-color: rgba(82, 82, 82, 0.2); }
.theme-bf .ev-section-title { color: #d4d4d4; }
.theme-bf .bf-event-complete {
  color: #e5e5e5;
  background: rgba(38, 38, 38, 0.35);
  border: 1px solid rgba(115, 115, 115, 0.35);
}
.theme-bf .bf-collection-line { font-size: 0.58rem; color: #a3a3a3; margin: 0 0 0.45rem; }
.theme-bf .bf-upcoming-note { font-size: 0.58rem; color: #a3a3a3; }
.theme-ad .ev-event-header {
  border-color: rgba(196, 30, 58, 0.35);
  background: linear-gradient(135deg, rgba(20, 36, 24, 0.92), rgba(12, 20, 14, 0.88));
}
.theme-ad .ev-event-eyebrow { color: #fca5a5; }
.theme-ad .ev-event-header h2 { color: #fef2f2; }
.theme-ad .ev-event-desc { color: #bbf7d0; }
.theme-ad .ev-event-bonus { color: rgba(187, 247, 208, 0.85); }
.theme-ad .ev-event-points { border-color: rgba(22, 101, 52, 0.35); }
.theme-ad .ev-pts-val { color: #fecaca; }
.theme-ad .ev-pts-bar i { background: linear-gradient(90deg, #991b1b, #16a34a); }
.theme-ad .ev-section { border-color: rgba(22, 101, 52, 0.2); }
.theme-ad .ev-section-title { color: #86efac; }
.theme-ad .ad-event-complete {
  color: #fecaca;
  background: rgba(127, 29, 29, 0.2);
  border: 1px solid rgba(196, 30, 58, 0.35);
}
.ad-upcoming-note,
.ad-active-note {
  font-size: 0.58rem;
  color: #86efac;
  margin: 0 0 0.55rem;
  padding: 0 0.15rem;
}
.ad-calendar-section { margin-top: 0.35rem; }
.advent-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
}
@media (max-width: 720px) {
  .advent-calendar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .advent-calendar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.advent-door {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  padding: 0.38rem 0.28rem 0.42rem;
  border-radius: 5px;
  border: 1px solid rgba(22, 101, 52, 0.28);
  background: linear-gradient(160deg, rgba(12, 36, 20, 0.55), rgba(8, 18, 12, 0.72));
  text-align: center;
  min-height: 4.6rem;
  transition: border-color 0.15s, transform 0.12s;
}
.advent-door.locked {
  opacity: 0.55;
  border-color: rgba(51, 65, 85, 0.35);
  background: rgba(8, 12, 16, 0.55);
}
.advent-door.claimable {
  border-color: rgba(196, 30, 58, 0.55);
  box-shadow: 0 0 0 1px rgba(196, 30, 58, 0.15);
}
.advent-door.claimable:hover { transform: translateY(-1px); }
.advent-door.today {
  border-color: rgba(250, 204, 21, 0.55);
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.12);
}
.advent-door.claimed {
  border-color: rgba(22, 101, 52, 0.45);
  background: rgba(12, 36, 20, 0.35);
}
.advent-door.featured {
  border-color: rgba(250, 204, 21, 0.35);
}
.ad-door-num {
  font-size: 0.72rem;
  font-weight: 700;
  color: #fecaca;
  line-height: 1;
}
.ad-door-icon { font-size: 0.95rem; line-height: 1; }
.ad-door-special {
  font-size: 0.42rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fde68a;
}
.ad-door-label {
  margin: 0;
  font-size: 0.44rem;
  line-height: 1.25;
  color: #bbf7d0;
  flex: 1;
  display: flex;
  align-items: center;
}
.ad-door-foot {
  min-height: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ad-door-check { color: #4ade80; font-size: 0.7rem; }
.ad-door-lock { font-size: 0.55rem; opacity: 0.7; }
.advent-door .btn-ev-claim {
  font-size: 0.44rem;
  padding: 0.12rem 0.35rem;
}
.theme-an .ev-pts-bar i { background: linear-gradient(90deg, #be185d, #f472b6); }
.ev-pts-summary {
  display: block;
  margin-top: 0.18rem;
  font-size: 0.48rem;
  color: #64748b;
}

.ev-event-complete {
  padding: 0.35rem 0.5rem;
  margin-bottom: 0.45rem;
  font-size: 0.56rem;
  font-weight: 600;
  text-align: center;
  border-radius: 4px;
}

.ev-daily-card {
  margin-bottom: 0.5rem;
}

.ev-event-grid {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: 0.6rem;
  align-items: start;
}

.ev-event-aside .ev-tank-card {
  margin-bottom: 0;
  position: sticky;
  top: 0.35rem;
}

.ev-event-stack {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.ev-section {
  padding: 0.45rem 0.5rem;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.22);
}
.theme-il .ev-section { border-color: rgba(251, 191, 36, 0.12); }
.theme-bh .ev-section { border-color: rgba(139, 92, 246, 0.14); }
.theme-pl .ev-section { border-color: rgba(220, 38, 38, 0.16); }
.theme-it .ev-section { border-color: rgba(22, 163, 74, 0.16); }
.theme-an .ev-section { border-color: rgba(236, 72, 153, 0.18); }

.ev-section-title {
  margin: 0 0 0.35rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
}
.theme-il .ev-section-title { color: #fbbf24; }
.theme-bh .ev-section-title { color: #c4b5fd; }
.theme-pl .ev-section-title { color: #fca5a5; }
.theme-it .ev-section-title { color: #86efac; }
.theme-an .ev-section-title { color: #f9a8d4; }

.ev-missions-list {
  max-height: none;
  gap: 0.28rem;
}

.ev-mission-card {
  padding: 0.38rem 0.42rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.ev-mission-card.status-complete,
.ev-mission-card.status-claimed {
  border-color: rgba(255, 255, 255, 0.04);
  opacity: 0.88;
}
.theme-il .ev-mission-card.status-complete {
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(120, 80, 20, 0.12);
}
.theme-bh .ev-mission-card.status-complete {
  border-color: rgba(167, 139, 250, 0.35);
  background: rgba(50, 30, 80, 0.15);
}

.ev-reward-card {
  flex: 0 0 min(96px, 24vw);
  padding: 0.38rem 0.3rem 0.35rem;
}

.ev-tank-playstyle {
  margin-top: 0.35rem;
  font-size: 0.52rem;
}

/* Event-Buttons — einheitlich kompakt */
#panel-event .btn-ev-claim,
#panel-event .btn-ev-claim-all,
#panel-event .btn-ev-link {
  font-family: inherit;
  font-size: 0.5rem;
  padding: 0.16rem 0.3rem;
  line-height: 1.25;
  font-weight: 600;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}
#panel-event .btn-ev-claim-all {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
}
.event-theme-il #panel-event .btn-ev-claim,
.event-theme-il #panel-event .btn-ev-claim-all {
  border: 1px solid rgba(251, 191, 36, 0.4);
  background: rgba(120, 80, 20, 0.35);
  color: #fde68a;
}
.event-theme-il #panel-event .btn-ev-claim {
  border: none;
  background: linear-gradient(180deg, #d97706, #b45309);
  color: #fff;
}
.event-theme-bh #panel-event .btn-ev-claim,
.event-theme-bh #panel-event .btn-ev-claim-all {
  border: 1px solid rgba(139, 92, 246, 0.45);
  background: rgba(88, 52, 160, 0.25);
  color: #e9d5ff;
}
.event-theme-bh #panel-event .btn-ev-link {
  border: 1px solid rgba(139, 92, 246, 0.35);
  background: rgba(139, 92, 246, 0.1);
  color: #ddd6fe;
}
.theme-bh .ev-tank-card {
  background: rgba(30, 20, 50, 0.35);
  border-color: rgba(139, 92, 246, 0.22);
}
.theme-bh .ev-tank-card.owned {
  border-color: rgba(167, 139, 250, 0.4);
  background: rgba(40, 28, 70, 0.25);
}
.theme-bh .bh-daily-card { border-color: rgba(139, 92, 246, 0.22); background: rgba(30, 20, 50, 0.25); }
.theme-bh .bh-daily-card.claimable { border-color: rgba(167, 139, 250, 0.4); }
.theme-bh .bh-daily-card .il-daily-body h4 { color: #c4b5fd; }
.theme-bh .bh-event-complete {
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.3);
}
.theme-bh .bh-reward-card.featured {
  border-color: rgba(167, 139, 250, 0.55);
  background: rgba(50, 30, 80, 0.2);
}

.theme-pl .ev-mission-card.status-complete {
  border-color: rgba(248, 113, 113, 0.38);
  background: rgba(80, 20, 24, 0.18);
}
.event-theme-pl #panel-event .btn-ev-claim,
.event-theme-pl #panel-event .btn-ev-claim-all {
  border: 1px solid rgba(220, 38, 38, 0.45);
  background: rgba(127, 29, 29, 0.28);
  color: #fecaca;
}
.event-theme-pl #panel-event .btn-ev-claim {
  border: none;
  background: linear-gradient(180deg, #dc2626, #b91c1c);
  color: #fff;
}
.theme-pl .ev-tank-card {
  background: rgba(40, 14, 18, 0.35);
  border-color: rgba(220, 38, 38, 0.22);
}
.theme-pl .ev-tank-card.owned {
  border-color: rgba(248, 113, 113, 0.42);
  background: rgba(60, 18, 22, 0.28);
}
.theme-pl .pl-daily-card { border-color: rgba(220, 38, 38, 0.22); background: rgba(36, 12, 16, 0.28); }
.theme-pl .pl-daily-card.claimable { border-color: rgba(248, 113, 113, 0.42); }
.theme-pl .pl-daily-card .il-daily-body h4 { color: #fca5a5; }
.theme-pl .pl-event-complete {
  color: #fecaca;
  background: rgba(185, 28, 28, 0.14);
  border: 1px solid rgba(220, 38, 38, 0.32);
}
.theme-pl .pl-mark-shop-card.featured,
.theme-pl .pl-reward-card.featured {
  border-color: rgba(248, 113, 113, 0.5);
  background: rgba(60, 18, 22, 0.22);
}
.theme-it .ev-mission-card.status-complete {
  border-color: rgba(74, 222, 128, 0.38);
  background: rgba(20, 60, 32, 0.18);
}
.event-theme-it #panel-event .btn-ev-claim,
.event-theme-it #panel-event .btn-ev-claim-all {
  border: 1px solid rgba(22, 163, 74, 0.45);
  background: rgba(20, 83, 45, 0.28);
  color: #bbf7d0;
}
.event-theme-it #panel-event .btn-ev-claim {
  border: none;
  background: linear-gradient(180deg, #16a34a, #15803d);
  color: #fff;
}
.event-theme-sa #panel-event .btn-ev-claim,
.event-theme-sa #panel-event .btn-ev-claim-all {
  border: 1px solid rgba(59, 130, 246, 0.45);
  background: rgba(30, 58, 138, 0.28);
  color: #bfdbfe;
}
.event-theme-sa #panel-event .btn-ev-claim {
  border: none;
  background: linear-gradient(180deg, #2563eb, #1d4ed8);
  color: #fff;
}
.event-theme-bf #panel-event .btn-ev-claim,
.event-theme-bf #panel-event .btn-ev-claim-all {
  border: 1px solid rgba(115, 115, 115, 0.45);
  background: rgba(38, 38, 38, 0.35);
  color: #e5e5e5;
}
.event-theme-bf #panel-event .btn-ev-claim {
  border: none;
  background: linear-gradient(180deg, #525252, #262626);
  color: #fafafa;
}
.event-theme-ad #panel-event .btn-ev-claim,
.event-theme-ad #panel-event .btn-ev-claim-all {
  border: 1px solid rgba(196, 30, 58, 0.45);
  background: rgba(20, 36, 24, 0.35);
  color: #fecaca;
}
.event-theme-ad #panel-event .btn-ev-claim {
  border: none;
  background: linear-gradient(180deg, #b91c1c, #7f1d1d);
  color: #fff;
}
.theme-it .ev-tank-card {
  background: rgba(12, 36, 20, 0.35);
  border-color: rgba(22, 163, 74, 0.22);
}
.theme-it .ev-tank-card.owned {
  border-color: rgba(74, 222, 128, 0.42);
  background: rgba(20, 60, 32, 0.28);
}
.theme-it .it-daily-card { border-color: rgba(22, 163, 74, 0.22); background: rgba(12, 36, 20, 0.28); }
.theme-it .it-daily-card.claimable { border-color: rgba(74, 222, 128, 0.42); }
.theme-it .it-daily-card .il-daily-body h4 { color: #86efac; }
.theme-it .it-event-complete {
  color: #bbf7d0;
  background: rgba(21, 128, 61, 0.14);
  border: 1px solid rgba(22, 163, 74, 0.32);
}
.theme-it .it-mark-shop-card.featured,
.theme-it .it-reward-card.featured {
  border-color: rgba(74, 222, 128, 0.5);
  background: rgba(20, 60, 32, 0.22);
}
.theme-an .ev-mission-card.status-complete {
  border-color: rgba(244, 114, 182, 0.38);
  background: rgba(40, 12, 36, 0.22);
}
.event-theme-an #panel-event .btn-ev-claim,
.event-theme-an #panel-event .btn-ev-claim-all {
  border-color: rgba(236, 72, 153, 0.45);
  background: rgba(190, 24, 93, 0.22);
  color: #fce7f3;
}
.event-theme-an #panel-event .btn-ev-claim {
  border-color: rgba(244, 114, 182, 0.5);
  background: rgba(219, 39, 119, 0.28);
}
.theme-an .ev-tank-card {
  background: rgba(32, 10, 36, 0.35);
  border-color: rgba(236, 72, 153, 0.22);
}
.theme-an .ev-tank-card.owned {
  border-color: rgba(244, 114, 182, 0.42);
  background: rgba(48, 14, 44, 0.28);
}
.theme-an .an-daily-card { border-color: rgba(236, 72, 153, 0.22); background: rgba(32, 10, 36, 0.28); }
.theme-an .an-daily-card.claimable { border-color: rgba(244, 114, 182, 0.42); }
.theme-an .an-daily-card .il-daily-body h4 { color: #f9a8d4; }
.theme-an .an-event-complete {
  color: #fbcfe8;
  background: rgba(190, 24, 93, 0.14);
  border: 1px solid rgba(236, 72, 153, 0.32);
}
.theme-an .an-reward-card.featured {
  border-color: rgba(244, 114, 182, 0.5);
  background: rgba(48, 14, 44, 0.22);
}
.pl-crate-card {
  padding: 0.55rem 0.65rem;
  border-radius: 6px;
  border: 1px solid rgba(220, 38, 38, 0.28);
  background: linear-gradient(135deg, rgba(36, 12, 16, 0.75), rgba(18, 10, 12, 0.82));
}
.pl-crate-badge {
  display: inline-block;
  padding: 0.08rem 0.35rem;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fecaca;
  border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: 2px;
  margin-bottom: 0.25rem;
}
.pl-crate-head h4 {
  margin: 0.15rem 0;
  font-size: 0.72rem;
  color: #fef2f2;
}
.pl-crate-head p {
  margin: 0;
  font-size: 0.56rem;
  color: #fca5a5;
  line-height: 1.4;
}
.pl-crate-loot {
  margin: 0.4rem 0;
  padding-left: 1rem;
  font-size: 0.54rem;
  color: #fecaca;
  line-height: 1.5;
}
.pl-crate-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.35rem;
}
.pl-crate-price {
  font-size: 0.62rem;
  font-weight: 700;
  color: #fde68a;
}

.bh-partner-garage .wot-hangar-floor-line {
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.45), transparent);
}
.bh-partner-garage.bf-garage { /* BF hat Vorrang */ }

@media (max-width: 820px) {
  .ev-event-grid { grid-template-columns: 1fr; }
  .ev-event-aside .ev-tank-card { position: static; }
  .ev-event-header-aside { align-items: stretch; width: 100%; }
  .ev-event-actions { justify-content: flex-start; }
}

@media (max-width: 600px) {
  .ev-event-shell { padding: 0.5rem 0.55rem 0.85rem; }
  .ev-tank-playstyle { grid-template-columns: 1fr; }
}

.il-event-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.il-event-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
  -webkit-mask-image: radial-gradient(ellipse 42% 34% at 50% 40%, transparent 62%, #000 100%);
  mask-image: radial-gradient(ellipse 42% 34% at 50% 40%, transparent 62%, #000 100%);
}

.il-event-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 6, 4, 0.35) 0%, rgba(8, 6, 4, 0.02) 22%, rgba(8, 6, 4, 0.45) 58%, rgba(8, 6, 4, 0.88) 100%),
    linear-gradient(90deg, rgba(8, 6, 4, 0.55) 0%, transparent 14%, transparent 86%, rgba(8, 6, 4, 0.55) 100%);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 42% 34% at 50% 40%, transparent 58%, #000 100%);
  mask-image: radial-gradient(ellipse 42% 34% at 50% 40%, transparent 58%, #000 100%);
}

.il-event-showcase {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  width: min(640px, 88vw);
  height: min(360px, 40vh);
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.il-showcase-glow {
  position: absolute;
  inset: 8% 4% 18%;
  background: radial-gradient(ellipse at center, rgba(251, 191, 36, 0.22) 0%, rgba(251, 191, 36, 0.06) 45%, transparent 72%);
  filter: blur(8px);
}

.il-showcase-frame {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(251, 191, 36, 0.5);
  border-radius: 10px;
  box-shadow:
    0 0 48px rgba(251, 191, 36, 0.2),
    inset 0 0 40px rgba(0, 0, 0, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  background: transparent;
  animation: il-frame-pulse 3.5s ease-in-out infinite;
}

@keyframes il-frame-pulse {
  0%, 100% { border-color: rgba(251, 191, 36, 0.45); box-shadow: 0 0 48px rgba(251, 191, 36, 0.18), inset 0 0 40px rgba(0, 0, 0, 0.2); }
  50% { border-color: rgba(251, 191, 36, 0.72); box-shadow: 0 0 64px rgba(251, 191, 36, 0.32), inset 0 0 40px rgba(0, 0, 0, 0.2); }
}

.il-showcase-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: 10px;
}

.il-showcase-particles i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fbbf24;
  opacity: 0;
  animation: il-sparkle 4s ease-in-out infinite;
}

.il-showcase-particles i:nth-child(1) { left: 12%; top: 22%; animation-delay: 0s; }
.il-showcase-particles i:nth-child(2) { left: 78%; top: 18%; animation-delay: 0.7s; }
.il-showcase-particles i:nth-child(3) { left: 88%; top: 55%; animation-delay: 1.4s; }
.il-showcase-particles i:nth-child(4) { left: 22%; top: 72%; animation-delay: 2.1s; }
.il-showcase-particles i:nth-child(5) { left: 55%; top: 12%; animation-delay: 2.8s; }
.il-showcase-particles i:nth-child(6) { left: 42%; top: 68%; animation-delay: 3.5s; }

@keyframes il-sparkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 0.85; transform: scale(1.4); box-shadow: 0 0 8px #fbbf24; }
}

.il-showcase-hint {
  position: relative;
  z-index: 1;
  margin: 0 0 0.15rem;
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(253, 230, 138, 0.55);
}

.il-showcase-frame::before,
.il-showcase-frame::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(251, 191, 36, 0.75);
}

.il-showcase-frame::before {
  top: 8px;
  left: 8px;
  border-right: none;
  border-bottom: none;
  border-radius: 4px 0 0 0;
}

.il-showcase-frame::after {
  bottom: 8px;
  right: 8px;
  border-left: none;
  border-top: none;
  border-radius: 0 0 4px 0;
}

.il-showcase-label {
  position: relative;
  z-index: 1;
  margin: 0 0 0.35rem;
  padding: 0.22rem 0.65rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fde68a;
  background: rgba(8, 6, 4, 0.72);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 3px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

.il-event-content {
  position: relative;
  z-index: 3;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  pointer-events: auto;
  background: transparent;
}

.il-event-overlay {
  padding: 0;
  pointer-events: auto;
}

.il-event-head-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

.il-countdown {
  color: #fde68a;
  font-variant-numeric: tabular-nums;
}

.il-event-bonus {
  margin: 0.25rem 0 0;
  font-size: 0.58rem;
  color: rgba(251, 191, 36, 0.75);
}

.il-pts-val small {
  font-size: 0.62em;
  font-weight: 500;
  color: #94a3b8;
}

.il-pts-summary {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.52rem;
  color: #64748b;
}

.btn-il-claim-all {
  font-size: 0.58rem;
  padding: 0.32rem 0.55rem;
  border: 1px solid rgba(251, 191, 36, 0.5);
  border-radius: 3px;
  background: rgba(120, 80, 20, 0.35);
  color: #fde68a;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}

.btn-il-claim-all:hover {
  background: rgba(180, 120, 30, 0.5);
  border-color: rgba(251, 191, 36, 0.75);
}

.il-event-complete {
  padding: 0.4rem 0.55rem;
  margin-bottom: 0.45rem;
  font-size: 0.62rem;
  font-weight: 600;
  color: #fde68a;
  text-align: center;
  background: linear-gradient(90deg, rgba(120, 80, 20, 0.25), rgba(251, 191, 36, 0.15), rgba(120, 80, 20, 0.25));
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 4px;
  animation: il-frame-pulse 2.5s ease-in-out infinite;
}

.il-daily-card {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  padding: 0.45rem 0.55rem;
  margin-bottom: 0.45rem;
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.18);
  border-radius: 4px;
}

.il-daily-card.claimable {
  border-color: rgba(251, 191, 36, 0.5);
  background: rgba(120, 80, 20, 0.2);
}

.il-daily-icon {
  font-size: 1.2rem;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.5));
}

.il-daily-body h4 {
  margin: 0;
  font-size: 0.68rem;
  color: #fde68a;
}

.il-daily-body p {
  margin: 0.12rem 0 0;
  font-size: 0.58rem;
  color: #94a3b8;
}

.il-daily-foot { margin-top: 0.3rem; }

.btn-il-claim-daily {
  font-size: 0.58rem;
  padding: 0.28rem 0.48rem;
  border: none;
  border-radius: 2px;
  background: linear-gradient(180deg, #eab308, #ca8a04);
  color: #1a1410;
  cursor: pointer;
  font-weight: 700;
}

.il-tank-hero.owned {
  border-color: rgba(74, 222, 128, 0.35);
  background: rgba(20, 80, 40, 0.12);
}

.il-owned-tag {
  font-size: 0.55rem;
  padding: 0.1rem 0.35rem;
  margin-left: 0.25rem;
  vertical-align: middle;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.4);
  border-radius: 2px;
  color: #86efac;
  font-weight: 600;
}

.il-tank-playstyle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin-top: 0.45rem;
  font-size: 0.56rem;
}

.il-tank-playstyle strong {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.52rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.il-play-pros strong { color: #86efac; }
.il-play-cons strong { color: #fca5a5; }

.il-tank-playstyle ul {
  margin: 0;
  padding-left: 1rem;
  color: #94a3b8;
  line-height: 1.4;
}

@media (max-width: 600px) {
  .il-tank-playstyle { grid-template-columns: 1fr; }
}

.il-rewards-section,
.il-missions-section {
  margin-top: 0.5rem;
}

.il-rewards-section h3,
.il-missions-section h3 {
  font-size: 0.68rem;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.35rem;
}

.il-rewards-rail-wrap {
  position: relative;
  margin-bottom: 0.35rem;
}

.il-rewards-rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  z-index: 0;
  pointer-events: none;
}

.il-rewards-rail > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #b45309, #fbbf24);
  border-radius: 2px;
  transition: width 0.35s ease;
}

.il-rewards-track {
  display: flex;
  flex-direction: row;
  gap: 0.35rem;
  overflow-x: auto;
  padding: 0.35rem 0.15rem 0.45rem;
  scroll-snap-type: x proximity;
  max-height: none;
}

.il-reward-card {
  flex: 0 0 min(108px, 28vw);
  scroll-snap-align: start;
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 0.45rem 0.35rem 0.4rem;
  opacity: 0.65;
  transition: opacity 0.2s, transform 0.2s;
}

.il-reward-card.reached,
.il-reward-card.claimable,
.il-reward-card.claimed {
  opacity: 1;
}

.il-reward-card.claimable {
  transform: scale(1.04);
  animation: il-reward-glow 1.8s ease-in-out infinite;
}

@keyframes il-reward-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(251, 191, 36, 0); }
  50% { box-shadow: 0 0 16px rgba(251, 191, 36, 0.35); }
}

.il-reward-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.4rem;
  margin-bottom: 0.2rem;
}

.il-reward-visual.tank {
  position: relative;
}

.il-reward-icon-lg {
  font-size: 1.35rem;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.il-reward-icon-lg.premium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
}

.il-reward-icon-badge {
  position: absolute;
  top: -2px;
  right: -4px;
  font-size: 0.45rem;
  color: #fbbf24;
}

.il-reward-lock {
  font-size: 0.52rem;
  color: #64748b;
}

.il-missions-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 200px;
  overflow-y: auto;
  padding-right: 0.15rem;
}

.il-mission-card {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
}

.il-mission-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 4px;
}

.il-mission-inner { flex: 1; min-width: 0; }

/* Garage Event-Banner + Feed-Sidebar (linke Spalte) */
.wot-garage-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 0;
  flex: 1 1 auto;
  max-height: min(52vh, 22rem);
  pointer-events: none;
}
.wot-garage-sidebar > * { pointer-events: auto; }

.wot-panel-garage > .wot-garage-event-stack,
.wot-garage-sidebar > .wot-garage-event-stack {
  position: relative;
  top: auto;
  left: auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.28rem;
  max-width: none;
  width: 100%;
  pointer-events: none;
  padding: 0.42rem 0.48rem 0.48rem;
  background:
    linear-gradient(165deg, rgba(14, 18, 28, 0.9), rgba(6, 9, 14, 0.84));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-top: 2px solid #e8a317;
  border-radius: 2px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(10px);
}

.wot-event-strip-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.12rem;
  pointer-events: none;
}

.wot-event-strip-label {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
}

.wot-event-strip-badge {
  font-size: 0.5rem;
  font-weight: 700;
  padding: 0.12rem 0.42rem;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.42);
  color: #fde68a;
  letter-spacing: 0.04em;
}

.wot-event-strip-track {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.28rem;
  width: 100%;
  pointer-events: auto;
  max-height: min(22vh, 9.5rem);
  overflow-y: auto;
  padding-right: 0.1rem;
  scrollbar-width: thin;
}

.wot-event-strip-track > button {
  pointer-events: auto;
  position: relative;
  width: 100%;
  max-width: none;
}

.wot-event-strip-track [class$="-garage-banner-text"] {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.il-garage-banner,
.bz-garage-banner,
.werft-garage-banner,
.sa-garage-banner,
.bf-garage-banner,
.ad-garage-banner,
.wf-garage-banner,
.bh-garage-banner,
.pl-garage-banner,
.it-garage-banner,
.an-garage-banner,
.lf-garage-banner,
.dr-garage-banner,
.rf-garage-banner,
.eu-garage-banner,
.cm-garage-banner,
.cf-garage-banner,
.cw-garage-banner,
.s1f-garage-banner {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.65rem;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transition: border-color 0.15s, transform 0.15s;
  font-family: inherit;
}

[class$="-garage-banner"].is-upcoming {
  opacity: 0.88;
  border-style: dashed;
}
[class$="-garage-banner"].is-upcoming [class$="-garage-banner-cta"] {
  color: rgba(255, 255, 255, 0.55);
}

.il-garage-banner {
  border: 1px solid rgba(251, 191, 36, 0.45);
  background: linear-gradient(90deg, rgba(20, 16, 10, 0.92), rgba(80, 55, 15, 0.85), rgba(20, 16, 10, 0.92));
  color: #fde68a;
}

.il-garage-banner:hover {
  border-color: rgba(251, 191, 36, 0.75);
  transform: translateY(-1px);
}

.il-garage-banner.has-claim {
  animation: il-banner-pulse 2s ease-in-out infinite;
}

@keyframes il-banner-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: 0 4px 24px rgba(251, 191, 36, 0.35); }
}

.il-garage-banner-icon { font-size: 0.9rem; }

.il-garage-banner-timer {
  padding: 0.1rem 0.35rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
  color: #fbbf24;
}

.il-garage-banner-cta {
  font-size: 0.55rem;
  color: rgba(253, 230, 138, 0.7);
  letter-spacing: 0.04em;
}

@media (max-width: 700px) {
  .il-garage-banner-text,
  .il-garage-banner-cta { display: none; }
}

.bh-garage-banner {
  border: 1px solid rgba(139, 92, 246, 0.45);
  background: linear-gradient(90deg, rgba(12, 10, 24, 0.94), rgba(45, 28, 80, 0.88), rgba(12, 10, 24, 0.94));
  color: #ddd6fe;
}
.bh-garage-banner:hover {
  border-color: rgba(167, 139, 250, 0.75);
  transform: translateY(-1px);
}
.bh-garage-banner.has-claim {
  animation: bh-banner-pulse 2s ease-in-out infinite;
}
@keyframes bh-banner-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: 0 4px 24px rgba(139, 92, 246, 0.35); }
}
.bh-garage-banner-icon { font-size: 0.9rem; }
.bh-garage-banner-timer {
  padding: 0.1rem 0.35rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
  color: #c4b5fd;
}
.bh-garage-banner-cta {
  font-size: 0.55rem;
  color: rgba(221, 214, 254, 0.7);
  letter-spacing: 0.04em;
}

.pl-garage-banner {
  border: 1px solid rgba(220, 38, 38, 0.45);
  background: linear-gradient(90deg, rgba(24, 10, 12, 0.94), rgba(80, 20, 28, 0.88), rgba(24, 10, 12, 0.94));
  color: #fecaca;
}
.pl-garage-banner:hover {
  border-color: rgba(248, 113, 113, 0.7);
  transform: translateY(-1px);
}
.pl-garage-banner.has-claim {
  animation: pl-banner-pulse 2s ease-in-out infinite;
}
@keyframes pl-banner-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: 0 4px 24px rgba(220, 38, 38, 0.35); }
}
.pl-garage-banner-icon { font-size: 0.9rem; }
.pl-garage-banner-timer {
  padding: 0.1rem 0.35rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
  color: #f87171;
}
.pl-garage-banner-cta {
  font-size: 0.55rem;
  color: rgba(254, 202, 202, 0.75);
  letter-spacing: 0.04em;
}

.sa-garage-banner {
  border: 1px solid rgba(59, 130, 246, 0.45);
  background: linear-gradient(90deg, rgba(12, 20, 36, 0.94), rgba(30, 58, 95, 0.88), rgba(12, 20, 36, 0.94));
  color: #bfdbfe;
}
.sa-garage-banner:hover {
  border-color: rgba(96, 165, 250, 0.7);
  transform: translateY(-1px);
}
.sa-garage-banner.has-claim {
  animation: sa-banner-pulse 2s ease-in-out infinite;
}
@keyframes sa-banner-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: 0 4px 24px rgba(59, 130, 246, 0.35); }
}
.sa-garage-banner-icon { font-size: 0.9rem; }
.sa-garage-banner-timer {
  padding: 0.1rem 0.35rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
  color: #60a5fa;
}
.sa-garage-banner-cta {
  font-size: 0.55rem;
  color: rgba(191, 219, 254, 0.75);
  letter-spacing: 0.04em;
}

.bf-garage-banner {
  border: 1px solid rgba(30, 30, 30, 0.65);
  background: linear-gradient(90deg, rgba(8, 8, 12, 0.96), rgba(28, 28, 32, 0.92), rgba(8, 8, 12, 0.96));
  color: #e5e5e5;
}
.bf-garage-banner:hover {
  border-color: rgba(120, 120, 120, 0.75);
  transform: translateY(-1px);
}
.bf-garage-banner.has-claim {
  animation: bf-banner-pulse 2s ease-in-out infinite;
}
@keyframes bf-banner-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: 0 4px 24px rgba(80, 80, 80, 0.45); }
}
.bf-garage-banner-icon { font-size: 0.9rem; }
.bf-garage-banner-timer {
  padding: 0.1rem 0.35rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
  color: #a3a3a3;
}
.bf-garage-banner-cta {
  font-size: 0.55rem;
  color: rgba(212, 212, 212, 0.75);
  letter-spacing: 0.04em;
}

.ad-garage-banner {
  border: 1px solid rgba(22, 101, 52, 0.45);
  background: linear-gradient(90deg, rgba(10, 24, 14, 0.96), rgba(127, 29, 29, 0.35), rgba(10, 24, 14, 0.96));
  color: #fecaca;
}
.ad-garage-banner:hover {
  border-color: rgba(196, 30, 58, 0.65);
  transform: translateY(-1px);
}
.ad-garage-banner.has-claim {
  animation: ad-banner-pulse 2s ease-in-out infinite;
}
@keyframes ad-banner-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: 0 4px 24px rgba(196, 30, 58, 0.35); }
}
.ad-garage-banner-icon { font-size: 0.9rem; }
.ad-garage-banner-timer {
  padding: 0.1rem 0.35rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
  color: #86efac;
}
.ad-garage-banner-cta {
  font-size: 0.55rem;
  color: rgba(187, 247, 208, 0.75);
  letter-spacing: 0.04em;
}

.it-garage-banner {
  border: 1px solid rgba(22, 163, 74, 0.45);
  background: linear-gradient(90deg, rgba(10, 24, 14, 0.94), rgba(20, 60, 32, 0.88), rgba(10, 24, 14, 0.94));
  color: #bbf7d0;
}
.it-garage-banner:hover {
  border-color: rgba(74, 222, 128, 0.7);
  transform: translateY(-1px);
}
.it-garage-banner.has-claim {
  animation: it-banner-pulse 2s ease-in-out infinite;
}
@keyframes it-banner-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: 0 4px 24px rgba(22, 163, 74, 0.35); }
}
.it-garage-banner-icon { font-size: 0.9rem; }
.it-garage-banner-timer {
  padding: 0.1rem 0.35rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
  color: #4ade80;
}
.it-garage-banner-cta {
  font-size: 0.55rem;
  color: rgba(187, 247, 208, 0.75);
  letter-spacing: 0.04em;
}

.an-garage-banner {
  border: 1px solid rgba(236, 72, 153, 0.45);
  background: linear-gradient(90deg, rgba(24, 8, 28, 0.94), rgba(72, 20, 56, 0.88), rgba(24, 8, 28, 0.94));
  color: #fbcfe8;
}
.an-garage-banner:hover {
  border-color: rgba(244, 114, 182, 0.75);
  transform: translateY(-1px);
}
.an-garage-banner.has-claim {
  animation: an-banner-pulse 2s ease-in-out infinite;
}
@keyframes an-banner-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: 0 4px 24px rgba(236, 72, 153, 0.35); }
}
.an-garage-banner-icon { font-size: 0.9rem; }
.an-garage-banner-timer {
  padding: 0.1rem 0.35rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
  color: #f472b6;
}
.an-garage-banner-cta {
  font-size: 0.55rem;
  color: rgba(251, 207, 232, 0.75);
  letter-spacing: 0.04em;
}

.dr-garage-banner {
  border-color: rgba(245, 158, 11, 0.35);
  background: linear-gradient(135deg, rgba(40, 28, 8, 0.92), rgba(24, 18, 8, 0.95));
  color: #fde68a;
}
.dr-garage-banner:hover {
  border-color: rgba(251, 191, 36, 0.55);
  background: linear-gradient(135deg, rgba(55, 38, 10, 0.95), rgba(30, 22, 10, 0.98));
}
.dr-garage-banner.has-claim {
  animation: il-banner-pulse 2.2s ease-in-out infinite;
  border-color: rgba(251, 191, 36, 0.65);
}
.dr-garage-banner-icon { font-size: 0.9rem; color: #fbbf24; }
.dr-garage-banner-timer {
  margin-left: auto;
  font-size: 0.55rem;
  font-variant-numeric: tabular-nums;
  color: #fbbf24;
}
.dr-garage-banner-cta {
  font-size: 0.55rem;
  color: rgba(253, 230, 138, 0.75);
  letter-spacing: 0.04em;
}

.rf-garage-banner {
  border: 1px solid rgba(16, 185, 129, 0.4);
  background: linear-gradient(90deg, rgba(8, 24, 20, 0.94), rgba(16, 60, 48, 0.88), rgba(8, 24, 20, 0.94));
  color: #a7f3d0;
}
.rf-garage-banner:hover {
  border-color: rgba(52, 211, 153, 0.7);
  transform: translateY(-1px);
}
.rf-garage-banner.has-claim {
  animation: rf-banner-pulse 2s ease-in-out infinite;
}
@keyframes rf-banner-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: 0 4px 24px rgba(16, 185, 129, 0.35); }
}
.rf-garage-banner-icon { font-size: 0.9rem; color: #34d399; }
.rf-garage-banner-timer {
  padding: 0.1rem 0.35rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
  color: #6ee7b7;
}
.rf-garage-banner-cta {
  font-size: 0.55rem;
  color: rgba(167, 243, 208, 0.75);
  letter-spacing: 0.04em;
}

.eu-garage-banner {
  border: 1px solid rgba(255, 206, 0, 0.4);
  background:
    linear-gradient(90deg,
      rgba(26, 26, 26, 0.96) 0%,
      rgba(26, 26, 26, 0.92) 28%,
      rgba(200, 16, 46, 0.88) 48%,
      rgba(200, 16, 46, 0.88) 62%,
      rgba(180, 140, 0, 0.9) 82%,
      rgba(255, 206, 0, 0.88) 100%);
  color: #fef3c7;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}
.eu-garage-banner:hover {
  border-color: rgba(255, 206, 0, 0.65);
  transform: translateY(-1px);
  filter: brightness(1.06);
}
.eu-garage-banner.has-claim {
  animation: eu-banner-pulse 2s ease-in-out infinite;
}
@keyframes eu-banner-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: 0 4px 24px rgba(200, 16, 46, 0.35), 0 0 12px rgba(255, 206, 0, 0.2); }
}
.eu-garage-banner-icon { font-size: 0.9rem; }
.eu-garage-banner-timer {
  margin-left: auto;
  padding: 0.1rem 0.35rem;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
  color: #ffce00;
}
.eu-garage-banner-cta {
  font-size: 0.55rem;
  color: rgba(254, 243, 199, 0.85);
  letter-spacing: 0.04em;
}

.cm-garage-banner {
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.94), rgba(51, 65, 85, 0.88), rgba(15, 23, 42, 0.94));
  color: #e2e8f0;
}
.cm-garage-banner:hover {
  border-color: rgba(203, 213, 225, 0.7);
  transform: translateY(-1px);
}
.cm-garage-banner.has-claim {
  animation: cm-banner-pulse 2s ease-in-out infinite;
}
@keyframes cm-banner-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: 0 4px 24px rgba(148, 163, 184, 0.4); }
}
.cm-garage-banner-icon { font-size: 0.9rem; }
.cm-garage-banner-timer {
  margin-left: auto;
  padding: 0.1rem 0.35rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
  color: #cbd5e1;
}
.cm-garage-banner-cta {
  font-size: 0.55rem;
  color: rgba(226, 232, 240, 0.7);
  letter-spacing: 0.04em;
}

.cf-garage-banner {
  border: 1px solid rgba(56, 189, 248, 0.45);
  background: linear-gradient(90deg, rgba(8, 20, 32, 0.94), rgba(14, 60, 90, 0.88), rgba(8, 20, 32, 0.94));
  color: #bae6fd;
}
.cf-garage-banner:hover {
  border-color: rgba(125, 211, 252, 0.75);
  transform: translateY(-1px);
}
.cf-garage-banner.has-claim {
  animation: cf-banner-pulse 2s ease-in-out infinite;
}
@keyframes cf-banner-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: 0 4px 24px rgba(56, 189, 248, 0.35); }
}
.cf-garage-banner-icon { font-size: 0.9rem; }
.cf-garage-banner-timer {
  margin-left: auto;
  padding: 0.1rem 0.35rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
  color: #7dd3fc;
}
.cf-garage-banner-cta {
  font-size: 0.55rem;
  color: rgba(186, 230, 253, 0.75);
  letter-spacing: 0.04em;
}

.cw-garage-banner {
  border: 1px solid rgba(134, 239, 172, 0.4);
  background: linear-gradient(90deg, rgba(10, 24, 16, 0.94), rgba(30, 70, 40, 0.88), rgba(10, 24, 16, 0.94));
  color: #bbf7d0;
}
.cw-garage-banner:hover {
  border-color: rgba(134, 239, 172, 0.7);
  transform: translateY(-1px);
}
.cw-garage-banner.has-claim {
  animation: cw-banner-pulse 2s ease-in-out infinite;
}
@keyframes cw-banner-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: 0 4px 24px rgba(74, 222, 128, 0.35); }
}
.cw-garage-banner-icon { font-size: 0.9rem; }
.cw-garage-banner-timer {
  margin-left: auto;
  padding: 0.1rem 0.35rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
  color: #86efac;
}
.cw-garage-banner-cta {
  font-size: 0.55rem;
  color: rgba(187, 247, 208, 0.75);
  letter-spacing: 0.04em;
}

.s1f-garage-banner {
  border: 1px solid rgba(245, 158, 11, 0.5);
  background: linear-gradient(90deg, rgba(20, 12, 6, 0.95), rgba(90, 50, 10, 0.9), rgba(20, 12, 6, 0.95));
  color: #fde68a;
}
.s1f-garage-banner:hover {
  border-color: rgba(251, 191, 36, 0.8);
  transform: translateY(-1px);
}
.s1f-garage-banner.has-claim {
  animation: s1f-banner-pulse 2s ease-in-out infinite;
}
@keyframes s1f-banner-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: 0 4px 24px rgba(245, 158, 11, 0.4); }
}
.s1f-garage-banner-icon { font-size: 0.9rem; }
.s1f-garage-banner-timer {
  margin-left: auto;
  padding: 0.1rem 0.35rem;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
  color: #fbbf24;
}
.s1f-garage-banner-cta {
  font-size: 0.55rem;
  color: rgba(253, 230, 138, 0.75);
  letter-spacing: 0.04em;
}

[class$="-garage-banner-claim"] {
  flex-shrink: 0;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.25);
  border: 1px solid rgba(245, 158, 11, 0.55);
  color: #fde68a;
  font-size: 0.52rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Garage Feed / Slidebar */
.wot-garage-rail {
  position: relative;
  left: auto;
  bottom: auto;
  z-index: 2;
  width: 100%;
  max-height: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  pointer-events: auto;
  min-height: 0;
  flex: 1 1 auto;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-top: 2px solid #e8a317;
  border-radius: 2px;
  background:
    linear-gradient(165deg, rgba(14, 18, 28, 0.9), rgba(6, 9, 14, 0.84));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.wot-garage-rail[data-open="0"] {
  width: 100%;
  max-height: none;
  flex: 0 0 auto;
}
.wot-garage-rail[data-open="0"] .wot-garage-rail-body,
.wot-garage-rail[data-open="0"] .wot-garage-rail-tabs {
  display: none;
}
.wot-garage-rail-head {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.wot-garage-rail-toggle {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.38rem 0.5rem;
  border: none;
  border-right: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(0, 0, 0, 0.18);
  color: #cbd5e1;
  font-family: inherit;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
  flex-shrink: 0;
}
.wot-garage-rail-toggle:hover {
  border-color: rgba(232, 163, 23, 0.35);
  color: #f5c84a;
  background: rgba(232, 163, 23, 0.08);
}
.wot-garage-rail-toggle-ico {
  font-size: 0.68rem;
  opacity: 0.85;
}
.wot-garage-rail-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}
.wot-garage-rail-tabs {
  display: flex;
  gap: 0;
  flex: 1;
  border-bottom: none;
  flex-shrink: 0;
}
.wot-garage-rail-tab {
  flex: 1;
  padding: 0.38rem 0.35rem;
  border: none;
  background: transparent;
  color: #64748b;
  font-family: inherit;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.wot-garage-rail-tab:hover { color: #94a3b8; }
.wot-garage-rail-tab.selected {
  color: #f5c84a;
  background: rgba(232, 163, 23, 0.08);
  box-shadow: inset 0 -2px 0 #e8a317;
}
.wot-garage-rail-scroll {
  overflow-y: auto;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  scrollbar-width: thin;
  max-height: min(22vh, 11rem);
  min-height: 0;
}
.wot-garage-rail-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.4rem;
  align-items: start;
  padding: 0.38rem 0.42rem;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.wot-garage-rail-card:hover {
  border-color: rgba(232, 163, 23, 0.42);
  background: rgba(232, 163, 23, 0.07);
}
.wot-garage-rail-card-ico {
  font-size: 0.8rem;
  line-height: 1;
  margin-top: 0.05rem;
}
.wot-garage-rail-card-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.wot-garage-rail-card-tag {
  font-size: 0.46rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
}
.wot-garage-rail-card-tag.is-hot { color: #f5c84a; }
.wot-garage-rail-card-tag.is-news { color: #7dd3fc; }
.wot-garage-rail-card-title {
  font-size: 0.64rem;
  font-weight: 700;
  color: #e8edf4;
  line-height: 1.2;
}
.wot-garage-rail-card-sub {
  font-size: 0.52rem;
  color: #94a3b8;
  line-height: 1.35;
}
.wot-garage-rail-empty {
  margin: 0;
  padding: 0.65rem 0.35rem;
  font-size: 0.56rem;
  color: #64748b;
  text-align: center;
}

@media (max-width: 900px) {
  .wot-garage-sidebar {
    max-height: min(36vh, 16rem);
  }
  .wot-garage-rail-scroll { max-height: min(16vh, 8.5rem); }
}
@media (max-width: 700px) {
  .cm-garage-banner-text,
  .cm-garage-banner-cta,
  .cf-garage-banner-text,
  .cf-garage-banner-cta,
  .cw-garage-banner-text,
  .cw-garage-banner-cta,
  .s1f-garage-banner-text,
  .s1f-garage-banner-cta { display: none; }
}

.theme-bh .bh-event-complete {
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.3);
}
.bh-partner-garage .wot-hangar-floor-line {
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.45), transparent);
}
.bh-partner-garage.bf-garage { /* BF hat Vorrang */ }

.wot-event-live-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.4rem 0.55rem;
  margin-bottom: 0.45rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.wot-event-live-bar.hidden { display: none; }
.wot-event-live-chip {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  padding: 0.32rem 0.45rem;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid rgba(56, 189, 248, 0.25);
  background: rgba(56, 189, 248, 0.06);
  text-align: left;
}
.wot-event-live-chip:hover {
  border-color: rgba(56, 189, 248, 0.45);
  background: rgba(56, 189, 248, 0.1);
}
.wot-event-live-label {
  font-size: 0.58rem;
  font-weight: 700;
  color: #e2e8f0;
}
.wot-event-live-cd {
  font-size: 0.52rem;
  color: #7dd3fc;
  font-variant-numeric: tabular-nums;
}
.wot-event-live-chip.is-soon {
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.08);
}
.wot-event-live-chip.is-soon .wot-event-live-cd {
  color: #fbbf24;
}
.ev-upcoming-banner {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0 0 0.65rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(251, 191, 36, 0.28);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(15, 23, 42, 0.35));
  color: #fde68a;
}
.ev-upcoming-banner strong {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ev-upcoming-banner span {
  font-size: 0.58rem;
  color: #cbd5e1;
}
.ev-upcoming-banner .ev-countdown {
  color: #fbbf24;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.wot-event-tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.45rem 0.65rem 0.35rem;
  position: relative;
  z-index: 4;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(8, 10, 16, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  -webkit-overflow-scrolling: touch;
}
.wot-event-tabs::-webkit-scrollbar { display: none; }
.wot-event-tab.hidden { display: none; }
.wot-event-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 42vh;
  padding: 2rem 1.5rem;
  text-align: center;
  position: relative;
  z-index: 4;
}
.wot-event-empty.hidden { display: none; }
.wot-event-empty-icon { font-size: 2rem; opacity: 0.85; }
.wot-event-empty-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #e2e8f0;
}
.wot-event-empty-desc {
  margin: 0;
  max-width: 28rem;
  font-size: 0.72rem;
  line-height: 1.5;
  color: #94a3b8;
}
.wot-event-empty-next {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fbbf24;
}
.wot-event-tab {
  flex: 0 0 auto;
  padding: 0.35rem 0.72rem;
  font-size: 0.58rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  color: #64748b;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.wot-event-tab.selected {
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.12);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.1);
}
.wot-event-tab.tab-bh.selected {
  color: #ddd6fe;
  border-color: rgba(139, 92, 246, 0.45);
  background: rgba(88, 52, 160, 0.18);
}
.wot-event-tab.tab-pl.selected {
  color: #fecaca;
  border-color: rgba(220, 38, 38, 0.45);
  background: rgba(127, 29, 29, 0.2);
}
.wot-event-tab.tab-it.selected {
  color: #bbf7d0;
  border-color: rgba(22, 163, 74, 0.45);
  background: rgba(20, 83, 45, 0.2);
}
.wot-event-tab.tab-sa.selected {
  color: #bfdbfe;
  border-color: rgba(59, 130, 246, 0.45);
  background: rgba(30, 58, 138, 0.22);
}
.wot-event-tab.tab-bf.selected {
  color: #e5e5e5;
  border-color: rgba(115, 115, 115, 0.5);
  background: rgba(38, 38, 38, 0.35);
}
.wot-event-tab.tab-ad.selected {
  color: #fecaca;
  border-color: rgba(196, 30, 58, 0.45);
  background: rgba(20, 36, 24, 0.35);
}
.wot-event-tab.tab-bz.selected {
  color: #bae6fd;
  border-color: rgba(56, 189, 248, 0.45);
  background: rgba(12, 74, 110, 0.22);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.1);
}
.wot-event-tab.tab-an.selected {
  color: #fbcfe8;
  border-color: rgba(236, 72, 153, 0.45);
  background: rgba(131, 24, 67, 0.22);
}
.wot-event-tab.tab-dr.selected {
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(120, 80, 10, 0.28);
}

.wot-event-tab-panel[data-event-panel="dublonen-rausch"] .dr-event-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(245, 158, 11, 0.14), transparent 60%),
    radial-gradient(ellipse 60% 40% at 20% 100%, rgba(168, 85, 247, 0.1), transparent 55%),
    linear-gradient(180deg, rgba(18, 14, 8, 0.95), rgba(10, 8, 6, 0.98));
}
.wot-event-tab-panel[data-event-panel="dublonen-rausch"] .dr-event-content {
  position: relative;
  z-index: 2;
}

.theme-dr .ev-event-header {
  background: linear-gradient(135deg, rgba(50, 35, 8, 0.55), rgba(12, 10, 8, 0.35));
  border-color: rgba(245, 158, 11, 0.2);
}
.theme-dr .ev-event-eyebrow { color: #fcd34d; }
.theme-dr .ev-event-header h2 { color: #fef3c7; }
.theme-dr .ev-event-desc { color: #fde68a; }
.theme-dr .ev-event-bonus { color: rgba(253, 230, 138, 0.85); }
.theme-dr .ev-event-points { border-color: rgba(245, 158, 11, 0.32); }
.theme-dr .ev-pts-val { color: #fde68a; }
.theme-dr .ev-pts-bar i { background: linear-gradient(90deg, #b45309, #fbbf24); }
.theme-dr .ev-section { border-color: rgba(245, 158, 11, 0.18); }
.theme-dr .ev-section-title { color: #fcd34d; }
.theme-dr .ev-mission-card.status-complete {
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(80, 55, 10, 0.18);
}
.event-theme-dr #panel-event .btn-ev-claim,
.event-theme-dr #panel-event .btn-ev-claim-all {
  border-color: rgba(245, 158, 11, 0.45);
  color: #fde68a;
}
.event-theme-dr #panel-event .btn-ev-claim {
  background: rgba(120, 80, 10, 0.35);
}
.theme-dr .ev-currency-card {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(30, 22, 8, 0.35);
}
.theme-dr .ev-currency-card.owned {
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(50, 35, 10, 0.28);
}
.theme-dr .dr-currency-icon {
  font-size: 1.4rem;
  color: #fbbf24;
  min-width: 2rem;
  text-align: center;
}
.theme-dr .dr-daily-card { border-color: rgba(245, 158, 11, 0.22); background: rgba(32, 22, 8, 0.28); }
.theme-dr .dr-daily-card.claimable { border-color: rgba(251, 191, 36, 0.42); }
.theme-dr .dr-daily-card .il-daily-body h4 { color: #fcd34d; }
.theme-dr .dr-event-complete {
  color: #fde68a;
  background: rgba(120, 80, 10, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.theme-dr .dr-reward-card.featured {
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(60, 42, 8, 0.25);
}

.wot-event-tab.tab-fs.selected {
  color: #7dd3fc;
  border-color: rgba(56, 189, 248, 0.45);
  background: rgba(12, 74, 110, 0.35);
}
.wot-event-tab-panel[data-event-panel="frontstoss"] .fs-event-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(56, 189, 248, 0.14), transparent 58%),
    linear-gradient(180deg, rgba(8, 20, 32, 0.96), rgba(6, 12, 20, 0.98));
}
.wot-event-tab-panel[data-event-panel="frontstoss"] .fs-event-content {
  position: relative;
  z-index: 2;
}
.theme-fs .ev-event-header {
  background: linear-gradient(135deg, rgba(8, 47, 73, 0.55), rgba(12, 24, 40, 0.35));
}
.theme-fs .ev-event-eyebrow { color: #7dd3fc; }
.theme-fs .ev-event-header h2 { color: #e0f2fe; }
.theme-fs .ev-event-desc { color: #bae6fd; }
.theme-fs .ev-event-bonus { color: rgba(186, 230, 253, 0.85); }
.theme-fs .ev-event-points { border-color: rgba(56, 189, 248, 0.28); }
.theme-fs .ev-pts-val { color: #bae6fd; }
.theme-fs .ev-pts-bar i { background: linear-gradient(90deg, #0369a1, #38bdf8); }
.theme-fs .ev-section { border-color: rgba(56, 189, 248, 0.16); }
.theme-fs .ev-section-title { color: #7dd3fc; }
.theme-fs .ev-mission-card.status-complete {
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(8, 47, 73, 0.22);
}
.event-theme-fs #panel-event .btn-ev-claim,
.event-theme-fs #panel-event .btn-ev-claim-all {
  border-color: rgba(56, 189, 248, 0.45);
  color: #e0f2fe;
}
.event-theme-fs #panel-event .btn-ev-claim {
  background: rgba(8, 47, 73, 0.55);
}
.theme-fs .ev-currency-card {
  border-color: rgba(56, 189, 248, 0.22);
  background: rgba(8, 24, 40, 0.35);
}
.theme-fs .fs-daily-card { border-color: rgba(56, 189, 248, 0.2); background: rgba(8, 24, 40, 0.28); }
.theme-fs .fs-daily-card.claimable { border-color: rgba(125, 211, 252, 0.4); }
.theme-fs .fs-event-complete {
  color: #bae6fd;
  background: rgba(8, 47, 73, 0.25);
  border: 1px solid rgba(56, 189, 248, 0.32);
}
.theme-fs .fs-reward-card.featured {
  border-color: rgba(125, 211, 252, 0.5);
  background: rgba(8, 47, 73, 0.28);
}

/* Tag der Deutschen Einheit */
.wot-event-tab.tab-eu {
  border-color: rgba(200, 16, 46, 0.35);
  background: linear-gradient(180deg, rgba(26, 26, 26, 0.55) 0%, rgba(26, 26, 26, 0.55) 33%, rgba(200, 16, 46, 0.25) 33%, rgba(200, 16, 46, 0.25) 66%, rgba(255, 206, 0, 0.18) 66%, rgba(255, 206, 0, 0.18) 100%);
  color: #fef3c7;
}
.wot-event-tab.tab-eu.selected {
  color: #fff;
  border-color: rgba(255, 206, 0, 0.55);
  background: linear-gradient(180deg, #1a1a1a 0%, #1a1a1a 33%, #c8102e 33%, #c8102e 66%, #ffce00 66%, #ffce00 100%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}
.wot-event-tab-panel[data-event-panel="einheitstag"] .eu-event-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(12, 12, 12, 0.92) 0%, transparent 42%),
    linear-gradient(90deg, rgba(26, 26, 26, 0.55) 0%, rgba(180, 0, 0, 0.18) 48%, rgba(200, 160, 0, 0.14) 100%),
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(221, 0, 0, 0.16), transparent 58%),
    linear-gradient(180deg, rgba(10, 10, 12, 0.96), rgba(8, 8, 10, 0.98));
}
.wot-event-tab-panel[data-event-panel="einheitstag"] .eu-event-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 40%, transparent 40%, rgba(0, 0, 0, 0.45) 100%);
}
.wot-event-tab-panel[data-event-panel="einheitstag"] .eu-event-content {
  position: relative;
  z-index: 2;
}
.theme-eu .ev-event-header {
  background: linear-gradient(135deg, rgba(28, 28, 28, 0.6), rgba(90, 10, 10, 0.28), rgba(50, 40, 8, 0.22));
  border-color: rgba(255, 206, 0, 0.22);
}
.theme-eu .ev-event-eyebrow { color: #fcd34d; }
.theme-eu .ev-event-header h2 { color: #fef3c7; }
.theme-eu .ev-event-desc { color: #e7e5e4; }
.theme-eu .ev-event-bonus { color: rgba(253, 230, 138, 0.9); }
.theme-eu .ev-event-points { border-color: rgba(221, 0, 0, 0.28); }
.theme-eu .ev-pts-val { color: #fde68a; }
.theme-eu .ev-pts-bar i,
.theme-eu .wot-mission-bar i,
.theme-eu .il-rewards-rail i {
  background: linear-gradient(90deg, #1a1a1a 0%, #dd0000 48%, #ffce00 100%);
}
.theme-eu .ev-section { border-color: rgba(255, 206, 0, 0.16); }
.theme-eu .ev-section-title { color: #fcd34d; }
.theme-eu .ev-mission-card.status-complete {
  border-color: rgba(255, 206, 0, 0.35);
  background: rgba(80, 20, 10, 0.2);
}
.event-theme-eu #panel-event .btn-ev-claim,
.event-theme-eu #panel-event .btn-ev-claim-all {
  border-color: rgba(255, 206, 0, 0.4);
  color: #fef3c7;
}
.event-theme-eu #panel-event .btn-ev-claim {
  background: rgba(120, 20, 10, 0.45);
}
.theme-eu .ev-currency-card {
  border-color: rgba(255, 206, 0, 0.24);
  background: rgba(24, 16, 10, 0.4);
}
.theme-eu .ev-currency-card.owned {
  border-color: rgba(255, 206, 0, 0.45);
  background: rgba(50, 30, 10, 0.3);
}
.theme-eu .eu-daily-card {
  border-color: rgba(221, 0, 0, 0.28);
  background: rgba(24, 12, 10, 0.32);
}
.theme-eu .eu-daily-card.claimable { border-color: rgba(255, 206, 0, 0.45); }
.theme-eu .eu-daily-card .il-daily-body h4 { color: #fcd34d; }
.theme-eu .ev-event-complete {
  color: #fef3c7;
  background: linear-gradient(90deg, rgba(26, 26, 26, 0.45), rgba(140, 0, 0, 0.28), rgba(120, 90, 0, 0.22));
  border: 1px solid rgba(255, 206, 0, 0.35);
}
.theme-eu .il-reward-card.featured {
  border-color: rgba(255, 206, 0, 0.5);
  background: rgba(60, 25, 10, 0.28);
}

/* Saison-I-Finale Event Theme */
.wot-event-tab-panel[data-event-panel="saison1-finale"] {
  position: relative;
  overflow: hidden;
}
.wot-event-tab-panel[data-event-panel="saison1-finale"] .s1f-event-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 70% 20%, rgba(245, 158, 11, 0.14), transparent 55%),
    radial-gradient(ellipse 50% 40% at 15% 80%, rgba(180, 83, 9, 0.1), transparent 50%),
    linear-gradient(180deg, rgba(12, 10, 6, 0.92), rgba(8, 7, 5, 0.96));
}
.wot-event-tab-panel[data-event-panel="saison1-finale"] .s1f-event-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 40%, transparent 38%, rgba(0, 0, 0, 0.5) 100%);
}
.wot-event-tab-panel[data-event-panel="saison1-finale"] .s1f-event-content {
  position: relative;
  z-index: 2;
}
.theme-s1f .ev-event-header {
  background: linear-gradient(135deg, rgba(20, 14, 6, 0.7), rgba(90, 50, 10, 0.32), rgba(20, 14, 6, 0.55));
  border-color: rgba(245, 158, 11, 0.28);
}
.theme-s1f .ev-event-eyebrow { color: #fbbf24; }
.theme-s1f .ev-event-header h2 { color: #fde68a; }
.theme-s1f .ev-event-desc { color: #e7e5e4; }
.theme-s1f .ev-event-bonus { color: rgba(253, 230, 138, 0.9); }
.theme-s1f .ev-event-points { border-color: rgba(245, 158, 11, 0.3); }
.theme-s1f .ev-pts-val { color: #fde68a; }
.theme-s1f .ev-pts-bar i,
.theme-s1f .wot-mission-bar i,
.theme-s1f .il-rewards-rail i {
  background: linear-gradient(90deg, #78350f, #f59e0b 55%, #fde68a);
}
.theme-s1f .ev-section { border-color: rgba(245, 158, 11, 0.16); }
.theme-s1f .ev-section-title { color: #fbbf24; }
.theme-s1f .ev-mission-card.status-complete {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(80, 45, 10, 0.22);
}
.event-theme-s1f #panel-event .btn-ev-claim,
.event-theme-s1f #panel-event .btn-ev-claim-all {
  border-color: rgba(245, 158, 11, 0.45);
  color: #fef3c7;
}
.event-theme-s1f #panel-event .btn-ev-claim {
  background: rgba(120, 70, 15, 0.5);
}
.theme-s1f .ev-currency-card {
  border-color: rgba(245, 158, 11, 0.22);
  background: rgba(24, 16, 8, 0.45);
}
.theme-s1f .ev-currency-card.owned {
  border-color: rgba(251, 191, 36, 0.45);
}
.theme-s1f .s1f-daily-card {
  border-color: rgba(245, 158, 11, 0.22);
  background: rgba(24, 16, 8, 0.4);
}
.theme-s1f .s1f-daily-card.claimable { border-color: rgba(251, 191, 36, 0.5); }
.theme-s1f .s1f-daily-card .il-daily-body h4 { color: #fbbf24; }
.theme-s1f .ev-event-complete,
.theme-s1f .s1f-event-complete {
  color: #fef3c7;
  background: linear-gradient(90deg, rgba(40, 24, 8, 0.5), rgba(120, 70, 15, 0.35), rgba(40, 24, 8, 0.45));
  border: 1px solid rgba(245, 158, 11, 0.4);
}
.theme-s1f .il-reward-card.featured {
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(60, 35, 10, 0.3);
}
.s1f-path-note {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0 0 0.65rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(245, 158, 11, 0.28);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(15, 12, 8, 0.4));
  color: #fde68a;
}
.s1f-path-note strong {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.s1f-path-note span {
  font-size: 0.58rem;
  color: #cbd5e1;
  line-height: 1.4;
}

.eu-cal-section { margin: 0.75rem 0 1rem; }
.eu-cal-intro {
  margin: 0 0 0.65rem;
  font-size: 0.72rem;
  color: rgba(254, 243, 199, 0.78);
  line-height: 1.4;
}
.eu-cal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}
.eu-cal-day {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.55rem 0.45rem;
  border: 1px solid rgba(255, 206, 0, 0.18);
  background: rgba(12, 10, 10, 0.55);
  min-height: 7.2rem;
}
.eu-cal-day.featured {
  border-color: rgba(255, 206, 0, 0.45);
  background: linear-gradient(160deg, rgba(26, 26, 26, 0.7), rgba(200, 16, 46, 0.22), rgba(80, 60, 0, 0.25));
}
.eu-cal-day.is-today {
  box-shadow: inset 0 0 0 1px rgba(255, 206, 0, 0.35);
}
.eu-cal-day.claimable {
  border-color: rgba(255, 206, 0, 0.55);
  background: rgba(90, 20, 20, 0.28);
}
.eu-cal-day.claimed {
  opacity: 0.72;
  border-color: rgba(134, 239, 172, 0.28);
}
.eu-cal-day.locked { opacity: 0.48; }
.eu-cal-date {
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fcd34d;
}
.eu-cal-icon {
  font-size: 1.15rem;
  line-height: 1;
}
.eu-cal-label {
  margin: 0;
  font-size: 0.62rem;
  color: #e7e5e4;
  line-height: 1.3;
  flex: 1;
}
.eu-cal-foot {
  margin-top: auto;
}
.eu-cal-lock {
  font-size: 0.55rem;
  color: #94a3b8;
  letter-spacing: 0.04em;
}
.eu-cal-day .btn-eu-claim-cal {
  width: 100%;
  font-size: 0.58rem;
  padding: 0.28rem 0.35rem;
}
@media (max-width: 720px) {
  .eu-cal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.wot-event-tab-panel[data-event-panel="anime"] .an-event-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(236, 72, 153, 0.12), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(168, 85, 247, 0.08), transparent 55%),
    linear-gradient(180deg, rgba(12, 6, 18, 0.95), rgba(8, 6, 14, 0.98));
}
.wot-event-tab-panel[data-event-panel="anime"] .an-event-content {
  position: relative;
  z-index: 2;
}

@media (max-width: 900px) {
  .wot-garage-sidebar {
    max-height: min(34vh, 14rem);
  }
  .wot-event-strip-track {
    max-height: min(18vh, 7rem);
  }
  .wot-event-strip-track > button {
    padding: 0.28rem 0.45rem;
  }
  .wot-event-strip-label,
  .bz-garage-banner-cta,
  .werft-garage-banner-cta,
  .sa-garage-banner-cta,
  .bf-garage-banner-cta,
  .ad-garage-banner-cta,
  .wf-garage-banner-cta,
  .it-garage-banner-cta,
  .an-garage-banner-cta,
  .eu-garage-banner-cta,
  .cm-garage-banner-cta,
  .cf-garage-banner-cta,
  .cw-garage-banner-cta,
  .s1f-garage-banner-cta,
  .dr-garage-banner-cta,
  .rf-garage-banner-cta,
  .lf-garage-banner-cta { display: none; }
  .wot-panel-garage > .wot-battle-dock {
    grid-column: 1;
    margin-top: -2.5rem;
    width: calc(100% - 1rem);
    max-width: min(280px, 90%);
  }
  .wot-battle-dock .wot-battle-btn { width: 100%; }
}

.il-event-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 0.55rem;
}

.il-event-eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fbbf24;
}

.il-event-head h2 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: #fef3c7;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}

.il-event-desc {
  font-size: 0.64rem;
  color: #cbd5e1;
  line-height: 1.45;
  max-width: 36rem;
  margin: 0.25rem 0 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75);
}

.il-event-points {
  min-width: 180px;
  flex: 1;
  max-width: 260px;
  padding: 0.45rem 0.55rem;
  background: rgba(8, 6, 4, 0.72);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 4px;
  backdrop-filter: blur(8px);
}

.il-pts-label {
  font-size: 0.55rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.il-pts-val {
  display: block;
  font-size: 0.9rem;
  color: #fde68a;
  margin: 0.12rem 0 0.3rem;
}

.il-pts-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.il-pts-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #b45309, #fbbf24);
  border-radius: 3px;
  transition: width 0.3s;
}

.il-event-body {
  padding: 0.55rem 0.6rem 0.65rem;
  background: rgba(8, 6, 4, 0.78);
  border: 1px solid rgba(251, 191, 36, 0.22);
  border-radius: 6px;
  backdrop-filter: blur(10px);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
}

.il-tank-hero {
  padding: 0.55rem 0.6rem;
  margin-bottom: 0.65rem;
  background: rgba(120, 80, 20, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 4px;
}

.il-tank-hero-compact {
  padding: 0.45rem 0.55rem;
  margin-bottom: 0.5rem;
}

.il-tank-stats-compact {
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem 0.45rem;
}

@media (max-width: 700px) {
  .il-tank-stats-compact { grid-template-columns: 1fr; }
  .il-event-showcase {
    width: min(480px, 94vw);
    height: min(260px, 32vh);
    transform: translate(-50%, -62%);
  }
  .il-event-bg,
  .il-event-vignette {
    -webkit-mask-image: radial-gradient(ellipse 52% 30% at 50% 38%, transparent 60%, #000 100%);
    mask-image: radial-gradient(ellipse 52% 30% at 50% 38%, transparent 60%, #000 100%);
  }
}

.il-tank-hero-top {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  margin-bottom: 0.45rem;
}

.il-tank-flag { font-size: 1.35rem; line-height: 1; }

.il-tank-hero h3 {
  margin: 0;
  font-size: 0.82rem;
  color: #fef3c7;
}

.il-tank-role {
  margin: 0.12rem 0 0;
  font-size: 0.6rem;
  color: #94a3b8;
}

.il-tank-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.3rem 0.55rem;
  font-size: 0.6rem;
}

.il-tank-stats span { display: block; color: #64748b; }
.il-tank-stats strong { color: #e2e8f0; font-weight: 600; }

.il-tank-traits {
  margin: 0.45rem 0 0;
  padding-left: 1rem;
  font-size: 0.58rem;
  color: #cbd5e1;
  line-height: 1.45;
}

.il-event-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

@media (max-width: 900px) {
  .il-event-grid { grid-template-columns: 1fr; }
  .il-event-bg { object-position: center 30%; }
}

.il-event-col h3 {
  font-size: 0.68rem;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.4rem;
}

.il-mission-card,
.il-reward-card {
  padding: 0.5rem 0.55rem;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}

.il-mission-card.status-complete,
.il-reward-card.claimable {
  border-color: rgba(251, 191, 36, 0.45);
}

.il-mission-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.il-mission-top h4 {
  margin: 0;
  font-size: 0.7rem;
  color: #e2e8f0;
}

.il-mission-pts,
.il-reward-pts {
  font-size: 0.56rem;
  color: #fbbf24;
  white-space: nowrap;
}

.il-mission-desc,
.il-reward-label {
  font-size: 0.6rem;
  color: #94a3b8;
  margin: 0.2rem 0 0.3rem;
}

.il-mission-foot,
.il-reward-foot { margin-top: 0.3rem; }

.il-reward-card.featured {
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(120, 80, 20, 0.16);
}

.btn-il-claim-mission,
.btn-il-claim-reward {
  font-size: 0.58rem;
  padding: 0.28rem 0.48rem;
  border: none;
  border-radius: 2px;
  background: linear-gradient(180deg, #d97706, #b45309);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
}

.wot-nav-btn.il-nav-ended {
  opacity: 0.72;
}

#wot-menu[data-active-panel="event"] .wot-topbar {
  background: linear-gradient(180deg, rgba(12, 10, 8, 0.94), rgba(8, 6, 4, 0.88));
  border-bottom-color: rgba(251, 191, 36, 0.28);
}

/* Tägliche Belohnung */
.daily-overlay .daily-card { max-width: 360px; text-align: center; }
.daily-streak { color: #fbbf24; font-size: 0.85rem; margin: 0.5rem 0; }
.daily-reward-preview {
  padding: 0.85rem;
  margin: 0.75rem 0 1rem;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.35);
  font-size: 0.9rem;
  color: #fde68a;
}
.daily-skip { margin-top: 0.5rem; width: 100%; }

/* Dienstbericht: Abzeichen & Erfolge · Sammlungs-Archiv (kompakt) */
#panel-collections,
.wot-panel-collections {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  max-width: 860px;
  width: min(860px, 100%);
  justify-self: start;
  overflow: auto;
}
.wot-collections-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.85rem;
  padding: 0.55rem 0.85rem 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.wot-collections-kicker { display: none; }
.wot-collections-head h2 {
  margin: 0;
  font-size: 0.92rem;
  color: #f1f5f9;
  letter-spacing: 0.03em;
}
.wot-collections-head-copy p:last-child { display: none; }
.wot-collections-stats {
  display: flex;
  gap: 0.3rem;
}
.wot-col-stat {
  min-width: 3.2rem;
  padding: 0.22rem 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.28);
  text-align: center;
}
.wot-col-stat strong {
  display: block;
  font-size: 0.72rem;
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.wot-col-stat span {
  font-size: 0.45rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}
.wot-col-stat.hot {
  border-color: rgba(245, 158, 11, 0.45);
}
.wot-collections-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.4rem 0.85rem 0.25rem;
}
.wot-col-filter {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.25);
  color: #94a3b8;
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.22rem 0.45rem;
  cursor: pointer;
  font-family: inherit;
}
.wot-col-filter:hover { color: #e2e8f0; border-color: rgba(245, 158, 11, 0.35); }
.wot-col-filter.selected {
  color: #0c121a;
  background: linear-gradient(180deg, #fbbf24, #d97706);
  border-color: #f59e0b;
  font-weight: 700;
}
.wot-collections-layout {
  display: grid;
  grid-template-columns: minmax(180px, 0.78fr) minmax(240px, 1.22fr);
  gap: 0.5rem;
  padding: 0.35rem 0.85rem 0.45rem;
  align-items: start;
}
@media (max-width: 900px) {
  .wot-collections-layout {
    grid-template-columns: 1fr;
  }
}
.wot-collections-list {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  max-height: min(42vh, 340px);
  overflow: auto;
  padding-right: 0.1rem;
}
.wot-col-rail-card {
  appearance: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.05rem 0.4rem;
  width: 100%;
  text-align: left;
  padding: 0.35rem 0.45rem 0.3rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.28);
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  position: relative;
}
.wot-col-rail-card:hover {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.05);
}
.wot-col-rail-card.selected {
  border-color: rgba(245, 158, 11, 0.55);
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.12), rgba(0, 0, 0, 0.2));
  box-shadow: inset 2px 0 0 #f59e0b;
}
.wot-col-rail-card.claimable { border-color: rgba(74, 222, 128, 0.35); }
.wot-col-rail-icon {
  grid-row: 1 / 3;
  font-size: 0.95rem;
  align-self: center;
}
.wot-col-rail-body { min-width: 0; }
.wot-col-rail-body strong {
  display: block;
  font-size: 0.62rem;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wot-col-rail-meta {
  font-size: 0.48rem;
  color: #64748b;
}
.wot-col-rail-status {
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #94a3b8;
  align-self: start;
}
.wot-col-rail-status.status-claim { color: #4ade80; }
.wot-col-rail-status.status-done { color: #fbbf24; }
.wot-col-rail-status.status-prog { color: #38bdf8; }
.wot-col-rail-bar {
  grid-column: 2 / 4;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-top: 0.12rem;
}
.wot-col-rail-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #b45309, #fbbf24);
}
.wot-col-rail-card.theme-camo.selected { box-shadow: inset 2px 0 0 #a3b18a; }
.wot-col-rail-card.theme-s1f.selected { box-shadow: inset 2px 0 0 #e8c078; }
.wot-col-rail-card.theme-ww2.selected { box-shadow: inset 2px 0 0 #6b7c4a; }
.wot-col-rail-card.theme-anime.selected { box-shadow: inset 2px 0 0 #ff6eb4; }
.wot-collections-detail { min-width: 0; }
.wot-col-detail-card {
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.32);
  max-height: min(48vh, 400px);
  overflow: auto;
}
.wot-col-detail-card.complete {
  border-color: rgba(245, 158, 11, 0.4);
}
.wot-col-detail-card.claimed { opacity: 0.78; }
.wot-col-detail-card.theme-camo { border-color: rgba(163, 177, 138, 0.28); }
.wot-col-detail-card.theme-s1f { border-color: rgba(232, 192, 120, 0.3); }
.wot-col-detail-card.theme-ww2 { border-color: rgba(107, 124, 74, 0.28); }
.wot-col-detail-card.theme-anime { border-color: rgba(255, 110, 180, 0.28); }
.wot-col-detail-head {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}
.wot-col-detail-icon { font-size: 1.1rem; line-height: 1; }
.wot-col-detail-head h3 {
  margin: 0 0 0.1rem;
  font-size: 0.78rem;
  color: #f8fafc;
}
.wot-col-detail-head p {
  margin: 0;
  font-size: 0.55rem;
  color: #94a3b8;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wot-col-detail-pct {
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}
.wot-col-detail-pct strong {
  display: block;
  font-size: 0.72rem;
  color: #fbbf24;
}
.wot-col-detail-pct span {
  font-size: 0.48rem;
  color: #64748b;
}
.wot-panel-collections .wot-collections-root {
  padding: 0.65rem 0.85rem;
}
.wot-collections-hint {
  padding: 0 0.85rem 0.55rem;
  font-size: 0.52rem;
  color: #64748b;
  line-height: 1.35;
}
.wot-stats-section { margin-top: 1.25rem; }
.wot-collections-root {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.wot-collection-card {
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.28);
}
.wot-collection-card.complete {
  border-color: rgba(245, 158, 11, 0.35);
}
.wot-collection-card.claimed { opacity: 0.72; }
.wot-col-head {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}
.wot-col-icon { font-size: 1.05rem; line-height: 1; }
.wot-col-head-body { flex: 1; min-width: 0; }
.wot-col-head-body strong {
  display: block;
  font-size: 0.68rem;
  color: #e2e8f0;
}
.wot-col-head-body p {
  margin: 0.1rem 0 0;
  font-size: 0.55rem;
  color: #94a3b8;
  line-height: 1.3;
}
.wot-col-progress {
  font-size: 0.62rem;
  font-weight: 700;
  color: #fbbf24;
  white-space: nowrap;
}
.wot-col-bar {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-bottom: 0.35rem;
}
.wot-col-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #b45309, #fbbf24);
}
.wot-col-pieces {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 0.25rem;
  margin-bottom: 0.4rem;
}
.wot-col-rail-card.tradeable { border-color: rgba(56, 189, 248, 0.35); }
.wot-col-rail-status.status-trade { color: #38bdf8; }
.wot-col-piece {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08rem;
  padding: 0.25rem 0.15rem;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
  opacity: 0.55;
  color: inherit;
  font-family: inherit;
  cursor: default;
}
.wot-col-piece:disabled { cursor: default; }
.wot-col-piece.owned {
  opacity: 1;
  border-style: solid;
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.09);
}
.wot-col-piece.trade-pick {
  opacity: 1;
  cursor: pointer;
  border-style: solid;
  border-color: rgba(56, 189, 248, 0.45);
  background: rgba(56, 189, 248, 0.08);
  animation: wot-col-trade-pulse 1.6s ease-in-out infinite;
}
.wot-col-piece.trade-pick:hover {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.16);
}
@keyframes wot-col-trade-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
  50% { box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25); }
}
.wot-col-trade-box {
  padding: 0.35rem 0.45rem;
  margin-bottom: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.22);
}
.wot-col-trade-box.ready {
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(56, 189, 248, 0.07);
}
.wot-col-trade-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.15rem;
}
.wot-col-trade-head strong {
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #38bdf8;
}
.wot-col-trade-head span {
  font-size: 0.55rem;
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}
.wot-col-trade-box p {
  margin: 0;
  font-size: 0.52rem;
  color: #94a3b8;
  line-height: 1.35;
}
.wot-col-piece-icon { font-size: 0.85rem; }
.wot-col-piece-name {
  font-size: 0.45rem;
  text-align: center;
  color: #cbd5e1;
  line-height: 1.15;
}
.wot-col-piece-state { display: none; }
.wot-col-reward-box {
  padding: 0.35rem 0.45rem;
  margin-bottom: 0.35rem;
  border: 1px solid rgba(245, 158, 11, 0.2);
  background: rgba(245, 158, 11, 0.05);
}
.wot-col-reward-box h4 {
  margin: 0 0 0.2rem;
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f59e0b;
}
.wot-col-reward-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.35rem;
}
.wot-col-reward-list li {
  font-size: 0.55rem;
  color: #e2e8f0;
  padding: 0.1rem 0.3rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.wot-col-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.wot-col-reward-hint,
.wot-col-dup-hint,
.wot-col-crate-hint,
.wot-col-reward-locked {
  font-size: 0.5rem;
  color: #94a3b8;
}
.wot-col-claimed-tag {
  font-size: 0.55rem;
  font-weight: 600;
  color: #4ade80;
}
.wot-col-empty {
  margin: 0.35rem 0;
  font-size: 0.6rem;
  color: #64748b;
}
.wot-collection-card .btn-secondary,
.wot-col-detail-card .btn-secondary,
.wot-col-detail-card .btn-primary {
  font-size: 0.55rem;
  padding: 0.25rem 0.45rem;
}
.wot-shop-badge-camocol {
  background: linear-gradient(180deg, #3d4a38, #1a2118);
  color: #d9e7c8;
  border: 1px solid #a3b18a;
}
.wot-shop-crate-camocol {
  border-color: rgba(163, 177, 138, 0.55);
  background: linear-gradient(180deg, rgba(28, 34, 24, 0.95), rgba(10, 12, 8, 0.92));
}
.wot-shop-crate-camocol .wot-bf-collection { color: #d9e7c8; }
.bf-crate-overlay-camocol .bf-crate-modal {
  border-color: rgba(163, 177, 138, 0.45);
  box-shadow: 0 0 40px rgba(90, 110, 70, 0.3);
}
.bf-crate-overlay-camocol .bf-crate-glow {
  background: radial-gradient(circle, rgba(163, 177, 138, 0.4), transparent 70%);
}
.bf-crate-overlay-camocol .bf-phase-charge .bf-crate-emoji {
  filter: drop-shadow(0 0 12px rgba(196, 165, 116, 0.55));
}
.wot-shop-badge-s1f {
  background: linear-gradient(180deg, #4a3a22, #1a1410);
  color: #f5e0b8;
  border: 1px solid #e8c078;
}
.wot-shop-crate-s1f {
  border-color: rgba(232, 192, 120, 0.5);
  background: linear-gradient(180deg, rgba(36, 28, 18, 0.95), rgba(12, 10, 8, 0.92));
}
.wot-shop-crate-s1f .wot-bf-collection { color: #f5e0b8; }
.bf-crate-overlay-s1f .bf-crate-modal {
  border-color: rgba(232, 192, 120, 0.45);
  box-shadow: 0 0 40px rgba(180, 130, 60, 0.28);
}
.bf-crate-overlay-s1f .bf-crate-glow {
  background: radial-gradient(circle, rgba(232, 192, 120, 0.38), transparent 70%);
}
.bf-crate-overlay-s1f .bf-phase-charge .bf-crate-emoji {
  filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.55));
}
.wot-stats-section-title {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 0.55rem;
}
.wot-badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.45rem;
}
.wot-badge-card {
  padding: 0.65rem;
  text-align: center;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 0.45;
}
.wot-badge-card.owned {
  opacity: 1;
  border-color: rgba(245, 158, 11, 0.4);
}
.wot-badge-icon { font-size: 1.5rem; display: block; margin-bottom: 0.25rem; }
.wot-badge-card strong { display: block; font-size: 0.72rem; margin-bottom: 0.15rem; }
.wot-badge-kind {
  display: block;
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.2rem;
}
.wot-badge-card.is-emblem.owned {
  border-color: rgba(255, 206, 0, 0.45);
  background: linear-gradient(180deg, rgba(26, 26, 26, 0.5), rgba(200, 16, 46, 0.12), rgba(255, 206, 0, 0.08));
}
.wot-badge-card.is-emblem .wot-badge-kind { color: #fcd34d; }
.wot-badge-card span:last-child { font-size: 0.58rem; color: #94a3b8; }
.wot-achievements-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.wot-ach-card {
  padding: 0.65rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.wot-ach-card.ready { border-color: rgba(74, 222, 128, 0.45); }
.wot-ach-card.claimed { opacity: 0.55; }
.wot-ach-head { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.25rem; }
.wot-ach-head strong { font-size: 0.78rem; }
.wot-ach-card p { font-size: 0.65rem; color: #94a3b8; margin-bottom: 0.35rem; }
.wot-ach-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.25rem;
}
.wot-ach-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #b45309, #f59e0b);
}
.wot-ach-prog { font-size: 0.58rem; color: #64748b; }
.wot-ach-reward { display: block; font-size: 0.62rem; color: #cbd5e1; margin: 0.25rem 0; }
.wot-ach-card .btn-secondary { font-size: 0.62rem; padding: 0.3rem 0.5rem; }
.result-credits { color: #e2e8f0; }

/* ===== Launch Day Event + Cinematic ===== */
.launch-cinematic-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.launch-cinematic-overlay.hidden { display: none; }
.launch-cine-bg {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse at 30% 60%, rgba(255, 90, 40, 0.22) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 30%, rgba(255, 179, 71, 0.15) 0%, transparent 40%),
    linear-gradient(180deg, #0a0f1a 0%, #1a1020 40%, #060810 100%);
  animation: launch-cine-bg-pulse 4s ease-in-out infinite;
}
@keyframes launch-cine-bg-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.04); filter: brightness(1.15); }
}
.launch-cine-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.45) 2px,
    rgba(0, 0, 0, 0.45) 4px
  );
  z-index: 1;
}
.launch-cine-tracers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.launch-cine-tracers i {
  position: absolute;
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffb347, #fff, transparent);
  opacity: 0;
  animation: launch-cine-tracer 2.2s linear infinite;
}
.launch-cine-tracers i:nth-child(1) { top: 22%; left: -20%; animation-delay: 0s; transform: rotate(-8deg); }
.launch-cine-tracers i:nth-child(2) { top: 38%; left: -30%; animation-delay: 0.4s; transform: rotate(5deg); }
.launch-cine-tracers i:nth-child(3) { top: 55%; left: -15%; animation-delay: 0.9s; transform: rotate(-3deg); }
.launch-cine-tracers i:nth-child(4) { top: 68%; left: -25%; animation-delay: 1.3s; transform: rotate(12deg); }
.launch-cine-tracers i:nth-child(5) { top: 30%; right: -20%; animation-delay: 0.6s; transform: rotate(175deg); }
.launch-cine-tracers i:nth-child(6) { top: 72%; right: -30%; animation-delay: 1.1s; transform: rotate(182deg); }
@keyframes launch-cine-tracer {
  0% { opacity: 0; transform: translateX(0) rotate(var(--r, 0deg)); }
  15% { opacity: 0.85; }
  100% { opacity: 0; transform: translateX(140vw) rotate(var(--r, 0deg)); }
}
.launch-cine-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.launch-cine-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffb347;
  box-shadow: 0 0 8px #ff6b35;
  animation: launch-cine-spark 1.2s ease-out forwards;
}
@keyframes launch-cine-spark {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-120px) scale(0.2); }
}
.launch-cine-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 220, 150, 0.55) 0%, transparent 55%);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}
.launch-cine-flash.on {
  animation: launch-cine-flash 0.45s ease-out;
}
@keyframes launch-cine-flash {
  0% { opacity: 0.9; }
  100% { opacity: 0; }
}
.launch-cine-shockwave {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid rgba(255, 179, 71, 0.7);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}
.launch-cine-shockwave.on {
  animation: launch-cine-shock 0.7s ease-out;
}
@keyframes launch-cine-shock {
  0% { opacity: 0.9; transform: scale(0.2); }
  100% { opacity: 0; transform: scale(18); }
}
.launch-cine-muzzle {
  position: absolute;
  left: 18%;
  bottom: 28%;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, #fff 0%, #ffb347 30%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  filter: blur(2px);
}
.launch-cine-muzzle.on {
  animation: launch-cine-muzzle 0.35s ease-out infinite alternate;
}
@keyframes launch-cine-muzzle {
  0% { opacity: 0.2; transform: scale(0.8); }
  100% { opacity: 0.75; transform: scale(1.15); }
}
.launch-cine-tank-silhouette {
  position: absolute;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%) scale(0.6);
  font-size: 4rem;
  letter-spacing: -0.15em;
  color: rgba(15, 20, 30, 0.95);
  text-shadow: 0 0 30px rgba(255, 179, 71, 0.4);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.4s ease, transform 0.6s ease;
}
.launch-cine-tank-silhouette.on {
  opacity: 1;
  transform: translateX(-20%) scale(1);
  animation: launch-cine-tank-roll 2.5s linear infinite;
}
@keyframes launch-cine-tank-roll {
  0% { transform: translateX(-30%) scale(1); }
  50% { transform: translateX(0%) scale(1.05); }
  100% { transform: translateX(30%) scale(1); }
}
.launch-cinematic-overlay.launch-cine-shake {
  animation: launch-cine-shake 0.45s ease-out;
}
@keyframes launch-cine-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-6px, 3px); }
  40% { transform: translate(5px, -4px); }
  60% { transform: translate(-4px, -2px); }
  80% { transform: translate(3px, 4px); }
}
.launch-cine-letterbox {
  position: absolute;
  left: 0;
  right: 0;
  height: 10vh;
  background: #000;
  z-index: 6;
  pointer-events: none;
}
.launch-cine-letterbox-top { top: 0; }
.launch-cine-letterbox-bottom { bottom: 0; }
.launch-cine-hud {
  position: absolute;
  top: calc(10vh + 0.6rem);
  left: 2rem;
  right: 2rem;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.launch-cine-progress {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
}
.launch-cine-progress i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff6b35, #ffb347);
  transition: width 0.35s ease;
}
.launch-cine-scene-tag {
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  color: #ffb347;
  font-weight: 700;
}
.launch-cine-content {
  position: relative;
  z-index: 5;
  text-align: center;
  max-width: 38rem;
  padding: 2rem;
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.launch-cinematic-overlay.launch-cine-fade .launch-cine-content {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.launch-cine-mood-impact .launch-cine-title,
.launch-cine-mood-charge .launch-cine-title,
.launch-cine-mood-storm .launch-cine-title {
  color: #fff;
  text-shadow: 0 0 20px #ff6b35, 0 0 50px rgba(255, 179, 71, 0.5);
}
.launch-cine-eyebrow {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #ffb347;
  margin-bottom: 0.75rem;
}
.launch-cine-title {
  font-size: clamp(1.9rem, 5.5vw, 3.4rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f8fafc;
  text-shadow: 0 0 40px rgba(255, 179, 71, 0.35);
  margin: 0 0 0.75rem;
  line-height: 1.05;
}
.launch-cine-splash {
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 900;
  letter-spacing: 0.25em;
  color: #ff6b35;
  text-shadow: 0 0 24px rgba(255, 107, 53, 0.8);
  margin: 0 0 0.75rem;
  opacity: 0;
  transform: scale(1.4);
}
.launch-cine-splash.pop {
  animation: launch-cine-splash-pop 0.5s ease-out forwards;
}
@keyframes launch-cine-splash-pop {
  0% { opacity: 0; transform: scale(1.6); }
  40% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.85; transform: scale(1); }
}
.launch-cine-splash.hidden { display: none; }
.launch-cine-text {
  font-size: 1rem;
  line-height: 1.55;
  color: #94a3b8;
  margin: 0;
  min-height: 2.5rem;
}
.launch-cine-skip {
  position: fixed;
  bottom: max(1.25rem, calc(10vh + 0.5rem));
  right: max(1rem, env(safe-area-inset-right, 1rem));
  z-index: 12010;
  min-width: 9rem;
  background: rgba(255, 107, 53, 0.22);
  border: 1px solid rgba(255, 179, 71, 0.55);
  color: #ffd89b;
  padding: 0.55rem 1.1rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}
.launch-cine-skip:hover { background: rgba(255, 107, 53, 0.28); }

.lf-garage-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(255, 179, 71, 0.35);
  background: linear-gradient(90deg, rgba(26, 37, 64, 0.95), rgba(15, 23, 42, 0.9));
  color: #f8fafc;
  cursor: pointer;
  font-size: 0.72rem;
}
.lf-garage-banner.hidden { display: none; }
.lf-garage-banner:hover { border-color: rgba(255, 179, 71, 0.6); }
.lf-garage-banner.has-claim { box-shadow: 0 0 12px rgba(255, 179, 71, 0.35); }
.lf-garage-banner-icon { font-size: 0.9rem; }
.lf-garage-banner-timer { margin-left: auto; color: #ffb347; font-variant-numeric: tabular-nums; }
.lf-garage-banner-cta { color: #94a3b8; font-size: 0.65rem; }

.wot-event-tab-panel[data-event-panel="launch-day"] .lf-event-stage {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #0f172a 0%, #1e293b 40%, #0c1222 100%);
  overflow: hidden;
}
.wot-event-tab-panel[data-event-panel="launch-day"] .lf-event-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, transparent 20%, rgba(0, 0, 0, 0.65) 100%);
}
.wot-event-tab-panel[data-event-panel="launch-day"] .lf-event-stars {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 70% 20%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(255, 255, 255, 0.35), transparent);
  opacity: 0.6;
}
.wot-event-tab-panel[data-event-panel="launch-day"] .lf-event-content {
  position: relative;
  z-index: 2;
}
.event-theme-lf #panel-event .btn-ev-claim,
.event-theme-lf #panel-event .btn-ev-claim-all {
  background: linear-gradient(180deg, #ffb347, #e8942a);
  color: #1a1410;
}
.theme-lf .ev-event-eyebrow { color: #ffb347; }
.theme-lf .lf-event-complete {
  background: rgba(255, 179, 71, 0.12);
  border: 1px solid rgba(255, 179, 71, 0.35);
  color: #ffd89b;
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  margin-bottom: 0.75rem;
  font-size: 0.78rem;
}
.theme-lf .btn-lf-replay-cine {
  margin-top: 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}
#garage-viewport.launch-garage {
  box-shadow: inset 0 0 80px rgba(255, 179, 71, 0.08);
}
#garage-viewport.advent-garage {
  box-shadow: inset 0 0 80px rgba(196, 30, 58, 0.1), inset 0 0 40px rgba(22, 101, 52, 0.08);
}
#garage-viewport.winter-lights-garage {
  box-shadow: inset 0 0 60px rgba(250, 204, 21, 0.12), inset 0 0 30px rgba(196, 30, 58, 0.08);
}

/* —— Winterfront Event —— */
.wf-event-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(148, 163, 184, 0.2), transparent 65%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(8, 12, 20, 0.98));
}
.wf-event-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(8, 12, 20, 0.92) 100%);
}
.theme-wf .ev-event-header {
  border-color: rgba(148, 163, 184, 0.35);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(8, 12, 20, 0.88));
}
.theme-wf .ev-event-eyebrow { color: #bae6fd; }
.theme-wf .ev-event-header h2 { color: #f1f5f9; }
.theme-wf .ev-event-desc { color: #cbd5e1; }
.theme-wf .ev-pts-bar i { background: linear-gradient(90deg, #334155, #94a3b8); }
.theme-wf .ev-section-title { color: #94a3b8; }
.wf-teaser-note, .ad-teaser-note {
  font-size: 0.58rem;
  color: #fde68a;
  margin: 0 0 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  background: rgba(120, 80, 10, 0.2);
  border: 1px solid rgba(250, 204, 21, 0.25);
}
.wot-event-tab.tab-wf.selected {
  color: #e2e8f0;
  border-color: rgba(148, 163, 184, 0.45);
  background: rgba(30, 41, 59, 0.35);
}
.event-theme-wf #panel-event .btn-ev-claim,
.event-theme-wf #panel-event .btn-ev-claim-all {
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(15, 23, 42, 0.4);
  color: #e2e8f0;
}
.event-theme-wf #panel-event .btn-ev-claim {
  border: none;
  background: linear-gradient(180deg, #475569, #334155);
  color: #fff;
}
.wf-garage-banner,
.ad-garage-banner { /* shared base in banner list */ }
.wf-garage-banner {
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.96), rgba(51, 65, 85, 0.5), rgba(15, 23, 42, 0.96));
  color: #e2e8f0;
}
.wf-garage-banner:hover { border-color: rgba(186, 230, 253, 0.6); transform: translateY(-1px); }
.wf-garage-banner.has-claim { animation: wf-banner-pulse 2s ease-in-out infinite; }
@keyframes wf-banner-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: 0 4px 24px rgba(148, 163, 184, 0.35); }
}
.wf-garage-banner-icon { font-size: 0.9rem; }
.wf-garage-banner-timer {
  padding: 0.1rem 0.35rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
  color: #94a3b8;
}
.wf-garage-banner-cta { font-size: 0.55rem; color: rgba(203, 213, 225, 0.75); letter-spacing: 0.04em; }

/* —— Weihnachtsfront Event —— */
.wx-event-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 45% at 50% 0%, rgba(196, 30, 58, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(34, 120, 60, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(12, 18, 16, 0.96), rgba(8, 10, 14, 0.98));
}
.wx-event-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(8, 10, 14, 0.92) 100%);
}
.theme-wx .ev-event-header {
  border-color: rgba(196, 30, 58, 0.35);
  background: linear-gradient(135deg, rgba(20, 28, 24, 0.92), rgba(12, 16, 14, 0.88));
}
.theme-wx .ev-event-eyebrow { color: #fca5a5; }
.theme-wx .ev-event-header h2 { color: #f8fafc; }
.theme-wx .ev-event-desc { color: #cbd5e1; }
.theme-wx .ev-section-title { color: #86efac; }
.event-theme-wx #panel-event .btn-ev-claim {
  background: linear-gradient(180deg, #166534, #14532d);
  border-color: rgba(134, 239, 172, 0.35);
}
.event-theme-wx #panel-event .btn-ev-claim:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.wx-wallet {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.25rem 0;
}
.wx-wallet-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  padding: 0.25rem 0.45rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
}
.wx-wallet-chip em { font-style: normal; }
.wx-wallet-chip small { font-size: 0.5rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
.wx-wallet-chip.coal { border-color: rgba(120, 113, 108, 0.45); }
.wx-wallet-chip.snow { border-color: rgba(186, 230, 253, 0.4); }
.wx-wallet-chip.steel { border-color: rgba(148, 163, 184, 0.45); }
.wx-farm-note {
  font-size: 0.52rem;
  color: #94a3b8;
  margin: 0 0 0.4rem;
  line-height: 1.4;
}
.wx-drop-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.55rem;
  margin-bottom: 0.4rem;
}
.wx-drop-table th,
.wx-drop-table td {
  padding: 0.28rem 0.4rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.wx-drop-table th { color: #86efac; font-weight: 600; }
.wx-drop-table td { color: #cbd5e1; }
.wx-exchange-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
@media (max-width: 640px) {
  .wx-exchange-row { grid-template-columns: 1fr; }
}
.wx-exchange-col {
  padding: 0.45rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.wx-exchange-label {
  display: block;
  font-size: 0.55rem;
  color: #94a3b8;
  margin-bottom: 0.35rem;
}
.wx-exchange-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.wx-crate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.45rem;
}
.wx-crate-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.55rem 0.45rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 12, 10, 0.55);
  text-align: center;
}
.wx-crate-card.featured {
  border-color: rgba(196, 30, 58, 0.45);
  background: linear-gradient(180deg, rgba(40, 16, 20, 0.55), rgba(8, 12, 10, 0.65));
}
.wx-crate-card.can-buy {
  border-color: rgba(134, 239, 172, 0.35);
}
.wx-crate-icon { font-size: 1.35rem; }
.wx-crate-card h4 {
  margin: 0;
  font-size: 0.62rem;
  color: #f1f5f9;
}
.wx-crate-desc {
  margin: 0;
  font-size: 0.48rem;
  color: #94a3b8;
  line-height: 1.35;
  min-height: 2.2em;
}
.wx-crate-cost {
  margin: 0.15rem 0;
  font-size: 0.7rem;
  font-weight: 700;
  color: #bae6fd;
}
.wx-crate-bought {
  margin: 0 0 0.25rem;
  font-size: 0.45rem;
  color: #64748b;
}
.wx-crate-card .btn-ev-claim { width: 100%; }
.wx-shop-soon { border-color: rgba(134, 239, 172, 0.25); }
.wx-header-wallet .ev-pts-val { display: none; }

/* —— Saison-Storyline & Winter-Shop —— */
.ws-storyline { margin-bottom: 0.55rem; }
.ws-story-chapter {
  display: flex;
  gap: 0.45rem;
  padding: 0.4rem 0.5rem;
  margin-bottom: 0.3rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(8, 10, 16, 0.45);
  opacity: 0.55;
}
.ws-story-chapter.active {
  opacity: 1;
  border-color: rgba(196, 30, 58, 0.35);
  background: rgba(20, 36, 24, 0.35);
}
.ws-story-chapter.done { opacity: 0.75; }
.ws-story-icon { font-size: 0.85rem; flex-shrink: 0; }
.ws-story-body h4 { margin: 0 0 0.12rem; font-size: 0.58rem; color: #e2e8f0; }
.ws-story-body p { margin: 0; font-size: 0.5rem; line-height: 1.35; color: #94a3b8; }
.ws-shop-section { margin-top: 0.45rem; }
.ws-shop-hint { font-size: 0.5rem; color: #64748b; margin: 0 0 0.4rem; }
.ws-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.35rem;
}
.ws-shop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.4rem 0.3rem;
  border-radius: 4px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.45);
  text-align: center;
}
.ws-shop-card.claimable { border-color: rgba(186, 230, 253, 0.45); }
.ws-shop-card.bought { opacity: 0.65; }
.ws-shop-icon { font-size: 0.9rem; }
.ws-shop-label { margin: 0; font-size: 0.48rem; color: #cbd5e1; line-height: 1.25; }
.ws-shop-foot { min-height: 1.1rem; display: flex; align-items: center; justify-content: center; }
.ws-shop-card .btn-ev-claim { font-size: 0.44rem; padding: 0.12rem 0.35rem; }

/* —— Black Friday Kisten (Dual) —— */
.bf-crate-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  align-items: start;
}
@media (max-width: 720px) {
  .bf-crate-duo { grid-template-columns: 1fr; }
}
.bf-marks-balance {
  font-size: 0.52rem;
  color: #cbd5e1;
  margin: 0 0 0.35rem;
}
.bf-marks-balance strong { color: #fbbf24; }
.bf-crate-tank-hint {
  font-size: 0.48rem;
  color: #fde68a;
  margin: 0.2rem 0 0.35rem;
  line-height: 1.35;
}
.bf-crate-tank-hint-none { color: #94a3b8; }
.bf-crate-no-tank { color: #94a3b8 !important; font-style: italic; }
.bf-shop-mode-nav {
  display: flex;
  gap: 0.35rem;
  margin: 0 0 0.45rem;
  flex-wrap: wrap;
}
.bf-shop-mode-btn {
  flex: 1;
  min-width: 7rem;
  padding: 0.28rem 0.45rem;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 0.25rem;
  background: rgba(15, 23, 42, 0.55);
  color: #cbd5e1;
  cursor: pointer;
}
.bf-shop-mode-btn:hover { border-color: rgba(251, 191, 36, 0.45); color: #fde68a; }
.bf-shop-mode-btn.selected {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.55);
  color: #fde68a;
}
.bf-shop-direct-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.45rem;
  margin-top: 0.35rem;
}
.bf-shop-bundle-hero {
  grid-column: 1 / -1;
  border-color: rgba(251, 191, 36, 0.35) !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(30, 20, 5, 0.55));
  margin-bottom: 0.25rem;
}
.bf-shop-bundle-save {
  font-size: 0.48rem;
  color: #86efac;
  margin: 0.15rem 0 0.25rem;
}
.wot-shop-tank-bf { border-color: rgba(251, 191, 36, 0.22); }
.wot-shop-crate-bf-marks {
  border-color: rgba(250, 204, 21, 0.35);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.08);
}
.wot-shop-crate-bf-marks .wot-shop-badge {
  background: linear-gradient(135deg, #1a1408, #3d3520);
  color: #fde68a;
}

/* —— Black Friday Cyber Monday —— */
.bf-cyber-banner {
  margin: 0 0 0.45rem;
  padding: 0.35rem 0.55rem;
  border-radius: 4px;
  font-size: 0.55rem;
  color: #fde68a;
  background: linear-gradient(90deg, rgba(30, 30, 30, 0.9), rgba(80, 80, 80, 0.4));
  border: 1px solid rgba(250, 204, 21, 0.35);
  text-align: center;
}

/* —— Advent Erweiterungen —— */
.ad-battle-ok {
  font-size: 0.55rem;
  color: #86efac;
  margin: 0 0 0.4rem;
}
.ad-battle-warn {
  font-size: 0.55rem;
  color: #fca5a5;
  margin: 0 0 0.4rem;
  padding: 0.3rem 0.45rem;
  border-radius: 4px;
  background: rgba(127, 29, 29, 0.2);
  border: 1px solid rgba(196, 30, 58, 0.25);
}
.advent-door.week-special { border-color: rgba(250, 204, 21, 0.4); }
.advent-door.gift-door { border-style: dashed; }
.ad-door-tag {
  font-size: 0.38rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fde68a;
  background: rgba(120, 80, 10, 0.35);
  padding: 0.05rem 0.2rem;
  border-radius: 2px;
}
.ad-door-tag.gift { color: #fecaca; background: rgba(127, 29, 29, 0.35); }
.ad-pass-track { flex-wrap: wrap; }
.ad-pass-tier { min-width: 72px; }
.btn-ad-complete-bonus { margin-left: 0.35rem; font-size: 0.52rem; }

/* —— Garagen-Schnee —— */
.garage-snow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
  background-image:
    radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(2px 2px at 130px 80px, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1px 1px at 160px 120px, rgba(255, 255, 255, 0.55), transparent);
  background-size: 200px 200px;
  animation: garage-snow-fall 8s linear infinite;
  opacity: 0.55;
}
@keyframes garage-snow-fall {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 0 200px, 20px 220px, 10px 210px, 30px 230px, 5px 215px; }
}
#garage-viewport.winter-snow-active .wot-hangar-hint { color: rgba(186, 230, 253, 0.5); }

/* —— Garagen-Hintergrund-Auswahl —— */
.garage-bg-picker-card { max-width: 520px; width: min(92vw, 520px); }
.garage-bg-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.garage-bg-picker-head h2 { margin: 0; font-size: 0.95rem; }
.garage-bg-picker-hint {
  font-size: 0.52rem;
  color: #94a3b8;
  margin: 0 0 0.55rem;
  line-height: 1.35;
}
.garage-bg-picker-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.35rem;
  max-height: 52vh;
  overflow-y: auto;
}
.garage-bg-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  padding: 0.45rem 0.5rem;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(8, 12, 20, 0.75);
  color: #e2e8f0;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.garage-bg-option:hover:not(:disabled) { border-color: rgba(245, 158, 11, 0.45); }
.garage-bg-option.selected {
  border-color: rgba(245, 158, 11, 0.65);
  background: rgba(120, 80, 10, 0.22);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.15);
}
.garage-bg-option.locked { opacity: 0.45; cursor: not-allowed; }
.garage-bg-option-icon { font-size: 1rem; line-height: 1; }
.garage-bg-option-name { font-size: 0.58rem; font-weight: 700; color: #f8fafc; }
.garage-bg-option-desc { font-size: 0.48rem; color: #94a3b8; line-height: 1.25; }

/* —— Winter-Garage (Panel + Viewport) —— */
.wot-panel-garage.garage-panel-winter {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(148, 163, 184, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(10, 18, 24, 0.98), rgba(6, 10, 14, 0.99));
}
.wot-panel-garage.garage-panel-winter .wot-hangar-panel {
  border-color: rgba(148, 163, 184, 0.22);
  background: linear-gradient(165deg, rgba(12, 20, 28, 0.92), rgba(8, 14, 20, 0.88));
}
.wot-panel-garage.garage-panel-winter .wot-hangar-panel-label { color: #bae6fd; border-bottom-color: rgba(148, 163, 184, 0.25); }
.wot-hangar-vignette.winter-vignette {
  background:
    radial-gradient(ellipse 65% 50% at 50% 75%, transparent 30%, rgba(8, 16, 24, 0.65) 100%),
    linear-gradient(90deg, rgba(10, 20, 30, 0.75) 0%, transparent 20%, transparent 80%, rgba(10, 20, 30, 0.75) 100%),
    radial-gradient(circle at 15% 20%, rgba(196, 30, 58, 0.06), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(22, 101, 52, 0.06), transparent 35%);
}
.garage-winter-lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent 18px, rgba(250, 204, 21, 0.35) 18px, rgba(250, 204, 21, 0.35) 20px, transparent 20px, transparent 38px),
    repeating-linear-gradient(90deg, transparent 0, transparent 22px, rgba(196, 30, 58, 0.28) 22px, rgba(196, 30, 58, 0.28) 24px, transparent 24px, transparent 44px);
  background-size: 100% 3px, 100% 3px;
  background-position: 0 8%, 0 12%;
  background-repeat: repeat-x;
  opacity: 0.7;
  animation: garage-lights-twinkle 3s ease-in-out infinite alternate;
}
@keyframes garage-lights-twinkle {
  from { opacity: 0.45; }
  to { opacity: 0.85; }
}
#garage-viewport.garage-bg-winterfront .wot-hangar-corner,
#garage-viewport.garage-bg-advent_season .wot-hangar-corner,
#garage-viewport.garage-bg-adv_winter_garage .wot-hangar-corner {
  border-color: rgba(186, 230, 253, 0.45);
}
#garage-viewport.garage-bg-winterfront .wot-hangar-floor-line,
#garage-viewport.garage-bg-advent_season .wot-hangar-floor-line,
#garage-viewport.garage-bg-adv_winter_garage .wot-hangar-floor-line {
  background: linear-gradient(90deg, transparent, rgba(186, 230, 253, 0.35), transparent);
}
#garage-viewport.garage-bg-winter_lights_garage .wot-hangar-corner {
  border-color: rgba(250, 204, 21, 0.45);
}
#garage-viewport.garage-bg-bf_garage .wot-hangar-corner,
#garage-viewport.garage-bg-black_friday_season .wot-hangar-corner {
  border-color: rgba(163, 163, 163, 0.5);
}
#garage-viewport.garage-bg-launch_dawn .wot-hangar-corner {
  border-color: rgba(255, 179, 71, 0.5);
}
#garage-viewport.garage-bg-bh_partner .wot-hangar-corner {
  border-color: rgba(192, 132, 252, 0.45);
}
#garage-viewport.garage-bg-bh_dragon .wot-hangar-corner {
  border-color: rgba(251, 146, 60, 0.5);
  box-shadow: inset 0 0 24px rgba(234, 88, 12, 0.08);
}
#garage-viewport.winter-snow-active .garage-snow { opacity: 0.72; }

/* —— Neon-Tarnungen —— */
.wot-camo-swatch.camo-neon,
.wot-camo-item.camo-neon .wot-camo-swatch {
  animation: wot-camo-neon-pulse 2.6s ease-in-out infinite;
}
@keyframes wot-camo-neon-pulse {
  0%, 100% { filter: brightness(1) saturate(1.1); opacity: 1; }
  50% { filter: brightness(1.45) saturate(1.35); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .wot-camo-swatch.camo-neon { animation: none; }
}

/* —— Panzerwerft Event —— */
.theme-werft .ev-event-header {
  background: linear-gradient(135deg, rgba(20, 16, 8, 0.95) 0%, rgba(40, 32, 12, 0.88) 100%);
  border-color: rgba(251, 191, 36, 0.22);
}
.theme-werft .ev-event-eyebrow { color: #fcd34d; }
.theme-werft .ev-event-header h2 { color: #fef3c7; }
.theme-werft .ev-event-desc { color: #fde68a; }
.theme-werft .ev-pts-val { color: #fbbf24; }
.theme-werft .ev-pts-bar i { background: linear-gradient(90deg, #b45309, #fbbf24); }
.theme-werft .ev-section { border-color: rgba(251, 191, 36, 0.14); }
.theme-werft .ev-section-title { color: #fcd34d; }
.theme-werft .werft-daily-card { border-color: rgba(251, 191, 36, 0.25); background: rgba(30, 24, 8, 0.35); }
.theme-werft .werft-event-complete {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.35);
  color: #fde68a;
}
.event-theme-werft #panel-event .btn-ev-claim,
.event-theme-werft #panel-event .btn-ev-claim-all {
  background: linear-gradient(180deg, #fbbf24, #b45309);
  color: #1a1408;
}
.wot-event-tab.tab-werft.selected {
  border-color: rgba(251, 191, 36, 0.55);
  color: #fcd34d;
  background: rgba(80, 55, 15, 0.28);
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.12);
}
.werft-section-hint {
  font-size: 0.62rem;
  color: #94a3b8;
  margin: 0 0 0.65rem;
  line-height: 1.4;
}
.werft-stages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.45rem;
}
.werft-stage-card {
  display: flex;
  gap: 0.45rem;
  padding: 0.5rem 0.55rem;
  border-radius: 6px;
  border: 1px solid rgba(251, 191, 36, 0.12);
  background: rgba(20, 16, 8, 0.45);
}
.werft-stage-card.built { border-color: rgba(74, 222, 128, 0.35); background: rgba(20, 40, 24, 0.35); }
.werft-stage-card.claimable { border-color: rgba(251, 191, 36, 0.45); box-shadow: 0 0 12px rgba(251, 191, 36, 0.15); }
.werft-stage-card.locked { opacity: 0.55; }
.werft-stage-card.featured { grid-column: 1 / -1; border-color: rgba(251, 191, 36, 0.35); }
.werft-stage-icon { font-size: 1.25rem; line-height: 1; }
.werft-stage-body h4 { margin: 0; font-size: 0.68rem; color: #fde68a; }
.werft-stage-cost { font-size: 0.55rem; color: #94a3b8; }
.werft-stage-foot { margin-top: 0.35rem; }
.werft-assembly-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-bottom: 0.65rem;
  border-radius: 8px;
  background: radial-gradient(ellipse at 50% 80%, rgba(251, 191, 36, 0.08) 0%, rgba(10, 12, 18, 0.95) 65%);
  border: 1px solid rgba(251, 191, 36, 0.18);
  overflow: hidden;
}
.werft-assembly-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 60%, rgba(251, 191, 36, 0.12) 0%, transparent 55%);
  animation: werft-glow-pulse 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes werft-glow-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.werft-assembly-part {
  position: absolute;
  background: rgba(251, 191, 36, 0.08);
  border: 1px dashed rgba(251, 191, 36, 0.2);
  transition: background 0.35s, box-shadow 0.35s, border-color 0.35s;
}
.werft-assembly-part.active {
  background: rgba(251, 191, 36, 0.35);
  border-color: rgba(251, 191, 36, 0.75);
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.45);
}
.werft-part-frame { left: 18%; right: 18%; bottom: 8%; height: 22%; border-radius: 4px; }
.werft-part-tracks { left: 8%; right: 8%; bottom: 4%; height: 8%; }
.werft-part-engine { left: 28%; width: 44%; bottom: 28%; height: 18%; }
.werft-part-armor { left: 22%; right: 22%; bottom: 30%; height: 28%; border-radius: 6px 6px 2px 2px; }
.werft-part-turret { left: 32%; width: 36%; bottom: 52%; height: 22%; border-radius: 4px; }
.werft-part-gun { left: 46%; width: 28%; bottom: 58%; height: 8%; transform: rotate(-8deg); transform-origin: left center; }
.werft-part-electronics { left: 34%; width: 32%; bottom: 68%; height: 10%; border-radius: 50%; }
.werft-part-complete { inset: 12%; border-radius: 8px; border-style: solid; opacity: 0; }
.werft-part-complete.active { opacity: 1; background: rgba(251, 191, 36, 0.15); box-shadow: inset 0 0 24px rgba(251, 191, 36, 0.25); }
.ev-mission-card.status-locked { opacity: 0.5; }
.werft-event-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(251, 191, 36, 0.06) 0%, transparent 50%);
}
.werft-event-content { position: relative; z-index: 1; }

/* —— UI Polish: Topbar responsive, neue Event-Banner —— */
@media (max-width: 1180px) {
  .wot-res-label { display: none; }
  .wot-res { padding: 0.3rem 0.48rem; }
  .wot-res strong { font-size: 0.88rem; }
}

@media (max-width: 960px) {
  .wot-badge { display: none; }
  .wot-logo { font-size: 1.15rem; }
  .wot-topbar { gap: 0.55rem; padding-right: 0.65rem; }
}

.bz-garage-banner {
  border: 1px solid rgba(56, 189, 248, 0.45);
  background: linear-gradient(90deg, rgba(8, 24, 36, 0.94), rgba(12, 74, 110, 0.88), rgba(8, 24, 36, 0.94));
  color: #bae6fd;
}
.bz-garage-banner:hover {
  border-color: rgba(125, 211, 252, 0.7);
  transform: translateY(-1px);
}
.bz-garage-banner.has-claim { animation: bz-banner-pulse 2s ease-in-out infinite; }
@keyframes bz-banner-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: 0 4px 24px rgba(56, 189, 248, 0.35); }
}
.bz-garage-banner-icon { font-size: 0.9rem; }
.bz-garage-banner-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-garage-banner-timer {
  padding: 0.1rem 0.35rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
  color: #38bdf8;
}
.bz-garage-banner-cta {
  font-size: 0.55rem;
  color: rgba(186, 230, 253, 0.75);
  letter-spacing: 0.04em;
}

.werft-garage-banner {
  border: 1px solid rgba(251, 191, 36, 0.45);
  background: linear-gradient(90deg, rgba(20, 16, 8, 0.94), rgba(80, 55, 15, 0.85), rgba(20, 16, 8, 0.94));
  color: #fde68a;
}
.werft-garage-banner:hover {
  border-color: rgba(251, 191, 36, 0.75);
  transform: translateY(-1px);
}
.werft-garage-banner.has-claim { animation: werft-banner-pulse 2s ease-in-out infinite; }
@keyframes werft-banner-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: 0 4px 24px rgba(251, 191, 36, 0.35); }
}
.werft-garage-banner-icon { font-size: 0.9rem; }
.werft-garage-banner-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.werft-garage-banner-timer {
  padding: 0.1rem 0.35rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
  color: #fbbf24;
}
.werft-garage-banner-cta {
  font-size: 0.55rem;
  color: rgba(253, 230, 138, 0.75);
  letter-spacing: 0.04em;
}

/* —— UI Polish v2.3: Battle-Dock (legacy overrides trimmed) —— */
.wot-battle-dock-glow {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(ellipse at 50% 0%, rgba(251, 191, 36, 0.22), transparent 68%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

@media (max-width: 820px) {
  .wot-battle-dock-top {
    flex-direction: column;
    gap: 0.45rem;
  }
  .wot-battle-mode-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .wot-battle-action {
    min-width: 0;
    width: 100%;
  }
  .wot-battle-btn {
    width: 100%;
    min-width: 0;
  }
  .wot-battle-mode-detail {
    text-align: left;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .wot-battle-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.wot-mini-event-pill {
  flex: 0 1 auto;
  margin-top: 0;
  max-width: 100%;
  font-family: inherit;
  cursor: pointer;
  padding: 0.24rem 0.55rem;
  font-size: 0.54rem;
  font-weight: 600;
  color: #fde68a;
  background: rgba(120, 80, 20, 0.28);
  border: 1px solid rgba(251, 191, 36, 0.38);
  border-radius: 999px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}

.wot-mini-event-pill:hover {
  border-color: rgba(251, 191, 36, 0.62);
  background: rgba(120, 80, 20, 0.42);
  transform: translateY(-1px);
}

.wot-mini-event-pill.hidden { display: none; }

.wot-claim-banner {
  margin: 0 0.65rem 0.5rem;
  padding: 0.45rem 0.65rem;
  border-radius: var(--if-radius-sm);
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.14), rgba(245, 158, 11, 0.1));
  border: 1px solid rgba(34, 197, 94, 0.32);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
}

.btn-claim-banner-quick {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: background 0.15s, border-color 0.15s;
}

.btn-claim-banner-quick:hover:not(:disabled) {
  background: rgba(34, 197, 94, 0.28);
  border-color: rgba(74, 222, 128, 0.65);
}

#panel-shop {
  padding: 0.7rem 0.8rem 0.55rem;
  background: linear-gradient(180deg, rgba(14, 12, 24, 0.97), rgba(8, 12, 20, 0.92));
}

.wot-shop-head {
  align-items: center;
  margin-bottom: 0.55rem;
}

.wot-shop-balance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  background: transparent;
  border: none;
}

.wot-shop-balance-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.34rem 0.58rem;
  border-radius: var(--if-radius-sm);
  font-size: 0.68rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.32);
}

.wot-shop-balance-credits {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.08);
}

.wot-shop-balance-credits strong { color: #e2e8f0; }

.wot-shop-balance-dub {
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.08);
}

.wot-shop-balance-dub strong { color: #fde68a; }

.wot-shop-balance-icon {
  font-size: 0.72rem;
  opacity: 0.85;
}

.wot-shop-nav {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.wot-shop-nav::-webkit-scrollbar { display: none; }

.wot-shop-nav-btn {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 0.4rem 0.72rem;
  white-space: nowrap;
}

.wot-shop-nav-btn.selected {
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.12);
}

.wot-shop-nav-events {
  margin-top: -0.35rem;
  padding-top: 0.4rem;
}

.wot-shop-nav-btn-event.selected {
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.12);
}

.wot-shop-card {
  border-radius: var(--if-radius);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.wot-shop-card:hover {
  transform: translateY(-2px);
  border-color: rgba(192, 132, 252, 0.42);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
}

.wot-shop-featured-hero {
  border-radius: var(--if-radius);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
}

.wot-shop-event-head {
  border-radius: var(--if-radius-sm);
  backdrop-filter: blur(6px);
}

.wot-shop-event-grid {
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.48rem;
}

@media (max-width: 900px) {
  .wot-panel-garage > .wot-battle-dock {
    margin-top: -2.2rem;
    max-width: min(300px, calc(100% - 0.75rem));
  }

  .wot-battle-dock .wot-battle-btn {
    min-width: 132px;
    width: 100%;
  }

  .wot-battle-dock-settings {
    flex-direction: column;
    align-items: stretch;
  }

  .wot-mini-event-pill {
    width: 100%;
  }
}

/* —— Hangar v3 · High-End —— */
.wot-hangar-v3 .wot-hangar-vignette {
  background:
    radial-gradient(ellipse 85% 65% at 50% 58%, transparent 18%, rgba(4, 8, 16, 0.72) 100%),
    radial-gradient(ellipse 40% 30% at 50% 72%, rgba(245, 158, 11, 0.06), transparent 70%),
    linear-gradient(90deg, rgba(4, 8, 16, 0.82) 0%, transparent 18%, transparent 82%, rgba(4, 8, 16, 0.82) 100%);
}
.wot-hangar-v3 .wot-hangar-panel {
  background: linear-gradient(165deg, rgba(12, 18, 28, 0.92), rgba(4, 8, 14, 0.88));
  border: 1px solid rgba(245, 158, 11, 0.14);
  border-top: 2px solid rgba(251, 191, 36, 0.55);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(14px) saturate(1.2);
}
.wot-hangar-v3 .wot-tier-badge {
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
}
.wot-hangar-v3 .wot-tank-name {
  font-size: 1.18rem;
  background: linear-gradient(180deg, #fff 0%, #cbd5e1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}
.wot-hangar-v3 .wot-stat-bar i {
  background: linear-gradient(90deg, #92400e, #fbbf24, #fde68a);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.35);
}
.wot-hangar-v3 #garage-viewport {
  isolation: isolate;
}
.wot-hangar-ambient {
  position: absolute;
  inset: 8% 6% 18%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 50% 68%, rgba(251, 191, 36, 0.12), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 80%, rgba(59, 130, 246, 0.06), transparent 65%);
  animation: wot-hangar-ambient-pulse 6s ease-in-out infinite;
}
.wot-hangar-pedestal-glow {
  position: absolute;
  bottom: 16%;
  left: 50%;
  width: min(420px, 58vw);
  height: 90px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(245, 158, 11, 0.28), transparent 72%);
  pointer-events: none;
  animation: wot-hangar-pedestal-pulse 3.5s ease-in-out infinite;
}
.wot-hangar-lights-rig {
  position: absolute;
  inset: 10% 0 20%;
  pointer-events: none;
  overflow: hidden;
}
.wot-hangar-beam {
  position: absolute;
  top: 0;
  width: 38%;
  height: 100%;
  opacity: 0.14;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.5), transparent 85%);
  filter: blur(8px);
  animation: wot-hangar-beam-sway 8s ease-in-out infinite;
}
.wot-hangar-beam-l { left: 18%; transform: skewX(-8deg); }
.wot-hangar-beam-r { right: 18%; transform: skewX(8deg); animation-delay: -4s; }
.wot-hangar-scanlines {
  position: absolute;
  inset: 12% 10% 22%;
  pointer-events: none;
  opacity: 0.04;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255, 255, 255, 0.5) 2px,
    rgba(255, 255, 255, 0.5) 3px
  );
  mix-blend-mode: overlay;
}
.wot-hangar-v3 .wot-hangar-frame {
  inset: 10% 8% 20%;
}
.wot-hangar-v3 .wot-hangar-corner {
  width: 22px;
  height: 22px;
  border-color: rgba(251, 191, 36, 0.55);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}
.wot-hangar-v3 .wot-hangar-floor-line {
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.65), transparent);
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.35);
}
.wot-hangar-v3 .wot-spotlight {
  width: min(480px, 62vw);
  height: 90px;
  bottom: 16%;
  background: radial-gradient(ellipse, rgba(251, 191, 36, 0.32), transparent 72%);
}
.wot-hangar-plate-label {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.15rem 0.55rem;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.85);
  background: rgba(4, 8, 14, 0.65);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 2px;
  pointer-events: none;
}
.wot-hangar-v3 .wot-hangar-controls {
  padding: 0.25rem 0.35rem;
  background: rgba(4, 8, 14, 0.72);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 4px;
  backdrop-filter: blur(8px);
}
.wot-hangar-v3 .wot-hangar-ctrl:hover {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(251, 191, 36, 0.45);
}
.wot-hangar-v3 .wot-battle-dock {
  border-color: rgba(245, 158, 11, 0.22);
  box-shadow: 0 0 40px rgba(245, 158, 11, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.wot-hangar-v3 .wot-battle-btn {
  box-shadow: 0 0 28px rgba(245, 158, 11, 0.35), 0 4px 16px rgba(0, 0, 0, 0.45);
}
@keyframes wot-hangar-ambient-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
}
@keyframes wot-hangar-pedestal-pulse {
  0%, 100% { opacity: 0.75; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.06); }
}
@keyframes wot-hangar-beam-sway {
  0%, 100% { opacity: 0.1; transform: skewX(-8deg) translateX(0); }
  50% { opacity: 0.18; transform: skewX(-5deg) translateX(6px); }
}

/* —— Horizont Tech-Baum · Karten ohne Verbindung —— */
.wot-tree-horizon-mode .wot-tree-lines { display: none !important; }
.wot-tree-horizon-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.45rem;
  padding: 0.45rem 0.55rem;
  background: linear-gradient(135deg, rgba(20, 12, 32, 0.85), rgba(40, 16, 24, 0.75));
  border: 1px solid rgba(234, 88, 12, 0.25);
  border-radius: 4px;
}
.wot-tree-horizon-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #f8fafc;
}
.wot-tree-horizon-meta {
  font-size: 0.58rem;
  color: #fbbf24;
  font-weight: 700;
}
.wot-tree-horizon-desc {
  font-size: 0.58rem;
  color: #94a3b8;
  margin: 0 0 0.65rem;
  line-height: 1.4;
}
.wot-tree-horizon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 0.55rem;
  padding: 0.15rem 0;
}
.wot-tree-horizon-card {
  position: relative;
  padding: 0.35rem 0.35rem 0.4rem;
  background: linear-gradient(165deg, rgba(12, 10, 20, 0.92), rgba(24, 14, 18, 0.88));
  border: 1px solid rgba(245, 158, 11, 0.18);
  border-radius: 4px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.wot-tree-horizon-card:hover {
  border-color: rgba(251, 191, 36, 0.45);
  box-shadow: 0 0 20px rgba(234, 88, 12, 0.15);
  transform: translateY(-2px);
}
.wot-tree-horizon-card-tag {
  position: absolute;
  top: 0.28rem;
  right: 0.32rem;
  font-size: 0.72rem;
  opacity: 0.85;
  pointer-events: none;
}
.wot-tree-node-horizon {
  width: 100%;
  min-height: 88px;
}
.wot-tree-node-horizon .wot-tree-node-name {
  font-size: 0.62rem;
  line-height: 1.25;
}
@media (prefers-reduced-motion: reduce) {
  .wot-hangar-ambient,
  .wot-hangar-pedestal-glow,
  .wot-hangar-beam { animation: none; }
}

/* —— Hangar v4 · Premium Atmosphäre —— */
.wot-hangar-v4 .wot-hangar-panel {
  position: relative;
  overflow: hidden;
}
.wot-hangar-panel-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--hangar-accent, #fbbf24), transparent);
  opacity: 0.85;
  pointer-events: none;
}
.wot-hangar-v4 .wot-hangar-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(251, 191, 36, 0.06), transparent 70%);
  pointer-events: none;
}
.wot-hangar-v4 .wot-hangar-panel-label,
.wot-hangar-v4 .wot-tank-plate,
.wot-hangar-v4 .wot-stat-bars,
.wot-hangar-v4 .wot-garage-tabs,
.wot-hangar-v4 .wot-gtab-panel {
  position: relative;
  z-index: 1;
}

.wot-hangar-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.wot-hangar-hex-grid {
  position: absolute;
  inset: 8% 5% 16%;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath fill='none' stroke='%23fbbf24' stroke-width='0.6' d='M28 0 L56 16 L56 50 L28 66 L0 50 L0 16 Z M28 34 L56 50 L56 84 L28 100 L0 84 L0 50 Z'/%3E%3C/svg%3E");
  background-size: 56px 100px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 65%, black 20%, transparent 75%);
}
.wot-hangar-ceiling-rays {
  position: absolute;
  top: 0;
  left: 50%;
  width: 120%;
  height: 55%;
  transform: translateX(-50%);
  background:
    conic-gradient(from 270deg at 50% 100%,
      transparent 0deg,
      rgba(251, 191, 36, 0.04) 12deg,
      transparent 24deg,
      rgba(251, 191, 36, 0.03) 36deg,
      transparent 48deg,
      rgba(59, 130, 246, 0.02) 60deg,
      transparent 72deg);
  opacity: 0.9;
  animation: wot-hangar-rays-spin 48s linear infinite;
}
.wot-hangar-reflection-floor {
  position: absolute;
  bottom: 14%;
  left: 50%;
  width: min(520px, 70vw);
  height: 120px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(251, 191, 36, 0.14), transparent 72%);
  filter: blur(12px);
  opacity: 0.7;
}
.wot-hangar-noise {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.wot-hangar-embers {
  position: absolute;
  inset: 10% 8% 20%;
  overflow: hidden;
}
.wot-hangar-embers span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(251, 191, 36, 0.75);
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
  animation: wot-hangar-ember-float 8s ease-in-out infinite;
}
.wot-hangar-embers span:nth-child(1) { left: 12%; bottom: 18%; animation-delay: 0s; animation-duration: 7s; }
.wot-hangar-embers span:nth-child(2) { left: 22%; bottom: 8%; animation-delay: -1.2s; animation-duration: 9s; }
.wot-hangar-embers span:nth-child(3) { left: 35%; bottom: 22%; animation-delay: -2.4s; animation-duration: 8s; }
.wot-hangar-embers span:nth-child(4) { left: 48%; bottom: 12%; animation-delay: -0.8s; animation-duration: 10s; }
.wot-hangar-embers span:nth-child(5) { left: 58%; bottom: 20%; animation-delay: -3.1s; animation-duration: 7.5s; }
.wot-hangar-embers span:nth-child(6) { left: 68%; bottom: 10%; animation-delay: -1.8s; animation-duration: 9.5s; }
.wot-hangar-embers span:nth-child(7) { left: 78%; bottom: 24%; animation-delay: -4s; animation-duration: 8.5s; }
.wot-hangar-embers span:nth-child(8) { left: 88%; bottom: 14%; animation-delay: -2.6s; animation-duration: 11s; }
.wot-hangar-embers span:nth-child(9) { left: 42%; bottom: 6%; animation-delay: -5s; animation-duration: 7.2s; }
.wot-hangar-embers span:nth-child(10) { left: 52%; bottom: 28%; animation-delay: -3.8s; animation-duration: 9.2s; }
.wot-hangar-embers span:nth-child(11) { left: 18%; bottom: 26%; animation-delay: -6s; animation-duration: 8.8s; }
.wot-hangar-embers span:nth-child(12) { left: 72%; bottom: 30%; animation-delay: -4.5s; animation-duration: 10.5s; }

.wot-hangar-side-rails {
  position: absolute;
  inset: 12% 0 22%;
  pointer-events: none;
  z-index: 1;
}
.wot-hangar-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(251, 191, 36, 0.35), rgba(251, 191, 36, 0.08), transparent);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.15);
}
.wot-hangar-rail-l { left: 7%; }
.wot-hangar-rail-r { right: 7%; }

.wot-hangar-v4 .wot-hangar-badge {
  padding: 0.22rem 0.65rem;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  background: linear-gradient(180deg, rgba(12, 18, 28, 0.88), rgba(4, 8, 14, 0.82));
  border: 1px solid rgba(251, 191, 36, 0.35);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 16px rgba(245, 158, 11, 0.08);
  backdrop-filter: blur(8px);
}
.wot-hangar-v4 .wot-hangar-plate-label {
  letter-spacing: 0.18em;
  border-color: rgba(251, 191, 36, 0.32);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.1);
}

.wot-battle-dock-ring {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 1px solid transparent;
  background:
    linear-gradient(165deg, rgba(12, 18, 28, 0.95), rgba(4, 8, 14, 0.92)) padding-box,
    linear-gradient(135deg, rgba(251, 191, 36, 0.55), rgba(245, 158, 11, 0.15), rgba(59, 130, 246, 0.25)) border-box;
  pointer-events: none;
  z-index: 0;
  animation: wot-battle-ring-shimmer 4s ease-in-out infinite;
}

.wot-hangar-v4 .wot-gtab.selected {
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.12);
}
.wot-hangar-v4 .wot-param {
  background: linear-gradient(165deg, rgba(0, 0, 0, 0.42), rgba(8, 12, 20, 0.55));
  border-color: rgba(255, 255, 255, 0.05);
  transition: border-color 0.15s;
}
.wot-hangar-v4 .wot-param:hover {
  border-color: rgba(245, 158, 11, 0.18);
}

.wot-panel-garage[data-nation="horizon"],
#garage-viewport[data-nation="horizon"] { --hangar-accent: #ea580c; }
.wot-panel-garage[data-nation="de"],
#garage-viewport[data-nation="de"] { --hangar-accent: #fbbf24; }
.wot-panel-garage[data-nation="ussr"],
#garage-viewport[data-nation="ussr"] { --hangar-accent: #ef4444; }
.wot-panel-garage[data-nation="usa"],
#garage-viewport[data-nation="usa"] { --hangar-accent: #3b82f6; }
.wot-panel-garage[data-nation="uk"],
#garage-viewport[data-nation="uk"] { --hangar-accent: #22c55e; }
.wot-panel-garage[data-nation="fr"],
#garage-viewport[data-nation="fr"] { --hangar-accent: #6366f1; }
.wot-panel-garage[data-nation="jp"],
#garage-viewport[data-nation="jp"] { --hangar-accent: #f472b6; }
.wot-panel-garage[data-nation="pl"],
#garage-viewport[data-nation="pl"] { --hangar-accent: #dc2626; }
.wot-panel-garage[data-nation="it"],
#garage-viewport[data-nation="it"] { --hangar-accent: #16a34a; }
.wot-panel-garage[data-nation="cz"],
#garage-viewport[data-nation="cz"] { --hangar-accent: #11457e; }

#garage-viewport.hangar-dragon-tank .wot-hangar-pedestal-glow {
  background: radial-gradient(ellipse, rgba(234, 88, 12, 0.38), transparent 72%);
}
#garage-viewport.hangar-dragon-tank .wot-hangar-embers span {
  background: rgba(251, 146, 60, 0.85);
  box-shadow: 0 0 8px rgba(234, 88, 12, 0.65);
}
#garage-viewport.hangar-dragon-tank .wot-spotlight {
  background: radial-gradient(ellipse, rgba(234, 88, 12, 0.28), transparent 72%);
}

#wot-menu[data-active-panel="garage"] .wot-tank-bar {
  background: linear-gradient(0deg, rgba(4, 8, 14, 0.99), rgba(8, 12, 20, 0.92));
  border-top: 1px solid rgba(251, 191, 36, 0.22);
  box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
#wot-menu[data-active-panel="garage"] .wot-tank-bar-title {
  color: #fbbf24;
  letter-spacing: 0.16em;
}
#wot-menu[data-active-panel="garage"] .wot-carousel-item {
  background: linear-gradient(165deg, rgba(8, 12, 20, 0.75), rgba(4, 8, 14, 0.85));
  border-color: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
#wot-menu[data-active-panel="garage"] .wot-carousel-item.active {
  border-color: #fbbf24;
  background: linear-gradient(165deg, rgba(245, 158, 11, 0.14), rgba(8, 12, 20, 0.88));
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.2), inset 0 0 12px rgba(251, 191, 36, 0.06);
}
#wot-menu[data-active-panel="garage"] .wot-carousel-scroll-btn {
  background: rgba(4, 8, 14, 0.72);
  border-color: rgba(251, 191, 36, 0.2);
  border-radius: 4px;
}

@keyframes wot-hangar-rays-spin {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(360deg); }
}
@keyframes wot-hangar-ember-float {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.2; }
  25% { opacity: 0.75; }
  50% { transform: translateY(-48px) scale(0.6); opacity: 0.9; }
  75% { opacity: 0.4; }
}
@keyframes wot-battle-ring-shimmer {
  0%, 100% { opacity: 0.75; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .wot-hangar-ambient,
  .wot-hangar-pedestal-glow,
  .wot-hangar-beam,
  .wot-hangar-ceiling-rays,
  .wot-hangar-embers span,
  .wot-battle-dock-ring,
  .wot-hangar-v5 .wot-hangar-scan-sweep,
  .wot-hangar-v5 .wot-hangar-command-status { animation: none; }
}

/* —— Hangar v5 · Cinematic Command Center —— */
.wot-hangar-v5.wot-panel-garage {
  display: block;
  position: relative;
  overflow: hidden;
  min-height: 0;
  height: 100%;
}
.wot-hangar-v5 .wot-garage-center {
  position: absolute;
  inset: 0;
  grid-column: unset;
  grid-row: unset;
  padding: 0;
  z-index: 1;
}
.wot-hangar-v5 .wot-garage-left {
  position: absolute;
  left: clamp(0.35rem, 1.2vw, 0.75rem);
  top: 50%;
  transform: translateY(-48%);
  z-index: 14;
  width: min(210px, 24vw);
  padding: 0;
  grid-column: unset;
  grid-row: unset;
}
.wot-hangar-v5 .wot-garage-right {
  position: absolute;
  right: clamp(0.35rem, 1.2vw, 0.75rem);
  top: 50%;
  transform: translateY(-48%);
  z-index: 14;
  width: min(320px, 30vw);
  padding: 0;
  grid-column: unset;
  grid-row: unset;
  max-height: min(72vh, 640px);
}
.wot-hangar-v5 > .wot-battle-dock {
  position: absolute;
  top: clamp(0.45rem, 1.5vh, 0.85rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 18;
  margin-top: 0;
  grid-column: unset;
  grid-row: unset;
}
.wot-hangar-v5 .wot-garage-left .wot-garage-event-stack {
  position: relative;
  top: auto;
  left: auto;
  max-width: none;
  z-index: 2;
}
.wot-hangar-v5 .wot-garage-sidebar {
  max-height: min(40vh, 16rem);
}
.wot-hangar-command {
  position: absolute;
  top: clamp(3.6rem, 9vh, 4.4rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 13;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.28rem 0.75rem;
  background: linear-gradient(180deg, rgba(6, 10, 16, 0.82), rgba(4, 8, 12, 0.55));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom-color: rgba(var(--hangar-accent-rgb, 251, 191, 36), 0.35);
  border-radius: 3px;
  backdrop-filter: blur(12px) saturate(1.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.wot-hangar-command-tag {
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: rgba(var(--hangar-accent-rgb, 251, 191, 36), 0.75);
}
.wot-hangar-command-title {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #e2e8f0;
  text-transform: uppercase;
}
.wot-hangar-command-status {
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #4ade80;
  padding: 0.1rem 0.35rem;
  border: 1px solid rgba(74, 222, 128, 0.35);
  border-radius: 2px;
  animation: wot-hangar-status-pulse 2.4s ease-in-out infinite;
}
.wot-hangar-class-ribbon {
  position: absolute;
  top: 0.35rem;
  right: 0.4rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: radial-gradient(circle, rgba(var(--hangar-accent-rgb, 251, 191, 36), 0.2), transparent 70%);
  border: 1px solid rgba(var(--hangar-accent-rgb, 251, 191, 36), 0.35);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(var(--hangar-accent-rgb, 251, 191, 36), 0.15);
}
.wot-hangar-v5 .wot-hangar-panel {
  position: relative;
  background: linear-gradient(165deg, rgba(8, 14, 22, 0.88), rgba(4, 8, 14, 0.78));
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-top: 2px solid rgba(var(--hangar-accent-rgb, 251, 191, 36), 0.55);
  border-radius: 6px;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(18px) saturate(1.25);
}
.wot-hangar-v5 .wot-hangar-panel-right {
  border-left: 1px solid rgba(var(--hangar-accent-rgb, 251, 191, 36), 0.12);
}
.wot-hangar-v5 .wot-hangar-vignette {
  background:
    radial-gradient(ellipse 90% 70% at 50% 55%, transparent 12%, rgba(2, 6, 12, 0.78) 100%),
    radial-gradient(ellipse 50% 35% at 50% 70%, rgba(var(--hangar-accent-rgb, 251, 191, 36), 0.08), transparent 70%),
    linear-gradient(180deg, rgba(2, 6, 12, 0.35) 0%, transparent 25%, transparent 75%, rgba(2, 6, 12, 0.65) 100%);
}
.wot-hangar-hud {
  position: absolute;
  inset: 8% 5% 14%;
  pointer-events: none;
  z-index: 3;
}
.wot-hangar-hud-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border-color: rgba(var(--hangar-accent-rgb, 251, 191, 36), 0.45);
  border-style: solid;
  border-width: 0;
  box-shadow: 0 0 14px rgba(var(--hangar-accent-rgb, 251, 191, 36), 0.12);
}
.wot-hangar-hud-corner.tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.wot-hangar-hud-corner.tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.wot-hangar-hud-corner.bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.wot-hangar-hud-corner.br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.wot-hangar-reticle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -55%);
  border: 1px solid rgba(var(--hangar-accent-rgb, 251, 191, 36), 0.2);
  border-radius: 50%;
  opacity: 0.35;
}
.wot-hangar-reticle::before,
.wot-hangar-reticle::after {
  content: "";
  position: absolute;
  background: rgba(var(--hangar-accent-rgb, 251, 191, 36), 0.35);
}
.wot-hangar-reticle::before {
  top: 50%; left: 20%; right: 20%; height: 1px;
  transform: translateY(-50%);
}
.wot-hangar-reticle::after {
  left: 50%; top: 20%; bottom: 20%; width: 1px;
  transform: translateX(-50%);
}
.wot-hangar-scan-sweep {
  position: absolute;
  left: 8%;
  right: 8%;
  height: 2px;
  top: 0;
  background: linear-gradient(90deg, transparent, rgba(var(--hangar-accent-rgb, 251, 191, 36), 0.55), transparent);
  box-shadow: 0 0 20px rgba(var(--hangar-accent-rgb, 251, 191, 36), 0.35);
  opacity: 0.5;
  animation: wot-hangar-scan-sweep 5.5s ease-in-out infinite;
}
.wot-hangar-quick-strip {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.45rem;
  z-index: 4;
  pointer-events: none;
}
.wot-hangar-quick-chip {
  padding: 0.2rem 0.5rem;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #cbd5e1;
  background: rgba(4, 8, 14, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom-color: rgba(var(--hangar-accent-rgb, 251, 191, 36), 0.35);
  border-radius: 3px;
  backdrop-filter: blur(8px);
}
.wot-hangar-quick-chip strong {
  color: #f8fafc;
  margin-left: 0.25rem;
}
.wot-hangar-v5 .wot-hangar-frame { display: none; }
.wot-hangar-v5 .wot-hangar-pedestal-glow {
  width: min(560px, 75vw);
  height: 110px;
  bottom: 14%;
  background: radial-gradient(ellipse, rgba(var(--hangar-accent-rgb, 251, 191, 36), 0.32), transparent 72%);
}
.wot-hangar-v5 .wot-spotlight {
  width: min(540px, 72vw);
  height: 100px;
  bottom: 14%;
}
.wot-hangar-v5 .wot-hangar-controls {
  bottom: 8%;
  z-index: 5;
  border-radius: 6px;
  border-color: rgba(var(--hangar-accent-rgb, 251, 191, 36), 0.25);
}
.wot-hangar-v5 .wot-hangar-badge {
  top: 11%;
  border-color: rgba(var(--hangar-accent-rgb, 251, 191, 36), 0.4);
}
.wot-hangar-v5 .wot-battle-dock {
  border-color: rgba(var(--hangar-accent-rgb, 251, 191, 36), 0.38);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.5),
    0 0 32px rgba(var(--hangar-accent-rgb, 251, 191, 36), 0.12);
}
.wot-hangar-v5 .wot-battle-btn {
  background: linear-gradient(180deg, rgba(var(--hangar-accent-rgb, 251, 191, 36), 0.95), rgba(180, 120, 20, 0.95));
  border-color: rgba(255, 255, 255, 0.25);
}
.wot-panel-garage[data-nation="horizon"] { --hangar-accent-rgb: 234, 88, 12; }
.wot-panel-garage[data-nation="de"] { --hangar-accent-rgb: 251, 191, 36; }
.wot-panel-garage[data-nation="ussr"] { --hangar-accent-rgb: 239, 68, 68; }
.wot-panel-garage[data-nation="usa"] { --hangar-accent-rgb: 59, 130, 246; }
.wot-panel-garage[data-nation="uk"] { --hangar-accent-rgb: 34, 197, 94; }
.wot-panel-garage[data-nation="fr"] { --hangar-accent-rgb: 99, 102, 241; }
.wot-panel-garage[data-nation="jp"] { --hangar-accent-rgb: 244, 114, 182; }
.wot-panel-garage[data-nation="pl"] { --hangar-accent-rgb: 220, 38, 38; }
.wot-panel-garage[data-nation="it"] { --hangar-accent-rgb: 22, 163, 74; }
#garage-viewport[data-nation="horizon"] { --hangar-accent-rgb: 234, 88, 12; }
#garage-viewport[data-nation="de"] { --hangar-accent-rgb: 251, 191, 36; }
#garage-viewport[data-nation="ussr"] { --hangar-accent-rgb: 239, 68, 68; }
#garage-viewport[data-nation="usa"] { --hangar-accent-rgb: 59, 130, 246; }
#garage-viewport[data-nation="uk"] { --hangar-accent-rgb: 34, 197, 94; }
#garage-viewport[data-nation="fr"] { --hangar-accent-rgb: 99, 102, 241; }
#garage-viewport[data-nation="jp"] { --hangar-accent-rgb: 244, 114, 182; }
#garage-viewport[data-nation="pl"] { --hangar-accent-rgb: 220, 38, 38; }
#garage-viewport[data-nation="it"] { --hangar-accent-rgb: 22, 163, 74; }
#wot-menu[data-active-panel="garage"] .wot-tank-bar {
  background: linear-gradient(0deg, rgba(2, 6, 10, 0.99), rgba(6, 10, 18, 0.94) 40%, transparent);
  border-top: 1px solid rgba(var(--hangar-accent-rgb, 251, 191, 36), 0.28);
  padding-top: 0.35rem;
}
#wot-menu[data-active-panel="garage"] .wot-carousel-wrap {
  padding: 0.15rem 0;
}
#wot-menu[data-active-panel="garage"] .wot-carousel-item.active {
  border-color: rgb(var(--hangar-accent-rgb, 251, 191, 36));
  box-shadow:
    0 0 24px rgba(var(--hangar-accent-rgb, 251, 191, 36), 0.22),
    inset 0 0 14px rgba(var(--hangar-accent-rgb, 251, 191, 36), 0.08);
}
@keyframes wot-hangar-scan-sweep {
  0%, 100% { top: 8%; opacity: 0; }
  8% { opacity: 0.55; }
  50% { top: 88%; opacity: 0.35; }
  92% { opacity: 0; }
}
@keyframes wot-hangar-status-pulse {
  0%, 100% { opacity: 0.85; box-shadow: 0 0 0 rgba(74, 222, 128, 0); }
  50% { opacity: 1; box-shadow: 0 0 12px rgba(74, 222, 128, 0.25); }
}
@media (max-width: 1100px) {
  .wot-hangar-v5 .wot-garage-left,
  .wot-hangar-v5 .wot-garage-right {
    width: min(180px, 28vw);
    transform: translateY(-50%);
  }
  .wot-hangar-v5 .wot-garage-right { max-height: 58vh; }
  .wot-hangar-command { display: none; }
  .wot-hangar-quick-strip { bottom: 10%; flex-wrap: wrap; justify-content: center; max-width: 90%; }
}
@media (max-width: 820px) {
  .wot-hangar-v5 .wot-garage-left {
    top: auto;
    bottom: 38%;
    left: 0.25rem;
    transform: none;
    width: min(160px, 42vw);
  }
  .wot-hangar-v5 .wot-garage-right {
    top: auto;
    bottom: 38%;
    right: 0.25rem;
    transform: none;
    width: min(160px, 42vw);
    max-height: 42vh;
  }
}

/* —— Hangar Classic · cinematic Iron Front —— */
.wot-hangar-classic.wot-panel-garage {
  --hg-amber: #e8a317;
  --hg-amber-hot: #f5c84a;
  --hg-ink: #f4f1ea;
  --hg-panel: rgba(8, 12, 18, 0.78);
  --hg-line: rgba(148, 163, 184, 0.16);
  --hg-display: "Oswald", "Segoe UI", sans-serif;
  --hg-ui: "Barlow", "Segoe UI", sans-serif;
  display: grid;
  grid-template-columns: minmax(188px, 220px) 1fr minmax(280px, 340px);
  grid-template-rows: 1fr;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--hg-ui);
}

.wot-hangar-classic .wot-hangar-vignette {
  background:
    radial-gradient(ellipse 70% 55% at 50% 62%, transparent 28%, rgba(4, 7, 12, 0.62) 100%),
    linear-gradient(90deg, rgba(4, 7, 12, 0.72) 0%, transparent 18%, transparent 82%, rgba(4, 7, 12, 0.72) 100%),
    linear-gradient(180deg, rgba(4, 7, 12, 0.25) 0%, transparent 22%, transparent 70%, rgba(4, 7, 12, 0.45) 100%);
}

.wot-hangar-classic .wot-garage-left {
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.55rem 0.45rem 4.6rem 0.55rem;
  z-index: 4;
  min-height: 0;
}

.wot-hangar-classic .wot-garage-sidebar {
  order: -1;
  margin-bottom: auto;
  max-height: min(48vh, 20rem);
  flex: 0 1 auto;
}

.wot-hangar-classic .wot-garage-sidebar > .wot-garage-event-stack,
.wot-hangar-classic .wot-garage-rail {
  border-color: var(--hg-line);
  border-top-color: var(--hg-amber);
  background:
    linear-gradient(165deg, rgba(14, 18, 28, 0.88), rgba(6, 9, 14, 0.82));
}

.wot-hangar-classic .wot-event-strip-label,
.wot-hangar-classic .wot-garage-rail-toggle,
.wot-hangar-classic .wot-garage-rail-tab {
  font-family: var(--hg-ui);
}

.wot-hangar-classic .wot-garage-rail-tab.selected {
  color: var(--hg-amber-hot);
  box-shadow: inset 0 -2px 0 var(--hg-amber);
}

.wot-hangar-classic .wot-garage-center {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  min-height: 0;
  height: 100%;
  background: transparent;
  pointer-events: none;
  z-index: 2;
}

.wot-hangar-classic #garage-viewport {
  pointer-events: auto;
  cursor: grab;
}

.wot-hangar-classic #garage-viewport.dragging {
  cursor: grabbing;
}

.wot-hangar-classic .wot-garage-right {
  grid-column: 3;
  grid-row: 1;
  align-self: stretch;
  padding: 0.55rem 0.6rem 4.6rem 0.4rem;
  z-index: 4;
  min-height: 0;
}

.wot-hangar-classic > .wot-battle-dock {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: end;
  justify-self: center;
  margin: 0 0 0.55rem;
  z-index: 22;
  max-width: min(760px, calc(100% - 1.2rem));
  padding: 0.55rem 0.7rem 0.5rem;
  border-radius: 2px;
  border: 1px solid rgba(232, 163, 23, 0.32);
  background:
    linear-gradient(180deg, rgba(12, 16, 24, 0.96), rgba(6, 9, 14, 0.98));
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  backdrop-filter: blur(12px);
}

.wot-hangar-classic .wot-hangar-panel {
  padding: 0.65rem 0.7rem 0.7rem;
  background:
    linear-gradient(165deg, rgba(14, 18, 28, 0.88), rgba(6, 9, 14, 0.82));
  border: 1px solid var(--hg-line);
  border-top: 2px solid var(--hg-amber);
  border-radius: 2px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
}

.wot-hangar-classic .wot-hangar-panel-left {
  max-width: 100%;
  flex-shrink: 0;
}

.wot-hangar-classic .wot-hangar-panel-right {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 168px);
  min-height: 0;
  overflow: hidden;
}

.wot-hangar-classic .wot-hangar-panel-right .wot-gtab-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.1rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 163, 23, 0.35) transparent;
}

.wot-hangar-classic .wot-hangar-panel-label {
  font-family: var(--hg-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hg-amber);
  margin-bottom: 0.55rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(232, 163, 23, 0.28);
}

.wot-hangar-classic .wot-tank-plate {
  margin-bottom: 0.65rem;
}

.wot-hangar-classic .wot-tier-badge {
  padding: 0.12rem 0.4rem;
  font-family: var(--hg-display);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  border-radius: 1px;
  background: linear-gradient(180deg, var(--hg-amber-hot), var(--hg-amber));
  border-color: #b45309;
}

.wot-hangar-classic .wot-tank-name {
  margin-top: 0.28rem;
  font-family: var(--hg-display);
  font-size: clamp(1.15rem, 2.1vw, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.05;
  color: var(--hg-ink);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  filter: none;
}

.wot-hangar-classic .wot-tank-meta {
  margin-top: 0.28rem;
  font-size: 0.68rem;
  font-weight: 500;
  color: rgba(148, 163, 184, 0.95);
  letter-spacing: 0.04em;
}

.wot-hangar-classic .wot-stat-bars {
  gap: 0.32rem;
}

.wot-hangar-classic .wot-stat-row {
  font-size: 0.58rem;
  grid-template-columns: 3.6rem 1fr 1.7rem;
}

.wot-hangar-classic .wot-stat-bar {
  height: 3px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
}

.wot-hangar-classic .wot-stat-bar i {
  background: linear-gradient(90deg, #b45309, var(--hg-amber), var(--hg-amber-hot));
  box-shadow: 0 0 8px rgba(232, 163, 23, 0.35);
}

.wot-hangar-classic .wot-hangar-pedestal-glow {
  display: block;
  bottom: 18%;
  width: min(460px, 62vw);
  height: 100px;
  opacity: 0.85;
  background: radial-gradient(ellipse, rgba(232, 163, 23, 0.28), transparent 72%);
}

.wot-hangar-classic .wot-hangar-floor-line {
  left: 12%;
  right: 12%;
  bottom: 17%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(232, 163, 23, 0.55), transparent);
  box-shadow: 0 0 22px rgba(232, 163, 23, 0.28);
  animation: if-hangar-floor 4s ease-in-out infinite;
}

@keyframes if-hangar-floor {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.95; }
}

.wot-hangar-classic .wot-hangar-badge {
  top: auto;
  bottom: calc(17% + 1.15rem);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.22rem 0.55rem;
  font-family: var(--hg-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--hg-ink);
  background: rgba(6, 9, 14, 0.72);
  border: 1px solid rgba(232, 163, 23, 0.35);
  border-radius: 1px;
}

.wot-hangar-classic .wot-hangar-plate-label {
  top: auto;
  bottom: calc(17% + 2.85rem);
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
  font-family: var(--hg-ui);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.75);
  background: none;
  border: none;
  opacity: 1;
}

.wot-hangar-classic .wot-hangar-hint {
  position: absolute;
  left: 50%;
  bottom: 0.35rem;
  transform: translateX(-50%);
  margin: 0;
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  opacity: 0.4;
  white-space: nowrap;
}

.wot-hangar-classic .wot-hangar-controls {
  bottom: 8.5%;
  gap: 0.28rem;
  padding: 0.28rem 0.35rem;
  background: rgba(6, 9, 14, 0.78);
  border: 1px solid var(--hg-line);
  border-radius: 2px;
  backdrop-filter: blur(8px);
}

.wot-hangar-classic .wot-hangar-ctrl {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 1px;
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.55);
  color: #cbd5e1;
}

.wot-hangar-classic .wot-hangar-ctrl:hover {
  border-color: rgba(232, 163, 23, 0.55);
  background: rgba(232, 163, 23, 0.12);
  color: var(--hg-amber-hot);
}

.wot-hangar-classic .wot-hangar-compare-badge {
  top: 6%;
  border-radius: 2px;
}

.wot-hangar-classic .wot-garage-tabs {
  gap: 0.2rem;
  margin-bottom: 0.55rem;
  padding: 0.15rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.wot-hangar-classic .wot-gtab {
  border: none;
  border-radius: 1px;
  padding: 0.38rem 0.28rem;
  font-family: var(--hg-ui);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #94a3b8;
  background: transparent;
  box-shadow: none;
}

.wot-hangar-classic .wot-gtab:hover {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.04);
}

.wot-hangar-classic .wot-gtab.selected {
  color: #1c1408;
  background: linear-gradient(180deg, var(--hg-amber-hot), var(--hg-amber));
  box-shadow: none;
}

.wot-hangar-classic .wot-module-head {
  font-family: var(--hg-display);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  color: rgba(148, 163, 184, 0.9);
  border-bottom-color: rgba(232, 163, 23, 0.22);
}

.wot-hangar-classic .wot-battle-modes-title {
  font-family: var(--hg-display);
  letter-spacing: 0.16em;
  color: rgba(148, 163, 184, 0.85);
}

.wot-hangar-classic .wot-battle-btn {
  min-width: 168px;
  padding: 0.55rem 1.1rem;
  border-radius: 2px;
}

.wot-hangar-classic .wot-battle-main {
  font-family: var(--hg-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.wot-hangar-classic .wot-battle-sub {
  font-size: 0.52rem;
  letter-spacing: 0.06em;
}

.wot-hangar-classic .wot-battle-mode-card {
  border-radius: 2px;
  min-height: 3.15rem;
}

.wot-hangar-classic .wot-battle-mode-card.selected,
.wot-hangar-classic .wot-battle-mode-card[aria-selected="true"] {
  border-color: rgba(232, 163, 23, 0.55);
  box-shadow: 0 0 0 1px rgba(232, 163, 23, 0.2);
}

#wot-menu[data-active-panel="garage"] .wot-hangar-classic ~ .wot-tank-bar {
  border-top: 1px solid rgba(232, 163, 23, 0.22);
  background:
    linear-gradient(0deg, rgba(4, 7, 12, 0.98), rgba(8, 12, 18, 0.94));
  box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.4);
}

#wot-menu[data-active-panel="garage"] .wot-hangar-classic ~ .wot-tank-bar .wot-tank-bar-title {
  font-family: "Oswald", "Segoe UI", sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--hg-amber, #e8a317);
}

#wot-menu[data-active-panel="garage"] .wot-hangar-classic ~ .wot-tank-bar .wot-carousel-item {
  border-radius: 2px;
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(10, 14, 22, 0.85);
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}

#wot-menu[data-active-panel="garage"] .wot-hangar-classic ~ .wot-tank-bar .wot-carousel-item:hover {
  border-color: rgba(232, 163, 23, 0.4);
  transform: translateY(-2px);
}

#wot-menu[data-active-panel="garage"] .wot-hangar-classic ~ .wot-tank-bar .wot-carousel-item.selected {
  border-color: rgba(232, 163, 23, 0.7);
  background: rgba(232, 163, 23, 0.1);
  box-shadow: 0 0 0 1px rgba(232, 163, 23, 0.25);
}

#wot-menu[data-active-panel="garage"] .wot-hangar-classic ~ .wot-tank-bar .wot-filter-btn.selected {
  border-color: #e8a317;
  background: rgba(232, 163, 23, 0.16);
  color: #f5c84a;
}

@media (max-width: 1100px) {
  .wot-hangar-classic.wot-panel-garage {
    grid-template-columns: minmax(160px, 180px) 1fr minmax(240px, 280px);
  }
}

@media (max-width: 900px) {
  .wot-hangar-classic .wot-garage-right {
    max-height: calc(100vh - 200px);
  }
  .wot-hangar-classic .wot-hangar-panel-right {
    max-height: calc(100vh - 210px);
  }
  .wot-hangar-classic .wot-hangar-badge,
  .wot-hangar-classic .wot-hangar-plate-label {
    display: none;
  }
}

/* —— Hangar Stage · cinematic redesign —— */
.wot-hangar-stage.wot-panel-garage {
  --hg-steel: #c5d0dc;
  --hg-ink: #f2f0eb;
  --hg-amber: #e8a317;
  --hg-amber-hot: #f5c84a;
  --hg-line: rgba(197, 208, 220, 0.14);
  --hg-panel: rgba(6, 9, 14, 0.72);
  --hg-display: "Teko", "Segoe UI", sans-serif;
  --hg-ui: "IBM Plex Sans", "Segoe UI", sans-serif;
  display: block;
  position: relative;
  overflow: hidden;
  min-height: 0;
  height: 100%;
  font-family: var(--hg-ui);
  color: var(--hg-ink);
}

.wot-hangar-stage .hg-stage-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.wot-hangar-stage .wot-hangar-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 58% 48% at 50% 58%, transparent 20%, rgba(3, 5, 9, 0.55) 100%),
    linear-gradient(90deg, rgba(3, 5, 9, 0.78) 0%, transparent 22%, transparent 78%, rgba(3, 5, 9, 0.78) 100%),
    linear-gradient(180deg, rgba(3, 5, 9, 0.35) 0%, transparent 18%, transparent 62%, rgba(3, 5, 9, 0.72) 100%);
}

.wot-hangar-stage .hg-stage-grain {
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  animation: hg-grain-shift 8s steps(6) infinite;
}

.wot-hangar-stage .hg-stage-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
  opacity: 0.45;
}

@keyframes hg-grain-shift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-1.5%, 1%); }
}

.wot-hangar-stage .wot-garage-center {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: auto;
  cursor: grab;
  display: block;
  padding: 0;
  background: transparent;
}

.wot-hangar-stage #garage-viewport.dragging { cursor: grabbing; }

.wot-hangar-stage .hg-brand {
  position: absolute;
  top: clamp(0.55rem, 1.6vh, 0.95rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 16;
  text-align: center;
  pointer-events: none;
  animation: hg-brand-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.wot-hangar-stage .hg-brand-ops {
  margin: 0 0 0.12rem;
  font-family: var(--hg-ui);
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(197, 208, 220, 0.55);
}

.wot-hangar-stage .hg-brand-name {
  margin: 0;
  font-family: var(--hg-display);
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 0.9;
  color: var(--hg-ink);
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.65);
}

.wot-hangar-stage .hg-brand-name span {
  color: var(--hg-amber);
}

.wot-hangar-stage .hg-brand-line {
  margin: 0.2rem 0 0;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(197, 208, 220, 0.7);
}

@keyframes hg-brand-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.wot-hangar-stage .hg-tank-hero {
  position: absolute;
  left: clamp(0.75rem, 2vw, 1.4rem);
  bottom: clamp(7.5rem, 18vh, 9.5rem);
  z-index: 15;
  max-width: min(320px, 38vw);
  pointer-events: none;
  animation: hg-tank-in 0.9s 0.12s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.wot-hangar-stage .hg-tank-hero .wot-tier-badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  font-family: var(--hg-display);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  border-radius: 1px;
  color: #1a1408;
  background: linear-gradient(180deg, var(--hg-amber-hot), var(--hg-amber));
  border: 1px solid #b45309;
}

.wot-hangar-stage .hg-tank-hero .wot-tank-name {
  margin: 0.35rem 0 0;
  font-family: var(--hg-display);
  font-size: clamp(1.55rem, 3.2vw, 2.35rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 0.95;
  color: var(--hg-ink);
  text-shadow: 0 3px 22px rgba(0, 0, 0, 0.7);
}

.wot-hangar-stage .hg-tank-hero .wot-tank-meta {
  margin: 0.3rem 0 0;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(197, 208, 220, 0.8);
}

.wot-hangar-stage .hg-tank-hero .wot-stat-bars {
  margin-top: 0.65rem;
  gap: 0.28rem;
  max-width: 240px;
}

.wot-hangar-stage .hg-tank-hero .wot-stat-row {
  font-size: 0.52rem;
  grid-template-columns: 3.4rem 1fr 1.5rem;
  color: rgba(197, 208, 220, 0.7);
}

.wot-hangar-stage .hg-tank-hero .wot-stat-bar {
  height: 2px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
}

.wot-hangar-stage .hg-tank-hero .wot-stat-bar i {
  background: linear-gradient(90deg, #8a5a10, var(--hg-amber));
  box-shadow: none;
}

.wot-hangar-stage .hg-tank-hint {
  margin: 0.55rem 0 0;
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.45);
}
.wot-hangar-stage .hg-collections-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.55rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(245, 158, 11, 0.4);
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.16), rgba(0, 0, 0, 0.35));
  color: #fde68a;
  font-family: inherit;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 2;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.wot-hangar-stage .hg-collections-chip:hover {
  border-color: rgba(251, 191, 36, 0.7);
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.28), rgba(0, 0, 0, 0.4));
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.2);
}
.wot-hangar-stage .hg-collections-chip.is-hot {
  border-color: rgba(74, 222, 128, 0.5);
  color: #bbf7d0;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.18), rgba(0, 0, 0, 0.35));
  animation: hg-col-chip-pulse 1.8s ease-in-out infinite;
}
.wot-hangar-stage .hg-collections-chip-ico {
  font-size: 0.75rem;
  opacity: 0.9;
}
.wot-hangar-stage .hg-collections-chip-label {
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}
.wot-hangar-stage .hg-collections-chip-prog {
  font-size: 0.62rem;
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
}
.wot-hangar-stage .hg-collections-chip.is-hot .hg-collections-chip-prog {
  color: #4ade80;
}
@keyframes hg-col-chip-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
  50% { box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2); }
}
.wot-shop-quick-collections {
  border-color: rgba(245, 158, 11, 0.35);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.1), rgba(0, 0, 0, 0.28));
}
.wot-shop-col-cta {
  margin: 0.35rem 0 0.85rem;
}
.wot-shop-col-cta .btn-secondary {
  font-size: 0.62rem;
}

@keyframes hg-tank-in {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: translateX(0); }
}

.wot-hangar-stage .wot-garage-left {
  position: absolute;
  left: clamp(0.4rem, 1.2vw, 0.75rem);
  top: clamp(5.2rem, 12vh, 6.5rem);
  z-index: 14;
  width: min(220px, 26vw);
  padding: 0;
  display: block;
  pointer-events: none;
}

.wot-hangar-stage .wot-garage-left > * { pointer-events: auto; }

.wot-hangar-stage .wot-garage-sidebar {
  max-height: min(42vh, 18rem);
  gap: 0.35rem;
}

.wot-hangar-stage .wot-garage-sidebar > .wot-garage-event-stack,
.wot-hangar-stage .wot-garage-rail {
  border: 1px solid var(--hg-line);
  border-top: 2px solid var(--hg-amber);
  border-radius: 1px;
  background: var(--hg-panel);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.wot-hangar-stage .wot-garage-right {
  position: absolute;
  right: clamp(0.4rem, 1.2vw, 0.75rem);
  top: 50%;
  transform: translateY(-48%);
  z-index: 14;
  width: auto;
  padding: 0;
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
  gap: 0;
  max-height: min(68vh, 580px);
}

.wot-hangar-stage .hg-equip-toggle {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  flex-shrink: 0;
  padding: 0.85rem 0.4rem;
  border: 1px solid var(--hg-line);
  border-right: none;
  border-radius: 1px 0 0 1px;
  background: var(--hg-panel);
  color: var(--hg-steel);
  font-family: var(--hg-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.wot-hangar-stage .hg-equip-toggle:hover {
  color: var(--hg-amber-hot);
  border-color: rgba(232, 163, 23, 0.4);
}

.wot-hangar-stage .hg-equip-toggle-chev {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.7rem;
  opacity: 0.6;
  transition: transform 0.25s ease;
}

.wot-hangar-stage .wot-garage-right[data-open="1"] .hg-equip-toggle-chev {
  transform: rotate(180deg);
}

.wot-hangar-stage .wot-hangar-panel-right {
  display: none;
  width: min(300px, 32vw);
  max-height: min(68vh, 580px);
  flex-direction: column;
  padding: 0.55rem 0.6rem 0.65rem;
  border: 1px solid var(--hg-line);
  border-top: 2px solid var(--hg-amber);
  border-radius: 1px;
  background: var(--hg-panel);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  animation: hg-equip-open 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.wot-hangar-stage .wot-garage-right[data-open="1"] .wot-hangar-panel-right {
  display: flex;
}

@keyframes hg-equip-open {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

.wot-hangar-stage .wot-hangar-panel-right .wot-gtab-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 163, 23, 0.35) transparent;
}

.wot-hangar-stage .wot-garage-tabs {
  gap: 0;
  margin-bottom: 0.45rem;
  border-bottom: 1px solid var(--hg-line);
}

.wot-hangar-stage .wot-gtab {
  font-family: var(--hg-ui);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  padding: 0.4rem 0.35rem;
  border-radius: 0;
  color: rgba(148, 163, 184, 0.75);
}

.wot-hangar-stage .wot-gtab.selected {
  color: var(--hg-amber-hot);
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--hg-amber);
}

.wot-hangar-stage > .wot-battle-dock {
  position: absolute;
  left: 50%;
  bottom: clamp(0.45rem, 1.4vh, 0.75rem);
  transform: translateX(-50%);
  z-index: 20;
  margin: 0;
  width: min(720px, calc(100% - 1.5rem));
  max-width: min(720px, calc(100% - 1.5rem));
  padding: 0.5rem 0.65rem 0.48rem;
  border-radius: 1px;
  border: 1px solid rgba(232, 163, 23, 0.35);
  background:
    linear-gradient(180deg, rgba(10, 14, 20, 0.92), rgba(5, 7, 11, 0.96));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
  animation: hg-dock-in 0.75s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes hg-dock-in {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.wot-hangar-stage .wot-battle-modes-title {
  font-family: var(--hg-display);
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  color: rgba(197, 208, 220, 0.65);
}

.wot-hangar-stage .wot-battle-btn {
  min-width: 176px;
  border-radius: 1px;
  padding: 0.58rem 1.15rem;
}

.wot-hangar-stage .wot-battle-main {
  font-family: var(--hg-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.wot-hangar-stage .wot-hangar-controls {
  bottom: calc(18% + 0.5rem);
  gap: 0.28rem;
}

.wot-hangar-stage .wot-hangar-ctrl {
  width: 2rem;
  height: 2rem;
  border-radius: 1px;
  border: 1px solid var(--hg-line);
  background: rgba(6, 9, 14, 0.65);
  color: var(--hg-steel);
  backdrop-filter: blur(8px);
}

.wot-hangar-stage .wot-hangar-ctrl:hover {
  border-color: rgba(232, 163, 23, 0.45);
  color: var(--hg-amber-hot);
}

.wot-hangar-stage .wot-hangar-compare-badge {
  top: 22%;
  font-family: var(--hg-display);
  letter-spacing: 0.14em;
  border-radius: 1px;
}

.wot-hangar-stage .wot-hangar-badge,
.wot-hangar-stage .wot-hangar-plate-label,
.wot-hangar-stage .wot-hangar-hint {
  display: none;
}

.wot-hangar-stage.wot-hangar-eu .wot-hangar-vignette {
  background:
    radial-gradient(ellipse 58% 48% at 50% 58%, transparent 20%, rgba(8, 8, 10, 0.6) 100%),
    linear-gradient(90deg, rgba(26, 26, 26, 0.55) 0%, transparent 26%, transparent 74%, rgba(80, 20, 20, 0.35) 100%),
    linear-gradient(180deg, rgba(255, 206, 0, 0.05), transparent 40%);
}

.wot-hangar-stage.wot-hangar-s1f .wot-hangar-vignette {
  background:
    radial-gradient(ellipse 58% 48% at 50% 58%, transparent 20%, rgba(10, 8, 4, 0.65) 100%),
    linear-gradient(90deg, rgba(20, 14, 6, 0.6) 0%, transparent 24%, transparent 76%, rgba(20, 14, 6, 0.6) 100%),
    linear-gradient(180deg, rgba(245, 158, 11, 0.08), transparent 42%);
}

@media (max-width: 980px) {
  .wot-hangar-stage .hg-tank-hero {
    max-width: min(260px, 48vw);
    bottom: clamp(8.5rem, 22vh, 11rem);
  }
  .wot-hangar-stage .hg-tank-hero .wot-stat-bars { display: none; }
  .wot-hangar-stage .wot-garage-left {
    width: min(180px, 40vw);
    top: auto;
    bottom: clamp(7.8rem, 20vh, 10rem);
  }
  .wot-hangar-stage .wot-garage-right {
    top: auto;
    bottom: clamp(7.8rem, 20vh, 10rem);
    transform: none;
  }
  .wot-hangar-stage .wot-hangar-panel-right {
    width: min(240px, 55vw);
    max-height: 42vh;
  }
}

@media (max-width: 700px) {
  .wot-hangar-stage .hg-brand-name {
    font-size: 2rem;
  }
  .wot-hangar-stage .hg-tank-hero .wot-tank-name {
    font-size: 1.35rem;
  }
  .wot-hangar-stage .wot-garage-left {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wot-hangar-stage .hg-brand,
  .wot-hangar-stage .hg-tank-hero,
  .wot-hangar-stage > .wot-battle-dock,
  .wot-hangar-stage .wot-hangar-panel-right,
  .wot-hangar-stage .hg-stage-grain {
    animation: none;
  }
}

/* —— Clan —— */
.wot-clan-chip {
  margin-left: 0.75rem;
  padding: 0.28rem 0.55rem;
  font-family: inherit;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: #f8fafc;
  background: rgba(180, 83, 9, 0.2);
  border: 1px solid rgba(251, 146, 60, 0.4);
  cursor: pointer;
  white-space: nowrap;
}
.wot-clan-chip:hover { background: rgba(180, 83, 9, 0.35); }
.wot-clan-chip.hidden { display: none; }

.eu-topbar-chip {
  margin-left: 0.45rem;
  padding: 0.28rem 0.55rem;
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #fef3c7;
  background: linear-gradient(90deg, rgba(26, 26, 26, 0.92), rgba(200, 16, 46, 0.45), rgba(255, 206, 0, 0.28));
  border: 1px solid rgba(255, 206, 0, 0.4);
  cursor: pointer;
  white-space: nowrap;
  max-width: 15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.eu-topbar-chip:hover { filter: brightness(1.08); }
.eu-topbar-chip.hidden { display: none; }

/* —— Discord / Nachtblau Community —— */
.if-discord-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  margin-left: 0.45rem;
  padding: 0.22rem 0.55rem 0.22rem 0.35rem;
  border: 1px solid rgba(56, 189, 248, 0.35);
  background:
    linear-gradient(105deg, rgba(14, 40, 62, 0.92), rgba(8, 14, 22, 0.88));
  color: #e2e8f0;
  font-family: inherit;
  cursor: pointer;
  max-width: 10.5rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.if-discord-chip:hover {
  border-color: rgba(125, 211, 252, 0.65);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.18);
}
.if-discord-chip-mark {
  position: relative;
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(56, 189, 248, 0.45);
  background: linear-gradient(160deg, #1e3a5f, #0b1522);
}
.if-discord-chip-mark::before {
  content: "N";
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #7dd3fc;
}
.if-discord-chip-pulse {
  position: absolute;
  right: -0.12rem;
  bottom: -0.12rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #64748b;
  box-shadow: 0 0 0 2px rgba(8, 14, 22, 0.95);
}
.if-discord-chip-pulse.is-live {
  background: #4ade80;
  animation: if-discord-pulse 1.8s ease-in-out infinite;
}
.if-discord-chip-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.02rem;
}
.if-discord-chip-meta strong {
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f8fafc;
  line-height: 1.1;
}
.if-discord-chip-meta em {
  font-style: normal;
  font-size: 0.5rem;
  color: #7dd3fc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 7.5rem;
}
.if-discord-chip.is-live .if-discord-chip-meta em { color: #86efac; }

/* —— Front-Population / Spielerzahlen —— */
.if-pop-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  margin-left: 0.45rem;
  padding: 0.22rem 0.55rem 0.22rem 0.35rem;
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: linear-gradient(105deg, rgba(12, 40, 28, 0.92), rgba(8, 14, 22, 0.88));
  color: #e2e8f0;
  font-family: inherit;
  max-width: 10.5rem;
}
.if-pop-chip-mark {
  position: relative;
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(34, 197, 94, 0.45);
  background: linear-gradient(160deg, #14532d, #0b1522);
}
.if-pop-chip-mark::before {
  content: "▶";
  font-size: 0.48rem;
  color: #86efac;
  margin-left: 0.08rem;
}
.if-pop-chip-pulse {
  position: absolute;
  right: -0.12rem;
  bottom: -0.12rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #64748b;
  box-shadow: 0 0 0 2px rgba(8, 14, 22, 0.95);
}
.if-pop-chip-pulse.is-live {
  background: #4ade80;
  animation: if-discord-pulse 1.8s ease-in-out infinite;
}
.if-pop-chip-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.02rem;
}
.if-pop-chip-meta strong {
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f8fafc;
  line-height: 1.1;
}
.if-pop-chip-meta em {
  font-style: normal;
  font-size: 0.5rem;
  color: #86efac;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 7.5rem;
  font-variant-numeric: tabular-nums;
}
.if-pop-panel {
  margin: 0.75rem 0 0.55rem;
  border: 1px solid rgba(34, 197, 94, 0.28);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(34, 197, 94, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(10, 18, 28, 0.95), rgba(6, 10, 16, 0.98));
}
.if-pop-panel-head {
  padding: 0.65rem 0.75rem 0.5rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.if-pop-panel-kicker {
  display: block;
  font-size: 0.48rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4ade80;
  font-weight: 800;
  margin-bottom: 0.18rem;
}
.if-pop-panel-head strong {
  display: block;
  font-size: 0.82rem;
  color: #f8fafc;
  letter-spacing: 0.02em;
}
.if-pop-source {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.08rem 0.35rem;
  font-size: 0.42rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: #64748b;
  border: 1px solid rgba(100, 116, 139, 0.35);
  vertical-align: middle;
}
.if-pop-source.is-live {
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.45);
}
.if-pop-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  padding: 0.55rem 0.7rem;
}
.if-pop-stat {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.45rem;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(0, 0, 0, 0.28);
}
.if-pop-stat strong {
  display: block;
  font-size: 0.85rem;
  color: #f8fafc;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.if-pop-stat em {
  font-style: normal;
  font-size: 0.48rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
}
.if-pop-stat-dot {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: #64748b;
  flex-shrink: 0;
}
.if-pop-stat-dot.is-live {
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.55);
}

@keyframes if-discord-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(8, 14, 22, 0.95), 0 0 0 0 rgba(74, 222, 128, 0.45); }
  50% { box-shadow: 0 0 0 2px rgba(8, 14, 22, 0.95), 0 0 0 5px rgba(74, 222, 128, 0); }
}

.if-discord-panel {
  margin: 0.9rem 0 0.7rem;
  border: 1px solid rgba(56, 189, 248, 0.28);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(56, 189, 248, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(10, 18, 28, 0.95), rgba(6, 10, 16, 0.98));
  overflow: hidden;
}
.if-discord-panel-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.8rem 0.65rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.if-discord-panel-kicker {
  display: block;
  font-size: 0.48rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #38bdf8;
  font-weight: 800;
  margin-bottom: 0.18rem;
}
.if-discord-panel-brand strong {
  display: block;
  font-size: 0.92rem;
  color: #f8fafc;
  letter-spacing: 0.02em;
  line-height: 1.15;
}
.if-discord-panel-brand p {
  margin: 0.22rem 0 0;
  font-size: 0.58rem;
  color: #94a3b8;
  letter-spacing: 0.04em;
}
.if-discord-cta {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  padding: 0.48rem 0.75rem;
  border: 1px solid rgba(245, 158, 11, 0.55);
  background: linear-gradient(180deg, #fbbf24, #d97706);
  color: #0c121a;
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.if-discord-cta:hover {
  filter: brightness(1.06);
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.28);
}
.if-discord-cta em {
  font-style: normal;
  font-weight: 800;
}
.if-discord-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  padding: 0.55rem 0.7rem;
}
.if-discord-stat {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.45rem;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(0, 0, 0, 0.28);
}
.if-discord-stat strong {
  display: block;
  font-size: 0.85rem;
  color: #f8fafc;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.if-discord-stat em {
  font-style: normal;
  font-size: 0.48rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
}
.if-discord-stat-dot {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: #64748b;
  flex-shrink: 0;
}
.if-discord-stat-dot.is-live {
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.55);
}
.if-discord-stat-link {
  grid-column: 1 / -1;
  justify-content: center;
}
.if-discord-stat-link code {
  font-family: inherit;
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: #7dd3fc;
}
.if-discord-widget-bay {
  padding: 0 0.7rem 0.7rem;
}
.if-discord-widget {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 280px;
  border: 1px solid rgba(56, 189, 248, 0.2);
  background: #0b1220;
}

.wot-hangar-stage .hg-community-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.55rem;
}
.wot-hangar-stage .hg-community-row .hg-collections-chip {
  margin-top: 0;
}
.wot-hangar-stage .hg-pop-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(34, 197, 94, 0.4);
  background: linear-gradient(90deg, rgba(12, 48, 32, 0.55), rgba(0, 0, 0, 0.4));
  color: #bbf7d0;
  position: relative;
  pointer-events: none;
}
.wot-hangar-stage .hg-pop-pulse {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #64748b;
  flex-shrink: 0;
}
.wot-hangar-stage .hg-pop-pulse.is-live {
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.55);
  animation: if-discord-pulse 1.8s ease-in-out infinite;
}
.wot-hangar-stage .hg-pop-chip-label {
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #86efac;
}
.wot-hangar-stage .hg-pop-chip-online {
  font-size: 0.58rem;
  color: #bbf7d0;
  font-variant-numeric: tabular-nums;
}
.wot-hangar-stage .hg-discord-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(56, 189, 248, 0.4);
  background: linear-gradient(90deg, rgba(14, 48, 72, 0.55), rgba(0, 0, 0, 0.4));
  color: #bae6fd;
  font-family: inherit;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 2;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wot-hangar-stage .hg-discord-chip:hover {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.22);
}
.wot-hangar-stage .hg-discord-pulse {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #64748b;
  flex-shrink: 0;
}
.wot-hangar-stage .hg-discord-pulse.is-live {
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
  animation: if-discord-pulse 1.8s ease-in-out infinite;
}
.wot-hangar-stage .hg-discord-chip-label {
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}
.wot-hangar-stage .hg-discord-chip-online {
  font-size: 0.58rem;
  color: #7dd3fc;
  font-variant-numeric: tabular-nums;
}
.wot-hangar-stage .hg-discord-chip-online.is-live,
.wot-hangar-stage .hg-discord-pulse.is-live + .hg-discord-chip-label + .hg-discord-chip-online {
  color: #86efac;
}

.s1f-topbar-chip {
  margin-left: 0.45rem;
  padding: 0.28rem 0.55rem;
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #fef3c7;
  background: linear-gradient(90deg, rgba(20, 14, 6, 0.95), rgba(120, 70, 15, 0.55), rgba(245, 158, 11, 0.28));
  border: 1px solid rgba(245, 158, 11, 0.45);
  cursor: pointer;
  white-space: nowrap;
  max-width: 15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.s1f-topbar-chip:hover { filter: brightness(1.08); }
.s1f-topbar-chip.hidden { display: none; }

#panel-clan {
  display: block;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 50% at 10% 0%, rgba(180, 83, 9, 0.18), transparent 55%),
    radial-gradient(ellipse 60% 40% at 90% 100%, rgba(28, 25, 23, 0.9), transparent 50%),
    linear-gradient(165deg, #0c0a09 0%, #1c1917 45%, #0f172a 100%);
}
#panel-clan.hidden { display: none !important; }

.clan-shell {
  display: grid;
  grid-template-columns: 200px 1fr;
  height: 100%;
  min-height: 0;
}
.clan-shell.has-clan { grid-template-columns: 248px 1fr; }
@media (max-width: 900px) {
  .clan-shell,
  .clan-shell.has-clan { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
}

.clan-rail {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 0.75rem;
  background: rgba(0, 0, 0, 0.35);
  border-right: 1px solid rgba(251, 146, 60, 0.15);
  overflow-y: auto;
}
@media (max-width: 900px) {
  .clan-rail {
    border-right: none;
    border-bottom: 1px solid rgba(251, 146, 60, 0.15);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

.clan-rail-brand {
  padding: 0.65rem 0.7rem;
  background: linear-gradient(135deg, rgba(180, 83, 9, 0.25), rgba(0, 0, 0, 0.4));
  border: 1px solid rgba(251, 146, 60, 0.28);
}
.clan-rail-tag {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: #fdba74;
}
.clan-rail-brand strong {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.92rem;
  color: #fafaf9;
}
.clan-rail-brand em {
  display: block;
  margin-top: 0.35rem;
  font-style: normal;
  font-size: 0.72rem;
  color: #fb923c;
  font-variant-numeric: tabular-nums;
}

.clan-rail-nav {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
@media (max-width: 900px) {
  .clan-rail-nav { flex-direction: row; flex-wrap: wrap; flex: 1; }
}

.clan-nav-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.65rem;
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a8a29e;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
}
.clan-nav-btn:hover {
  color: #fafaf9;
  border-color: rgba(168, 162, 158, 0.25);
  background: rgba(255, 255, 255, 0.03);
}
.clan-nav-btn.selected {
  color: #ffedd5;
  border-color: rgba(251, 146, 60, 0.45);
  background: rgba(180, 83, 9, 0.22);
}
.clan-nav-ico {
  width: 1.1rem;
  text-align: center;
  color: #fb923c;
}
@media (max-width: 900px) {
  .clan-nav-btn { width: auto; }
  .clan-rail-brand { flex: 1 1 100%; }
}

.clan-stage {
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.15rem 1.35rem;
}

.clan-err {
  min-height: 1rem;
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  color: #fca5a5;
}

.clan-page-head {
  margin-bottom: 0.9rem;
}
.clan-page-head h2 {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  color: #fafaf9;
}
.clan-page-head p {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  color: #a8a29e;
  max-width: 36rem;
  line-height: 1.4;
}

.clan-panel-card {
  background: rgba(12, 10, 9, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-top: 1px solid rgba(251, 146, 60, 0.18);
  padding: 0.9rem 1rem;
  margin-bottom: 0.85rem;
}
.clan-panel-card h3 {
  margin: 0 0 0.65rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a8a29e;
}
.clan-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}
.clan-card-head h3 { margin: 0; }
.clan-count {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.35rem;
  font-size: 0.65rem;
  color: #fb923c;
  border: 1px solid rgba(251, 146, 60, 0.35);
}

.clan-btn {
  font-family: inherit;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.42rem 0.7rem;
  border: 1px solid rgba(168, 162, 158, 0.28);
  background: rgba(28, 25, 23, 0.85);
  color: #e7e5e4;
  cursor: pointer;
}
.clan-btn:hover { border-color: rgba(251, 146, 60, 0.5); color: #fdba74; }
.clan-btn-primary {
  background: rgba(180, 83, 9, 0.28);
  border-color: rgba(251, 146, 60, 0.5);
  color: #ffedd5;
}
.clan-btn-oil {
  background: linear-gradient(180deg, rgba(234, 88, 12, 0.45), rgba(120, 53, 15, 0.55));
  border-color: rgba(251, 146, 60, 0.65);
  color: #fff7ed;
  font-weight: 700;
}
.clan-btn-oil:hover:not(:disabled) {
  filter: brightness(1.08);
}
.clan-btn-danger {
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}
.clan-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.clan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.clan-inline {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem;
  align-items: center;
}
.clan-hint {
  margin: 0.45rem 0 0;
  font-size: 0.72rem;
  color: #78716c;
  line-height: 1.4;
}
.clan-hint code { color: #fb923c; }
.clan-hint strong { color: #fdba74; }
.clan-empty {
  margin: 0;
  padding: 0.75rem 0;
  text-align: center;
  color: #78716c;
  font-size: 0.8rem;
}
.clan-pill {
  display: inline-block;
  padding: 0.2rem 0.45rem;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fdba74;
  border: 1px solid rgba(251, 146, 60, 0.35);
  background: rgba(180, 83, 9, 0.12);
}
.clan-pill-muted { color: #a8a29e; border-color: rgba(168, 162, 158, 0.3); }

.clan-form {
  display: grid;
  gap: 0.55rem;
}
.clan-form-compact { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.05); }
.clan-form label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #78716c;
}
.clan-form input,
.clan-form textarea,
.clan-chat-input,
.clan-role-select,
.clan-invite-bar input,
#clan-invite-code {
  font-family: inherit;
  font-size: 0.82rem;
  color: #fafaf9;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(168, 162, 158, 0.22);
  padding: 0.45rem 0.55rem;
}
.clan-form textarea { resize: vertical; min-height: 2.6rem; }

.clan-emblem-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.clan-emblem-opt {
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(168, 162, 158, 0.25);
  cursor: pointer;
}
.clan-emblem-opt.selected,
.clan-emblem-opt:hover {
  border-color: rgba(251, 146, 60, 0.55);
  background: rgba(180, 83, 9, 0.2);
}
.clan-emblem-block {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.clan-emblem-block > span {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #78716c;
}

.clan-landing {
  position: relative;
  padding: 2.5rem 1.25rem;
  text-align: center;
  overflow: hidden;
}
.clan-landing-glow {
  position: absolute;
  inset: 10% 20%;
  background: radial-gradient(circle, rgba(234, 88, 12, 0.2), transparent 70%);
  pointer-events: none;
}
.clan-landing h2 {
  position: relative;
  margin: 0.35rem 0;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: 0.08em;
  color: #fafaf9;
}
.clan-landing > p {
  position: relative;
  max-width: 28rem;
  margin: 0 auto 1.1rem;
  color: #a8a29e;
  font-size: 0.88rem;
  line-height: 1.45;
}
.clan-landing .clan-actions { position: relative; justify-content: center; }

.clan-hq-kicker {
  margin: 0;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fb923c;
}

.clan-hq-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.1rem;
  margin-bottom: 0.75rem;
  background:
    linear-gradient(120deg, rgba(180, 83, 9, 0.28), rgba(0, 0, 0, 0.35) 55%, rgba(28, 25, 23, 0.5)),
    repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(255,255,255,0.015) 6px, rgba(255,255,255,0.015) 12px);
  border: 1px solid rgba(251, 146, 60, 0.28);
}
@media (max-width: 800px) {
  .clan-hq-banner { grid-template-columns: auto 1fr; }
  .clan-hq-stats { grid-column: 1 / -1; }
}
.clan-hq-crest {
  width: 4.2rem;
  height: 4.2rem;
  display: grid;
  place-items: center;
  font-size: 2rem;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(251, 146, 60, 0.4);
  box-shadow: inset 0 0 20px rgba(234, 88, 12, 0.15);
}
.clan-hq-copy h2 {
  margin: 0.15rem 0;
  font-size: 1.25rem;
  color: #fafaf9;
  letter-spacing: 0.04em;
}
.clan-hq-motd {
  margin: 0;
  font-size: 0.82rem;
  color: #d6d3d1;
  line-height: 1.35;
}
.clan-hq-stats {
  display: flex;
  gap: 0.55rem;
}
.clan-hq-stats > div {
  min-width: 4.5rem;
  padding: 0.45rem 0.55rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
}
.clan-hq-stats span {
  display: block;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #78716c;
}
.clan-hq-stats strong {
  font-size: 1.05rem;
  color: #fafaf9;
  font-variant-numeric: tabular-nums;
}
.clan-hq-oil strong { color: #fb923c; }

.clan-oil-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.85rem;
  background: rgba(67, 20, 7, 0.45);
  border: 1px solid rgba(234, 88, 12, 0.35);
}
.clan-oil-strip-copy {
  flex: 1;
  min-width: 10rem;
}
.clan-oil-strip-copy strong {
  display: block;
  color: #ffedd5;
  font-size: 0.85rem;
}
.clan-oil-strip-copy span {
  font-size: 0.72rem;
  color: #fdba74;
}

.clan-hq-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 0.85rem;
}
@media (max-width: 980px) {
  .clan-hq-grid { grid-template-columns: 1fr; }
}

.clan-member-list {
  display: grid;
  gap: 0.35rem;
  max-height: 16rem;
  overflow-y: auto;
}
.clan-member-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem;
  align-items: center;
  padding: 0.45rem 0.5rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.clan-member-row.is-self { border-color: rgba(251, 146, 60, 0.3); }
.clan-member-name { font-size: 0.82rem; color: #e7e5e4; }
.clan-member-role {
  display: inline-block;
  margin-top: 0.15rem;
  padding: 0.08rem 0.32rem;
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fdba74;
  border: 1px solid rgba(251, 146, 60, 0.28);
}
.clan-member-role.role-commander { color: #f59e0b; }
.clan-member-role.role-deputy { color: #fdba74; }
.clan-member-role.role-officer { color: #93c5fd; }
.clan-member-role.role-veteran { color: #c4b5fd; }
.clan-member-role.role-recruit { color: #a8a29e; }
.clan-member-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: flex-end;
}
.clan-role-select {
  font-size: 0.68rem;
  padding: 0.25rem 0.35rem;
  max-width: 8.5rem;
}

.clan-chat { display: flex; flex-direction: column; min-height: 16rem; }
.clan-chat-log {
  flex: 1;
  max-height: 14rem;
  overflow-y: auto;
  display: grid;
  gap: 0.3rem;
  padding: 0.4rem;
  margin-bottom: 0.55rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.clan-chat-msg { font-size: 0.78rem; color: #d6d3d1; line-height: 1.35; }
.clan-chat-msg.is-system { color: #78716c; font-style: italic; }
.clan-chat-msg strong { color: #fb923c; margin-right: 0.25rem; }

.clan-invite-bar {
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(251, 146, 60, 0.2);
}
.clan-invite-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #78716c;
}

.clan-dir-grid {
  display: grid;
  gap: 0.55rem;
}
.clan-dir-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 0.85rem;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.clan-dir-card.is-mine { border-color: rgba(251, 146, 60, 0.35); }
.clan-dir-crest {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  background: rgba(28, 25, 23, 0.9);
  border: 1px solid rgba(251, 146, 60, 0.25);
}
.clan-dir-body h4 {
  margin: 0;
  font-size: 0.9rem;
  color: #fafaf9;
}
.clan-dir-body p {
  margin: 0.2rem 0 0;
  font-size: 0.72rem;
  color: #a8a29e;
}
.clan-dir-motd { color: #d6d3d1 !important; }

.clan-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
@media (max-width: 900px) {
  .clan-split { grid-template-columns: 1fr; }
}

.clan-app-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.clan-app-row strong { display: block; color: #fafaf9; font-size: 0.85rem; }
.clan-app-row span { font-size: 0.72rem; color: #a8a29e; }

.clan-invite-list { display: grid; gap: 0.45rem; }
.clan-invite-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.45rem 0.5rem;
  background: rgba(0, 0, 0, 0.3);
}
.clan-invite-row code { color: #fb923c; font-size: 0.82rem; }
.clan-invite-row > span { font-size: 0.68rem; color: #78716c; }

.clan-perm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.68rem;
}
.clan-perm-table th,
.clan-perm-table td {
  padding: 0.35rem 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
  color: #a8a29e;
}
.clan-perm-table th:first-child,
.clan-perm-table td:first-child {
  text-align: left;
  color: #e7e5e4;
}
.clan-perm-table th {
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #78716c;
}
.clan-perm-yes { color: #4ade80; }
.clan-perm-no { color: #44403c; }
.clan-stats-table td,
.clan-stats-table th { font-variant-numeric: tabular-nums; }
.clan-lb-mine td {
  color: #fdba74;
  background: rgba(180, 83, 9, 0.12);
}

.clan-oil-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: center;
  padding: 1.1rem 1.2rem;
  margin-bottom: 0.85rem;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(234, 88, 12, 0.25), transparent 55%),
    rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(234, 88, 12, 0.35);
}
@media (max-width: 700px) {
  .clan-oil-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
.clan-oil-drum {
  width: 7rem;
  text-align: center;
}
.clan-oil-drum-body {
  position: relative;
  width: 5.5rem;
  height: 7rem;
  margin: 0 auto;
  border: 2px solid rgba(251, 146, 60, 0.55);
  border-radius: 0.35rem 0.35rem 0.55rem 0.55rem;
  background: linear-gradient(90deg, #1c1917, #292524 40%, #1c1917);
  overflow: hidden;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.65);
}
.clan-oil-level {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #f97316, #9a3412 70%, #431407);
  box-shadow: 0 -8px 20px rgba(249, 115, 22, 0.35);
  transition: height 0.45s ease;
}
.clan-oil-drum-label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: #fdba74;
}
.clan-oil-bal span {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a8a29e;
}
.clan-oil-bal strong {
  display: block;
  margin: 0.2rem 0 0.55rem;
  font-size: 2rem;
  color: #ffedd5;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.clan-oil-bal small {
  font-size: 0.85rem;
  color: #fb923c;
  letter-spacing: 0.08em;
}

.clan-contrib-list,
.clan-ledger-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.clan-contrib-list li,
.clan-ledger-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.45rem;
  background: rgba(0, 0, 0, 0.28);
  font-size: 0.78rem;
  color: #d6d3d1;
}
.clan-contrib-list strong,
.clan-ledger-list strong { color: #fb923c; }
.clan-ledger-list li {
  flex-direction: column;
  align-items: flex-start;
}
.clan-ledger-list li span { font-size: 0.68rem; color: #78716c; }

.clan-create-card { max-width: 28rem; }

.clan-tab { /* also used as nav trigger class on buttons */ }

/* Clan v4 extensions */
.clan-rail-nav-ext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.28rem;
  overflow: visible;
  max-height: none;
}
.clan-nav-ext .clan-rail-nav .clan-nav-btn {
  width: 100%;
  padding: 0.48rem 0.45rem;
}
.clan-nav-ext .clan-rail-nav .clan-nav-btn span:last-child { font-size: 0.62rem; }

.clan-status-strip {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  margin: -1rem -1.15rem 0.85rem;
  background: linear-gradient(180deg, rgba(12, 10, 9, 0.98) 0%, rgba(12, 10, 9, 0.88) 100%);
  border-bottom: 1px solid rgba(251, 146, 60, 0.22);
  backdrop-filter: blur(6px);
}
.clan-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.55rem;
  font-family: inherit;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: #d6d3d1;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.clan-status-chip:hover {
  color: #ffedd5;
  border-color: rgba(251, 146, 60, 0.35);
}
.clan-status-chip.active {
  color: #ffedd5;
  border-color: rgba(251, 146, 60, 0.5);
  background: rgba(180, 83, 9, 0.25);
}
.clan-status-ico { color: #fb923c; }
.clan-status-boost {
  margin-left: auto;
  font-size: 0.65rem;
  color: #4ade80;
  letter-spacing: 0.05em;
}
@media (max-width: 900px) {
  .clan-status-strip { margin-top: 0; }
  .clan-status-boost { margin-left: 0; flex: 1 1 100%; }
}
.clan-member-clickable { cursor: pointer; transition: border-color 0.15s; }
.clan-member-clickable:hover { border-color: rgba(251, 146, 60, 0.35); }

.clan-shop-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.clan-shop-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.clan-shop-card.is-owned { opacity: 0.65; }
.clan-shop-ico {
  font-size: 1.4rem;
  width: 2.2rem;
  text-align: center;
  color: #fb923c;
}
.clan-shop-body h4 { margin: 0 0 0.2rem; font-size: 0.85rem; color: #e7e5e4; }
.clan-shop-body p { margin: 0 0 0.25rem; font-size: 0.72rem; color: #78716c; }
.clan-shop-body strong { font-size: 0.78rem; color: #fdba74; }

.clan-mission-list { display: grid; gap: 0.5rem; }
.clan-mission-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.55rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.clan-mission-row.is-done { border-color: rgba(34, 197, 94, 0.25); }
.clan-mission-bar {
  height: 4px;
  margin: 0.35rem 0;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.clan-mission-bar div {
  height: 100%;
  background: linear-gradient(90deg, #ea580c, #fb923c);
  border-radius: 2px;
}

.clan-war-arena {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 1.25rem;
  margin-bottom: 0.65rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(251, 146, 60, 0.2);
}
.clan-war-side { text-align: center; }
.clan-war-side.is-leading .clan-war-score { color: #4ade80; }
.clan-war-kicker { display: block; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: #78716c; }
.clan-war-score { display: block; font-size: 1.8rem; color: #fb923c; margin: 0.25rem 0; }
.clan-war-vs { font-size: 0.9rem; color: #57534e; font-weight: 700; }
.clan-war-bar {
  height: 8px;
  background: rgba(239, 68, 68, 0.35);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.clan-war-bar-us {
  height: 100%;
  background: linear-gradient(90deg, #ea580c, #fbbf24);
  border-radius: 4px;
}

.clan-news-feed { display: grid; gap: 0.5rem; }
.clan-news-item {
  padding: 0.65rem 0.75rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.clan-news-item.is-pinned { border-color: rgba(251, 146, 60, 0.35); }
.clan-news-item header { font-size: 0.72rem; color: #a8a29e; margin-bottom: 0.25rem; }
.clan-news-item p { margin: 0; font-size: 0.8rem; color: #d6d3d1; line-height: 1.4; }
.clan-news-pin { margin-right: 0.25rem; }

.clan-pass-track { display: grid; gap: 0.4rem; }
.clan-pass-tier {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.5rem 0.65rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.04);
  opacity: 0.55;
}
.clan-pass-tier.is-unlocked { opacity: 1; border-color: rgba(251, 146, 60, 0.2); }
.clan-pass-tier.is-claimed { opacity: 0.7; }
.clan-pass-num {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fb923c;
  border: 1px solid rgba(251, 146, 60, 0.35);
  border-radius: 50%;
}
.clan-pass-body strong { display: block; font-size: 0.8rem; color: #e7e5e4; }
.clan-pass-body span { font-size: 0.68rem; color: #78716c; }

.clan-hangar-grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}
.clan-hangar-card {
  padding: 1rem;
  text-align: center;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.clan-hangar-card.is-active { border-color: rgba(251, 146, 60, 0.45); }
.clan-hangar-card.is-locked { opacity: 0.5; }
.clan-hangar-preview { font-size: 2rem; margin-bottom: 0.5rem; color: #fb923c; }
.clan-hangar-card h4 { margin: 0 0 0.5rem; font-size: 0.82rem; color: #e7e5e4; }

.clan-profile-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.clan-profile-stats li {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0.45rem;
  background: rgba(0, 0, 0, 0.25);
  font-size: 0.78rem;
  color: #d6d3d1;
}
.clan-profile-stats strong { color: #fb923c; }
.clan-profile-battle.is-win { color: #4ade80; }
.clan-profile-battle.is-loss { color: #f87171; }

.clan-actions-wrap { flex-wrap: wrap; }

/* ===== UI SHELL V2 — global polish ===== */
.wot-panel > h2,
#panel-shop h2,
#panel-missions h2,
#panel-season h2,
#panel-collections h2,
#panel-devblog h2,
#panel-stats h2,
#panel-clan h2,
#panel-research h2,
#panel-captains h2,
#panel-event h2,
.wot-shop-head h2,
.wot-season-head h2,
.wot-collections-head h2,
.wot-devblog-head h2,
.settings-card > h2 {
  font-family: var(--if-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f8fafc;
}

.wot-shop-head,
.wot-season-head,
.wot-collections-head,
.wot-devblog-head,
.wot-clan-head {
  border-bottom: 1px solid rgba(245, 158, 11, 0.22);
  background: linear-gradient(180deg, rgba(14, 20, 32, 0.55), transparent);
}

.wot-module-head,
.wot-gtab-panel .wot-module-head {
  font-family: var(--if-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f1f5f9;
  border-bottom-color: rgba(245, 158, 11, 0.28);
}

.wot-claim-banner {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.2), rgba(8, 12, 20, 0.92) 55%);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: var(--if-radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.wot-settings-btn {
  width: 2.15rem;
  height: 2.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--if-border);
  background: rgba(0, 0, 0, 0.35);
  color: var(--if-text-muted);
  border-radius: var(--if-radius-sm);
  cursor: pointer;
  transition: color 0.15s var(--if-ease), border-color 0.15s var(--if-ease), background 0.15s var(--if-ease);
}
.wot-settings-btn:hover {
  color: var(--if-accent-hot);
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.08);
}

.settings-card {
  max-width: 460px;
  text-align: left;
}
.settings-card .settings-grid label {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--if-text-muted);
}
.settings-select,
.settings-card input[type="range"] {
  accent-color: var(--if-accent);
}

.wot-shop-card,
.wot-mission-card,
.wot-bp-tier,
.clan-news-item {
  border-radius: var(--if-radius-sm);
}

.wot-battle-dock {
  border-radius: var(--if-radius-sm) !important;
  border-color: rgba(245, 158, 11, 0.42) !important;
  background: linear-gradient(180deg, rgba(10, 16, 26, 0.96), rgba(4, 8, 14, 0.98)) !important;
}

.wot-hangar-stage .hg-tank-hero .wot-tank-name {
  font-family: var(--if-display);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 0.95;
}

.wot-hangar-stage .wot-tier-badge {
  font-family: var(--if-display);
  letter-spacing: 0.06em;
}

#panel-shop,
#panel-missions,
#panel-season,
#panel-collections,
#panel-devblog,
#panel-stats,
#panel-clan,
#panel-research,
#panel-event {
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(245, 158, 11, 0.05), transparent 55%),
    linear-gradient(180deg, rgba(8, 12, 20, 0.82), rgba(6, 10, 16, 0.9));
}

.wot-season-tab,
.wot-camo-filter,
.wot-shop-cat {
  border-radius: var(--if-radius-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.25);
}
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.28);
  border: 1px solid rgba(245, 158, 11, 0.15);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 158, 11, 0.45);
}

/* ——— Ressourcenbörse (permanent coal ↔ steel) ——— */
.tab-rb.selected {
  border-color: rgba(148, 163, 184, 0.55);
  color: #e2e8f0;
  box-shadow: inset 0 -2px 0 #94a3b8;
}
.event-theme-rb #panel-event .btn-ev-claim {
  background: linear-gradient(180deg, #475569, #334155);
  border-color: rgba(148, 163, 184, 0.4);
}
.event-theme-rb #panel-event .btn-ev-claim:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.rb-event-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 40% at 20% 10%, rgba(120, 113, 108, 0.18), transparent 60%),
    radial-gradient(50% 45% at 85% 20%, rgba(148, 163, 184, 0.14), transparent 55%);
  z-index: 0;
}
.rb-event-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(4, 8, 14, 0.55) 100%);
}
.rb-event-content {
  position: relative;
  z-index: 1;
}
.theme-rb .ev-event-header {
  border-color: rgba(148, 163, 184, 0.35);
  background: linear-gradient(135deg, rgba(18, 24, 32, 0.94), rgba(10, 14, 20, 0.9));
}
.theme-rb .ev-event-eyebrow { color: #cbd5e1; }
.theme-rb .ev-event-header h2 { color: #f8fafc; }
.theme-rb .ev-event-desc { color: #94a3b8; }
.theme-rb .ev-section-title { color: #a8a29e; }
.theme-rb .ev-pts-bar i {
  background: linear-gradient(90deg, #78716c, #94a3b8);
}
.wx-wallet-chip.rb-rate {
  border-color: rgba(245, 158, 11, 0.35);
  color: #fde68a;
}
.rb-offer-card.is-to-steel {
  border-color: rgba(148, 163, 184, 0.28);
}
.rb-offer-card.is-to-coal {
  border-color: rgba(120, 113, 108, 0.35);
}
.wot-event-live-chip.is-permanent .wot-event-live-cd {
  color: #94a3b8;
}
.rb-shop-card.featured {
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.12);
}
.rb-shop-card.owned {
  opacity: 0.72;
}
.rb-shop-grid .wot-shop-price {
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}

/* ——— Front-Guthaben (virtuelle €) ——— */
.wot-res-front-euro {
  border-color: rgba(106, 144, 80, 0.45);
  background: linear-gradient(135deg, rgba(20, 28, 22, 0.85), rgba(12, 18, 14, 0.9));
}
.wot-res-front-euro .wot-res-icon {
  color: #86efac;
  font-weight: 700;
  font-size: 0.72rem;
}
.wot-res-front-euro strong {
  color: #d9f99d;
  font-variant-numeric: tabular-nums;
}
.wot-shop-balance-front-euro {
  border-color: rgba(106, 144, 80, 0.35);
  color: #d9f99d;
}
.wot-shop-balance-front-euro strong {
  font-variant-numeric: tabular-nums;
}
.wot-shop-front-kasse-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.65rem;
}
.wot-shop-front-kasse-stats .fk-stat {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  font-size: 0.58rem;
  color: #e2e8f0;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(106, 144, 80, 0.25);
  font-variant-numeric: tabular-nums;
}
.wot-shop-front-kasse-stats .fk-stat em {
  font-style: normal;
  font-size: 0.48rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #86efac;
}
.wot-shop-front-kasse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.45rem;
}
.wot-shop-front-kasse-card.featured {
  border-color: rgba(106, 144, 80, 0.45);
  box-shadow: inset 0 0 0 1px rgba(134, 239, 172, 0.12);
}
.wot-shop-front-kasse-card.owned {
  opacity: 0.72;
}
.wot-shop-front-kasse-card .wot-shop-price {
  color: #d9f99d;
  font-variant-numeric: tabular-nums;
}
.wot-shop-front-kasse-stats .fk-stat.is-boost {
  border-color: rgba(212, 160, 32, 0.45);
  color: #fde68a;
}
.wot-shop-front-kasse-stats .fk-stat.is-boost em {
  color: #fbbf24;
}
.fk-goal-tracker {
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.65rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(106, 144, 80, 0.3);
}
.fk-goal-tracker.is-ready {
  border-color: rgba(134, 239, 172, 0.45);
}
.fk-goal-tracker.is-done {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  color: #94a3b8;
  font-size: 0.62rem;
}
.fk-goal-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}
.fk-goal-label {
  font-size: 0.48rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #86efac;
}
.fk-goal-name {
  font-size: 0.72rem;
  color: #f1f5f9;
  font-weight: 600;
}
.fk-goal-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.fk-goal-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #4d7c4a, #86efac);
  border-radius: inherit;
}
.fk-goal-tracker.is-ready .fk-goal-bar i {
  background: linear-gradient(90deg, #ca8a04, #fde68a);
}
.fk-goal-foot {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.3rem;
  font-size: 0.58rem;
  color: #cbd5e1;
  font-variant-numeric: tabular-nums;
}
.fk-goal-ready {
  color: #d9f99d;
}
.fk-shop-hero .il-tank-hero {
  border-color: rgba(106, 144, 80, 0.35);
}
.wot-shop-front-kasse-grid + .wot-shop-section-title {
  margin-top: 0.85rem;
}

/* ===== Forschungsbaum · WoT-Look ===== */
#panel-research {
  --tree-nat: #c9a227;
}
#panel-research[data-nation="germany"] { --tree-nat: #ffce00; }
#panel-research[data-nation="usa"] { --tree-nat: #3b82f6; }
#panel-research[data-nation="ussr"] { --tree-nat: #ef4444; }
#panel-research[data-nation="uk"] { --tree-nat: #c8102e; }
#panel-research[data-nation="france"] { --tree-nat: #60a5fa; }
#panel-research[data-nation="japan"] { --tree-nat: #f87171; }
#panel-research[data-nation="poland"] { --tree-nat: #dc143c; }
#panel-research[data-nation="italy"] { --tree-nat: #34d399; }
#panel-research[data-nation="czech"] { --tree-nat: #60a5fa; }
#panel-research[data-nation="horizon"] { --tree-nat: #fb923c; }

.wot-tree-path-arrow {
  flex: 0 0 28px;
  height: 3px;
  margin: 0 0.15rem;
  background: #6a9e4a;
  border-radius: 0;
  position: relative;
}
.wot-tree-path-arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #6a9e4a;
  transform: translateY(-50%);
}

.wot-tree-hub {
  background: rgba(42, 53, 72, 0.45);
  border: 1px dashed rgba(201, 162, 39, 0.45);
  border-radius: 2px;
}

.wot-tree-lane-head {
  border-bottom-color: rgba(201, 162, 39, 0.35);
}
.wot-tree-lane-title {
  font-family: var(--if-display);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: #e8c547;
}

.wot-tree-overview-head {
  background: linear-gradient(180deg, rgba(14, 20, 30, 0.98), rgba(14, 20, 30, 0.9));
  border-bottom: 2px solid rgba(201, 162, 39, 0.35);
}
.wot-tree-overview-head .wot-tier-col-label {
  font-family: var(--if-display);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: #c9a227;
  border-bottom: none;
  text-align: center;
}

.wot-tree-scroll {
  background-color: #0e141e;
  border-color: rgba(61, 74, 92, 0.65);
}
.wot-tree-scroll[style*="background-image"] {
  background-color: transparent;
}

.tree-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem 0.45rem;
  background: rgba(26, 35, 50, 0.9);
  border: 1px solid rgba(61, 74, 92, 0.8);
  border-radius: 2px;
}

.wot-tree-filter-btn.selected {
  border-color: #c9a227;
  background: rgba(201, 162, 39, 0.14);
  color: #f5e6a8;
}

.wot-tree-node-horizon {
  width: 152px;
}

@media (prefers-reduced-motion: reduce) {
  .wot-tree-node,
  .wot-tree-node.available,
  .wot-research-nations-sidebar .wot-research-nation {
    animation: none !important;
    transition: none !important;
  }
  .wot-tree-node:hover { filter: none; }
}