:root {
  color-scheme: dark;
  --background: #140e11;
  --surface: #21171b;
  --border: #413036;
  --text: #fcf4f6;
  --muted: #cfb8c0;
  --accent: #ff747b;
  --track: #3d272e;
  --simulation-low: #ff747b;
  --simulation-medium: #ffd167;
  --simulation-high: #7de6a1;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
  background: var(--background);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
h1, h2, h3, p { margin: 0; }
button, input, select { font: inherit; }

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

.shell {
  width: min(1280px, calc(100% - 72px));
  margin-inline: auto;
}

.site-header {
  position: relative;
  z-index: 1;
  background: #100b0d;
  border-bottom: 1px solid var(--border);
}

.header-inner { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); min-height: 76px; }

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 800;
  text-decoration: none;
}

.brand img { display: block; width: clamp(164px, 15vw, 210px); max-width: 100%; height: 48px; object-fit: contain; }

.header-menu { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.provider-links, .site-footer ul { margin: 0; padding: 0; list-style: none; }
.provider-links { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.provider-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 7px;
  border-radius: 7px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 650;
  text-decoration: none;
}

.provider-links a:hover, .provider-links a[aria-current="true"] { color: var(--text); background: #372127; }
.account-links { display: flex; flex-shrink: 0; gap: 8px; }
.account-links .button, .play-action { display: inline-flex; align-items: center; justify-content: center; font-size: .875rem; font-weight: 700; text-decoration: none; }
.menu-toggle { display: none; }

.intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 56px 38px;
  background: radial-gradient(ellipse at 80% 0%, #402127, transparent 70%);
}

.hero-art {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  pointer-events: none;
}

.hero-art img {
  flex: none;
  width: clamp(150px, 20vw, 300px);
  height: auto;
  opacity: .46;
  filter: blur(4px) saturate(.85);
  transform: translate(6%, -12%) rotate(-9deg) scale(1.08);
}

.hero-art::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(0deg, var(--background) 1%, transparent 76%),
    linear-gradient(90deg, var(--background) 10%, #140e11dd 35%, #140e1166 74%);
}

h1 {
  font-size: clamp(2.8rem, 7.5vw, 5.4rem);
  font-weight: 800;
  letter-spacing: -.065em;
  line-height: 1.02;
}

h1 span { color: var(--accent); }

.welcome-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px 24px;
  padding: 20px;
  margin-top: 26px;
  background: #2c191f;
  border: 1px solid #53313b;
  border-left: 3px solid var(--accent);
  border-radius: 8px;
}

.welcome-panel h2 { font-size: clamp(1.2rem, 2.3vw, 1.65rem); line-height: 1.25; }
.welcome-panel h3 { margin-top: 12px; font-size: .93rem; }
.welcome-panel ul { margin: 6px 0 12px; padding-inline-start: 1.15em; }
.welcome-panel li, .simulation-disclosure { color: var(--muted); font-size: .9rem; line-height: 1.55; }
.welcome-panel li + li { margin-top: 3px; }
.welcome-panel li::marker, .simulation-disclosure strong { color: #ffadb0; }
.simulation-disclosure { max-width: 73ch; scroll-margin-block-start: 16px; }

.button {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #65454e;
  border-radius: 7px;
  background: #311e25;
  color: var(--text);
  cursor: pointer;
}

.button:hover:not(:disabled) { background: #47262f; border-color: var(--accent); }
.button:disabled { color: #a58a92; opacity: .65; cursor: default; }
.button.button-primary { background: var(--accent); border-color: var(--accent); color: #240e13; }
.button.button-primary:hover { background: #ff9c9f; border-color: #ff9c9f; }
.play-action { min-height: 49px; padding-inline: 18px; text-align: center; }

.catalog { padding-block: 23px 50px; border-top: 1px solid var(--border); }
.catalog-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.catalog-header h2 { font-size: 1.55rem; letter-spacing: -.035em; }
#result-count { color: var(--muted); font-size: .9rem; }
#loading-status { margin-top: 12px; color: var(--muted); }

.filters {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 14px;
  margin-block: 17px 22px;
}

.field label { display: block; margin-bottom: 6px; font-size: .875rem; font-weight: 650; }

.field input, .field select {
  width: 100%;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid #644750;
  border-radius: 8px;
  color: var(--text);
  background: var(--surface);
}

.empty { padding: 28px 18px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); }

.game-grid {
  --grid-columns: 2;
  --page-rows: 10;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: 14px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.game-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 11px;
}

.cover { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: #281b21; }
.cover img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.cover-error { padding: 10px; color: var(--muted); font-size: .75rem; text-align: center; }
.card-body { display: flex; flex: 1; flex-direction: column; padding: 12px; }
.provider-name { color: var(--muted); font-size: .75rem; }
.card-body h3 { margin: 4px 0 14px; font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; }

.card-simulation {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
  margin-top: auto;
  color: var(--muted);
  font-size: .75rem;
}

.game-card[data-simulation="low"] { --simulation-color: var(--simulation-low); }
.game-card[data-simulation="medium"] { --simulation-color: var(--simulation-medium); }
.game-card[data-simulation="high"] { --simulation-color: var(--simulation-high); }
.card-simulation strong { color: var(--simulation-color); font-size: .9rem; font-variant-numeric: tabular-nums; }

meter {
  appearance: none;
  display: block;
  width: 100%;
  height: 5px;
  margin-top: 7px;
  border: 0;
  background: var(--track);
  border-radius: 99px;
}

meter::-webkit-meter-bar { height: 5px; background: var(--track); border: 0; border-radius: 99px; }
meter::-webkit-meter-optimum-value { background: var(--simulation-color); border-radius: 99px; }
meter::-moz-meter-bar { background: var(--simulation-color); border-radius: 99px; }

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 24px;
}

#page-number { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }

.site-footer { background: #100b0d; border-top: 1px solid var(--border); color: var(--muted); }
.footer-main { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.5fr) minmax(0, .65fr); gap: 24px; padding-block: 30px; }
.footer-main h2 { margin-bottom: 7px; color: var(--text); font-size: .9rem; }
#footer-providers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.site-footer a { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--text); text-decoration: underline; text-underline-offset: .2em; }
.site-footer nav a { min-height: 36px; font-size: .875rem; }
.footer-brand a { color: var(--text); font-weight: 800; letter-spacing: -.035em; gap: 0; }
.footer-brand span { color: var(--accent); }
.footer-brand p { margin-top: 7px; font-size: .875rem; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 18px; padding-block: 6px; border-top: 1px solid var(--border); }
.footer-bottom a { min-height: 44px; font-size: .82rem; }
.footer-utilities { display: flex; flex-wrap: wrap; gap: 0 18px; }

.game-index { padding-block: 36px; }
.game-index h1 { font-size: clamp(2.25rem, 6vw, 4rem); }
.game-index .index-intro { margin-top: 12px; color: var(--muted); line-height: 1.55; }
.game-index a { color: var(--text); text-underline-offset: .2em; }
.index-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 12px; }
.index-navigation { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 0; margin: 16px 0 22px; list-style: none; }
.index-navigation a { display: inline-flex; align-items: center; min-height: 44px; }
.index-provider { padding-block: 18px; border-top: 1px solid var(--border); }
.index-provider h2 { margin-bottom: 10px; font-size: 1.25rem; }
.index-list { columns: 15rem; column-gap: 32px; margin: 0; padding-inline-start: 1.3em; }
.index-list li { break-inside: avoid; padding-block: 4px; color: var(--muted); font-size: .95rem; overflow-wrap: anywhere; }

@media (min-width: 670px) {
  .game-grid { --grid-columns: 3; --page-rows: 8; }
}

@media (min-width: 900px) {
  .game-grid { --grid-columns: 4; --page-rows: 7; }
}

@media (min-width: 1080px) {
  .game-grid { --grid-columns: 5; --page-rows: 6; }
}

@media (min-width: 1300px) {
  .game-grid { --grid-columns: 6; --page-rows: 5; }
}

@media (max-width: 960px) {
  .header-inner { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; min-height: 64px; }
  .brand { grid-column: 2; justify-self: center; min-width: 0; }
  .brand img { width: 176px; height: 40px; }

  .menu-toggle {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    background: var(--surface);
    cursor: pointer;
  }

  .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
    display: block;
    width: 17px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
  }

  .menu-toggle span { position: relative; }
  .menu-toggle span::before, .menu-toggle span::after { position: absolute; left: 0; content: ""; }
  .menu-toggle span::before { top: -5px; }
  .menu-toggle span::after { top: 5px; }
  .menu-toggle[aria-expanded="true"] span { background: transparent; }
  .menu-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

  .header-menu {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
    padding: 12px 0;
  }

  .menu-toggle:not([hidden]) ~ .header-menu {
    position: absolute;
    inset: 100% 0 auto;
    justify-content: stretch;
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    padding: 12px max(16px, calc((100% - 640px) / 2));
    background: #181015;
    border-block-end: 1px solid var(--border);
    box-shadow: 0 16px 32px #0007;
  }

  .menu-toggle[aria-expanded="false"]:not([hidden]) ~ .header-menu { display: none; }
  .provider-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .provider-links a { padding-inline: 11px; }
  .account-links { padding-top: 10px; border-top: 1px solid var(--border); }
  .account-links .button { flex: 1; }
}

@media (max-width: 669px) {
  .shell { width: calc(100% - 32px); }
  .intro { padding-block: 33px 25px; }
  .hero-art img { opacity: .32; }
  .welcome-panel { grid-template-columns: 1fr; gap: 14px; padding: 15px 14px; margin-top: 18px; }
  .filters { grid-template-columns: 1fr; gap: 10px; }
  .field input, .field select { font-size: 1rem; }
  .game-grid { gap: 10px; }
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-block: 24px; }
  .footer-brand { grid-column: 1 / -1; }
  #footer-providers { grid-template-columns: 1fr; }
  .site-footer nav a { min-height: 44px; }
}

@media (max-width: 400px) {
  .card-body { padding: 10px; }
  .pagination { column-gap: 6px; }
  .pagination .button { padding-inline: 8px; font-size: .8rem; }
}

@media (max-width: 299px) {
  .game-grid { --grid-columns: 1; --page-rows: 12; }
}