@charset "UTF-8";
.ph-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--ph-space-lg);
flex-wrap: wrap;
}
.ph-section-head :is(h2, h3) { margin: 0; }
.ph-section-head :is(h2, h3),
.ph-post-body > h2.ph-beary-take {
font-family: var(--ph-font-tactical);
font-weight: var(--ph-weight-normal);
letter-spacing: var(--ph-tracking-tactical);
}
.ph-section-head { align-items: flex-end; }
.ph-section-head__text { min-width: 0; }
.ph-section-head__sub {
margin: 2px 0 0;
color: var(--ph-text-muted);
font-size: var(--ph-size-xs);
line-height: var(--ph-leading-tight, 1.35);
letter-spacing: 0;
}
.ph-section-head .ph-section-more {
color: var(--ph-brand-gold);
font-size: var(--ph-size-xs);
font-weight: var(--ph-weight-semi);
text-decoration: none;
white-space: nowrap;
}
.ph-section-head .ph-section-more:hover { text-decoration: underline; }
.ph-eyebrow {
color: var(--ph-brand-gold);
font-size: var(--ph-size-2xs);
font-weight: var(--ph-weight-bold);
letter-spacing: var(--ph-tracking-tactical);
text-transform: uppercase;
margin: 0;
}
.ph-eyebrow--live {
color: var(--ph-status-success);
text-transform: none;
letter-spacing: 0;
display: inline-flex;
align-items: center;
gap: var(--ph-space-2xs);
}
.ph-eyebrow--live::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ph-status-success);
flex: 0 0 auto;
}
.ph-badge {
display: inline-block;
font-size: var(--ph-size-3xs);
font-weight: var(--ph-weight-semi);
padding: 3px var(--ph-space-xs);
border-radius: var(--ph-radius-xs);
background: var(--ph-tint-white);
color: var(--ph-text-body);
}
.ph-badge--live { background: var(--ph-tint-green); color: var(--ph-status-success); }
.ph-badge--gold { background: var(--ph-tint-gold); color: var(--ph-brand-gold); }
.ph-badge--plain {
background: var(--ph-tint-white);
color: var(--ph-text-muted);
font-size: 10px;
padding: 2px var(--ph-space-2xs);
font-weight: var(--ph-weight-normal);
}
.entry-content,
.ph-layout,
.ph-container,
:has(> .ph-card-grid) {
container-type: inline-size;
}
.ph-card-grid {
display: grid;
gap: var(--ph-space-lg);
align-items: stretch;
}
.ph-card-grid.ph-card-grid > * {
margin-block: 0;
}
.ph-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 620px) {
.ph-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (min-width: 1120px) {
.ph-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ph-card-grid.wp-block-post-template {
list-style: none;
padding-left: 0;
margin-left: 0;
margin-inline-start: 0;
}
.ph-game-card,
.ph-card-grid > li.wp-block-post {
background: var(--ph-bg-surface);
backdrop-filter: blur(var(--ph-blur-glass));
-webkit-backdrop-filter: blur(var(--ph-blur-glass));
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
transition:
transform var(--ph-transition),
box-shadow var(--ph-transition),
border-color var(--ph-transition);
}
.ph-game-card:hover,
.ph-game-card:focus-within,
.ph-card-grid > li.wp-block-post:hover,
.ph-card-grid > li.wp-block-post:focus-within {
transform: translateY(var(--ph-lift));
box-shadow: var(--ph-shadow-lift);
border-color: rgba(245, 158, 11, 0.3);
}
.ph-game-card__thumb {
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, var(--ph-slate-800), var(--ph-slate-900));
display: flex;
align-items: center;
justify-content: center;
color: var(--ph-text-muted);
font-size: var(--ph-size-2xs);
letter-spacing: var(--ph-tracking-tactical);
margin: 0;
}
.ph-game-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ph-game-card__thumb.wp-block-post-featured-image {
margin: 0;
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, var(--ph-slate-800), var(--ph-slate-900));
}
.ph-game-card__thumb.wp-block-post-featured-image a { display: block; height: 100%; }
.ph-game-card__body {
flex: 1 1 auto;
padding: var(--ph-space-md) var(--ph-space-lg) var(--ph-space-lg);
display: flex;
flex-direction: column;
gap: var(--ph-space-sm);
}
.ph-game-card__body :is(h3, h4),
.ph-card-grid > li .wp-block-post-title {
margin: 0;
font-size: var(--ph-size-md);
font-weight: var(--ph-weight-heading);
}
.ph-card-grid > li .wp-block-post-title a {
color: var(--ph-text-heading);
text-decoration: none;
}
.ph-card-grid > li .wp-block-post-title a:hover { color: var(--ph-brand-gold); }
.ph-game-card__meta {
margin: 0;
font-size: var(--ph-size-2xs);
color: var(--ph-text-muted);
}
.ph-badge-row {
display: flex;
flex-wrap: wrap;
gap: var(--ph-space-2xs);
}
.ph-game-card__body .ph-badge-row { margin-top: auto; }
.ph-game-card__thumb { flex: 0 0 auto; }
.ph-answer-panel {
border-left: 3px solid var(--ph-brand-gold);
border-radius: 0 var(--ph-radius-lg) var(--ph-radius-lg) 0;
background: var(--ph-bg-surface);
backdrop-filter: blur(var(--ph-blur-glass));
-webkit-backdrop-filter: blur(var(--ph-blur-glass));
padding: var(--ph-space-lg) var(--ph-space-xl);
display: flex;
flex-direction: column;
gap: var(--ph-space-xs);
}
.ph-answer-panel > :is(h2, h3) { margin: 0; font-size: var(--ph-size-h3); }
.ph-answer-panel p { margin: 0; font-size: var(--ph-size-sm); }
.ph-spoiler {
display: flex;
flex-direction: column;
gap: var(--ph-space-2xs);
padding: var(--ph-space-md) var(--ph-space-xl);
border: 1px solid var(--ph-border-strong);
border-radius: var(--ph-radius-lg);
background: var(--ph-bg-raised);
font-size: var(--ph-size-sm);
}
.ph-spoiler.ph-spoiler p { margin: 0; }
.ph-spoiler__title {
display: flex;
align-items: center;
gap: var(--ph-space-xs);
font-weight: var(--ph-weight-heading);
color: var(--ph-text-heading);
}
.ph-spoiler__title::before {
content: "";
flex: none;
width: 1.25em;
height: 1.25em;
background: currentColor;
-webkit-mask: var(--ph-alert-mask) center / contain no-repeat;
mask: var(--ph-alert-mask) center / contain no-repeat;
}
.ph-spoiler-tag {
position: absolute;
inset-block-start: var(--ph-space-2xs);
inset-inline-end: var(--ph-space-2xs);
z-index: 1;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px var(--ph-space-2xs);
border-radius: var(--ph-radius-xs);
background: rgba(10, 12, 15, 0.82);
color: var(--ph-text-heading);
font-family: var(--ph-font-body);
font-size: var(--ph-size-2xs);
font-weight: var(--ph-weight-heading);
line-height: 1.4;
white-space: nowrap;
pointer-events: none;
}
.ph-spoiler-tag::before {
content: "";
flex: none;
width: 1.1em;
height: 1.1em;
background: currentColor;
-webkit-mask: var(--ph-alert-mask) center / contain no-repeat;
mask: var(--ph-alert-mask) center / contain no-repeat;
}
.ph-hub-card:has(.ph-clip) .ph-spoiler-tag {
inset-block-start: calc(var(--ph-space-2xs) + var(--ph-size-3xs) * 1.4 + 8px);
}
.ph-hub-card:has(.ph-spoiler-tag) .ph-hub-card__badge {
max-width: calc(50% - var(--ph-space-2xs));
}
.ph-sr .ph-spoiler-tag {
inset-block-start: var(--ph-space-lg);
inset-inline-end: var(--ph-space-md);
border: 1px solid var(--ph-border-strong);
background: var(--ph-bg-raised);
}
.ph-sr:first-child .ph-spoiler-tag { inset-block-start: 0; }
.ph-sr:has(.ph-spoiler-tag) > .ph-spoiler-tag + * { padding-inline-end: 5.5em; }
.ph-lore-feature__excerpt:empty,
.ph-featured__excerpt:empty,
.ph-sr__answer:empty { display: none; }
.ph-spoiler__text { color: var(--ph-text-body); }
.ph-post-body > :is(h2, h3) { margin-block: var(--ph-gap-block) 0; }
.ph-post-body > h3 { margin-block-start: calc(var(--ph-gap-block) * 0.8); }
.ph-post-body > :is(h2, h3) + * { margin-block-start: var(--ph-space-sm); }
.ph-post-body .ph-sec { margin-block: 0; }
.ph-post-body .ph-sec > :is(h2, h3) + * { margin-block-start: var(--ph-space-sm); }
.ph-post-body .ph-sec--note {
margin-block: var(--ph-gap-block) 0;
padding: var(--ph-space-xl);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-md);
background: var(--ph-grad-voice), var(--ph-bg-surface-solid);
box-shadow:
0 18px 40px -12px rgba(0, 0, 0, 0.75),
0 4px 12px rgba(0, 0, 0, 0.4);
}
.ph-post-body .ph-sec--note > :is(h2, h3) {
margin-block: 0;
font-size: var(--ph-size-h3);
color: var(--ph-text-heading);
}
.ph-post-body .ph-sec--note > :last-child { margin-block-end: 0; }
.ph-tier-matrix {
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-lg);
overflow-x: auto;
background: var(--ph-bg-surface);
}
.ph-tier-matrix table {
width: 100%;
min-width: 620px;
border-collapse: collapse;
margin: 0;
border: 0;
}
.ph-tier-matrix table :is(th, td) {
text-align: left;
padding: var(--ph-space-md) var(--ph-space-lg);
border: 0;
border-bottom: 1px solid var(--ph-border-subtle);
font-size: var(--ph-size-xs);
vertical-align: top;
}
.ph-tier-matrix thead th {
font-family: var(--ph-font-tactical);
letter-spacing: var(--ph-tracking-tactical);
color: var(--ph-text-muted);
font-weight: var(--ph-weight-normal);
font-size: var(--ph-size-2xs);
background: var(--ph-bg-sunken);
}
.ph-tier-matrix tbody th {
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-md);
letter-spacing: var(--ph-tracking-tactical);
white-space: nowrap;
color: var(--ph-tier-1);
font-weight: var(--ph-weight-normal);
}
.ph-tier-matrix tbody tr:nth-child(2) th { color: var(--ph-tier-2); }
.ph-tier-matrix tbody tr:nth-child(3) th { color: var(--ph-tier-3); }
.ph-tier-matrix table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.ph-tier-matrix table :is(thead, tfoot),
:is(.ph-post-body, .entry-content, .is-root-container) .wp-block-table table :is(thead, tfoot) {
border: 0;
}
:is(.ph-post-body, .entry-content, .is-root-container) figure.wp-block-table {
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-lg);
overflow-x: auto;
background: var(--ph-bg-surface);
}
.ph-tier-matrix figure.wp-block-table {
border: 0;
border-radius: 0;
background: none;
}
:is(.ph-post-body, .entry-content, .is-root-container) :is(figure.wp-block-table, .wp-block-table) table {
width: 100%;
border-collapse: collapse;
border: 0;
background: var(--ph-bg-surface);
border-radius: var(--ph-radius-lg);
overflow: hidden;
}
:is(.ph-post-body, .entry-content, .is-root-container) .wp-block-table table :is(th, td) {
text-align: left;
padding: var(--ph-space-md) var(--ph-space-lg);
border: 0;
border-bottom: 1px solid var(--ph-border-subtle);
font-size: var(--ph-size-xs);
vertical-align: top;
}
:is(.ph-post-body, .entry-content, .is-root-container) .wp-block-table table thead th {
font-family: var(--ph-font-tactical);
font-weight: var(--ph-weight-normal);
font-size: var(--ph-size-2xs);
letter-spacing: var(--ph-tracking-tactical);
color: var(--ph-text-muted);
background: var(--ph-bg-sunken);
}
:is(.ph-post-body, .entry-content, .is-root-container) .wp-block-table table tbody tr:last-child :is(th, td) { border-bottom: 0; }
@media (max-width: 545px) {
.ph-tier-matrix:has(.ph-table-stack) {
border: 0;
background: none;
overflow-x: visible;
}
.ph-tier-matrix .ph-table-stack { min-width: 0; }
.ph-table-stack thead { display: none; }
.ph-table-stack,
.ph-table-stack tbody,
.ph-table-stack tr,
.ph-table-stack :is(th, td) {
display: block;
width: 100%;
}
.ph-table-stack tr {
margin-block-end: var(--ph-space-md);
padding-block: var(--ph-space-xs);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-md);
background: var(--ph-bg-surface);
}
.ph-table-stack tr:last-child { margin-block-end: 0; }
.ph-tier-matrix table :is(th, td),
.ph-table-stack :is(th, td) {
padding: var(--ph-space-2xs) var(--ph-space-lg);
border: 0;
}
.ph-tier-matrix .ph-table-stack tbody th {
padding-block-start: var(--ph-space-xs);
white-space: normal;
}
.ph-table-stack td[data-k]::before {
content: attr(data-k);
display: block;
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-3xs);
letter-spacing: var(--ph-tracking-tactical);
color: var(--ph-text-muted);
}
}
.ph-video-panel {
background: var(--ph-bg-surface);
backdrop-filter: blur(var(--ph-blur-glass));
-webkit-backdrop-filter: blur(var(--ph-blur-glass));
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-lg);
padding: var(--ph-space-xl);
display: flex;
flex-direction: column;
gap: var(--ph-space-md);
}
.ph-video-panel__bullets {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: var(--ph-space-2xs);
font-size: var(--ph-size-sm);
}
.ph-video-panel__bullets li {
display: grid;
grid-template-columns: 6px minmax(0, 1fr);
gap: var(--ph-space-xs);
align-items: start;
}
.ph-video-panel__bullets li::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ph-text-faint);
margin-top: 0.62em;
}
.ph-btn-ghost .wp-block-button__link,
.wp-block-button.ph-btn-ghost > .wp-block-button__link {
background: transparent;
color: var(--ph-brand-gold);
border: 1px solid var(--ph-border-gold);
}
@media (prefers-reduced-motion: reduce) {
.ph-game-card,
.ph-game-card:hover,
.ph-game-card:focus-within {
transition: none;
transform: none;
}
}
.ph-hero {
display: flex;
flex-direction: column;
gap: var(--ph-space-lg);
padding-block: var(--ph-space-6xl) var(--ph-space-4xl);
border-bottom: 1px solid var(--ph-border-subtle);
}
.ph-hero.ph-hero > * { margin-block: 0; }
.ph-hero h1 {
font-size: var(--ph-size-hero);
margin: 0;
text-wrap: balance;
}
.ph-hero h1 em {
color: var(--ph-brand-gold);
font-style: normal;
}
.ph-hero__lead {
color: var(--ph-text-muted);
font-size: var(--ph-size-md);
max-width: 62ch;
margin: 0;
}
.ph-page-intro {
display: flex;
flex-direction: column;
gap: var(--ph-space-sm);
padding-block-end: var(--ph-space-xl);
border-bottom: 1px solid var(--ph-border-subtle);
}
.ph-page-intro.ph-page-intro > * { margin-block: 0; }
.ph-page-intro p:last-child {
color: var(--ph-text-muted);
font-size: var(--ph-size-md);
max-width: 62ch;
}
.ph-badge-row--terms { gap: var(--ph-space-2xs); }
.ph-badge-row--terms .wp-block-post-terms__separator { display: none; }
.ph-badge-row--terms a,
.ph-badge-row--terms .wp-block-post-terms__link {
display: inline-block;
font-size: var(--ph-size-3xs);
font-weight: var(--ph-weight-semi);
padding: 3px var(--ph-space-xs);
border-radius: var(--ph-radius-xs);
background: var(--ph-tint-white);
color: var(--ph-text-body);
text-decoration: none;
}
.ph-badge-row--terms a.ph-badge--beary-talk { background: var(--ph-voice-solid); }
.ph-badge-row--terms a:hover { background: var(--ph-tint-gold); color: var(--ph-brand-gold); }
.ph-card-grid > li.wp-block-post:not(:has(.wp-block-post-featured-image))::before {
content: "ยังไม่มีภาพหน้าปก";
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, var(--ph-slate-800), var(--ph-slate-900));
color: var(--ph-text-muted);
font-size: var(--ph-size-2xs);
letter-spacing: var(--ph-tracking-tactical);
}
.ph-spotlight { margin-block: var(--ph-space-5xl) 0; }
.ph-spotlight__grid {
list-style: none;
padding-left: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1px;
background: var(--ph-border);
border-block: 1px solid var(--ph-border);
}
.ph-spotlight__grid > li { margin: 0; }
.ph-spotlight__cover {
height: 100%;
background-image: linear-gradient(135deg, var(--ph-slate-800), var(--ph-bg-deep));
}
.ph-spotlight__cover.ph-spotlight__cover .wp-block-cover__inner-container {
display: flex;
flex-direction: column;
gap: var(--ph-space-sm);
width: 100%;
}
.ph-spotlight__title {
margin: 0;
font-size: var(--ph-size-h2);
text-wrap: balance;
}
.ph-spotlight__title a { color: var(--ph-text-heading); text-decoration: none; }
.ph-spotlight__title a:hover { color: var(--ph-brand-gold); }
.ph-spotlight__meta { margin: 0; font-size: var(--ph-size-xs); color: var(--ph-text-muted); }
.ph-spotlight__meta a { color: var(--ph-text-muted); text-decoration: none; }
.ph-game-hero {
margin-block: 0;
margin-inline: calc(-50vw + 50%);
}
.ph-game-hero .wp-block-cover {
min-height: 460px;
align-items: flex-end;
padding: 0;
}
.ph-game-hero .ph-crumb__item a,
.ph-game-hero .ph-crumb__item + .ph-crumb__item::before {
color: var(--ph-text-heading);
}
.ph-game-hero .ph-crumb__item a:hover { color: var(--ph-brand-gold); }
.ph-game-hero .ph-crumb__list {
font-family: var(--ph-font-tactical);
letter-spacing: var(--ph-tracking-tactical);
}
.ph-game-hero .wp-block-cover__inner-container {
gap: var(--ph-space-2xs);
}
.ph-game-hero .wp-block-cover__inner-container.wp-block-cover__inner-container {
width: fit-content;
max-width: calc(100% - 2 * var(--ph-container-pad));
margin-inline-start: max(var(--ph-container-pad), calc((100% - var(--ph-w-content)) / 2));
margin-inline-end: auto;
margin-block-end: var(--ph-space-3xl);
padding: var(--ph-space-lg) var(--ph-space-xl);
border-radius: var(--ph-radius-md); 
background: rgba(10, 12, 15, 0.72);
}
.ph-game-hero__year {
margin: 0;
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-md);
line-height: 1.1;
letter-spacing: 0.18em;
color: var(--ph-brand-gold);
}
.ph-game-hero .ph-game-hero__year:empty { display: none; }
.ph-game-hero .wp-block-post-title,
.ph-featured__title,
.ph-arc-hero__title {
margin: 0;
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-display);
font-weight: var(--ph-weight-normal);
line-height: 1.08;
letter-spacing: var(--ph-tracking-label);
text-transform: uppercase;
text-wrap: balance;
}
.ph-game-hero .wp-block-post-title,
.ph-hub-hero__title,
.ph-arc-hero__title,
.ph-post-hero__title,
.ph-beary-box__title {
text-shadow: 0 2px 12px rgba(10, 12, 15, 0.65);
}
.ph-featured__title {
font-size: var(--ph-size-featured);
line-height: 1.15;
}
.ph-featured__card--solo .ph-featured__title {
font-family: var(--ph-font-heading);
font-weight: var(--ph-weight-heading);
font-size: var(--ph-size-h2);
line-height: var(--ph-leading-heading);
letter-spacing: normal;
text-transform: none;
}
.ph-featured__take {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
line-clamp: 4;
overflow: hidden;
}
.ph-featured__take > p { margin: 0; }
.ph-featured__take > p + p { margin-block-start: var(--ph-space-sm); }
.ph-featured__take .tactical-inline-link { color: var(--ph-brand-gold); }
.ph-game-hero__tagline {
column-gap: var(--ph-space-md);
row-gap: var(--ph-space-2xs);
align-items: center;
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-2xs);
letter-spacing: var(--ph-tracking-tactical);
text-transform: uppercase;
color: var(--ph-text-heading);
}
.ph-game-hero__tagline a {
color: inherit;
text-decoration: none;
}
.ph-game-hero__tagline a:hover { color: var(--ph-brand-gold); }
.ph-game-hero__tagline .wp-block-post-terms__separator {
font-size: 0;
}
.ph-game-hero__tagline .wp-block-post-terms__separator::after {
content: "·";
font-size: var(--ph-size-2xs);
padding-inline: 0.25em;
}
.ph-game-hero .ph-game-hero__studio {
display: inline-block;
padding: 2px var(--ph-space-xs);
border-radius: var(--ph-radius-xs);
background: var(--ph-text-heading);
color: var(--ph-bg-deep);
font-weight: var(--ph-weight-semi);
}
.ph-game-hero .ph-game-hero__studio:empty { display: none; }
.ph-fact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 1px;
background: var(--ph-border);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-lg);
overflow: hidden;
margin-block: 0 var(--ph-space-4xl);
}
.ph-fact-grid.ph-fact-grid > * { margin-block: 0; }
.ph-fact {
background: var(--ph-bg-surface-solid);
padding: var(--ph-space-sm) var(--ph-space-md);
display: flex;
flex-direction: column;
gap: var(--ph-space-3xs);
}
.ph-fact.ph-fact > * { margin-block: 0; }
.ph-fact-grid { container-type: inline-size; }
@container (min-width: 320px) {
.ph-fact {
flex-direction: row;
align-items: baseline;
justify-content: space-between;
gap: var(--ph-space-md);
}
.ph-fact__label { flex: none; }
.ph-fact__value { text-align: right; }
}
.ph-fact__label {
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-3xs);
letter-spacing: var(--ph-tracking-tactical);
color: var(--ph-text-muted);
}
.ph-fact__value { font-size: var(--ph-size-sm); color: var(--ph-text-heading); }
.ph-fact__value a {
color: var(--ph-text-heading);
text-decoration: underline;
text-decoration-color: var(--ph-border-gold);
text-underline-offset: 3px;
word-break: break-word;
}
.ph-fact__value a:hover { color: var(--ph-brand-gold); }
.ph-jump {
position: sticky;
top: var(--ph-header-sticky-h);
z-index: 20;
min-height: var(--ph-jump-h);
margin-block: 0 var(--ph-space-4xl);
margin-inline: calc(-50vw + 50%);
background: rgba(33, 38, 47, 0.92);
backdrop-filter: blur(var(--ph-blur-nav));
-webkit-backdrop-filter: blur(var(--ph-blur-nav));
border-block: 1px solid var(--ph-border);
}
.ph-jump__inner {
display: flex;
flex-wrap: wrap;
gap: var(--ph-space-lg) var(--ph-space-2xl);
width: 100%;
max-width: calc(var(--ph-w-content) + 2 * var(--ph-container-pad));
margin-inline: auto;
padding: var(--ph-space-md) var(--ph-container-pad);
}
.ph-jump--with-ask .ph-jump__inner {
align-items: center;
justify-content: space-between;
gap: var(--ph-space-md) var(--ph-space-xl);
padding-block: var(--ph-space-sm);
}
.ph-jump--with-ask .ph-jump__links { order: 0; }
.ph-jump--with-ask .ph-ask { order: 1; }
.ph-jump__links {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--ph-space-lg) var(--ph-space-2xl);
min-width: 0;
}
.ph-jump .ph-ask {
flex: 0 0 calc((100% - var(--ph-space-2xl)) * 0.4);
margin-block: 0;
}
.ph-jump .ph-ask__label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.ph-jump .ph-ask__form input[type="search"] { min-height: 40px; }
.ph-jump .ph-ask__form button { min-height: 40px; }
@media (max-width: 921px) {
.ph-jump--with-ask .ph-jump__inner {
flex-direction: column;
align-items: stretch;
gap: var(--ph-space-sm);
}
.ph-jump--with-ask .ph-jump__links { order: -1; }
.ph-jump .ph-ask {
flex: none;
max-width: none;
}
.ph-jump__links {
flex-wrap: nowrap;
overflow-x: auto;
gap: var(--ph-space-lg);
scrollbar-width: none;
}
.ph-jump__links::-webkit-scrollbar { display: none; }
.ph-jump__link { white-space: nowrap; }
}
.ph-jump__link {
position: relative;
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-h2); 
font-weight: var(--ph-weight-normal);
letter-spacing: var(--ph-tracking-tactical);
text-transform: uppercase;
color: var(--ph-text-heading);
text-decoration: none;
padding-block-end: var(--ph-space-3xs);
border-block-end: 2px solid transparent;
transition: border-color 0.15s ease;
}
.ph-jump__link:hover { border-block-end-color: var(--ph-border-gold); }
.ph-jump__link.is-current {
color: var(--ph-text-heading);
border-block-end-color: var(--ph-brand-gold);
}
.ph-jump__count {
font-size: var(--ph-size-3xs);
font-weight: var(--ph-weight-medium);
color: var(--ph-text-muted);
vertical-align: super;
line-height: 0;
margin-inline-start: 3px;
}
.ph-jump__link:hover .ph-jump__count,
.ph-jump__link.is-current .ph-jump__count { color: var(--ph-brand-gold); }
.ph-jump__link--empty { opacity: 0.45; }
.ph-game-section { margin-block: 0 var(--ph-space-5xl); scroll-margin-top: 72px; }
.ph-game-section.ph-game-section > * { margin-block: 0 var(--ph-space-lg); }
.ph-game-section > :last-child { margin-block-end: 0; }
.ph-stat-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1px;
background: var(--ph-border);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-lg);
overflow: hidden;
}
.ph-stat {
background: var(--ph-bg-surface-solid);
padding: var(--ph-space-md);
display: flex;
flex-direction: column;
gap: var(--ph-space-3xs);
}
.ph-stat__value {
font-family: var(--ph-font-tactical);
font-size: 30px;
line-height: 1;
color: var(--ph-brand-gold);
font-variant-numeric: tabular-nums;
}
.ph-stat__label {
font-size: var(--ph-size-2xs);
color: var(--ph-text-muted);
}
.wp-block-columns.ph-overview-cols {
display: grid;
grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
gap: var(--ph-space-2xl);
align-items: start;
}
.ph-overview-cols.ph-overview-cols > .wp-block-column { margin-block: 0; }
.ph-overview-cols > .ph-side {
position: sticky;
top: calc(var(--ph-header-sticky-h) + var(--ph-jump-h) + var(--ph-space-lg));
align-self: start;
}
@media (max-width: 921px) {
.wp-block-columns.ph-overview-cols { grid-template-columns: 1fr; }
.ph-overview-cols > .ph-side { position: static; }
}
.ph-side .ph-fact-grid { grid-template-columns: 1fr; margin-block-end: var(--ph-space-lg); }
.ph-side .ph-stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ph-side .ph-stat__value { font-size: 24px; }
.ph-featured { margin-block-start: var(--ph-space-4xl); }
.ph-lore-feature {
position: relative;
display: grid;
grid-template-columns: 300px minmax(0, 1fr);
background: var(--ph-bg-surface-solid);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-lg);
overflow: hidden;
color: inherit;
}
.ph-lore-feature__title > a {
color: inherit;
text-decoration: none;
}
.ph-lore-feature__title > a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.ph-lore-feature__actions {
display: flex;
flex-wrap: wrap;
gap: var(--ph-space-xs);
margin: var(--ph-space-xs) 0 0;
position: relative;
z-index: 2;
}
.ph-lore-feature:hover { border-color: var(--ph-border-strong); }
.ph-lore-feature:hover .ph-lore-feature__title { color: var(--ph-brand-gold); }
.ph-lore-feature__art {
position: relative;
display: flex;
align-items: flex-end;
min-height: 100%;
padding: var(--ph-space-sm);
background: var(--ph-placeholder);
border-inline-end: 1px solid var(--ph-border);
overflow: hidden;
}
.ph-lore-feature__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ph-lore-feature__ghost { font-size: var(--ph-size-2xs); color: var(--ph-text-faint); }
.ph-featured__art .ph-lore-feature__ghost {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-align: center;
}
.ph-lore-feature__txt {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--ph-space-sm);
padding: var(--ph-space-xl);
min-width: 0;
}
.ph-lore-feature__meta {
margin: 0;
font-size: var(--ph-size-2xs);
letter-spacing: var(--ph-tracking-label);
color: var(--ph-text-muted);
}
.ph-lore-feature__title {
margin: 0;
font-family: var(--ph-font-heading);
font-weight: var(--ph-weight-heading);
font-size: var(--ph-size-h2);
line-height: var(--ph-leading-heading);
color: var(--ph-text-heading);
}
.ph-lore-feature__excerpt {
margin: 0;
font-size: var(--ph-size-sm);
color: var(--ph-text-body);
}
.ph-lore-feature.ph-lore-feature :is(p, h3) { margin-block: 0; }
.ph-lore-rest { margin-block-start: var(--ph-space-2xl); }
@media (max-width: 921px) {
.ph-lore-feature { grid-template-columns: 1fr; }
.ph-lore-feature__art {
aspect-ratio: 16 / 9;
min-height: 0;
border-inline-end: 0;
border-block-end: 1px solid var(--ph-border);
}
.ph-lore-feature__txt { padding: var(--ph-space-lg); }
}
.ph-clip-band {
margin-inline: calc(-50vw + 50%);
padding-block: var(--ph-space-3xl);
padding-inline: max(var(--ph-space-lg), calc(50vw - var(--ph-w-content) / 2));
max-width: none;
background: var(--ph-bg-sunken, var(--ph-bg-deep));
border-block: 1px solid var(--ph-border);
}
.ph-clip-band__inner {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
grid-template-areas:
"eyebrow eyebrow"
"body player"
"cta player";
grid-template-rows: auto auto auto;
column-gap: var(--ph-space-2xl);
row-gap: var(--ph-space-lg);
align-items: start;
max-width: var(--ph-w-content);
margin-inline: auto;
}
.ph-clip-band__eyebrow {
grid-area: eyebrow;
font-family: var(--ph-font-tactical);
font-weight: var(--ph-weight-normal);
}
.ph-clip-band__body { grid-area: body; }
.ph-clip-band__player { grid-area: player; align-self: start; }
.ph-clip-band__cta { grid-area: cta; justify-self: start; align-self: end; }
.ph-clip-band__text {
margin: var(--ph-space-2xs) 0 0;
color: var(--ph-text-body);
font-size: var(--ph-size-sm);
}
.ph-clip-band__cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding-block: 15px;
padding-inline: var(--ph-space-2xl);
line-height: 1;
border-radius: var(--ph-radius-pill, 40px);
background: var(--ph-brand-youtube);
color: #FFFFFF;
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-yt-label);
letter-spacing: var(--ph-tracking-tactical);
text-decoration: none;
white-space: nowrap;
}
.ph-clip-band__cta:hover { background: var(--ph-brand-youtube-hover); color: #FFFFFF; }
.ph-clip-band__player.ph-clip-band__player { margin: 0; }
.ph-clip-band__heading {
margin: 0;
font-size: var(--ph-size-md);
line-height: var(--ph-leading-heading);
color: var(--ph-text-heading);
text-wrap: balance;
}
.ph-clip-band--article,
.ph-side .ph-clip-band {
margin-inline: 0;
margin-block-start: var(--ph-gap-section);
padding: var(--ph-space-xl);
max-width: 100%;
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-md);
background: var(--ph-bg-sunken, var(--ph-bg-deep));
}
.ph-clip-band--article .ph-clip-band__inner,
.ph-side .ph-clip-band__inner { gap: var(--ph-space-lg); }
.ph-side .ph-clip-band {
margin-block-start: var(--ph-space-md);
}
.ph-side .ph-clip-band__inner {
column-gap: var(--ph-space-lg);
row-gap: var(--ph-space-md);
}
@media (max-width: 921px) {
.ph-clip-band__inner {
grid-template-columns: 1fr;
grid-template-areas:
"eyebrow"
"body"
"player"
"cta";
}
}
@media (max-width: 1100px) {
.ph-clip-band--article .ph-clip-band__inner {
grid-template-columns: 1fr;
grid-template-areas:
"eyebrow"
"body"
"player"
"cta";
}
}
.ph-clip-band__inner:not(:has(.ph-clip-band__cta)) {
grid-template-areas:
"eyebrow eyebrow"
"body player";
grid-template-rows: auto auto;
}
@media (max-width: 921px) {
.ph-clip-band__inner:not(:has(.ph-clip-band__cta)) {
grid-template-areas:
"eyebrow"
"body"
"player";
}
}
@media (max-width: 1100px) {
.ph-clip-band--article .ph-clip-band__inner:not(:has(.ph-clip-band__cta)) {
grid-template-areas:
"eyebrow"
"body"
"player";
}
}
.ph-clip-band--aside.ph-clip-band--aside {
margin-inline: 0;
max-width: none;
}
.ph-search__side .ph-clip-band--aside {
padding: var(--ph-space-lg);
border: 1px solid rgba(190, 19, 19, 0.42);
border-radius: var(--ph-radius-md);
background:
linear-gradient(150deg,
rgba(190, 19, 19, 0.16) 0%,
rgba(190, 19, 19, 0.06) 55%,
rgba(190, 19, 19, 0) 100%),
var(--ph-bg-surface-solid);
}
.ph-clip-band--aside .ph-clip-band__inner {
max-width: none;
margin-inline: 0;
column-gap: var(--ph-space-lg);
row-gap: var(--ph-space-sm);
}
.ph-clip-band--aside .ph-clip-band__heading {
font-size: var(--ph-size-sm);
line-height: var(--ph-leading-heading);
}
.ph-clip-band--aside .ph-clip-band__text {
font-size: var(--ph-size-2xs);
}
@container (max-width: 460px) {
.ph-clip-band--aside .ph-clip-band__inner {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"eyebrow"
"body"
"player";
}
}
.ph-post-side-clip {
container-type: inline-size;
}
.ph-clip-band__link {
color: inherit;
text-decoration: none;
}
.ph-clip-band__link:hover,
.ph-clip-band__link:focus-visible {
color: var(--ph-brand-gold);
}
.ph-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ph-space-xs);
flex-wrap: wrap;
}
.ph-card-meta.ph-card-meta { margin-block-start: auto; }
.ph-card-meta.ph-card-meta > * { margin-block: 0; }
.ph-card-meta .ph-badge-row { flex: 1 1 auto; min-width: 0; }
.ph-clip {
display: inline-flex;
align-self: center;
width: fit-content;
flex: none;
align-items: center;
gap: 4px;
padding: 2px var(--ph-space-2xs);
border-radius: var(--ph-radius-xs);
background: rgba(10, 12, 15, 0.82);
color: var(--ph-text-heading);
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-3xs);
letter-spacing: var(--ph-tracking-tactical);
line-height: 1.4;
white-space: nowrap;
}
.ph-clip__icon { flex: none; display: block; width: 14px; height: 10px; }
.ph-clip__icon-bg { fill: var(--ph-brand-youtube); }
.ph-clip__icon-arrow { fill: #FFFFFF; }
.ph-hub-card .ph-clip {
position: absolute;
inset-block-start: var(--ph-space-2xs);
inset-inline-end: var(--ph-space-2xs);
}
.ph-hub-card:has(.ph-clip) .ph-hub-card__badge {
max-width: calc(50% - var(--ph-space-2xs));
}
.ph-help-list.ph-help-list {
list-style: none;
padding-left: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1px;
background: var(--ph-border);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-lg);
overflow: hidden;
}
.ph-help-list.ph-help-list > li { margin: 0; }
.ph-help-list.ph-help-list--cols {
display: grid;
grid-template-columns: 1fr;
}
@container (min-width: 700px) {
.ph-help-list.ph-help-list--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ph-help-item {
padding: var(--ph-space-xs) var(--ph-space-sm) var(--ph-space-xs) var(--ph-space-lg);
display: flex;
flex-direction: column;
gap: var(--ph-space-3xs);
border-radius: var(--ph-radius-xs);
transition: background var(--ph-transition);
}
.ph-help-item.ph-help-item > * { margin-block: 0; }
.ph-help-list > li:hover .ph-help-item { background: var(--ph-slate-700); }
.ph-help-item .wp-block-post-title {
margin: 0;
font-size: var(--ph-size-md);
font-weight: var(--ph-weight-semi);
line-height: 1.45;
}
.ph-help-item .wp-block-post-title a { color: var(--ph-text-heading); text-decoration: none; }
.ph-help-list > li:hover .wp-block-post-title a { color: var(--ph-brand-gold); }
.ph-help-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ph-space-xs) var(--ph-space-md);
font-size: var(--ph-size-xs);
color: var(--ph-text-muted);
}
.ph-help-meta .wp-block-post-terms { display: inline; }
.ph-help-meta a { color: var(--ph-text-muted); text-decoration: none; }
.ph-status {
display: inline-flex;
align-items: center;
gap: var(--ph-space-2xs);
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-3xs);
font-weight: var(--ph-weight-normal);
letter-spacing: var(--ph-tracking-tactical);
text-transform: uppercase;
color: var(--ph-text-muted);
}
.ph-status::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
flex: 0 0 auto;
}
.ph-status--investigating::before { background: var(--ph-status-danger); }
.ph-status--workaround::before { background: var(--ph-brand-gold); }
.ph-status--resolved::before { background: var(--ph-status-success); }
.ph-status--resolved a { color: var(--ph-status-success); }
.ph-help-hint { font-size: var(--ph-size-xs); color: var(--ph-text-muted); }
.ph-help-chips { display: flex; flex-wrap: wrap; gap: var(--ph-space-2xs); }
.ph-help-chips.ph-help-chips > * { margin-block: 0; }
.ph-help-chips code {
display: inline-block;
background: var(--ph-tint-white);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-pill);
padding: var(--ph-space-3xs) var(--ph-space-md);
font-size: var(--ph-size-2xs);
color: var(--ph-text-body);
}
.ph-quick-take {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--ph-space-xl);
align-items: start;
margin-block: var(--ph-space-sm) 0;
padding: var(--ph-space-xl);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-md);
background: var(--ph-grad-voice), var(--ph-bg-surface-solid);
box-shadow:
0 18px 40px -12px rgba(0, 0, 0, 0.75),
0 4px 12px rgba(0, 0, 0, 0.4);
}
.ph-quick-take.ph-quick-take > * { margin-block: 0; }
.ph-quick-take__label {
flex: none;
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-featured);
font-weight: var(--ph-weight-normal);
line-height: 1;
letter-spacing: var(--ph-tracking-label);
text-transform: uppercase;
color: var(--ph-brand-gold);
}
.ph-quick-take__body {
flex: none;
max-width: var(--ph-w-prose);
color: var(--ph-text-body);
}
.ph-quick-take:has(.ph-quick-take__aff) {
grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
}
.ph-quick-take__main {
display: flex;
flex-direction: column;
gap: var(--ph-space-2xs);
min-width: 0;
}
.ph-quick-take__main.ph-quick-take__main > * { margin-block: 0; }
.ph-quick-take__aff {
display: flex;
flex-direction: column;
gap: var(--ph-space-xs);
padding: var(--ph-space-lg);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-md);
background: var(--ph-bg-raised);
}
.ph-quick-take__aff-label {
margin: 0;
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-3xs);
letter-spacing: var(--ph-tracking-tactical);
color: var(--ph-text-muted);
}
.ph-quick-take__aff-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding-inline: var(--ph-space-md);
border: 1px solid var(--ph-border-strong);
border-radius: var(--ph-radius-sm);
background: var(--ph-bg-surface-solid);
color: var(--ph-text-heading);
font-size: var(--ph-size-sm);
font-weight: var(--ph-weight-semi);
text-decoration: none;
text-align: center;
}
.ph-quick-take__aff-cta:hover {
border-color: var(--ph-border-gold);
color: var(--ph-brand-gold);
}
.ph-quick-take__aff-note {
margin: 0;
font-size: var(--ph-size-3xs);
line-height: 1.4;
color: var(--ph-text-muted);
}
@media (max-width: 921px) {
.ph-quick-take:has(.ph-quick-take__aff) { grid-template-columns: minmax(0, 1fr); }
}
.ph-quick-take__body > *:first-child { margin-block-start: 0; }
.ph-quick-take__body > *:last-child { margin-block-end: 0; }
.tactical-inline-link {
color: inherit;
text-decoration: underline;
text-decoration-color: var(--ph-border-gold);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.tactical-inline-link:hover,
.tactical-inline-link:focus-visible {
color: var(--ph-brand-gold);
text-decoration-color: currentColor;
}
.wp-block-search__label.screen-reader-text { width: 1px; }
.site-content:has(.ph-404) {
background:
linear-gradient(
180deg,
rgba(10, 12, 15, 0.34) 0%,
rgba(10, 12, 15, 0.24) 42%,
rgba(10, 12, 15, 0.78) 100%
),
url("/wp-content/uploads/2026/09/404.webp") center / cover no-repeat,
var(--ph-bg-canvas);
}
.ph-404 {
max-width: 720px;
margin-inline: auto;
padding-inline: var(--ph-container-pad);
padding-block: var(--ph-gap-section);
text-align: center;
}
.ph-404.ph-404 > * { margin-block: 0; }
.ph-404__code.ph-404__code {
margin-block: 0 var(--ph-space-xs);
font-family: var(--ph-font-tactical);
font-size: clamp(84px, 13vw, 168px);
font-weight: var(--ph-weight-normal);
line-height: 0.85;
letter-spacing: var(--ph-tracking-label);
color: var(--ph-blood);
text-shadow: 0 4px 24px rgba(10, 12, 15, 0.7);
}
.ph-404 .ph-helpdesk__search { margin-block-end: 0; }
.ph-404 .ph-helpdesk__form {
max-width: 520px;
margin-inline: auto;
}
.ph-404 .ph-eyebrow { color: var(--ph-status-danger); }
#content.site-content { padding-block-end: var(--ph-space-5xl); }
.home #content.site-content { padding-block-end: 0; }
.ph-footer {
container-type: inline-size;
margin-inline: calc(-50vw + 50%);
padding-block: var(--ph-space-3xl) var(--ph-space-xl);
background: var(--ph-bg-deep);
}
.ph-footer__inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--ph-space-2xl) var(--ph-space-3xl);
width: 100%;
max-width: calc(var(--ph-w-content) + 2 * var(--ph-container-pad));
margin-inline: auto;
padding-inline: var(--ph-container-pad);
}
@container (min-width: 520px) {
.ph-footer__inner { grid-template-columns: repeat(2, 1fr); }
}
@container (min-width: 860px) {
.ph-footer__inner { grid-template-columns: 3fr 3fr 2fr 2fr; }
}
.ph-footer__head {
margin: 0 0 var(--ph-space-md);
font-family: var(--ph-font-tactical);
font-weight: var(--ph-weight-normal);
font-size: var(--ph-size-md);
line-height: 1.2;
letter-spacing: var(--ph-tracking-tactical);
text-transform: uppercase;
color: var(--ph-text-heading);
}
.ph-footer__head.ph-footer__head { margin-block: 0 var(--ph-space-md); }
.ph-footer__links.ph-footer__links { margin-block: 0; }
.ph-footer__head--thai {
font-family: var(--ph-font-heading);
font-weight: var(--ph-weight-heading);
letter-spacing: 0;
text-transform: none;
}
.ph-footer__links {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: var(--ph-space-2xs);
}
.ph-footer__links a {
display: block;
width: fit-content;
font-size: var(--ph-size-sm);
line-height: 1.4;
padding-block: 3px;
margin-block: -3px;
color: var(--ph-text-muted);
text-decoration: none;
transition: color var(--ph-transition);
}
.ph-footer__links a:hover,
.ph-footer__links a:focus-visible {
color: var(--ph-brand-gold);
}
.ph-footer__tagline {
margin: 0 0 var(--ph-space-lg);
max-width: 34ch;
font-size: var(--ph-size-sm);
line-height: var(--ph-leading-body);
color: var(--ph-text-muted);
}
.ph-footer__base {
display: grid;
grid-template-columns: 1fr;
gap: var(--ph-space-md) var(--ph-space-3xl);
width: 100%;
max-width: calc(var(--ph-w-content) + 2 * var(--ph-container-pad));
margin-inline: auto;
padding-inline: var(--ph-container-pad);
padding-block-start: var(--ph-space-lg);
border-block-start: 1px solid var(--ph-border-subtle);
}
.ph-footer__base.ph-footer__base { margin-block: var(--ph-space-2xl) 0; }
.ph-footer__base.ph-footer__base > *,
.ph-footer__legal-col.ph-footer__legal-col > * { margin-block: 0; }
@container (min-width: 860px) {
.ph-footer__base { grid-template-columns: 3fr 2fr; }
}
.ph-footer__disclosure,
.ph-footer__legal {
margin: 0;
font-size: var(--ph-size-xs);
line-height: var(--ph-leading-body);
color: var(--ph-text-muted);
}
.ph-footer__disclosure a,
.ph-footer__legal a { color: var(--ph-text-link); }
.ph-social {
display: flex;
flex-wrap: wrap;
gap: var(--ph-space-xs);
margin-block-start: var(--ph-space-lg);
}
.ph-social__link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-inline-start: calc(var(--ph-space-xs) * -1);
color: var(--ph-text-muted);
transition: color var(--ph-transition);
}
.ph-social__link:first-child { margin-inline-start: 0; }
.ph-social__link:hover,
.ph-social__link:focus-visible { color: var(--ph-brand-gold); }
.ph-social__link svg {
width: 22px;
height: 22px;
fill: currentColor;
}
.ph-footer__logo {
margin: 0 0 var(--ph-space-md);
}
.ph-footer__logo img {
height: auto;
max-width: 100%;
}
.ph-footer .ph-footer__logo .custom-logo-link img {
width: 130px;
max-width: 100%;
}
.ph-platforms {
display: flex;
flex-wrap: wrap;
gap: var(--ph-space-2xs);
}
.ph-platform {
padding: 1px var(--ph-space-2xs);
border: 1px solid var(--ph-border-strong);
border-radius: var(--ph-radius-xs);
background: rgba(10, 12, 15, 0.35);
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-3xs);
line-height: 1.5;
letter-spacing: var(--ph-tracking-tactical);
color: var(--ph-text-heading);
white-space: nowrap;
}
.ph-platform.ph-platform--thai {
font-family: var(--ph-font-body);
font-size: var(--ph-size-2xs);
line-height: calc(var(--ph-size-3xs) * 1.5);
letter-spacing: 0;
background: var(--ph-slate-700);
}
.ph-game-hero__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: var(--ph-space-md);
row-gap: var(--ph-space-2xs);
}
.ph-game-hero__meta.ph-game-hero__meta > * {
margin-block: 0;
}
.ph-video {
margin: var(--ph-space-xl) 0 0;
}
.ph-fact-grid .ph-video {
margin-block-start: 0;
}
.ph-video__facade,
.ph-video__frame {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-md);
}
.ph-video__facade {
position: relative;
background-color: var(--ph-bg-surface-solid);
background-size: cover;
background-position: center;
box-shadow: inset 0 0 0 100vmax rgba(10, 12, 15, 0.45);
transition: box-shadow var(--ph-transition);
}
.ph-video__facade:hover,
.ph-video__facade:focus-visible {
box-shadow: inset 0 0 0 100vmax rgba(10, 12, 15, 0.25);
}
.ph-video__frame { border: 1px solid var(--ph-border); }
.ph-video__play {
position: absolute;
inset: 0;
display: grid;
place-items: center;
}
.ph-video__play svg {
width: 68px;
height: 48px;
}
.ph-video__play-bg {
fill: var(--ph-brand-youtube);
opacity: 0.92;
transition: opacity var(--ph-transition);
}
.ph-video__play-arrow { fill: #fff; }
.ph-video__facade:hover .ph-video__play-bg,
.ph-video__facade:focus-visible .ph-video__play-bg { opacity: 1; }
.ph-video__caption {
margin-block-start: var(--ph-space-sm);
font-size: var(--ph-size-caption);
line-height: var(--ph-leading-body);
color: var(--ph-text-muted);
}
.ph-page-header {
padding-block: var(--ph-space-4xl) var(--ph-space-2xl);
border-block-end: 1px solid var(--ph-border-subtle);
margin-block-end: var(--ph-space-2xl);
}
.ph-page-header.ph-page-header > * { margin-block: 0; }
.ph-page-header > * + * { margin-block-start: var(--ph-space-sm); }
.ph-page-header h1 { text-wrap: balance; }
.ph-page-header__lead {
max-width: 62ch;
color: var(--ph-text-muted);
}
.ph-result-meta {
margin: 0 0 var(--ph-space-lg);
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-2xs);
letter-spacing: var(--ph-tracking-tactical);
text-transform: uppercase;
color: var(--ph-text-muted);
}
.ph-game-card__thumb.ph-poster,
.ph-game-card__thumb.ph-poster.wp-block-post-featured-image {
aspect-ratio: 16 / 9;
}
.ph-card-grid.ph-card-grid > li {
padding: 0;
}
.ph-game-card__studio {
display: flex;
flex-wrap: wrap;
column-gap: var(--ph-space-2xs);
margin: 0;
}
.ph-game-card__studio > p {
margin: 0;
font-size: var(--ph-size-2xs);
color: var(--ph-text-muted);
}
.ph-game-card__studio > p:empty { display: none; }
.ph-game-card__studio > p + p:not(:empty)::before {
content: "·";
padding-inline-end: var(--ph-space-2xs);
}
.ph-game-card__body .ph-platforms { margin-block-start: auto; }
.ph-game-card__body .ph-platform {
font-size: var(--ph-size-3xs);
}
.ph-hub-hero.ph-hub-hero {
position: relative;
max-width: none;
min-height: 460px;
display: flex;
align-items: flex-end;
margin-inline: calc(-50vw + 50%);
margin-block-end: var(--ph-space-3xl);
background-color: var(--ph-bg-deep);
background-size: cover;
background-position: center;
}
.ph-hub-hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(10, 12, 15, 0) 0%,
rgba(10, 12, 15, 0.15) 42%,
rgba(10, 12, 15, 0.72) 100%);
}
.ph-hub-hero--support.ph-hub-hero--support {
min-height: 300px;
background-image: var(--ph-grad-help);
}
.ph-hub-hero--support::after { content: none; }
.ph-game-section:has(.wp-block-query-no-results),
.ph-game-section:has(> .ph-empty) {
display: none;
}
.ph-hub-hero--ask.ph-hub-hero--ask { align-items: center; }
.ph-hub-hero--ask .ph-helpdesk__search { margin-block-end: 0; }
.ph-term-head {
margin-block-end: var(--ph-space-xl);
}
.ph-term-head__title {
margin: var(--ph-space-2xs) 0 0;
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-display);
font-weight: var(--ph-weight-normal);
line-height: 1.08;
letter-spacing: var(--ph-tracking-label);
text-transform: uppercase;
color: var(--ph-text-heading);
}
.ph-term-head__title.ph-term-head__title--th {
font-family: var(--ph-font-body);
font-weight: var(--ph-weight-heading);
line-height: 1.3;
letter-spacing: normal;
text-transform: none;
}
.ph-term-head__lead {
margin: var(--ph-space-sm) 0 0;
max-width: 56ch;
color: var(--ph-slate-300);
}
.ph-term-head.ph-term-head.ph-term-head :is(p, h1) {
margin-block-end: 0;
}
.ph-hub-hero__inner {
container-type: inline-size;
position: relative;
z-index: 1;
width: 100%;
max-width: calc(var(--ph-w-content) + 2 * var(--ph-container-pad));
margin-inline: auto;
padding: var(--ph-space-3xl) var(--ph-container-pad);
}
.ph-hub-hero__title {
margin: var(--ph-space-2xs) 0 0;
font-family: var(--ph-font-heading);
font-size: var(--ph-size-display);
font-weight: var(--ph-weight-heading);
line-height: 1.34;
letter-spacing: var(--ph-tracking-label);
text-transform: uppercase;
color: var(--ph-text-heading);
}
.ph-hub-hero__lead {
margin: var(--ph-space-sm) 0 0;
max-width: 56ch;
min-height: calc(2 * 1.7em);
color: var(--ph-slate-300);
}
.ph-hub-hero__inner.ph-hub-hero__inner.ph-hub-hero__inner :is(p, h1) {
margin-block-end: 0;
}
.ph-hub-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ph-space-sm);
margin-block-start: var(--ph-space-xl);
}
@container (min-width: 700px) {
.ph-hub-stats { grid-template-columns: repeat(5, minmax(0, 1fr)) 5fr; }
}
.ph-hub-stat {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--ph-space-sm) var(--ph-space-md);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-md);
background: rgba(10, 12, 15, 0.5);
}
.ph-hub-stat--beary-talk {
background: var(--ph-grad-voice), rgba(10, 12, 15, 0.5);
}
.ph-hub-stat--beary-talk .ph-hub-stat__label {
color: var(--ph-text-body);
}
.ph-hub-stat__num {
font-family: var(--ph-font-heading);
font-size: var(--ph-size-h2);
font-weight: var(--ph-weight-heading);
line-height: 1.1;
color: var(--ph-text-heading);
}
.ph-hub-stat__label {
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-3xs);
letter-spacing: var(--ph-tracking-tactical);
text-transform: uppercase;
color: var(--ph-text-muted);
}
.ph-featured {
container-type: inline-size;
margin-block-end: var(--ph-space-3xl);
}
.ph-featured__label.ph-featured__label {
margin: 0 0 var(--ph-space-sm);
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-h3);
letter-spacing: var(--ph-tracking-tactical);
text-transform: uppercase;
color: var(--ph-brand-gold);
}
.ph-featured__card {
display: grid;
grid-template-columns: 1fr;
gap: var(--ph-space-lg);
padding: var(--ph-space-lg);
border: 1px solid var(--ph-border-gold);
border-radius: var(--ph-radius-lg);
background: var(--ph-bg-surface);
}
.ph-featured__col {
container-type: inline-size;
display: flex;
flex-direction: column;
min-width: 0;
}
.ph-featured__col > .ph-featured__card { flex: 1; }
.ph-featured__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--ph-space-md);
}
@container (min-width: 860px) {
.ph-featured__card { grid-template-columns: 300px minmax(0, 1fr); }
}
.ph-featured--split {
display: grid;
gap: var(--ph-space-lg);
}
@container (min-width: 560px) {
.ph-featured--split .ph-featured__card { grid-template-columns: min(240px, 32%) minmax(0, 1fr); }
}
@media (min-width: 922px) {
.ph-featured--split {
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
align-items: stretch;
}
.ph-featured--split .ph-featured__card { grid-template-columns: min(240px, 32%) minmax(0, 1fr); }
}
.ph-featured__all {
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-sm);
line-height: 1;
letter-spacing: var(--ph-tracking-tactical);
color: var(--ph-text-body);
white-space: nowrap;
}
.ph-featured__all:hover { color: var(--ph-brand-gold); }
.ph-beary-box {
position: relative;
flex: 1;
display: flex;
align-items: flex-end;
aspect-ratio: 16 / 9;
padding: var(--ph-space-lg);
border: 1px solid var(--ph-voice-line);
border-radius: var(--ph-radius-lg);
overflow: hidden;
background: var(--ph-bg-sunken);
}
@media (min-width: 545px) and (max-width: 921px) {
.ph-beary-box { aspect-ratio: 21 / 9; }
}
@media (min-width: 922px) {
.ph-featured--split .ph-beary-box { aspect-ratio: auto; }
}
.ph-beary-box__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ph-beary-box::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(10, 12, 15, 0) 0%,
rgba(10, 12, 15, 0.15) 42%,
rgba(10, 12, 15, 0.72) 100%);
transition: opacity var(--ph-transition);
}
.ph-beary-box:hover::after { opacity: 0.85; }
.ph-beary-box__text {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.ph-beary-box__title {
color: var(--ph-text-heading);
font-weight: var(--ph-weight-heading);
line-height: 1.5;
transition: color var(--ph-transition);
}
.ph-beary-box:hover .ph-beary-box__title { color: var(--ph-brand-gold); }
.ph-beary-box__meta {
font-size: var(--ph-size-2xs);
color: var(--ph-text-body);
}
.ph-lore-games {
display: grid;
gap: var(--ph-space-lg);
}
@media (min-width: 922px) {
.ph-lore-games--pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.ph-lore-game {
container-type: inline-size;
position: relative;
display: flex;
align-items: flex-end;
height: 250px;
padding: var(--ph-space-lg);
border: 1px solid var(--ph-border-gold);
border-radius: var(--ph-radius-lg);
overflow: hidden;
background: var(--ph-bg-sunken);
text-decoration: none;
}
@media (max-width: 921px) {
.ph-lore-game { height: 200px; }
}
@media (max-width: 544px) {
.ph-lore-game {
height: auto;
aspect-ratio: 21 / 9;
padding: var(--ph-space-md);
}
}
.ph-lore-game__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ph-lore-game__box {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 2px;
max-width: 100%;
padding: var(--ph-space-md) var(--ph-space-lg);
border-radius: var(--ph-radius-md);
background: rgba(10, 12, 15, 0.72);
}
@media (max-width: 544px) {
.ph-lore-game__box { padding: var(--ph-space-xs) var(--ph-space-md); }
}
.ph-lore-game__eyebrow {
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-xs);
line-height: 1;
letter-spacing: var(--ph-tracking-tactical);
color: var(--ph-brand-gold);
}
.ph-lore-game__name {
font-family: var(--ph-font-tactical);
font-weight: 400;
font-size: clamp(0.9rem, calc((100cqi - 32px) / 16), 1.6rem);
line-height: 1.1;
letter-spacing: var(--ph-tracking-tactical);
color: var(--ph-text-heading);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color var(--ph-transition);
}
.ph-lore-game:hover .ph-lore-game__name { color: var(--ph-brand-gold); }
.ph-lore-game__count {
font-size: var(--ph-size-xs);
color: var(--ph-text-heading);
}
.ph-lore-game__go {
margin-inline-start: var(--ph-space-xs);
color: var(--ph-brand-gold);
}
.ph-featured__art {
display: block;
aspect-ratio: 16 / 9;
border-radius: var(--ph-radius-md);
overflow: hidden;
background: var(--ph-slate-900);
}
.ph-featured__art img { width: 100%; height: 100%; object-fit: cover; }
.ph-featured__side {
display: flex;
flex-direction: column;
gap: var(--ph-space-xs);
min-width: 0;
}
.ph-featured__side .ph-featured__meta > span:last-child { white-space: nowrap; }
.ph-featured__body { display: flex; flex-direction: column; gap: var(--ph-space-sm); }
.ph-featured__title a { color: var(--ph-text-heading); text-decoration: none; }
.ph-featured__title a:hover { color: var(--ph-brand-gold); }
.ph-featured__excerpt.ph-featured__excerpt { margin: 0; color: var(--ph-slate-300); }
.ph-featured__card--solo .ph-featured__excerpt {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
}
.ph-featured__meta.ph-featured__meta {
margin: 0;
font-size: var(--ph-size-2xs);
color: var(--ph-text-muted);
}
.ph-featured__actions.ph-featured__actions {
display: flex;
flex-wrap: wrap;
gap: var(--ph-space-xs);
margin: auto 0 0;
}
.ph-btn-outline {
display: inline-block;
padding: var(--ph-space-xs) var(--ph-space-lg);
border: 1px solid var(--ph-border-strong);
border-radius: var(--ph-radius-sm);
background: transparent;
color: var(--ph-text-heading);
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-2xs);
letter-spacing: var(--ph-tracking-tactical);
text-transform: uppercase;
text-decoration: none;
transition: color var(--ph-transition), border-color var(--ph-transition);
}
.ph-btn-outline:hover { color: var(--ph-brand-gold); border-color: var(--ph-border-gold); }
.ph-btn,
.ph-btn-outline,
.ph-hub-clear {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.ph-btn,
.ph-hub-clear {
padding: var(--ph-space-xs) var(--ph-space-lg);
border-radius: var(--ph-radius-sm);
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-2xs);
letter-spacing: var(--ph-tracking-tactical);
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: background var(--ph-transition), color var(--ph-transition);
}
.ph-btn {
background: var(--ph-brand-gold);
color: var(--ph-bg-deep);
border: 1px solid var(--ph-brand-gold);
}
.ph-btn:hover { background: transparent; color: var(--ph-brand-gold); }
.ph-hub-clear {
width: 100%;
background: transparent;
color: var(--ph-text-muted);
border: 1px solid var(--ph-border);
}
.ph-hub-clear.ph-hub-clear:is(:hover, :focus) {
background: transparent;
color: var(--ph-text-muted);
border-color: var(--ph-border);
}
.ph-hub-clear.ph-hub-clear:hover { color: var(--ph-brand-gold); border-color: var(--ph-border-gold); }
:has(> .ph-hub-layout) { container-type: inline-size; }
.ph-hub-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--ph-space-2xl);
}
.ph-hub-main {
min-width: 0;
width: 100%;
}
@media (min-width: 922px) {
.ph-hub-layout { grid-template-columns: minmax(0, 1fr) 280px; }
.ph-hub-layout--support {
grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
}
}
@media (max-width: 921px) {
.ph-hub-main { display: contents; }
.ph-hub-toolbar { order: 1; }
.ph-hub-side { order: 2; }
.ph-hub-grid { order: 3; }
.ph-hub-empty { order: 4; }
.ph-hub-pager { order: 5; }
}
.ph-hub-toolbar {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--ph-space-sm);
margin-block-end: var(--ph-space-lg);
}
.ph-hub-toolbar__head {
margin: 0;
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-h3);
letter-spacing: var(--ph-tracking-tactical);
text-transform: uppercase;
color: var(--ph-text-heading);
}
.ph-hub-sort {
display: inline-flex;
align-items: center;
gap: var(--ph-space-2xs);
font-size: var(--ph-size-2xs);
color: var(--ph-text-muted);
}
.ph-hub-view {
display: inline-flex;
gap: var(--ph-space-xs);
}
.ph-hub-view__btn {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-sm);
background: transparent;
color: var(--ph-text-muted);
cursor: pointer;
transition: background var(--ph-transition), color var(--ph-transition), border-color var(--ph-transition);
}
.ph-hub-view__btn svg { width: 18px; height: 18px; fill: currentColor; }
.ph-hub-view__btn.ph-hub-view__btn:is(:hover, :focus) {
background: transparent;
color: var(--ph-text-muted);
border-color: var(--ph-border);
}
.ph-hub-view__btn.ph-hub-view__btn:hover {
color: var(--ph-text-heading);
border-color: var(--ph-border-strong);
}
.ph-hub-view__btn.ph-hub-view__btn.is-current {
background: var(--ph-slate-700);
border-color: var(--ph-border-strong);
color: var(--ph-text-heading);
}
.ph-hub-grid.is-list.is-list {
grid-template-columns: 1fr;
gap: var(--ph-space-sm);
}
.ph-hub-grid.is-list .ph-hub-card {
flex-direction: row;
align-items: stretch;
}
.ph-hub-grid.is-list .ph-hub-card__art {
flex: 0 0 auto;
width: 120px;
aspect-ratio: 16 / 9;
}
.ph-hub-grid.is-list .ph-arc-card .ph-hub-card__art.ph-arc-card__art { aspect-ratio: 16 / 9; }
.ph-hub-grid.is-list .ph-hub-card__body {
justify-content: center;
padding-block: var(--ph-space-xs);
}
.ph-hub-grid.is-list .ph-hub-card__badge {
position: static;
align-self: flex-start;
max-width: 100%;
background: transparent;
padding: 0;
}
.ph-hub-side,
.ph-hub-sort,
.ph-hub-pager { display: none; }
.ph-hub-layout.is-ready .ph-hub-side { display: block; }
.ph-hub-layout.is-ready .ph-hub-sort { display: inline-flex; }
.ph-hub-layout.is-ready .ph-hub-pager { display: flex; }
.ph-hub-grid {
scroll-margin-top: calc(var(--ph-header-sticky-h) + var(--ph-space-lg));
}
.ph-hub-grid.ph-hub-grid {
list-style: none;
margin: 0;
padding: 0;
}
.ph-hub-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ph-space-md);
align-items: stretch;
}
@container (min-width: 620px) {
.ph-hub-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--ph-space-lg);
}
}
@container (min-width: 1120px) {
.ph-hub-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ph-hub-card[hidden] { display: none; }
.ph-support-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.ph-support-list > li { margin-block: 0; }
.ph-support-list > li[hidden] { display: none; }
.ph-support-list > li:nth-child(10n + 5):not(:last-child) {
margin-block-end: var(--ph-space-3xl);
}
@media (max-width: 921px) {
.ph-hub-layout--support .ph-hub-toolbar { order: 1; }
.ph-hub-layout--support .ph-hub-side { order: 2; }
.ph-hub-layout--support .ph-support-list { order: 3; }
.ph-hub-layout--support .ph-hub-pager { order: 4; }
}
.ph-support-link {
text-decoration: none;
border-radius: var(--ph-radius-xs);
padding-inline: var(--ph-space-2xs);
margin-inline: calc(var(--ph-space-2xs) * -1);
transition: background var(--ph-transition), color var(--ph-transition);
}
.ph-support-link:hover {
background: var(--ph-bg-sunken);
color: var(--ph-brand-gold);
}
.ph-hub-layout .ph-support-nav { display: block; }
@media (min-width: 922px) {
.ph-hub-layout .ph-support-nav {
position: sticky;
top: calc(var(--ph-header-sticky-h) + var(--ph-space-lg));
align-self: start;
}
}
.ph-hub-card,
.ph-card-grid > li.wp-block-post {
position: relative;
}
.ph-hub-card__title > a::after,
.ph-card-grid > li.wp-block-post .wp-block-post-title > a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.ph-hub-card .ph-badge-row a,
.ph-card-grid > li.wp-block-post .ph-card-meta a,
.ph-card-grid > li.wp-block-post .ph-badge-row a {
position: relative;
z-index: 2;
}
.ph-hub-card {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-md);
background: var(--ph-bg-surface);
transition: transform var(--ph-transition), border-color var(--ph-transition);
}
.ph-hub-card:hover,
.ph-hub-card:focus-within {
transform: translateY(var(--ph-lift));
border-color: var(--ph-border-gold);
}
.ph-hub-card__art {
display: block;
position: relative;
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, var(--ph-slate-800), var(--ph-slate-900));
}
.ph-hub-card__badge {
position: absolute;
inset-block-start: var(--ph-space-2xs);
inset-inline-start: var(--ph-space-2xs);
max-width: calc(100% - var(--ph-space-md));
padding: 2px var(--ph-space-2xs);
border-radius: var(--ph-radius-xs);
background: rgba(10, 12, 15, 0.82);
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-3xs);
letter-spacing: var(--ph-tracking-tactical);
text-transform: uppercase;
color: var(--ph-text-body);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ph-hub-card__badge--beary-talk {
background: var(--ph-voice-solid);
}
.ph-hub-card__art img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ph-hub-card__body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: var(--ph-space-2xs);
padding: var(--ph-space-md);
}
.ph-hub-card__title {
margin: 0;
font-size: var(--ph-size-sm);
font-weight: var(--ph-weight-bold);
line-height: 1.34;
letter-spacing: var(--ph-tracking-label);
text-transform: uppercase;
}
.ph-hub-card__title a { color: var(--ph-text-heading); text-decoration: none; }
.ph-hub-card__title a:hover { color: var(--ph-brand-gold); }
.ph-arc-card .ph-hub-card__title { font-weight: var(--ph-weight-medium); }
.ph-hub-card__studio {
margin: 0;
font-size: var(--ph-size-3xs);
color: var(--ph-text-muted);
}
.ph-hub-card__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ph-space-2xs);
margin-block-start: auto;
padding-block-start: var(--ph-space-2xs);
}
.ph-hub-card__year {
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-3xs);
letter-spacing: var(--ph-tracking-tactical);
color: var(--ph-text-muted);
}
.ph-hub-card__foot .ph-platforms { gap: 2px; }
.ph-hub-card__foot .ph-platform { font-size: var(--ph-size-3xs); }
.ph-hub-card__foot .ph-platform.ph-platform--thai { font-size: var(--ph-size-2xs); }
.ph-hub-empty {
padding: var(--ph-space-2xl);
text-align: center;
color: var(--ph-text-muted);
border: 1px dashed var(--ph-border);
border-radius: var(--ph-radius-md);
}
.ph-hub-pager {
flex-wrap: wrap;
gap: var(--ph-space-2xs);
margin-block-start: var(--ph-space-2xl);
}
.ph-hub-pager__btn {
min-width: 40px;
min-height: 40px;
padding: 0 var(--ph-space-xs);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-sm);
background: transparent;
color: var(--ph-text-muted);
font-family: var(--ph-font-tactical);
letter-spacing: var(--ph-tracking-tactical);
cursor: pointer;
transition: color var(--ph-transition), border-color var(--ph-transition);
}
.ph-hub-pager__btn.ph-hub-pager__btn:is(:hover, :focus) {
background: transparent;
color: var(--ph-brand-gold);
border-color: var(--ph-border-gold);
}
.ph-hub-pager__btn.ph-hub-pager__btn.is-current {
background: var(--ph-brand-gold);
border-color: var(--ph-brand-gold);
color: var(--ph-bg-deep);
}
.ph-hub-panel {
padding: var(--ph-space-lg);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-md);
background: var(--ph-bg-surface);
}
.ph-hub-panel + .ph-hub-panel { margin-block-start: var(--ph-space-lg); }
.ph-hub-panel__head {
margin: 0 0 var(--ph-space-md);
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-md);
font-weight: var(--ph-weight-normal);
letter-spacing: var(--ph-tracking-tactical);
text-transform: uppercase;
color: var(--ph-text-heading);
}
.ph-hub-field { display: block; margin-block-end: var(--ph-space-md); }
.ph-hub-field__label {
display: block;
margin-block-end: var(--ph-space-2xs);
font-size: var(--ph-size-3xs);
letter-spacing: var(--ph-tracking-label);
text-transform: uppercase;
color: var(--ph-text-muted);
}
.ph-hub-field select,
.ph-hub-search {
width: 100%;
padding: var(--ph-space-xs) var(--ph-space-sm);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-sm);
background: var(--ph-bg-deep);
color: var(--ph-text-body);
font-family: inherit;
font-size: var(--ph-size-sm);
}
.ph-hub-search.ph-hub-search {
padding: var(--ph-space-xs) var(--ph-space-sm);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-sm);
background: var(--ph-bg-deep);
color: var(--ph-text-body);
font-size: var(--ph-size-sm);
box-shadow: none;
}
.ph-hub-search.ph-hub-search::placeholder { color: var(--ph-text-muted); }
.ph-hub-search.ph-hub-search:focus { border-color: var(--ph-border-gold); color: var(--ph-text-body); }
.ph-hub-check {
display: flex;
align-items: center;
gap: var(--ph-space-2xs);
min-height: 40px;
font-size: var(--ph-size-sm);
color: var(--ph-text-body);
cursor: pointer;
}
.ph-hub-check__count {
margin-inline-start: auto;
font-size: var(--ph-size-3xs);
color: var(--ph-text-muted);
}
.ph-hub-switch { position: relative; }
.ph-hub-switch__input {
position: absolute;
inline-size: 1px;
block-size: 1px;
margin: 0;
opacity: 0;
}
.ph-hub-switch__track {
position: relative;
flex: none;
inline-size: 34px;
block-size: 20px;
border: 1px solid var(--ph-border-strong);
border-radius: var(--ph-radius-pill);
background: var(--ph-bg-deep);
transition: background-color var(--ph-transition), border-color var(--ph-transition);
}
.ph-hub-switch__track::before {
content: '';
position: absolute;
inset-block-start: 2px;
inset-inline-start: 2px;
inline-size: 14px;
block-size: 14px;
border-radius: 50%;
background: var(--ph-text-muted);
transition: transform var(--ph-transition), background-color var(--ph-transition);
}
.ph-hub-switch:hover .ph-hub-switch__track { border-color: var(--ph-text-muted); }
.ph-hub-switch__input:checked + .ph-hub-switch__track {
border-color: var(--ph-text-heading);
background: var(--ph-text-heading);
}
.ph-hub-switch__input:checked + .ph-hub-switch__track::before {
transform: translateX(14px);
background: var(--ph-bg-deep);
}
.ph-hub-switch__input:focus-visible + .ph-hub-switch__track {
outline: 2px solid var(--ph-text-heading);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.ph-hub-switch__track,
.ph-hub-switch__track::before { transition: none; }
}
.ph-hub-statrows {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--ph-space-xs);
}
.ph-hub-statrows li {
display: flex;
justify-content: space-between;
gap: var(--ph-space-sm);
font-size: var(--ph-size-sm);
color: var(--ph-text-muted);
}
.ph-hub-statrow__num { color: var(--ph-text-heading); }
.ph-arc-hero.ph-arc-hero {
position: relative;
min-height: 460px;
display: flex;
align-items: flex-end;
margin-inline: calc(-50vw + 50%);
margin-block-end: var(--ph-space-3xl);
background-color: var(--ph-bg-deep);
background-size: cover;
background-position: center;
}
.ph-arc-hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(10, 12, 15, 0) 0%,
rgba(10, 12, 15, 0.15) 42%,
rgba(10, 12, 15, 0.72) 100%);
}
.ph-arc-hero__inner {
container-type: inline-size;
position: relative;
z-index: 1;
width: 100%;
max-width: calc(var(--ph-w-content) + 2 * var(--ph-container-pad));
margin-inline: auto;
padding: var(--ph-space-3xl) var(--ph-container-pad);
display: flex;
flex-direction: column;
gap: var(--ph-space-2xs);
}
.ph-arc-hero__inner > * { margin: 0; }
.ph-arc-hero__text {
display: flex;
flex-direction: column;
gap: var(--ph-space-2xs);
}
.ph-arc-hero__text > * { margin: 0; }
.ph-arc-hero--lore .ph-arc-hero__text {
width: fit-content;
max-width: 100%;
padding: var(--ph-space-lg) var(--ph-space-xl);
border-radius: var(--ph-radius-md);
background: rgba(10, 12, 15, 0.72);
}
.ph-arc-hero .ph-eyebrow {
font-family: var(--ph-font-tactical);
font-weight: var(--ph-weight-normal);
font-size: calc(var(--ph-size-display) * 2 / 3);
line-height: 1.05;
}
.ph-arc-hero .ph-eyebrow.ph-arc-hero__tagline {
font-family: var(--ph-font-body);
font-weight: var(--ph-weight-heading);
font-size: calc(var(--ph-size-display) * 0.55);
line-height: 1.4;
letter-spacing: 0;
text-transform: none;
text-wrap: balance;
}
.ph-arc-hero__count {
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-2xs);
letter-spacing: var(--ph-tracking-tactical);
text-transform: uppercase;
color: var(--ph-text-muted);
}
.ph-arc-card .ph-hub-card__art.ph-arc-card__art {
aspect-ratio: 16 / 9;
}
.ph-hub-card.ph-hub-card a,
.ph-featured.ph-featured a {
text-decoration: none;
}
.ph-hub-card.ph-hub-card a:hover,
.ph-hub-card.ph-hub-card a:focus-visible { text-decoration: none; }
body a:focus { outline: none; }
body a:focus-visible {
outline: 2px solid var(--ph-brand-gold);
outline-offset: 3px;
border-radius: 2px;
}
.ph-post-hero.ph-post-hero {
position: relative;
max-width: none;
min-height: 460px;
display: flex;
align-items: flex-end;
margin-inline: calc(-50vw + 50%);
margin-block-end: var(--ph-space-3xl);
background-color: var(--ph-bg-deep);
background-size: cover;
background-position: center;
}
.ph-post-hero--support.ph-post-hero--support {
min-height: 300px;
background-image: linear-gradient(
215deg,
rgba(37, 99, 235, 0.28) 0%,
var(--ph-bg-raised) 46%,
var(--ph-bg-deep) 100%
);
}
.ph-post-hero--support .ph-post-hero__inner::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline: calc(50% - 50vw);
z-index: -1;
background: linear-gradient(180deg,
rgba(10, 12, 15, 0) var(--ph-space-3xl),
var(--ph-bg-deep) 100%);
pointer-events: none;
}
.ph-post-hero:not(.ph-post-hero--support) .ph-post-hero__inner {
width: fit-content;
max-width: min(
calc(100% - 2 * var(--ph-container-pad)),
calc((min(100% - 2 * var(--ph-container-pad), var(--ph-w-content)) - var(--ph-space-2xl)) * 0.62)
);
margin-inline-start: max(var(--ph-container-pad), calc((100% - var(--ph-w-content)) / 2));
margin-inline-end: auto;
margin-block-end: var(--ph-space-3xl);
padding: var(--ph-space-lg) var(--ph-space-xl);
border-radius: var(--ph-radius-md);
background: rgba(10, 12, 15, 0.72);
}
.ph-post-hero:not(.ph-post-hero--support) .ph-post-hero__title {
max-width: none;
text-wrap: pretty;
}
.ph-post-hero:not(.ph-post-hero--support) .ph-crumb__item a,
.ph-post-hero:not(.ph-post-hero--support) .ph-crumb__item + .ph-crumb__item::before,
.ph-post-hero:not(.ph-post-hero--support) .ph-post-hero__date {
color: var(--ph-text-heading);
}
.ph-post-hero:not(.ph-post-hero--support) .ph-crumb__item a:hover { color: var(--ph-brand-gold); }
@media (max-width: 921px) {
.ph-post-hero:not(.ph-post-hero--support) .ph-post-hero__inner {
max-width: calc(100% - 2 * var(--ph-container-pad));
}
}
.ph-post-hero__inner {
position: relative;
z-index: 1;
width: 100%;
max-width: calc(var(--ph-w-content) + 2 * var(--ph-container-pad));
margin-inline: auto;
padding: var(--ph-space-3xl) var(--ph-container-pad);
display: flex;
flex-direction: column;
gap: var(--ph-space-2xs);
}
.ph-post-hero__inner > * { margin: 0; }
.ph-post-hero__from {
color: var(--ph-slate-300);
}
.ph-post-hero__label { color: var(--ph-text-muted); }
.ph-post-hero__game { color: var(--ph-text-body); }
.ph-ask-section { margin-block-start: var(--ph-space-4xl); }
.ph-ask-section .ph-ask {
max-width: var(--ph-w-prose);
margin-block: 0;
}
.ph-ask-section.ph-ask-section.ph-ask-section :is(p, h2) { margin-block-end: 0; }
.ph-ask-section.ph-ask-section .ph-section-head {
margin-block-end: var(--ph-space-lg);
}
.ph-ask__chips {
display: flex;
flex-wrap: wrap;
gap: var(--ph-space-2xs);
margin-block-start: var(--ph-space-2xs);
}
.ph-ask__chip {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 0 var(--ph-space-sm);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-pill, 999px);
background: var(--ph-bg-raised);
color: var(--ph-text-muted);
font-size: var(--ph-size-2xs);
line-height: 1.3;
text-decoration: none;
}
.ph-ask__chip:hover {
border-color: var(--ph-border-gold);
color: var(--ph-brand-gold);
}
.ph-crumb { margin: 0; }
.ph-crumb__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2px var(--ph-space-2xs);
margin: 0;
padding: 0;
list-style: none;
font-size: var(--ph-size-2xs);
letter-spacing: var(--ph-tracking-label);
}
.ph-crumb__item { margin: 0; display: flex; align-items: center; gap: var(--ph-space-2xs); }
.ph-crumb__item + .ph-crumb__item::before {
content: "›";
color: var(--ph-text-faint);
}
.ph-crumb__item a {
color: var(--ph-text-muted);
text-decoration: none;
text-transform: uppercase;
}
.ph-crumb__item a:hover { color: var(--ph-brand-gold); }
.ph-code-nowrap { white-space: nowrap; }
.ph-post-hero__title {
font-family: var(--ph-font-heading);
font-size: var(--ph-size-h1);
font-weight: var(--ph-weight-heading);
line-height: var(--ph-leading-heading);
color: var(--ph-text-heading);
text-wrap: balance;
max-width: calc((100% - var(--ph-space-2xl)) * 0.62);
}
@media (max-width: 921px) {
.ph-post-hero__title { max-width: none; }
}
.ph-post-hero__meta.ph-post-hero__meta > * {
font-size: var(--ph-size-2xs);
}
.ph-post-hero__meta .ph-code {
padding: 0;
background: none;
border-radius: 0;
font-family: var(--ph-font-tactical);
letter-spacing: var(--ph-tracking-tactical);
text-transform: uppercase;
color: var(--ph-text-muted);
}
.ph-post-hero__meta.ph-post-hero__meta {
margin-block: var(--ph-space-sm) var(--ph-space-2xs);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ph-space-xs) var(--ph-space-sm);
}
.ph-hero-chip {
display: inline-flex;
align-items: center;
padding: 3px var(--ph-space-xs);
border-radius: var(--ph-radius-xs);
background: var(--ph-bg-sunken);
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-3xs);
letter-spacing: var(--ph-tracking-tactical);
text-transform: uppercase;
color: var(--ph-text-body);
}
.ph-hero-chip--link {
text-decoration: none;
transition: color var(--ph-transition), background var(--ph-transition);
}
.ph-hero-chip--link:hover,
.ph-hero-chip--link:focus-visible {
background: var(--ph-bg-raised);
color: var(--ph-brand-gold);
}
.ph-post-hero__date {
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-2xs);
letter-spacing: var(--ph-tracking-tactical);
text-transform: uppercase;
color: var(--ph-text-muted);
}
.ph-post-side {
display: flex;
flex-direction: column;
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-lg);
background: var(--ph-bg-surface);
overflow: hidden;
}
.ph-post-side__head {
display: grid;
grid-template-columns: 128px minmax(0, 1fr) auto;
gap: var(--ph-space-md);
align-items: start;
padding: var(--ph-space-md);
border-block-end: 1px solid var(--ph-border);
}
.ph-post-side__id { min-width: 0; }
.ph-post-side__id .ph-fact__label { margin: var(--ph-space-2xs) 0 0; }
.ph-post-side__id .ph-fact__value { margin: 0; }
.ph-post-side__in {
display: flex;
flex-direction: column;
gap: var(--ph-space-sm);
padding: var(--ph-space-lg);
}
.ph-post-side__head .ph-post-side__art {
border-radius: var(--ph-radius-sm);
overflow: hidden;
}
.ph-post-side__head:last-child { border-block-end: 0; }
.ph-post-side__head .ph-post-side__cta {
width: auto;
min-height: 0;
padding: var(--ph-space-2xs) var(--ph-space-md);
font-size: var(--ph-size-3xs);
white-space: nowrap;
}
@media (max-width: 545px) {
.ph-post-side__head { grid-template-columns: 128px minmax(0, 1fr); }
.ph-post-side__head .ph-post-side__cta {
grid-column: 1 / -1;
width: 100%;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
}
.ph-toc {
padding: var(--ph-space-lg);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-lg);
background: var(--ph-bg-surface);
}
.ph-toc__head {
margin: 0 0 var(--ph-space-sm);
font-family: var(--ph-font-tactical);
font-weight: var(--ph-weight-normal);
font-size: var(--ph-size-xs);
letter-spacing: var(--ph-tracking-tactical);
color: var(--ph-text-muted);
}
.ph-toc__list {
counter-reset: ph-toc;
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--ph-space-xs);
}
.ph-toc__item {
counter-increment: ph-toc;
display: flex;
gap: var(--ph-space-xs);
margin: 0;
}
.ph-toc__item::before {
content: counter(ph-toc);
flex: none;
padding-block-start: 3px;
font-family: var(--ph-font-mono);
font-size: var(--ph-size-2xs);
color: var(--ph-text-faint);
}
.ph-toc__item a {
color: var(--ph-text-body);
font-size: var(--ph-size-sm);
line-height: var(--ph-leading-tight, 1.4);
text-decoration: none;
}
.ph-toc__item a:hover { color: var(--ph-text-faint); }
.ph-post-cols > .ph-side {
display: flex;
flex-direction: column;
gap: var(--ph-space-md);
position: sticky;
top: calc(var(--ph-header-sticky-h) + var(--ph-space-lg));
align-self: start;
}
.ph-post-cols > .ph-side.ph-side > * { margin-block: 0; }
@media (max-width: 921px) {
.ph-post-cols > .ph-side { position: static; }
}
.ph-post-side__art {
display: block;
overflow: hidden;
border-radius: var(--ph-radius-md);
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, var(--ph-slate-800), var(--ph-slate-900));
}
.ph-post-side__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-post-side__title {
margin: 0;
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-h4);
font-weight: var(--ph-weight-normal);
line-height: 1.15;
text-transform: uppercase;
letter-spacing: var(--ph-tracking-label);
}
.ph-post-side__title a { color: var(--ph-text-heading); text-decoration: none; }
.ph-post-side__title a:hover { color: var(--ph-brand-gold); }
.ph-post-side--support .ph-post-side__title {
margin-block-end: var(--ph-space-md);
}
.ph-post-side--support .ph-fact__value {
display: flex;
align-items: center;
gap: var(--ph-space-2xs);
justify-content: flex-end;
flex-wrap: wrap;
}
.ph-code {
font-family: var(--ph-font-mono);
font-size: var(--ph-size-2xs);
color: var(--ph-text-heading);
background: var(--ph-bg-sunken);
padding: 2px var(--ph-space-2xs);
border-radius: var(--ph-radius-xs);
}
.ph-post-side__cta { text-align: center; }
@media (max-width: 921px) {
.ph-post-side { position: static; }
}
.ph-post-more {
container-type: inline-size;
margin-block-start: var(--ph-space-4xl);
padding-block-start: var(--ph-space-2xl);
border-block-start: 1px solid var(--ph-border);
}
@media (min-width: 922px) {
.ph-post-more .ph-support-list {
max-width: calc((100% - var(--ph-space-2xl)) * 0.62);
}
}
.ph-post-more__head {
margin: 0 0 var(--ph-space-lg);
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-h4);
font-weight: var(--ph-weight-normal);
letter-spacing: var(--ph-tracking-tactical);
text-transform: uppercase;
color: var(--ph-text-heading);
}
.ph-helpdesk__search {
max-width: 720px;
margin-inline: auto;
margin-block-end: var(--ph-gap-section);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--ph-space-sm);
}
.ph-helpdesk__search > * { margin: 0; }
.ph-helpdesk__search {
position: relative;
isolation: isolate;
}
.ph-helpdesk__search::before {
content: "";
position: absolute;
z-index: -1;
inset-block-start: -20%;
inset-inline-start: 50%;
translate: -50% 0;
width: min(760px, 100%);
aspect-ratio: 2 / 1;
background: radial-gradient(closest-side, var(--ph-tint-gold), transparent);
pointer-events: none;
}
.ph-helpdesk__head {
font-family: var(--ph-font-heading);
font-size: var(--ph-size-display);
font-weight: var(--ph-weight-heading);
line-height: var(--ph-leading-display, 1.16);
color: var(--ph-text-heading);
text-wrap: balance;
}
.ph-helpdesk__form {
display: flex;
gap: var(--ph-space-xs);
width: 100%;
margin-block-start: var(--ph-space-2xs);
}
.ph-helpdesk__form input[type="search"] {
flex: 1 1 auto;
min-width: 0;
min-height: 44px;
padding: var(--ph-space-xs) var(--ph-space-md);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-md);
background: var(--ph-bg-surface);
color: var(--ph-text-body);
font-family: inherit;
font-size: var(--ph-size-base);
}
.ph-helpdesk__search .ph-helpdesk__form :is(input[type="search"], button) {
min-height: 52px;
}
.ph-helpdesk__form input[type="search"]::placeholder { color: var(--ph-text-muted); }
.ph-helpdesk__form button {
flex: 0 0 auto;
min-height: 44px;
padding-inline: var(--ph-space-lg);
border: 0;
border-radius: var(--ph-radius-md);
background: var(--ph-brand-gold);
color: var(--ph-slate-950);
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-sm);
letter-spacing: var(--ph-tracking-tactical);
text-transform: uppercase;
cursor: pointer;
}
.ph-helpdesk__form button:hover { filter: brightness(1.1); }
.ph-help-chips { justify-content: center; align-items: center; }
.ph-help-chip {
padding: 2px var(--ph-space-xs);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-sm);
background: var(--ph-bg-surface);
color: var(--ph-text-muted);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: var(--ph-size-2xs);
text-decoration: none;
}
.ph-help-chip:hover { color: var(--ph-brand-gold); border-color: var(--ph-brand-gold); }
.site-content:has(.ph-helpdesk) {
background:
linear-gradient(
145deg,
rgba(37, 99, 235, 0.10) 0%,
var(--ph-bg-sunken) 38%,
var(--ph-bg-deep) 78%
);
}
.ph-helpdesk { padding-block: var(--ph-gap-block); }
.ph-helpdesk .ph-helpdesk__search { margin-block-end: var(--ph-gap-block); }
:has(> .ph-helpdesk) { container-type: inline-size; }
.ph-helpdesk__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--ph-space-md);
max-width: 1080px;
margin-inline: auto;
}
@container (min-width: 620px) {
.ph-helpdesk__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 960px) {
.ph-helpdesk__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ph-helpdesk__panel {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
gap: var(--ph-space-2xs);
min-height: 150px;
padding: var(--ph-space-lg);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-md);
background: var(--ph-bg-surface-solid);
transition: border-color var(--ph-transition), background var(--ph-transition);
}
.ph-helpdesk__panel:hover,
.ph-helpdesk__panel:focus-within {
border-color: var(--ph-border-gold);
background: var(--ph-bg-raised);
}
.ph-helpdesk__panel.ph-helpdesk__panel > * { margin-block: 0; }
.ph-helpdesk__panel:has(.ph-helpdesk__icon--progression) {
border-color: rgba(37, 99, 235, 0.62);
background:
linear-gradient(
150deg,
rgba(37, 99, 235, 0.38) 0%,
rgba(37, 99, 235, 0.14) 55%,
rgba(37, 99, 235, 0) 100%
),
var(--ph-bg-surface-solid);
}
.ph-helpdesk__panel:has(.ph-helpdesk__icon--progression):hover,
.ph-helpdesk__panel:has(.ph-helpdesk__icon--progression):focus-within {
background:
linear-gradient(
150deg,
rgba(37, 99, 235, 0.46) 0%,
rgba(37, 99, 235, 0.18) 55%,
rgba(37, 99, 235, 0) 100%
),
var(--ph-bg-raised);
}
.ph-helpdesk__cat {
margin: 0;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--ph-space-2xs);
}
.ph-helpdesk__cat a { color: inherit; text-decoration: none; }
.ph-helpdesk__cat a::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
z-index: 2;
}
.ph-helpdesk__word {
font-family: var(--ph-font-body);
font-size: var(--ph-size-h2); 
font-weight: var(--ph-weight-heading);
line-height: 1.3;
color: var(--ph-text-heading);
}
.ph-helpdesk__kind {
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-2xs);
font-weight: var(--ph-weight-normal);
letter-spacing: var(--ph-tracking-tactical);
text-transform: uppercase;
color: var(--ph-text-faint);
}
.ph-helpdesk__tag,
.ph-term-head__tag {
font-size: var(--ph-size-sm);
line-height: 1.45;
color: var(--ph-text-body);
}
.ph-helpdesk__desc,
.ph-term-head__desc {
margin-block-start: var(--ph-space-3xs);
font-size: var(--ph-size-xs);
line-height: 1.6;
color: var(--ph-text-muted);
}
.ph-helpdesk__panel::after {
content: "";
align-self: flex-end;
margin-block-start: auto;
width: 18px;
height: 18px;
background: var(--ph-text-faint);
transition: background var(--ph-transition), translate var(--ph-transition);
-webkit-mask: var(--ph-arrow-mask) center / contain no-repeat;
mask: var(--ph-arrow-mask) center / contain no-repeat;
}
.ph-helpdesk__panel:hover::after,
.ph-helpdesk__panel:focus-within::after {
background: var(--ph-brand-gold);
translate: 3px 0;
}
.ph-helpdesk__icon {
width: 26px;
height: 26px;
background: var(--ph-text-muted);
transition: background var(--ph-transition);
}
.ph-helpdesk__panel:hover .ph-helpdesk__icon,
.ph-helpdesk__panel:focus-within .ph-helpdesk__icon { background: var(--ph-brand-gold); }
.ph-helpdesk__icon--crash-freeze {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3Cpath d='m9 8 2.5 3L9 13l4 0'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3Cpath d='m9 8 2.5 3L9 13l4 0'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ph-helpdesk__icon--performance-fps {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6v12h18'/%3E%3Cpath d='m6 11 3.5-3 3 4L17 7'/%3E%3Cpath d='m6 16 4 2 3-3 4 2'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6v12h18'/%3E%3Cpath d='m6 11 3.5-3 3 4L17 7'/%3E%3Cpath d='m6 16 4 2 3-3 4 2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ph-helpdesk__icon--connection {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5a9 9 0 0 1 5-2.4M19 12.5a9 9 0 0 0-5-2.4'/%3E%3Cpath d='M1.5 9a14 14 0 0 1 7-3.4M22.5 9a14 14 0 0 0-7-3.4'/%3E%3Ccircle cx='12' cy='18' r='1.2'/%3E%3Cpath d='m3 3 18 18'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5a9 9 0 0 1 5-2.4M19 12.5a9 9 0 0 0-5-2.4'/%3E%3Cpath d='M1.5 9a14 14 0 0 1 7-3.4M22.5 9a14 14 0 0 0-7-3.4'/%3E%3Ccircle cx='12' cy='18' r='1.2'/%3E%3Cpath d='m3 3 18 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ph-helpdesk__icon--input-hardware {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='11' rx='4'/%3E%3Cpath d='M7 11v3M5.5 12.5h3M16 11.5h.01M18 14h.01'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='11' rx='4'/%3E%3Cpath d='M7 11v3M5.5 12.5h3M16 11.5h.01M18 14h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ph-helpdesk__icon--install-patch {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v10m0 0 3.5-3.5M12 13 8.5 9.5'/%3E%3Cpath d='M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v10m0 0 3.5-3.5M12 13 8.5 9.5'/%3E%3Cpath d='M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ph-helpdesk__icon--wont-launch {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v8'/%3E%3Cpath d='M6.3 6.7a8 8 0 1 0 11.4 0'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v8'/%3E%3Cpath d='M6.3 6.7a8 8 0 1 0 11.4 0'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ph-helpdesk__icon--error-code {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 2.6 17.5a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 2.6 17.5a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ph-helpdesk__icon--progression {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 5h11l-2 3.5L16 12H5z'/%3E%3Ccircle cx='5' cy='3' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 5h11l-2 3.5L16 12H5z'/%3E%3Ccircle cx='5' cy='3' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ph-hubblock {
max-width: 1080px;
margin: var(--ph-gap-section) auto 0;
}
.ph-hubblock__head { margin-block-end: var(--ph-space-lg); }
.ph-hubblock__title {
margin: var(--ph-space-2xs) 0 0;
font-family: var(--ph-font-heading);
font-size: var(--ph-size-h2);
font-weight: var(--ph-weight-heading);
line-height: var(--ph-leading-heading);
color: var(--ph-text-heading);
}
.ph-brief-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--ph-space-md);
}
@container (min-width: 700px) {
.ph-brief-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ph-brief {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
gap: var(--ph-space-2xs);
margin: 0;
padding: var(--ph-space-md) var(--ph-space-lg);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-md);
background: var(--ph-bg-surface-solid);
transition: border-color var(--ph-transition);
}
.ph-brief:hover { border-color: var(--ph-border-gold); }
.ph-brief__title {
margin: 0;
font-size: var(--ph-size-sm);
font-weight: var(--ph-weight-normal);
line-height: var(--ph-leading-tight, 1.4);
}
.ph-brief__title a { color: var(--ph-text-heading); text-decoration: none; }
.ph-brief:hover .ph-brief__title a { color: var(--ph-brand-gold); }
.ph-brief__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ph-brief__meta {
margin: auto 0 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--ph-space-xs);
}
.ph-help-item__title {
margin: 0;
font-size: var(--ph-size-sm);
font-weight: var(--ph-weight-normal);
line-height: 1.35;
}
.ph-help-fix {
padding: 2px var(--ph-space-2xs);
border-radius: var(--ph-radius-xs);
background: var(--ph-axis-help-soft);
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-3xs);
font-weight: 400;
line-height: 1.4;
letter-spacing: var(--ph-tracking-tactical);
font-variant-numeric: tabular-nums;
text-transform: uppercase;
color: var(--ph-text-muted);
}
.ph-help-cat {
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-3xs);
letter-spacing: var(--ph-tracking-tactical);
text-transform: uppercase;
color: var(--ph-text-heading);
}
.ph-help-sev {
display: inline-flex;
align-items: center;
gap: var(--ph-space-2xs);
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-3xs);
letter-spacing: var(--ph-tracking-tactical);
text-transform: uppercase;
color: var(--ph-text-muted);
}
.ph-help-sev::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
flex: 0 0 auto;
background: var(--ph-text-faint);
}
.ph-help-sev--critical::before { background: var(--ph-status-danger); }
.ph-help-sev--major::before { background: var(--ph-status-warn); }
.ph-help-sev--minor::before { background: var(--ph-text-muted); }
.ph-help-item__title a { color: var(--ph-text-heading); text-decoration: none; }
.ph-help-list > li:hover .ph-help-item__title a { color: var(--ph-brand-gold); }
.ph-helpdesk__all {
margin-block-start: auto;
padding-block-start: var(--ph-space-sm);
border-block-start: 1px solid var(--ph-border);
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-2xs);
letter-spacing: var(--ph-tracking-tactical);
text-transform: uppercase;
color: var(--ph-text-muted);
text-decoration: none;
transition: color var(--ph-transition);
}
.ph-helpdesk__all::after { content: " \203A"; }
.ph-helpdesk__all:hover { color: var(--ph-brand-gold); }
.ph-helpdesk__all::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
}
.ph-search {
max-width: 736px;
margin-inline: auto;
padding-block-start: var(--ph-gap-block);
}
.ph-search__count {
margin: 0 calc(var(--ph-space-md) * -1) var(--ph-space-2xl);
padding-inline: var(--ph-space-md);
padding-block-end: var(--ph-space-sm);
border-block-end: 1px solid var(--ph-border);
font-size: var(--ph-size-xs);
color: var(--ph-text-muted);
}
.ph-search__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.ph-search__list > li { margin-block: 0; }
.ph-sr {
position: relative;
isolation: isolate;
padding-block: var(--ph-space-lg);
padding-inline: var(--ph-space-md);
margin-inline: calc(var(--ph-space-md) * -1);
border-block-start: 1px solid var(--ph-border-subtle);
transition: background var(--ph-transition);
}
.ph-sr:first-child {
padding-block-start: 0;
border-block-start: 0;
}
.ph-sr:hover { background: var(--ph-slate-700); }
.ph-sr > * { margin-block: 0; }
.ph-sr__path {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ph-space-xs);
font-size: var(--ph-size-2xs);
color: var(--ph-text-muted);
overflow-wrap: anywhere;
}
.ph-sr__path { margin-block-end: var(--ph-space-2xs); }
.ph-search .ph-sr__path { text-transform: uppercase; }
.ph-support-list .ph-sr__path {
align-items: center;
gap: var(--ph-space-2xs) var(--ph-space-sm);
font-size: var(--ph-size-2xs);
}
.ph-sr__kind {
padding: 1px var(--ph-space-2xs);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-xs);
font-family: var(--ph-font-tactical);
letter-spacing: var(--ph-tracking-tactical);
text-transform: uppercase;
color: var(--ph-text-muted);
}
.ph-sr__title {
margin-block-start: 2px;
font-family: var(--ph-font-body);
font-size: var(--ph-size-sm);
font-weight: var(--ph-weight-normal);
line-height: 1.35;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
@media (min-width: 922px) {
.ph-sr__title { max-width: 62%; }
}
.ph-sr--more {
background: var(--ph-bg-surface-solid);
border-radius: var(--ph-radius-md);
padding: var(--ph-space-lg) var(--ph-space-xl);
margin-inline: 0;
border-block-start: 0;
}
.ph-sr--more:first-child { padding-block-start: var(--ph-space-lg); }
.ph-sr--more:hover { background: var(--ph-bg-surface-solid); }
.ph-sr__title a { color: var(--ph-text-body); text-decoration: none; }
.ph-sr:hover .ph-sr__title a { color: var(--ph-brand-gold); }
.ph-sr__title a::after {
content: "";
position: absolute;
inset: 0;
}
:is(.ph-hub-layout--support, .ph-post-more) .ph-support-list { gap: var(--ph-space-md); }
:is(.ph-hub-layout--support, .ph-post-more) .ph-sr,
:is(.ph-hub-layout--support, .ph-post-more) .ph-sr:first-child {
padding: var(--ph-space-lg) var(--ph-space-xl);
margin-inline: 0;
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-md);
}
:is(.ph-hub-layout--support, .ph-post-more) .ph-sr:hover { border-color: var(--ph-border-strong); }
:is(.ph-hub-layout--support, .ph-post-more) .ph-sr__title { max-width: none; }
:is(.ph-hub-layout--support, .ph-post-more) .ph-sr__title a::before {
content: "อ่านวิธีแก้ · ";
color: var(--ph-brand-gold);
}
.ph-sr__answer {
margin-block-end: var(--ph-space-xs);
font-size: var(--ph-size-md);
line-height: 1.6;
color: var(--ph-text-heading);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.ph-search mark {
background: none;
color: var(--ph-text-heading);
font-weight: var(--ph-weight-semi);
}
.ph-search__empty {
padding: var(--ph-space-xl);
border: 1px dashed var(--ph-border);
border-radius: var(--ph-radius-md);
color: var(--ph-text-body);
}
.ph-search__empty > :first-child { margin-block-start: 0; }
.ph-search__empty ul { color: var(--ph-text-muted); font-size: var(--ph-size-sm); }
.ph-search__pager {
display: flex;
flex-wrap: wrap;
gap: var(--ph-space-xs);
margin-block-start: var(--ph-space-3xl);
padding-block-start: var(--ph-space-lg);
border-block-start: 1px solid var(--ph-border);
}
.ph-search__pager :is(a, span) {
min-width: 40px;
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
padding-inline: var(--ph-space-xs);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-md);
color: var(--ph-text-muted);
text-decoration: none;
font-size: var(--ph-size-sm);
}
.ph-search__pager a:hover { color: var(--ph-brand-gold); border-color: var(--ph-border-strong); }
.ph-search__pager .current {
color: var(--ph-slate-950);
background: var(--ph-brand-gold);
border-color: var(--ph-brand-gold);
}
.ph-sr__q {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--ph-space-2xs);
margin-block-end: var(--ph-space-2xs);
font-size: var(--ph-size-2xs);
color: var(--ph-text-muted);
}
.ph-sr__q strong {
font-size: var(--ph-size-h3);
line-height: 1.3;
color: var(--ph-status-success);
font-weight: var(--ph-weight-semi);
}
.ph-ask {
margin-block: 0 var(--ph-space-3xl);
display: flex;
flex-direction: column;
gap: var(--ph-space-xs);
}
.ph-ask__label {
margin: 0;
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-2xs);
letter-spacing: var(--ph-tracking-tactical);
text-transform: uppercase;
color: var(--ph-text-muted);
}
.ph-ask__form { margin: 0; max-width: 640px; }
.ph-post-body p a,
.ph-post-body li a,
.ph-answer-panel p a,
.page .entry-content > p a,
.page .entry-content > ul:not([class*="ph-"]) li a,
.page .entry-content > ol:not([class*="ph-"]) li a {
text-decoration: underline;
text-underline-offset: 2px;
}
.ast-builder-menu-1 .menu-item.current-menu-item > .menu-link,
.ast-builder-menu-1 .menu-item.current_page_item > .menu-link,
.ast-builder-menu-1 .current-menu-ancestor > .menu-link {
box-shadow: inset 0 -2px 0 var(--ph-brand-gold);
}
.ph-post-side__buy { width: 100%; }
.ph-post-side__aff-note {
margin: 0;
font-size: var(--ph-size-3xs);
line-height: 1.4;
color: var(--ph-text-muted);
}
.ph-post-side__cta { width: 100%; }
.ph-pillars.ph-pillars {
list-style: none;
padding: 0;
max-width: 780px;
margin-inline: auto;
margin-block: var(--ph-gap-block) var(--ph-gap-section);
}
.ph-pillars {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ph-space-md);
}
.ph-pillars.ph-pillars > * { margin-block: 0; }
.ph-pillar {
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
flex-direction: column;
gap: var(--ph-space-2xs);
aspect-ratio: 16 / 9;
padding: var(--ph-space-lg);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-md);
background-color: var(--ph-bg-deep);
background-size: cover;
background-position: center;
}
.ph-pillar::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(90deg,
rgba(10, 12, 15, 0.88) 0%,
rgba(10, 12, 15, 0.62) 45%,
rgba(10, 12, 15, 0.18) 100%);
transition: background var(--ph-transition);
}
.ph-pillar:nth-child(1),
.ph-pillar:nth-child(2) { justify-content: flex-end; }
.ph-pillar:nth-child(3),
.ph-pillar:nth-child(4) { justify-content: flex-start; }
.ph-pillar:nth-child(1),
.ph-pillar:nth-child(3) {
align-items: flex-end;
text-align: right;
}
.ph-pillar:nth-child(2),
.ph-pillar:nth-child(4) {
align-items: flex-start;
text-align: left;
}
.ph-pillar:nth-child(1)::before,
.ph-pillar:nth-child(3)::before {
background: linear-gradient(270deg,
rgba(10, 12, 15, 0.88) 0%,
rgba(10, 12, 15, 0.62) 45%,
rgba(10, 12, 15, 0.18) 100%);
}
.ph-pillar.ph-pillar > * { margin-block: 0; }
.ph-pillar::after {
content: "";
margin-block-start: var(--ph-space-2xs);
width: 38px;
height: 38px;
border: 1px solid var(--ph-border-strong);
border-radius: 50%;
background-color: var(--ph-text-heading);
-webkit-mask: var(--ph-arrow-mask) center / 18px no-repeat;
mask: var(--ph-arrow-mask) center / 18px no-repeat;
transition: background-color var(--ph-transition), border-color var(--ph-transition),
transform var(--ph-transition);
}
.ph-pillar:nth-child(1)::after,
.ph-pillar:nth-child(2)::after {
order: -3;
margin-block: 0 var(--ph-space-2xs);
}
.ph-pillar:nth-child(1) .ph-pillar__line,
.ph-pillar:nth-child(2) .ph-pillar__line { order: -2; }
.ph-pillar:nth-child(1) .ph-pillar__word,
.ph-pillar:nth-child(2) .ph-pillar__word { order: -1; }
.ph-pillar__word {
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-featured);
font-weight: var(--ph-weight-normal);
line-height: 1;
letter-spacing: var(--ph-tracking-label);
color: var(--ph-text-heading);
text-shadow: 0 2px 12px rgba(10, 12, 15, 0.65);
}
.ph-pillar__word a {
color: inherit;
text-decoration: none;
}
.ph-pillar__word a::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
}
.ph-pillar__line {
font-size: var(--ph-size-sm);
line-height: 1.45;
color: var(--ph-text-body);
text-shadow: 0 1px 8px rgba(10, 12, 15, 0.75);
}
.ph-pillar:nth-child(-n + 2) .ph-pillar__word { color: var(--ph-brand-gold); }
.ph-pillar:hover::before,
.ph-pillar:focus-within::before {
background: linear-gradient(90deg,
rgba(10, 12, 15, 0.82) 0%,
rgba(10, 12, 15, 0.5) 45%,
rgba(10, 12, 15, 0.1) 100%);
}
.ph-pillar:nth-child(1):hover::before,
.ph-pillar:nth-child(3):hover::before,
.ph-pillar:nth-child(1):focus-within::before,
.ph-pillar:nth-child(3):focus-within::before {
background: linear-gradient(270deg,
rgba(10, 12, 15, 0.82) 0%,
rgba(10, 12, 15, 0.5) 45%,
rgba(10, 12, 15, 0.1) 100%);
}
.ph-pillar:hover .ph-pillar__word,
.ph-pillar:focus-within .ph-pillar__word { color: var(--ph-brand-gold); }
.ph-pillar:hover::after,
.ph-pillar:focus-within::after {
background-color: var(--ph-brand-gold);
border-color: var(--ph-brand-gold);
}
@media (max-width: 544px) {
.ph-pillars { gap: var(--ph-space-sm); }
.ph-pillar {
padding: var(--ph-space-sm);
aspect-ratio: 4 / 5;
}
.ph-pillar__word { font-size: var(--ph-size-h2); }
.ph-pillar__line { font-size: var(--ph-size-xs); }
.ph-pillar::after { width: 32px; height: 32px; }
.ph-pillar:nth-child(2)::before,
.ph-pillar:nth-child(4)::before {
background: linear-gradient(90deg,
rgba(10, 12, 15, 0.9) 0%,
rgba(10, 12, 15, 0.7) 55%,
rgba(10, 12, 15, 0.35) 100%);
}
.ph-pillar:nth-child(1)::before,
.ph-pillar:nth-child(3)::before {
background: linear-gradient(270deg,
rgba(10, 12, 15, 0.9) 0%,
rgba(10, 12, 15, 0.7) 55%,
rgba(10, 12, 15, 0.35) 100%);
}
}
.home .site-content { position: relative; }
.ph-home-bg.ph-home-bg { max-width: none; }
.ph-home-bg {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
z-index: -1;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
}
.ph-home-bg__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
display: block;
}
.ph-home-bg::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg,
rgba(10, 12, 15, 0.78) 0%,
rgba(10, 12, 15, 0.74) 22%,
rgba(10, 12, 15, 0.28) 34%,
rgba(10, 12, 15, 0.24) 72%,
var(--ph-bg-canvas) 100%);
}
.ph-home-intro.ph-home-intro {
max-width: 780px;
margin-inline: auto;
margin-block: var(--ph-gap-section) 0;
}
.home .ph-home-intro.ph-home-intro {
margin-block-start: var(--ph-space-5xl);
padding-block: 0;
}
.home #content.site-content {
min-height: 100vh;
min-height: 100svh;
}
.home .ph-ask {
max-width: 780px;
margin-inline: auto;
margin-block-end: var(--ph-space-4xl);
}
.home .ph-ask .ph-ask__form { max-width: none; }
.home .ph-ask__label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
@media (min-width: 922px) {
.home .ph-ask { max-width: 678px; }
}
.ph-home-intro h1 {
margin: 0;
text-align: center;
font-size: clamp(2rem, 4.6vw, 3.9rem);
line-height: 1.5;
color: var(--ph-text-heading);
text-wrap: balance;
text-shadow: 0 2px 14px rgba(10, 12, 15, 0.7);
}
@keyframes ph-rise-in {
from {
opacity: 0;
transform: translateY(18px);
}
}
.home .ph-home-intro h1 {
animation: ph-rise-in 560ms var(--ph-ease-out) backwards;
}
.ph-pillar {
animation: ph-rise-in 440ms var(--ph-ease-out) backwards;
transition: transform var(--ph-transition);
}
.ph-pillar:nth-child(1) { animation-delay: 160ms; }
.ph-pillar:nth-child(2) { animation-delay: 290ms; }
.ph-pillar:nth-child(3) { animation-delay: 420ms; }
.ph-pillar:nth-child(4) { animation-delay: 550ms; }
.home .ph-ask { animation: ph-rise-in 440ms var(--ph-ease-out) 680ms backwards; }
.ph-helpdesk__search { animation: ph-rise-in 440ms var(--ph-ease-out) backwards; }
.ph-helpdesk__panel { animation: ph-rise-in 340ms var(--ph-ease-out) backwards; }
.ph-helpdesk__panel:nth-child(1) { animation-delay: 160ms; }
.ph-helpdesk__panel:nth-child(2) { animation-delay: 260ms; }
.ph-helpdesk__panel:nth-child(3) { animation-delay: 360ms; }
.ph-helpdesk__panel:nth-child(4) { animation-delay: 460ms; }
.ph-helpdesk__panel:nth-child(5) { animation-delay: 560ms; }
.ph-helpdesk__panel:nth-child(6) { animation-delay: 660ms; }
.ph-pillar:hover,
.ph-pillar:focus-within { transform: scale(1.012); }
.ph-pillar:hover::after,
.ph-pillar:focus-within::after { transform: translateX(3px); }
.ph-pillar:has(.ph-pillar__word a[href$="/help/"]) {
--ph-bolt: 8px;
--ph-bolt-inset: 9px;
transform-origin: calc(100% - var(--ph-bolt-inset) - var(--ph-bolt) / 2) calc(var(--ph-bolt-inset) + var(--ph-bolt) / 2);
transform: rotate(-1.8deg);
transition: transform var(--ph-transition), scale var(--ph-transition);
clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%, 10% 94%, 5.5% 97%, 0 86%);
}
.ph-pillar:has(.ph-pillar__word a[href$="/help/"]):hover,
.ph-pillar:has(.ph-pillar__word a[href$="/help/"]):focus-within { transform: rotate(-1.8deg); scale: 1.012; }
@keyframes ph-sign-gust {
0% { transform: perspective(900px) rotate(-1.8deg) rotateX(0deg); }
3.2% { transform: perspective(900px) rotate(-1.8deg) rotateX(-22deg); }
6.8% { transform: perspective(900px) rotate(-1.8deg) rotateX(3deg); }
10.4% { transform: perspective(900px) rotate(-1.8deg) rotateX(-13deg); }
13.8% { transform: perspective(900px) rotate(-1.8deg) rotateX(1.5deg); }
17% { transform: perspective(900px) rotate(-1.8deg) rotateX(-5deg); }
20%, 100% { transform: perspective(900px) rotate(-1.8deg) rotateX(0deg); }
}
.ph-pillar:has(.ph-pillar__word a[href$="/help/"]) {
animation-name: ph-rise-in, ph-sign-gust;
animation-duration: 440ms, 9s;
animation-timing-function: var(--ph-ease-out), ease-in-out;
animation-delay: 550ms, 1150ms;
animation-iteration-count: 1, infinite;
animation-fill-mode: backwards, none;
}
.ph-pillar:has(.ph-pillar__word a[href$="/help/"]):hover,
.ph-pillar:has(.ph-pillar__word a[href$="/help/"]):focus-within { animation-play-state: paused; }
.ph-pillar:has(.ph-pillar__word a[href$="/help/"]) .ph-pillar__word::before {
content: "";
position: absolute;
inset: var(--ph-bolt-inset) var(--ph-bolt-inset) auto;
height: var(--ph-bolt);
z-index: 3;
pointer-events: none;
background:
radial-gradient(circle, #b9c0c8 0 26%, #6b737c 38%, #2c3137 56%, transparent 62%) right / var(--ph-bolt) var(--ph-bolt) no-repeat,
radial-gradient(circle, #050608 0 44%, rgba(243, 245, 248, 0.22) 50%, transparent 62%) left / var(--ph-bolt) var(--ph-bolt) no-repeat;
}
@media (max-width: 544px) {
.ph-pillar:has(.ph-pillar__word a[href$="/help/"]) { --ph-bolt: 6px; --ph-bolt-inset: 4px; }
}
@media (prefers-reduced-motion: reduce) {
.ph-pillar:has(.ph-pillar__word a[href$="/help/"]) { animation: none; }
.ph-pillar:has(.ph-pillar__word a[href$="/help/"]):hover,
.ph-pillar:has(.ph-pillar__word a[href$="/help/"]):focus-within { transform: rotate(-1.8deg); scale: none; }
}
.ph-hub-hero__inner > *:not(.ph-hub-stats),
.ph-arc-hero__text > *,
.ph-post-hero__inner > *,
.ph-page-hero__inner > *,
.ph-game-hero .wp-block-cover__inner-container > * {
animation: ph-rise-in 440ms var(--ph-ease-out) backwards;
}
.ph-hub-hero__inner > .ph-hub-hero__title,
.ph-arc-hero__text > .ph-arc-hero__title,
.ph-post-hero__inner > .ph-post-hero__title,
.ph-page-hero__inner > .ph-page-hero__title,
.ph-game-hero .wp-block-cover__inner-container > .wp-block-post-title {
animation-duration: 560ms;
}
.ph-hub-hero__inner > *:nth-child(1),
.ph-arc-hero__text > *:nth-child(1),
.ph-post-hero__inner > *:nth-child(1),
.ph-page-hero__inner > *:nth-child(1),
.ph-game-hero .wp-block-cover__inner-container > *:nth-child(1) { animation-delay: 0ms; }
.ph-hub-hero__inner > *:nth-child(2),
.ph-arc-hero__text > *:nth-child(2),
.ph-post-hero__inner > *:nth-child(2),
.ph-page-hero__inner > *:nth-child(2),
.ph-game-hero .wp-block-cover__inner-container > *:nth-child(2) { animation-delay: 90ms; }
.ph-hub-hero__inner > *:nth-child(n + 3),
.ph-arc-hero__text > *:nth-child(n + 3),
.ph-post-hero__inner > *:nth-child(n + 3),
.ph-page-hero__inner > *:nth-child(n + 3),
.ph-game-hero .wp-block-cover__inner-container > *:nth-child(n + 3) { animation-delay: 220ms; }
.ph-hub-stat {
animation: ph-rise-in 440ms var(--ph-ease-out) backwards;
}
.ph-hub-stat:nth-child(1) { animation-delay: 350ms; }
.ph-hub-stat:nth-child(2) { animation-delay: 480ms; }
.ph-hub-stat:nth-child(3) { animation-delay: 610ms; }
.ph-hub-stat:nth-child(4) { animation-delay: 740ms; }
.ph-hub-stat:nth-child(n + 5) { animation-delay: 870ms; }
.ph-reveal { opacity: 0; }
.ph-reveal.is-in {
opacity: 1;
transition: opacity 900ms var(--ph-ease-out);
}
@media (prefers-reduced-motion: reduce) {
.home .ph-home-intro h1,
.home .ph-ask,
.ph-pillar,
.ph-helpdesk__search,
.ph-helpdesk__panel,
.ph-hub-hero__inner > *,
.ph-arc-hero__text > *,
.ph-post-hero__inner > *,
.ph-page-hero__inner > *,
.ph-game-hero .wp-block-cover__inner-container > *,
.ph-hub-stat { animation: none; }
.ph-reveal { opacity: 1; animation: none; }
.ph-pillar:hover,
.ph-pillar:focus-within,
.ph-pillar:hover::after,
.ph-pillar:focus-within::after { transform: none; }
.ph-helpdesk__panel:hover::after,
.ph-helpdesk__panel:focus-within::after { translate: none; }
}
.ph-page-hero.ph-page-hero {
margin-inline: calc(-50vw + 50%);
margin-block: 0 var(--ph-gap-block);
max-width: none;
padding-block: var(--ph-space-3xl);
padding-inline: var(--ph-space-lg);
border-block-end: 1px solid var(--ph-border);
background: linear-gradient(180deg, var(--ph-bg-sunken), var(--ph-bg-canvas));
}
.ph-page-hero__inner {
max-width: calc(var(--ast-narrow-container-width, 794px) - 40px);
margin-inline: auto;
}
.ph-page-hero__eyebrow.ph-page-hero__eyebrow {
margin-block: 0 var(--ph-space-2xs);
color: var(--ph-text-muted);
}
.ph-page-hero__title.ph-page-hero__title {
margin-block: 0;
font-family: var(--ph-font-heading);
font-size: var(--ph-size-h1);
line-height: var(--ph-leading-heading); 
color: var(--ph-text-heading);
text-wrap: balance;
}
.ph-page-hero__lead.ph-page-hero__lead {
margin-block: var(--ph-space-xs) 0;
max-width: 80ch;
color: var(--ph-text-body);
font-size: var(--ph-size-sm);
}
.entry-content > :is(ul, ol).wp-block-list {
margin-block-start: 0;
padding-inline-start: 40px;
}
.entry-content > :is(p, h2, h3, h4):has(+ ul.wp-block-list),
.entry-content > :is(p, h2, h3, h4):has(+ ol.wp-block-list) {
margin-block-end: 12px;
}
.entry-content .wp-block-list .wp-block-list {
padding-inline-start: var(--ph-space-xl);
}
.ph-doc-meta.ph-doc-meta {
margin-block: 0 var(--ph-gap-block);
padding: var(--ph-space-md) var(--ph-space-lg);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-md);
background: var(--ph-bg-sunken);
}
.ph-doc-meta.ph-doc-meta > * { margin-block: 0; }
.ph-doc-meta__row {
display: flex;
flex-wrap: wrap;
gap: 0 var(--ph-space-sm);
padding-block: 4px;
font-size: var(--ph-size-sm);
line-height: 1.5;
color: var(--ph-text-body);
}
.ph-doc-meta__row + .ph-doc-meta__row {
border-block-start: 1px solid var(--ph-border-subtle);
}
.ph-doc-meta__row strong {
flex: none;
min-width: 20ch;
color: var(--ph-text-muted);
font-weight: var(--ph-weight-medium, 500);
}
@media (max-width: 544px) {
.ph-doc-meta__row strong { min-width: 100%; }
.ph-doc-meta__row { padding-block: 6px; }
}
.ph-creds.ph-creds,
.ph-quad.ph-quad { padding-inline: 0; }
.ph-creds.ph-creds {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--ph-space-sm);
margin-block: var(--ph-gap-block);
}
.ph-creds.ph-creds > * { margin-block: 0; }
.ph-cred {
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
padding: var(--ph-space-md) var(--ph-space-lg);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-md);
background: var(--ph-bg-sunken);
}
.ph-cred.ph-cred > * { margin-block: 0; }
.ph-cred__num {
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-display);
line-height: 1;
color: var(--ph-brand-gold);
}
.ph-cred__label {
font-size: var(--ph-size-xs);
line-height: 1.45;
color: var(--ph-text-muted);
}
@media (max-width: 544px) {
.ph-creds.ph-creds { grid-template-columns: 1fr; }
.ph-cred { flex-direction: row; align-items: baseline; gap: var(--ph-space-sm); }
.ph-cred__num { font-size: var(--ph-size-h1); }
}
.ph-quad.ph-quad {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ph-space-md);
margin-block: var(--ph-gap-block);
}
.ph-quad.ph-quad > * { margin-block: 0; }
.ph-quad__item {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
gap: var(--ph-space-2xs);
padding: var(--ph-space-lg);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-md);
background: var(--ph-bg-sunken);
transition: border-color var(--ph-transition), transform var(--ph-transition);
}
.ph-quad__item.ph-quad__item > * { margin-block: 0; }
.ph-quad__item:hover,
.ph-quad__item:focus-within {
border-color: var(--ph-border-gold);
transform: scale(1.008);
}
.ph-quad__item h3 {
margin-block: 0;
font-family: var(--ph-font-tactical);
font-size: var(--ph-size-featured);
font-weight: 400;
line-height: 1;
letter-spacing: var(--ph-tracking-label);
color: var(--ph-text-heading);
}
.ph-quad__item h3 a { color: inherit; text-decoration: none; }
.ph-quad__item:hover h3 a,
.ph-quad__item:focus-within h3 a { color: var(--ph-brand-gold); }
.ph-quad__item h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ph-quad__lead {
font-size: var(--ph-size-sm);
line-height: 1.5;
color: var(--ph-text-heading);
}
.ph-quad__item p:not(.ph-quad__lead) {
font-size: var(--ph-size-sm);
line-height: 1.6;
color: var(--ph-text-body);
}
@media (max-width: 544px) {
.ph-quad.ph-quad { grid-template-columns: 1fr; }
}
.entry-content blockquote.wp-block-quote.wp-block-quote {
margin-block: var(--ph-gap-block);
padding: var(--ph-space-xl) var(--ph-space-xl) var(--ph-space-xl) var(--ph-space-2xl);
border: 0;
border-left: 3px solid var(--ph-brand-gold);
border-radius: 0 var(--ph-radius-md) var(--ph-radius-md) 0;
background: var(--ph-bg-sunken);
}
.entry-content blockquote.wp-block-quote.wp-block-quote p {
margin-block: 0;
font-family: var(--ph-font-heading);
font-size: var(--ph-size-h3);
line-height: 1.55;
color: var(--ph-text-heading);
}
.ph-support.ph-support {
display: flex;
flex-direction: column;
gap: var(--ph-space-md);
margin-block: var(--ph-gap-block);
padding-inline: 0; 
}
.ph-support.ph-support > * { margin-block: 0; }
.ph-support__item {
padding: var(--ph-space-lg);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-md);
background: var(--ph-bg-sunken);
}
.ph-support__item.ph-support__item > * { margin-block: 0; }
.ph-support__item.ph-support__item > * + * { margin-block-start: var(--ph-space-md); }
.ph-support__item h3 {
margin-block: 0;
font-size: var(--ph-size-h3);
line-height: var(--ph-leading-heading);
color: var(--ph-text-heading);
}
.ph-support__item ul { margin-block: 0; }
.ph-support__item figure.wp-block-image {
display: flex;
justify-content: center;
margin-block: var(--ph-space-md) 0;
}
.ph-support__item figure.wp-block-image img {
border-radius: var(--ph-radius-sm);
background: #FFFFFF;
}
.ph-fixcheck {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--ph-space-sm) var(--ph-space-lg);
margin-block-start: var(--ph-gap-block);
padding: var(--ph-space-lg);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-md);
background: var(--ph-bg-surface-solid);
}
.ph-fixcheck.ph-fixcheck > * {
margin-block: 0;
}
.ph-fixcheck__q {
flex: 1 1 240px;
font-family: var(--ph-font-heading);
font-size: var(--ph-size-md);
font-weight: var(--ph-weight-heading);
line-height: var(--ph-leading-heading);
color: var(--ph-text-heading);
}
.ph-fixcheck__actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
margin-inline-start: auto;
gap: var(--ph-space-sm);
}
.ph-fixcheck__btn {
display: inline-flex;
align-items: center;
gap: var(--ph-space-2xs);
min-height: 44px;
padding: var(--ph-space-2xs) var(--ph-space-lg);
border: 1px solid rgba(37, 99, 235, 0.45);
border-radius: var(--ph-radius-pill);
background: none;
color: var(--ph-text-body);
font-family: var(--ph-font-body);
font-size: var(--ph-size-sm);
font-weight: var(--ph-weight-semi);
line-height: 1;
cursor: pointer;
transition: border-color var(--ph-transition), color var(--ph-transition);
}
.ph-fixcheck__btn.ph-fixcheck__btn,
.ph-fixcheck__btn.ph-fixcheck__btn:hover,
.ph-fixcheck__btn.ph-fixcheck__btn:focus {
background: none;
}
.ph-fixcheck__btn.ph-fixcheck__btn:hover {
border-color: rgba(37, 99, 235, 0.75);
color: var(--ph-text-heading);
}
.ph-fixcheck__btn.ph-fixcheck__btn.is-picked,
.ph-fixcheck__btn.ph-fixcheck__btn.is-picked:hover,
.ph-fixcheck__btn.ph-fixcheck__btn.is-picked:focus {
border-color: rgba(37, 99, 235, 0.9);
background: var(--ph-axis-help-soft);
color: var(--ph-text-heading);
}
.ph-fixcheck__tally {
flex-basis: 100%;
order: 3;
font-size: var(--ph-size-sm);
font-variant-numeric: tabular-nums;
color: var(--ph-text-muted);
}
.ph-fixcheck__tally:empty {
display: none;
}
.ph-fixcheck__msg {
font-size: var(--ph-size-sm);
font-weight: 400;
color: var(--ph-text-muted);
}
.ph-fixcheck__msg:not(:empty)::before {
content: ': ';
}
.ph-sources {
margin-block-start: var(--ph-gap-block);
padding-block-start: var(--ph-space-lg);
border-block-start: 1px solid var(--ph-border);
}
.ph-sources.ph-sources > * {
margin-block: 0;
}
.ph-sources__head.ph-sources__head {
font-family: var(--ph-font-body);
font-size: var(--ph-size-sm);
font-weight: var(--ph-weight-heading);
line-height: var(--ph-leading-heading);
color: var(--ph-text-muted);
margin-block-end: var(--ph-space-sm);
}
.ph-sources__list.ph-sources__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--ph-space-2xs);
}
.ph-sources__item.ph-sources__item {
margin-block: 0;
font-size: var(--ph-size-2xs);
line-height: 1.5;
}
.ph-sources__item a {
color: var(--ph-text-muted);
text-decoration: none;
overflow-wrap: anywhere;
}
.ph-sources__item a:hover,
.ph-sources__item a:focus {
color: var(--ph-text-body);
text-decoration: underline;
}
.ph-sources__note.ph-sources__note {
margin-block: 0;
font-size: var(--ph-size-2xs);
line-height: 1.6;
color: var(--ph-text-muted);
}
.ph-sources__note + .ph-sources__head.ph-sources__head {
margin-block-start: var(--ph-space-lg);
}
.ph-sources__more.ph-sources__more {
margin-block-start: var(--ph-space-2xs);
}
.ph-sources__toggle.ph-sources__toggle {
width: fit-content;
cursor: pointer;
font-size: var(--ph-size-2xs);
line-height: 1.5;
color: var(--ph-text-muted);
}
.ph-sources__toggle:hover,
.ph-sources__toggle:focus-visible {
color: var(--ph-text-body);
text-decoration: underline;
}
.ph-sources__more > .ph-sources__list.ph-sources__list {
margin-block-start: var(--ph-space-2xs);
}
.ph-lightbox[hidden] {
display: none;
}
.ph-lightbox {
position: fixed;
inset: 0;
z-index: 9999; 
display: flex;
align-items: center;
justify-content: center;
padding: var(--ph-space-lg);
}
@keyframes ph-fade-in {
from {
opacity: 0;
}
}
.ph-lightbox__backdrop {
position: absolute;
inset: 0;
background: rgba(10, 12, 15, 0.88);
animation: ph-fade-in 160ms var(--ph-ease-out);
}
.ph-lightbox__dialog {
position: relative;
width: min(100%, 1100px, calc((100vh - 6rem) * 16 / 9));
animation: ph-rise-in 220ms var(--ph-ease-out);
}
.ph-lightbox__frame {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--ph-bg-deep);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-md);
box-shadow: var(--ph-shadow-lift);
}
.ph-lightbox__frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.ph-lightbox__close {
position: absolute;
inset-block-start: -52px;
inset-inline-end: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
color: var(--ph-text-heading);
background: var(--ph-bg-surface-solid);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-pill);
cursor: pointer;
transition: border-color 160ms var(--ph-ease-out), color 160ms var(--ph-ease-out);
}
.ph-lightbox__close.ph-lightbox__close:hover,
.ph-lightbox__close.ph-lightbox__close:focus {
color: var(--ph-brand-gold);
background: var(--ph-bg-surface-solid);
border-color: var(--ph-border-gold);
}
.ph-lightbox__close svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
}
body.ph-lightbox-open {
overflow: hidden;
}
@media (max-width: 544px) {
.ph-lightbox {
padding: var(--ph-space-sm);
}
.ph-lightbox__close {
inset-block-start: var(--ph-space-xs);
inset-inline-end: var(--ph-space-xs);
background: rgba(10, 12, 15, 0.82);
}
}
@media (prefers-reduced-motion: reduce) {
.ph-lightbox__backdrop,
.ph-lightbox__dialog {
animation: none;
}
}
.ph-search-more {
margin-block-start: var(--ph-gap-section);
}
.ph-search-more .ph-section-head {
margin-block-end: var(--ph-space-2xl);
}
.ph-search--cols {
max-width: none;
}
.ph-search--cols .ph-helpdesk__search {
max-width: 736px;
margin-inline: auto;
}
.ph-search__cols {
display: grid;
grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
gap: var(--ph-space-2xl);
align-items: start;
}
.ph-search__main { min-width: 0; }
.ph-search__side {
display: flex;
flex-direction: column;
gap: var(--ph-gap-block);
padding-block-start: var(--ph-gap-block);
min-width: 0;
align-self: start;
container-type: inline-size;
}
.ph-search__side.ph-search__side > * { margin-block: 0; }
.ph-search__side .ph-search__list { gap: var(--ph-space-md); }
@media (max-width: 921px) {
.ph-search--cols { max-width: 736px; }
.ph-search__cols { grid-template-columns: 1fr; }
.ph-search__side {
padding-block-start: 0;
margin-block-start: var(--ph-gap-section);
}
}
.ph-afk {
position: fixed;
inset-inline-end: var(--ph-space-lg);
inset-block-end: var(--ph-space-lg);
z-index: 90;
display: flex;
align-items: center;
gap: var(--ph-space-sm);
max-width: min(440px, calc(100vw - 2 * var(--ph-space-lg)));
padding: var(--ph-space-sm) var(--ph-space-md);
overflow: hidden;
background: var(--ph-bg-surface-solid);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: var(--ph-radius-md);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
color: var(--ph-text-heading);
font-size: var(--ph-size-sm);
line-height: 1.45;
animation: ph-afk-in 240ms var(--ph-ease-out) both;
}
@keyframes ph-afk-in { from { opacity: 0; transform: translateY(8px); } }
.ph-afk__tag {
flex: none;
font-family: var(--ph-font-tactical);
font-weight: var(--ph-weight-normal); 
letter-spacing: var(--ph-tracking-tactical);
color: var(--ph-brand-gold);
}
.ph-afk__text { min-width: 0; }
.ph-afk__close.ph-afk__close,
.ph-afk__close.ph-afk__close:hover,
.ph-afk__close.ph-afk__close:focus {
flex: none;
display: grid;
place-items: center;
width: 32px;
height: 32px;
margin-inline-start: var(--ph-space-2xs);
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: var(--ph-radius-xs);
background: transparent;
color: var(--ph-text-body);
font-size: 18px;
line-height: 1;
}
.ph-afk__close.ph-afk__close:hover { border-color: var(--ph-brand-gold); color: var(--ph-text-heading); }
.ph-afk__timer {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
height: 2px;
background: var(--ph-brand-gold);
transform-origin: left;
animation: ph-afk-timer 5s linear forwards;
}
@keyframes ph-afk-timer { to { transform: scaleX(0); } }
@media (max-width: 544px) {
.ph-afk {
inset-inline: var(--ph-space-sm);
inset-block-end: var(--ph-space-sm);
max-width: none;
}
.ph-afk__close.ph-afk__close,
.ph-afk__close.ph-afk__close:hover,
.ph-afk__close.ph-afk__close:focus { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
.ph-afk { animation: none; }
.ph-afk__timer { display: none; }
}
.ph-ss {
position: fixed;
inset: 0;
z-index: 10000;
container-type: size;
overflow: hidden;
background: radial-gradient(ellipse 70% 60% at 50% 42%, var(--ph-bg-raised) 0%, var(--ph-bg-deep) 72%);
color: var(--ph-text-heading);
font-family: var(--ph-font-body);
animation: ph-fade-in 600ms ease-out;
cursor: default;
}
.ph-ss__afk {
position: absolute;
inset-block-start: 4cqh;
inset-inline-start: max(3cqw, var(--ph-space-lg));
margin: 0;
font: 500 clamp(12px, 1.5cqw, 18px)/1 var(--ph-font-mono);
letter-spacing: 0.08em;
color: var(--ph-text-muted);
font-variant-numeric: tabular-nums;
}
.ph-ss__afk b { font-weight: 500; color: var(--ph-text-heading); }
.ph-ss__center {
position: absolute;
inset: 0 0 14cqh;
display: grid;
place-content: center;
justify-items: center;
gap: 2.6cqh;
padding-inline: 5cqw;
text-align: center;
}
.ph-ss__logo {
display: grid;
justify-items: center;
margin: 0;
font: 400 min(15cqw, 16cqh)/0.9 var(--ph-font-tactical); 
letter-spacing: 0;
}
.ph-ss__logo span { display: block; width: max-content; }
.ph-ss__logo .ph-ss__play {
color: var(--ph-brand-gold);
letter-spacing: 0.1059em;
margin-inline-end: -0.1059em;
}
.ph-ss__line {
margin: 0;
max-width: 36em;
font-size: clamp(15px, 1.9cqw, 26px);
line-height: 1.5;
color: var(--ph-text-body);
text-wrap: balance;
}
.ph-ss__press {
margin: 0;
font: 400 clamp(15px, 2.4cqw, 34px)/1 var(--ph-font-tactical);
letter-spacing: 0.32em;
margin-inline-end: -0.32em;
color: var(--ph-brand-gold);
animation: ph-ss-blink 1.6s ease-in-out infinite alternate;
}
@keyframes ph-ss-blink { to { opacity: 0.28; } }
.ph-ss__clip.ph-ss__clip {
position: absolute;
inset-inline-end: 3cqw;
inset-block-end: 5cqh;
display: grid;
grid-template-columns: 34% 1fr;
gap: var(--ph-space-md);
align-items: center;
width: clamp(280px, 32cqw, 460px);
padding: var(--ph-space-sm);
background: rgba(24, 28, 35, 0.86);
border: 1px solid var(--ph-border);
border-radius: var(--ph-radius-md);
color: var(--ph-text-heading);
text-decoration: none;
}
.ph-ss__clip.ph-ss__clip:hover,
.ph-ss__clip.ph-ss__clip:focus-within { border-color: var(--ph-border-gold); }
.ph-ss__thumb {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 16 / 9;
overflow: hidden;
border: 0;
border-radius: var(--ph-radius-xs);
box-shadow: none;
background: linear-gradient(135deg, var(--ph-bg-raised), var(--ph-bg-sunken));
}
.ph-ss__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph-ss__thumb svg { position: relative; width: 32%; height: auto; }
.ph-ss__thumb .ph-ss__play-bg { fill: var(--ph-brand-youtube); }
.ph-ss__thumb .ph-ss__play-arrow { fill: #fff; }
.ph-ss__clip-text { display: grid; gap: 2px; min-width: 0; }
.ph-ss__reward { font-size: var(--ph-size-2xs); color: var(--ph-text-muted); }
.ph-ss__note { font-size: var(--ph-size-sm); font-weight: var(--ph-weight-heading); line-height: 1.35; color: var(--ph-text-heading); }
.ph-ss__title {
overflow: hidden;
font-size: var(--ph-size-2xs);
line-height: 1.35;
color: var(--ph-text-muted);
text-decoration: none;
white-space: nowrap;
text-overflow: ellipsis;
}
.ph-ss__title:hover,
.ph-ss__title:focus-visible { color: var(--ph-brand-gold); text-decoration: underline; }
.ph-ss__close.ph-ss__close,
.ph-ss__close.ph-ss__close:hover,
.ph-ss__close.ph-ss__close:focus {
position: absolute;
inset-block-start: 3cqh;
inset-inline-end: max(3cqw, var(--ph-space-lg));
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: var(--ph-radius-xs);
background: transparent;
color: var(--ph-text-body);
font-size: 22px;
line-height: 1;
}
.ph-ss__close.ph-ss__close:hover { border-color: var(--ph-brand-gold); color: var(--ph-text-heading); }
@container (max-width: 600px) {
.ph-ss__clip.ph-ss__clip {
inset-inline: var(--ph-space-md);
inset-block-end: var(--ph-space-md);
width: auto;
}
.ph-ss__center { inset-block-end: 22cqh; }
}
@media (prefers-reduced-motion: reduce) {
.ph-ss { animation: none; }
.ph-ss__press { animation: none; }
}
.ph-main {
display: block;
flex: 1 1 100%;
min-width: 0;
}
.ph-hero__img.ph-hero__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
}
.ph-consent[hidden],
.ph-consent-dialog[hidden] { display: none; }
.ph-consent {
position: fixed;
inset-inline: 0;
bottom: 0;
z-index: 95;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--ph-space-sm) var(--ph-space-lg);
padding: var(--ph-space-md) var(--ph-container-pad);
background: var(--ph-bg-surface-solid);
border-top: 1px solid var(--ph-border-strong);
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
color: var(--ph-text-body);
font-size: var(--ph-size-sm);
line-height: 1.6;
}
.ph-consent__text { flex: 1 1 32rem; margin: 0; }
.ph-consent__text a { color: var(--ph-text-heading); text-decoration: underline; text-underline-offset: 3px; }
.ph-consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ph-space-xs); }
.ph-consent__btn.ph-consent__btn,
.ph-consent__btn.ph-consent__btn:is(:hover, :focus) {
min-height: 44px;
padding: var(--ph-space-xs) var(--ph-space-lg);
border: 1px solid var(--ph-border-strong);
border-radius: var(--ph-radius-sm);
background: var(--ph-bg-raised);
color: var(--ph-text-heading);
font-family: var(--ph-font-body);
font-size: var(--ph-size-sm);
line-height: 1.3;
cursor: pointer;
}
.ph-consent__btn.ph-consent__btn:hover { border-color: var(--ph-text-muted); }
.ph-consent__link.ph-consent__link,
.ph-consent__link.ph-consent__link:is(:hover, :focus) {
min-height: 44px;
padding: var(--ph-space-xs) var(--ph-space-sm);
border: 0;
background: transparent;
color: var(--ph-text-body);
font-family: var(--ph-font-body);
font-size: var(--ph-size-sm);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.ph-consent__link.ph-consent__link:hover { color: var(--ph-text-heading); }
.ph-consent-dialog {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: var(--ph-space-md);
background: rgba(10, 12, 15, 0.78);
}
.ph-consent-dialog__box {
width: min(100%, 640px);
max-height: calc(100vh - 2 * var(--ph-space-md));
overflow-y: auto;
padding: var(--ph-space-xl);
border: 1px solid var(--ph-border-strong);
border-radius: var(--ph-radius-md);
background: var(--ph-bg-surface-solid);
color: var(--ph-text-body);
font-size: var(--ph-size-sm);
line-height: 1.6;
}
.ph-consent-dialog__title.ph-consent-dialog__title {
margin: 0 0 var(--ph-space-xs);
color: var(--ph-text-heading);
font-family: var(--ph-font-heading);
font-size: var(--ph-size-h3);
font-weight: var(--ph-weight-heading);
}
.ph-consent-dialog__lead.ph-consent-dialog__lead { margin: 0 0 var(--ph-space-md); }
.ph-consent__rows.ph-consent__rows { margin: 0 0 var(--ph-space-lg); padding: 0; list-style: none; }
.ph-consent__row { padding-block: var(--ph-space-sm); border-top: 1px solid var(--ph-border); }
.ph-consent__row:first-child { border-top: 0; padding-top: 0; }
.ph-consent__check { display: flex; align-items: center; gap: var(--ph-space-xs); min-height: 32px; cursor: pointer; }
.ph-consent__check input { width: 20px; height: 20px; margin: 0; flex: none; }
.ph-consent__name { color: var(--ph-text-heading); font-weight: 600; }
.ph-consent__note { color: var(--ph-text-muted); font-weight: 400; font-size: var(--ph-size-2xs); }
.ph-consent__desc.ph-consent__desc { margin: var(--ph-space-2xs) 0 0 calc(20px + var(--ph-space-xs)); color: var(--ph-text-muted); font-size: var(--ph-size-2xs); }
@media (max-width: 544px) {
.ph-consent { padding-block: var(--ph-space-sm); }
.ph-consent__actions { width: 100%; }
.ph-consent__btn.ph-consent__btn { flex: 1 1 0; padding-inline: var(--ph-space-xs); }
.ph-consent__link.ph-consent__link { flex: 1 1 100%; min-height: 36px; }
.ph-consent-dialog__box { padding: var(--ph-space-lg); }
.ph-consent-dialog .ph-consent__btn.ph-consent__btn { flex: 1 1 100%; }
}