/*
Theme Name: PocketPlay
Theme URI: https://example.com/pocketplay
Author: PocketPlay
Author URI: https://example.com
Description: PocketPlay is a fast, clean and fully responsive game portal theme for WordPress. It ships with a built-in "Games" custom post type, game categories, an on-demand iframe game player with fullscreen support, like/dislike voting, play counters, AJAX "load more" grids, a horizontal popular carousel, live search, Customizer options and ready-made ad slots. The layout language follows modern game portals: light surface, rounded fixed-ratio game tiles, category pills and a sticky navigation bar.
Version: 1.0.0
Requires PHP: 7.4
Requires at least: 5.9
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pocketplay
Tags: custom-logo, custom-menu, custom-colors, featured-images, translation-ready, responsive-layout, one-column, two-columns, grid-layout, entertainment, blog, e-commerce
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
	--pp-bg: #f0f5fc;
	--pp-bg-alt: #f9fbff;
	--pp-surface: #ffffff;
	--pp-text: #002b50;
	--pp-muted: #5d6b84;
	--pp-line: #dde7f5;
	--pp-brand: var(--pp-accent, #009cff);
	--pp-brand-dark: var(--pp-accent-dark, #0074e0);
	--pp-c1: #17f1d8;
	--pp-c2: #ffc500;
	--pp-c3: #ff7690;
	--pp-c4: #c977e8;
	--pp-c5: #ff9e00;
	--pp-c6: #009cff;
	--pp-radius: 18px;
	--pp-radius-sm: 12px;
	--pp-pill: 999px;
	--pp-shadow: 0 2px 10px rgba(0, 43, 80, .06);
	--pp-shadow-lg: 0 12px 34px rgba(0, 43, 80, .14);
	--pp-max: 1400px;
	--pp-font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--pp-bg);
	color: var(--pp-text);
	font-family: var(--pp-font);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	word-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: var(--pp-brand); text-decoration: none; transition: color .15s ease; }
a:hover, a:focus { color: var(--pp-brand-dark); }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; line-height: 1.25; color: var(--pp-text); font-weight: 700; }
h1 { font-size: 2.1rem; }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
figure { margin: 0; }
hr { border: 0; border-top: 1px solid var(--pp-line); margin: 2em 0; }
button { font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: 1rem; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
	position: static !important;
	width: auto; height: auto;
	margin: 0; clip: auto;
	background: var(--pp-surface);
	padding: 8px 14px;
	border-radius: 6px;
	box-shadow: var(--pp-shadow-lg);
	z-index: 99;
}

.pp-container {
	width: 100%;
	max-width: var(--pp-max);
	margin: 0 auto;
	padding: 0 20px;
}

.pp-sr-only { position: absolute; left: -9999px; }

/* ==========================================================================
   3. Skip link / header
   ========================================================================== */
.pp-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--pp-brand);
	color: #fff;
	padding: 10px 18px;
	z-index: 2000;
	border-radius: 0 0 8px 0;
}
.pp-skip-link:focus {
	left: 0;
	color: #fff;
	outline: 3px solid var(--pp-text);
}

.pp-site-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background: var(--pp-surface);
	border-bottom: 1px solid var(--pp-line);
}
.pp-header-inner {
	display: flex;
	align-items: center;
	gap: 18px;
	height: 66px;
}
.pp-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--pp-text);
	flex: 0 0 auto;
}
.pp-brand:hover { color: var(--pp-text); }
.pp-brand img { max-height: 34px; width: auto; }
.pp-brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--pp-brand), var(--pp-c1));
	color: #fff;
	font-size: 1.05rem;
}

.pp-primary-nav { flex: 1 1 auto; }
.pp-primary-nav ul {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.pp-primary-nav li { position: relative; }
.pp-primary-nav a {
	display: block;
	padding: 8px 14px;
	border-radius: var(--pp-pill);
	color: var(--pp-text);
	font-weight: 600;
	font-size: .95rem;
}
.pp-primary-nav a:hover { background: var(--pp-bg); }
.pp-primary-nav .current-menu-item > a,
.pp-primary-nav .current-menu-ancestor > a { background: var(--pp-bg); color: var(--pp-brand-dark); }
.pp-primary-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%; left: 0;
	min-width: 190px;
	background: var(--pp-surface);
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius-sm);
	box-shadow: var(--pp-shadow-lg);
	padding: 6px;
	z-index: 950;
}
.pp-primary-nav li:hover > .sub-menu { display: block; }
.pp-primary-nav .sub-menu a { border-radius: 8px; }

.pp-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}
.pp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	cursor: pointer;
	padding: 10px 20px;
	border-radius: var(--pp-pill);
	font-weight: 700;
	font-size: .95rem;
	line-height: 1.2;
	background: var(--pp-brand);
	color: #fff;
	transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.pp-btn:hover { background: var(--pp-brand-dark); color: #fff; transform: translateY(-1px); }
.pp-btn-ghost { background: var(--pp-bg); color: var(--pp-text); }
.pp-btn-ghost:hover { background: var(--pp-line); color: var(--pp-text); }
.pp-btn-outline { background: transparent; color: var(--pp-text); box-shadow: inset 0 0 0 2px var(--pp-line); }
.pp-btn-outline:hover { box-shadow: inset 0 0 0 2px var(--pp-brand); background: transparent; color: var(--pp-brand-dark); }
.pp-btn-block { width: 100%; }
.pp-btn[disabled] { opacity: .6; cursor: default; transform: none; }
.pp-btn .dashicons { font-size: 18px; width: 18px; height: 18px; }

.pp-nav-toggle {
	display: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 8px;
	border-radius: 10px;
	color: var(--pp-text);
}
.pp-nav-toggle .dashicons { font-size: 24px; width: 24px; height: 24px; }

/* ==========================================================================
   4. Hero + search
   ========================================================================== */
.pp-hero {
	background: linear-gradient(180deg, var(--pp-bg-alt) 0%, var(--pp-bg) 100%);
	padding: 42px 0 12px;
	text-align: center;
}
.pp-hero h1 {
	font-size: clamp(1.7rem, 4vw, 2.6rem);
	margin-bottom: .3em;
}
.pp-hero p.pp-hero-sub {
	color: var(--pp-muted);
	font-size: 1.05rem;
	max-width: 640px;
	margin: 0 auto 1.4em;
}

.pp-search {
	position: relative;
	max-width: 620px;
	margin: 0 auto;
}
.pp-search-field {
	width: 100%;
	padding: 16px 120px 16px 52px;
	border: 2px solid var(--pp-line);
	border-radius: var(--pp-pill);
	background: var(--pp-surface);
	font-size: 1.02rem;
	color: var(--pp-text);
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.pp-search-field:focus {
	border-color: var(--pp-brand);
	box-shadow: 0 0 0 4px rgba(0, 156, 255, .13);
}
.pp-search-icon {
	position: absolute;
	left: 20px; top: 50%;
	transform: translateY(-50%);
	color: var(--pp-muted);
	pointer-events: none;
}
.pp-search-icon .dashicons { font-size: 20px; width: 20px; height: 20px; }
.pp-search-submit {
	position: absolute;
	right: 6px; top: 6px; bottom: 6px;
	border: 0;
	border-radius: var(--pp-pill);
	padding: 0 22px;
	background: var(--pp-brand);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}
.pp-search-submit:hover { background: var(--pp-brand-dark); }

.pp-livesearch {
	position: absolute;
	left: 0; right: 0; top: calc(100% + 8px);
	background: var(--pp-surface);
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	box-shadow: var(--pp-shadow-lg);
	z-index: 800;
	overflow: hidden;
	text-align: left;
	display: none;
	max-height: 420px;
	overflow-y: auto;
}
.pp-livesearch.is-open { display: block; }
.pp-livesearch-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--pp-bg);
}
.pp-livesearch-item:last-child { border-bottom: 0; }
.pp-livesearch-item img {
	width: 60px; height: 45px;
	object-fit: cover;
	border-radius: 8px;
	flex: 0 0 auto;
	background: var(--pp-bg);
}
.pp-livesearch-item b { color: var(--pp-text); font-size: .96rem; }
.pp-livesearch-item small { display: block; color: var(--pp-muted); font-size: .8rem; }
.pp-livesearch-empty { padding: 16px; color: var(--pp-muted); }

/* ==========================================================================
   5. Category pills
   ========================================================================== */
.pp-pills {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	padding: 18px 0 6px;
	-webkit-overflow-scrolling: touch;
}
.pp-pills::-webkit-scrollbar { display: none; }
.pp-pill {
	flex: 0 0 auto;
	display: inline-block;
	padding: 9px 18px;
	border-radius: var(--pp-pill);
	background: var(--pp-surface);
	color: var(--pp-text);
	font-weight: 600;
	font-size: .92rem;
	white-space: nowrap;
	box-shadow: var(--pp-shadow);
}
.pp-pill:hover { background: var(--pp-brand); color: #fff; }
.pp-pill.is-active { background: var(--pp-text); color: #fff; }
.pp-pills-wrap {
	background: linear-gradient(180deg, var(--pp-bg) 60%, var(--pp-bg) 100%);
}

/* ==========================================================================
   6. Section headings
   ========================================================================== */
.pp-section { padding: 34px 0 8px; }
.pp-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}
.pp-section-head h2 { margin: 0; font-size: 1.4rem; }
.pp-section-head .pp-more {
	font-weight: 600;
	font-size: .92rem;
	color: var(--pp-brand);
	flex: 0 0 auto;
}

/* ==========================================================================
   7. Game tiles (fixed aspect ratio)
   ========================================================================== */
.pp-grid {
	display: grid;
	grid-template-columns: repeat(var(--pp-cols, 6), minmax(0, 1fr));
	gap: 18px;
}

.pp-tile {
	position: relative;
	display: block;
	border-radius: var(--pp-radius);
	overflow: hidden;
	background: var(--pp-surface);
	box-shadow: var(--pp-shadow);
	transition: transform .16s ease, box-shadow .16s ease;
	color: var(--pp-text);
}
.pp-tile:hover { transform: translateY(-4px); box-shadow: var(--pp-shadow-lg); color: var(--pp-text); }
.pp-tile-media {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, #dbe9fb, #eef4ff);
	overflow: hidden;
}
.pp-tile-media > img {
	width: 100%; height: 100%;
	object-fit: cover;
}
.pp-tile-media .pp-ph {
	width: 100%; height: 100%;
	display: block;
}
.pp-tile-badge {
	position: absolute;
	top: 10px; left: 10px;
	padding: 4px 10px;
	border-radius: var(--pp-pill);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	background: var(--pp-brand);
	z-index: 2;
}
.pp-tile-badge.badge-new { background: var(--pp-c1); color: #04322f; }
.pp-tile-badge.badge-hot { background: var(--pp-c3); }
.pp-tile-badge.badge-updated { background: var(--pp-c4); }
.pp-tile-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 25, 47, .38);
	opacity: 0;
	transition: opacity .16s ease;
	z-index: 1;
}
.pp-tile:hover .pp-tile-overlay { opacity: 1; }
.pp-tile-overlay .dashicons { font-size: 40px; width: 40px; height: 40px; color: #fff; }
.pp-tile-title {
	display: block;
	padding: 10px 12px;
	font-size: .93rem;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: var(--pp-surface);
}
.pp-tile-meta {
	padding: 0 12px 10px;
	font-size: .78rem;
	color: var(--pp-muted);
	background: var(--pp-surface);
}

.pp-tile-empty {
	aspect-ratio: 4 / 3;
	border-radius: var(--pp-radius);
	background: linear-gradient(135deg, #dbe9fb, #eef4ff);
}

/* Category cards */
.pp-catgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
}
.pp-cat {
	position: relative;
	display: flex;
	align-items: flex-end;
	padding: 18px;
	min-height: 104px;
	border-radius: var(--pp-radius);
	color: #fff;
	font-weight: 800;
	overflow: hidden;
	box-shadow: var(--pp-shadow);
	transition: transform .16s ease;
}
.pp-cat:hover { transform: translateY(-4px); color: #fff; }
.pp-cat span { position: relative; z-index: 1; font-size: 1rem; }
.pp-cat small {
	display: block;
	font-weight: 600;
	font-size: .78rem;
	opacity: .85;
}
.pp-cat-1 { background: linear-gradient(135deg, #0aa2ff, #0064d2); }
.pp-cat-2 { background: linear-gradient(135deg, #17f1d8, #0bb6c4); }
.pp-cat-3 { background: linear-gradient(135deg, #ffc500, #ff8a00); }
.pp-cat-4 { background: linear-gradient(135deg, #ff7690, #e33d6a); }
.pp-cat-5 { background: linear-gradient(135deg, #c977e8, #8a3fd6); }
.pp-cat-6 { background: linear-gradient(135deg, #7c8cff, #3a49c9); }

/* ==========================================================================
   8. Carousel
   ========================================================================== */
.pp-carousel {
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 5 * 18px) / 6);
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 6px;
	-webkit-overflow-scrolling: touch;
}
.pp-carousel::-webkit-scrollbar { display: none; }
.pp-carousel > .pp-tile { scroll-snap-align: start; }
.pp-carousel-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	background: var(--pp-surface);
	color: var(--pp-text);
	box-shadow: var(--pp-shadow-lg);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pp-carousel-nav.prev { left: -14px; }
.pp-carousel-nav.next { right: -14px; }
.pp-carousel-nav:hover { background: var(--pp-brand); color: #fff; }
.pp-carousel-wrap { position: relative; }

/* ==========================================================================
   9. Game player (single)
   ========================================================================== */
.pp-pagegame { padding: 20px 0 40px; }
.pp-game-shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 26px;
	align-items: start;
}
.pp-game-main { min-width: 0; }

.pp-player {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--pp-radius);
	overflow: hidden;
	background: #04182b;
	box-shadow: var(--pp-shadow-lg);
}
.pp-player-cover {
	position: absolute;
	inset: 0;
	cursor: pointer;
	border: 0;
	padding: 0;
	background: #04182b;
}
.pp-player-cover img {
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: .55;
}
.pp-player-cover .pp-play-big {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 92px; height: 92px;
	border-radius: 50%;
	background: var(--pp-brand);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
	transition: transform .16s ease;
}
.pp-player-cover:hover .pp-play-big { transform: translate(-50%, -50%) scale(1.08); }
.pp-player-cover .pp-play-big .dashicons { font-size: 44px; width: 44px; height: 44px; }
.pp-player-cover .pp-player-loading {
	position: absolute;
	left: 50%; bottom: 26px;
	transform: translateX(-50%);
	color: #fff;
	font-weight: 700;
	background: rgba(0, 0, 0, .45);
	padding: 8px 18px;
	border-radius: var(--pp-pill);
	display: none;
}
.pp-player.is-loading .pp-player-cover .pp-player-loading { display: block; }
.pp-player iframe {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	border: 0;
	display: block;
	background: #04182b;
}
.pp-player.is-4x3 { aspect-ratio: 4 / 3; }

.pp-game-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0;
}
.pp-game-title-block { flex: 1 1 260px; min-width: 0; }
.pp-game-title-block h1 { margin: 0 0 4px; font-size: 1.6rem; }
.pp-game-title-block .pp-dev {
	color: var(--pp-muted);
	font-size: .9rem;
}
.pp-game-title-block .pp-plays {
	color: var(--pp-muted);
	font-size: .85rem;
	margin-left: 8px;
}
.pp-game-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.pp-vote {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: 0;
	cursor: pointer;
	padding: 9px 16px;
	border-radius: var(--pp-pill);
	background: var(--pp-surface);
	color: var(--pp-text);
	font-weight: 700;
	font-size: .9rem;
	box-shadow: var(--pp-shadow);
	transition: background .15s ease, color .15s ease;
}
.pp-vote:hover { background: var(--pp-line); }
.pp-vote.is-active { background: var(--pp-brand); color: #fff; }
.pp-vote.is-dislike.is-active { background: var(--pp-c3); color: #fff; }
.pp-vote .dashicons { font-size: 17px; width: 17px; height: 17px; }
.pp-vote .pp-count { font-variant-numeric: tabular-nums; }

.pp-game-panel {
	background: var(--pp-surface);
	border-radius: var(--pp-radius);
	padding: 22px;
	box-shadow: var(--pp-shadow);
	margin-bottom: 20px;
}
.pp-game-panel h2 { font-size: 1.15rem; }
.pp-game-panel :where(p, ul, ol):last-child { margin-bottom: 0; }

.pp-game-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pp-game-cats a {
	padding: 6px 14px;
	border-radius: var(--pp-pill);
	background: var(--pp-bg);
	color: var(--pp-text);
	font-size: .85rem;
	font-weight: 600;
}
.pp-game-cats a:hover { background: var(--pp-brand); color: #fff; }

.pp-breadcrumb {
	font-size: .85rem;
	color: var(--pp-muted);
	margin-bottom: 14px;
}
.pp-breadcrumb a { color: var(--pp-muted); }
.pp-breadcrumb a:hover { color: var(--pp-brand); }
.pp-breadcrumb .sep { margin: 0 6px; opacity: .6; }

/* Sidebar */
.pp-sidebar { min-width: 0; }
.pp-widget {
	background: var(--pp-surface);
	border-radius: var(--pp-radius);
	padding: 18px;
	margin-bottom: 18px;
	box-shadow: var(--pp-shadow);
}
.pp-widget-title {
	font-size: 1rem;
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--pp-line);
}
.pp-widget ul { list-style: none; margin: 0; padding: 0; }
.pp-widget ul li { margin-bottom: 8px; }
.pp-widget ul li:last-child { margin-bottom: 0; }
.pp-side-tiles { display: grid; gap: 10px; }
.pp-side-tile {
	display: flex;
	gap: 10px;
	align-items: center;
	color: var(--pp-text);
}
.pp-side-tile:hover { color: var(--pp-brand); }
.pp-side-tile img {
	width: 64px; height: 48px;
	object-fit: cover;
	border-radius: 8px;
	flex: 0 0 auto;
	background: var(--pp-bg);
}
.pp-side-tile span { font-size: .88rem; font-weight: 600; line-height: 1.3; }

/* ==========================================================================
   10. Ads
   ========================================================================== */
.pp-ad {
	margin: 18px 0;
	text-align: center;
	overflow: hidden;
}
.pp-ad-label {
	display: block;
	font-size: .7rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pp-muted);
	margin-bottom: 4px;
}
.pp-ad:empty { display: none; }

/* ==========================================================================
   11. Posts / pages / blog
   ========================================================================== */
.pp-content { padding: 26px 0 46px; }
.pp-blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 22px;
}
.pp-post-card {
	background: var(--pp-surface);
	border-radius: var(--pp-radius);
	overflow: hidden;
	box-shadow: var(--pp-shadow);
	display: flex;
	flex-direction: column;
}
.pp-post-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pp-post-card-body { padding: 18px; }
.pp-post-card-body h2 { font-size: 1.1rem; }
.pp-entry-meta {
	font-size: .82rem;
	color: var(--pp-muted);
	margin-bottom: 10px;
}
.pp-page-shell {
	background: var(--pp-surface);
	border-radius: var(--pp-radius);
	padding: 30px;
	box-shadow: var(--pp-shadow);
}
.pp-page-shell > :last-child { margin-bottom: 0; }

/* Comments - native WordPress comment system */
.pp-comments { margin-top: 30px; }
.pp-comments-box {
	background: var(--pp-surface);
	border-radius: var(--pp-radius);
	padding: 26px;
	box-shadow: var(--pp-shadow);
}
.pp-comments-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--pp-line);
}
.pp-comments-head .comments-title { margin: 0; font-size: 1.2rem; }

.pp-comment-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--pp-muted);
	font-size: .85rem;
}
.pp-comment-link:hover { color: var(--pp-brand); }
.pp-comment-link .dashicons { font-size: 15px; width: 15px; height: 15px; }

.comment-list,
.comment-list .children { list-style: none; margin: 0; padding: 0; }
.comment-list > li { margin-bottom: 18px; }
.comment-list .children {
	margin: 14px 0 0 30px;
	padding-left: 16px;
	border-left: 2px solid var(--pp-line);
}
.comment-list .children > li { margin-bottom: 14px; }
.comment-body {
	background: var(--pp-bg-alt);
	border-radius: var(--pp-radius-sm);
	padding: 16px;
}
.comment-list .depth-1 > .comment-body {
	background: var(--pp-surface);
	box-shadow: var(--pp-shadow);
}
.comment-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
	font-size: .85rem;
	color: var(--pp-muted);
}
.comment-author img.avatar { border-radius: 50%; }
.comment-author .fn {
	color: var(--pp-text);
	font-weight: 700;
	font-size: .95rem;
	font-style: normal;
}
.comment-author .says { display: none; }
.comment-metadata a,
.comment-metadata a:visited { color: var(--pp-muted); }
.comment-metadata a:hover { color: var(--pp-brand); }
.comment-content { font-size: .95rem; }
.comment-content > :last-child { margin-bottom: 0; }
.comment-reply-link,
.comment-edit-link {
	display: inline-block;
	margin-right: 12px;
	font-size: .82rem;
	font-weight: 700;
	color: var(--pp-brand);
}
.comment-reply-link:hover,
.comment-edit-link:hover { color: var(--pp-brand-dark); }
.comment-awaiting-moderation {
	display: block;
	margin-bottom: 8px;
	font-size: .82rem;
	color: var(--pp-c5);
}
.comment-list .bypostauthor > .comment-body { box-shadow: inset 0 0 0 2px var(--pp-brand); }
.comment-list .pingback .comment-body,
.comment-list .trackback .comment-body {
	background: transparent;
	box-shadow: none;
	padding: 6px 0 6px 2px;
}

.comment-reply-title { margin-top: 26px; font-size: 1.05rem; }
.comment-reply-title small { font-size: .8rem; font-weight: 600; }
.comment-reply-title small a { color: var(--pp-c3); }
.comment-form { margin-top: 6px; }
.comment-form::after { content: ''; display: table; clear: both; }
.comment-form p { margin-bottom: 12px; }
.comment-form label {
	display: block;
	margin-bottom: 5px;
	font-size: .85rem;
	font-weight: 700;
}
.required { color: var(--pp-c3); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 2px solid var(--pp-line);
	border-radius: 12px;
	background: var(--pp-bg-alt);
	color: var(--pp-text);
}
.comment-form input:focus,
.comment-form textarea:focus { outline: none; border-color: var(--pp-brand); }
.comment-form-author,
.comment-form-email { float: left; width: calc(50% - 7px); }
.comment-form-email { margin-left: 14px; }
.comment-form-comment,
.comment-form-cookies-consent { clear: both; }
.comment-form-cookies-consent input[type="checkbox"] { width: auto; margin-right: 6px; }
.comment-form-cookies-consent label { display: inline; font-weight: 400; }
.comment-form .form-submit { margin: 6px 0 0; }
.comment-form .submit { border: 0; cursor: pointer; }
.no-comments,
.pp-comments-closed,
.pp-comments-locked {
	background: var(--pp-bg);
	border-radius: var(--pp-radius-sm);
	padding: 14px 18px;
	margin-top: 18px;
	color: var(--pp-muted);
}
.pp-comments-nav { margin: 22px 0 0; }

@media (max-width: 560px) {
	.pp-comments-box { padding: 18px; }
	.comment-form-author,
	.comment-form-email { float: none; width: 100%; }
	.comment-form-email { margin-left: 0; }
	.comment-list .children { margin-left: 12px; padding-left: 12px; }
}

/* ==========================================================================
   12. Pagination / load more
   ========================================================================== */
.pp-load-more-wrap { text-align: center; margin: 30px 0 10px; }
.pp-pagination {
	display: flex;
	gap: 6px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 30px 0 10px;
}
.pp-pagination .page-numbers {
	padding: 9px 15px;
	border-radius: var(--pp-pill);
	background: var(--pp-surface);
	color: var(--pp-text);
	font-weight: 700;
	box-shadow: var(--pp-shadow);
}
.pp-pagination .page-numbers.current { background: var(--pp-brand); color: #fff; }
.pp-pagination .page-numbers:hover { background: var(--pp-brand); color: #fff; }

/* ==========================================================================
   13. SEO text block + footer
   ========================================================================== */
.pp-seo {
	background: var(--pp-surface);
	border-radius: var(--pp-radius);
	padding: 28px;
	box-shadow: var(--pp-shadow);
	margin-top: 30px;
	font-size: .95rem;
	color: var(--pp-muted);
}
.pp-seo h2, .pp-seo h3 { color: var(--pp-text); }
.pp-seo > :last-child { margin-bottom: 0; }
.pp-seo-toggle {
	display: none;
}

.pp-site-footer {
	margin-top: 50px;
	background: var(--pp-surface);
	border-top: 1px solid var(--pp-line);
	padding: 40px 0 24px;
	font-size: .92rem;
}
.pp-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: 26px;
}
.pp-footer-col h3 {
	font-size: .95rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: 12px;
}
.pp-footer-col ul { list-style: none; margin: 0; padding: 0; }
.pp-footer-col ul li { margin-bottom: 7px; }
.pp-footer-col a { color: var(--pp-muted); }
.pp-footer-col a:hover { color: var(--pp-brand); }
.pp-footer-bottom {
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid var(--pp-line);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	color: var(--pp-muted);
	font-size: .85rem;
}
.pp-footer-bottom .pp-social { display: flex; gap: 8px; }
.pp-footer-bottom .pp-social a {
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--pp-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pp-text);
}
.pp-footer-bottom .pp-social a:hover { background: var(--pp-brand); color: #fff; }

/* 404 */
.pp-404 { text-align: center; padding: 70px 0; }
.pp-404 h1 { font-size: 4rem; margin-bottom: .1em; }

/* ==========================================================================
   14. Responsive
   ========================================================================== */
@media (max-width: 1200px) {
	.pp-grid { --pp-cols: 5; }
	.pp-carousel { grid-auto-columns: calc((100% - 4 * 18px) / 5); }
}
@media (max-width: 1024px) {
	.pp-game-shell { grid-template-columns: 1fr; }
	.pp-sidebar { order: 2; }
	.pp-grid { --pp-cols: 4; }
	.pp-carousel { grid-auto-columns: calc((100% - 3 * 18px) / 4); }
	.pp-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
	.pp-nav-toggle { display: inline-flex; }
	.pp-primary-nav {
		display: none;
		position: absolute;
		left: 0; right: 0;
		top: 66px;
		background: var(--pp-surface);
		border-bottom: 1px solid var(--pp-line);
		padding: 12px 20px 18px;
		box-shadow: var(--pp-shadow-lg);
		max-height: calc(100vh - 66px);
		overflow-y: auto;
	}
	.pp-primary-nav.is-open { display: block; }
	.pp-primary-nav ul { flex-direction: column; gap: 2px; }
	.pp-primary-nav .sub-menu {
		display: block;
		position: static;
		box-shadow: none;
		border: 0;
		padding: 0 0 0 12px;
	}
	.pp-search-field { padding-right: 100px; }
}
@media (max-width: 760px) {
	.pp-grid { --pp-cols: 3; }
	.pp-carousel { grid-auto-columns: calc((100% - 2 * 18px) / 3); }
	.pp-carousel-nav { display: none; }
	.pp-hero { padding: 28px 0 8px; }
	.pp-game-shell { gap: 18px; }
	.pp-page-shell { padding: 20px; }
	.pp-seo { padding: 20px; }
	.pp-footer-grid { grid-template-columns: 1fr; gap: 18px; }
	.pp-game-title-block h1 { font-size: 1.35rem; }
	.pp-hide-sm { display: none; }
}
@media (max-width: 480px) {
	.pp-grid { --pp-cols: 2; gap: 12px; }
	.pp-carousel { grid-auto-columns: calc((100% - 12px) / 2); gap: 12px; }
	.pp-header-inner { height: 58px; }
	.pp-brand { font-size: 1.05rem; }
	.pp-search-submit { padding: 0 14px; }
}

/* ==========================================================================
   15. Editor + gutenberg
   ========================================================================== */
.pp-hide-sm { display: inline; }
.pp-btn-lg { padding: 14px 32px; font-size: 1rem; }
.pp-archive-head h1 { margin: 0 0 6px; }
.pp-archive-desc { color: var(--pp-muted); max-width: 760px; }
.pp-game-subline { color: var(--pp-muted); font-size: .9rem; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pp-game-subline .dashicons { font-size: 16px; width: 16px; height: 16px; }
.pp-search-head .search-form { max-width: 520px; }
.pp-tags { color: var(--pp-muted); font-size: .88rem; }
.pp-footer-about-text { color: var(--pp-muted); }
.alignwide { max-width: var(--pp-max); margin-left: auto; margin-right: auto; }
.alignfull { max-width: none; margin-left: calc(-1 * 20px); margin-right: calc(-1 * 20px); }
.wp-caption-text, .wp-block-image figcaption { font-size: .85rem; color: var(--pp-muted); }
.wp-block-quote { border-left: 4px solid var(--pp-brand); margin: 1.5em 0; padding-left: 1em; }
.wp-block-button__link {
	background: var(--pp-brand);
	color: #fff;
	border-radius: var(--pp-pill);
	padding: 12px 24px;
	font-weight: 700;
}
.wp-block-table { width: 100%; }
.pp-content ul, .pp-content ol { padding-left: 1.2em; }
.pp-content table { border-collapse: collapse; width: 100%; }
.pp-content th, .pp-content td { border: 1px solid var(--pp-line); padding: 8px 10px; }