:root {
  --ppg-bg: #f6f6fb;
  --ppg-surface: #ffffff;
  --ppg-ink: #181821;
  --ppg-muted: #6d6d7d;
  --ppg-line: #e7e7ef;
  --ppg-primary: #7c3aed;
  --ppg-primary-dark: #5b21b6;
  --ppg-accent: #facc15;
  --ppg-radius: 20px;
  --ppg-shadow: 0 18px 50px rgba(32, 24, 62, 0.12);
}

.ppg-section { margin-block: clamp(42px, 7vw, 86px); }
.ppg-section__heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.ppg-section__heading h2 { margin:0; font-size:clamp(1.65rem,3vw,2.35rem); line-height:1.1; letter-spacing:-0.035em; }

.ppg-hero { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr); min-height:520px; padding:clamp(32px,6vw,76px); border-radius:32px; color:#fff; background:radial-gradient(circle at 78% 18%,rgba(250,204,21,.36),transparent 27%),linear-gradient(135deg,#171125 0%,#4c1d95 54%,#7c3aed 100%); box-shadow:var(--ppg-shadow); }
.ppg-hero::before { content:""; position:absolute; inset:auto -10% -38% 25%; height:65%; background:rgba(255,255,255,.08); transform:rotate(-7deg); border-radius:50%; filter:blur(2px); }
.ppg-hero__content { position:relative; z-index:2; align-self:center; max-width:730px; }
.ppg-hero__eyebrow { display:inline-flex; padding:8px 12px; border:1px solid rgba(255,255,255,.24); border-radius:999px; background:rgba(255,255,255,.1); font-size:.76rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.ppg-hero h1 { max-width:770px; margin:18px 0; color:#fff; font-size:clamp(2.8rem,6vw,5.8rem); line-height:.94; letter-spacing:-.065em; }
.ppg-hero p { max-width:580px; margin:0; color:rgba(255,255,255,.78); font-size:clamp(1rem,2vw,1.28rem); }
.ppg-hero__actions { display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:30px; }
.ppg-hero__art { position:relative; z-index:1; min-height:330px; }
.ppg-hero__tile { position:absolute; display:grid; place-items:center; width:clamp(100px,13vw,170px); aspect-ratio:1; border:1px solid rgba(255,255,255,.24); border-radius:28%; color:#fff; font-size:clamp(2.2rem,5vw,4.6rem); box-shadow:0 30px 55px rgba(0,0,0,.22); backdrop-filter:blur(14px); }
.ppg-hero__tile--one { top:1%; left:4%; transform:rotate(-12deg); background:linear-gradient(145deg,#fb7185,#e11d48); }
.ppg-hero__tile--two { top:10%; right:2%; transform:rotate(10deg); background:linear-gradient(145deg,#22d3ee,#0891b2); }
.ppg-hero__tile--three { bottom:1%; left:17%; transform:rotate(7deg); background:linear-gradient(145deg,#facc15,#f97316); }
.ppg-hero__tile--four { right:10%; bottom:2%; transform:rotate(-8deg); background:linear-gradient(145deg,#a78bfa,#6d28d9); }

.ppg-button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 20px; border:0; border-radius:14px; color:#fff !important; background:var(--ppg-primary); box-shadow:0 10px 25px rgba(124,58,237,.25); font-weight:800; text-decoration:none !important; transition:transform .2s ease,background .2s ease,box-shadow .2s ease; }
.ppg-button:hover { transform:translateY(-2px); background:var(--ppg-primary-dark); box-shadow:0 15px 30px rgba(124,58,237,.3); }
.ppg-button--small { min-height:40px; padding:9px 14px; border-radius:11px; font-size:.88rem; }
.ppg-hero .ppg-button { color:#171125 !important; background:#fff; box-shadow:none; }
.ppg-hero .ppg-button:hover { background:#f4f0ff; }

.ppg-search { display:flex; width:min(100%,620px); padding:5px; border:1px solid var(--ppg-line); border-radius:15px; background:#fff; box-shadow:0 8px 24px rgba(22,18,38,.07); }
.ppg-search input { flex:1; min-width:0; min-height:46px; padding:0 14px; border:0 !important; outline:0; background:transparent !important; box-shadow:none !important; color:var(--ppg-ink); }
.ppg-search button { width:46px; min-width:46px; border:0; border-radius:11px; color:#fff; background:var(--ppg-primary); cursor:pointer; font-size:1.3rem; }
.ppg-search--compact { width:min(100%,330px); border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.12); box-shadow:none; }
.ppg-search--compact input { color:#fff; }
.ppg-search--compact input::placeholder { color:rgba(255,255,255,.66); }
.ppg-search--compact button { color:#171125; background:var(--ppg-accent); }

.ppg-game-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.ppg-game-card { position:relative; overflow:hidden; border:1px solid var(--ppg-line); border-radius:var(--ppg-radius); background:var(--ppg-surface); box-shadow:0 10px 35px rgba(34,28,56,.07); transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
.ppg-game-card:hover { transform:translateY(-6px); border-color:rgba(124,58,237,.25); box-shadow:0 20px 42px rgba(34,28,56,.13); }
.ppg-game-card__media { position:relative; display:block; overflow:hidden; aspect-ratio:16/9; background:#ddd; }
.ppg-game-card__media img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.ppg-game-card:hover .ppg-game-card__media img { transform:scale(1.045); }
.ppg-game-card__play { position:absolute; inset:50% auto auto 50%; display:grid; place-items:center; width:54px; aspect-ratio:1; border-radius:50%; color:#171125; background:rgba(255,255,255,.94); box-shadow:0 10px 30px rgba(0,0,0,.2); transform:translate(-50%,-45%) scale(.92); opacity:0; transition:.22s ease; }
.ppg-game-card:hover .ppg-game-card__play { opacity:1; transform:translate(-50%,-50%) scale(1); }
.ppg-badge { position:absolute; top:12px; left:12px; padding:7px 10px; border-radius:999px; color:#271600; background:var(--ppg-accent); font-size:.68rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.ppg-game-card__body { padding:18px; }
.ppg-game-card__eyebrow { display:flex; justify-content:space-between; gap:10px; color:var(--ppg-muted); font-size:.76rem; font-weight:700; }
.ppg-game-card__title { margin:9px 0 14px; font-size:1.15rem; line-height:1.2; }
.ppg-game-card__title a { color:var(--ppg-ink); text-decoration:none; }
.ppg-game-card__body p { color:var(--ppg-muted); font-size:.9rem; }
.ppg-game-card__actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ppg-favorite-button { display:inline-grid; place-items:center; min-width:42px; min-height:42px; padding:8px 11px; border:1px solid var(--ppg-line); border-radius:12px; color:var(--ppg-muted); background:#fff; cursor:pointer; font-size:1.25rem; transition:.2s ease; }
.ppg-favorite-button:hover,.ppg-favorite-button.is-active { border-color:#fb7185; color:#e11d48; background:#fff1f2; }

.ppg-category-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
.ppg-category-card { display:flex; align-items:center; gap:14px; min-height:96px; padding:18px; border:1px solid var(--ppg-line); border-radius:18px; color:var(--ppg-ink) !important; background:var(--ppg-surface); text-decoration:none !important; transition:.2s ease; }
.ppg-category-card:hover { transform:translateY(-3px); border-color:rgba(124,58,237,.35); box-shadow:0 14px 30px rgba(34,28,56,.08); }
.ppg-category-card__icon { display:grid; place-items:center; width:52px; aspect-ratio:1; border-radius:15px; color:#fff; background:linear-gradient(145deg,#8b5cf6,#5b21b6); font-size:1.45rem; }
.ppg-category-card strong,.ppg-category-card small { display:block; }
.ppg-category-card small { margin-top:3px; color:var(--ppg-muted); font-size:.74rem; }

.ppg-player-shell { overflow:hidden; margin:26px 0 34px; border:1px solid #2c2840; border-radius:24px; background:#100d1a; box-shadow:0 22px 60px rgba(18,12,36,.28); }
.ppg-player-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:58px; padding:10px 14px 10px 18px; color:#dbd7e8; background:#181426; font-size:.86rem; font-weight:750; }
.ppg-live-dot { display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 5px rgba(74,222,128,.1); }
.ppg-player-toolbar__actions { display:flex; align-items:center; gap:7px; }
.ppg-player-toolbar button { display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:8px 11px; border:1px solid rgba(255,255,255,.11); border-radius:10px; color:#fff; background:rgba(255,255,255,.06); cursor:pointer; }
.ppg-player-toolbar button:hover { background:rgba(255,255,255,.12); }
.ppg-player-frame-wrap { position:relative; width:100%; height:min(var(--ppg-player-height,720px),72vw); min-height:420px; background:#08070c; }
.ppg-player-frame { display:block; width:100%; height:100%; border:0; }
.ppg-player-shell--portrait .ppg-player-frame-wrap { width:min(100%,540px); height:min(var(--ppg-player-height,800px),145vw); min-height:650px; margin-inline:auto; }
.ppg-player-shell--square .ppg-player-frame-wrap { width:min(100%,820px); height:auto; aspect-ratio:1; min-height:0; margin-inline:auto; }
.ppg-player-shell:fullscreen { display:flex; flex-direction:column; width:100vw; height:100vh; border-radius:0; }
.ppg-player-shell:fullscreen .ppg-player-frame-wrap { flex:1; width:100%; height:auto; min-height:0; }

.ppg-empty { padding:44px 24px; border:1px dashed #cfcbdc; border-radius:20px; text-align:center; background:#faf9fd; }
.ppg-empty h3 { margin:0 0 8px; }
.ppg-empty p { margin:0; color:var(--ppg-muted); }
.ppg-pagination { display:flex; justify-content:center; gap:7px; margin-top:32px; }
.ppg-pagination .page-numbers { display:grid; place-items:center; min-width:42px; height:42px; padding:0 10px; border:1px solid var(--ppg-line); border-radius:11px; color:var(--ppg-ink); background:#fff; text-decoration:none; }
.ppg-pagination .current { color:#fff; border-color:var(--ppg-primary); background:var(--ppg-primary); }

@media (max-width:1100px) {
  .ppg-game-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ppg-category-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ppg-hero { grid-template-columns:1fr .65fr; }
}
@media (max-width:780px) {
  .ppg-hero { grid-template-columns:1fr; min-height:auto; padding:36px 24px; border-radius:22px; }
  .ppg-hero__art { min-height:240px; }
  .ppg-game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .ppg-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ppg-player-toolbar { align-items:flex-start; }
  .ppg-player-toolbar > div:first-child { display:none; }
  .ppg-player-toolbar__actions { width:100%; justify-content:space-between; }
  .ppg-player-frame-wrap { height:min(var(--ppg-player-height,720px),100vw); min-height:360px; }
}
@media (max-width:520px) {
  .ppg-game-grid,.ppg-category-grid { grid-template-columns:1fr; }
  .ppg-game-card { display:grid; grid-template-columns:132px minmax(0,1fr); }
  .ppg-game-card__media { height:100%; min-height:150px; aspect-ratio:auto; }
  .ppg-game-card__body { padding:14px; }
  .ppg-game-card__eyebrow { display:block; }
  .ppg-game-card__eyebrow span:last-child { display:none; }
  .ppg-game-card__play { display:none; }
  .ppg-player-toolbar button span { display:none; }
  .ppg-player-frame-wrap { min-height:330px; }
}