/* Rift Record for the marketing site and its subpages: the app's tokens,
   faces and devices (Design/RiftRecord, /matches/rift.css). Loaded LAST on
   every page, after styles.css and any inline style, so it only changes the
   look: Rift Blue ground with hex circuitry, DIN titles, Nunito text,
   M PLUS Rounded numbers, gold as chrome, square plates, one border. */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Cinzel:wght@700&family=M+PLUS+Rounded+1c:wght@800;900&family=Nunito:wght@500;600;700;800;900&display=swap");

:root {
  --ground: #030812; --ground-hi: #091428; --ground-deep: #02050B; --ground-light: #0F2440; --arcane: #0AC8B9;
  --gold-c: #C8AA6E; --gold-light: #F0E6D2; --gold-pale: #FBF1D8; --gold-mid: #D8B56E; --gold-dark: #785A28; --victory: #F4C660; --lost: #E84057;
  --ink: #F0E6D2; --ink2: #CFC8B8; --mute: #A09B8C; --dim: #5B5A56; --control: #B9B3A6; --tab-rest: #8C887F; --hair: rgba(240,230,210,.09);
  --f-display: "Cinzel", Georgia, serif;
  --f-title: "DIN Condensed", "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-num: "M PLUS Rounded 1c", "Nunito", system-ui, sans-serif;
  --f-read: "Nunito", system-ui, -apple-system, sans-serif;
  --rule: linear-gradient(90deg, #785A28, #F0E6D2, #785A28);
  --frame: linear-gradient(180deg, #C8AA6E, #785A28);
  --gold-type: linear-gradient(180deg, #F6EBD3 10%, #C8AA6E 65%, #8C6A33 100%);
  --plate: linear-gradient(180deg, #0c1a33, #050c18);
  --hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='97'%3E%3Cpath d='M42 1L83 25L83 72L42 96L1 72L1 25Z M42 25L62 37 M42 25L42 1 M22 37L42 25 M62 37L62 60L83 72' fill='none' stroke='%236EBEE6' stroke-opacity='.2' stroke-width='.8'/%3E%3Cg fill='%230AC8B9' fill-opacity='.3'%3E%3Ccircle cx='62' cy='37' r='1.6'/%3E%3Ccircle cx='22' cy='37' r='1.6'/%3E%3Ccircle cx='62' cy='60' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  --hex-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='32.33'%3E%3Cpath d='M14 .5L27.5 8.3L27.5 24L14 31.8L.5 24L.5 8.3Z' fill='none' stroke='%23C8AA6E' stroke-opacity='.08' stroke-width='.75'/%3E%3C/svg%3E");
  /* the old tokens, pointed at the new palette, so untouched rules follow */
  --rift-gold: #D8B56E; --rift-gold-glow: rgba(200,170,110,0); --accent: #D8B56E; --accent-glow: rgba(200,170,110,0);
  --rift-font-display: var(--f-title); --rift-font-rounded: var(--f-read); --page-bg: #030812;
  color-scheme: dark;
}

/* ------------------------------------------------------------- ground */
html body { background: var(--ground); color: var(--ink); font-family: var(--f-read); }
.starfield, .aurora, .truth-aurora, .row-aurora, .pricing-aurora, .founder2-aurora, .roadmap-aurora, .finale-aurora, .founder2-orb-glow, .roadmap-btn-glow { display: none !important; }
.aether-field { background: radial-gradient(120% 55% at 50% -6%, #0F2440 0%, rgba(9,20,40,.6) 50%, rgba(9,20,40,0) 100%), linear-gradient(180deg, #091428 0%, #030812 55%, #02050b 100%) !important; opacity: 1 !important; }
::selection { background: rgba(200,170,110,.35); color: #fff; }
a { text-underline-offset: 3px; }

/* --------------------------------------------------------- devices */
/* Section eyebrows: gold words between two gold rules ending in diamonds. */
.eyebrow, .hero-eyebrow, .row-eyebrow, .finale-eyebrow, .legal-head .eyebrow, .founder2-copy .eyebrow {
  font-family: var(--f-read) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .02em !important; text-transform: none !important;
  color: var(--gold-mid) !important; text-shadow: none !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }
.eyebrow.centered, .section-head .eyebrow, .finale-eyebrow { display: inline-flex !important; align-items: center; gap: 12px; }
.section-head .eyebrow::before, .section-head .eyebrow::after, .eyebrow.centered::before, .eyebrow.centered::after {
  content: "" !important; display: block !important; width: 44px !important; height: 1px !important; border: 0 !important; transform: none !important;
  background: linear-gradient(90deg, rgba(200,170,110,0), rgba(200,170,110,.7)) !important; opacity: 1 !important; margin: 0 !important; }
.section-head .eyebrow::after, .eyebrow.centered::after { background: linear-gradient(90deg, rgba(200,170,110,.7), rgba(200,170,110,0)) !important; }
.hero-eyebrow .pulse, .founder2-tag-dot, .nav-fresh-dot { width: 6px !important; height: 6px !important; border-radius: 0 !important; transform: rotate(45deg); background: var(--arcane) !important; box-shadow: none !important; animation: none !important; }

/* Titles in the app's condensed face; the one gold word in metal. */
h1, h2, h3, .hero h1, .section-head h2, .truth-h, .row-copy h3, .finale h2, .founder2-copy h2, .legal-head h1, .legal h2 { font-family: var(--f-title) !important; font-weight: 700 !important; letter-spacing: 0 !important; color: var(--ink); }
.g, .hero h1 .alt, .hero h1 .accent, .truth-real em {
  background: var(--gold-type) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; text-shadow: none !important; font-style: normal; }
p, li, .lede { font-family: var(--f-read); }

/* HextechButton */
.nav-cta, .roadmap-btn, .store-btn {
  border-radius: 0 !important; border: 1px solid transparent !important; color: var(--gold-light) !important; box-shadow: inset 0 0 0 1px rgba(200,170,110,.14) !important;
  background: linear-gradient(var(--ground-hi), var(--ground-hi)) padding-box, var(--frame) border-box !important; transition: background .15s; }
.nav-cta:hover, .roadmap-btn:hover, .store-btn:hover { background: linear-gradient(#0c1a33, #0c1a33) padding-box, var(--frame) border-box !important; transform: none !important; }
.nav-cta, .roadmap-btn { font: 700 18px/1 var(--f-title) !important; letter-spacing: .4px !important; text-transform: none !important; padding: 11px 18px 8px !important; }
.store-btn .label .top { color: var(--mute) !important; font-family: var(--f-read) !important; font-weight: 700 !important; letter-spacing: .04em !important; }
.store-btn .label .bot { color: var(--gold-light) !important; font: 700 22px/1 var(--f-title) !important; letter-spacing: .3px !important; padding-top: 2px; }
.store-btn svg { color: var(--gold-light); }
.roadmap-btn-arrow { color: var(--gold-light) !important; }

/* -------------------------------------------------------------- nav */
.nav::before { background: rgba(3,8,18,.82) !important; border-bottom: 1px solid var(--hair) !important; }
.nav-brand .mark { border-radius: 8px !important; box-shadow: none !important; }
.nav-brand .wordmark { font: 700 20px/1 var(--f-title) !important; letter-spacing: .14em !important; color: var(--gold-light) !important; text-transform: uppercase; }
.nav-brand .sub { font-family: var(--f-read) !important; color: var(--mute) !important; letter-spacing: .14em !important; }
.nav-links { gap: 26px !important; }
.nav-links .dot { display: none !important; }
.nav-links a { position: relative; font: 700 20px/1 var(--f-title) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--tab-rest) !important; padding: 10px 0 8px !important; opacity: 1 !important; }
.nav-links a:hover { color: var(--gold-light) !important; }
.nav-links a::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: 0; height: 2px; background: var(--rule); opacity: 0; transition: opacity .15s; }
.nav-links a:hover::after { opacity: 1; }
.nav-links { margin-left: 40px; }
.nav-tools { gap: 24px !important; margin-left: auto; margin-right: 22px; padding-left: 24px; border-left: 1px solid var(--hair) !important; }
.nav-tools a { position: relative; font: 700 20px/1 var(--f-title) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--gold-light) !important; padding: 10px 0 8px; }
.nav-tools a::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: 0; height: 2px; background: var(--rule); opacity: 0; transition: opacity .15s; }
.nav-tools a:hover::after { opacity: 1; }
/* A laptop width holds both groups once the release pill steps aside. */
@media (max-width: 1360px) { .nav-fresh { display: none !important; } .nav-links { gap: 20px !important; margin-left: 28px; } .nav-tools { gap: 20px !important; margin-right: 16px; padding-left: 20px; } }
@media (max-width: 1080px) { .nav-tools { margin: 0; padding: 10px 0 0; border-left: 0 !important; border-top: 1px solid var(--hair); justify-content: center; } .nav-tools a { font-size: 18px !important; } }
.nav-fresh { border-radius: 0 !important; background: rgba(10,200,185,.06) !important; border: 1px solid rgba(10,200,185,.35) !important; color: var(--ink2) !important; font-family: var(--f-read) !important; }
.nav-fresh-text #nav-fresh-when, .nav-fresh-text span { color: var(--arcane) !important; }
.link-recall { border-radius: 0 !important; background: var(--plate) !important; border: 1px solid rgba(200,170,110,.5) !important; }

/* ------------------------------------------------------------- hero */
.hero { isolation: isolate; }
.hero-bg { background: none !important; opacity: 1 !important; border-radius: 0 !important; }
.hero-bg::before { content: ""; position: absolute; inset: 0; opacity: 1 !important; filter: none !important; background: var(--hex) !important; background-position: -16px -30px;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 92%); mask-image: linear-gradient(180deg, #000 30%, transparent 92%); }
.hero-bg::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: auto !important; width: min(62%, 860px); background: url("/matches/art/duel/kai-sa.webp") 50% 22% / cover no-repeat !important; opacity: .42;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%), linear-gradient(180deg, #000 45%, transparent 96%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%), linear-gradient(180deg, #000 45%, transparent 96%); mask-composite: intersect; }
.hero h1 { font-size: clamp(48px, 6.2vw, 84px) !important; line-height: .98 !important; margin-top: 18px !important; text-shadow: 0 2px 24px rgba(2,5,11,.6); }
.hero p.lede { color: var(--ink2) !important; font-weight: 600 !important; }
.rating-stars, .proof-stars, .quote-stars, .finale-stars { color: var(--victory) !important; text-shadow: none !important; letter-spacing: .1em; }
.rating-item .score, .proof-num { font-family: var(--f-num) !important; font-weight: 900 !important; color: var(--ink) !important; }
.rating-item .count, .under-cta, .under-cta .ok { color: var(--mute) !important; font-weight: 700 !important; }
.under-cta .ok::before { color: var(--gold-mid) !important; }
.phone, .row-phone { border-radius: 30px !important; background: #02050b !important; border: 1px solid rgba(200,170,110,.35) !important;
  box-shadow: 0 30px 70px -30px #000, 0 0 0 6px rgba(2,5,11,.9), 0 0 0 7px rgba(200,170,110,.18) !important; }
.phone .screen, .row-screen { border-radius: 24px !important; }
/* Floating facts: the app's banner plate, square, gold edge, condensed words. */
.hero-chip, .row-chip { border-radius: 0 !important; background: rgba(2,5,11,.88) !important; border: 0 !important; box-shadow: inset 0 0 0 1px rgba(200,170,110,.75), 0 18px 40px -16px #000 !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero-chip-mark { border-radius: 0 !important; transform: rotate(45deg); background: var(--arcane) !important; color: transparent !important; width: 8px !important; height: 8px !important; box-shadow: none !important; font-size: 0 !important; }
.hero-chip-text, .hero-chip-lbl, .row-chip-lbl { font-family: var(--f-display) !important; font-size: 11px !important; letter-spacing: 1.3px !important; color: var(--gold-light) !important; text-transform: uppercase; font-weight: 700 !important; }
.hero-chip-lbl { color: var(--victory) !important; }
.hero-chip-num, .row-chip-num { font-family: var(--f-num) !important; font-weight: 900 !important; color: var(--ink) !important; -webkit-text-fill-color: currentColor !important; background: none !important; text-shadow: none !important; }

/* ------------------------------------------------------------ truth */
.truth-h { font-size: clamp(44px, 6vw, 80px) !important; line-height: 1 !important; }
.truth-faded { color: rgba(240,230,210,.32) !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
.truth-real { color: var(--ink) !important; }
.truth-lede { color: var(--ink2) !important; font-weight: 600 !important; }
.howto li { border-radius: 0 !important; background: rgba(9,20,40,.6) !important; border: 1px solid rgba(180,186,197,.2) !important; box-shadow: none !important; }
.howto-num { position: relative; border-radius: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; color: var(--gold-light) !important;
  font: 900 13px/1 var(--f-num) !important; display: grid !important; place-items: center; width: 26px !important; height: 26px !important; isolation: isolate; }
.howto-num::before { content: ""; position: absolute; width: 18px; height: 18px; z-index: -1; transform: rotate(45deg); background: linear-gradient(180deg, #F0E6D2, #785A28); }
.howto-num::after { content: ""; position: absolute; width: 15.5px; height: 15.5px; z-index: -1; transform: rotate(45deg); background: #050c18; }
.howto-t { color: var(--ink2) !important; font-weight: 700 !important; }

/* --------------------------------------------------------- showcase */
.section-head h2 { font-size: clamp(44px, 5.4vw, 72px) !important; line-height: 1 !important; }
.section-head p { color: var(--ink2) !important; font-weight: 600 !important; }
/* One accent for every row: gold, as the app wears it. */
.showcase .row { --row-accent: #C8AA6E !important; --row-glow: rgba(200,170,110,0) !important; }
.row-num { font-family: var(--f-num) !important; font-weight: 900 !important; font-size: 56px !important; letter-spacing: -.01em !important; opacity: 1 !important; margin-bottom: 4px !important;
  background: var(--gold-type) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.row-copy h3 { font-size: clamp(36px, 3.6vw, 52px) !important; line-height: 1 !important; }
.row-copy p { color: var(--ink2) !important; font-weight: 600 !important; }
.row-feats li { color: var(--ink2) !important; font-weight: 700 !important; }
.row-feats-dot { border-radius: 0 !important; transform: rotate(45deg); width: 6px !important; height: 6px !important; background: var(--gold-mid) !important; box-shadow: none !important; }
/* Each phone stands on a faint hex ground instead of a coloured glow. */
.row-stage { isolation: isolate; }
.row-stage::before { content: ""; position: absolute; inset: 6% -10%; z-index: -1; background: radial-gradient(closest-side, rgba(15,36,64,.9), rgba(15,36,64,0)), var(--hex);
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent); mask-image: radial-gradient(closest-side, #000 40%, transparent); pointer-events: none; }

/* ----------------------------------------------------------- extras */
.extra { border-radius: 0 !important; background: linear-gradient(180deg, rgba(15,36,64,.55), rgba(9,20,40,.35)) !important; border: 1px solid rgba(180,186,197,.18) !important; box-shadow: none !important; }
.extra:hover { border-color: rgba(200,170,110,.6) !important; transform: none !important; }
.extra-ic { border-radius: 0 !important; color: var(--gold-light) !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.extra h3 { font-size: 26px !important; margin-top: 8px !important; }
.extra p { color: var(--mute) !important; font-weight: 600 !important; }

/* ---------------------------------------------------------- pricing */
.price-card { border-radius: 0 !important; background: linear-gradient(180deg, rgba(15,36,64,.6), rgba(5,12,24,.8)) !important; border: 1px solid rgba(180,186,197,.22) !important; box-shadow: none !important; }
.price-card-hero { border: 1px solid transparent !important; background: radial-gradient(90% 60% at 50% 0%, rgba(200,170,110,.14), rgba(200,170,110,0)), linear-gradient(180deg, #0c1a33, #050c18) padding-box, var(--frame) border-box !important; transform: none !important; }
.price-card-hero::before, .price-card-hero::after { display: none !important; }
.price-tag { font-family: var(--f-display) !important; font-size: 12px !important; letter-spacing: 1.6px !important; text-transform: uppercase !important; color: var(--gold-light) !important; background: none !important; border: 0 !important; padding: 0 !important; }
.price-num { font-family: var(--f-num) !important; font-weight: 900 !important; color: var(--ink) !important; -webkit-text-fill-color: currentColor !important; background: none !important; text-shadow: none !important; }
.price-once { font-family: var(--f-read) !important; color: var(--mute) !important; }
.price-sub, .price-foot { color: var(--mute) !important; font-weight: 700 !important; }
.price-list li { color: var(--ink2) !important; font-weight: 700 !important; }
.price-list li::before { border-radius: 0 !important; transform: rotate(45deg); width: 6px !important; height: 6px !important; background: rgba(200,170,110,.5) !important; content: "" !important; box-shadow: none !important; }
.price-list li.on::before { background: var(--victory) !important; }

/* ----------------------------------------------------------- quotes */
.proof-stat, .quote-card { border-radius: 0 !important; background: linear-gradient(180deg, rgba(15,36,64,.55), rgba(9,20,40,.35)) !important; border: 1px solid rgba(180,186,197,.18) !important; box-shadow: none !important; }
.proof-num.g { -webkit-text-fill-color: transparent !important; }
.proof-lbl { color: var(--mute) !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; font-size: 13px !important; }
.quote-card blockquote { color: var(--ink) !important; font-weight: 600 !important; font-style: normal !important; }
.quote-src { border-radius: 0 !important; background: none !important; border: 1px solid rgba(200,170,110,.45) !important; color: var(--gold-light) !important; font-family: var(--f-read) !important; }
.quote-who strong { font: 700 18px/1 var(--f-title) !important; color: var(--ink) !important; }
.quote-foot { color: var(--mute) !important; } .quote-foot a { color: var(--gold-light) !important; }

/* ---------------------------------------------------------- founder */
.founder2-orb { border-radius: 0 !important; background: none !important; box-shadow: none !important; animation: none !important; }
.founder2-orb img { border-radius: 26px !important; box-shadow: 0 0 0 1px rgba(200,170,110,.6), 0 24px 50px -20px #000 !important; }
.founder2-tag { border-radius: 0 !important; background: none !important; border: 1px solid var(--hair) !important; color: var(--mute) !important; letter-spacing: .04em !important; text-transform: none !important; font-family: var(--f-read) !important; font-size: 13px !important; }
.founder2-copy h2 { font-size: clamp(48px, 5vw, 72px) !important; }
.founder2-lede, .founder2-copy p { color: var(--ink2) !important; font-weight: 600 !important; }
.founder2-copy a { color: var(--gold-light) !important; }
.founder2-sign-line { background: linear-gradient(90deg, rgba(200,170,110,0), rgba(200,170,110,.6)) !important; }
.founder2-sign-name { font: 700 22px/1 var(--f-title) !important; color: var(--gold-light) !important; font-style: normal !important; }

/* ---------------------------------------------------------- roadmap */
.lane { border-radius: 0 !important; background: linear-gradient(180deg, rgba(15,36,64,.5), rgba(5,12,24,.6)) !important; border: 1px solid rgba(180,186,197,.18) !important; box-shadow: none !important; }
.lane-head { font-family: var(--f-display) !important; font-size: 12px !important; letter-spacing: 1.6px !important; color: var(--gold-light) !important; }
.lane-dot { border-radius: 0 !important; transform: rotate(45deg); box-shadow: none !important; }
.lane-req .lane-dot { background: var(--control) !important; } .lane-build .lane-dot { background: var(--arcane) !important; } .lane-ship .lane-dot { background: var(--victory) !important; }
.lane-card { border-radius: 0 !important; background: rgba(2,5,11,.55) !important; border: 1px solid var(--hair) !important; color: var(--ink2) !important; font-weight: 700 !important; box-shadow: none !important; }
.lane-card.done::before { color: var(--victory) !important; }
.lane-card.lane-add { border: 1px dashed rgba(200,170,110,.45) !important; color: var(--gold-light) !important; background: none !important; }
.roadmap-cta-sub { color: var(--mute) !important; }

/* -------------------------------------------------------------- faq */
.faq2 details, .faq2 > * { border-radius: 0 !important; }
.faq2 details { background: none !important; border: 0 !important; border-bottom: 1px solid var(--hair) !important; box-shadow: none !important; margin: 0 !important; }
.faq2 details[open] { background: linear-gradient(90deg, rgba(200,170,110,.07), rgba(200,170,110,0)) !important; }
.faq2-q { font: 700 22px/1.1 var(--f-title) !important; color: var(--ink) !important; padding-top: 3px; }
.faq2-icon { border-radius: 0 !important; transform: rotate(45deg); width: 12px !important; height: 12px !important; border: 1.2px solid rgba(200,170,110,.9) !important; background: none !important; }
.faq2-icon::before, .faq2-icon::after { display: none !important; }
.faq2 details[open] .faq2-icon { background: var(--gold-light) !important; border-color: var(--gold-light) !important; }
.faq2-body, .faq2-body p { color: var(--ink2) !important; font-weight: 600 !important; }
.faq2-body a { color: var(--gold-light) !important; }

/* ----------------------------------------------------------- finale */
.finale { position: relative; isolation: isolate; overflow: hidden; }
.finale::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hex); background-position: center top;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 40%, #000, transparent); mask-image: radial-gradient(60% 70% at 50% 40%, #000, transparent); }
.finale h2 { font-size: clamp(48px, 6vw, 84px) !important; line-height: 1 !important; }
.finale p, .finale-foot { color: var(--ink2) !important; font-weight: 600 !important; }

/* ------------------------------------------------- footer, dock, misc */
.footer-bar { border-top: 1px solid var(--hair) !important; background: rgba(2,5,11,.6) !important; color: var(--mute) !important; }
.footer-bar a { color: var(--control) !important; } .footer-bar a:hover { color: var(--gold-light) !important; }
.dev-credit a { color: var(--gold-light) !important; }
.dock { border-radius: 0 !important; background: var(--plate) !important; border: 1px solid rgba(200,170,110,.5) !important; box-shadow: 0 20px 50px -14px #000 !important; }
.dock-icon { border-radius: 8px !important; }
.dock-name { font: 700 20px/1 var(--f-title) !important; color: var(--gold-light) !important; }
.dock-sub { color: var(--mute) !important; }
.dock-cta { border-radius: 0 !important; background: linear-gradient(var(--ground-hi), var(--ground-hi)) padding-box, var(--frame) border-box !important; border: 1px solid transparent !important; color: var(--gold-light) !important; font: 700 17px/1 var(--f-title) !important; box-shadow: none !important; }

/* ------------------------------------------------------ legal pages */
.legal { color: var(--ink2) !important; font-weight: 600; }
.legal-head h1 { font-size: clamp(52px, 7vw, 84px) !important; line-height: 1 !important; }
.legal-head .legal-meta, .legal-sign { color: var(--mute) !important; }
.legal h2 { font-size: 32px !important; border-top-color: var(--hair) !important; }
.legal h3 { font-family: var(--f-title) !important; font-size: 23px !important; }
.legal strong { color: var(--ink) !important; }
.legal em { color: var(--ink2) !important; }
.legal a { color: var(--gold-light) !important; text-decoration-color: rgba(200,170,110,.6) !important; }
.legal li::marker { color: var(--gold-mid); }
.legal-sign { border-top-color: var(--hair) !important; }

/* ------------------------------------------------ subpage ground */
/* Pages without the hero get the same hex circuitry under their title. */
body:not(:has(.hero))::after { content: ""; position: absolute; z-index: 0; opacity: .5; top: 0; left: 0; right: 0; height: 640px; pointer-events: none; background: var(--hex); background-position: center -30px;
  -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 92%); mask-image: linear-gradient(180deg, #000 10%, transparent 92%); }
body:not(:has(.hero)) > * { position: relative; z-index: 1; }
body:not(:has(.hero)) > .nav { z-index: 50; }

/* changelog */
.patch { border-radius: 0 !important; background: linear-gradient(180deg, rgba(15,36,64,.55), rgba(5,12,24,.7)) !important; border: 1px solid rgba(180,186,197,.2) !important; box-shadow: none !important; }
.patch-latest { border: 1px solid transparent !important; background: radial-gradient(90% 70% at 50% 0%, rgba(200,170,110,.12), rgba(200,170,110,0)), linear-gradient(180deg, #0c1a33, #050c18) padding-box, var(--frame) border-box !important; }
.patch-version { font: 700 30px/1 var(--f-title) !important; color: var(--ink) !important; letter-spacing: 0 !important; }
.patch-date { color: var(--mute) !important; font-weight: 700 !important; }
.patch-tag { border-radius: 0 !important; background: none !important; border: 0 !important; box-shadow: inset 0 0 0 1px rgba(200,170,110,.8) !important; color: var(--gold-light) !important; font-family: var(--f-display) !important; letter-spacing: 1.3px !important; }
.patch-notes { color: var(--ink2) !important; font-weight: 600 !important; }
.patch-skeleton { border-radius: 0 !important; }
.from-store { color: var(--mute) !important; letter-spacing: .04em !important; text-transform: none !important; font-weight: 700 !important; }
.from-store::before { border-radius: 0 !important; transform: rotate(45deg); background: var(--arcane) !important; box-shadow: none !important; }

/* 404 */
.e404-num { font-family: var(--f-num) !important; font-weight: 900 !important; letter-spacing: -.02em !important; background: var(--gold-type) !important; -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; text-shadow: none !important; filter: none !important; }
.e404-num::before, .e404-num::after { display: none !important; }
.e404 h1 { font-size: clamp(40px, 5vw, 60px) !important; }
.e404 p { color: var(--ink2) !important; font-weight: 600 !important; }
.e404 .home-btn { border-radius: 0 !important; border: 1px solid transparent !important; background: linear-gradient(var(--ground-hi), var(--ground-hi)) padding-box, var(--frame) border-box !important; color: var(--gold-light) !important;
  font: 700 19px/1 var(--f-title) !important; letter-spacing: .4px !important; box-shadow: none !important; padding: 15px 24px 12px !important; }
.e404 .home-btn:hover { background: linear-gradient(#0c1a33, #0c1a33) padding-box, var(--frame) border-box !important; transform: none !important; }
.e404 .ghost { color: var(--mute) !important; } .e404 .ghost a { color: var(--gold-light) !important; }

/* match link */
.game-card { border-radius: 0 !important; border: 1px solid transparent !important; background: radial-gradient(90% 70% at 50% 0%, rgba(200,170,110,.12), rgba(200,170,110,0)), linear-gradient(180deg, #0c1a33, #050c18) padding-box, var(--frame) border-box !important; }
.game-card .who { font-family: var(--f-display) !important; letter-spacing: 1.3px !important; color: var(--gold-light) !important; opacity: 1 !important; }
.game-card .legend { font: 700 22px/1.05 var(--f-title) !important; color: var(--ink) !important; }
.game-card .tally { font-family: var(--f-num) !important; color: var(--ink) !important; }
.game-card .tally span.up { color: var(--victory) !important; }
.game-card .game-line, .game-card .gone-sub { color: var(--ink2) !important; opacity: 1 !important; font-weight: 700 !important; }
.game-card .game-meta { border-top-color: var(--hair) !important; color: var(--mute) !important; opacity: 1 !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 700 !important; }
.game-card .gone-line { font: 700 24px/1.1 var(--f-title) !important; }
.match-link .get { border-radius: 0 !important; border: 1px solid transparent !important; background: linear-gradient(180deg, #F0E6D2, #C8AA6E 45%, #9A7420) padding-box, var(--frame) border-box !important; color: #0a0d14 !important;
  font: 700 21px/1 var(--f-title) !important; letter-spacing: .4px !important; padding: 17px 26px 14px !important; box-shadow: none !important; }
.match-link .get[data-done="1"] { background: linear-gradient(180deg, #7FF0E4, #0AC8B9 50%, #077a70) padding-box, linear-gradient(180deg, #0AC8B9, #055) border-box !important; }
.match-link .get-sub, .match-link .code-hint { color: var(--mute) !important; opacity: 1 !important; font-weight: 700 !important; }
.match-link .code { border-radius: 0 !important; border: 0 !important; box-shadow: inset 0 0 0 1px rgba(200,170,110,.6) !important; background: rgba(2,5,11,.6) !important; color: var(--gold-light) !important; font-family: var(--f-num) !important; }
.match-link .fold { border-top-color: var(--hair) !important; }
.match-link .fold h2 { font: 700 12px/1 var(--f-display) !important; letter-spacing: 1.6px !important; text-transform: uppercase !important; color: var(--gold-light) !important; opacity: 1 !important; border: 0 !important; padding: 0 !important; margin: 0 0 16px !important; }
.match-link .open-app { border-radius: 0 !important; border: 1px solid rgba(200,170,110,.5) !important; color: var(--gold-light) !important; text-decoration: none !important; font: 700 18px/1 var(--f-title) !important; padding: 13px 22px 10px !important; }

.price-list li::before { top: .68em !important; left: 2px !important; font-size: 0 !important; }
@media (max-width: 899px) {
  .hero-bg::after { width: 100%; opacity: .2; background-position: 60% 18% !important; }
}