:root {
  color-scheme: dark;
  --ink: #11131c;
  --panel: #1b1e2c;
  --panel-hover: #232738;
  --line: #363b4c;
  --paper: #f5f0e5;
  --muted: #b4b9c8;
  --gold: #ffc680;
  --cyan: #a9e8fa;
  --lavender: #d6c1ff;
  --radius: 16px;
}
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 0; scroll-padding-top: 22px; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
button, input { font: inherit; color: inherit; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}
[hidden] { display: none !important; }
.shell { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
.skip-link { position: fixed; inset: 8px auto auto 8px; z-index: 10; padding: 10px 16px; background: var(--gold); color: var(--ink); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.site-header { border-bottom: 1px solid #272a37; }
.header-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 850; letter-spacing: .1em; }
.brand-mark { width: 34px; height: 34px; color: var(--gold); }
.brand > span { display: grid; gap: 1px; line-height: 1; }
.brand small { font-size: .62rem; letter-spacing: .24em; color: var(--muted); }
nav { display: flex; align-items: center; gap: 8px; }
nav a { display: inline-flex; align-items: center; min-height: 44px; gap: .45rem; padding-inline: 14px; border-radius: 8px; color: var(--muted); font-size: .91rem; font-weight: 650; text-decoration: none; }
nav a[aria-current], nav a:hover { color: var(--paper); background: var(--panel); }
nav a span { color: var(--gold); }

.feature {
  position: relative;
  isolation: isolate;
  min-height: 302px;
  display: grid;
  align-items: center;
  grid-template-columns: .89fr 1.11fr;
  margin-block: 28px 33px;
  border: 1px solid #3f3744;
  border-radius: 22px;
  background: #201c29;
  overflow: hidden;
}
.feature-copy { z-index: 2; padding: clamp(24px, 3.35vw, 39px); padding-right: 10px; }
.kicker { margin: 0 0 .5rem; font-size: .71rem; font-weight: 750; letter-spacing: .14em; color: var(--gold); }
.status-dot { display: inline-block; width: 7px; height: 7px; margin: 0 .38rem .13rem 0; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px #ffbe6880; }
.feature h1 { font-size: clamp(2.45rem, 5.5vw, 4.5rem); line-height: 1; letter-spacing: -.067em; margin: .35rem 0 .85rem; }
.feature-copy > p:not(.kicker) { color: #ddd5d7; max-width: 34ch; margin: 0; font-size: clamp(.94rem, 1.35vw, 1.11rem); }
.feature-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 22px; }
.button, .text-action, .play-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 44px;
  font-weight: 750;
  text-decoration: none;
}
.button { padding: .56rem 1rem; border: 1px solid transparent; border-radius: 9px; cursor: pointer; }
.primary { background: var(--gold); color: #241a22; }
.primary:hover { background: #ffdaaa; }
.secondary { background: #272838; border-color: #464359; color: var(--paper); }
.secondary:hover { background: #35334a; }
.text-action { color: #e0d8e2; font-size: .88rem; }
.text-action:hover { color: var(--gold); }
.feature-art { position: absolute; z-index: 1; inset: 0 0 0 40%; background: #1d223d; }
.feature-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 56% center; }
.feature-art::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg,#201c29,transparent 34%),linear-gradient(0deg,#11131bdc,transparent 27%); pointer-events: none; }
.art-caption { position: absolute; z-index: 1; bottom: 13px; right: 17px; color: #fff5e0; font: 700 .68rem/1.3 ui-monospace, monospace; letter-spacing: .1em; }
.art-caption span { color: #c9c2d9; margin-left: 11px; }
.character-feature { min-height: 425px; grid-template-columns: 1fr 1fr; background: #1c1b2b; }
.character-feature .feature-copy { padding: clamp(24px, 3.35vw, 39px); }
.character-feature .feature-art { inset: 0 0 0 47%; background: radial-gradient(ellipse at 60% 50%,#463050,#171923 72%); }
.character-feature .feature-art img { object-fit: contain; object-position: center bottom; }
.character-feature .feature-art::after { background: linear-gradient(90deg,#1c1b2b,transparent 25%),linear-gradient(0deg,#14152090,transparent 16%); }
.character-feature h1 { font-size: clamp(2.8rem, 5.8vw, 4.65rem); }
.look-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 21px; }
.look-label { width: 100%; color: var(--muted); font-size: .76rem; }
.look-picker button { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 6px 11px; border: 1px solid #5c5367; border-radius: 8px; background: #1d1c2b; cursor: pointer; font-size: .82rem; }
.look-picker button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); background: #372b31; }
.look-swatch { width: 12px; height: 12px; border: 1px solid #a69fae; border-radius: 50%; }
.look-black { background: #191722; }.look-white { background: #f5eee6; }.look-crimson { background: #b52845; }
.feature-copy > .look-status { min-height: 1.5em; margin-top: 5px; font-size: .71rem; color: var(--muted); }

.games-section { outline: none; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.section-heading h2, .show-card h2 { margin: 0; font-size: clamp(1.7rem, 3.2vw, 2.55rem); letter-spacing: -.042em; line-height: 1.1; }
.progress-block { display: grid; gap: 4px; min-width: 155px; font-size: .77rem; color: var(--muted); }
progress { width: 100%; height: 6px; border: 0; border-radius: 99px; background: #303545; color: var(--gold); }
progress::-webkit-progress-bar { background: #303545; border-radius: 99px; }
progress::-webkit-progress-value { background: var(--gold); border-radius: 99px; }
progress::-moz-progress-bar { background: var(--gold); border-radius: 99px; }
.toolbar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.filters { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.filters button {
  min-height: 44px;
  padding: .45rem .78rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: .87rem;
  font-weight: 650;
}
.filters button:hover { background: var(--panel); color: var(--paper); }
.filters button[aria-pressed="true"] { color: var(--ink); background: var(--paper); border-color: var(--paper); }
.search { position: relative; display: flex; align-items: center; width: min(100%, 290px); }
.search svg { position: absolute; left: 11px; width: 22px; height: 22px; fill: none; stroke: var(--muted); stroke-width: 1.6; pointer-events: none; }
.search input { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: .52rem .7rem .52rem 2.45rem; }
.search input::placeholder { color: var(--muted); }
.results-count { margin: .54rem 0 .66rem; font-size: .79rem; color: var(--muted); }

.game-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.game-card {
  --game-accent: var(--gold);
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--panel);
  border: 1px solid #323749;
  border-radius: var(--radius);
  overflow: hidden;
}
.game-card:focus-within, .game-card:hover { border-color: #555c73; background: var(--panel-hover); }
.game-card[data-category="strategy"] { --game-accent: var(--cyan); }
.game-card[data-category="creative"] { --game-accent: var(--lavender); }
.card-art { aspect-ratio: 16/9; overflow: hidden; background: #232b47; }
.card-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-body { display: flex; flex: 1; flex-direction: column; padding: 13px 15px 12px; }
.card-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3px 8px; font-size: .73rem; }
.genre { color: var(--game-accent); font-weight: 750; }
.score { color: var(--muted); font-variant-numeric: tabular-nums; }
.card-body h3 { margin: .29rem 0 .33rem; font-size: clamp(1.15rem, 2vw, 1.48rem); line-height: 1.16; letter-spacing: -.025em; }
.game-description { margin: 0 0 .6rem; color: var(--muted); font-size: .88rem; }
.play-link { margin-top: auto; justify-content: space-between; padding: 0 .76rem; border-radius: 7px; color: var(--game-accent); background: #141723; }
.play-link:hover { color: var(--ink); background: var(--game-accent); }
.play-link:focus-visible { outline-offset: -3px; }
.empty { padding: 32px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--panel); }
.empty h3 { margin: 0; }
.empty p { color: var(--muted); margin: .42rem 0 .9rem; }

.show-card { display: flex; align-items: center; justify-content: space-between; gap: 15px 28px; flex-wrap: wrap; margin-block: 32px 27px; padding: clamp(18px, 3vw, 29px); border: 1px solid #3c3a51; border-radius: var(--radius); background: #201e2e; }
.show-card h2 { font-size: clamp(1.42rem, 3vw, 2rem); }
.show-card p:not(.kicker) { margin: .55rem 0 0; color: var(--muted); }
.footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 7px 20px; padding-block: 14px 30px; border-top: 1px solid #282c39; color: var(--muted); font-size: .76rem; }

@media (max-width: 800px) {
  .shell { width: calc(100% - 40px); }
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature { grid-template-columns: 1fr 1fr; }
  .feature-art { inset-inline-start: 44%; }
}
@media (max-width: 520px) {
  .shell { width: calc(100% - 28px); }
  .header-inner { min-height: 59px; gap: 5px; }
  .brand { gap: 5px; font-size: .82rem; letter-spacing: .07em; }
  .brand-mark { width: 29px; height: 29px; }
  .brand small { font-size: .54rem; }
  nav { gap: 1px; }
  nav a { min-height: 44px; padding-inline: 8px; gap: .3rem; font-size: .8rem; white-space: nowrap; }
  .feature { display: flex; flex-direction: column-reverse; align-items: stretch; min-height: 0; margin-block: 13px 21px; border-radius: 15px; }
  .feature-art { position: relative; inset: auto; height: clamp(102px, 28vw, 145px); }
  .feature-art::after { background: linear-gradient(0deg,#201c29,transparent 35%); }
  .feature-art img { object-position: center 47%; }
  .character-feature { min-height: 0; }
  .character-feature .feature-art { inset: auto; height: 240px; }
  .character-feature .feature-art img { object-position: center top; object-fit: cover; }
  .character-feature .feature-art::after { background: linear-gradient(0deg,#1c1b2b,transparent 23%); }
  .character-feature .feature-copy { padding: 4px 17px 12px; }
  .character-feature h1 { font-size: 2.5rem; }
  .character-feature h1 br { display: none; }
  .look-picker { margin-top: 10px; gap: 5px; }
  .look-label { width: auto; margin-right: 3px; }
  .look-picker button { font-size: .75rem; padding-inline: 8px; }
  .art-caption { bottom: 9px; right: 11px; font-size: .62rem; }
  .feature-copy { padding: 4px 14px 14px; }
  .feature h1 { margin-block: .2rem .48rem; }
  .feature-actions { margin-top: 9px; gap: 0 11px; }
  .button { padding-inline: .69rem; font-size: .88rem; }
  .text-action { font-size: .79rem; }
  .section-heading { flex-wrap: wrap; align-items: start; gap: 7px 12px; margin-bottom: 10px; }
  .progress-block { margin-top: 4px; min-width: 120px; }
  .toolbar { gap: 7px; }
  .search { width: 100%; }
  .game-grid { gap: 9px; }
  .game-card { border-radius: 11px; }
  .card-body { padding: 9px; }
  .game-description { font-size: .8rem; }
  .play-link { padding-inline: .58rem; font-size: .86rem; }
}
@media (max-width: 345px) {
  .game-grid { grid-template-columns: minmax(0, 1fr); }
}