/* PasNinja hub — calm, premium finish (loaded last, so it wins).
   One accent (the purple of the main buttons), used sparingly: frames, outlines and secondary buttons are
   neutral, glows are replaced by soft dark shadows. Delete this file's <link> in index.html to go back. */
:root{
  --pn-line:rgba(255,255,255,.09);
  --pn-line-hover:rgba(255,255,255,.2);
  --pn-accent:#b98cff;
  --pn-shadow:0 10px 30px rgba(0,0,0,.45);
}

/* ---- header ---- */
html body #pn-hud :is(.pn-nav-icon,.pn-nav-icon *,.pn-hud-arcade){text-shadow:none!important;filter:none!important}
html body #pn-hud :is(.pn-hud-center,#pn-desktop-download,#pn-bell,.pn-hud-icon,#pn-hud-card,#pn-hud-open-profile){border-color:var(--pn-line)!important;box-shadow:none!important}
html body #pn-hud :is(#pn-desktop-download,#pn-bell,.pn-hud-icon,#pn-hud-card,#pn-hud-open-profile):hover{border-color:var(--pn-line-hover)!important}
html body #pn-hud .pn-hud-center button.active{box-shadow:none!important;border-color:transparent!important}

/* ---- featured ---- */
html body #pn-hero-title{filter:drop-shadow(0 4px 22px rgba(0,0,0,.65))!important;text-shadow:none!important}
html body #pn-hero-content .pn-hero-featured-line span{opacity:.5}
html body #pn-hero-play{box-shadow:0 8px 24px rgba(0,0,0,.4)!important}
html body #pn-hero-details{border-color:rgba(255,255,255,.22)!important;box-shadow:none!important}
html body #content #discover-view .space-feature-card,html body #content #discover-view [id^=space-card-]{box-shadow:0 24px 60px rgba(0,0,0,.6)!important;border-color:rgba(255,255,255,.14)!important}
html body :is(#space-feature-prev,#space-feature-next){box-shadow:none!important;border-color:rgba(255,255,255,.22)!important;background:rgba(8,6,18,.55)!important}
html body :is(#space-feature-prev,#space-feature-next):hover{border-color:rgba(255,255,255,.45)!important}
html body #content #discover-view .pn-space-feature span{text-shadow:none!important}

/* ---- library + side panels ---- */
html body #content #discover-view :is(#library,.pn-side-nav,.pn-side-card,.pn-bottom-banner,.pn-ad-slot){border-color:var(--pn-line)!important;box-shadow:none!important}
html body #content #discover-view .pn-bottom-banner *{text-shadow:none!important}
html body #content #discover-view .pn-neon-library #game-grid .game-card{border-color:var(--pn-line)!important}
html body #content #discover-view .pn-neon-library #game-grid .game-card:hover{border-color:var(--pn-line-hover)!important;box-shadow:0 18px 40px rgba(0,0,0,.55)!important}
html body #content #discover-view .play-btn{box-shadow:none!important}
html body #content #discover-view .pn-neon-library #filters .chip{border-color:var(--pn-line)!important;box-shadow:none!important}
html body #content #discover-view .pn-neon-library #filters .chip:hover{border-color:var(--pn-line-hover)!important}
html body #content #discover-view .pn-neon-library #filters .chip.active{border-color:transparent!important;background:rgba(185,140,255,.18)!important;color:#fff!important}
html body #content #discover-view .pn-library-search{border-color:var(--pn-line)!important;box-shadow:none!important}
html body #content #discover-view .pn-side-nav button.is-active{box-shadow:none!important;border-color:transparent!important;background:rgba(185,140,255,.16)!important}
html body .pn-card-badge{box-shadow:none!important}
html body #toast{border-color:var(--pn-line)!important;box-shadow:var(--pn-shadow)!important}
html body .btn.primary{box-shadow:0 6px 18px rgba(0,0,0,.35)!important}

/* ---- keyboard focus: one clear ring everywhere ---- */
html body :is(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--pn-accent)!important;outline-offset:2px!important}
html body #content #discover-view .pn-side-card :is(button,.btn){box-shadow:none!important;border-color:rgba(255,255,255,.16)!important}

/* ---- platform icons on cards + loading shimmer ---- */
html body #content #discover-view .pn-neon-library #game-grid .game-art .pn-plat{position:absolute;z-index:4;right:10px;top:10px;display:flex;gap:6px;padding:5px 7px;border-radius:6px;background:rgba(6,8,16,.62);color:#e9eef7;opacity:.9;pointer-events:none;backdrop-filter:blur(4px)}
html body #content #discover-view .pn-neon-library #game-grid .game-art .pn-plat svg{width:14px;height:14px;display:block}
html body #content #discover-view .pn-neon-library #game-grid .game-card:hover .pn-plat{opacity:0;transition:opacity .2s}
html body #content #discover-view .pn-neon-library #game-grid .game-art{background:linear-gradient(100deg,#161a2a 30%,#22273c 50%,#161a2a 70%) 0 0/300% 100%;animation:pn-shimmer 1.4s linear 6}
@keyframes pn-shimmer{from{background-position:100% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){html body #content #discover-view .pn-neon-library #game-grid .game-art{animation:none}}

/* ---- language menu ---- */
#pn-lang{position:relative;display:inline-flex}
#pn-lang .pn-lang-btn{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 12px;border-radius:999px;border:1px solid var(--pn-line);background:rgba(10,8,22,.55);color:#e6e9f2;font:700 12px/1 'DM Sans',system-ui,sans-serif;cursor:pointer}
#pn-lang .pn-lang-btn:hover{border-color:var(--pn-line-hover)}
#pn-lang .pn-lang-btn svg{width:16px;height:16px}
#pn-lang .pn-lang-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:1000;min-width:150px;padding:6px;border-radius:10px;background:#11152a;border:1px solid rgba(255,255,255,.12);box-shadow:0 16px 40px rgba(0,0,0,.55);display:grid;gap:2px}
#pn-lang .pn-lang-menu[hidden]{display:none}
#pn-lang .pn-lang-menu button{all:unset;cursor:pointer;padding:9px 12px;border-radius:7px;color:#e6e9f2;font:600 14px/1.2 'DM Sans','Segoe UI',Tahoma,sans-serif}
#pn-lang .pn-lang-menu button:hover,#pn-lang .pn-lang-menu button[aria-checked="true"]{background:rgba(185,140,255,.16);color:#fff}
#pn-lang.pn-lang-floating{position:fixed;top:12px;inset-inline-end:12px;z-index:1000}

/* ---- Arabic: joined letters need no letter-spacing; a font that has Arabic glyphs ---- */
html[lang=ar] body *{letter-spacing:0!important}
html[lang=ar] body{font-family:'DM Sans','Segoe UI',Tahoma,'Noto Sans Arabic',sans-serif}
/* RTL: numbers like "03 / 05" keep their order; English text (game descriptions) keeps its punctuation */
html[dir=rtl] #space-feature-count{direction:ltr;unicode-bidi:isolate}
html[dir=rtl] :is(#pn-hero-subtitle,.card-body p,.pn-game-detail-body>p,.modal-description){unicode-bidi:plaintext}
#pn-lang{margin-inline-end:8px;align-self:center}
html body #pn-hero-content .pn-hero-actions .pn-hero-btn{width:auto!important;min-width:220px;padding-inline:24px!important;white-space:nowrap}
@media (max-width:600px){html body #pn-hero-content .pn-hero-actions{max-width:calc(100vw - 32px);margin-inline:auto}html body #pn-hero-content .pn-hero-actions .pn-hero-btn{min-width:0;flex:1 1 0;padding-inline:12px!important;font-size:15px!important}}
html body{overflow-x:clip}
html[lang=fr] body #content #discover-view .pn-neon-library #game-grid .game-card:not([data-pn-pill])::after{content:"\25B6\00A0 Jouer"}
html[lang=ar] body #content #discover-view .pn-neon-library #game-grid .game-card:not([data-pn-pill])::after{content:"العب \00A0\25C0"}
html[dir=rtl] :is(.pn-gp-desc,.pn-gp-mode,.pn-gp-a span,.pn-manage-where){unicode-bidi:plaintext}

/* ---- Sign in with Google / Discord: brand colours + logos (shape unchanged) ---- */
html body #modal .pn-social-buttons [data-pn-social]{display:inline-flex!important;align-items:center;justify-content:center;gap:10px;font-weight:700;letter-spacing:0;text-shadow:none!important;box-shadow:none!important;transition:background-color .15s,border-color .15s}
html body #modal .pn-social-buttons [data-pn-social][hidden]{display:none!important}
html body #modal .pn-social-buttons [data-pn-social] img{width:20px;height:20px;flex:none;display:block}
html body #modal .pn-social-buttons [data-pn-social="google"]{background:#fff!important;color:#1f1f1f!important;border:1px solid #dadce0!important}
html body #modal .pn-social-buttons [data-pn-social="google"]:hover{background:#f1f3f4!important}
html body #modal .pn-social-buttons [data-pn-social="discord"]{background:#5865F2!important;color:#fff!important;border:1px solid #5865F2!important}
html body #modal .pn-social-buttons [data-pn-social="discord"]:hover{background:#4752C4!important;border-color:#4752C4!important}
html body #modal .pn-social-buttons [data-pn-social]:disabled{opacity:.6;cursor:wait}