/* Fonts loaded via in (non-render-blocking) — do NOT use @import here. */
/* ============================================================
ErawanRO — Royal Navy & Gold Thai-Fantasy Theme (2026-06-24 v9)
Deep midnight-blue + antique gold "lai-thai" ornate frames.
Matches the Erawan hero art. Shared by all pages.
============================================================ */
:root{
--bg:#070f26;
--ink:#d9e2f5; /* body text (light) */
--ink-strong:#f6eccf; /* headings (cream-gold) */
--muted:#90a0c8;
--card:#0f1f48; /* navy card */
--card-soft:#142a59;
--navy-deep:#0a1736;
/* "red" family is repurposed as PRIMARY GOLD (used for buttons/accents/nav) */
--red:#f0c34f; --red-d:#e7b53e; --red-l:#ffd877; --red-dd:#c8922a;
/* gold accents */
--gold:#f4c668; --gold-d:#e0b04a; --gold-l:#ffe08a;
/* royal blue (secondary) */
--blue:#3f7bd6; --blue-d:#2b5bb0; --blue-l:#5b95e8;
/* jade / online */
--green:#4adc7c; --green-l:rgba(74,220,124,.14);
--line:rgba(244,198,104,.30);
--line2:rgba(244,198,104,.15);
--shadow:0 12px 30px rgba(0,8,26,.5);
--shadow-lg:0 20px 50px rgba(0,6,22,.62);
--radius:18px;
--font:"Kanit","Noto Sans Thai","Segoe UI",sans-serif;
--font-display:"Charm","Kanit",serif;
--font-deco:"Charmonman","Charm",cursive;
--grad-red:linear-gradient(180deg,#ffe08a,#f4c668 48%,#d59f2c); /* PRIMARY = gold */
--grad-gold:linear-gradient(180deg,#5b95e8,#3f7bd6 52%,#2b5bb0); /* SECONDARY = blue */
--grad-goldline:linear-gradient(110deg,#9a6f1c,#f4c668 28%,#fff3c9 44%,#f4c668 58%,#9a6f1c);
--grad-navy:linear-gradient(180deg,#13254f,#0d1c40);
/* lai-thai kranok divider (golden flame row) */
--kranok:url("data:image/svg+xml;utf8,");
/* gold corner ornament for cards */
--corner:url("data:image/svg+xml;utf8,");
}
*{box-sizing:border-box;}
html,body{margin:0;min-height:100%;color:var(--ink);font-family:var(--font);background:var(--bg);}
body{display:flex;justify-content:center;}
body::before{
content:"";position:fixed;inset:0;z-index:-2;
background:
radial-gradient(circle at 50% -6%, rgba(63,123,214,.30), transparent 42%),
radial-gradient(circle at 12% 8%, rgba(244,198,104,.12), transparent 30%),
radial-gradient(circle at 88% 6%, rgba(244,198,104,.10), transparent 28%),
linear-gradient(180deg,#0b1838,#070f26 60%,#05091c);
}
/* faint Thai diamond-lattice + stars overlay */
body::after{content:"";position:fixed;inset:0;z-index:-1;opacity:.6;
background-image:url("data:image/svg+xml;utf8,");
background-size:54px 54px;
-webkit-mask-image:radial-gradient(circle at 50% 24%, #000, transparent 78%);
mask-image:radial-gradient(circle at 50% 24%, #000, transparent 78%);}
a{color:inherit;text-decoration:none;}
button{color:inherit;font:inherit;}
.page{width:min(1480px,100vw);min-height:100vh;position:relative;padding-bottom:30px;}
.page::before{content:"";position:absolute;inset:76px 0 auto;height:460px;z-index:0;
background:radial-gradient(ellipse 74% 100% at 50% 0%, rgba(63,123,214,.26), transparent 72%);
-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 66%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0%,#000 66%,transparent 100%);}
/* reusable lai-thai gold divider */
.thai-divider{position:relative;z-index:2;height:24px;margin:6px 56px 10px;
background-image:var(--kranok);background-repeat:repeat-x;background-position:center;opacity:.85;}
.thai-divider.flip{transform:scaleY(-1);}
/* ---------------- Topbar ---------------- */
.topbar{height:78px;position:relative;z-index:5;display:grid;grid-template-columns:300px 1fr 470px;align-items:center;
background:linear-gradient(180deg,rgba(13,28,64,.96),rgba(8,18,46,.94));backdrop-filter:blur(10px);
border-bottom:3px solid transparent;border-image:var(--grad-goldline) 1;
box-shadow:0 8px 26px rgba(0,6,24,.55);}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:8px;
background-image:var(--kranok);background-repeat:repeat-x;background-position:center top;opacity:.5;pointer-events:none;}
.mini-logo{height:74px;display:flex;align-items:center;padding-left:26px;gap:12px;}
.mini-logo img{width:78px;height:68px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));}
.mini-logo strong{display:block;font-family:var(--font-deco);color:var(--gold);font-size:31px;line-height:.9;font-weight:700;
text-shadow:0 2px 6px rgba(0,0,0,.5);}
.mini-logo span span,.mini-logo > span > span{display:block;color:var(--muted);font-size:12px;margin-top:2px;letter-spacing:.05em;}
.nav{height:100%;display:flex;justify-content:center;align-items:stretch;}
.nav a{min-width:84px;display:grid;place-items:center;align-content:center;gap:2px;padding:0 12px;color:var(--ink);font-weight:600;line-height:1.1;border-radius:12px;margin:8px 2px;transition:.16s;}
.nav a small{color:var(--gold-d);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;}
.nav a.active,.nav a:hover{color:#2a1c06;background:var(--grad-red);box-shadow:0 6px 16px rgba(244,198,104,.4);}
.nav a.active small,.nav a:hover small{color:#5a3e08;}
.actions{height:100%;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding-right:26px;}
.pill,.gold-btn,.blue-btn,.btn{min-height:46px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 22px;font-weight:700;font-family:var(--font);border:0;cursor:pointer;transition:.16s;}
.pill{background:rgba(255,255,255,.04);color:var(--gold);border:2px solid var(--line);}
.pill:hover{border-color:var(--gold);background:rgba(244,198,104,.1);}
.gold-btn,.btn.gold{background:var(--grad-red);color:#2a1c06;box-shadow:0 8px 20px rgba(244,198,104,.36);border:1px solid rgba(255,240,200,.6);text-shadow:0 1px 0 rgba(255,255,255,.25);}
.blue-btn,.btn.blue{background:var(--grad-gold);color:#fff;box-shadow:0 8px 20px rgba(43,91,176,.5);border:1px solid rgba(150,190,255,.4);}
.btn.ghost{background:rgba(255,255,255,.04);color:var(--gold);border:2px solid var(--line);}
.gold-btn:hover,.blue-btn:hover,.btn:hover{transform:translateY(-2px);filter:brightness(1.06);}
/* ---------------- Hero ---------------- */
.hero{position:relative;z-index:2;display:grid;grid-template-columns:330px 1fr 320px;gap:24px;min-height:450px;padding:34px 56px 8px;}
.hero::before{content:"🐘";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
font-size:360px;line-height:1;opacity:.045;z-index:-1;pointer-events:none;}
.brand-art{align-self:center;text-align:center;position:relative;}
.brand-art::after{content:"";position:absolute;left:50%;bottom:6%;transform:translateX(-50%);width:80%;height:32px;
background:radial-gradient(ellipse at center, rgba(0,0,0,.5), transparent 70%);filter:blur(3px);}
.brand-art img{width:310px;max-width:100%;filter:drop-shadow(0 16px 30px rgba(0,0,0,.55));animation:eroFloat 4.5s ease-in-out infinite;}
@keyframes eroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){.brand-art img{animation:none;}}
.hero-copy{align-self:center;text-align:center;}
.hero-copy h1{margin:0;font-family:var(--font-display);font-size:clamp(60px,7vw,108px);line-height:.9;font-weight:700;letter-spacing:.01em;
background:var(--grad-goldline);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));animation:goldSheen 6s linear infinite;}
@keyframes goldSheen{to{background-position:200% center;}}
@media(prefers-reduced-motion:reduce){.hero-copy h1{animation:none;}}
.hero-copy .sub{margin:6px 0 0;font-family:var(--font-display);color:var(--gold-l);font-size:30px;letter-spacing:.16em;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.5);}
.episode{width:min(520px,92%);margin:14px auto 0;padding:6px 18px;color:var(--gold);font-family:var(--font-display);font-size:40px;font-weight:700;}
.thai-title{margin:14px 0 6px;color:var(--ink-strong);font-family:var(--font-deco);font-size:32px;font-weight:700;}
.hero-copy p{margin:8px 0 0;display:inline-block;padding:9px 18px;border-radius:999px;background:rgba(13,28,64,.7);border:1px solid var(--line);color:var(--ink-strong);font-size:14px;font-weight:600;box-shadow:var(--shadow);}
.hero-ctas{margin-top:24px;display:flex;justify-content:center;gap:14px;}
.hero-ctas a{min-width:210px;min-height:60px;font-size:19px;}
/* ---------------- Status card ---------------- */
.status-card{align-self:start;position:relative;border:1px solid var(--line);border-radius:var(--radius);background:var(--grad-navy);box-shadow:var(--shadow-lg);padding:18px;}
.status-card::before{content:"";position:absolute;inset:5px;border:1px solid var(--line2);border-radius:14px;pointer-events:none;}
.status-card::after{content:"";position:absolute;top:7px;left:7px;width:34px;height:34px;background:var(--corner);background-repeat:no-repeat;opacity:.9;pointer-events:none;}
.status-card h2{margin:0 0 12px;text-align:center;font-family:var(--font-display);color:var(--gold);font-size:23px;font-weight:700;}
.status-card h2::before,.status-card h2::after{content:"❖";color:var(--gold-d);font-size:13px;margin:0 8px;vertical-align:2px;}
.main-status{min-height:52px;display:flex;align-items:center;justify-content:center;gap:9px;border-radius:14px;background:var(--green-l);color:var(--green);font-size:24px;font-weight:800;font-family:var(--font-display);border:1px solid rgba(74,220,124,.3);}
.dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);}
.status-list{margin:14px 0;display:grid;gap:9px;}
.status-row{display:flex;justify-content:space-between;color:var(--ink);font-size:14px;font-weight:500;}
.status-row b{color:var(--green);}
.online-box{margin:14px 0;text-align:center;padding:14px;border-radius:16px;background:linear-gradient(180deg,rgba(244,198,104,.12),rgba(63,123,214,.1));border:1px solid var(--line2);}
.online-box span{display:block;color:var(--gold-l);font-weight:700;font-size:15px;}
.online-box strong{display:block;font-family:var(--font-display);color:var(--gold);font-size:52px;line-height:1;margin:4px 0;text-shadow:0 2px 10px rgba(244,198,104,.4);}
.status-card .gold-btn{width:100%;min-height:64px;font-size:24px;flex-direction:column;line-height:1.05;font-family:var(--font-display);}
.status-card .gold-btn small{font-size:12px;font-weight:600;}
/* ---------------- Feature strip ---------------- */
.feature-strip{position:relative;z-index:2;margin:6px 56px 16px;display:grid;grid-template-columns:repeat(7,1fr);
border-radius:var(--radius);overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);}
.strip-item{min-height:82px;display:grid;grid-template-columns:54px 1fr;gap:10px;align-items:center;padding:13px 12px;border-left:1px solid var(--line2);}
.strip-item:first-child{border-left:0;}
.ico{width:54px;height:54px;display:grid;place-items:center;border-radius:16px;font-size:28px;line-height:1;
background:radial-gradient(circle at 38% 30%,#1c346b,#0c1c44);border:1px solid var(--line);box-shadow:0 5px 14px rgba(0,0,0,.4),inset 0 0 12px rgba(244,198,104,.12);}
.ico i{font-size:23px;color:var(--gold);}
.strip-item b{display:block;color:var(--ink-strong);font-size:13px;line-height:1.15;font-weight:700;}
.strip-item span{display:block;color:var(--muted);font-size:11px;margin-top:3px;}
/* ---------------- Content (panels) ---------------- */
.content{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;padding:0 56px;}
.panel{position:relative;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);overflow:hidden;}
.panel-head{height:60px;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--line);
background:linear-gradient(180deg,#16295a,#0e1e46);}
.panel-head h2{margin:0;font-family:var(--font-display);color:var(--gold);font-size:25px;line-height:1;font-weight:700;}
.panel-head small{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;}
.panel-head a{min-width:64px;min-height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
background:var(--grad-red);color:#2a1c06;font-size:12px;font-weight:700;padding:0 14px;}
.news-list{padding:14px;display:grid;gap:10px;}
.news-row{min-height:58px;display:grid;grid-template-columns:64px 1fr 70px;gap:12px;align-items:center;padding:8px;border-radius:12px;transition:.15s;}
.news-row:hover{background:var(--card-soft);}
.thumb{height:50px;border-radius:11px;background:var(--grad-red);display:grid;place-items:center;font-size:24px;background-size:cover;background-position:center;}
.news-row:nth-child(even) .thumb{background:var(--grad-gold);}
.news-row b{display:block;color:var(--ink-strong);font-size:14px;font-weight:600;}
.news-row span{display:block;color:var(--muted);font-size:12px;margin-top:3px;}
.news-row time{color:var(--gold-d);font-size:11px;text-align:right;font-weight:600;}
.feature-grid{padding:16px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.feature-card{min-height:112px;padding:16px;border:1px solid var(--line2);border-radius:14px;background:var(--navy-deep);text-align:center;transition:.16s;}
.feature-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--gold);}
.feature-card .ico{margin:0 auto 9px;}
.feature-card b{display:block;color:var(--ink-strong);font-size:14px;line-height:1.15;}
.feature-card span{display:block;color:var(--muted);font-size:11px;margin-top:5px;}
.rank-tabs{height:50px;display:grid;grid-template-columns:repeat(4,1fr);padding:12px 14px 0;gap:6px;}
.rank-tabs button{border:0;border-radius:999px;background:var(--navy-deep);color:var(--gold);cursor:pointer;font-size:13px;font-weight:700;font-family:var(--font);border:1px solid var(--line2);}
.rank-tabs button.active{color:#2a1c06;background:var(--grad-red);border-color:transparent;}
.rank-list{padding:14px 16px 16px;display:grid;gap:8px;}
.rank-row{min-height:40px;display:grid;grid-template-columns:30px 30px 1fr 56px;align-items:center;gap:10px;padding:6px 10px;border-radius:11px;background:var(--navy-deep);}
.rank-row em{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--grad-gold);font-style:normal;font-weight:800;font-size:13px;}
.rank-row:nth-child(1) em{background:var(--grad-red);color:#2a1c06;box-shadow:0 0 12px rgba(244,198,104,.6);}
.avatar{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe1b0,var(--gold-d) 72%);border:2px solid var(--card);box-shadow:0 2px 6px rgba(0,0,0,.4);}
.rank-row b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;color:var(--ink-strong);font-weight:600;}
.rank-row span{color:var(--gold-d);font-size:12px;text-align:right;font-weight:600;}
/* ---------------- Footer ---------------- */
.footer{position:relative;z-index:2;min-height:74px;margin-top:18px;padding:22px 56px 18px;display:flex;align-items:center;justify-content:space-between;
color:var(--muted);background:linear-gradient(180deg,rgba(10,23,54,.6),rgba(6,12,30,.9));border-top:3px solid transparent;border-image:var(--grad-goldline) 1;}
.footer::before{content:"";position:absolute;left:0;right:0;top:-3px;height:8px;background-image:var(--kranok);background-repeat:repeat-x;background-position:center;opacity:.45;transform:scaleY(-1);}
.socials{display:flex;gap:16px;}
.socials a{color:var(--gold);font-weight:700;font-family:var(--font);}
.socials a:hover{color:var(--gold-l);}
/* ============================================================
Content-page utilities
============================================================ */
.wrap{width:min(1140px,92%);margin:0 auto;position:relative;z-index:2;padding:30px 0 56px;}
.page-head{text-align:center;margin:8px 0 30px;}
.page-head h1{margin:0;font-family:var(--font-display);font-size:clamp(38px,5vw,60px);font-weight:700;line-height:1.05;
background:var(--grad-goldline);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:goldSheen 6s linear infinite;}
@media(prefers-reduced-motion:reduce){.page-head h1{animation:none;}}
.page-head .en{display:block;font-family:var(--font-display);color:var(--gold-l);font-size:15px;letter-spacing:.18em;margin-top:8px;text-transform:uppercase;}
.page-head .en::before{content:"\2740 ";color:var(--gold-d);}
.page-head .en::after{content:" \2740";color:var(--gold-d);}
.page-head p{color:var(--ink);margin:14px auto 0;max-width:720px;font-size:16px;line-height:1.75;}
.card{position:relative;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);padding:24px 26px;}
.card::after{content:"";position:absolute;top:8px;left:8px;width:34px;height:34px;background:var(--corner);background-repeat:no-repeat;opacity:.8;pointer-events:none;}
.card + .card,.grid2 + .card,.card + .grid2,.grid3 + .card,.card + .grid3{margin-top:18px;}
.card h2{margin:0 0 16px;font-family:var(--font-display);color:var(--gold);font-size:26px;font-weight:700;display:flex;align-items:center;gap:10px;}
.card h2::before{content:"";width:8px;height:24px;border-radius:6px;background:var(--grad-red);}
.card h3{margin:0 0 6px;font-family:var(--font-display);color:var(--gold-l);font-size:19px;font-weight:700;}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.prose{color:var(--ink);line-height:1.9;font-size:15.5px;}
.prose p{margin:0 0 12px;}
.prose ul,.prose ol{margin:0 0 14px;padding-left:22px;}
.prose li{margin:7px 0;}
.prose li::marker{color:var(--gold);}
.prose strong{color:var(--gold-l);}
.prose a{color:var(--gold);text-decoration:underline;}
.stat-row{display:flex;justify-content:space-between;gap:12px;padding:11px 2px;border-bottom:1px dashed var(--line2);}
.stat-row:last-child{border-bottom:0;}
.stat-row > span{color:var(--muted);}
.stat-row b{color:var(--gold);font-weight:700;}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;}
.note{color:var(--muted);font-size:13px;}
.steps{counter-reset:s;list-style:none;padding:0;margin:0;}
.steps li{counter-increment:s;position:relative;padding:0 0 14px 48px;margin:0;color:var(--ink);line-height:1.7;}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
background:var(--grad-red);color:#2a1c06;font-weight:800;font-family:var(--font-display);}
/* Patchnote / news list */
.news-item{padding:18px 0;border-bottom:1px solid var(--line2);}
.news-item:first-child{padding-top:0;}
.news-item:last-child{border-bottom:0;padding-bottom:0;}
.news-item h3{margin:9px 0 6px;font-family:var(--font-display);color:var(--gold-l);font-size:20px;font-weight:700;}
.news-item p{margin:0;color:var(--muted);line-height:1.7;}
.news-meta{display:flex;align-items:center;gap:12px;}
.news-meta time{color:var(--muted);font-size:12px;}
.badge{display:inline-block;padding:4px 14px;border-radius:999px;font-size:12px;font-weight:700;font-family:var(--font);color:#2a1c06;background:var(--grad-red);}
.badge-event{background:linear-gradient(180deg,#4adc7c,#1f9e63);color:#fff;}
.badge-maintenance{background:linear-gradient(180deg,#8a9bc0,#4a5a80);color:#fff;}
.badge-news{background:var(--grad-gold);color:#fff;}
/* Staff avatars */
.staff-ava{width:66px;height:66px;border-radius:50%;margin:0 auto 12px;border:3px solid var(--card);box-shadow:0 6px 16px rgba(0,0,0,.45);
background:radial-gradient(circle at 38% 30%,#ffe1b0,var(--gold-d) 72%);}
/* Icon helpers */
.mb-grid a i{margin-right:9px;color:var(--gold);font-size:16px;width:18px;text-align:center;}
.socials a i,.mb-foot .soc a i{margin-right:7px;}
.actions .pill i,.btn i,.mb-cta .btn i{margin-right:8px;}
.btn i{font-size:.92em;}
/* ============================================================
Responsive
============================================================ */
@media(max-width:1100px){
.page{width:100%;}
.topbar{grid-template-columns:1fr;height:auto;padding:8px 12px 12px;}
.mini-logo{padding-left:0;justify-content:center;}
.nav{flex-wrap:wrap;}
.nav a{min-width:auto;padding:8px 12px;margin:4px;}
.actions{justify-content:center;padding:8px 0 0;}
.hero{grid-template-columns:1fr;padding:24px 18px 8px;}
.hero::before{font-size:220px;}
.brand-art img{width:230px;}
.status-card{max-width:380px;width:100%;margin:0 auto;}
.thai-divider,.feature-strip,.content{margin-left:16px;margin-right:16px;}
.feature-strip,.content{padding-left:0;padding-right:0;}
.feature-strip{grid-template-columns:repeat(2,1fr);}
.content{grid-template-columns:1fr;}
.footer{padding:22px 18px;display:grid;gap:12px;text-align:center;justify-items:center;}
}
@media(max-width:900px){
.wrap{width:94%;}
.grid2,.grid3,.grid4{grid-template-columns:1fr;}
}
@media(max-width:600px){
.btn-row{flex-direction:column;}
.btn-row .btn{width:100%;}
.hero-ctas{flex-direction:column;}
.hero-ctas a{width:100%;}
.feature-strip{grid-template-columns:1fr;}
}
/* ---- Hero single-banner mode (homepage) ---- */
.hero.hero-banner{display:block;min-height:auto;padding:24px 56px 8px;}
.hero-banner .hero-art-wrap{position:relative;line-height:0;aspect-ratio:1536/450;border-radius:16px;overflow:hidden;
border:1px solid var(--line);box-shadow:0 18px 44px rgba(0,6,22,.55),inset 0 0 0 1px rgba(244,198,104,.12);}
.hero-banner .hero-art-wrap picture{position:absolute;inset:0;display:block;}
.hero-banner .hero-art-wrap img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;}
.hero-hot{position:absolute;border-radius:999px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:.15s;z-index:3;}
.hero-hot:hover{box-shadow:0 0 0 2px rgba(244,198,104,.7),0 0 20px rgba(244,198,104,.45);background:rgba(244,198,104,.10);}
.hero-hot.reg{left:13%;top:78%;width:14%;height:12.5%;}
.hero-hot.dl{left:28%;top:78%;width:14.5%;height:12.5%;}
.hero-hot.start{left:80%;top:71%;width:18%;height:16%;border-radius:12px;}
.hero-count{position:absolute;left:83.5%;top:51.5%;width:11%;height:12%;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2;}
.hero-count strong{font-family:var(--font-display);font-weight:700;color:var(--gold);font-size:clamp(20px,3vw,46px);line-height:1;text-shadow:0 2px 12px rgba(244,198,104,.55);font-variant-numeric:tabular-nums;}
@media(max-width:1100px){
.hero.hero-banner{padding:14px 12px 6px;}
.hero-count strong{font-size:clamp(16px,5vw,32px);}
}
/* ---- Accessibility: screen-reader-only + visible focus ---- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
a:focus-visible,button:focus-visible,.hero-hot:focus-visible,.nav a:focus-visible,[data-rank-tab]:focus-visible{
outline:3px solid var(--gold-l);outline-offset:2px;border-radius:10px;}
.hero-hot:focus-visible{background:rgba(244,198,104,.12);}