@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;600;700;900&family=Noto+Sans+TC:wght@400;500;600;700&display=swap');

:root { --ink:#090d13; --ink-soft:#101722; --paper:#f4efe5; --paper-deep:#e7ddce; --gold:#d3aa63; --gold-bright:#f2d69d; --crimson:#8f192f; --blue:#132a3d; --muted:#b9b3a9; --line:#d6c9b7; --max:1180px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'Noto Sans TC', 'PingFang TC', sans-serif; font-size:16px; line-height:1.75; }
a { color:inherit; text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { text-decoration-color:var(--crimson); }
button, a { -webkit-tap-highlight-color:transparent; }
.skip-link { position:absolute; z-index:100; top:-5rem; left:1rem; color:var(--ink); background:var(--gold-bright); padding:.6rem 1rem; font-weight:700; }
.skip-link:focus { top:1rem; }
.site-header { position:relative; z-index:10; max-width:var(--max); min-height:88px; margin:0 auto; padding:1.2rem 2rem; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.body--home { background:var(--ink); }.body--home .site-header { color:var(--paper); background:var(--ink); }.body--home .site-header a:hover { color:var(--gold-bright); }
.brand-logo { display:inline-flex; align-items:center; width:138px; }.brand-logo img { display:block; width:100%; height:auto; }
.wordmark { display:inline-flex; align-items:center; gap:.7rem; color:var(--ink); font-family:'Noto Serif TC', serif; font-size:1.1rem; font-weight:900; text-decoration:none; line-height:1.1; }
.wordmark > span:last-child > span { display:block; margin-top:.2rem; color:#7e6e5c; font-family:'Noto Sans TC', sans-serif; font-size:.6rem; font-weight:700; letter-spacing:.18em; }
.wordmark__mark { display:grid; width:34px; height:34px; place-items:center; border:1px solid var(--gold); color:#926f3e; transform:rotate(45deg); }
.wordmark__mark svg { width:21px; height:21px; transform:rotate(-45deg); }
.header-actions { display:flex; align-items:center; gap:1.25rem; margin-left:auto; }
.site-header nav { display:flex; gap:1.25rem; font-size:.86rem; font-weight:600; }
.site-header nav a { text-decoration:none; }
.site-header nav a:hover { color:var(--crimson); }
.header-play-link { display:inline-flex; align-items:center; gap:.42rem; min-height:38px; padding:.55rem .8rem; color:#16110a; background:var(--gold-bright); font-size:.78rem; font-weight:700; line-height:1; text-decoration:none; transition:background-color .18s ease, transform .18s ease; }
.header-play-link svg { width:.9rem; height:.9rem; }.header-play-link:hover { color:#16110a !important; background:#fff0c5; text-decoration:none; transform:translateY(-1px); }
.menu-toggle { display:none; border:0; padding:.5rem; color:inherit; background:transparent; }.menu-toggle > span:not(.sr-only) { display:block; width:25px; height:1px; margin:5px; background:currentColor; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hero { position:relative; min-height:680px; overflow:hidden; color:var(--paper); background:var(--ink); isolation:isolate; }
.hero__image { position:absolute; inset:-1.25rem; z-index:-3; background-image:linear-gradient(90deg, rgba(4,9,14,.98) 0%, rgba(4,9,14,.93) 34%, rgba(4,9,14,.28) 76%), url('/assets/game-hall-hero.jpg'); background-position:center; background-size:cover; transform:translate(var(--scene-x, 0), var(--scene-y, 0)) scale(1.02); transition:transform .6s cubic-bezier(.16,1,.3,1); }
.hero__mesh { position:absolute; inset:0; z-index:-2; opacity:.24; background-image:linear-gradient(90deg, transparent 0 49.7%, rgba(211,170,99,.45) 49.8% 50%, transparent 50.1%), repeating-linear-gradient(0deg, transparent 0 33px, rgba(244,239,229,.08) 34px); mix-blend-mode:screen; pointer-events:none; }
.hero__orbit { position:absolute; z-index:-1; border:1px solid rgba(242,214,157,.42); border-radius:50%; pointer-events:none; transform:translate(var(--scene-x, 0), var(--scene-y, 0)); }.hero__orbit--one { top:12%; right:9%; width:220px; height:220px; animation:orbit-drift 12s ease-in-out infinite alternate; }.hero__orbit--two { right:18%; bottom:16%; width:94px; height:94px; border-color:rgba(143,25,47,.8); animation:orbit-drift 9s -2s ease-in-out infinite alternate-reverse; }
.hero__copy { width:min(var(--max), calc(100% - 4rem)); margin:0 auto; padding:9.5rem 0 6rem; }
.hero h1, .page-hero h1, .article h1 { max-width:12ch; margin:0; font-family:'Noto Serif TC', serif; font-size:clamp(3rem, 7vw, 6.4rem); font-weight:900; letter-spacing:-.045em; line-height:1.05; text-wrap:balance; }
.hero h1 em { color:var(--gold-bright); font-style:normal; }
.hero__lede { max-width:52ch; margin:2rem 0 2.2rem; font-size:1.1rem; color:#e4ded3; }
.hero__caption { margin-top:1.25rem; color:#c1b8ab; font-size:.78rem; }
.hero__ticker { position:absolute; right:0; bottom:0; left:0; overflow:hidden; color:var(--gold-bright); border-top:1px solid rgba(242,214,157,.25); border-bottom:1px solid rgba(242,214,157,.25); background:rgba(6,11,17,.76); font-size:.7rem; font-weight:700; letter-spacing:.16em; white-space:nowrap; }.hero__ticker div { display:inline-flex; gap:3rem; min-width:max-content; padding:.75rem 0; animation:ticker 30s linear infinite; }.hero__ticker span::before { display:inline-block; width:.38rem; height:.38rem; margin-right:3rem; background:var(--crimson); content:''; transform:rotate(45deg); }
.cta-set { display:flex; flex-wrap:wrap; gap:.85rem; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:.75rem; min-height:50px; padding:.75rem 1.2rem; border:1px solid transparent; font-weight:700; line-height:1.2; text-decoration:none; transition:background-color .18s ease, color .18s ease, transform .18s ease; }.button svg { flex:0 0 auto; width:1.1rem; height:1.1rem; }
.button:hover { transform:translateY(-2px); text-decoration:none; }
.button:focus-visible, a:focus-visible, summary:focus-visible { outline:3px solid var(--crimson); outline-offset:3px; }
.button--gold { color:#16110a; background:var(--gold-bright); border-color:var(--gold-bright); }
.button--gold:hover { background:#fff0c5; }
.button--line { color:var(--paper); background:transparent; border-color:rgba(244,239,229,.54); }
.button--line:hover { border-color:var(--gold-bright); color:var(--gold-bright); }
.page-width { width:min(var(--max), calc(100% - 4rem)); margin-left:auto; margin-right:auto; }
.intro-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:8vw; padding-top:7rem; padding-bottom:7rem; }
h2 { margin:0 0 1.3rem; font-family:'Noto Serif TC', serif; font-size:clamp(1.75rem, 3.2vw, 3rem); letter-spacing:-.035em; line-height:1.25; text-wrap:balance; }
h3 { margin:0; font-family:'Noto Serif TC', serif; font-size:1.55rem; letter-spacing:-.025em; line-height:1.32; }
.intro-grid > div > p { max-width:46ch; color:#48423b; }
.route-list { border-top:1px solid var(--line); }
.route-list a { display:grid; grid-template-columns:2.6rem 1fr 1.5rem; align-items:center; gap:1rem; padding:1.4rem 0; border-bottom:1px solid var(--line); text-decoration:none; }
.route-list a > span:first-child { display:grid; width:2.3rem; height:2.3rem; place-items:center; color:#755326; border:1px solid var(--gold); }
.route-list svg { width:1.25rem; height:1.25rem; }
.route-list strong { display:block; font-size:1rem; }.route-list small { display:block; margin-top:.15rem; color:#70685e; }
.notice { display:flex; gap:1.2rem; align-items:flex-start; max-width:var(--max); margin:0 auto; padding:1.25rem 2rem; color:var(--paper); background:var(--blue); }
.notice span { display:grid; flex:0 0 auto; width:2rem; height:2rem; place-items:center; color:var(--gold-bright); border:1px solid rgba(242,214,157,.55); }.notice svg { width:1rem; }
.notice p { margin:0; font-size:.9rem; }
.game-showcase { overflow:hidden; padding:7rem 0; color:var(--paper); background:var(--ink); }.game-showcase__heading { display:grid; grid-template-columns:.95fr 1.05fr; gap:8vw; align-items:end; margin-bottom:3rem; }.game-showcase__heading h2 { max-width:12ch; margin:0; color:var(--gold-bright); }.game-showcase__heading p { max-width:47ch; margin:0; color:#d4c9bb; }.game-stage { position:relative; margin:0; overflow:hidden; border:1px solid rgba(242,214,157,.33); background:var(--ink-soft); }.game-stage::after { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 55%, rgba(4,9,14,.84)); content:''; }.game-stage img { display:block; width:100%; height:auto; transition:transform .7s cubic-bezier(.16,1,.3,1); }.game-stage:hover img { transform:scale(1.025); }.game-stage figcaption { position:absolute; z-index:1; right:1.35rem; bottom:1.05rem; left:1.35rem; color:var(--gold-bright); font-size:.76rem; font-weight:700; letter-spacing:.12em; }.game-showcase__split { display:grid; grid-template-columns:.75fr 1.25fr; gap:7vw; align-items:center; margin-top:4.5rem; }.game-showcase__split > div { max-width:32ch; }.game-showcase__split h3 { margin-bottom:1.2rem; color:var(--paper); }.game-showcase__split p { color:#d4c9bb; }.game-stage--panda img { min-height:260px; object-fit:cover; }.text-link--gold { color:var(--gold-bright); }
.guide-section { padding-top:7rem; padding-bottom:7rem; }.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:2.2rem; }.section-heading h2 { margin:0; }
.text-link { display:inline-flex; align-items:center; gap:.4rem; color:#5e3921; font-size:.88rem; font-weight:700; text-decoration:none; }.text-link svg { width:1.2rem; }
.guide-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:2.5rem; }.guide-teaser { position:relative; padding-top:1.2rem; border-top:1px solid #ac9c88; }.guide-teaser h3 a { text-decoration:none; }.guide-teaser h3 + p { color:#564f46; }.guide-teaser .text-link { margin-top:.5rem; }
.faq-section { display:grid; grid-template-columns:.85fr 1.15fr; gap:8vw; padding-top:6rem; padding-bottom:7rem; }.faq-section > div > p { max-width:32ch; color:#5d564e; }.faq-list { border-top:1px solid #ac9c88; }.faq-list details { border-bottom:1px solid #ac9c88; }.faq-list summary { display:flex; justify-content:space-between; gap:1rem; padding:1.2rem 0; font-weight:700; cursor:pointer; list-style:none; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary span { position:relative; flex:0 0 auto; width:1.35rem; height:1.35rem; }.faq-list summary span::before, .faq-list summary span::after { position:absolute; top:50%; left:50%; width:.85rem; height:1px; background:var(--crimson); content:''; transform:translate(-50%, -50%); }.faq-list summary span::after { transform:translate(-50%, -50%) rotate(90deg); }.faq-list details[open] summary span::after { transform:translate(-50%, -50%) rotate(0); }.faq-list details p { max-width:56ch; padding-bottom:1rem; color:#554e46; }
.page-hero { padding-top:5.5rem; padding-bottom:4.7rem; }.page-hero h1, .article h1 { max-width:14ch; color:#16130f; font-size:clamp(2.7rem, 5vw, 5.3rem); }.page-hero__lede, .article__lede { max-width:52ch; margin:1.7rem 0 2rem; color:#514a42; font-size:1.12rem; }.page-hero .cta-set { margin-top:2.2rem; }.cta-set--light .button--line { color:#3b2b1e; border-color:#8a765f; }.cta-set--light .button--line:hover { color:#7f1128; border-color:#7f1128; }
.media-hero { position:relative; overflow:hidden; padding:5.5rem 0 4.5rem; color:var(--paper); background:var(--ink); }.media-hero__backdrop { position:absolute; inset:0; opacity:.4; background:radial-gradient(circle at 72% 20%, rgba(211,170,99,.38), transparent 26%), repeating-linear-gradient(135deg, transparent 0 22px, rgba(244,239,229,.06) 23px 24px); }.media-hero .page-width { position:relative; }.media-hero h1, .live-hero h1 { max-width:12ch; margin:0; font-family:'Noto Serif TC',serif; font-size:clamp(2.8rem,6vw,5.5rem); line-height:1.08; letter-spacing:-.04em; }.media-hero .page-hero__lede, .live-hero .page-hero__lede { color:#d4c9bb; }.media-hero .breadcrumbs, .live-hero .breadcrumbs { color:#cbbda9; }.media-hero .breadcrumbs a, .live-hero .breadcrumbs a { color:var(--gold-bright); }.media-layout { display:grid; grid-template-columns:1.25fr .75fr; gap:7vw; padding-top:6rem; padding-bottom:6rem; }.media-stage { position:relative; min-height:360px; padding:3rem; overflow:hidden; color:var(--paper); background:var(--ink-soft); box-shadow:0 24px 50px rgba(9,13,19,.18); }.media-stage::before { content:''; position:absolute; inset:0; opacity:.35; background:linear-gradient(130deg, transparent 44%, rgba(211,170,99,.28) 44.1% 44.3%, transparent 44.4%), radial-gradient(circle at 78% 28%, rgba(143,25,47,.5), transparent 14%); }.media-stage > * { position:relative; }.media-stage h2 { max-width:12ch; }.media-stage p:last-child { max-width:50ch; color:#d1c6b9; }.media-stage__pulse { display:block; width:18px; height:18px; margin-bottom:5rem; border-radius:50%; background:var(--crimson); box-shadow:0 0 0 0 rgba(143,25,47,.55); animation:live-pulse 2.4s ease-out infinite; }.media-guide { align-self:end; }.media-guide h2 { font-size:1.6rem; }.media-guide ul { padding-left:1.2rem; color:#554e46; }.media-guide li + li { margin-top:.8rem; }
.live-hero { padding:5.5rem 0; color:var(--paper); background:linear-gradient(105deg, #090d13 0%, #111c29 58%, #490c1c 100%); }.live-hero__grid { display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:7vw; }.signal-board { position:relative; display:grid; justify-items:start; gap:.55rem; padding:2.5rem; overflow:hidden; color:var(--paper); border:1px solid rgba(242,214,157,.5); background:rgba(9,13,19,.55); box-shadow:20px 25px 60px rgba(0,0,0,.25); }.signal-board::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0 24px, rgba(242,214,157,.07) 25px); pointer-events:none; }.signal-board > * { position:relative; z-index:1; }.signal-board span { color:#f1b5c0; font-size:.75rem; font-weight:700; letter-spacing:.2em; }.signal-board strong { color:var(--gold-bright); font-family:'Noto Serif TC',serif; font-size:2.2rem; line-height:1.2; }.signal-board small { color:#d0c4b5; }.signal-board i { position:absolute; top:2rem; right:2rem; width:16px; height:16px; border-radius:50%; background:var(--crimson); animation:live-pulse 2.4s ease-out infinite; }.live-notes { display:grid; grid-template-columns:.85fr 1.15fr; gap:7vw; padding-top:6rem; padding-bottom:6rem; }.live-notes p { max-width:52ch; color:#554e46; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 2.5rem; color:#766d63; font-size:.78rem; }.breadcrumbs a { color:#6b4728; }
.prose { max-width:820px; padding-bottom:7rem; }.prose h2 { margin-top:3.2rem; font-size:2rem; }.prose p, .prose li { max-width:65ch; color:#403a34; }.prose ol, .prose ul { padding-left:1.3rem; }.prose li + li { margin-top:.6rem; }
.guide-list { max-width:880px; padding-bottom:7rem; }.guide-row { padding:2.4rem 0; border-top:1px solid #bdaF9c; }.guide-row h2 { margin-bottom:.75rem; font-size:2rem; }.guide-row h2 a { text-decoration:none; }.guide-row > p:not(:first-child) { max-width:62ch; color:#554e46; }.guide-row dl, .article-meta { display:flex; flex-wrap:wrap; gap:1.4rem 2rem; margin:1.25rem 0; }.guide-row dl div, .article-meta div { display:flex; gap:.45rem; font-size:.8rem; }.guide-row dt, .article-meta dt { color:#786f64; }.guide-row dd, .article-meta dd { margin:0; color:#40372f; font-weight:700; }
.article { display:grid; grid-template-columns:minmax(0, 1fr) 220px; column-gap:7vw; padding-top:4.2rem; padding-bottom:7rem; }.article header, .article__body { grid-column:1; }.article__body { max-width:700px; margin-top:3.4rem; color:#403a34; }.article__body h2 { margin-top:3.2rem; font-size:2rem; }.article__body p, .article__body li { max-width:65ch; }.article__body ul { padding-left:1.3rem; }.article-aside { grid-column:2; grid-row:1 / span 2; align-self:start; margin-top:11rem; padding-top:1.2rem; border-top:1px solid #ad9d88; font-size:.85rem; }.article-aside + * { }.article-aside div + div { margin-top:2rem; }.article-aside h2 { font-family:'Noto Sans TC', sans-serif; font-size:.85rem; letter-spacing:0; }.article-aside ul { margin:0; padding-left:1.1rem; }.article-aside li + li { margin-top:.55rem; }
.site-footer { display:grid; grid-template-columns:1.3fr 1fr .9fr; gap:3rem; padding:4rem max(2rem, calc((100% - var(--max))/2)); color:#d9d0c3; background:var(--ink); }.wordmark--footer { color:var(--paper); }.site-footer p { max-width:35ch; color:#a79f94; font-size:.82rem; }.footer-links { display:grid; grid-template-columns:1fr 1fr; align-content:start; gap:.6rem 1rem; font-size:.84rem; }.footer-links a { text-decoration:none; }.footer-note { margin:0; align-self:end; }
.floating-line-link { position:fixed; z-index:30; right:1.25rem; bottom:1.25rem; display:inline-flex; align-items:center; gap:.48rem; min-height:52px; padding:.5rem .76rem .5rem .6rem; color:#fff; border:1px solid rgba(255,255,255,.35); border-radius:999px; background:#06c755; box-shadow:0 13px 28px rgba(3,19,10,.34); font-size:.68rem; font-weight:700; line-height:1.15; letter-spacing:.04em; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease; }.floating-line-link svg { width:32px; height:32px; }.floating-line-link:hover { color:#fff; background:#04b64d; box-shadow:0 16px 32px rgba(3,19,10,.45); text-decoration:none; transform:translateY(-2px); }
@keyframes ticker { to { transform:translateX(-50%); } }@keyframes orbit-drift { from { transform:translate3d(var(--scene-x,0),var(--scene-y,0),0) rotate(0deg); } to { transform:translate3d(var(--scene-x,0),calc(var(--scene-y,0) - 15px),0) rotate(18deg); } }@keyframes live-pulse { 0% { box-shadow:0 0 0 0 rgba(143,25,47,.55); } 70% { box-shadow:0 0 0 15px rgba(143,25,47,0); } 100% { box-shadow:0 0 0 0 rgba(143,25,47,0); } }
@media (max-width:780px) { .site-header { min-height:76px; padding:1rem 1.25rem; }.brand-logo { width:120px; }.header-actions { gap:.55rem; }.header-play-link { min-height:36px; padding:.5rem .62rem; font-size:.72rem; }.menu-toggle { display:block; }.site-header nav { position:absolute; top:100%; right:0; left:0; display:none; padding:1rem 1.25rem 1.5rem; color:var(--paper); background:var(--ink); box-shadow:0 20px 24px rgba(0,0,0,.2); }.site-header--open nav { display:grid; gap:.85rem; }.hero { min-height:650px; }.hero__image { background-position:59% center; background-image:linear-gradient(90deg, rgba(4,9,14,.96) 0%, rgba(4,9,14,.84) 62%, rgba(4,9,14,.48) 100%), url('/assets/game-hall-hero.jpg'); }.hero__copy, .page-width { width:min(100% - 2.5rem, var(--max)); }.hero__copy { padding-top:7rem; }.hero h1 { font-size:clamp(3.1rem, 16vw, 4.6rem); }.hero__orbit--one { right:-35px; width:165px; height:165px; }.intro-grid, .faq-section, .media-layout, .live-hero__grid, .live-notes, .game-showcase__heading, .game-showcase__split { grid-template-columns:1fr; gap:3rem; padding-top:4.5rem; padding-bottom:4.5rem; }.game-showcase { padding:0; }.game-showcase__heading { margin-bottom:3rem; }.game-showcase__split { margin-top:0; }.game-stage--panda img { min-height:0; }.guide-grid { grid-template-columns:1fr; gap:2.8rem; }.guide-section { padding-top:4.5rem; padding-bottom:4.5rem; }.section-heading { align-items:flex-start; flex-direction:column; }.notice { margin:0; padding:1.15rem 1.25rem; }.page-hero, .media-hero, .live-hero { padding-top:3.7rem; padding-bottom:3.5rem; }.page-hero h1, .article h1, .media-hero h1, .live-hero h1 { font-size:clamp(2.5rem, 12vw, 4rem); }.article { display:block; padding-top:3.2rem; }.article-aside { margin-top:3.5rem; }.site-footer { grid-template-columns:1fr; gap:2rem; padding:3.5rem 1.25rem; }.cta-set { align-items:stretch; flex-direction:column; }.button { width:100%; }.guide-row h2 { font-size:1.7rem; }.media-stage { min-height:0; padding:2rem; }.signal-board { padding:2rem; }.floating-line-link { right:.85rem; bottom:.85rem; min-height:48px; padding:.45rem .65rem .45rem .52rem; }.floating-line-link svg { width:29px; height:29px; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } }

/* Shared black-and-gold hall treatment for every visitor-facing route. */
.body--portal { color:var(--paper); background:var(--ink); }
.body--portal .page-hero, .body--portal .prose, .body--portal .guide-list, .body--portal .article, .body--portal .intro-grid, .body--portal .faq-section { background:var(--ink); }
.body--portal .site-header { min-height:76px; color:var(--paper); background:rgba(9,13,19,.96); border-bottom:1px solid rgba(242,214,157,.16); }
.body--portal .site-header nav a:hover, .body--portal .site-header nav a:focus-visible { color:var(--gold-bright); }
.body--portal .header-play-link { position:relative; overflow:hidden; isolation:isolate; }
.body--portal .header-play-link::after { position:absolute; inset:-25% auto -25% -40%; z-index:-1; width:32%; background:rgba(255,255,255,.42); content:''; opacity:0; transform:translate3d(-120%,0,0) skewX(-18deg); }
.body--portal .hero__copy { padding:clamp(6.1rem,10vw,9.5rem) 0 5.25rem; }
.body--portal .hero__caption, .body--portal .hero__ticker { display:none; }
.body--portal .page-hero { position:relative; overflow:hidden; padding-top:clamp(4rem,7vw,5.75rem); padding-bottom:clamp(3.7rem,6vw,5.1rem); }
.body--portal .page-hero::before { position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 84% 18%, rgba(211,170,99,.16), transparent 34%); content:''; }
.body--portal .page-hero > * { position:relative; }
.body--portal .hero h1, .body--portal .page-hero h1, .body--portal .article h1, .body--portal h2, .body--portal h3 { font-family:'Noto Sans TC', 'PingFang TC', sans-serif; font-weight:900; letter-spacing:-.032em; }
.body--portal .page-hero h1, .body--portal .article h1 { max-width:14ch; color:var(--paper); font-size:clamp(2.45rem,5.4vw,4.9rem); line-height:1.15; }
.body--portal .page-hero__lede, .body--portal .article__lede { max-width:50ch; color:#d7cbbc; font-size:1.03rem; }
.body--portal .breadcrumbs { color:#d0c0ac; }
.body--portal .breadcrumbs a, .body--portal .text-link { color:var(--gold-bright); }
.body--portal .cta-set--light .button--line { color:var(--paper); border-color:rgba(242,214,157,.52); }
.body--portal .cta-set--light .button--line:hover { color:var(--gold-bright); border-color:var(--gold-bright); }
.body--portal .intro-grid, .body--portal .guide-section, .body--portal .faq-section, .body--portal .guide-list, .body--portal .prose, .body--portal .article, .body--portal .media-layout, .body--portal .live-notes { padding-top:clamp(4rem,7vw,6rem); padding-bottom:clamp(4rem,7vw,6rem); }
.body--portal .intro-grid > div > p, .body--portal .faq-section > div > p, .body--portal .guide-teaser h3 + p, .body--portal .guide-row > p:not(:first-child), .body--portal .prose p, .body--portal .prose li, .body--portal .article__body, .body--portal .article__body p, .body--portal .article__body li, .body--portal .media-guide li, .body--portal .live-notes p { color:#d7cbbc; }
.body--portal .route-list, .body--portal .guide-teaser, .body--portal .faq-list, .body--portal .faq-list details, .body--portal .guide-row, .body--portal .article-aside { border-color:rgba(242,214,157,.24); }
.body--portal .route-list a { border-color:rgba(242,214,157,.2); }
.body--portal .route-list a > span:first-child { color:var(--gold-bright); border-color:rgba(242,214,157,.5); }
.body--portal .route-list strong, .body--portal .guide-row dd, .body--portal .article-meta dd { color:var(--paper); }
.body--portal .route-list small, .body--portal .guide-row dt, .body--portal .article-meta dt { color:#c4b6a5; }
.body--portal .notice { max-width:none; padding-right:max(2rem, calc((100% - var(--max))/2)); padding-left:max(2rem, calc((100% - var(--max))/2)); background:linear-gradient(90deg, #161108, #2a1b09); border-top:1px solid rgba(242,214,157,.17); border-bottom:1px solid rgba(242,214,157,.17); }
.body--portal .guide-section { background:linear-gradient(180deg, var(--ink) 0%, #0d121a 100%); }
.body--portal .guide-teaser h3 a, .body--portal .guide-row h2 a { color:var(--paper); }
.body--portal .guide-teaser .text-link { color:var(--gold-bright); }
.body--portal .faq-list summary span::before, .body--portal .faq-list summary span::after { background:var(--gold-bright); }
.body--portal .faq-list details p { color:#d7cbbc; }
.body--portal .media-guide ul { color:#d7cbbc; }
.body--portal .article-aside { color:#d7cbbc; }
.body--portal .article-aside h2 { color:var(--gold-bright); }
.body--portal .article-aside a { color:var(--gold-bright); }

@media (prefers-reduced-motion:no-preference) {
  .body--portal a:not(.brand-logo):not(.skip-link) { transition:color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease; }
  .body--portal a:not(.brand-logo):not(.skip-link):active { transform:translate3d(0,1px,0) scale(.985); }
  .body--portal .is-leaving { opacity:.72; transform:translate3d(0,2px,0) scale(.985); }
  .body--portal .header-play-link::after { animation:fortune-sweep 5.4s ease-in-out infinite; }
}

@media (hover:hover) and (pointer:fine) {
  .body--portal .route-list a:hover { color:var(--gold-bright); transform:translate3d(4px,0,0); }
  .body--portal .guide-teaser h3 a:hover, .body--portal .guide-row h2 a:hover, .body--portal .article-aside a:hover { color:var(--gold-bright); }
  .body--portal .text-link:hover { color:#fff0c5; transform:translate3d(3px,0,0); }
}

@keyframes fortune-sweep { 0%, 72%, 100% { opacity:0; transform:translate3d(-120%,0,0) skewX(-18deg); } 12% { opacity:.72; } 32% { opacity:0; transform:translate3d(500%,0,0) skewX(-18deg); } }

@media (max-width:780px) {
  .body--portal .site-header { min-height:70px; }
  .body--portal .header-actions { gap:.45rem; }
  .body--portal .header-play-link { min-height:38px; padding:.55rem .65rem; }
  .body--portal .hero { min-height:600px; }
  .body--portal .hero__copy { padding:5.75rem 0 3.5rem; }
  .body--portal .page-hero h1, .body--portal .article h1 { font-size:clamp(2.45rem,11vw,3.65rem); }
  .body--portal .page-hero__lede, .body--portal .article__lede { font-size:1rem; }
  .body--portal .intro-grid, .body--portal .guide-section, .body--portal .faq-section, .body--portal .guide-list, .body--portal .prose, .body--portal .article, .body--portal .media-layout, .body--portal .live-notes { padding-top:3.75rem; padding-bottom:3.75rem; }
  .body--portal .notice { padding-right:1.25rem; padding-left:1.25rem; }
  .body--portal .article-aside { margin-top:3rem; }
}