@font-face {
  font-family: "Clash Display";
  src: url("assets/merge-tactics/Clash_Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --streamer-dark: #03060e;
  --streamer-bg: #0f1420;
  --streamer-input: #0b111c;
  --streamer-accent: #315bd4;
  --streamer-green: #8ff0c4;
  --streamer-green-border: #1f7a58;
  --streamer-hero-streak: linear-gradient(115deg, #b96920, #8c252d);
  --streamer-hero-deck: linear-gradient(115deg, #164e9c, #157a7a);
  --streamer-hero-board: linear-gradient(115deg, #59308a, #9b2875);
  --streamer-hero-merge: linear-gradient(115deg, #9c7420, #176f69);
  --streamer-seo-sheen: linear-gradient(105deg, rgba(226, 233, 248, .55) 48.1%, #b98224 49.05%, #f1c95f 49.58%, #fff3bd 50%, #dcae43 50.48%, rgba(226, 233, 248, .55) 51.9%);
  --cr-bar-border: #000000;
  --cr-bar-track-top: #202649;
  --cr-bar-track-bottom: #191e44;
  --cr-bar-blue-top: #69dcf7;
  --cr-bar-blue-bottom: #52b2e4;
  --cr-bar-green-top: #78f968;
  --cr-bar-green-bottom: #61d05a;
  --cr-button-blue: #68adf8;
  --cr-button-gloss: #7db9f9;
  --cr-button-rim: #83cafa;
  --cr-button-side: #4b92f4;
  --cr-button-edge: #2151a2;
  --cr-button-ink: #232323;
  --bg: #0f1420;
  --surface: #151a24;
  --surface-2: rgba(9, 12, 20, 0.6);
  --border: var(--panel-border);
  --text: #f3f6ff;
  --text-invert: #16203a;
  --muted: #737b8c;
  --primary: #3b6ef5;
  --primary-d: #274bd4;
  --gold: #f5b93b;
  --win: #1aa251;
  --loss: #e0413a;
  --new-badge-ink: #311016;
  --new-badge-depth: #8b1220;
  --new-badge-red: #f12b34;
  --new-badge-orange: #ff763c;
  --new-badge-hot: #ffad63;
  --new-badge-gloss: #ffd9b1;
  --new-badge-white: #fff7e8;
  --new-badge-shadow: #060a13a6;
  --new-ribbon-pink: #ff3864;
  --radius: 14px;
  --radius-sm: 9px;
  --mt-arena-floor: #64822f;
  --mt-arena-hex-hover: rgba(255, 255, 255, 0.24);
  --mt-arena-hex-line: rgba(255, 255, 255, 0.9);
  --mt-arena-hex-taken: rgba(59, 110, 245, 0.3);
  --mt-arena-ruler-hover: rgba(245, 185, 59, 0.3);
  --mt-modifier-card-top: #281378;
  --mt-modifier-card-mid: #5527b8;
  --mt-modifier-card-bottom: #4820a8;
  --mt-modifier-card-bg: linear-gradient(180deg, var(--mt-modifier-card-top) 0%, var(--mt-modifier-card-mid) 47%, var(--mt-modifier-card-bottom) 100%);
  --mt-modifier-card-shadow: #171025;
  --shadow-sm: 0 1px 2px rgba(20, 30, 60, 0.06);
  --shadow: 0 2px 8px rgba(20, 30, 60, 0.06), 0 8px 24px rgba(20, 30, 60, 0.05);
  --panel-bg: linear-gradient(145deg, rgba(31, 48, 91, 0.94), rgba(18, 21, 31, 0.97) 52%, rgba(39, 22, 48, 0.94));
  --panel-border: rgba(99, 125, 215, 0.42);
  --panel-shadow: 0 8px 24px rgba(3, 6, 14, 0.24), inset 0 0 22px rgba(83, 110, 215, 0.06);
  --panel-radius: 8px;
  --panel-text: #f3f6ff;
  --panel-muted: rgba(226, 233, 248, 0.66);
  --panel-dim: rgba(226, 233, 248, 0.45);
  --karo-fuge: #062764;
  --karo-groesse: 72px;
  --karo-kachel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='100' height='100'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1' gradientTransform='rotate(-45 .5 .5)'%3E%3Cstop offset='0' stop-color='%231b64b7'/%3E%3Cstop offset='1' stop-color='%231960af'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1' gradientTransform='rotate(-45 .5 .5)'%3E%3Cstop offset='0' stop-color='%231752a5'/%3E%3Cstop offset='1' stop-color='%23174e9f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100' height='100' fill='%23062764'/%3E%3Crect x='15.45' y='15.45' width='69.11' height='69.11' rx='9' transform='rotate(45 50 50)' fill='url(%23a)'/%3E%3Crect x='-34.55' y='-34.55' width='69.11' height='69.11' rx='9' transform='rotate(45 0 0)' fill='url(%23b)'/%3E%3Crect x='65.44' y='-34.55' width='69.11' height='69.11' rx='9' transform='rotate(45 100 0)' fill='url(%23b)'/%3E%3Crect x='-34.55' y='65.44' width='69.11' height='69.11' rx='9' transform='rotate(45 0 100)' fill='url(%23b)'/%3E%3Crect x='65.44' y='65.44' width='69.11' height='69.11' rx='9' transform='rotate(45 100 100)' fill='url(%23b)'/%3E%3C/svg%3E");
  --karo-licht: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0) 26%, rgba(0,0,0,0.12) 74%, rgba(0,0,0,0.24));
  --series-1: #4a86e8;
  --series-2: #d9603a;
  --series-3: #1fa39a;
  --series-4: #b95bd0;
  --series-5: #b08a1a;
  --series-6: #e05a86;
  --series-7: #6f7ae0;
  --series-8: #3d9450;
  --series-9: #2b8fb8;
  --series-10: #a9701f;
  --panel-line: linear-gradient(90deg, transparent, #587cff, #bd71f0, transparent);
  --panel-line-glow: 0 0 8px rgba(89, 122, 255, 0.5);
  --feedback-bg: #0b0b0d;
  --feedback-backdrop: rgba(0, 0, 0, 0.88);
  --support-bg: color-mix(in srgb, var(--feedback-bg) 52%, transparent);
  --header-menu-bg: #101116;
  --header-menu-hover: #181b24;
  --panel-inset: linear-gradient(135deg, rgba(9, 12, 20, 0.78), rgba(20, 24, 35, 0.72));
  --panel-inset-border: rgba(123, 145, 216, 0.2);
  --deck-btn-bg: #172131;
  --deck-btn-border: #344156;
  --deck-btn-fg: #a9bded;
  --deck-btn-hover-border: #5b8cff;
  --deck-btn-hover-fg: #cbd9ff;
  --deck-btn-on: #315fce;
}

@property --profile-gold-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --geier-ready-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}


* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: #0f1420;
  line-height: 1.55;
}
body[data-content-direction="rtl"] :is(p, h1, h2, h3, h4, h5, label, input, textarea, select, .page-intro, .header-language-option span) { direction: rtl; text-align: right; }
body.home-active { background: #0c0d12; }
body.home-active::before { opacity: 0; }
body.bg-fade-ready,
body.bg-fade-ready::before {
  transition: opacity .55s ease, background-color .55s ease;
}
body.bg-fade-ready #home-bg-fx { transition: opacity .55s ease, visibility 0s linear .55s; }
body.bg-fade-ready.home-active #home-bg-fx { transition: opacity .55s ease, visibility 0s; }
body:not(.home-active) .home-galaxy { animation-play-state: paused; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* Startfarbe ist der bereits abgedunkelte Wert (#0b0b0d mal 0.5), weil der
       frueher hier stehende brightness()-Filter auch diesen Verlauf mitgedunkelt
       hat. Ohne die Anpassung waere der Uebergang ploetzlich heller. */
    linear-gradient(to bottom, #060607, rgba(6, 6, 7, 0)),
    url("assets/bg-shocktober-ls-blurred.jpg");
  background-position: top, center top;
  background-size: 100% 220px, cover;
  background-repeat: no-repeat, no-repeat;
  transform: translateY(var(--bg-shift, 0px)) scale(1.2);
}
main { position: relative; z-index: 2; }
.site-footer { position: relative; z-index: 1; }

h1, h2, h3 { line-height: 1.2; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
small { color: var(--muted); font-weight: normal; }
body > header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #0b0b0d;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body > header:has(.header-language[open]) { z-index: 70; }
body.embed-mode > header { display: none; }
.nav-inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  width: 100%; padding: 0 1.25rem; height: 58px;
}
#tabs { justify-self: center; }
.brand {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; justify-self: start;
  -webkit-user-drag: none; user-select: none;
}
.brand img { -webkit-user-drag: none; }
.brand .logo { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; transition: box-shadow .18s ease, transform .18s ease; }
.brand span { margin-left: 0.55rem; color: #fff; font-family: "Inter", sans-serif; font-weight: 800; font-size: 1.05rem; line-height: 0.9; letter-spacing: -0.01em; transition: text-shadow .18s ease; }
.brand:hover { background: none; }
.brand:hover .logo {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 0 0 1px rgba(140, 235, 255, .55), 0 0 12px rgba(88, 180, 255, .6), 0 0 24px rgba(88, 180, 255, .28);
}
.brand:hover span { text-shadow: 0 0 14px rgba(122, 190, 255, .6); }
.brand:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .brand:hover .logo { transform: none; } }
.header-feedback {
  all: unset; box-sizing: border-box; justify-self: end; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.48rem;
  min-height: 32px; padding: 0.25rem 0.7rem;
  border: 2px solid var(--panel-inset-border); border-radius: 7px;
  color: var(--panel-muted); font-size: 0.82rem; font-weight: 750;
  transition: color .15s ease, border-color .15s ease;
}
.header-feedback img { width: 22px; height: 22px; object-fit: contain; opacity: .82; }
.header-feedback:hover { background: none; color: var(--panel-text); border-color: var(--panel-border); }
.header-feedback:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.header-actions {
  justify-self: end; display: inline-flex; align-items: center; gap: 0.5rem;
}
.header-language { position: relative; flex: none; }
.header-language > summary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.38rem;
  min-width: 58px; min-height: 32px; padding: 0.25rem 0.55rem;
  border: 2px solid var(--panel-inset-border); border-radius: 4px;
  color: var(--panel-muted); background: transparent; cursor: pointer;
  font-size: 0.78rem; font-weight: 800; list-style: none;
  transition: color .15s ease, border-color .15s ease;
}
.header-language > summary::-webkit-details-marker { display: none; }
.header-language > summary:hover,
.header-language[open] > summary { color: var(--panel-text); border-color: var(--panel-border); }
.header-language > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.header-language-menu {
  position: absolute; z-index: 30; top: calc(100% + 8px); right: 0;
  width: min(310px, calc(100vw - 24px)); max-height: min(620px, calc(100vh - 78px));
  overflow-y: auto; padding: 0.45rem;
  border: 2px solid var(--panel-border); border-radius: var(--panel-radius);
  background: var(--header-menu-bg); box-shadow: var(--panel-shadow);
  scrollbar-width: thin; transform-origin: top right;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-7px) scaleY(0.96);
  transition: opacity .16s ease, transform .18s ease, visibility 0s linear .18s;
}
@media (max-width: 680px) {
  .header-language-menu { position: fixed; top: 66px; right: 12px; max-height: calc(100dvh - 78px); }
}
.header-language:not([open]) > .header-language-menu { display: block; }
.header-language[open] > .header-language-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scaleY(1);
  transition-delay: 0s;
}
.header-language.js-animated > .header-language-menu { transition: none; }
.header-language-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0.6rem 0.6rem; border-bottom: 1px solid var(--panel-inset-border);
}
.header-language-head b { color: var(--panel-text); font-size: 0.82rem; }
.header-language-head small { color: var(--panel-dim); font-size: 0.64rem; }
.header-language-option {
  all: unset; box-sizing: border-box; width: 100%; min-height: 33px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--panel-inset-border);
  color: var(--panel-muted); text-decoration: none; font-size: 0.78rem;
}
.header-language-option span { color: var(--panel-text); font-weight: 700; }
.header-language-option small { color: var(--panel-dim); font-size: 0.61rem; white-space: nowrap; }
.header-language-option.active { cursor: default; }
.header-language-option.active:disabled { opacity: 1; }
.header-language-option.active small { color: var(--gold); }
.header-language-option:disabled { cursor: not-allowed; opacity: 0.62; }
.header-language-option:not(:disabled):hover { background: var(--header-menu-hover); text-decoration: none; }
.header-language-option:disabled:hover { background: transparent; }
.header-language-note {
  margin: 0.5rem 0 0; padding: 0.55rem 0.6rem 0.35rem;
  color: var(--panel-dim); font-size: 0.66rem; line-height: 1.45;
}
.header-language-note button {
  all: unset; cursor: pointer; color: var(--gold); font-weight: 750;
}
.header-language-note button:hover { background: none; color: var(--panel-text); text-decoration: underline; }
.header-language-note button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (max-width: 680px) {
  .header-feedback span { display: none; }
  .header-feedback { padding-inline: 0.42rem; }
  .header-language > summary { min-width: 52px; padding-inline: 0.42rem; }
}
@media (prefers-reduced-motion: reduce) {
  .header-language-menu { transition: none; transform: none; }
}
#tabs { position: relative; display: flex; align-items: stretch; height: 100%; }
.nav-item { position: relative; display: flex; align-items: stretch; }
.nav-item .nav-link {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 0.3rem; height: 100%;
  padding: 0 0.85rem; color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; font-weight: 600; font-family: inherit;
  white-space: nowrap; border-bottom: 2px solid transparent; transition: color 0.15s; text-decoration: none;
}
.nav-item .nav-link:hover { color: #fff; }
.nav-item .nav-link.active { color: #fff; border-bottom-color: var(--primary); }
.nav-item .nav-link.nav-home { padding-inline: 0.7rem; }
.nav-item .nav-link.nav-home svg { display: block; }
.nav-caret { opacity: 0.55; transition: transform .16s ease; }
.nav-caret-hit { display: inline-flex; align-items: center; position: relative; }
@media (pointer: coarse) {
  .nav-caret-hit::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
}
.nav-item.has-dropdown:focus-within .nav-caret,
.nav-item.has-dropdown.dropdown-open .nav-caret { transform: rotate(180deg); }
@media (hover: hover) {
  .nav-item.has-dropdown:hover .nav-caret { transform: rotate(180deg); }
}
.dropdown {
  position: absolute; top: 100%; left: 0; z-index: 25; min-width: 210px;
  background: #0b0b0d; border: 1px solid rgba(255, 255, 255, 0.08); border-top: none;
  border-radius: 0; padding: 0.2rem 0; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}
@media (hover: hover) {
  .nav-item.has-dropdown:hover .dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity .14s ease, transform .14s ease;
  }
}
.nav-item.has-dropdown:focus-within .dropdown,
.nav-item.has-dropdown.dropdown-open .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .14s ease, transform .14s ease;
}
.nav-item.has-dropdown.dropdown-dismissed .dropdown {
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}
.nav-item.has-dropdown.dropdown-dismissed .nav-caret { transform: none; }
@media (prefers-reduced-motion: reduce) { .dropdown { transition: opacity .01s linear, visibility 0s linear; } }
.dropdown :is(a, button) {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 0.5rem;
  width: 100%; padding: 0.6rem 0.85rem; border-radius: 0; color: rgba(255, 255, 255, 0.6);
  font-size: 0.86rem; font-weight: 600; font-family: inherit; text-decoration: none;
  transition: color .12s ease, background .12s ease, transform .12s ease;
}
.dropdown :is(a, button):hover { color: #fff; background: rgba(255,255,255,.07); transform: translateX(3px); }
.dropdown button[disabled] { color: rgba(255, 255, 255, 0.35); cursor: default; }
.dropdown button[disabled]:hover { background: none; transform: none; }
.dropdown button img.lock { width: 13px; height: 13px; opacity: .75; flex: none; }
@media (prefers-reduced-motion: reduce) { .dropdown :is(a, button):hover { transform: none; } }
#view-home {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center;
  padding: 3rem 1.5rem 3.5rem; min-height: calc(100vh - 58px);
}
#view-home[hidden] { display: none; }
#home-bg-fx {
  opacity: 0; visibility: hidden;
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  background-color: #0c0d12;
  background-image:
    radial-gradient(ellipse 1100px 700px at 8% 0%, rgba(88,124,255,.24), transparent 62%),
    radial-gradient(ellipse 780px 500px at 95% 10%, rgba(245,185,59,.10), transparent 60%),
    radial-gradient(ellipse 1200px 800px at 50% 100%, rgba(189,113,240,.20), transparent 62%);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
body.home-active #home-bg-fx { opacity: 1; visibility: visible; }
#home-starfield {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.home-galaxy {
  position: absolute; border-radius: 50%;
  filter: blur(60px);
  mix-blend-mode: screen;
  animation: home-galaxy-spin linear infinite;
}
.home-galaxy-a {
  width: 900px; height: 900px; top: -260px; left: -220px;
  background: conic-gradient(from 0deg,
    rgba(88,124,255,0) 0deg, rgba(88,124,255,.55) 70deg, rgba(189,113,240,.42) 150deg,
    rgba(88,124,255,0) 230deg, rgba(245,185,59,.2) 300deg, rgba(88,124,255,0) 360deg);
  animation-duration: 110s;
}
.home-galaxy-b {
  width: 760px; height: 760px; bottom: -200px; right: -180px;
  background: conic-gradient(from 180deg,
    rgba(189,113,240,0) 0deg, rgba(189,113,240,.46) 90deg, rgba(88,124,255,.34) 190deg,
    rgba(189,113,240,0) 260deg, rgba(88,124,255,0) 360deg);
  animation-duration: 150s;
  animation-direction: reverse;
}
@keyframes home-galaxy-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .home-galaxy { animation: none; } }
.home-search { display: flex; gap: 0.25rem; }
.home-search-field { position: relative; flex: 1; min-width: 0; }
#home-search-form #home-tag-input {
  width: 100%; max-width: none; min-width: 0; height: 48px;
  padding: 0.55rem 2.7rem; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #f3f6ff; font-size: 0.98rem;
}
#home-search-form #home-tag-input::placeholder { color: rgba(255,255,255,.38); }
#home-search-form #home-tag-input:focus {
  outline: none; border-color: var(--primary); background: rgba(255,255,255,.08); box-shadow: none;
}
.home-search button[type="submit"] { all: unset; box-sizing: border-box; cursor: pointer; height: 48px; padding-inline: 1.3rem; border-radius: 10px; background: var(--primary); color: #fff; font-size: 0.92rem; font-weight: 700; display: flex; align-items: center; }
.home-search button[type="submit"]:hover { background: var(--primary-d); }
@media (max-width: 640px) {
  #view-home { padding-top: 1.3rem; }
  #home-search-form #home-tag-input { height: 36px; padding-inline: 2.1rem; font-size: 1rem; }
  .home-search-field .search-leading-icon { left: 0.6rem; }
  .home-search button[type="submit"] { height: 36px; padding-inline: 0.85rem; font-size: 0.82rem; }
}
#home-search-suggestions {
  top: calc(100% + 6px); text-align: left;
  border-radius: 10px; border-color: rgba(255,255,255,.14);
  background: rgba(10,12,18,.96); backdrop-filter: blur(10px);
  box-shadow: 0 22px 54px rgba(0,0,0,.55);
}
#home-search-suggestions .search-group-title { padding: 0.6rem 0.9rem 0.4rem; }
#home-search-suggestions .search-suggestion { padding: 0.62rem 0.9rem; }
#home-search-suggestions .search-suggestion-copy strong { font-size: 0.9rem; }
#home-search-suggestions .search-suggestion-copy > span { font-size: 0.72rem; }
#home-search-suggestions .search-dropdown-message { padding: 0.95rem; }
.search-dd-tabs {
  display: flex; gap: 0.25rem; padding: 0.45rem 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.search-dd-tabs button {
  all: unset; box-sizing: border-box; cursor: pointer;
  padding: 0.3rem 0.7rem; border-radius: 999px;
  color: rgba(255,255,255,.45); font-family: inherit;
  font-size: 0.66rem; font-weight: 850; letter-spacing: 0.07em; text-transform: uppercase;
  transition: background .15s ease, color .15s ease;
}
.search-dd-tabs button:hover { background: rgba(255,255,255,.07); color: #fff; }
.search-dd-tabs button.active { background: rgba(255,255,255,.12); color: #fff; }
.search-dd-tabs button.active:hover { background: rgba(255,255,255,.14); }
.search-dd-tabs button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.search-dropdown:has(.search-dd-list) { max-height: none; overflow: hidden; }
#home-search-suggestions { max-height: none; overflow: hidden; }
.search-dd-list { max-height: 23rem; overflow-y: auto; overscroll-behavior: contain; }
#home-search-suggestions .search-dd-list { max-height: 25.5rem; }
.search-dd-list::-webkit-scrollbar { width: 10px; }
.search-dd-list::-webkit-scrollbar-track { background: transparent; }
.search-dd-list::-webkit-scrollbar-thumb {
  border: 3px solid transparent; border-radius: 999px;
  background: rgba(255,255,255,.18); background-clip: content-box;
}
.search-dd-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); background-clip: content-box; }
.search-dd-list { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
.search-suggestion-marker.favorite-search-marker {
  border-color: rgba(244, 190, 76, .34); background: rgba(244, 190, 76, .12);
  color: var(--gold); font-size: 0.8rem; line-height: 1;
}
.cookie-bar {
  position: fixed; left: 50%; bottom: 18px; z-index: 60;
  transform: translateX(-50%);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.9rem;
  width: min(760px, calc(100vw - 32px));
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(255,255,255,.14); border-radius: 14px;
  background: rgba(14, 16, 24, .97);
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
  animation: cookie-bar-in .4s cubic-bezier(.22,.61,.36,1);
}
.cookie-bar[hidden] { display: none; }
@keyframes cookie-bar-in {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .cookie-bar { animation: none; } }
.cookie-bar-art { width: 92px; height: auto; margin-top: -46px; margin-bottom: -10px; flex: none; }
.cookie-bar-copy h2 { margin: 0 0 0.2rem; font-size: 1rem; font-weight: 800; color: #f3f6ff; }
.cookie-bar-copy p { margin: 0; font-size: 0.8rem; line-height: 1.5; color: rgba(255,255,255,.6); }
.cookie-bar-copy a { color: var(--gold); }
.cookie-bar-details { margin-top: 0.4rem; }
.cookie-bar-details > summary { cursor: pointer; color: var(--gold); font-size: 0.8rem; font-weight: 600; }
.cookie-bar-details > summary:focus-visible { outline: 2px solid var(--panel-text); outline-offset: 2px; }
.cookie-bar-details[open] > p { margin-top: 0.4rem; }
.cookie-bar-actions { display: grid; gap: 0.45rem; }
.cookie-bar-btn {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0.6rem 1.1rem; border-radius: 10px;
  font-family: inherit; font-size: 0.85rem; font-weight: 700;
  white-space: nowrap; border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
.cookie-bar-accept { background: var(--primary); border-color: var(--primary); color: var(--panel-text); }
.cookie-bar-accept:hover { background: var(--primary-d); }
.cookie-bar-decline { background: var(--panel-inset); border-color: var(--panel-border); color: var(--panel-text); }
.cookie-bar-decline:hover { background: var(--surface); border-color: var(--deck-btn-hover-border); }
.cookie-bar-btn:focus-visible { outline: 2px solid var(--panel-text); outline-offset: 2px; }
@media (max-width: 640px), (max-device-width: 640px) {
  .cookie-bar { left: 16px; top: auto; bottom: calc(var(--mobile-nav-platz, 0px) + 12px); width: calc(100dvw - 32px); max-height: calc(100dvh - var(--mobile-nav-platz, 0px) - 88px); transform: none; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; row-gap: 0.7rem; animation: none; }
  .cookie-bar-art { display: none; }
  .cookie-bar-copy { min-width: 0; min-height: 0; align-self: stretch; overflow-y: auto; overscroll-behavior: contain; }
  .cookie-bar-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}

#home-status { min-height: 1.2rem; margin-top: 0.6rem; text-align: center; font-size: 0.84rem; color: var(--gold); }
#home-result[hidden] { display: none; }
#home-result { max-width: 460px; margin: 0.6rem auto 0; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.65rem 0.1rem; border-top: 1px solid rgba(255,255,255,.1); }
@media (max-width: 640px) {
  #home-status { min-height: 0; margin: 0.35rem 0 0; }
}
.site-social-links { display: inline-flex; align-items: center; gap: 0.82rem; }
.site-social-links a {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px; padding: 0;
  color: var(--panel-text); opacity: 0.62; text-decoration: none;
  transition: opacity .16s ease, transform .16s ease;
}
.site-social-links img { display: block; width: 18px; height: 18px; filter: invert(1); }
.site-social-links a:hover { background: none; color: var(--panel-text); opacity: 1; text-decoration: none; transform: translateY(-1px); }
.site-social-links a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 3px; opacity: 1; }
.home-social-links { margin-top: 1.15rem; }
.home-social-links a { width: 28px; height: 28px; }
.home-social-links img { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .site-social-links a { transition: opacity .16s ease; } .site-social-links a:hover { transform: none; } }
.tab-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--primary);
  transform: translateX(0);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}
.site-footer, .site-legal { flex: none; }
.tab-panel > h2:first-child { margin-top: 0; }
.hint { color: rgba(255, 255, 255, 0.72); font-size: 0.9rem; max-width: 60ch; }
.page-intro { margin: 0 0 1rem; max-width: 780px; }
.page-intro > span {
  display: block; margin-bottom: 0.28rem; color: var(--gold);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.page-intro h1 {
  margin: 0; color: var(--text); font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(1.42rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.12;
}
.page-intro p { margin: 0.55rem 0 0; max-width: 72ch; color: var(--panel-muted); line-height: 1.55; }
.page-intro-compact { margin-bottom: 1.15rem; }
.page-intro-centered { margin-inline: auto; text-align: center; }
.page-intro-centered p { margin-inline: auto; }
.builder-page-summary { margin: 0.45rem 0 0; max-width: 62ch; color: var(--panel-muted); line-height: 1.45; }
.panel.seo-guide {
  overflow: visible; margin-top: 4rem; padding: 1.35rem 1.5rem;
  border-color: var(--panel-inset-border);
  background: color-mix(in srgb, var(--feedback-bg) 68%, transparent);
  box-shadow: none;
}
.panel.no-line.seo-guide::before {
  content: ""; top: -2rem; left: 0; right: 0; height: 1px;
  background: var(--panel-inset-border); box-shadow: none;
}
.seo-guide h2 {
  margin: 0; color: var(--panel-text); font-family: "Inter", system-ui, sans-serif;
  font-size: 1.3rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.2;
}
.seo-guide > p { max-width: 78ch; color: var(--panel-muted); line-height: 1.65; }
.seo-feature-list, .seo-steps { list-style: none; margin: 1rem 0 0; padding: 0; }
.seo-feature-list li, .seo-steps li {
  display: grid; grid-template-columns: minmax(150px, 0.34fr) 1fr; gap: 1rem;
  padding: 0.82rem 0; border-top: 1px solid var(--panel-inset-border);
}
.seo-feature-list strong, .seo-steps strong { color: var(--panel-text); }
.seo-feature-list span, .seo-steps span { color: var(--panel-muted); line-height: 1.5; }
.seo-faq { margin-top: 1.05rem; padding-top: 0.1rem; }
.seo-guide h3 { margin: 1rem 0 0.25rem; color: var(--panel-text); font-size: 1rem; }
.seo-faq p { margin: 0; max-width: 78ch; color: var(--panel-muted); line-height: 1.55; }
.seo-related {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem;
  margin: 1.2rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--panel-inset-border);
}
.seo-related strong { color: var(--panel-text); }
.seo-related a { color: var(--primary); font-weight: 750; text-decoration: none; }
.seo-related a:hover { color: var(--panel-text); text-decoration: underline; }
.seo-related-standalone { margin-top: 1.5rem; color: var(--panel-muted); }

@media (max-width: 640px) {
  .seo-guide { padding: 1.1rem; }
  .seo-feature-list li, .seo-steps li { grid-template-columns: 1fr; gap: 0.25rem; }
}
.tab-panel > h2,
.tab-panel > h3 { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
#status, #clan-status, #mt-status, #mt-info,
#decks-status, #decks-info, #streamer-note, #geier-note {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}
.panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
  color: var(--panel-text);
}
.panel::before {
  content: "";
  position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: var(--panel-line);
  box-shadow: var(--panel-line-glow);
  pointer-events: none;
}
.panel.no-line::before { content: none; }
.panel small, .panel .muted { color: var(--panel-muted); }
#profile, #deck, #battles {
  position: relative;
  overflow: hidden;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  color: var(--panel-text);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
#deck::before, #battles::before {
  content: "";
  position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: var(--panel-line);
  box-shadow: var(--panel-line-glow);
  pointer-events: none;
}
#search-form, #clan-form { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
input[type="text"] {
  flex: 1;
  min-width: 200px;
  max-width: 320px;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  background: rgba(11, 13, 18, 0.92);
  color: var(--panel-text);
}
input[type="text"]::placeholder { color: var(--panel-dim); }
input[type="text"]:focus {
  outline: none;
  border-color: var(--deck-btn-hover-border);
  box-shadow: 0 0 0 3px rgba(59, 110, 245, 0.15);
}
#search-form, #clan-form { position: relative; align-items: flex-start; flex-wrap: nowrap; max-width: 570px; }
.profile-search-dock {
  position: relative;
  width: min(590px, calc(100% + 1rem));
  margin: -0.5rem 0 0.5rem -0.5rem; padding: 0.5rem;
  border: 2px solid transparent; border-radius: var(--panel-radius);
  background: transparent; box-shadow: none;
}
.profile-search-dock #search-form,
.profile-search-dock #clan-form { margin-bottom: 0; }
.player-search-field { position: relative; flex: 1; min-width: 0; }
#search-form #tag-input, #clan-form #clan-input {
  width: 100%; max-width: none; height: 42px; min-width: 0;
  padding: 0.55rem 2.55rem; border-color: rgba(255, 255, 255, 0.16); border-radius: 8px;
  background: rgba(11, 13, 18, 0.92); color: #f4f6fb;
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.18);
}
#search-form #tag-input::placeholder, #clan-form #clan-input::placeholder { color: rgba(226, 232, 244, 0.42); }
#search-form #tag-input:focus, #clan-form #clan-input:focus {
  border-color: #587cff;
  box-shadow: 0 0 0 2px rgba(73, 110, 245, 0.2), 0 8px 22px rgba(0, 0, 0, 0.24);
}
.search-leading-icon {
  position: absolute; left: 0.85rem; top: 50%; z-index: 1; transform: translateY(-50%);
  color: rgba(225, 231, 243, 0.48); pointer-events: none;
}
.search-clear {
  position: absolute; right: 0.42rem; top: 50%; z-index: 2; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 29px; height: 29px; padding: 0; border-radius: 6px;
  background: transparent; color: rgba(228, 233, 244, 0.54);
}
.search-clear[hidden] { display: none; }
.search-clear:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.player-search-submit { height: 42px; padding-inline: 1.1rem; border-radius: 8px; }
.search-dropdown {
  position: absolute; top: calc(100% + 7px); left: 0; right: 0; z-index: 30;
  overflow: hidden; max-height: 420px; overflow-y: auto;
  border: 1px solid rgba(115, 137, 207, 0.3); border-radius: 8px;
  background: rgba(10, 12, 18, 0.98); color: #f3f6ff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.44), 0 0 18px rgba(57, 89, 190, 0.08);
}
.search-dropdown[hidden] { display: none; }
.search-suggestion-group + .search-suggestion-group { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.search-group-title {
  padding: 0.55rem 0.75rem 0.35rem; color: rgba(205, 214, 234, 0.45);
  font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
}
.search-suggestion {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 0.65rem;
  width: 100%; padding: 0.58rem 0.75rem; border-radius: 0;
  background: transparent; color: inherit; text-align: left;
}
.search-suggestion:hover, .search-suggestion.active { background: rgba(76, 109, 225, 0.15); }
.search-suggestion-marker {
  overflow: hidden; padding: 0.15rem 0.35rem; border: 1px solid rgba(100, 130, 235, 0.3); border-radius: 5px;
  background: rgba(55, 83, 176, 0.18); color: #9eb2ff;
  font-size: 0.62rem; font-weight: 800; text-align: center; text-overflow: ellipsis;
}
.clan-search-marker { display: inline-flex; align-items: center; justify-content: center; height: 31px; padding: 0; }
.clan-search-marker .clan-badge { width: 27px; height: 27px; margin: 0; vertical-align: middle; }
.search-suggestion-copy { display: flex; flex-direction: column; min-width: 0; }
.search-suggestion-copy strong { overflow: hidden; font-size: 0.84rem; text-overflow: ellipsis; white-space: nowrap; }
.search-suggestion-copy > span { overflow: hidden; color: rgba(214, 222, 240, 0.5); font-size: 0.69rem; text-overflow: ellipsis; white-space: nowrap; }
.search-dropdown-message { padding: 0.85rem; color: rgba(218, 225, 240, 0.58); font-size: 0.78rem; text-align: center; }
button {
  padding: 0.6rem 1.1rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
button:hover { background: var(--primary-d); }
#status, #clan-status, #mt-status, #decks-status, #streamer-note, #geier-note {
  font-size: 0.9rem;
}
#profile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f8f4e9;
  border: 1px solid transparent;
  background:
    linear-gradient(112deg, rgba(105, 66, 10, 0.32), rgba(21, 23, 29, 0.12) 38%, rgba(21, 23, 29, 0.3) 70%, rgba(91, 55, 7, 0.3)) padding-box,
    linear-gradient(#12151c, #12151c) padding-box,
    conic-gradient(
      from var(--profile-gold-angle),
      #7c4b0c 0deg,
      #ce8f24 62deg,
      #fff2ba 86deg,
      #c47e19 108deg,
      #704208 180deg,
      #b97516 244deg,
      #ffe8a0 270deg,
      #96600f 294deg,
      #7c4b0c 360deg
    ) border-box;
  box-shadow:
    0 0 0 1px rgba(247, 190, 73, 0.13),
    0 0 9px rgba(247, 190, 73, 0.14),
    0 14px 34px rgba(0, 0, 0, 0.24),
    inset 0 0 26px rgba(238, 175, 52, 0.045);
}
#profile > * { position: relative; z-index: 1; }
#profile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(239, 179, 61, 0.75), #fff5cf, rgba(239, 179, 61, 0.65), transparent) 12% 0 / 44% 2px no-repeat,
    linear-gradient(90deg, transparent, rgba(224, 153, 30, 0.55), #ffe8a1, transparent) 86% 100% / 32% 1px no-repeat,
    linear-gradient(112deg, transparent 56%, rgba(255, 214, 112, 0.055) 62%, transparent 68%);
}
#profile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.42;
  background:
    radial-gradient(circle at 7% 24%, #ffe7a0 0 1px, transparent 1.5px),
    radial-gradient(circle at 16% 72%, #d99a31 0 1px, transparent 1.5px),
    radial-gradient(circle at 31% 18%, #ffd46c 0 1px, transparent 1.5px),
    radial-gradient(circle at 48% 79%, #f4ba4e 0 1px, transparent 1.5px),
    radial-gradient(circle at 63% 27%, #ffe9a9 0 1px, transparent 1.5px),
    radial-gradient(circle at 74% 68%, #d9972a 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 20%, #ffd66f 0 1px, transparent 1.5px),
    radial-gradient(circle at 94% 82%, #f2b744 0 1px, transparent 1.5px);
}
#profile .pname .tag,
#profile .ptag,
#profile .pline.muted,
#profile .profile-clan .tag { color: rgba(229, 220, 198, 0.62); }
#profile .profile-clan { border-top-color: rgba(244, 190, 76, 0.18); }
#profile .profile-clan a { color: #f8f4e9; }
#profile .league-name { color: #f3ca70; }

@media (prefers-reduced-motion: no-preference) {
  #profile {
    animation:
      profile-border-orbit 9s linear infinite,
      profile-border-glow 4.8s ease-in-out infinite;
  }
  #profile::before { animation: profile-light-sweep 7s ease-in-out infinite alternate; }
  #profile::after { animation: profile-particle-drift 10s ease-in-out infinite alternate; }
}

@keyframes profile-border-orbit {
  to { --profile-gold-angle: 360deg; }
}

@keyframes profile-border-glow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(247, 190, 73, 0.13),
      0 0 9px rgba(247, 190, 73, 0.14),
      0 14px 34px rgba(0, 0, 0, 0.24),
      inset 0 0 26px rgba(238, 175, 52, 0.045);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 211, 117, 0.22),
      0 0 15px rgba(247, 190, 73, 0.24),
      0 14px 36px rgba(0, 0, 0, 0.28),
      inset 0 0 32px rgba(238, 175, 52, 0.075);
  }
}

@keyframes profile-light-sweep {
  0% { background-position: -28% 0, 128% 100%, 0 0; opacity: 0.65; }
  45% { opacity: 1; }
  100% { background-position: 118% 0, -24% 100%, 0 0; opacity: 0.78; }
}

@keyframes profile-particle-drift {
  0% { transform: translate3d(-3px, 2px, 0); opacity: 0.28; }
  38% { transform: translate3d(4px, -4px, 0); opacity: 0.48; }
  72% { transform: translate3d(-1px, 5px, 0); opacity: 0.36; }
  100% { transform: translate3d(6px, -2px, 0); opacity: 0.55; }
}

.profile-top {
  display: grid; grid-template-columns: minmax(220px, 1fr) minmax(255px, 310px) minmax(220px, 1fr);
  align-items: start; gap: 1rem;
}
.profile-main { display: flex; flex-direction: column; gap: 0.25rem; }
.pname { margin: 0 0 0.35rem; font-size: 1.5rem; letter-spacing: -0.02em; }
.pname .tag { color: var(--muted); font-size: 0.9rem; font-weight: 500; margin-left: 0.45rem; }
.ptag { margin: -0.15rem 0 0.15rem; color: var(--muted); font-size: 0.86rem; font-weight: 500; }
.favorite-star {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: -0.22em;
  width: 1.5em; height: 1.5em; line-height: 0; margin-left: 0.5rem; padding: 0; border: 0; background: transparent;
  cursor: pointer; color: var(--gold);
}
.favorite-star svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(255, 200, 77, .35)); transition: filter .15s ease, transform .15s ease; }
.favorite-star:hover { background: transparent; }
.favorite-star:hover svg { filter: drop-shadow(0 0 9px rgba(255, 210, 100, .95)) drop-shadow(0 0 18px rgba(255, 190, 60, .45)); transform: scale(1.18); }
.favorite-star.active svg { fill: currentColor; filter: drop-shadow(0 0 7px rgba(255, 200, 77, .8)); }
.favorite-star.active:hover svg { filter: drop-shadow(0 0 11px rgba(255, 214, 110, 1)) drop-shadow(0 0 22px rgba(255, 190, 60, .55)); }
@media (prefers-reduced-motion: reduce) { .favorite-star:hover svg { transform: none; } }
.favorite-star.active { animation: favorite-star-pop .38s cubic-bezier(.2, .8, .3, 1); }
.favorite-star:focus-visible { outline: 2px solid rgba(255, 222, 118, 0.9); outline-offset: 2px; border-radius: 3px; }
@keyframes favorite-star-pop { 0% { transform: scale(1); } 45% { transform: scale(1.4); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .favorite-star.active { animation: none; } }
.favorites-list {
  position: relative; overflow: hidden; max-width: 460px;
  border: 1px solid var(--panel-border); border-radius: var(--panel-radius);
  background: var(--panel-bg); box-shadow: var(--panel-shadow); color: var(--panel-text);
  padding: 0.3rem 0.9rem;
}
.favorites-list::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: var(--panel-line); box-shadow: var(--panel-line-glow); pointer-events: none;
}
.favorite-row {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0;
  border-bottom: 1px solid var(--panel-inset-border);
}
.favorite-row:last-child { border-bottom: 0; }
.favorite-row .favorite-star { margin-left: 0; }
.favorite-id { display: flex; align-items: baseline; gap: 0.35rem; flex: 1; min-width: 0; }
.favorite-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 0; background: transparent; color: var(--panel-text); font-weight: 700; font-size: 0.92rem;
  text-align: left; cursor: pointer;
  padding: 0 2px; margin: 0 -2px;
}
button.favorite-name:hover {
  background: transparent; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, .45);
}
span.favorite-name { cursor: default; }
.favorite-name:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
.favorite-tag {
  color: var(--panel-muted); font-weight: 500; font-size: 0.78rem; white-space: nowrap;
  cursor: text; user-select: text;
}
.favorite-score { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 800; font-size: 0.82rem; white-space: nowrap; color: var(--panel-text); }
.favorite-score img { width: 17px; height: 17px; object-fit: contain; }
.favorite-row-error .favorite-error { color: var(--panel-muted); font-size: 0.8rem; font-style: italic; }
.pline { display: flex; align-items: center; gap: 0.45rem; font-size: 1.1rem; font-weight: 700; }
.pline-stats { flex-wrap: wrap; column-gap: 1.15rem; row-gap: 0.15rem; margin-top: 0.28rem; }
.pstat { display: inline-flex; align-items: center; gap: 0.45rem; }
.pline.muted { color: var(--muted); font-weight: 500; font-size: 0.9rem; }
.line-icon { width: 24px; height: 24px; object-fit: contain; }

.profile-league { display: flex; flex-direction: column; align-items: center; justify-self: end; gap: 0.3rem; flex: none; text-align: center; }
.league-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 124px; height: 124px; }
.profile-league img { width: 124px; height: 124px; object-fit: contain; }
.league-art { transform: scale(var(--league-scale, 1)); }
.league-art-4 { --league-scale: 1.12; }
.league-art-5 { --league-scale: 1.23; }
.league-art-6 { --league-scale: 1.18; }
.league-art-7 { --league-scale: 0.82; }
.league-art-8, .league-art-9 { --league-scale: 1.1; }
.league-art-10 { --league-scale: 1.03; }
.league-rank {
  position: absolute; inset-inline: 0; bottom: 7%;
  width: max-content; margin-inline: auto;
  color: #fff; font-weight: 800; font-size: 1.2rem; letter-spacing: 0.02em;
  text-shadow:
    -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000,
    -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000,
    0 2px 3px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.league-name { font-weight: 700; font-size: 0.9rem; }

.profile-battle-form { align-self: center; justify-self: center; width: 100%; max-width: 310px; min-width: 0; }
.profile-form-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.profile-form-head > span {
  color: rgba(231, 223, 192, 0.52); font-size: 0.61rem; font-weight: 800;
  text-transform: uppercase;
}
.profile-form-head strong { display: inline-flex; gap: 0.38rem; font-size: 0.65rem; }
.profile-form-head b { font-weight: 850; }
.profile-form-head .win { color: #58dda0; }
.profile-form-head .loss { color: #f26b78; }
.profile-form-head .draw { color: #a8afbd; }
.profile-form-chart-row { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.28rem; }
.profile-form-chart-row .profile-form-chart { flex: 1; min-width: 0; margin-top: 0; }
.profile-form-toggle {
  position: relative; flex: 0 0 auto; display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.profile-form-toggle img {
  width: 100%; height: 100%; object-fit: contain; opacity: 0.88;
  filter: grayscale(1); transition: opacity .15s ease, filter .15s ease;
}
.profile-form-toggle.active img { opacity: 1; filter: grayscale(0) drop-shadow(0 0 5px rgba(255, 200, 77, .6)); }
.profile-form-toggle:hover img { opacity: 1; }
.profile-form-toggle:focus-visible { outline: 2px solid rgba(255, 222, 118, 0.9); outline-offset: 2px; border-radius: 4px; }
.profile-form-chart {
  position: relative; display: flex; align-items: stretch; justify-content: center; gap: 2px;
  width: 100%; height: 48px;
}
.profile-form-chart::before {
  content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231, 219, 176, 0.22) 12%, rgba(231, 219, 176, 0.22) 88%, transparent);
}
.profile-form-match {
  appearance: none; position: relative; flex: 1; max-width: 8px; height: 48px;
  padding: 0; border: 0; background: transparent; cursor: pointer;
}
.profile-form-match i {
  position: absolute; left: 0; right: 0; opacity: 0;
  animation: profile-form-build 0.38s calc(0.16s + var(--form-index) * 18ms) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.profile-form-match.win i {
  bottom: 50%; height: 19px; transform-origin: bottom;
  border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #6cf0b3, #269a6a);
  box-shadow: 0 -3px 7px rgba(67, 220, 153, 0.25);
}
.profile-form-match.loss i {
  top: 50%; height: 17px; transform-origin: top;
  border-radius: 0 0 2px 2px; background: linear-gradient(180deg, #e45465, #ff7a84);
  box-shadow: 0 3px 7px rgba(237, 79, 98, 0.22);
}
.profile-form-match.draw i {
  top: calc(50% - 2px); height: 4px; border-radius: 2px;
  background: #9ca4b4; transform-origin: center;
}
.profile-form-match:hover { background: transparent; filter: brightness(1.25); transform: scaleX(1.18); }
.profile-form-match:focus-visible { outline: 2px solid rgba(255, 222, 118, 0.9); outline-offset: 2px; }
.profile-form-foot {
  display: flex; align-items: center; justify-content: space-between; margin-top: 0.22rem;
  color: rgba(230, 222, 191, 0.4); font-size: 0.55rem;
}
.profile-form-foot b { color: rgba(245, 238, 214, 0.75); font-size: 0.61rem; }
@keyframes profile-form-build {
  from { opacity: 0; transform: scaleY(0.12); }
  to { opacity: 1; transform: scaleY(1); }
}

.profile-clan {
  margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 0.55rem; font-size: 1.2rem; font-weight: 700;
}
.profile-clan a { color: var(--text); }
.profile-clan .clan-badge { width: 32px; height: 32px; vertical-align: middle; margin-right: 0; }

.clan-badge { width: 20px; height: 20px; object-fit: contain; vertical-align: -5px; margin-right: 3px; }
#clan-title .clan-badge { width: 34px; height: 34px; vertical-align: -8px; margin-right: 8px; }
.profile-clan .tag { color: var(--muted); font-size: 0.85rem; font-weight: 500; }
.subtabs { position: relative; display: flex; gap: 0.25rem; margin: 1.25rem 0 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.subtabs :is(a, button) {
  padding: 0.5rem 0.9rem 0.65rem; border: none; background: none; cursor: pointer;
  font-size: 0.95rem; font-weight: 600; color: rgba(255, 255, 255, 0.6);
  transition: color 0.15s; text-decoration: none; font-family: inherit;
}
.subtabs :is(a, button):hover { color: #fff; }
.subtabs :is(a, button).active { color: #fff; }
.deck-tools-tabs {
  position: sticky; top: 58px; z-index: 9;
  width: calc(100% + 1rem); margin: 0 -0.5rem 1.25rem; padding-inline: 0.5rem;
  overflow-x: auto;
  --dock: 0;
  background: transparent; box-shadow: none;
  background: color-mix(in srgb, var(--feedback-bg) calc(var(--dock) * 100%), transparent);
  box-shadow:
    0 0 0 100vmax color-mix(in srgb, var(--feedback-bg) calc(var(--dock) * 100%), transparent),
    0 1px 0 100vmax color-mix(in srgb, var(--panel-inset-border) calc(var(--dock) * 100%), transparent);
  transition: none;
  clip-path: inset(0 -100vmax -1px);
}
.deck-tools-tabs[hidden] { display: none; }
.sticky-nav-marker { display: block; width: 1px; height: 0; }
@media (max-width: 1100px) {
  .deck-tools-tabs { top: 52px; }
}

.request-loading {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--panel-muted);
  font-size: 0.82rem;
  font-weight: 700;
}
.request-loading .lb-loading-ring { width: 22px; height: 22px; }
body.embed-mode .deck-tools-tabs { top: 0; }
.deck-tools-tabs :is(a, button) {
  display: inline-flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  min-height: 44px;
  white-space: nowrap;
}
.deck-tools-lock { width: 17px; height: 17px; object-fit: contain; opacity: 0.72; }
.deck-tools-tabs :is(a, button).active .deck-tools-lock { opacity: 1; }

@media (max-width: 560px) {
  .deck-tools-tabs { gap: 0.08rem; }
  .deck-tools-tabs :is(a, button) {
    flex: 0 0 auto;
    padding-inline: 0.32rem;
    font-size: 0.76rem;
  }
  .deck-tools-lock { width: 14px; height: 14px; }
}

.deck-improver-locked {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 190px;
  padding: 1.25rem;
}
.deck-improver-locked > img { width: 72px; height: 72px; object-fit: contain; flex: none; }
.deck-improver-locked :is(h1, h2) { margin: 0.15rem 0 0.4rem; }
.deck-improver-locked p { max-width: 56ch; margin: 0 0 0.75rem; color: var(--panel-muted); }
@media (max-width: 1100px) {
  .deck-improver-locked :is(h1, h2) {
    margin: 0.1rem 0 0.45rem;
    font-size: clamp(1.35rem, 5vw, 2rem); line-height: 1.15;
  }
  .deck-improver-locked p { line-height: 1.5; }
}
.deck-improver-locked strong { color: var(--panel-text); font-size: 0.82rem; }
@media (max-width: 560px) {
  .deck-improver-locked { min-height: 0; align-items: flex-start; gap: 0.85rem; padding: 1rem; }
  .deck-improver-locked > img { width: 44px; height: 44px; margin-top: 0.15rem; }
  .deck-improver-locked p { margin-bottom: 0.6rem; font-size: 0.92rem; }
}
#sub-decks {
  width: 100%;
}
.player-decks-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 0.8rem;
}
.player-decks-summary { color: rgba(239, 243, 252, 0.7); font-size: 0.82rem; font-weight: 650; }
.deck-sort-control {
  display: inline-flex; align-items: center; padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px;
  background: rgba(8, 10, 15, 0.76);
}
.deck-sort-control button {
  min-height: 30px; padding: 0.25rem 0.65rem; border-radius: 5px;
  background: transparent; color: rgba(231, 236, 248, 0.58);
  font-size: 0.78rem; font-weight: 700; white-space: nowrap;
}
.deck-sort-control button:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.deck-sort-control button.active { background: #315bd4; color: #fff; box-shadow: 0 1px 5px rgba(32, 66, 164, 0.42); }
.deck-sort-control[role="group"], .meta-tiers { position: relative; }
.deck-sort-control[role="group"] > button, .meta-tiers > button {
  position: relative; z-index: 1;
}
.deck-sort-control[role="group"] > button.active, .meta-tiers > button.active {
  background: transparent; box-shadow: none;
}
.seg-indicator {
  position: absolute; top: 0; left: 0; z-index: 0;
  width: 0; height: 0; border-radius: 5px;
  background: #315bd4; box-shadow: 0 1px 5px rgba(32, 66, 164, 0.42);
  opacity: 0; pointer-events: none;
  transition:
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.18s ease;
}
.meta-tiers .seg-indicator {
  border-radius: 7px;
  background: linear-gradient(145deg, #3a63d8, #5b4bc4);
  box-shadow: 0 1px 6px rgba(32, 66, 164, 0.46);
}
@media (prefers-reduced-motion: reduce) {
  .seg-indicator { transition: opacity 0.18s ease; }
}
@keyframes geierCountdownFloat { to { transform: translateY(-7px) scale(1.025); } }
@keyframes geierBidDrop { from { opacity: 0; transform: translateY(-8px) scale(.96); } }
@keyframes geierRevealValue { to { opacity: 1; transform: none; } }
@keyframes geierWinnerIn { to { opacity: 1; transform: none; } }
@keyframes geierContestedCard { 50% { box-shadow: 0 0 0 2px rgba(240,151,82,.38), 0 0 28px rgba(230,99,81,.3); transform: translateY(-3px) scale(1.012); } }
@keyframes geierElixirImpuls {
  0% { transform: translateX(0); }
  18% { transform: translateX(-1.5px); }
  40% { transform: translateX(1.5px); }
  65% { transform: translateX(-.5px); }
  100% { transform: translateX(0); }
}
@keyframes geierElixirSchimmer { 0% { transform: translateX(-100%); opacity: .9; } 100% { transform: translateX(100%); opacity: 0; } }
@keyframes geierElixirTreffer {
  0% { transform: translateX(0); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 0 0 rgba(255, 50, 50, 0); }
  15% { transform: translateX(-4px); box-shadow: inset 0 0 0 1px rgba(255, 120, 120, .8), 0 0 22px 4px rgba(255, 50, 50, .75); }
  35% { transform: translateX(4px); }
  55% { transform: translateX(-2px); }
  100% { transform: translateX(0); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 0 0 rgba(255, 50, 50, 0); }
}
@keyframes geierDeckPop {
  0%   { opacity: 0; transform: scale(.5) translateY(7px); }
  58%  { opacity: 1; transform: scale(1.13) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes geierDeckPopOut { to { opacity: 0; transform: scale(.5) translateY(6px); } }
@keyframes geierSelectedBreath { to { opacity: .62; transform: translateY(5px) scale(.94); } }
@keyframes geierDuelOpen { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
@keyframes geierAvatarRise { to { transform: translateY(0); } }
@keyframes geierBarRise { to { transform: scaleY(1); } }
@keyframes geierTieAccel {
  0%   { filter: brightness(1);    box-shadow: 0 0 0 2px rgba(255,183,76,.28); }
  16%  { filter: brightness(1.7);  box-shadow: 0 0 0 3px rgba(255,183,76,.5), 0 0 14px rgba(255,139,59,.6); }
  32%  { filter: brightness(1);    box-shadow: 0 0 0 2px rgba(255,183,76,.28); }
  48%  { filter: brightness(1.75); box-shadow: 0 0 0 3px rgba(255,188,86,.55), 0 0 16px rgba(255,145,62,.66); }
  62%  { filter: brightness(1);    box-shadow: 0 0 0 2px rgba(255,183,76,.28); }
  74%  { filter: brightness(1.82); box-shadow: 0 0 0 3px rgba(255,196,100,.62), 0 0 18px rgba(255,152,66,.72); }
  84%  { filter: brightness(1);    box-shadow: 0 0 0 2px rgba(255,183,76,.28); }
  92%  { filter: brightness(1.92); box-shadow: 0 0 0 3px rgba(255,206,116,.72), 0 0 22px rgba(255,162,72,.82); }
  100% { filter: brightness(1);    box-shadow: 0 0 0 2px rgba(255,183,76,.3); }
}
@keyframes geierWinnerBar { to { background: linear-gradient(180deg,#62efaa,#168b5c); box-shadow: 0 0 16px rgba(54,228,144,.6); } }
@keyframes geierLoserBar { to { background: linear-gradient(180deg,#ee7180,#923347); box-shadow: 0 0 10px rgba(224,64,84,.38); opacity: .7; } }
@keyframes geierWinnerAvatar { to { box-shadow: 0 0 0 3px #42e99a, 0 0 19px rgba(48,229,146,.72); filter: brightness(1.12); } }
@keyframes geierLoserAvatar { to { box-shadow: 0 0 0 3px #e75366, 0 0 14px rgba(221,62,82,.48); filter: grayscale(.22) brightness(.78); } }
@keyframes geierResultsIn { to { opacity: 1; transform: none; } }
@keyframes geierNumFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes geierColorFlash { 0% { opacity: 0; } 16% { opacity: 1; } 36% { opacity: .25; } 56% { opacity: 1; } 76% { opacity: .3; } 100% { opacity: 1; } }
@keyframes geierGlowGreen {
  0%, 100% { filter: drop-shadow(0 0 1px #eafff5) drop-shadow(0 0 4px #4ff0a6) drop-shadow(0 0 8px rgba(52,220,140,.7)) drop-shadow(0 9px 8px rgba(0,0,0,.6)); }
  50%      { filter: drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 6px #82ffca) drop-shadow(0 0 13px rgba(74,235,162,.95)) drop-shadow(0 9px 8px rgba(0,0,0,.6)); }
}
@keyframes imposterShake {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  15% { transform: translate(-3px, 1px) rotate(-3deg); }
  30% { transform: translate(3px, -1px) rotate(3deg); }
  45% { transform: translate(-4px, 0) rotate(-4deg) scale(1.03); }
  60% { transform: translate(4px, 1px) rotate(4deg) scale(1.03); }
  75% { transform: translate(-2px, -1px) rotate(-2deg); }
  90% { transform: translate(2px, 0) rotate(2deg); }
}
@keyframes imposterRevealPop { 0% { transform: scale(.72) rotate(-6deg); } 60% { transform: scale(1.12) rotate(2deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes imposterGlow {
  0%,100% { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px #ff5fae) drop-shadow(0 0 16px rgba(255,70,150,.7)) drop-shadow(0 9px 8px rgba(0,0,0,.6)); }
  50%     { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 13px #ff86c4) drop-shadow(0 0 26px rgba(255,90,170,.95)) drop-shadow(0 9px 8px rgba(0,0,0,.6)); }
}
@keyframes imposterBannerPulse { 0%,100% { opacity: .82; transform: scale(1); } 50% { opacity: 1; transform: scale(1.045); } }
@keyframes imposterWarnIn { from { opacity: 0; transform: translateY(4px); } }
@keyframes geierDuelSequence {
  0%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(7px) scale(.985); }
}
@keyframes geierLoserBar { to { background: linear-gradient(180deg,#ff6b7e,#da2948); box-shadow: 0 0 18px rgba(255,60,91,.66); opacity: .96; } }
@keyframes geierLoserAvatar { to { box-shadow: 0 0 0 3px #ff526c, 0 0 20px rgba(255,55,88,.72); filter: brightness(.96) saturate(1.18); } }
@keyframes geierDraftOrb {
  0%, 100% { opacity: .7; }
  50%      { opacity: 1; }
}
@keyframes geierDraftPicked {
  0%   { opacity: 1; transform: scale(1);    filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
  22%  { opacity: 1; transform: scale(1.34); filter: drop-shadow(0 0 3px #bfe6ff) drop-shadow(0 0 8px rgba(92,180,255,.9)); }
  46%  { opacity: 0; transform: scale(.46);  filter: drop-shadow(0 0 6px rgba(92,180,255,.7)); }
  47%  { opacity: 0; transform: scale(.82);  filter: grayscale(1) brightness(.42); }
  100% { opacity: 1; transform: scale(1);    filter: grayscale(1) brightness(.42); }
}
@keyframes geierDraftTimeoutVeil {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  74%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes geierDraftTimeoutText {
  0%   { opacity: 0; transform: scale(.82); }
  22%  { opacity: 1; transform: scale(1.06); }
  32%  { opacity: 1; transform: scale(1); }
  74%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.94); }
}
@keyframes geierDraftTypeIn {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes geierDraftSeatIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: none; }
}
@keyframes geierHcCrossPop {
  0%   { transform: scale(0) rotate(-22deg); opacity: 0; }
  70%  { transform: scale(1.16) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes geierHcLockIn {
  0%   { transform: scale(.35); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes geierHcCheckPop {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.14); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes geierHcAward {
  0%   { filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); transform: scale(1); }
  40%  { filter: drop-shadow(0 0 4px #eaffef) drop-shadow(0 0 15px #46e08a) brightness(1.16) drop-shadow(0 3px 5px rgba(0,0,0,.5)); transform: scale(1.08); }
  100% { filter: drop-shadow(0 0 2px #eaffef) drop-shadow(0 0 7px #46e08a) drop-shadow(0 3px 5px rgba(0,0,0,.5)); transform: scale(1); }
}
@keyframes geierHcOrigin {
  0%   { transform: scale(1);    filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
  22%  { transform: scale(1.12); filter: drop-shadow(0 0 3px #ffe6a8) drop-shadow(0 0 13px rgba(255,184,72,.95)); }
  72%  { transform: scale(1.08); filter: drop-shadow(0 0 3px #ffe6a8) drop-shadow(0 0 10px rgba(255,184,72,.8)); }
  100% { transform: scale(1);    filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
}
@keyframes geierHcOriginLocked {
  0%   { transform: scale(1);    filter: grayscale(.65) brightness(.5) drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
  22%  { transform: scale(1.12); filter: grayscale(0) brightness(1.06) drop-shadow(0 0 3px #ffe6a8) drop-shadow(0 0 13px rgba(255,184,72,.95)); }
  72%  { transform: scale(1.08); filter: grayscale(0) brightness(1.02) drop-shadow(0 0 3px #ffe6a8) drop-shadow(0 0 10px rgba(255,184,72,.8)); }
  100% { transform: scale(1);    filter: grayscale(.65) brightness(.5) drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
}
@keyframes geierHcVeilIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes geierHcTick {
  0%   { transform: scale(1.55); opacity: .2; }
  20%  { transform: scale(1);    opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes geierHcDuel {
  0%, 100% { filter: drop-shadow(0 0 3px #ffd06a) drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
  50%      { filter: drop-shadow(0 0 9px #ffb02e) brightness(1.15) drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
}
@keyframes geierLottoLift {
  to { transform: scale(1.09); }
}
@keyframes geierLottoLock {
  0% { transform: scale(1.3); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes geierLottoWin {
  0% { transform: scale(1.18); opacity: .3; box-shadow: 0 0 34px 8px rgba(255, 210, 110, 1); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes geierHcDuelVeilIn { from { opacity: 0; } }
@keyframes geierHcDuelVeilOut { to { opacity: 0; } }
@keyframes geierHcBannerIn { from { opacity: 0; transform: translateY(-6px); } }
@keyframes geierTurnGlow {
  0%, 100% { opacity: .48; }
  50% { opacity: 1; }
}

@keyframes geierGlowBlue {
  0%, 100% { filter: drop-shadow(0 0 1px #eaf6ff) drop-shadow(0 0 4px #5cc2ff) drop-shadow(0 0 8px rgba(66,150,255,.7)) drop-shadow(0 12px 10px rgba(0,0,0,.6)); }
  50%      { filter: drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 6px #93d8ff) drop-shadow(0 0 13px rgba(92,180,255,.95)) drop-shadow(0 12px 10px rgba(0,0,0,.6)); }
}

.player-deck-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.player-deck-box {
  position: relative; overflow: hidden; min-width: 0;
  padding: 0.8rem 0.85rem 0.75rem; border: 1px solid var(--panel-border); border-radius: 8px;
  color: #f3f6ff;
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
}
.player-deck-box::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: var(--panel-line);
  box-shadow: 0 0 8px rgba(89, 122, 255, 0.5); pointer-events: none;
}
.player-deck-head { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; min-height: 30px; }
.player-deck-mode { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; font-size: 0.82rem; font-weight: 800; }
.player-deck-mode img { width: 32px; height: 32px; margin: -3px -2px; flex: none; object-fit: contain; }
.player-deck-box .deck-actions { flex: none; }
.player-deck-box .elixir { padding-inline: 0.38rem; }
.player-deck-cards {
  display: grid; grid-template-columns: repeat(4, 64px); justify-content: center;
  gap: 3px; margin: 0.7rem 0 0.6rem;
}
.player-deck-cards .card,
.player-deck-cards .card-img,
.player-deck-cards .card-img img { width: 64px; }
.player-deck-loadout { display: flex; align-items: center; justify-content: center; }
.player-deck-tower {
  display: flex; align-items: center; flex: none;
  margin-left: 13px; padding-left: 13px;
  border-left: 1px solid var(--panel-inset-border);
}
.player-deck-tower .card,
.player-deck-tower .card-img,
.player-deck-tower .card-img img { width: 64px; }
.card-usage {
  position: absolute; right: 1px; bottom: 2px; z-index: 1;
  min-width: 23px; padding: 1px 4px; border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 5px;
  background: rgba(7, 9, 15, 0.86); color: #fff;
  font-size: 0.62rem; font-weight: 800; line-height: 1.35; text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.deck-record-labels {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 0.7rem; margin-bottom: 0.38rem;
  color: rgba(230, 235, 247, 0.64); font-size: 0.69rem; font-weight: 650;
}
.deck-record-labels span { display: inline-flex; align-items: center; gap: 0.28rem; }
.deck-record-labels .record-wins { grid-column: 1; justify-self: start; }
.deck-record-labels .record-draws { grid-column: 2; justify-self: center; }
.deck-record-labels .record-losses { grid-column: 3; justify-self: end; }
.deck-record-labels i { width: 6px; height: 6px; border-radius: 50%; background: #7c8495; box-shadow: 0 0 6px currentColor; }
.deck-record-labels b { color: #fff; font-size: 0.77rem; }
.record-wins { color: #62e2a0; }
.record-wins i { background: #53d794; }
.record-losses { color: #ff7a86; }
.record-losses i { background: #f26773; }
.record-draws { color: #aab2c3; }
.deck-record-labels .record-draws b { color: #aab2c3; }
.lb-legend-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; flex: none;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px;
  background: rgba(8, 10, 15, 0.76);
}
.lb-legend-btn:hover { background: rgba(255, 255, 255, 0.06); }
.lb-legend-btn img { width: 20px; height: 20px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); }
.modal-box:has(.lb-legend-pop) { width: 360px; max-width: 360px; padding: 1.8rem; }

.lb-legend-pop { display: flex; flex-direction: column; text-align: left; }
.lb-legend-group { display: flex; gap: 0.7rem; }
.lb-legend-group-label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  display: flex; align-items: center; justify-content: center;
  width: 20px; flex: none;
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(230, 235, 247, 0.36);
}
.lb-legend-group-label-spacer { width: 20px; flex: none; }
.lb-legend-outer-row { display: flex; gap: 0.7rem; }
.lb-legend-group-rows { display: flex; flex-direction: column; gap: 0.6rem; flex: 1; min-width: 0; }
.lb-legend-pop-row { display: flex; align-items: center; gap: 0.7rem; flex: 1; min-width: 0; }
.lb-legend-pop-row svg { width: 52px; height: 12px; flex: none; }
.lb-legend-pop-row svg line { stroke-width: 3; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.22)); }
.lb-legend-pop-row.dim svg line { stroke-width: 2.6; filter: drop-shadow(0 0 3px rgba(148, 163, 184, 0.55)); }
.lb-legend-pop-row span { font-size: 0.85rem; color: var(--panel-text); font-weight: 600; }
.lb-legend-star { font-style: normal; color: #f5b93b; margin-left: 1px; }
.lb-legend-pop-note { margin: 0.9rem 0 0; font-size: 0.7rem; color: rgba(230, 235, 247, 0.42); }
.lb-legend-divider { height: 1px; margin: 0.85rem 0; background: rgba(255, 255, 255, 0.1); }
.deck-record-bar {
  position: relative; display: flex; overflow: hidden; width: 100%; height: 11px;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 5px;
  background: rgba(5, 7, 13, 0.62); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.34);
}
.deck-record-bar span { position: relative; height: 100%; min-width: 0; transition: width 0.35s ease; }
.deck-record-bar span::after {
  content: ""; position: absolute; inset: 0 0 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent);
}
.record-win-bar {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--win) 88%, white),
    color-mix(in srgb, var(--win) 68%, white));
  box-shadow: 0 0 10px color-mix(in srgb, var(--win) 28%, transparent);
}
.record-draw-bar { background: linear-gradient(90deg, #676f81, #8e97a9); }
.record-loss-bar {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--loss) 74%, white),
    color-mix(in srgb, var(--loss) 92%, white));
  box-shadow: 0 0 10px color-mix(in srgb, var(--loss) 24%, transparent);
}
.player-deck-metrics { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.45rem; color: rgba(225, 231, 245, 0.58); font-size: 0.7rem; }
.player-deck-metrics b { color: #f5f7ff; font-size: 0.78rem; }
.player-decks-empty {
  grid-column: 1 / -1; padding: 2rem; border: 1px dashed rgba(255, 255, 255, 0.2); border-radius: 8px;
  color: rgba(235, 239, 248, 0.64); text-align: center;
}
.career-dashboard { display: grid; gap: 0.8rem; color: #f4f7ff; }
.stats-eyebrow {
  display: block; color: rgba(209, 220, 247, 0.5); font-size: 0.62rem;
  font-weight: 800; text-transform: uppercase; letter-spacing: 0;
}
.career-record {
  display: grid; grid-template-columns: minmax(0, 1fr) 126px; align-items: center; gap: 1rem;
  padding: 1rem 1.15rem; border: 1px solid rgba(92, 125, 225, 0.4); border-radius: 8px;
  background:
    linear-gradient(115deg, rgba(24, 47, 98, 0.96), rgba(13, 18, 31, 0.98) 58%, rgba(55, 24, 53, 0.94));
  box-shadow: 0 10px 28px rgba(2, 5, 14, 0.25), inset 0 0 26px rgba(78, 113, 225, 0.07);
}
.career-record-copy h3 { margin: 0.18rem 0 0; color: #fff; font-size: 2rem; letter-spacing: 0; }
.career-record-copy h3 span { color: #63e1a0; font-size: 0.92rem; }
.career-record-copy p { margin: 0.18rem 0 0; color: rgba(222, 229, 246, 0.58); font-size: 0.78rem; }
.career-winrate {
  position: relative; display: grid; place-items: center; width: 112px; height: 112px; justify-self: end;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 57%, rgba(255, 255, 255, 0.14) 58%, transparent 62%),
    conic-gradient(from -90deg, #55e2a0 0 var(--win-rate), #ef6070 var(--win-rate) 360deg);
  box-shadow: 0 0 18px rgba(76, 213, 143, 0.2), 0 0 26px rgba(226, 77, 96, 0.12), inset 0 0 8px rgba(255, 255, 255, 0.13);
}
.career-winrate::before {
  content: ""; position: absolute; width: 82px; height: 82px; border-radius: 50%;
  background: radial-gradient(circle at 42% 34%, #1b2841, #0d1321 70%);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.career-winrate::after {
  content: ""; position: absolute; inset: -5px; border: 1px solid rgba(111, 226, 176, 0.2); border-radius: 50%;
  box-shadow: 0 0 14px rgba(82, 218, 151, 0.2), inset 0 0 10px rgba(235, 91, 108, 0.08);
  pointer-events: none;
}
.career-winrate div { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.career-winrate strong { color: #fff; font-size: 1.25rem; line-height: 1.1; }
.career-winrate span { color: rgba(219, 227, 246, 0.53); font-size: 0.61rem; font-weight: 700; }
.career-record-bar {
  position: relative; display: flex; grid-column: 1 / -1; height: 9px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 5px;
  background: rgba(4, 7, 14, 0.58); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45), 0 0 10px rgba(72, 127, 255, 0.08);
}
.career-record-bar::after {
  content: ""; position: absolute; inset: 0 0 52%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent);
}
.career-record-bar > span { height: 100%; }
.career-wins { background: linear-gradient(90deg, #347eff, #54dfa0); box-shadow: 0 0 12px rgba(68, 206, 151, 0.3); }
.career-losses { background: linear-gradient(90deg, #f06b79, #b92f43); box-shadow: 0 0 12px rgba(231, 75, 94, 0.24); }
.stats-animating .career-winrate::after { animation: career-ring-glow 1.25s ease-out; }
.stats-animating .career-record-bar { animation: career-bar-glow 1.25s ease-out; }
@keyframes career-ring-glow {
  0% { opacity: 0.25; transform: scale(0.94); }
  55% { opacity: 1; box-shadow: 0 0 24px rgba(82, 218, 151, 0.38), 0 0 18px rgba(235, 91, 108, 0.2); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes career-bar-glow {
  0% { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45), 0 0 0 rgba(72, 127, 255, 0); }
  60% { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35), 0 0 15px rgba(79, 160, 255, 0.28); }
  100% { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45), 0 0 10px rgba(72, 127, 255, 0.08); }
}
.stats-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; }
.stats-kpi {
  position: relative; display: flex; align-items: center; gap: 0.65rem; min-width: 0; min-height: 82px;
  padding: 0.68rem 0.72rem; overflow: hidden;
  border: 1px solid rgba(111, 136, 211, 0.28); border-radius: 7px;
  background: linear-gradient(145deg, rgba(25, 34, 57, 0.96), rgba(12, 16, 26, 0.98));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}
.stats-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: #7599ff; }
.stats-kpi.gold::before { background: #f2c455; }
.stats-kpi.violet::before { background: #bd73ea; }
.stats-kpi.ranked::before { background: linear-gradient(180deg, #e3a1ff, #6f85ff); }
.stats-kpi.up::before { background: #56da98; }
.stats-kpi.down::before { background: #ed6673; }
.stats-kpi.flat::before { background: #8a94aa; }
.stats-kpi > img { width: 43px; height: 43px; flex: none; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.4)); }
.stats-kpi.ranked > img { width: 50px; height: 50px; margin: -4px; }
.stats-kpi > img.ranked-icon-muted { opacity: 0.38; filter: grayscale(1) saturate(0) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); }
.stats-kpi > img.three-crown-icon { transform: scale(1.28); }
.stats-kpi > span { display: flex; flex-direction: column; min-width: 0; }
.stats-kpi small { color: rgba(216, 225, 247, 0.48); font-size: 0.58rem; font-weight: 750; text-transform: uppercase; }
.stats-kpi strong { overflow: hidden; color: #fff; font-size: 1rem; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.stats-kpi em { overflow: hidden; color: rgba(218, 226, 244, 0.48); font-size: 0.59rem; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.ranked-finish-detail { display: flex; align-items: center; gap: 0.38rem; min-width: 0; }
.ranked-finish-detail > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.ranked-finish-medals { display: inline-flex; align-items: center; gap: 0.12rem; flex: none; color: rgba(235, 224, 255, 0.78); font-weight: 750; }
.ranked-finish-medals img { width: 13px; height: 13px; object-fit: contain; }
.stats-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.stats-detail-panel {
  padding: 0.85rem 0.95rem 0.55rem; border: 1px solid rgba(102, 128, 207, 0.32); border-radius: 8px;
  background: linear-gradient(145deg, rgba(27, 39, 70, 0.95), rgba(14, 17, 27, 0.98) 72%);
  box-shadow: 0 8px 22px rgba(3, 6, 14, 0.2);
}
.stats-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; margin-bottom: 0.42rem; }
.stats-panel-head h3 { margin: 0.08rem 0 0; color: #fff; font-size: 0.96rem; letter-spacing: 0; }
.stats-panel-head img { width: 42px; height: 42px; object-fit: contain; }
.stats-detail-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  min-height: 32px; padding: 0.36rem 0; border-top: 1px solid rgba(255, 255, 255, 0.065);
  color: rgba(219, 227, 246, 0.55); font-size: 0.73rem;
}
.stats-detail-row b { overflow: hidden; color: #f6f8ff; font-size: 0.76rem; text-align: right; white-space: nowrap; text-overflow: ellipsis; }
.account-progress {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 116px; padding: 0.85rem 1rem;
  border: 1px solid rgba(212, 171, 72, 0.32); border-radius: 8px;
  background: linear-gradient(120deg, rgba(47, 38, 25, 0.94), rgba(20, 21, 29, 0.98) 46%, rgba(24, 34, 61, 0.96));
}
.account-metrics { display: flex; align-items: center; gap: 1.35rem; margin-top: 0.55rem; }
.account-metric { display: flex; align-items: center; gap: 0.42rem; min-width: 0; }
.account-metric > img { width: 30px; height: 30px; flex: none; object-fit: contain; }
.account-metric > span { display: flex; min-width: 0; flex-direction: column; }
.account-metric b { color: var(--panel-text); font-size: 0.8rem; line-height: 1.15; }
.account-metric small { color: var(--panel-muted); font-size: 0.61rem; white-space: nowrap; }
.favorite-card { display: flex; align-items: center; gap: 0.55rem; min-width: 180px; justify-content: flex-end; }
.favorite-card > img { width: 64px; height: 88px; object-fit: contain; }
.favorite-card span { display: flex; flex-direction: column; }
.favorite-card small { color: rgba(221, 228, 244, 0.48); font-size: 0.6rem; }
.favorite-card b { color: #fff; font-size: 0.8rem; }
.gift-type {
  color: rgba(222, 230, 249, 0.52); font-size: 0.64rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0;
}
.gift-section-head .hint { margin: 0.45rem 0 0; }
.gift-page-kicker { margin-bottom: 0.9rem; }
.gift-page-kicker > span { margin-bottom: 0; }
.gift-rewards-intro { margin-bottom: 0; }
.gift-toolbar {
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  margin: 1.1rem 0 1.1rem;
}
.gift-filter {
  position: relative;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end;
  gap: 0.2rem 0.5rem; max-width: 100%;
}
.gift-filter button {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 0.45rem; width: 98px; padding: 0.35rem 0.2rem 0.55rem;
  border: none; border-radius: 0; background: none;
  color: rgba(231, 236, 248, 0.56); font-size: 0.88rem; font-weight: 700;
  transition: color 0.16s ease;
}
.gift-filter button:hover { background: none; color: rgba(255, 255, 255, 0.88); }
.gift-filter button.active { background: none; color: #fff; }
.gift-filter button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 8px; }
.gift-filter .tab-indicator {
  top: 0; bottom: auto; height: 3px; border-radius: 2px;
  background: var(--gold); opacity: 0;
  transition:
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.18s ease;
}

.gift-filter-art {
  position: relative; display: flex; align-items: center; justify-content: center; height: 56px;
  opacity: 0.55; transition: opacity 0.18s ease, transform 0.18s ease;
}
.gift-filter-art::before {
  content: ""; position: absolute; inset: -30% -18%; z-index: 0;
  background: radial-gradient(closest-side, rgba(240, 197, 87, 0.3), rgba(240, 197, 87, 0) 72%);
  opacity: 0; transition: opacity 0.18s ease;
}
.gift-filter-art img {
  position: relative; z-index: 1; max-height: 56px; max-width: 66px; object-fit: contain;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.5));
}
.gift-filter-art.is-fan img { max-width: 44px; }
.gift-filter-art.is-fan img + img { margin-left: -17px; }
.gift-filter-art.is-empty::after {
  content: attr(data-glyph); position: relative; z-index: 1;
  font-size: 1.1rem; font-weight: 800; letter-spacing: 0.06em; opacity: 0.7;
}
.gift-filter button:hover .gift-filter-art { opacity: 0.85; transform: translateY(-2px); }
.gift-filter button.active .gift-filter-art { opacity: 1; transform: translateY(-2px); }
.gift-filter button.active .gift-filter-art::before { opacity: 1; }
.gift-filter-label { display: inline-flex; align-items: baseline; gap: 0.32rem; line-height: 1.1; }
.gift-filter button em {
  font-style: normal; font-size: 0.8rem; font-weight: 650;
  color: rgba(226, 233, 248, 0.4); transition: color 0.16s ease;
}
.gift-filter button:hover em { color: rgba(226, 233, 248, 0.6); }
.gift-filter button.active em { color: var(--gold); }
.gift-empty {
  grid-column: 1 / -1; margin: 0; padding: 1.6rem 0;
  color: var(--panel-muted); font-size: 0.85rem; text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .gift-filter button:hover .gift-filter-art,
  .gift-filter button.active .gift-filter-art { transform: none; }
  .gift-filter .tab-indicator { transition: opacity 0.18s ease; }
}
#gift-status { color: rgba(255, 255, 255, 0.82); font-size: 0.9rem; }
#tab-gifts { --gift-col: 210px; --gift-gap: 0.75rem; }
.gift-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--gift-col), 1fr)); gap: var(--gift-gap);
}
.gift-card {
  text-decoration: none;
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  width: 100%; padding: 0; text-align: left; cursor: pointer;
  border: 1px solid var(--panel-border); border-radius: var(--panel-radius);
  color: var(--panel-text);
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.gift-card:hover {
  background: var(--panel-bg); transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(2, 5, 13, 0.34); border-color: var(--deck-btn-hover-border);
}
.gift-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.gift-card::before {
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; z-index: 2;
  background: var(--panel-line);
  box-shadow: 0 0 8px rgba(89, 122, 255, 0.5);
}
.gift-card.is-featured { border-color: rgba(214, 170, 71, 0.55); }
.gift-card.is-featured::before {
  background: linear-gradient(90deg, transparent, #f0c557, #e878d6, transparent);
  box-shadow: 0 0 10px rgba(238, 194, 84, 0.38);
}

.gift-art {
  position: relative; display: grid; place-items: center; height: 150px; overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(145deg, rgba(108, 42, 127, 0.3), rgba(18, 24, 45, 0.45));
}
.gift-rays {
  position: absolute; width: 260px; height: 260px;
  background: repeating-conic-gradient(from 12deg, rgba(238, 190, 76, 0.05) 0 9deg, transparent 9deg 23deg);
  animation: gift-rays-turn 60s linear infinite;
}
.gift-art > img {
  position: relative; z-index: 1; max-width: 92%; max-height: 124px; object-fit: contain;
  filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.45));
}
.gift-art.is-empty::after {
  content: attr(data-glyph); position: relative; z-index: 1;
  font-size: 1.3rem; font-weight: 800; letter-spacing: 0.06em; color: #e2e9f8;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45));
  opacity: 0.6;
}
.gift-art.is-empty { background: linear-gradient(145deg, rgba(60, 68, 104, 0.35), rgba(18, 24, 45, 0.5)); }

.gift-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; padding: 0.75rem 0.85rem 0.85rem; flex: 1; text-align: left; }
.gift-type { color: var(--gold); }
.gift-body h3 { margin: 0.1rem 0 0.95rem; color: var(--panel-text); font-size: 0.95rem; letter-spacing: 0; line-height: 1.25; }
.gift-body .gift-cta {
  margin-top: auto; align-self: center;
  min-height: 30px; padding: 0.22rem 1rem; font-size: 0.78rem;
}
.gift-cta, .gift-notify-toggle, .builder-main-btn {
  --btn-face: linear-gradient(160deg, #f9cd52 0%, #f0a833 55%, #e2872a 100%);
  --btn-edge: rgba(255, 219, 133, 0.5);
  --btn-ink: #2c1d04;
  --btn-glow: rgba(214, 137, 40, 0.28);
  --btn-glow-strong: rgba(214, 137, 40, 0.38);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 40px; padding: 0.5rem 1.15rem; border-radius: 999px;
  border: 1px solid var(--btn-edge);
  background: var(--btn-face);
  color: var(--btn-ink); font-size: 0.82rem; font-weight: 850; text-align: center;
  box-shadow: 0 6px 18px var(--btn-glow);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.gift-cta:hover, .gift-notify-toggle:hover, .gift-notify-toggle.active, .builder-main-btn:hover {
  background: var(--btn-face); border-color: var(--btn-edge);
  color: var(--btn-ink); text-decoration: none;
}
.gift-cta:hover, .gift-notify-toggle:hover, .builder-main-btn:hover {
  filter: brightness(1.06); transform: translateY(-1px);
  box-shadow: 0 9px 22px var(--btn-glow-strong);
}
.gift-cta:focus-visible, .gift-notify-toggle:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 3px;
}
.gift-cta[disabled] { opacity: 0.55; transform: none; box-shadow: none; cursor: not-allowed; }
.gift-cta[disabled]:hover { filter: none; transform: none; }
.gift-cta-link {
  margin-top: 1.3rem;
  min-height: 30px; padding: 0.22rem 1.1rem; font-size: 0.78rem;
}
.gift-card.is-over .gift-cta {
  --btn-face: var(--panel-inset);
  --btn-edge: var(--panel-inset-border);
  --btn-ink: var(--panel-muted);
  --btn-glow: transparent;
  --btn-glow-strong: transparent;
  box-shadow: none;
}
.gift-card.is-over .gift-cta:hover { filter: none; transform: none; }
.gift-flag-new {
  position: absolute; top: 0; left: 0; z-index: 3;
  width: 78px; height: 78px; overflow: hidden; pointer-events: none;
}
.gift-flag-new i {
  position: absolute; top: 13px; left: -25px; display: block; width: 106px;
  padding: 0.16rem 0; transform: rotate(-45deg);
  background: linear-gradient(160deg, #f2564a 0%, #d92f2f 55%, #b32222 100%);
  color: #fff; font-size: 0.6rem; font-weight: 900; font-style: normal;
  letter-spacing: 0.16em; text-align: center; text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(3, 6, 14, 0.45);
}
.gift-expiry {
  position: absolute; top: 0.5rem; right: 0.5rem; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.26rem;
  padding: 0.16rem 0.48rem; border: 1px solid rgba(240, 168, 51, 0.55); border-radius: 999px;
  background: rgba(12, 10, 6, 0.72); color: #f7c65a;
  font-size: 0.66rem; font-weight: 850; letter-spacing: 0.01em;
}
.gift-expiry-ico { width: 13px; height: 13px; object-fit: contain; flex: none; }
.gift-expiry.is-urgent { border-color: rgba(224, 65, 58, 0.6); color: #ff8a7a; }
.gift-expiry.is-expired { border-color: var(--panel-inset-border); color: var(--panel-dim); }
.gift-expired {
  margin-top: 2.2rem; padding-top: 1.2rem;
  border-top: 1px solid var(--panel-inset-border);
}
.gift-expired[hidden] { display: none; }
.gift-expired-head { text-align: center; margin-bottom: 1rem; }
.gift-expired-head h3 { margin: 0; color: var(--panel-muted); font-size: 1.1rem; letter-spacing: 0; }
.gift-expired-head .hint { margin: 0.3rem auto 0; }

.gift-card.is-over { opacity: 0.6; }
.gift-card.is-over:hover {
  transform: none; border-color: var(--panel-border);
  box-shadow: var(--panel-shadow); opacity: 0.78;
}
.gift-card.is-over::before { background: var(--panel-inset-border); box-shadow: none; }
.gift-card.is-over .gift-art > img { filter: grayscale(0.7) drop-shadow(0 12px 12px rgba(0, 0, 0, 0.45)); }
.gift-modal-expiry { margin: 0.35rem 0 0; color: var(--panel-muted); font-size: 0.76rem; font-weight: 700; }
.gift-modal-expiry.is-urgent { color: var(--loss); }
.gift-modal-expiry.is-expired { color: var(--panel-dim); }
.gift-modal-img {
  display: block; max-width: 78%; max-height: 150px; margin: 0.9rem auto 0.3rem;
  object-fit: contain;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.5));
}
.gift-modal-how {
  margin: 0.55rem 0 0; color: var(--panel-text); font-size: 0.86rem; font-weight: 700;
}
.gift-notify-toggle { min-height: 42px; padding: 0.55rem 1.25rem; font-size: 0.88rem; }
.gift-notify-toggle.active {
  transform: none; filter: brightness(0.96);
  box-shadow: inset 0 2px 6px rgba(88, 50, 4, 0.35);
}
.gift-bell { flex: 0 0 auto; transform-origin: 50% 15%; }
.gift-notify-toggle:hover .gift-bell { animation: gift-bell-ring 0.75s ease; }
@keyframes gift-bell-ring {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(13deg); }
  45% { transform: rotate(-10deg); }
  70% { transform: rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .gift-notify-toggle:hover .gift-bell { animation: none; }
  .gift-notify-toggle:hover { transform: none; }
}
.gift-notify {
  position: relative;
  display: flex; flex-direction: column; gap: 0.55rem;
  max-width: 520px; margin: 0 auto 1.2rem; padding: 0.85rem 0.95rem;
  border: 1px solid var(--panel-border); border-radius: var(--panel-radius);
  background: var(--panel-bg); box-shadow: var(--panel-shadow);
}
.gift-notify[hidden] { display: none; }
.gift-notify-close {
  position: absolute; top: 0.5rem; right: 0.5rem;
  display: grid; place-items: center; width: 26px; height: 26px; min-height: 0;
  padding: 0; border-radius: 50%;
  border: 1px solid var(--panel-inset-border); background: var(--panel-inset);
  color: var(--panel-muted);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.gift-notify-close:hover {
  background: var(--panel-inset); border-color: var(--deck-btn-hover-border); color: var(--panel-text);
}
.gift-notify-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.gift-notify-copy { padding-right: 2rem; }
.gift-notify-copy h3 { margin: 0; color: var(--panel-text); font-size: 0.95rem; }
.gift-notify-copy p { margin: 0.2rem 0 0; color: var(--panel-muted); font-size: 0.76rem; }
.gift-notify-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.gift-notify-row[hidden] { display: none; }
.gift-notify-row input[type="email"] {
  flex: 1; min-width: 200px; max-width: 320px;
  padding: 0.5rem 0.7rem; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-sm);
  background: rgba(11, 13, 18, 0.92); color: var(--panel-text); font-size: 0.85rem;
}
.gift-notify-row input[type="email"]::placeholder { color: var(--panel-dim); }
.gift-notify-row input[type="email"]:focus {
  outline: none; border-color: var(--deck-btn-hover-border); box-shadow: 0 0 0 3px rgba(59, 110, 245, 0.15);
}
.gift-notify-status:empty { display: none; }
.gift-notify-status { margin: 0; color: var(--panel-muted); font-size: 0.74rem; }
.gift-code-boxes { display: flex; gap: 0.4rem; }
input.gift-code-box {
  flex: none; width: 2.75rem; min-width: 0; max-width: none; height: 2.75rem;
  padding: 0; text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-sm);
  background: rgba(11, 13, 18, 0.92); color: var(--panel-text);
  font-size: 1.35rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase;
}
input.gift-code-box:focus {
  outline: none; border-color: var(--deck-btn-hover-border); box-shadow: 0 0 0 3px rgba(59, 110, 245, 0.15);
}
.gift-notify-code-hint { margin: 0; color: var(--panel-muted); font-size: 0.76rem; }
.gift-notify-code-hint[hidden] { display: none; }
.gift-notify-success-modal { display: flex; flex-direction: column; align-items: center;
  gap: 0.7rem; text-align: center; padding: 0.4rem 0.2rem; }
.gift-notify-success-modal p { margin: 0; color: var(--panel-text); font-size: 0.88rem; line-height: 1.45; }
.gift-notify-success-check { flex: none; overflow: visible; }
.gift-notify-success-circle {
  stroke: #3ecf6e; stroke-width: 2.5;
  stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: gift-success-circle 0.45s ease-out forwards;
}
.gift-notify-success-tick {
  stroke: #3ecf6e; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 34; stroke-dashoffset: 34;
  animation: gift-success-tick 0.3s 0.4s ease-out forwards;
}
@keyframes gift-success-circle { to { stroke-dashoffset: 0; } }
@keyframes gift-success-tick { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .gift-notify-success-circle, .gift-notify-success-tick { animation: none; stroke-dashoffset: 0; }
}
.gift-notify-tip {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  margin: 0; color: #fbbf24; font-weight: 700; font-size: 0.8rem;
}
.gift-notify-tip-icon {
  flex: none; display: grid; place-items: center; width: 15px; height: 15px;
  border-radius: 50%; background: #fbbf24; color: #241c02;
  font-size: 0.68rem; font-weight: 800; line-height: 1;
}
.gift-giveaway {
  max-width: calc(var(--gift-col) * 3 + var(--gift-gap) * 2);
  margin: 0 auto 1.9rem;
}
.gift-giveaway[hidden] { display: none; }
.gift-section-head { margin-bottom: 0.7rem; }
.gift-section-head h3 { margin: 0.08rem 0 0; color: var(--panel-text); font-size: 1.1rem; }
.gift-head-center { text-align: center; margin-bottom: 1rem; }
.gift-head-center h2 {
  margin: 0; color: #fff; font-size: 1.75rem; letter-spacing: 0; line-height: 1.15;
}
.gift-head-center .hint { margin: 0.3rem auto 0; }
.gift-rewards .gift-head-center { margin-top: 0.4rem; }

.gift-giveaway-grid { display: grid; gap: var(--gift-gap); }
.gift-prize-panel {
  position: relative; display: block; min-height: 300px;
  border: 1px solid rgba(214, 170, 71, 0.5); border-radius: var(--panel-radius);
  background: var(--panel-bg); box-shadow: var(--panel-shadow); overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gift-prize-panel:hover {
  border-color: rgba(240, 197, 87, 0.85);
  box-shadow: 0 14px 32px rgba(2, 5, 13, 0.34), 0 0 0 1px rgba(240, 197, 87, 0.18);
}
.gift-prize-panel::before {
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; z-index: 4;
  background: linear-gradient(90deg, transparent, #f0c557, #e878d6, transparent);
  box-shadow: 0 0 10px rgba(238, 194, 84, 0.38);
}
.gift-prize-face {
  display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 300px;
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: center;
}
.gift-prize-face:hover { background: none; }
.gift-prize-face:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; }
.gift-prize-panel .gift-art {
  height: 200px;
  background: linear-gradient(145deg, rgba(245, 185, 59, 0.18), rgba(18, 24, 45, 0.62));
}
.gift-prize-panel .gift-art > img {
  z-index: 3; max-height: 168px;
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.62)) drop-shadow(0 0 22px rgba(255, 206, 116, 0.28));
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.28s ease;
}
.gift-prize-panel .gift-art > img:hover {
  transform: translateY(-5px) scale(1.05);
  filter: drop-shadow(0 20px 22px rgba(0, 0, 0, 0.66)) drop-shadow(0 0 30px rgba(255, 206, 116, 0.46));
}
.gift-prize-art:has(> img:hover) .gift-prize-glow { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .gift-prize-panel .gift-art > img:hover { transform: none; }
}
.gift-prize-backdrop {
  position: absolute; inset: 0; z-index: 0;
  background: url("assets/gifts/giveaway/backdrop-forbidden-city.jpg") center 16% / cover no-repeat;
  transform: scale(1.12);
  filter: blur(6px) saturate(1.25);
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
}
.gift-prize-art::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(72% 128% at 50% 46%, rgba(8, 11, 24, 0.12), rgba(5, 8, 18, 0.82) 76%);
}
.gift-prize-glow {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(46% 62% at 50% 54%, rgba(247, 197, 92, 0.4), rgba(247, 197, 92, 0.11) 48%, transparent 74%);
  opacity: 0.8; transition: opacity 0.25s ease;
}
.gift-prize-beam {
  position: absolute; left: 0; right: 0; top: -18%; bottom: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 246, 206, 0.5), rgba(255, 220, 128, 0.17) 54%, transparent 88%);
  clip-path: polygon(41% 0, 59% 0, 88% 100%, 12% 100%);
  filter: blur(3px);
  mix-blend-mode: screen;
  transform: scaleX(0.05); transform-origin: 50% 38%; opacity: 0;
}
.gift-prize-beam::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -6%; height: 34%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 238, 178, 0.26), transparent 68%);
  filter: blur(5px);
}
@media (prefers-reduced-motion: no-preference) {
  .gift-prize-beam.is-lit {
    animation:
      gift-beam-open 820ms cubic-bezier(0.16, 0.9, 0.24, 1) 120ms forwards,
      gift-beam-flicker 13s linear 1s infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gift-prize-beam.is-lit { transform: scaleX(1); opacity: 1; }
}
@keyframes gift-beam-open {
  0%   { transform: scaleX(0.05); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: scaleX(1); opacity: 1; }
}
@keyframes gift-beam-flicker {
  0%, 33%     { opacity: 1; }
  33.6%       { opacity: 0.32; }
  34.2%       { opacity: 1; }
  35.1%       { opacity: 0.5; }
  35.7%       { opacity: 0.96; }
  36.3%       { opacity: 0.4; }
  37%, 70%    { opacity: 1; }
  70.5%       { opacity: 0.28; }
  71.1%       { opacity: 1; }
  72%         { opacity: 0.55; }
  72.6%, 100% { opacity: 1; }
}
.gift-prize-motes { position: absolute; inset: 0; z-index: 2; overflow: hidden; mix-blend-mode: screen; }
.gift-prize-motes i {
  --dx: 18px;
  --travel: -230%;
  position: absolute; bottom: -40%; width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 238, 196, 0.62), rgba(255, 212, 128, 0.2) 45%, transparent 70%);
  opacity: 0; filter: blur(1px);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.gift-prize-motes i:nth-child(1) { left:  2%; width: 150px; height: 150px; bottom: -55%; --dx:  26px; --travel: -240%; }
.gift-prize-motes i:nth-child(2) { left: 19%; width:  92px; height:  92px; bottom: -15%; --dx: -20px; --travel: -210%; }
.gift-prize-motes i:nth-child(3) { left: 31%; width: 168px; height: 168px; bottom: -70%; --dx:  14px; --travel: -260%; }
.gift-prize-motes i:nth-child(4) { left: 49%; width: 104px; height: 104px; bottom: -30%; --dx: -30px; --travel: -225%; }
.gift-prize-motes i:nth-child(5) { left: 64%; width: 156px; height: 156px; bottom: -60%; --dx:  22px; --travel: -250%; }
.gift-prize-motes i:nth-child(6) { left: 79%; width:  88px; height:  88px; bottom:  -8%; --dx: -16px; --travel: -205%; }
.gift-prize-motes i:nth-child(7) { left: 89%; width: 132px; height: 132px; bottom: -45%; --dx:  30px; --travel: -235%; }
@media (prefers-reduced-motion: no-preference) {
  .gift-prize-motes i { animation: gift-mote-drift linear infinite; }
  .gift-prize-motes i:nth-child(1) { animation-duration: 21s; animation-delay:  -3s; }
  .gift-prize-motes i:nth-child(2) { animation-duration: 17s; animation-delay:  -9s; }
  .gift-prize-motes i:nth-child(3) { animation-duration: 26s; animation-delay: -14s; }
  .gift-prize-motes i:nth-child(4) { animation-duration: 19s; animation-delay:  -6s; }
  .gift-prize-motes i:nth-child(5) { animation-duration: 24s; animation-delay: -18s; }
  .gift-prize-motes i:nth-child(6) { animation-duration: 15s; animation-delay: -11s; }
  .gift-prize-motes i:nth-child(7) { animation-duration: 22s; animation-delay: -20s; }
}
@keyframes gift-mote-drift {
  0%   { transform: translate3d(0, 0, 0);                                          opacity: 0; }
  18%  { opacity: 0.5; }
  50%  { transform: translate3d(var(--dx), calc(var(--travel) / 2), 0);            opacity: 0.62; }
  82%  { opacity: 0.45; }
  100% { transform: translate3d(calc(var(--dx) * -0.6), var(--travel), 0);         opacity: 0; }
}
.gift-prize-copy {
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  padding: 0.95rem 1rem 1.1rem; flex: 1; justify-content: center;
}
.gift-prize-copy h3 { margin: 0; color: var(--panel-text); font-size: 1.05rem; letter-spacing: 0; }
.gift-prize-detail {
  color: var(--panel-muted); font-size: 0.82rem; line-height: 1.35;
  text-align: center; max-width: 46ch; margin-top: -0.25rem;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.gift-prize-facts {
  display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap;
  row-gap: 0.6rem; width: 100%; padding-top: 0.7rem;
  border-top: 1px solid var(--panel-line, rgba(255, 255, 255, 0.09));
}
.gift-prize-fact {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  flex: 1 1 5.5rem; min-width: 0; padding: 0 0.6rem;
}
.gift-prize-fact + .gift-prize-fact { border-left: 1px solid rgba(255, 255, 255, 0.08); }
.gift-prize-fact strong {
  color: var(--panel-text); font-size: 1rem; font-weight: 850; line-height: 1.1;
  letter-spacing: -0.01em; white-space: nowrap;
}
.gift-prize-fact small { color: var(--panel-muted); font-size: 0.68rem; font-weight: 650; }
.gift-prize-fact[data-fact="entry"] strong,
.gift-prize-fact[data-fact="entries"] strong { color: #7ede6a; }
.gift-confetti {
  position: absolute; inset: 0; z-index: 6; overflow: hidden; pointer-events: none;
}
.gift-confetti i {
  position: absolute; top: -14px; left: var(--x);
  width: var(--w); height: var(--h); border-radius: 1px;
  opacity: 0;
  animation: gift-confetti-fall var(--dur) cubic-bezier(0.32, 0.16, 0.5, 1) var(--delay) forwards;
  will-change: transform, opacity;
}
@keyframes gift-confetti-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(var(--tilt)); opacity: 0; }
  8%   { opacity: 1; }
  84%  { opacity: 1; }
  100% {
    transform: translate3d(var(--dx), var(--fall), 0) rotate(calc(var(--tilt) + var(--spin)))
               rotate3d(1, 0.4, 0, 720deg);
    opacity: 0;
  }
}

.gift-prize-entry {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
  padding: 1.1rem 1.2rem; background: var(--panel-bg);
}
.gift-prize-entry[hidden] { display: none; }
.gift-prize-entry-body {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.45rem; flex: 1; text-align: center;
}
.gift-prize-entry-body h3 { margin: 0; color: var(--panel-text); font-size: 1.05rem; }
.gift-prize-back {
  position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2;
  display: grid; place-items: center; width: 28px; height: 28px; min-height: 0;
  padding: 0; border-radius: 50%;
  border: 1px solid var(--panel-inset-border); background: var(--panel-inset);
  color: var(--panel-muted); cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.gift-prize-back:hover {
  background: var(--panel-inset); border-color: var(--deck-btn-hover-border);
  color: var(--panel-text); transform: translateX(-1px);
}
.gift-prize-back svg { width: 15px; height: 15px; }
.gift-prize-entry { padding: 0.75rem 0.9rem 0.85rem; }
.gift-prize-entry-body { justify-content: flex-start; gap: 0.15rem; }
.gift-prize-entry-body h3 { font-size: 1rem; }
.gift-prize-entry-body > .hint { margin: 0 0 0.1rem; font-size: 0.76rem; }

.giveaway-steps {
  display: flex; flex-direction: column;
  width: 100%; margin: 0.15rem 0 0; padding: 0; list-style: none; text-align: left;
}
.giveaway-step {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 0.55rem;
  padding: 0.45rem 0.1rem;
  transition: opacity 0.2s ease;
}
.giveaway-step + .giveaway-step { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.giveaway-step.is-locked { opacity: 0.42; }
.giveaway-step.is-done { opacity: 0.72; }

.giveaway-step-mark {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--panel-inset-border); background: var(--panel-inset);
  color: var(--panel-muted); font-size: 0.74rem; font-weight: 850;
}
.giveaway-step-mark img { width: 14px; height: 14px; object-fit: contain; opacity: 0.85; }
.giveaway-step-mark.is-open { border-color: rgba(240, 197, 87, 0.6); color: var(--gold); }
.giveaway-step-mark.is-done {
  border-color: rgba(70, 194, 87, 0.6); background: rgba(70, 194, 87, 0.14); color: #7ede6a;
}
.giveaway-step-body {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; min-width: 0; width: 100%;
}
.giveaway-step-title { margin: 0; color: var(--panel-text); font-size: 0.83rem; font-weight: 750; }
.giveaway-step-note { margin: 0; color: var(--panel-muted); font-size: 0.71rem; }
.giveaway-step-note.is-error { color: var(--loss); }
.giveaway-step-note:empty { display: none; }
.giveaway-step-row { display: flex; align-items: center; gap: 0.4rem; width: 100%; }
.giveaway-step-row input {
  flex: 1 1 auto; min-width: 0;
  padding: 0.38rem 0.6rem; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-sm);
  background: rgba(11, 13, 18, 0.92); color: var(--panel-text); font-size: 0.8rem;
}
.giveaway-step-row input::placeholder { color: var(--panel-dim); }
.giveaway-step-row input:focus {
  outline: none; border-color: var(--deck-btn-hover-border); box-shadow: 0 0 0 3px rgba(59, 110, 245, 0.15);
}
.giveaway-step-row input:disabled { opacity: 0.6; cursor: not-allowed; }
.giveaway-step-body .gift-cta { flex: 0 0 auto; min-height: 30px; padding: 0.24rem 0.85rem; font-size: 0.76rem; }

.giveaway-entrants {
  margin: 0.35rem 0 0; color: var(--panel-muted); font-size: 0.74rem; font-weight: 700;
}
.giveaway-entrants:empty { display: none; }
.giveaway-entrants.is-success { color: #7ede6a; }
.giveaway-finish { display: flex; justify-content: center; margin-top: 0.5rem; }
.giveaway-finish:empty { display: none; }
.gift-cta.is-green {
  --btn-face: linear-gradient(160deg, #86e572 0%, #46c257 55%, #2c9a46 100%);
  --btn-edge: rgba(163, 240, 152, 0.5);
  --btn-ink: #0d2a12;
  --btn-glow: rgba(44, 154, 70, 0.3);
  --btn-glow-strong: rgba(44, 154, 70, 0.42);
}
.gift-cta.is-done { animation: giveaway-done-pop 560ms cubic-bezier(0.2, 1.5, 0.4, 1); }
.gift-cta.is-done[disabled] { opacity: 1; cursor: default; }
@keyframes giveaway-done-pop {
  0%   { transform: scale(0.86); }
  55%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .gift-cta.is-done { animation: none; }
}
@keyframes gift-rays-turn { to { transform: rotate(360deg); } }
.col-panel { padding: 1rem 1.15rem 1.15rem; margin-bottom: 0.7rem; }
.col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.col-head h3 { margin: 0; color: var(--panel-text); font-size: 1.05rem; }
.col-note { color: var(--panel-dim); font-size: 0.74rem; line-height: 1.5; }
.col-intro { margin: 0 0 1.1rem; color: var(--panel-muted); font-size: 0.85rem; line-height: 1.55; max-width: 72ch; }
.col-panel > .col-note { margin: 0.8rem 0 0; max-width: 68ch; }
.col-tap-tip { margin: 0.8rem 0 0; text-align: center; color: #fbbf24; font-weight: 700; font-size: 0.8rem; }
.col-hero { padding: 1.9rem 1.15rem 1.6rem; }
.col-score { position: relative; display: grid; justify-items: center; margin-bottom: 1.8rem; }
.col-score strong {
  position: relative; z-index: 1;
  color: var(--panel-text); font-size: clamp(2.6rem, 7vw, 4rem); font-weight: 850;
  line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.col-score > span {
  position: relative; z-index: 1; margin-top: 0.3rem;
  color: var(--panel-muted); font-size: 0.82rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.18em;
}
.col-score-glow {
  position: absolute; top: 50%; left: 50%; width: 22rem; height: 11rem;
  transform: translate(-50%, -60%);
  background: radial-gradient(ellipse at center, rgba(59, 110, 245, 0.38), transparent 68%);
  filter: blur(18px); pointer-events: none;
  animation: col-score-pulse 5.5s ease-in-out infinite;
}
@keyframes col-score-pulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -60%) scale(0.94); }
  50% { opacity: 1; transform: translate(-50%, -60%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .col-score-glow { animation: none; } }

.col-figures { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; }
.col-figures-center { justify-content: center; text-align: center; }
.col-figures-center .col-figure-value { justify-content: center; }
.col-icon-pending {
  width: 27px; height: 27px; border: 1px dashed var(--panel-inset-border);
  border-radius: 6px; background: var(--panel-inset); flex: none;
}
.col-figures-tight { gap: 1.2rem 2rem; }
.col-figure-value { display: flex; align-items: center; gap: 0.4rem; }
.col-figure-value img { width: 27px; height: 27px; object-fit: contain; }
.col-fan { display: inline-flex; align-items: center; }
.col-fan img {
  width: 27px; height: 27px; object-fit: contain;
  filter: drop-shadow(-2px 1px 1.5px rgba(0, 0, 0, 0.75));
}
.col-fan img + img { margin-left: -20px; }
.col-figure-value strong { color: var(--panel-text); font-size: 1.5rem; font-weight: 850; line-height: 1.1; letter-spacing: -0.01em; }
.col-figure-value small { color: var(--panel-muted); font-size: 0.82rem; font-weight: 700; }
.col-figure > span { display: block; margin-top: 0.15rem; color: var(--panel-muted); font-size: 0.75rem; font-weight: 650; }
.col-bar { display: block; height: 7px; border-radius: 4px; background: var(--panel-inset); overflow: hidden; }
.col-bar > i { display: block; height: 100%; border-radius: 4px; background: var(--primary); transition: width 0.5s ease; }
.col-bar > i.is-gold { background: var(--gold); }
.col-bar > i.is-common { background: #b9c4d8; }
.col-bar > i.is-rare { background: #f2a33c; }
.col-bar > i.is-epic { background: #c264f0; }
.col-bar > i.is-legendary { background: #56d2f0; }
.col-bar > i.is-champion { background: var(--gold); }
.col-bar > i.is-evo { background: #e05ad8; }
.col-bar > i.is-hero { background: var(--gold); }
.col-bar > i.is-star { background: #f7d046; }
.col-stars { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--panel-inset-border); }
.col-stars h4 { margin: 0 0 0.8rem; color: var(--panel-text); font-size: 0.9rem; }

.col-progress { margin-top: 1.3rem; display: grid; gap: 0.55rem; }
.col-progress-line { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 3rem; align-items: center; gap: 0.8rem; }
.col-progress-line > span { color: var(--panel-muted); font-size: 0.8rem; font-weight: 650; }
.col-progress-line > b { color: var(--panel-text); font-size: 0.85rem; text-align: right; font-variant-numeric: tabular-nums; }
.col-rarity-list { display: grid; gap: 0.85rem; }
.col-rarity {
  display: grid;
  grid-template-columns: 40px 10.5rem minmax(0, 1fr) 3rem 8.5rem 7rem;
  align-items: center; gap: 0.9rem;
}
.col-rarity-icon { width: 38px; height: 38px; object-fit: contain; }
.col-rarity-name strong { display: block; color: var(--panel-text); font-size: 0.9rem; }
.col-rarity-name span { color: var(--panel-muted); font-size: 0.73rem; }
.col-rarity-pct { color: var(--panel-text); font-size: 0.85rem; text-align: right; font-variant-numeric: tabular-nums; }
.col-rarity-need { display: contents; }
.col-rarity-need span, .col-need, .col-tower-need {
  display: inline-flex; align-items: center; gap: 0.32rem;
  color: var(--panel-text); font-size: 0.82rem; font-weight: 750; font-variant-numeric: tabular-nums;
}
.col-rarity-need img, .col-need img, .col-tower-need img { width: 20px; height: 20px; object-fit: contain; }
.col-subsection { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--panel-inset-border); }
.col-subsection h4 { margin: 0 0 0.9rem; color: var(--panel-text); font-size: 0.9rem; }
.col-subsection.no-line { padding-top: 0; border-top: none; margin-top: 1.9rem; }
.col-subsection.no-line:first-of-type { margin-top: 0; }
.col-subsection h4 .col-note { margin-left: 0.5rem; font-weight: 400; }
.col-specials { display: flex; flex-wrap: wrap; gap: 1.4rem 2.6rem; }
.col-specials-center { justify-content: center; }
.col-special { display: flex; align-items: center; gap: 0.65rem; min-width: 15rem; }
.col-special > img { width: 40px; height: 40px; object-fit: contain; }
.col-special > div { min-width: 11rem; }
.col-special strong { display: block; color: var(--panel-text); font-size: 0.9rem; margin-bottom: 0.35rem; }
.col-special span { color: var(--panel-muted); font-size: 0.73rem; }
.col-views { margin: 0.2rem 0 0.9rem; overflow-x: auto; }
.col-views button { font-size: 0.88rem; white-space: nowrap; }
.col-badges { display: grid; gap: 1rem 2rem; }
.col-badges-grid { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.col-badge { display: flex; align-items: center; gap: 0.7rem; }
.col-badge > img, .col-badge > .col-icon-pending { width: 82px; height: 82px; object-fit: contain; flex: none; }
.col-badge > img[src^="/assets/badges/ranks/"],
.col-badge > img[src^="/assets/events/chaos-s2.png"] { width: 64px; height: 64px; margin: 9px; }
.col-badge > img.is-missing {
  border: 1px dashed var(--panel-inset-border); border-radius: 6px;
  background: var(--panel-inset); content: "";
}
.col-badge > div { flex: 1; min-width: 0; display: grid; gap: 0.28rem; }
.col-badge .col-bar { height: 4px; max-width: 6rem; border-radius: 3px; }
.col-badge .col-bar > i { border-radius: 3px; }
.col-badge strong { color: var(--panel-text); font-size: 0.85rem; transition: color 0.2s ease; }
.col-badge.is-active strong { color: var(--primary); }
.col-badge span { color: var(--panel-muted); font-size: 0.72rem; }
.col-mastery-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.95rem 1.2rem;
}
.col-mastery-badge { min-width: 0; gap: 0.65rem; }
.col-mastery-badge > div { gap: 0.22rem; }
@media (max-width: 900px) { .col-mastery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.col-towers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem 1.4rem; }
@media (max-width: 780px) { .col-towers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.col-tower { display: flex; align-items: flex-start; gap: 0.6rem; }
.col-tower > img { width: 34px; height: 50px; object-fit: contain; flex: none; }
.col-tower > div { flex: 1; min-width: 0; display: grid; gap: 0.1rem; justify-items: start; }
.col-tower strong { color: var(--panel-text); font-size: 0.84rem; line-height: 1.25; }
.col-tower span { color: var(--panel-muted); font-size: 0.73rem; }
.col-done { color: var(--win); font-size: 0.8rem; font-weight: 800; }
.col-deck-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-bottom: 0.9rem; }
.col-btn {
  min-height: 32px; padding: 0.25rem 0.75rem; border-radius: 7px;
  border: 1px solid var(--panel-inset-border); background: var(--panel-inset);
  color: var(--panel-muted); font-size: 0.78rem; font-weight: 800;
}
.col-btn:hover { background: var(--panel-inset); color: var(--panel-text); border-color: var(--deck-btn-hover-border); }
.col-toggle { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--panel-muted); font-size: 0.78rem; font-weight: 650; cursor: pointer; }

.col-slots { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.1rem; }
.col-slot {
  position: relative; width: 66px; padding: 0; border: none; background: none;
  aspect-ratio: 285 / 420; cursor: pointer;
}
.col-slot:hover { background: none; }
.col-slot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.col-slot.is-empty {
  display: grid; place-items: center; border: 1px dashed var(--panel-inset-border);
  border-radius: 7px; color: var(--panel-dim); font-size: 1.2rem; font-weight: 800;
}
.col-slot.is-empty:hover { border-color: var(--deck-btn-hover-border); color: var(--panel-text); }
.col-slot-level {
  position: absolute; inset-inline: 0; bottom: 2px;
  width: max-content; margin-inline: auto;
  padding: 0 0.32rem; border-radius: 4px; background: rgba(6, 9, 16, 0.85);
  color: var(--panel-text); font-size: 0.68rem; font-weight: 800; line-height: 1.45;
}
.col-slot-level.is-max { background: var(--gold); color: var(--text-invert); }
.col-deck-needs { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 1rem; }
.col-deck-specials { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 0.6rem; }
.col-deck-result .hint { margin: 0; }
.modal-box:has(.col-pick-wide) { width: min(1180px, 94vw); max-width: min(1180px, 94vw); text-align: left; }
.col-pick-wide > h3 { margin: 0 0 0.7rem; }
.col-pick-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.8rem; }
.col-pick-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.2rem; margin-bottom: 0.8rem; }
.col-pick-head .col-slots { margin-bottom: 0; }
.col-pick-body { max-height: 58vh; overflow-y: auto; margin-top: 0.7rem; }
.col-pick-section + .col-pick-section { margin-top: 1.1rem; }
.col-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 0.3rem; }
.col-pick {
  position: relative; padding: 0; border: none; background: none; cursor: pointer;
  aspect-ratio: 285 / 420; transition: transform 0.15s ease, filter 0.15s ease;
}
.col-pick:hover { background: none; transform: translateY(-2px); }
.col-pick img { width: 100%; height: 100%; object-fit: contain; display: block; }
.col-pick.is-picked { transform: translateY(-3px); }
.col-pick.is-picked img { filter: drop-shadow(0 0 0 2px var(--primary)) brightness(1.12); }
.col-pick.is-picked::after {
  content: ""; position: absolute; inset: -2px; border: 2px solid var(--primary);
  border-radius: 6px; pointer-events: none;
}
.col-pick.is-blocked { cursor: not-allowed; }
.col-pick.is-blocked img { filter: grayscale(0.7) brightness(0.5); }
.col-pick.is-locked img { filter: grayscale(1) brightness(0.45); }
.col-source-body { max-height: 62vh; overflow-y: auto; display: grid; gap: 0.5rem; }
.col-source-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 0.45rem 0.6rem; border-radius: 7px; text-align: left;
  border: 1px solid var(--panel-inset-border); background: var(--panel-inset); cursor: pointer;
}
.col-source-row:hover { background: var(--panel-inset); border-color: var(--deck-btn-hover-border); }
.col-source-cards { display: flex; gap: 0.2rem; }
.col-source-cards img { width: 42px; height: auto; object-fit: contain; display: block; }
.col-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 0.45rem 0.4rem; }
.col-card {
  position: relative; aspect-ratio: 285 / 420;
  padding: 0; border: none; background: none; cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.col-card img { width: 100%; height: 100%; object-fit: contain; display: block; }
.col-card:hover { background: none; transform: translateY(-3px) scale(1.04); }
.col-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.col-card.is-active { transform: translateY(-3px) scale(1.04); }
.col-card.is-locked img { filter: grayscale(1) brightness(0.45); }
.col-card.is-locked .col-slot-level { background: rgba(6, 9, 16, 0.8); color: var(--panel-dim); }
.col-head-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; }
.col-sort { display: flex; gap: 0.35rem; }
.col-btn.active { background: var(--panel-inset); color: var(--panel-text); border-color: var(--deck-btn-hover-border); }
.col-card-groups { display: grid; gap: 1.2rem; transition: opacity 0.2s ease; }
.col-card-groups.is-dimmed { opacity: 0.42; }
.col-card-group-head { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.5rem; }
.col-card-group-head img { width: 22px; height: 22px; object-fit: contain; }
.col-card-group-head strong { color: var(--panel-muted); font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.modal-box:has(.col-pop) { width: 414px; max-width: 414px; }
.col-pop { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; }
.col-pop-card { position: relative; width: 118px; --art-w: 118px; margin-bottom: 11px; }
.col-pop-art {
  position: relative; z-index: 2;
  width: 100%; aspect-ratio: 285 / 420; height: auto; object-fit: contain; display: block;
}
.col-pop-progress {
  position: relative; z-index: 1;
  display: block; width: calc(var(--art-w) * var(--body-ratio, 0.9) * 0.88); height: 20px;
  margin: calc(-1 * var(--art-w) * (420 / 285) * var(--pad-ratio, 0.08) + 4px) auto 0;
  border: 2px solid var(--cr-bar-border); border-radius: 6px;
  background: linear-gradient(180deg, var(--cr-bar-track-top) 0 52%, var(--cr-bar-track-bottom) 52% 100%);
  overflow: hidden;
}
.col-pop-progress > i {
  position: absolute; inset: 0 auto 0 0; display: block;
  background: linear-gradient(180deg, var(--cr-bar-blue-top) 0 52%, var(--cr-bar-blue-bottom) 52% 100%);
}
.col-pop-progress.is-ready > i {
  background: linear-gradient(180deg, var(--cr-bar-green-top) 0 52%, var(--cr-bar-green-bottom) 52% 100%);
}
.col-pop-progress > b {
  position: relative; display: block; line-height: 16px; text-align: center;
  font-family: "Clash Display", "Inter", system-ui, sans-serif;
  font-size: 0.7rem; font-weight: 700; color: #fff;
  -webkit-text-stroke: 1.5px var(--cr-bar-border);
  paint-order: stroke fill;
}
.col-pop-max {
  position: relative; z-index: 1;
  display: block; width: calc(var(--art-w) * var(--body-ratio, 0.9) * 0.96); height: auto;
  margin: calc(-1 * var(--art-w) * ((420 / 285) * var(--pad-ratio, 0.08) + var(--lift-ratio, 0.093))) auto 0;
}
.col-pop h3 { margin: 0.5rem 0 0.1rem; color: var(--panel-text); font-size: 1.15rem; }
.col-detail-rarity { color: var(--panel-muted); font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.col-detail-forms { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 0.8rem; margin-top: 0.7rem; }
.col-detail-form {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0; border: none; border-radius: 0; background: none; cursor: pointer;
  color: var(--panel-text); font-size: 0.76rem; font-weight: 750;
  transition: color 0.15s ease;
}
.col-detail-form:hover { background: none; color: var(--primary); }
.col-detail-form:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.col-detail-form img { width: 20px; height: 20px; object-fit: contain; }
.col-detail-form.is-locked { color: var(--panel-dim); }
.col-detail-form.is-locked:hover { color: var(--primary); }
.col-detail-form.is-locked img { filter: grayscale(1) brightness(0.6); }
.col-detail-lines { display: grid; gap: 0.3rem; width: 100%; margin: 0.9rem 0 0; }
.col-detail-line { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.col-detail-line.is-link {
  width: 100%; padding: 0; border: none; border-radius: 0; background: none;
  cursor: pointer; font: inherit; text-align: left;
}
.col-detail-line.is-link:hover { background: none; }
.col-detail-line.is-link:hover span, .col-detail-line.is-link:hover b { color: var(--primary); }
.col-detail-line.is-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.col-detail-line span { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--panel-muted); font-size: 0.78rem; }
.col-detail-line span img { width: 20px; height: 20px; object-fit: contain; }
.col-detail-line b { color: var(--panel-text); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.col-pop-decks {
  width: 100%; margin-top: 1rem; padding-top: 0.9rem;
  border-top: 1px solid var(--panel-inset-border); text-align: center;
}
.col-pop-decks h4 { margin: 0; color: var(--panel-text); font-size: 0.9rem; }
.col-pop-lock { display: block; margin: 0.6rem auto 0.15rem; width: 38px; height: 38px; }
.col-pop-lock img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6));
}
.col-head-icon { display: inline-flex; align-items: center; gap: 0.45rem; }
.col-head-icon img { width: 26px; height: 26px; object-fit: contain; }
.col-star-points { display: flex; flex-wrap: wrap; gap: 0.4rem 2rem; margin-bottom: 1rem; }
.col-star-points span { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--panel-text); font-size: 0.86rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.col-star-points img { width: 20px; height: 20px; object-fit: contain; }
.col-star-points b { color: var(--panel-muted); font-size: 0.75rem; font-weight: 650; }
.col-star-badge {
  position: absolute; inset-inline: 0; bottom: 2px;
  width: max-content; margin-inline: auto;
  display: inline-flex; align-items: center; gap: 0.15rem; white-space: nowrap;
  padding: 0 0.28rem; border-radius: 4px; background: rgba(6, 9, 16, 0.85);
  color: var(--panel-text); font-size: 0.62rem; font-weight: 800; line-height: 1.5;
}
.col-star-badge img { width: 11px; height: 11px; }
.col-star-badge.is-max { background: var(--gold); color: var(--text-invert); }
.card-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.card { width: 84px; text-align: center; font-size: 0.75rem; }
.card-img { position: relative; width: 84px; aspect-ratio: 285 / 420; }
.card-img img { width: 84px; height: 100%; object-fit: contain; display: block; border-radius: 8px; }
.card-26000106 .card-img img { object-position: center 86%; }
.card .name { margin-top: 0.2rem; font-weight: 600; }
.card .lvl { color: var(--muted); }
#battle-list { display: flex; flex-direction: column; gap: 0.6rem; }
.battle-list-actions {
  display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 58px; margin-top: 8px; color: var(--panel-muted);
  font-size: 0.78rem; font-weight: 750;
}
.battle-list-actions[hidden] { display: none; }
.battle-list-actions .lb-loading-ring { width: 22px; height: 22px; border-width: 2px; }
.battle {
  position: relative;
  padding: 0.8rem 1rem 0.65rem;
  border-radius: var(--panel-radius);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
  color: var(--panel-text);
}
.battle-time { position: absolute; left: 0; top: 6px; font-size: 0.72rem; color: var(--panel-muted); }
.battle.win, .battle.loss, .battle.draw {
  color: #f4f7ff;
  border: 1px solid transparent;
  background:
    linear-gradient(105deg, var(--result-left), #151a24 52%, var(--result-right)) padding-box,
    linear-gradient(#151a24, #151a24) padding-box,
    linear-gradient(90deg, var(--laser-left), var(--laser-mid) 50%, var(--laser-right)) border-box;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--laser-left) 20%, transparent),
    0 0 7px color-mix(in srgb, var(--laser-left) 22%, transparent),
    0 0 18px color-mix(in srgb, var(--laser-right) 10%, transparent),
    inset 0 0 18px var(--result-inner);
}
.battle.win {
  --result-left: rgba(43, 82, 210, 0.48);
  --result-right: rgba(224, 65, 58, 0.1);
  --laser-left: #4f72ff;
  --laser-mid: #9b65ff;
  --laser-right: #ff4a6d;
  --result-inner: rgba(84, 103, 255, 0.05);
  --laser-glow: 0 0 5px rgba(91, 116, 255, 0.5), 0 0 12px rgba(155, 101, 255, 0.2);
}
.battle.loss {
  --result-left: rgba(224, 65, 58, 0.2);
  --result-right: rgba(43, 82, 210, 0.48);
  --laser-left: #ff4a6d;
  --laser-mid: #9b65ff;
  --laser-right: #4f72ff;
  --result-inner: rgba(84, 103, 255, 0.05);
  --laser-glow: 0 0 5px rgba(91, 116, 255, 0.5), 0 0 12px rgba(155, 101, 255, 0.2);
}
.battle.draw {
  --result-left: rgba(124, 132, 148, 0.26);
  --result-right: rgba(124, 132, 148, 0.26);
  --laser-left: #767d8b;
  --laser-mid: #b3bac7;
  --laser-right: #767d8b;
  --result-inner: rgba(179, 186, 199, 0.05);
  --laser-glow: 0 0 5px rgba(160, 168, 182, 0.3), 0 0 12px rgba(160, 168, 182, 0.12);
}
.battle.win::before, .battle.win::after,
.battle.loss::before, .battle.loss::after,
.battle.draw::before, .battle.draw::after {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  z-index: 1;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--laser-left) 18%, var(--laser-mid) 50%, var(--laser-right) 82%, transparent);
  box-shadow: var(--laser-glow);
}
.battle.win::before, .battle.loss::before, .battle.draw::before { top: -1px; }
.battle.win::after, .battle.loss::after, .battle.draw::after { bottom: -1px; }
.battle.win .side-clan, .battle.win .battle-time, .battle.win .score .sep,
.battle.loss .side-clan, .battle.loss .battle-time, .battle.loss .score .sep,
.battle.draw .side-clan, .battle.draw .battle-time, .battle.draw .score .sep {
  color: rgba(226, 233, 248, 0.62);
}
.battle.battle-target { animation: battle-target-pulse 2.4s ease; }
@keyframes battle-target-pulse {
  0%, 100% { outline: 2px solid transparent; outline-offset: 3px; }
  18%, 72% { outline-color: rgba(255, 214, 99, 0.95); }
}
.battle-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.medals-slot.left { justify-self: start; }
.medals-slot.right { justify-self: end; }
.battle-mode { display: inline-flex; align-items: center; gap: 0.5rem; justify-self: center; }
.mode-icon { width: 32px; height: 32px; object-fit: contain; }
.mode-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.mode-name { font-weight: 700; }
.mode-sub { font-size: 0.72rem; font-weight: 600; color: var(--muted); }
.battle-body { position: relative; display: flex; align-items: flex-start; justify-content: center; }
.side-info { position: absolute; top: 0; z-index: 1; display: flex; flex-direction: column; width: 132px; }
.side-info.left { left: 0; align-items: flex-start; text-align: left; }
.side-info.right { right: 0; align-items: flex-end; text-align: right; }
.side-name { font-weight: 700; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.side-clan { color: var(--muted); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.side-name a, .side-clan a {
  display: block; max-width: 100%; overflow: hidden; color: inherit;
  text-decoration: none; text-overflow: ellipsis;
  transition: color 0.14s ease, text-shadow 0.14s ease;
}
.side-name a:hover, .side-name a:focus-visible {
  color: #fff; text-decoration: underline; text-decoration-color: rgba(126, 162, 255, 0.75);
  text-underline-offset: 3px; text-shadow: 0 0 9px rgba(91, 124, 255, 0.35);
}
.side-clan a:hover, .side-clan a:focus-visible {
  color: rgba(226, 233, 248, 0.9); text-decoration: underline;
  text-decoration-color: rgba(226, 233, 248, 0.42); text-underline-offset: 2px;
}
.side-name a:focus-visible, .side-clan a:focus-visible { outline: 1px solid #7ea2ff; outline-offset: 2px; border-radius: 2px; }
.battle-rounds {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.battle-decks {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center; justify-items: center;
  column-gap: 0.6rem; row-gap: 0.45rem;
}
.deck-actions { display: inline-flex; align-items: center; gap: 5px; }
.battle-deck-actions.own { justify-self: end; }
.battle-deck-actions.opponent { justify-self: start; }
.actions-spacer { width: 0; }
.battle-decks.is-2v2 { grid-template-columns: auto auto auto; }
.battle-2v2-side { display: flex; flex-direction: column; gap: 0.75rem; }
.battle-2v2-side.own { align-items: flex-end; }
.battle-2v2-side.opponent { align-items: flex-start; }
.battle-2v2-player { display: flex; flex-direction: column; gap: 0.45rem; }
.battle-2v2-side.own .battle-2v2-player { align-items: flex-end; }
.battle-2v2-side.opponent .battle-2v2-player { align-items: flex-start; }
.battle.is-2v2 .side-info { bottom: 0; justify-content: space-around; }
.battle-2v2-name { display: none; max-width: 100%; }
.battle-chaos-modifiers {
  display: flex; align-items: center; justify-content: center; gap: 0;
  width: 225px; min-height: 48px; padding-top: 4px;
  border-top: 1px solid var(--panel-inset-border);
}
.battle-chaos-modifiers .chaos-augment + .chaos-augment { margin-left: -2px; }
.battle-chaos-modifiers.own { justify-self: end; }
.battle-chaos-modifiers.opponent { justify-self: start; }
.battle-chaos-modifiers.is-empty { visibility: hidden; }
.chaos-augment {
  position: relative; display: block; width: 44px; height: 44px; flex: none;
}
.chaos-augment-clip {
  position: absolute; display: block; overflow: hidden;
  left: 15%; top: 10%; width: 70%; height: 80%;
  background: var(--panel-inset);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.chaos-augment-art {
  position: absolute; display: block;
  width: 120.9%; height: auto; left: -10.5%; top: -25.9%;
}
.chaos-augment-frame {
  position: absolute; display: block; inset: 0; width: 100%; height: 100%;
  object-fit: contain; pointer-events: none;
}
.elixir {
  display: inline-flex; align-items: center; gap: 0.14rem; min-height: 24px;
  border: 1px solid rgba(238, 90, 244, 0.34); border-radius: 6px;
  padding: 0.05rem 0.36rem 0.05rem 0.2rem;
  background: linear-gradient(135deg, rgba(109, 27, 121, 0.86), rgba(45, 17, 65, 0.92));
  color: #fff; font-size: 0.73rem; font-weight: 850;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.09), 0 0 7px rgba(214, 60, 224, 0.12);
}
.elixir img { width: 17px; height: 19px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.42)); }
.meta-elixir { display: flex; align-items: center; justify-content: flex-end; gap: 0.28rem; margin-top: 0.18rem; }
.deck-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border-radius: 6px;
  border: 1px solid var(--deck-btn-border); background: var(--deck-btn-bg);
  color: var(--deck-btn-fg); cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}
.deck-btn:hover { border-color: var(--deck-btn-hover-border); color: var(--deck-btn-hover-fg); }
.deck-save.saved { background: var(--deck-btn-on); color: #fff; border-color: var(--deck-btn-on); }
.medals { display: inline-flex; gap: 5px; }
.medal-count, .medal-chg {
  display: inline-flex; align-items: center; gap: 0.3rem;
  border: 2px solid #2b2f3a; background: #14161c;
  border-radius: 8px; padding: 0.2rem 0.55rem; font-weight: 800; font-size: 0.82rem; color: #fff;
}
.medal-chg.up { color: #35d07f; border-color: rgba(53, 208, 127, 0.55); }
.medal-chg.down { color: #ff5f5f; border-color: rgba(255, 95, 95, 0.55); }
.medal-chg.zero { color: #9aa0ad; }
.cur-icon {
  width: 18px; height: 18px; object-fit: contain;
  margin-left: -1px; transform: scale(1.12); transform-origin: center;
}

.battle-deck-side { display: flex; align-items: center; }
.battle-tower-troop { display: flex; align-items: center; flex: none; }
.battle-deck-side.tower-left .battle-tower-troop {
  margin-right: 13px; padding-right: 13px;
  border-right: 1px solid var(--panel-inset-border);
}
.battle-deck-side.tower-right .battle-tower-troop {
  margin-left: 13px; padding-left: 13px;
  border-left: 1px solid var(--panel-inset-border);
}
.battle-tower-troop .card,
.battle-tower-troop .card-img,
.battle-tower-troop .card-img img { width: 54px; }
.deck-tower { display: none; }
@media (max-width: 1100px) {
  .battle-tower-troop { display: none; }
  .deck-tower { display: inline-flex; align-items: center; flex: none; }
  .deck-tower .card,
  .deck-tower .card-img,
  .deck-tower .card-img img { width: 26px; }
}
.battle-deck { display: grid; grid-template-columns: repeat(4, 54px); gap: 3px; }
.battle-deck .card { width: 54px; }
.battle-deck .card-img, .battle-deck .card-img img { width: 54px; }
.score { flex: none; font-size: 1.4rem; font-weight: 800; white-space: nowrap; }
.score .sep { color: var(--muted); margin: 0 1px; }
.battle-footer { position: relative; margin-top: 0.45rem; min-height: 26px; }
.battle-more { width: 100%; }
.battle-more summary {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 26px; margin: 0 auto;
  border-radius: 6px; color: rgba(226, 233, 248, 0.68);
  cursor: pointer; list-style: none;
  transition: color 0.18s ease, background 0.18s ease;
}
.battle-more summary::-webkit-details-marker { display: none; }
.battle-more summary:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.battle-more summary:focus-visible { outline: 2px solid var(--laser-left, var(--primary)); outline-offset: 2px; }
.battle-more summary svg { transition: transform 0.25s ease; }
.battle-more[open] summary svg { transform: rotate(180deg); }
.battle-more-content {
  margin: 0.45rem -1rem -0.65rem;
  padding: 1rem 1rem 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(226, 233, 248, 0.68);
  text-align: center; font-size: 0.84rem; font-weight: 600;
  background: rgba(8, 10, 16, 0.24);
  animation: battle-more-reveal 0.22s ease-out;
}
@keyframes battle-more-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
th, td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--panel-inset-border); }
th { background: rgba(9, 12, 20, 0.55); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--panel-muted); }
tbody tr:hover { background: rgba(89, 122, 255, 0.09); }
.clan-card {
  position: relative; overflow: hidden;
  padding: 1rem 1.1rem; border: 1px solid var(--panel-border); border-radius: 8px;
  color: #f3f6ff;
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
  margin-bottom: 0.75rem;
}
.clan-card::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: var(--panel-line);
  box-shadow: 0 0 8px rgba(89, 122, 255, 0.5); pointer-events: none;
}
#profile,
#clan { scroll-margin-top: 108px; }
#clan-header { padding: 1.15rem; overflow: visible; }
.clan-header-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(420px, 1.18fr);
  gap: 1.15rem;
  align-items: stretch;
}
.clan-overview { min-width: 0; }
.clan-head-top { display: flex; align-items: flex-start; gap: 0.85rem; min-height: 70px; }
#clan-header .clan-badge { width: 68px; height: 68px; margin: 0; flex: none; }
.clan-head-names { min-width: 0; padding-top: 0.1rem; }
.clan-name { margin: 0; font-size: 1.35rem; letter-spacing: 0; }
.clan-name .tag {
  display: inline-block; color: rgba(226, 233, 248, 0.55);
  font-size: 0.82rem; font-weight: 500; margin-left: 0.35rem;
}
.clan-desc {
  display: block; margin: 0.3rem 0 0; max-width: 54ch;
  color: rgba(226, 233, 248, 0.72); font-size: 0.82rem; line-height: 1.38;
  overflow-wrap: anywhere;
}
.clan-stat-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px; margin-top: 0.85rem;
}
.clan-stat {
  display: flex; align-items: center; gap: 0.5rem; min-width: 0; min-height: 55px;
  border: 1px solid rgba(123, 145, 216, 0.2); border-radius: 7px;
  padding: 0.35rem 0.48rem;
  background: linear-gradient(135deg, rgba(9, 12, 20, 0.78), rgba(20, 24, 35, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.clan-stat-icon {
  width: 39px; height: 39px; flex: none; object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.42));
}
.clan-stat-copy { display: flex; flex-direction: column; min-width: 0; }
.clan-stat .k {
  color: rgba(226, 233, 248, 0.52); font-size: 0.61rem; font-weight: 750;
  text-transform: uppercase; letter-spacing: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.clan-stat .v {
  color: #fff; font-size: 0.92rem; font-weight: 850; line-height: 1.18;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.clan-stat .detail {
  color: rgba(226, 233, 248, 0.43); font-size: 0.56rem; font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.clan-war-progress {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 286px;
  padding: 0.8rem 0.85rem 0.4rem; overflow: visible;
  border: 1px solid rgba(112, 150, 255, 0.3); border-radius: 7px;
  background:
    radial-gradient(circle at 84% 14%, rgba(255, 206, 83, 0.12), transparent 27%),
    linear-gradient(155deg, rgba(8, 12, 23, 0.9), rgba(12, 19, 38, 0.86) 58%, rgba(18, 15, 31, 0.9));
  box-shadow: inset 0 0 30px rgba(53, 93, 203, 0.08), 0 8px 22px rgba(1, 4, 12, 0.2);
}
.clan-war-progress::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 38%, rgba(113, 164, 255, 0.045) 50%, transparent 62%);
  background-size: 260% 100%; background-position: 130% 0;
  animation: clan-chart-sheen 4.8s 1.2s ease-in-out infinite;
}
.clan-chart-head {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; min-height: 42px; padding: 0 0.25rem;
}
.clan-chart-head > span:first-child { display: flex; flex-direction: column; }
.clan-chart-eyebrow {
  color: rgba(210, 222, 255, 0.5); font-size: 0.61rem; font-weight: 750;
  text-transform: uppercase; letter-spacing: 0;
}
.clan-chart-head strong { color: #f6f8ff; font-size: 0.98rem; letter-spacing: 0; }
.clan-chart-head > img { width: 42px; height: 42px; object-fit: contain; }
.clan-chart-total { display: inline-flex; align-items: center; gap: 0.35rem; }
.clan-chart-total img {
  width: 38px; height: 38px; object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(255, 206, 83, 0.25));
}
.clan-chart-total > span { display: flex; align-items: baseline; gap: 0.38rem; }
.clan-chart-total b { color: #fff; font-size: 1.08rem; font-variant-numeric: tabular-nums; }
.clan-chart-total small { font-size: 0.68rem; font-weight: 800; }
.clan-chart-total .up { color: #65e3a2; }
.clan-chart-total .down { color: #ff7080; }
.clan-chart-total .flat { color: rgba(226, 233, 248, 0.5); }
.clan-war-chart { position: relative; z-index: 1; display: block; width: 100%; flex: 1; min-height: 205px; overflow: visible; }
.clan-chart-grid line { stroke: rgba(183, 203, 255, 0.09); stroke-width: 1; stroke-dasharray: 3 5; }
.clan-chart-grid text {
  fill: rgba(211, 221, 247, 0.38); font-size: 9px; font-weight: 650;
  text-anchor: end; font-variant-numeric: tabular-nums;
}
.clan-chart-area {
  fill: url(#clan-war-area); transform-box: fill-box; transform-origin: left;
  animation: clan-chart-area-in 1.05s 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.clan-chart-line {
  fill: none; stroke: url(#clan-war-line); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  filter: url(#clan-war-glow); stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: clan-chart-line-in 1.25s 0.12s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.clan-chart-point { opacity: 0; transform-box: fill-box; transform-origin: center; animation: clan-chart-point-in 0.35s var(--point-delay) ease-out forwards; }
.clan-chart-point { outline: none; cursor: default; }
.clan-chart-point circle { fill: #11192d; stroke: #9fc1ff; stroke-width: 2.5; transition: r 0.14s ease, filter 0.14s ease; }
.clan-chart-point:hover circle, .clan-chart-point:focus circle { r: 7px; filter: drop-shadow(0 0 4px currentColor); }
.clan-chart-point.up circle { stroke: #64e3a1; }
.clan-chart-point.down circle { stroke: #ff7182; }
.clan-chart-point.flat circle { stroke: #98a8cc; }
.clan-chart-point .point-change { font-size: 9px; font-weight: 850; text-anchor: middle; fill: #aebad6; }
.clan-chart-point.up .point-change { fill: #64e3a1; }
.clan-chart-point.down .point-change { fill: #ff7182; }
.clan-chart-point .point-label { fill: rgba(213, 222, 246, 0.48); font-size: 8.5px; font-weight: 650; text-anchor: middle; }
.clan-chart-tooltip {
  position: absolute; z-index: 5; width: 176px; padding: 0.65rem 0.7rem;
  border: 1px solid rgba(119, 156, 255, 0.48); border-radius: 7px;
  color: #f5f7ff;
  background: linear-gradient(145deg, rgba(17, 24, 44, 0.98), rgba(9, 12, 22, 0.98));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.48), inset 0 1px rgba(255, 255, 255, 0.06);
  pointer-events: none; transform: translate(-50%, -100%);
  animation: clan-tooltip-in 0.14s ease-out;
}
.clan-chart-tooltip[hidden] { display: none; }
.clan-chart-tooltip::after {
  content: ""; position: absolute; left: var(--tooltip-arrow-left, 50%); bottom: -5px; width: 9px; height: 9px;
  border-right: 1px solid rgba(119, 156, 255, 0.48); border-bottom: 1px solid rgba(119, 156, 255, 0.48);
  background: #0b0f1c; transform: translateX(-50%) rotate(45deg);
}
.clan-tooltip-head { display: flex; align-items: center; justify-content: space-between; gap: 0.45rem; }
.clan-tooltip-head strong { font-size: 0.72rem; }
.clan-tooltip-head span {
  flex: none; padding: 0.08rem 0.28rem; border-radius: 4px;
  font-size: 0.58rem; font-weight: 800; background: rgba(151, 166, 200, 0.12);
}
.clan-tooltip-head .up { color: #65e3a2; background: rgba(46, 190, 118, 0.13); }
.clan-tooltip-head .down { color: #ff7887; background: rgba(232, 72, 94, 0.13); }
.clan-tooltip-head .flat { color: #afbad2; }
.clan-tooltip-score { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.52rem; }
.clan-tooltip-score img { width: 30px; height: 30px; object-fit: contain; }
.clan-tooltip-score span { display: flex; flex-direction: column; }
.clan-tooltip-score b { font-size: 1rem; line-height: 1; font-variant-numeric: tabular-nums; }
.clan-tooltip-score small { margin-top: 0.14rem; color: rgba(218, 226, 247, 0.48); font-size: 0.57rem; }
.clan-tooltip-rank {
  margin-top: 0.45rem; padding-top: 0.4rem; border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(218, 226, 247, 0.56); font-size: 0.62rem;
}
.clan-tooltip-rank b { float: right; color: #fff; font-size: 0.68rem; }
.clan-chart-empty { display: grid; flex: 1; place-items: center; color: rgba(226, 233, 248, 0.48); font-size: 0.8rem; }
.clan-chart-loading { display: flex; align-items: flex-end; gap: 7%; flex: 1; padding: 1.4rem 1rem 1.8rem; }
.clan-chart-loading span {
  width: 18%; height: 32%; border-radius: 4px 4px 1px 1px;
  background: linear-gradient(180deg, rgba(108, 151, 255, 0.36), rgba(108, 151, 255, 0.04));
  animation: clan-chart-loading 1.1s ease-in-out infinite alternate;
}
.clan-chart-loading span:nth-child(2) { height: 55%; animation-delay: 0.12s; }
.clan-chart-loading span:nth-child(3) { height: 43%; animation-delay: 0.24s; }
.clan-chart-loading span:nth-child(4) { height: 72%; animation-delay: 0.36s; }
@keyframes clan-chart-line-in { to { stroke-dashoffset: 0; } }
@keyframes clan-chart-area-in { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes clan-chart-point-in { from { opacity: 0; transform: scale(0.35); } to { opacity: 1; transform: scale(1); } }
@keyframes clan-tooltip-in { from { opacity: 0; transform: translate(-50%, calc(-100% + 5px)); } }
@keyframes clan-chart-loading { to { opacity: 0.45; transform: scaleY(0.72); } }
@keyframes clan-chart-sheen { 0%, 58% { background-position: 130% 0; } 82%, 100% { background-position: -30% 0; } }
.clan-summary { color: rgba(239, 243, 252, 0.7); font-size: 0.82rem; font-weight: 650; margin-bottom: 0.6rem; }
.clan-table-wrap {
  position: relative; overflow-x: auto;
  border: 1px solid var(--panel-border); border-radius: 8px;
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
  margin-bottom: 0.75rem;
}
.table-zoom { display: none; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; }
.table-zoom .col-btn {
  min-height: 28px; min-width: 34px; padding: 0.15rem 0.4rem;
  font-size: 1rem; line-height: 1; text-align: center;
}
.table-zoom .col-btn:disabled { opacity: 0.4; cursor: default; }
.table-zoom-value {
  min-width: 3rem; color: var(--panel-muted); font-size: 0.72rem;
  font-weight: 700; font-variant-numeric: tabular-nums; text-align: center;
}
.clan-table-wrap .clan-table { zoom: var(--table-zoom, 1); }

.clan-table { color: #f3f6ff; font-size: 0.88rem; }
.clan-table th {
  background: rgba(8, 10, 15, 0.6); color: rgba(226, 233, 248, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); white-space: nowrap;
}
.clan-table td { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.clan-table th:first-child, .clan-table td:first-child { width: 1%; padding-right: 0.35rem; }
.clan-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); }
.clan-table tbody tr.lb-clan-war-highlight {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--clan-war-color) 16%, transparent), transparent 38%),
    rgba(255, 255, 255, 0.018);
  box-shadow: inset 3px 0 0 var(--clan-war-color);
}
.clan-table tbody tr.lb-clan-war-highlight:hover {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--clan-war-color) 22%, transparent), transparent 42%),
    rgba(255, 255, 255, 0.055);
}
.clan-table tbody tr:last-child td { border-bottom: none; }
.clan-table a { color: #f3f6ff; font-weight: 600; }
.clan-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell-icon { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; margin-right: 4px; }
.league-cell-icon { width: 22px; height: 22px; vertical-align: -6px; margin: -4px 2px -4px -2px; }
.ranked-cell { white-space: nowrap; }
.cell-empty { color: rgba(226, 233, 248, 0.35); }
.rank-cell {
  white-space: nowrap; font-weight: 700;
}
.rank-wrap {
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.rank-main { min-width: 2.45rem; color: rgba(243, 246, 255, 0.86); font-variant-numeric: tabular-nums; }
.rank-delta {
  display: inline-flex; align-items: center; gap: 0.2rem;
  color: rgba(226, 233, 248, 0.52);
  font-size: 0.68rem; font-weight: 850; font-variant-numeric: tabular-nums;
}
.rank-delta i {
  width: 0; height: 0; display: inline-block;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
}
.rank-delta.up { color: #77d99d; }
.rank-delta.up i {
  border-bottom: 7px solid #62e2a0;
  filter: drop-shadow(0 0 4px rgba(98, 226, 160, 0.22));
}
.rank-delta.down { color: #ef8d95; }
.rank-delta.down i {
  border-top: 7px solid #ff7a86;
  filter: drop-shadow(0 0 4px rgba(255, 122, 134, 0.2));
}
.clan-table.sortable th:is([data-sort], [data-river-sort]) { cursor: pointer; user-select: none; transition: color 0.15s, background 0.15s; }
.clan-table.sortable th:is([data-sort], [data-river-sort]):hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.clan-table.sortable th:is([data-sort], [data-river-sort])::after {
  content: "↕"; margin-left: 5px; font-size: 0.72em; opacity: 0.28;
}
.clan-table.sortable th.sorted { color: #fff; background: rgba(88, 124, 255, 0.16); }
.clan-table.sortable th.sorted[data-dir="asc"]::after { content: "▲"; opacity: 1; color: #7ea2ff; }
.clan-table.sortable th.sorted[data-dir="desc"]::after { content: "▼"; opacity: 1; color: #7ea2ff; }
.role-chip {
  display: inline-block; padding: 0.08rem 0.5rem; border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06);
  font-size: 0.74rem; font-weight: 700; white-space: nowrap;
}
.role-chip.role-leader { color: #ffd66f; border-color: rgba(255, 214, 111, 0.45); }
.role-chip.role-coLeader { color: #f3a25c; border-color: rgba(243, 162, 92, 0.4); }
.role-chip.role-elder { color: #7ea2ff; border-color: rgba(126, 162, 255, 0.4); }
#riverrace-status, #warlog-status { color: rgba(255, 255, 255, 0.82); font-size: 0.9rem; }
.race-meta { color: rgba(239, 243, 252, 0.7); font-size: 0.82rem; font-weight: 650; margin-bottom: 0.6rem; }
#tab-clan h3.clan-sub-h {
  margin: 1.1rem 0 0.5rem; font-size: 1rem;
  color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.river-participants-toolbar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem;
}
.river-participants-actions { display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: 0.5rem; }
.river-participants-status { color: var(--panel-muted); font-size: 0.7rem; }
.river-participants-refresh {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 32px;
  padding: 0.3rem 0.65rem; border: 1px solid var(--panel-inset-border); border-radius: 6px;
  background: var(--panel-inset); color: var(--panel-text);
  font-size: 0.76rem; font-weight: 750;
}
.river-participants-refresh:hover { border-color: var(--primary); color: var(--text); }
.river-participants-refresh:disabled { cursor: wait; opacity: 0.62; }
.river-participants-refresh.is-loading svg { animation: river-refresh-spin 0.8s linear infinite; }
.river-participant-divider td {
  padding: 0.38rem 0.65rem; border-top: 3px solid var(--gold); border-bottom: 0;
  background: color-mix(in srgb, var(--gold) 10%, transparent); color: var(--gold);
  font-size: 0.7rem; font-weight: 850; letter-spacing: 0.02em; text-transform: uppercase;
}
.clan-table tbody tr.river-participant-divider:hover {
  background: color-mix(in srgb, var(--gold) 10%, transparent);
}
@keyframes river-refresh-spin { to { transform: rotate(360deg); } }
.race-week-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; margin-bottom: 0.35rem; }
.race-week-title { font-weight: 800; font-size: 0.95rem; }
.race-week-date { color: rgba(226, 233, 248, 0.55); font-size: 0.78rem; }
.warlog-current-section {
  padding-bottom: 1.05rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--panel-inset-border);
}
.warlog-section-head, .warlog-history-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  margin: 0 0 0.55rem; padding: 0 0.15rem;
}
.warlog-section-title { color: var(--panel-text); font-size: 0.82rem; font-weight: 800; }
.warlog-live-status {
  display: inline-flex; align-items: center; gap: 0.42rem;
  color: var(--panel-muted); font-size: 0.7rem; font-weight: 750;
}
.warlog-live-dot {
  width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
.race-week-active { border-color: color-mix(in srgb, var(--primary) 34%, var(--panel-border)); }
.warlog-history-head { margin-bottom: 0.55rem; }
.warlog-history-count { color: var(--panel-dim); font-size: 0.7rem; }
.race-row {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.35rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.9rem;
}
.race-row:last-child { border-bottom: none; }
.race-row.own { background: rgba(88, 124, 255, 0.14); border-radius: 6px; }
.race-rank { width: 2.1rem; flex: none; font-weight: 800; color: rgba(226, 233, 248, 0.6); }
.race-row.own .race-rank { color: #fff; }
.race-clan {
  display: inline-flex; align-items: center; gap: 0.45rem; flex: 1; min-width: 0;
  color: var(--panel-text); font-weight: 700; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.race-clan:hover { color: color-mix(in srgb, var(--primary) 58%, white); }
.race-clan .clan-badge { width: 24px; height: 24px; margin: 0; flex: none; }
.race-sub { flex: none; color: rgba(226, 233, 248, 0.55); font-size: 0.78rem; white-space: nowrap; }
.race-fame { flex: none; font-weight: 800; white-space: nowrap; }
.clan-empty {
  padding: 2rem; border: 1px dashed rgba(255, 255, 255, 0.2); border-radius: 8px;
  color: rgba(235, 239, 248, 0.64); text-align: center;
}
.lb-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.lb-location-field { position: relative; }
.lb-location-button {
  min-height: 36px; min-width: 150px; display: inline-flex; align-items: center; gap: 0.48rem;
  padding: 0.25rem 0.55rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px;
  background: rgba(8, 10, 15, 0.82); color: #eef2fb; font-size: 0.82rem; font-weight: 750;
}
.lb-event-button { min-width: 240px; padding-right: 0.42rem; }
.lb-location-button:hover, .lb-location-button[aria-expanded="true"] {
  border-color: rgba(126, 162, 255, 0.62); background: rgba(18, 28, 58, 0.92);
}
.lb-event-icon {
  width: 26px; height: 26px; object-fit: contain; flex: none;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.36));
}
.lb-event-caret {
  width: 18px; height: 18px; flex: none; margin-left: auto; position: relative;
  border-radius: 5px; background: rgba(255, 255, 255, 0.05);
}
.lb-event-caret::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; border-right: 2px solid rgba(226, 233, 248, 0.78); border-bottom: 2px solid rgba(226, 233, 248, 0.78);
  transform: translate(-50%, -62%) rotate(45deg);
}
.lb-event-button[aria-expanded="true"] .lb-event-caret::before {
  transform: translate(-50%, -38%) rotate(225deg);
}
.lb-location-code {
  flex: none; width: 2rem; min-height: 1.35rem; display: inline-grid; place-items: center;
  border: 1px solid rgba(126, 162, 255, 0.32); border-radius: 5px;
  background: rgba(49, 91, 212, 0.2); color: #dfe7ff; font-size: 0.66rem; font-weight: 900;
}
.lb-location-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-location-menu {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(310px, calc(100vw - 2rem));
  padding: 0.45rem; border: 1px solid rgba(126, 162, 255, 0.24); border-radius: 8px;
  background: rgba(10, 13, 21, 0.98); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
}
.lb-location-search {
  width: 100%; min-height: 32px; margin-bottom: 0.4rem; padding: 0.25rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 7px;
  background: rgba(255, 255, 255, 0.05); color: #eef2fb; font-size: 0.82rem;
}
.lb-location-search:focus { outline: none; border-color: #7ea2ff; box-shadow: 0 0 0 3px rgba(59, 110, 245, 0.14); }
.lb-location-options {
  max-height: 260px; display: grid; gap: 3px; overflow: auto; padding-right: 2px;
}
.lb-location-options button {
  display: flex; align-items: center; gap: 0.48rem; width: 100%; min-height: 32px;
  padding: 0.2rem 0.35rem; border-radius: 6px; color: rgba(231, 236, 248, 0.76);
  background: transparent; text-align: left; font-size: 0.8rem; font-weight: 700;
}
.lb-event-options button { min-height: 42px; gap: 0.6rem; padding: 0.28rem 0.45rem; }
.lb-event-options .lb-event-icon { width: 30px; height: 30px; }
.lb-event-option-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-location-options button:hover, .lb-location-options button.active {
  background: rgba(49, 91, 212, 0.28); color: #fff;
}
.lb-location-empty { padding: 0.65rem; color: rgba(226, 233, 248, 0.5); font-size: 0.8rem; text-align: center; }
.lb-search {
  flex: 1; min-width: 170px; max-width: 260px; min-height: 34px;
  padding: 0.3rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px;
  background: rgba(8, 10, 15, 0.82); color: #eef2fb; font-size: 0.82rem;
}
.lb-search::placeholder { color: rgba(226, 233, 248, 0.38); }
.lb-search:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59, 110, 245, 0.15); }
.lb-summary { margin-left: auto; color: rgba(239, 243, 252, 0.7); font-size: 0.82rem; font-weight: 650; }
#lb-ranked-status, #lb-clan-status, #lb-event-status { color: rgba(255, 255, 255, 0.82); font-size: 0.9rem; }
.lb-loading {
  min-height: 150px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0.7rem; color: var(--panel-muted); font-size: 0.84rem;
}
.lb-loading[hidden] { display: none; }
.lb-loading-ring {
  width: 34px; height: 34px; border: 3px solid var(--panel-inset-border);
  border-top-color: var(--gold); border-radius: 50%; animation: lb-loading-spin 0.8s linear infinite;
}
@keyframes lb-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lb-loading-ring { animation-duration: 1.8s; } }
.lb-empty-cell { padding: 1.6rem; color: rgba(235, 239, 248, 0.6); text-align: center; }
.lb-events-off { display: flex; flex-direction: column; gap: 0.45rem; }
.lb-events-off span { font-size: 0.85rem; max-width: 62ch; margin: 0 auto; }
.lb-pager { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin: 0.6rem 0; }
.lb-pager:empty { display: none; }
.lb-page-btn {
  min-height: 32px; padding: 0.3rem 0.72rem; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(8, 10, 15, 0.82);
  color: #eef2fb; font-size: 0.8rem; font-weight: 700;
}
.lb-page-btn.icon {
  width: 34px; padding: 0; display: inline-grid; place-items: center;
  font-size: 1.02rem; line-height: 1;
}
.lb-page-btn:hover:not(:disabled) { background: #315bd4; border-color: #7894f4; }
.lb-page-btn:disabled { opacity: 0.35; cursor: default; }
.lb-page-info {
  min-width: 4.8rem; text-align: center; color: rgba(239, 243, 252, 0.62);
  font-size: 0.78rem; font-variant-numeric: tabular-nums;
}
.lb-page-info b { color: #fff; }
.lb-list { display: flex; flex-direction: column; gap: 0.55rem; }
.lb-row {
  position: relative; overflow: hidden;
  padding: 0.7rem 0.9rem 0.75rem;
  border: 1px solid var(--panel-border); border-radius: 8px;
  color: #f3f6ff;
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
  opacity: 0; transform: translateY(14px) scale(0.994);
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.lb-row.lb-in { opacity: 1; transform: none; }
.lb-row::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: var(--panel-line);
  box-shadow: 0 0 8px rgba(89, 122, 255, 0.5); pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .lb-row { opacity: 1; transform: none; transition: none; }
}

.lb-row-head { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.lb-rank {
  flex: none; min-width: 4.3rem; display: inline-flex; flex-direction: column; line-height: 1.15;
  font-size: 0.95rem; font-weight: 850; color: rgba(226, 233, 248, 0.62);
  font-variant-numeric: tabular-nums;
}
#lb-ranked-list .lb-rank { min-width: 3.3rem; }
#lb-ranked-list .lb-row-head { gap: 0.45rem; }
.lb-who { display: inline-flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.lb-head-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; flex: none; }
.lb-actions-slot { display: inline-flex; }
@media (max-width: 1100px) {
  .lb-actions-slot { align-items: center; gap: 5px; }
}
.lb-head-actions .lb-elo { margin-left: 0; }
.lb-rank-global { color: rgba(226, 233, 248, 0.38); font-size: 0.62rem; font-weight: 700; white-space: nowrap; }
.lb-player { font-size: 1rem; font-weight: 800; color: #fff; white-space: nowrap; }
.lb-player:hover { color: #9db4ff; text-decoration: none; }
.lb-clan {
  display: inline-flex; align-items: center; gap: 0.3rem; min-width: 0;
  color: rgba(226, 233, 248, 0.66); font-size: 0.84rem; font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb-clan.muted { color: rgba(226, 233, 248, 0.34); }
a.lb-clan:hover { color: #fff; text-decoration: none; }
.lb-clan .clan-badge { width: 20px; height: 20px; margin: 0; flex: none; }
.lb-elo {
  margin-left: auto; flex: none; display: inline-flex; align-items: center;
  border: 2px solid #2b2f3a; background: #14161c; border-radius: 8px;
  padding: 0.14rem 0.5rem; font-weight: 800; font-size: 0.85rem; color: #fff;
}
.lb-row-body { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.55rem; flex-wrap: wrap; }
.lb-deck { display: grid; grid-template-columns: repeat(8, 52px); gap: 3px; min-height: 77px; }
.lb-deck .card, .lb-deck .card-img, .lb-deck .card-img img { width: 52px; }
.lb-deck-empty {
  grid-column: 1 / -1; display: flex; align-items: center;
  color: rgba(226, 233, 248, 0.35); font-size: 0.82rem; white-space: nowrap;
}
.lb-card-skeleton {
  width: 52px; height: 63px; border-radius: 5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.06);
  animation: lb-card-skeleton 1.2s ease-in-out infinite alternate;
}
.lb-card-skeleton:nth-child(2) { animation-delay: 0.08s; }
.lb-card-skeleton:nth-child(3) { animation-delay: 0.16s; }
.lb-card-skeleton:nth-child(4) { animation-delay: 0.24s; }
.lb-card-skeleton:nth-child(5) { animation-delay: 0.32s; }
.lb-card-skeleton:nth-child(6) { animation-delay: 0.4s; }
.lb-card-skeleton:nth-child(7) { animation-delay: 0.48s; }
.lb-card-skeleton:nth-child(8) { animation-delay: 0.56s; }
@keyframes lb-card-skeleton { to { opacity: 0.42; } }
@media (prefers-reduced-motion: reduce) {
  .lb-card-skeleton { animation: none; }
}
.lb-row:not(.lb-deck-pending) .lb-deck { animation: battle-more-reveal 0.24s ease-out; }

.lb-deck-actions { flex: none; }
.lb-stats-slot { flex: 1; min-width: 0; align-self: flex-end; text-align: right; }
.lb-record {
  display: flex; flex-direction: column; justify-content: flex-end;
  flex: 1 1 auto; min-width: 0; text-align: left;
  margin-left: 1.25rem; margin-right: 0.9rem;
  min-height: 84px;
}
.lb-timeline-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.lb-timeline-wrap {
  position: relative; overflow: hidden; cursor: pointer; outline: none;
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 6px;
  background: rgba(5, 7, 13, 0.5);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
}
.lb-timeline { display: block; width: 100%; height: 82px; }
.lb-area { fill: url(#lb-timeline-area); stroke: none; }
.lb-segments { filter: url(#lb-timeline-glow); }
.lb-seg {
  fill: none; stroke-width: 2; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.lb-seg-win { stroke: #53d794; }
.lb-seg-loss { stroke: #f26773; }
.lb-seg-draw { stroke: #8e97a9; }
.lb-seg-other { stroke: #7c8495; stroke-dasharray: 3 3; }
.lb-seg-mode { stroke: rgba(148, 163, 184, 0.42); stroke-width: 1; }
.lb-seg-zero { stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.lb-end { stroke: rgba(8, 10, 15, 0.85); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.lb-end-up { fill: #53d794; }
.lb-end-down { fill: #f26773; }
.lb-end-flat { fill: #8e97a9; }
.lb-timeline-empty {
  display: flex; align-items: center; justify-content: center; height: 82px;
  color: rgba(226, 233, 248, 0.32); font-size: 0.74rem; font-weight: 650;
}
.lb-timeline-flat line {
  stroke: rgba(226, 233, 248, 0.20);
  stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round;
}
.lb-timeline-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.12rem;
  background: rgba(6, 8, 14, 0.88);
  backdrop-filter: blur(1.5px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.24s ease;
}
@media (hover: hover) {
  .lb-timeline-wrap:hover .lb-timeline-overlay { opacity: 1; }
}
.lb-timeline-wrap:focus-visible .lb-timeline-overlay,
.lb-timeline-wrap.is-pinned .lb-timeline-overlay { opacity: 1; }
.lb-timeline-overlay > * { --ov-delay: 0s; animation: lbOvOut 0.2s var(--ov-delay) both; }
.lb-timeline-overlay > *:nth-child(2) { --ov-delay: 0.05s; }
.lb-timeline-overlay > *:nth-child(3) { --ov-delay: 0.1s; }
@media (hover: hover) {
  .lb-timeline-wrap:hover .lb-timeline-overlay > * { animation: lbOvIn 0.26s cubic-bezier(0.22, 1, 0.36, 1) var(--ov-delay) both; }
}
.lb-timeline-wrap:focus-visible .lb-timeline-overlay > *,
.lb-timeline-wrap.is-pinned .lb-timeline-overlay > * {
  animation: lbOvIn 0.26s cubic-bezier(0.22, 1, 0.36, 1) var(--ov-delay) both;
}

@keyframes lbOvIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: none; }
}
@keyframes lbOvOut {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateX(-20px); }
}
.lb-ov-battles { color: rgba(226, 233, 248, 0.62); font-size: 0.7rem; font-weight: 650; }
.lb-ov-battles b { color: #fff; font-size: 0.86rem; font-weight: 850; }
.lb-ov-record {
  display: inline-flex; align-items: baseline; gap: 0.26rem;
  font-size: 1.02rem; font-weight: 850; font-variant-numeric: tabular-nums;
}
.lb-ov-record i { font-style: normal; }
.lb-ov-record em { font-style: normal; color: rgba(226, 233, 248, 0.3); font-weight: 700; }
.lb-ov-record small {
  margin-left: 0.3rem; color: rgba(226, 233, 248, 0.42); font-size: 0.62rem; font-weight: 650;
}
.lb-ov-winrate { color: rgba(226, 233, 248, 0.62); font-size: 0.7rem; font-weight: 650; }
.lb-ov-winrate b { color: #fff; font-size: 0.86rem; font-weight: 850; }
@media (prefers-reduced-motion: reduce) {
  .lb-timeline-overlay { transition: none; }
  .lb-timeline-overlay > * { animation: none; }
  .lb-timeline-wrap:not(:hover):not(.is-pinned) .lb-timeline-overlay > * { opacity: 0; }
}

.lb-clan-war-showcase {
  position: relative; overflow: visible; margin: 0.35rem 0 0.75rem; padding: 0.78rem 0.85rem 0.82rem;
  border: 1px solid rgba(112, 150, 255, 0.3); border-radius: 8px;
  background:
    radial-gradient(circle at 12% 14%, rgba(111, 167, 255, 0.14), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(242, 201, 76, 0.1), transparent 24%),
    linear-gradient(155deg, rgba(8, 12, 23, 0.94), rgba(13, 20, 39, 0.9) 58%, rgba(18, 15, 31, 0.92));
  box-shadow: inset 0 0 30px rgba(53, 93, 203, 0.08), 0 8px 22px rgba(1, 4, 12, 0.2);
}
.lb-clan-war-showcase::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 38%, rgba(113, 164, 255, 0.045) 50%, transparent 62%);
  background-size: 260% 100%; background-position: 130% 0;
  animation: clan-chart-sheen 4.8s 1.2s ease-in-out infinite;
}
.lb-clan-war-showcase-head {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  min-height: 40px; gap: 0.75rem; padding: 0 0.2rem 0.25rem;
}
.lb-clan-war-showcase-head span { display: flex; flex-direction: column; }
.lb-clan-war-showcase-head small {
  color: rgba(210, 222, 255, 0.5); font-size: 0.61rem; font-weight: 750;
  text-transform: uppercase; letter-spacing: 0;
}
.lb-clan-war-showcase-head strong { color: #f6f8ff; font-size: 0.98rem; letter-spacing: 0; }
.lb-clan-war-showcase-head img {
  width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 7px rgba(255, 206, 83, 0.25));
}
.lb-clan-war-showcase-body {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, 0.34fr);
  gap: 0.8rem; align-items: stretch;
}
.lb-clan-war-chart { display: block; width: 100%; min-height: 232px; overflow: visible; }
.lb-clan-war-series path {
  fill: none; stroke: var(--clan-war-color); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--clan-war-color) 58%, transparent));
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: opacity 0.16s ease, stroke-width 0.16s ease, filter 0.16s ease;
  animation: clan-chart-line-in 1.25s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.lb-clan-war-series {
  transition: opacity 0.16s ease;
}
.lb-clan-war-showcase.is-focusing .lb-clan-war-series:not(.active) {
  opacity: 0.24;
}
.lb-clan-war-showcase.is-focusing .lb-clan-war-series.active path {
  stroke-width: 5;
  filter:
    drop-shadow(0 0 7px color-mix(in srgb, var(--clan-war-color) 92%, transparent))
    drop-shadow(0 0 18px color-mix(in srgb, var(--clan-war-color) 50%, transparent));
}
.lb-clan-war-point {
  outline: none; cursor: default;
}
.lb-clan-war-point circle {
  fill: #11192d; stroke: var(--clan-war-color); stroke-width: 2.2;
  opacity: 0; transform-box: fill-box; transform-origin: center;
  transition: r 0.14s ease, filter 0.14s ease;
  animation: clan-chart-point-in 0.32s var(--point-delay) ease-out forwards;
}
.lb-clan-war-point:hover circle,
.lb-clan-war-point:focus circle {
  r: 6.7px;
  filter: drop-shadow(0 0 5px var(--clan-war-color));
}
.lb-clan-war-axis text {
  fill: rgba(211, 221, 247, 0.42); font-size: 10px; font-weight: 700;
  text-anchor: middle; font-variant-numeric: tabular-nums;
}
.lb-clan-war-legend {
  display: grid; gap: 0.35rem; align-content: center; min-width: 0;
}
.lb-clan-war-legend-item {
  display: grid; grid-template-columns: 1.1rem 28px minmax(0, 1fr); align-items: center; gap: 0.42rem;
  min-height: 38px; padding: 0.3rem 0.42rem; border: 1px solid color-mix(in srgb, var(--clan-war-color) 30%, transparent);
  border-radius: 7px; background: linear-gradient(90deg, color-mix(in srgb, var(--clan-war-color) 13%, transparent), rgba(255, 255, 255, 0.035));
  color: #f3f6ff; text-decoration: none;
}
.lb-clan-war-legend-item:hover,
.lb-clan-war-legend-item.active {
  color: #fff; text-decoration: none; border-color: color-mix(in srgb, var(--clan-war-color) 58%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--clan-war-color) 22%, transparent), 0 8px 18px rgba(0, 0, 0, 0.18);
}
.lb-clan-war-legend-item i {
  width: 1.1rem; height: 1.1rem; display: inline-grid; place-items: center;
  border-radius: 5px; background: var(--clan-war-color); color: #07101f;
  font-size: 0.67rem; font-weight: 950; font-style: normal;
}
.lb-clan-war-legend-item .clan-badge { width: 28px; height: 28px; margin: 0; }
.lb-clan-war-legend-item span { min-width: 0; display: flex; flex-direction: column; line-height: 1.12; }
.lb-clan-war-legend-item b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; }
.lb-clan-war-legend-item small { color: rgba(226, 233, 248, 0.56); font-size: 0.67rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.lb-clan-war-legend-item em { font-style: normal; }
.lb-clan-war-legend-item em.up { color: #68e0a5; }
.lb-clan-war-legend-item em.down { color: #ff7f92; }
.lb-clan-war-legend-item em.flat { color: rgba(226, 233, 248, 0.56); }
.lb-clan-war-loading {
  min-height: 210px; display: flex; align-items: center; justify-content: center; gap: 7px;
}
@media (max-width: 640px) {
  .lb-clan-war-showcase-body { grid-template-columns: minmax(0, 1fr); }
  .lb-clan-war-chart { min-height: 180px; }
  .lb-clan-war-legend { align-content: start; }
}
.lb-clan-war-loading span {
  width: 8px; height: 58px; border-radius: 999px; background: #6fa7ff;
  animation: lbClanWarPulse 1.05s ease-in-out infinite;
}
.lb-clan-war-loading span:nth-child(2) { background: #f2c94c; animation-delay: 0.12s; }
.lb-clan-war-loading span:nth-child(3) { background: #68e0a5; animation-delay: 0.24s; }
.lb-clan-war-loading span:nth-child(4) { background: #f07da1; animation-delay: 0.36s; }
@keyframes lbClanWarPulse {
  0%, 100% { transform: scaleY(0.42); opacity: 0.45; }
  50% { transform: scaleY(1); opacity: 1; }
}

@media (max-width: 820px) {
  .lb-deck { grid-template-columns: repeat(4, 52px); }
  .lb-summary { margin-left: 0; width: 100%; }
}
@media (max-width: 560px) {
  .lb-search { max-width: none; }
  .lb-location-field, .lb-location-button { width: 100%; }
  .lb-pager { gap: 0.4rem; }
  .lb-toolbar > .deck-sort-control { flex: none; width: auto; }
  .lb-toolbar > .deck-sort-control button { flex: none; }
  #lb-ranked-scope { order: 1; }
  #lb-ranked-local { order: 2; flex: 1 1 0; min-width: 0; width: auto; }
  #lb-ranked-local .lb-location-button { width: 100%; min-width: 0; }
  .lb-toolbar > .deck-sort-control:not([role="group"]) { order: 3; margin-left: auto; }
  .lb-legend-btn { order: 4; }
  .lb-search { order: 5; flex: 1 0 100%; }
  .lb-location-field { order: 5; flex: 1 0 100%; }
  .meta-filter-chip, .lb-summary { order: 6; }
}
@media (max-width: 560px) {
  #lb-ranked-list .lb-row-head {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center; gap: 2px 8px;
  }
  #lb-ranked-list :is(.lb-who, .lb-head-actions, .lb-actions-slot) { display: contents; }
  #lb-ranked-list .lb-rank { grid-area: 1 / 1; min-width: 0; }
  #lb-ranked-list .lb-player { grid-area: 1 / 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  #lb-ranked-list .lb-actions-slot > .elixir { grid-area: 1 / 3; justify-self: end; }
  #lb-ranked-list .lb-elo { grid-area: 1 / 4; justify-self: end; }
  #lb-ranked-list .lb-clan { grid-area: 2 / 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  #lb-ranked-list .lb-deck-actions { grid-area: 2 / 3 / 3 / 5; justify-self: end; }
  #lb-ranked-list .lb-clan { font-size: 0.74rem; color: rgba(226, 233, 248, 0.5); }
  #lb-ranked-list .lb-clan .clan-badge { width: 15px; height: 15px; }
  #lb-ranked-list .lb-deck {
    flex: 8 1 0; min-width: 0;
    grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px;
    min-height: 0;
  }
  #lb-ranked-list .lb-deck :is(.card, .card-img, .card-img img) { width: 100%; }
  #lb-ranked-list .lb-card-skeleton { width: 100%; height: 43px; }
  #lb-ranked-list .meta-deck-tower { flex: 1 1 0; min-width: 0; margin-left: 0; padding-left: 0.7rem; }
  #lb-ranked-list .meta-deck-tower :is(.card, .card-img, .card-img img) { width: 100%; }
  #lb-ranked-list .lb-record { flex: 1 0 100%; margin: 0.5rem 0 0; text-align: left; }
}
.event-list {
  display: flex; flex-direction: column; gap: 0.38rem;
}
.event-row.lb-row {
  display: grid; grid-template-columns: 4.8rem minmax(140px, 1.4fr) minmax(150px, 1fr) auto;
  align-items: center; gap: 0.75rem;
  min-height: 46px; padding: 0.48rem 0.72rem;
  background:
    linear-gradient(90deg, rgba(83, 203, 255, 0.08), transparent 34%, rgba(255, 255, 255, 0.025) 66%, transparent),
    linear-gradient(145deg, rgba(28, 40, 68, 0.9), rgba(14, 18, 29, 0.97));
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.18s ease,
              filter 0.18s ease, transform 0.18s ease;
}
.event-row.lb-row:hover {
  border-color: rgba(126, 162, 255, 0.46);
  filter: brightness(1.08);
  transform: translateX(2px);
}
.event-row.lb-row::before { display: none; }
.lb-row.event-row.medal-1 {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 218, 128, 0.2), transparent 34%),
    radial-gradient(circle at 86% 100%, rgba(88, 124, 255, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(58, 43, 20, 0.96), rgba(22, 24, 31, 0.98) 55%, rgba(50, 35, 16, 0.92)) padding-box,
    conic-gradient(from var(--profile-gold-angle), var(--medal-dark), var(--medal-mid), var(--medal-hi), var(--medal-mid), var(--medal-dark)) border-box;
}
.lb-row.event-row.medal-2 {
  background:
    radial-gradient(circle at 16% 0%, rgba(230, 238, 248, 0.18), transparent 34%),
    radial-gradient(circle at 82% 100%, rgba(126, 162, 255, 0.1), transparent 34%),
    linear-gradient(145deg, rgba(50, 58, 70, 0.96), rgba(20, 23, 31, 0.98) 56%, rgba(37, 43, 54, 0.92)) padding-box,
    conic-gradient(from var(--profile-gold-angle), var(--medal-dark), var(--medal-mid), var(--medal-hi), var(--medal-mid), var(--medal-dark)) border-box;
}
.lb-row.event-row.medal-3 {
  background:
    radial-gradient(circle at 16% 0%, rgba(238, 158, 92, 0.18), transparent 34%),
    radial-gradient(circle at 82% 100%, rgba(189, 113, 240, 0.1), transparent 34%),
    linear-gradient(145deg, rgba(55, 34, 22, 0.96), rgba(22, 23, 31, 0.98) 56%, rgba(48, 27, 20, 0.92)) padding-box,
    conic-gradient(from var(--profile-gold-angle), var(--medal-dark), var(--medal-mid), var(--medal-hi), var(--medal-mid), var(--medal-dark)) border-box;
}
.event-rank {
  color: rgba(226, 233, 248, 0.66); font-weight: 900; font-variant-numeric: tabular-nums;
}
.event-player {
  color: #fff; font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.event-player:hover, .event-clan:hover { color: #9db4ff; text-decoration: none; }
.event-clan {
  display: inline-flex; align-items: center; gap: 0.3rem; min-width: 0;
  color: rgba(226, 233, 248, 0.62); font-size: 0.82rem; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.event-clan.muted { color: rgba(226, 233, 248, 0.34); }
.event-clan .clan-badge { width: 20px; height: 20px; margin: 0; flex: none; }
.event-result {
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px;
}
.event-score {
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.3rem;
  min-width: 94px;
  color: #ffe9a6; font-weight: 950; font-variant-numeric: tabular-nums;
}
.event-score img { width: 21px; height: 21px; object-fit: contain; }
.event-wins {
  min-width: 58px; height: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid rgba(150, 163, 186, 0.38); border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(176, 185, 202, 0.26), rgba(75, 85, 104, 0.22) 48%, rgba(28, 35, 49, 0.46)),
    rgba(18, 23, 34, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -8px 14px rgba(0, 0, 0, 0.18);
  color: #f4f7ff; font-size: 0.8rem; font-weight: 900; font-variant-numeric: tabular-nums;
}
.event-wins img {
  width: 17px; height: 17px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.event-losses {
  display: inline-grid; grid-template-columns: repeat(5, 23px); gap: 5px;
}
.event-losses i {
  position: relative;
  width: 23px; height: 24px; display: block;
  border: 1px solid rgba(129, 145, 169, 0.42); border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(151, 163, 183, 0.28), rgba(66, 76, 96, 0.22) 45%, rgba(18, 24, 36, 0.5)),
    rgba(15, 20, 31, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -8px 14px rgba(0, 0, 0, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.22);
}
.event-losses i::before,
.event-losses i::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 15px; height: 5px; border-radius: 999px;
  background: linear-gradient(180deg, #ff78a0, #f33272);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.26) inset, 0 0 6px rgba(243, 50, 114, 0.38);
  transform-origin: center;
}
.event-losses i::before { transform: translate(-50%, -50%) rotate(45deg); }
.event-losses i::after { transform: translate(-50%, -50%) rotate(-45deg); }
.event-row.medal .event-rank {
  background-image: linear-gradient(100deg, var(--medal-mid) 6%, var(--medal-hi) 28%, #fff 44%, var(--medal-hi) 60%, var(--medal-mid) 88%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; filter: drop-shadow(0 1px 6px var(--medal-glow));
}
.event-pager { margin: 0.55rem 0; }
@media (max-width: 720px) {
  .event-row.lb-row {
    grid-template-columns: auto minmax(0, 1.6fr) minmax(0, 1fr) auto;
    align-items: center; gap: 0 0.55rem; min-height: 40px; padding: 0.4rem 0.6rem;
  }
  .event-result { grid-column: auto; justify-content: flex-end; }
  .event-score { min-width: 0; }
}
@media (max-width: 560px) {
  .event-row.lb-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .event-clan { display: none; }
  .event-rank { font-size: 0.86rem; }
  .event-score { font-size: 0.9rem; }
  .event-score img { width: 18px; height: 18px; }
}

@keyframes mtPodiumRise {
  0% { transform: scaleY(0); }
  70% { transform: scaleY(1.04); }
  100% { transform: scaleY(1); }
}
@keyframes mtPodiumSettle {
  0% { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes mtWinnerCardIn {
  0% { opacity: 0; transform: translateY(16px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mtSpotlightSweep {
  0% { opacity: 0; transform: skewX(var(--mt-beam-skew, 0deg)) translateY(-30px) scaleX(0.7); }
  100% { opacity: 0.76; transform: skewX(var(--mt-beam-skew, 0deg)) translateY(0) scaleX(1); }
}
@keyframes mtCrestFlash {
  0% { opacity: 0; transform: scaleX(0.24); }
  48% { opacity: 1; }
  100% { opacity: 0.5; transform: scaleX(1); }
}
@keyframes mt-empress-enter {
  from { opacity: 0; transform: translateY(34px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mt-spotlight-enter {
  from { opacity: 0; transform: scaleX(0.3) scaleY(0.18); filter: blur(18px); }
  to { opacity: 0.72; transform: scale(1); filter: blur(13px); }
}
@keyframes mt-spotlight-breathe {
  from { opacity: 0.58; }
  to { opacity: 0.78; }
}
@keyframes mt-dragon-enter {
  from { opacity: 0; transform: translate(var(--mt-scene-x), var(--mt-scene-y)) scale(0.78); filter: blur(5px) drop-shadow(0 18px 22px rgba(0, 0, 0, 0.38)); }
  to { opacity: 1; transform: translate(0, 0) scale(1); filter: blur(0) drop-shadow(0 18px 22px rgba(0, 0, 0, 0.38)); }
}
@keyframes mt-dragon-float {
  from { transform: translateY(0); }
  to { transform: translateY(-7px); }
}
@keyframes mt-nav-glow {
  0%, 58%, 100% { opacity: 0; transform: scaleY(0.35); }
  70% { opacity: 0.72; transform: scaleY(1); }
  84% { opacity: 0.18; transform: scaleY(0.72); }
}
@keyframes mt-card-jump-pulse {
  0% { background: rgba(90, 213, 225, 0.16); box-shadow: inset 3px 0 0 rgba(105, 226, 236, 0.95); }
  100% { background: transparent; box-shadow: inset 3px 0 0 rgba(105, 226, 236, 0); }
}
.feature-stage {
  min-height: 260px; padding: 1rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
}
.feature-stage > span {
  color: rgba(225, 231, 246, 0.48); font-size: 0.64rem; font-weight: 800;
  text-transform: uppercase;
}
.feature-stage h2 { margin: 0.12rem 0 0; color: #fff; font-size: 1.35rem; letter-spacing: 0; }
#decks-info { font-size: 0.85rem; }
.deck-cards { display: flex; gap: 3px; }
.deck-cards .card { width: 52px; }
.deck-cards .card-img, .deck-cards .card-img img { width: 52px; }
.wr-good { color: var(--win); font-weight: 700; }
.wr-bad { color: var(--loss); font-weight: 700; }
.meta-toolbar-controls { display: inline-flex; align-items: center; gap: 0.4rem; }
.meta-tiers {
  display: inline-flex; gap: 3px; margin: 0.15rem 0 0.2rem; padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px;
  background: rgba(8, 10, 15, 0.76);
}
.meta-tier {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 5.6rem; padding: 0.34rem 0.8rem; border-radius: 7px;
  background: transparent; color: rgba(231, 236, 248, 0.58);
  transition: background 0.16s ease, color 0.16s ease;
}
.meta-tier b { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.01em; }
.meta-tier span { font-size: 0.66rem; font-weight: 650; opacity: 0.72; font-variant-numeric: tabular-nums; }
.meta-tier:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.meta-tier.active { color: #fff; }
.meta-loading { margin: 0.9rem 0 1.1rem; }
.meta-loading-bar {
  position: relative; overflow: hidden;
  padding: 0.7rem 1rem 0.8rem;
  border: 1px solid var(--panel-border); border-radius: 8px;
  background: var(--panel-bg);
  box-shadow: 0 8px 24px rgba(3, 6, 14, 0.24);
}
.meta-loading-bar::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: var(--panel-line);
  box-shadow: 0 0 8px rgba(89, 122, 255, 0.5); pointer-events: none;
}
.meta-loading-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: 0.55rem;
}
.meta-loading-label { color: #fff; font-size: 0.86rem; font-weight: 750; }
.meta-loading-count {
  color: rgba(226, 233, 248, 0.6); font-size: 0.76rem; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.meta-progress {
  position: relative; overflow: hidden; height: 6px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.meta-progress > i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #587cff, #bd71f0);
  box-shadow: 0 0 10px rgba(120, 130, 255, 0.55);
  transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.meta-progress.indeterminate > i {
  width: 32%; animation: meta-progress-sweep 1.15s ease-in-out infinite;
}
@keyframes meta-progress-sweep {
  0% { transform: translateX(-105%); }
  100% { transform: translateX(320%); }
}
.meta-skeleton { display: grid; gap: 0.55rem; margin-top: 0.75rem; }
.skel-deck {
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 8px;
  background: rgba(14, 17, 26, 0.72);
}
.skel-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.skel-line, .skel-card {
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.06);
  animation: lb-card-skeleton 1.2s ease-in-out infinite alternate;
}
.skel-line { height: 12px; }
.skel-rank { width: 2.6rem; }
.skel-usage { width: 11rem; }
.skel-score { width: 3.4rem; height: 20px; margin-left: auto; }
.skel-cards { display: grid; grid-template-columns: repeat(8, 52px); gap: 3px; }
.skel-card { height: 63px; }
.skel-card:nth-child(2) { animation-delay: 0.08s; }
.skel-card:nth-child(3) { animation-delay: 0.16s; }
.skel-card:nth-child(4) { animation-delay: 0.24s; }
.skel-card:nth-child(5) { animation-delay: 0.32s; }
.skel-card:nth-child(6) { animation-delay: 0.4s; }
.skel-card:nth-child(7) { animation-delay: 0.48s; }
.skel-card:nth-child(8) { animation-delay: 0.56s; }
@media (prefers-reduced-motion: reduce) {
  .skel-line, .skel-card { animation: none; }
  .meta-progress.indeterminate > i { animation: none; width: 100%; opacity: 0.5; }
  .meta-progress > i { transition: none; }
}
@media (max-width: 900px) {
  .skel-cards { grid-template-columns: repeat(4, 52px); }
}
@media (max-width: 560px) {
  .meta-tiers { padding: 2px; border-radius: 8px; }
  .meta-tier { min-width: 0; padding: 0.22rem 0.55rem; gap: 0; }
  .meta-tier b { font-size: 0.76rem; }
  .meta-tier span { font-size: 0.6rem; }
}

.meta-overview {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(150px, 200px) 1fr; gap: 1.1rem;
  margin: 0.9rem 0 1.1rem; padding: 0.85rem 1rem 0.75rem;
  border: 1px solid var(--panel-border); border-radius: 8px;
  color: #f3f6ff;
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
}
.meta-overview::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: var(--panel-line);
  box-shadow: 0 0 8px rgba(89, 122, 255, 0.5); pointer-events: none;
}
.meta-stats {
  display: flex; flex-direction: column; justify-content: center; gap: 0.55rem;
  padding-right: 1.1rem; border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.meta-stat { display: flex; align-items: center; gap: 0.7rem; }
.meta-stat-icon {
  width: 42px; height: 42px; flex: none; object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}
.meta-stat-copy { display: flex; flex-direction: column; min-width: 0; }
.meta-stat-copy b {
  display: block; color: #fff; font-size: 1.2rem; font-weight: 850; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.meta-stat-copy span {
  color: rgba(226, 233, 248, 0.55); font-size: 0.68rem; font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.lb-row.medal {
  border: 2px solid transparent;
  background:
    var(--panel-bg) padding-box,
    conic-gradient(
      from var(--profile-gold-angle),
      var(--medal-dark) 0deg,
      var(--medal-mid) 58deg,
      var(--medal-hi) 84deg,
      var(--medal-mid) 112deg,
      var(--medal-dark) 178deg,
      var(--medal-mid) 240deg,
      var(--medal-hi) 268deg,
      var(--medal-mid) 296deg,
      var(--medal-dark) 360deg
    ) border-box;
  box-shadow:
    0 0 0 1px var(--medal-ring),
    0 0 14px var(--medal-glow),
    0 14px 34px rgba(0, 0, 0, 0.26);
}
.lb-row.medal::before { display: none; }
.lb-row.medal .lb-rank {
  background-image: linear-gradient(100deg, var(--medal-mid) 6%, var(--medal-hi) 28%, #fff 44%, var(--medal-hi) 60%, var(--medal-mid) 88%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-weight: 900;
  filter: drop-shadow(0 1px 6px var(--medal-glow));
  animation: medal-sheen 5s ease-in-out infinite;
}

:is(.lb-row, .lb-season-entry).medal-1 {
  --medal-hi: #fff2ba; --medal-mid: #f0c04a; --medal-dark: #a9761b;
  --medal-ring: rgba(247, 190, 73, 0.3); --medal-glow: rgba(247, 190, 73, 0.3);
}
:is(.lb-row, .lb-season-entry).medal-2 {
  --medal-hi: #ffffff; --medal-mid: #dce4ee; --medal-dark: #8494a8;
  --medal-ring: rgba(220, 228, 238, 0.26); --medal-glow: rgba(220, 228, 238, 0.24);
}
:is(.lb-row, .lb-season-entry).medal-3 {
  --medal-hi: #ffd9ae; --medal-mid: #e09a5c; --medal-dark: #96551f;
  --medal-ring: rgba(224, 154, 92, 0.28); --medal-glow: rgba(224, 154, 92, 0.26);
}
.lb-row.medal-1 { isolation: isolate; }
.lb-row.medal-1::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    104deg,
    transparent 12%,
    rgba(255, 226, 158, 0.04) 30%,
    rgba(255, 236, 190, 0.11) 50%,
    rgba(255, 226, 158, 0.04) 70%,
    transparent 88%
  );
  transform: translateX(-85%);
}
@media (prefers-reduced-motion: no-preference) {
  .lb-row.medal-1::after { animation: medal-shine 26s linear infinite; }
}
@keyframes medal-shine {
  0% { transform: translateX(-85%); }
  100% { transform: translateX(85%); }
}

@keyframes medal-sheen {
  0%, 100% { background-position: 100% 50%; }
  50% { background-position: 0% 50%; }
}
@keyframes popular-sheen {
  0%, 100% { background-position: 100% 50%; }
  50% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: no-preference) {
  .lb-row.medal-1 { animation: profile-border-orbit 7s linear infinite; }
  .lb-row.medal-2 { animation: profile-border-orbit 9s linear infinite; }
  .lb-row.medal-3 { animation: profile-border-orbit 11s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .lb-row.medal .lb-rank { animation: none; background-position: 44% 50%; }
}

.meta-chart { margin: 0; min-width: 0; }
.meta-chart figcaption {
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.25rem;
}
.meta-chart figcaption b { color: #fff; font-size: 0.82rem; font-weight: 800; }
.meta-chart figcaption span { color: rgba(226, 233, 248, 0.45); font-size: 0.7rem; font-weight: 650; }
.meta-chart-plot { position: relative; container-type: inline-size; }
.meta-scatter { display: block; width: 100%; height: auto; overflow: visible; }
.meta-chart-plot .meta-scatter-ssr-narrow { display: none; }
@container (max-width: 459px) {
  .meta-chart-plot .meta-scatter-ssr-wide { display: none; }
  .meta-chart-plot .meta-scatter-ssr-narrow { display: block; }
}
.mc-grid { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.mc-axis { stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; }
.mc-tick, .mc-axis-label {
  fill: rgba(226, 233, 248, 0.45); font-size: 9px; font-weight: 650; font-family: inherit;
}
.mc-axis-label { font-size: 8.5px; font-weight: 800; letter-spacing: 0.1em; }
.mc-avg { stroke: rgba(226, 233, 248, 0.3); stroke-width: 1; stroke-dasharray: 4 3; }
.mc-avg-label {
  fill: rgba(226, 233, 248, 0.55); font-size: 8.5px; font-weight: 700; font-family: inherit;
  paint-order: stroke; stroke: #171b28; stroke-width: 3px; stroke-linejoin: round;
}
@media (max-width: 1100px) {
  .mc-tick, .mc-axis-label { fill: rgba(226, 233, 248, 0.55); font-size: 11px; }
  .mc-axis-label { font-size: 10px; }
  .mc-avg-label { fill: rgba(226, 233, 248, 0.62); font-size: 10px; }
}
.mc-dot {
  fill: #6f8dff; fill-opacity: 0.78;
  stroke: rgba(14, 17, 26, 0.9); stroke-width: 2;
  cursor: pointer; transition: fill 0.12s, fill-opacity 0.12s;
  transform-box: fill-box; transform-origin: center;
  animation: mc-pop 0.38s cubic-bezier(0.22, 0.9, 0.32, 1) both;
}
.mc-dot-lead { animation-name: mc-pop-lead; animation-duration: 0.5s; }

@keyframes mc-pop {
  0% { transform: scale(0.2); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes mc-pop-lead {
  0% { transform: scale(0.2); opacity: 0; }
  72% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-dot, .mc-dot-lead { animation: none; }
}
.mc-dot:hover, .mc-dot.active, .mc-dot:focus-visible {
  fill: #bd71f0; fill-opacity: 1; stroke: rgba(255, 255, 255, 0.55); outline: none;
}
.mc-tip {
  position: absolute; transform: translate(-50%, -100%);
  padding: 0.42rem 0.6rem; border: 1px solid rgba(99, 125, 215, 0.5); border-radius: 8px;
  background: rgba(11, 14, 22, 0.96); color: #f3f6ff;
  font-size: 0.74rem; font-weight: 650; line-height: 1.4;
  white-space: nowrap; pointer-events: none; z-index: 5;
  box-shadow: 0 8px 24px rgba(3, 6, 14, 0.45);
}
.mc-tip b { color: #fff; font-weight: 850; }
.mc-tip .record-wins { color: #62e2a0; }
.mc-tip .record-losses { color: #ff7a86; }
.meta-deck { margin-bottom: 0.6rem; }
.meta-deck.linked { border-color: rgba(155, 122, 240, 0.85); box-shadow: 0 8px 26px rgba(3, 6, 14, 0.3), 0 0 0 1px rgba(189, 113, 240, 0.35); }
.meta-usage {
  display: inline-flex; align-items: center; gap: 0.7rem;
  color: rgba(226, 233, 248, 0.6); font-size: 0.84rem; font-weight: 650; white-space: nowrap;
}
.meta-usage > span { display: inline-flex; align-items: center; gap: 0.28rem; }
.meta-usage img {
  width: 17px; height: 17px; object-fit: contain; flex: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
.meta-usage b { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.meta-title { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.meta-name-line { display: flex; align-items: baseline; gap: 0.45rem; min-width: 0; }
.meta-deck .lb-rank { min-width: 0; }
.meta-deck-name {
  margin: 0; min-width: 0; color: #fff; font-size: 1rem; font-weight: 800; line-height: 1.25;
  overflow-wrap: anywhere;
}
.meta-head-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; flex: none; }
.meta-deck-actions { flex: none; }
.meta-deck-tower {
  flex: none; margin-left: 0.35rem; padding-left: 1.05rem;
  border-left: 1px solid rgba(148, 163, 184, 0.28);
}
.meta-deck-tower .card, .meta-deck-tower .card-img, .meta-deck-tower .card-img img { width: 52px; }

.meta-score { position: relative; gap: 0.32rem; cursor: help; }
.meta-score em {
  font-style: normal; color: rgba(226, 233, 248, 0.5);
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.meta-score:hover, .meta-score:focus-visible { border-color: #587cff; outline: none; }
.meta-score-tip {
  position: fixed; width: 224px; padding: 0.62rem 0.7rem;
  transform: none; text-align: left; font-weight: 650;
  background: linear-gradient(145deg, #131b33, #090c16);
  z-index: 60;
  animation: meta-score-tip-in 0.14s ease-out;
}
.meta-score-tip::after {
  top: -5px; bottom: auto; left: auto; right: 18px;
  border: 0; border-left: 1px solid rgba(119, 156, 255, 0.48); border-top: 1px solid rgba(119, 156, 255, 0.48);
  background: #111828; transform: rotate(45deg);
}
@keyframes meta-score-tip-in { from { opacity: 0; transform: translateY(-4px); } }
.score-parts { display: block; margin-top: 0.55rem; }
.score-part + .score-part { margin-top: 0.42rem; }
.score-part-head {
  display: flex; align-items: baseline; gap: 0.35rem; margin-bottom: 0.22rem;
  color: rgba(218, 226, 247, 0.62); font-size: 0.66rem;
}
.score-part-head em {
  font-style: normal; color: rgba(218, 226, 247, 0.38); font-size: 0.58rem; font-weight: 700;
}
.score-part-head b { margin-left: auto; color: #fff; font-size: 0.68rem; font-variant-numeric: tabular-nums; }
.score-part-track {
  height: 5px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
.score-part-track i { display: block; height: 100%; border-radius: 999px; }
.score-part-players .score-part-track i { background: linear-gradient(90deg, #3f63d8, #7ea2ff); }
.score-part-battles .score-part-track i { background: linear-gradient(90deg, #8b4ec4, #bd71f0); }
.score-part-winrate .score-part-track i { background: linear-gradient(90deg, #168452, #43d389); }
.meta-score-tip .clan-tooltip-rank { display: block; }
.meta-toolbar-left { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; min-width: 0; }
.meta-filter-btn { display: inline-flex; align-items: center; gap: 0.42rem; padding-left: 0.5rem; }
.meta-filter-btn img {
  width: 19px; height: 19px; flex: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

.meta-filter-chip {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.16rem 0.3rem 0.16rem 0.16rem;
  border: 1px solid rgba(99, 125, 215, 0.5); border-radius: 999px;
  background: rgba(49, 91, 212, 0.16);
  color: #f3f6ff; font-size: 0.76rem; font-weight: 700;
}
.meta-filter-chip[hidden] { display: none; }
.meta-filter-chip img { width: 26px; height: 32px; object-fit: contain; border-radius: 4px; }
.meta-filter-clear {
  width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12); color: #fff;
  font-size: 0.9rem; line-height: 1; cursor: pointer;
}
.meta-filter-clear:hover { background: #e0413a; }
.card-picker {
  position: relative; overflow: hidden;
  margin: 0 0 0.75rem; padding: 0.9rem 1rem 0.8rem;
  border: 1px solid var(--panel-border); border-radius: 8px;
  color: #f3f6ff;
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
  animation: card-picker-open 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: top;
}
.card-picker[hidden] { display: none; }
@keyframes card-picker-open {
  from { opacity: 0; max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; transform: translateY(-6px); }
  to { opacity: 1; max-height: 1200px; margin-bottom: 0.75rem; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card-picker { animation: none; }
}
.card-picker::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: var(--panel-line);
  box-shadow: 0 0 8px rgba(89, 122, 255, 0.5); pointer-events: none;
}
.card-picker-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.card-picker-head h3 { margin: 0; font-size: 0.95rem; color: #fff; }
.card-picker-head p { margin: 0.18rem 0 0; color: rgba(226, 233, 248, 0.5); font-size: 0.74rem; }
.card-picker-close {
  flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px;
  background: rgba(255, 255, 255, 0.06); color: rgba(226, 233, 248, 0.7);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.card-picker-close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.card-picker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 4px; margin: 0.75rem 0;
}
.card-picker-loading {
  grid-column: 1 / -1; padding: 1.6rem; text-align: center;
  color: rgba(226, 233, 248, 0.6); font-size: 0.85rem;
}
.card-pick {
  display: block; padding: 2px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; cursor: pointer; line-height: 0;
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.card-pick .card, .card-pick .card-img, .card-pick .card-img img { width: 100%; }
.card-pick:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08); border-color: rgba(126, 162, 255, 0.55);
  transform: translateY(-1px);
}
.card-pick.is-picked {
  background: rgba(49, 91, 212, 0.3); border-color: #7ea2ff;
  box-shadow: 0 0 0 1px rgba(126, 162, 255, 0.4), 0 4px 14px rgba(20, 40, 110, 0.45);
}
.card-pick.is-out { cursor: not-allowed; opacity: 0.25; filter: grayscale(1); }

.card-picker-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-top: 0.7rem; border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.card-picker-selection { color: rgba(226, 233, 248, 0.6); font-size: 0.8rem; font-weight: 650; }
.card-picker-selection b { color: #fff; }
@media (max-width: 560px) {
  .card-picker-grid { grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); gap: 2px; margin: 0.55rem 0; }
  .card-pick { padding: 1px; border-radius: 4px; }
}
.meta-load-marker { height: 1px; }
.meta-load-marker[hidden] { display: none; }
.mc-dot-dim { fill-opacity: 0.14; }
.meta-footer { margin-top: 0.55rem; }
.meta-more-content { text-align: left; }
.meta-players-loading { text-align: center; color: rgba(226, 233, 248, 0.6); font-size: 0.82rem; }
.meta-players-head {
  margin-bottom: 0.55rem; color: rgba(226, 233, 248, 0.62); font-size: 0.78rem; font-weight: 650;
}
.meta-players-head b { color: #fff; }
.meta-players-head .sep { padding: 0 0.2rem; color: rgba(226, 233, 248, 0.3); }
.meta-players-table { font-size: 0.82rem; }
.meta-players-table th { background: rgba(8, 10, 15, 0.5); font-size: 0.66rem; }
.meta-players-table th, .meta-players-table td { padding: 0.38rem 0.6rem; }
.meta-players-table a:hover { color: #9db4ff; }
.meta-players-table .rank-cell { color: rgba(226, 233, 248, 0.6); }
.meta-players-clan { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta-players-table .record-wins { color: #62e2a0; font-weight: 700; }
.meta-players-table .record-losses { color: #ff7a86; font-weight: 700; }
.meta-players-table .record-draws { color: #aab2c3; font-weight: 700; }
@media (max-width: 560px) {
  .meta-players-table :is(th, td):nth-child(3),
  .meta-players-table :is(th, td):nth-child(4),
  .meta-players-table :is(th, td):nth-child(6),
  .meta-players-table :is(th, td):nth-child(7) { display: none; }
  .meta-players-table :is(th, td):nth-child(5) { text-align: center; }
}
.meta-record {
  display: flex; flex-direction: column; justify-content: flex-end;
  flex: 1 1 auto; min-width: 0;
  margin-left: 1.25rem; margin-right: 0.9rem;
}
.meta-record .player-deck-metrics { margin-top: 0.4rem; }
.meta-record-metrics { justify-content: center; }

@media (max-width: 860px) {
  .meta-overview { grid-template-columns: 1fr; }
  .meta-stats {
    flex-direction: row; flex-wrap: wrap; gap: 0.9rem;
    padding: 0 0 0.7rem; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .meta-record { width: 100%; margin-left: 0; margin-right: 0; }
}
@media (max-width: 560px) {
  .meta-deck .lb-deck { flex: 1 1 0; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .meta-deck .lb-deck :is(.card, .card-img, .card-img img) { width: 100%; }
  .meta-deck-actions {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: repeat(2, auto); justify-content: end;
    gap: 5px; margin-bottom: -29px;
  }
  .meta-deck-actions > .elixir { grid-column: 1 / -1; justify-self: center; }
  .meta-score { display: none; }

  .meta-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
  .meta-stat { flex-direction: column; align-items: center; gap: 0.2rem; text-align: center; }
  .meta-stat-icon { width: 30px; height: 30px; }
  .meta-stat-copy { align-items: center; }
  .meta-stat-copy b { font-size: 1rem; }
  .meta-stat-copy span { font-size: 0.58rem; letter-spacing: 0.01em; line-height: 1.25; }
}
#tab-geier > .geier-shell ~ h2,
#tab-geier > .geier-shell ~ .hint,
#tab-geier > .geier-shell ~ .plugin-grid { display: none; }
@keyframes geierShellDrift {
  from { background-position: 0% 30%; }
  to { background-position: 100% 70%; }
}
.geier-kicker, .geier-section-heading span, .entry-title > span, .geier-panel-title div > span {
  color: #38bdf8;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
@keyframes geierGatePreviewSlide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.mode-state { position: absolute; top: 0.7rem; right: 0.75rem; color: #6f7c91; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.mode-state.primary { color: var(--mode-accent); }
.accent-blue { --mode-accent: #5b8cff; }.accent-red { --mode-accent: #ff5e68; }.accent-violet { --mode-accent: #a879ff; }
.accent-pink { --mode-accent: #ff75bd; }.accent-green { --mode-accent: #54d898; }.accent-cyan { --mode-accent: #45d6e7; }
@keyframes geierModeCardIn {
  from { opacity: 0; transform: translateY(14px) scale(.982); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes geierBackIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes geierSetupIn {
  from { opacity: 0; transform: translateX(18px) scale(.985); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}
.entry-number { position: absolute; top: 0.35rem; right: 1rem; color: rgba(255, 255, 255, 0.04); font-family: "Clash Display", sans-serif; font-size: 4.8rem; line-height: 1; }
.entry-title { position: relative; z-index: 1; padding-right: 3rem; }
.entry-title h3 { margin: 0.12rem 0 0.35rem; color: #fff; font-size: 1.18rem; }
.entry-title p { margin: 0; color: var(--geier-muted); font-size: 0.78rem; }
.switch-track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: #293345; transition: background 150ms; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #9ba7b9; transition: transform 150ms, background 150ms; }
@keyframes geierPoolCardEnter { from { opacity: 0; transform: translateY(5px) scale(.94); } }
@keyframes geierPoolCardToggle {
  45% { transform: scale(.82); }
}
@keyframes geierGaugeScan { to { stroke-dashoffset: -100; } }
@media (min-width: 761px) {
  main:has(.geier-shell.in-room) { padding-top: 0; }
}
@media all {
  @keyframes geierAuroraA { from { transform: translate(0, 0) scale(1); } to { transform: translate(52vw, 46vh) scale(1.25); } }
  @keyframes geierAuroraB { from { transform: translate(0, 0) scale(1.15); } to { transform: translate(-52vw, 34vh) scale(0.85); } }
}
@keyframes geierPanelPop { from { opacity: 0; transform: scale(.96) translateY(-7px); } to { opacity: 1; transform: none; } }
.ios-switch { position: relative; display: inline-flex; cursor: pointer; }
.ios-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ios-switch-track {
  width: 38px; height: 22px; border-radius: 999px; background: #263450;
  border: 1px solid #33445f; transition: background .16s ease, border-color .16s ease;
  display: block;
}
.ios-switch-knob {
  display: block; width: 16px; height: 16px; margin: 2px; border-radius: 50%;
  background: #cbd5e1; box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  transition: transform .16s cubic-bezier(.4, 0, .2, 1);
}
.ios-switch input:checked + .ios-switch-track { background: var(--primary); border-color: var(--primary-d); }
.ios-switch input:checked + .ios-switch-track .ios-switch-knob { transform: translateX(16px); background: #fff; }
.ios-switch input:focus-visible + .ios-switch-track { outline: 2px solid var(--primary); outline-offset: 2px; }
@keyframes geierChatIn { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes geierChatInMine { from { opacity: 0; transform: translate(10px, 6px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes geierSavedFlash { 0% { opacity: 0; transform: translateX(-4px); } 12% { opacity: 1; transform: none; } 72% { opacity: 1; } 100% { opacity: 0; } }
@keyframes geierReadyBorderTrace { to { --geier-ready-angle: 360deg; } }
@keyframes geierKickOpen { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.spectator-title { margin-top: 1.25rem; }
.plugin-card, .mode-card {
  position: relative; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr;
  min-height: 224px; text-align: left; padding: 0; cursor: pointer;
  border: 1px solid var(--panel-border); border-radius: var(--panel-radius);
  background: var(--panel-bg); box-shadow: var(--panel-shadow);
  color: var(--panel-text); transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s, background 0.12s; text-decoration: none;
}
.plugin-card::before, .mode-card::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: var(--panel-line); box-shadow: var(--panel-line-glow); pointer-events: none;
}
.plugin-card:hover, .mode-card:hover:not(:disabled) {
  transform: translateY(-2px); border-color: var(--deck-btn-hover-border);
  box-shadow: var(--panel-shadow), 0 0 14px rgba(89, 122, 255, 0.18);
  text-decoration: none;
}
.plugin-card h3, .mode-card h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.plugin-card p, .mode-card p { margin: 0; color: var(--panel-muted); font-size: 0.88rem; }
.mode-card:disabled { opacity: 0.5; cursor: default; }
.streamer-back .geier-back-ico { width: 15px; height: 15px; flex: none; }
@keyframes streamer-light { 0%, 65% { left: -40%; } 90%, 100% { left: 125%; } }
@keyframes streamer-seo-sheen { 0% { background-position: 105% 50%; } 92%, 100% { background-position: -5% 50%; } }
.streak-player-search { position: relative; }
.merge-preview-controls button[data-merge-preview-placement="1"],
.merge-preview-controls button[data-merge-preview-placement="2"] { color: var(--win); }
.merge-preview-controls button[data-merge-preview-placement="3"],
.merge-preview-controls button[data-merge-preview-placement="4"] { color: var(--loss); }
.board-preview-controls { flex: 0 0 176px; }
.board-preview-controls #board-preview-players { display: flex; flex-direction: column; gap: .55rem; }
.board-preview-player { display: grid; gap: .25rem; }
.board-preview-player > span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--panel-muted); font-size: .74rem; font-weight: 700;
}
.board-preview-buttons { display: flex; gap: .3rem; }
.board-preview-buttons button { flex: 1; min-width: 0; padding: 0 .25rem; font-size: .78rem; }
.board-preview-buttons button[data-board-preview-result="win"] { color: var(--win); }
.board-preview-buttons button[data-board-preview-result="loss"] { color: var(--loss); }
.streak-preview-kinds { flex: 0 0 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem; }
.streak-preview-kinds[hidden] { display: none; }
.streak-preview-kinds > span { flex: 0 0 100%; text-align: center; color: var(--panel-muted); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
#streak-setup .streak-preview-kinds button { min-width: 96px; font-size: .8rem; }
#streak-setup .streak-preview-kinds button.active { border-color: var(--deck-btn-hover-border); color: var(--panel-text); }
.site-footer { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 1.25rem 2.5rem; }
.site-support {
  position: relative; z-index: 1; flex: none;
  width: 100%; background: var(--support-bg);
  border-top: 1px solid var(--panel-inset-border);
  border-bottom: 1px solid var(--panel-inset-border);
}
.site-support-row {
  display: block; width: 100%; color: var(--gold); text-decoration: none;
}
.site-support-row + .site-support-row { border-top: 1px solid var(--panel-inset-border); }
.site-support-row:hover { text-decoration: none; }
.site-support-inner {
  display: flex; align-items: center; gap: 0.7rem;
  width: 100%; max-width: 1000px; min-height: 39px;
  margin: 0 auto; padding: 0.25rem 1rem;
}
.site-support-art {
  display: flex; flex: none; align-items: center; justify-content: center;
  width: 29px; height: 29px;
}
.site-support-art img { display: block; width: 29px; height: 29px; object-fit: contain; }
.site-support-row:last-child .site-support-art img { transform: translateY(1px); }
.site-support-copy {
  overflow: hidden; min-width: 0;
  color: var(--gold); font-family: "Inter", system-ui, sans-serif;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0;
  line-height: 1.2; white-space: nowrap; text-overflow: ellipsis;
  opacity: 0.88; transition: opacity .15s ease;
}
.site-support-row:hover .site-support-copy { opacity: 1; }
.site-support-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -4px; }
.site-support + .site-legal { margin-top: 0; }
.site-legal {
  position: relative; z-index: 1;
  margin-top: 1.6rem;
  background: #0b0b0d;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.site-legal-inner { max-width: 1000px; margin: 0 auto; padding: 1.1rem 1rem 1.3rem; }
.site-legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.4rem; }
.site-legal-links button,
.site-legal-links a {
  padding: 0.2rem 0; border: none; background: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.82rem; font-weight: 600; white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s;
}
.site-legal-links button:hover,
.site-legal-links a:hover { background: none; color: #fff; }
.site-legal-social { margin-left: auto; gap: 0.7rem; }
.site-legal-social a { width: 20px; height: 20px; }
.site-legal-social img { width: 16px; height: 16px; }
@media (max-width: 680px) {
  .site-legal-social { flex-basis: 100%; margin: 0.45rem 0 0; }
}
.contact-rows { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.1rem; margin: 0.9rem 0 0; }
.contact-rows dt { color: var(--muted); font-size: 0.82rem; }
.contact-rows dd { margin: 0; font-size: 0.92rem; }
.contact-rows dd a { color: var(--gold); text-decoration: none; }
.contact-rows dd a:hover { text-decoration: underline; }
.contact-note { margin: 1rem 0 0; padding-top: 0.85rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.82rem; }
.contact-note a { color: var(--gold); }
.site-legal-foot {
  display: flex; align-items: center; gap: 0.6rem;
  margin-top: 1rem; padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.site-legal-logo { flex: none; border-radius: 5px; opacity: 0.8; }
.site-disclaimer {
  margin: 0; color: rgba(255, 255, 255, 0.38);
  font-size: 0.74rem; font-weight: 500; line-height: 1.45;
}
#tabs .tab-icon { display: inline-flex; align-items: center; }
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.6); }
.modal:not([hidden]) { display: flex; align-items: center; justify-content: center; }
.modal-box {
  position: relative;
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius); color: var(--panel-text);
  padding: 1.6rem; max-width: 320px; text-align: center; box-shadow: var(--panel-shadow);
}
.modal-box::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: var(--panel-line); box-shadow: var(--panel-line-glow); pointer-events: none;
}
.modal-box h3 { margin: 0 0 0.9rem; }
.modal-close {
  position: absolute; top: 6px; right: 10px; width: auto; padding: 0;
  background: none; border: none; font-size: 1.5rem; line-height: 1;
  color: var(--panel-muted); cursor: pointer;
}
.modal-close:hover { color: var(--panel-text); }
.qr-img { display: block; width: 240px; height: 240px; border-radius: 8px; background: #fff; padding: 6px; }
.qr-frame { position: relative; display: inline-block; border-radius: 10px; }
.qr-frame::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 12px; pointer-events: none;
  box-shadow:
    0 0 9px 2px rgba(88, 124, 255, 0.55),
    0 0 20px 6px rgba(189, 113, 240, 0.28);
  animation: qrGlowPulse 2.6s ease-in-out infinite;
}
@keyframes qrGlowPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .qr-frame::after { animation: none; opacity: 0.8; }
}
.cr-link {
  display: inline-block; margin-top: 0.6rem; background: var(--primary); color: #fff;
  padding: 0.5rem 1rem; border-radius: var(--radius-sm); font-weight: 600;
}
.cr-link:hover { background: var(--primary-d); text-decoration: none; }
@media (max-width: 560px) {
  .deck-stats { margin-left: 0; text-align: left; width: 100%; }
  .race-sub { display: none; }
  #clan-header { padding: 0.8rem; }
  .clan-header-layout { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
  #clan-header .clan-badge { width: 58px; height: 58px; }
  .clan-head-top { min-height: 60px; }
  .clan-name { font-size: 1.15rem; }
  .clan-name .tag { display: block; margin: 0.1rem 0 0; }
  .clan-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clan-stat { min-height: 51px; padding-inline: 0.35rem; gap: 0.3rem; }
  .clan-stat-icon { width: 32px; height: 32px; }
  .clan-stat .v { font-size: 0.82rem; }
  .clan-war-progress { min-height: 255px; padding-inline: 0.5rem; }
  .clan-chart-total img { width: 32px; height: 32px; }
  .clan-chart-total b { font-size: 0.92rem; }
  .clan-war-chart { min-height: 190px; }
  .profile-top { grid-template-columns: minmax(0, 1fr) auto; }
  .profile-main { grid-column: 1; grid-row: 1; }
  .profile-league { grid-column: 2; grid-row: 1; }
  .profile-battle-form { grid-column: 1 / -1; grid-row: 2; max-width: none; margin-top: 0.3rem; }
  .player-decks-toolbar { align-items: flex-start; flex-direction: column; gap: 0.55rem; }
  .deck-sort-control { width: 100%; }
  .deck-sort-control { padding: 2px; }
  .deck-sort-control button { flex: 1; min-height: 28px; padding-inline: 0.28rem; font-size: 0.72rem; }
  .meta-toolbar-controls { display: flex; flex-wrap: wrap; width: 100%; }
  .meta-toolbar-controls > #decks-sort { order: 2; flex: 1 0 100%; }
  .meta-toolbar-controls > .deck-sort-control:not(#decks-sort) { order: 1; flex: none; width: auto; }
  .meta-toolbar-controls > .deck-sort-control:not(#decks-sort) button { flex: none; }
  .meta-toolbar-controls > .deck-sort-control:last-child { margin-left: auto; }
  .gift-filter { gap: 0.15rem 0.4rem; }
  .gift-filter button { width: 72px; min-width: 0; padding: 0.3rem 0.15rem 0.45rem; font-size: 0.74rem; }
  .page-intro.gift-rewards-intro h1 { font-size: clamp(1.1rem, 5.4vw, 1.42rem); }
  .gift-filter button em { font-size: 0.72rem; }
  .gift-filter-art { height: 40px; }
  .gift-filter-art img { max-height: 40px; max-width: 48px; }
  .gift-filter-art.is-fan img { max-width: 32px; margin-left: 0; }
  .gift-filter-art.is-fan img + img { margin-left: -12px; }
  .player-deck-grid { grid-template-columns: 1fr; }
  .player-deck-cards { grid-template-columns: repeat(4, 58px); }
  .player-deck-cards .card,
  .player-deck-cards .card-img,
  .player-deck-cards .card-img img { width: 58px; }
  .player-deck-tower { margin-left: 10px; padding-left: 10px; }
  .player-deck-tower .card,
  .player-deck-tower .card-img,
  .player-deck-tower .card-img img { width: 58px; }
  .career-record { grid-template-columns: minmax(0, 1fr) 88px; gap: 0.65rem; padding: 0.8rem; }
  .career-record-copy h3 { font-size: 1.42rem; }
  .career-record-copy p { font-size: 0.68rem; }
  .career-winrate { width: 84px; height: 84px; }
  .career-winrate::before { width: 62px; height: 62px; }
  .career-winrate strong { font-size: 0.96rem; }
  .stats-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-kpi { min-height: 72px; padding: 0.55rem; gap: 0.4rem; }
  .stats-kpi > img { width: 33px; height: 33px; }
  .stats-kpi strong { font-size: 0.82rem; }
  .stats-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .account-progress { align-items: flex-start; flex-direction: column; }
  .account-metrics { width: 100%; gap: 0.7rem 1rem; flex-wrap: wrap; justify-content: flex-start; }
  .account-metric { flex: 1 1 calc(50% - 0.5rem); }
  .favorite-card { min-width: 0; justify-content: flex-start; }
  #tab-gifts { --gift-col: 132px; --gift-gap: 0.5rem; }
  .gift-art { height: 104px; }
  .gift-art > img { max-height: 86px; }
  .gift-rays { width: 190px; height: 190px; }
  .gift-body { gap: 0; padding: 0.55rem 0.6rem 0.65rem; }
  .gift-body h3 { margin: 0.05rem 0 0.55rem; font-size: 0.85rem; }
  .gift-body .gift-cta { min-height: 28px; padding: 0.2rem 0.8rem; font-size: 0.74rem; }
  #search-form, #clan-form { max-width: none; }
  .profile-search-dock { width: calc(100% + 1rem); }
  .player-search-submit { padding-inline: 0.85rem; }
  .site-support-inner { padding-inline: 0.75rem; }
  .site-support-copy { font-size: clamp(0.67rem, 3vw, 0.84rem); }
}
@media (max-width: 360px) {
  .gift-filter button { width: 64px; }
}

@media (min-width: 561px) and (max-width: 820px) {
  .profile-top { grid-template-columns: minmax(0, 1fr) auto; }
  .profile-main { grid-column: 1; grid-row: 1; }
  .profile-league { grid-column: 2; grid-row: 1; }
  .profile-battle-form { grid-column: 1 / -1; grid-row: 2; max-width: none; margin-top: 0.3rem; }
  .clan-header-layout { grid-template-columns: minmax(0, 1fr); }
  .player-deck-grid { grid-template-columns: 1fr; }
  .stats-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-detail-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .page-intro { margin-bottom: 0.7rem; }
  .page-intro > span { margin-bottom: 0.1rem; font-size: 0.65rem; }
  .page-intro h1 { font-size: clamp(0.95rem, 4.6vw, 1.42rem); }
  .page-intro p { margin-top: 0.3rem; font-size: 0.82rem; line-height: 1.38; }
  #player-subtabs { overflow-x: visible; margin-inline: 0; padding-inline: 0; }
  #player-subtabs :is(a, button) {
    flex: 1 1 0; min-width: 0; padding: 0.45rem 0.1rem 0.55rem; text-align: center;
    font-size: clamp(0.6rem, 3vw, 0.86rem); white-space: normal; line-height: 1.2;
    overflow-wrap: anywhere;
  }
  #profile { padding: 0.7rem; }
  .profile-top { gap: 0.5rem; }
  .profile-main { gap: 0.05rem; }
  .pname { margin-bottom: 0.15rem; font-size: 1.3rem; }
  .ptag { font-size: 0.78rem; }
  .pline { gap: 0.32rem; font-size: 0.86rem; }
  .pline.muted { font-size: 0.78rem; }
  .line-icon { width: 16px; height: 16px; }
  .profile-battle-form { margin-top: 0.1rem; }
  .profile-form-chart, .profile-form-match { height: 36px; }
  .profile-league { gap: 0.1rem; align-self: start; }
  .league-icon, .profile-league img { width: 74px; height: 74px; }
  .league-rank { bottom: 2%; font-size: 0.82rem; }
  .league-name { font-size: 0.7rem; }
  .profile-clan { margin-top: 0.5rem; padding-top: 0.45rem; gap: 0.4rem; font-size: 0.95rem; }
  .profile-clan .clan-badge { width: 22px; height: 22px; }
  .profile-clan .tag { font-size: 0.72rem; }
  .battle-decks { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 0.3rem; row-gap: 0.3rem; }
  .battle-deck-side { width: 100%; min-width: 0; }
  .battle-deck { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; width: 100%; }
  .battle-deck .card,
  .battle-deck .card-img,
  .battle-deck .card-img img { width: 100%; }
  .battle-rounds { gap: 0.6rem; }
  .score { font-size: 1rem; }
  .battle-top { grid-template-columns: 1fr auto 1fr; gap: 0.25rem; row-gap: 0.1rem; margin-bottom: 0.4rem; }
  .battle-mode { display: contents; }
  .mode-icon { grid-column: 2; grid-row: 1; justify-self: center; }
  .mode-text {
    grid-column: 1 / -1; grid-row: 2;
    align-items: center; text-align: center; font-size: 0.78rem;
  }
  .mode-name { white-space: nowrap; }
  .mode-sub { font-size: 0.62rem; }
  .cur-icon { width: 14px; height: 14px; }
  .medals-slot { display: flex; align-items: center; min-width: 0; }
  .medals-slot.right { justify-content: flex-end; }
  .medals { gap: 3px; flex-wrap: nowrap; }
  .battle-chaos-modifiers {
    width: 100%; min-height: 0; padding-top: 3px; flex-wrap: wrap;
  }
  .chaos-augment { width: clamp(20px, 7vw, 32px); height: clamp(20px, 7vw, 32px); }
  .medal-count, .medal-chg {
    gap: 0.18rem; border-width: 1px; border-radius: 6px;
    padding: 0.1rem 0.3rem; font-size: 0.68rem;
  }
  .side-name { font-size: 0.76rem; }
  .side-clan { font-size: 0.68rem; }
  .table-zoom { display: flex; }
  .clan-table { font-size: 0.78rem; }
  .clan-table th, .clan-table td { padding: 0.4rem 0.5rem; }
  .clan-table th { font-size: 0.66rem; }
  .clan-table th:first-child, .clan-table td:first-child {
    width: 2.6rem; min-width: 2.6rem; padding-inline: 0.4rem;
  }
  .clan-table th:nth-child(2), .clan-table td:nth-child(2) { min-width: 7.5rem; }
  .clan-table :is(th, td):nth-child(-n + 2) {
    position: sticky; z-index: 2; background: var(--feedback-bg);
  }
  .clan-table.sortable th:is(.sorted, :hover):nth-child(-n + 2) {
    background: linear-gradient(rgba(88, 124, 255, 0.16), rgba(88, 124, 255, 0.16)), var(--feedback-bg);
  }
  .clan-table :is(th, td):first-child { left: 0; }
  .clan-table :is(th, td):nth-child(2) { left: 2.6rem; box-shadow: 1px 0 0 var(--panel-inset-border); }
  .clan-table thead :is(th, td):nth-child(-n + 2) { z-index: 3; }
  #lb-clan-table { table-layout: fixed; width: 100%; font-size: 0.7rem; }
  #lb-clan-table :is(th, td) { padding: 0.38rem 0.3rem; }
  #lb-clan-table th { font-size: 0.55rem; white-space: normal; line-height: 1.2; }
  #lb-clan-table :is(th, td):nth-child(1) { width: 3.5rem; min-width: 0; padding-inline: 0.25rem; }
  #lb-clan-table .rank-wrap { gap: 0.15rem; }
  #lb-clan-table .rank-main { min-width: 0; font-size: 0.62rem; }
  #lb-clan-table .rank-delta { gap: 0.1rem; font-size: 0.52rem; }
  #lb-clan-table .rank-delta i { border-left-width: 3px; border-right-width: 3px; }
  #lb-clan-table .rank-delta.up i { border-bottom-width: 5px; }
  #lb-clan-table .rank-delta.down i { border-top-width: 5px; }
  #lb-clan-table :is(th, td):nth-child(3) { width: 3.7rem; }
  #lb-clan-table :is(th, td):nth-child(4) { width: 3.8rem; }
  #lb-clan-table :is(th, td):nth-child(5) { width: 3.8rem; }
  #lb-clan-table :is(td:nth-child(2), td:nth-child(5)) {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #lb-clan-table td:nth-child(2) a {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #lb-clan-table td:nth-child(2) .clan-badge { width: 16px; height: 16px; vertical-align: -3px; }
  #lb-clan-table :is(th, td):nth-child(-n + 2) { position: static; background: none; box-shadow: none; }
  .favorite-row { gap: 0.45rem; padding: 0.55rem 0; }
  .favorite-id { flex-direction: column; align-items: flex-start; gap: 0; }
  .favorite-name { font-size: 0.82rem; }
  .favorite-tag { font-size: 0.7rem; }
  .favorite-score { font-size: 0.75rem; gap: 0.22rem; }
  .favorite-score img { width: 15px; height: 15px; }
  #col-views, #col-source-nav {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 0.5rem; overflow: visible; margin-inline: 0; padding-inline: 0;
    border-bottom: none;
  }
  #col-views .tab-indicator, #col-source-nav .tab-indicator { display: none; }
  #col-views button, #col-source-nav button {
    flex: none; padding: 0.45rem 0.15rem 0.38rem; text-align: center;
    font-size: clamp(0.62rem, 2.9vw, 0.82rem); line-height: 1.15;
    white-space: normal; overflow-wrap: anywhere;
    border-radius: 0;
    border-bottom: 2px solid var(--panel-inset-border);
  }
  #col-views button.active, #col-source-nav button.active { border-bottom-color: var(--primary); }
  .col-rarity {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas:
      "icon name pct"
      "icon bar  bar"
      "icon need need";
    align-items: center; gap: 0.28rem 0.6rem;
  }
  .col-rarity-icon { grid-area: icon; align-self: center; width: 38px; height: 38px; }
  .col-rarity-name { grid-area: name; }
  .col-rarity > .col-bar { grid-area: bar; }
  .col-rarity-pct { grid-area: pct; align-self: start; }
  .col-rarity-need { grid-area: need; display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; }
  .col-rarity-need img, .col-need img, .col-tower-need img { width: 16px; height: 16px; }
  .col-rarity-need span, .col-need, .col-tower-need { font-size: 0.74rem; }
  .col-rarity-name strong { font-size: 0.84rem; }
  .col-rarity-list { gap: 1.05rem; }
  .col-cards { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 0.3rem 0.28rem; }
  .col-panel:has(.col-specials-center) .col-head { justify-content: center; }
  .col-specials { gap: 0.9rem 1.6rem; }
  .col-special { min-width: 0; width: 100%; }
  .col-special > div { min-width: 0; flex: 1; }
  .col-source-cards img { width: 26px; }
  .col-source-row { gap: 0.5rem; padding: 0.4rem 0.45rem; }
  .col-mastery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 0.6rem; }
  .col-badges-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 0.6rem; }
  .col-mastery-grid .col-badge > img,
  .col-mastery-grid .col-badge > .col-icon-pending { width: 46px; height: 46px; margin: 0; }
  .col-badges-grid .col-badge > img,
  .col-badges-grid .col-badge > .col-icon-pending { width: 54px; height: 54px; margin: 0; }
  .col-badge { gap: 0.45rem; }
  .col-badge strong { font-size: 0.73rem; overflow-wrap: anywhere; }
  .col-badge span { font-size: 0.65rem; }
  .col-badge .col-bar { max-width: none; }
  .col-slots { justify-content: center; }
  .modal-box:has(.col-pick-wide) {
    max-height: calc(100dvh - 1.5rem); overflow-y: auto; padding: 0.9rem;
  }
  .col-pick-body { max-height: none; overflow: visible; }
  .modal-box:has(.col-pop) { width: min(414px, 92vw); max-width: min(414px, 92vw); padding: 1.05rem; }
  .col-detail-forms { gap: 0.3rem 0.5rem; margin-top: 0.5rem; }
  .col-detail-form { gap: 0.28rem; font-size: 0.74rem; }
  .col-detail-form img { width: 16px; height: 16px; }
  .col-pop-card { width: 96px; --art-w: 96px; margin-bottom: 8px; }
  .col-pop h3 { font-size: 1rem; }
  .col-detail-lines { margin-top: 0.7rem; }
  .col-detail-line span { font-size: 0.74rem; }
  .col-detail-line span img { width: 17px; height: 17px; }
  .col-detail-line b { font-size: 0.78rem; }
}
@media (max-width: 440px) { .col-mastery-grid { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .clan-war-progress::after, .clan-chart-loading span,
  .clan-chart-area, .clan-chart-line, .clan-chart-point { animation: none; }
  .clan-chart-line { stroke-dashoffset: 0; }
  .clan-chart-point { opacity: 1; }
  .gift-rays, .gift-art > img { animation: none; }
  .gift-prize-motes i { animation: none; opacity: 0.4; }
  .profile-form-match i { animation: none; opacity: 1; }
}
.builder-two-page .builder-choice { text-decoration: none; }
.builder-two-page .builder-page-dot {
  width: 12px; height: 12px; padding: 0; border-radius: 50%;
  border: 1px solid var(--panel-muted); background: transparent; cursor: pointer;
}
.builder-two-page .builder-page-dot.active { background: var(--text); border-color: var(--text); }
.builder-two-page .builder-page-dot[aria-current="step"] { outline: 2px solid var(--primary); outline-offset: 3px; }
.builder-two-page .builder-stepper { gap: 12px; }
.builder-workspace { max-width: 920px; margin-inline: auto; }
.builder-two-page .builder-workspace { padding: 12px 16px; }
.builder-two-page .builder-workspace .builder-step { padding: 0; animation: none; }
.builder-two-page .builder-wizard-head h1 { font-size: 1.25rem; margin: 4px 0; }
.builder-two-page .builder-card-actions { margin-top: 10px; padding-block: 8px; }
.builder-two-page .builder-tag-panel { padding: 0; border: 0; background: transparent; }
.builder-two-page .builder-tag-panel small { display: none; }
.builder-two-page .builder-status:empty { display: none; }
.builder-two-page .builder-level-section h3 { margin-block: 8px; font-size: .95rem; }
.builder-mode-heading { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 14px; }
.builder-mode-heading img { object-fit: contain; }
.builder-mode-heading h2 { margin: 0; }
.builder-config { border: 0; padding: 0; margin: 0; min-width: 0; }
.builder-two-page .builder-level-section { margin: 0 0 12px; }
.builder-two-page .builder-level-control { width: max-content; max-width: 100%; }
.builder-player-check-row { display: flex; gap: 8px; align-items: center; }
.builder-player-check-row .builder-player-search { flex: 1; min-width: 0; }
.builder-player-confirmation { display: block; color: var(--panel-text); min-height: 1.4em; overflow-wrap: anywhere; }
.builder-filter { margin-top: 12px; border-block: 1px solid var(--panel-inset-border); padding-block: 12px; }
.builder-filter summary { display: flex; gap: 8px; align-items: center; cursor: pointer; flex-wrap: wrap; color: var(--panel-text); }
.builder-filter summary > img { width: 28px; height: 28px; object-fit: contain; }
.builder-filter-count { color: var(--panel-muted); font-size: .82rem; }
.builder-filter-label { margin-left: auto; color: var(--panel-text); text-decoration: underline; }
.builder-filter-label::after { content: " ▾"; }
.builder-filter[open] .builder-filter-label::after { content: " ▴"; }
.builder-filter[open] summary { margin-bottom: 14px; }
.builder-stale { color: var(--gold); }
.builder-preview-cards { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
.builder-preview-cards figure { margin: 0; min-width: 0; text-align: center; }
.builder-preview-cards img { width: 100%; max-height: 90px; object-fit: contain; }
.builder-preview-cards figcaption { font-size: .7rem; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .builder-mode-heading { gap: 8px; }
  .builder-mode-heading img { width: 70px; height: 70px; }
  .builder-mode-heading h2 { font-size: 1.2rem; }
  .builder-preview-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .builder-two-page .builder-wizard-head { gap: 12px; }
}
#tab-builder [hidden] { display: none !important; }

.primary-btn {
  border: 0; border-radius: 11px; padding: 11px 16px;
  background: linear-gradient(135deg, #38bdf8, #2563eb);
  color: white; font-weight: 900; cursor: pointer;
}
.primary-btn:disabled { opacity: 0.55; cursor: wait; }
.builder-main-btn {
  --btn-face: rgba(255, 255, 255, 0.94);
  --btn-edge: rgba(255, 255, 255, 0.16);
  --btn-ink: var(--text-invert);
  --btn-glow: rgba(3, 6, 14, 0.2);
  --btn-glow-strong: rgba(3, 6, 14, 0.28);
  min-height: 34px; padding: 0.3rem 1.15rem; font-size: 0.82rem;
}
.builder-main-btn:hover {
  --btn-face: #fff;
  --btn-edge: #7894f4;
  --btn-ink: #315bd4;
  filter: none;
}
.builder-main-btn:disabled { opacity: 0.55; cursor: wait; transform: none; filter: none; }

.builder-picker-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 12px; }
.builder-picker-head-tools { justify-content: flex-end; }
.builder-picker-head > div { display: grid; gap: 3px; }
.builder-picker-head b { color: #f1f5f9; }
.builder-picker-head small { color: #94a3b8; }
.builder-picker-head input {
  width: 100%; max-width: 270px; border: 1px solid rgba(148, 163, 184, 0.25);
  background: #111b30; color: #f8fafc; border-radius: 10px; padding: 10px 12px;
}

.builder-selected { display: flex; gap: 6px; min-height: 42px; flex-wrap: wrap; padding: 2px 0 8px; }
.builder-selected.has-selection {
  margin-bottom: 8px; padding-bottom: 11px;
  border-bottom: 1px solid rgba(125, 211, 252, 0.22);
}
.builder-selected button {
  position: relative; display: grid; place-items: center; width: 45px; height: 58px;
  background: transparent; border: 0; border-radius: 7px;
  color: white; padding: 0; cursor: pointer;
  filter: drop-shadow(0 5px 9px rgba(0, 0, 0, 0.34));
  transition: transform .16s ease, filter .16s ease;
}
.builder-selected button:hover { transform: translateY(-2px); filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.45)); }
.builder-selected img { width: 100%; height: 100%; object-fit: contain; border-radius: 5px; }
.builder-selected span:not(.builder-chip-mark) { display: none; }
.builder-empty { color: #94a3b8; padding: 10px; }
.builder-card-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 10px;
}
.builder-pick-controls, .builder-pick-mode { display: inline-flex; align-items: center; gap: 6px; }
.builder-pick-mode button, .builder-card-reset {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid rgba(148, 163, 184, 0.25); background: rgba(15, 23, 42, .35);
  color: #cbd5e1; border-radius: 8px; padding: 6px 12px; font-size: 0.8rem; font-weight: 700;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.builder-pick-mode button:hover, .builder-card-reset:hover { border-color: rgba(148, 163, 184, 0.45); }
.builder-card-reset {
  justify-content: center; width: 34px; height: 34px; padding: 0;
  color: var(--loss);
}
.builder-card-reset:hover:not(:disabled) {
  border-color: var(--loss);
  background: color-mix(in srgb, var(--loss) 14%, transparent);
}
.builder-card-reset:disabled { opacity: 0.34; cursor: default; }
.builder-card-reset svg { display: block; }
.builder-card-toolbar > .deck-sort-control { flex: none; width: auto; }
.builder-pick-mode-icon {
  width: 16px; height: 16px; flex: none; object-fit: contain;
}
.builder-pick-mode button[data-builder-pick-mode="include"].active {
  background: rgba(34, 197, 94, 0.18); border-color: #22c55e; color: #86efac;
}
.builder-pick-mode button[data-builder-pick-mode="exclude"].active {
  background: rgba(239, 68, 68, 0.18); border-color: #ef4444; color: #fca5a5;
}
.builder-selected, .builder-banned { position: relative; }
.builder-selected button, .builder-banned button { position: relative; }
.builder-chip-mark {
  position: absolute; left: -3px; bottom: -3px; width: 16px; height: 16px;
  display: grid; place-items: center; pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.builder-chip-mark img { width: 100%; height: 100%; object-fit: contain; }
.builder-banned.has-selection { border-bottom-color: rgba(239, 68, 68, 0.35); }
.builder-banned button > img {
  filter: drop-shadow(0 5px 9px rgba(0, 0, 0, 0.34)) grayscale(0.55);
  border-radius: 5px;
}
.builder-banned button:hover { filter: none; }
.builder-banned button:hover > img { filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.5)) grayscale(0); }
.builder-card.banned { border-color: rgba(239, 68, 68, 0.55); background: rgba(239, 68, 68, 0.1); }
.builder-card-banned-mark {
  position: absolute; top: 1px; right: 1px; width: 17px; height: 17px;
  display: grid; place-items: center; pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}
.builder-card-banned-mark img { width: 100%; height: 100%; object-fit: contain; }
.builder-card { position: relative; }
.builder-card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 3px; overflow: visible; padding: 0;
}
.builder-card-section + .builder-card-section { margin-top: 18px; }
.builder-card-group-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.builder-card-group-head img { width: 22px; height: 22px; object-fit: contain; }
.builder-card-group-head strong {
  color: var(--panel-muted); font-size: 0.76rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.builder-card {
  border: 1px solid transparent; background: transparent;
  border-radius: 7px; padding: 1px; cursor: pointer; line-height: 0;
}
.builder-card:hover { border-color: rgba(125, 211, 252, 0.55); background: rgba(15, 23, 42, .35); }
.builder-card.active {
  border-color: #38bdf8; background: rgba(14, 165, 233, 0.16);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.45), 0 0 10px rgba(56, 189, 248, 0.22);
}
.builder-card:disabled { opacity: 0.34; cursor: not-allowed; }
.builder-card img { width: 100%; aspect-ratio: 285 / 420; object-fit: contain; display: block; border-radius: 6px; }
.builder-card-fallback {
  width: 100%; aspect-ratio: 285 / 420; display: grid; place-items: center;
  border-radius: 6px; background: linear-gradient(145deg, #334155, #172033);
  font-size: 0.9rem; line-height: 1.2; font-weight: 900; color: #7dd3fc;
}

.builder-status { color: rgba(255, 255, 255, 0.82); margin: 16px 2px; }
.builder-status.error {
  padding: 12px 14px; border: 1px solid rgba(251, 191, 36, 0.4); border-radius: 11px;
  background: rgba(245, 158, 11, 0.12); color: #fde68a; font-weight: 600;
}
.builder-results { display: grid; gap: 14px; }
.builder-locked-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 11px; border: 1px solid rgba(125, 211, 252, .22); border-radius: 10px;
  background: rgba(15, 23, 42, .48);
}
.builder-locked-summary > span {
  color: #94a3b8; font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
}
.builder-locked-summary > div { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.builder-locked-summary button {
  width: 34px; height: 44px; padding: 0; border: 0; background: transparent;
  cursor: pointer; filter: drop-shadow(0 4px 7px rgba(0,0,0,.28));
}
.builder-locked-summary img { width: 100%; height: 100%; object-fit: contain; display: block; }
.builder-warning {
  padding: 12px 14px; border: 1px solid rgba(251, 191, 36, 0.35); border-radius: 11px;
  background: rgba(245, 158, 11, 0.09); color: #fde68a; margin-bottom: 10px;
}
.builder-result {
  position: relative; overflow: hidden;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border); border-radius: 8px; padding: 0.7rem 0.9rem 0.75rem;
  color: #e2e8f0;
  box-shadow: var(--panel-shadow);
}
.builder-result::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: var(--panel-line);
  box-shadow: 0 0 8px rgba(89, 122, 255, 0.5); pointer-events: none;
}
.builder-result.recommended {
  border-color: rgba(88, 124, 255, 0.78);
  box-shadow: 0 8px 26px rgba(3, 6, 14, 0.3), 0 0 0 1px rgba(88, 124, 255, 0.24), inset 0 0 22px rgba(83, 110, 215, 0.08);
}
.builder-reveal {
  opacity: 0;
  transform: translateY(14px) scale(0.982);
  filter: blur(5px);
  animation: builderDeckReveal 0.52s cubic-bezier(0.18, 0.9, 0.22, 1) forwards;
  animation-delay: var(--builder-reveal-delay, 0ms);
}
.builder-result.builder-reveal::before {
  opacity: 0;
  animation: builderDeckLineReveal 0.42s ease-out forwards;
  animation-delay: calc(var(--builder-reveal-delay, 0ms) + 140ms);
}
.builder-empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 26px 20px 30px; text-align: center;
}
.builder-empty-state img { width: 128px; height: auto; margin-bottom: 4px; }
.builder-empty-state strong { color: #f1f5f9; font-size: 1.1rem; font-weight: 850; }
.builder-empty-state span { color: #94a3b8; font-size: 0.86rem; }

.builder-result header, .builder-result header > div { display: flex; align-items: center; gap: 10px; }
.builder-result header { justify-content: space-between; }
.builder-result-head-actions { display: flex; align-items: center; gap: 8px; }
.builder-deck-actions { flex: none; }
.builder-confidence-boundary {
  position: relative; overflow: hidden;
  display: flex; align-items: center; min-height: 58px;
  gap: 12px; margin: 14px 2px 2px; padding: 11px 86px 11px 15px;
  border: 1px dashed rgba(251, 191, 36, 0.45); border-radius: 12px;
  background: rgba(245, 158, 11, 0.08); color: #fde68a;
}
.builder-confidence-boundary > div { display: grid; gap: 3px; min-width: 0; }
.builder-confidence-boundary span { color: #cbd5e1; font-size: 0.8rem; }
.builder-confidence-boundary img {
  position: absolute;
  right: 12px;
  bottom: 0;
  width: 62px;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.34));
}
.builder-result.lower-confidence { border-color: rgba(251, 191, 36, 0.22); }
.builder-result h3 { margin: 0; font-size: 1.05rem; color: #f1f5f9; }
.builder-badge {
  display: inline-flex; align-items: center;
  border: 1px solid #0b0d13;
  background: #14161c;
  padding: 0.15rem 0.46rem;
  border-radius: 5px;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 1px 5px rgba(0, 0, 0, 0.22);
}
.builder-badge span {
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: medal-sheen 5s ease-in-out infinite;
}
.builder-badge.recommended {
  border-color: #05070b;
}
.builder-badge.recommended span {
  background-image: linear-gradient(100deg, #9b6b17 6%, #e1ad37 28%, #fff2ba 44%, #f3cf63 60%, #9b6b17 88%);
  filter: drop-shadow(0 1px 4px rgba(247, 190, 73, 0.22));
}
.builder-badge.origin span {
  background-image: none; color: rgba(226, 233, 248, 0.55); animation: none;
}
.builder-badge.challenge-wins.recommended { border-color: var(--gold); }
.builder-badge.popular {
  border-color: #05070b;
}
.builder-badge.popular span {
  background-image: linear-gradient(100deg, #38bdf8 4%, #7dd3fc 24%, #ffffff 42%, #bd71f0 60%, #ff5ec4 84%);
  filter: drop-shadow(0 1px 4px rgba(189, 113, 240, 0.22));
  animation: popular-sheen 5.4s ease-in-out infinite;
}
.builder-rank { font-weight: 900; color: #38bdf8; }
.builder-result-cards {
  display: grid; grid-template-columns: repeat(8, minmax(46px, 52px)) 26px minmax(46px, 52px) minmax(112px, 1fr); gap: 3px; margin: 0.55rem 0 0;
  align-items: start;
}
.saved-deck-cards {
  grid-template-columns: repeat(8, minmax(46px, 52px)) 26px minmax(46px, 52px);
  justify-content: start;
}
.builder-stats-placeholder {
  align-self: stretch;
  min-height: 82px;
  margin-left: 13px;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed rgba(148, 163, 184, 0.16);
  border-radius: 7px;
  background: rgba(8, 10, 15, 0.18);
  color: rgba(226, 233, 248, 0.34);
  font-size: 0.68rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
.builder-result-card { text-align: center; min-width: 0; }
.builder-result-card > div { position: relative; }
.builder-result-card img { width: 100%; height: 82px; object-fit: contain; display: block; }
.builder-result-card.not-unlocked > div > img,
.builder-result-card.not-unlocked > div > .builder-result-fallback {
  filter: grayscale(.86) brightness(.74); opacity: .76;
}
.builder-result-card.not-unlocked > div::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: 5px; background: color-mix(in srgb, var(--feedback-bg) 12%, transparent);
}
.builder-card-lvl {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: -2px; padding: 0 0.3rem 2px; border-radius: 4px;
  min-height: 15px; line-height: 1;
  background: rgba(6, 9, 16, 0.78); border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 0.62rem; font-weight: 800; font-style: normal; color: #fff;
}
.builder-card-lvl .lvl-word { display: none; }
.builder-card-lvl.lvl-gut { border-color: #22c55e; }
.builder-card-lvl.lvl-mittel { border-color: #facc15; }
.builder-card-lvl.lvl-schlecht { border-color: #ef4444; }
.builder-card-lvl.low { color: #fff; }
.builder-lvl { position: relative; display: inline-block; margin-top: -16px; font-style: normal; vertical-align: top; z-index: 1; }
.builder-lvl .col-pop-progress { width: auto; min-width: 22px; height: 15px; margin: 0; padding: 0 4px; box-sizing: content-box; }
.builder-lvl .col-pop-progress > b { line-height: 15px; padding-top: 1px; }
.builder-lvl .col-pop-progress.builder-lvl-fix { background: #000; }
.builder-lvl .col-pop-progress.lvl-gut { border-color: #22c55e; }
.builder-lvl .col-pop-progress.lvl-mittel { border-color: #facc15; }
.builder-lvl .col-pop-progress.lvl-schlecht { border-color: #ef4444; }
.builder-result-card .builder-lvl img.builder-lvl-pfeil {
  position: absolute; z-index: 2; left: -18.7px; top: -5.8px;
  width: 28.7px; height: 28.7px; max-width: none; object-fit: contain;
}
.builder-tower-divider {
  justify-self: center; align-self: center;
  width: 1px; height: 58px; background: rgba(148, 163, 184, 0.28);
}
.builder-tower-card img { width: 100%; height: 82px; object-fit: contain; }
.builder-result-fallback {
  height: 82px; display: grid !important; place-items: center; border-radius: 10px;
  background: linear-gradient(145deg, #334155, #172033);
  font-size: 1.15rem !important; font-weight: 900; color: #7dd3fc;
}
.builder-result details { margin-top: 10px; border-top: 1px solid rgba(148, 163, 184, 0.15); padding-top: 10px; }
.builder-result summary { cursor: pointer; color: #7dd3fc; font-weight: 700; }
.builder-result details p { color: #cbd5e1; }
.builder-breakdown { display: flex; flex-wrap: wrap; gap: 8px; }
.builder-breakdown span { display: grid; background: rgba(30, 41, 59, 0.8); padding: 6px 10px; border-radius: 9px; font-size: 0.72rem; color: #e2e8f0; }
.builder-breakdown b { text-transform: capitalize; color: #94a3b8; }

@media (max-width: 760px) {
  .builder-picker-head { align-items: stretch; flex-direction: column; }
  .builder-picker-head input { max-width: none; }
  .builder-card-toolbar { gap: 6px; }
  .builder-pick-controls, .builder-pick-mode { gap: 4px; }
  .builder-pick-mode button { gap: 4px; padding: 5px 8px; font-size: 0.74rem; }
  .builder-pick-mode-icon { width: 15px; height: 15px; }
  .builder-card-reset { width: 32px; height: 32px; }
  .builder-card-toolbar > .deck-sort-control { width: auto; padding: 2px; }
  .builder-card-toolbar > .deck-sort-control button {
    flex: none; min-height: 28px; padding-inline: 0.34rem; font-size: 0.72rem;
  }
  .builder-result { display: grid; }
  .builder-result header { display: contents; }
  .builder-result header > div:first-child { order: 1; flex-wrap: wrap; row-gap: 6px; }
  .builder-result header > div:first-child > h3 { flex: 1 0 calc(100% - 48px); }
  .builder-result-cards { order: 2; }
  .builder-result-head-actions { order: 3; justify-content: space-between; margin-top: 10px; }
  .builder-result.is-2v2 .builder-team-decks { order: 2; }
  .builder-result.is-2v2 .builder-result-head-actions { order: 1; margin-top: 0; justify-content: flex-start; }
  .builder-result.is-clan-wars .builder-war-decks { order: 2; }
  .builder-result-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .builder-result-cards:has(.builder-tower-card) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) 12px minmax(0, 1fr);
  }
  .builder-result-cards:has(.builder-tower-card) > .builder-result-card:nth-child(n + 5):nth-child(-n + 8) {
    grid-row: 2;
  }
  .builder-tower-divider { grid-area: 1 / 5 / 3 / 6; align-self: center; height: 70%; }
  .builder-tower-card { grid-area: 1 / 6 / 3 / 7; align-self: center; }
  .builder-stats-placeholder { display: none; }
  .builder-result-cards { column-gap: 3px; row-gap: 2px; }
  .builder-result-card { position: relative; }
  .builder-card-lvl, .builder-lvl {
    position: absolute; inset-inline: 0; bottom: 6px;
    width: max-content; margin-inline: auto; margin-top: 0;
  }
  .builder-lvl { bottom: calc(8.1% - 9.5px); }
  .builder-result-cards:not(:has(.builder-card-lvl)) { row-gap: 0; }
  .builder-result-card img { width: auto; height: auto; max-width: 100%; max-height: 92px; }
  .builder-stats-placeholder { grid-column: 1 / -1; min-height: 38px; margin-left: 0; }
}
.saved-head {
  display: flex; align-items: end; justify-content: space-between; gap: 1rem;
  margin-bottom: 0.9rem;
}
.saved-head h1 { margin: 0; }
.saved-layout-switch { flex: none; width: auto; }
.saved-layout-switch button { flex: none; }
.saved-layout-row .saved-deck-cards {
  grid-template-columns: repeat(8, minmax(0, 52px)) 26px minmax(0, 52px);
}
.saved-layout-row .saved-deck-cards > .builder-result-card:nth-child(n + 5):nth-child(-n + 8) {
  grid-row: auto;
}
.saved-layout-row .builder-tower-divider { grid-area: 1 / 9 / 2 / 10; }
.saved-layout-row .builder-tower-card { grid-area: 1 / 10 / 2 / 11; }
.saved-layout-grid .saved-deck-cards {
  grid-template-columns: repeat(4, minmax(0, 52px)) 26px minmax(0, 52px);
}
.saved-layout-grid .saved-deck-cards > .builder-result-card:nth-child(n + 5):nth-child(-n + 8) {
  grid-row: 2;
}
.saved-layout-grid .builder-tower-divider { grid-area: 1 / 5 / 3 / 6; height: 70%; }
.saved-layout-grid .builder-tower-card { grid-area: 1 / 6 / 3 / 7; align-self: center; }
@media (max-width: 760px) {
  .saved-layout-row .saved-deck-cards {
    grid-template-columns: repeat(8, minmax(0, 1fr)) 10px minmax(0, 1fr); gap: 2px;
  }
  .saved-layout-grid .saved-deck-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr)) 12px minmax(0, 1fr);
  }
}
.builder-wizard {
  margin: 18px auto 0;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border); border-radius: 8px;
  box-shadow: var(--panel-shadow);
  overflow: visible;
}
.builder-wizard-head {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 16px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.builder-wizard-head h2 { font-size: 1.4rem; margin: 2px 0; color: #f1f5f9; }
.builder-wizard-head p { margin: 0; color: #94a3b8; font-size: 0.88rem; }
.builder-eyebrow {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.18em;
  font-weight: 900; color: #38bdf8;
}
.builder-stepper { display: flex; gap: 2px; flex-wrap: nowrap; filter: drop-shadow(0 6px 14px rgba(0,0,0,.16)); }
.builder-step-pill {
  position: relative;
  display: flex; align-items: center; gap: 7px; padding: 8px 17px 8px 15px;
  border: 0; border-radius: 0;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  background: rgba(23, 34, 55, 0.6); color: #94a3b8; cursor: pointer;
  font-weight: 700; font-size: 0.8rem; transition: color .15s, background .18s, box-shadow .18s;
}
.builder-step-pill i {
  position: relative; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: #26344e; color: #cbd5e1; font-style: normal; font-size: 0.72rem; font-weight: 900;
}
.builder-step-pill i::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 47%;
  width: 5px;
  height: 9px;
  border-right: 2px solid #052e16;
  border-bottom: 2px solid #052e16;
  opacity: 0;
  transform: translate(-50%, -52%) rotate(45deg) scale(.82);
  transform-origin: center;
}
.builder-step-pill:not(:disabled):hover { border-color: rgba(125, 211, 252, 0.5); color: #e2e8f0; }
.builder-step-pill.done {
  color: #dcfce7;
  background: linear-gradient(145deg, rgba(21, 128, 61, .42), rgba(20, 83, 45, .25));
  box-shadow: inset 0 0 0 1px rgba(74, 222, 128, .42), 0 0 16px rgba(34, 197, 94, .18);
}
.builder-step-pill.done i {
  width: 18px; height: 18px;
  background: #22c55e; color: transparent;
  box-shadow: 0 0 8px rgba(74, 222, 128, .48);
}
.builder-step-pill.done i::before { opacity: 1; transform: translate(-50%, -52%) rotate(45deg) scale(1); }
.builder-step-pill.just-completed {
  animation: builderStepComplete .46s ease-out;
}
.builder-step-pill.just-completed i {
  animation: builderCheckPop .46s ease-out;
}
.builder-step-pill.active {
  color: #fff;
  background: linear-gradient(145deg, rgba(14,165,233,.72), rgba(79,70,229,.52));
}
.builder-step-pill.active i { background: linear-gradient(135deg, #38bdf8, #6366f1); color: #fff; }
.builder-step-pill:disabled { opacity: 0.45; cursor: default; }

.builder-step { position: relative; padding: 22px 24px; animation: builderStepIn .42s cubic-bezier(.2,.8,.2,1); transform-origin:50% 20%; }
.builder-step.entering-back { animation-name: builderStepBack; }
.builder-step-title { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.builder-step-title > span {
  display: grid; place-items: center; flex: 0 0 38px; height: 38px;
  border: 1px solid rgba(56, 189, 248, 0.3); border-radius: 12px;
  color: #7dd3fc; font-weight: 900; background: rgba(14, 165, 233, 0.08);
}
.builder-step-title h3 { margin: 0 0 2px; font-size: 1.15rem; color: #f1f5f9; }
.builder-step-title p { margin: 0; color: #94a3b8; font-size: 0.86rem; }
.builder-card-step-title { margin-bottom: 16px; }
.builder-setup-section h3,
.builder-level-section h3 {
  margin: 0 0 10px; color: var(--panel-text); font-size: 1.15rem;
}
.builder-level-section {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--panel-inset-border);
}

.builder-choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.builder-choice-grid.two { grid-template-columns: repeat(2, 1fr); }
.builder-choice {
  display: grid; grid-template-columns: 46px 1fr; align-items: center; column-gap: 12px;
  text-align: left; padding: 12px 14px; border-radius: 8px;
  border: 1px solid rgba(99, 125, 215, 0.32); background: rgba(8, 10, 15, 0.24);
  color: #e2e8f0; cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.builder-choice:hover { transform: translateY(-2px); border-color: rgba(125, 211, 252, 0.48); }
.builder-choice.active {
  border-color: #587cff;
  background: linear-gradient(145deg, rgba(49, 91, 212, 0.28), rgba(189, 113, 240, 0.12));
  box-shadow: inset 0 0 0 1px rgba(88, 124, 255, 0.18), 0 8px 24px rgba(3, 6, 14, 0.18);
}
.builder-choice img { grid-row: 1 / 3; height: 42px; max-width: 46px; object-fit: contain; }
.builder-mode-grid .builder-choice img { height:52px; max-width:58px; justify-self:center; }
.builder-mode-grid { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }
.builder-choice.locked { position: relative; cursor: not-allowed; border-color: rgba(148, 163, 184, 0.24); }
.builder-choice.locked:hover {
  transform: none; border-color: rgba(148, 163, 184, 0.34); background: rgba(148, 163, 184, 0.05);
}
.builder-choice.locked > img,
.builder-choice.locked > b,
.builder-choice.locked > span:not(.builder-choice-lock) {
  filter: grayscale(1) brightness(0.5); opacity: 0.85;
}
.builder-choice-lock {
  grid-column: 1 / -1; grid-row: 1 / 3;
  position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 38px; height: 38px; pointer-events: none;
}
.builder-mode-grid .builder-choice-lock img {
  width: 100%; height: 100%; max-width: none; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6));
}
.builder-choice:has(> .builder-choice-new) { position: relative; }
.builder-choice-new {
  position: absolute; z-index: 3; top: -12px; right: -8px;
  display: grid; place-items: center; box-sizing: border-box;
  width: 48px; height: 22px; margin: 0; padding: 0;
  font-style: normal; font-size: 13px; line-height: 1; letter-spacing: 0;
  text-transform: uppercase; pointer-events: none; isolation: isolate;
  filter: drop-shadow(0 2px 0 var(--new-badge-ink)) drop-shadow(0 2px 3px var(--new-badge-shadow));
}
.builder-choice-new::before,
.builder-choice-new::after { content: ""; position: absolute; z-index: -1; pointer-events: none; box-sizing: border-box; }
.builder-choice-new::before {
  inset: 0; border: 1.5px solid var(--new-badge-ink); border-radius: 5px;
  background: linear-gradient(180deg, var(--new-badge-hot) 0%, var(--new-badge-orange) 43%,
    var(--new-badge-red) 47%, var(--new-badge-red) 100%);
  box-shadow: inset 0 1.5px 0 var(--new-badge-gloss), inset 0 -2px 0 var(--new-badge-depth);
}
.builder-choice-new::after {
  top: 3px; left: 6px; right: 6px; height: 1.5px; border-radius: 50%;
  background: var(--new-badge-gloss); opacity: 0.7;
}
.builder-choice-new > [class~="cr-text"] {
  --cr-fill: var(--new-badge-white);
  --cr-outline: 0.065em;
  --cr-outline-color: var(--new-badge-ink);
  --cr-shadow-y: 0.1em;
  --cr-shadow-color: var(--new-badge-depth);
  position: relative; z-index: 1; display: block; white-space: nowrap; font-style: normal;
}
.builder-mode-grid .builder-choice[data-builder-mode="ultimate-champion"] img { transform:scale(1.34); }
.builder-mode-grid .builder-choice[data-builder-mode="top-ladder"] img { transform:scale(1.2); }
.builder-mode-grid .builder-choice[data-builder-mode="season-arenas"] img { transform:scale(1.25); }
.builder-choice .builder-glyph { grid-row: 1 / 3; grid-column: 1; font-size: 1.6rem; color: #7dd3fc; line-height: 1; text-align: center; }
.builder-choice b { font-size: 0.95rem; }
.builder-choice span:not(.builder-choice-lock) { grid-column: 2; font-size: 0.78rem; line-height: 1.4; color: #94a3b8; }

.builder-setting-block + .builder-setting-block { margin-top: 16px; }
.builder-setting-block h4 {
  margin: 0 0 8px; color: #cbd5e1; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.builder-tag-panel {
  margin-top: 14px; padding: 14px; border-radius: 14px;
  border: 1px solid rgba(56, 189, 248, 0.25); background: rgba(14, 165, 233, 0.07);
  display: grid; gap: 6px;
}
.builder-tag-panel label { color: #cbd5e1; font-weight: 700; font-size: 0.85rem; }
.builder-tag-panel input {
  border: 1px solid rgba(148, 163, 184, 0.28); background: #101b30;
  color: white; border-radius: 10px; padding: 11px;
}
.builder-tag-panel small { color: #94a3b8; }

.builder-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.builder-back {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(8, 10, 15, 0.42);
  color: rgba(226, 233, 248, 0.72); border-radius: 8px; padding: 0.35rem 0.75rem; cursor: pointer;
  font-weight: 750;
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.builder-back:hover { color: #fff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); }
.builder-card-actions {
  margin: 16px 0 20px;
  padding: 12px 4px;
  border-top: 1px solid var(--panel-inset-border);
  border-bottom: 1px solid var(--panel-inset-border);
}
.builder-card-actions .builder-back {
  border-color: color-mix(in srgb, var(--primary) 58%, var(--panel-inset-border));
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--panel-text);
}
.builder-card-actions .builder-back:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 28%, transparent);
}

.builder-results-actions {
  display: flex; align-items: center; justify-content: center;
  min-height: 38px; margin-top: 14px;
}
.builder-more-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.42rem;
  min-width: 132px; height: 32px; margin: 0 auto; padding: 0 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px;
  background: rgba(8, 10, 15, 0.34);
  color: rgba(226, 233, 248, 0.68); cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
  font-size: 0.78rem; font-weight: 800;
}
.builder-more-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); }
.builder-more-btn:focus-visible { outline: 2px solid var(--laser-left, var(--primary)); outline-offset: 2px; }
.builder-more-btn.loading { opacity: 0.55; cursor: wait; }
.builder-more-btn.loading svg { animation: builderMoreSpin 0.8s linear infinite; }
@keyframes builderMoreSpin { to { transform: rotate(360deg); } }

.builder-search { position: relative; display: flex; align-items: center; }
.builder-search > span { position: absolute; left: 12px; color: #7dd3fc; font-size: 1.15rem; }
.builder-search input { padding-left: 36px !important; }
.builder-step .builder-card-grid { background:transparent; border-radius:0; padding:0; }
.builder-player-search { position:relative; }
.builder-player-search input { width:100%; }
.builder-player-search .search-dropdown { top:calc(100% + 5px); z-index: 80; }

.builder-analyzing { text-align: center; padding: 55px 30px; }
.builder-analyzing h3 { font-size: 1.35rem; margin: 22px 0 8px; color: #f1f5f9; }
.builder-analyzing p { color: #94a3b8; }
.builder-orb { width: 110px; height: 110px; position: relative; margin: auto; display: grid; place-items: center; }
.builder-orb-arc {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: rgba(238, 90, 244, 0.85);
  border-right-color: rgba(238, 90, 244, 0.3);
  animation: builderOrbit 1.15s linear infinite;
}
.builder-orb-glass {
  position: absolute; inset: 13px; overflow: hidden; border-radius: 50%;
  border: 1px solid rgba(238, 90, 244, 0.28);
  background: radial-gradient(circle at 32% 28%, rgba(72, 22, 88, 0.42), rgba(11, 6, 18, 0.97));
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.55), 0 0 18px rgba(214, 60, 224, 0.16);
}
.builder-orb-level {
  position: absolute; left: -25%; right: -25%; bottom: 0; height: 30%;
  background: linear-gradient(180deg, #e05af0, #a72fc8 55%, #6d1b79);
  box-shadow: 0 0 14px rgba(214, 60, 224, 0.45);
  animation: builderElixirFill 2.8s ease-in-out infinite;
}
.builder-orb-level::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 11px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ef6ffb, #e05af0);
  animation: builderElixirWave 1.9s ease-in-out infinite;
}
.builder-orb .builder-orb-glass b {
  position: absolute; bottom: 6%; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  animation: builderElixirBubble 2.3s ease-in infinite;
}
.builder-orb .builder-orb-glass b:nth-of-type(1) { left: 28%; }
.builder-orb .builder-orb-glass b:nth-of-type(2) { left: 52%; width: 5px; height: 5px; animation-delay: 0.75s; animation-duration: 2.7s; }
.builder-orb .builder-orb-glass b:nth-of-type(3) { left: 70%; width: 4px; height: 4px; animation-delay: 1.4s; animation-duration: 2.1s; }
.builder-analysis-bars { display: flex; justify-content: center; gap: 5px; margin-top: 20px; }
.builder-analysis-bars i { width: 42px; height: 4px; background: #26344e; border-radius: 8px; overflow: hidden; }
.builder-analysis-bars i:after { content: ""; display: block; width: 100%; height: 100%; background: #38bdf8; animation: builderScan 1.2s ease-in-out infinite; }
.builder-analysis-bars i:nth-child(2):after { animation-delay: 0.2s; }
.builder-analysis-bars i:nth-child(3):after { animation-delay: 0.4s; }
@keyframes builderStepIn { from { opacity:0; transform:translateX(18px) scale(.985); filter:blur(3px); } to { opacity:1; transform:none; filter:none; } }
@keyframes builderStepBack { from { opacity:0; transform:translateX(-18px) scale(.985); filter:blur(3px); } to { opacity:1; transform:none; filter:none; } }
@keyframes builderDeckReveal {
  0% { opacity: 0; transform: translateY(16px) scale(0.982); filter: blur(5px); }
  62% { opacity: 1; transform: translateY(-2px) scale(1.004); filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes builderDeckLineReveal {
  from { opacity: 0; transform: scaleX(0.35); }
  to { opacity: 1; transform: scaleX(1); }
}
@keyframes builderStepComplete {
  0% { box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0), 0 0 0 rgba(34, 197, 94, 0); }
  45% { box-shadow: inset 0 0 0 1px rgba(134, 239, 172, .86), 0 0 24px rgba(34, 197, 94, .42); }
  100% { box-shadow: inset 0 0 0 1px rgba(74, 222, 128, .42), 0 0 16px rgba(34, 197, 94, .18); }
}
@keyframes builderCheckPop {
  0% { transform: scale(.74); }
  55% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes builderOrbit { to { transform: rotate(360deg); } }
@keyframes builderScan { 0%, 100% { transform: translateX(-110%); } 50% { transform: translateX(0); } }
@keyframes builderElixirFill {
  0%, 100% { height: 22%; }
  50% { height: 64%; }
}
@keyframes builderElixirWave {
  0%, 100% { transform: translateX(-9%) rotate(-2deg); }
  50% { transform: translateX(9%) rotate(2deg); }
}
@keyframes builderElixirBubble {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  18% { opacity: 0.75; }
  80% { opacity: 0.5; }
  100% { transform: translateY(-58px) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .builder-orb-arc, .builder-orb-level, .builder-orb-level::before,
  .builder-orb .builder-orb-glass b { animation: none; }
  .builder-orb-level { height: 50%; }
}
@media (max-width: 900px) {
  .builder-wizard-head { display: block; position: relative; padding: 14px 16px; }
  .builder-stepper { position: absolute; top: 14px; right: 16px; }
  .builder-wizard-head .builder-eyebrow {
    display: flex; align-items: center; min-height: 32px;
    padding-right: 300px;
  }
  .builder-wizard-head h1 { margin: 3px 0 0; font-size: 1.25rem; }
  .builder-page-summary { margin-top: 6px; font-size: 0.8rem; line-height: 1.4; }
  .builder-step { padding: 16px; }
}

@media (max-width: 760px) {
  .builder-choice-grid, .builder-choice-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .builder-step-pill span { display: none; }
  .builder-step-pill { padding: 6px; }
  .builder-wizard-head .builder-eyebrow { padding-right: 116px; }
}
@media (max-width: 560px) {
  .builder-choice-grid, .builder-choice-grid.two, .builder-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  }
  .builder-choice { grid-template-columns: 34px minmax(0, 1fr); column-gap: 9px; padding: 8px 10px; }
  .builder-choice img, .builder-mode-grid .builder-choice img {
    grid-row: 1; height: 32px; max-width: 34px;
  }
  .builder-choice b { font-size: 0.82rem; line-height: 1.2; }
  .builder-choice span:not(.builder-choice-lock) { display: none; }
  .builder-choice.locked { padding-right: 34px; }
  .builder-choice-lock {
    grid-area: auto;
    left: auto; right: 8px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px;
  }
  .builder-level-section { margin-top: 14px; padding-top: 12px; }
  .builder-setup-section h3, .builder-level-section h3 { margin-bottom: 8px; font-size: 1.02rem; }
  .builder-actions { margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .builder-reveal,
  .builder-result.builder-reveal::before {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
}
.col-deck-title { margin: 0 0 0.7rem; color: var(--panel-text); font-size: 0.9rem; }
.col-deck-actions { margin-top: 0.9rem; }
.col-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.col-btn[disabled]:hover { background: var(--panel-inset); color: var(--panel-muted); border-color: var(--panel-inset-border); }
.col-pick-tools { display: flex; align-items: center; gap: 0.4rem; }
.col-icon-btn {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border-radius: 7px; border: 1px solid var(--panel-inset-border);
  background: var(--panel-inset); color: var(--panel-muted); cursor: pointer;
}
.col-icon-btn:hover { background: var(--panel-inset); color: var(--panel-text); border-color: var(--deck-btn-hover-border); }
.col-icon-btn.is-confirm { color: var(--win); }
.col-icon-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.col-icon-btn[disabled]:hover { color: var(--panel-muted); border-color: var(--panel-inset-border); }
.modal-box:has(.col-result) { width: 470px; max-width: 470px; }
.col-result { display: grid; justify-items: center; }
.col-result-deck { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; width: 100%; }
.col-result-card { position: relative; aspect-ratio: 285 / 420; }
.col-result-card img { width: 100%; height: 100%; object-fit: contain; display: block; }
.col-result-score { margin: 1.2rem 0 1.1rem; }
.col-result-score strong { font-size: 2.9rem; }
.col-result-figures { gap: 1.2rem 2.2rem; }
.col-result-needs { justify-content: center; margin-top: 1.1rem; }
.col-result-need { opacity: 0; animation: colResultNeed 0.4s ease forwards; animation-delay: var(--delay, 0.5s); }
@keyframes colResultNeed { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .col-result-need { opacity: 1; animation: none; }
}
.col-source-body {
  display: grid; gap: 0.7rem; max-height: 60vh; overflow-y: auto;
  transition: opacity 0.5s ease;
}
.col-source-body.is-switching { opacity: 0; }
.col-source-box { margin: 0; }
.col-source-pick { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.col-source-take { flex: none; }
.col-source-note { display: block; margin-top: 0.45rem; }
.col-source-box .player-deck-mode {
  padding-right: 0.8rem; border-right: 1px solid var(--panel-inset-border);
}
.col-source-box .player-deck-cards {
  grid-template-columns: repeat(8, 52px);
  justify-content: start; flex: none; margin: 0;
}
.col-source-box .player-deck-cards .card,
.col-source-box .player-deck-cards .card-img,
.col-source-box .player-deck-cards .card-img img { width: 52px; }
.col-source-pick { justify-content: flex-start; gap: 1.2rem; }
.col-meta-stats { display: flex; align-items: center; gap: 0.9rem; }
.col-meta-stats span {
  display: inline-flex; align-items: center; gap: 0.3rem;
  color: var(--panel-text); font-size: 0.82rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.col-meta-stats img { width: 19px; height: 19px; object-fit: contain; }
.col-locked-panel { display: grid; justify-items: center; padding-bottom: 1.9rem; }
.col-locked-panel .col-head { width: 100%; }
.col-locked-panel .col-pop-lock { margin: 0.4rem auto 0; }
.col-locked-soon {
  margin: 0.7rem 0 0; color: var(--panel-muted); font-size: 0.82rem; font-weight: 700;
}
.col-slot.is-empty {
  border: 1px dashed var(--deck-btn-hover-border);
  background: var(--panel-inset);
  color: var(--panel-muted); font-size: 1.35rem; font-weight: 800;
}
.col-slot.is-empty:hover {
  border-color: var(--primary); color: var(--panel-text);
}
.modal-box:has(.feedback-form) {
  width: min(620px, 94vw); max-width: min(620px, 94vw); max-height: 92vh;
  overflow-y: auto; text-align: left; padding: 1.6rem 1.75rem;
}
.feedback-form { display: grid; gap: 0.9rem; }
.feedback-head { display: flex; align-items: center; gap: 0.75rem; padding-right: 1.4rem; }
.feedback-head-icon {
  display: grid; place-items: center; flex: 0 0 38px; height: 38px;
  border: 2px solid var(--panel-inset-border); border-radius: 7px;
  color: var(--panel-text); background: var(--panel-inset);
}
.feedback-head > div { display: grid; gap: 0.08rem; }
.feedback-head > div > span {
  color: var(--panel-dim); font-size: 0.67rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.feedback-head h3 { margin: 0; }
.feedback-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
.feedback-kind button {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 38px; border: 2px solid var(--panel-inset-border); border-radius: 7px;
  background: var(--panel-inset); color: var(--panel-muted); cursor: pointer;
  font: inherit; font-size: 0.8rem; font-weight: 800;
}
.feedback-kind button:hover { background: var(--panel-inset); color: var(--panel-text); border-color: var(--panel-border); }
.feedback-kind button.active { color: var(--panel-text); border-color: var(--primary); }
.feedback-context {
  display: grid; grid-template-columns: max-content 1fr max-content; align-items: center;
  gap: 0.65rem; margin: 0; padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--panel-inset-border);
}
.feedback-context span { color: var(--panel-dim); font-size: 0.72rem; font-weight: 750; }
.feedback-context strong { min-width: 0; font-size: 0.82rem; }
.feedback-context code { color: var(--panel-muted); font-size: 0.72rem; }
.feedback-field { display: grid; gap: 0.32rem; position: relative; }
.feedback-field > span { color: var(--panel-text); font-size: 0.78rem; font-weight: 800; }
.feedback-field > span i { color: var(--panel-dim); font-size: 0.7rem; font-style: normal; font-weight: 650; }
.feedback-form .feedback-field textarea,
.feedback-form .feedback-field input,
.feedback-form .feedback-field select {
  width: 100%; max-width: none; margin: 0; border: 2px solid var(--panel-inset-border);
  border-radius: 7px; background: var(--panel-inset); color: var(--panel-text);
  padding: 0.65rem 0.72rem; font: inherit; font-size: 0.82rem;
}
.feedback-form .feedback-field textarea { min-height: 126px; resize: vertical; padding-bottom: 1.25rem; }
.feedback-form .feedback-field textarea:focus,
.feedback-form .feedback-field input:focus,
.feedback-form .feedback-field select:focus { outline: none; border-color: var(--primary); }
.feedback-form .feedback-field select:disabled { opacity: .48; cursor: not-allowed; }
.feedback-field > small { position: absolute; right: 0.55rem; bottom: 0.42rem; color: var(--panel-dim); font-size: 0.66rem; }
.feedback-field > small b { color: inherit; }
.feedback-file {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  border-top: 1px solid var(--panel-inset-border); padding-top: 0.85rem;
}
.feedback-file > span { display: grid; grid-template-columns: 20px auto; align-items: center; gap: 0 0.42rem; }
.feedback-file > span svg { grid-row: 1 / span 2; color: var(--panel-muted); }
.feedback-file b { font-size: 0.78rem; }
.feedback-file small { color: var(--panel-dim); font-size: 0.67rem; }
.feedback-file input { min-width: 0; max-width: 265px; color: var(--panel-muted); font-size: 0.72rem; }
.feedback-file input::file-selector-button {
  border: 2px solid var(--panel-inset-border); border-radius: 6px;
  background: var(--panel-inset); color: var(--panel-text); padding: 0.32rem 0.5rem;
  font: inherit; font-weight: 750; cursor: pointer;
}
.feedback-safety, .feedback-reward-note, .feedback-legal {
  margin: -0.48rem 0 0; color: var(--panel-dim); font-size: 0.7rem; line-height: 1.45;
}
.feedback-contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
.feedback-reward-note { margin-top: -0.55rem; }
.feedback-legal { margin: 0; padding-top: 0.7rem; border-top: 1px solid var(--panel-inset-border); }
.feedback-legal a { color: var(--gold); }
.feedback-website { position: fixed; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.feedback-status { min-height: 1.1rem; margin: -0.35rem 0; color: var(--panel-muted); font-size: 0.75rem; }
.feedback-status.is-error { color: var(--loss); }
.feedback-submit {
  justify-self: end; min-height: 36px; padding: 0.42rem 1rem;
  border: 2px solid var(--primary); border-radius: 7px;
  background: var(--primary); color: var(--text); cursor: pointer;
  font: inherit; font-size: 0.8rem; font-weight: 850;
}
.feedback-submit:hover { background: var(--primary-d); }
.feedback-submit:disabled { opacity: .55; cursor: wait; }
.feedback-success { display: grid; justify-items: center; gap: 0.45rem; text-align: center; }
.feedback-success > svg { width: 28px; height: 28px; color: var(--win); }
.feedback-success h3, .feedback-success p { margin: 0; }
.feedback-success small { color: var(--panel-dim); font-family: ui-monospace, monospace; }

.giveaway-step-legal {
  margin: 0.42rem 0 0; color: var(--panel-dim); font-size: 0.65rem; line-height: 1.4;
}
.giveaway-step-legal a { color: var(--gold); }
.modal-box:has(.credits-pop) { width: 470px; max-width: min(470px, 94vw); text-align: left; }
.credits-pop > p { color: var(--panel-muted); font-size: 0.8rem; }
.credits-pop dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.65rem 1rem; margin: 1rem 0; }
.credits-pop dt, .credits-pop dd { margin: 0; font-size: 0.8rem; }
.credits-pop dt a, .credits-pop dt > span { color: var(--gold); font-weight: 800; }
.credits-pop dd { color: var(--panel-muted); }
.credits-pop .credits-note { margin: 0; padding-top: 0.75rem; border-top: 1px solid var(--panel-inset-border); font-size: 0.7rem; }
.builder-card.not-unlocked > img,
.builder-card.not-unlocked > .builder-card-fallback { filter: grayscale(.86) brightness(.74); opacity: .76; }
.builder-card.not-unlocked::after {
  content: ""; position: absolute; inset: 1px; z-index: 1; pointer-events: none;
  border-radius: 5px; background: color-mix(in srgb, var(--feedback-bg) 12%, transparent);
}
.builder-card.not-unlocked:hover > img,
.builder-card.not-unlocked:hover > .builder-card-fallback { opacity: .86; }
.builder-card.active,
.builder-card.banned {
  border-color: transparent; background: transparent; box-shadow: none;
}
.builder-card.active:hover,
.builder-card.banned:hover { border-color: var(--panel-border); background: var(--panel-inset); }
.builder-card-pick-mark {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 30px; height: 30px; transform: translate(-50%, -50%);
  display: grid; place-items: center; pointer-events: none;
  filter: drop-shadow(0 2px 4px var(--bg));
}
.builder-card-pick-mark img { width: 100%; height: 100%; object-fit: contain; }
.modal.feedback-active { background: var(--feedback-backdrop); }
.modal-box:has(.feedback-wizard) {
  width: min(680px, 94vw); max-width: min(680px, 94vw); max-height: 92vh;
  overflow-y: auto; padding: 0; text-align: left;
  border: 2px solid var(--panel-border); background: var(--feedback-bg);
}
.modal-box:has(.feedback-wizard)::before { left: 5%; right: 5%; }
.modal-box:has(.feedback-wizard) > .modal-close {
  top: 15px; right: 17px; z-index: 4; width: 32px; height: 32px;
  display: grid; place-items: center; border-radius: 5px; background: transparent;
}
.modal-box:has(.feedback-wizard) > .modal-close:hover { background: transparent; color: var(--panel-text); }
.feedback-wizard { display: grid; min-height: 570px; color: var(--panel-text); }
.feedback-wizard-head {
  display: flex; align-items: center; gap: 0.75rem; padding: 1.15rem 3.6rem 1rem 1.35rem;
  border-bottom: 2px solid var(--panel-inset-border); background: var(--feedback-bg);
}
.feedback-wizard-head > img {
  width: 50px; height: 50px; object-fit: contain;
}
.feedback-wizard-head > div { display: grid; gap: 0.08rem; }
.feedback-wizard-head span, .feedback-step-kicker {
  color: var(--panel-dim); font-size: 0.66rem; font-weight: 850;
  letter-spacing: 0.09em; text-transform: uppercase;
}
.feedback-wizard-head h2 { margin: 0; font-size: 1.05rem; line-height: 1.2; }
.feedback-progress {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0;
  padding: 0.85rem 1.35rem; list-style: none; border-bottom: 2px solid var(--panel-inset-border);
}
.feedback-progress li { position: relative; display: flex; align-items: center; gap: 0.42rem; color: var(--panel-dim); }
.feedback-progress li:not(:last-child)::after {
  content: ""; position: absolute; left: calc(50% + 20px); right: 8px; top: 50%;
  height: 2px; background: var(--panel-inset-border);
}
.feedback-progress li.complete:not(:last-child)::after { background: var(--primary); }
.feedback-progress i {
  position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px;
  border: 2px solid var(--panel-inset-border); border-radius: 50%; background: var(--feedback-bg);
  color: inherit; font-size: 0.68rem; font-style: normal; font-weight: 850;
}
.feedback-progress li.active, .feedback-progress li.complete { color: var(--panel-text); }
.feedback-progress li.active i, .feedback-progress li.complete i { border-color: var(--primary); }
.feedback-progress li.complete i { background: var(--primary); }
.feedback-progress span { position: relative; z-index: 1; background: var(--feedback-bg); padding-right: 0.4rem; font-size: 0.69rem; font-weight: 750; }
.feedback-wizard-step { display: grid; align-content: start; gap: 0.75rem; min-height: 330px; padding: 1.25rem 1.35rem 1rem; }
.feedback-wizard-step h3 { margin: -0.25rem 0 0; font-size: 1.25rem; }
.feedback-wizard-step h3:focus { outline: none; }
.feedback-wizard-step > p { margin: -0.25rem 0 0.2rem; color: var(--panel-muted); font-size: 0.78rem; line-height: 1.5; }
.feedback-kind-choices { display: grid; gap: 0.55rem; }
.feedback-kind-choices button {
  display: grid; grid-template-columns: 42px 1fr max-content; align-items: center; gap: 0.8rem;
  width: 100%; min-height: 70px; padding: 0.65rem 0.85rem; text-align: left;
  border: 2px solid var(--panel-inset-border); border-radius: 7px;
  background: var(--panel-inset); color: var(--panel-text); cursor: pointer;
}
.feedback-kind-choices button:hover { background: var(--panel-inset); border-color: var(--panel-border); }
.feedback-kind-choices button.active { background: var(--panel-inset); border-color: var(--primary); }
.feedback-kind-choices img { width: 42px; height: 42px; object-fit: contain; }
.feedback-kind-choices span, .feedback-topic-choices span { display: grid; gap: 0.18rem; }
.feedback-kind-choices b, .feedback-topic-choices b { font-size: 0.84rem; }
.feedback-kind-choices small, .feedback-topic-choices small { color: var(--panel-muted); font-size: 0.7rem; line-height: 1.35; }
.feedback-kind-choices button > i { color: var(--panel-dim); font-style: normal; font-size: 1.1rem; }
.feedback-reward-preview {
  display: grid; justify-items: center; gap: 0.55rem;
  margin-top: 0.2rem; padding: 0.75rem 0.4rem; border-top: 2px solid var(--panel-inset-border);
  border-bottom: 2px solid var(--panel-inset-border);
}
.feedback-reward-preview > strong { color: var(--gold); font-size: 0.78rem; text-align: center; }
.feedback-reward-preview > small { color: var(--panel-muted); font-size: 0.65rem; line-height: 1.35; text-align: center; }
.feedback-preview-carousel { width: 100%; display: grid; grid-template-columns: 26px minmax(0, 1fr) 26px; align-items: center; gap: 0.35rem; }
.feedback-preview-carousel > button {
  width: 26px; height: 38px; padding: 0; border: none; background: transparent;
  color: var(--panel-muted); font-size: 1.1rem; cursor: pointer;
}
.feedback-preview-carousel > button:hover { background: transparent; color: var(--panel-text); }
.feedback-preview-track { display: flex; justify-content: flex-start; gap: 0.8rem; overflow-x: auto; scrollbar-width: none; }
.feedback-preview-track::-webkit-scrollbar { display: none; }
.feedback-preview-item { flex: 0 0 88px; height: 74px; display: grid; place-items: center; }
.feedback-preview-item.is-banner { flex-basis: 138px; }
.feedback-preview-item > img, .feedback-preview-item > .feedback-reward-fallback { width: 72px; height: 72px; object-fit: contain; }
.feedback-preview-item.is-banner > img { width: 132px; height: 72px; }
.feedback-reward-fallback { display: grid; place-items: center; color: var(--gold); font-size: 0.6rem; font-weight: 850; }
.feedback-choice-label, .feedback-area-field > span, .feedback-message-field > span,
.feedback-email-field > span, .feedback-reward-head > span { color: var(--panel-text); font-size: 0.76rem; font-weight: 850; }
.feedback-area-field, .feedback-message-field, .feedback-email-field { display: grid; gap: 0.36rem; }
.feedback-area-field select, .feedback-message-field textarea, .feedback-email-field input {
  width: 100%; max-width: none; margin: 0; border: 2px solid var(--panel-inset-border);
  border-radius: 7px; background: var(--panel-inset); color: var(--panel-text);
  padding: 0.64rem 0.72rem; font: inherit; font-size: 0.8rem;
}
.feedback-area-field select:focus, .feedback-message-field textarea:focus, .feedback-email-field input:focus {
  outline: none; border-color: var(--primary);
}
.feedback-area-field small { color: var(--panel-dim); font-size: 0.66rem; }
.feedback-area-field code { color: var(--panel-muted); }
.feedback-topic-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
.feedback-topic-choices button {
  display: grid; grid-template-columns: 1fr 22px; align-items: center; gap: 0.45rem;
  min-height: 72px; padding: 0.55rem 0.65rem; text-align: left;
  border: 2px solid var(--panel-inset-border); border-radius: 7px;
  background: var(--panel-inset); color: var(--panel-text); cursor: pointer;
}
.feedback-topic-choices button.has-icon { grid-template-columns: 56px 1fr 22px; }
.feedback-topic-choices button > img { width: 56px; height: 56px; object-fit: contain; }
.feedback-topic-choices button:hover { background: var(--panel-inset); border-color: var(--panel-border); }
.feedback-topic-choices button.active { background: var(--panel-inset); border-color: var(--primary); }
.feedback-topic-choices button > i { display: grid; place-items: center; color: var(--primary); font-style: normal; font-weight: 900; }
.feedback-topic-choices.is-bug { grid-template-columns: 1fr; gap: 0.3rem; }
.feedback-topic-choices.is-bug .feedback-bug-topic {
  grid-template-columns: 16px 1fr; min-height: 38px; padding: 0.38rem 0.6rem;
  border-color: var(--panel-inset-border); text-align: left;
}
.feedback-topic-choices.is-bug .feedback-bug-topic > i {
  position: relative; width: 14px; height: 14px; border: 2px solid var(--panel-muted);
  border-radius: 50%; color: transparent;
}
.feedback-topic-choices.is-bug .feedback-bug-topic.active > i { border-color: var(--primary); }
.feedback-topic-choices.is-bug .feedback-bug-topic.active > i::after {
  content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--primary);
}
.feedback-topic-choices.is-bug .feedback-bug-topic > b { font-size: 0.74rem; }
.feedback-message-topic { display: grid; grid-template-columns: 64px 1fr max-content; align-items: center; gap: 0.7rem; }
.feedback-message-topic > img { width: 64px; height: 64px; object-fit: contain; }
.feedback-message-topic > div { display: grid; gap: 0.2rem; }
.feedback-message-topic h3, .feedback-message-topic p { margin: 0; }
.feedback-message-topic p { color: var(--panel-muted); font-size: 0.75rem; line-height: 1.4; }
.feedback-message-topic > small { color: var(--panel-dim); font-size: 0.66rem; font-weight: 750; }
.feedback-message-field { position: relative; }
.feedback-message-field textarea { min-height: 150px; resize: vertical; padding-bottom: 1.35rem; }
.feedback-message-field > small { position: absolute; right: 0.6rem; bottom: 0.42rem; color: var(--panel-dim); font-size: 0.66rem; }
.feedback-upload {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0.65rem 0; border-top: 2px solid var(--panel-inset-border); border-bottom: 2px solid var(--panel-inset-border);
}
.feedback-upload > div { display: flex; align-items: center; gap: 0.55rem; }
.feedback-upload > div > img { width: 30px; height: 30px; object-fit: contain; }
.feedback-upload > div span, .feedback-file-ready { display: grid; gap: 0.1rem; }
.feedback-upload b { font-size: 0.75rem; }
.feedback-upload b i { color: var(--panel-dim); font-size: 0.65rem; font-style: normal; font-weight: 650; }
.feedback-upload small { color: var(--panel-dim); font-size: 0.64rem; }
.feedback-upload > label { cursor: pointer; }
.feedback-upload > label input { position: fixed; left: -10000px; width: 1px; height: 1px; }
.feedback-upload > label > span, .feedback-file-ready button {
  display: inline-flex; min-height: 31px; align-items: center; padding: 0.28rem 0.62rem;
  border: 2px solid var(--panel-inset-border); border-radius: 6px; background: var(--panel-inset);
  color: var(--panel-text); font-size: 0.7rem; font-weight: 800; cursor: pointer;
}
.feedback-upload > label:hover > span { border-color: var(--panel-border); }
.feedback-file-ready { grid-template-columns: minmax(0, 1fr) max-content; max-width: 270px; }
.feedback-file-ready b, .feedback-file-ready small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feedback-file-ready button { grid-column: 2; grid-row: 1 / span 2; min-height: 28px; padding: 0 0.5rem; }
.feedback-file-ready button:hover { background: var(--panel-inset); border-color: var(--loss); }
.feedback-wizard .feedback-safety, .feedback-wizard .feedback-reward-note, .feedback-wizard .feedback-legal {
  margin: -0.35rem 0 0; color: var(--panel-dim); font-size: 0.66rem; line-height: 1.45;
}
.feedback-reward-head { display: flex; justify-content: space-between; gap: 0.8rem; }
.feedback-reward-head small { color: var(--panel-dim); font-size: 0.66rem; }
.feedback-reward-carousel { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; align-items: center; gap: 0.4rem; }
.feedback-reward-track { display: flex; gap: 0.45rem; overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; padding: 0.15rem; }
.feedback-reward-choice {
  flex: 0 0 105px; min-height: 96px; display: grid; place-items: center; align-content: center;
  gap: 0.3rem; padding: 0.5rem; border: 2px solid var(--panel-inset-border); border-radius: 7px;
  background: var(--panel-inset); color: var(--panel-muted); text-align: center; cursor: pointer; scroll-snap-align: start;
}
.feedback-reward-choice.is-banner { flex-basis: 138px; }
.feedback-reward-choice.active { border-color: var(--primary); color: var(--panel-text); }
.feedback-reward-choice.disabled { opacity: 0.42; cursor: not-allowed; }
.feedback-reward-choice input { position: fixed; left: -10000px; width: 1px; height: 1px; }
.feedback-reward-choice img, .feedback-reward-choice .feedback-reward-fallback { width: 58px; height: 58px; object-fit: contain; }
.feedback-reward-choice.is-banner img { width: 92px; height: 58px; }
.feedback-reward-choice span { font-size: 0.65rem; font-weight: 750; line-height: 1.25; }
.feedback-reward-choice.none { align-content: center; }
.feedback-reward-arrow {
  width: 30px; height: 44px; padding: 0; border: 2px solid var(--panel-inset-border);
  border-radius: 6px; background: transparent; color: var(--panel-muted); font-size: 1.25rem; cursor: pointer;
}
.feedback-reward-arrow:hover { background: transparent; color: var(--panel-text); border-color: var(--panel-border); }
.feedback-no-rewards { padding: 0.65rem; border: 2px solid var(--panel-inset-border); color: var(--panel-muted); font-size: 0.72rem; }
.feedback-review { display: grid; grid-template-columns: max-content 1fr; gap: 0.18rem 0.7rem; margin: 0; padding-top: 0.5rem; border-top: 2px solid var(--panel-inset-border); }
.feedback-review span { color: var(--panel-dim); font-size: 0.66rem; }
.feedback-review b { color: var(--panel-muted); font-size: 0.68rem; }
.feedback-wizard .feedback-legal { margin: 0; }
.feedback-wizard .feedback-legal a { color: var(--gold); }
.feedback-wizard-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  min-height: 62px; padding: 0.75rem 1.35rem; border-top: 2px solid var(--panel-inset-border);
}
.feedback-back, .feedback-next {
  min-height: 36px; padding: 0.38rem 0.9rem; border: 2px solid var(--panel-inset-border);
  border-radius: 6px; background: transparent; color: var(--panel-muted); font: inherit; font-size: 0.76rem; font-weight: 850; cursor: pointer;
}
.feedback-back:hover { background: transparent; color: var(--panel-text); border-color: var(--panel-border); }
.feedback-next { border-color: var(--primary); background: var(--primary); color: var(--text); }
.feedback-next:hover { background: var(--primary-d); border-color: var(--primary-d); }
.feedback-next:disabled { opacity: 0.5; cursor: wait; }
.feedback-wizard > .feedback-status { min-height: 1rem; margin: -0.15rem 1.35rem 0; color: var(--panel-muted); font-size: 0.7rem; }
.feedback-wizard > .feedback-status.is-error { color: var(--loss); }
.feedback-website { position: fixed; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.feedback-leave-confirm {
  position: absolute; inset: 0; z-index: 8; display: grid; place-items: center;
  padding: 1rem; background: var(--feedback-backdrop);
}
.feedback-leave-confirm[hidden] { display: none; }
.feedback-leave-confirm > div {
  width: min(360px, 100%); padding: 1.1rem; border: 2px solid var(--panel-border);
  border-radius: 7px; background: var(--feedback-bg); box-shadow: var(--panel-shadow);
}
.feedback-leave-confirm h3, .feedback-leave-confirm p { margin: 0; }
.feedback-leave-confirm p { margin-top: 0.35rem; color: var(--panel-muted); font-size: 0.76rem; }
.feedback-leave-confirm > div > div { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
.feedback-leave-confirm button {
  min-height: 34px; padding: 0.35rem 0.7rem; border: 2px solid var(--panel-inset-border);
  border-radius: 6px; background: transparent; color: var(--panel-text); font: inherit; font-size: 0.72rem; font-weight: 800; cursor: pointer;
}
.feedback-leave-confirm button:hover { background: transparent; border-color: var(--panel-border); }
.feedback-leave-confirm [data-feedback-discard] { border-color: var(--loss); color: var(--loss); }
.feedback-success > img { width: 52px; height: 52px; object-fit: contain; }

@keyframes feedbackLeaveForward { to { opacity: 0; transform: translateX(-24px); } }
@keyframes feedbackLeaveBackward { to { opacity: 0; transform: translateX(24px); } }
@keyframes feedbackEnterForward { from { opacity: 0; transform: translateX(24px); } }
@keyframes feedbackEnterBackward { from { opacity: 0; transform: translateX(-24px); } }
@keyframes feedbackItemEnter { from { opacity: 0; transform: translateX(8px); } }
.feedback-wizard-step.is-leaving-forward { animation: feedbackLeaveForward 0.15s ease both; }
.feedback-wizard-step.is-leaving-backward { animation: feedbackLeaveBackward 0.15s ease both; }
.feedback-wizard-step.is-entering-forward { animation: feedbackEnterForward 0.22s ease both; }
.feedback-wizard-step.is-entering-backward { animation: feedbackEnterBackward 0.22s ease both; }
.feedback-wizard-step.is-entering-forward > * { animation: feedbackItemEnter 0.2s ease both; }
.feedback-wizard-step.is-entering-forward > :nth-child(2) { animation-delay: 0.035s; }
.feedback-wizard-step.is-entering-forward > :nth-child(3) { animation-delay: 0.07s; }
.feedback-wizard-step.is-entering-forward > :nth-child(4) { animation-delay: 0.105s; }

@media (prefers-reduced-motion: reduce) {
  .feedback-wizard-step[class*="is-entering-"], .feedback-wizard-step[class*="is-leaving-"] { animation: none; }
  .feedback-wizard-step.is-entering-forward > * { animation: none; }
}

@media (max-width: 620px) {
  .modal-box:has(.feedback-wizard) { width: 96vw; max-width: 96vw; max-height: 96vh; }
  .feedback-progress span { display: none; }
  .feedback-progress li:not(:last-child)::after { left: 28px; right: 4px; }
  .feedback-topic-choices { grid-template-columns: 1fr; }
  .feedback-upload { align-items: flex-start; flex-direction: column; }
  .feedback-reward-preview { align-items: flex-start; flex-direction: column; }
}
.cr-text {
  --cr-fill: #fff;
  --cr-outline: 0.06em;
  --cr-outline-color: #241a12;
  --cr-shadow-x: 0em;
  --cr-shadow-y: 0.09em;
  --cr-shadow-color: rgba(0, 0, 0, 0.9);

  font-family: "Clash Display", sans-serif;
  font-weight: 400;
  color: var(--cr-fill);
  -webkit-text-stroke: calc(var(--cr-outline) * 2) var(--cr-outline-color);
  paint-order: stroke fill;
  filter: drop-shadow(var(--cr-shadow-x) var(--cr-shadow-y) 0 var(--cr-shadow-color));
}
.cr-ribbon-new {
  --cr-ribbon-width: 76px;
  position: absolute; z-index: 5; width: var(--cr-ribbon-width); aspect-ratio: 190 / 90;
  top: -3px; right: -3px; left: auto;
  display: block; margin: 0; padding: 0; font-size: calc(var(--cr-ribbon-width) * .205);
  font-style: normal; line-height: 1; pointer-events: none; isolation: isolate;
  filter: drop-shadow(0 3px 2px var(--new-badge-shadow));
}
.cr-ribbon-new::before,
.cr-ribbon-new::after { content: ""; position: absolute; inset: 0; }
.cr-ribbon-new::before {
  z-index: 1;
  clip-path: polygon(0 0, 88% 0, 92% 1%, 95% 4%, 97.5% 9%, 99% 15%, 100% 24%,
    100% 100%, 98.5% 89%, 97% 82%, 95% 77%, 92% 74%, 88% 73%, 6% 73%);
  background:
    linear-gradient(90deg, transparent 88%, color-mix(in srgb, var(--new-badge-white) 22%, transparent) 96%, transparent),
    linear-gradient(180deg, color-mix(in srgb, var(--new-ribbon-pink) 70%, var(--new-badge-white)),
      var(--new-ribbon-pink) 6%, var(--new-ribbon-pink) 66%,
      color-mix(in srgb, var(--new-ribbon-pink) 70%, var(--new-badge-depth)) 73%, var(--new-badge-red));
}
.cr-ribbon-new::after {
  clip-path: polygon(86% 63%, 100% 74%, 100% 100%, 91% 83%, 86% 79%);
  background: var(--new-badge-depth);
}
.cr-ribbon-new > [class~="cr-text"] {
  --cr-fill: var(--new-badge-white); --cr-outline: .055em;
  --cr-outline-color: var(--cr-bar-border); --cr-shadow-y: .085em;
  --cr-shadow-color: var(--cr-bar-border);
  position: absolute; z-index: 2; inset: 0 15% 30% 8%;
  display: grid; place-items: center; font-size: inherit; line-height: 1;
  font-style: normal; white-space: nowrap;
}
.cr-ribbon-new:lang(fr) { font-size: calc(var(--cr-ribbon-width) * .13); }
.cr-ribbon-new:lang(es) { font-size: calc(var(--cr-ribbon-width) * .17); }
.cr-ribbon-new:lang(it) { font-size: calc(var(--cr-ribbon-width) * .175); }
.cr-ribbon-new:lang(ja) { font-size: calc(var(--cr-ribbon-width) * .185); }
.cr-ribbon-new:lang(ru) { font-size: calc(var(--cr-ribbon-width) * .18); }
@media (max-width: 820px) {
  .cr-ribbon-new { --cr-ribbon-width: 64px; }
}
@media (max-width: 1160px) {
  .nav-item .nav-link .nav-label {
    display: block; width: min-content; text-align: center;
    line-height: 1.12; white-space: normal; hyphens: manual; word-break: keep-all;
  }
}
@media (min-width: 1101px) and (max-width: 1160px) {
  .brand span { display: none; }
  .header-feedback span { display: none; }
}
@media (max-width: 1100px) {
  #tabs { display: none; }
  .nav-inner {
    grid-template-columns: 1fr auto;
    height: 52px; padding: 0 0.9rem;
  }
  .header-actions { justify-self: end; }
  .brand .logo { width: 26px; height: 26px; }
  .brand span { margin-left: 0.45rem; font-size: 0.95rem; white-space: nowrap; }
  :root { --mobile-nav-platz: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .mobile-nav {
    position: fixed; z-index: 60;
    left: 50%; right: auto; top: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 24px); max-width: 500px; transform: translateX(-50%);
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; padding: 6px;
    background:
      linear-gradient(rgba(10, 13, 26, 0.72), rgba(10, 13, 26, 0.72)) padding-box,
      linear-gradient(120deg, #587cff, #bd71f0, #587cff) border-box;
    border: 1.5px solid transparent;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 22px rgba(120, 110, 255, 0.35);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
  }
  .mobile-nav {
    transition: width .42s cubic-bezier(.32, .72, 0, 1), grid-template-columns .42s cubic-bezier(.32, .72, 0, 1),
      gap .42s ease, border-radius .42s ease;
  }
  body:has(.geier-shell.in-game) .mobile-nav {
    left: auto; right: 12px; transform: none;
  }
  body:has(.geier-shell.in-game) .mobile-nav:not(.ausgeklappt) {
    width: 64px; gap: 0; grid-template-columns: 0fr 0fr 0fr 0fr 1fr; border-radius: 22px;
  }
  body:has(.geier-shell.in-game) .mobile-nav .mobile-nav-item { min-width: 0; overflow: hidden; transition: opacity .25s ease; }
  body:has(.geier-shell.in-game) .mobile-nav:not(.ausgeklappt) .mobile-nav-item:not(#mobile-more-btn) { opacity: 0; pointer-events: none; padding-inline: 0; }

  .mobile-nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; min-height: 52px; padding: 0.3rem 0.2rem;
    border: 0; border-radius: 14px; background: none; cursor: pointer;
    color: rgba(220, 228, 255, 0.6);
    font: inherit; font-size: 10px; letter-spacing: 0.02em;
    text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav-item span { line-height: 1; }
  .mobile-nav-item { position: relative; }
  .mobile-nav-item.active, .mobile-nav-item[aria-expanded="true"] { color: var(--panel-text); }
  body { padding-bottom: var(--mobile-nav-platz); }
  .mobile-nav-item, .mobile-nav-item:hover, .mobile-nav-item:focus,
  .ms-toggle, .ms-toggle:hover, .ms-toggle:focus,
  .mobile-sheet-close, .mobile-sheet-close:hover, .mobile-sheet-close:focus {
    background: none; border-radius: 0; font-weight: 400;
  }
  .mobile-nav .mobile-nav-item, .mobile-nav .mobile-nav-item:hover, .mobile-nav .mobile-nav-item:focus { border-radius: 18px; }
  .mobile-nav .mobile-nav-item.active,
  .mobile-nav .mobile-nav-item[aria-expanded="true"] {
    color: #fff;
    background: linear-gradient(135deg, #587cff, #9b6cf5);
    box-shadow: 0 0 16px rgba(120, 110, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }
  .mobile-nav .mobile-nav-item.active svg,
  .mobile-nav .mobile-nav-item[aria-expanded="true"] svg { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); }
  .mobile-nav:has([aria-expanded="true"]) .mobile-nav-item.active { background: none; box-shadow: none; color: rgba(220, 228, 255, 0.6); }
  .mobile-nav:has([aria-expanded="true"]) .mobile-nav-item.active svg { filter: none; }
  .ms-toggle, .ms-toggle:hover { padding: 0; }
  .mobile-sheet-close, .mobile-sheet-close:hover { padding: 0.3rem; }
  .mobile-nav-item:focus-visible, .ms-toggle:focus-visible, .mobile-sheet-close:focus-visible {
    outline: 2px solid var(--primary); outline-offset: -3px;
  }

  .mobile-sheet { position: fixed; inset: 0; z-index: 50; }
  .mobile-sheet[hidden] { display: none; }
  .mobile-sheet-backdrop {
    position: absolute; inset: 0; background: rgba(2, 5, 11, 0.62);
    opacity: 0; transition: opacity .16s ease;
  }
  .mobile-sheet.is-open .mobile-sheet-backdrop { opacity: 1; transition-duration: .22s; }
  .mobile-sheet-panel {
    position: absolute; left: 50%; right: auto; bottom: var(--mobile-nav-platz);
    width: calc(100% - 24px); max-width: 500px;
    max-height: min(68vh, calc(100vh - var(--mobile-nav-platz) - 64px));
    display: flex; flex-direction: column; overflow: hidden;
    background:
      linear-gradient(rgba(10, 13, 26, 0.9), rgba(10, 13, 26, 0.9)) padding-box,
      linear-gradient(120deg, #587cff, #bd71f0, #587cff) border-box;
    border: 1.5px solid transparent; border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 22px rgba(120, 110, 255, 0.35);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    transform: translate(-50%, calc(100% + var(--mobile-nav-platz)));
    transition: transform .18s cubic-bezier(.4, 0, 1, 1);
    will-change: transform;
  }
  .mobile-sheet.is-open .mobile-sheet-panel {
    transform: translate(-50%, 0);
    transition: transform .26s cubic-bezier(.32, .72, 0, 1);
  }
  @media (prefers-reduced-motion: reduce) {
    .mobile-sheet-backdrop, .mobile-sheet-panel,
    .mobile-sheet.is-open .mobile-sheet-backdrop, .mobile-sheet.is-open .mobile-sheet-panel {
      transition: none;
    }
  }
  .mobile-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.8rem 0.8rem 0.3rem 1.2rem; font-weight: 700; color: #fff; letter-spacing: 0.02em;
  }
  .mobile-sheet .mobile-sheet-close, .mobile-sheet .mobile-sheet-close:hover, .mobile-sheet .mobile-sheet-close:focus {
    width: 34px; height: 34px; display: grid; place-items: center; padding: 0;
    border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08);
    color: rgba(226, 233, 248, 0.85); cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .mobile-sheet-body {
    overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding: 0.3rem 0.5rem 0.5rem;
    overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(120, 110, 255, 0.55) transparent;
  }
  .ms-row {
    display: flex; align-items: center; gap: 0.85rem; min-height: 47px;
    padding: 0.55rem 0.8rem; border-radius: 16px; border: 0;
    color: rgba(226, 233, 248, 0.92); text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, box-shadow 0.15s ease;
  }
  .ms-row svg { flex: none; width: 22px; height: 22px; opacity: 0.8; }
  .ms-row:active { background: rgba(255, 255, 255, 0.07); }
  .ms-row.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(88, 124, 255, 0.34), rgba(155, 108, 245, 0.34));
    box-shadow: inset 0 0 0 1px rgba(155, 108, 245, 0.55), 0 0 14px rgba(120, 110, 255, 0.25);
  }
  .ms-row.active svg { opacity: 1; color: #fff; filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6)); }

  .ms-group { position: relative; display: flex; flex-wrap: wrap; align-items: center; border-radius: 16px;
    transition: background 0.15s ease, box-shadow 0.15s ease; }
  .ms-group:has(> .ms-row.active) {
    background: linear-gradient(135deg, rgba(88, 124, 255, 0.34), rgba(155, 108, 245, 0.34));
    box-shadow: inset 0 0 0 1px rgba(155, 108, 245, 0.55), 0 0 14px rgba(120, 110, 255, 0.25);
  }
  .ms-group > .ms-row.active { background: none; box-shadow: none; }
  .ms-group:has(> .ms-row.active) .ms-toggle { color: #fff; }
  .ms-group .ms-row { flex: 1; min-width: 0; }
  .ms-toggle, .ms-toggle:hover, .ms-toggle:focus {
    flex: none; width: 50px; height: 47px; display: grid; place-items: center;
    border: 0; border-radius: 16px; background: none; cursor: pointer;
    color: rgba(226, 233, 248, 0.6); -webkit-tap-highlight-color: transparent;
  }
  .ms-toggle:active { background: rgba(255, 255, 255, 0.07); }
  .ms-toggle svg { transition: transform .18s ease; }
  .ms-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .ms-toggle[aria-expanded="true"] { color: #fff; }

  .ms-sub {
    flex: 0 0 100%; display: flex; flex-direction: column; gap: 2px;
    margin: 2px 0 6px; padding: 6px; border-radius: 14px; background: rgba(0, 0, 0, 0.28);
  }
  .ms-group:has(> .ms-row.active) .ms-sub {
    margin: 0; padding: 4px 6px 8px; border-radius: 0 0 16px 16px; background: none;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .ms-group:has(> .ms-row.active) .ms-sub a { color: rgba(255, 255, 255, 0.92); }
  .ms-sub[hidden] { display: none; }
  .ms-sub a {
    padding: 0.58rem 0.9rem 0.58rem 2.7rem; border: 0; border-radius: 10px;
    color: rgba(226, 233, 248, 0.82); font-size: 0.9rem; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .ms-sub a:active { background: rgba(255, 255, 255, 0.07); }
  .mobile-sheet-legal {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 1.1rem;
    padding: 0.7rem 1rem 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.07);
  }
  .mobile-sheet-legal a { color: var(--panel-muted, rgba(226, 233, 248, 0.6)); font-size: 0.78rem; text-decoration: none; }
  .home-galaxy { overflow: hidden; }
  .subtabs {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: -1rem; padding-inline: 1rem;
    overscroll-behavior-x: contain;
  }
  .subtabs::-webkit-scrollbar { display: none; }
  .subtabs :is(a, button) { flex: 0 0 auto; }
  .cookie-bar-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cookie-bar-btn { min-height: 44px; padding-inline: 0.5rem; white-space: normal; text-align: center; }
}
@media (min-width: 1000px) and (max-width: 1100px) {
  :is(html:lang(en), html:lang(ko), html:lang(zh-CN), html:lang(ar), html:lang(id),
     html:lang(pl), html:lang(fr), html:lang(tr), html:lang(ru), html:lang(it),
     html:lang(uk), html:lang(es-419), html:lang(pt-BR)) #tabs { display: flex; }
  :is(html:lang(en), html:lang(ko), html:lang(zh-CN), html:lang(ar), html:lang(id),
     html:lang(pl), html:lang(fr), html:lang(tr), html:lang(ru), html:lang(it),
     html:lang(uk), html:lang(es-419), html:lang(pt-BR)) .nav-inner { grid-template-columns: 1fr auto 1fr; height: 58px; padding: 0 1.25rem; }
  :is(html:lang(en), html:lang(ko), html:lang(zh-CN), html:lang(ar), html:lang(id),
     html:lang(pl), html:lang(fr), html:lang(tr), html:lang(ru), html:lang(it),
     html:lang(uk), html:lang(es-419), html:lang(pt-BR)) .brand .logo { width: 28px; height: 28px; }
  :is(html:lang(en), html:lang(ko), html:lang(zh-CN), html:lang(ar), html:lang(id),
     html:lang(pl), html:lang(fr), html:lang(tr), html:lang(ru), html:lang(it),
     html:lang(uk), html:lang(es-419), html:lang(pt-BR)) .brand span,
  :is(html:lang(en), html:lang(ko), html:lang(zh-CN), html:lang(ar), html:lang(id),
     html:lang(pl), html:lang(fr), html:lang(tr), html:lang(ru), html:lang(it),
     html:lang(uk), html:lang(es-419), html:lang(pt-BR)) .header-feedback span { display: none; }
  :is(html:lang(en), html:lang(ko), html:lang(zh-CN), html:lang(ar), html:lang(id),
     html:lang(pl), html:lang(fr), html:lang(tr), html:lang(ru), html:lang(it),
     html:lang(uk), html:lang(es-419), html:lang(pt-BR)) .mobile-nav,
  :is(html:lang(en), html:lang(ko), html:lang(zh-CN), html:lang(ar), html:lang(id),
     html:lang(pl), html:lang(fr), html:lang(tr), html:lang(ru), html:lang(it),
     html:lang(uk), html:lang(es-419), html:lang(pt-BR)) .mobile-sheet { display: none; }
  :is(html:lang(en), html:lang(ko), html:lang(zh-CN), html:lang(ar), html:lang(id),
     html:lang(pl), html:lang(fr), html:lang(tr), html:lang(ru), html:lang(it),
     html:lang(uk), html:lang(es-419), html:lang(pt-BR)) body { padding-bottom: 0; }
  :is(html:lang(en), html:lang(ko), html:lang(zh-CN), html:lang(ar), html:lang(id),
     html:lang(pl), html:lang(fr), html:lang(tr), html:lang(ru), html:lang(it),
     html:lang(uk), html:lang(es-419), html:lang(pt-BR)) .deck-tools-tabs { top: 58px; }
}

@media (min-width: 881px) and (max-width: 999px) {
  :is(html:lang(en), html:lang(ko), html:lang(zh-CN), html:lang(ar), html:lang(id)) #tabs { display: flex; }
  :is(html:lang(en), html:lang(ko), html:lang(zh-CN), html:lang(ar), html:lang(id)) .nav-inner { grid-template-columns: 1fr auto 1fr; height: 58px; padding: 0 1.25rem; }
  :is(html:lang(en), html:lang(ko), html:lang(zh-CN), html:lang(ar), html:lang(id)) .brand .logo { width: 28px; height: 28px; }
  :is(html:lang(en), html:lang(ko), html:lang(zh-CN), html:lang(ar), html:lang(id)) .brand span,
  :is(html:lang(en), html:lang(ko), html:lang(zh-CN), html:lang(ar), html:lang(id)) .header-feedback span { display: none; }
  :is(html:lang(en), html:lang(ko), html:lang(zh-CN), html:lang(ar), html:lang(id)) .mobile-nav,
  :is(html:lang(en), html:lang(ko), html:lang(zh-CN), html:lang(ar), html:lang(id)) .mobile-sheet { display: none; }
  :is(html:lang(en), html:lang(ko), html:lang(zh-CN), html:lang(ar), html:lang(id)) body { padding-bottom: 0; }
  :is(html:lang(en), html:lang(ko), html:lang(zh-CN), html:lang(ar), html:lang(id)) .deck-tools-tabs { top: 58px; }
}

@media (min-width: 1101px) {
  .mobile-nav, .mobile-sheet { display: none !important; }
  #tabs > .nav-item { flex: 0 1 auto; min-width: 0; }
  #tabs .nav-link { min-width: 0; }
}
@media (max-width: 640px) {
  .col-source-box .player-deck-cards {
    grid-template-columns: repeat(8, minmax(0, 1fr)); width: 100%; gap: 2px;
  }
  .col-source-box .player-deck-cards .card,
  .col-source-box .player-deck-cards .card-img,
  .col-source-box .player-deck-cards .card-img img { width: 100%; }
  .col-source-pick { gap: 0.5rem; }
  .col-source-box .player-deck-mode { padding-right: 0.5rem; }
  .col-source-box { margin-inline: 0.55rem; }
}
.maintenance-notice {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px; padding: 40px 20px 44px;
  border: 1px dashed rgba(255, 255, 255, 0.2); border-radius: 8px;
}
.maintenance-art { width: 150px; max-width: 42vw; height: auto; margin-bottom: 6px; }
.maintenance-code {
  margin: 0; font-size: clamp(1.9rem, 6vw, 2.8rem); font-weight: 800; line-height: 1;
  letter-spacing: -0.03em; color: #fff;
}
.maintenance-title { margin: 10px 0 0; font-size: clamp(1.05rem, 3vw, 1.3rem); font-weight: 750; color: var(--panel-text); }
.maintenance-text { margin: 10px 0 0; max-width: 52ch; color: rgba(226, 233, 248, 0.62); line-height: 1.65; }
.maintenance-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }
.maintenance-btn {
  display: inline-flex; align-items: center; padding: 11px 20px; border-radius: 10px;
  font-weight: 700; font-size: 0.92rem; text-decoration: none;
  background: #4c6de1; color: #fff; border: 1px solid transparent;
}
.maintenance-btn:hover { background: #3f5cc4; text-decoration: none; }
.maintenance-btn-ghost { background: transparent; border-color: rgba(255, 255, 255, 0.16); color: #e8edfb; }
.maintenance-btn-ghost:hover { background: rgba(255, 255, 255, 0.07); }
.maintenance-links { max-width: none; margin-top: 26px; font-size: 0.86rem; color: rgba(226, 233, 248, 0.45); }
.maintenance-links a { color: rgba(226, 233, 248, 0.72); text-decoration: none; }
.maintenance-links a:hover { color: #fff; text-decoration: underline; }
.maintenance-links span { padding: 0 6px; opacity: 0.4; }
@media (max-width: 760px) {
  main:has(.geier-shell.in-room) { padding-top: 0; }
  body:not(.mini-extras-open) main:has(.geier-shell.in-room) { padding-bottom: 0; }
}
.mini-extras-toggle {
  display: flex; align-items: center; gap: 0.5rem; margin: 1.4rem auto 0;
  padding: 0.5rem 0.9rem; cursor: pointer;
  border: 1px solid var(--panel-inset-border); border-radius: 999px;
  background: transparent; color: var(--panel-muted);
  font-size: 0.78rem; font-weight: 750;
}
.mini-extras-toggle:hover { color: var(--panel-text); background: rgba(255, 255, 255, 0.05); }
.mini-extras-caret {
  width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid currentColor; transition: transform .16s ease;
}
body.mini-extras-open .mini-extras-caret { transform: rotate(180deg); }
.mini-extras-toggle { display: none; }
.lb-season-chart { padding: 14px 16px 12px; margin-bottom: 14px; }
.lb-season-chart-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
}
.lb-season-chart-head > span:first-child { display: flex; flex-direction: column; gap: 1px; }
.lb-season-eyebrow {
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--panel-dim);
}
.lb-season-chart-head strong { font-size: .95rem; color: var(--panel-text); }
.lb-season-captured { font-size: .74rem; color: var(--panel-muted); padding-top: 2px; }
.lb-season-ranges { margin: 2px 0 8px; }

.lb-season-svg { width: 100%; height: auto; display: block; overflow: visible; }
.lb-season-grid line { stroke: rgba(183, 203, 255, 0.09); stroke-width: 1; stroke-dasharray: 3 5; }
.lb-season-grid text,
.lb-season-xaxis text {
  fill: rgba(211, 221, 247, 0.38); font-size: 9px; font-weight: 650;
  font-variant-numeric: tabular-nums; font-family: "Inter", system-ui, sans-serif;
}
.lb-season-grid text { text-anchor: end; }
.lb-season-xaxis text { text-anchor: middle; }
.lb-season-path {
  fill: none; stroke-width: 1.75;
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.lb-season-line .lb-season-path { stroke: rgba(150, 165, 200, 0.55); opacity: .28; }
.lb-season-line.is-focus .lb-season-path { stroke: var(--panel-text); opacity: .95; }
.lb-season-line.is-hover .lb-season-path {
  opacity: 1; stroke-width: 3;
  filter: drop-shadow(0 0 5px currentColor) drop-shadow(0 0 10px currentColor);
}
.lb-season-line.is-hover .lb-season-dot { opacity: 1; }
.lb-season-line.s1 { color: var(--series-1); }
.lb-season-line.s2 { color: var(--series-2); }
.lb-season-line.s3 { color: var(--series-3); }
.lb-season-line.s4 { color: var(--series-4); }
.lb-season-line.s5 { color: var(--series-5); }
.lb-season-line.s6 { color: var(--series-6); }
.lb-season-line.s7 { color: var(--series-7); }
.lb-season-line.s8 { color: var(--series-8); }
.lb-season-line.s9 { color: var(--series-9); }
.lb-season-line.s10 { color: var(--series-10); }
.lb-season-line.is-focus.s1 .lb-season-path { stroke: var(--series-1); }
.lb-season-line.is-focus.s2 .lb-season-path { stroke: var(--series-2); }
.lb-season-line.is-focus.s3 .lb-season-path { stroke: var(--series-3); }
.lb-season-line.is-focus.s4 .lb-season-path { stroke: var(--series-4); }
.lb-season-line.is-focus.s5 .lb-season-path { stroke: var(--series-5); }
.lb-season-line.is-focus.s6 .lb-season-path { stroke: var(--series-6); }
.lb-season-line.is-focus.s7 .lb-season-path { stroke: var(--series-7); }
.lb-season-line.is-focus.s8 .lb-season-path { stroke: var(--series-8); }
.lb-season-line.is-focus.s9 .lb-season-path { stroke: var(--series-9); }
.lb-season-line.is-focus.s10 .lb-season-path { stroke: var(--series-10); }
.lb-season-line.s1 .lb-season-dot { fill: var(--series-1); }
.lb-season-line.s2 .lb-season-dot { fill: var(--series-2); }
.lb-season-line.s3 .lb-season-dot { fill: var(--series-3); }
.lb-season-line.s4 .lb-season-dot { fill: var(--series-4); }
.lb-season-line.s5 .lb-season-dot { fill: var(--series-5); }
.lb-season-line.s6 .lb-season-dot { fill: var(--series-6); }
.lb-season-line.s7 .lb-season-dot { fill: var(--series-7); }
.lb-season-line.s8 .lb-season-dot { fill: var(--series-8); }
.lb-season-line.s9 .lb-season-dot { fill: var(--series-9); }
.lb-season-line.s10 .lb-season-dot { fill: var(--series-10); }
.lb-season-line-label.s1 { fill: var(--series-1); }
.lb-season-line-label.s2 { fill: var(--series-2); }
.lb-season-line-label.s3 { fill: var(--series-3); }
.lb-season-line-label.s4 { fill: var(--series-4); }
.lb-season-line-label.s5 { fill: var(--series-5); }
.lb-season-line-label.s6 { fill: var(--series-6); }
.lb-season-line-label.s7 { fill: var(--series-7); }
.lb-season-line-label.s8 { fill: var(--series-8); }
.lb-season-line-label.s9 { fill: var(--series-9); }
.lb-season-line-label.s10 { fill: var(--series-10); }
.lb-season-chip.s1 .lb-season-swatch { background: var(--series-1); }
.lb-season-chip.s2 .lb-season-swatch { background: var(--series-2); }
.lb-season-chip.s3 .lb-season-swatch { background: var(--series-3); }
.lb-season-chip.s4 .lb-season-swatch { background: var(--series-4); }
.lb-season-chip.s5 .lb-season-swatch { background: var(--series-5); }
.lb-season-chip.s6 .lb-season-swatch { background: var(--series-6); }
.lb-season-chip.s7 .lb-season-swatch { background: var(--series-7); }
.lb-season-chip.s8 .lb-season-swatch { background: var(--series-8); }
.lb-season-chip.s9 .lb-season-swatch { background: var(--series-9); }
.lb-season-chip.s10 .lb-season-swatch { background: var(--series-10); }
.lb-season-dot { stroke: #131a2c; stroke-width: 2.2; opacity: .95; transition: r .12s ease; }
.lb-season-dot.up { fill: #6fe0a6; }
.lb-season-dot.down { fill: #ff8494; }
.lb-season-dot.flat { fill: #9fb0d4; }
.lb-season-dot:hover { r: 4.5px; opacity: 1; }
.lb-season-line-label {
  font-size: 10.5px; font-weight: 700; text-anchor: start;
  font-family: "Inter", system-ui, sans-serif;
  paint-order: stroke fill; stroke: rgba(6, 12, 30, 0.85); stroke-width: 2.5px; stroke-linejoin: round;
  cursor: default;
}
.lb-season-line-label.is-off { fill: rgba(160, 172, 200, 0.42) !important; }
.lb-season-line-label:hover { filter: drop-shadow(0 0 4px currentColor); }

.lb-season-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lb-season-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 6px; cursor: pointer;
  background: var(--panel-inset); border: 1px solid var(--panel-inset-border);
  color: var(--panel-muted); font-size: .76rem; line-height: 1.3;
  font-family: inherit; transition: color .15s, border-color .15s;
}
.lb-season-chip:hover { color: var(--panel-text); border-color: var(--panel-border); }
.lb-season-chip.active { color: var(--panel-text); border-color: var(--panel-border); }
.lb-season-swatch {
  width: 9px; height: 9px; border-radius: 2px; flex: none;
  background: var(--panel-dim);
}
.lb-season-chip:not(.active) .lb-season-swatch { opacity: .3; }

.lb-season-empty { color: var(--panel-muted); font-size: .85rem; padding: 20px 0; text-align: center; }
@media (max-width: 620px) {
  .lb-season-chart { padding: 12px 12px 10px; }
  .lb-season-line-label { display: none; }
  .lb-season-captured { font-size: .7rem; }
  .lb-season-ranges button { padding-left: .55rem; padding-right: .55rem; }
}
.lb-season-line-label.s1 { fill: var(--series-1); }
.lb-season-line-label.s2 { fill: var(--series-2); }
.lb-season-line-label.s3 { fill: var(--series-3); }
.lb-season-line-label.s4 { fill: var(--series-4); }
.lb-season-board {
  --cr-schwarz: #05070f;
  padding: 7px;
  border-radius: var(--panel-radius);
  background-color: var(--karo-fuge);
  background-image: var(--karo-licht), var(--karo-kachel);
  background-size: auto, var(--karo-groesse) var(--karo-groesse);
  box-shadow: var(--panel-shadow);
}
.lb-season-entry {
  position: relative;
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) auto auto auto auto;
  align-items: center;
  gap: 0 0.7rem;
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  background: rgba(6, 20, 54, 0.62);
}
.lb-season-entry + .lb-season-entry { margin-top: 4px; }
.lb-season-entry:hover { background: rgba(6, 20, 54, 0.74); }
.lb-season-entry.tier-50 { background: rgba(6, 20, 54, 0.62); }
.lb-season-entry.tier-10 { background: rgba(6, 20, 54, 0.62); }
.lb-season-entry.medal { background: rgba(6, 20, 54, 0.62); }
.lb-season-entry.medal:hover { background: rgba(6, 20, 54, 0.74); }
.lb-season-entry.medal-2 { background: rgba(6, 20, 54, 0.62); }
.lb-season-entry.medal-2:hover { background: rgba(6, 20, 54, 0.74); }
.lb-season-pos { font-size: 1.5rem; line-height: 1; text-align: center; }
.lb-season-entry.medal-1 .lb-season-pos { --cr-fill: #ffd873; }
.lb-season-entry.medal-2 .lb-season-pos { --cr-fill: #eef3fa; }
.lb-season-entry.medal-3 .lb-season-pos { --cr-fill: #ffbd85; }

.lb-season-who { display: flex; min-width: 0; }
.lb-season-player {
  font-size: 1.02rem; line-height: 1.25; text-decoration: none;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb-season-player:hover { text-decoration: underline; }

.lb-season-deck {
  display: grid; grid-template-columns: repeat(8, 46px) auto;
  gap: 4px; align-items: center;
}
.lb-season-deck :is(.card, .card-img, .card-img img) { width: 46px; }
.lb-season-deck .card-img img { border-radius: 5px; }
.lb-season-tower {
  display: inline-flex; margin-left: 7px; padding-left: 7px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.lb-season-deck-empty {
  grid-column: 1 / -1; font-size: 0.8rem; color: rgba(226, 233, 248, 0.5);
  display: flex; align-items: center; white-space: nowrap;
}
.lb-season-entry > .elixir {
  justify-self: start;
  font-family: "Clash Display", "Inter", system-ui, sans-serif;
  font-size: 0.86rem;
}
.lb-season-elixir-leer { visibility: hidden; }
.lb-season-actions { justify-self: start; }
.lb-season-actions-empty { display: block; }
.lb-season-elo {
  display: inline-flex; align-items: flex-start; justify-self: end;
}
.lb-season-elo .cell-icon {
  width: 30px; height: 30px; flex: none;
  position: relative; z-index: 1;
  margin-right: -12px;
}
.lb-season-elo b {
  display: inline-flex; align-items: center;
  height: 21px;
  padding: 0 9px 0 12px;
  border-radius: 5px;
  background: rgba(2, 11, 38, 0.78);
  margin-top: 3px;
}
.lb-season-elo b > span {
  --cr-fill: #dcfbf8;
  font-size: 0.78rem; line-height: 1; font-weight: 400;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1100px) {
  .lb-season-deck { grid-template-columns: repeat(8, 40px) auto; }
  .lb-season-deck :is(.card, .card-img, .card-img img) { width: 40px; }
}

@media (max-width: 560px) {
  .lb-season-board { padding: 5px; }
  .lb-season-entry {
    grid-template-columns: 2.1rem minmax(0, 1fr) auto auto;
    grid-template-areas:
      "pos who elixir elo"
      "pos who actions actions"
      "deck deck deck deck";
    gap: 4px 0.45rem;
    padding: 0.5rem 0.55rem;
  }
  .lb-season-pos { grid-area: pos; font-size: 1.25rem; }
  .lb-season-who { grid-area: who; }
  .lb-season-player { font-size: 0.94rem; }
  .lb-season-entry > .elixir { grid-area: elixir; justify-self: end; }
  .lb-season-actions { grid-area: actions; justify-self: end; align-self: center; }
  .lb-season-actions-empty { grid-area: actions; }
  .lb-season-elo { grid-area: elo; }
  .lb-season-elo .cell-icon { width: 26px; height: 26px; margin-right: -10px; }
  .lb-season-elo b { height: 17px; padding: 0 8px 0 10px; margin-top: 3px; }
  .lb-season-elo b > span { font-size: 0.66rem; }
  .lb-season-deck { grid-area: deck; grid-template-columns: repeat(8, 1fr) auto; gap: 3px; }
  .lb-season-entry .lb-season-deck > .card,
  .lb-season-entry .lb-season-deck > .card .card-img,
  .lb-season-entry .lb-season-deck > .card .card-img img { width: 100%; }
  .lb-season-tower { margin-left: 5px; padding-left: 5px; }
  .lb-season-tower :is(.card, .card-img, .card-img img) { width: 36px; }
}
@media (max-width: 820px) {
  .battle-body { flex-wrap: wrap; justify-content: space-between; }
  .side-info { position: static; width: auto; max-width: 48%; min-width: 0; }
  .side-info.left { order: 1; }
  .side-info.right { order: 2; }
  .battle-rounds { order: 3; width: 100%; }
  .battle-decks.is-2v2 { order: 3; width: 100%; }
  .battle.is-2v2 .side-info { display: none; }
  .battle-2v2-name { display: block; width: 100%; }
  .battle-2v2-side.own .battle-2v2-name { text-align: left; }
  .battle-2v2-side.opponent .battle-2v2-name { text-align: right; }
  .battle-2v2-player { gap: 0.3rem; }
  .battle-2v2-side { gap: 1rem; }
}
.builder-team-decks {
  display: grid; grid-template-columns: max-content max-content;
  justify-content: center;
  gap: var(--team-gap); position: relative;
  --team-gap: clamp(2rem, 9vw, 10rem);
}
.builder-team-decks > .builder-team-deck + .builder-team-deck::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(-1 * var(--team-gap) / 2 - 1px);
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, transparent, #587cff, #bd71f0, transparent);
  box-shadow: var(--panel-line-glow);
  pointer-events: none;
}
.builder-team-deck { position: relative; }
.builder-team-decks > *, .builder-team-deck > * { order: 0; }
.builder-team-deck { min-width: 0; }
.builder-team-deck .builder-result-cards { width: max-content; }
.builder-team-deck .builder-result-cards {
  grid-template-columns: repeat(4, minmax(40px, 52px)) 14px minmax(40px, 52px);
  margin-top: 0.35rem;
}
.builder-team-deck .builder-result-cards > .builder-tower-divider { grid-column: 5; grid-row: 1 / span 2; height: 100%; }
.builder-team-deck .builder-result-cards > .builder-tower-card { grid-column: 6; grid-row: 1 / span 2; align-self: center; }
.builder-war-decks {
  display: grid;
  grid-template-columns: minmax(0, 521px);
  justify-content: center;
  gap: 1.1rem;
  margin-top: 0.8rem;
}
.builder-war-decks .builder-team-deck:nth-child(n + 2) {
  padding-top: 1.1rem;
  border-top: 1px solid var(--panel-inset-border);
}
.builder-war-decks .builder-team-deck .builder-result-cards {
  width: auto;
  grid-template-columns: repeat(8, minmax(0, 52px)) 26px minmax(0, 52px);
}
.builder-war-decks .builder-team-deck .builder-result-cards > .builder-result-card:nth-child(n + 5):nth-child(-n + 8) {
  grid-row: auto;
}
.builder-war-decks .builder-team-deck .builder-result-cards > .builder-tower-divider {
  grid-area: 1 / 9 / 2 / 10; align-self: center; height: 82%;
}
.builder-war-decks .builder-team-deck .builder-result-cards > .builder-tower-card {
  grid-area: 1 / 10 / 2 / 11; align-self: center;
}
.builder-war-decks .builder-result-card { position: relative; container-type: inline-size; }
.builder-war-decks .builder-card-lvl {
  position: absolute; inset-inline: 0; bottom: 9.6cqw;
  width: max-content; margin-inline: auto; margin-top: 0;
  min-height: clamp(11px, 28.8cqw, 15px);
  padding: 0 clamp(2px, 9.2cqw, 0.3rem) 1px;
  font-size: clamp(8px, 19cqw, 0.62rem);
  border-radius: clamp(2px, 7.7cqw, 4px);
}
@media (max-width: 760px) {
  .builder-war-decks .builder-team-deck .builder-result-cards {
    grid-template-columns: repeat(8, minmax(0, 1fr)) 10px minmax(0, 1fr);
    column-gap: 2px;
  }
  .builder-war-decks .builder-result-card img { max-height: 92px; }
}
.builder-deck-owner {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  font-weight: 700; font-size: 0.86rem; color: var(--muted);
  padding-bottom: 0.3rem; min-width: 0;
}
.builder-deck-owner-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.builder-deck-owner-actions { display: inline-flex; align-items: center; gap: 0.5rem; flex: none; }
.builder-side-switch { display: flex; justify-content: center; margin: 0 0 0.9rem; }
.builder-arena-switch button { display: inline-flex; align-items: center; gap: 0.4rem; }
.builder-arena-switch button img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.builder-card-arena-mark {
  position: absolute; top: 2px; left: 2px; z-index: 3; width: 22px; height: 22px;
  pointer-events: none; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
}
.builder-card.in-other-arena:disabled { opacity: 1; }
.builder-card.in-other-arena > img:not(.builder-card-arena-mark) { opacity: 0.34; }
.builder-deck-owner-name.has-arena { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; }
.builder-deck-owner-name.has-arena img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.builder-deck-owner-name.has-arena span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.builder-tag-optional { color: var(--muted); font-weight: 400; }
@media (max-width: 900px) {
  .builder-team-decks {
    grid-template-columns: max-content; gap: var(--team-gap);
    justify-content: center; max-width: 100%;
    --team-gap: 1.6rem;
  }
  .builder-team-decks > .builder-team-deck + .builder-team-deck { padding-left: 0; }
  .builder-team-decks > .builder-team-deck + .builder-team-deck::before {
    top: calc(-1 * var(--team-gap) / 2 - 1px); bottom: auto;
    left: 50%; right: auto; transform: translateX(-50%);
    width: 100vw; max-width: 88vw; height: 2px;
    background: linear-gradient(90deg, transparent, #587cff, #bd71f0, transparent);
  }
}
.builder-two-page .builder-mode-back {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  color: var(--panel-text); border-radius: var(--panel-radius);
  transition: background .18s, transform .18s;
}
.builder-two-page .builder-mode-back:hover { background: var(--panel-inset); transform: translateX(-2px); }
.builder-two-page .builder-wizard-head > div { flex: 1; min-width: 0; }
.builder-two-page.builder-on-workspace .builder-wizard-head { gap: 10px; border-bottom: 0; }
.builder-two-page.builder-on-workspace .builder-wizard-head h1 { font-size: .95rem; color: var(--panel-muted); }
.builder-two-page .builder-workspace { max-width: none; }
.builder-two-page .builder-workspace > :not(.builder-mode-heading) { max-width: 920px; margin-inline: auto; }
.builder-two-page .builder-mode-heading {
  position: relative; isolation: isolate; min-height: 174px; margin: -12px -16px 18px;
  padding: 28px 24px; gap: 16px; overflow: hidden;
}
.builder-two-page .builder-mode-heading h2 { font-size: clamp(2.1rem, 5vw, 3.7rem); line-height: 1.12; text-align: center; }
.builder-two-page .builder-mode-heading > img { width: 124px; height: 124px; flex: none; }
.builder-two-page[data-mode="clan-wars"] { --mode-banner: url("assets/builder/clanwars-banner.jpg"); --mode-banner-pos: center 48%; }
.builder-two-page[data-mode="trophy-road"] { --mode-banner: url("assets/builder/trophyroad-banner.jpg"); --mode-banner-pos: center 55%; }
.builder-two-page[data-mode="ultimate-champion"] { --mode-banner: url("assets/builder/ultimate-banner.jpg"); --mode-banner-pos: center 40%; }
.builder-two-page[data-mode="top-ladder"] { --mode-banner: url("assets/builder/topladder-banner.jpg"); --mode-banner-pos: center 30%; }
.builder-two-page[data-mode="two-vs-two"] { --mode-banner: url("assets/builder/2v2-banner.jpg"); --mode-banner-pos: center 45%; }
.builder-two-page[data-mode="season-arenas"] { --mode-banner: url("assets/builder/seasonal-banner.jpg"); --mode-banner-pos: center 35%; }
.builder-two-page[data-mode="spooky-chess"] { --mode-banner: url("assets/builder/spooky-chess-banner.jpg"); --mode-banner-pos: center 55%; }
.builder-two-page[data-mode="power-surge"] { --mode-banner: url("assets/builder/power-surge-banner.jpg"); --mode-banner-pos: center 45%; }
.builder-two-page[data-mode="twenty-win-challenge"] { --mode-banner: url("assets/builder/twentywin-banner.jpg"); --mode-banner-pos: center top; }
.builder-two-page[data-mode] .builder-mode-heading { min-height: 284px; }
.builder-two-page[data-mode="ultimate-champion"] .builder-mode-heading > img { transform: scale(1.4); }
@media (min-width: 601px) {
  .builder-two-page[data-mode="twenty-win-challenge"] .builder-mode-heading > img {
    width: 200px; height: 228px; align-self: flex-end; margin-bottom: -28px; object-position: center bottom;
  }
}
.builder-two-page[data-mode] .builder-mode-heading::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--mode-banner) var(--mode-banner-pos) / cover no-repeat;
  mask-image: linear-gradient(to bottom, var(--text), var(--text) 65%, transparent);
}
.builder-two-page[data-mode] .builder-mode-heading::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--text-invert) 52%, transparent), transparent 65%);
}
@media (max-width: 600px) {
  .builder-two-page[data-mode="twenty-win-challenge"] .builder-mode-heading::before {
    background-image: url("assets/builder/twentywin-banner-mobile.jpg"); background-size: cover; background-position: center top;
  }
  .builder-two-page[data-mode="twenty-win-challenge"] .builder-mode-heading h2 { font-size: clamp(1.45rem, 7.6vw, 2.15rem); max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-wrap: balance; }
}
.builder-two-page .builder-mode-intro { max-width: 640px; margin: -4px auto 18px; text-align: center; color: var(--panel-muted); font-size: .98rem; line-height: 1.5; }
.builder-two-page .builder-level-section { text-align: center; margin-bottom: 18px; padding: 0; border: 0; }
.builder-two-page .builder-level-section h3 { font-size: 1.1rem; margin: 0 0 12px; }
.builder-two-page .builder-level-section h3 > span { color: var(--gold); }
.builder-two-page .builder-level-control { display: grid; grid-template-columns: repeat(2, 1fr); width: max-content; margin-inline: auto; }
.builder-two-page .builder-level-control button { display: flex; justify-content: center; align-items: center; gap: 9px; min-height: 48px; padding: 8px 18px; font-size: .95rem; }
.builder-two-page .builder-level-control button img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.builder-two-page .builder-level-control { border-radius: var(--radius); }
.builder-two-page .builder-level-control button, .builder-two-page .builder-level-control .seg-indicator { border-radius: var(--radius-sm); }
.builder-two-page .builder-tag-panel { width: min(100%, 390px); margin: 14px auto; text-align: center; }
.builder-two-page .builder-tag-panel { position: relative; z-index: 3; }
.builder-two-page .builder-tag-panel:focus-within { z-index: 4; }
.builder-two-page .builder-player-check-row { gap: 8px; animation: builderPlayerEnter .24s ease; }
.builder-two-page .builder-player-search { position: relative; }
.builder-two-page .builder-player-search input { width: 100%; padding-left: 39px; min-width: 0; box-sizing: border-box; }
.builder-search-dots { position: absolute; left: 11px; top: calc(50% - 3px); display: flex; gap: 3px; pointer-events: none; opacity: 0; }
.builder-search-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
[data-player-state="searching"] .builder-search-dots { opacity: 1; }
[data-player-state="searching"] .builder-search-dots i { animation: builderSearchDots 1s ease-in-out infinite; }
.builder-search-dots i:nth-child(2) { animation-delay: .15s; }
.builder-search-dots i:nth-child(3) { animation-delay: .3s; }
.builder-two-page .builder-player-resolved { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; animation: builderPlayerEnter .3s ease both; }
.builder-player-resolved > img { width: 24px; height: 24px; object-fit: contain; }
.builder-player-resolved > strong { min-width: 0; overflow-wrap: anywhere; font-size: 1.1rem; }
.builder-player-clear { display: grid; place-items: center; flex: none; padding: 0; box-sizing: border-box; line-height: 1; border: 0; border-radius: 50%; width: 34px; height: 34px; cursor: pointer; background: var(--panel-inset); color: var(--panel-muted); }
.builder-player-clear > svg { display: block; }
.builder-player-clear:hover { color: var(--loss); }
.builder-two-page .builder-tag-panel[data-player-state="found"] > label { display: none; }
.builder-two-page .builder-player-confirmation { min-height: 0; font-size: .8rem; }
.builder-two-page .builder-player-confirmation:empty { display: none; }
.builder-two-page .builder-confirmation-silent { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.builder-two-page .builder-filter { border: 0; border-top: 1px solid var(--panel-inset-border); padding: 24px 0 0; margin: 24px 0 0; }
.builder-two-page .builder-filter > summary {
  width: max-content; min-width: min(100%, var(--builder-filter-min, 330px)); max-width: 100%; box-sizing: border-box; margin: 0 auto; padding: 11px 19px;
  border: 1px solid var(--panel-border); border-radius: var(--panel-radius); background: var(--panel-inset);
  display: flex; justify-content: center; gap: 10px; list-style: none; transition: background .2s, border-color .2s;
}
.builder-two-page .builder-filter > summary::-webkit-details-marker { display: none; }
.builder-two-page .builder-filter:not(.has-selection) > summary { width: var(--builder-filter-min, 330px); }
.builder-two-page .builder-filter > summary:hover { border-color: var(--primary); }
.builder-two-page .builder-filter > summary > img { width: 30px; height: 30px; }
.builder-two-page .builder-filter > summary > svg { transition: transform .2s; }
.builder-two-page .builder-filter[open] > summary > svg { transform: rotate(180deg); }
.builder-two-page .builder-filter-count { flex-basis: 100%; text-align: center; font-size: .73rem; }
.builder-two-page .builder-filter[open] .builder-card-toolbar { margin-top: 18px; }
.builder-two-page .builder-selected { flex-basis: 100%; width: max-content; justify-content: center; border: 0; padding: 4px 0; margin: 0; }
.builder-two-page .builder-selected.has-selection::before { content: none; }
.builder-two-page .builder-card-actions { justify-content: center; border: 0; padding: 36px 0 40px; margin: 0; }
.builder-two-page #builder-submit {
  position: relative; isolation: isolate; min-width: 192px; min-height: 52px; padding: 12px 34px;
  border: 0; border-radius: 28px; background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--text); font-size: 1.05rem; font-weight: 800; overflow: visible;
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--text) 7%, transparent), 0 0 22px color-mix(in srgb, var(--series-4) 15%, transparent);
  backdrop-filter: blur(8px); transition: transform .2s, box-shadow .2s;
}
.builder-two-page #builder-submit::before {
  content: ""; position: absolute; inset: -2px; padding: 2px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, var(--cr-bar-blue-top), var(--primary), var(--series-4), var(--series-6), var(--gold), var(--cr-bar-blue-top));
  background-size: 300% 100%; animation: builderPrism 6s ease infinite;
  mask: linear-gradient(var(--text) 0 0) content-box, linear-gradient(var(--text) 0 0); mask-composite: exclude;
}
.builder-two-page #builder-submit:hover { transform: translateY(-2px); box-shadow: 0 0 28px color-mix(in srgb, var(--series-4) 30%, transparent); }
.builder-two-page #builder-submit.builder-activating { animation: builderActivate .28s ease both; }
.builder-two-page .builder-analyzing { animation: builderPlayerEnter .35s ease both; }
.builder-two-page .builder-side-switch { justify-content: center; }
@keyframes builderSearchDots { 0%, 70%, 100% { transform: translateY(0); opacity: .3; } 35% { transform: translateY(-4px); opacity: 1; } }
@keyframes builderPlayerEnter { from { opacity: 0; transform: translateY(5px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes builderPrism { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes builderActivate { 50% { transform: scale(.95); } 100% { transform: scale(1.04); box-shadow: 0 0 40px color-mix(in srgb, var(--series-4) 50%, transparent); } }
@media (max-width: 600px) {
  .builder-two-page.builder-on-workspace .builder-wizard-head { display: flex; padding: 12px; }
  .builder-two-page.builder-on-workspace .builder-wizard-head > div { padding-right: 26px; }
  .builder-two-page.builder-on-workspace .builder-eyebrow { padding-right: 0; }
  .builder-two-page.builder-on-workspace .builder-wizard-head h1 { font-size: .8rem; }
  .builder-two-page .builder-mode-back { width: 28px; }
  .builder-two-page .builder-mode-heading { flex-direction: column; gap: 6px; padding: 16px; min-height: 150px; }
  .builder-two-page[data-mode] .builder-mode-heading { min-height: 228px; }
  .builder-two-page .builder-mode-heading > img { width: 90px; height: 90px; }
  .builder-two-page .builder-mode-heading h2 { font-size: 2.15rem; }
  .builder-two-page .builder-level-control button { padding-inline: 13px; font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) {
  .builder-two-page *, .builder-two-page *::before { animation: none !important; transition: none !important; }
}
.result-time { max-width: 72rem; margin: 0.7rem 0 1rem; color: var(--panel-muted); font-size: 0.82rem; }
.result-card { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; font-size: 0.65rem; text-align: center; }
.result-card img { width: 100%; object-fit: contain; }
.result-unit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1.4rem; max-width: 72rem; }
.result-unit, .result-entry { display: flex; align-items: flex-start; gap: 0.8rem; max-width: 52rem; margin-bottom: 1.2rem; }
.result-unit > img { width: 76px; height: 96px; object-fit: contain; }
.result-entry > img { width: 64px; height: 80px; object-fit: contain; }
.result-unit h4, .result-entry h4 { margin: 0 0 0.35rem; }
.result-unit p, .result-entry p { margin: 0.35rem 0; }
.player-intro { margin: 1.2rem auto 0; max-width: 1000px; }
.pi-surface { position: relative; border-radius: 1.1rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.09);
  background: radial-gradient(120% 140% at 12% 20%, rgba(92, 112, 255, 0.28), transparent 55%), linear-gradient(135deg, rgba(25, 30, 72, 0.78), rgba(14, 10, 34, 0.82));
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); }
.pi-stage { padding: clamp(1rem, 3vw, 1.8rem) clamp(1rem, 4vw, 2.4rem); min-height: 19.5rem; }
.pi-scene-accounts { min-height: 100%; }
.pi-scene { transition: opacity 0.5s ease; }
.pi-scene-accounts { display: grid; grid-template-columns: minmax(9rem, 15rem) 1fr; align-items: center; gap: clamp(1rem, 4vw, 3rem); }
.pi-banner { position: relative; }
.pi-banner-bg { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4)); }
.pi-banner-fg { position: absolute; left: 12%; bottom: 8%; width: 54%; height: auto; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5)); }
.pi-scene-copy { position: absolute; inset: 0; display: grid; place-items: center; padding: 0.6rem; opacity: 0; pointer-events: none; }
.pi-stage.szene-copy .pi-scene-accounts { opacity: 0; }
.pi-stage.szene-copy .pi-scene-copy { opacity: 1; }
.pi-features-box { margin-top: 1rem; padding: clamp(1rem, 3vw, 1.6rem) clamp(1rem, 4vw, 2.2rem); }
.pi-star { position: relative; width: 100%; aspect-ratio: 1; }
.pi-star-art { position: absolute; inset: 0; }
.pi-star-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pi-star-empty { filter: grayscale(1) brightness(0.42) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45)); opacity: 0.9; }
.pi-star-full { position: absolute; inset: 0; --fill: 0%; clip-path: inset(calc(100% - var(--fill)) 0 0 0);
  -webkit-mask: url(assets/home/klein/icons/total-xp.webp) center/contain no-repeat; mask: url(assets/home/klein/icons/total-xp.webp) center/contain no-repeat; }
.pi-star-full img { filter: saturate(1.15) brightness(1.08); }
.pi-star-edge { position: absolute; left: 0; right: 0; bottom: calc(var(--fill) - 3.5%); height: 3.5%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.25), rgba(210, 245, 255, 0.95), rgba(255, 255, 255, 0.25)); box-shadow: 0 0 8px rgba(160, 230, 255, 0.9); }
.pi-star-value { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); font-family: "Clash Display", system-ui, sans-serif; font-size: clamp(1.4rem, 5vw, 2.3rem); font-weight: 900; color: #fff;
  text-shadow: 0 2px 0 #0d2a4a, 0 0 3px #0d2a4a, 0 0 10px rgba(0, 0, 0, 0.5); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pi-kicker { margin: 0; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.pi-name { margin: 0.15rem 0 0; font-family: "Clash Display", system-ui, sans-serif; font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.1; }
.pi-who { display: flex; align-items: center; gap: 0.9rem; }
.pi-fav-card { height: 3.6rem; width: auto; transform: rotate(7deg); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55)); transition: opacity 0.4s ease; }
.pi-star-label { margin: 0.2rem 0 0.9rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); }
.pi-who { transition: opacity 0.18s ease, transform 0.18s ease; }
.pi-who.wechselt { opacity: 0; transform: translateY(0.35rem); }
.pi-bars { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.pi-bars li { display: grid; grid-template-columns: 1.8rem minmax(6.5rem, 11rem) 1fr 3.4rem; align-items: center; gap: 0.7rem; font-size: 0.9rem; }
.pi-bars img { width: 1.8rem; height: 1.8rem; object-fit: contain; }
.pi-bars span { color: rgba(255, 255, 255, 0.8); }
.pi-bars b { text-align: right; font-family: "Clash Display", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.pi-bar { display: block; height: 0.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.pi-bar u { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #6388ff, #75d6ff 60%, #ffd45e); }
.pi-note { margin: 0.8rem 0.2rem 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); }
.pi-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.6rem 1rem; margin: 0.9rem 0 0; padding: 0; list-style: none; }
.pi-steps li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); transition: color 0.3s ease; }
.pi-steps b { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(255, 255, 255, 0.1); font-size: 0.78rem; color: rgba(255, 255, 255, 0.8); transition: background 0.3s ease, color 0.3s ease; }
.pi-steps li.aktiv { color: #fff; }
.pi-steps li.aktiv b { background: linear-gradient(145deg, #ffd45e, #ff9a2e); color: #2a1300; }
.pi-title { margin: 0 0 1.1rem; font-size: 1rem; font-weight: 700; color: rgba(255, 255, 255, 0.9); text-align: center; }
.pi-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1.3rem 1.6rem; margin: 0; padding: 0; list-style: none; }
.pi-features li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem; }
.pi-features img, .pi-features svg { width: 3rem; height: 3rem; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)); margin-bottom: 0.2rem; }
.pi-fav-star { overflow: visible; }
.pi-features b { font-size: 0.98rem; }
.pi-features span { font-size: 0.82rem; line-height: 1.4; color: rgba(255, 255, 255, 0.62); max-width: 14rem; }
@media (max-width: 560px) {
  .pi-scene-accounts { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pi-star { max-width: 10rem; }
  .pi-info { width: 100%; }
  .pi-bars { text-align: left; }
  .pi-bars li { grid-template-columns: 1.8rem 1fr 3.2rem; }
  .pi-bars .pi-bar { grid-column: 1 / -1; order: 5; }
}
.player-search-field.search-hint { border-radius: 0.8rem; animation: search-hint-glow 3.6s ease-in-out 3; }
@keyframes search-hint-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0); }
  50% { box-shadow: 0 0 16px 1px rgba(96, 165, 250, 0.3); }
}
@media (prefers-reduced-motion: reduce) {
  .player-search-field.search-hint { animation: none; box-shadow: 0 0 12px 1px rgba(96, 165, 250, 0.25); }
}
.pi-game { position: relative; width: min(30rem, 100%); height: 100%; border-radius: 0.7rem; overflow: hidden;
  border: 0.22rem solid #4d5f86; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); opacity: 0; transform: translateY(0.8rem) scale(0.97);
  transition: opacity 0.5s ease, transform 0.5s ease;
  background-color: var(--karo-fuge); background-image: var(--karo-licht), var(--karo-kachel);
  background-size: auto, var(--karo-groesse) var(--karo-groesse); }
.pi-stage.szene-copy .pi-game.offen { opacity: 1; transform: none; }
.pi-game-head { position: relative; height: 2.1rem; background: linear-gradient(180deg, #3b86f0, #1f5dc4); border-bottom: 0.2rem solid #f2b928; }
.pi-game-head img { position: absolute; left: 50%; top: -0.15rem; width: 2.8rem; height: 2.8rem; transform: translateX(-50%); object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5)); }
.pi-game-body { display: grid; justify-items: center; gap: 0.3rem; padding: 0.4rem 1rem 1.2rem; }
.pi-game-banner { width: 80%; margin-top: 2.2rem; }
.pi-game-tagrow { position: relative; display: grid; justify-items: center; width: 100%; }
.pi-game-name::before { content: attr(data-name); }
.pi-game-name { font-family: "Clash Display", system-ui, sans-serif; font-size: 1.6rem; color: #ffd45e; text-shadow: 0 2px 0 #7a4a00, 0 0 6px rgba(0, 0, 0, 0.4); }
.pi-game-tag::before { content: attr(data-tag); }
.pi-game-tag { font-family: "Clash Display", system-ui, sans-serif; font-size: 1.05rem; color: #bfe1ff; padding: 0.1rem 0.5rem; border-radius: 0.4rem; transition: background 0.2s ease, color 0.2s ease, opacity 0.25s ease; }
.pi-game.tag-aktiv .pi-game-tag { background: rgba(255, 255, 255, 0.28); color: #fff; }
.pi-game-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; width: 100%; margin-top: 0.5rem; }
.pi-game-boxes i { display: block; height: 2.4rem; border-radius: 0.5rem; background: rgba(7, 20, 60, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.pi-game-pop { position: absolute; z-index: 3; left: calc(50% + 4.4rem); top: -2.3rem; display: grid; justify-items: center; gap: 0.3rem; padding: 0.4rem 0.6rem 0.6rem; border-radius: 0.4rem;
  background: #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45); opacity: 0; transform: scale(0.85); transform-origin: 20% 40%; transition: opacity 0.25s ease, transform 0.25s cubic-bezier(.34, 1.56, .64, 1); }
.pi-game.popup .pi-game-pop { opacity: 1; transform: none; }
.pi-game-pop::before { content: ""; position: absolute; left: -0.5rem; top: 3.1rem; border: 0.5rem solid transparent; border-left: 0; border-right-color: #fff; }
.pi-game-pop small { font-family: "Clash Display", system-ui, sans-serif; font-size: 0.7rem; color: #1a2a4a; }
.pi-game-pop small::before { content: attr(data-name); }
.pi-game-copy { display: block; padding: 0.35rem 0.9rem; border-radius: 0.4rem; border: 0.12rem solid #123a8c; background: linear-gradient(180deg, #4fa4ff, #2a74ea);
  font-family: "Clash Display", system-ui, sans-serif; font-size: 0.82rem; color: #fff; text-shadow: 0 1px 0 #123a8c; transition: transform 0.15s ease, filter 0.15s ease; }
.pi-game.knopf-druck .pi-game-copy { transform: scale(0.92); filter: brightness(0.9); }
.pi-game-toast { position: absolute; left: 0; right: 0; top: 0.1rem; text-align: center; font-family: "Clash Display", system-ui, sans-serif; font-size: 1rem; color: #fff;
  text-shadow: 0 2px 0 #0c2a66, 0 0 4px #0c2a66; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
.pi-game.toast .pi-game-toast { opacity: 1; }
.pi-game.toast .pi-game-pop { opacity: 0; }
.pi-game.toast .pi-game-tag { opacity: 0; }
.pi-tap { position: absolute; left: 0; top: 0; width: 1.9rem; height: 1.9rem; margin: -0.95rem 0 0 -0.95rem; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.35) 60%, transparent 70%); opacity: 0; transform: translate(var(--tap-x, 50%), var(--tap-y, 50%)) scale(1.4); }
.pi-game.tap .pi-tap { animation: pi-tap 0.7s ease-out; }
@keyframes pi-tap { 0% { opacity: 0; transform: translate(var(--tap-x), var(--tap-y)) scale(1.6); } 25% { opacity: 1; transform: translate(var(--tap-x), var(--tap-y)) scale(1); } 100% { opacity: 0; transform: translate(var(--tap-x), var(--tap-y)) scale(0.7); } }
.player-search-field.tag-eingefuegt { border-radius: 0.8rem; box-shadow: 0 0 16px 1px rgba(255, 190, 70, 0.4); transition: box-shadow 0.4s ease; }
@media (max-width: 560px) {
  .pi-scene-accounts { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pi-who { justify-content: center; }
  .pi-game { height: auto; max-height: none; }
  .pi-game:not(.pi-game-clan) .pi-game-body { padding-bottom: 5.4rem; }
  .pi-game-pop { left: auto; right: 0; top: 1.7rem; }
  .pi-game-pop::before { display: none; }
  .pi-game-name { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pi-scene, .pi-game, .pi-info { transition: none; }
  .pi-game.tap .pi-tap { animation: none; }
}
.pi-hand { position: absolute; left: 0; top: 0; width: 4.2rem; height: auto; z-index: 5; pointer-events: none; opacity: 0;
  transform: translate(var(--hand-x, 0px), var(--hand-y, 0px)) scale(var(--hand-s, 1)); transform-origin: 90% 82%;
  transition: transform 0.5s cubic-bezier(0.3, 0.8, 0.3, 1), opacity 0.25s ease; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.55)); }
.pi-game.hand-da .pi-hand { opacity: 1; }
.pi-game.hand-tipp .pi-hand { --hand-s: 0.9; transition-duration: 0.12s; }

#tab-player:has(#profile:not([hidden])) #player-intro,
#tab-clan:has(#clan:not([hidden])) #clan-intro { display: none; }
.clan-intro .pi-stage { min-height: 22rem; display: grid; align-content: center; }
.pi-bars-clan { margin-top: 1rem; }
.pi-badge-wrap { position: relative; display: grid; place-items: center; }
.pi-badge-wrap::before { content: ""; position: absolute; inset: 8% 6%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 190, 70, 0.28), rgba(92, 112, 255, 0.12) 60%, transparent 72%); }
.pi-badge { position: relative; width: clamp(6.5rem, 15vw, 9.5rem); height: auto; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55)); }
.pi-buchstabe { display: inline-block; will-change: transform, opacity; }
@keyframes pi-muenze-hin { from { transform: perspective(700px) rotateY(0deg) scale(1); } to { transform: perspective(700px) rotateY(90deg) scale(1.08); } }
@keyframes pi-muenze-her { from { transform: perspective(700px) rotateY(-90deg) scale(1.08); } to { transform: perspective(700px) rotateY(0deg) scale(1); } }
.pi-badge.muenze-hin { animation: pi-muenze-hin 240ms ease-in forwards; }
.pi-badge.muenze-her { animation: pi-muenze-her 280ms ease-out forwards; }
@keyframes pi-buchstabe-raus { to { transform: translateY(-115%); opacity: 0.2; } }
@keyframes pi-buchstabe-rein { from { transform: translateY(115%); opacity: 0.2; } }
.pi-buchstabe.raus { animation: pi-buchstabe-raus 190ms cubic-bezier(0.5, 0, 0.9, 0.5) forwards; animation-delay: calc(var(--i) * 14ms); }
.pi-buchstabe.rein { animation: pi-buchstabe-rein 400ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards; animation-delay: calc(var(--i) * 26ms); }
.pi-name[data-effekt="buchstaben"] { overflow: hidden; padding: 0.08em 0 0.16em; margin-bottom: -0.1em; }
.pi-game-clan { background: linear-gradient(180deg, #7c89a6, #566380); border-color: #96a3be; }
.pi-cg-head { position: relative; display: grid; place-items: center; height: 2.3rem; }
.pi-cg-head b { font-family: "Clash Display", system-ui, sans-serif; font-size: 1.15rem; color: #fff; text-shadow: 0 2px 0 #2d3550; }
.pi-cg-x { position: absolute; right: 0.5rem; top: 0.45rem; width: 1.4rem; height: 1.4rem; border-radius: 0.3rem; background: #e5383b; box-shadow: inset 0 0 0 0.12rem #ff8a8c; }
.pi-cg-x::before, .pi-cg-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.8rem; height: 0.14rem; background: #fff; border-radius: 1px; transform: translate(-50%, -50%) rotate(45deg); }
.pi-cg-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.pi-cg-banner { display: flex; align-items: center; gap: 0.9rem; margin: 0 0.55rem; padding: 0.55rem 0.8rem; min-height: 9.2rem; background: #e9f0fd; border-radius: 0.4rem 0.4rem 0 0; }
.pi-cg-flag { flex: none; width: 3.4rem; padding: 0.35rem 0.4rem 0.6rem; background: linear-gradient(180deg, #2d86e6, #1b5fb6); border-radius: 0.2rem 0.2rem 0.5rem 0.5rem; }
.pi-cg-flag img { display: block; width: 100%; height: auto; }
.pi-cg-text { display: grid; gap: 0.5rem; justify-items: start; }
.pi-cg-text .pi-game-name { color: #1d2a4a; text-shadow: none; font-size: 1.3rem; }
.pi-cg-lines { display: grid; gap: 0.3rem; }
.pi-cg-lines i { display: block; width: 11rem; height: 0.4rem; border-radius: 2px; background: #b7c4de; }
.pi-cg-lines i:nth-child(2) { width: 9rem; }
.pi-cg-lines i:nth-child(3) { width: 6rem; }
.pi-cg-info { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr 3rem; align-items: center; margin: 0 0.55rem; height: 3.1rem;
  background: linear-gradient(180deg, #25a3f5, #0f70c9); color: #fff; font-family: "Clash Display", system-ui, sans-serif; font-size: 0.8rem; text-align: center; }
.pi-cg-info > div { display: flex; align-items: center; justify-content: center; gap: 0.3rem; border-right: 1px solid rgba(255, 255, 255, 0.25); height: 100%; }
.pi-cg-info img { width: 1.3rem; height: 1.3rem; object-fit: contain; }
.pi-cg-info span[data-text]::before { content: attr(data-text); }
.pi-cg-menu { position: relative; display: block; height: 100%; }
.pi-cg-menu i { position: absolute; left: 0.7rem; width: 1.3rem; height: 0.16rem; border-radius: 2px; background: #fff; }
.pi-cg-menu i:nth-child(1) { top: 0.95rem; }
.pi-cg-menu i:nth-child(2) { top: 1.45rem; }
.pi-cg-menu i:nth-child(3) { top: 1.95rem; width: 0.9rem; }
.pi-game.tag-aktiv .pi-cg-menu { background: rgba(255, 255, 255, 0.22); }
.pi-cg-members { display: flex; gap: 0.5rem; align-items: center; margin: 0 0.55rem; height: 3rem; padding: 0 0.7rem; background: #dbe3f1; }
.pi-cg-members i { display: block; height: 1.7rem; flex: 1; border-radius: 0.35rem; background: #3b8de4; }
.pi-cg-members i:nth-child(1) { background: #fff; }
.pi-cg-members i:nth-child(3) { background: #e5383b; }
.pi-game-clan .pi-game-pop.pi-cg-pop { left: auto; right: 0.55rem; top: 0.5rem; width: 15.5rem; gap: 0.4rem; padding: 0.6rem 0.8rem 0.7rem; transform-origin: 90% 100%; z-index: 4; }
.pi-cg-pop::before { left: auto; right: 1rem; top: auto; bottom: -0.5rem; border: 0.5rem solid transparent; border-bottom: 0; border-top-color: #fff; }
.pi-cg-pop dl { display: grid; gap: 0.35rem; width: 100%; margin: 0; }
.pi-cg-pop dl > div { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.pi-cg-pop dt { font-family: "Clash Display", system-ui, sans-serif; font-size: 0.78rem; color: #6a7692; }
.pi-cg-pop dd { margin: 0; min-width: 6.2rem; padding: 0.15rem 0.5rem; border-radius: 0.35rem; background: #b9c4de; text-align: center; font-family: "Clash Display", system-ui, sans-serif; font-size: 0.8rem; color: #fff; text-shadow: 0 1px 0 #3a4766; }
.pi-cg-pop dd[data-text]::before { content: attr(data-text); }
.pi-cg-pop .pi-cg-typ { background: #c5cfe6; color: #2b3552; text-shadow: none; }
.pi-cg-pop .pi-cg-tag { background: #3b4254; text-shadow: none; }
.pi-cg-btns { display: flex; gap: 0.7rem; justify-content: center; width: 100%; margin-top: 0.15rem; }
.pi-cg-report { display: block; padding: 0.35rem 0.9rem; border-radius: 0.4rem; border: 0.12rem solid #7a1316; background: linear-gradient(180deg, #ff5a5d, #d92428); font-family: "Clash Display", system-ui, sans-serif; font-size: 0.82rem; color: #fff; text-shadow: 0 1px 0 #7a1316; }
.pi-game-clan .pi-game-toast { top: 15.4rem; }
.pi-game.toast .pi-cg-members { opacity: 0.55; transition: opacity 0.3s ease; }
@media (max-width: 560px) {
  .clan-intro .pi-stage { min-height: 30rem; }
  .pi-game.pi-game-clan { max-height: none; }
  .pi-cg-banner { min-height: 10.6rem; }
  .pi-game-clan .pi-game-toast { top: 17rem; }
  .pi-game-clan .pi-game-pop.pi-cg-pop { width: calc(100% - 1.1rem); right: 0.55rem; }
  .pi-cg-pop dd { min-width: 5rem; }
  .pi-game.pi-game-clan { height: auto; }
  .pi-cg-lines i { width: 7rem; }
  .pi-cg-lines i:nth-child(2) { width: 6rem; }
  .pi-cg-lines i:nth-child(3) { width: 4rem; }
}
.page-intro > .lb-season-stepper { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: .3rem; }
.lb-season-stepper #lb-season-eyebrow { min-width: 6.5rem; text-align: center; }
.page-intro .lb-season-step, .page-intro .lb-season-step:hover, .page-intro .lb-season-step:focus {
  width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border-radius: 8px;
  border: 1px solid var(--panel-inset-border); background: var(--deck-btn-bg); color: var(--panel-text);
  font-family: "Clash Display", sans-serif; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.lb-season-step:hover:not(:disabled) { border-color: var(--deck-btn-hover-border); color: var(--deck-btn-hover-fg); }
.lb-season-step:disabled { cursor: default; opacity: .34; }
.lb-season-views { margin: 0 auto 10px; width: max-content; max-width: 100%; }
.lb-season-podium { position: relative; max-width: 720px; margin: 0 auto; container-type: inline-size; }
.lb-season-podium img { display: block; width: 100%; height: auto; }
.lb-season-podium .lb-podium-name, .lb-season-podium .lb-podium-name:hover {
  position: absolute; display: block; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transform: translate(-50%, -50%); color: #4a2c0f; font-family: "Clash Display", sans-serif; font-weight: 800;
  text-decoration: none; text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}
.lb-podium-1 { left: 50%;   top: 85.5%; width: 36%; font-size: 5cqw; }
.lb-podium-2 { left: 17.2%; top: 87.5%; width: 27%; font-size: 4cqw; }
.lb-podium-3 { left: 83.2%; top: 87.5%; width: 27%; font-size: 4cqw; }
.lb-season-stepper #lb-season-eyebrow { color: var(--gold); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lb-season-ranges, .lb-season-top { display: inline-flex; margin: 2px 8px 10px 0; }
.lb-season-line .lb-season-path { stroke-width: 3.2; opacity: 1; }
.lb-season-line.is-focus .lb-season-path { opacity: 1; }
.lb-season-dot { stroke: #0d1424; stroke-width: 2; }
.lb-season-line[class] .lb-season-dot.up { fill: #6fe0a6; }
.lb-season-line[class] .lb-season-dot.down { fill: #ff8494; }
.lb-season-line-label { font-size: 11.5px; font-weight: 800; }
.lb-season-legend { display: none; }
@media (max-width: 620px) { .lb-season-legend { display: flex; } }
.lb-season-chip { cursor: default; }
.lb-season-chart {
  --lb-season-win: color-mix(in srgb, var(--win) 65%, var(--panel-text));
  --lb-season-loss: color-mix(in srgb, var(--loss) 65%, var(--panel-text));
}
.lb-season-chart-head { align-items: center; gap: 8px 16px; margin-bottom: 12px; }
.lb-season-chart-head strong { font-size: 1rem; line-height: 1.45; }
.lb-season-eyebrow { color: var(--panel-muted); font-weight: 750; }
.lb-season-captured { color: var(--panel-dim); line-height: 1.45; }
.lb-season-ranges, .lb-season-top { margin-bottom: 14px; }
.lb-season-svg { background: var(--panel-inset); border-radius: 6px; }
.lb-season-grid line { stroke: var(--panel-inset-border); stroke-dasharray: none; }
.lb-season-grid text, .lb-season-xaxis text { fill: var(--panel-muted); font-size: 11px; font-weight: 650; }
.lb-season-line .lb-season-path, .lb-season-line.is-focus .lb-season-path { stroke-width: 3.8; opacity: .95; }
.lb-season-line-label { font-size: 12px; font-weight: 750; stroke: var(--text-invert); stroke-width: 3; }
.lb-season-line[class] .lb-season-dot { r: 4.8px; stroke: var(--text-invert); stroke-width: 2; }
.lb-season-line[class] .lb-season-dot.up { fill: var(--lb-season-win); }
.lb-season-line[class] .lb-season-dot.down { fill: var(--text-invert); stroke: var(--lb-season-loss); stroke-width: 2.5; }
.lb-season-line[class] .lb-season-dot.flat { fill: var(--panel-text); }
.lb-season-line[class] .lb-season-dot:hover { r: 7px; stroke: var(--panel-text); }
.lb-season-legend { gap: 8px 14px; margin-top: 12px; }
.lb-season-chip, .lb-season-chip.active { padding: 0; border: 0; background: none; color: var(--panel-text); font-size: .78rem; }
.lb-season-swatch { width: 11px; height: 11px; }
@media (max-width: 620px) {
  .lb-season-chart { padding: 12px; }
  .lb-season-chart-head { gap: 4px; margin-bottom: 10px; }
  .lb-season-chart-head strong { font-size: .92rem; }
  .lb-season-captured { flex-basis: 100%; }
  .lb-season-chip { max-width: 100%; overflow-wrap: anywhere; }
}
.lb-season-chart:has(#lb-season-stats:not([hidden])) {
  background: var(--panel-inset); border-color: var(--panel-inset-border); box-shadow: none;
  background-color: var(--feedback-bg);
}
.lb-season-chart:has(#lb-season-stats:not([hidden]))::before { display: none; }
.lb-season-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.lb-season-toolbar .lb-season-views { margin: 0; }
.lb-season-chart:has(#lb-season-stats[hidden]) .lb-season-modes { display: none; }
.lb-season-controls { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.lb-season-controls .deck-sort-control { width: auto; margin: 0; }
.lb-season-modes { display: flex; gap: 4px; flex: none; }
.lb-season-modes button {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 3px; border-radius: 6px;
  border: 1px solid var(--panel-inset-border); background: transparent; cursor: pointer;
}
.lb-season-modes button:hover { border-color: var(--deck-btn-hover-border); background: var(--panel-inset); }
.lb-season-modes button.active { border-color: var(--primary); background: var(--panel-inset); }
.lb-season-modes button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.lb-season-modes svg { display: block; width: 28px; height: 24px; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: brightness(1.35); }
.lb-season-mode-start { stop-color: var(--series-1); }
.lb-season-mode-end { stop-color: var(--series-3); }
#lb-season-stats .lb-season-svg { display: block; width: 100%; background: transparent; border-radius: 0; }
#lb-season-stats .lb-season-grid text, #lb-season-stats .lb-season-xaxis text { font-size: 12px; }
#lb-season-stats .lb-season-path {
  stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; opacity: .85;
  filter: brightness(1.35); transition: opacity 160ms ease, stroke-width 160ms ease; cursor: pointer;
}
#lb-season-stats .lb-season-line:hover .lb-season-path { stroke-width: 4.2; opacity: .85; }
#lb-season-stats .lb-season-svg.is-highlighting .lb-season-line .lb-season-path { opacity: .1; }
#lb-season-stats .lb-season-svg.is-highlighting .lb-season-line.is-highlighted .lb-season-path { opacity: 1; stroke-width: 5.2; }
.lb-season-battle-hit { fill: transparent; stroke: none; outline: none; pointer-events: all; }
#lb-season-stats .lb-season-legend {
  display: grid; grid-template-columns: repeat(var(--lb-season-columns, 5), minmax(0, 1fr)); gap: 2px 12px;
  margin-top: 8px; border-top: 1px solid var(--panel-inset-border); padding-top: 6px;
}
#lb-season-stats .lb-season-chip {
  display: grid; grid-template-columns: 12px minmax(0, 1fr); align-items: center; gap: 7px; font: inherit; font-size: .82rem;
  border: 0; background: transparent; color: var(--panel-text); padding: 5px 2px;
  cursor: pointer; min-height: 32px; min-width: 0; width: 100%; text-align: left; transition: opacity 160ms ease, color 160ms ease;
}
#lb-season-stats .lb-season-player-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lb-season-stats .lb-season-chip.is-highlighted { color: var(--panel-text); }
#lb-season-stats .lb-season-chip.is-dimmed { opacity: .8; }
#lb-season-stats .lb-season-chip:hover { background: transparent; }
#lb-season-stats .lb-season-chip.is-pinned .lb-season-player-name { text-decoration: underline; text-decoration-color: var(--lb-season-player-color); text-underline-offset: 4px; text-decoration-thickness: 2px; }
#lb-season-stats .lb-season-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
#lb-season-stats .lb-season-swatch { height: 3px; width: 12px; border-radius: 2px; filter: brightness(1.35); }
@media (max-width: 650px) {
  .lb-season-chart:has(#lb-season-stats:not([hidden])) { display: grid; grid-template-columns: minmax(0, 1fr); }
  .lb-season-chart:has(#lb-season-stats:not([hidden])) .lb-season-toolbar,
  #lb-season-stats:not([hidden]) { display: contents; }
  .lb-season-chart .lb-season-views { order: 0; }
  .lb-season-chart-head { order: 1; }
  .lb-season-modes { order: 2; justify-self: center; margin-bottom: 8px; }
  .lb-season-controls { order: 3; }
  #lb-season-chart { order: 4; }
  #lb-season-legend { order: 5; }
  .lb-season-controls .deck-sort-control { display: flex; min-width: 0; box-sizing: border-box; }
  .lb-season-controls { gap: 6px; }
  .lb-season-controls .lb-season-ranges { flex: 11; }
  .lb-season-controls .lb-season-top { flex: 10; }
  .lb-season-controls .deck-sort-control button { flex: 1; min-width: 0; min-height: 32px; padding: 4px 2px; font-size: .7rem; }
  .lb-season-toolbar .lb-season-views { display: flex; flex: 1; min-width: 0; width: auto; }
  .lb-season-toolbar .lb-season-views button { flex: 1; min-width: 0; min-height: 32px; padding: 4px; font-size: .74rem; }
  #lb-season-stats .lb-season-grid text, #lb-season-stats .lb-season-xaxis text { font-size: 11px; }
  #lb-season-stats .lb-season-path { stroke-width: 3.4; }
  #lb-season-stats .lb-season-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; }
  #lb-season-stats .lb-season-chip { min-height: 36px; font-size: .78rem; }
  #lb-season-stats .lb-season-chip:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 12px) / 2); }
}
@media (prefers-reduced-motion: reduce) {
  #lb-season-stats .lb-season-path, #lb-season-stats .lb-season-chip { transition: none; }
}
.builder-two-page:is([data-mode="spooky-chess"], [data-mode="power-surge"], [data-mode="twenty-win-challenge"]) .builder-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.builder-event-result header { flex-wrap: wrap; gap: 8px; }
.builder-event-result header > div:first-child { flex-wrap: wrap; min-width: 0; }
.builder-event-result .builder-result-head-actions { margin-left: auto; min-height: 26px; }
.builder-event-result .builder-result-cards { grid-template-columns: repeat(8, minmax(0, 1fr)); max-width: 520px; }
.builder-event-result .builder-result-cards:has(.builder-tower-card) { grid-template-columns: repeat(8, minmax(0, 1fr)) 10px minmax(0, 1fr); max-width: 580px; }
.builder-event-stats { order: 4; display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--panel-muted); font-size: .8rem; margin-top: 12px; }
.builder-event-matchups { order: 5; margin-top: 10px; color: var(--panel-muted); font-size: .8rem; }
.builder-event-matchups > summary { cursor: pointer; width: max-content; }
.builder-event-matchup-list { display: grid; gap: 12px; margin-top: 10px; }
.builder-event-matchup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.builder-event-opponent { display: flex; gap: 2px; }
.builder-event-opponent img { width: 28px; height: auto; object-fit: contain; }
@media (max-width: 820px) {
  .builder-two-page:is([data-mode="spooky-chess"], [data-mode="power-surge"], [data-mode="twenty-win-challenge"]) .builder-results { grid-template-columns: minmax(0, 1fr); }
  .builder-event-result .builder-result-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 280px; }
  .builder-event-result .builder-result-cards:has(.builder-tower-card) { grid-template-columns: repeat(4, minmax(0, 1fr)) 12px minmax(0, 1fr); max-width: 350px; }
  .builder-event-result .builder-result-cards:has(.builder-tower-card) > .builder-result-card:nth-child(n + 5):nth-child(-n + 8) { grid-row: 2; }
  .builder-event-result .builder-result-cards > .builder-tower-divider { grid-area: 1 / 5 / 3 / 6; align-self: center; height: 70%; }
  .builder-event-result .builder-result-cards > .builder-tower-card { grid-area: 1 / 6 / 3 / 7; align-self: center; }
}
.builder-featured-section { margin-bottom: 24px; }
.builder-featured-grid { grid-template-columns: minmax(0, 420px); }
.builder-choice.builder-choice-featured {
  --twenty-red-tile: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20width%3D%27100%27%20height%3D%27100%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27a%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%20gradientTransform%3D%27rotate%28-45%20.5%20.5%29%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23c8323a%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23bd2d35%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27b%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%20gradientTransform%3D%27rotate%28-45%20.5%20.5%29%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23ad2932%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23a32730%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%27100%27%20height%3D%27100%27%20fill%3D%27%23062764%27%2F%3E%3Crect%20x%3D%2715.45%27%20y%3D%2715.45%27%20width%3D%2769.11%27%20height%3D%2769.11%27%20rx%3D%279%27%20transform%3D%27rotate%2845%2050%2050%29%27%20fill%3D%27url%28%23a%29%27%2F%3E%3Crect%20x%3D%27-34.55%27%20y%3D%27-34.55%27%20width%3D%2769.11%27%20height%3D%2769.11%27%20rx%3D%279%27%20transform%3D%27rotate%2845%200%200%29%27%20fill%3D%27url%28%23b%29%27%2F%3E%3Crect%20x%3D%2765.44%27%20y%3D%27-34.55%27%20width%3D%2769.11%27%20height%3D%2769.11%27%20rx%3D%279%27%20transform%3D%27rotate%2845%20100%200%29%27%20fill%3D%27url%28%23b%29%27%2F%3E%3Crect%20x%3D%27-34.55%27%20y%3D%2765.44%27%20width%3D%2769.11%27%20height%3D%2769.11%27%20rx%3D%279%27%20transform%3D%27rotate%2845%200%20100%29%27%20fill%3D%27url%28%23b%29%27%2F%3E%3Crect%20x%3D%2765.44%27%20y%3D%2765.44%27%20width%3D%2769.11%27%20height%3D%2769.11%27%20rx%3D%279%27%20transform%3D%27rotate%2845%20100%20100%29%27%20fill%3D%27url%28%23b%29%27%2F%3E%3C%2Fsvg%3E");
  position: relative; isolation: isolate; overflow: visible;
  padding: 12px 14px; grid-template-columns: 58px minmax(0, 1fr); column-gap: 12px;
  border-color: var(--gold);
  background: linear-gradient(145deg, color-mix(in srgb, var(--gold) 22%, transparent), color-mix(in srgb, var(--primary) 14%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent), 0 8px 24px color-mix(in srgb, var(--gold) 14%, transparent);
}
.builder-choice-featured .builder-pattern {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.12; border-radius: inherit; overflow: hidden;
  background-image: var(--karo-kachel); background-size: var(--karo-groesse) var(--karo-groesse);
}
.builder-choice-featured .builder-pattern::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--twenty-red-tile); background-size: var(--karo-groesse) var(--karo-groesse);
  mask-image: linear-gradient(90deg, var(--cr-bar-border) 40%, transparent 60%);
}
.builder-choice.builder-choice-featured:hover { border-color: var(--gold); }
.builder-choice.builder-choice-featured.active { border-color: var(--gold); }
.builder-mode-grid .builder-choice-featured img { height: 64px; max-width: 58px; }
.builder-choice-featured b { min-width: 0; font-size: 1rem; line-height: 1.25; }
@media (max-width: 820px) {
  .builder-choice.builder-choice-featured {
    padding: 30px 12px 10px; grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px;
  }
  .builder-mode-grid .builder-choice-featured img { grid-row: 1; height: 48px; max-width: 48px; }
  .builder-choice-featured b { font-size: .95rem; line-height: 1.2; }
  .builder-choice-featured > span { display: none; }
}
.builder-events-section { margin-top: 24px; }
.builder-event-mode-grid { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
.builder-event-result header > div:first-child { flex-wrap: nowrap; white-space: nowrap; min-height: 26px; }
.builder-event-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.builder-event-stats > span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.builder-event-stats img { width: 22px; height: 22px; object-fit: contain; }
@media (min-width: 821px) and (max-width: 1050px) {
  .builder-event-result header { display: grid; grid-template-columns: 1fr; }
}
.accent-evo { --mode-accent: #c45cff; }
@keyframes geierRoundBanner {
  0% { transform: scale(1.6); opacity: 0; filter: drop-shadow(0 0 14px currentColor); }
  40% { transform: scale(1); opacity: 1; }
  100% { filter: drop-shadow(0 0 0 transparent); }
}
@keyframes geierHeartBreak {
  0% { transform: scale(1); }
  30% { transform: scale(1.45) rotate(-8deg); box-shadow: 0 0 14px rgba(255, 60, 80, .8); }
  60% { transform: scale(.85) rotate(6deg); }
  100% { transform: scale(1); }
}
@keyframes geierOutPickIn { to { opacity: 1; transform: none; } }
@keyframes geierOutCrossIn { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes geierOutClash {
  0% { transform: none; }
  25% { transform: translateX(-6px) rotate(-3deg); }
  50% { transform: translateX(6px) rotate(3deg); }
  100% { transform: none; filter: grayscale(.8) brightness(.55) drop-shadow(0 9px 8px rgba(0,0,0,.6)); }
}
@keyframes geierOutWon { to { filter: drop-shadow(0 0 14px rgba(85, 230, 150, .65)) drop-shadow(0 9px 8px rgba(0,0,0,.6)); } }
@keyframes geierOutDim { to { filter: grayscale(.7) brightness(.45); opacity: .55; } }
@keyframes geierOutPickerClash { to { opacity: 1; transform: none; background: rgba(120, 18, 34, .85); border-color: rgba(255, 70, 90, .8); } }
@keyframes geierOutPickerWon { to { opacity: 1; transform: none; background: rgba(16, 104, 69, .7); border-color: rgba(55, 231, 142, .8); } }
@keyframes geierOutFlipGlow { 0% { filter: drop-shadow(0 0 0 transparent); } 40% { filter: drop-shadow(0 0 12px rgba(196, 92, 255, .9)); } 100% { filter: drop-shadow(0 0 0 transparent); } }
@keyframes geierOutDeckIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.ad-slot { display: none; }
.ads-on .ad-slot { display: block; clear: both; width: 100%; max-width: 1000px; margin: 32px auto; }
.ads-on .ad-slot[hidden],
.ads-on .ad-slot:has(ins[data-ad-status="unfilled"]) { display: none; }
.ad-slot-label {
  display: block; margin-bottom: 6px; text-align: center;
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.ad-slot-box { min-height: 250px; }
.ad-slot-box:has(ins[data-ad-status="filled"]) { min-height: 0; }
.gift-grid > .ad-slot { grid-column: 1 / -1; margin: 20px 0; }
#decks-list > .ad-slot { margin: 28px 0; }
@media (min-width: 900px) { .ad-slot-box { min-height: 120px; } }

#view-home a{color:inherit;text-decoration:none}
#view-home button,#view-home input,#view-home summary{font:inherit}
#view-home a:focus-visible,#view-home summary:focus-visible,#view-home input:focus-visible,#view-home label:focus-within{outline:3px solid var(--gold);outline-offset:4px}
#view-home a,#view-home summary{touch-action:manipulation}
#view-home h1,#view-home h2,#view-home h3,#view-home p{margin:0}
#view-home h2,#view-home h3{font-family:'Clash Display',system-ui,sans-serif}
#view-home img{max-width:100%;display:block}
#view-home .home-intro{display:flex;align-items:center;gap:22px;margin-bottom:20px}
#view-home .home-logo{width:158px;height:79px;object-fit:contain;flex:none}
#view-home .home-intro h1{font-size:21px;line-height:1.25;max-width:390px;font-weight:750;letter-spacing:-.5px}
#view-home .home-intro small{display:block;margin-top:7px;color:var(--panel-muted);font-size:12px}
#view-home .home-lookup{max-width:660px;margin:0 auto 25px;position:relative}
#view-home .home-lookup fieldset{border:0;margin:0;padding:0}
#view-home .home-lookup legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#view-home .home-featured{display:grid;grid-template-columns:2fr 1fr;gap:18px}
#view-home .home-feature{border-radius:var(--panel-radius);border:1px solid var(--panel-border);background:var(--panel-bg);overflow:hidden;position:relative;box-shadow:var(--panel-shadow)}
#view-home .home-feature-main{display:block;position:relative;min-height:272px}
#view-home .home-feature-main>img{height:272px;width:100%;object-fit:cover;object-position:center 38%}
#view-home .home-feature-copy{padding:18px 20px;background:var(--panel-bg)}
#view-home .home-feature-copy h2{font-size:28px;line-height:1.1;letter-spacing:-.6px}
#view-home .home-feature-copy p{font-size:12px;line-height:1.4;color:var(--panel-muted);margin-top:7px}
#view-home .home-feature-copy .home-arrow{float:right;font-family:system-ui}
#view-home .home-builder .home-feature-copy{position:absolute;bottom:0;left:0;right:0}
#view-home .home-modes{padding:10px 14px;display:flex;gap:6px;flex-wrap:wrap;background:var(--panel-inset)}
#view-home .home-modes a{font-size:10px;font-weight:650;padding:8px 10px;border-radius:6px;border:1px solid var(--panel-inset-border);color:var(--panel-muted)}
#view-home .home-modes a:hover{background:var(--deck-btn-on);color:var(--panel-text)}
#view-home .home-rewards .home-feature-main{display:flex;flex-direction:column;height:100%}
#view-home .home-rewards .home-feature-main>img{height:210px;object-fit:contain;padding:0 20px;flex:1;min-height:0}
#view-home .home-rewards h2{color:var(--gold);font-size:25px}
#view-home .home-feature:hover,#view-home .home-poster:hover .home-poster-art{border-color:var(--deck-btn-hover-border)}
#view-home .home-section-title{display:flex;align-items:center;justify-content:space-between;margin:26px 0 14px}
#view-home .home-section-title h2{font-family:inherit;font-size:15px}
#view-home .home-section-title a{font-size:11px;color:var(--panel-muted)}
#view-home .home-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 18px}
#view-home .home-poster{min-width:0;display:block}
#view-home .home-poster-art{position:relative;overflow:hidden;aspect-ratio:4/5;border:1px solid var(--panel-border);border-radius:var(--panel-radius);background:var(--panel-bg);box-shadow:var(--panel-shadow);transition:transform .18s,border-color .18s}
#view-home .home-poster-art>img{width:100%;height:100%;object-fit:cover}
#view-home .home-poster-art.contain>img{object-fit:contain;padding:8px}
#view-home .home-poster-title{position:absolute;bottom:0;left:0;right:0;padding:16px 12px;background:var(--panel-bg);font-size:22px;line-height:1.1}
#view-home .home-poster p{margin-top:8px;color:var(--panel-muted);font-size:11px;line-height:1.45}
#view-home .home-poster:hover .home-poster-art{transform:translateY(-3px)}
#view-home .home-poster-label{display:flex;align-items:center;gap:7px;font-weight:700;margin-top:10px;font-size:13px}
#view-home .home-poster-label img{width:20px;height:20px;object-fit:contain}
#view-home .seo-guide{border-top:1px solid var(--panel-inset-border);padding-top:26px;line-height:1.8;color:var(--panel-muted);columns:2;column-gap:42px}
#view-home .seo-guide h2{column-span:all;color:var(--panel-text);font-family:inherit;font-size:24px;margin-bottom:18px}
#view-home .seo-guide h3{font-family:inherit;font-size:15px;color:var(--panel-text);margin:18px 0 8px;break-after:avoid}
#view-home .seo-guide p{font-size:13px;margin:0 0 15px}
#view-home .seo-related a{display:inline-block;margin:0 10px;color:var(--panel-text)}
@media(max-width:880px){#view-home .home-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#view-home .home-featured{grid-template-columns:1.5fr 1fr}#view-home .home-feature-copy h2{font-size:24px}#view-home .home-modes{gap:4px}#view-home .home-modes a{padding:7px}}
@media(max-width:540px){#view-home .home-intro{gap:13px;justify-content:flex-start;margin-bottom:14px}#view-home .home-logo{width:112px;height:56px}#view-home .home-intro h1{font-size:14px;letter-spacing:0;line-height:1.35}#view-home .home-intro small{font-size:9px;margin-top:3px}#view-home .home-lookup{margin-bottom:16px}#view-home .home-featured{grid-template-columns:1fr;gap:12px}#view-home .home-feature-main{min-height:190px}#view-home .home-feature-main>img{height:190px;object-position:center 35%}#view-home .home-feature-copy{padding:12px 14px}#view-home .home-feature-copy h2{font-size:25px}#view-home .home-feature-copy p{font-size:10px;margin-top:5px}#view-home .home-modes{padding:7px 9px;gap:4px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}#view-home .home-modes a{text-align:center;padding:5px 3px;font-size:9px}#view-home .home-rewards .home-feature-main{min-height:123px;height:123px;display:flex;flex-direction:row-reverse;align-items:center}#view-home .home-rewards .home-feature-main>img{width:40%;height:120px;flex:none;padding:2px}#view-home .home-rewards .home-feature-copy{flex:1;background:none}#view-home .home-rewards h2{font-size:22px}#view-home .home-rewards .home-arrow{display:none}#view-home .home-section-title{margin:21px 0 12px}#view-home .home-section-title h2{font-size:14px}#view-home .home-section-title a{font-size:10px}#view-home .home-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}#view-home .home-poster-art{aspect-ratio:3/4}#view-home .home-poster-title{font-size:20px;padding:13px 10px}#view-home .home-poster-label{font-size:12px}#view-home .home-poster p{font-size:10px}#view-home .seo-guide{columns:1}#view-home .seo-guide h2{font-size:21px}}
@media(min-width:541px){#view-home .home-rewards .home-feature-main{display:block;min-height:0;height:100%}#view-home .home-rewards .home-feature-main>img{position:absolute;top:0;height:calc(100% - 90px);width:100%;padding:0}#view-home .home-rewards .home-feature-copy{position:absolute;bottom:0;width:100%}}
@media(max-width:540px){#view-home .home-logo{width:138px;height:69px}#view-home .home-intro h1{font-size:13px}#view-home .home-intro small{font-size:8px}#view-home .home-lookup{display:grid;grid-template-columns:99px minmax(0,1fr);column-gap:8px}#view-home .home-lookup fieldset{grid-column:1;grid-row:1;align-self:center;display:flex}#view-home .home-feature-main,#view-home .home-feature-main>img{min-height:178px;height:178px}#view-home .home-rewards .home-feature-main>img{height:120px;min-height:0;padding:0}#view-home .home-rewards .home-feature-main{height:123px;min-height:123px}}
@media(prefers-reduced-motion:reduce){#view-home .home-poster:hover .home-poster-art{transform:none}}
#view-home :is(a,button,input,summary):focus-visible{outline:2px solid var(--primary);outline-offset:3px}
#view-home .home-intro{justify-content:space-between;gap:24px;max-width:none;margin-bottom:10px;min-height:74px}
#view-home .home-intro h1{max-width:520px;font-size:23px;line-height:1.25}
#view-home .home-logo{width:180px;height:90px;object-fit:contain}
#view-home .home-lookup{display:flex;align-items:center;gap:10px;max-width:620px;margin:0 0 22px;padding:0;border:0;background:none}
#view-home .home-help-trigger{width:44px;height:44px;border:0;background:none;display:grid;place-items:center;cursor:pointer;padding:0;flex:none}
#view-home .home-help-trigger img{width:36px;height:36px;object-fit:contain}
#view-home #tag-help{width:min(680px,calc(100% - 28px));max-height:calc(100dvh - 48px);overflow:auto;padding:30px 24px 24px;color:var(--panel-text);background:var(--header-menu-bg);border:1px solid var(--panel-border);border-radius:var(--radius);box-shadow:var(--panel-shadow)}
#view-home #tag-help::backdrop{background:var(--feedback-backdrop)}
#view-home #tag-help h2{padding-right:30px;font-family:inherit;font-size:21px;line-height:1.35}
#view-home .home-help-close{position:absolute;right:10px;top:10px;border:0;color:var(--panel-text);background:none;width:40px;height:40px;cursor:pointer;font-size:27px;display:grid;place-items:center}
#view-home #tag-help ol{display:grid;grid-template-columns:1fr 1fr;gap:18px;list-style:none;padding:0;margin:22px 0}
#view-home #tag-help ol img{width:100%;height:auto;border-radius:var(--panel-radius);margin-bottom:10px}
#view-home #tag-help strong{font-size:12px}
#view-home #tag-help p{color:var(--panel-muted);font-size:12px}
#view-home .home-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 8px;padding:8px 12px}
#view-home .home-modes a{display:flex;align-items:center;gap:8px;justify-content:flex-start;font-size:11px;border:0;background:none;padding:5px;min-height:40px;color:var(--panel-text)}
#view-home .home-modes a:hover{background:var(--deck-btn-bg)}
#view-home .home-modes img{width:28px;height:28px;object-fit:contain;flex:none}
#view-home .home-builder .home-feature-main{min-height:246px;height:246px}
#view-home .home-builder .home-feature-main>img{height:246px;object-fit:contain;width:100%;padding:4px 0 75px}
#view-home .home-rewards .home-feature-main>img{object-fit:contain;padding:12px;height:calc(100% - 84px)}
#view-home .home-rewards h2{color:var(--panel-text)}
#view-home .home-poster-copy{position:absolute;left:0;right:0;bottom:0;padding:14px 12px;background:var(--panel-bg)}
#view-home .home-poster-copy h3{font-size:21px;line-height:1.15}
#view-home .home-poster-copy p{font-size:11px;line-height:1.4;color:var(--panel-muted);margin:7px 0 0;min-height:31px}
#view-home .home-grid{row-gap:18px}
@media(max-width:540px){#view-home main{padding-top:8px}#view-home .home-intro{gap:6px;min-height:64px;margin-bottom:6px}#view-home .home-intro h1{font-size:14px;max-width:230px;font-weight:650}#view-home .home-logo{width:126px;height:63px}#view-home .home-lookup{gap:6px;margin-bottom:14px}#view-home .home-builder .home-feature-main,#view-home .home-builder .home-feature-main>img{height:176px;min-height:176px}#view-home .home-builder .home-feature-main>img{padding:0 0 61px}#view-home .home-modes{padding:5px 8px;gap:3px 4px}#view-home .home-modes a{font-size:9px;gap:4px;min-height:38px;padding:3px;line-height:1.2}#view-home .home-modes img{width:25px;height:25px}#view-home .home-rewards .home-feature-main{height:142px;min-height:142px}#view-home .home-rewards .home-feature-main>img{width:46%;height:132px;padding:4px}#view-home .home-rewards h2{font-size:21px}#view-home .home-poster-copy{padding:11px 10px}#view-home .home-poster-copy h3{font-size:19px}#view-home .home-poster-copy p{font-size:10px;min-height:28px}#view-home #tag-help{padding:28px 18px 20px}#view-home #tag-help h2{font-size:19px}#view-home #tag-help ol{grid-template-columns:1fr;gap:20px}#view-home #tag-help img{max-height:190px;object-fit:contain}}
#view-home .home-intro{flex-direction:column;gap:3px;margin:0 auto 18px;text-align:center}
#view-home .home-logo{width:186px;height:93px}
#view-home .home-intro h1{max-width:820px;font-size:29px;line-height:1.2;font-weight:800;letter-spacing:-.6px}
#view-home .home-lookup{margin:0 auto 24px;width:100%}
#view-home .home-feature-copy h2{font-size:28px}
@media(min-width:541px){#view-home .home-builder .home-feature-main,#view-home .home-rewards .home-feature-main{height:268px;min-height:268px;display:block}#view-home .home-builder .home-feature-main>img,#view-home .home-rewards .home-feature-main>img{position:static;width:100%;height:180px;min-height:0;padding:8px;object-fit:contain;object-position:center}#view-home .home-builder .home-feature-copy,#view-home .home-rewards .home-feature-copy{position:static;padding:18px 20px;background:none}#view-home .home-rewards .home-feature-main{height:100%}}
@media(max-width:540px){#view-home .home-intro{gap:2px;margin-bottom:12px;min-height:0}#view-home .home-logo{width:128px;height:64px}#view-home .home-intro h1{font-size:19px;line-height:1.18;max-width:340px;letter-spacing:-.3px;font-weight:800}#view-home .home-lookup{margin-bottom:14px}#view-home .home-feature-copy h2{font-size:25px}#view-home .home-rewards .home-feature-copy h2{font-size:21px}}
#view-home .home-builder .home-feature-main{height:268px;min-height:268px;overflow:hidden}
#view-home .home-builder .home-feature-main>img{position:absolute;bottom:0;right:7%;top:auto;width:46%;height:100%;min-height:0;padding:0;object-fit:contain;object-position:center bottom}
#view-home .home-builder .home-feature-copy{position:absolute;left:0;bottom:22px;right:auto;width:48%;padding:18px 20px;background:none;z-index:1}
#view-home .home-builder .home-feature-copy h2{max-width:260px}
#view-home .home-modes{border-top:1px solid var(--panel-inset-border)}
@media(min-width:541px){#view-home .home-rewards .home-feature-main{display:flex;flex-direction:column;justify-content:flex-end}#view-home .home-rewards .home-feature-main>img{flex:1;min-height:0;height:0;object-fit:contain;object-position:center}#view-home .home-rewards .home-feature-copy{position:static;flex:none;width:100%}}
@media(min-width:541px) and (max-width:880px){#view-home .home-builder .home-feature-main>img{right:0;width:55%}#view-home .home-builder .home-feature-copy{width:48%}#view-home .home-builder .home-feature-copy h2{font-size:25px}}
@media(max-width:540px){#view-home .home-builder .home-feature-main{height:190px;min-height:190px}#view-home .home-builder .home-feature-main>img{width:55%;right:0;height:190px;min-height:0}#view-home .home-builder .home-feature-copy{bottom:12px;width:47%;padding:12px 14px}#view-home .home-builder .home-feature-copy h2{font-size:25px;line-height:1.12}#view-home .home-builder .home-feature-copy p{max-width:135px;line-height:1.5}}
#view-home .hc3-visual{position:absolute;inset:0 0 76px;overflow:hidden;isolation:isolate;pointer-events:none}
#view-home .hc3-graph{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
#view-home .hc3-back{z-index:1}
#view-home .hc3-badge{position:absolute;z-index:2;left:50%;top:40%;animation:hc3-schweben 5.5s ease-in-out infinite;width:34%;max-width:120px;height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 8px 18px rgba(0,0,0,.45))}
#view-home .hc3-front{z-index:3}
#view-home .hc3-line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
#view-home .hc3-back .hc3-line{stroke-width:2.4}
#view-home .hc3-area{opacity:0}
#view-home .hc3-art.is-drawn .hc3-line{animation:hc3-line-in 1.25s .12s cubic-bezier(.65,0,.35,1) forwards}
#view-home .hc3-art.is-drawn .hc3-area{animation:hc3-area-in 1.05s .18s cubic-bezier(.22,1,.36,1) forwards}
#view-home .hc3-point{opacity:0;transform-box:fill-box;transform-origin:center}
#view-home .hc3-art.is-drawn .hc3-point{animation:hc3-point-in .35s var(--point-delay) ease-out forwards}
#view-home .hc3-point circle{fill:#11192d;stroke:#9fc1ff;stroke-width:2.5;transition:stroke .5s ease}
#view-home .hc3-point.up circle{stroke:#64e3a1}
#view-home .hc3-point.down circle{stroke:#ff7182}
#view-home .hc3-point.flat circle{stroke:#98a8cc}
#view-home .hc3-art.is-settled .hc3-line,#view-home .hc3-art.is-settled .hc3-area,#view-home .hc3-art.is-settled .hc3-point{animation:none;opacity:1;stroke-dashoffset:0;transform:none}
#view-home .hc3-back{opacity:1}
#view-home .hc3-back .hc3-line,#view-home .hc3-back .hc3-point{opacity:.7}
#view-home .hc3-art.is-settled .hc3-back .hc3-line,#view-home .hc3-art.is-settled .hc3-back .hc3-point{opacity:.7}
#view-home .hc3-back .hc3-area{fill-opacity:.7}
@keyframes hc3-schweben{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 6px))}}
@keyframes hc3-line-in{to{stroke-dashoffset:0}}
@keyframes hc3-area-in{from{opacity:0;transform:scaleY(.6)}to{opacity:1;transform:none}}
@keyframes hc3-point-in{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
#view-home .hc3-area{transform-box:fill-box;transform-origin:bottom}
#view-home .hc3-art .home-poster-copy{background:none;z-index:4}
@media(max-width:540px){#view-home .hc3-visual{bottom:68px}#view-home .hc3-line{stroke-width:2.2}#view-home .hc3-back .hc3-line{stroke-width:1.8}#view-home .hc3-point circle{stroke-width:1.6}}
@media(prefers-reduced-motion:reduce){#view-home .hc3-badge{animation:none}#view-home .hc3-art.is-drawn .hc3-line,#view-home .hc3-art.is-drawn .hc3-area,#view-home .hc3-art.is-drawn .hc3-point{animation:none;opacity:1;stroke-dashoffset:0}}
#view-home .lb2-art{--lb2-row:30px;--lb2-row-active:46px;--lb2-gap:6px;--lb2-dauer:.45s}
#view-home .lb2-visual{position:absolute;inset:0 0 76px;overflow:hidden;pointer-events:none}
#view-home .lb2-statuen{position:absolute;left:0;right:0;top:4px;height:64%;display:flex;justify-content:center;align-items:flex-start}
#view-home .lb2-statuen img{position:relative;z-index:1;width:92%;height:auto;max-height:100%;object-fit:contain;object-position:top;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 52%,transparent 96%);mask-image:linear-gradient(to bottom,#000 0,#000 52%,transparent 96%)}
#view-home .lb2-glow{position:absolute;z-index:0;left:50%;top:38%;width:78%;aspect-ratio:1.6;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,213,110,.42),rgba(255,176,64,.16) 55%,transparent 100%);filter:blur(6px)}
#view-home .lb2-fenster{position:absolute;left:0;right:0;bottom:6px;overflow:hidden;padding:0 12px;
  height:calc(var(--lb2-row) * 2 + var(--lb2-row-active) + var(--lb2-gap) * 2 + 4px)}
#view-home .lb2-list{list-style:none;margin:0;padding:2px 0 0;display:flex;flex-direction:column;gap:var(--lb2-gap);
  transform:translate3d(0,0,0);transition:transform var(--lb2-dauer) cubic-bezier(.22,1,.36,1);will-change:transform}
#view-home .lb2-row{--medal-hi:#cfe0ff;--medal-mid:#9fc1ff;--medal-dark:#5f7fcf;--medal-ring:rgba(119,156,255,.35);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;height:var(--lb2-row);padding:0 12px;flex:none;
  border:1px solid rgba(148,163,184,.14);border-radius:9px;background:rgba(17,24,44,.8);color:#e2e9f8;opacity:.6;
  transition:height var(--lb2-dauer) cubic-bezier(.22,1,.36,1),opacity var(--lb2-dauer) ease,background var(--lb2-dauer) ease,border-color var(--lb2-dauer) ease,box-shadow var(--lb2-dauer) ease}
#view-home .lb2-row.medal-1{--medal-hi:#fff2ba;--medal-mid:#f0c04a;--medal-dark:#a9761b;--medal-ring:rgba(247,190,73,.45)}
#view-home .lb2-row.medal-2{--medal-hi:#ffffff;--medal-mid:#dce4ee;--medal-dark:#8494a8;--medal-ring:rgba(220,228,238,.4)}
#view-home .lb2-row.medal-3{--medal-hi:#ffd9ae;--medal-mid:#e09a5c;--medal-dark:#96551f;--medal-ring:rgba(224,154,92,.42)}
#view-home .lb2-rank{min-width:1.9em;font-weight:850;font-size:.78rem;color:rgba(226,233,248,.62);font-variant-numeric:tabular-nums;transition:font-size var(--lb2-dauer) ease}
#view-home .lb2-row.medal .lb2-rank{background:linear-gradient(100deg,var(--medal-mid),var(--medal-hi),var(--medal-mid));-webkit-background-clip:text;background-clip:text;color:transparent}
#view-home .lb2-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:.78rem;transition:font-size var(--lb2-dauer) ease}
#view-home .lb2-score{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:.78rem;font-variant-numeric:tabular-nums;transition:font-size var(--lb2-dauer) ease}
#view-home .lb2-score img{width:15px;height:15px;object-fit:contain;transition:width var(--lb2-dauer) ease,height var(--lb2-dauer) ease}
#view-home .lb2-row.is-active{height:var(--lb2-row-active);opacity:1;background:linear-gradient(135deg,rgba(33,46,84,.97),rgba(17,24,44,.97));
  border-color:var(--medal-ring);box-shadow:0 0 0 1px var(--medal-ring),0 6px 18px rgba(0,0,0,.35),0 0 16px var(--medal-ring)}
#view-home .lb2-row.is-active .lb2-rank{font-size:1rem}
#view-home .lb2-row.is-active .lb2-name{font-size:.95rem}
#view-home .lb2-row.is-active .lb2-score{font-size:.95rem}
#view-home .lb2-row.is-active .lb2-score img{width:20px;height:20px}
#view-home .lb2-art.is-ruecklauf{--lb2-dauer:.22s}
#view-home .lb2-art.is-ruecklauf .lb2-list{transition:none}
#view-home .lb2-art .home-poster-copy{background:none;z-index:2}
@media(max-width:540px){#view-home .lb2-art{--lb2-row:22px;--lb2-row-active:34px;--lb2-gap:4px}#view-home .lb2-visual{bottom:68px}#view-home .lb2-fenster{padding:0 7px;bottom:4px}#view-home .lb2-statuen{height:58%}#view-home .lb2-row{gap:5px;padding:0 7px;border-radius:7px}#view-home .lb2-rank{min-width:1.5em}#view-home .lb2-rank,#view-home .lb2-name,#view-home .lb2-score{font-size:.62rem}#view-home .lb2-score{gap:3px}#view-home .lb2-score img{width:11px;height:11px}#view-home .lb2-row.is-active .lb2-rank,#view-home .lb2-row.is-active .lb2-name{font-size:.76rem}#view-home .lb2-row.is-active .lb2-score{font-size:.7rem}#view-home .lb2-row.is-active .lb2-score img{width:15px;height:15px}}
@media(prefers-reduced-motion:reduce){#view-home .lb2-list,#view-home .lb2-row,#view-home .lb2-rank,#view-home .lb2-name,#view-home .lb2-score,#view-home .lb2-score img{transition:none}}
#view-home .md1-art{--win:#64e3a1;--use1:#6388ff;--use2:#75d6ff;--el1:#b44dff;--el2:#ff7ad9}
#view-home .md1-visual{position:absolute;inset:0 0 76px;overflow:hidden;pointer-events:none}
#view-home .md1-art .home-poster-copy{background:none;z-index:2}
#view-home .md1-stats{position:absolute;left:14px;right:14px;top:12px;display:grid;gap:7px;padding:9px 11px 8px;border-radius:11px;
  border:1px solid rgba(119,156,255,.22);background:linear-gradient(145deg,rgba(26,36,66,.9),rgba(12,17,32,.9));box-shadow:0 8px 20px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.05)}
#view-home .md1-stat{display:grid;grid-template-columns:20px 1fr 40px;gap:9px;align-items:center}
#view-home .md1-stat img{width:20px;height:20px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
#view-home .md1-spur{position:relative;height:9px;border-radius:6px;background:rgba(148,163,184,.14);overflow:hidden}
#view-home .md1-spur i{position:absolute;inset:0 auto 0 0;width:0;border-radius:6px;transform-origin:left;
  overflow:hidden}
#view-home .md1-spur i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-120%);animation:md1-glanz 3.6s ease-in-out infinite;animation-delay:var(--glanz,0s)}
#view-home .md1-win .md1-spur i{background:linear-gradient(90deg,#2fbf7c,var(--win));box-shadow:0 0 10px rgba(100,227,161,.45);--glanz:.2s}
#view-home .md1-use .md1-spur i{background:linear-gradient(90deg,var(--use1),var(--use2));box-shadow:0 0 10px rgba(117,214,255,.4);--glanz:1.1s}
#view-home .md1-elixir .md1-spur i{background:linear-gradient(90deg,var(--el1),var(--el2));box-shadow:0 0 10px rgba(255,122,217,.4);--glanz:2s}
#view-home .md1-wert{font-weight:900;font-size:.82rem;color:#fff;text-align:right;font-variant-numeric:tabular-nums}
@keyframes md1-glanz{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
#view-home .md1-rang{display:flex;gap:5px;justify-self:end;margin-top:1px}
#view-home .md1-rang span{width:18px;height:4px;border-radius:3px;background:rgba(148,163,184,.25);transition:background .4s ease,width .4s ease}
#view-home .md1-rang span.an{width:26px;background:linear-gradient(90deg,#f0c04a,#fff2ba)}
#view-home .md1-karten{position:absolute;left:40px;right:40px;bottom:12px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px 8px}
#view-home .md1-karte{transition:transform .38s cubic-bezier(.65,0,.35,1),opacity .38s ease}
#view-home .md1-karte img{display:block;width:100%;height:auto;aspect-ratio:285/420;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.45))}
#view-home .md1-karte.weg{transform:perspective(500px) rotateY(90deg);opacity:.3}
@media(max-width:540px){#view-home .md1-visual{bottom:68px}#view-home .md1-stats{left:8px;right:8px;top:8px;gap:4px;padding:6px 7px;border-radius:8px}#view-home .md1-stat{grid-template-columns:13px 1fr 26px;gap:5px}#view-home .md1-stat img{width:13px;height:13px}#view-home .md1-spur{height:6px}#view-home .md1-wert{font-size:.58rem}#view-home .md1-rang{display:none}#view-home .md1-stats{gap:3px;padding:5px 7px}#view-home .md1-karten{left:28px;right:28px;bottom:18px;gap:4px 7px}}
@media(prefers-reduced-motion:reduce){#view-home .md1-spur i::after{animation:none}#view-home .md1-karte{transition:none}}
#view-home .home-rewards .home-feature-main{position:relative}
#view-home .home-rewards .home-feature-main>img.fr1-platzhalter{visibility:hidden}
#view-home .fr1-buehne{position:absolute;pointer-events:none;overflow:visible;color:#6fa7ff;transition:color .9s ease;contain:layout}
#view-home .fr1-buehne[data-szene="kisten"]{color:#ffc34d}
#view-home .fr1-buehne[data-szene="turm"]{color:#7fe3ff}
#view-home .fr1-buehne[data-szene="karten"]{color:#c78bff}
#view-home .fr1-buehne[data-szene="banner"]{color:#ff9f6b}
#view-home .fr1-glow{position:absolute;left:50%;top:52%;width:92%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,currentColor,transparent);opacity:.28;filter:blur(8px)}
#view-home .fr1-strahlen{position:absolute;left:50%;top:52%;width:125%;aspect-ratio:1;border-radius:50%;opacity:.13;
  background:repeating-conic-gradient(from 0deg,currentColor 0deg 5deg,transparent 5deg 22.5deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 18%,transparent 72%);mask-image:radial-gradient(closest-side,#000 18%,transparent 72%);
  animation:fr1-drehen 26s linear infinite;transform:translate(-50%,-50%)}
@keyframes fr1-drehen{to{transform:translate(-50%,-50%) rotate(360deg)}}
#view-home .fr1-platz{position:absolute;transform:translate(-50%,-50%);display:block;line-height:0}
#view-home .fr1-buehne .fr1-platz img{display:block;width:auto;max-width:none;padding:0;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45));will-change:transform,opacity}
#view-home .fr1-funke{position:absolute;width:10px;height:10px;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,#fff,rgba(255,255,255,.0));border-radius:50%;opacity:0}
#view-home .fr1-funke::before,#view-home .fr1-funke::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:16px;transform:translate(-50%,-50%);
  background:linear-gradient(transparent,#fff,transparent);border-radius:2px}
#view-home .fr1-funke::after{transform:translate(-50%,-50%) rotate(90deg)}
@media(prefers-reduced-motion:reduce){#view-home .fr1-strahlen{animation:none}}
#view-home .ps1-visual{position:absolute;inset:0 0 80px;overflow:hidden;pointer-events:none;container-type:size}
#view-home .ps1-art .home-poster-copy{background:none;z-index:2}
#view-home .ps1-art{--s:min(40cqw,52cqh);--win1:#6cf0b3;--win2:#269a6a;--loss1:#e45465;--loss2:#ff7a84;--draw:#9ca4b4}
#view-home .ps1-art b,#view-home .ps1-art small{font-family:"Clash Display",system-ui,sans-serif}
#view-home .ps1-stern{position:absolute;left:25%;top:30cqh;width:calc(var(--s) * 1.28);height:calc(var(--s) * 1.28);transform:translate(-50%,-50%)}
#view-home .ps1-stern img{position:absolute;inset:0;width:100%;height:100%;padding:0;max-width:none;object-fit:contain}
#view-home .ps1-stern-leer{filter:grayscale(1) brightness(.42) drop-shadow(0 6px 10px rgba(0,0,0,.45));opacity:.9}
#view-home .ps1-stern-voll{position:absolute;inset:0;--fill:0%;clip-path:inset(calc(100% - var(--fill)) 0 0 0);
  -webkit-mask:url(assets/home/klein/icons/total-xp.webp) center/contain no-repeat;mask:url(assets/home/klein/icons/total-xp.webp) center/contain no-repeat}
#view-home .ps1-stern-voll img{filter:saturate(1.15) brightness(1.08)}
#view-home .ps1-kante{position:absolute;left:0;right:0;bottom:calc(var(--fill) - 3.5%);height:3.5%;
  background:linear-gradient(90deg,rgba(255,255,255,.25),rgba(210,245,255,.95),rgba(255,255,255,.25));box-shadow:0 0 8px rgba(160,230,255,.9);
  animation:ps1-kante 1.8s ease-in-out infinite}
@keyframes ps1-kante{50%{opacity:.55}}
#view-home .ps1-prozent{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);font-size:calc(var(--s) * .23);font-weight:900;color:#fff;
  letter-spacing:.01em;text-shadow:0 2px 0 #0d2a4a,0 0 3px #0d2a4a,0 0 10px rgba(0,0,0,.5);font-variant-numeric:tabular-nums;white-space:nowrap}
#view-home .ps1-stern.voll .ps1-stern-leer{opacity:0}
#view-home .ps1-kreis{position:absolute;left:75%;top:30cqh;width:var(--s);height:var(--s);transform:translate(-50%,-50%)}
#view-home .ps1-ring{position:absolute;inset:0}
#view-home .ps1-ring span{position:absolute;inset:0;transform:rotate(calc(var(--n) * 18deg))}
#view-home .ps1-ring i{position:absolute;left:50%;top:0;width:8.5%;height:19%;transform:translateX(-50%);border-radius:3px;
  background:rgba(148,163,184,.16);transition:background .25s ease}
#view-home .ps1-ring span.w i{background:linear-gradient(180deg,var(--win1),var(--win2));box-shadow:0 0 7px rgba(67,220,153,.35)}
#view-home .ps1-ring span.l i{background:linear-gradient(180deg,var(--loss2),var(--loss1));box-shadow:0 0 7px rgba(237,79,98,.3)}
#view-home .ps1-ring span.d i{background:var(--draw)}
#view-home .ps1-mitte{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:1px}
#view-home .ps1-quote{font-size:calc(var(--s) * .21);font-weight:900;color:#fff;font-variant-numeric:tabular-nums;line-height:1;text-shadow:0 2px 6px rgba(0,0,0,.5)}
#view-home .ps1-mitte small{display:flex;gap:.35em;font-size:calc(var(--s) * .1);font-weight:800;line-height:1}
#view-home .ps1-mitte em{font-style:normal;font-variant-numeric:tabular-nums}
#view-home .ps1-mitte em.w{color:#6cf0b3}
#view-home .ps1-mitte em.l{color:#ff7a84}
#view-home .ps1-verlauf{position:absolute;left:4cqw;right:4cqw;top:62cqh;bottom:3cqh}
#view-home .ps1-graph{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#view-home .ps1-linie{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
#view-home .ps1-spitze{position:absolute;left:0;top:0;width:0;height:0;opacity:0}
#view-home .ps1-spitze img{position:absolute;left:0;top:0;width:calc(var(--s) * .36);height:auto;padding:0;max-width:none;transform:translate(-50%,-50%);
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.55))}
#view-home .ps1-spitze b{position:absolute;left:0;bottom:calc(var(--s) * .2);font-size:calc(var(--s) * .16);font-weight:900;color:#ffd45e;
  white-space:nowrap;font-variant-numeric:tabular-nums;text-shadow:0 2px 0 rgba(40,24,0,.7),0 0 8px rgba(0,0,0,.5)}
#view-home .ps1-verlauf.medaille .ps1-spitze b{color:#e9d9ff;text-shadow:0 2px 0 rgba(30,16,60,.8),0 0 8px rgba(0,0,0,.5)}
#view-home .ps1-max{position:absolute;left:5cqw;right:5cqw;top:60cqh;bottom:2cqh;display:grid;grid-template-columns:1fr auto;align-items:center;gap:3cqw}
#view-home .ps1-max-karten{position:relative;height:100%}
#view-home .ps1-max-karte{position:absolute;top:50%;height:34cqh;margin-top:-17cqh;left:calc(var(--k) * 26%);transform:rotate(calc((var(--k) - 1) * 7deg));transform-origin:50% 110%}
#view-home .ps1-max-karte img{display:block;height:34cqh;width:auto;max-width:none;padding:0;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5))}
#view-home .ps1-max-karte .ps1-badge{position:absolute;left:50%;bottom:4%;height:auto;width:78%;opacity:0;transform:translateX(-50%)}
#view-home .ps1-max-zahl{display:flex;align-items:center;gap:4px}
#view-home .ps1-max-zahl img{width:calc(var(--s) * .28);height:auto;padding:0}
#view-home .ps1-max-zahl b{font-size:calc(var(--s) * .17);font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
#view-home .ps1-max-zahl small{font-size:calc(var(--s) * .1);color:rgba(226,232,240,.6);font-weight:800;align-self:flex-end;margin-bottom:.35em}
#view-home .ps1-fav{position:absolute;left:6cqw;right:6cqw;top:60cqh;bottom:2cqh;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4cqw}
#view-home .ps1-fav-karte{height:34cqh}
#view-home .ps1-fav-karte img{display:block;height:34cqh;width:auto;max-width:none;padding:0;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
#view-home .ps1-fav-wert{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:7px}
#view-home .ps1-fav-wert img{width:calc(var(--s) * .2);height:auto;padding:0}
#view-home .ps1-fav-spur{height:8px;border-radius:6px;background:rgba(148,163,184,.14);overflow:hidden}
#view-home .ps1-fav-spur i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#6388ff,#75d6ff);box-shadow:0 0 10px rgba(117,214,255,.4)}
#view-home .ps1-fav-wert b{font-size:calc(var(--s) * .14);font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
#view-home .mt1-art{background:#0d1328}
#view-home .mt1-visual{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#view-home .mt1-art .home-poster-copy{z-index:2}
#view-home .mt1-svg{position:absolute;left:0;top:0;display:block;overflow:hidden;transition:filter .7s ease}
#view-home .mt1-art.ist-logo .mt1-svg{filter:brightness(.55) saturate(.85) blur(1.5px)}
#view-home .mt1-kante{fill:none;stroke:rgba(255,255,255,.9);stroke-width:1.5px;vector-effect:non-scaling-stroke}
#view-home .mt1-trait-flaeche{fill:color-mix(in srgb,#3b6ef5 16%,transparent)}
#view-home .mt1-equip-flaeche{fill:color-mix(in srgb,#16203a 72%,transparent)}
#view-home .mt1-icon{filter:drop-shadow(0 2px 2px color-mix(in srgb,#16203a 68%,transparent))}
#view-home .mt1-leer{fill:color-mix(in srgb,#16203a 78%,transparent)}
#view-home .mt1-schatten{filter:drop-shadow(0 10px 8px rgba(0,0,0,.45))}
#view-home .mt1-glanz{fill:rgba(255,246,214,.28);stroke:#ffe7a0;stroke-width:26;stroke-linejoin:round;filter:url(#mt1-weich)}
#view-home .mt1-ring{fill:none;stroke:#fff;stroke-width:2px;vector-effect:non-scaling-stroke}
#view-home .mt1-hand{opacity:0}
#view-home .mt1-hand image{filter:drop-shadow(0 9px 6px rgba(0,0,0,.42));transition:filter .12s ease}
#view-home .mt1-hand.gedrueckt image{filter:drop-shadow(0 3px 2px rgba(0,0,0,.5))}
#view-home .mt1-logo{position:absolute;left:50%;top:40%;width:78%;transform:translate(-50%,-50%);opacity:0}
#view-home .mt1-logo img{display:block;width:100%;height:auto;padding:0;filter:drop-shadow(0 8px 14px rgba(0,0,0,.55))}
#view-home .mt1-logo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%) no-repeat;background-size:250% 100%;background-position:130% 0;
  -webkit-mask:url(assets/home/klein/merge-tactics/branding/merge-tactics-logo-cropped.webp) center/100% 100% no-repeat;mask:url(assets/home/klein/merge-tactics/branding/merge-tactics-logo-cropped.webp) center/100% 100% no-repeat;mix-blend-mode:screen}
#view-home .mt1-logo.glanz::after{animation:mt1-glanz 1.1s ease-in-out}
@keyframes mt1-glanz{from{background-position:130% 0}to{background-position:-30% 0}}
#view-home .mg1-art{background:radial-gradient(120% 90% at 50% 20%,#23305c 0%,#141a30 55%,#0d1226 100%)}
#view-home .mg1-visual{position:absolute;left:0;right:0;top:0;bottom:80px;overflow:hidden;pointer-events:none;container-type:size}
#view-home .mg1-art .home-poster-copy{background:none;z-index:2}
#view-home .mg1-art b,#view-home .mg1-art strong{font-family:"Clash Display",system-ui,sans-serif}
#view-home .mg1-intro{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:0;opacity:0}
#view-home .mg1-intro b{display:block;font-size:min(21cqh,19cqw);line-height:.92;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  color:#ffd23f;background:linear-gradient(180deg,#fff3a6 0%,#ffd23f 45%,#ff9a1f 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:calc(min(21cqh,19cqw) * .05) #5a2a07;paint-order:stroke fill;filter:drop-shadow(0 4px 0 #3b1a04) drop-shadow(0 8px 12px rgba(0,0,0,.5))}
#view-home .mg1-draft{position:absolute;inset:0;display:grid;grid-template-rows:17cqh 1fr;gap:2cqh;padding:2cqh 0 1cqh}
#view-home .mg1-kopf{display:flex;align-items:center;justify-content:center;gap:5cqw}
#view-home .mg1-choose{font-size:12cqh;line-height:1;font-weight:700;text-transform:uppercase;color:#ff9b21;letter-spacing:.03em;opacity:0;
  -webkit-text-stroke:calc(12cqh * .07) #4a1d00;paint-order:stroke fill;text-shadow:0 3px 0 #3a1600,0 6px 10px rgba(0,0,0,.45)}
#view-home .mg1-marke{width:13cqh;height:13cqh;background:center/contain no-repeat;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));opacity:0}
#view-home .mg1-haken{background-image:url(assets/icons/status/active.png)}
#view-home .mg1-kreuz{background-image:url(assets/icons/status/inactive.png)}
#view-home .mg1-raster{display:grid;grid-template-columns:repeat(3,auto);grid-template-rows:repeat(2,1fr);justify-content:center;align-content:center;gap:2cqh 3cqw;min-height:0}
#view-home .mg1-karte{position:relative;height:calc((100cqh - 17cqh - 7cqh) / 2);opacity:0}
#view-home .mg1-karte img{display:block;height:100%;width:auto;max-width:none;padding:0;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));transition:filter .25s ease}
#view-home .mg1-karte.is-pick img{filter:drop-shadow(0 0 2px #eaffef) drop-shadow(0 0 9px #46e08a) drop-shadow(0 3px 5px rgba(0,0,0,.5))}
#view-home .mg1-karte.is-block img{filter:drop-shadow(0 0 2px #ffe3e8) drop-shadow(0 0 9px #ff5f7a) drop-shadow(0 3px 5px rgba(0,0,0,.5))}
#view-home .mg1-karte.ist-weg img{filter:grayscale(.85) brightness(.5)}
#view-home .mg1-badge{position:absolute;inset:0;background:center/60% auto no-repeat;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));opacity:0}
#view-home .mg1-karte.is-pick .mg1-badge{background-image:url(assets/icons/status/active.png)}
#view-home .mg1-karte.is-block .mg1-badge{background-image:url(assets/icons/status/inactive.png)}
#view-home .mg1-zug{position:absolute;inset:0}
#view-home .mg1-zug span{position:absolute;left:0;top:0;width:13cqh;height:13cqh;margin:-6.5cqh 0 0 -6.5cqh;background:center/contain no-repeat;filter:drop-shadow(0 8px 6px rgba(0,0,0,.5))}
#view-home .mg1-decks{position:absolute;inset:0;overflow:hidden;opacity:0}
#view-home .mg1-spur{display:flex;height:100%}
#view-home .mg1-deck{position:relative;flex:0 0 100%;box-sizing:border-box;display:grid;grid-template-rows:auto 1fr;gap:2cqh;margin:0;padding:3cqh 4cqw}
#view-home .mg1-deck>*{position:relative}
#view-home .mg1-deck::before{content:"";position:absolute;inset:2cqh 3cqw;border:1px solid rgba(99,125,215,.42);border-radius:8px;
  background:linear-gradient(145deg,rgba(31,48,91,.94),rgba(18,21,31,.97) 52%,rgba(39,22,48,.94));box-shadow:0 8px 24px rgba(3,6,14,.24),inset 0 0 22px rgba(83,110,215,.06)}
#view-home .mg1-deck::after{content:"";position:absolute;top:2cqh;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(135,160,255,.9),transparent);box-shadow:0 0 8px rgba(89,122,255,.5)}
#view-home .mg1-deck header{display:flex;align-items:center;justify-content:space-between;padding:1cqh 2cqw 0}
#view-home .mg1-deck strong{color:#f3f6ff;font-size:min(8cqh,6.5cqw);font-weight:700;white-space:nowrap}
#view-home .mg1-punkte{display:flex;gap:4px}
#view-home .mg1-punkte i{width:12px;height:4px;border-radius:3px;background:rgba(148,163,184,.3)}
#view-home .mg1-punkte i.an{width:18px;background:linear-gradient(90deg,#f0c04a,#fff2ba)}
#view-home .mg1-deck-karten{display:grid;grid-template-columns:repeat(4,auto);justify-content:center;align-content:center;gap:1.5cqh 2cqw;min-height:0}
#view-home .mg1-deck-karten div{position:relative;height:min(calc((100cqh - 22cqh) / 2),calc(19cqw * 420 / 285))}
#view-home .mg1-deck-karten img{display:block;height:100%;width:auto;max-width:none;padding:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
#view-home .mg1-hand{position:absolute;left:0;top:0;width:min(27cqw,38cqh);transform-origin:0 0;opacity:0;z-index:3}
#view-home .mg1-hand img{display:block;width:100%;height:auto;padding:0;filter:drop-shadow(0 9px 6px rgba(0,0,0,.42));transition:filter .12s ease}
#view-home .mg1-hand.gedrueckt img{filter:drop-shadow(0 3px 2px rgba(0,0,0,.5))}
#view-home .mg1-ring{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border:2px solid #fff;border-radius:50%;pointer-events:none}
#view-home .lt1-art{background:radial-gradient(120% 90% at 50% 25%,#22305a 0%,#131a31 55%,#0c1125 100%)}
#view-home .lt1-visual{position:absolute;left:0;right:0;top:0;bottom:80px;overflow:hidden;pointer-events:none}
#view-home .lt1-art .home-poster-copy{background:none;z-index:2}
#view-home .lt1-welt{position:absolute;left:0;top:0;width:400px;height:300px;transform-origin:0 0}
#view-home .lt1-art b,#view-home .lt1-art em{font-family:"Clash Display",system-ui,sans-serif;font-style:normal}
#view-home .lt1-monitor{position:absolute;left:36px;top:20px;width:328px;height:192px;border-radius:10px;background:linear-gradient(160deg,#2a3350,#0e1220 60%);
  box-shadow:0 14px 30px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.12);padding:6px}
#view-home .lt1-bildschirm{position:relative;width:100%;height:100%;border-radius:5px;overflow:hidden;background:#0b0e15}
#view-home .lt1-bildschirm>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;padding:0;max-width:none;filter:saturate(1.05) brightness(.82)}
#view-home .lt1-live{position:absolute;left:8px;top:7px;padding:2px 5px;border-radius:3px;background:#e5364f;color:#fff;font:800 7px/1 system-ui,sans-serif;letter-spacing:.08em;box-shadow:0 2px 6px rgba(0,0,0,.4)}
#view-home .lt1-live::before{content:"";display:inline-block;width:4px;height:4px;margin-right:3px;border-radius:50%;background:#fff;vertical-align:1px;animation:lt1-puls 1.4s ease-in-out infinite}
@keyframes lt1-puls{50%{opacity:.25}}
#view-home .lt1-fuss{position:absolute;left:186px;top:212px;width:28px;height:44px;background:linear-gradient(90deg,#1b2238,#2c3553 50%,#161c2e)}
#view-home .lt1-sockel{position:absolute;left:140px;top:254px;width:120px;height:10px;border-radius:5px 5px 3px 3px;background:linear-gradient(180deg,#323c5d,#141a2b);box-shadow:0 8px 16px rgba(0,0,0,.45)}
#view-home .lt1-box{position:absolute;left:8px;bottom:8px;width:104px;height:44px;border:1.2px solid rgba(116,139,224,.6);border-radius:7px;overflow:hidden;
  background:linear-gradient(145deg,#1b2645,#11151f 55%,#241a31);box-shadow:0 6px 12px rgba(0,0,0,.55);transform-origin:0 100%}
#view-home .lt1-box::before{content:"";position:absolute;top:0;left:18%;right:18%;height:.8px;background:linear-gradient(90deg,transparent,#587cff,#bd71f0,transparent)}
#view-home .lt1-einzeln,#view-home .lt1-multi{position:absolute;inset:0;padding:4px 5px}
#view-home .lt1-oben{display:flex;align-items:center;gap:3px;height:15px}
#view-home .lt1-wert{position:relative;display:flex;align-items:center;gap:2px;height:15px;padding:0 4px 0 2px;border-radius:3px;background:rgba(255,255,255,.04);border:.6px solid rgba(255,255,255,.08)}
#view-home .lt1-wert img{width:11px;height:11px;object-fit:contain;padding:0}
#view-home .lt1-wert b{font-size:9.5px;line-height:1;color:#fff;text-shadow:-.8px .8px 0 #070a11;font-variant-numeric:tabular-nums}
#view-home .lt1-box[data-art="challenge"] .lt1-wert b{color:#ffcf4d}
#view-home .lt1-delta{position:absolute;left:100%;top:-1px;margin-left:2px;font-size:6px;opacity:0;white-space:nowrap}
#view-home .lt1-delta.plus{color:#58dda0}
#view-home .lt1-delta.minus{color:#ff7180}
#view-home .lt1-leben{display:none;gap:1.5px}
#view-home .lt1-box[data-art="challenge"] .lt1-leben{display:flex;margin-left:8px}
#view-home .lt1-leben i{width:6.5px;height:6.5px;border-radius:1.6px;background:#1c2233;border:.6px solid rgba(255,255,255,.14)}
#view-home .lt1-leben i.weg{background:url(assets/icons/status/inactive.png) center/80% no-repeat,#2a1620;border-color:rgba(255,95,122,.6)}
#view-home .lt1-quote{margin-left:auto;display:grid;justify-items:end;line-height:1}
#view-home .lt1-quote span{font:800 2.8px/1 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#8d97ad}
#view-home .lt1-quote b{margin-top:1px;font-size:6.6px;background:linear-gradient(100deg,#9b6b17 6%,#e1ad37 28%,#fff2ba 44%,#f3cf63 60%,#9b6b17 88%);-webkit-background-clip:text;background-clip:text;color:transparent}
#view-home .lt1-form{position:relative;display:flex;align-items:center;margin-top:3px;height:17px;padding:0 3px;border-radius:3px;background:rgba(5,7,13,.55);border:.6px solid rgba(255,255,255,.06)}
#view-home .lt1-balken{position:relative;flex:1;height:100%;display:flex;align-items:stretch;justify-content:center;gap:1.1px}
#view-home .lt1-balken::before{content:"";position:absolute;left:0;right:0;top:50%;height:.4px;background:rgba(231,219,176,.2)}
#view-home .lt1-balken i{position:relative;width:3px}
#view-home .lt1-balken i::after{content:"";position:absolute;left:0;right:0}
#view-home .lt1-balken i.w::after{bottom:50%;height:5.5px;border-radius:.8px .8px 0 0;background:linear-gradient(180deg,#6cf0b3,#269a6a);box-shadow:0 0 3px rgba(67,220,153,.35)}
#view-home .lt1-balken i.l::after{top:50%;height:5px;border-radius:0 0 .8px .8px;background:linear-gradient(180deg,#e45465,#ff7a84);box-shadow:0 0 3px rgba(237,79,98,.3)}
#view-home .lt1-bilanz{font-size:5.4px;color:#fff;white-space:nowrap;text-shadow:-.6px .6px 0 #070a11}
#view-home .lt1-multi{display:none;padding:4px 5px}
#view-home .lt1-box[data-art="multi"] .lt1-multi{display:block}
#view-home .lt1-box[data-art="multi"] .lt1-einzeln{display:none}
#view-home .lt1-multi header{display:grid;grid-template-columns:9px 1fr auto;gap:3px;font:800 2.8px/1 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#8d97ad;padding:0 2px 2px}
#view-home .lt1-zeilen{position:relative}
#view-home .lt1-zeile{position:absolute;left:0;right:0;height:16px;display:grid;grid-template-columns:9px 1fr 20px 18px;align-items:center;gap:3px;padding:0 2px;border-radius:3px;
  border:.6px solid rgba(116,139,224,.25);background:rgba(5,7,13,.45);transition:top .5s cubic-bezier(.22,1,.36,1)}
#view-home .lt1-zeile .rang{display:grid;place-items:center;height:9px;border-radius:2px;background:rgba(255,255,255,.05);font-size:5px;color:#c8cfdd}
#view-home .lt1-zeile .wer{display:grid;gap:1.4px;min-width:0}
#view-home .lt1-zeile .wer b{font-size:4.6px;line-height:1;color:#fff;white-space:nowrap}
#view-home .lt1-zeile .wer span{display:flex;align-items:center;gap:1.2px;font:700 4px/1 "Clash Display",sans-serif;color:#dfe5f2}
#view-home .lt1-zeile .wer img{width:5px;height:5px;padding:0}
#view-home .lt1-zeile .mini{display:flex;gap:.8px;height:9px;align-items:stretch}
#view-home .lt1-zeile .mini i{position:relative;width:2px}
#view-home .lt1-zeile .mini i.w::after{content:"";position:absolute;left:0;right:0;bottom:50%;height:3.4px;border-radius:.5px .5px 0 0;background:#4fd898}
#view-home .lt1-zeile .mini i.l::after{content:"";position:absolute;left:0;right:0;top:50%;height:3px;border-radius:0 0 .5px .5px;background:#f06474}
#view-home .lt1-zeile .quote{font-size:5px;text-align:right;color:#f3cf63}
#view-home .lt1-logos{position:absolute;left:36px;top:20px;width:328px;height:192px;display:flex;align-items:center;justify-content:center;gap:22px}
#view-home .lt1-logo{width:62px;height:62px;border-radius:16px;display:grid;place-items:center;opacity:0;box-shadow:0 10px 22px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.18)}
#view-home .lt1-logo svg{width:58%;height:58%}
#view-home .lt1-twitch{background:#9146ff}
#view-home .lt1-twitch path{fill:#fff}
#view-home .lt1-kick{background:#0b0e0f;border:1.5px solid #53fc18}
#view-home .lt1-kick path{fill:#53fc18}
#view-home .lt1-tiktok{background:#0b0b0f}
#view-home .lt1-tiktok svg{overflow:visible;filter:drop-shadow(-1.5px -1px 0 #25f4ee) drop-shadow(1.5px 1px 0 #fe2c55)}
#view-home .lt1-tiktok path{fill:#fff}
#view-home .lt1-bildschirm.dunkel>img{filter:brightness(.4) blur(1.5px);transition:filter .5s ease}
#view-home .lt1-bildschirm>img{transition:filter .5s ease}
#view-home .lt1-hand{position:absolute;left:0;top:0;width:34px;transform-origin:0 0;opacity:0}
#view-home .lt1-hand img{display:block;width:100%;height:auto;padding:0;filter:drop-shadow(0 4px 3px rgba(0,0,0,.45))}
#view-home .lt1-hand.gedrueckt img{filter:drop-shadow(0 1.5px 1px rgba(0,0,0,.5))}
#view-home .lt1-ring{position:absolute;width:4px;height:4px;margin:-2px 0 0 -2px;border:.8px solid #fff;border-radius:50%}
#view-home .home-builder.db2 .home-feature-main{position:relative;height:268px;min-height:268px;overflow:hidden}
#view-home .home-builder.db2 .home-feature-main>img:not(.db2-grund){display:none}
#view-home .db2-buehne{position:absolute;inset:0;z-index:0;pointer-events:none;container:db2/size;overflow:hidden}
#view-home .db2-grund{position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);object-fit:cover;padding:0;max-width:none;z-index:-1;filter:blur(2.5px) saturate(1.1) brightness(.72)}
#view-home .db2-buehne::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(90% 120% at 50% 45%,transparent 30%,rgba(8,12,28,.55) 100%),linear-gradient(180deg,rgba(8,12,28,.35),transparent 30%,transparent 70%,rgba(8,12,28,.45))}
#view-home .db2-buehne>*:not(.db2-grund){z-index:1}
#view-home .db2-buehne b,#view-home .db2-buehne em{font-family:"Clash Display",system-ui,sans-serif;font-style:normal}
#view-home .db2-titel{position:absolute;left:50%;top:5cqh;translate:-50% 0;color:#fff;font-size:10cqh;font-weight:700;line-height:1;white-space:nowrap;opacity:0;
  text-shadow:0 2px 0 #0a0f22,0 0 14px rgba(0,0,0,.6)}
#view-home .db2-szene{position:absolute;opacity:0}
#view-home .db2-modi{left:4cqw;right:4cqw;top:30cqh;height:40cqh;display:grid;grid-template-columns:repeat(6,1fr);gap:2.4cqw}
#view-home .db2-modus{display:grid;place-items:center;border:1px solid rgba(99,125,215,.38);border-radius:10px;background:rgba(8,10,20,.55);
  box-shadow:0 8px 18px rgba(0,0,0,.35);transition:border-color .25s,background .25s,box-shadow .25s,opacity .3s,filter .3s}
#view-home .db2-modus img{height:26cqh;width:auto;max-width:90%;object-fit:contain;padding:0;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5))}
#view-home .db2-modus img.db2-ultimate{height:36cqh;max-width:none;margin:-5cqh 0}
#view-home .db2-modus.an{border-color:#587cff;background:linear-gradient(145deg,rgba(49,91,212,.55),rgba(189,113,240,.3));box-shadow:inset 0 0 0 1px rgba(88,124,255,.25),0 0 22px rgba(88,124,255,.55)}
#view-home .db2-modus.aus{opacity:.35;filter:grayscale(.6)}
#view-home .db2-slots{position:absolute;left:0;right:0;top:19cqh;height:38cqh;display:flex;justify-content:center;gap:3cqw;opacity:0}
#view-home .db2-slot{position:relative;height:100%;aspect-ratio:285/420;border:1.5px dashed rgba(255,255,255,.55);border-radius:8px;background:rgba(8,12,28,.35)}
#view-home .db2-slot img{position:absolute;inset:0;width:100%;height:100%;padding:0;object-fit:contain;opacity:0;filter:drop-shadow(0 4px 7px rgba(0,0,0,.55))}
#view-home .db2-slot.voll{border-color:transparent;background:none}
#view-home .db2-slot.voll img{opacity:1}
#view-home .db2-band{left:0;right:0;top:62cqh;height:33cqh;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
#view-home .db2-bandspur{position:absolute;left:0;top:0;height:100%;display:flex;gap:1.6cqw}
#view-home .db2-bandspur div{position:relative;height:100%;flex:none}
#view-home .db2-bandspur img{display:block;height:100%;width:auto;padding:0;max-width:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));transition:filter .25s}
#view-home .db2-bandspur div.gewaehlt img{filter:brightness(.5) saturate(.6)}
#view-home .db2-haken{position:absolute;inset:0;background:url(assets/icons/status/active.png) center/58% no-repeat;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));opacity:0}
#view-home .db2-flug{position:absolute;left:0;top:0;transform-origin:0 0;padding:0;filter:drop-shadow(0 8px 10px rgba(0,0,0,.55));z-index:5}
#view-home .db2-level{left:0;right:0;top:64cqh;height:26cqh;display:flex;justify-content:center;align-items:center;gap:2.6cqw}
#view-home .db2-knopf{display:flex;align-items:center;gap:1.4cqw;height:100%;padding:0 2.2cqw 0 1.4cqw;border:1px solid rgba(99,125,215,.38);border-radius:10px;background:rgba(8,10,20,.62);
  box-shadow:0 8px 18px rgba(0,0,0,.35);transition:border-color .25s,background .25s,box-shadow .25s}
#view-home .db2-knopf>img{height:62%;width:auto;padding:0}
#view-home .db2-knopf b{color:#fff;font-size:8cqh;font-weight:700;white-space:nowrap}
#view-home .db2-knopf.an{border-color:#587cff;background:linear-gradient(145deg,rgba(49,91,212,.55),rgba(189,113,240,.3));box-shadow:inset 0 0 0 1px rgba(88,124,255,.25),0 0 22px rgba(88,124,255,.55)}
#view-home .db2-mini{position:relative;height:84%;display:block}
#view-home .db2-mini img:first-child{height:100%;width:auto;padding:0;display:block}
#view-home .db2-pfeil{position:absolute;right:-28%;bottom:-6%;height:52%;width:auto;padding:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
#view-home .db2-bauen{position:relative;display:flex;align-items:center;height:62%;padding:0 3.2cqw;border-radius:999px;background:rgba(255,255,255,.95);color:#16203a;
  font:850 6.4cqh/1 system-ui,sans-serif;box-shadow:0 6px 18px rgba(3,6,14,.35);overflow:hidden;opacity:0}
#view-home .db2-bauen::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(120,148,244,.6) 50%,transparent 70%);transform:translateX(-120%)}
#view-home .db2-bauen.laeuft::after{animation:db2-glanz .7s ease-in-out}
@keyframes db2-glanz{to{transform:translateX(120%)}}
@container db2 (max-width:480px){#view-home .db2-level{gap:1.6cqw}#view-home .db2-knopf{padding:0 1.8cqw 0 1.2cqw;gap:1cqw}#view-home .db2-knopf b{font-size:6.4cqh}#view-home .db2-knopf>img{height:50%}#view-home .db2-bauen{font-size:5.4cqh;padding:0 2.4cqw;white-space:nowrap;height:52%}}
#view-home .db2-decks{inset:17cqh 0 3cqh 0}
#view-home .db2-deck{position:absolute;left:50%;top:0;display:grid;grid-template-rows:auto auto;gap:2.2cqh;translate:-50% 0;transform-origin:50% 50%;padding:2.4cqh 2.2cqw 2.8cqh;border-radius:14px;
  background:linear-gradient(145deg,rgba(26,36,70,.78),rgba(10,13,26,.82));border:1px solid rgba(116,139,224,.42);box-shadow:0 12px 26px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.06)}
#view-home .db2-deck header{display:flex;align-items:center;justify-content:space-between;gap:2cqw;padding:0 .6cqw}
#view-home .db2-deckname{color:#ffd96a;font-size:7.4cqh;font-weight:700;white-space:nowrap;text-shadow:0 2px 0 #0a0f22}
#view-home .db2-elixir{display:flex;align-items:center;gap:.5cqw}
#view-home .db2-elixir img{height:7cqh;width:auto;padding:0}
#view-home .db2-elixir em{color:#f0c8ff;font-size:7cqh;text-shadow:0 2px 0 #0a0f22}
#view-home .db2-deckkarten{display:grid;grid-template-columns:repeat(4,auto);gap:2cqh 1.2cqw;align-content:start;justify-content:center}
#view-home .db2-deckkarten div{height:28cqh}
#view-home .db2-deckkarten img{display:block;height:100%;width:auto;padding:0;max-width:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.55))}
#view-home .db2-scan{position:absolute;top:10cqh;bottom:0;left:0;width:20%;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(120,170,255,.35),rgba(255,255,255,.6),rgba(120,170,255,.35),transparent);filter:blur(2px);mix-blend-mode:screen}
#view-home .db2-zug{position:absolute;inset:0;z-index:4}
#view-home .db2-hand{position:absolute;left:0;top:0;width:min(11cqw,30cqh);transform-origin:0 0;opacity:0;z-index:6}
#view-home .db2-hand img{display:block;width:100%;height:auto;padding:0;transform:scaleX(-1);filter:drop-shadow(0 9px 6px rgba(0,0,0,.45))}
#view-home .db2-hand.unten img{transform:rotate(-100deg);filter:drop-shadow(-6px 4px 6px rgba(0,0,0,.4))}
#view-home .db2-hand.gedrueckt img{filter:drop-shadow(0 3px 2px rgba(0,0,0,.5))}
#view-home .db2-ring{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border:2px solid #fff;border-radius:50%}
#view-home .db2-leiste{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:18px;padding:10px 14px 10px 20px;border-top:1px solid var(--panel-inset-border)}
#view-home .db2-copy h2{margin:0;font-family:"Clash Display",system-ui,sans-serif;font-size:24px;line-height:1.05;color:#fff}
#view-home .db2-copy p{margin:4px 0 0;font-size:12px;color:var(--panel-muted,#9aa6c2)}
#view-home .home-modes.db2-nav{border-top:0;padding:0;gap:2px 6px;justify-self:end;width:min(100%,470px)}
#view-home .home-modes.db2-nav a{min-height:36px;padding:4px 6px}
#view-home .home-modes.db2-nav img{width:26px;height:26px}
#view-home .home-modes.db2-nav img.db2-ultimate{transform:scale(1.4)}
@media(max-width:540px){#view-home .home-builder.db2 .home-feature-main{height:190px;min-height:190px}#view-home .db2-leiste{gap:10px;padding:8px 10px 8px 14px}#view-home .db2-copy h2{font-size:18px}#view-home .db2-copy p{font-size:10.5px;max-width:130px}#view-home .home-modes.db2-nav{width:auto;grid-template-columns:repeat(3,36px);gap:2px 4px}#view-home .home-modes.db2-nav a{justify-content:center;padding:4px;min-height:34px}#view-home .home-modes.db2-nav span{display:none}}
#view-home{display:block;align-items:initial;width:100%;max-width:1192px;margin:0 auto;padding:22px 24px 60px;font-size:14px;line-height:normal;text-align:left}
#view-home[hidden]{display:none}
#view-home a:hover{text-decoration:none}
#view-home .home-intro h1{color:var(--panel-text);font-family:inherit}
#view-home .home-help-trigger:hover,#view-home .home-help-close:hover{background:none}
#view-home .home-help-trigger img{transition:transform .16s ease}
#view-home .home-help-trigger:hover img{transform:scale(1.08)}
#view-home .home-lookup{flex-wrap:wrap}
#view-home .home-search{flex:1;min-width:0}
#view-home #home-status,#view-home #home-result{flex-basis:100%}
#view-home #home-status:empty{display:none}
#view-home .home-social-links{display:flex;justify-content:center;margin:38px auto}
#view-home .seo-guide{max-width:none;margin:0}
#tag-help{margin:auto;position:fixed;inset:0;height:fit-content}
#tag-help ol li{min-width:0}
@media(max-width:540px){#view-home{padding:10px 14px 32px}}
#view-home .hch-reihe{
  --hch-kontur:#0b0d14;--hch-cyan:#37e8ff;--hch-gruen:#5dff6b;--hch-gelb:#ffe14d;--hch-pink:#ff4fd8;--hch-rot:#ff4d5e;
  --hch-tile:#1c2433;--hch-tile-rand:#0d121c;--hch-tile-hell:#123a6e;--hch-tile-dunkel:#0d2a52;
  --hch-balken:#39c9f2;--hch-balken-hell:#7fe6ff;--hch-balken-dunkel:#1f9fd0;--hch-balken-grund:#0e1a2c;
  --hch-wins:#8ff3ff;--hch-wins-kontur:#05202c;--hch-zahl:#fff8e2;--hch-titel:#ffe46b;--hch-titel-kontur:#3b2a05;
  --hch-weiss:#fff;--hch-blase-grund:#eef3fa;--hch-gold:var(--gold);--hch-gold-dunkel:#d58a20;--hch-klar:transparent;
  --hch-vignette:rgba(4,18,48,.6);--hch-schatten:rgba(0,0,0,.35);--hch-tief:rgba(0,0,0,.5);--hch-innen:rgba(0,0,0,.18);
  --hch-kante:rgba(255,255,255,.08);--hch-goldschein:rgba(255,214,90,.9);--hch-puff:rgba(255,236,150,.9);
  --hch-strahl:rgba(255,230,140,.32);--hch-goldhauch:rgba(255,214,90,.12);--hch-abdunkeln:rgba(3,8,20,.7);
  --hch-slot:44px;margin-bottom:18px}
#view-home .hch-main{height:365px;min-height:0;display:flex;flex-direction:column}
#view-home .hch-buehne{position:relative;flex:1;min-height:0;overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse at center,var(--hch-klar) 40%,var(--hch-vignette)),url("assets/home/challenge/diamond-tile.webp") center/64px 64px repeat}
#view-home .hch-anzeige{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:12px;padding:10px 24px}
#view-home .hch-oben{display:flex;align-items:center;justify-content:center;width:100%}
#view-home .hch-wins{display:grid;justify-items:center;gap:4px}
#view-home .hch-wort{font-size:20px;line-height:1;--cr-fill:var(--hch-wins);--cr-outline-color:var(--hch-wins-kontur)}
#view-home .hch-schild{position:relative;width:92px;height:109px;display:grid;place-items:center}
#view-home .hch-wappen{position:relative;z-index:2;width:92px;height:109px;object-fit:contain;filter:drop-shadow(0 4px 0 var(--hch-schatten))}
#view-home .hch-lorbeer{position:absolute;z-index:1;width:70px;height:100px;right:-42px;top:6px}
#view-home .hch-lorbeer.hch-links{right:auto;left:-42px;transform:scaleX(-1)}
#view-home .hch-zahl{position:absolute;z-index:3;inset:0;display:grid;place-items:center;padding-bottom:8px;font-size:48px;line-height:1;
  --cr-outline:.07em;--cr-shadow-y:.08em;--cr-fill:var(--hch-zahl)}
#view-home .hch-track{width:calc(100% - var(--hch-slot));max-width:552px}
#view-home .hch-spur{position:relative;height:calc(var(--hch-slot) + 8px)}
#view-home .hch-reward{position:absolute;left:var(--hch-position);top:0;margin-left:calc(var(--hch-slot) / -2);width:var(--hch-slot);height:var(--hch-slot);
  display:grid;place-items:center;padding:4px;border:2px solid var(--hch-tile-rand);border-radius:9px;
  background:linear-gradient(180deg,var(--hch-tile-hell),var(--hch-tile-dunkel));box-shadow:inset 0 2px 0 var(--hch-kante),inset 0 -2px 0 var(--hch-schatten)}
#view-home .hch-reward::after{content:"";position:absolute;top:100%;left:50%;height:8px;width:2px;margin-left:-1px;background:var(--hch-tile-rand)}
#view-home .hch-reward img{width:100%;height:100%;min-height:0;object-fit:contain;filter:grayscale(1) brightness(.55);opacity:.6}
#view-home .hch-reward.an{border-color:var(--hch-gold)}
#view-home .hch-reward.an img{filter:none;opacity:1}
#view-home .hch-balken{position:relative;width:100%;height:22px;border-radius:11px;background:var(--hch-balken-grund);border:2px solid var(--hch-kontur);overflow:hidden}
#view-home .hch-fuellung{position:absolute;inset:0 auto 0 0;width:var(--hch-anteil,0%);background:linear-gradient(180deg,var(--hch-balken-hell),var(--hch-balken) 55%,var(--hch-balken-dunkel));
  box-shadow:inset 0 -3px 0 var(--hch-innen)}
#view-home .hch-stand{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;line-height:1;--cr-outline:.08em}
#view-home .hch-buehne.fertig .hch-lorbeer{filter:hue-rotate(-62deg) saturate(1.9) brightness(1.18)}
#view-home .hch-buehne.fertig .hch-wappen{filter:drop-shadow(0 0 16px var(--hch-goldschein)) drop-shadow(0 4px 0 var(--hch-schatten))}
#view-home .hch-blitz{position:absolute;z-index:4;left:50%;top:50%;width:40px;height:40px;margin:-20px;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,var(--hch-weiss) 0,var(--hch-puff) 30%,var(--hch-klar) 70%)}
#view-home .hch-funken{position:absolute;z-index:4;left:50%;top:50%;width:0;height:0;pointer-events:none}
#view-home .hch-funke{position:absolute;width:10px;height:10px;margin:-5px;opacity:0;background:var(--hch-gelb);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
#view-home .hch-dunkel{position:absolute;z-index:1;inset:0;background:var(--hch-abdunkeln);opacity:0;pointer-events:none}
#view-home .hch-blase{position:absolute;z-index:2;left:50%;top:50%;width:216px;margin:-128px 0 0 -108px;padding:12px 12px 16px;border-radius:16px;opacity:0;
  display:grid;justify-items:center;gap:2px;background:linear-gradient(180deg,var(--hch-weiss),var(--hch-blase-grund));border:3px solid var(--hch-kontur);
  box-shadow:0 14px 30px var(--hch-tief)}
#view-home .hch-blase::after{content:"";position:absolute;left:50%;bottom:-13px;width:20px;height:20px;margin-left:-10px;background:var(--hch-blase-grund);
  border-right:3px solid var(--hch-kontur);border-bottom:3px solid var(--hch-kontur);transform:rotate(45deg)}
#view-home .hch-blase-titel{font-size:17px;line-height:1.1;--cr-fill:var(--hch-titel);--cr-outline-color:var(--hch-titel-kontur)}
#view-home .hch-blase-text{font-size:15px;line-height:1.1;--cr-fill:var(--hch-weiss)}
#view-home .hch-emote-rahmen{position:relative;margin-top:46px;isolation:isolate}
#view-home .hch-emote{position:relative;width:150px;aspect-ratio:202/152;border-radius:26px;background:var(--hch-weiss);
  border:4px solid var(--hch-kontur);border-bottom-width:9px}
#view-home .hch-emote-rahmen::before{content:"";position:absolute;inset:-8px -8px -5px;z-index:-1;border-radius:32px;filter:blur(7px);
  background:linear-gradient(90deg,var(--hch-cyan),var(--hch-gruen),var(--hch-gelb),var(--hch-pink),var(--hch-rot),var(--hch-cyan),var(--hch-gruen));background-size:300% 100%}
#view-home .hch-emote img{position:absolute;left:10.4%;top:-40.8%;width:92.6%;height:140%;max-width:none;object-fit:contain;object-position:center bottom}
#view-home .hch-badge-szene{position:absolute;z-index:3;inset:0;opacity:0;pointer-events:none}
#view-home .hch-strahlen{position:absolute;left:50%;top:50%;width:420px;height:420px;margin:-210px;border-radius:50%;opacity:0;
  background:repeating-conic-gradient(var(--hch-strahl) 0 9deg,var(--hch-klar) 9deg 22deg);
  -webkit-mask-image:radial-gradient(circle,var(--hch-kontur) 18%,var(--hch-klar) 66%);mask-image:radial-gradient(circle,var(--hch-kontur) 18%,var(--hch-klar) 66%)}
#view-home .hch-badge{position:absolute;left:50%;top:50%;width:180px;height:180px;margin:-90px;object-fit:contain;opacity:0;filter:drop-shadow(0 8px 14px var(--hch-tief))}
#view-home .hch-badge-text{position:absolute;top:calc(50% + 100px);left:0;right:0;text-align:center;opacity:0;font-size:24px;line-height:1;
  --cr-fill:var(--hch-titel);--cr-outline-color:var(--hch-titel-kontur)}
#view-home .hch-copy{flex:none;padding:14px 20px 16px}
#view-home .hch-copy p{max-width:520px}
#view-home .hch-neben{min-height:0;min-width:0}
#view-home .hch-neben{--hch-gold-hell:#fff6cf;--hch-gold:var(--gold);--hch-gold-dunkel:#ba701b;--hch-gold-kante:#55300e;--hch-pass-schatten:rgba(0,0,0,.6);
  --hch-pass-glut:rgba(245,185,59,.27);--hch-faser:#fff4c8;--hch-faser-glut:rgba(255,226,140,.9)}
#view-home .hch-pass{height:365px;min-height:0;display:flex;flex-direction:column;isolation:isolate;
  background:radial-gradient(ellipse at 50% 61%,var(--hch-pass-glut),transparent 47%),linear-gradient(var(--hch-pass-schatten),var(--hch-pass-schatten)),var(--panel-bg)}
#view-home .hch-pass-art{position:relative;flex:1;min-height:0;width:100%;overflow:hidden}
#view-home .hch-pass-szene{position:absolute;width:375px;height:270px;top:0;left:50%;transform:translateX(-50%)}
#view-home .hch-pass-label{position:absolute;top:29px;left:0;right:0;text-align:center;font-size:10px;font-weight:700;letter-spacing:.2em;color:var(--panel-muted)}
#view-home .hch-pass-ticket,#view-home .hch-pass-emote{position:absolute;max-width:none;object-fit:contain;filter:drop-shadow(0 9px 5px var(--hch-pass-schatten))}
#view-home .hch-pass-ticket{width:325px;height:325px;left:-29px;top:-58px;transform:rotate(-24deg);opacity:.16;filter:saturate(.5)}
#view-home .hch-pass-emote{z-index:2;width:86px;height:98px;left:232px;top:61px;transform:rotate(10deg)}
#view-home .hch-infinity{position:absolute;z-index:3;left:45px;top:133px;width:285px;height:134px;overflow:visible;fill:none;stroke-linejoin:round;stroke-linecap:round;
  filter:drop-shadow(0 7px 3px var(--hch-pass-schatten))}
#view-home .hch-infinity-rand{stroke:var(--hch-kontur);stroke-width:24}
#view-home .hch-infinity-tiefe{stroke:var(--hch-gold-kante);stroke-width:20;transform:translateY(3px)}
#view-home .hch-infinity-gold{stroke:url(#hch-pass-gold);stroke-width:17}
#view-home .hch-infinity-kante{stroke:var(--hch-gold-hell);stroke-width:1.2;transform:translateY(-5px);opacity:.55}
#view-home .hch-gold-hell{stop-color:var(--hch-gold-hell)}
#view-home .hch-gold-titel{stop-color:var(--hch-titel)}
#view-home .hch-gold-mitte{stop-color:var(--hch-gold)}
#view-home .hch-gold-dunkel{stop-color:var(--hch-gold-dunkel)}
#view-home .hch-fasern{mix-blend-mode:screen;filter:drop-shadow(0 0 1.5px var(--hch-faser-glut))}
#view-home .hch-faser{stroke:var(--hch-faser);fill:none;stroke-linecap:butt}
#view-home .hch-stern{fill:var(--hch-gold-hell);stroke:none;transform-box:fill-box;transform-origin:center;animation:hch-funkeln 2.4s ease-in-out infinite}
#view-home .hch-stern:nth-of-type(2){animation-delay:-.8s}
#view-home .hch-stern:nth-of-type(3){animation-delay:-1.6s}
#view-home .hch-pass-copy{position:relative;z-index:4;flex:none;padding:14px 18px 21px;background:none;text-align:center}
#view-home .hch-pass-copy h2{font-size:25px;line-height:1.16;--cr-fill:var(--hch-titel);--cr-outline-color:var(--hch-gold-kante)}
#view-home .hch-pass-copy p{margin-top:8px;font-size:11px;line-height:1.45;color:var(--panel-muted)}
@keyframes hch-funkeln{0%,100%{opacity:.15;scale:.55}45%{opacity:1;scale:1}65%{opacity:.55;scale:.8}}
@media(max-width:540px){
  #view-home .hch-reihe{--hch-slot:32px;margin-bottom:12px}
  #view-home .hch-main{height:279px}
  #view-home .hch-anzeige{gap:7px;padding:8px 14px}
  #view-home .hch-wort{font-size:15px}
  #view-home .hch-schild,#view-home .hch-wappen{width:62px;height:74px}
  #view-home .hch-lorbeer{width:47px;height:67px;right:-28px;top:5px}
  #view-home .hch-lorbeer.hch-links{left:-28px}
  #view-home .hch-zahl{font-size:32px;padding-bottom:6px}
  #view-home .hch-reward{padding:3px;border-radius:7px}
  #view-home .hch-balken{height:16px}
  #view-home .hch-stand{font-size:10px}
  #view-home .hch-copy{padding:10px 14px 12px}
  #view-home .hch-blase{width:168px;margin:-98px 0 0 -84px;padding:8px 8px 12px}
  #view-home .hch-blase-titel{font-size:14px}
  #view-home .hch-blase-text{font-size:12px}
  #view-home .hch-emote-rahmen{margin-top:34px}
  #view-home .hch-emote{width:112px;border-radius:20px}
  #view-home .hch-badge{width:120px;height:120px;margin:-60px}
  #view-home .hch-badge-text{top:calc(50% + 68px);font-size:18px}
  #view-home .hch-strahlen{width:300px;height:300px;margin:-150px}
  #view-home .hch-neben{height:144px}
  #view-home .hch-pass{height:142px;min-height:0;flex-direction:row-reverse;align-items:center}
  #view-home .hch-pass-art{flex:none;width:174px;height:142px}
  #view-home .hch-pass-szene{top:50%;transform:translate(-50%,-50%) scale(.55)}
  #view-home .hch-pass-label{display:none}
  #view-home .hch-pass-ticket{opacity:.2;width:200px;height:200px;left:80px;top:25px}
  #view-home .hch-pass-copy{flex:1;min-width:0;padding:12px 0 12px 14px;text-align:left}
  #view-home .hch-pass-copy h2{font-size:21px;line-height:1.14}
  #view-home .hch-pass-copy p{max-width:170px;font-size:10px;line-height:1.5}
}
@media(prefers-reduced-motion:reduce){
  #view-home .hch-stern{animation:none}
}
#view-home .hch-reihe > .home-feature:has(> .cr-ribbon-new){overflow:visible}
#view-home .hch-reihe > .home-feature:has(> .cr-ribbon-new) > .home-feature-main{overflow:hidden;border-radius:inherit}
@media(max-width:540px){
  #view-home .hch-pass{display:block;height:142px;background:radial-gradient(ellipse at 76% 50%,var(--hch-pass-glut),transparent 60%),linear-gradient(var(--hch-pass-schatten),var(--hch-pass-schatten)),var(--panel-bg)}
  #view-home .hch-pass-art{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
  #view-home .hch-pass-szene{inset:0;top:0;left:0;width:100%;height:100%;transform:none}
  #view-home .hch-infinity{top:50%;left:auto;right:9px;width:185px;height:112px;transform:translateY(-50%)}
  #view-home .hch-pass-ticket{left:36%;top:50%;width:280px;height:280px;transform:translate(-50%,-50%) rotate(-65deg);opacity:.15;filter:saturate(.5);
    -webkit-mask-image:radial-gradient(ellipse,#000 16%,transparent 66%);mask-image:radial-gradient(ellipse,#000 16%,transparent 66%)}
  #view-home .hch-pass-emote{z-index:2;left:auto;right:28px;top:44px;width:62px;height:70px;transform:rotate(10deg);filter:none;clip-path:inset(0 0 22% 0)}
  #view-home .hch-pass-label{display:block;top:auto;left:auto;right:26px;bottom:12px;width:150px;font-size:8px;letter-spacing:.18em;line-height:1.4}
  #view-home .hch-pass-copy{position:absolute;z-index:5;top:50%;left:17px;width:155px;padding:0;transform:translateY(-50%);text-align:left}
  #view-home .hch-pass-copy h2{font-size:22px;line-height:1.12}
  #view-home .hch-pass-copy p{max-width:150px;margin-top:9px;font-size:10px;line-height:1.5}
}