/* Steam Diagrams gallery — all styles are isolated to this component. */
#steam-gallery { width:100%; }
#steam-gallery .sdg-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; align-items:start; }
#steam-gallery .sdg-card { background:#fff; color:#102b40; border:1px solid #dce5ed; border-radius:17px; overflow:hidden; box-shadow:0 7px 27px #14415c13; }
#steam-gallery .sdg-card[open] { box-shadow:0 12px 36px #14415c26; border-color:#a3d4e5; }
#steam-gallery .sdg-summary { display:block; cursor:pointer; list-style:none; outline-offset:-4px; }
#steam-gallery .sdg-summary::-webkit-details-marker { display:none; }
#steam-gallery .sdg-summary:focus-visible { outline:3px solid #167fa5; }
#steam-gallery .sdg-summary:hover .sdg-stack img { box-shadow:0 12px 25px #0d2a4766; }
#steam-gallery .sdg-stack { height:205px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; --sdg-spread:clamp(48px, 6.5vw, 78px); background:linear-gradient(155deg,#e5f1f7,#d5e5ef); border-bottom:1px solid #dce5ed; }
#steam-gallery .sdg-stack img { position:absolute; display:block; width:auto; height:170px; max-width:65%; object-fit:contain; background:transparent; border:0; border-radius:8px; box-shadow:0 8px 22px #0d2a4747; transition:transform .22s,box-shadow .22s; }
/* Three phone screenshots, spread across the tile with minimal overlap. */
#steam-gallery .sdg-stack img:nth-child(1) { transform:translate(calc(-1 * var(--sdg-spread)),1px) rotate(-7deg); z-index:1; }
#steam-gallery .sdg-stack img:nth-child(2) { transform:translate(0,-4px) rotate(0deg); z-index:3; }
#steam-gallery .sdg-stack img:nth-child(3) { transform:translate(var(--sdg-spread),1px) rotate(7deg); z-index:2; }
#steam-gallery .sdg-card-heading { padding:15px 16px 17px; }
#steam-gallery .sdg-card-heading h3 {font-size:15px; line-height:1.4; margin:0 0 5px; color:#102b40;}
#steam-gallery .sdg-card-heading p {font-size:12px; line-height:1.5; color:#526577; margin:0;}
#steam-gallery .sdg-count {font-size:11px; color:#147b9f; font-weight:750; display:block; margin-top:9px;}
#steam-gallery .sdg-card[open] .sdg-count::after {content:'  ▲'; font-size:10px;}
#steam-gallery .sdg-card:not([open]) .sdg-count::after {content:'  ▼'; font-size:10px;}
#steam-gallery .sdg-thumbs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; border-top:1px solid #dce5ed; padding:12px; background:#f7fbfd; }
#steam-gallery .sdg-thumb { cursor:zoom-in; display:flex; justify-content:center; align-items:center; width:100%; height:115px; padding:5px; border:1px solid #d4e2ed; background:#eaf3f8; border-radius:8px; }
#steam-gallery .sdg-thumb:hover {border-color:#148ab2; background:#eefaff;}
#steam-gallery .sdg-thumb:focus-visible {outline:3px solid #1288b0;}
#steam-gallery .sdg-thumb img {display:block;width:auto;max-width:100%;height:100%;object-fit:contain;}
#steam-gallery .sdg-hint {font-size:11px; color:#6b8092; padding:0 13px 13px; background:#f7fbfd;}
@media(max-width:980px) { #steam-gallery .sdg-grid {grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:580px) { #steam-gallery .sdg-grid {grid-template-columns:1fr;} #steam-gallery .sdg-stack {height:245px;--sdg-spread:clamp(70px,22vw,100px);} #steam-gallery .sdg-stack img {height:195px;width:auto;max-width:55%;} #steam-gallery .sdg-thumbs {grid-template-columns:repeat(3,minmax(0,1fr));} }
/* Full-screen image viewer */
#sdg-lightbox {border:none; border-radius:15px; padding:0; color:#fff; background:#071827; width:min(1180px,96vw); max-width:96vw; max-height:96vh; box-shadow:0 24px 80px #0009; overflow:hidden;}
#sdg-lightbox::backdrop {background:#03101adf;}
#sdg-lightbox .sdg-modal-top {display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; font:600 14px system-ui,sans-serif;}
#sdg-lightbox .sdg-close {font:inherit; font-size:24px; line-height:1; color:#e8f7ff; background:transparent; border:0; cursor:pointer; padding:2px 8px;}
#sdg-lightbox .sdg-viewer {position:relative; display:flex; align-items:center; justify-content:center; height:min(68vh,720px); background:#102b40; padding:10px 42px;}
#sdg-lightbox .sdg-viewer img {max-width:100%;max-height:100%;object-fit:contain;}
#sdg-lightbox .sdg-arrow {position:absolute; z-index:2; top:50%; transform:translateY(-50%); width:36px; height:52px; border:none; border-radius:7px; background:#ffffff2e; color:#fff; cursor:pointer; font-size:28px;}
#sdg-lightbox .sdg-arrow:hover {background:#ffffff55;}
#sdg-lightbox .sdg-prev {left:4px;} #sdg-lightbox .sdg-next {right:4px;}
#sdg-lightbox .sdg-modal-thumbs {padding:12px; display:flex; align-items:center; justify-content:center; gap:8px; overflow-x:auto; background:#0d2233;}
#sdg-lightbox .sdg-modal-thumbs button {cursor:pointer;flex:0 0 74px;height:62px;border:2px solid transparent;border-radius:6px;background:#fff; padding:3px;}
#sdg-lightbox .sdg-modal-thumbs button[aria-current="true"] {border-color:#51d8e6;}
#sdg-lightbox .sdg-modal-thumbs img {width:100%;height:100%;object-fit:contain;}
@media(max-width:580px) { #sdg-lightbox .sdg-modal-top {font-size:12px;} #sdg-lightbox .sdg-viewer {height:65vh;padding:8px 32px;} #sdg-lightbox .sdg-arrow {width:28px;height:44px;} }