/* Library + game pages (platform/pasninja-store.js). Calm dark panels, one accent on the main button. */
.pn-lib,.pn-gview{--gp-bg:rgba(11,13,26,.9);--gp-line:rgba(255,255,255,.08);--gp-muted:#8f9bb0;--gp-text:#dfe6f1;font-family:'DM Sans',system-ui,sans-serif;color:var(--gp-text)}
.pn-lib{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;max-width:1480px;margin:22px auto 40px;padding:0 24px;box-sizing:border-box;align-items:start}
.pn-lib[hidden],.pn-gview[hidden]{display:none!important}
.pn-gview{max-width:1240px;margin:22px auto 40px;padding:0 24px;box-sizing:border-box}

/* ---- library list ---- */
.pn-lib-side{position:sticky;top:96px;height:calc(100vh - 116px);min-height:420px;display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:12px;background:var(--gp-bg);border:1px solid var(--gp-line);box-sizing:border-box;backdrop-filter:blur(6px)}
.pn-lib-search{display:flex;align-items:center;gap:8px;padding:0 12px;height:40px;border-radius:8px;background:#0a0d1a;border:1px solid var(--gp-line);color:var(--gp-muted)}
.pn-lib-search:focus-within{border-color:rgba(255,255,255,.22)}
.pn-lib-search svg{width:16px;height:16px;flex:none}
.pn-lib-search input{all:unset;flex:1;min-width:0;font:500 14px/1 'DM Sans',system-ui,sans-serif;color:#fff}
.pn-lib-filters{display:flex;flex-wrap:wrap;gap:6px}
.pn-lib-filters button{all:unset;cursor:pointer;padding:6px 10px;border-radius:999px;font:600 12px/1 'DM Sans',system-ui,sans-serif;color:#b9c3d6;border:1px solid var(--gp-line)}
.pn-lib-filters button:hover{color:#fff;border-color:rgba(255,255,255,.2)}
.pn-lib-filters button[aria-selected="true"]{background:rgba(185,140,255,.18);border-color:transparent;color:#fff}
.pn-lib-list{flex:1;overflow:auto;margin:0 -6px;padding:0 6px;scrollbar-width:thin;scrollbar-color:#2c3350 transparent}
.pn-lib-list h4{margin:12px 6px 6px;font:700 11px/1 'DM Sans',system-ui,sans-serif;letter-spacing:1.2px;text-transform:uppercase;color:var(--gp-muted)}
.pn-lib-list h4 small{font-weight:600;opacity:.7;margin-inline-start:4px}
.pn-lib-item{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:10px;padding:5px 6px;border-radius:7px;cursor:pointer;color:#cfd7e6;font:600 13.5px/1.2 'DM Sans',system-ui,sans-serif}
.pn-lib-item:hover{background:rgba(255,255,255,.05);color:#fff}
.pn-lib-item.is-on{background:rgba(185,140,255,.16);color:#fff}
.pn-lib-item:focus-visible{outline:2px solid #b98cff;outline-offset:-2px}
.pn-lib-item.is-off{opacity:.55}
.pn-lib-item img{width:52px;aspect-ratio:16/9;object-fit:cover;border-radius:4px;background:#1a1f33}
.pn-lib-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-lib-item em{font:700 11px/1 'DM Sans',system-ui,sans-serif;font-style:normal;color:var(--gp-muted)}
.pn-lib-item em.ok{color:#7be3a6}.pn-lib-item em.dl{color:#7ff3ff}.pn-lib-item em.off{color:#8f9bb0}
.pn-lib-empty{color:var(--gp-muted);font-size:13px;padding:8px 6px}
.pn-lib-main{min-width:0}

/* ---- game page ---- */
.pn-gp{background:var(--gp-bg);border:1px solid var(--gp-line);border-radius:12px;overflow:hidden;backdrop-filter:blur(6px)}
.pn-gp-hero{position:relative;height:clamp(220px,30vw,440px);overflow:hidden;background:#12162a}
.pn-gp-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pn-gp-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,13,26,0) 35%,rgba(11,13,26,.72) 75%,#0b0d1a 100%)}
.pn-gp-head{position:absolute;inset-inline:28px;bottom:22px}
.pn-gp-head h1{margin:8px 0 0;font:800 clamp(30px,4vw,52px)/1.02 'DM Sans',system-ui,sans-serif;letter-spacing:-.5px;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.pn-gp-tags{display:flex;flex-wrap:wrap;gap:6px}
.pn-gp-tags span{padding:5px 9px;border-radius:6px;background:rgba(8,10,20,.62);border:1px solid rgba(255,255,255,.12);font:700 11px/1 'DM Sans',system-ui,sans-serif;letter-spacing:.6px;text-transform:uppercase;color:#e6ebf5;backdrop-filter:blur(4px)}
.pn-gp-tags span.new{background:#ff5ccd;border-color:transparent;color:#1a0618}
.pn-gp-back{all:unset;cursor:pointer;display:inline-block;margin-bottom:12px;padding:7px 12px;border-radius:7px;background:rgba(8,10,20,.62);border:1px solid rgba(255,255,255,.14);font:700 12.5px/1 'DM Sans',system-ui,sans-serif;color:#fff}
.pn-gp-back:hover{border-color:rgba(255,255,255,.35)}
.pn-gp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;padding:18px 28px;border-top:1px solid var(--gp-line);border-bottom:1px solid var(--gp-line);background:rgba(255,255,255,.025)}
.pn-gp-play{min-width:190px;height:52px;padding:0 26px;border:0;border-radius:9px;cursor:pointer;background:linear-gradient(110deg,#00aeea,#7d43ff);color:#fff;font:800 17px/1 'DM Sans',system-ui,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.pn-gp-play:hover{filter:brightness(1.1)}
.pn-gp-play:disabled,.pn-gp-play.is-off{background:#262c40;color:#8f9bb0;cursor:not-allowed;box-shadow:none}
.pn-gp-bar .pn-dl{flex-basis:100%;order:5;margin-top:0}
.pn-gp-status{display:grid;gap:4px;min-width:0}
.pn-gp-status b{font-size:15px;color:#fff}
.pn-gp-status small{font-size:12.5px;color:var(--gp-muted)}
.pn-gp-quick{display:flex;gap:26px;margin-inline-start:auto}
.pn-gp-quick small{display:block;font:700 10.5px/1 'DM Sans',system-ui,sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--gp-muted);margin-bottom:6px}
.pn-gp-quick b{font-size:15px;color:#fff;white-space:nowrap}
.pn-gp-manage{padding:4px 28px 0}
.pn-gp-manage:empty{display:none}
.pn-gp-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:30px;padding:24px 28px 30px}
.pn-gp-main section+section{margin-top:28px}
.pn-gp h2{margin:0 0 12px;font:800 18px/1.2 'DM Sans',system-ui,sans-serif;color:#fff}
.pn-gp h2 small{font-weight:600;font-size:13px;color:var(--gp-muted);margin-inline-start:6px}
.pn-gp-desc{margin:0;font-size:16px;line-height:1.7;color:var(--gp-text)}
.pn-gp-mode{margin:10px 0 0;font-size:13.5px;color:#cbb8ff}
.pn-gp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pn-gp-stats div{padding:14px;border-radius:9px;background:#0f1324;border:1px solid var(--gp-line)}
.pn-gp-stats b{display:block;font-size:20px;color:#fff;margin-bottom:6px}
.pn-gp-stats span{font-size:12px;color:var(--gp-muted)}
.pn-gp-hint{margin:10px 0 0;font-size:13px;color:var(--gp-muted)}
.pn-gp-ach{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pn-gp-a{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;padding:12px;border-radius:9px;background:#0f1324;border:1px solid var(--gp-line);opacity:.72}
.pn-gp-a.is-on{opacity:1;border-color:rgba(123,227,166,.35)}
.pn-gp-a i{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#1a2036;font-style:normal;font-size:18px;color:#cfd7e6}
.pn-gp-a.is-on i{background:rgba(123,227,166,.16);color:#7be3a6}
.pn-gp-a b{display:block;font-size:14px;color:#fff;margin-bottom:3px}
.pn-gp-a span{display:block;font-size:12.5px;line-height:1.4;color:var(--gp-muted)}
.pn-gp-a em{display:block;margin-top:6px;font:700 11.5px/1 'DM Sans',system-ui,sans-serif;font-style:normal;color:#7be3a6}
.pn-gp-a:not(.is-on) em{color:var(--gp-muted)}
.pn-gp-prog{height:4px;margin-top:8px;border-radius:2px;background:#262c40;overflow:hidden}
.pn-gp-prog s{display:block;height:100%;background:#7d43ff;text-decoration:none}
.pn-gp-side dl{margin:0;border-radius:9px;background:#0f1324;border:1px solid var(--gp-line);overflow:hidden}
.pn-gp-side dl>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;padding:11px 14px;border-bottom:1px solid var(--gp-line)}
.pn-gp-side dl>div:last-child{border-bottom:0}
.pn-gp-side dt{font-size:12.5px;color:var(--gp-muted)}
.pn-gp-side dd{margin:0;font-size:13.5px;color:#fff;overflow-wrap:anywhere}
.pn-gp-plat{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pn-gp-plat .pn-plat{display:inline-flex;gap:6px;color:#cfd7e6}
.pn-gp-plat .pn-plat svg{width:15px;height:15px}
.pn-gp-side h3{margin:22px 0 10px;font:800 15px/1.2 'DM Sans',system-ui,sans-serif;color:#fff}
.pn-gp-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pn-gp-more button{all:unset;cursor:pointer;display:grid;gap:6px;font:600 12.5px/1.25 'DM Sans',system-ui,sans-serif;color:#cfd7e6}
.pn-gp-more button:hover{color:#fff}
.pn-gp-more button:hover img{border-color:rgba(255,255,255,.35)}
.pn-gp-more img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:7px;border:1px solid var(--gp-line);background:#1a1f33}
.pn-gp-more button:focus-visible{outline:2px solid #b98cff;outline-offset:3px;border-radius:7px}

/* ---- "Game page" button on home cards (shows on hover; the card itself still plays) ---- */
html body #content #discover-view .pn-neon-library #game-grid .game-card .pn-card-page{position:absolute;z-index:7;top:10px;inset-inline-start:10px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:7px;border:1px solid rgba(255,255,255,.18);background:rgba(6,8,16,.72);color:#fff;font:700 12px/1 'DM Sans',system-ui,sans-serif;cursor:pointer;opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s;backdrop-filter:blur(4px)}
html body #content #discover-view .pn-neon-library #game-grid .game-card .pn-card-page svg{width:14px;height:14px}
html body #content #discover-view .pn-neon-library #game-grid .game-card:hover .pn-card-page,html body #content #discover-view .pn-neon-library #game-grid .game-card .pn-card-page:focus-visible{opacity:1;transform:none}
html body #content #discover-view .pn-neon-library #game-grid .game-card .pn-card-page:hover{border-color:rgba(255,255,255,.45)}
@media (hover:none){html body #content #discover-view .pn-neon-library #game-grid .game-card .pn-card-page{opacity:1;transform:none}}

/* ---- phones / small windows ---- */
@media (max-width:980px){
  .pn-lib{grid-template-columns:1fr;padding:0 12px}
  .pn-lib-side{position:static;height:auto;min-height:0}
  .pn-lib-list{max-height:260px}
  .pn-gview{padding:0 12px}
  .pn-gp-cols{grid-template-columns:1fr;padding:20px 16px 24px}
  .pn-gp-bar{padding:16px}
  .pn-gp-head{inset-inline:16px;bottom:16px}
  .pn-gp-quick{margin-inline-start:0;width:100%;justify-content:space-between}
  .pn-gp-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-gp-ach{grid-template-columns:1fr}
  .pn-gp-play{flex:1}
  .pn-gp-hero{height:56vw;min-height:200px}
}
.pn-gp .pn-gp-hero .pn-gp-art{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important}
.pn-gp .pn-gp-head h1{text-transform:none!important}