:root {
  --site-gold: #cf9518;
  --site-gold-light: #edbd57;
  --site-bg: #020914;
  --site-panel: #061526;
  --site-panel-soft: #0a1d31;
  --site-text: #eef3ff;
  --site-muted: #aebaca;
  --site-blue: #1b89bd;
  --site-focus: #69d7ff;
  --site-display-font: "Coolvetica", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
}

@font-face {
  font-family: "Coolvetica";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Coolvetica Regular"), local("CoolveticaRg-Regular"), local("Coolvetica");
}

.site-footer *,
.cookie-preferences *,
.legal-page * { box-sizing: border-box; }

.site-footer a,
.site-footer button,
.cookie-preferences button,
.legal-page a { -webkit-tap-highlight-color: transparent; }

.site-footer a:focus-visible,
.site-footer button:focus-visible,
.cookie-preferences button:focus-visible,
.cookie-preferences input:focus-visible,
.legal-page a:focus-visible {
  outline: 2px solid var(--site-focus);
  outline-offset: 3px;
}

.site-footer {
  background:
    linear-gradient(90deg, transparent, rgba(207, 149, 24, 0.08) 25%, rgba(26, 134, 182, 0.06) 75%, transparent),
    #020a12;
  border-top: 1px solid rgba(207, 149, 24, 0.66);
  color: var(--site-text);
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.4rem) max(1rem, calc((100vw - 1180px) / 2));
  position: relative;
  width: 100%;
}

.site-footer::before {
  background: linear-gradient(90deg, transparent, var(--site-gold), transparent);
  content: "";
  height: 1px;
  left: 10%;
  opacity: 0.8;
  position: absolute;
  right: 10%;
  top: 5px;
}

.site-footer__grid {
  align-items: center;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(230px, 1fr) minmax(90px, 0.6fr) minmax(280px, 1fr);
}

.site-footer__support { justify-self: start; }
.site-footer__support p { color: var(--site-muted); font-size: 0.78rem; margin: 0.5rem 0 0; }
.site-footer__support-message { color: var(--site-gold-light) !important; min-height: 1em; }

.site-footer__social {
  align-items: center;
  display: flex;
  gap: 0.45rem;
  justify-content: center;
  margin-top: 0.5rem;
  width: 100%;
}

.site-footer__social-link {
  align-items: center;
  border: 1px solid rgba(199, 148, 52, 0.3);
  border-radius: 999px;
  color: #cbd2df;
  display: inline-flex;
  font-size: 0.72rem;
  gap: 0.38rem;
  justify-content: center;
  min-height: 38px;
  padding: 0.35rem 0.62rem;
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  background: rgba(199, 148, 52, 0.08);
  border-color: rgba(232, 188, 91, 0.7);
  color: #f3d58e;
}

.site-footer__social-icon { flex: 0 0 auto; height: 16px; width: 16px; }

.site-footer__support-button {
  align-items: center;
  background: linear-gradient(180deg, #efbd4f, var(--site-gold) 58%, #9f6910);
  border: 1px solid #f2c867;
  border-radius: 4px;
  box-shadow: inset 0 0 14px rgba(255, 231, 157, 0.16), 0 5px 18px rgba(0, 0, 0, 0.28);
  color: #100b02;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--site-display-font);
  font-size: 0.82rem;
  font-weight: 800;
  justify-content: center;
  letter-spacing: 0.08em;
  min-height: 44px;
  padding: 0.72rem 1rem;
  text-decoration: none;
  transition: filter 160ms ease, transform 160ms ease;
}

.site-footer__support-button:hover { filter: brightness(1.1); transform: translateY(-1px); }

.site-footer__play { align-items: center; display: flex; flex-wrap: wrap; gap: 0.25rem 0.95rem; justify-content: center; justify-self: center; }
.site-footer__legal { align-items: center; display: flex; gap: 0.7rem; justify-self: end; }
.site-footer__play a,
.site-footer__legal a {
  color: #d9dfeb;
  display: inline-flex;
  font-family: var(--site-display-font);
  font-size: 0.77rem;
  letter-spacing: 0.12em;
  min-height: 44px;
  align-items: center;
  text-decoration-color: rgba(207, 149, 24, 0.55);
  text-underline-offset: 0.28rem;
}
.site-footer__play a:hover,
.site-footer__legal a:hover { color: var(--site-gold-light); text-decoration-color: currentColor; }

.site-footer__bottom {
  align-items: center;
  border-top: 1px solid rgba(207, 149, 24, 0.24);
  display: grid;
  gap: 0.45rem 1rem;
  grid-template-columns: auto minmax(250px, 1fr) auto auto;
  margin-top: 1.35rem;
  padding-top: 1rem;
}

.site-footer__bottom p { margin: 0; }
.site-footer__bottom strong { color: #dbe2ed; font-size: 0.73rem; font-weight: 600; }
.site-footer__email { color: var(--site-muted); font-size: 0.73rem; overflow-wrap: anywhere; text-underline-offset: 0.22rem; }
.site-footer__email:hover { color: var(--site-gold-light); }
.site-footer__cookie-link {
  background: none;
  border: 0;
  color: var(--site-muted);
  cursor: pointer;
  font-size: 0.71rem;
  min-height: 36px;
  padding: 0.35rem;
  text-decoration: underline;
  text-underline-offset: 0.22rem;
}
.site-footer__cookie-link:hover { color: var(--site-gold-light); }
.site-footer__disclaimer { color: #7f8b9c; font-size: 0.66rem; grid-column: 1 / -2; line-height: 1.45; }
.site-footer__version { color: #8c9aad; font-size: 0.68rem; font-variant-numeric: tabular-nums; justify-self: end; white-space: nowrap; }

.cookie-banner {
  align-items: center;
  background: rgba(3, 13, 24, 0.98);
  border: 1px solid rgba(207, 149, 24, 0.7);
  bottom: 1rem;
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.52);
  color: var(--site-text);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
  left: 50%;
  max-width: 1040px;
  padding: 1rem;
  position: fixed;
  transform: translateX(-50%);
  width: calc(100% - 2rem);
  z-index: 10000;
}
.cookie-banner[hidden], .cookie-modal[hidden] { display: none !important; }
.cookie-banner p { font-size: 0.84rem; line-height: 1.55; margin: 0; }
.cookie-banner__actions, .cookie-modal__actions { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.cookie-preferences button:not(.site-footer__cookie-link) {
  background: linear-gradient(#e6ae38, #b87912);
  border: 1px solid #edc365;
  border-radius: 3px;
  color: #110b02;
  cursor: pointer;
  font-family: var(--site-display-font);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  min-height: 40px;
  padding: 0.65rem 0.8rem;
}
.cookie-preferences .cookie-button--secondary { background: #0b2033; border-color: rgba(207, 149, 24, 0.7); color: var(--site-text); }
.cookie-modal {
  align-items: center;
  background: rgba(0, 4, 10, 0.84);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 1rem;
  position: fixed;
  z-index: 10001;
}
.cookie-modal__panel {
  background: linear-gradient(145deg, #0a1e31, #04101d);
  border: 1px solid rgba(207, 149, 24, 0.75);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.62);
  color: var(--site-text);
  max-height: min(720px, calc(100vh - 2rem));
  max-width: 620px;
  overflow: auto;
  padding: clamp(1.2rem, 4vw, 2rem);
  position: relative;
  width: 100%;
}
.cookie-modal__panel h2 { color: var(--site-gold-light); font-family: var(--site-display-font); letter-spacing: 0.06em; margin: 0 2rem 0.65rem 0; }
.cookie-modal__panel > p { color: var(--site-muted); font-size: 0.88rem; line-height: 1.55; }
.cookie-modal__close { background: transparent !important; border-color: rgba(207, 149, 24, 0.45) !important; color: var(--site-text) !important; font-size: 1.15rem !important; min-height: 38px !important; padding: 0.25rem 0.65rem !important; position: absolute; right: 0.75rem; top: 0.75rem; }
.cookie-option { align-items: center; border-top: 1px solid rgba(207, 149, 24, 0.25); display: flex; gap: 1rem; justify-content: space-between; padding: 1rem 0; }
.cookie-option span { display: grid; gap: 0.25rem; }
.cookie-option strong { color: #edf2fa; }
.cookie-option small { color: var(--site-muted); line-height: 1.45; }
.cookie-option input { accent-color: var(--site-gold); height: 22px; min-width: 22px; width: 22px; }
.cookie-modal__actions { margin-top: 1rem; }
body.cookie-modal-open { overflow: hidden; }

html.legal-document { background: var(--site-bg); color-scheme: dark; scroll-behavior: smooth; }
body.legal-page {
  background:
    radial-gradient(circle at 12% 8%, rgba(24, 127, 178, 0.12), transparent 26rem),
    radial-gradient(circle at 88% 10%, rgba(207, 149, 24, 0.07), transparent 24rem),
    linear-gradient(135deg, #020812, #061422 55%, #020812);
  color: var(--site-text);
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  min-height: 100vh;
}
.legal-page__header {
  align-items: center;
  background: rgba(2, 9, 18, 0.9);
  border-bottom: 1px solid rgba(207, 149, 24, 0.55);
  display: flex;
  justify-content: space-between;
  min-height: 78px;
  padding: 0.8rem max(1rem, calc((100vw - 1180px) / 2));
}
.legal-page__logo img { display: block; height: auto; max-height: 52px; object-fit: contain; width: 132px; }
.legal-page__back {
  align-items: center;
  color: #dce5ef;
  display: inline-flex;
  font-family: var(--site-display-font);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  min-height: 44px;
  text-decoration-color: rgba(207, 149, 24, 0.7);
  text-underline-offset: 0.26rem;
}
.legal-page__back:hover { color: var(--site-gold-light); }
.legal-page__main { margin: 0 auto; max-width: 980px; padding: clamp(2rem, 5vw, 4.5rem) 1rem 3rem; }
.legal-page__hero { border-bottom: 1px solid rgba(207, 149, 24, 0.38); margin-bottom: 2rem; padding-bottom: 1.8rem; text-align: center; }
.legal-page__eyebrow { color: var(--site-blue); font-family: var(--site-display-font); font-size: 0.75rem; letter-spacing: 0.18em; margin: 0 0 0.7rem; text-transform: uppercase; }
.legal-page__hero h1 { color: var(--site-gold-light); font-family: var(--site-display-font); font-size: clamp(2rem, 6vw, 3.6rem); letter-spacing: 0.07em; line-height: 1.05; margin: 0; }
.legal-page__updated { color: var(--site-muted); font-size: 0.78rem; margin: 0.8rem 0 0; }
.legal-page__intro { color: #d5dde8; font-size: clamp(0.95rem, 1.5vw, 1.05rem); line-height: 1.75; margin: 0 auto 2rem; max-width: 840px; }
.legal-page__intro p { margin: 0 0 0.9rem; }
.legal-toc {
  background: linear-gradient(145deg, rgba(10, 31, 50, 0.94), rgba(4, 16, 29, 0.96));
  border: 1px solid rgba(207, 149, 24, 0.45);
  box-shadow: inset 0 0 30px rgba(23, 124, 171, 0.05);
  margin: 0 0 2.25rem;
  padding: clamp(1rem, 3vw, 1.5rem);
}
.legal-toc h2 { color: var(--site-gold-light); font-family: var(--site-display-font); font-size: 1rem; letter-spacing: 0.1em; margin: 0 0 0.9rem; }
.legal-toc ol { columns: 2; gap: 2.5rem; margin: 0; padding-left: 1.25rem; }
.legal-toc li { break-inside: avoid; color: var(--site-gold); font-size: 0.8rem; margin: 0 0 0.55rem; padding-left: 0.2rem; }
.legal-toc a { color: #cbd5e1; line-height: 1.4; text-decoration-color: rgba(207, 149, 24, 0.45); text-underline-offset: 0.2rem; }
.legal-toc a:hover { color: var(--site-gold-light); }
.legal-section { border-top: 1px solid rgba(207, 149, 24, 0.28); padding: 1.6rem 0 0.7rem; scroll-margin-top: 1.5rem; }
.legal-section h2 { color: #f0c768; font-family: var(--site-display-font); font-size: clamp(1.08rem, 2vw, 1.35rem); letter-spacing: 0.045em; line-height: 1.3; margin: 0 0 0.85rem; }
.legal-section p, .legal-section li { color: #ced7e3; font-size: 0.94rem; line-height: 1.72; }
.legal-section p { margin: 0 0 0.85rem; }
.legal-section ul { margin: 0.3rem 0 1rem; padding-left: 1.3rem; }
.legal-section li + li { margin-top: 0.35rem; }
.legal-section a, .legal-cross-link a { color: var(--site-gold-light); overflow-wrap: anywhere; text-underline-offset: 0.22rem; }
.legal-cross-link { background: rgba(10, 31, 49, 0.74); border-left: 3px solid var(--site-gold); color: #d9e1ea; line-height: 1.6; margin: 1.8rem 0 0; padding: 1rem 1.15rem; }
.legal-help-links { color: var(--site-muted); line-height: 1.6; margin: 1.8rem 0 0; text-align: center; }
.legal-help-links a { color: var(--site-gold-light); text-underline-offset: 0.22rem; }

.help-page__main { max-width: 1040px; }
.help-page__hero { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.help-page__subtitle { color: #d6dfeb; font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.55; margin: 0.9rem auto 0; max-width: 720px; }
.help-page__hero .help-primary-button { margin-top: 1.3rem; }
.help-primary-button {
  align-items: center;
  background: linear-gradient(180deg, #efbd4f, var(--site-gold) 58%, #9f6910);
  border: 1px solid #f2c867;
  border-radius: 4px;
  box-shadow: inset 0 0 14px rgba(255, 231, 157, 0.16), 0 7px 22px rgba(0, 0, 0, 0.3);
  color: #100b02;
  display: inline-flex;
  font-family: var(--site-display-font);
  font-size: 0.84rem;
  font-weight: 800;
  justify-content: center;
  letter-spacing: 0.1em;
  min-height: 46px;
  padding: 0.75rem 1.35rem;
  text-decoration: none;
  transition: filter 160ms ease, transform 160ms ease;
}
.help-primary-button:hover { filter: brightness(1.1); transform: translateY(-1px); }

.faq-list { display: grid; gap: 0.8rem; }
.faq-item { background: linear-gradient(145deg, rgba(10, 31, 50, 0.96), rgba(4, 16, 29, 0.98)); border: 1px solid rgba(207, 149, 24, 0.34); box-shadow: inset 0 0 28px rgba(27, 137, 189, 0.035); }
.faq-item h2 { margin: 0; }
.faq-question { align-items: center; background: transparent; border: 0; color: #eef3fb; cursor: pointer; display: flex; font-family: var(--site-display-font); font-size: clamp(0.95rem, 2vw, 1.08rem); gap: 1rem; justify-content: space-between; letter-spacing: 0.045em; line-height: 1.35; min-height: 62px; padding: 1rem 1.15rem; text-align: left; width: 100%; }
.faq-question:hover { color: var(--site-gold-light); }
.faq-question:focus-visible { outline: 2px solid var(--site-focus); outline-offset: -4px; }
.faq-question__icon { border: 1px solid rgba(207, 149, 24, 0.78); border-radius: 50%; flex: 0 0 26px; height: 26px; position: relative; }
.faq-question__icon::before, .faq-question__icon::after { background: var(--site-gold-light); content: ""; height: 2px; left: 6px; position: absolute; top: 11px; transition: transform 160ms ease; width: 12px; }
.faq-question__icon::after { transform: rotate(90deg); }
.faq-question[aria-expanded="true"] .faq-question__icon::after { transform: rotate(0deg); }
.faq-question[aria-expanded="true"] { color: var(--site-gold-light); }
.faq-answer { border-top: 1px solid rgba(207, 149, 24, 0.22); padding: 0.95rem 1.15rem 1.1rem; }
.faq-answer[hidden] { display: none; }
.faq-answer p { color: #cad5e2; font-size: 0.94rem; line-height: 1.72; margin: 0; }
.faq-answer p + p { margin-top: 0.7rem; }
.faq-answer a { color: var(--site-gold-light); overflow-wrap: anywhere; text-underline-offset: 0.22rem; }

.guide-steps { display: grid; gap: 1rem; }
.guide-step { background: linear-gradient(145deg, rgba(10, 31, 50, 0.94), rgba(4, 16, 29, 0.98)); border: 1px solid rgba(207, 149, 24, 0.34); display: grid; gap: 1rem; grid-template-columns: 48px minmax(0, 1fr); padding: clamp(1rem, 3vw, 1.55rem); scroll-margin-top: 1.5rem; }
.guide-step__number { align-items: center; background: rgba(207, 149, 24, 0.12); border: 1px solid rgba(207, 149, 24, 0.7); color: var(--site-gold-light); display: flex; font-family: var(--site-display-font); font-size: 1.25rem; height: 42px; justify-content: center; width: 42px; }
.guide-step__content h2 { color: var(--site-gold-light); font-family: var(--site-display-font); font-size: clamp(1.05rem, 2.2vw, 1.35rem); letter-spacing: 0.06em; line-height: 1.3; margin: 0 0 0.8rem; }
.guide-step__content h3 { color: #edf2f8; font-family: var(--site-display-font); font-size: 0.9rem; letter-spacing: 0.04em; margin: 0.25rem 0 0.4rem; }
.guide-step__content p, .guide-step__content li { color: #cad5e2; font-size: 0.93rem; line-height: 1.68; }
.guide-step__content p { margin: 0 0 0.8rem; }
.guide-step__content p:last-child { margin-bottom: 0; }
.guide-choice-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.guide-choice-row span { background: rgba(27, 137, 189, 0.08); border: 1px solid rgba(207, 149, 24, 0.55); color: #e6edf5; font-family: var(--site-display-font); font-size: 0.78rem; letter-spacing: 0.06em; padding: 0.55rem 0.9rem; }
.guide-route-grid { display: grid; gap: 0.5rem; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 1rem 0; }
.guide-route-grid span { background: rgba(2, 12, 23, 0.72); border-bottom: 2px solid var(--site-gold); color: var(--site-gold-light); display: grid; gap: 0.15rem; min-height: 64px; padding: 0.7rem 0.45rem; place-content: center; text-align: center; }
.guide-route-grid strong { font-family: var(--site-display-font); font-size: 0.82rem; letter-spacing: 0.05em; }
.guide-route-grid small { color: var(--site-muted); font-size: 0.68rem; }
.guide-attribute-grid { display: grid; gap: 0.65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1rem; }
.guide-attribute-grid article, .guide-style-grid article, .guide-championship-grid article { background: rgba(2, 12, 23, 0.68); border-left: 2px solid rgba(27, 137, 189, 0.75); padding: 0.9rem; }
.guide-attribute-grid article > strong { color: var(--site-gold-light); font-family: var(--site-display-font); font-size: 1rem; letter-spacing: 0.08em; }
.guide-attribute-grid p, .guide-style-grid p, .guide-championship-grid p { font-size: 0.84rem; line-height: 1.55; margin: 0; }
.guide-attribute-grid .guide-attribute-card--ger { border-color: var(--site-gold); grid-column: 1 / -1; }
.guide-callout { background: rgba(207, 149, 24, 0.09); border-left: 3px solid var(--site-gold); padding: 0.85rem 1rem; }
.guide-callout strong { color: var(--site-gold-light); }
.guide-connection-list { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.guide-connection-list li { background: rgba(27, 137, 189, 0.08); border: 1px solid rgba(27, 137, 189, 0.45); font-family: var(--site-display-font); font-size: 0.76rem; letter-spacing: 0.04em; padding: 0.42rem 0.65rem; }
.guide-synergy-legend { display: grid; gap: 0.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1rem; }
.guide-synergy { align-items: center; background: rgba(2, 12, 23, 0.6); border-left: 4px solid; color: #cbd6e2; display: flex; font-size: 0.8rem; gap: 0.5rem; min-height: 46px; padding: 0.55rem 0.7rem; }
.guide-synergy strong { color: #f0f4f9; }
.guide-synergy--red { border-color: #d84b4b; }
.guide-synergy--green { border-color: #4dce77; }
.guide-synergy--yellow { border-color: #e8cb35; }
.guide-synergy--purple { border-color: #aa62e8; }
.guide-style-grid, .guide-championship-grid { display: grid; gap: 0.65rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0.8rem 0; }
.guide-tips { columns: 2; gap: 2rem; margin: 0; padding-left: 1.2rem; }
.guide-tips li { break-inside: avoid; margin-bottom: 0.4rem; }
.help-page__closing { border-top: 1px solid rgba(207, 149, 24, 0.38); margin-top: 2.4rem; padding-top: 2rem; text-align: center; }
.help-page__closing h2 { color: var(--site-gold-light); font-family: var(--site-display-font); font-size: 1.25rem; letter-spacing: 0.08em; margin: 0 0 1rem; }
.help-secondary-links { align-items: center; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; justify-content: center; margin-top: 1rem; }
.help-secondary-links a { align-items: center; color: #cad5e2; display: inline-flex; min-height: 40px; text-underline-offset: 0.24rem; }
.help-secondary-links a:hover { color: var(--site-gold-light); }

.content-article { display: grid; gap: 1rem; }
.content-article > section { background: linear-gradient(145deg, rgba(10, 31, 50, 0.94), rgba(4, 16, 29, 0.98)); border: 1px solid rgba(207, 149, 24, 0.34); padding: clamp(1.1rem, 3vw, 1.65rem); }
.content-article h2, .attribute-explainer h2 { color: var(--site-gold-light); font-family: var(--site-display-font); font-size: clamp(1.05rem, 2.2vw, 1.35rem); letter-spacing: 0.06em; line-height: 1.3; margin: 0 0 0.75rem; }
.content-article p, .attribute-explainer p { color: #cad5e2; font-size: 0.94rem; line-height: 1.72; margin: 0; }
.content-article p + p { margin-top: 0.75rem; }
.attribute-explainer { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 1rem 0; }
.attribute-explainer article { background: rgba(2, 12, 23, 0.72); border-left: 3px solid var(--site-blue); padding: 1.1rem; }
.attribute-explainer article > strong { color: #68d8ff; font-family: var(--site-display-font); font-size: 1.25rem; letter-spacing: 0.12em; }
.attribute-explainer h2 { font-size: 1rem; margin: 0.25rem 0 0.55rem; }
.attribute-explainer__ger { border-color: var(--site-gold) !important; grid-column: 1 / -1; }
.content-next { display: grid; gap: 0.75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2rem; }
.content-next a { background: rgba(9, 29, 47, 0.9); border: 1px solid rgba(207, 149, 24, 0.42); color: #dce5ef; display: grid; gap: 0.35rem; min-height: 100px; padding: 1rem; text-decoration: none; }
.content-next a:hover { border-color: var(--site-gold-light); }
.content-next strong { color: var(--site-gold-light); font-family: var(--site-display-font); letter-spacing: 0.04em; }
.content-next span { color: var(--site-muted); font-size: 0.82rem; line-height: 1.5; }
.ranking-intro { color: #cbd6e2; margin: 0 auto 1.5rem; max-width: 900px; text-align: center; }
.ranking-intro h2 { color: var(--site-gold-light); font-family: var(--site-display-font); font-size: 1rem; letter-spacing: 0.08em; }
.ranking-intro p { line-height: 1.65; }

@media (max-width: 760px) {
  .content-next { grid-template-columns: 1fr; }
  .site-footer { margin-top: 1rem; padding: 1.5rem 1rem; text-align: center; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 0.55rem; }
  .site-footer__support, .site-footer__play, .site-footer__legal { justify-self: center; }
  .site-footer__support-button { width: min(100%, 310px); }
  .site-footer__support p { margin-top: 0.45rem; }
  .site-footer__social { flex-wrap: wrap; }
  .site-footer__social-link { min-height: 42px; }
  .site-footer__play { flex-direction: column; gap: 0; }
  .site-footer__play a, .site-footer__legal a { justify-content: center; min-width: 160px; }
  .site-footer__legal { flex-direction: column; gap: 0; }
  .site-footer__legal span { display: none; }
  .site-footer__bottom { display: flex; flex-direction: column; gap: 0.7rem; }
  .site-footer__email { order: 1; }
  .site-footer__cookie-link { order: 2; }
  .site-footer__bottom > p:first-child { order: 3; }
  .site-footer__disclaimer { order: 4; }
  .site-footer__version { order: 5; }
  .site-footer__bottom strong, .site-footer__email { font-size: 0.76rem; }
  .site-footer__disclaimer { max-width: 620px; }
  .site-footer__version { align-self: center; }
  .cookie-banner { bottom: 0.5rem; grid-template-columns: 1fr; }
  .cookie-banner__actions, .cookie-modal__actions { display: grid; grid-template-columns: 1fr; }
  .cookie-preferences button:not(.site-footer__cookie-link) { width: 100%; }
  .legal-page__header { min-height: 68px; }
  .legal-page__logo img { width: 108px; }
  .legal-page__main { padding-top: 2.2rem; }
  .legal-toc ol { columns: 1; }
  .guide-route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-route-grid span:last-child { grid-column: 1 / -1; }
  .guide-style-grid, .guide-championship-grid { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .attribute-explainer { grid-template-columns: 1fr; }
  .attribute-explainer__ger { grid-column: auto; }
  .legal-page__header { align-items: flex-start; flex-direction: column; gap: 0.35rem; }
  .legal-page__back { min-height: 38px; }
  .legal-page__hero { text-align: left; }
  .legal-page__hero h1 { font-size: 1.95rem; overflow-wrap: anywhere; }
  .legal-page__updated { line-height: 1.45; }
  .legal-section p, .legal-section li { font-size: 0.91rem; }
  .guide-step { gap: 0.75rem; grid-template-columns: 36px minmax(0, 1fr); padding: 0.9rem; }
  .guide-step__number { font-size: 1rem; height: 34px; width: 34px; }
  .guide-attribute-grid, .guide-synergy-legend { grid-template-columns: 1fr; }
  .guide-attribute-grid .guide-attribute-card--ger { grid-column: auto; }
  .guide-tips { columns: 1; }
  .faq-question { padding: 0.9rem; }
  .faq-answer { padding: 0.85rem 0.9rem 1rem; }
}