:root {
  color-scheme:dark;
  --paper:#10101a; --panel:#191926; --line:#2b2a3b; --ink:#f5f3fd; --quiet:#b3aec5; --action:#ccbcff; --on-action:#221345;
  --control-line:#6f6685; --saved:#ed759c; --menu-shadow:#08081070;
}
:root[data-theme="light"] {
  color-scheme:light;
  --paper:#f8f6fc; --panel:#fff; --line:#ded8ea; --ink:#201832; --quiet:#5d536d; --action:#5735a6; --on-action:#fff;
  --control-line:#9084a3; --saved:#aa2e59; --menu-shadow:#21154724;
}
body {
  --round:15px; --pad:clamp(13px,3vw,33px);
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  background:var(--paper); color:var(--ink); font:15px/1.5 system-ui,sans-serif;
}
* {box-sizing:border-box}
button, input, select {font:inherit;color:inherit}
button {background:transparent;border:0;padding:0;text-align:inherit}
button:focus-visible, input:focus-visible, select:focus-visible {outline:2px solid var(--action);outline-offset:2px}
h1, h2, h3, p {margin:0;color:inherit}
h1 {font-size:clamp(28px,5.4vw,58px);font-weight:780;line-height:1.02;letter-spacing:-.065em;overflow-wrap:anywhere}
h2 {font-size:clamp(18px,2.3vw,25px);font-weight:730;line-height:1.1;letter-spacing:-.035em}
h3 {font-size:14px;font-weight:740;line-height:1.2}
small {font-size:11px}
.icon {width:16px;height:16px;flex:none}
.bar {display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:66px;padding:10px var(--pad)}
.bar .search {width:100%;max-width:360px;justify-self:end}
.theme-toggle {display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--control-line);border-radius:9px;color:var(--quiet)}
.theme-toggle:hover {background:var(--panel);color:var(--ink)}
.theme-toggle[aria-pressed="true"] .theme-light,
.theme-toggle[aria-pressed="false"] .theme-dark {display:none}
.brand {display:flex;gap:8px;align-items:center;font-weight:850;font-size:20px;letter-spacing:-.065em;white-space:nowrap}
.brand-mark {display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:var(--action);color:var(--on-action);font:700 15px/1 monospace}
.header-nav, .pills, .actions {display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.navbtn, .pill, .subtle {display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:6px 10px;border-radius:8px;color:var(--quiet);white-space:nowrap}
.navbtn[aria-current=page], .navbtn:hover, .pill:hover {background:var(--panel);color:var(--ink)}
.pill {min-height:32px;border:1px solid var(--line);border-radius:30px}
.pill[aria-current=page] {background:var(--action);border-color:var(--action);color:var(--on-action)}
.subtle {font-size:12px;text-decoration:underline;text-underline-offset:3px}
.surface {padding:16px var(--pad) 22px;flex:1;min-width:0}
.search {position:relative;display:flex;align-items:center;min-width:0;color:var(--quiet)}
.search > button {position:absolute;left:4px;display:grid;place-items:center;width:32px;height:32px;border-radius:6px}
input, select {width:100%;min-height:40px;background:var(--panel);border:1px solid var(--control-line);border-radius:9px;padding:7px 11px}
.search input {padding-left:41px}
input::placeholder {color:var(--quiet);opacity:1}
.kicker {font-size:11px;font-weight:780;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
.hero {--action:#ccbcff;--on-action:#221345;position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(235px,30vw,360px);border-radius:var(--round);overflow:hidden;background:#211547;color:#fff;margin:4px 0 16px}
.hero .art {--art:#281765;--glow:#8c4ee5;--paint:#f2b9ff;position:absolute;inset:0 0 0 27%;height:100%;border-radius:0}
.hero::after {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#211547 5%,#211547e8 36%,transparent 73%);pointer-events:none}
.hero .art {z-index:-2}
.hero-copy {padding:23px clamp(15px,4vw,37px);max-width:60%;display:grid;justify-items:start;gap:12px}
.hero .kicker {color:#e3d8ff}
.hero p {color:#ece3ff;max-width:34ch;font-size:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.primary {display:inline-flex;justify-content:center;align-items:center;gap:7px;min-height:39px;padding:8px 13px;border-radius:8px;background:var(--action);color:var(--on-action);font-weight:780;line-height:1.2}
.primary:hover {filter:brightness(1.09)}
.block {margin-top:17px}
.block-heading {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.game-tile {min-width:0;position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--round);overflow:hidden}
.game-open {display:block;width:100%}
.game-open:hover h3 {text-decoration:underline;text-underline-offset:3px}
.game-tile .art {height:clamp(84px,15vw,174px)}
.game-meta {padding:8px 9px}
.game-meta small {display:block;color:var(--quiet);margin-top:3px}
.heart {position:absolute;top:5px;right:5px;display:grid;place-items:center;width:33px;height:33px;border-radius:9px;background:#151520df;color:#fff}
.heart[aria-pressed=true] .icon {fill:#ffd0de;color:#ffd0de}
.footer {border-top:1px solid var(--line);font-size:12px;color:var(--quiet)}
.art {--art:#281765;--glow:#8c4ee5;--paint:#f2b9ff;position:relative;isolation:isolate;display:grid;place-items:center;overflow:hidden;min-width:0;background:var(--art);color:var(--paint);height:100%;background-image:radial-gradient(ellipse at 75% 40%,var(--glow),transparent 72%),radial-gradient(#ffffff38 .6px,transparent .8px);background-size:auto,10px 10px}
.art::before, .art::after {content:"";position:absolute;pointer-events:none}
.art::before {width:33%;aspect-ratio:1;transform:rotate(-27deg);border:2px solid currentColor;border-radius:32%;box-shadow:0 0 0 7px #ffffff25,0 0 0 17px #ffffff18,0 0 30px currentColor;background:linear-gradient(145deg,#ffffff70,#ffffff03 66%)}
.art::after {width:62%;aspect-ratio:2.6;transform:rotate(-23deg);border:1px solid currentColor;border-radius:50%;opacity:.65}
.art.orbit {--art:#281765;--glow:#8c4ee5;--paint:#f2b9ff}
.orbit::before {border-radius:50%;transform:translateX(13%) rotate(-23deg);background:radial-gradient(circle at 33% 28%,#ffe1ff,#ab63ea 37%,#3f166f 73%);box-shadow:0 0 38px #c17af8}
.orbit::after {transform:translateX(9%) rotate(-23deg);box-shadow:0 0 0 4px #dc9df240,0 0 0 9px #dc9df235,0 0 0 14px #dc9df223}
.art.word {--art:#263630;--glow:#48856b;--paint:#f4e7ae}
.word::before {border:0;transform:translateX(-26%) rotate(-15deg);border-radius:13%;width:24%;background:#f4e7ae;box-shadow:12px 6px 0 #e6b769,24px 12px 0 #e79260}
.word::after {content:"А";inset:0;width:auto;aspect-ratio:auto;display:grid;place-items:center;transform:translateX(-6%) rotate(-15deg);border:0;opacity:1;color:#2a4936;font:bold clamp(18px,4vw,36px)/1 Georgia,serif}
.art.rally {--art:#402136;--glow:#d75e4f;--paint:#ffd2a4}
.rally::before {width:64%;aspect-ratio:2.3;border-radius:5px;border:0;background:repeating-linear-gradient(115deg,#f7d38c 0 11%,#d64b4a 11% 22%);box-shadow:0 8px 0 #35162b;transform:skewX(-20deg) rotate(-9deg)}
.rally::after {width:100%;aspect-ratio:3;transform:rotate(-10deg);border:0;border-block:1px dashed currentColor;border-radius:0}
.art.map {--art:#163c58;--glow:#3f928a;--paint:#b5ffca}
.map::before {border-radius:49% 40% 38% 52%;background:repeating-linear-gradient(45deg,#9fe3b7 0 3px,#5d9f90 3px 7px);box-shadow:21px 12px 0 -9px #9fe3b7,-24px -12px 0 -13px #9fe3b7}
.art.tiles {--art:#402b4f;--glow:#9b6299;--paint:#ffe39b}
.tiles::before {border-radius:10%;background:repeating-conic-gradient(#f0b77d 0% 25%,#ba7dc6 0% 50%) 50%/50% 50%;box-shadow:5px 6px 0 #542a63}
.art.signal {--art:#244265;--glow:#4d72cb;--paint:#a4ecff}
.signal::before {border-radius:0;transform:skew(-20deg);background:repeating-linear-gradient(90deg,#c1f7fc 0 8%,transparent 8% 17%);border:0;box-shadow:none}
.listing-title {margin-bottom:12px}
.filters {display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;align-items:end;gap:9px;margin:15px 0 8px}
.result-status {margin:10px 0 8px;color:var(--quiet);font-size:12px}
.empty {padding:25px 0;color:var(--quiet)}
.details {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,3vw,34px);margin:10px 0 24px}
.details .art {min-height:182px;border-radius:var(--round)}
.description {display:grid;align-content:center;justify-items:start;gap:8px}
.description h1 {font-size:clamp(24px,4.7vw,49px)}
.description p, .help p {color:var(--quiet)}
.details .heart {position:static;background:var(--panel);color:var(--ink);border:1px solid var(--line);width:39px;height:39px}
.details .heart[aria-pressed=true] .icon {fill:var(--saved);color:var(--saved)}
.player-note {background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:12px;margin-bottom:13px;color:var(--quiet)}
.help {display:grid;gap:10px}
.game-guide {display:grid;gap:24px;max-width:75ch;margin-inline:auto}
.game-guide ol {margin:0;padding-inline-start:1.5em;color:var(--quiet)}
.game-guide li + li {margin-top:8px}
.game-guide .subtle {justify-self:start;padding-inline:0}
.game-tip, .faq details {padding:12px 16px;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.game-tip {border-inline-start:3px solid var(--action)}
.game-tip h2 {font-size:17px}
.faq summary {font-weight:650;overflow-wrap:anywhere}
.faq details p {margin-top:8px}
.more {margin-top:10px}
@media (max-width:520px) {
  .bar {grid-template-columns:auto minmax(0,1fr) auto;gap:7px}
  .header-nav {grid-column:2/-1;gap:1px;justify-content:end;flex-wrap:nowrap}
  .bar .search {grid-column:1/3;max-width:none}
  .navbtn {padding-inline:6px;font-size:12px}
  .hero {min-height:200px}
  .hero-copy {max-width:70%}
  .details {grid-template-columns:minmax(0,1fr)}
}
@media (max-width:390px) {
  .brand {gap:6px;font-size:18px}
  .brand-mark {width:24px;height:24px}
  .saved-nav {min-width:44px}
  .saved-nav span {display:none}
  .grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-grid .game-tile:nth-child(3) {display:none}
}
@media (pointer:coarse) {
  .navbtn, .pill, .subtle, .primary, .heart {min-height:44px}
  .heart {min-width:44px}
  input, select {min-height:44px;font-size:16px}
}

[hidden] {display:none!important}
a {color:inherit;text-decoration:none}
a:focus-visible, summary:focus-visible {outline:2px solid var(--action);outline-offset:3px}
button, summary {cursor:pointer}
img {display:block;max-width:100%}
.shell {width:min(100%,1150px);margin-inline:auto}
.header {border-bottom:1px solid var(--line)}
.surface {padding-block:20px 38px}
.footer-inner, .footer-brand, .footer-nav {display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px}
.footer-inner {justify-content:space-between;padding:15px var(--pad)}
.footer-brand .brand {color:var(--ink)}
.footer-nav a:hover, .footer-nav a[aria-current=page], .info-page .help a {text-decoration:underline;text-underline-offset:3px}
.how-it-works {border:1px solid var(--line);border-radius:var(--round);background:var(--panel);padding:clamp(14px,3vw,25px)}
.how-it-works p {max-width:75ch}
.info-page {display:grid;gap:24px;max-width:75ch;margin-inline:auto}
.info-page .listing-title {margin-bottom:0}
.info-page .help a {color:var(--action)}
.contact-form fieldset {display:grid;gap:8px;min-width:0;margin:0;padding:0;border:0}
.contact-form label {font-weight:650}
.contact-form label:not(:first-child) {margin-top:5px}
.contact-form textarea {width:100%;resize:vertical;padding:9px 11px;border:1px solid var(--control-line);border-radius:9px;background:var(--panel);color:inherit;font:inherit}
.contact-form textarea:focus-visible {outline:2px solid var(--action);outline-offset:2px}
.contact-form button {justify-self:start;margin-top:5px}
.contact-form button:disabled {opacity:.6;cursor:default}
.contact-status {padding:8px 11px;border-inline-start:3px solid var(--action);background:var(--panel)}
.navbtn .icon {width:16px;height:16px}
.language {position:relative;z-index:2}
.language summary {display:flex;align-items:center;gap:4px;list-style:none;padding:6px 8px;border:1px solid var(--line);border-radius:8px;color:var(--quiet);font-size:13px}
.language summary::-webkit-details-marker {display:none}
.language summary .icon {width:13px;height:13px}
.language-menu {position:absolute;right:0;top:calc(100% + 6px);min-width:135px;padding:5px;background:var(--panel);border:1px solid var(--line);border-radius:9px;box-shadow:0 12px 30px var(--menu-shadow)}
.language-menu a {display:block;padding:6px 9px;border-radius:5px}
.language-menu a:hover, .language-menu a[aria-current] {background:var(--paper)}
.search > button:hover {background:var(--line)}
.search-error {margin:0 auto 8px;width:min(100%,1150px);padding:8px var(--pad);color:var(--quiet)}
.skip, .sr-only {position:absolute;width:1px;height:1px;clip-path:inset(50%);white-space:nowrap;overflow:hidden}
.skip:focus {top:8px;left:8px;z-index:4;width:auto;height:auto;clip-path:none;background:var(--action);color:var(--on-action);padding:9px;border-radius:7px}
.hero-copy {padding-block:28px}
.block {margin-top:25px}
.block-heading {margin-bottom:10px}
.game-tile {transition:border-color .16s ease}
.game-tile:hover, .game-tile:focus-within {border-color:var(--action)}
.game-open:focus-visible, .heart:focus-visible {outline-offset:-3px}
.game-meta {padding:11px 12px}
.game-meta h3 {overflow-wrap:anywhere}
.image-art img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.image-art::before, .image-art::after {content:none}
.filters label {display:grid;gap:5px;min-width:0;color:var(--quiet);font-size:13px}
.filters select {color:var(--ink)}
.filters .primary {min-height:40px}
.listing-title {margin:12px 0 16px}
.listing-title p {margin-top:10px;color:var(--quiet)}
.result-status {font-size:13px}
.pagination {display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px;color:var(--quiet)}
.details .art {align-self:start;width:100%;height:auto;min-height:220px;aspect-ratio:16/9}
.description {gap:12px}
.description p,.help p {white-space:pre-line;overflow-wrap:anywhere}
.description small {color:var(--quiet)}
.actions .play {min-width:108px;min-height:44px}
.actions .play:disabled {opacity:.65;cursor:wait}
.player-status:empty {margin:0}
.details .heart {width:44px;height:44px}
.player {margin:0 0 25px;scroll-margin-top:12px}
.player-fallback {margin-bottom:6px}
.player iframe,.player .frame-window {display:block;width:100%;aspect-ratio:16/9;min-height:210px;border:1px solid var(--line);border-radius:var(--round);background:var(--panel)}
.player .frame-window {overflow:auto}
.player .frame-window iframe {min-height:820px;border:0;border-radius:0}
.player-toolbar {display:flex;justify-content:flex-end}
.player-toolbar button {min-height:44px;padding:0 12px;border-radius:8px;color:var(--quiet);cursor:pointer}
.player-toolbar button:hover {background:var(--panel);color:var(--ink)}
.player.is-expanded > .player-screen {position:fixed;inset:0;z-index:100}
body:has(.player.is-expanded) {overflow:hidden}
.player:fullscreen > :not(.player-screen) {display:none}
.player:is(:fullscreen,.is-expanded) > .player-screen {display:flex;flex-direction:column;height:100%;background:var(--paper)}
.player:is(:fullscreen,.is-expanded) > .player-screen > :is(iframe,.frame-window) {flex:1;min-height:0;border:0;border-radius:0;aspect-ratio:auto}
.player:is(:fullscreen,.is-expanded) .frame-window iframe {height:100%;aspect-ratio:auto}
.empty p {margin:8px 0 12px}
.empty .subtle {max-width:100%;white-space:normal;overflow-wrap:anywhere}
.breadcrumbs ol {display:flex;flex-wrap:wrap;gap:4px 8px;margin:0 0 10px;padding:0;list-style:none;color:var(--quiet);font-size:13px;overflow-wrap:anywhere}
.breadcrumbs li + li::before {content:"/";margin-inline-end:8px}
.breadcrumbs a {text-decoration:underline;text-underline-offset:2px}
@media (max-width:680px) {
  .filters {grid-template-columns:repeat(2,minmax(0,1fr))}
  .filters button {justify-self:start}
  .player .frame-window iframe {min-height:660px}
}
@media (max-width:520px) {
  .surface {padding-top:13px}
  .hero {min-height:225px}
  .hero-copy {padding:17px}
  .hero .art {inset-inline-start:14%}
  .details .art {min-height:150px}
  .player .frame-page,.player .frame-window {min-height:clamp(360px,75svh,560px)}
}
@media (pointer:coarse) {
  .language summary {min-height:44px}
  .theme-toggle {width:44px;height:44px}
  .contact-form textarea {font-size:16px}
  .search > button {min-width:44px;min-height:44px;left:0}
  .search input {padding-left:44px}
}
@media (prefers-reduced-motion:reduce) {.game-tile {transition:none}}