/* PlayQuestHQ — dark gaming guide design */
:root {
	--pq-bg: #070b16;
	--pq-bg2: #0a1020;
	--pq-panel: #0d1424;
	--pq-card: #111a2d;
	--pq-line: #1c2740;
	--pq-line2: #26324d;
	--pq-text: #eef2fa;
	--pq-muted: #9aa6bd;
	--pq-yellow: #ffc423;
	--pq-yellow2: #ffb000;
	--pq-ink: #0b1220;
	--pq-white: #ffffff;
	--pq-radius: 10px;
	--pq-font: "Barlow", system-ui, sans-serif;
}
body.pq-light {
	--pq-bg: #eef1f7;
	--pq-bg2: #e6eaf2;
	--pq-panel: #ffffff;
	--pq-card: #ffffff;
	--pq-line: #d9dfeb;
	--pq-line2: #cbd3e3;
	--pq-text: #0e1626;
	--pq-muted: #5a6680;
}

body.pq {
	margin: 0;
	background: var(--pq-bg);
	background-image: radial-gradient(1200px 600px at 80% -10%, rgba(40, 70, 140, .18), transparent 60%);
	color: var(--pq-text);
	font-family: var(--pq-font);
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
.pq *, .pq *::before, .pq *::after { box-sizing: border-box; }
.pq a { color: inherit; text-decoration: none; }
.pq img { max-width: 100%; display: block; }
.pq-ic { flex: none; display: inline-block; vertical-align: middle; }
.pq-wrap { max-width: 1536px; margin: 0 auto; padding: 0 18px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }

/* ───────── Header ───────── */
.pq-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(7, 11, 22, .94);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--pq-line);
}
body.pq-light .pq-header { background: rgba(255, 255, 255, .95); }
.admin-bar .pq-header { top: 32px; }
.pq-header__in { display: flex; align-items: center; gap: 28px; height: 88px; padding: 0 28px 0 30px; max-width: 1536px; margin: 0 auto; }
.pq-logo img { height: 76px; width: auto; filter: drop-shadow(0 2px 10px rgba(255, 196, 35, .18)); }
.pq-nav { display: flex; align-items: center; gap: 4px; margin-left: 52px; height: 100%; }
.pq-nav__item { position: relative; height: 100%; display: flex; align-items: center; }
.pq-nav__link {
	display: flex; align-items: center; gap: 5px;
	padding: 0 14px; height: 100%;
	font-weight: 600; font-size: 15px; color: var(--pq-text);
	position: relative; transition: color .15s;
}
.pq-nav__link .pq-ic { opacity: .8; }
.pq-nav__link:hover, .pq-nav__item.is-active > .pq-nav__link { color: var(--pq-yellow); }
.pq-nav__item.is-active > .pq-nav__link::after {
	content: ""; position: absolute; left: 4px; right: 4px; bottom: 22px; height: 3px; border-radius: 3px; background: var(--pq-yellow);
}
.pq-drop {
	position: absolute; top: 100%; left: 0; min-width: 230px;
	background: var(--pq-panel); border: 1px solid var(--pq-line2); border-radius: 10px;
	padding: 8px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
	opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s;
}
.pq-nav__item:hover .pq-drop, .pq-nav__item:focus-within .pq-drop { opacity: 1; visibility: visible; transform: none; }
.pq-drop a { display: block; padding: 9px 12px; border-radius: 7px; font-weight: 500; font-size: 14px; color: var(--pq-text); }
.pq-drop a:hover { background: rgba(255, 196, 35, .1); color: var(--pq-yellow); }

.pq-search {
	margin-left: auto; display: flex; align-items: center; gap: 10px;
	width: 300px; height: 40px; padding: 0 16px;
	border: 1px solid var(--pq-line2); border-radius: 999px; background: rgba(255, 255, 255, .03);
	color: var(--pq-muted);
}
.pq-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--pq-text); font: inherit; font-size: 14px; padding: 0; box-shadow: none; }
.pq-search input::placeholder { color: var(--pq-muted); }
.pq-search:focus-within { border-color: var(--pq-yellow); }
.pq-iconbtn { display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; color: var(--pq-text); cursor: pointer; border-radius: 8px; padding: 0; }
.pq-iconbtn:hover { color: var(--pq-yellow); }
.pq-burger { display: none; }

/* ───────── Layout grids ───────── */
.pq-top { display: grid; grid-template-columns: minmax(0, 1fr) 312px; border-bottom: 1px solid var(--pq-line); }
.pq-top__main { min-width: 0; border-right: 1px solid var(--pq-line); }
.pq-low { display: grid; grid-template-columns: minmax(0, 1fr) 406px; gap: 16px; padding: 18px 70px 0 44px; }
.pq-explore .pq-head h2 { font-size: 20px; }
.pq-games { gap: 14px !important; margin-top: 14px !important; }
.pq-hubgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.pq-hubgrid .pq-game { height: 220px; }
.pq-hubgrid .pq-game span { font-size: 20px; padding-bottom: 16px; }
@media (max-width: 980px) { .pq-hubgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pq-hubgrid .pq-game { height: 170px; } }

/* ───────── Hero slider ───────── */
.pq-hero { position: relative; height: 308px; overflow: hidden; margin-left: 18px; background: #0b1324; }
.pq-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.pq-slide.is-on { opacity: 1; z-index: 1; }
.pq-slide__bg { position: absolute; inset: 0; background-size: cover; background-position: center 55%; transform: scale(1.04); transition: transform 6s ease; }
.pq-slide.is-on .pq-slide__bg { transform: scale(1); }
.pq-slide::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(5, 9, 18, .92) 0%, rgba(5, 9, 18, .72) 32%, rgba(5, 9, 18, .1) 62%, rgba(5, 9, 18, .2) 100%),
		linear-gradient(0deg, rgba(5, 9, 18, .6), transparent 35%);
}
.pq-slide__body { position: relative; z-index: 2; padding: 60px 0 0 71px; max-width: 520px; }
.pq-badge {
	display: inline-block; background: var(--pq-yellow); color: #111; font-weight: 700; font-size: 13px;
	letter-spacing: .08em; text-transform: uppercase; padding: 2px 10px; border-radius: 4px;
}
.pq-slide h2 { margin: 8px 0 0; font-size: 36px; line-height: 1.12; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.pq-slide h2 em { font-style: normal; color: var(--pq-yellow); }
.pq-slide h2 span { display: block; font-size: 28px; font-weight: 600; margin-top: 4px; }
.pq-slide p { margin: 12px 0 0; color: #dfe5f1; font-size: 15px; line-height: 1.5; max-width: 370px; }
.pq-btn {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--pq-yellow); color: #111 !important; font-weight: 700; font-size: 14px;
	padding: 8px 20px; border-radius: 6px; border: 0; cursor: pointer; font-family: inherit;
	transition: background .15s, transform .15s;
}
.pq-btn:hover { background: var(--pq-yellow2); transform: translateY(-1px); }
.pq-slide .pq-btn { margin-top: 16px; }
.pq-slide__tag {
	position: absolute; z-index: 2; right: 70px; top: 50%; transform: translateY(-50%);
	text-align: center; color: #fff; text-shadow: 0 0 24px rgba(80, 200, 255, .8);
}
.pq-slide__tag b { display: block; font-family: "Barlow Condensed", var(--pq-font); font-size: 56px; letter-spacing: .25em; line-height: 1; }
.pq-slide__tag small { display: block; margin-top: 6px; font-size: 17px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.pq-hero__arrow {
	position: absolute; z-index: 5; top: 50%; transform: translateY(-50%);
	background: none; border: 0; color: #fff; cursor: pointer; padding: 10px; opacity: .9;
}
.pq-hero__arrow:hover { color: var(--pq-yellow); }
.pq-hero__arrow--l { left: 10px; }
.pq-hero__arrow--r { right: 12px; }
.pq-dots { position: absolute; z-index: 5; bottom: 14px; left: 546px; display: flex; gap: 14px; }
.pq-dots button { width: 7px; height: 7px; padding: 0; border-radius: 50%; border: 0; background: #fff; opacity: .9; cursor: pointer; }
.pq-dots button.is-on { width: 11px; height: 11px; margin-top: -2px; background: var(--pq-yellow); }

/* ───────── Section heads ───────── */
.pq-head { display: flex; align-items: center; gap: 10px; }
.pq-head h2, .pq-head h3 { margin: 0; font-weight: 700; color: var(--pq-text); }
.pq-head .pq-more { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #c9d3e6; font-weight: 500; }
body.pq-light .pq-head .pq-more { color: var(--pq-muted); }
.pq-head .pq-more:hover { color: var(--pq-yellow); }

/* ───────── Explore games ───────── */
.pq-explore { padding: 14px 18px 18px 44px; }
.pq-explore .pq-head h2 { font-size: 17px; }
.pq-games { display: grid; grid-template-columns: repeat(6, minmax(0, 1.35fr)) repeat(2, minmax(0, 1.05fr)); gap: 12px; margin-top: 12px; }
.pq-game {
	position: relative; height: 168px; border-radius: 10px; overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .16); background: var(--pq-card);
	display: flex; align-items: flex-end; justify-content: center;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .04);
	transition: transform .25s, border-color .25s, box-shadow .25s;
}
.pq-game:hover { transform: translateY(-4px); border-color: var(--pq-yellow); box-shadow: 0 14px 30px rgba(0, 0, 0, .5), 0 0 22px rgba(255, 196, 35, .25); }
.pq-game img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; filter: saturate(1.35) contrast(1.08); transition: transform .5s, filter .3s; }
.pq-game:hover img { transform: scale(1.08); filter: saturate(1.5) contrast(1.12) brightness(1.08); }
.pq-game::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, .18), transparent 40%); mix-blend-mode: overlay; }
.pq-game::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .15) 48%, transparent); }
.pq-game span { position: relative; z-index: 2; padding: 0 8px 12px; font-size: 17px; font-weight: 700; letter-spacing: .01em; color: #fff; text-align: center; line-height: 1.2; text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }
.pq-game--plat { align-items: center; flex-direction: column; justify-content: center; gap: 10px; }
.pq-game--plat::after { display: none; }
.pq-game--plat .pq-plat { display: grid; place-items: center; width: 70px; height: 70px; margin-top: -18px; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .06), 0 0 30px rgba(255, 255, 255, .35); }
.pq-card__img img, .pq-thumb img, .pq-trend .t img { filter: saturate(1.3) contrast(1.06); object-position: center 35%; }
.pq-game--plat span { padding: 0; position: absolute; bottom: 9px; }

/* ───────── Popular games sidebar ───────── */
.pq-popular { padding: 18px 20px 14px 20px; }
.pq-popular .pq-head h2 { font-size: 20px; }
.pq-popular .pq-head .pq-ic { color: var(--pq-yellow2); }
.pq-poplist { list-style: none; margin: 12px 0 0; padding: 0; }
.pq-poplist li { border-bottom: 1px solid var(--pq-line); }
.pq-poplist li:last-child { border-bottom: 0; }
.pq-poplist a { display: flex; align-items: center; gap: 13px; padding: 5px 0; min-height: 53px; font-weight: 500; font-size: 15px; }
.pq-poplist a:hover { color: var(--pq-yellow); }
.pq-poplist a > .pq-ic { margin-left: auto; color: var(--pq-muted); }
.pq-thumb { width: 45px; height: 45px; border-radius: 6px; overflow: hidden; flex: none; display: grid; place-items: center; color: #fff; }
.pq-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ───────── Latest guides ───────── */
.pq-latest .pq-head h2 { font-size: 22px; }
.pq-latest .pq-head > .pq-ic { color: var(--pq-text); }
.pq-latest .pq-head .pq-more { margin-right: 16px; }
.pq-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.pq-card {
	background: #fff; color: #0e1626; border-radius: 6px; overflow: hidden;
	display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s;
}
.pq-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(0, 0, 0, .45); }
.pq-card__img { position: relative; height: 104px; overflow: hidden; background: #ccd; }
.pq-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.pq-card:hover .pq-card__img img { transform: scale(1.05); }
.pq-card__label {
	position: absolute; left: 14px; bottom: -1px; z-index: 2;
	font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #fff;
	padding: 2px 7px; border-radius: 3px 3px 0 0;
}
.pq-card__body { padding: 18px 14px 12px; display: flex; flex-direction: column; flex: 1; }
.pq-card h3 { margin: 0; font-size: 17px; line-height: 1.2; font-weight: 700; color: #0e1626; }
.pq-card:hover h3 { color: #1a4fd6; }
.pq-card p { margin: 8px 0 0; font-size: 13px; line-height: 1.35; color: #3c475c; }
.pq-meta { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 14px; font-size: 11px; color: #4b566b; }
.pq-meta span { display: inline-flex; align-items: center; gap: 5px; }
.pq-meta .pq-av { width: 16px; height: 16px; border-radius: 50%; background: var(--pq-yellow); display: grid; place-items: center; color: #111; }
.pq-meta .pq-c { margin-left: auto; }

.pq-quick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.pq-quick a {
	display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 14px;
	border-radius: 4px; border: 1px solid; font-weight: 500; font-size: 14px; color: #fff;
	transition: transform .15s, filter .15s;
}
body.pq-light .pq-quick a { color: #0e1626; }
.pq-quick a:hover { transform: translateY(-2px); filter: brightness(1.25); }
.pq-quick .q1 { background: #131a45; border-color: #3b45a8; } .pq-quick .q1 .pq-ic { color: #8f9bff; }
.pq-quick .q2 { background: #3a1015; border-color: #a2222c; } .pq-quick .q2 .pq-ic { color: #ff4655; }
.pq-quick .q3 { background: #0b2a1d; border-color: #1f7a48; } .pq-quick .q3 .pq-ic { color: #2fd27a; }
.pq-quick .q4 { background: #0d1d42; border-color: #2f56b8; } .pq-quick .q4 .pq-ic { color: #5d8bff; }
.pq-quick .q5 { background: #241338; border-color: #6a34a8; } .pq-quick .q5 .pq-ic { color: #c27bff; }
.pq-quick .q6 { background: #0a2a34; border-color: #1f8ba5; } .pq-quick .q6 .pq-ic { color: #3fd5f5; }
body.pq-light .pq-quick a { background: #fff; }

/* ───────── Right column: newsletter + trending ───────── */
.pq-news {
	border: 1px solid var(--pq-line2); border-radius: 10px; padding: 18px 18px 16px;
	background: linear-gradient(180deg, rgba(20, 30, 54, .7), rgba(12, 18, 34, .7));
}
body.pq-light .pq-news { background: #fff; }
.pq-news__top { display: flex; gap: 20px; }
.pq-news__top > .pq-ic { margin-top: 4px; }
.pq-news h3 { margin: 0; font-size: 20px; line-height: 1.15; font-weight: 700; }
.pq-news p { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: #d0d8e8; max-width: 220px; }
body.pq-light .pq-news p { color: var(--pq-muted); }
.pq-news form { display: flex; gap: 14px; margin-top: 18px; }
.pq-news input[type=email] {
	flex: 1; min-width: 0; height: 34px; border-radius: 6px; border: 1px solid #d9dfeb; background: #fff;
	padding: 0 14px; font: inherit; font-size: 13px; color: #111; box-shadow: none;
}
.pq-news .pq-btn { height: 34px; padding: 0 20px; font-size: 13px; }
.pq-news__ok { margin-top: 10px; font-size: 13px; color: var(--pq-yellow); }

.pq-trend { margin-top: 12px; border: 1px solid var(--pq-line); border-radius: 10px; padding: 14px 10px 6px 10px; }
.pq-trend .pq-head h3 { font-size: 17px; }
.pq-trend .pq-head .pq-ic { color: var(--pq-yellow); }
.pq-trend ol { list-style: none; margin: 8px 0 0; padding: 0; }
.pq-trend li { border-bottom: 1px solid var(--pq-line); }
.pq-trend li:last-child { border-bottom: 0; }
.pq-trend a { display: flex; align-items: center; gap: 14px; padding: 7px 0; font-size: 13px; font-weight: 500; line-height: 1.35; }
.pq-trend a:hover { color: var(--pq-yellow); }
.pq-trend .n { width: 20px; text-align: center; font-size: 18px; font-weight: 500; color: #c9d3e6; }
.pq-trend .t { width: 72px; height: 46px; border-radius: 4px; overflow: hidden; flex: none; position: relative; }
.pq-trend .t img { width: 100%; height: 100%; object-fit: cover; }
.pq-trend .t b { position: absolute; inset: 0; display: grid; place-items: center; font-family: "Barlow Condensed", var(--pq-font); font-size: 17px; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .7); }

/* ───────── Footer ───────── */
.pq-foot { padding: 26px 44px 30px; }
.pq-foot__line { display: flex; align-items: center; gap: 18px; color: #8d99b2; font-size: 12px; max-width: 1032px; }
.pq-foot__line::before, .pq-foot__line::after { content: ""; flex: 1; height: 1px; background: var(--pq-line2); }
.pq-foot__line i { width: 3px; height: 3px; border-radius: 50%; background: #8d99b2; }
.pq-foot__line a:hover { color: var(--pq-yellow); }

/* ───────── Inner pages ───────── */
.pq-page { max-width: 1180px; margin: 0 auto; padding: 40px 24px 20px; }
.pq-page__title { font-size: 38px; line-height: 1.15; font-weight: 800; margin: 10px 0 8px; }
.pq-page__sub { color: var(--pq-muted); margin: 0 0 26px; }
.pq-article { max-width: 820px; margin: 0 auto; }
.pq-article__hero { border-radius: 12px; overflow: hidden; margin: 18px 0 28px; }
.pq-article__hero img { width: 100%; height: auto; }
.pq-prose { font-size: 17px; line-height: 1.75; color: var(--pq-text); }
.pq-prose h2, .pq-prose h3 { line-height: 1.25; margin: 1.8em 0 .6em; }
.pq-prose a { color: var(--pq-yellow); text-decoration: underline; }
.pq-prose img { border-radius: 10px; height: auto; }
.pq-prose pre, .pq-prose code { background: var(--pq-card); border: 1px solid var(--pq-line); border-radius: 6px; padding: 2px 6px; font-size: .9em; }
.pq-prose pre { padding: 14px; overflow-x: auto; }
.pq-prose blockquote { border-left: 4px solid var(--pq-yellow); margin: 1.5em 0; padding: .3em 1.2em; color: var(--pq-muted); }
.pq-prose table { width: 100%; border-collapse: collapse; }
.pq-prose th, .pq-prose td { border: 1px solid var(--pq-line2); padding: 8px 10px; text-align: left; }
.pq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pq-empty { padding: 40px; text-align: center; border: 1px dashed var(--pq-line2); border-radius: 12px; color: var(--pq-muted); }
.pq-pager { display: flex; gap: 8px; justify-content: center; margin: 30px 0; }
.pq-pager .page-numbers { padding: 8px 14px; border: 1px solid var(--pq-line2); border-radius: 6px; }
.pq-pager .current { background: var(--pq-yellow); color: #111; border-color: var(--pq-yellow); }

/* ───────── Responsive ───────── */
@media (max-width: 1360px) {
	.pq-nav { margin-left: 16px; }
	.pq-search { width: 230px; }
	.pq-games { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.pq-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pq-dots { left: 50%; transform: translateX(-50%); }
}
@media (max-width: 1180px) {
	.pq-low { grid-template-columns: 1fr; padding: 18px 24px 0; }
	.pq-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pq-search { display: none; }
	.pq-slide__tag { display: none; }
}
@media (max-width: 980px) {
	.pq-header__in { padding: 0 16px; gap: 10px; height: 72px; }
	.pq-logo img { height: 60px; }
	.pq-burger { display: grid; margin-left: auto; }
	.pq-nav {
		display: none; position: absolute; top: 72px; left: 0; right: 0; margin: 0; height: auto;
		flex-direction: column; align-items: stretch; background: var(--pq-panel); border-bottom: 1px solid var(--pq-line); padding: 8px 16px 16px;
	}
	.pq-nav.is-open { display: flex; }
	.pq-nav__item { height: auto; display: block; }
	.pq-nav__link { height: 46px; padding: 0 4px; }
	.pq-nav__item.is-active > .pq-nav__link::after { display: none; }
	.pq-drop { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 6px 10px; display: none; background: none; }
	.pq-nav__item.is-open .pq-drop { display: block; }
	.pq-top { grid-template-columns: 1fr; }
	.pq-top__main { border-right: 0; }
	.pq-hero { margin-left: 0; height: 340px; }
	.pq-slide__body { padding: 40px 24px 0 56px; }
	.pq-explore { padding: 14px 16px 18px; }
	.pq-popular { border-top: 1px solid var(--pq-line); padding: 18px 16px; }
	.pq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.pq-hero { height: 360px; }
	.pq-slide__body { padding: 34px 16px 0 44px; }
	.pq-slide h2 { font-size: 28px; }
	.pq-slide h2 span { font-size: 21px; }
	.pq-games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pq-low { padding: 16px 16px 0; }
	.pq-cards, .pq-grid { grid-template-columns: 1fr; }
	.pq-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pq-news form { flex-direction: column; }
	.pq-foot { padding: 24px 16px; }
	.pq-page__title { font-size: 30px; }
}