.game-page-overlay{display:none;background:var(--bg-page);box-sizing:border-box;width:100%;position:static;flex:1 0 auto}
.game-page-overlay.show{display:block;animation:gp-fade-in .25s ease-out both}
@keyframes gp-fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.game-page-overlay.show{animation:none}}
body.gp-open>main{display:none}
.gp-scroll{width:100%;box-sizing:border-box}


.game-page{max-width:1100px;margin:0 auto;padding:18px 18px 50px;box-sizing:border-box;font-family:'Poppins',sans-serif;color:var(--text-primary)}

.gp-hero{position:relative;width:100%;aspect-ratio:4/1;min-height:170px;max-height:300px;background-color:var(--input-bg);background-size:cover;background-position:center;display:flex;align-items:flex-end;justify-content:center;box-sizing:border-box;overflow:hidden;border-radius:4px}
.gp-hero-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:14px}
.gp-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.35) 100%);pointer-events:none}
.gp-hero-title{position:relative;margin:0;padding:14px 28px;font-size:28px;font-weight:600;color:#fff;text-align:center;text-shadow:0 2px 6px rgba(0,0,0,.7);line-height:1.2;word-break:break-word}

.gp-grid{display:grid;grid-template-columns:1.2fr 1.3fr .9fr 1.3fr;grid-template-areas:"about info devlog servers" "about shots shots servers";gap:10px;padding-top:10px;align-items:stretch}
.gp-about-box{grid-area:about}.gp-info-box{grid-area:info}.gp-devlog-box{grid-area:devlog}.gp-servers-box{grid-area:servers;align-self:start}.gp-shots-box{grid-area:shots}
.gp-col{min-width:0;display:flex;flex-direction:column}
.gp-heading{font-size:14px;font-weight:600;color:var(--text-heading);margin:0 0 8px 0}
.gp-tag{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;color:var(--text-primary);background:var(--input-bg);border:1px solid var(--border-color);border-radius:3px;padding:2px 6px;margin:0 0 8px 0}
.gp-empty{color:var(--text-muted);font-size:13px;font-style:italic;padding:10px 0}

/* Boxed panel: every card in the concept art (About / Gamepasses / Info /
   Devlog / Servers / Screenshots) shares this look. Play! sits outside of one, directly
   on the page background. */
.gp-box{background-color:var(--bg-panel);border:1px solid var(--border-color);border-radius:4px;padding:14px 16px 16px;box-sizing:border-box}
.gp-box.gp-fill{flex:1;display:flex;flex-direction:column;min-height:0}

.gp-play-row{display:flex;justify-content:center;align-items:stretch;gap:8px;padding-top:12px;flex-wrap:wrap}
.gp-play-btn{display:flex;align-items:center;justify-content:center;width:100%;max-width:340px;flex:1 1 240px;background-color:#5cb04a;color:#fff;border:2px solid #549b4a;border-radius:4px;padding:9px 14px;font-family:'Poppins',sans-serif;font-size:18px;font-weight:600;cursor:pointer;transition:opacity .15s;box-sizing:border-box}
.gp-play-btn:hover{opacity:.9}
.gp-edit-btn{display:flex;align-items:center;justify-content:center;gap:8px;background-color:#3d78d6;color:#fff;border:2px solid #2f5fb0;border-radius:4px;padding:9px 16px;font-family:'Poppins',sans-serif;font-size:15px;font-weight:600;cursor:pointer;transition:opacity .15s;box-sizing:border-box}
.gp-edit-btn:hover{opacity:.9}
.gp-about{font-size:13.5px;line-height:1.65;color:var(--text-primary);margin:0;white-space:pre-line;word-break:break-word}

.gp-passes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 10px}
.gp-pass{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.gp-pass-icon{width:56px;height:56px;border-radius:50%;background-color:var(--input-bg);border:1px solid var(--border-color);box-sizing:border-box}
.gp-pass-label{font-size:10.5px;color:var(--text-muted);line-height:1.3}
.gp-pass-buy{width:100%;background-color:#5cb04a;color:#fff;border:2px solid #549b4a;border-radius:3px;padding:4px 0;box-sizing:border-box;font-family:'Poppins',sans-serif;font-size:11.5px;font-weight:600;cursor:not-allowed;opacity:.45}

.gp-info-devlog-col{gap:10px}
.gp-info{display:flex;flex-direction:column;row-gap:8px;font-size:13px;color:var(--text-primary)}
.gp-info-row{display:flex;align-items:center;gap:6px}
.gp-info-icon{flex-shrink:0;width:14px;height:14px;display:block;color:var(--text-muted);opacity:.75}
.gp-info-label{color:var(--text-muted);white-space:nowrap}
.gp-info-value{color:var(--text-primary);min-width:0;white-space:nowrap}
.gp-access-public{color:#3d9e4f;font-weight:600}
.gp-devlog{font-size:13px;line-height:1.6;color:var(--text-primary);white-space:pre-line}


@media(max-width:900px){
  .gp-grid{grid-template-columns:1fr 1fr;grid-template-areas:"about about" "info devlog" "shots shots" "servers servers"}
}
@media(max-width:600px){
  .gp-hero{aspect-ratio:16/9;max-height:220px}
  .gp-hero-title{font-size:21px;padding:12px 16px}
  .gp-grid{grid-template-columns:1fr;grid-template-areas:"about" "info" "devlog" "shots" "servers"}
}

.gp-icon-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-width:46px;background-color:var(--input-bg);color:var(--text-muted);border:1px solid var(--border-color);border-radius:4px;padding:4px 9px;font-family:'Poppins',sans-serif;font-size:10px;line-height:1.1;cursor:pointer;box-sizing:border-box;transition:background-color .15s,color .15s}
.gp-icon-btn:hover{background-color:var(--hover-bg);color:var(--text-primary)}
.gp-icon-btn.active{color:var(--accent);border-color:var(--accent);background-color:var(--accent-soft)}
.gp-report-btn.active{color:#d64545;border-color:#d64545;background-color:rgba(214,69,69,.1)}

.gp-servers{display:flex;flex-direction:column;gap:8px}
.gp-server{background-color:var(--input-bg);border:1px solid var(--border-color);border-radius:4px;padding:8px;display:flex;flex-direction:column;gap:8px}
.gp-server-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.gp-server-count{font-size:12px;font-weight:600;color:var(--text-primary)}
.gp-server-badge{font-size:9px;font-weight:600;color:#fff;background:var(--accent);border-radius:3px;padding:1px 5px}
.gp-server-avatars{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.gp-server-avatar{aspect-ratio:1;border-radius:50%;background-color:var(--bg-panel);border:1px solid var(--border-color);overflow:hidden;box-sizing:border-box}
.gp-server-avatar.empty{opacity:.35;border-style:dashed}
.gp-server-join{background-color:#5cb04a;color:#fff;border:2px solid #549b4a;border-radius:3px;padding:6px 0;font-family:'Poppins',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:opacity .15s}
.gp-server-join:hover{opacity:.9}

.gp-shots{display:flex;flex-wrap:wrap;gap:8px}
.gp-shot{width:calc(50% - 4px);aspect-ratio:16/9;object-fit:cover;border-radius:3px;border:1px solid var(--border-color);background-color:var(--input-bg);display:block}


.gp-icon-btn svg{width:18px;height:18px}