:root {
  --color-void: #0B0E14;
  --color-obsidian: #141A24;
  --color-basalt: #1E2633;
  --color-ash: #E8ECF2;
  --color-smoke: #9AA6B8;
  --color-ember: #FF6B2C;
  --color-ember-soft: #FFB38A;
  --color-rune: #3DDC97;
  --color-element-fire: #FF4D4D;
  --color-element-water: #3DA5FF;
  --color-element-nature: #5BD75B;
  --color-element-magic: #B47CFF;
  --color-element-light: #FFD166;
  --color-element-dark: #8B5CF6;
  --color-border-subtle: #2A3444;
  --color-focus-ring: #FFB38A;
  --color-row-tint: #171F2B;
  --color-ember-hover: #E85A1F;

  --font-heading: Rajdhani, 'Segoe UI', system-ui, sans-serif;
  --font-body: Inter, 'Segoe UI', system-ui, sans-serif;

  --text-display-size: 48px;
  --text-display-line-height: 1.05;
  --text-display-weight: 700;
  --text-display-tracking: -0.02em;

  --text-h1-size: 36px;
  --text-h1-line-height: 1.15;
  --text-h1-weight: 700;
  --text-h1-tracking: -0.01em;

  --text-h2-size: 28px;
  --text-h2-line-height: 1.2;
  --text-h2-weight: 700;
  --text-h2-tracking: 0;

  --text-h3-size: 22px;
  --text-h3-line-height: 1.25;
  --text-h3-weight: 600;
  --text-h3-tracking: 0;

  --text-h4-size: 18px;
  --text-h4-line-height: 1.3;
  --text-h4-weight: 600;
  --text-h4-tracking: 0;

  --text-body-large-size: 18px;
  --text-body-large-line-height: 1.6;
  --text-body-large-weight: 400;
  --text-body-large-tracking: 0;

  --text-body-size: 16px;
  --text-body-line-height: 1.65;
  --text-body-weight: 400;
  --text-body-tracking: 0;

  --text-body-small-size: 14px;
  --text-body-small-line-height: 1.55;
  --text-body-small-weight: 400;
  --text-body-small-tracking: 0.01em;

  --text-caption-size: 12px;
  --text-caption-line-height: 1.4;
  --text-caption-weight: 500;
  --text-caption-tracking: 0.04em;

  --text-overline-size: 11px;
  --text-overline-line-height: 1.3;
  --text-overline-weight: 600;
  --text-overline-tracking: 0.12em;

  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  --container-main-max: 1200px;
  --container-data-bleed-max: 1360px;
  --container-padding-mobile: 24px;
  --container-padding-tablet-desktop: 32px;

  --radius-card: 8px;
  --radius-button-input: 6px;
  --radius-badge-chip: 4px;
  --radius-modal: 12px;
  --radius-pill: 999px;

  --border-default: 1px solid var(--color-border-subtle);
  --border-hover: 1px solid rgba(255, 107, 44, 0.6);
  --border-divider: 1px solid rgba(42, 52, 68, 0.6);

  --shadow-floating: 0 16px 40px rgba(0, 0, 0, 0.55);

  --transition-card: 150ms ease-out;
  --transition-accordion: 200ms ease-out;
  --transition-drawer: 250ms ease-out;
  --transition-fade: 100ms ease-out;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-void);
  color: var(--color-ash);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-line-height);
  letter-spacing: var(--text-body-tracking);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: var(--color-ember);
  text-decoration: none;
  transition: color var(--transition-card);
}

a:hover {
  color: var(--color-ember-soft);
}

ul,
ol {
  list-style: none;
}

ul {
  list-style: none !important;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

th,
td {
  text-align: left;
  vertical-align: middle;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--color-ash);
  margin-block-end: var(--space-md);
}

h1 {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line-height);
  font-weight: var(--text-h1-weight);
  letter-spacing: var(--text-h1-tracking);
}

h2 {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line-height);
  font-weight: var(--text-h2-weight);
  letter-spacing: var(--text-h2-tracking);
}

h3 {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  font-weight: var(--text-h3-weight);
  letter-spacing: var(--text-h3-tracking);
}

h4 {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line-height);
  font-weight: var(--text-h4-weight);
  letter-spacing: var(--text-h4-tracking);
}

p {
  margin-block-end: var(--space-md);
}

blockquote {
  margin-block-end: var(--space-md);
  padding-inline-start: var(--space-lg);
  border-inline-start: 3px solid var(--color-ember);
  color: var(--color-smoke);
}

ul,
ol {
  margin-block-end: var(--space-md);
  padding-inline-start: var(--space-lg);
}

li {
  margin-block-end: var(--space-xs);
}

dl {
  margin-block-end: var(--space-md);
}

dt {
  font-weight: 600;
  color: var(--color-ash);
  margin-block-end: var(--space-2xs);
}

dd {
  margin-inline-start: 0;
  margin-block-end: var(--space-sm);
  color: var(--color-smoke);
}

figure {
  margin-block-end: var(--space-md);
}

figcaption {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line-height);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-tracking);
  color: var(--color-smoke);
  margin-block-start: var(--space-xs);
  text-align: center;
}

hr {
  border: none;
  border-top: var(--border-divider);
  margin-block: var(--space-xl);
}

code,
pre {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.9em;
}

pre {
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  overflow-x: auto;
  margin-block-end: var(--space-md);
}

code {
  background-color: var(--color-basalt);
  padding: 2px 6px;
  border-radius: var(--radius-badge-chip);
  color: var(--color-ember-soft);
}

pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  color: inherit;
}

strong {
  font-weight: 600;
  color: var(--color-ash);
}

em {
  font-style: italic;
}

small {
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-small-line-height);
  letter-spacing: var(--text-body-small-tracking);
  color: var(--color-smoke);
}

mark {
  background-color: rgba(255, 107, 44, 0.25);
  color: var(--color-ash);
  padding: 0 2px;
  border-radius: 2px;
}

abbr[title] {
  border-bottom: 1px dotted var(--color-smoke);
  text-decoration: none;
  cursor: help;
}

::selection {
  background-color: rgba(255, 107, 44, 0.35);
  color: var(--color-ash);
}

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.container {
  max-width: var(--container-main-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

.container--data-bleed {
  max-width: var(--container-data-bleed-max);
}

.surface-card {
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-radius: var(--radius-card);
}

.surface-raised {
  background-color: var(--color-basalt);
  border: var(--border-default);
  border-radius: var(--radius-card);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 48px;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-button-input);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  transition: background-color var(--transition-card), color var(--transition-card), border-color var(--transition-card), transform var(--transition-card);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  background-color: var(--color-ember);
  color: var(--color-void);
  border: 1px solid var(--color-ember);
}

.btn--primary:hover {
  background-color: var(--color-ember-hover);
  border-color: var(--color-ember-hover);
  color: var(--color-void);
}

.btn--secondary {
  background-color: transparent;
  color: var(--color-ash);
  border: 1px solid var(--color-border-subtle);
}

.btn--secondary:hover {
  border-color: var(--color-ember-soft);
  color: var(--color-ember-soft);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-badge-chip);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line-height);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-tracking);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-smoke);
  background-color: transparent;
}

.overline {
  font-size: var(--text-overline-size);
  line-height: var(--text-overline-line-height);
  font-weight: var(--text-overline-weight);
  letter-spacing: var(--text-overline-tracking);
  text-transform: uppercase;
  color: var(--color-ember);
  margin-block-end: var(--space-xs);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nav-toggle {
  flex-direction: column;
}

.flex {
  display: flex;
  gap: var(--space-md);
}

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

.flex--column {
  flex-direction: column;
}

.flex--align-center {
  align-items: center;
}

.flex--justify-between {
  justify-content: space-between;
}

.flex--justify-center {
  justify-content: center;
}

.flex > * {
  min-width: 0;
}

:where(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, dl, figure, pre, table):last-child {
  margin-block-end: 0;
}

:where(li):last-child {
  margin-block-end: 0;
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--container-padding-tablet-desktop);
  }

  h1 {
    font-size: var(--text-h1-size);
  }

  h2 {
    font-size: var(--text-h2-size);
  }

  h3 {
    font-size: var(--text-h3-size);
  }

  h4 {
    font-size: var(--text-h4-size);
  }
}

@media (max-width: 767px) {
  h1 {
    font-size: 32px;
    line-height: 1.15;
  }

  h2 {
    font-size: 24px;
    line-height: 1.2;
  }

  h3 {
    font-size: 20px;
    line-height: 1.25;
  }

  h4 {
    font-size: 17px;
    line-height: 1.3;
  }

  .flex {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .btn:active {
    transform: none;
  }
}

/* Header component styles */
.site-header {
  background-color: var(--color-obsidian);
  border-bottom: var(--border-default);
  position: relative;
  z-index: 1000;
}

.site-header__inner {
  max-width: var(--container-main-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 64px;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--color-ash);
  flex-shrink: 0;
}

.site-header__logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

.site-header__wordmark {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-ash);
  line-height: 1;
  white-space: nowrap;
}

.site-header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-button-input);
  transition: background-color var(--transition-card);
}

.site-header__toggle:hover {
  background-color: var(--color-basalt);
}

.site-header__toggle:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.site-header__toggle-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-ash);
  border-radius: 1px;
  transition: transform var(--transition-card), opacity var(--transition-card);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-line:nth-child(2) {
  opacity: 0;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-header__nav {
  display: flex;
  align-items: center;
}

.site-header__list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.site-header__item {
  margin: 0;
  padding: 0;
}

.site-header__link {
  display: inline-block;
  padding: var(--space-xs) 0;
  font-size: var(--text-body-small-size);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-ash);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-card);
  position: relative;
}

.site-header__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-ember);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-card);
}

.site-header__link:hover {
  color: var(--color-ember-soft);
}

.site-header__link:hover::after {
  transform: scaleX(1);
}

.site-header__link:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Mobile styles */
@media (max-width: 767px) {
  .site-header__inner {
    min-height: 56px;
    padding-inline: var(--container-padding-mobile);
  }

  .site-header__logo {
    width: 32px;
    height: 32px;
  }

  .site-header__wordmark {
    font-size: 16px;
  }

  .site-header__toggle {
    display: flex;
  }

  .site-header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-obsidian);
    border-bottom: var(--border-default);
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform var(--transition-drawer), visibility var(--transition-drawer);
    z-index: 999;
  }

  .site-header__nav.is-open {
    transform: translateY(0);
    visibility: visible;
  }

  .site-header__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-sm) 0;
  }

  .site-header__item {
    width: 100%;
  }

  .site-header__link {
    display: block;
    padding: var(--space-md) var(--container-padding-mobile);
    font-size: var(--text-body-size);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .site-header__link::after {
    display: none;
  }

  .site-header__link:hover {
    background-color: var(--color-basalt);
    color: var(--color-ash);
  }
}

@media (min-width: 768px) {
  .site-header__inner {
    min-height: 72px;
    padding-inline: var(--container-padding-tablet-desktop);
  }

  .site-header__logo {
    width: 40px;
    height: 40px;
  }

  .site-header__wordmark {
    font-size: 18px;
  }
}

/* Footer and consent styles */
.site-footer {
  background-color: var(--color-obsidian);
  border-top: var(--border-default);
  margin-top: var(--space-3xl);
  padding: var(--space-2xl) 0;
}

.site-footer__inner {
  max-width: var(--container-main-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.site-footer__logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.site-footer__tagline {
  font-size: var(--text-body-small-size);
  color: var(--color-smoke);
  margin: 0;
}

.site-footer__nav ul,
.site-footer__legal {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.site-footer__nav li {
  margin: 0;
  padding: 0;
}

.site-footer__nav a,
.site-footer__legal a {
  display: inline-block;
  padding: var(--space-xs) 0;
  color: var(--color-smoke);
  text-decoration: none;
  font-size: var(--text-body-small-size);
  transition: color var(--transition-card);
}

.site-footer__nav a:hover,
.site-footer__legal a:hover {
  color: var(--color-ember-soft);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.site-footer__copyright {
  font-size: var(--text-caption-size);
  color: var(--color-smoke);
  margin: 0;
}

/* Consent banner */
.consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--color-basalt);
  border-top: var(--border-default);
  padding: var(--space-md);
  z-index: 1000;
  box-shadow: var(--shadow-floating);
}

.consent-banner[hidden] {
  display: none;
}

.consent-banner__content {
  max-width: var(--container-main-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.consent-banner__text {
  font-size: var(--text-body-small-size);
  color: var(--color-ash);
  margin: 0;
}

.consent-banner__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.consent-banner__button {
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-button-input);
  font-size: var(--text-body-small-size);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-card), color var(--transition-card), border-color var(--transition-card);
  min-height: 44px;
}

.consent-banner__button--accept {
  background-color: var(--color-ember);
  color: var(--color-void);
  border: 1px solid var(--color-ember);
}

.consent-banner__button--accept:hover {
  background-color: var(--color-ember-hover);
  border-color: var(--color-ember-hover);
}

.consent-banner__button--reject {
  background-color: transparent;
  color: var(--color-ash);
  border: 1px solid var(--color-border-subtle);
}

.consent-banner__button--reject:hover {
  border-color: var(--color-ember-soft);
  color: var(--color-ember-soft);
}

.consent-banner__button:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: 1fr 2fr 1fr;
    align-items: start;
  }

  .site-footer__brand {
    align-items: flex-start;
  }

  .site-footer__nav ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs) var(--space-lg);
  }

  .site-footer__legal {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .consent-banner__content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .consent-banner__text {
    flex: 1;
    margin-right: var(--space-md);
  }

  .consent-banner__actions {
    flex-shrink: 0;
  }
}

.kapcsolat-main {
    padding-block: var(--space-3xl) var(--space-4xl);
}

.kapcsolat-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xl);
}

.kapcsolat-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.kapcsolat-hero {
    max-width: 800px;
}

.kapcsolat-hero__lead {
    max-width: 68ch;
    font-size: var(--text-body-large-size);
    line-height: var(--text-body-large-line-height);
    color: var(--color-ash);
}

.kapcsolat-hero__support {
    max-width: 68ch;
    color: var(--color-smoke);
}

.kapcsolat-details {
    max-width: 800px;
}

.kapcsolat-details__intro {
    max-width: 68ch;
    color: var(--color-smoke);
}

.kapcsolat-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-xl);
    max-width: 600px;
}

.kapcsolat-card__row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--space-md);
    align-items: start;
}

.kapcsolat-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--color-ember);
}

.kapcsolat-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.kapcsolat-card__label {
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-line-height);
    font-weight: var(--text-caption-weight);
    letter-spacing: var(--text-caption-tracking);
    color: var(--color-smoke);
    text-transform: uppercase;
}

.kapcsolat-card__value {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    color: var(--color-ash);
    text-decoration: none;
    overflow-wrap: anywhere;
}

a.kapcsolat-card__value {
    color: var(--color-ember);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-card);
}

a.kapcsolat-card__value:hover {
    color: var(--color-ember-soft);
}

.kapcsolat-help {
    max-width: 800px;
}

.kapcsolat-help__intro {
    max-width: 68ch;
    color: var(--color-smoke);
}

.kapcsolat-help__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding-inline-start: 0;
    list-style: none;
}

.kapcsolat-help__list li {
    position: relative;
    padding-inline-start: var(--space-lg);
    color: var(--color-ash);
}

.kapcsolat-help__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background-color: var(--color-ember);
}

.kapcsolat-response {
    max-width: 800px;
}

.kapcsolat-response__intro {
    max-width: 68ch;
    color: var(--color-smoke);
}

.kapcsolat-response__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
    margin-block-end: 0;
}

.kapcsolat-response__item {
    background-color: var(--color-obsidian);
    border: var(--border-default);
    border-radius: var(--radius-card);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}

.kapcsolat-response__item dt {
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-line-height);
    font-weight: var(--text-caption-weight);
    letter-spacing: var(--text-caption-tracking);
    color: var(--color-smoke);
    text-transform: uppercase;
    margin-block-end: 0;
}

.kapcsolat-response__item dd {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    color: var(--color-ember);
    margin-block-end: 0;
}

.kapcsolat-faq {
    max-width: 800px;
}

.kapcsolat-faq__intro {
    max-width: 68ch;
    color: var(--color-smoke);
}

.kapcsolat-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.kapcsolat-accordion__item {
    border: var(--border-default);
    border-radius: var(--radius-card);
    background-color: var(--color-obsidian);
    overflow: hidden;
}

.kapcsolat-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    width: 100%;
    min-height: 48px;
    padding: var(--space-md) var(--space-lg);
    background-color: var(--color-obsidian);
    color: var(--color-ash);
    font-family: var(--font-heading);
    font-size: var(--text-h4-size);
    line-height: var(--text-h4-line-height);
    font-weight: var(--text-h4-weight);
    text-align: left;
    transition: background-color var(--transition-card);
}

.kapcsolat-accordion__header:hover {
    background-color: var(--color-basalt);
}

.kapcsolat-accordion__icon {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.kapcsolat-accordion__icon::before,
.kapcsolat-accordion__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    background-color: var(--color-ember);
    transform: translate(-50%, -50%);
    transition: transform var(--transition-accordion);
}

.kapcsolat-accordion__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.kapcsolat-accordion__item.is-open .kapcsolat-accordion__icon::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.kapcsolat-accordion__panel {
    display: none;
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    background-color: var(--color-basalt);
    border-top: var(--border-divider);
}

.kapcsolat-accordion__item.is-open .kapcsolat-accordion__panel {
    display: block;
}

.kapcsolat-accordion__panel p {color: var(--color-smoke);
}

.kapcsolat-accordion__panel a {
    color: var(--color-ember);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.kapcsolat-accordion__panel a:hover {
    color: var(--color-ember-soft);
}

.kapcsolat-community {
    max-width: 800px;
}

.kapcsolat-community__intro {
    max-width: 68ch;
    color: var(--color-smoke);
}

.kapcsolat-community__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-inline-start: 0;
    list-style: none;
}

.kapcsolat-community__links a {
    display: inline-block;
    padding: var(--space-xs) 0;
    color: var(--color-ember);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-card);
}

.kapcsolat-community__links a:hover {
    color: var(--color-ember-soft);
}

.kapcsolat-form-section {
    max-width: 600px;
}

.kapcsolat-form-section__intro {
    max-width: 68ch;
    color: var(--color-smoke);
}

.kapcsolat-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-xl);
    background-color: var(--color-obsidian);
    border: var(--border-default);
    border-radius: var(--radius-card);
}

.kapcsolat-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.kapcsolat-form__field label {
    font-size: var(--text-body-small-size);
    line-height: var(--text-body-small-line-height);
    font-weight: 600;
    color: var(--color-ash);
}

.kapcsolat-form__field input,
.kapcsolat-form__field textarea {
    width: 100%;
    min-height: 48px;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-void);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-button-input);
    color: var(--color-ash);
    font-family: var(--font-body);
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    transition: border-color var(--transition-card);
}

.kapcsolat-form__field textarea {
    min-height: 120px;
    resize: vertical;
}

.kapcsolat-form__field input:focus,
.kapcsolat-form__field textarea:focus {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    border-color: var(--color-ember);
}

.kapcsolat-form__submit {
    align-self: flex-start;
    min-width: 160px;
}

.kapcsolat-form__success {
    display: none;
    margin-block-end: 0;
    padding: var(--space-sm) var(--space-md);
    background-color: rgba(61, 220, 151, 0.15);
    border: 1px solid var(--color-rune);
    border-radius: var(--radius-badge-chip);
    color: var(--color-rune);
    font-size: var(--text-body-small-size);
    line-height: var(--text-body-small-line-height);
}

.kapcsolat-form.is-success .kapcsolat-form__success {
    display: block;
}

@media (max-width: 767px) {
    .kapcsolat-main {
        padding-block: var(--space-2xl) var(--space-3xl);
    }

    .kapcsolat-container {
        gap: var(--space-2xl);
    }

    .kapcsolat-section {
        gap: var(--space-md);
    }

    .kapcsolat-card {
        padding: var(--space-lg);
    }

    .kapcsolat-card__row {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: var(--space-sm);
    }

    .kapcsolat-card__icon {
        width: 32px;
        height: 32px;
    }

    .kapcsolat-response__list {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .kapcsolat-form {
        padding: var(--space-lg);
    }

    .kapcsolat-form__submit {
        align-self: stretch;
        width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .kapcsolat-response__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-md);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kapcsolat-accordion__icon::before,
    .kapcsolat-accordion__icon::after {
        transition: none;
    }
}

/* Page-owned styles for runak-es-felszerelesek */

.rune-page-header {
  padding-block: var(--space-3xl) var(--space-2xl);
  text-align: center;
}

.rune-page-header__inner {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

.rune-page-header .overline {
  margin-block-end: var(--space-sm);
}

.rune-page-header h1 {
  margin-block-end: var(--space-lg);
}

.rune-page-header__lead {
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line-height);
  color: var(--color-ash);
  margin-block-end: var(--space-md);
}

.rune-page-header__support {
  color: var(--color-smoke);
  margin-block-end: 0;
}

.rune-intro,
.rune-equip,
.rune-upgrade,
.rune-advanced,
.rune-mistakes,
.rune-summary {
  padding-block: var(--space-3xl) var(--space-2xl);
  border-top: var(--border-divider);
}

.rune-intro__inner,
.rune-equip__inner,
.rune-upgrade__inner,
.rune-advanced__inner,
.rune-mistakes__inner,
.rune-summary__inner {
  max-width: 900px;
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

.rune-intro h2,
.rune-equip h2,
.rune-upgrade h2,
.rune-advanced h2,
.rune-mistakes h2,
.rune-summary h2 {
  margin-block-end: var(--space-xl);
}

.rune-intro__block,
.rune-equip__block,
.rune-upgrade__block,
.rune-advanced__block,
.rune-mistakes__block,
.rune-summary__block {
  margin-block-end: var(--space-xl);
}

.rune-intro__block:last-child,
.rune-equip__block:last-child,
.rune-upgrade__block:last-child,
.rune-advanced__block:last-child,
.rune-mistakes__block:last-child,
.rune-summary__block:last-child {
  margin-block-end: 0;
}

.rune-intro h3,
.rune-equip h3,
.rune-upgrade h3,
.rune-advanced h3,
.rune-mistakes h3,
.rune-summary h3 {
  margin-block-end: var(--space-md);
}

.rune-intro p,
.rune-equip p,
.rune-upgrade p,
.rune-advanced p,
.rune-mistakes p,
.rune-summary p {
  margin-block-end: var(--space-md);
}

.rune-intro p:last-child,
.rune-equip p:last-child,
.rune-upgrade p:last-child,
.rune-advanced p:last-child,
.rune-mistakes p:last-child,
.rune-summary p:last-child {
  margin-block-end: 0;
}

.rune-equip__steps,
.rune-advanced__list,
.rune-mistakes__list,
.rune-summary__list {
  margin-block-start: var(--space-md);
  margin-block-end: 0;
  padding-inline-start: var(--space-lg);
}

.rune-equip__steps li,
.rune-advanced__list li,
.rune-mistakes__list li,
.rune-summary__list li {
  margin-block-end: var(--space-xs);
}

.rune-equip__steps li:last-child,
.rune-advanced__list li:last-child,
.rune-mistakes__list li:last-child,
.rune-summary__list li:last-child {
  margin-block-end: 0;
}

.rune-types {
  padding-block: var(--space-3xl) var(--space-2xl);
  border-top: var(--border-divider);
}

.rune-types__inner {
  max-width: var(--container-main-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

.rune-types h2 {
  margin-block-end: var(--space-xl);
}

.rune-types__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
}

.rune-type-card {
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  min-width: 0;
  transition: background-color var(--transition-card), border-color var(--transition-card);
}

.rune-type-card:hover {
  background-color: var(--color-basalt);
  border-color: rgba(255, 107, 44, 0.6);
}

.rune-type-card--strength {
  border-top: 3px solid var(--color-element-fire);
}

.rune-type-card--defense {
  border-top: 3px solid var(--color-element-water);
}

.rune-type-card--speed {
  border-top: 3px solid var(--color-element-nature);
}

.rune-type-card--health {
  border-top: 3px solid var(--color-element-light);
}

.rune-type-card h3 {
  margin-block-end: var(--space-sm);
  color: var(--color-ash);
}

.rune-type-card p {
  margin-block-end: 0;
  color: var(--color-smoke);
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-small-line-height);
}

.rune-cta {
  padding-block: var(--space-4xl) var(--space-4xl);
  border-top: var(--border-divider);
  text-align: center;
}

.rune-cta__inner {
  max-width: 600px;
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.rune-cta h2 {
  margin-block-end: 0;
}

.rune-cta p {
  margin-block-end: 0;
  color: var(--color-ash);
}

.rune-cta__support {
  color: var(--color-smoke);
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-small-line-height);
}

.rune-cta__button {
  margin-block-start: var(--space-lg);
  min-width: 260px;
}

@media (min-width: 768px) {
  .rune-page-header__inner,
  .rune-intro__inner,
  .rune-equip__inner,
  .rune-upgrade__inner,
  .rune-advanced__inner,
  .rune-mistakes__inner,
  .rune-summary__inner,
  .rune-types__inner,
  .rune-cta__inner {
    padding-inline: var(--container-padding-tablet-desktop);
  }
}

@media (max-width: 1023px) {
  .rune-types__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .rune-page-header {
    padding-block: var(--space-2xl) var(--space-xl);
  }

  .rune-page-header h1 {
    font-size: 32px;
    line-height: 1.15;
  }

  .rune-page-header__lead {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
  }

  .rune-intro,
  .rune-equip,
  .rune-upgrade,
  .rune-advanced,
  .rune-mistakes,
  .rune-summary,
  .rune-types,
  .rune-cta {
    padding-block: var(--space-2xl) var(--space-xl);
  }

  .rune-types__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .rune-cta__button {
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rune-type-card {
    transition: none;
  }
}

/* Cookie Irányelvek page styles */

.cookie-policy-page {
  background-color: var(--color-void);
  color: var(--color-ash);
}

.cookie-policy-container {
  max-width: var(--container-main-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  padding-block: var(--space-2xl);
}

.cookie-policy-header {
  padding-block-end: var(--space-xl);
  margin-block-end: var(--space-xl);
  border-block-end: var(--border-divider);
}

.cookie-policy-header .overline {
  color: var(--color-smoke);
  margin-block-end: var(--space-xs);
}

.cookie-policy-header h1 {
  margin-block-end: var(--space-md);
}

.cookie-policy-header__summary {
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line-height);
  color: var(--color-smoke);
  max-width: 68ch;
}

.cookie-policy-section {
  margin-block-end: var(--space-xl);
}

.cookie-policy-section__title {
  margin-block-end: var(--space-lg);
}

.cookie-policy-card {
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  max-width: 800px;
  margin-inline: auto;
}

.cookie-policy-card--info {
  border-inline-start: 3px solid var(--color-ember);
}

.cookie-policy-card--browser {
  border-block-start: 3px solid var(--color-ember);
}

.cookie-policy-card--consequences {
  border-block-start: 3px solid var(--color-rune);
}

.cookie-policy-card--contact {
  border-inline-start: 3px solid var(--color-ember);
}

.cookie-policy-card--effective {
  border-inline-start: 3px solid var(--color-ember);
}

.cookie-policy-card h2,
.cookie-policy-card h3 {
  margin-block-end: var(--space-md);
}

.cookie-policy-card p {margin-block-end: var(--space-md);
}

.cookie-policy-card ul {
  max-width: 68ch;
  margin-block-end: 0;
  padding-inline-start: var(--space-lg);
  list-style: disc;
}

.cookie-policy-card li {
  margin-block-end: var(--space-xs);
  color: var(--color-smoke);
}

.cookie-policy-card li strong {
  color: var(--color-ash);
}

.cookie-policy-category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  max-width: 800px;
  margin-inline: auto;
}

.cookie-policy-category-card {
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  min-width: 0;
}

.cookie-policy-category-card--necessary {
  border-block-start: 3px solid var(--color-ember);
}

.cookie-policy-category-card--performance {
  border-block-start: 3px solid var(--color-rune);
}

.cookie-policy-category-card--functional {
  border-block-start: 3px solid var(--color-element-nature);
}

.cookie-policy-category-card--targeting {
  border-block-start: 3px solid var(--color-element-magic);
}

.cookie-policy-category-card h3 {
  margin-block-end: var(--space-md);
}

.cookie-policy-category-card p {margin-block-end: var(--space-md);
}

.cookie-policy-category-card ul {
  max-width: 68ch;
  margin-block-end: 0;
  padding-inline-start: var(--space-lg);
  list-style: disc;
}

.cookie-policy-category-card li {
  margin-block-end: var(--space-xs);
  color: var(--color-smoke);
}

.cookie-policy-management-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  max-width: 800px;
  margin-inline: auto;
}

.cookie-policy-contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
}

.cookie-policy-contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-ash);
  margin-block-end: 0;
}

.cookie-policy-contact-icon {
  width: 20px;
  height: 20px;
  color: var(--color-ember);
  flex-shrink: 0;
}

.cookie-policy-contact-item a {
  color: var(--color-ash);
  text-decoration: none;
  transition: color var(--transition-card);
}

.cookie-policy-contact-item a:hover {
  color: var(--color-ember-soft);
}

.cookie-policy-effective-date {
  color: var(--color-ember);
}

@media (min-width: 768px) {
  .cookie-policy-container {
    padding-inline: var(--container-padding-tablet-desktop);
    padding-block: var(--space-3xl);
  }

  .cookie-policy-header {
    padding-block-end: var(--space-2xl);
    margin-block-end: var(--space-2xl);
  }

  .cookie-policy-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  .cookie-policy-management-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .cookie-policy-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .cookie-policy-container {
    padding-block: var(--space-xl);
  }

  .cookie-policy-header h1 {
    font-size: 32px;
    line-height: 1.15;
  }

  .cookie-policy-card,
  .cookie-policy-category-card {
    padding: var(--space-md);
  }

  .cookie-policy-category-grid,
  .cookie-policy-management-grid {
    gap: var(--space-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-policy-contact-item a {
    transition: none;
  }
}

/* Home page scoped styles */

.home-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
  padding: var(--space-3xl) var(--container-padding-mobile);
  overflow: hidden;
  background-color: var(--color-void);
}

.home-hero__background {
  position: absolute;
  inset: 0;
  background-image: url('/src/media/monster-legends-hero.webp');
  background-size: cover;
  background-position: center;
  opacity: 0.55;
  z-index: 0;
}

.home-hero__background::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(11, 14, 20, 0.8) 0%, rgba(11, 14, 20, 0.2) 100%);
}

.home-hero__content {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.home-hero__content .overline {
  margin-block-end: 0;
}

.home-hero__content h1 {
  margin-block-end: 0;
  font-size: clamp(2rem, 5vw, var(--text-display-size));
  line-height: var(--text-display-line-height);
  letter-spacing: var(--text-display-tracking);
}

.home-hero__lead {
  max-width: 680px;
  margin-block-end: 0;
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line-height);
  color: var(--color-ash);
}

.home-hero__cta {
  width: 100%;
  max-width: 400px;
  min-height: 48px;
}

.home-hero__cta-icon,
.home-hero__external-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.home-hero__external-icon {
  margin-inline-start: var(--space-2xs);
}

.home-categories {
  padding-block: var(--space-3xl) var(--space-4xl);
}

.home-categories__intro {
  max-width: 680px;
  margin-block-end: var(--space-xl);
  color: var(--color-smoke);
}

.home-categories__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
}

.home-category-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-top-width: 3px;
  border-radius: var(--radius-card);
  color: var(--color-ash);
  text-decoration: none;
  transition: background-color var(--transition-card), border-color var(--transition-card), color var(--transition-card);
  min-width: 0;
}

.home-category-card:hover {
  background-color: var(--color-basalt);
  border-color: rgba(255, 107, 44, 0.6);
  border-top-color: rgba(255, 107, 44, 0.6);
  color: var(--color-ash);
}

.home-category-card--fire {
  border-top-color: var(--color-element-fire);
}

.home-category-card--water {
  border-top-color: var(--color-element-water);
}

.home-category-card--nature {
  border-top-color: var(--color-element-nature);
}

.home-category-card--magic {
  border-top-color: var(--color-element-magic);
}

.home-category-card h3 {
  margin-block-end: 0;
  color: var(--color-ash);
}

.home-category-card p {
  margin-block-end: 0;color: var(--color-smoke);
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-small-line-height);
}

.home-category-card__link {
  margin-block-start: auto;
  font-weight: 600;
  color: var(--color-ember);
  font-size: var(--text-body-small-size);
}

.home-category-card:hover .home-category-card__link {
  color: var(--color-ember-soft);
}

.home-breeding {
  padding-block: var(--space-4xl) var(--space-4xl);
  border-top: var(--border-divider);
}

.home-breeding__layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-xl);
  align-items: start;
}

.home-breeding__text {
  max-width: 560px;
  min-width: 0;
}

.home-breeding__text p {
  margin-block-end: var(--space-lg);
}

.home-breeding__copy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-button-input);
  background-color: transparent;
  color: var(--color-ash);
  font-size: var(--text-body-small-size);
  font-weight: 600;
  transition: background-color var(--transition-card), border-color var(--transition-card), color var(--transition-card);
  cursor: pointer;
}

.home-breeding__copy:hover {
  background-color: var(--color-basalt);
  border-color: var(--color-ember-soft);
  color: var(--color-ember-soft);
}

.home-breeding__copy svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.home-breeding__chart {
  max-width: 400px;
  min-width: 0;
}

.home-breeding-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-small-size);
}

.home-breeding-table th,
.home-breeding-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--border-divider);
  text-align: left;
  vertical-align: middle;
}

.home-breeding-table thead th {
  background-color: var(--color-basalt);
  color: var(--color-smoke);
  font-weight: 600;
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-tracking);
  text-transform: uppercase;
}

.home-breeding-table tbody tr {
  transition: background-color var(--transition-card);
}

.home-breeding-table tbody tr:hover {
  background-color: var(--color-row-tint);
}

.home-breeding-table tbody th {
  font-weight: 600;
  color: var(--color-ash);
}

.home-breeding-table__result {
  background-color: var(--color-row-tint);
}

.home-element-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-badge-chip);
  font-size: var(--text-caption-size);
  font-weight: 600;
  letter-spacing: var(--text-caption-tracking);
  border: 1px solid;
  background-color: transparent;
  white-space: nowrap;
}

.home-element-badge--fire {
  color: var(--color-element-fire);
  border-color: var(--color-element-fire);
}

.home-element-badge--nature {
  color: var(--color-element-nature);
  border-color: var(--color-element-nature);
}

.home-gameplay {
  padding-block: var(--space-4xl) var(--space-4xl);
  border-top: var(--border-divider);
}

.home-gameplay__layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-xl);
  align-items: start;
}

.home-gameplay__text {
  max-width: 560px;
  min-width: 0;
}

.home-gameplay__text p {
  margin-block-end: 0;
}

.home-gameplay__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  max-width: 320px;
  min-width: 0;
}

.home-stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-radius: var(--radius-card);
  transition: background-color var(--transition-card), border-color var(--transition-card);
  min-width: 0;
}

.home-stat-card:hover {
  background-color: var(--color-basalt);
  border-color: var(--border-hover);
}

.home-stat-card__value {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  font-weight: 700;
  line-height: var(--text-h3-line-height);
  color: var(--color-ember);
  font-variant-numeric: tabular-nums;
}

.home-stat-card__label {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line-height);
  letter-spacing: var(--text-caption-tracking);
  color: var(--color-smoke);
}

.home-tactical-tip {
  padding-block: var(--space-4xl) var(--space-4xl);
  border-top: var(--border-divider);
}

.home-tip-card {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-top-width: 3px;
  border-radius: var(--radius-card);
  transition: background-color var(--transition-card), border-color var(--transition-card);
  min-width: 0;
  max-height: 200px;
  overflow-y: auto;
}

.home-tip-card:hover {
  background-color: var(--color-basalt);
  border-color: var(--border-hover);
  border-top-color: var(--border-hover);
}

.home-tip-card--fire {
  border-top-color: var(--color-element-fire);
}

.home-tip-card__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-element-fire);
}

.home-tip-card__icon svg {
  width: 32px;
  height: 32px;
}

.home-tip-card__content {
  max-width: 680px;
  min-width: 0;
}

.home-tip-card__content h3 {
  margin-block-end: var(--space-sm);
}

.home-tip-card__content p {
  margin-block-end: 0;
  color: var(--color-smoke);
}

.home-beginner {
  padding-block: var(--space-4xl) var(--space-4xl);
  border-top: var(--border-divider);
}

.home-beginner__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-left: 3px solid var(--color-ember);
  border-radius: var(--radius-card);
  max-width: 680px;
  min-width: 0;
}

.home-beginner__card p {
  margin-block-end: 0;
  color: var(--color-smoke);
}

.home-beginner__card .btn {
  align-self: flex-start;
}

.home-final-cta {
  padding-block: var(--space-4xl) var(--space-5xl);
  border-top: var(--border-divider);
  text-align: center;
}

.home-final-cta__text {
  max-width: 680px;
  margin-inline: auto;
  margin-block-end: var(--space-lg);
  color: var(--color-smoke);
}

.home-final-cta__button {
  width: 100%;
  max-width: 400px;
  min-height: 48px;
  margin-inline: auto;
}

.home-final-cta__icon,
.home-final-cta__external-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.home-final-cta__external-icon {
  margin-inline-start: var(--space-2xs);
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .home-categories__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-breeding__layout,
  .home-gameplay__layout {
    grid-template-columns: 1fr;
  }

  .home-breeding__chart,
  .home-gameplay__stats {
    max-width: 100%;
  }

  .home-gameplay__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 767px) {
  .home-hero {
    min-height: 360px;
    padding: var(--space-2xl) var(--container-padding-mobile);
  }

  .home-hero__content {
    gap: var(--space-md);
  }

  .home-hero__cta {
    max-width: 100%;
  }

  .home-categories {
    padding-block: var(--space-3xl) var(--space-3xl);
  }

  .home-categories__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .home-category-card p {}

  .home-breeding,
  .home-gameplay,
  .home-tactical-tip,
  .home-beginner {
    padding-block: var(--space-3xl) var(--space-3xl);
  }

  .home-breeding__layout,
  .home-gameplay__layout {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .home-breeding__text,
  .home-breeding__chart,
  .home-gameplay__text,
  .home-gameplay__stats {
    max-width: 100%;
  }

  .home-breeding-table {
    font-size: var(--text-body-small-size);
  }

  .home-breeding-table th,
  .home-breeding-table td {
    padding: var(--space-xs) var(--space-sm);
  }

  .home-gameplay__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-tip-card {
    flex-direction: column;
    gap: var(--space-md);
    max-height: none;
  }

  .home-tip-card__icon {
    width: 40px;
    height: 40px;
  }

  .home-tip-card__icon svg {
    width: 24px;
    height: 24px;
  }

  .home-beginner__card {
    max-width: 100%;
  }

  .home-final-cta {
    padding-block: var(--space-3xl) var(--space-4xl);
  }

  .home-final-cta__button {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-category-card,
  .home-breeding__copy,
  .home-stat-card,
  .home-tip-card {
    transition-duration: 0.01ms;
  }
}

/* Page-owned styles for Adatvédelmi Irányelvek */

.adatvedelmi-main {
  padding-block: var(--space-3xl) var(--space-4xl);
}

.adatvedelmi-article {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.adatvedelmi-header {
  border-bottom: var(--border-divider);
  padding-bottom: var(--space-xl);
}

.adatvedelmi-header .overline {
  margin-bottom: var(--space-xs);
}

.adatvedelmi-header h1 {
  margin-bottom: var(--space-md);
}

.adatvedelmi-header__lead {
  max-width: 68ch;
  color: var(--color-smoke);
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line-height);
}

.adatvedelmi-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.adatvedelmi-section h2 {
  margin-bottom: 0;
}

.adatvedelmi-copy {
  max-width: 72ch;
}

.adatvedelmi-copy h3 {
  margin-bottom: var(--space-sm);
}

.adatvedelmi-copy p {
  margin-bottom: var(--space-md);
}

.adatvedelmi-copy p:last-child {
  margin-bottom: 0;
}

.adatvedelmi-list {
  list-style: disc;
  padding-left: var(--space-lg);
  margin-bottom: var(--space-md);
}

.adatvedelmi-list li {
  margin-bottom: var(--space-xs);
}

.adatvedelmi-list li:last-child {
  margin-bottom: 0;
}

.adatvedelmi-card {
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  max-width: 72ch;
}

.adatvedelmi-card h3 {
  margin-bottom: var(--space-sm);
}

.adatvedelmi-card p {
  margin-bottom: var(--space-md);
  color: var(--color-smoke);
}

.adatvedelmi-contact-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.adatvedelmi-contact-list li {
  margin-bottom: var(--space-xs);
  color: var(--color-ash);
}

.adatvedelmi-contact-list li:last-child {
  margin-bottom: 0;
}

.adatvedelmi-contact-list__label {
  color: var(--color-smoke);
  margin-right: var(--space-2xs);
}

.adatvedelmi-effective-date {
  color: var(--color-ember);
  font-weight: 600;
}

@media (min-width: 768px) {
  .adatvedelmi-main {
    padding-block: var(--space-4xl) var(--space-5xl);
  }

  .adatvedelmi-article {
    gap: var(--space-4xl);
  }

  .adatvedelmi-header {
    padding-bottom: var(--space-2xl);
  }

  .adatvedelmi-card {
    padding: var(--space-xl);
  }
}

@media (max-width: 767px) {
  .adatvedelmi-main {
    padding-block: var(--space-2xl) var(--space-3xl);
  }

  .adatvedelmi-article {
    gap: var(--space-3xl);
  }

  .adatvedelmi-header__lead {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
  }

  .adatvedelmi-copy,
  .adatvedelmi-card {
    max-width: 100%;
  }

  .adatvedelmi-list {
    padding-left: var(--space-md);
  }
}

/* Page-owned styles for Események és Küldetések */

.esemenyek-main {
  padding-block: var(--space-2xl) var(--space-4xl);
}

.esemenyek-container {
  max-width: var(--container-main-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

.page-header {
  margin-block-end: var(--space-2xl);
}

.page-header__summary {
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line-height);
  color: var(--color-smoke);
  max-width: 720px;
}

.esemenyek-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
}

.esemenyek-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.esemenyek-section {
  min-width: 0;
}

.section-copy--full {
  max-width: 100%;
}

.event-type-list,
.category-list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: var(--space-md);
}

.event-type-list li,
.category-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  margin-block-end: var(--space-xs);
  color: var(--color-ash);
}

.element-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-badge-chip);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line-height);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-tracking);
  border: 1px solid;
  background-color: transparent;
}

.element-chip--fire {
  color: var(--color-element-fire);
  border-color: var(--color-element-fire);
}

.element-chip--water {
  color: var(--color-element-water);
  border-color: var(--color-element-water);
}

.element-chip--nature {
  color: var(--color-element-nature);
  border-color: var(--color-element-nature);
}

.element-chip--magic {
  color: var(--color-element-magic);
  border-color: var(--color-element-magic);
}

.element-chip--light {
  color: var(--color-element-light);
  border-color: var(--color-element-light);
}

.tip-box {
  background-color: var(--color-obsidian);
  border: 1px solid var(--color-ember);
  border-inline-start: 3px solid var(--color-ember);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  margin-block-start: var(--space-md);
}

.tip-box__highlight {
  color: var(--color-ember-soft);
  font-weight: 600;
}

.priority-list {
  list-style: decimal;
  padding-inline-start: var(--space-lg);
  margin-block-end: var(--space-md);
}

.priority-list li {
  margin-block-end: var(--space-xs);
}

.tip-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.tip-card {
  background-color: var(--color-obsidian);
  border: 1px solid var(--color-border-subtle);
  border-block-start: 3px solid var(--color-ember);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  min-width: 0;
  transition: border-color var(--transition-card), background-color var(--transition-card);
}

.tip-card:hover {
  border-color: rgba(255, 107, 44, 0.6);
  background-color: var(--color-basalt);
}

.tip-card h3 {
  margin-block-end: var(--space-xs);
}

.tip-card ul {
  list-style: disc;
  padding-inline-start: var(--space-lg);
  margin-block-end: 0;
}

.tip-card li {
  margin-block-end: var(--space-2xs);
  color: var(--color-smoke);
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.faq-item {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: var(--color-obsidian);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-md);
  background-color: var(--color-obsidian);
  color: var(--color-ash);
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  transition: background-color var(--transition-card), color var(--transition-card);
}

.faq-question:hover {
  background-color: var(--color-basalt);
  color: var(--color-ember-soft);
}

.faq-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform var(--transition-accordion);
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background-color: var(--color-ember);
  border-radius: 1px;
}

.faq-icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.faq-icon::after {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-accordion);
  background-color: var(--color-basalt);
}

.faq-answer p {
  padding: var(--space-md);
  margin-block-end: 0;
  color: var(--color-smoke);
}

.esemenyek-cta-section {
  text-align: center;
}

.cta-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  max-width: 640px;
  margin-inline: auto;
}

.cta-wrapper p {
  color: var(--color-smoke);
  margin-block-end: 0;
}

.google-play-btn {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

.google-play-icon {
  width: 24px;
  height: 24px;
  background-color: var(--color-void);
  border-radius: 4px;
  position: relative;
  flex-shrink: 0;
}

.google-play-icon::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 7px;
  width: 0;
  height: 0;
  border-left: 10px solid var(--color-ember);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.esemenyek-sidebar {
  min-width: 0;
}

.sidebar-card {
  background-color: var(--color-obsidian);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.sidebar-card h2 {
  margin-block-end: 0;
}

.sidebar-section h3 {
  margin-block-end: var(--space-xs);
}

.sidebar-list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.sidebar-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  color: var(--color-smoke);
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-small-line-height);
}

.sidebar-list li span:first-child {
  color: var(--color-ash);
  font-weight: 600;
}

@media (min-width: 1025px) {
  .esemenyek-layout {
    grid-template-columns: minmax(0, 8fr) minmax(280px, 4fr);
    gap: var(--space-2xl);
  }

  .esemenyek-sidebar {
    position: sticky;
    top: var(--space-lg);
    align-self: start;
  }
}

@media (max-width: 1024px) {
  .esemenyek-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .tip-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .esemenyek-sidebar {
    order: 2;
  }
}

@media (max-width: 767px) {
  .esemenyek-main {
    padding-block: var(--space-xl) var(--space-3xl);
  }

  .esemenyek-container {
    padding-inline: var(--container-padding-mobile);
  }

  .page-header__summary {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
  }

  .tip-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .faq-question {
    font-size: var(--text-h4-size);
    padding: var(--space-sm) var(--space-md);
  }

  .faq-answer p {
    padding: var(--space-sm) var(--space-md);
  }

  .google-play-btn {
    position: sticky;
    bottom: 0;
    z-index: 10;
    border-radius: 0;
    padding-block: var(--space-md);
    padding-inline: var(--space-md);
    margin-block-start: var(--space-md);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
    padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
  }
}

@media (max-width: 480px) {
  .event-type-list li,
  .category-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xs);
  }

  .element-chip {
    min-width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-answer,
  .faq-icon,
  .tip-card {
    transition-duration: 0.01ms;
  }
}

/* Page-owned styles for szorny-tenyesztes-es-elemek */
.szorny-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  padding-block: var(--space-2xl) var(--space-4xl);
}

.szorny-page__header {
  display: flex;
  justify-content: center;
  padding-inline: var(--container-padding-mobile);
}

.szorny-page__header-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  max-width: 800px;
  width: 100%;
  text-align: center;
}

.szorny-page__header-inner .overline {
  margin-block-end: 0;
}

.szorny-page__header-inner h1 {
  margin-block-end: 0;
}

.szorny-page__lead {
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line-height);
  color: var(--color-smoke);
  margin-block-end: 0;
  max-width: 680px;
}

.szorny-page__element-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
}

.szorny-page__chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-badge-chip);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line-height);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-tracking);
  border: 1px solid var(--color-border-subtle);
  background-color: transparent;
}

.szorny-page__chip--fire {
  border-color: var(--color-element-fire);
  color: var(--color-element-fire);
}

.szorny-page__chip--water {
  border-color: var(--color-element-water);
  color: var(--color-element-water);
}

.szorny-page__chip--nature {
  border-color: var(--color-element-nature);
  color: var(--color-element-nature);
}

.szorny-page__chip--magic {
  border-color: var(--color-element-magic);
  color: var(--color-element-magic);
}

.szorny-page__chip--light {
  border-color: var(--color-element-light);
  color: var(--color-element-light);
}

.szorny-page__chip--dark {
  border-color: var(--color-element-dark);
  color: var(--color-element-dark);
}

.szorny-page__section {
  padding-inline: var(--container-padding-mobile);
}

.szorny-page__intro-copy,
.szorny-page__advanced-copy,
.szorny-page__faq-copy {
  max-width: 800px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.szorny-page__intro-copy h2,
.szorny-page__advanced-copy h2,
.szorny-page__faq-copy h2 {
  margin-block-end: 0;
}

.szorny-page__intro-copy h3,
.szorny-page__advanced-copy h3 {
  margin-block-end: 0;
}

.szorny-page__intro-copy p,
.szorny-page__advanced-copy p {
  margin-block-end: 0;}

.szorny-page__combinations-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  max-width: var(--container-main-max);
  margin-inline: auto;
}

.szorny-page__combinations-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}

.szorny-page__combinations-copy h2,
.szorny-page__combinations-copy h3 {
  margin-block-end: 0;
}

.szorny-page__combinations-copy p {
  margin-block-end: 0;}

.szorny-page__combination-table-wrap {
  min-width: 0;
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.szorny-page__table-title {
  margin-block-end: 0;
}

.szorny-page__combination-table,
.szorny-page__hatching-table {
  width: 100%;
  border-collapse: collapse;
}

.szorny-page__combination-table th,
.szorny-page__hatching-table th {
  background-color: var(--color-basalt);
  color: var(--color-ash);
  font-family: var(--font-heading);
  font-size: var(--text-body-small-size);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--color-border-subtle);
}

.szorny-page__combination-table td,
.szorny-page__hatching-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--border-divider);
  color: var(--color-smoke);
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-small-line-height);
  font-variant-numeric: tabular-nums;
}

.szorny-page__combination-table tbody tr,
.szorny-page__hatching-table tbody tr {
  transition: background-color var(--transition-card);
}

.szorny-page__combination-table tbody tr:hover,
.szorny-page__hatching-table tbody tr:hover {
  background-color: var(--color-basalt);
}

.szorny-page__combination-table tbody tr:nth-child(even),
.szorny-page__hatching-table tbody tr:nth-child(even) {
  background-color: var(--color-row-tint);
}

.szorny-page__combination-table tbody tr:nth-child(even):hover,
.szorny-page__hatching-table tbody tr:nth-child(even):hover {
  background-color: var(--color-basalt);
}

.szorny-page__element-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-inline-end: var(--space-xs);
  vertical-align: middle;
}

.szorny-page__element-dot--fire {
  background-color: var(--color-element-fire);
}

.szorny-page__element-dot--water {
  background-color: var(--color-element-water);
}

.szorny-page__element-dot--nature {
  background-color: var(--color-element-nature);
}

.szorny-page__element-dot--magic {
  background-color: var(--color-element-magic);
}

.szorny-page__element-dot--light {
  background-color: var(--color-element-light);
}

.szorny-page__element-dot--dark {
  background-color: var(--color-element-dark);
}

.szorny-page__hatching-copy {
  max-width: 1000px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-block-end: var(--space-xl);
}

.szorny-page__hatching-copy h2,
.szorny-page__hatching-copy h3 {
  margin-block-end: 0;
}

.szorny-page__hatching-copy p {
  margin-block-end: 0;}

.szorny-page__hatching-table-wrap {
  max-width: 1000px;
  margin-inline: auto;
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  overflow-x: auto;
}

.szorny-page__accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.szorny-page__accordion-item {
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.szorny-page__accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  background-color: transparent;
  border: none;
  color: var(--color-ash);
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  font-weight: 600;
  line-height: var(--text-h4-line-height);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-card), color var(--transition-card);
}

.szorny-page__accordion-trigger:hover {
  background-color: var(--color-basalt);
  color: var(--color-ember-soft);
}

.szorny-page__accordion-trigger:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
}

.szorny-page__accordion-icon {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.szorny-page__accordion-icon::before,
.szorny-page__accordion-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background-color: var(--color-ember);
  transform: translate(-50%, -50%);
  transition: transform var(--transition-accordion);
}

.szorny-page__accordion-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.szorny-page__accordion-trigger[aria-expanded="true"] .szorny-page__accordion-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.szorny-page__accordion-panel {
  padding: 0 var(--space-lg) var(--space-md);
  color: var(--color-smoke);
}

.szorny-page__accordion-panel p {
  margin-block-end: 0;}

.szorny-page__cta {
  display: flex;
  justify-content: center;
  padding-inline: var(--container-padding-mobile);
}

.szorny-page__cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  max-width: 400px;
  width: 100%;
  text-align: center;
}

.szorny-page__cta-inner h2 {
  margin-block-end: 0;
}

.szorny-page__cta-inner p {
  margin-block-end: 0;
  color: var(--color-smoke);
}

.szorny-page__cta-button {
  width: 100%;
  min-height: 48px;
  gap: var(--space-xs);
}

.szorny-page__cta-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.szorny-page__external-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-inline-start: var(--space-2xs);
}

@media (min-width: 768px) {
  .szorny-page {
    padding-block: var(--space-3xl) var(--space-5xl);
  }

  .szorny-page__header,
  .szorny-page__section {
    padding-inline: var(--container-padding-tablet-desktop);
  }

  .szorny-page__combinations-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .szorny-page__combination-table-wrap {
    padding: var(--space-lg);
  }

  .szorny-page__hatching-table-wrap {
    padding: var(--space-lg);
  }
}

@media (max-width: 767px) {
  .szorny-page__combination-table thead,
  .szorny-page__hatching-table thead {
    display: none;
  }

  .szorny-page__combination-table tbody,
  .szorny-page__hatching-table tbody {
    display: block;
  }

  .szorny-page__combination-table tr,
  .szorny-page__hatching-table tr {
    display: block;
    margin-block-end: var(--space-md);
    border: var(--border-default);
    border-radius: var(--radius-card);
    background-color: var(--color-obsidian);
    padding: var(--space-sm);
  }

  .szorny-page__combination-table td,
  .szorny-page__hatching-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    border-bottom: none;
    padding: var(--space-xs) 0;
    color: var(--color-ash);
  }

  .szorny-page__combination-table td::before,
  .szorny-page__hatching-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-smoke);
    flex-shrink: 0;
  }

  .szorny-page__combination-table tbody tr:nth-child(even),
  .szorny-page__hatching-table tbody tr:nth-child(even) {
    background-color: var(--color-obsidian);
  }

  .szorny-page__combination-table tbody tr:hover,
  .szorny-page__hatching-table tbody tr:hover {
    background-color: var(--color-obsidian);
    border-color: var(--color-ember);
  }

  .szorny-page__cta {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background-color: var(--color-void);
    padding-block: var(--space-sm);
    padding-inline: var(--container-padding-mobile);
    padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));
    border-top: var(--border-default);
  }

  .szorny-page__cta-inner {
    max-width: none;
  }

  .szorny-page__cta-inner h2,
  .szorny-page__cta-inner p {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .szorny-page__accordion-icon::before,
  .szorny-page__accordion-icon::after {
    transition: none;
  }

  .szorny-page__combination-table tbody tr,
  .szorny-page__hatching-table tbody tr {
    transition: none;
  }
}

/* Általános Szerződési Feltételek — page-owned styles */

.aszf-page {
    padding-block: var(--space-3xl) var(--space-4xl);
}

.aszf-container {
    max-width: 800px;
    margin-inline: auto;
}

.aszf-header {
    margin-block-end: var(--space-3xl);
    padding-block-end: var(--space-xl);
    border-block-end: 1px solid var(--color-border-subtle);
}

.aszf-header .overline {
    margin-block-end: var(--space-sm);
}

.aszf-header h1 {
    margin-block-end: var(--space-md);
}

.aszf-header__summary {
    color: var(--color-smoke);
    font-size: var(--text-body-large-size);
    line-height: var(--text-body-large-line-height);
    margin-block-end: var(--space-lg);
    max-width: 68ch;
}

.aszf-header__date {
    color: var(--color-ember);
    font-weight: 600;
    margin-block-end: 0;
}

.aszf-header__date time {
    color: var(--color-ember);
}

.aszf-section {
    margin-block-end: var(--space-3xl);
    padding-block-end: var(--space-3xl);
    border-block-end: 1px solid var(--color-border-subtle);
}

.aszf-section:last-child {
    margin-block-end: 0;
    padding-block-end: 0;
    border-block-end: none;
}

.aszf-section h2 {
    margin-block-end: var(--space-xl);
    color: var(--color-ash);
}

.aszf-section__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.aszf-section__content h3 {
    margin-block-start: var(--space-lg);
    margin-block-end: var(--space-sm);
    color: var(--color-ash);
}

.aszf-section__content h3:first-child {
    margin-block-start: 0;
}

.aszf-section__content p {margin-block-end: 0;
}

.aszf-section__content ul {
    max-width: 68ch;
    margin-block-end: 0;
    padding-inline-start: var(--space-lg);
}

.aszf-section__content ul li {
    margin-block-end: var(--space-xs);
}

.aszf-section__content ul li:last-child {
    margin-block-end: 0;
}

.aszf-list {
    list-style: disc;
}

.aszf-contact-list {
    list-style: none;
    padding-inline-start: 0;
}

.aszf-contact-list li {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding-block: var(--space-sm);
    border-block-end: 1px solid var(--color-border-subtle);
}

.aszf-contact-list li:last-child {
    border-block-end: none;
}

.aszf-contact-list strong {
    color: var(--color-ash);
}

.aszf-contact-list a {
    color: var(--color-ember);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.aszf-contact-list a:hover {
    color: var(--color-ember-soft);
}

.aszf-callout {
    padding: var(--space-lg);
    border-radius: var(--radius-card);
    background-color: var(--color-obsidian);
    border: 1px solid var(--color-border-subtle);
    border-inline-start: 3px solid var(--color-ember);
    max-width: 68ch;
}

.aszf-callout--ember {
    border-inline-start-color: var(--color-ember);
}

.aszf-callout p {
    margin-block-end: 0;
    color: var(--color-ash);
}

.aszf-date-highlight {
    color: var(--color-ember);
    font-weight: 600;
}

.aszf-section__content a {
    color: var(--color-ember);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.aszf-section__content a:hover {
    color: var(--color-ember-soft);
}

@media (max-width: 767px) {
    .aszf-page {
        padding-block: var(--space-2xl) var(--space-3xl);
    }

    .aszf-header {
        margin-block-end: var(--space-2xl);
        padding-block-end: var(--space-lg);
    }

    .aszf-header__summary {
        font-size: var(--text-body-size);
        line-height: var(--text-body-line-height);
        margin-block-end: var(--space-md);
    }

    .aszf-section {
        margin-block-end: var(--space-2xl);
        padding-block-end: var(--space-2xl);
    }

    .aszf-section h2 {
        margin-block-end: var(--space-lg);
    }

    .aszf-section__content h3 {
        margin-block-start: var(--space-md);
    }

    .aszf-callout {
        padding: var(--space-md);
    }

    .aszf-contact-list li {
        padding-block: var(--space-xs);
    }
}

@media (prefers-reduced-motion: reduce) {
    .aszf-page,
    .aszf-header,
    .aszf-section,
    .aszf-section__content,
    .aszf-callout,
    .aszf-contact-list li {
        transition: none;
    }
}

/* Page-owned styles for Kezdők Útmutatója */

.kezdok-utmutatoja {
  --kg-copy-max: 680px;
  --kg-hero-copy-max: 720px;
  --kg-gap-md: var(--space-md);
  --kg-gap-lg: var(--space-lg);
  --kg-gap-xl: var(--space-xl);
  --kg-gap-2xl: var(--space-2xl);
}

/* Hero */
.kg-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 520px;
  overflow: hidden;
  background-color: var(--color-obsidian);
  border-bottom: var(--border-default);
}

.kg-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.kg-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 14, 20, 0.55) 0%, rgba(11, 14, 20, 0.85) 100%);
}

.kg-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.kg-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--kg-gap-md);
  padding: var(--space-3xl) var(--container-padding-mobile);
  margin-inline: auto;
  max-width: var(--kg-hero-copy-max);
  text-align: center;
}

.kg-hero__content h1 {
  margin-block-end: 0;
  color: var(--color-ash);
}

.kg-hero__lead {
  margin-block-end: 0;
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line-height);
  color: var(--color-ash);
}

.kg-hero__facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block-end: 0;
  padding-inline-start: 0;
  list-style: none;
  color: var(--color-smoke);
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-small-line-height);
}

.kg-hero__facts li {
  margin-block-end: 0;
}

.kg-hero__cta {
  margin-block-start: var(--space-xs);
}

/* Sections */
.kg-section {
  padding-block: var(--space-3xl);
  border-bottom: var(--border-divider);
}

.kg-section:last-of-type {
  border-bottom: none;
}

.kg-section__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kg-gap-2xl);
  align-items: start;
}

.kg-section__inner--single {
  grid-template-columns: minmax(0, 1fr);
}

.kg-section__copy {
  min-width: 0;
  max-width: var(--kg-copy-max);
}

.kg-section__copy h2,
.kg-section__copy h3 {
  margin-block-end: var(--space-sm);
}

.kg-section__copy p {
  margin-block-end: var(--space-md);
}

.kg-section__copy ul,
.kg-section__copy ol {
  margin-block-end: var(--space-md);
  padding-inline-start: var(--space-lg);
}

.kg-section__copy li {
  margin-block-end: var(--space-xs);
}

.kg-section__note {
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-small-line-height);
  color: var(--color-smoke);
  border-inline-start: 3px solid var(--color-ember);
  padding-inline-start: var(--space-md);
  margin-block-start: var(--space-sm);
}

.kg-section__media {
  min-width: 0;
  margin-block-end: 0;
}

.kg-section__media--gameplay {
  width: 100%;
  max-width: 480px;
  justify-self: center;
}

.kg-section__media img {
  width: 100%;
  height: auto;
  border: var(--border-default);
  border-radius: var(--radius-card);
  background-color: var(--color-obsidian);
}

.kg-section__media figcaption {
  text-align: left;
  margin-block-start: var(--space-xs);
}

/* Element chart */
.kg-element-chart {
  width: 100%;
  max-width: 480px;
  justify-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xs);
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-md);
}

.kg-element-chart__row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xs);
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-badge-chip);
  background-color: var(--color-row-tint);
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-small-line-height);
}

.kg-element-chart__row--header {
  background-color: var(--color-basalt);
  color: var(--color-smoke);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.kg-element-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-badge-chip);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line-height);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-tracking);
  border: 1px solid;
  background-color: transparent;
}

.kg-element-chip--fire {
  color: var(--color-element-fire);
  border-color: var(--color-element-fire);
}

.kg-element-chip--water {
  color: var(--color-element-water);
  border-color: var(--color-element-water);
}

.kg-element-chip--nature {
  color: var(--color-element-nature);
  border-color: var(--color-element-nature);
}

.kg-element-chip--magic {
  color: var(--color-element-magic);
  border-color: var(--color-element-magic);
}

.kg-element-chip--light {
  color: var(--color-element-light);
  border-color: var(--color-element-light);
}

.kg-element-chip--dark {
  color: var(--color-element-dark);
  border-color: var(--color-element-dark);
}

/* Breeding and rune cards */
.kg-breeding-card,
.kg-rune-card {
  width: 100%;
  max-width: 380px;
  justify-self: center;
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.kg-breeding-card h3,
.kg-rune-card h3 {
  margin-block-end: 0;
}

.kg-breeding-card p,
.kg-rune-card p {
  margin-block-end: 0;
  color: var(--color-smoke);
}

.kg-breeding-card ul,
.kg-rune-card ul {
  margin-block-end: 0;
  padding-inline-start: var(--space-lg);
  color: var(--color-ash);
}

.kg-breeding-card li,
.kg-rune-card li {
  margin-block-end: var(--space-xs);
}

/* Resource list */
.kg-resource-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
  padding-inline-start: 0;
  list-style: none;
}

.kg-resource-list li {
  margin-block-end: 0;
  padding: var(--space-sm);
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-radius: var(--radius-card);
}

/* Mistake list */
.kg-mistake-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
  padding-inline-start: 0;
  list-style: none;
}

.kg-mistake-list li {
  margin-block-end: 0;
  padding: var(--space-sm);
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-inline-start: 3px solid var(--color-ember);
  border-radius: var(--radius-card);
}

/* Checklist */
.kg-checklist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xs);
  padding-inline-start: 0;
  list-style: none;
}

.kg-checklist li {
  margin-block-end: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
}

.kg-checklist li::before {
  content: "✓";
  color: var(--color-rune);
  font-weight: 700;
  flex-shrink: 0;
}

/* Guide links */
.kg-guide-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-inline-start: 0;
  list-style: none;
}

.kg-guide-links li {
  margin-block-end: 0;
}

.kg-guide-links a {
  font-weight: 600;
}

/* Summary CTA */
.kg-summary-cta {
  display: flex;
  justify-content: flex-start;
  margin-block-start: var(--space-lg);
}

.kg-summary-cta .btn {
  width: 100%;
  max-width: 360px;
}

/* Tablet */
@media (min-width: 768px) {
  .kg-hero {
    min-height: 600px;
  }

  .kg-hero__content {
    padding: var(--space-4xl) var(--container-padding-tablet-desktop);
  }

  .kg-section {
    padding-block: var(--space-4xl);
  }

  .kg-section__inner {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
    gap: var(--kg-gap-2xl);
  }

  .kg-section__inner--single {
    grid-template-columns: minmax(0, 1fr);
  }

  .kg-section__media--gameplay {
    max-width: 400px;
    justify-self: end;
  }

  .kg-element-chart {
    max-width: 400px;
    justify-self: end;
  }

  .kg-breeding-card,
  .kg-rune-card {
    max-width: 340px;
    justify-self: end;
  }

  .kg-resource-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kg-mistake-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kg-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .kg-section__inner {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
  }

  .kg-section__media--gameplay {
    max-width: 480px;
  }

  .kg-element-chart {
    max-width: 480px;
  }

  .kg-breeding-card,
  .kg-rune-card {
    max-width: 380px;
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .kg-hero {
    min-height: 480px;
  }

  .kg-hero__content {
    padding: var(--space-2xl) var(--container-padding-mobile);
  }

  .kg-section {
    padding-block: var(--space-2xl);
  }

  .kg-section__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kg-gap-xl);
  }

  .kg-section__media--gameplay,
  .kg-element-chart,
  .kg-breeding-card,
  .kg-rune-card {
    max-width: 100%;
    justify-self: stretch;
  }

  .kg-element-chart__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs);
  }

  .kg-element-chart__row--header {
    display: none;
  }

  .kg-element-chart__row span:not(.kg-element-chip) {
    padding-inline-start: var(--space-md);
  }

  .kg-resource-list,
  .kg-mistake-list,
  .kg-checklist {
    grid-template-columns: minmax(0, 1fr);
  }

  .kg-summary-cta .btn {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kg-hero__media::after {
    transition: none;
  }
}

/* Csapat Háborúk és Aréna page-specific styles */

.csapat-main {
  display: block;
  width: 100%;
}

/* Page header */
.page-header {
  padding-block: var(--space-2xl) var(--space-xl);
  border-bottom: var(--border-divider);
}

.page-header__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}

.page-header__summary {
  max-width: 68ch;
  color: var(--color-smoke);
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line-height);
}

.page-header__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-start: var(--space-xs);
}

/* Main layout */
.csapat-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-xl);
  align-items: start;
  padding-block: var(--space-2xl) var(--space-3xl);
}

.csapat-layout__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.csapat-layout__sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  position: sticky;
  top: var(--space-lg);
}

/* Content sections */
.content-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.content-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.content-section__body > h3 {
  margin-block-start: var(--space-md);
}

.content-section__body > h3:first-child {
  margin-block-start: 0;
}

.content-section__body--split {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: var(--space-xl);
  align-items: start;
}

.content-section__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.content-section__text > h3 {
  margin-block-start: var(--space-md);
}

.content-section__text > h3:first-child {
  margin-block-start: 0;
}

.content-section__figure {
  min-width: 0;
  margin: 0;
}

.content-section__figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  border: var(--border-default);
  object-fit: cover;
}

.content-section__figure--square img {
  aspect-ratio: 1 / 1;
}

.content-section__figure--wide img {
  aspect-ratio: 16 / 9;
}

.content-section__figure figcaption {
  text-align: left;
}

/* Tables */
.table-responsive {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: var(--space-md);
}

.liga-table,
.reward-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.liga-table th,
.liga-table td,
.reward-table th,
.reward-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--border-divider);
  text-align: left;
  vertical-align: middle;
}

.liga-table thead th,
.reward-table thead th {
  background-color: var(--color-basalt);
  color: var(--color-ash);
  font-family: var(--font-heading);
  font-size: var(--text-body-small-size);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.liga-table tbody tr,
.reward-table tbody tr {
  transition: background-color var(--transition-card);
}

.liga-table tbody tr:hover,
.reward-table tbody tr:hover {
  background-color: var(--color-row-tint);
}

.liga-table tbody th,
.reward-table tbody th {
  font-weight: 600;
  color: var(--color-ash);
}

.liga-table tbody td,
.reward-table tbody td {
  color: var(--color-smoke);
}

/* Tips cards */
.tips-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  width: 100%;
}

.tip-card {
  min-width: 0;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: border-color var(--transition-card), background-color var(--transition-card);
}

.tip-card:hover {
  border-color: var(--border-hover);
  background-color: var(--color-basalt);
}

.tip-card h3 {
  margin-block-end: var(--space-xs);
}

.tip-card ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-inline-start: var(--space-lg);
}

.tip-card li {
  color: var(--color-smoke);
}

/* FAQ accordion */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
}

.faq-item {
  border: var(--border-default);
  border-radius: var(--radius-card);
  background-color: var(--color-obsidian);
  overflow: hidden;
}

.faq-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  min-height: 48px;
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-obsidian);
  color: var(--color-ash);
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  font-weight: var(--text-h4-weight);
  line-height: var(--text-h4-line-height);
  text-align: left;
  transition: background-color var(--transition-card), color var(--transition-card);
}

.faq-item__trigger:hover {
  background-color: var(--color-basalt);
  color: var(--color-ember-soft);
}

.faq-item__trigger[aria-expanded="true"] {
  background-color: var(--color-basalt);
}

.faq-item__icon {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  transition: transform var(--transition-accordion);
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background-color: var(--color-ember);
  transform: translate(-50%, -50%);
  transition: transform var(--transition-accordion);
}

.faq-item__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item__trigger[aria-expanded="true"] .faq-item__icon {
  transform: rotate(45deg);
}

.faq-item__panel {
  padding: var(--space-md) var(--space-lg);
  border-top: var(--border-divider);
  background-color: var(--color-obsidian);
  color: var(--color-smoke);
}

.faq-item__panel[hidden] {
  display: none;
}

/* Sidebar */
.sidebar-card {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.sidebar-card__title {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line-height);
  font-weight: var(--text-h4-weight);
  margin-block-end: 0;
}

.sidebar-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-inline-start: 0;
}

.sidebar-card__list li {
  margin-block-end: 0;
}

.sidebar-card__list a {
  display: block;
  padding: var(--space-xs) 0;
  color: var(--color-smoke);
  transition: color var(--transition-card);
}

.sidebar-card__list a:hover {
  color: var(--color-ember-soft);
}

.sidebar-card__facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-block-end: 0;
}

.sidebar-card__facts dt {
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-tracking);
  text-transform: uppercase;
  color: var(--color-smoke);
  margin-block-end: var(--space-2xs);
}

.sidebar-card__facts dd {
  font-size: var(--text-body-small-size);
  color: var(--color-ash);
  margin-block-end: 0;
}

/* Google Play CTA */
.google-play-cta {
  padding-block: var(--space-3xl);
  border-top: var(--border-divider);
  background-color: var(--color-void);
}

.google-play-cta .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
}

.google-play-cta h2 {
  margin-block-end: 0;
}

.google-play-cta p {margin-block-end: 0;
  color: var(--color-smoke);
}

.google-play-btn {
  min-width: 280px;
  width: 100%;
  max-width: 420px;
}

.google-play-icon {
  flex-shrink: 0;
}

/* Responsive */
@media (min-width: 1024px) and (max-width: 1199px) {
  .csapat-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--space-lg);
  }
}

@media (max-width: 1023px) {
  .csapat-layout {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .csapat-layout__sidebar {
    position: static;
    order: -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  .sidebar-card {
    flex: 1 1 240px;
  }

  .content-section__body--split {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .content-section__figure--square img {
    aspect-ratio: 4 / 3;
  }

  .content-section__figure--wide img {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 767px) {
  .page-header {
    padding-block: var(--space-xl) var(--space-lg);
  }

  .csapat-layout {
    padding-block: var(--space-xl) var(--space-2xl);
  }

  .csapat-layout__sidebar {
    flex-direction: column;
    gap: var(--space-md);
  }

  .sidebar-card {
    flex: 1 1 auto;
  }

  .tips-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .faq-item__trigger {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-body-size);
  }

  .faq-item__panel {
    padding: var(--space-sm) var(--space-md);
  }

  .google-play-cta {
    padding-block: var(--space-2xl);
  }

  .google-play-btn {
    min-width: 0;
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 479px) {
  .page-header__summary {
    font-size: var(--text-body-size);
  }

  .liga-table,
  .reward-table {
    min-width: 480px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item__icon,
  .faq-item__icon::before,
  .faq-item__icon::after,
  .faq-item__trigger,
  .tip-card,
  .liga-table tbody tr,
  .reward-table tbody tr {
    transition-duration: 0.01ms !important;
  }

  .faq-item__trigger[aria-expanded="true"] .faq-item__icon {
    transform: rotate(45deg);
  }
}

/* Harcászati Stratégiák page-owned styles */

.harcaszati-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  padding-block: var(--space-2xl) var(--space-4xl);
}

.harcaszati-main section {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.harcaszati-intro__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: flex-start;
}

.harcaszati-intro__lead {
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line-height);
  color: var(--color-ash);
  max-width: 800px;
}

.harcaszati-copy {
  max-width: 800px;
  align-self: flex-start;
}

.harcaszati-copy > * + * {
  margin-block-start: var(--space-md);
}

.harcaszati-copy p {
  margin-block-end: 0;
}

.harcaszati-statusz-lista,
.harcaszati-fejlesztesi-tippek {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-inline-start: var(--space-lg);
  margin-block-end: 0;
}

.harcaszati-statusz-lista li,
.harcaszati-fejlesztesi-tippek li {
  margin-block-end: 0;
}

.harcaszati-elem-tabla,
.harcaszati-runa-tabla {
  width: 100%;
  max-width: var(--container-main-max);
  align-self: center;
  border: var(--border-default);
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: var(--color-obsidian);
}

.harcaszati-elem-tabla__fejlec,
.harcaszati-runa-tabla__fejlec {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background-color: var(--color-basalt);
  padding: var(--space-sm) var(--space-md);
  font-weight: 600;
  color: var(--color-ash);
  border-bottom: var(--border-default);
}

.harcaszati-elem-tabla__sor,
.harcaszati-runa-tabla__sor {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--border-divider);
  align-items: center;
}

.harcaszati-elem-tabla__sor:last-child,
.harcaszati-runa-tabla__sor:last-child {
  border-bottom: none;
}

.harcaszati-elem-tabla__sor:nth-child(even),
.harcaszati-runa-tabla__sor:nth-child(even) {
  background-color: var(--color-row-tint);
}

.harcaszati-elem-tabla__nev,
.harcaszati-runa-tabla__nev {
  font-weight: 600;
  color: var(--color-ash);
}

.harcaszati-elem-tabla__sor--tuz .harcaszati-elem-tabla__nev {
  color: var(--color-element-fire);
}

.harcaszati-elem-tabla__sor--viz .harcaszati-elem-tabla__nev {
  color: var(--color-element-water);
}

.harcaszati-elem-tabla__sor--termeszet .harcaszati-elem-tabla__nev {
  color: var(--color-element-nature);
}

.harcaszati-elem-tabla__sor--magia .harcaszati-elem-tabla__nev {
  color: var(--color-element-magic);
}

.harcaszati-elem-tabla__sor--feny .harcaszati-elem-tabla__nev {
  color: var(--color-element-light);
}

.harcaszati-elem-tabla__sor--sotet .harcaszati-elem-tabla__nev {
  color: var(--color-element-dark);
}

.harcaszati-szerep-racs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
  width: 100%;
}

.harcaszati-szerep-kartya {
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
  transition: border-color var(--transition-card), background-color var(--transition-card);
}

.harcaszati-szerep-kartya:hover {
  border-color: var(--border-hover);
  background-color: var(--color-basalt);
}

.harcaszati-szerep-kartya h4 {
  margin-block-end: 0;
}

.harcaszati-szerep-kartya p {
  margin-block-end: 0;
  color: var(--color-smoke);
}

.harcaszati-szerep-kartya--tank {
  border-top: 3px solid var(--color-element-nature);
}

.harcaszati-szerep-kartya--sebzo {
  border-top: 3px solid var(--color-element-fire);
}

.harcaszati-szerep-kartya--tamogato {
  border-top: 3px solid var(--color-rune);
}

.harcaszati-szerep-kartya--iranyito {
  border-top: 3px solid var(--color-element-magic);
}

.harcaszati-pelda-csapat {
  width: 100%;
  max-width: var(--container-main-max);
  align-self: center;
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.harcaszati-pelda-csapat h3,
.harcaszati-pelda-csapat p {
  margin-block-end: 0;
}

.harcaszati-runa-beallitas-racs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
  width: 100%;
}

.harcaszati-runa-kartya {
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
  transition: border-color var(--transition-card), background-color var(--transition-card);
}

.harcaszati-runa-kartya:hover {
  border-color: var(--border-hover);
  background-color: var(--color-basalt);
}

.harcaszati-runa-kartya h4,
.harcaszati-runa-kartya p {
  margin-block-end: 0;
}

.harcaszati-runa-kartya p {
  color: var(--color-ember);
  font-weight: 600;
}

.harcaszati-pelda-csapat-racs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  width: 100%;
}

.harcaszati-pelda-kartya {
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
  transition: border-color var(--transition-card), background-color var(--transition-card);
}

.harcaszati-pelda-kartya:hover {
  border-color: var(--border-hover);
  background-color: var(--color-basalt);
}

.harcaszati-pelda-kartya h3,
.harcaszati-pelda-kartya p,
.harcaszati-pelda-kartya ul {
  margin-block-end: 0;
}

.harcaszati-pelda-kartya ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-inline-start: var(--space-lg);
}

.harcaszati-pelda-kartya li {
  margin-block-end: 0;
}

.harcaszati-pelda-kartya--agressziv {
  border-top: 3px solid var(--color-element-fire);
}

.harcaszati-pelda-kartya--vedekező {
  border-top: 3px solid var(--color-element-water);
}

.harcaszati-pelda-kartya--kiegyensulyozott {
  border-top: 3px solid var(--color-rune);
}

.harcaszati-hiba-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-inline-start: var(--space-lg);
  margin-block-end: 0;
  max-width: 800px;
  align-self: flex-start;
}

.harcaszati-hiba-lista li {
  margin-block-end: 0;
}

.harcaszati-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  width: 100%;
}

.harcaszati-cta__gomb {
  flex: 1 1 300px;
  max-width: 300px;
}

@media (min-width: 1024px) {
  .harcaszati-main {
    gap: var(--space-4xl);
  }
}

@media (max-width: 1023px) {
  .harcaszati-szerep-racs,
  .harcaszati-runa-beallitas-racs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .harcaszati-pelda-csapat-racs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .harcaszati-pelda-kartya:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .harcaszati-main {
    gap: var(--space-3xl);
    padding-block: var(--space-xl) var(--space-3xl);
  }

  .harcaszati-main section {
    gap: var(--space-lg);
  }

  .harcaszati-intro__lead {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
  }

  .harcaszati-elem-tabla__fejlec,
  .harcaszati-runa-tabla__fejlec {
    display: none;
  }

  .harcaszati-elem-tabla__sor,
  .harcaszati-runa-tabla__sor {
    grid-template-columns: 1fr;
    gap: var(--space-2xs);
    padding: var(--space-md);
    border-inline-start: 3px solid var(--color-border-subtle);
  }

  .harcaszati-elem-tabla__sor--tuz {
    border-inline-start-color: var(--color-element-fire);
  }

  .harcaszati-elem-tabla__sor--viz {
    border-inline-start-color: var(--color-element-water);
  }

  .harcaszati-elem-tabla__sor--termeszet {
    border-inline-start-color: var(--color-element-nature);
  }

  .harcaszati-elem-tabla__sor--magia {
    border-inline-start-color: var(--color-element-magic);
  }

  .harcaszati-elem-tabla__sor--feny {
    border-inline-start-color: var(--color-element-light);
  }

  .harcaszati-elem-tabla__sor--sotet {
    border-inline-start-color: var(--color-element-dark);
  }

  .harcaszati-elem-tabla__sor span:not(:first-child),
  .harcaszati-runa-tabla__sor span:not(:first-child) {
    padding-inline-start: var(--space-md);
  }

  .harcaszati-szerep-racs,
  .harcaszati-runa-beallitas-racs,
  .harcaszati-pelda-csapat-racs {
    grid-template-columns: 1fr;
  }

  .harcaszati-pelda-kartya:last-child {
    grid-column: auto;
  }

  .harcaszati-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .harcaszati-cta__gomb {
    max-width: none;
    flex: none;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .harcaszati-szerep-kartya,
  .harcaszati-runa-kartya,
  .harcaszati-pelda-kartya {
    transition: none;
  }
}

/* Page-owned styles for szorny-adatbazis */
.szorny-adatbazis-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  padding-block: var(--space-3xl) var(--space-4xl);
}

.szorny-adatbazis-main > section {
  width: 100%;
}

/* Oldal fejléc */
.szdb-page-header {
  display: flex;
  justify-content: flex-start;
}

.szdb-page-header__inner {
  width: 70%;
  max-width: 840px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-align: left;
}

.szdb-page-header__lead {
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line-height);
  color: var(--color-smoke);
  max-width: 68ch;
}

/* Bevezető és használati útmutató */
.szdb-intro {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

.szdb-intro__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}

.szdb-intro__copy h2,
.szdb-intro__copy h3 {
  margin-block-end: 0;
}

.szdb-intro__copy p {
  margin-block-end: 0;
}

.szdb-intro__list {
  margin-block-end: 0;
  padding-inline-start: var(--space-lg);
  list-style: disc;
}

.szdb-intro__list li {
  margin-block-end: var(--space-xs);
}

.szdb-intro__aside {
  min-width: 0;
}

.szdb-intro__aside-card {
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.szdb-intro__aside-card h4 {
  margin-block-end: 0;
}

.szdb-intro__aside-card p {
  margin-block-end: 0;
  color: var(--color-smoke);
}

/* Szűrőpanel */
.szdb-filter__panel {
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.szdb-filter__panel h2 {
  margin-block-end: 0;
}

.szdb-filter__description {
  margin-block-end: 0;
  color: var(--color-smoke);
}

.szdb-filter__controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: var(--space-md);
  align-items: end;
}

.szdb-filter__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.szdb-filter__group label {
  font-size: var(--text-body-small-size);
  font-weight: 600;
  color: var(--color-ash);
}

.szdb-filter__select {
  background-color: var(--color-basalt);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-button-input);
  color: var(--color-ash);
  padding: var(--space-sm);
  min-height: 48px;
  width: 100%;
  font: inherit;
}

.szdb-filter__select:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.szdb-filter__reset {
  min-height: 48px;
  white-space: nowrap;
}

/* Kiemelt szörnyek */
.szdb-featured {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.szdb-featured h2 {
  margin-block-end: 0;
}

.szdb-featured__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.szdb-monster-card {
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: background-color var(--transition-card), border-color var(--transition-card);
  min-width: 0;
}

.szdb-monster-card:hover {
  background-color: var(--color-basalt);
  border-color: rgba(255, 107, 44, 0.6);
}

.szdb-monster-card--fire {
  border-top: 3px solid var(--color-element-fire);
}

.szdb-monster-card--water {
  border-top: 3px solid var(--color-element-water);
}

.szdb-monster-card--nature {
  border-top: 3px solid var(--color-element-nature);
}

.szdb-monster-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.szdb-monster-card__link:hover {
  color: inherit;
}

.szdb-monster-card__image-wrap {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  background-color: var(--color-void);
}

.szdb-monster-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.szdb-monster-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  text-align: center;
  flex: 1;
}

.szdb-monster-card__body h3 {
  margin-block-end: 0;
}

.szdb-monster-card__body p {
  margin-block-end: 0;
  color: var(--color-smoke);
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-small-line-height);
}

.szdb-monster-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: center;
  margin-top: auto;
}

.badge--fire {
  border-color: var(--color-element-fire);
  color: var(--color-element-fire);
}

.badge--water {
  border-color: var(--color-element-water);
  color: var(--color-element-water);
}

.badge--nature {
  border-color: var(--color-element-nature);
  color: var(--color-element-nature);
}

/* Teljes szörny adatbázis táblázat */
.szdb-table-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.szdb-table-section h2 {
  margin-block-end: 0;
}

.szdb-table-section__description {
  margin-block-end: 0;
  color: var(--color-smoke);
  max-width: 68ch;
}

.szdb-table-container {
  width: 100%;
  max-width: var(--container-data-bleed-max);
  margin-inline: auto;
  overflow-x: auto;
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-radius: var(--radius-card);
}

.szdb-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.szdb-table th,
.szdb-table td {
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border-subtle);
  text-align: left;
  vertical-align: middle;
}

.szdb-table th {
  background-color: var(--color-basalt);
  color: var(--color-ash);
  font-family: var(--font-heading);
  font-size: var(--text-body-small-size);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  user-select: none;
  position: sticky;
  top: 0;
  z-index: 1;
}

.szdb-table th:hover {
  color: var(--color-ember-soft);
}

.szdb-table tbody tr {
  background-color: var(--color-obsidian);
  transition: background-color var(--transition-card);
}

.szdb-table tbody tr:nth-child(even) {
  background-color: var(--color-row-tint);
}

.szdb-table tbody tr:hover {
  background-color: var(--color-basalt);
}

.szdb-table td {
  color: var(--color-ash);
}

.szdb-table td a {
  color: var(--color-ember);
  text-decoration: none;
}

.szdb-table td a:hover {
  color: var(--color-ember-soft);
}

.szdb-table__sort-icon {
  display: inline-block;
  margin-inline-start: var(--space-2xs);
  color: var(--color-smoke);
}

.szdb-element-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-inline-end: var(--space-xs);
  vertical-align: middle;
}

.szdb-element-dot--fire {
  background-color: var(--color-element-fire);
}

.szdb-element-dot--water {
  background-color: var(--color-element-water);
}

.szdb-element-dot--nature {
  background-color: var(--color-element-nature);
}

.szdb-element-dot--magic {
  background-color: var(--color-element-magic);
}

.szdb-element-dot--light {
  background-color: var(--color-element-light);
}

.szdb-element-dot--dark {
  background-color: var(--color-element-dark);
}

.szdb-table__empty {
  padding: var(--space-xl);
  text-align: center;
  color: var(--color-smoke);
}

/* Részletes szörnyprofilok */
.szdb-profile {
  display: flex;
}

.szdb-profile__card {
  width: 100%;
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 0;
}

.szdb-profile__card--fire {
  border-top: 3px solid var(--color-element-fire);
}

.szdb-profile__card--water {
  border-top: 3px solid var(--color-element-water);
}

.szdb-profile__card--nature {
  border-top: 3px solid var(--color-element-nature);
}

.szdb-profile__image {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  background-color: var(--color-void);
  min-width: 0;
}

.szdb-profile__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.szdb-profile__content {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
}

.szdb-profile__content h3 {
  margin-block-end: 0;
}

.szdb-profile__content p {
  margin-block-end: 0;
  color: var(--color-smoke);}

.szdb-profile__stats,
.szdb-profile__abilities,
.szdb-profile__runes {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.szdb-profile__stats h4,
.szdb-profile__abilities h4,
.szdb-profile__runes h4 {
  margin-block-end: 0;
}

.szdb-stat-table {
  width: 100%;
  max-width: 420px;
  border-collapse: collapse;
}

.szdb-stat-table th,
.szdb-stat-table td {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--color-border-subtle);
  text-align: left;
}

.szdb-stat-table th {
  color: var(--color-smoke);
  font-weight: 500;
  width: 40%;
}

.szdb-stat-table td {
  color: var(--color-ash);
  font-variant-numeric: tabular-nums;
}

.szdb-profile__abilities ul {
  margin-block-end: 0;
  padding-inline-start: var(--space-lg);
  list-style: disc;
}

.szdb-profile__abilities li {
  margin-block-end: var(--space-xs);
  color: var(--color-smoke);
}

.szdb-profile__abilities strong {
  color: var(--color-ash);
}

/* Google Play CTA */
.szdb-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
  padding: var(--space-2xl);
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-radius: var(--radius-card);
}

.szdb-cta h2 {
  margin-block-end: 0;
  max-width: 24ch;
}

.szdb-cta p {
  margin-block-end: 0;
  color: var(--color-smoke);}

.szdb-cta__button {
  width: 100%;
  max-width: 480px;
  min-height: 48px;
  font-size: var(--text-body-large-size);
}

.szdb-cta__icon {
  font-size: 1.2em;
  line-height: 1;
}

/* GYIK */
.szdb-faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.szdb-faq h2 {
  margin-block-end: 0;
}

.szdb-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.szdb-faq__item {
  background-color: var(--color-obsidian);
  border: var(--border-default);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.szdb-faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: none;
  border: none;
  color: var(--color-ash);
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  min-height: 48px;
  transition: color var(--transition-card);
}

.szdb-faq__question:hover {
  color: var(--color-ember-soft);
}

.szdb-faq__icon {
  color: var(--color-ember);
  font-size: 1.5rem;
  line-height: 1;
  transition: transform var(--transition-accordion);
  flex-shrink: 0;
}

.szdb-faq__item.is-open .szdb-faq__icon {
  transform: rotate(45deg);
}

.szdb-faq__answer {
  padding: 0 var(--space-lg) var(--space-lg);
  color: var(--color-smoke);
  max-width: 80%;
}

.szdb-faq__answer p {
  margin-block-end: 0;
}

/* Reszponzív */
@media (max-width: 1024px) {
  .szdb-intro {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  .szdb-filter__controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .szdb-filter__reset {
    grid-column: span 2;
    justify-self: start;
  }

  .szdb-featured__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .szdb-profile__card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
}

@media (max-width: 767px) {
  .szorny-adatbazis-main {
    gap: var(--space-2xl);
    padding-block: var(--space-2xl) var(--space-3xl);
  }

  .szdb-page-header__inner {
    width: 100%;
    max-width: none;
  }

  .szdb-intro {
    grid-template-columns: 1fr;
  }

  .szdb-intro__aside {
    order: 2;
  }

  .szdb-filter__controls {
    grid-template-columns: 1fr;
  }

  .szdb-filter__reset {
    grid-column: auto;
    justify-self: stretch;
  }

  .szdb-featured__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .szdb-profile__card {
    grid-template-columns: 1fr;
  }

  .szdb-profile__image {
    aspect-ratio: 4 / 3;
  }

  .szdb-profile__content {
    padding: var(--space-lg);
  }

  .szdb-cta {
    padding: var(--space-xl) var(--space-lg);
  }

  .szdb-faq__answer {
    max-width: 100%;
  }
}

@media (max-width: 390px) {
  .szdb-page-header__lead {
    font-size: var(--text-body-size);
  }

  .szdb-cta__button {
    font-size: var(--text-body-size);
  }
}

@media (prefers-reduced-motion: reduce) {
  .szdb-monster-card,
  .szdb-table tbody tr,
  .szdb-faq__question,
  .szdb-faq__icon {
    transition: none;
  }
}

.thank-you {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding-block: var(--space-3xl);
  padding-inline: var(--container-padding-mobile);
}

.thank-you__content {
  max-width: 640px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
}

.thank-you__content .overline {
  margin-block-end: 0;
}

.thank-you__content h1 {
  margin-block-end: 0;
}

.thank-you__message,
.thank-you__next {
  margin-block-end: 0;
  max-width: 520px;
  margin-inline: auto;
}

.thank-you__message {
  color: var(--color-ash);
}

.thank-you__next {
  color: var(--color-smoke);
}

.thank-you__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-block-start: var(--space-lg);
}

@media (min-width: 768px) {
  .thank-you {
    padding-inline: var(--container-padding-tablet-desktop);
  }
}

@media (max-width: 767px) {
  .thank-you {
    min-height: calc(100vh - 160px);
    padding-block: var(--space-2xl);
  }

  .thank-you__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .thank-you__actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .thank-you {
    min-height: auto;
  }
}
html, body {
  overflow-x: clip;
  max-width: 100%;
}

img, video, svg {
  max-width: 100%;
  height: auto;
}