.games-page { --game-mint:#8ae9cf; }
.games-page h1,.games-page h2,.games-page h3 { text-wrap:balance; }
.games-page p { text-wrap:pretty; }
.games-page :focus-visible { outline:3px solid var(--game-mint); outline-offset:5px; }
.games-skip { position:fixed; top:-80px; left:20px; z-index:2000; padding:14px 20px; background:var(--game-mint); color:#110b23; }
.games-skip:focus { top:15px; }
.games-eyebrow { font-size:11px; font-weight:700; letter-spacing:2.5px; color:var(--game-mint); margin-bottom:20px; }
.games-hero { display:grid; grid-template-columns:1fr 1fr; gap:50px; min-height:790px; align-items:center; padding-top:150px; padding-bottom:85px; }
.games-hero h1 { font-size:clamp(45px,5.8vw,76px); line-height:1.05; letter-spacing:-2px; margin-bottom:28px; }
.games-hero h1 em,.numbers-feature h2 em { font-style:normal; color:var(--gold-light); }
.games-lead { color:#bdb2d2; font-size:17px; line-height:1.85; max-width:510px; }
.games-actions { display:flex; flex-wrap:wrap; gap:23px; align-items:center; margin:30px 0 25px; }
.games-page .btn-gold { font-size:14px; padding:14px 23px; }
.games-text-link { color:#e7dcf4; font-size:14px; text-decoration:underline; text-underline-offset:6px; text-decoration-color:#8c71a1; }
.games-facts { color:#a596bb; font-size:11px; }
.games-screen-fan { position:relative; height:510px; isolation:isolate; }
.games-screen-fan img { position:absolute; width:200px; height:auto; border:5px solid #3c2d52; border-radius:24px; box-shadow:0 25px 65px #0008; }
.fan-left { left:38px; top:55px; transform:rotate(-12deg); }
.fan-right { right:38px; top:48px; transform:rotate(12deg); }
.games-screen-fan .fan-front { z-index:1; left:50%; top:0; transform:translateX(-50%); border-color:#9174bb; width:220px; }
.games-jump { display:flex; flex-wrap:wrap; align-items:center; gap:12px 30px; padding-block:25px; border-block:1px solid #493452; }
.games-jump a { font-size:12px; color:#c3b4d6; }
.games-jump a:hover { color:var(--gold-light); }
.games-section { padding-top:100px; padding-bottom:35px; scroll-margin-top:105px; }
.games-section-heading { max-width:760px; margin-bottom:45px; }
.games-section-heading h2,.games-duels h2,.games-start h2 { font-size:clamp(32px,3.8vw,48px); line-height:1.13; margin-bottom:24px; }
.games-section-heading>p:last-child { color:#b9accb; line-height:1.85; font-size:15px; }
.games-catalog { display:grid; grid-template-columns:1fr 1fr; gap:25px; }
.game-story { display:grid; grid-template-columns:135px 1fr; gap:25px; padding:27px; border:1px solid #3b2c4d; border-radius:22px; background:#140e26; align-items:center; }
.game-story:hover { border-color:var(--game-accent); }
.game-number { color:var(--game-accent); font:500 13px 'Outfit',sans-serif; letter-spacing:2px; }
.game-story h3 { font-size:26px; line-height:1.13; margin:10px 0 16px; }
.game-story h4 { font-size:15px; line-height:1.5; color:var(--game-accent); font-weight:500; margin-bottom:12px; }
.game-story p { font-size:12px; line-height:1.85; color:#b5a8ca; }
.game-modes { display:block; font-size:10px; color:#ded0ef; margin-top:20px; }
.screenshot-link { display:block; color:#a697bc; font-size:9px; text-align:center; line-height:1.6; min-width:0; }
.screenshot-link img { display:block; width:100%; height:auto; border-radius:15px; border:1px solid #5f476f; box-shadow:0 12px 32px #0005; }
.screenshot-link>span { display:block; margin-top:11px; }
.screenshot-link:hover>span { color:var(--gold-light); }
.games-note { color:#a394b5; font-size:11px; line-height:1.85; margin-top:22px; }
.games-duels { background:#171029; border-block:1px solid #3b2b4a; padding:70px 0; margin-top:65px; }
.games-duel-grid { display:grid; grid-template-columns:1fr 1fr; gap:90px; }
.games-duel-grid article { scroll-margin-top:105px; }
.games-duels h2 { font-size:37px; }
.games-duels article>p:not(.games-eyebrow):not(.games-note) { font-size:14px; color:#bdafcf; line-height:1.9; }
.games-duels ul { padding-left:18px; display:grid; gap:15px; margin:26px 0 30px; font-size:13px; color:#d0c0de; line-height:1.75; }
.games-duel-grid article+article { border-left:1px solid #51405e; padding-left:55px; }
.castle-layout { display:grid; grid-template-columns:340px 1fr; gap:90px; align-items:center; }
.castle-screen { max-width:340px; padding:12px; background:#20172b; border:1px solid #755639; border-radius:27px; }
.castle-screen img { border-radius:16px; }
.castle-chapters { display:grid; gap:30px; }
.castle-chapters article { display:flex; gap:25px; }
.castle-chapters article>span { color:var(--gold-light); font:500 19px 'Outfit',sans-serif; margin-top:4px; }
.castle-chapters h3 { font-size:24px; margin-bottom:12px; line-height:1.2; }
.castle-chapters p { font-size:14px; color:#b9a8c9; line-height:1.9; }
.castle-notes { border-left:3px solid #b68c4f; padding:17px 23px; margin:35px 0 10px; font-size:13px; line-height:1.9; color:#bdaacb; }
.castle-notes strong { color:#ead2b1; font-weight:600; }
.numbers-feature { background:linear-gradient(115deg,#18132b,#292044); padding:80px 0; margin-top:65px; border-block:1px solid #5e4778; scroll-margin-top:80px; }
.numbers-layout { display:grid; grid-template-columns:1.15fr 1fr; gap:95px; align-items:center; }
.numbers-feature h2 { font-size:clamp(40px,5vw,63px); line-height:1.06; margin-bottom:25px; }
.numbers-feature p { font-size:15px; color:#c2b4d5; line-height:1.9; }
.merge-example { display:flex; align-items:center; gap:13px; margin:30px 0; }
.merge-example span { display:grid; place-items:center; width:62px; height:62px; background:#d8eeeb; border-radius:13px; font:600 31px 'Outfit',sans-serif; color:#18283c; }
.merge-example span:last-child { background:#b7ddd4; }
.merge-example b { color:#a28bb8; font-weight:400; font-size:22px; }
.numbers-details h3 { font-size:23px; margin:28px 0 10px; }
.numbers-details p { font-size:14px; }
.numbers-details .games-note { font-size:11px; }
.numbers-screen { width:100%; max-width:340px; justify-self:center; margin:0; padding:12px; border:1px solid #8a72ab; border-radius:27px; background:#382a4b; }
.games-start { display:grid; grid-template-columns:1.2fr 1fr; gap:90px; padding-bottom:100px; }
.games-start>div>p:not(.games-eyebrow),.games-start aside p { font-size:14px; color:#b9a9cc; line-height:1.9; margin-bottom:28px; }
.games-start aside { align-self:center; border-left:2px solid var(--game-mint); padding-left:35px; }
.games-start aside h3 { font-size:27px; margin-bottom:20px; }
.games-footer { padding:40px 0; }
.games-footer>.container { display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:center; }
.games-footer .container>div { display:flex; gap:23px; justify-content:flex-end; flex-wrap:wrap; font-size:12px; }
.games-footer p { grid-column:1/-1; font-size:11px; color:#a698ba; }
.game-image-dialog { margin:auto; padding:38px 16px 17px; max-height:94dvh; width:min(440px,94vw); background:#170f29; color:#dfd0ec; border:1px solid #7d6294; border-radius:20px; }
.game-image-dialog::backdrop { background:#070312dc; backdrop-filter:blur(6px); }
.game-image-dialog img { display:block; max-height:78dvh; width:auto; max-width:100%; margin:auto; border-radius:10px; }
.game-image-dialog button { position:absolute; right:13px; top:5px; width:35px; height:35px; background:none; border:0; color:#fff; font-size:30px; cursor:pointer; }
.game-image-dialog p { font-size:11px; text-align:center; margin-top:15px; }
.home-games-promo { border:1px solid #5d4779; border-radius:22px; padding:28px 34px; margin:0 auto 50px; background:linear-gradient(120deg,#1b122f,#29203b); display:flex; justify-content:space-between; align-items:center; gap:30px; }
.home-games-promo h2 { font-size:26px; margin-bottom:8px; }
.home-games-promo p { font-size:13px; color:#baa9ce; }
.home-games-promo .btn { flex-shrink:0; font-size:13px; }
@media(max-width:1000px) { .games-hero { gap:25px; } .games-screen-fan img { width:165px; } .games-screen-fan .fan-front { width:190px; } .games-screen-fan { height:450px; } .game-story { padding:20px; grid-template-columns:105px 1fr; gap:19px; } .game-story h3 { font-size:23px; } .castle-layout,.numbers-layout { gap:45px; } .games-duel-grid { gap:40px; } .games-duel-grid article+article { padding-left:35px; } }
@media(max-width:768px) {
  .games-hero { grid-template-columns:1fr; min-height:0; padding-top:130px; padding-bottom:55px; gap:48px; }
  .games-hero h1 { font-size:53px; letter-spacing:-1.5px; }
  .games-lead { font-size:15px; }
  .games-screen-fan { height:400px; width:min(360px,100%); margin:auto; }
  .games-screen-fan img { width:145px; }
  .games-screen-fan .fan-front { width:175px; }
  .games-jump { gap:15px 22px; padding-block:22px; }
  .games-jump a { font-size:11px; }
  .games-section { padding-top:70px; }
  .games-section-heading h2 { font-size:34px; }
  .games-catalog { grid-template-columns:1fr; }
  .game-story { padding:23px; grid-template-columns:110px 1fr; }
  .game-story h3 { font-size:25px; }
  .game-story h4 { font-size:14px; }
  .games-duels { padding:60px 0; margin-top:35px; }
  .games-duel-grid { grid-template-columns:1fr; gap:45px; }
  .games-duel-grid article+article { border-left:0; border-top:1px solid #51405e; padding-left:0; padding-top:40px; }
  .games-duels h2 { font-size:33px; }
  .castle-layout { grid-template-columns:1fr; gap:40px; }
  .castle-screen { width:270px; margin:auto; }
  .castle-chapters article { gap:20px; }
  .castle-chapters h3 { font-size:23px; }
  .numbers-feature { margin-top:40px; padding:60px 0; }
  .numbers-layout { grid-template-columns:1fr; gap:35px; }
  .numbers-screen { width:270px; }
  .games-start { grid-template-columns:1fr; gap:40px; padding-bottom:70px; }
  .games-start h2 { font-size:37px; }
  .games-footer>.container { grid-template-columns:1fr; gap:22px; }
  .games-footer .container>div { justify-content:flex-start; }
  .home-games-promo { flex-direction:column; align-items:flex-start; gap:20px; margin-inline:24px; width:auto; padding:26px; }
}
@media(max-width:360px) { .games-hero h1 { font-size:45px; } .games-screen-fan { height:350px; } .games-screen-fan img { width:118px; } .games-screen-fan .fan-front { width:145px; } .game-story { padding:18px; grid-template-columns:85px 1fr; gap:16px; } .game-story h3 { font-size:22px; } .game-story p { font-size:11px; } .game-modes { font-size:9px; } .castle-screen,.numbers-screen { width:250px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .games-page * { transition:none!important; animation:none!important; } }
