@font-face { font-family: Heros; src: url('/fonts/Heros-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Heros; src: url('/fonts/Heros-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Noto Sans Thai'; src: url('/fonts/NotoSansThai-Thai.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
:root { color-scheme: dark; --background: #111214; --foreground: #f7f8fa; --card: #1c1e21; --muted: #25282d; --muted-foreground: #abb1bc; --primary: #7ce4e1; --primary-foreground: #102c2d; --border: #34383d; --ring: #97f6ee; --radius: 22px; --space: 8px; --paper: var(--background); --surface: var(--card); --ink: var(--foreground); --link: var(--primary); --line: var(--border); --soft: var(--muted); --notice: #302b1e; --notice-ink: #eee0b3; font-family: Heros, 'Noto Sans Thai', Tahoma, sans-serif; font-synthesis: none; accent-color: var(--primary); scrollbar-color: #5b626b var(--background); }
:root[data-theme='light'] { color-scheme: light; --background: #f7f8fa; --foreground: #171b21; --card: #fff; --muted: #e4e9ed; --muted-foreground: #505b69; --primary: #126663; --primary-foreground: #fff; --border: #c1c9d1; --ring: #126663; --notice: #f4ebcc; --notice-ink: #473913; }
* { box-sizing: border-box; }
html { --nav-reserve: env(safe-area-inset-bottom, 0px); --consent-reserve: 0px; scroll-padding-block: 28px calc(var(--nav-reserve) + var(--consent-reserve) + 16px); }
/* Reserve the fixed stack before analytics; retain it after consent is hidden. */
html:has(.consent) { --consent-reserve: 64px; }
/* The content scrollport ends above the fixed stack at every scroll offset. */
html:has(.consent) body { block-size: 100dvh; }
html:has(.consent) .page-scroll { block-size: 100%; overflow-y: auto; scroll-padding-block: 16px; }
body { margin: 0; padding-block-end: calc(var(--nav-reserve) + var(--consent-reserve)); background: var(--background); color: var(--foreground); font-size: 16px; line-height: 1.6; font-size-adjust: from-font; }
:lang(th) { font-size-adjust: none; }
a { color: var(--primary); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
button, input { font: inherit; }
button, a, input, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; color: var(--primary); background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; min-inline-size: 44px; min-block-size: 44px; }
button:hover { border-color: var(--primary); }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 4px; }
::selection { background: var(--primary); color: var(--primary-foreground); }
svg { display: block; inline-size: 24px; block-size: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }
h1, h2, h3 { line-height: 1.15; text-wrap: balance; overflow-wrap: anywhere; font-weight: 700; }
h1 { font-size: clamp(2.5rem, 4.6vw, 4.15rem); letter-spacing: -.04em; margin: 0 0 20px; max-inline-size: 24ch; }
h2 { font-size: clamp(1.5rem, 2.4vw, 1.95rem); letter-spacing: -.025em; margin: 40px 0 16px; }
h3 { margin: 24px 0 12px; letter-spacing: -.015em; }
p { margin: 0 0 20px; }
.shell, .wrap { inline-size: min(1168px, calc(100% - 80px)); margin-inline: auto; }
main { min-block-size: 60vh; padding-block: 42px 56px; }
.skip { position: fixed; inset-block-start: -80px; inset-inline-start: 16px; padding: 12px; background: var(--primary); color: var(--primary-foreground); z-index: 10; }
.skip:focus { inset-block-start: 12px; }
.site-header { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; min-block-size: 96px; border-bottom: 1px solid var(--border); padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 10px; min-block-size: 44px; color: var(--foreground); font-size: 23px; font-weight: 700; letter-spacing: -.035em; text-decoration: none; white-space: nowrap; }
.brand svg { color: var(--primary); inline-size: 27px; block-size: 27px; stroke-width: 2; }
.brand svg rect { fill: currentColor; stroke: none; }
.brand span { font: inherit; color: inherit; letter-spacing: inherit; }
.header-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-inline-start: auto; }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 20px; }
nav a { display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; min-inline-size: 44px; font-size: 14px; color: var(--muted-foreground); text-decoration: none; }
nav a[aria-current] { color: var(--foreground); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; }
nav a:hover { color: var(--primary); }
.languages { gap: 0 4px; }
.languages a { font-size: 12px; padding-inline: 5px; }
#theme-toggle { font-size: 12px; padding: 7px 10px; }
.lede { color: var(--muted-foreground); font-size: 18px; line-height: 1.6; max-inline-size: 65ch; overflow-wrap: anywhere; }
.meta, .byline, .snapshot { color: var(--muted-foreground); font-size: 12px; }
.byline { margin-block: 12px 22px; }
.byline a { display: inline-flex; align-items: center; min-block-size: 44px; }
.byline span { display: block; font-variant-numeric: tabular-nums; }
.hero { display: grid; grid-template-columns: 4fr 6fr; gap: 50px; align-items: center; padding-block: 6px 42px; }
.hero-intro { min-inline-size: 0; }
.hero-intro h1 { font-size: clamp(2.4rem, 4vw, 3rem); line-height: 1.08; margin-block-end: 18px; }
.hero-intro .lede { font-size: 17px; }
.hero-intro .byline { margin-block: 12px; }
.feature { position: relative; isolation: isolate; border-radius: var(--radius); min-block-size: 350px; background: #163884; overflow: hidden; box-shadow: 0 18px 44px #05070c35; color: #f7f8fa; }
.art { position: relative; overflow: hidden; background: linear-gradient(140deg, #2456c6, #182c65); isolation: isolate; }
.art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, #142b60d0, transparent 65%); z-index: 1; }
.feature .feature-art { position: absolute; inset: 0; }
.sculpture { position: absolute; inline-size: 240px; aspect-ratio: 1; inset-inline-end: -10px; inset-block-start: 22px; transform: rotate(-25deg); filter: drop-shadow(14px 25px 18px #071b5240); }
.sculpture i { display: block; position: absolute; inline-size: 85%; aspect-ratio: 1; border-radius: 27%; inset-inline-start: 8%; inset-block-start: 8%; background: linear-gradient(135deg, #c5f9fa, #589ccf 50%, #3267c4); border: 1px solid #b4e1f69c; transform: translate(-28px, -28px); }
.sculpture i:nth-child(2) { transform: translate(-10px, -10px); background: linear-gradient(140deg, #a6f2fb, #4482d7); }
.sculpture i:nth-child(3) { transform: translate(9px, 9px); background: linear-gradient(140deg, #a4ebf9, #2764c9); }
.sculpture i:nth-child(4) { transform: translate(29px, 29px); background: linear-gradient(130deg, #bbf5fa, #619cde 48%, #3171d8); box-shadow: inset 0 0 0 26px #d8f9fb25; }
.orb { position: absolute; inline-size: 72px; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, #e4fffc, #78bded 62%, #3262a4); inset-inline-end: 40px; inset-block-end: 35px; box-shadow: 0 16px 24px #0a194833; }
.feature-content { position: relative; z-index: 2; min-block-size: 350px; padding: 30px; display: flex; align-items: flex-start; flex-direction: column; }
.feature-rank { display: inline-flex; align-items: center; min-block-size: 28px; padding: 5px 9px; border-radius: 7px; font-size: 12px; font-weight: 700; background: #122a58; color: #e1f4ff; }
.feature-content h2 { font-size: 34px; line-height: 1.05; letter-spacing: -.03em; margin-block: auto 0; max-inline-size: 245px; }
.feature-content > p { font-size: 13px; color: #d2e3fa; margin-block: 9px 0; }
.feature-link { display: flex; gap: 10px; align-items: center; min-block-size: 44px; font-size: 14px; font-weight: 700; margin-block-start: 18px; color: #f7f8fa; text-decoration: none; }
.feature-link:hover { text-decoration: underline; }
.feature-link svg { inline-size: 18px; block-size: 18px; }
.art-caption { position: absolute; z-index: 2; inset-inline-end: 20px; inset-block-end: 17px; font-size: 10px; color: #d2e3fa; }
.market-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-block: 20px 36px; }
.market-link { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px 16px; padding: 24px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; text-decoration: none; }
.market-link:hover { border-color: var(--primary); }
.market-code { color: var(--muted-foreground); font-size: 12px; padding-block-start: 7px; }
.market-link strong { color: var(--foreground); font-size: 25px; line-height: 1.2; letter-spacing: -.025em; }
.market-detail { display: block; color: var(--muted-foreground); font-size: 12px; margin-block-start: 8px; }
.view { grid-column: 2; font-size: 14px; margin-block-start: 10px; }
.market-switch { display: flex; gap: 5px; padding: 5px; background: var(--muted); border: 1px solid var(--border); border-radius: 14px; margin-block: 20px; }
.market-switch a { display: flex; align-items: center; justify-content: center; gap: 10px; min-block-size: 44px; padding: 8px 13px; flex: 1; border-radius: 10px; color: var(--muted-foreground); text-decoration: none; font-size: 14px; }
.market-switch a[aria-current] { background: var(--foreground); color: var(--background); font-weight: 700; }
.market-switch span { font-size: 10px; border: 1px solid currentColor; border-radius: 4px; padding: 2px 4px; }
.section-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 20px; }
.section-heading h2 { margin-block: 0 8px; }
.section-heading .back { flex: none; white-space: nowrap; gap: 8px; margin-block-end: 8px; }
.rankings { scroll-margin-block-start: 24px; }
.rankings > h2 { margin-block-end: 10px; }
.rankings > .meta { margin-block-end: 22px; }
.ranking-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 30px 24px; margin: 0 0 48px; padding: 0; list-style: none; }
.ranking-card { position: relative; min-inline-size: 0; }
.card-heading, .card-title { min-inline-size: 0; max-inline-size: 100%; }
.card-art { aspect-ratio: 1.9; border-radius: 16px; margin-block-end: 14px; }
.card-art::after { background: none; }
.card-art .sculpture { inline-size: 160px; inset-block-start: 0; inset-inline-end: calc(50% - 80px); }
.card-art .orb { inline-size: 38px; inset-inline-end: 22px; inset-block-end: 14px; }
.rank-badge { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; z-index: 2; display: grid; place-items: center; min-inline-size: 32px; block-size: 32px; padding-inline: 6px; border-radius: 10px; background: #151920e8; color: #fff; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.art-1 { background: linear-gradient(135deg, #8c4134, #d18b60); }
.art-1 .sculpture { transform: rotate(35deg); }
.art-1 .sculpture i { border-color: #fff1b79c; background: linear-gradient(135deg, #ffe5aa, #e3aa65 50%, #ab6447); border-radius: 42% 10%; }
.art-2 { background: linear-gradient(135deg, #205b58, #2c9c91); }
.art-2 .sculpture { transform: rotate(-35deg); }
.art-2 .sculpture i { border-color: #c4ffda90; background: linear-gradient(135deg, #dbffe3, #81d0ba 50%, #319a8a); border-radius: 20%; }
.art-3 { background: linear-gradient(135deg, #482831, #a45a59); }
.art-3 .sculpture { transform: rotate(15deg); }
.art-3 .sculpture i { border-color: #ffccbba0; background: linear-gradient(135deg, #ffd8ba, #c7836f 50%, #a55150); border-radius: 50%; }
.art-4 { background: linear-gradient(135deg, #3e367a, #8071ac); }
.art-4 .sculpture i { border-color: #ebd6ff90; background: linear-gradient(135deg, #e5d9ff, #b4a5e3 50%, #8273b9); border-radius: 17% 42%; }
.art-5 { background: linear-gradient(135deg, #803a5c, #c77e9d); }
.art-5 .sculpture { transform: rotate(45deg); }
.art-5 .sculpture i { border-color: #ffdcec90; background: linear-gradient(135deg, #ffe2ed, #e59dbd 50%, #bf6a97); border-radius: 35%; }
.card-title h3 { font-size: 18px; line-height: 1.25; margin: 0; min-block-size: 48px; }
.card-title a { display: inline-flex; align-items: center; min-inline-size: 0; max-inline-size: 100%; min-block-size: 44px; color: var(--foreground); text-decoration: none; overflow-wrap: anywhere; }
.card-title a:hover { color: var(--primary); text-decoration: underline; }
.card-title p { color: var(--muted-foreground); font-size: 13px; margin: 3px 0 0; overflow-wrap: anywhere; }
.card-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-block: 16px 10px; }
.card-metrics > div:last-child { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; }
dt { font-size: 12px; line-height: 1.5; color: var(--muted-foreground); }
dd { margin: 2px 0 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.card-metrics dd { font-size: 13px; }
.card-metrics dd.score { font-size: 20px; font-weight: 700; line-height: 1.4; }
time { font-variant-numeric: tabular-nums; }
.score-bar { display: block; inline-size: 100%; block-size: 6px; margin-block: 12px; border: 0; border-radius: 4px; background: var(--muted); overflow: hidden; }
meter.score-bar { appearance: none; }
meter.score-bar::-webkit-meter-bar { block-size: 6px; border: 0; border-radius: 4px; background: var(--muted); }
meter.score-bar::-webkit-meter-optimum-value { background: var(--primary); border-radius: 4px; }
meter.score-bar::-moz-meter-bar { background: var(--primary); border-radius: 4px; }
.score-bar meter { appearance: none; display: block; inline-size: 100%; block-size: 6px; border: 0; }
.score-bar meter::-webkit-meter-bar { block-size: 6px; border: 0; background: var(--muted); }
.score-bar meter::-webkit-meter-optimum-value { background: var(--primary); }
.score-bar meter::-moz-meter-bar { background: var(--primary); }
.card-sources { border-bottom: 1px solid var(--border); margin-block-start: 8px; font-size: 13px; }
summary { cursor: pointer; min-block-size: 44px; padding-block: 10px; color: var(--primary); }
.card-sources summary { font-size: 12px; }
.sources { list-style: none; padding: 0; margin: 0 0 16px; overflow-wrap: anywhere; }
.sources li + li { margin-block-start: 10px; }
.sources a { display: inline-flex; align-items: center; min-block-size: 44px; font-size: 13px; line-height: 1.6; }
.source-date { display: block; color: var(--muted-foreground); font-size: 11px; }
.roundup-link { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 32px; border-block: 1px solid var(--border); padding-block: 28px; margin-block: 36px; }
.roundup-link h2 { margin: 0; }
.roundup-link p { color: var(--muted-foreground); margin: 8px 0 0; max-inline-size: 65ch; }
.roundup-link > a { grid-column: 2; grid-row: 1 / 3; }
.roundup-link .feature-link { color: var(--primary); margin-block-start: 0; }
.roundup-link a, .issue-date a, .issue-archive a, .back, .method-note > a { display: inline-flex; align-items: center; min-block-size: 44px; }
.back { font-size: 14px; margin-block-end: 24px; }
.game-hero { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 44px; margin-block-end: 32px; }
.game-hero > .art { aspect-ratio: 1.4; border-radius: var(--radius); }
.game-hero > .art .sculpture { inset-inline-end: calc(50% - 120px); inset-block-start: calc(50% - 120px); }
.game-art { min-inline-size: 0; }
.game-art .card-art { aspect-ratio: 1.4; border-radius: var(--radius); }
.game-art .sculpture { inline-size: 240px; inset-inline-end: calc(50% - 120px); inset-block-start: calc(50% - 120px); }
.game-art .meta { margin: 0; }
.game-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-block: 28px; margin-block: 28px 36px; border-block: 1px solid var(--border); }
.game-facts > div:last-child { grid-column: 1 / -1; }
.game-facts dd { font-size: 20px; }
.game-facts .sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; margin-block-start: 12px; }
.game-facts .sources li + li { margin-block-start: 0; }
.prose { max-inline-size: 68ch; overflow-wrap: anywhere; line-height: 1.75; }
.prose p, .prose li { color: var(--muted-foreground); }
.prose strong { color: var(--foreground); }
.prose a { overflow-wrap: anywhere; }
.prose h2 { margin-block: 36px 14px; }
.prose table { border-collapse: collapse; inline-size: 100%; font-size: 14px; }
.prose th, .prose td { padding: 10px; text-align: start; border-bottom: 1px solid var(--border); }
.prose .align-left { text-align: left; }
.prose .align-center { text-align: center; }
.prose .align-right { text-align: right; }
.method-note { padding-block: 28px; margin-block: 32px; border-block: 1px solid var(--border); }
.method-note h2 { margin-block-start: 0; }
.confidence-notes ol { padding-inline-start: 24px; }
.confidence-notes li { margin-block-end: 24px; }
.confidence-notes h3 { font-size: 17px; margin: 0; }
.confidence-notes h3 a { display: inline-flex; min-block-size: 44px; align-items: center; }
.confidence-notes p { margin-block: 4px 0; }
.faq { margin-block-start: 32px; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { padding-block: 16px; }
.reading-layout { max-inline-size: 68ch; margin-inline: auto; }
.article-header { padding-block: 12px 24px; border-bottom: 1px solid var(--border); margin-block-end: 28px; }
.article-header h1 { max-inline-size: 22ch; }
.sample { padding: 16px 20px; background: var(--notice); color: var(--notice-ink); border: 1px solid var(--border); border-radius: 12px; margin-block-end: 28px; }
.site-footer { padding-block: 24px 32px; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: 13px; }
.site-footer p { margin: 8px 0; max-inline-size: 80ch; }
.site-footer .footer-brand { font-weight: 700; font-size: 18px; color: var(--foreground); }
.site-footer a { display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; }
.site-footer nav { margin-block-start: 8px; }
.consent { position: fixed; inset-inline: 0; inset-block-end: var(--nav-reserve); block-size: var(--consent-reserve); max-block-size: min(20vh, 20dvh); z-index: 6; display: flex; align-items: center; justify-content: center; gap: 16px; background: var(--card); border-block-start: 1px solid var(--primary); padding: 6px max(20px, env(safe-area-inset-right)) 6px max(20px, env(safe-area-inset-left)); font-size: 14px; line-height: 1.4; }
.consent-copy { display: flex; align-items: center; gap: 8px; min-inline-size: 0; }
.consent-copy p { margin: 0; }
.consent a { display: inline-flex; align-items: center; min-inline-size: 44px; min-block-size: 44px; flex: none; }
.consent-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; flex: none; }
.consent button { white-space: nowrap; }
/* Keep the home decision within the first view without changing editorial copy. */
.page-home main { padding-block-start: 24px; }
.page-home .hero { align-items: start; padding-block-end: 24px; }
.page-home .hero-intro { display: flex; flex-direction: column; align-items: stretch; }
.page-home .hero-intro h1 { order: -3; }
.page-home .market-switch { order: -2; margin-block: 0 8px; }
.page-home .home-rankings { order: -1; align-self: flex-start; margin-block-end: 8px; }
.page-home .feature, .page-home .feature-content { min-block-size: 300px; }
.bottom-nav { display: none; }
@media (max-width: 1100px) {
  .shell, .wrap { inline-size: calc(100% - 48px); }
  .site-header { gap: 8px 16px; }
  .header-nav { gap: 8px 16px; }
  nav { gap: 2px 12px; }
  .hero { gap: 28px; }
  .hero-intro h1 { font-size: 46px; }
  .feature-content { padding: 24px; }
  .feature-content h2 { font-size: 30px; }
  .ranking-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  html:has(.consent) { --consent-reserve: 72px; }
  html { --nav-reserve: calc(73px + env(safe-area-inset-bottom)); scroll-padding-block-start: 16px; }
  .consent { gap: 8px; padding-inline: max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-left)); font-size: 12px; }
  .consent-actions { gap: 4px; }
  .consent button { padding-inline: 8px; }
  a, button, input, summary, [tabindex] { scroll-margin-block-start: 16px; }
  .shell, .wrap { inline-size: calc(100% - 40px); }
  .site-header { min-block-size: 64px; gap: 4px 8px; padding-block: 8px; border-bottom: 0; }
  .brand { font-size: 21px; }
  .brand svg { inline-size: 25px; block-size: 25px; }
  #theme-toggle { margin-inline-start: auto; }
  .header-nav { inline-size: 100%; justify-content: space-between; margin: 0; gap: 0 8px; }
  .header-nav > nav:not(.languages) { display: none; }
  .languages { margin-inline-start: auto; }
  main { padding-block: 16px 36px; }
  h1, .hero-intro h1 { font-size: 36px; line-height: 1.12; letter-spacing: -.035em; }
  h2 { font-size: 25px; }
  .lede { font-size: 16px; }
  .hero { display: block; padding-block: 0 22px; }
  .page-home main { padding-block-start: 12px; }
  .page-home .hero-intro h1 { font-size: 30px; margin-block-end: 12px; }
  .page-home .feature, .page-home .feature-content { min-block-size: 190px; }
  .hero-intro .lede { font-size: 15px; margin-block-end: 12px; }
  .hero-intro .byline { font-size: 11px; margin-block: 8px 12px; }
  .feature { margin-block-start: 20px; min-block-size: 190px; border-radius: 20px; }
  .feature-content { padding: 18px 20px; min-block-size: 190px; }
  .feature-content h2 { font-size: 25px; max-inline-size: 205px; margin-block-start: 12px; }
  .feature-content > p { font-size: 12px; margin-block-start: 5px; }
  .feature-link { font-size: 12px; margin-block-start: 4px; }
  .feature-rank { font-size: 11px; padding: 3px 6px; min-block-size: 24px; }
  .feature .sculpture { inline-size: 145px; inset-inline-end: -18px; inset-block-start: 12px; }
  .feature .orb { inline-size: 34px; inset-inline-end: 22px; inset-block-end: 30px; }
  .art-caption { inset-inline-end: 12px; inset-block-end: 10px; font-size: 9px; }
  .market-list { gap: 12px; margin-block: 16px 28px; }
  .market-link { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 14px; }
  .market-code { padding: 0; }
  .market-link strong { font-size: 21px; }
  .market-detail { font-size: 11px; }
  .view { font-size: 12px; margin-block-start: 8px; }
  .section-heading { align-items: start; flex-direction: column; gap: 0; }
  .ranking-cards { gap: 26px 14px; margin-block-end: 32px; }
  .card-art { aspect-ratio: 1.15; border-radius: 14px; margin-block-end: 12px; }
  .card-art .sculpture { inline-size: 116px; inset-block-start: 15px; inset-inline-end: calc(50% - 58px); }
  .card-art .sculpture i { transform: translate(-17px, -17px); }
  .card-art .sculpture i:nth-child(2) { transform: translate(-6px, -6px); }
  .card-art .sculpture i:nth-child(3) { transform: translate(6px, 6px); }
  .card-art .sculpture i:nth-child(4) { transform: translate(17px, 17px); box-shadow: inset 0 0 0 16px #d8f9fb25; }
  .card-art .orb { inline-size: 28px; inset-inline-end: 14px; inset-block-end: 10px; }
  .rank-badge { inset-block-start: 8px; inset-inline-start: 8px; min-inline-size: 28px; block-size: 28px; font-size: 12px; border-radius: 8px; }
  .card-title h3 { font-size: 16px; line-height: 1.3; min-block-size: 62px; }
  .card-title p { font-size: 12px; }
  .card-metrics { gap: 8px; margin-block: 12px 8px; }
  .card-metrics dt { font-size: 11px; }
  .card-metrics dd { font-size: 12px; }
  .card-metrics dd.score { font-size: 18px; }
  .card-metrics > div:last-child { flex-wrap: wrap; gap: 0 6px; }
  .card-sources summary { font-size: 12px; }
  .sources a { font-size: 12px; }
  .roundup-link { display: block; padding-block: 24px; margin-block: 28px; }
  .roundup-link > a { margin-block-start: 10px; }
  .game-hero { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .game-hero > .art { aspect-ratio: 1.9; }
  .game-hero > .art .sculpture { inline-size: 160px; inset-inline-end: calc(50% - 80px); inset-block-start: calc(50% - 80px); }
  .game-art .card-art { aspect-ratio: 1.9; }
  .game-art .sculpture { inline-size: 160px; inset-inline-end: calc(50% - 80px); inset-block-start: calc(50% - 80px); }
  .game-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .game-facts .sources { grid-template-columns: 1fr; }
  .game-facts dd { font-size: 18px; }
  .prose { font-size: 16px; }
  .prose table { font-size: 12px; }
  .prose th, .prose td { padding: 6px; }
  .article-header { padding-block: 0 16px; }
  .site-footer { font-size: 12px; padding-block: 20px; }
  .bottom-nav { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 5; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--card); border-top: 1px solid var(--border); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -5px 20px #07090b2b; }
  .bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-block-size: 48px; min-inline-size: 44px; color: var(--muted-foreground); font-size: 11px; line-height: 1.3; letter-spacing: .01em; }
  .bottom-nav a[aria-current], .bottom-nav a.active { color: var(--primary); }
  .bottom-nav svg { inline-size: 22px; block-size: 22px; }
}
@media (max-width: 350px) {
  .shell, .wrap { inline-size: calc(100% - 32px); }
  h1, .hero-intro h1 { font-size: 32px; }
  .brand { font-size: 19px; }
  #theme-toggle { font-size: 11px; padding-inline: 8px; }
  .market-link { padding: 12px; }
  .market-link strong { font-size: 19px; }
  .feature-content { padding: 16px; }
  .feature-content h2 { font-size: 23px; max-inline-size: 185px; }
  .feature .sculpture { inset-inline-end: -38px; }
  .ranking-cards { gap: 24px 12px; }
  .card-title h3 { font-size: 15px; }
}
@media (max-height: 500px) {
  .consent { font-size: 12px; gap: 8px; }
  .page-home main { padding-block-start: 16px; }
  .page-home .hero-intro { display: flex; flex-direction: column; }
  .page-home .market-switch { order: -4; margin-block: 0 8px; }
  .page-home .home-rankings { order: -4; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

/* Approved brand media keeps the existing art frame and reserves its geometry. */
.brand-art picture,.brand-art img{display:block;width:100%;height:100%;object-fit:contain}
.provider-badge{display:block;width:96px;max-height:64px}.provider-badge img{display:block;max-width:100%;height:auto;max-height:64px;object-fit:contain}