/* Reading layout for the individual game pages. */
.game-detail.gd-page{max-width:1160px;padding-top:28px;padding-bottom:46px}
.gd-page .gd-breadcrumbs{margin-bottom:24px;color:#aebfd6;font-size:13px}
.gd-page .gd-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:40px;align-items:start}
.gd-page .gd-artwork{min-width:0}
.gd-page .gd-art-frame{min-height:0;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);padding:20px;border:1px solid #294565;border-radius:14px;background:radial-gradient(ellipse at 45% 35%,#242848 0,#0a1e38 70%);height:390px}
.gd-page .gd-art-frame .detail-hero{width:100%;height:100%;min-height:0;min-width:0;max-height:100%;aspect-ratio:auto;object-fit:contain;object-position:center;border-radius:5px;background:transparent}
.gd-page .gd-art-frame.gd-native-art .detail-hero{width:auto;max-width:100%;height:auto;max-height:267px;aspect-ratio:auto}
.gd-page .gd-gallery{display:flex;gap:12px;margin-top:12px}
.gd-page .gd-gallery>button{flex:0 1 120px;border:1px solid #31516e;border-radius:7px;padding:5px;background:#08243e;color:#aec3db}
.gd-page .gd-gallery>button.selected{border-color:#ffda54;box-shadow:0 0 0 1px #ffda5426}
.gd-page .gd-gallery>button:hover{border-color:#e2bb44}
.gd-page .gd-gallery img{width:100%;height:57px;object-fit:contain;background:transparent}
.gd-page .gd-gallery span{display:block;font-size:10px;line-height:1.4;padding-top:4px}
.gd-page .gd-summary{padding:4px 0 0;min-width:0}
.gd-page .gd-summary .overline{font-size:11px;letter-spacing:1.8px}
.gd-page .gd-summary h1{font-size:36px;line-height:1.14;letter-spacing:-.7px;margin:10px 0 15px}
.gd-page .gd-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:11px}
.gd-page .gd-tags>a,.gd-page .gd-tags>span{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;min-height:28px;border:1px solid #254866;border-radius:6px;color:#d9e5f4;background:#0c2a47}
.gd-page .gd-tags .gd-provider{color:#ffdf78}
.gd-page .gd-provider svg{width:14px;height:14px}
.gd-page .gd-tags .gd-age{color:#e5bdcc;border-color:#57334b;background:#301b33}
.gd-page .gd-lead{margin-top:18px;font-size:15px;color:#c5d4e6;line-height:1.75}
.gd-page .gd-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px;margin:20px 0}
.gd-page .gd-facts>div{padding:10px 0;border-bottom:1px solid #23435d;min-width:0}
.gd-page .gd-facts dt{font-size:11px;color:#91aac6;margin:0 0 4px}
.gd-page .gd-facts dd{font-size:14px;color:#edf3fa;font-weight:600;line-height:1.5;margin:0;overflow-wrap:anywhere}
.gd-page .gd-actions{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 0}
.gd-page .gd-actions .button{min-height:42px;padding:10px 19px;font-size:13px}
.gd-page .gd-guide-link{display:inline-flex;gap:10px;margin-top:15px;color:#f6d872;font-size:13px;font-weight:600}
.gd-page .gd-guide-link:hover,.gd-page .gd-related-link:hover,.gd-page .gd-bottom-nav a:hover{color:#fff0b1;text-decoration:underline;text-underline-offset:4px}
.gd-page .gd-toc{margin:30px 0 34px;padding:20px 22px;background:#07243e;border:1px solid #224863;border-radius:10px}
.gd-page .gd-toc>span{display:block;color:#8da8c4;font-size:10px;letter-spacing:1.5px;font-weight:700;text-transform:uppercase;margin-bottom:12px}
.gd-page .gd-toc>div{display:flex;flex-wrap:wrap;gap:8px}
.gd-page .gd-toc a{border:1px solid #2a4c6d;border-radius:6px;padding:7px 11px;color:#d2dfef;font-size:12px;line-height:1.5}
.gd-page .gd-toc a:hover{color:#ffdf79;border-color:#ae8c38;background:#143047}
.gd-page .gd-section{scroll-margin-top:28px}
.gd-page .gd-section h2{font-size:26px;line-height:1.25;letter-spacing:-.4px;margin:0 0 17px}
.gd-page .gd-section-kicker{display:block;color:#e9c65c;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:9px}
.gd-page .gd-overview{max-width:900px}
.gd-page .gd-section p,.gd-page .gd-section li{color:#bacde1;font-size:15px;line-height:1.85}
.gd-page .gd-section p+p{margin-top:13px}
.gd-page .gd-feature-section{margin-top:34px}
.gd-page .gd-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.gd-page .gd-feature-grid>article{padding:24px 22px;background:linear-gradient(130deg,#0a2a49,#061e38);border:1px solid #204665;border-radius:10px}
.gd-page .gd-feature-icon{display:grid;place-items:center;width:43px;height:43px;border:1px solid #685245;background:#352c3f;border-radius:10px;color:#ffda61;margin-bottom:18px}
.gd-page .gd-feature-icon svg{width:23px;height:23px}
.gd-page .gd-feature-grid h3{font-size:17px;line-height:1.3;margin-bottom:10px}
.gd-page .gd-feature-grid p{font-size:13px;line-height:1.75}
.gd-page .gd-body-sections{margin-top:36px;border-top:1px solid #23425d}
.gd-page .gd-explainer{display:grid;grid-template-columns:54px minmax(0,1fr);gap:22px;padding:30px 0;border-bottom:1px solid #23425d}
.gd-page .gd-section-number{display:grid;place-items:center;align-self:start;width:46px;height:46px;color:#ffda67;font-size:15px;font-weight:700;border:1px solid #775c2e;border-radius:9px;background:#1b2937}
.gd-page .gd-explainer>div{max-width:840px}
.gd-page .gd-explainer h2{font-size:23px;margin-bottom:13px}
.gd-page .gd-explainer ul{padding-left:20px;margin:15px 0 0}
.gd-page .gd-explainer li{padding-left:4px;margin-top:7px}
.gd-page .gd-explainer li::marker{color:#e0bd5f}
.gd-page .gd-faq{margin-top:34px}
.gd-page .gd-faq>div{border:1px solid #274964;border-radius:10px;overflow:hidden}
.gd-page .gd-faq details+details{border-top:1px solid #274964}
.gd-page .gd-faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;list-style:none;padding:18px 22px;background:#08253e;color:#e8eff8;font-size:14px;font-weight:600;line-height:1.55}
.gd-page .gd-faq summary::-webkit-details-marker{display:none}
.gd-page .gd-faq summary>span{font-size:22px;color:#ffdb62;line-height:1;font-weight:400}
.gd-page .gd-faq details[open] summary{background:#0e2c47;color:#ffdf80}
.gd-page .gd-faq details[open] summary>span{transform:rotate(45deg)}
.gd-page .gd-faq details>div{padding:0 22px 20px;background:#0e2c47}
.gd-page .gd-faq details p{font-size:14px;line-height:1.8}
.gd-page .gd-next{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:27px 28px;margin-top:30px;background:linear-gradient(115deg,#19354e,#0a2942);border:1px solid #5b5b43;border-radius:10px}
.gd-page .gd-next>div{display:flex;align-items:center;gap:18px}
.gd-page .gd-next>div>svg{width:32px;height:32px;color:#ffdb67}
.gd-page .gd-next h2{font-size:20px;line-height:1.3;margin-bottom:7px}
.gd-page .gd-next p{color:#bacce0;font-size:13px;line-height:1.7}
.gd-page .gd-next .button{font-size:13px;padding-inline:22px}
.gd-page .gd-related{margin-top:44px}
.gd-page .gd-related-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.gd-page .gd-related-heading h2{margin:0;font-size:25px}
.gd-page .gd-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.gd-page .gd-related-grid>article{min-width:0;border:1px solid #274964;border-radius:10px;overflow:hidden;background:#08253f}
.gd-page .gd-related-art{display:grid;place-items:center;background:radial-gradient(ellipse,#202947,#091f39);height:190px;padding:12px}
.gd-page .gd-related-art img{width:100%;height:100%;object-fit:scale-down}
.gd-page .gd-related-grid article>div{padding:17px 19px 20px}
.gd-page .gd-related-grid h3{font-size:16px;line-height:1.3;margin-bottom:6px}
.gd-page .gd-related-grid h3 a:hover{color:#ffde76}
.gd-page .gd-related-grid article p{font-size:11px;color:#9db5ce;line-height:1.6}
.gd-page .gd-related-link{display:inline-flex;gap:9px;margin-top:15px;color:#ffda65;font-size:12px;font-weight:700}
.gd-page .gd-bottom-nav{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;padding-top:28px;margin-top:34px;border-top:1px solid #29445e;font-size:12px;color:#c1d0e2}
@media(max-width:1050px){
  .gd-page .gd-hero{gap:28px;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
  .gd-page .gd-art-frame{height:360px;padding:15px}
  .gd-page .gd-summary h1{font-size:31px}
  .gd-page .gd-lead{font-size:14px;line-height:1.7}
  .gd-page .gd-feature-grid>article{padding:21px 18px}
  .gd-page .gd-related-art{height:170px}
}
@media(max-width:760px){
  .game-detail.gd-page{padding-top:20px;padding-bottom:30px}
  .gd-page .gd-breadcrumbs{font-size:11px;margin-bottom:20px}
  .gd-page .gd-hero{display:flex;flex-direction:column;gap:24px}
  .gd-page .gd-summary{order:-1;padding:0;width:100%}
  .gd-page .gd-summary h1{font-size:31px;margin:9px 0 13px;line-height:1.16}
  .gd-page .gd-summary .overline{font-size:10px}
  .gd-page .gd-tags{font-size:10px;gap:7px}
  .gd-page .gd-tags>a,.gd-page .gd-tags>span{padding:4px 8px;min-height:27px}
  .gd-page .gd-lead{font-size:14px;margin-top:16px;line-height:1.8}
  .gd-page .gd-facts{margin:15px 0;gap:0 18px}
  .gd-page .gd-facts>div{padding:9px 0}
  .gd-page .gd-facts dt{font-size:10px}
  .gd-page .gd-facts dd{font-size:13px}
  .gd-page .gd-actions{gap:10px;margin-top:18px}
  .gd-page .gd-actions .button{min-height:42px;font-size:12px;padding:10px 15px;flex:1 1 auto}
  .gd-page .gd-actions .favorite-detail{font-size:12px!important;padding-inline:13px!important}
  .gd-page .gd-guide-link{margin-top:14px;font-size:12px}
  .gd-page .gd-artwork{width:100%}
  .gd-page .gd-art-frame{height:auto;aspect-ratio:1.3;min-height:0;padding:16px;border-radius:10px}
  .gd-page .gd-art-frame .detail-hero{aspect-ratio:auto;height:100%;width:100%;max-height:100%;object-fit:contain}
  .gd-page .gd-art-frame.gd-native-art{min-height:280px;aspect-ratio:auto;height:300px}
  .gd-page .gd-art-frame.gd-native-art .detail-hero{height:auto;max-height:267px;width:auto}
  .gd-page .gd-gallery{gap:10px;margin-top:10px}
  .gd-page .gd-gallery>button{flex-basis:105px}
  .gd-page .gd-gallery img{height:52px}
  .gd-page .gd-toc{margin:25px 0 28px;padding:18px}
  .gd-page .gd-toc>div{gap:7px}
  .gd-page .gd-toc a{font-size:11px;padding:7px 9px}
  .gd-page .gd-section h2{font-size:23px;margin-bottom:14px}
  .gd-page .gd-section p,.gd-page .gd-section li{font-size:14px;line-height:1.85}
  .gd-page .gd-feature-section{margin-top:28px}
  .gd-page .gd-feature-grid{grid-template-columns:1fr;gap:12px}
  .gd-page .gd-feature-grid>article{display:grid;grid-template-columns:38px minmax(0,1fr);gap:0 14px;padding:20px}
  .gd-page .gd-feature-icon{grid-row:1/3;width:38px;height:38px;margin:0;border-radius:9px}
  .gd-page .gd-feature-grid h3{font-size:16px;margin:1px 0 8px}
  .gd-page .gd-feature-grid p{font-size:13px;line-height:1.75}
  .gd-page .gd-body-sections{margin-top:28px}
  .gd-page .gd-explainer{grid-template-columns:36px minmax(0,1fr);gap:13px;padding:25px 0}
  .gd-page .gd-section-number{width:33px;height:33px;font-size:12px;border-radius:7px}
  .gd-page .gd-explainer h2{font-size:20px;line-height:1.35;margin-bottom:12px}
  .gd-page .gd-explainer ul{padding-left:17px}
  .gd-page .gd-faq{margin-top:28px}
  .gd-page .gd-faq summary{padding:16px;font-size:13px;gap:14px}
  .gd-page .gd-faq details>div{padding:0 16px 17px}
  .gd-page .gd-faq details p{font-size:13px}
  .gd-page .gd-next{align-items:stretch;flex-direction:column;padding:21px;gap:20px;margin-top:25px}
  .gd-page .gd-next>div{gap:14px}
  .gd-page .gd-next h2{font-size:18px}
  .gd-page .gd-next p{font-size:12px}
  .gd-page .gd-next .button{align-self:flex-start;font-size:12px}
  .gd-page .gd-related{margin-top:33px}
  .gd-page .gd-related-heading{align-items:flex-start;gap:15px;margin-bottom:17px}
  .gd-page .gd-related-heading h2{font-size:22px}
  .gd-page .gd-related-heading .button{font-size:10px;padding:7px 10px;min-height:32px}
  .gd-page .gd-related-grid{gap:12px}
  .gd-page .gd-related-art{height:125px;padding:8px}
  .gd-page .gd-related-grid article>div{padding:12px}
  .gd-page .gd-related-grid h3{font-size:13px;margin-bottom:5px}
  .gd-page .gd-related-grid article p{font-size:10px}
  .gd-page .gd-related-link{font-size:11px;margin-top:12px;gap:5px}
  .gd-page .gd-bottom-nav{font-size:11px;margin-top:26px;padding-top:23px}
}
@media(max-width:480px){
  .gd-page .gd-summary h1{font-size:28px}
  .gd-page .gd-art-frame{aspect-ratio:1.08;padding:12px}
  .gd-page .gd-related-grid{grid-template-columns:1fr}
  .gd-page .gd-related-grid>article{display:grid;grid-template-columns:112px minmax(0,1fr)}
  .gd-page .gd-related-art{height:130px;padding:9px}
  .gd-page .gd-related-grid article>div{padding:17px 13px}
  .gd-page .gd-related-grid h3{font-size:14px}
  .gd-page .gd-related-heading{display:block}
  .gd-page .gd-related-heading .button{margin-top:14px}
}

.gd-page .gd-text-link{color:#ffdc72;text-decoration:underline;text-decoration-color:#a58b49;text-underline-offset:3px;text-decoration-thickness:1px}
.gd-page .gd-text-link:hover{color:#fff0b1;text-decoration-color:currentColor}
.gd-page a:focus-visible,.gd-page button:focus-visible,.gd-page summary:focus-visible{outline:2px solid #ffdc72;outline-offset:4px}
