:root {
  color-scheme: dark;
  --bg: #0a0e12;
  --panel: #11191e;
  --text: #f2f6f7;
  --soft: #acb9c2;
  --stroke: #29343b;
  --accent: #68f4a5;
  --cool: #83d9ee;
  --width: 1360px;
  --gutter: clamp(20px, 4.6vw, 80px);
  --display: 'Roboto', Arial, sans-serif;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 24px }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.55 'Roboto', Arial, sans-serif; text-rendering: optimizeLegibility }
button, input, select { font: inherit }
button, a { -webkit-tap-highlight-color: transparent }
button, select { cursor: pointer }
a { color: inherit; text-decoration: none }
button { color: inherit }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible, select:focus-visible { outline: 3px solid var(--cool); outline-offset: 4px }
button, a { touch-action: manipulation }
button, a, input, select { transition: background-color .18s, color .18s, border-color .18s }
[hidden] { display: none !important }
h1, h2, h3, p, figure { margin: 0 }
h1, h2, h3 { text-wrap: balance }
em, i { font-style: normal; font-weight: 700 }
p { overflow-wrap: break-word }
img { display: block; max-width: 100% }
svg.icon { width: 19px; height: 19px; flex: 0 0 auto; vertical-align: middle }
.wrap { width: min(calc(100% - var(--gutter) * 2), var(--width)); margin-inline: auto }
.skip { position: absolute; z-index: 20; left: 12px; top: -100px; background: var(--accent); color: #07150e; padding: 12px 22px }
.skip:focus { top: 12px }
.header { border-bottom: 1px solid var(--stroke); background: var(--bg) }
.head-inner, .brand, .nav, .actions, .nav a, .login, .register, .btn, .text-link, .eyebrow, .title-line, .section-head, .search, .slide-controls, .foot, .foot > div, .foot p, .collection, .support-card { display: flex; align-items: center }
.head-inner { min-height: 76px; gap: clamp(16px, 4vw, 68px); position: relative }
.brand { gap: 15px; flex-shrink: 0 }
.logo { width: 99px; height: auto }
.brand span { border-left: 1px solid var(--stroke); padding-left: 15px; color: var(--soft); font-size: 13px }
.lobby .brand span { display: none }
.nav { gap: clamp(10px, 2vw, 30px); align-self: stretch }
.nav a { color: var(--soft); font-size: 14px; font-weight: 550; white-space: nowrap; position: relative }
.nav a:hover, .text-link:hover, .foot a:hover { color: var(--accent) }
.lobby:not(.article-page) .nav a:first-child { color: var(--text) }
.lobby:not(.article-page) .nav a:first-child::after { content: ''; position: absolute; height: 3px; border-radius: 2px; background: var(--accent); width: 100%; bottom: 0 }
.actions { margin-left: auto; gap: 10px }
.register, .login { min-height: 43px; border-radius: 8px; padding: 0 16px; font-size: 14px; font-weight: 650; gap: 8px; justify-content: center }
.login { color: var(--text); border: 1px solid var(--stroke) }
.login .icon { width: 16px }
.register { background: var(--accent); color: #082318 }
.register .icon { width: 16px }
.register:hover, .primary:hover { filter: brightness(1.1) }
.login:hover, .icon-btn:hover, .outline:hover { background: #26343b }
.icon-btn { display: inline-grid; place-items: center; min-width: 42px; min-height: 42px; padding: 0; background: transparent; border: 1px solid var(--stroke); border-radius: 7px }
.menu-toggle { display: none }
.btn { width: fit-content; min-height: 48px; gap: 16px; border-radius: 8px; font-size: 15px; font-weight: 700; padding: 11px 20px; justify-content: center }
.primary { color: #062317; background: var(--accent); border: 1px solid transparent }
.outline { background: transparent; border: 1px solid var(--stroke); color: var(--text) }
.text-link { width: fit-content; gap: 10px; font-weight: 650; color: var(--accent); min-height: 44px }
.eyebrow { width: fit-content; gap: 10px; color: var(--cool); font-weight: 700; font-size: 11px; letter-spacing: .16em }
.eyebrow .icon { width: 15px; height: 15px }
.hero { padding-top: 26px }
.hero-frame { isolation: isolate; position: relative; overflow: hidden; min-height: clamp(340px, 30vw, 440px); background: #0e2020; border: 1px solid #263f3b; border-radius: 17px; display: grid; align-items: center; grid-template-columns: 52% 48% }
.hero-copy { padding: clamp(28px, 3.5vw, 54px); position: relative; z-index: 1 }
.hero h1 { font: 780 clamp(46px, 5.45vw, 85px)/.99 var(--display); font-stretch: 88%; letter-spacing: -.052em; margin: 20px 0 15px }
.hero h1 em { color: var(--accent) }
.hero-copy > p { color: #c3d0d2; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.5; max-width: 40ch }
.hero-actions { margin-top: 22px }
.hero-image { margin: 0; height: 100%; position: relative; overflow: hidden; min-width: 0; align-self: stretch }
.hero-image > img { display: block; height: 100%; width: 100%; position: absolute; inset: 0; object-fit: cover }
.hero-image figcaption { position: absolute; bottom: 16px; right: 18px; color: #e8eff0; font-size: 11px; letter-spacing: .055em; padding: 5px 10px; border-radius: 4px; background: #061010d9 }
.lobby .hero-frame { background: radial-gradient(ellipse at 18% 110%,#18372d,transparent 55%), #0b191b }
.lobby .hero-copy { padding-left: clamp(27px, 4.2vw, 67px); padding-block: 34px }
.lobby .hero-image { position: absolute; inset: 0 0 0 38%; z-index: -1 }
.lobby .hero-image::after { content: ''; pointer-events: none; position: absolute; inset: 0; background: linear-gradient(90deg,#0e1e1e 0%,rgba(14,30,30,.68) 9%,transparent 34%) }
.lobby .hero-image > img { object-position: center 51% }
@media (min-width: 561px) {
  .lobby .hero-image { mask-image: linear-gradient(to right,transparent,#000 23%) }
}
.slide-controls { position: absolute; z-index: 2; bottom: 16px; right: 18px; gap: 3px; background: #0a1315dd; backdrop-filter: blur(8px); border: 1px solid #70858563; border-radius: 6px }
.slide-controls .icon-btn { border: 0; min-height: 36px; min-width: 36px }
.slide-controls .icon { width: 15px }
.slide-count { color: #d7e2e1; font-size: 11px; font-weight: 650; letter-spacing: .08em; font-variant-numeric: tabular-nums }
.block { margin-top: clamp(34px, 3.7vw, 58px) }
.section-head { justify-content: space-between; gap: 18px; margin-bottom: 18px }
h2 { font: 730 clamp(26px, 2.6vw, 40px)/1.13 var(--display); letter-spacing: -.038em }
h3 { font-size: 20px; letter-spacing: -.025em; line-height: 1.25 }
.title-line { gap: 12px }
.total { font-size: 12px; font-weight: 650; color: var(--accent); border: 1px solid #395244; padding: 2px 9px; border-radius: 6px; line-height: 1.6 }
.search { min-height: 42px; gap: 9px; padding: 0 13px; color: var(--soft); background: #11191f; border: 1px solid var(--stroke); border-radius: 8px; width: min(240px,100%) }
.search:focus-within { border-color: var(--cool) }
.search input { background: transparent; color: var(--text); border: 0; width: 100%; min-width: 0; outline: none; padding: 9px 0; font-size: 14px }
.search input:focus-visible { outline: 0 }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 19px }
.chips button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; background: var(--panel); border: 1px solid var(--stroke); border-radius: 7px; min-height: 38px; font-size: 13px; font-weight: 550; color: #c5cdd0 }
.chips button svg { width: 15px; height: 15px }
.chips button:hover { border-color: #778d8c }
.chips button[aria-pressed="true"] { color: var(--accent); border-color: #42755d; background: #152c23 }
.game-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: clamp(10px,1.15vw,19px) }
.game-card { position: relative; min-width: 0; border-radius: 10px; background: var(--panel) }
.game-link { display: block; overflow: hidden; border-radius: inherit; position: relative }
.game-link > img { width: 100%; height: auto; aspect-ratio: 5/6; object-fit: cover; transition: transform .3s }
.game-link:hover > img { transform: scale(1.035) }
.game-open { position: absolute; inset: auto 0 0; display: flex; align-items: center; justify-content: center; gap: 6px; background: #08171aeb; color: white; font-size: 13px; padding: 6px; opacity: 0; transform: translateY(6px); transition: .2s }
.game-card:hover .game-open, .game-link:focus-visible .game-open { opacity: 1; transform: none }
.save { position: absolute; right: 4px; top: 4px; padding: 0; border: 0; background: transparent; width: 42px; height: 42px; display: grid; place-items: center; color: #fff }
.save .icon { box-sizing: content-box; background: #081317d9; border-radius: 50%; padding: 7px; width: 16px; height: 16px }
.save[aria-pressed="true"] { color: var(--accent) }
.save[aria-pressed="true"] svg { fill: currentColor }
.empty { padding: 36px; color: var(--soft); border: 1px dashed var(--stroke); text-align: center; border-radius: 10px }
.empty .btn { margin: 16px auto 0 }
.reading-inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px,6vw,100px); padding: clamp(24px,3.3vw,48px); border: 1px solid var(--stroke); border-radius: 13px; background: var(--panel) }
.reading-title h2 { margin-top: 14px; max-width: 23ch }
.reading-inner p, .questions p, .support-card p, .action-card p { color: var(--soft); margin-bottom: 12px; max-width: 75ch }
.questions { border-top: 1px solid var(--stroke) }
details { border-bottom: 1px solid var(--stroke); padding: 0 5px }
summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-weight: 550; padding: 18px 0; min-height: 52px }
summary::-webkit-details-marker { display:none }
summary svg { color: var(--cool); transition: transform .2s }
details[open] summary svg { transform: rotate(45deg) }
.questions p { margin-bottom: 22px }
footer { margin-top: 58px; border-top: 1px solid var(--stroke) }
.topic-directory { padding-block: 28px; border-bottom: 1px solid var(--stroke) }
.topic-directory h2 { font-size: clamp(22px, 2.2vw, 30px) }
.topic-directory ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 0 24px; list-style: none; padding: 0; margin: 14px 0 0 }
.topic-directory a { display: block; padding: 11px 0; color: var(--cool); text-decoration: underline; text-underline-offset: 4px }
.topic-directory a[aria-current="page"] { color: var(--text); font-weight: 700 }
.foot { justify-content: space-between; min-height: 90px; gap: 20px; padding-block: 18px; color: var(--soft); font-size: 13px }
.foot > div, .foot p { gap: 12px }
.foot .logo { width: 66px }
.foot a { color: var(--text) }
.foot .icon { width: 14px }
.foot strong { display: inline-grid; place-items: center; border: 1px solid #596467; border-radius: 5px; min-width: 34px; min-height: 29px; color: var(--text) }
dialog { border: 1px solid #4a5e61; border-radius: 16px; padding: 0; width: min(580px,calc(100% - 36px)); color: var(--text); background: var(--panel) }
dialog::backdrop { background: #010809d9 }
.dialog-inner { display: grid; grid-template-columns: minmax(90px,140px) 1fr; align-items: center; gap: 24px; position: relative; padding: 42px 25px 28px }
.dialog-cover { width: 100%; height: auto; border-radius: 8px }
.dialog-inner h2 { font-size: 26px; margin: 8px 0 }
.dialog-desc { color: var(--soft); font-size: 14px; margin-bottom: 16px }
.dialog-close { position: absolute; right: 5px; top: 5px; min-width: 34px; min-height: 34px; border: 0 }

/* Access navigator: cool-blue editorial spread, left-hand roulette photograph. */
.access { --bg: #0b1119; --panel: #121d28; --stroke: #283846; --accent: #8cdaf1; --cool: #75eeb6 }
.access .hero-frame { grid-template-columns: 45% 55%; background: var(--panel); border-color: var(--stroke); border-radius: 4px }
.access .hero-image { grid-area: 1/1; border-right: 3px solid var(--cool) }
.access .hero-copy { grid-area: 1/2; padding-left: clamp(26px,4vw,70px) }
.access .hero h1 { font-weight: 660 }
.access .hero h1 em { color: #eaf8fb }
.action-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px }
.action-card { display: flex; flex-direction: column; padding: clamp(20px,2vw,30px); border: 1px solid var(--stroke); border-radius: 5px; background: var(--panel) }
.pict { display: grid; place-items: center; width: 43px; aspect-ratio: 1; border: 1px solid #395b66; color: var(--accent); border-radius: 9px; margin-bottom: 18px }
.action-card p { margin: 9px 0 18px }
.action-card .text-link { margin-top: auto }

/* The VIP lounge uses a serif title and deep green canvas. */
.vip { --bg: #081411; --panel: #10221c; --stroke: #2c443a; --accent: #a6e4ba; --cool: #9ad8d9 }
.vip .brand span { font-family: 'Playfair Display',Georgia,serif; font-weight: 700; font-size: 19px; color: var(--accent) }
.vip .hero { padding-top: 0 }
.vip .hero-frame { background: transparent; border: 0; border-bottom: 1px solid var(--stroke); border-radius: 0; grid-template-columns: 48% 52%; padding-block: 30px }
.vip .hero-copy { padding-inline: 1.5% 6%; padding-block: 12px }
.vip .hero h1 { font-weight: 500; letter-spacing: -.06em }
.vip .hero h1 em { font: 700 1em/1.06 'Playfair Display',Georgia,serif; letter-spacing: -.06em }
.vip .hero-image { border-radius: 48% 48% 6px 6px / 24% 24% 6px 6px; min-height: 340px }
.vip .register, .vip .btn { border-radius: 2px }
/* Atlas: a compact, squared catalogue with a vertical cover panel. */
.atlas { --bg: #0b1016; --panel: #141c26; --accent: #67d8f4; --cool: #8deaa9; --stroke: #2d3b49 }
.atlas .hero-frame { grid-template-columns: 58% 42%; border-radius: 4px; background-color: #122730; background-image: linear-gradient(#83c4dd0c 1px,transparent 1px),linear-gradient(90deg,#83c4dd0c 1px,transparent 1px); background-size: 32px 32px; min-height: 320px; border-color: #325460 }
.atlas .hero h1 { text-transform: uppercase; font-stretch: 76%; font-size: clamp(48px,5.2vw,82px); line-height: .95 }
.atlas .hero-copy { border-left: 4px solid var(--accent) }
.atlas .hero-image { border-left: 1px solid #385a64 }
.atlas .game-card, .atlas .btn, .atlas .register, .atlas .chips button, .atlas .search { border-radius: 3px }
.atlas .game-grid { grid-template-columns: repeat(5,minmax(0,1fr)) }
.atlas .catalog .section-head { border-bottom: 1px solid var(--stroke); padding-bottom: 15px }
.atlas .chips button[aria-pressed=true] { color: var(--accent); background: #162e39; border-color: #497386 }

/* Collections: panoramic card photography and three hand-picked theme entries. */
.club { --bg: #0e1514; --panel: #172420; --stroke: #304139; --accent: #98e2b8; --cool: #9cdaea }
.club .hero-frame { background: #0c1d1a; border-radius: 15px; min-height: 380px }
.club .hero-image { position: absolute; inset: 0 0 0 27%; z-index: -1 }
.club .hero-image::after { position: absolute; inset: 0; content: ''; background: linear-gradient(90deg,#0c1d1a 2%,#0c1d1a99 33%,transparent 65%) }
.club .hero h1 em { font: 700 .96em/1.1 'Playfair Display',Georgia,serif }
.collection-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px }
.collection { gap: 14px; background: var(--panel); border: 1px solid var(--stroke); border-radius: 9px; padding: 13px; min-width: 0 }
.collection:hover { border-color: var(--accent) }
.collection img { flex-shrink: 0; width: 49px; height: 61px; object-fit: cover; border-radius: 4px }
.collection h3 { font-size: 18px }
.collection p { color: var(--soft); font-size: 13px; margin-top: 4px }
.collection > svg { margin-left: auto; color: var(--accent); width: 16px }

/* Reference desk: framed image, restrained type and searchable contents. */
.desk { --bg: #0b1519; --panel: #14252b; --stroke: #30434a; --accent: #96dce6; --cool: #9ddfb6 }
.desk .hero { padding-top: 32px }
.desk .hero-frame { border: 0; border-bottom: 1px solid var(--stroke); border-radius: 0; background: transparent; grid-template-columns: 56% 44%; padding-bottom: 28px; min-height: 310px; gap: 0 }
.desk .hero-copy { padding: 14px 8% 14px 0 }
.desk .hero h1 { font-size: clamp(43px,5.4vw,80px); font-weight: 580 }
.desk .hero h1 em { color: var(--text) }
.desk .hero-image { border-radius: 8px; border: 1px solid #3c5157; min-height: 270px }
.desk .questions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; border: 0; align-items: start }
.desk details { border: 1px solid var(--stroke); padding: 0 18px; border-radius: 6px; background: var(--panel) }
.support-card { gap: 24px; border-top: 1px solid var(--stroke); padding: 24px 0 }
.support-card > svg { color: var(--cool); width: 32px; height: 32px }
.support-card p { margin: 10px 0 0 }
.faq-empty { color: var(--soft); padding: 15px 0 }

.crumb { padding: 26px 0 12px; font-size: 14px; color: var(--soft) }
.crumb a { text-decoration: underline; text-underline-offset: 3px }
.article-head { padding: 28px 0 34px; border-bottom: 1px solid var(--stroke) }
.article-head h1 { max-width: 26ch; margin: 10px 0 16px; font-size: clamp(36px,5vw,68px); line-height: 1.02; letter-spacing: -.05em }
.article-head > p { max-width: 70ch; font-size: 18px; color: var(--soft) }
.article-grid { display: grid; grid-template-columns: minmax(180px,.4fr) minmax(0,1fr); gap: clamp(25px,5vw,72px); padding-top: 35px }
aside { align-self: start; padding: 19px; background: var(--panel); border: 1px solid var(--stroke); border-radius: 7px }
aside h2 { font-size: 20px; margin-bottom: 10px }
aside a { display: block; padding: 8px 0; font-size: 14px; color: var(--cool) }
.prose { max-width: 75ch }
.prose section { margin-bottom: 32px }
.prose h2 { font-size: clamp(25px,2.4vw,34px); margin-bottom: 12px }
.prose p { color: #c5ced0; margin: 9px 0 14px }
.source-link a { color: var(--cool); text-decoration: underline; text-underline-offset: 3px }
.rules-copy { margin-top: 32px }
.rules-cover { float: right; width: clamp(76px,14vw,120px); height: auto; margin: 0 0 12px 18px; border-radius: 6px }
.game-reading { margin: 26px 0 }
.game-reading h2 { font-size: clamp(22px,2vw,30px) }
.game-reading ul { display: flex; flex-wrap: wrap; gap: 9px 22px; padding: 0; margin: 12px 0; list-style: none }
.game-reading a { display: inline-block; padding: 5px 0; color: var(--cool); text-decoration: underline; text-underline-offset: 4px }
@media (max-width: 420px) { .rules-cover { float: none; margin: 0 0 12px } }
.transit { min-height: 100vh; display: grid; place-items: center; padding: 20px }
.transit main { width: min(530px,100%); background: var(--panel); border: 1px solid var(--stroke); border-radius: 14px; padding: clamp(24px,5vw,50px) }
.transit h1 { margin: 24px 0 12px; font-size: clamp(34px,5vw,48px); line-height: 1.05; letter-spacing: -.04em }
.transit p { color: var(--soft); margin-bottom: 22px }
@media (max-width: 1020px) {
  .brand span { display: none }
  .nav { gap: 16px }
  .head-inner { gap: 22px }
  .game-grid { grid-template-columns: repeat(5,minmax(0,1fr)) }
  .collection-list { gap: 8px }
  .collection { flex-wrap: wrap; gap: 9px }
  .collection > svg { display: none }
  .foot { flex-wrap: wrap }
}
@media (max-width: 1100px) {
  .js .menu-toggle { display: inline-grid }
  .js .nav { display: none; position: absolute; z-index: 6; right: 0; top: calc(100% - 2px); min-width: 205px; border-radius: 8px; padding: 10px; background: var(--panel); border: 1px solid var(--stroke); box-shadow: 0 8px 35px #0006 }
  .js .nav.open { display: grid; gap: 0 }
  .js .nav a { padding: 10px; align-self: center; min-height: 44px }
  .lobby:not(.article-page) .nav a:first-child::after { display: none }
  html:not(.js) .head-inner { flex-wrap: wrap; padding-block: 10px }
  html:not(.js) .nav { flex-wrap: wrap; order: 3; width: 100%; padding-bottom: 3px }
}
@media (max-width: 800px) {
  :root { --gutter: 20px }
  .head-inner { min-height: 64px }
  .logo { width: 83px }
  .hero { padding-top: 18px }
  .hero h1 { font-size: clamp(43px,7.3vw,58px) }
  .hero-copy { padding: 24px }
  .hero-copy > p { font-size: 14px }
  .hero-frame { min-height: 310px }
  .game-grid, .atlas .game-grid { grid-template-columns: repeat(4,minmax(0,1fr)) }
  .action-grid { gap: 9px }
  .action-card { padding: 15px }
  .vip .hero-image { min-height: 285px }
  .reading-inner { grid-template-columns: 1fr; gap: 18px }
  .club .hero-frame { min-height: 320px }
  .foot p { width: 100% }
}
@media (max-width: 560px) {
  :root { --gutter: 16px }
  .head-inner { gap: 8px }
  .actions { gap: 6px }
  .register,.login { padding: 0 10px; min-height: 42px; font-size: 12px }
  .register .icon,.login .icon { display: none }
  .hero-frame,.access .hero-frame,.vip .hero-frame,.atlas .hero-frame,.desk .hero-frame,.club .hero-frame { grid-template-columns: 1fr; min-height: 0 }
  .hero-copy,.lobby .hero-copy,.access .hero-copy,.atlas .hero-copy,.club .hero-copy { padding: 24px 22px 15px }
  .hero h1, .atlas .hero h1, .desk .hero h1 { font-size: clamp(42px,11vw,59px); margin-top: 12px; margin-bottom: 10px }
  .hero-actions { margin-top: 15px }
  .hero-image,.lobby .hero-image,.club .hero-image,.access .hero-image { position: relative; inset: auto; grid-area: auto; z-index: 0; min-height: 0; height: clamp(160px,46vw,240px); border: 0 }
  .lobby .hero-image::after,.club .hero-image::after { background: linear-gradient(180deg,#102120,transparent 27%) }
  .hero-image > img { object-position: center 49% }
  .slide-controls { bottom: 8px; right: 8px }
  .access .hero-copy { grid-area: auto }
  .access .hero-image { order: -1; height: 125px; border-bottom: 2px solid var(--cool) }
  .access .hero-copy { padding-bottom: 24px }
  .vip .hero-frame { padding-block: 16px }
  .vip .hero-copy,.desk .hero-copy { padding: 4px 0 18px }
  .vip .hero-image { height: 180px; min-height: 0 }
  .atlas .hero-copy { border-left-width: 3px }
  .atlas .hero-image { height: 145px; border-top: 1px solid var(--stroke) }
  .club .hero-image { height: 170px }
  .desk .hero-image { display: block; min-height: 0; height: 155px }
  .desk .hero { padding-top: 20px }
  .desk .hero-frame { padding-bottom: 18px }
  .section-head { flex-wrap: wrap; gap: 12px; margin-bottom: 14px }
  .search { width: 100% }
  .chips { gap: 6px; margin-bottom: 14px }
  .chips button { min-height: 42px; font-size: 12px; padding: 6px 9px }
  .game-grid,.atlas .game-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px }
  .save { right: 0; top: 0 }
  .action-grid,.collection-list,.desk .questions,.article-grid { grid-template-columns: 1fr }
  .collection { flex-wrap: nowrap }
  .collection > svg { display: block }
  .action-card { padding: 18px }
  .action-card p { margin-bottom: 7px }
  .pict { margin-bottom: 11px }
  .dialog-inner { grid-template-columns: 85px minmax(0,1fr); gap: 14px; padding-inline: 16px }
  .dialog-inner h2 { font-size: 22px }
  .support-card { align-items: flex-start; gap: 12px }
  .foot { margin-block: 0; gap: 14px }
  .foot > div { flex-wrap: wrap; gap: 8px }
  .foot p { font-size: 12px }
}
@media (max-width: 380px) {
  .game-grid,.atlas .game-grid { grid-template-columns: repeat(2,minmax(0,1fr)) }
  .brand .logo { width: 68px }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *,*::before,*::after { transition: none !important; animation: none !important }
}