/* The details page of a game (templates/games/guide_base.html), on guide pages only. Design: the approved mockups
   of 2026-11-06. Classes start with a- (the page) or gd- (small parts), so nothing here meets a site.css rule.
   The mock's dark and light tokens are the site's own: the theme is data-theme on <html>, set before the first
   paint from the reader's choice or prefers-color-scheme (templates/base.html), so no second switch lives here.
   The breakpoints are @container queries on .gd, the width of the main column (the sidebar is outside it). */
.gd{--tx:var(--txt-hi);--mut:var(--txt-2);--link:var(--tang-ink);--sea:var(--aqua-ink)}
/* full-bleed inside the main column: the page loses its padding and its 1140px cap */
main.page.gd-page{max-width:1600px;padding:0 0 40px;display:block}
.gd-fc .lk-sc{position:absolute;left:0;top:0;width:280px;height:392px;transform:scale(.5);transform-origin:0 0}
.gd{container-type:inline-size;background:var(--bg);color:var(--tx);font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:16px;line-height:1.6}
.gd *{box-sizing:border-box}
.a-hero{position:relative;min-height:640px;padding-top:72px;box-sizing:border-box;display:flex;align-items:flex-end;overflow:hidden;background:#0d3a4a}
.a-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.a-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,20,28,.15) 30%,rgba(6,20,28,.86) 78%,rgba(6,20,28,.96))}
.a-crumb{position:absolute;top:24px;left:48px;font-size:14px;color:#fff;background:rgba(6,20,28,.62);padding:4px 12px;border-radius:999px}
.a-crumb a{color:#ffc29f}
.a-pin{position:absolute;left:58%;top:27%;display:flex;align-items:center;gap:10px;background:#101a20;color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:14px;padding:8px 14px 8px 8px;font-size:13px;line-height:1.3}
.a-pin i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#f2610d;color:#14203a;font:800 14px Outfit,sans-serif;font-style:normal}
.a-pin small{display:block;font:500 10px "Azeret Mono",monospace;letter-spacing:.08em;color:#b9c6cc}
.a-copy{position:relative;padding:0 48px 40px;max-width:820px;color:#fff}
.a-kick{font:500 12px "Azeret Mono",monospace;letter-spacing:.1em;color:#ffc29f;margin:0 0 12px}
.a-copy h1{font:800 60px/1.04 Outfit,sans-serif;letter-spacing:-.025em;margin:0 0 16px}
.a-copy p{font-size:18px;margin:0 0 24px;color:#e8edf0;max-width:660px}
.a-cta{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 30px;border-radius:999px;background:#f2610d;color:#14203a;font:700 18px "Plus Jakarta Sans",sans-serif;text-decoration:none;white-space:nowrap}
.a-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.a-note{font-size:14px;color:#d6dee2}
.a-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line)}
.a-stat{padding:22px 24px 22px 48px;border-right:1px solid var(--line)}
.a-stat:last-child{border-right:0}
.a-stat b{display:block;font:800 40px/1 Outfit,sans-serif;letter-spacing:-.02em}
.a-stat span{display:block;margin-top:6px;font:500 11px "Azeret Mono",monospace;letter-spacing:.06em;color:var(--mut)}
.a-sec{padding:64px 48px 0}
.a-sec h2{font:800 34px/1.1 Outfit,sans-serif;letter-spacing:-.015em;margin:0 0 8px}
.a-sub{color:var(--mut);margin:0 0 28px;max-width:640px}
.a-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.a-tile{position:relative;overflow:hidden;border-radius:18px;background:var(--card);border:1px solid var(--line);min-height:300px;display:flex;flex-direction:column;justify-content:flex-end}
.a-w3{grid-column:span 3}
.a-tile .art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.a-tile.img .tx{background:linear-gradient(180deg,rgba(6,20,28,0),rgba(6,20,28,.9) 38%);color:#fff;padding:72px 22px 20px;position:relative}
.a-tile.img .tx h3{color:#fff}
.a-tile.img .tx p{color:#e8edf0}
.a-tile .tx{padding:20px 22px;position:relative}
.a-tile h3{font:700 22px/1.2 Outfit,sans-serif;margin:0 0 6px}
.a-tile p{margin:0;font-size:15px;line-height:1.5;color:var(--mut)}
.a-fight{flex:1;position:relative;display:grid;place-items:center;min-height:180px;background:#14241c}
.a-fight img{width:170px;height:170px;object-fit:contain;position:relative}
.a-ring{position:absolute;width:190px;height:190px;border-radius:50%;border:5px solid #e0605a}
.a-ring2{position:absolute;width:236px;height:236px;border-radius:50%;border:2px dashed rgba(224,96,90,.65)}
.a-party{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding:20px 22px 0;flex:1;align-content:center}
.a-slot{aspect-ratio:1;border-radius:10px;background:var(--sunk);border:1px dashed var(--line);display:grid;place-items:center;overflow:hidden}
.a-slot img{width:100%;height:100%;object-fit:contain}
.a-els{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:22px 22px 0;flex:1;align-content:center}
.a-el{border-radius:12px;padding:14px 6px;text-align:center;font:500 12px "Azeret Mono",monospace;border:1px solid var(--line);background:var(--sunk);color:var(--tx)}
.a-el i{display:block;width:22px;height:22px;border-radius:50%;margin:0 auto 8px}
.a-cards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:32px 36px}
.a-fan{display:flex;justify-content:center;padding:6px 16px}
.a-fan .gd-fc{position:relative;flex:none;width:140px;height:196px;margin-left:-60px}
.a-fan .gd-fc:first-child{margin-left:0;transform:rotate(-7deg)}
.a-fan .gd-fc:nth-child(2){transform:rotate(-2deg) translateY(-8px)}
.a-fan .gd-fc:nth-child(3){transform:rotate(3deg) translateY(-4px)}
.a-fan .gd-fc:nth-child(4){transform:rotate(8deg) translateY(6px)}
.a-link{color:var(--link);font-weight:600}
.a-maps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:24px}
.a-map{position:relative;border-radius:16px;overflow:hidden;height:190px;background:#0d3a4a}
.a-map img{width:100%;height:100%;object-fit:cover;display:block}
.a-map span{position:absolute;left:12px;bottom:12px;background:rgba(6,20,28,.82);color:#fff;font-size:13px;font-weight:600;padding:4px 10px;border-radius:8px}
.a-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.a-g h3{display:flex;justify-content:space-between;align-items:baseline;font:700 20px Outfit,sans-serif;margin:0;padding-bottom:10px;border-bottom:1px solid var(--line)}
.a-g h3 span{font:500 12px "Azeret Mono",monospace;color:var(--mut)}
.a-g ul{list-style:none;margin:10px 0 0;padding:0;columns:2;column-gap:14px}
.a-g li{font-size:14px;line-height:1.3;padding:5px 0;break-inside:avoid}
.a-g a{color:var(--link);text-decoration:none}
.a-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
.a-q{padding:18px 0;border-top:1px solid var(--line)}
.a-q h3{font:700 17px "Plus Jakarta Sans",sans-serif;margin:0 0 4px}
.a-q p{margin:0;color:var(--mut);font-size:15px}
.a-end{position:relative;margin:64px 48px 0;border-radius:18px;overflow:hidden;background:#17321f;min-height:240px;display:flex;align-items:center}
.a-end img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.a-end .sc{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,20,28,.92) 35%,rgba(6,20,28,.1) 80%)}
.a-end div.in{position:relative;padding:32px 36px;color:#fff}
.a-end h2{font:800 32px/1.1 Outfit,sans-serif;margin:0 0 16px}
.a-foot{margin:20px 48px 0}
@container (max-width:1180px){
.a-copy h1{font-size:52px}
.a-groups{grid-template-columns:minmax(0,1fr)}
.a-g ul{columns:3}
}
@container (max-width:980px){
.a-stat{padding-left:24px}
.a-sec{padding:52px 32px 0}
.a-copy{padding:0 32px 32px}
.a-crumb{left:32px}
.a-end{margin:52px 32px 0}
.a-foot{margin:20px 32px 0}
.a-cards{grid-template-columns:minmax(0,1fr)}
}
@container (max-width:560px){
.a-hero{min-height:680px}
.a-copy{padding:0 16px 24px}
.a-copy h1{font-size:38px}
.a-copy p{font-size:16px}
.a-crumb{left:16px;top:14px}
.a-pin{left:16px;top:60px}
.a-cta{width:100%;justify-content:center}
.a-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.a-stat{padding:16px;border-bottom:1px solid var(--line)}
.a-stat:nth-child(2n){border-right:0}
.a-stat b{font-size:32px}
.a-sec{padding:44px 16px 0}
.a-sec h2{font-size:28px}
.a-w3{grid-column:span 6}
.a-maps{grid-template-columns:minmax(0,1fr)}
.a-map{height:150px}
.a-cards{padding:22px 16px}
.a-fan .gd-fc{width:112px;height:157px;margin-left:-58px}.gd-fc .lk-sc{transform:scale(.4)}
.a-g ul{columns:2}
.a-faq{grid-template-columns:minmax(0,1fr)}
.a-end{margin:44px 16px 0}
.a-end .sc{background:rgba(6,20,28,.74)}
.a-end div.in{padding:24px 18px}
.a-foot{margin:20px 16px 0}
.a-els{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.a-hero.side,.a-hero.top{background:var(--hb,#120b0a)}
.a-hero.side>img{left:auto;right:0;width:74%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 26%);mask-image:linear-gradient(90deg,transparent,#000 26%)}
.a-hero.side .a-scrim{background:linear-gradient(180deg,rgba(0,0,0,0) 78%,rgba(0,0,0,.45))}
.a-hero.side .a-copy{max-width:520px}
.a-hero.side .a-copy h1,.a-hero.xw .a-copy h1,.a-hero.quiz .a-copy h1{font-size:50px}
.a-hero.top{min-height:830px}
.a-hero.top>img{inset:0 0 auto 0;height:auto}
.a-hero.top .a-scrim{background:linear-gradient(180deg,rgba(18,9,5,0) 34%,#120905 60%)}
.a-hero.quiz>img{object-position:50% 72%}
.a-hero.quiz .a-scrim{background:linear-gradient(90deg,rgba(6,20,28,.88) 12%,rgba(6,20,28,.1) 62%),linear-gradient(180deg,rgba(6,20,28,0) 60%,rgba(6,20,28,.7))}
.a-hero.quiz .a-copy{max-width:600px}
.gd-qp{position:absolute;right:40px;top:40px;width:370px;background:#101a20;color:#fff;border:1px solid rgba(255,255,255,.24);border-radius:18px;padding:18px}
.gd-qp-top{display:flex;justify-content:space-between;align-items:center;font:500 11px "Azeret Mono",monospace;letter-spacing:.06em;color:#b9c6cc;margin-bottom:12px}
.gd-qp-time{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:3px solid #f2610d;color:#fff;font:800 16px Outfit,sans-serif}
.gd-qp-q{font:700 19px/1.3 Outfit,sans-serif;margin:0 0 14px}
.gd-qp-a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);margin-top:8px;font-size:15px}
.gd-qp-a i{font:500 11px "Azeret Mono",monospace;font-style:normal;color:#ffc29f}
.a-hero.xw{background:linear-gradient(120deg,#0e1633,#1c2a5c);min-height:640px}
.a-hero.xw .a-copy{max-width:520px}
.xwbox{position:absolute;right:48px;top:36px;width:500px}
.xwg{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:3px;background:#0a1026;padding:3px;border-radius:10px;border:1px solid rgba(255,255,255,.22)}
.xwc{position:relative;aspect-ratio:1;display:grid;place-items:center;background:#f6f7fb;color:#14203a;font:700 24px Outfit,sans-serif;border-radius:2px}
.xwc.k{background:transparent}
.xwc.w{background:#ffe2cf}
.xwc.on{background:#f2610d;color:#14203a}
.xwc small{position:absolute;left:3px;top:1px;font:500 9px "Azeret Mono",monospace;color:#56607a}
.xwbar{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-top:10px;padding:10px 14px;border-radius:12px;background:#0a1026;color:#fff;font-size:14px;line-height:1.35;border:1px solid rgba(255,255,255,.18)}
.xwbar small{display:block;font:500 10px "Azeret Mono",monospace;letter-spacing:.08em;color:#ffc29f}
.xwbar b{font:800 22px Outfit,sans-serif}
.gd-dr{flex:1;padding:22px 22px 0;display:flex;flex-direction:column;justify-content:center;gap:10px;min-height:150px}
.gd-dice{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.gd-die{width:48px;height:48px;border-radius:11px;border:1px solid rgba(0,0,0,.25);box-shadow:inset 0 -4px 0 rgba(0,0,0,.14)}
.gd-die.s{width:30px;height:30px;border-radius:8px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.14)}
.gd-blu{background:#2a55c4}
.gd-red{background:#e33b2e}
.gd-kv{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:9px 0;border-top:1px solid var(--line);font-size:15px}
.gd-kv:first-child{border-top:0}
.gd-kv>b,.gd-kv>span.v{font:500 14px "Azeret Mono",monospace;white-space:nowrap}
.gd-kv.t{font-weight:700;border-top:2px solid var(--tx)}
.gd-kv.t>b{font:800 22px Outfit,sans-serif}
.gd-kv .l{display:flex;align-items:center;gap:8px}
.gd-tags{display:flex;flex-wrap:wrap;gap:8px}
.gd-tag{font:500 12px "Azeret Mono",monospace;border:1px solid var(--line);background:var(--sunk);border-radius:999px;padding:4px 12px;white-space:nowrap}
.gd-pcs{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gd-pc{width:62px;height:88px;border-radius:9px;background:#fff;color:#14203a;border:1px solid #c9cfdb;display:flex;flex-direction:column;align-items:center;justify-content:center;font:800 26px/1 Outfit,sans-serif;box-shadow:0 3px 8px rgba(10,15,36,.22)}
.gd-pc i{font-style:normal;font-size:20px;margin-top:4px}
.gd-pc.rd{color:#c8281e}
.gd-pcs .gd-op{font:800 24px Outfit,sans-serif;color:var(--mut)}
.gd-pcs .gd-sum{font:800 34px Outfit,sans-serif}
.gd-pcs .gd-cap{font:500 12px "Azeret Mono",monospace;color:var(--mut)}
.gd-hand{display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px;align-items:center;margin-bottom:14px}
.gd-hand>span{font:500 11px "Azeret Mono",monospace;letter-spacing:.06em;color:var(--mut)}
.gd-ten{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px}
.gd-ten i{height:30px;border-radius:7px;background:var(--sunk);border:1px solid var(--line)}
.gd-ten i.d{background:var(--sea);border-color:var(--sea)}
.gd-ten i.c{background:#f2610d;border-color:#f2610d}
.gd-bar{height:10px;border-radius:999px;background:var(--sunk);border:1px solid var(--line);overflow:hidden}
.gd-bar i{display:block;height:100%;background:#f2610d}
.gd-big{font:800 54px/1 Outfit,sans-serif;letter-spacing:-.02em}
.gd-big small{font:500 12px "Azeret Mono",monospace;letter-spacing:.06em;color:var(--mut);margin-left:8px}
.gd-row7{display:grid;grid-template-columns:repeat(7,minmax(0,1fr)) 1.3fr;gap:6px;align-items:center}
.gd-h7{aspect-ratio:1;border-radius:50%;background:var(--sunk);border:1px solid var(--line);display:grid;place-items:center;font:700 16px Outfit,sans-serif}
.gd-h7.p{border:2px dashed #f2610d;color:var(--mut)}
.gd-h7.up{background:#f2610d;border-color:#f2610d;color:#14203a}
.gd-h7.u{aspect-ratio:auto;height:100%;min-height:42px;border-radius:999px;background:#f2610d;border-color:#f2610d;color:#14203a}
.gd-ulo{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.gd-ulo .gd-big small{display:block;margin:6px 0 0}
.gd-lad{display:flex;flex-direction:column}
.gd-lad>div{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.gd-lad>div:first-child{border-top:0}
.gd-lad i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--sunk);border:1px solid var(--line);font:800 14px Outfit,sans-serif;font-style:normal}
.gd-lad>div:last-child i{background:#f2610d;border-color:#f2610d;color:#14203a}
.gd-lad b{display:block;font:700 17px Outfit,sans-serif;line-height:1.2}
.gd-lad span{font-size:14px;color:var(--mut)}
.a-end .xwg{position:absolute;right:36px;top:50%;width:190px;margin-top:-95px}
.a-end .xwc{font-size:0}
.a-end.ink{background:linear-gradient(120deg,#0e1633,#1c2a5c)}
@container (max-width:1180px){
.a-hero.side .a-copy h1,.a-hero.xw .a-copy h1,.a-hero.quiz .a-copy h1{font-size:44px}
.xwbox{width:440px}
.a-hero.side .a-copy,.a-hero.xw .a-copy{max-width:440px}
}
@container (max-width:980px){
.a-hero.side,.a-hero.top,.a-hero.xw{display:block;min-height:0}
.a-hero.side>img,.a-hero.top>img{position:static;display:block;width:100%;height:auto;-webkit-mask-image:none;mask-image:none}
.a-hero.side .a-scrim,.a-hero.top .a-scrim{display:none}
.a-hero.side .a-copy,.a-hero.top .a-copy,.a-hero.xw .a-copy{max-width:none;padding-top:28px}
.xwbox{position:relative;right:auto;top:auto;width:auto;max-width:560px;margin:0 auto;padding:68px 32px 0}
.a-hero.quiz{min-height:820px;flex-direction:column;align-items:stretch;justify-content:flex-end}
.a-hero.quiz .a-scrim{background:linear-gradient(180deg,rgba(6,20,28,.2) 25%,rgba(6,20,28,.94) 62%)}
.gd-qp{position:relative;right:auto;top:auto;width:auto;max-width:440px;margin:64px 32px 20px}
}
@container (max-width:560px){
.a-hero.side,.a-hero.top,.a-hero.xw{min-height:0}
.a-hero.side .a-copy h1,.a-hero.xw .a-copy h1,.a-hero.quiz .a-copy h1,.a-hero.top .a-copy h1{font-size:36px}
.a-hero.quiz{min-height:0}
.gd-qp{margin:60px 16px 16px;max-width:none}
.xwbox{padding:60px 16px 0}
.xwc{font-size:18px}
.xwc small{font-size:7px}
.a-end .xwg{display:none}
.gd-row7{gap:4px}
.gd-h7{font-size:14px}
.gd-big{font-size:44px}
}

/* ---- parts the mock did not draw ---- */
.gd .a-cta:hover,.gd .a-crumb a:hover{text-decoration:none}
.gd .a-crumb a{font-weight:600}
.gd .a-link{display:inline-block}
.gd ol.rules{margin:18px 0 0;padding-left:22px;display:grid;gap:8px;max-width:760px}
.gd .gd-rh{font:700 22px/1.2 Outfit,sans-serif;margin:40px 0 0}
.gd .a-hero>img{display:block}
.a-copy h1,.a-end h2{color:inherit}