@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@500;600;700;800&display=swap');

:root {
  --desk: #111827;
  --desk-deep: #0b1020;
  --panel: #151f31;
  --panel-raised: #19253a;
  --panel-inset: #0e1626;
  --screen: #2563eb;
  --screen-bright: #4f80f5;
  --saffron: #ff9933;
  --paper: #f4f7fb;
  --copy: #c7d0df;
  --meta: #8e9aaf;
  --quiet: #5e6b80;
  --line-soft: rgba(185, 203, 231, .09);
  --line: rgba(185, 203, 231, .16);
  --line-strong: rgba(185, 203, 231, .29);
  --focus: rgba(79, 128, 245, .5);
  --danger: #f87f79;
  --success: #55d6a3;
  --wrap: 1220px;
  --r-sm: 5px;
  --r-md: 10px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--desk); color: var(--copy); font: 400 16px/1.65 Inter, sans-serif; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .17; background-image: linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px); background-size: 32px 32px; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
a { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--paper); font-family: Sora, sans-serif; line-height: 1.12; letter-spacing: -.035em; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.wrap { width: min(calc(100% - 48px), var(--wrap)); margin-inline: auto; }
.sr-only { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 8px 12px; background: var(--paper); color: var(--desk); transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.site-header { position: sticky; top: 0; z-index: 20; background: rgba(17, 24, 39, .96); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.topline { min-height: 82px; display: flex; align-items: center; gap: 32px; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: transparent; font: 700 18px/1 Sora, sans-serif; letter-spacing: -.04em; cursor: pointer; }
.brand strong { color: var(--screen-bright); }
.brand-mark { position: relative; width: 29px; height: 25px; display: grid; grid-template-columns: repeat(3, 7px); align-items: end; gap: 3px; }
.brand-mark i { display: block; background: var(--screen); height: 12px; }
.brand-mark i:nth-child(2) { height: 25px; background: var(--saffron); }
.brand-mark i:nth-child(3) { height: 18px; }
.edition { margin: 0 auto 0 0; color: var(--meta); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.edition span { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--saffron); }
.date-stamp { margin: 0; color: var(--quiet); font-size: 12px; }
.tab-dock { display: grid; grid-template-columns: repeat(5, 1fr); }
.tab-dock button { position: relative; height: 56px; display: flex; justify-content: center; align-items: center; gap: 10px; border: 0; border-left: 1px solid var(--line-soft); background: transparent; color: var(--meta); cursor: pointer; font-size: 14px; font-weight: 600; }
.tab-dock button:last-child { border-right: 1px solid var(--line-soft); }
.tab-dock button::after { content: ""; position: absolute; right: 24px; bottom: -1px; left: 24px; height: 3px; background: var(--saffron); transform: scaleX(0); transition: transform .2s ease-out; }
.tab-dock button span { font-size: 10px; color: var(--quiet); letter-spacing: .08em; }
.tab-dock button:hover, .tab-dock button.active { color: var(--paper); background: rgba(255,255,255,.018); }
.tab-dock button.active::after { transform: scaleX(1); }

.tab-panel { animation: panel-in .35s ease-out; min-height: 60vh; }
.tab-panel[hidden] { display: none; }
@keyframes panel-in { from { opacity: 0; transform: translateY(7px); } }
.ticker { min-height: 48px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--line-soft); font-size: 12px; }
.ticker span { color: var(--saffron); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.ticker p { margin: 0; overflow: hidden; color: var(--meta); text-overflow: ellipsis; white-space: nowrap; }
.ticker b { margin-left: auto; color: var(--quiet); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.lead-story { min-height: 590px; display: grid; grid-template-columns: 1.14fr .86fr; border-bottom: 1px solid var(--line); }
.lead-visual { position: relative; overflow: hidden; min-height: 510px; margin: 40px 0; background: var(--panel-inset); }
.lead-visual::after, .game-art::after, .news-lead > img + div::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(37,99,235,.05), rgba(8,14,26,.1)); }
.lead-visual img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.06); }
.score-plate { position: absolute; right: 0; bottom: 0; z-index: 1; width: 154px; padding: 16px; background: var(--screen); color: white; }
.score-plate span { display: block; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.25); font-size: 9px; text-transform: uppercase; letter-spacing: .13em; }
.score-plate span span { display: inline; padding: 0; border: 0; color: var(--saffron); }
.score-plate strong { display: block; font: 700 52px/.95 Sora, sans-serif; letter-spacing: -.08em; }
.score-plate small { color: #dce8ff; font-size: 11px; }
.lead-copy { display: flex; flex-direction: column; justify-content: center; padding: 56px 0 56px 64px; }
.eyebrow, .tag { color: var(--screen-bright); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }
.eyebrow i { display: inline-block; width: 18px; height: 1px; margin: 0 8px 3px; background: var(--line-strong); }
.lead-copy h1 { max-width: 500px; margin-bottom: 24px; font-size: clamp(42px, 4.25vw, 67px); }
.dek { max-width: 510px; margin-bottom: 26px; color: var(--copy); font-size: 17px; }
.story-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--meta); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.story-meta > * + *::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 12px 3px 0; background: var(--saffron); }
.text-action, .quiet-action { border: 0; background: transparent; cursor: pointer; }
.text-action { align-self: flex-start; margin-top: 46px; padding: 0 0 8px; border-bottom: 1px solid var(--line-strong); color: var(--paper); font-size: 13px; font-weight: 700; }
.text-action span { margin-left: 12px; color: var(--saffron); }
.section-block { padding-block: 80px; border-bottom: 1px solid var(--line); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.section-heading h2 { margin: 0; font-size: clamp(28px, 3vw, 40px); }
.section-heading .eyebrow { margin-bottom: 8px; }
.quiet-action { padding: 8px 0; color: var(--meta); font-size: 12px; }
.quiet-action:hover { color: var(--paper); }
.story-grid { display: grid; grid-template-columns: 1.25fr .75fr .75fr; gap: 24px; }
.story-card { border: 1px solid var(--line); background: var(--panel); }
.story-card img { width: 100%; aspect-ratio: 1.36; object-fit: cover; filter: saturate(.72); transition: filter .2s ease-out; }
.story-card:hover img { filter: saturate(1); }
.story-card > div { padding: 22px; }
.story-card h3 { font-size: 20px; }
.story-card-wide h3 { font-size: 27px; }
.story-card p:not(.tag) { color: var(--meta); font-size: 13px; }
.story-card .story-meta { padding-top: 14px; border-top: 1px solid var(--line-soft); }
.dispatch { display: grid; grid-template-columns: .8fr 1fr 1fr; align-items: center; gap: 48px; }
.dispatch h2 { margin: 0; font-size: 30px; }
.dispatch > p { margin: 0; color: var(--meta); font-size: 14px; }
.newsletter-form { display: flex; }
.newsletter-form input { min-width: 0; flex: 1; border: 1px solid var(--line); border-right: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); background: var(--panel-inset); padding: 13px 14px; color: var(--paper); }
.newsletter-form button { border: 1px solid var(--screen); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--screen); padding: 0 20px; color: white; font-weight: 700; cursor: pointer; }

.panel-pad { padding-block: 72px 96px; }
.page-intro { max-width: 900px; margin-bottom: 56px; }
.page-intro h1 { margin-bottom: 22px; font-size: clamp(48px, 6vw, 78px); }
.page-intro > p:last-child { max-width: 630px; margin: 0; color: var(--meta); font-size: 17px; }
.split-intro { max-width: none; display: grid; grid-template-columns: 1.5fr 1fr; align-items: end; gap: 80px; }
.split-intro h1 { margin: 0; }
.split-intro > p { padding-bottom: 10px; }
.filter-row { display: flex; gap: 8px; margin-bottom: 28px; }
.filter { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--meta); font-size: 12px; cursor: pointer; }
.filter:hover, .filter.active { border-color: var(--screen); background: var(--screen); color: white; }
.game-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 18px; }
.game-card { position: relative; min-width: 0; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.game-card[hidden] { display: none; }
.game-art { position: relative; overflow: hidden; margin-bottom: 18px; background: var(--panel); }
.game-art img { width: 100%; aspect-ratio: .84; object-fit: cover; filter: saturate(.7) contrast(1.04); transition: transform .35s ease-out, filter .35s ease-out; }
.game-card:hover img { transform: scale(1.025); filter: saturate(.95); }
.game-art span { position: absolute; top: 12px; left: 12px; z-index: 1; display: grid; width: 30px; height: 30px; place-items: center; background: rgba(11,16,32,.82); color: var(--saffron); font: 700 10px Sora, sans-serif; }
.game-card > p { margin-bottom: 8px; color: var(--screen-bright); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.game-card h2 { min-height: 49px; margin-bottom: 10px; font-size: 20px; }
.game-card small { display: block; min-height: 62px; color: var(--meta); font-size: 12px; line-height: 1.55; }
.game-card > div:last-child { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.game-card b { color: var(--paper); font: 700 23px Sora, sans-serif; }
.game-card em { color: var(--quiet); font-size: 10px; font-style: normal; text-transform: uppercase; letter-spacing: .1em; }

.news-layout { display: grid; grid-template-columns: .86fr 1.14fr; gap: 48px; }
.news-lead { background: var(--panel); border: 1px solid var(--line); }
.news-lead > img { width: 100%; aspect-ratio: 1.35; object-fit: cover; filter: saturate(.65); }
.news-lead > div { position: relative; padding: 28px; }
.news-lead h2 { font-size: 32px; }
.news-lead p:not(.tag) { color: var(--meta); font-size: 14px; }
.news-list { border-top: 1px solid var(--line); }
.news-list article { display: grid; grid-template-columns: 35px 1fr auto; gap: 20px; padding: 27px 0; border-bottom: 1px solid var(--line); }
.news-list article > span { color: var(--saffron); font: 600 10px Sora, sans-serif; }
.news-list h2 { margin-bottom: 8px; font-size: 20px; }
.news-list p { margin-bottom: 0; color: var(--meta); font-size: 13px; }
.news-list time { color: var(--quiet); font-size: 10px; text-transform: uppercase; }

.review-feature { position: relative; display: grid; grid-template-columns: .95fr 1.05fr; border: 1px solid var(--line); background: var(--panel); }
.review-feature > img { width: 100%; height: 100%; min-height: 500px; object-fit: cover; filter: saturate(.72); }
.review-feature > div:nth-child(2) { padding: 48px 56px; }
.review-feature h2 { font-size: 39px; }
.review-feature p:not(.eyebrow) { color: var(--meta); }
.review-feature blockquote { margin: 30px 0; padding-left: 20px; border-left: 2px solid var(--saffron); color: var(--paper); font: 600 18px/1.5 Sora, sans-serif; }
.review-feature dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.review-feature dt { color: var(--quiet); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.review-feature dd { margin: 4px 0 0; color: var(--paper); font-size: 13px; }
.review-score { position: absolute; top: 0; right: 0; width: 118px; background: var(--screen); padding: 14px; }
.review-score span, .review-score small { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.review-score strong { display: block; color: white; font: 700 42px Sora, sans-serif; letter-spacing: -.07em; }
.review-list { display: grid; gap: 0; padding-block: 48px; }
.review-list article { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 28px; padding: 18px 0; border-top: 1px solid var(--line-soft); }
.review-list img { width: 130px; aspect-ratio: 1.4; object-fit: cover; filter: saturate(.55); }
.review-list h2 { margin-bottom: 6px; font-size: 22px; }
.review-list p:not(.tag) { margin: 0; color: var(--meta); font-size: 13px; }
.review-list article > b { color: var(--paper); font: 700 34px Sora, sans-serif; }
.score-guide { padding-top: 0; }
.score-guide > div { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.score-guide article { padding: 26px; border-right: 1px solid var(--line); }
.score-guide article:last-child { border: 0; }
.score-guide b { color: var(--saffron); font: 700 25px Sora, sans-serif; }
.score-guide h3 { margin: 12px 0 8px; font-size: 17px; }
.score-guide p { margin: 0; color: var(--meta); font-size: 12px; }

.contact-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; }
.about-panel { padding: 40px; border: 1px solid var(--line); background: var(--panel); }
.about-panel h2 { font-size: 33px; }
.about-panel > p:not(.eyebrow) { color: var(--meta); font-size: 14px; }
.about-panel > img { width: 100%; margin-top: 32px; aspect-ratio: 1.7; object-fit: cover; filter: saturate(.6); }
.desk-note { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.desk-note > span { display: grid; width: 46px; height: 46px; flex: none; place-items: center; background: var(--saffron); color: var(--desk); font: 800 11px Sora, sans-serif; }
.desk-note p { margin: 0; color: var(--meta); font-size: 11px; }
.desk-note b { display: block; color: var(--paper); font-size: 12px; }
.contact-form { padding: 40px; border: 1px solid var(--line); }
.form-heading { margin-bottom: 30px; }
.form-heading h2 { margin: 0; font-size: 33px; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form label { display: block; margin-bottom: 19px; color: var(--meta); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.contact-form input, .contact-form textarea, .contact-form select { display: block; width: 100%; margin-top: 8px; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-inset); color: var(--paper); text-transform: none; letter-spacing: normal; transition: border-color .15s ease-out; }
.contact-form textarea { resize: vertical; }
.contact-form input:hover, .contact-form textarea:hover, .contact-form select:hover { border-color: var(--line-strong); }
.check { display: flex !important; align-items: flex-start; gap: 10px; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; }
.check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--screen); }
.check a { color: var(--screen-bright); }
.submit-button { width: 100%; display: flex; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--screen); border-radius: var(--r-sm); background: var(--screen); color: white; font-weight: 700; cursor: pointer; }
.submit-button:hover { background: var(--screen-bright); }
.submit-button i { font-style: normal; }
.faq { border-bottom: 0; }
.accordion { border-top: 1px solid var(--line); }
.accordion article { border-bottom: 1px solid var(--line); }
.accordion button { width: 100%; display: flex; justify-content: space-between; padding: 23px 0; border: 0; background: transparent; text-align: left; cursor: pointer; font: 600 16px Sora, sans-serif; }
.accordion button:hover { color: var(--screen-bright); }
.accordion button i { color: var(--saffron); font: 400 24px/1 Inter, sans-serif; }
.accordion article > div { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease-out; }
.accordion article > div p { overflow: hidden; max-width: 700px; margin: 0; color: var(--meta); font-size: 14px; }
.accordion article.open > div { grid-template-rows: 1fr; }
.accordion article.open > div p { margin-bottom: 23px; }

.site-footer { border-top: 1px solid var(--line); background: var(--desk-deep); }
.site-footer .wrap { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer button, .site-footer a { padding: 0; border: 0; background: transparent; color: var(--meta); font-size: 11px; text-decoration: none; cursor: pointer; }
.site-footer button:hover, .site-footer a:hover { color: var(--paper); }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 50; width: min(360px, calc(100% - 48px)); display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; padding: 16px; border: 1px solid rgba(85,214,163,.35); border-radius: var(--r-md); background: #14251f; transform: translateY(130%); opacity: 0; transition: transform .25s ease-out, opacity .25s ease-out; }
.toast.show { transform: none; opacity: 1; }
.toast > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: rgba(85,214,163,.13); color: var(--success); }
.toast b { color: var(--paper); font-size: 13px; }
.toast p { margin: 1px 0 0; color: var(--meta); font-size: 11px; }
.toast button { border: 0; background: transparent; color: var(--meta); cursor: pointer; font-size: 20px; }

.legal-page { min-height: 100vh; }
.legal-header { border-bottom: 1px solid var(--line); }
.legal-header .wrap { min-height: 82px; display: flex; align-items: center; justify-content: space-between; }
.legal-header a { color: var(--meta); font-size: 12px; text-decoration: none; }
.legal-header a:hover { color: var(--paper); }
.legal-main { width: min(calc(100% - 48px), 780px); margin: 0 auto; padding: 72px 0 100px; }
.legal-main h1 { font-size: clamp(42px, 7vw, 70px); }
.legal-meta { padding-bottom: 24px; border-bottom: 1px solid var(--line); color: var(--meta); font-size: 12px; }
.legal-main article { padding-top: 28px; }
.legal-main article h2 { margin-top: 34px; font-size: 22px; }
.legal-main article p, .legal-main article li { color: var(--meta); font-size: 14px; }
.legal-main article a { color: var(--screen-bright); }

@media (max-width: 900px) {
  .lead-story { grid-template-columns: 1fr; }
  .lead-visual { min-height: 450px; margin-bottom: 0; }
  .lead-copy { padding: 48px 0; }
  .story-grid { grid-template-columns: 1fr 1fr; }
  .story-card-wide { grid-column: span 2; }
  .dispatch { grid-template-columns: 1fr 1fr; }
  .dispatch .newsletter-form { grid-column: span 2; }
  .game-grid { grid-template-columns: repeat(3, 1fr); }
  .news-layout, .contact-layout { grid-template-columns: 1fr; }
  .review-feature { grid-template-columns: 1fr; }
  .review-feature > img { min-height: 380px; }
  .score-guide > div { grid-template-columns: 1fr 1fr; }
  .score-guide article:nth-child(2) { border-right: 0; }
  .score-guide article { border-bottom: 1px solid var(--line); }
  .score-guide article:nth-child(n+3) { border-bottom: 0; }
}

@media (max-width: 640px) {
  .wrap { width: min(calc(100% - 28px), var(--wrap)); }
  .topline { min-height: 64px; }
  .edition, .date-stamp { display: none; }
  .tab-dock { width: 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tab-dock button { height: 50px; padding-inline: 2px; font-size: 11px; }
  .tab-dock button span { display: none; }
  .tab-dock button::after { right: 14px; left: 14px; }
  .ticker b { display: none; }
  .lead-visual { min-height: 390px; margin-top: 24px; }
  .score-plate { width: 126px; }
  .score-plate strong { font-size: 42px; }
  .lead-copy h1 { font-size: 40px; }
  .text-action { margin-top: 30px; }
  .section-block { padding-block: 56px; }
  .story-grid { grid-template-columns: 1fr; }
  .story-card-wide { grid-column: auto; }
  .dispatch { grid-template-columns: 1fr; gap: 22px; }
  .dispatch .newsletter-form { grid-column: auto; }
  .panel-pad { padding-block: 48px 72px; }
  .page-intro { margin-bottom: 40px; }
  .page-intro h1 { font-size: clamp(33px, 9.3vw, 40px); }
  .split-intro { grid-template-columns: 1fr; gap: 20px; }
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }
  .game-card h2 { font-size: 16px; min-height: 39px; }
  .game-card small { min-height: 75px; font-size: 11px; }
  .news-list article { grid-template-columns: 25px 1fr; }
  .news-list time { display: none; }
  .news-lead h2 { font-size: 27px; }
  .review-feature > div:nth-child(2), .about-panel, .contact-form { padding: 28px 22px; }
  .review-feature h2 { padding-right: 70px; font-size: 30px; }
  .review-feature dl { grid-template-columns: 1fr; }
  .review-list article { grid-template-columns: 90px 1fr auto; gap: 14px; }
  .review-list img { width: 90px; }
  .review-list h2 { font-size: 16px; }
  .review-list p:not(.tag) { display: none; }
  .review-list article > b { font-size: 23px; }
  .score-guide > div { grid-template-columns: 1fr; }
  .score-guide article { border-right: 0; border-bottom: 1px solid var(--line) !important; }
  .score-guide article:last-child { border-bottom: 0 !important; }
  .field-pair { grid-template-columns: 1fr; gap: 0; }
  .site-footer .wrap { align-items: flex-start; flex-direction: column; padding-block: 24px; }
  .legal-main { width: calc(100% - 32px); padding-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}