/* Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V5 * Hallmark · genre: atmospheric · macrostructure: Portfolio Grid · theme: Midnight * nav: N5 floating pill · footer: Ft5 statement · enrichment: none (real game artwork) * site: pgslot-games.io · core: demo / trial play · locale: th-TH * Every colour and font here resolves through a token in tokens.css. No inline values. */ @import url("tokens.css?v=34f0b29c"); /* ── Reset ──────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; } ul, ol { margin: 0; padding: 0; list-style: none; } p { margin: 0; } /* ── Shell ──────────────────────────────────────────────────────────────────── */ /* One column width per page. * * Previously the main content used 58rem while the header, CTA band and footer * used the full 84rem container — so on a wide screen those three started about * 200px further left than the text they framed, and nothing on the page lined up. * Now every region reads the same --wrap-max, which a page sets once on . */ .wrap { width: 100%; max-width: var(--wrap-max, var(--container)); margin-inline: auto; padding-inline: var(--gutter); } /* kept so existing markup still parses; the width now comes from the body */ .wrap--narrow { max-width: var(--wrap-max, var(--container)); } /* Reading pages: one comfortable column. The hub omits this and keeps the full 84rem, because a 40-tile grid genuinely needs the room. */ body.narrow { --wrap-max: 58rem; } .skip { position: absolute; inset-inline-start: -9999px; } .skip:focus { inset-inline-start: var(--gutter); top: var(--space-sm); z-index: var(--z-toast); background: var(--color-paper-3); color: var(--color-ink); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-md); white-space: nowrap; } /* ── Page head ───────────────────────────────────────────────────────────────── * No eyebrow beside the heading (gate 54). Where a label is used it stacks * directly above, single column. */ .page-head { display: block; padding-block: var(--space-2xl) var(--space-xl); } .page-head__label { display: block; font-size: var(--text-xs); font-weight: var(--weight-ui); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-accent); margin-block-end: var(--space-xs); } .page-head h1 { margin: 0; font-size: var(--text-display-s); } .page-head__lede { margin-block-start: var(--space-md); max-width: var(--measure); color: var(--color-muted); font-size: var(--text-lg); line-height: var(--leading-tight); } /* ── Prose ──────────────────────────────────────────────────────────────────── */ .prose { max-width: var(--measure); } .prose > * + * { margin-block-start: var(--space-md); } .prose h2 { margin-block-start: var(--space-2xl); font-size: var(--text-xl); } .prose h3 { margin-block-start: var(--space-xl); font-size: var(--text-lg); } /* In-content links. These were --color-ink with a faint underline, i.e. exactly * the same colour as the surrounding text — the owner could not find them on the * page, which is the only test that matters. Now: accent colour, a solid 2px * underline, and a background wash on hover so they are unmissable. */ .prose a:not([class]) { color: var(--color-accent); font-weight: var(--weight-body-strong); text-decoration: underline; text-decoration-color: var(--color-accent-quiet); text-decoration-thickness: 2px; text-underline-offset: 3px; border-radius: 3px; transition: text-decoration-color var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out); } .prose a:not([class]):hover { text-decoration-color: var(--color-accent); background: color-mix(in oklab, var(--color-accent) 14%, transparent); } .prose a:not([class]):visited { color: var(--color-accent); } /* External links get a small outward arrow so readers know they are leaving */ .prose a:not([class])[target="_blank"]::after { content: "97"; display: inline-block; margin-inline-start: 0.15em; font-size: 0.85em; vertical-align: baseline; } .prose ul:not([class]) { padding-inline-start: 0; } .prose ul:not([class]) li { position: relative; padding-inline-start: var(--space-md); margin-block-start: var(--space-xs); } .prose ul:not([class]) li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.75em; width: 5px; height: 1px; background: var(--color-accent); } /* ── Section rhythm — deliberately uneven, not one padding everywhere ───────── */ .band { padding-block: var(--space-2xl); } .band + .band { padding-block-start: var(--space-xl); } .band--tight { padding-block: var(--space-xl) var(--space-lg); } /* ── Contact channels — a definition list, not cards in cards ──────────────── */ .channels { display: grid; gap: var(--space-md); margin-block-start: var(--space-lg); max-width: 46rem; } @media (min-width: 40rem) { .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .channel { padding: var(--space-md); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); } .channel__label { font-size: var(--text-xs); font-weight: var(--weight-ui); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-neutral); } .channel__value { display: inline-block; margin-block-start: var(--space-2xs); font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-ui); color: var(--color-ink); text-decoration: none; overflow-wrap: anywhere; min-width: 0; } .channel__value:hover { color: var(--color-accent); } .channel__note { margin-block-start: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); } /* ── Fact table — sourced company data. Row-header layout, hairline rules, * no card wrapper (one containment layer only). Collapses to stacked * label-above-value on phones. */ .facts { width: 100%; margin-block-start: var(--space-lg); border-collapse: collapse; font-size: var(--text-sm); text-align: start; } .facts caption { caption-side: top; text-align: start; padding-block-end: var(--space-sm); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-neutral); } .facts th, .facts td { padding: var(--space-sm) var(--space-xs); border-block-end: var(--rule-hair) solid var(--color-rule); vertical-align: top; text-align: start; } .facts th { font-family: var(--font-display); font-weight: var(--weight-ui); color: var(--color-muted); white-space: normal; } .facts td { color: var(--color-ink); } .facts tr:last-child th, .facts tr:last-child td { border-block-end: 0; } @media (min-width: 40rem) { .facts th { width: 34%; padding-inline-end: var(--space-md); } } @media (max-width: 39.99rem) { /* stack: label above value, one hairline per pair */ .facts th, .facts td { display: block; width: auto; } .facts th { border-block-end: 0; padding-block-end: var(--space-2xs); } .facts td { padding-block-start: 0; } } /* ── Callout — one containment layer, no nesting, no side stripe ───────────── */ .note { margin-block-start: var(--space-lg); padding: var(--space-md); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); max-width: var(--measure); } .note__title { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-ui); margin-block-end: var(--space-2xs); } .note p { font-size: var(--text-sm); color: var(--color-muted); } /* ── Sticky CTA band ────────────────────────────────────────────────────────── * Follows the reader down the page so the outbound link is always reachable. * It read as a stray strip before: it spanned the full 84rem container while the * text above sat in a 58rem column, and it had no surface of its own. Now it * shares the page column and looks like a deliberate element. * Honest wording is enforced in the markup: the button says it goes to a partner * site, because no game runs on this one. */ .cta-bar { position: sticky; bottom: 0; z-index: var(--z-sticky); margin-block-start: var(--space-2xl); padding-block: var(--space-sm); background: color-mix(in oklab, var(--color-paper) 94%, transparent); backdrop-filter: blur(10px); border-block-start: var(--rule-hair) solid var(--color-rule); } @supports not (backdrop-filter: blur(1px)) { .cta-bar { background: var(--color-paper); } } .cta-bar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-md); padding-block: var(--space-xs); } .cta-bar__text { font-size: var(--text-sm); color: var(--color-muted); min-width: 0; flex: 1 1 12rem; } .cta-bar__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding-inline: var(--space-lg); background: var(--color-accent); color: var(--color-paper); border-radius: var(--radius-pill); font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-display); text-decoration: none; white-space: nowrap; line-height: 1; flex: 0 0 auto; transition: filter var(--dur-short) var(--ease-out); } .cta-bar__btn:hover { filter: brightness(1.08); } /* On a phone the band is the whole width, so the button takes the full row rather than being squeezed beside the text. */ @media (max-width: 30rem) { .cta-bar__inner { flex-direction: column; align-items: stretch; } .cta-bar__text { text-align: center; } .cta-bar__btn { width: 100%; } } /* ── Ft5 · Statement footer ──────────────────────────────────────────────────── * Closes the page with a sentence. Deliberately NOT four link columns + * social row + tiny copyright (gate 43). */ .foot { margin-block-start: var(--space-3xl); padding-block: var(--space-2xl) var(--space-xl); border-block-start: var(--rule-hair) solid var(--color-rule); } .foot__statement { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-xl); line-height: var(--leading-display); max-width: 34ch; overflow-wrap: anywhere; min-width: 0; } .foot__statement b { color: var(--color-accent); font-weight: inherit; } .foot__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); margin-block-start: var(--space-xl); font-size: var(--text-sm); /* muted, not neutral: neutral clears 4.5:1 on this dark paper but misses the * 7:1 target for small text. Footer meta is small text. */ color: var(--color-muted); } .foot__link { color: var(--color-muted); text-decoration: none; white-space: nowrap; border-block-end: var(--rule-hair) solid transparent; transition: border-color var(--dur-short) var(--ease-out); } .foot__link:hover { border-block-end-color: var(--color-accent); } .foot__age { display: inline-flex; align-items: center; min-height: 24px; padding-inline: var(--space-xs); border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-sm); font-weight: var(--weight-ui); color: var(--color-muted); white-space: nowrap; line-height: 1; } /* ── Hover only where a pointer exists; touch never loses a feature ────────── */ @media (pointer: coarse) { .nav__cta, .cta-bar__btn { min-height: 48px; } } /* ═══════════════════════════════════════════════════════════════════════════ * DEMO HUB — the filterable game grid. This site's core surface. * The numbers sit ON the tile: every incumbent ships a bare thumbnail, so the * spec-on-tile is the differentiator (SOP §9.5). * ═══════════════════════════════════════════════════════════════════════════ */ .hub { display: block; } @media (min-width: 64rem) { .hub { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); gap: var(--space-xl); align-items: start; } } /* ── Filter rail ──────────────────────────────────────────────────────────── */ .filters { margin-block-end: var(--space-lg); padding: var(--space-md); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); } @media (min-width: 64rem) { .filters { position: sticky; top: 5rem; margin-block-end: 0; max-height: calc(100vh - 7rem); overflow-y: auto; } } .filters__group + .filters__group { margin-block-start: var(--space-md); } .filters__label { display: block; font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-ui); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-neutral); margin-block-end: var(--space-xs); } .filters__row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); } .fbtn { appearance: none; min-height: 34px; padding: 0 var(--space-sm); background: transparent; color: var(--color-muted); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-body-strong); line-height: 1; white-space: nowrap; cursor: pointer; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); } .fbtn:hover { color: var(--color-ink); border-color: var(--color-rule-strong); } .fbtn[aria-pressed="true"] { color: var(--color-paper); background: var(--color-accent); border-color: var(--color-accent); } .filters__count { margin-block-start: var(--space-md); padding-block-start: var(--space-sm); border-block-start: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; } /* ── Grid ─────────────────────────────────────────────────────────────────── */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: var(--space-sm); } @media (min-width: 40rem) { /* explicit 11rem minimum, so the track never resolves to an image's * intrinsic width and push the layout past the viewport (gate 50) */ .grid { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); } } .tile { display: flex; flex-direction: column; background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; /* card-fade is the only entrance; hover-lift is the only hover. */ transition: border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .tile:hover { border-color: var(--color-accent-quiet); transform: translateY(-2px); } .tile:hover /* Visually hidden but read aloud. Used to give each number on a card its own * spoken label, because the advertised cap is rejected with a CSS strikethrough * that assistive tech cannot see. */ .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .tile__cta { color: var(--color-accent); } } .tile:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } .tile__art { position: relative; aspect-ratio: 1 / 1; background: var(--color-paper-3); } .tile__art img { width: 100%; height: 100%; object-fit: cover; } /* Designed fallback, in this site's own language — never a grey box (SOP §14.4) */ .tile__fb { position: absolute; inset: 0; display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--color-paper-3) 0 10px, var(--color-paper-2) 10px 20px); } .tile__fb span { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 2.1rem; letter-spacing: -0.02em; color: var(--color-accent); } .tile__body { padding: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; } .tile__th { font-family: var(--font-display); font-weight: var(--weight-ui); font-size: var(--text-base); line-height: 1.3; color: var(--color-ink); overflow-wrap: anywhere; min-width: 0; } .tile__en { font-size: var(--text-xs); color: var(--color-neutral); overflow-wrap: anywhere; min-width: 0; } .tile__nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs) var(--space-xs); margin-block-start: auto; padding-block-start: var(--space-xs); border-block-start: var(--rule-hair) solid var(--color-rule); } .num { min-width: 0; } .num__v { display: block; font-family: var(--font-outlier); font-size: var(--text-sm); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--color-ink); overflow-wrap: anywhere; } .num__l { display: block; font-size: 0.68rem; letter-spacing: 0.04em; color: var(--color-neutral); } .num--wide { grid-column: 1 / -1; } .num--tested .num__v { color: var(--color-accent); } .num__cap { display: block; font-family: var(--font-outlier); font-size: 0.7rem; color: var(--color-neutral); text-decoration: line-through; text-decoration-thickness: 1px; font-variant-numeric: tabular-nums; } .tile__cta { font-size: var(--text-xs); font-weight: var(--weight-ui); color: var(--color-muted); transition: color var(--dur-short) var(--ease-out); } /* Filtered-out tiles fade rather than vanish abruptly. */ .tile[hidden] { display: none; } .grid--filtering .tile { animation: tileIn var(--dur-mid) var(--ease-out) both; } @keyframes tileIn { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .grid--filtering .tile { animation: none; } } .vol-pill { display: inline-flex; align-items: center; gap: 0.3em; font-size: 0.68rem; letter-spacing: 0.04em; color: var(--color-neutral); } .vol-pill::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--color-vol-mid); } .vol-pill[data-vol="low"]::before { background: var(--color-vol-low); } .vol-pill[data-vol="high"]::before { background: var(--color-vol-high); } /* ── Ranked top-10 list (homepage) ───────────────────────────────────────────── * Numbered because the order carries real information: Thai popularity rank. * Not a card grid — the hub owns that shape, so the homepage reads as a list. */ @media (min-width: 46rem) { .rank__item { grid-template-columns: 2rem 3.25rem minmax(0, 1fr) auto; grid-template-areas: "n art names nums" ". . cap cap"; } } /* ═══════════════════════════════════════════════════════════════════════════ * GAME PAGE * Section order on this site: hero → answer-first → what a trial shows → * SPEC TABLE (mid-page) → what a trial cannot show → related → FAQ. * The spec table's mid-page position is a divergence axis (SOP §9.7 D3): * late on pgsoft-games.org, last on pg-games.info. * ═══════════════════════════════════════════════════════════════════════════ */ .crumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs); padding-block-start: var(--space-2xl); font-size: var(--text-sm); color: var(--color-neutral); } .crumb a { color: var(--color-muted); text-decoration: none; white-space: nowrap; } .crumb a:hover { color: var(--color-accent); } .crumb span[aria-current] { color: var(--color-ink); } /* ── Game hero ────────────────────────────────────────────────────────────── */ .gh { display: grid; gap: var(--space-lg); padding-block: var(--space-lg) var(--space-xl); } @media (min-width: 40rem) { .gh { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; } } .gh__art { position: relative; aspect-ratio: 1 / 1; max-width: 15rem; } .gh__art img, .gh__art .tile__fb { border-radius: var(--radius-lg); border: var(--rule-hair) solid var(--color-rule); } .gh__art img { width: 100%; height: 100%; object-fit: cover; } .gh__text { min-width: 0; } .gh__text h1 { margin: 0; font-size: var(--text-2xl); } .gh__en { margin-block-start: var(--space-2xs); font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-neutral); } .gh__alias { margin-block-start: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); } .gh__lede { margin-block-start: var(--space-md); max-width: var(--measure); color: var(--color-muted); font-size: var(--text-lg); line-height: var(--leading-tight); } /* Three headline numbers. The max-win label changes per game — "ทดสอบได้จริง" * when an independent figure exists, "ตามสเปกค่าย" when only a cap does. */ .gh__quick { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin: var(--space-lg) 0 0; padding-block-start: var(--space-md); border-block-start: var(--rule-hair) solid var(--color-rule); } .gh__quick div { display: flex; flex-direction: column; min-width: 0; } .gh__quick dt { order: 2; font-size: 0.7rem; letter-spacing: 0.04em; color: var(--color-neutral); } .gh__quick dd { order: 1; margin: 0; font-family: var(--font-outlier); font-size: var(--text-lg); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--color-ink); } .gh__quick div:last-child dd { color: var(--color-accent); } /* ── Spec table ───────────────────────────────────────────────────────────── */ .spec-wrap { overflow-x: auto; margin-block-start: var(--space-lg); } .spec { width: 100%; min-width: 20rem; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; } .spec caption { caption-side: top; text-align: start; padding-block-end: var(--space-sm); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-neutral); } .spec th, .spec td { padding: var(--space-sm) var(--space-xs); border-block-end: var(--rule-hair) solid var(--color-rule); vertical-align: top; text-align: start; } .spec th { font-family: var(--font-display); font-weight: var(--weight-ui); color: var(--color-muted); width: 38%; } .spec td { color: var(--color-ink); } .spec tr:last-child th, .spec tr:last-child td { border-block-end: 0; } .spec__note { font-size: var(--text-xs); color: var(--color-accent); } .spec__muted { font-size: var(--text-xs); color: var(--color-neutral); } .spec__src { margin-block-start: var(--space-md); max-width: var(--measure); font-size: var(--text-xs); line-height: 1.6; color: var(--color-neutral); } .spec__feats { margin-block-start: var(--space-lg); padding: var(--space-md); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); max-width: var(--measure); } .spec__feats li { padding-inline-start: var(--space-md); position: relative; margin-block-start: var(--space-xs); } .spec__feats li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.72em; width: 5px; height: 1px; background: var(--color-accent); } .spec__feats-h { padding-inline-start: 0 !important; margin-block-start: 0 !important; font-family: var(--font-display); font-weight: var(--weight-ui); font-size: var(--text-base); color: var(--color-ink); } .spec__feats-h::before { display: none; } /* ── Related games ────────────────────────────────────────────────────────── */ .rel { margin-block-start: var(--space-md); display: grid; gap: var(--space-xs); } .rel li { padding-inline-start: 0; } .rel a { display: block; padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); color: var(--color-ink); text-decoration: none; font-size: var(--text-sm); transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); } .rel a:hover { border-color: var(--color-accent-quiet); color: var(--color-accent); } /* ═══════════════════════════════════════════════════════════════════════════ * DATA TABLE — the homepage's comparison tables. Column-oriented (unlike the * row-header .spec table on game pages), because these compare games against * each other rather than list one game's fields. * ═══════════════════════════════════════════════════════════════════════════ */ .dt-wrap { overflow-x: auto; margin-block: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-paper-2); } .dt { width: 100%; min-width: 32rem; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; } .dt caption { caption-side: top; text-align: start; padding: var(--space-sm) var(--space-md) 0; font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-neutral); } .dt thead th { font-family: var(--font-display); font-weight: var(--weight-ui); font-size: var(--text-xs); letter-spacing: 0.03em; text-align: start; padding: var(--space-sm) var(--space-xs); border-block-end: var(--rule-hair) solid var(--color-rule-strong); color: var(--color-muted); white-space: nowrap; } .dt td { padding: var(--space-sm) var(--space-xs); border-block-end: var(--rule-hair) solid var(--color-rule); vertical-align: top; color: var(--color-ink); } .dt tbody tr:last-child td { border-block-end: 0; } .dt th:first-child, .dt td:first-child { padding-inline-start: var(--space-md); } .dt th:last-child, .dt td:last-child { padding-inline-end: var(--space-md); } .dt a { color: var(--color-ink); text-decoration: none; border-block-end: var(--rule-hair) solid var(--color-accent-quiet); } .dt a:hover { color: var(--color-accent); border-block-end-color: var(--color-accent); } .dt__en { display: block; font-size: 0.7rem; color: var(--color-neutral); overflow-wrap: anywhere; } .dt__num { font-family: var(--font-outlier); white-space: nowrap; } .dt__lab { display: block; font-family: var(--font-body); font-size: 0.68rem; color: var(--color-neutral); white-space: nowrap; } /* The advertised cap: shown, but struck through. The claim is visible and * visibly rejected — that is the whole editorial point of this site. */ .dt__cap, .dt__strike { color: var(--color-neutral); text-decoration: line-through; text-decoration-thickness: 1px; } .dt__strike { display: block; font-family: var(--font-outlier); font-size: 0.7rem; } .dt__real { color: var(--color-accent); font-weight: 500; } /* ── Table thumbnails ───────────────────────────────────────────────────────── * The homepage lost every image when its top-ten list became a data table. * A small tile in the game cell puts the artwork back without turning a * comparison table into a gallery. */ .dt__game { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; } .dt__thumb { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); border: var(--rule-hair) solid var(--color-rule); object-fit: cover; background: var(--color-paper-3); } .dt__thumb--fb { display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--weight-display); font-size: 0.85rem; color: var(--color-accent); background: repeating-linear-gradient(135deg, var(--color-paper-3) 0 6px, var(--color-paper-2) 6px 12px); } .dt__names { min-width: 0; } /* A visible legend, so the struck-through figures make sense even when the * column headers have scrolled out of view. */ .legend { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-block-start: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); } .legend span { display: inline-flex; align-items: center; gap: 0.45em; } .legend .legend__cap { font-family: var(--font-outlier); color: var(--color-neutral); text-decoration: line-through; text-decoration-thickness: 1px; } .legend .legend__real { font-family: var(--font-outlier); color: var(--color-accent); font-weight: 500; } /* ── Logo ───────────────────────────────────────────────────────────────────── * Owner's call: the header leads with the PG Soft logo and our own wordmark is * gone. The short Thai label stays — every page states we are not affiliated * with PG Soft, so a header carrying only their mark would contradict the site. * The logo is black on transparent, so it sits on a light chip; we do not * recolour a trademark to suit our background. */ /* ═══════════════════════════════════════════════════════════════════════════ * HEADER — conventional top bar, burger below 60rem. * * These two rules were destroyed on 2026-09-03 by a careless edit: the stylesheet * contained two blocks both commented "Logo lockup", and a slice from the first * to the second took the header layout with it. The logo, links and CTA then had * no flex row to sit in and stacked vertically down the page. * ═══════════════════════════════════════════════════════════════════════════ */ .hdr { position: sticky; top: 0; z-index: var(--z-nav); background: color-mix(in oklab, var(--color-paper) 92%, transparent); backdrop-filter: blur(12px); border-block-end: var(--rule-hair) solid var(--color-rule); } @supports not (backdrop-filter: blur(1px)) { .hdr { background: var(--color-paper); } } .hdr__inner { width: 100%; max-width: var(--wrap-max, var(--container)); margin-inline: auto; padding: var(--space-sm) var(--gutter); display: flex; align-items: center; gap: var(--space-md); min-height: 4.25rem; flex-wrap: nowrap; } .hdr__brand { display: flex; align-items: center; min-width: 0; margin-inline-end: auto; } .brand { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; color: var(--color-ink); min-width: 0; } /* No chip behind the mark any more. The header used to sit a BLACK PG Soft logo on a light chip, because black-on-black is invisible — but a white box in a dark header reads as a rendering fault, and the owner flagged it. We now ship the reversed (white) form of the mark, which needs no box at all. */ .brand__chip { display: inline-flex; align-items: center; flex: 0 0 auto; line-height: 0; } .brand__logo { height: 1.9rem; width: auto; display: block; } .brand__fallback { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 1.1rem; color: var(--color-ink); } .brand__label { font-size: var(--text-xs); line-height: 1.25; color: var(--color-neutral); padding-inline-start: var(--space-sm); border-inline-start: var(--rule-hair) solid var(--color-rule); white-space: nowrap; } .brand:hover .brand__label { color: var(--color-muted); } /* On a small phone the label would crowd the burger; the logo alone is enough there, and the alt text still carries the meaning for screen readers. */ @media (max-width: 26rem) { .brand__label { display: none; } } @media (max-width: 22rem) { .brand__logo { height: 1.6rem; } } /* ── Desktop links ────────────────────────────────────────────────────────── */ .hdr__nav { display: none; } .hdr__links { display: flex; align-items: center; gap: var(--space-xs); } .hdr__link { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-sm); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--weight-body-strong); color: var(--color-muted); text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out); } .hdr__link:hover { color: var(--color-ink); background: var(--color-paper-2); } .hdr__link[aria-current="page"] { color: var(--color-accent); } .hdr__cta { display: none; align-items: center; min-height: 44px; padding-inline: var(--space-lg); border: var(--rule-hair) solid var(--color-accent-quiet); border-radius: var(--radius-pill); color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-ui); text-decoration: none; white-space: nowrap; transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); } .hdr__cta:hover { border-color: var(--color-accent); color: var(--color-ink); } @media (min-width: 60rem) { .hdr__nav { display: block; } .hdr__cta { display: inline-flex; } } /* ── Burger ───────────────────────────────────────────────────────────────── */ .burger { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; min-width: 44px; padding-inline: var(--space-sm); background: transparent; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-sm); cursor: pointer; } .burger:hover { border-color: var(--color-rule-strong); } .burger__label { line-height: 1; } .burger__box { position: relative; width: 18px; height: 12px; display: block; } /* three bars from one element: ::before and ::after are the outer two */ .burger__bar, .burger__bar::before, .burger__bar::after { position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-instant) var(--ease-out); } .burger__bar { top: 5px; } .burger__bar::before { content: ""; top: -5px; } .burger__bar::after { content: ""; top: 5px; } .burger[aria-expanded="true"] .burger__bar { background: transparent; } .burger[aria-expanded="true"] .burger__bar::before { transform: translateY(5px) rotate(45deg); } .burger[aria-expanded="true"] .burger__bar::after { transform: translateY(-5px) rotate(-45deg); } @media (min-width: 60rem) { .burger { display: none; } } @media (prefers-reduced-motion: reduce) { .burger__bar, .burger__bar::before, .burger__bar::after { transition: none; } } /* ── Mobile menu panel ────────────────────────────────────────────────────── */ .menu { border-block-start: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); padding: var(--space-sm) var(--gutter) var(--space-lg); } .menu[hidden] { display: none; } .menu__links { display: flex; flex-direction: column; } .menu__link { display: flex; align-items: center; min-height: 52px; padding-inline: var(--space-xs); border-block-end: var(--rule-hair) solid var(--color-rule); color: var(--color-ink); font-size: var(--text-lg); text-decoration: none; } .menu__link[aria-current="page"] { color: var(--color-accent); } .menu__cta { display: flex; align-items: center; justify-content: center; min-height: 52px; margin-block-start: var(--space-md); background: var(--color-accent); color: var(--color-paper); border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-base); text-decoration: none; } @media (min-width: 60rem) { .menu { display: none; } }