@font-face {
    font-family: 'SKN Arcade';
    src: url('/assets/fonts/RussoOne-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
}

:root {
    --arcade-display: 'SKN Arcade', 'Arial Black', sans-serif;
    --arcade-body: 'PT Sans', Arial, sans-serif;
    --arcade-mono: 'Cascadia Mono', Consolas, monospace;
}

/* A news arcade, with a separate material palette for every world. */
.games-hub, .game-page {
    font-family: var(--arcade-body);
    width: min(1400px, calc(100% - 64px));
    padding-top: 30px;
}
.game-page--tomato { --game-accent: #f1272c; --frame-edge: #784c42; --frame-deep: #201917; --scene-label: '01 / УМНАЯ КУХНЯ'; }
.game-page--night { --game-accent: #6c9cfa; --frame-edge: #3c5d92; --frame-deep: #0b1429; --scene-label: '02 / НОЧНАЯ ДОСТАВКА'; }
.game-page--sunset { --game-accent: #f24848; --frame-edge: #906a39; --frame-deep: #15251b; --scene-label: '03 / БРАЗИЛЬСКАЯ ИСТОРИЯ'; }
.game-page--paper { --game-accent: #e0bb77; --frame-edge: #83745a; --frame-deep: #1b3028; --scene-label: '04 / ШКОЛА ФАКТЧЕКА'; }
.game-page--terminal { --game-accent: #f52942; --frame-edge: #566079; --frame-deep: #10151f; --scene-label: '05 / ПРОТОКОЛ HUMAN-48'; }
.game-page { position: relative; }
.game-page::before {
    content: ''; position: absolute; z-index: -1; inset: -30px -32px 20%; pointer-events: none;
    background: radial-gradient(ellipse at 50% 15%, color-mix(in srgb, var(--game-accent) 9%, transparent), transparent 62%);
}
.game-breadcrumb { margin-bottom: 24px; font-size: 13px; letter-spacing: .03em; }
.game-breadcrumb a { padding: 7px 12px; border: 1px solid #56534e; background: #191918; color: #eee6d9; }
.game-breadcrumb a:hover { border-color: var(--game-accent); color: #fff; }
.game-intro { grid-template-columns: 168px 1fr; gap: 28px; margin-bottom: 28px; align-items: center; }
.game-intro-art { aspect-ratio: 16/10; border: 3px solid var(--frame-edge); box-shadow: 4px 4px 0 #08090b, inset 0 0 0 2px #eee; transform: rotate(-3deg); }
.game-intro h1 { font-family: var(--arcade-display); font-size: clamp(28px, 3.5vw, 49px); font-weight: 400; line-height: 1.14; letter-spacing: -.035em; }
.game-intro .games-kicker { color: var(--game-accent); font-size: 10px; letter-spacing: .18em; }
.game-intro > div > p:last-child { margin-top: 9px; max-width: 950px; font-size: 16px; line-height: 1.4; }
.game-stage-card { border: 3px solid #090a0d; outline: 1px solid var(--frame-edge); box-shadow: 0 0 0 5px var(--frame-deep), 0 0 0 6px #303239, 0 18px 60px #0009; scroll-margin-top: 90px; }
.arcade-toolbar { display: flex; min-height: 45px; gap: 16px; justify-content: space-between; align-items: center; padding: 7px 15px; background: linear-gradient(#292a2e, #18191d); color: #d6d6d3; border-bottom: 3px solid #07080a; box-shadow: inset 0 1px #ffffff21; }
.arcade-cabinet-label { display: flex; gap: 9px; align-items: center; font: 11px/1.2 var(--arcade-display); letter-spacing: .09em; white-space: nowrap; }
.arcade-cabinet-label > span { color: #8f9096; font: 9px var(--arcade-body); }
.arcade-cabinet-label i, .arcade-live-dot { display: inline-block; width: 7px; height: 7px; background: #83c96e; box-shadow: 0 0 9px #89ed6f80; }
.arcade-toolbar-actions { display: flex; gap: 7px; }
.arcade-toolbar button { appearance: none; border: 1px solid #51535a; border-bottom-width: 3px; padding: 6px 10px; background: #111216; color: #dfdfdc; cursor: pointer; font: 11px/1.2 var(--arcade-body); }
.arcade-toolbar button:hover { color: #fff; border-color: var(--game-accent); }
.arcade-toolbar button:focus-visible { outline: 2px solid #ffdb65; outline-offset: 3px; }
.arcade-toolbar button[aria-pressed='false'] { color: #8b8b93; }
.arcade-toolbar button[hidden] { display: none; }
.game-root { aspect-ratio: auto; }
.game-screen { font-family: var(--arcade-body); min-height: 680px; height: clamp(650px, 54vw, 780px); }
.game-screen button { font-family: var(--arcade-body); }
.game-screen :is(h2, .game-button, .game-chip, .game-result-stat strong) { font-family: var(--arcade-display); font-weight: 400; }
.game-screen :is(small, span, p, strong) { text-rendering: optimizeLegibility; }
.game-screen :is(button, input, a):focus-visible { outline: 3px solid #ffd15b; outline-offset: 4px; }

/* Selection screens are illustrated cabinet fronts with level tickets. */
.game-screen:has(> .game-start), .game-screen:has(> .game-result) {
    display: flex; justify-content: center; height: auto; min-height: 700px;
    padding: 46px clamp(22px, 4vw, 58px);
    background: linear-gradient(90deg, #06070be8 5%, #06070bd4 46%, #06070b38 100%), var(--scene-art) center / cover;
}
.game-screen:has(> .game-start)::before, .game-screen:has(> .game-result)::before {
    content: ''; display: block; position: absolute; inset: 0; opacity: .22; pointer-events: none;
    background: repeating-linear-gradient(0deg, #000 0 1px, transparent 1px 4px);
}
.game-start, .game-result {
    flex: none; align-self: flex-start; justify-content: flex-start; width: min(750px, 72%); max-width: 800px;
    max-height: none; overflow: visible; margin: 0; padding: clamp(24px, 3vw, 42px);
    background: linear-gradient(145deg, color-mix(in srgb, var(--frame-deep) 94%, #111), #0c0d10f5);
    color: #fff5e6; border: 2px solid var(--frame-edge); outline: 4px solid #08090b;
    box-shadow: inset 0 2px #ffffff27, 8px 8px 0 #0009; backdrop-filter: none;
}
.game-start::before, .game-result::before {
    content: var(--scene-label); display: block; width: 100%; margin: 0 0 24px;
    color: #bdb5a7; font: 10px/1.2 var(--arcade-mono); letter-spacing: .12em;
    padding-bottom: 13px; border-bottom: 1px solid #ffffff28;
}
.game-start-badge, .game-result-kicker { font: 700 11px/1.3 var(--arcade-body); letter-spacing: .12em; color: var(--game-accent); }
.game-start h2, .game-result h2 {
    max-width: 670px; margin: 0; font-family: var(--arcade-display); font-size: clamp(28px, 3.3vw, 46px);
    font-weight: 400; line-height: 1.12; letter-spacing: -.025em; text-shadow: 3px 3px #0008;
}
.game-start > p:not(.game-start-badge), .game-result > p:not(.game-result-kicker) {
    max-width: 600px; margin-top: 16px; font: 16px/1.5 var(--arcade-body); color: #d4cec2;
}
.game-start > p:last-child { font-size: 12px; color: #a7a59d; }
.game-start-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; width: 100%; margin-top: 26px; }
.game-button { border: 1px solid #9a9d9c; border-bottom-width: 4px; font: 13px/1.3 var(--arcade-display); padding: 12px 16px; letter-spacing: .015em; min-height: 48px; box-shadow: 3px 3px #0008; }
.game-button--primary { background: linear-gradient(#ffffff15, #0002), var(--game-accent); color: #fff; border-color: color-mix(in srgb, var(--game-accent) 48%, #fff); border-bottom-color: color-mix(in srgb, var(--game-accent) 45%, #000); text-shadow: 1px 2px #0006; }
.game-button--ghost { color: #e6e1d6; background: #202126; border-color: #686b71; border-bottom-color: #08090c; }
.game-button:hover { box-shadow: 3px 5px #0009; filter: brightness(1.15); }
.game-button:disabled { opacity: 1; background: #111318; color: #767b84; border-color: #353943; box-shadow: none; text-shadow: none; }
.game-button.game-level-option { display: grid; grid-template-columns: 31px 1fr 13px; gap: 8px; align-items: center; padding: 10px 12px; min-height: 62px; text-align: left; }
.game-level-number { font: 22px/1 var(--arcade-display); color: #fff; }
.game-level-label { font: 12px/1.25 var(--arcade-body); font-weight: 700; }
.game-level-marker { font: 22px/1 var(--arcade-body); color: #fff; }
.game-level-option:disabled .game-level-number { color: #555e6c; }
.game-level-option:disabled .game-level-marker { font-size: 0; width: 10px; height: 9px; border: 1px solid #59616b; position: relative; background: #353c45; }
.game-level-option:disabled .game-level-marker::before { content: ''; position: absolute; width: 6px; height: 6px; left: 1px; top: -6px; border: 1px solid #59616b; }
.game-start-actions:has(> .game-button:only-child) { grid-template-columns: 1fr; width: auto; }
.game-start-actions > .game-button:only-child { min-width: 220px; }
.game-result-actions { gap: 10px; margin-top: 25px; }
.game-result-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.game-result-stat { border: 1px solid var(--frame-edge); background: #070a0e66; padding: 15px 12px; }
.game-result-stat strong { font: 28px/1 var(--arcade-display); color: var(--game-accent); }
.game-result-stat span { margin-top: 8px; font: 10px/1.3 var(--arcade-body); color: #bab9b0; }
.ending-collection { gap: 7px; }
.ending-badge { font: 11px/1.3 var(--arcade-body); }

/* Context continues the cabinet materials without competing with gameplay. */
.game-sidebar { grid-template-columns: 1fr 1fr 1.6fr; gap: 18px; margin-top: 14px; }
.game-info-card, .game-news-card { border: 1px solid #484848; border-top: 3px solid var(--frame-edge); padding: 21px; background: linear-gradient(145deg, #212120, #151617); box-shadow: 3px 3px #0005; }
.game-info-label { font: 12px/1.3 var(--arcade-display); letter-spacing: .03em; color: #f3eddf; margin-bottom: 13px; }
.game-info-card ul, .game-info-card > p:not(.game-info-label), .game-news-card > p:not(.game-info-label) { font-size: 14px; line-height: 1.5; color: #bcbdbb; }
.game-news-card time { font: 11px/1.3 var(--arcade-mono); color: var(--game-accent); }
.game-news-card a { font-size: 16px; line-height: 1.35; }
.game-news-card small { font-size: 11px; }
.game-stage-card:fullscreen { width: 100vw; height: 100dvh; overflow: auto; background: #08090c; border: 0; outline: 0; box-shadow: none; }
.game-stage-card:fullscreen .game-root { width: min(100%, 1720px); margin-inline: auto; }
.game-stage-card:fullscreen .game-screen { min-height: calc(100dvh - 45px); height: calc(100dvh - 45px); }
.game-stage-card:fullscreen .game-screen:has(> .game-start), .game-stage-card:fullscreen .game-screen:has(> .game-result) { height: auto; }

/* Catalogue: illustrated game boxes on a dark arcade shelf. */
.games-hub { --game-accent: #f02b36; }
.games-hero {
    display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 35px; min-height: 460px;
    padding: 46px; overflow: hidden; color: #f8eddb; border: 1px solid #514342;
    background: radial-gradient(ellipse at 95% 30%, #68232666, transparent 65%), repeating-linear-gradient(0deg, #ffffff02 0 1px, transparent 1px 4px), #131415;
    box-shadow: inset 0 2px #ffffff16, 7px 7px #060708;
}
.games-hero::before { width: auto; height: auto; inset: 0 auto 0 0; border: 0; border-left: 5px solid #ed2c34; border-radius: 0; opacity: 1; }
.games-hero .games-kicker { display: flex; gap: 9px; align-items: center; font: 11px/1.4 var(--arcade-mono); letter-spacing: .06em; color: #cbc6b9; }
.games-hero h1 { font: 400 clamp(32px, 4.2vw, 61px)/1.13 var(--arcade-display); letter-spacing: -.04em; }
.games-hero h1 em { font-style: normal; color: #ff3c41; text-shadow: 3px 3px #0008; }
.games-hero-copy > p:last-of-type { max-width: 520px; margin: 20px 0 26px; color: #bcb8b0; font-size: 17px; line-height: 1.5; font-weight: 400; }
.arcade-hero-link { display: inline-flex; gap: 26px; align-items: center; padding: 15px 20px; background: linear-gradient(#ffffff15,#0001), #db202c; border: 1px solid #ff636b; border-bottom: 4px solid #770f1a; box-shadow: 4px 4px #0009; color: #fff; text-decoration: none; font: 14px var(--arcade-display); }
.arcade-hero-link:hover { background-color: #f52c36; transform: translateY(-2px); }
.arcade-hero-art { position: relative; height: 330px; }
.arcade-hero-art img { position: absolute; width: 85%; aspect-ratio: 16/9; object-fit: cover; border: 5px solid #25262b; outline: 1px solid #6d6261; box-shadow: 10px 12px 0 #0007; image-rendering: auto; }
.arcade-hero-art img:first-child { left: -5%; top: 0; transform: rotate(-7deg); }
.arcade-hero-art img:nth-child(2) { right: -8%; top: 100px; transform: rotate(6deg); }
.arcade-insert-coin { position: absolute; z-index: 2; bottom: 0; right: 5%; padding: 9px 13px; background: #e9bb60; color: #211c14; border: 3px solid #080a0d; transform: rotate(-3deg); font: 9px/1.3 var(--arcade-display); letter-spacing: .04em; }
.arcade-section-label { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 48px; padding-bottom: 14px; border-bottom: 1px solid #42413f; scroll-margin-top: 90px; }
.arcade-section-label h2 { margin: 0; font: 22px/1.2 var(--arcade-display); }
.arcade-section-label > span { color: #85858a; font: 10px var(--arcade-mono); }
.games-grid { gap: 22px; margin-top: 24px; }
.game-card { --box-accent: #ed3d39; background: #191a1c; border: 1px solid #4d4542; box-shadow: 4px 4px #070809; transition: transform .18s, border-color .18s; }
.game-card--night { --box-accent: #75a4ef; }
.game-card--sunset { --box-accent: #e8ba73; }
.game-card--paper { --box-accent: #d9c7a1; }
.game-card--terminal { --box-accent: #f3384e; }
.game-card:hover { transform: translateY(-5px); border-color: var(--box-accent); box-shadow: 4px 9px #070809; }
.game-card-media { border-bottom: 3px solid var(--box-accent); }
.game-card-media::after { background: linear-gradient(transparent 45%, #08090a66); }
.game-card-number { font: 17px/1 var(--arcade-display); padding: 8px 10px; color: #f1e9d9; border: 1px solid #ddd0b466; background: #0a0b0ee8; box-shadow: 3px 3px #0008; }
.game-card-topline { inset: 12px 12px auto; }
.game-card-play { display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid #ddd0b466; color: #f1e9d9; background: #0a0b0ee8; font: 21px var(--arcade-body); }
.game-card .game-card-copy { min-height: 250px; padding: 25px; color: #eee9dc; background: linear-gradient(160deg, color-mix(in srgb, var(--box-accent) 8%, #181a1d), #131519); }
.game-card-eyebrow { margin-bottom: 12px; color: var(--box-accent); font: 10px/1.3 var(--arcade-mono); letter-spacing: .025em; }
.game-card h2 { font: 400 clamp(22px, 2.4vw, 32px)/1.17 var(--arcade-display); letter-spacing: -.025em; }
.game-card p:not(.game-card-eyebrow) { font-size: 15px; color: #b6b5b0; line-height: 1.45; margin: 12px 0 22px; }
.game-card-action { display: flex; justify-content: space-between; align-items: center; width: 100%; padding-top: 13px; border-top: 1px solid #55534c; color: var(--box-accent); font: 12px var(--arcade-display); letter-spacing: .04em; }
.game-card-action span { font: 24px/1 var(--arcade-body); }
.games-editor-note { border-color: #41413f; border-left: 3px solid #b69c68; background: #1b1c1c; font-size: 13px; }

body.light-theme .games-hero { color: #f8eddb; }
body.light-theme .game-breadcrumb a { color: #eee6d9; }
body.light-theme .game-info-card, body.light-theme .game-news-card { background: #eee9df; border-color: #b3a997; }
body.light-theme .game-info-label { color: #292d2b; }
body.light-theme .game-card { color: #eee9dc; }
body.light-theme .games-editor-note { background: #eee9df; }

@media (min-width: 1550px) {
    .game-screen { height: 780px; }
    .game-start, .game-result { width: 690px; }
}
@media (max-width: 1100px) {
    .games-hub, .game-page { width: calc(100% - 36px); }
    .games-hero { gap: 18px; padding: 32px; }
    .arcade-hero-art { height: 280px; }
    .arcade-hero-art img:nth-child(2) { top: 90px; }
    .game-start, .game-result { width: min(740px, 86%); }
    .game-screen:has(> .game-start), .game-screen:has(> .game-result) { min-height: 660px; }
    .game-sidebar { grid-template-columns: 1fr 1fr; }
    .game-news-card { grid-column: 1/-1; }
}
@media (max-width: 720px) {
    .games-hub, .game-page { width: calc(100% - 24px); padding-top: 20px; }
    .game-page::before { inset-inline: -10px; }
    .game-intro { grid-template-columns: 100px 1fr; gap: 18px; margin-bottom: 23px; }
    .game-intro-art { width: 100px; }
    .game-intro h1 { font-size: clamp(23px, 4.7vw, 33px); }
    .game-intro .games-kicker { font-size: 9px; margin-bottom: 7px; }
    .game-intro > div > p:last-child { font-size: 13px; line-height: 1.35; }
    .game-breadcrumb { font-size: 11px; gap: 7px; margin-bottom: 20px; }
    .arcade-toolbar { min-height: 41px; padding: 6px 9px; gap: 8px; }
    .arcade-cabinet-label { font-size: 9px; gap: 6px; }
    .arcade-cabinet-label > span { display: none; }
    .arcade-toolbar button { font-size: 10px; padding: 5px 7px; }
    .game-screen { min-height: 600px; height: auto; }
    .game-screen:has(> .game-start), .game-screen:has(> .game-result) { min-height: 660px; padding: 28px 17px; background-position: 60% center; }
    .game-start, .game-result { width: 100%; max-width: none; padding: 24px 20px; }
    .game-start::before, .game-result::before { font-size: 8px; margin-bottom: 20px; }
    .game-start h2, .game-result h2 { font-size: clamp(26px, 6vw, 37px); line-height: 1.16; }
    .game-start > p:not(.game-start-badge), .game-result > p:not(.game-result-kicker) { font-size: 14px; }
    .game-start-actions { margin-top: 20px; gap: 7px; }
    .game-button.game-level-option { padding: 8px; grid-template-columns: 25px 1fr 10px; gap: 5px; min-height: 65px; }
    .game-level-number { font-size: 18px; }
    .game-level-label { font-size: 11px; }
    .game-sidebar { grid-template-columns: 1fr; gap: 10px; }
    .game-info-card, .game-news-card { padding: 18px; }
    .games-hero { grid-template-columns: 1fr; padding: 29px 23px 25px; gap: 23px; }
    .games-hero h1 { font-size: clamp(31px, 7.2vw, 48px); }
    .games-hero .games-kicker { font-size: 8px; }
    .games-hero-copy > p:last-of-type { font-size: 15px; margin: 16px 0 21px; }
    .arcade-hero-art { height: 260px; width: min(100%,450px); justify-self: center; }
    .arcade-hero-art img { width: 80%; }
    .arcade-hero-art img:first-child { left: 0; }
    .arcade-hero-art img:nth-child(2) { top: 76px; right: -2%; }
    .arcade-insert-coin { bottom: 4px; font-size: 8px; }
    .arcade-section-label { margin-top: 34px; gap: 10px; }
    .arcade-section-label h2 { font-size: 18px; }
    .arcade-section-label > span { max-width: 110px; font-size: 8px; text-align: right; }
    .games-grid { gap: 20px; margin-top: 20px; }
    .game-card .game-card-copy { min-height: 225px; padding: 22px; }
    .game-card h2 { font-size: 27px; }
    .game-card p:not(.game-card-eyebrow) { font-size: 14px; }
}
@media (max-width: 400px) {
    .game-intro { grid-template-columns: 1fr; }
    .game-intro-art { display: none; }
    .game-start-actions { grid-template-columns: 1fr; }
    .game-level-option.game-button { min-height: 52px; grid-template-columns: 30px 1fr 12px; }
    .game-result-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .game-result-stat { padding: 11px 7px; }
    .game-result-stat strong { font-size: 21px; }
    .arcade-hero-art { height: 222px; }
}