/* =====================================================================
   MapleFresh design (2026-10-11, v2 "subtle")
   Loaded after site.css (and forum.css / patchnotes.css) on every page.
   A clean, modern site: system type, white space, hairline borders,
   soft shadows. MapleStory is the accent, not the wallpaper: maple
   orange, a leaf, real game art in frames, pixel sprites as details.
   ===================================================================== */

:root{
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --text:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;
  /* the old site's font tokens all become the clean sans */
  --display:var(--sans); --cond:var(--sans); --body:var(--text); --web:var(--text);

  --bg:#ffffff; --bg-2:#f7f8fa; --bg-3:#f1f3f6;
  --ink:#0d1321; --ink-2:#394252; --muted:#6a7282; --faint:#9aa1ad;
  --line:#e7e9ee; --line-2:#f0f1f4;
  --accent:#ff6b1a; --accent-2:#e95a0c; --accent-soft:#fff2ea; --accent-ink:#b8460a;
  --link:#1f6feb; --link-soft:#ecf3ff;
  --ok:#12a150; --ok-soft:#e8f7ee; --bad:#d4380d; --bad-soft:#fdf0ec;
  --night:#0b1220;
  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px;
  --sh-1:0 1px 2px rgba(13,19,33,.05);
  --sh-2:0 1px 2px rgba(13,19,33,.04),0 6px 20px -8px rgba(13,19,33,.14);
  --sh-3:0 2px 4px rgba(13,19,33,.04),0 24px 60px -24px rgba(13,19,33,.28);
  --navh:64px;
  /* old tokens, remapped */
  --paper:#fff; --beige:#fff; --beige-2:var(--bg-2); --navy:var(--ink); --blue:var(--link); --blue-d:#1857c4; --blue-l:#8fb8f5; --sky-100:var(--link-soft);
  --maple:var(--accent); --maple-600:var(--accent-2); --gold:#f5b301;
  --shadow:var(--sh-2);
  --t-notice:#3b6fd4; --t-gameup:#7046d6; --t-webup:#c13a86; --t-event:#e0561c; --t-prize:#b88300; --t-info:#13906a;
}

/* ---------- base ---------- */
html{background:var(--bg);cursor:auto;-webkit-text-size-adjust:100%}
a,button,[role=tab],label,.clickable{cursor:pointer}
input,textarea{cursor:text}
body{font:400 16px/1.6 var(--text);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body::before,body::after,body[data-page="home"]::before,body[data-page="home"]::after{content:none !important;background:none !important}
::selection{background:#ffd8bf;color:#3a1600}
:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:6px}
.wrap{width:min(1180px,100% - 48px)}
h1,h2,h3,h4{letter-spacing:-.02em}
.pixel{image-rendering:pixelated}

/* ---------- buttons ---------- */
.gloss,.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:auto;padding:11px 18px;border:0;border-radius:12px;
  font:600 .95rem/1.2 var(--sans);letter-spacing:-.005em;text-transform:none;white-space:nowrap;text-shadow:none;isolation:auto;overflow:visible;
  color:#fff;background:var(--accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(13,19,33,.12),0 4px 12px -4px rgba(233,90,12,.45);
  transition:background .15s,box-shadow .15s,transform .15s,color .15s}
.gloss::before,.btn::before{content:none}
.gloss:hover,.btn:hover{background:var(--accent-2);filter:none;transform:none}
.gloss:active,.btn:active{transform:translateY(1px)}
.gloss svg,.btn svg{width:18px;height:18px;flex:none}
/* primary (orange): g-orange, g-green, btn-primary */
.g-orange,.g-green,.btn-primary,.btn-maple,.btn-orange{color:#fff;background:var(--accent)}
/* strong (ink): g-blue */
.g-blue,.btn-ink{color:#fff;background:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(13,19,33,.2)}
.g-blue:hover,.btn-ink:hover{background:#252d3d}
/* quiet: g-dark, btn-secondary, btn-ghost */
.g-dark,.btn-secondary,.btn-ghost,.btn-cloud{color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1px var(--line),var(--sh-1);font-size:.9rem;border-radius:12px}
.g-dark:hover,.btn-secondary:hover,.btn-ghost:hover,.btn-cloud:hover{background:var(--bg-2);color:var(--ink)}
.btn-text{background:none;box-shadow:none;color:var(--ink-2);padding-inline:10px}
.btn-text:hover{background:var(--bg-3);color:var(--ink)}
.btn-lg{padding:15px 24px;font-size:1.02rem;border-radius:14px}
.btn-sm,.pill{padding:8px 13px;font-size:.86rem;border-radius:10px}
.pill::before{content:none}
.gloss[disabled],.btn[disabled]{opacity:.5;pointer-events:none;filter:none}
.bigbtn,.stripes{background-image:none}

/* ---------- nav ---------- */
.pnav{position:sticky;top:0;z-index:60;height:var(--navh);padding:0;background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border:0;border-bottom:1px solid rgba(13,19,33,.06);box-shadow:none;pointer-events:auto}
.pnav>.nv{width:min(1180px,100% - 48px);height:100%;margin:0 auto;display:flex;align-items:center;gap:8px;background:none;border-radius:0;box-shadow:none;padding:0}
.nv-brand{flex:none;display:flex;align-items:center;gap:9px;margin-right:18px;font:800 1.18rem/1 var(--sans);letter-spacing:-.03em;color:var(--ink)}
.nv-brand img{width:26px;height:auto;transition:transform .3s}
.nv-brand:hover img{transform:rotate(-14deg)}
.nv-brand .wm>span{color:var(--accent)}
.nv-links{display:flex;align-items:center;gap:2px;list-style:none;flex:1;min-width:0}
.nv-links>li{position:relative;display:block;border:0 !important;box-shadow:none !important}
.nv-l{display:flex;align-items:center;gap:4px;height:36px;padding:0 11px;border-radius:9px;font:500 .93rem/1 var(--sans);color:var(--ink-2);white-space:nowrap;letter-spacing:-.005em;transition:background .15s,color .15s}
.nv-l:hover,.nv-more.show>.nv-l{color:var(--ink);background:var(--bg-3)}
.nv-l.on{color:var(--ink);font-weight:600}
.nv-l.vip{color:var(--ink-2)}
.nv-l svg{width:11px;height:11px;opacity:.55;transition:transform .2s}
.nv-more.show>.nv-l svg{transform:rotate(180deg)}
.nv-dd{display:none;position:absolute;top:calc(100% + 10px);left:-8px;min-width:300px;padding:8px;background:#fff;border-radius:16px;box-shadow:0 0 0 1px rgba(13,19,33,.07),var(--sh-3);z-index:70}
.nv-dd::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nv-more.show .nv-dd{display:grid;gap:2px;animation:ddin .16s ease-out}
@keyframes ddin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.nv-dd a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:11px;font:600 .92rem/1.25 var(--sans);color:var(--ink)}
.nv-dd a small{display:block;font:400 .8rem/1.35 var(--text);color:var(--muted);margin-top:1px}
.nv-dd a:hover,.nv-dd a:focus-visible{background:var(--bg-2)}
.nv-dd a.on{background:var(--accent-soft)}
.nv-dd .ic{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.nv-dd .ic img{max-width:24px;max-height:24px;width:auto}
.nv-side{flex:none;display:flex;align-items:center;gap:6px;margin-left:auto}
.srv-pill{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;border-radius:999px;background:var(--bg-2);color:var(--ink-2);font:500 .82rem/1 var(--sans);white-space:nowrap;box-shadow:inset 0 0 0 1px var(--line-2)}
.srv-pill b{font-weight:650;color:var(--ink)}
.srv-pill.off .dot{background:#e5484d;box-shadow:none;animation:none}
.dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18);animation:none;flex:none}
.menu-btn{display:none;width:40px;height:40px;border-radius:10px;background:transparent;flex:none}
.menu-btn:hover{background:var(--bg-3)}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative;margin:auto;content:"";transition:transform .2s,background .2s}
.menu-btn span::before{position:absolute;top:-6px}.menu-btn span::after{position:absolute;top:6px}
.pnav.open .menu-btn span{background:transparent}
.pnav.open .menu-btn span::before{transform:translateY(6px) rotate(45deg)}
.pnav.open .menu-btn span::after{transform:translateY(-6px) rotate(-45deg)}
#nav .nbell{width:36px;height:36px;border-radius:10px;border:0;background:transparent;color:var(--ink-2);box-shadow:none}
#nav .nbell:hover{background:var(--bg-3);filter:none}

/* ---------- inner page header ---------- */
.page-hero{position:relative;height:auto;min-height:0;margin:0;padding:0;overflow:hidden;isolation:isolate;
  background:radial-gradient(800px 260px at 88% 0%,#eef4ff,transparent 70%),radial-gradient(640px 240px at 6% 0%,#fff3eb,transparent 70%),#fff;border-bottom:1px solid var(--line-2)}
.page-hero::before,.page-hero::after{content:none}
.page-hero .wrap{position:relative;z-index:2;display:block;min-height:0;height:auto;padding:52px 0 44px}
.page-hero .wrap::before{content:none}
.crumbs{display:flex;align-items:center;gap:6px;padding:0;background:none;border-radius:0;font:500 .85rem/1.2 var(--sans);color:var(--muted);letter-spacing:0;text-transform:none}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--ink);text-decoration:none}
.page-hero h1{margin:12px 0 10px;font:800 clamp(2.1rem,4.4vw,3.2rem)/1.05 var(--sans);letter-spacing:-.035em;color:var(--ink);text-shadow:none}
.page-hero h1 em{font-style:normal;color:var(--accent);text-shadow:none}
.page-hero p{max-width:620px;color:var(--muted);font:400 1.1rem/1.55 var(--text);text-shadow:none}
.page-hero .deco{right:max(24px,calc((100% - 1180px) / 2));bottom:0}
.page-hero .deco img{max-height:118px;filter:none}

/* ---------- layout ---------- */
.portal{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:40px}
.portal.sub{grid-template-columns:minmax(0,1fr);width:min(1080px,100% - 48px);margin-top:40px}
.portal.sub>.col-l,#sidebar{display:none}
.col{gap:24px}
.sec{scroll-margin-top:88px}

/* ---------- cards ---------- */
.box,.panel,.passport,.status,.wcard{position:relative;background:#fff;border:0;border-radius:var(--r-lg);padding:28px;box-shadow:0 0 0 1px var(--line),var(--sh-1)}
.box::before,.panel::before,.passport::before,.status::before,.wcard::before{content:none}
.box.flush{padding:0;overflow:hidden}
.btitle,.rk-head{align-items:center;gap:12px;margin-bottom:18px}
.btitle h2,.btitle h3,.rk-head h2,.panel-head h2{font:700 1.3rem/1.2 var(--sans);letter-spacing:-.02em;color:var(--ink);text-transform:none;text-shadow:none}
.btitle h2 span,.btitle h3 span,.rk-head h2 span,.panel-head h2 span{color:inherit}
.more{display:inline-flex;align-items:center;gap:4px;padding:0;border-radius:0;background:none;font:500 .9rem/1.2 var(--sans);color:var(--ink-2);text-transform:none;letter-spacing:0;white-space:nowrap}
.more::after{content:"→";color:inherit;transition:transform .15s}
.more:hover{color:var(--ink);background:none}
.more:hover::after{transform:translateX(2px)}
/* 2026-10-14 polish: a plain-text note (span.more, not a link) gets no arrow, and on phones a long note drops under its title instead of pushing the page sideways (guide Town header) */
span.more::after{content:none}
@media (max-width:640px){.btitle{flex-wrap:wrap;row-gap:4px}.btitle>span.more{white-space:normal}}
.panel{background:#fff;border:0}
.panel-head{padding:0 0 16px}
.panel-head p{color:var(--muted);text-shadow:none;font-size:.95rem}
.panel-head .more{color:var(--ink-2)}
.board{border:0;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line)}
.slot{border:0;border-radius:12px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.lead-in{font:400 1.02rem/1.65 var(--text);color:var(--ink-2)}
.prose{font:400 1.02rem/1.75 var(--text);color:var(--ink-2)}
.prose h3{font:700 1.15rem/1.3 var(--sans);color:var(--ink)}
.prose b,.prose strong{color:var(--ink);font-weight:600}
.prose a,.lead-in a,.alt a,.check a,.callout a{color:var(--link);text-decoration:underline;text-decoration-color:rgba(31,111,235,.3);text-underline-offset:3px}
.empty{font:400 .95rem var(--text);color:var(--muted)}
.why h3,.perk b,.steps-l li>div>b,.sc h3,.dl-main h2,.np-title,.vip-no,.fres h3{font-family:var(--sans);color:var(--ink);letter-spacing:-.015em}
.why p,.perk p,.steps-l p,.ticks li,.crosses li,.rules li,.paths li,.faq .ans,.news-list .body,.sc-item,.ref-intro,.ms-note{font-family:var(--text);color:var(--ink-2)}

/* ---------- lists & tags ---------- */
.lst li{gap:12px;padding:13px 0;border-bottom:1px solid var(--line-2);font:500 .97rem/1.4 var(--text);color:var(--ink)}
.lst li:last-child{border-bottom:0}
.lst li a:hover{color:var(--link);text-decoration:none}
.lst li .d{margin-left:auto;flex:none;font:400 .85rem var(--text);color:var(--faint)}
.tag{width:auto;min-width:0;padding:0 9px;border-radius:999px;font:600 .72rem/22px var(--sans);letter-spacing:0;text-transform:none;
  color:var(--c);background:color-mix(in srgb,var(--c) 10%,#fff);box-shadow:none}

/* ---------- rankings widget ---------- */
.tabs{gap:2px;padding:3px;border-radius:12px;background:var(--bg-3)}
.tab{height:32px;padding:0 12px;border-radius:9px;background:transparent;border:0;box-shadow:none;font:500 .85rem/1 var(--sans);color:var(--ink-2)}
.tab:hover{background:rgba(255,255,255,.6)}
.tab[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:var(--sh-1),0 0 0 1px rgba(13,19,33,.04);text-shadow:none}
.tab i{width:7px;height:7px}
.tab[aria-selected="true"] i{box-shadow:none}
.search input,.sort select{height:38px;font:400 .92rem var(--text);padding:0 12px 0 34px;border-radius:10px;border:0;box-shadow:inset 0 0 0 1px var(--line);background:#fff;width:200px}
.sort select{padding-left:12px;width:auto}
.search input:focus{box-shadow:inset 0 0 0 1px var(--link),0 0 0 3px rgba(31,111,235,.15)}
.search svg{left:12px;width:15px;height:15px;color:var(--faint)}
.sort{font:500 .88rem var(--sans);color:var(--muted)}
.podium{gap:14px;padding:26px 18px 0;border-radius:var(--r) var(--r) 0 0;background:linear-gradient(180deg,#f3f7ff,#fff);box-shadow:inset 0 0 0 1px var(--line-2)}
.podium::after{content:none}
.pod .base{max-width:200px;border-radius:14px 14px 0 0;background:#fff;box-shadow:0 0 0 1px var(--line),var(--sh-1);padding:12px 8px 12px}
.pod.first .base{min-height:84px;background:linear-gradient(#fffaf0,#fff)}
.pod .meta{color:var(--muted);text-shadow:none;font:500 .8rem/1.3 var(--text)}
.tagname{background:none;color:var(--ink);font:650 .95rem/1.2 var(--sans);padding:0;border-radius:0}
.pod.first .tagname{color:var(--ink)}
.tagguild{background:none;color:var(--muted);font:400 .78rem var(--text);padding:0}
.medal{border:0;box-shadow:0 0 0 3px #fff,var(--sh-2)}
.medal::before,.medal::after{content:none}
.table{border:0;border-radius:0 0 var(--r) var(--r);box-shadow:0 0 0 1px var(--line);background:#fff;overflow:hidden}
.row{font:400 .93rem/1.35 var(--text);border-top:1px solid var(--line-2);padding:6px 16px}
.row:nth-child(odd){background:#fff}
.row:hover{background:var(--bg-2)}
.row.hr{background:var(--bg-2);font:600 .74rem/1 var(--sans);color:var(--muted);letter-spacing:.02em;text-transform:uppercase;padding:12px 16px}
.rk{font:700 1rem/1 var(--sans);color:var(--ink)}
.row .mv,.row .mv.eq{width:auto;height:auto;padding:0;border:0;background:none;border-radius:0;font:600 .72rem/1 var(--text)}
.who b{font:650 .98rem/1.2 var(--sans);color:var(--ink)}
.guild{font-size:.78rem;color:var(--muted)}
.job{font-weight:500}
.job img{box-shadow:none;border-radius:6px}
.lv{font:700 1rem/1 var(--sans);color:var(--ink)}
.lv small{font:500 .7rem var(--text);color:var(--faint)}
.exp{height:6px;padding:0;border-radius:999px;background:var(--bg-3);box-shadow:none}
.exp span{border-radius:999px;background:var(--accent)}
.exp em{position:static;display:block;margin-top:6px;font:500 .72rem/1 var(--text);color:var(--muted);text-align:left;text-shadow:none}
.credit{font:400 .78rem var(--text);color:var(--faint)}
.pager{gap:4px;margin-top:16px}
.pager button{min-width:36px;height:36px;border-radius:10px;border:0;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font:500 .88rem var(--sans);color:var(--ink-2)}
.pager button[aria-current="true"]{background:var(--ink);color:#fff;box-shadow:none}

/* ---------- tables, forms, callouts ---------- */
.tbl-wrap{border:0;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);background:#fff}
.tbl{font:400 .93rem/1.5 var(--text)}
.tbl th{background:var(--bg-2);color:var(--muted);font:600 .74rem var(--sans);text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--line)}
.tbl td{border-bottom:1px solid var(--line-2);color:var(--ink-2)}
.tbl tr:nth-child(even) td{background:#fff}
.tbl td b{color:var(--ink)}
.tbl code,.prose code,code{font:500 .85em var(--mono);background:var(--bg-3);color:var(--ink);padding:2px 6px;border-radius:6px}
.form{gap:16px}
.field label,.field .lbl{font:600 .9rem var(--sans);color:var(--ink);margin-bottom:7px}
.input{font:400 1rem var(--text);padding:11px 13px;border:0;border-radius:11px;background:#fff;box-shadow:inset 0 0 0 1px #d9dde5,var(--sh-1);color:var(--ink);transition:box-shadow .15s}
.input::placeholder{color:var(--faint)}
.input:hover{box-shadow:inset 0 0 0 1px #c5cbd6,var(--sh-1)}
.input:focus{box-shadow:inset 0 0 0 1px var(--link),0 0 0 4px rgba(31,111,235,.14)}
.field.bad .input{box-shadow:inset 0 0 0 1px var(--bad),0 0 0 4px rgba(212,56,13,.12)}
.field .hint{font:400 .84rem/1.45 var(--text);color:var(--muted)}
.field .err{font:500 .84rem/1.4 var(--text);color:var(--bad)}
.check{font:400 .93rem/1.5 var(--text);color:var(--ink-2)}
.check input{accent-color:var(--accent)}
.form .submit{height:auto;padding:14px 20px;font-size:1rem;border-radius:12px}
.alt{font:400 .92rem var(--text);color:var(--muted)}
.select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236a7282' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 13px center}
.gender span{border:0;border-radius:11px;box-shadow:inset 0 0 0 1px #d9dde5;font:500 .95rem var(--sans);color:var(--ink-2)}
.gender input:checked+span{box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 4px rgba(13,19,33,.06);color:var(--ink)}
.callout{border:0;border-radius:var(--r);padding:16px 18px;background:var(--accent-soft);box-shadow:none;font:400 .97rem/1.6 var(--text);color:#5b2a0c}
.callout b{color:#3d1a05}
.callout img{width:32px;height:32px}
.callout.blue{background:var(--link-soft);color:#173a73}
.callout.vip{background:#f5f0ff;color:#3b2366}
.chips{gap:6px}
.chip{font:500 .8rem var(--sans);background:var(--bg-3);color:var(--ink-2);border:0;box-shadow:none;padding:6px 11px}
.steps-l li::before{width:32px;height:32px;font:700 .95rem var(--sans);background:var(--ink);color:#fff;box-shadow:none}
.steps-l li>div>b{font:650 1.05rem var(--sans);padding-top:4px}
.faq details,.news-list details{border-bottom:1px solid var(--line-2)}
.faq summary{font:600 1.02rem var(--sans);color:var(--ink);padding:18px 4px}
.faq summary::after,.news-list summary::after{width:26px;height:26px;border-radius:999px;background:var(--bg-3);color:var(--ink-2);font:500 1.1rem/1 var(--sans)}
.faq .ans{font:400 .98rem/1.7 var(--text)}
.news-list summary{padding:16px 4px}
.news-list .ttl{font:600 1.02rem/1.4 var(--sans);color:var(--ink)}
.news-list summary:hover .ttl,.news-list details[open] .ttl{color:var(--ink)}
.news-list .date{font:400 .86rem var(--text);color:var(--faint)}
.news-list details:target{background:var(--accent-soft);border-radius:12px}
.rules li::before{border-radius:999px;background:var(--bg-3);color:var(--ink);font-family:var(--sans)}
.ticks li::before{background:var(--ok-soft);color:var(--ok)}
.crosses li::before{background:var(--bad-soft);color:var(--bad)}
.tile{border-radius:var(--r);font:600 .95rem/1.2 var(--sans)}
.tile.o,.tile.b{background:var(--bg-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);text-shadow:none}
.tile img{opacity:1;filter:none}
.ms{border:0;border-radius:var(--r);box-shadow:none;text-shadow:none}
.ms::before{content:none}
.ms b,.ms span{font-family:var(--sans);text-shadow:none}
.ms.views,.ms.likes,.ms.friends,.ms.level{background:var(--bg-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.ms small{color:var(--muted)}
.cls-tabs{background:var(--bg-2);border-bottom:1px solid var(--line-2)}
.cls-tab{border:0;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font:500 .88rem var(--sans);color:var(--ink-2)}
.cls-tab[aria-selected="true"]{background:var(--ink);color:#fff;box-shadow:none;text-shadow:none}
.cls-detail .bar{font-family:var(--sans);color:var(--ink)}
.cls-detail .bar small{font-family:var(--sans);text-transform:none}
.vipb{border-radius:6px;background:#7c4ddb;box-shadow:none;font:600 .62rem/16px var(--sans);text-transform:none;letter-spacing:0}
.pkg,.vcard,.sc-item,.member,.gmaster,.gpicker{border:0;border-radius:var(--r);box-shadow:0 0 0 1px var(--line)}
.vcard:hover,.pkg:hover{box-shadow:0 0 0 1px var(--line),var(--sh-2)}
.sc-item{background:#fff;font:400 .88rem var(--text)}
.sc-item .slot{width:40px;height:40px}
.fashion{border-radius:var(--r);background:linear-gradient(#f5f8ff,#fff);box-shadow:inset 0 0 0 1px var(--line-2)}
.acct .preview,.dl-art,.member .scene,.cls-detail .scene,.post .who,.ccard .cc-top{background:linear-gradient(180deg,#eef4ff,#f8faff) !important}
.dl-main h2{font:700 1.4rem var(--sans)}
.hash{background:var(--bg-2);border-radius:10px;font-family:var(--mono)}

/* ---------- forums ---------- */
body .fgroup{background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);overflow:hidden}
body .fgroup+.fgroup{margin-top:20px}
body .fgroup h3{background:var(--bg-2);color:var(--ink);padding:12px 16px;font:600 .82rem var(--sans);text-transform:uppercase;letter-spacing:.04em;text-shadow:none;border-radius:0;border-bottom:1px solid var(--line-2)}
body .frow{border:0;border-top:1px solid var(--line-2);background:#fff}
body .frow:nth-child(odd){background:#fff}
body .frow:last-child{border-radius:0}
body .frow:hover{background:var(--bg-2)}
body .frow.hd{background:#fff;color:var(--faint);font:600 .7rem var(--sans);text-transform:uppercase;letter-spacing:.04em;border-top:0}
body .frow .bn b{font:650 1rem var(--sans);color:var(--ink)}
body .frow .bn b:hover{color:var(--link);text-decoration:none}
body .frow .bn small{font:400 .86rem/1.4 var(--text);color:var(--muted)}
body .frow .num{font:600 .92rem var(--sans);color:var(--ink-2)}
body .frow .slot{background:var(--bg-2);border-radius:11px;box-shadow:none}
/* whole characters, never a cropped head: fit the full sprite, feet on the bottom */
body .frow .last img,body .frow .slot img.head{object-fit:contain;object-position:50% 100%;image-rendering:pixelated;background:var(--bg-2);border-radius:9px;padding:2px 1px 0}
body .frow .slot img.head{width:40px;height:40px}
body .frow .last{font:400 .86rem/1.35 var(--text);color:var(--muted)}
body .frow .last b{color:var(--ink);font-weight:600}
body .fstats{font:400 .9rem var(--text);color:var(--muted)}
body .fstats b{color:var(--ink)}
body .fsearch input,body .fsearch select{height:40px;border:0;border-radius:11px;box-shadow:inset 0 0 0 1px #d9dde5;font:400 .95rem var(--text)}
body .fsearch input:focus{box-shadow:inset 0 0 0 1px var(--link),0 0 0 4px rgba(31,111,235,.14)}
body .fbar .gloss{height:40px;padding:0 15px;font-size:.9rem}
body .fbtn{height:32px;border:0;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);text-transform:none;font:500 .82rem var(--sans);color:var(--ink-2);letter-spacing:0}
body .fbtn[aria-pressed="true"]{background:var(--link-soft);box-shadow:inset 0 0 0 1px #b9d1fa;color:var(--link)}
body .ftool{background:var(--bg-2);border-bottom:1px solid var(--line)}
body .ftag{border-radius:6px;font:600 .66rem/18px var(--sans);text-transform:none;letter-spacing:0}
body .fres{border:0;border-radius:var(--r);box-shadow:0 0 0 1px var(--line)}
body .post{border:0;border-radius:var(--r);box-shadow:0 0 0 1px var(--line)}
body .post+.post{margin-top:14px}
body .post .who{border-right:1px solid var(--line-2)}
body .post .msg .when{font:400 .84rem var(--text);color:var(--faint);border-bottom:1px solid var(--line-2)}
body .post .msg p{font:400 1rem/1.7 var(--text);color:var(--ink-2)}
body .post .who .role{font-family:var(--sans);text-transform:none}
body .banner{border-radius:12px}
body .npanel{border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px var(--line),var(--sh-3);border:0}
body .npanel .nhead{background:#fff;color:var(--ink);border-bottom:1px solid var(--line-2);font-family:var(--sans)}
body .member .body b{font-family:var(--sans);color:var(--ink)}
body .badge{font-family:var(--sans)}

/* ---------- popups ---------- */
.notice-pop,.modal{background:rgba(13,19,33,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.np-box{border:0;border-radius:20px;background:#fff;box-shadow:var(--sh-3);padding:26px 24px 22px}
.np-title{font:700 1.2rem var(--sans)}
.np-msg{font:400 .98rem/1.6 var(--text);color:var(--ink-2)}
.np-ok{width:auto;min-width:120px}
.mwin{border:0;border-radius:20px;box-shadow:var(--sh-3)}
.mbar{background:#fff;color:var(--ink);text-shadow:none;font:700 1.08rem var(--sans);padding:16px 18px;border-bottom:1px solid var(--line-2)}
.mclose{background:var(--bg-3);color:var(--ink-2);border-radius:9px;width:32px;height:32px}
.mclose:hover{background:var(--line)}

/* ---------- Slime Radio: a quiet round button ---------- */
.radio .rslime{width:52px;height:52px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line),var(--sh-2);justify-content:center;filter:none}
.radio .rslime .slime{width:34px;margin:0}
.radio .rbox,.radio .rslime .notes{display:none}
.radio .rtip{right:62px;bottom:14px;border:0;border-radius:8px;box-shadow:var(--sh-2);font:500 .82rem var(--sans)}
.radio .rtip::after{content:none}
.radio .rpanel{border:0;border-radius:18px;box-shadow:0 0 0 1px var(--line),var(--sh-3)}
.radio .rbar{background:#fff;color:var(--ink);border-bottom:1px solid var(--line-2);font:700 .95rem var(--sans);text-shadow:none}
.radio .rt b{font-family:var(--sans);color:var(--ink)}
.radio .rprog span,.radio .eq i{background:var(--accent)}
.radio .eq{background:var(--accent-soft);border:0}
.radio .rb{background:#fff;border:0;box-shadow:inset 0 0 0 1px var(--line)}
.radio .rb.play{background:var(--ink)}
.radio .rlist button[aria-current="true"]{background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 3px 0 0 var(--accent)}
.radio .rlist button:hover{background:var(--bg-2)}
.radio .rvol input{accent-color:var(--accent)}

/* ---------- footer ---------- */
footer{position:relative;margin-top:120px;padding:56px 0 40px;background:var(--bg-2);border-top:1px solid var(--line-2);font:400 .93rem/1.6 var(--text);color:var(--ink-2)}
footer .wrap{display:block}
.ft-in{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:32px;align-items:start}
.ft-brand .nv-brand{margin:0}
.ft-brand p{margin-top:14px;color:var(--muted);max-width:300px}
.ft-brand .srv-pill{margin-top:16px;background:#fff}
.ft-col h4{font:600 .86rem var(--sans);color:var(--ink);margin-bottom:12px;letter-spacing:0}
.ft-col a{display:block;padding:4px 0;color:var(--muted)}
.ft-col a:hover{color:var(--ink)}
.ft-fine{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:.84rem;color:var(--faint)}
footer .fine{width:auto;font-size:.84rem;color:var(--faint)}

/* ---------- scroll reveal ---------- */
.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal].in{opacity:1;transform:none}

/* ---------- guide + leftover game art ---------- */
.plaque{display:none !important}
.gnav{top:calc(var(--navh) + 10px);padding:6px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:0;border-radius:14px;box-shadow:0 0 0 1px var(--line),var(--sh-1)}
.gnav a{padding:7px 12px;border:0;border-radius:10px;background:transparent;font:500 .86rem/1 var(--sans);color:var(--ink-2)}
.gnav a:hover{background:var(--bg-3);color:var(--ink);border:0}
.gnav a.on{background:var(--ink);color:#fff;text-shadow:none;border:0}
body[data-page="guide"] .sec{scroll-margin-top:150px}
.g-tip,.jstep{border:0;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);font-family:var(--text);color:var(--ink-2)}
.g-tip b,.jstep h3{font-family:var(--sans);color:var(--ink)}
.jstep p,.jobsum{font-family:var(--text);color:var(--ink-2)}
.jstep .n{background:var(--ink);font-family:var(--sans)}
.jstep .lv{font-family:var(--sans)}

/* =====================================================================
   HOME
   ===================================================================== */
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:6px 12px 6px 10px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line),var(--sh-1);font:500 .88rem/1.2 var(--sans);color:var(--ink-2)}
.eyebrow b{color:var(--ink);font-weight:650}
.eyebrow .sep{width:1px;height:14px;background:var(--line)}
.eyebrow .go{color:var(--faint);transition:transform .15s}
.eyebrow:hover .go{color:var(--ink);transform:translateX(2px)}

.hero{position:relative;overflow:hidden;isolation:isolate;padding:72px 0 120px;
  background:radial-gradient(900px 520px at 82% 18%,#e7f0ff,transparent 65%),radial-gradient(700px 440px at 8% 0%,#fff1e7,transparent 62%),#fff}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:56px;align-items:center}
.hero h1{margin:22px 0 18px;font:800 clamp(2.6rem,5.6vw,4.4rem)/1.0 var(--sans);letter-spacing:-.045em;color:var(--ink)}
.hero h1 .a{color:var(--accent)}
.hero .lead{max-width:520px;font:400 clamp(1.05rem,1.4vw,1.22rem)/1.6 var(--text);color:var(--ink-2)}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero .ctas .lf{width:18px;height:auto}
.hero-facts{display:flex;gap:26px;flex-wrap:wrap;margin-top:36px;list-style:none}
.hero-facts li{display:flex;flex-direction:column;gap:2px}
.hero-facts b{font:700 1.35rem/1.1 var(--sans);letter-spacing:-.03em;color:var(--ink)}
.hero-facts span{font:400 .86rem var(--text);color:var(--muted)}
.hero-facts li+li{padding-left:26px;border-left:1px solid var(--line)}

/* the game, framed */
.hero-art{position:relative}
.frame{position:relative;aspect-ratio:6/5;border-radius:var(--r-xl);overflow:hidden;background:#3367cc;box-shadow:0 0 0 1px rgba(13,19,33,.08),var(--sh-3);isolation:isolate}
.frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);pointer-events:none;z-index:4}
.fscene{position:absolute;left:50%;bottom:-8%;height:135%;aspect-ratio:1800/500;transform:translateX(-58%)}
.fscene img.l{position:absolute;inset:0;width:100%;height:100%;max-width:none;user-select:none;-webkit-user-drag:none}
.fscene .back{transform:translate3d(calc(var(--mx,0) * 8px),0,0);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.fscene .fore{transform:translate3d(calc(var(--mx,0) * -3px),0,0);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.flife{position:absolute;inset:0}
.actor{position:absolute;top:83%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;z-index:2}
.actor .sp{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:-4px;line-height:0}
.actor .sp img{display:block;max-width:none;width:auto;image-rendering:pixelated}
.actor .tagn{margin-top:2px;padding:3px 6px 4px;border-radius:4px;background:rgba(0,0,0,.6);color:#fff;font:700 11px/1 Arial,Tahoma,sans-serif;white-space:nowrap}
.actor.mob{pointer-events:none;z-index:1}
.actor.mob .walker{display:block;animation:patrol var(--dur,16s) linear infinite;animation-delay:var(--delay,0s)}
@keyframes patrol{0%{transform:translateX(0) scaleX(1)}49.99%{transform:translateX(var(--dist,120px)) scaleX(1)}50%{transform:translateX(var(--dist,120px)) scaleX(-1)}100%{transform:translateX(0) scaleX(-1)}}
a.actor:hover .tagn{background:var(--accent)}
/* glass cards floating on the frame */
.chip-f{position:absolute;z-index:5;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px rgba(13,19,33,.06),0 12px 32px -12px rgba(13,19,33,.35);font:500 .86rem/1.3 var(--sans);color:var(--ink-2);max-width:300px}
.chip-f b{color:var(--ink);font-weight:650}
.chip-f small{display:block;color:var(--muted);font:400 .78rem var(--text)}
.chip-live{top:20px;left:-22px}
.chip-top{bottom:-20px;left:-28px}
.chip-top .av{width:40px;height:40px;flex:none;border-radius:11px;background:linear-gradient(#eef4ff,#fff);box-shadow:inset 0 0 0 1px var(--line-2);display:grid;place-items:end center;overflow:hidden}
.chip-top .av img{max-height:52px;width:auto;max-width:none;margin-bottom:-8px;image-rendering:pixelated}
.chip-chat{top:30%;right:-26px;max-width:250px;align-items:flex-start;transition:opacity .35s,transform .35s}
.chip-chat.swap{opacity:0;transform:translateY(6px)}
.chip-chat .ic{width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.chip-chat .ic svg{width:14px;height:14px}
.chip-chat p{margin:0;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* live numbers */
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:var(--r-lg);background:#fff;box-shadow:0 0 0 1px var(--line),var(--sh-2);position:relative;z-index:2;margin-top:-52px}
.metric{padding:22px 24px;min-width:0}
.metric+.metric{box-shadow:-1px 0 0 var(--line-2)}
.metric .k{display:flex;align-items:center;gap:7px;font:500 .82rem var(--sans);color:var(--muted)}
.metric b{display:block;margin-top:6px;font:700 1.55rem/1.1 var(--sans);letter-spacing:-.03em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metric small{display:block;margin-top:4px;font:400 .86rem var(--text);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metric .up{color:var(--ok)}.metric .down{color:var(--bad)}
.metric .hot{color:var(--accent-ink)}

/* section heads */
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 28px}
.sh .kick{display:block;font:600 .88rem var(--sans);color:var(--accent);margin-bottom:10px;letter-spacing:0}
.sh h2{font:800 clamp(1.9rem,3.4vw,2.7rem)/1.06 var(--sans);letter-spacing:-.04em;color:var(--ink);max-width:640px}
.sh p{margin-top:12px;max-width:560px;font:400 1.08rem/1.6 var(--text);color:var(--muted)}
.section{padding-top:104px}

/* bento */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(220px,auto);gap:18px}
.bt{position:relative;display:flex;flex-direction:column;gap:8px;padding:26px;border-radius:var(--r-lg);background:#fff;box-shadow:0 0 0 1px var(--line),var(--sh-1);overflow:hidden;isolation:isolate;transition:box-shadow .2s}
.bt:hover{box-shadow:0 0 0 1px var(--line),var(--sh-2)}
.bt h3{font:700 1.2rem/1.25 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.bt p{font:400 .98rem/1.55 var(--text);color:var(--muted);max-width:440px}
.bt .vis{margin-top:auto;padding-top:18px}
.bt-big{grid-column:span 2;grid-row:span 2;padding:32px}
.bt-big h3{font-size:1.7rem;letter-spacing:-.035em}
.bt-big .map{margin-top:auto;border-radius:18px;overflow:hidden;box-shadow:0 0 0 1px var(--line);aspect-ratio:16/7;background:url("../scene/map-victoria.webp") 50% 42%/cover}
.bt-wide{grid-column:span 2}
.ticks2{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 22px;list-style:none}
.ticks2 li{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line-2);font:500 .86rem var(--sans);color:var(--ink-2)}
.ticks2 li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.mobs{display:flex;align-items:flex-end;gap:22px;height:84px}
.mobs img{max-height:80px;width:auto;image-rendering:pixelated}
.wave{display:flex;align-items:center;gap:5px;height:56px}
.wave i{width:6px;border-radius:9px;background:var(--accent);height:30%;animation:wv 1.1s ease-in-out infinite alternate}
.wave i:nth-child(2n){animation-delay:-.4s}.wave i:nth-child(3n){animation-delay:-.75s;background:var(--ink)}
@keyframes wv{to{height:100%}}
.wave .key{margin-left:14px;display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 3px 0 var(--line);font:700 1rem var(--mono);color:var(--ink)}
.chest{display:flex;align-items:center;gap:14px}
.chest img{width:64px;height:auto;image-rendering:pixelated}
.chest b{display:block;font:700 1.15rem var(--sans);letter-spacing:-.02em;color:var(--ink)}
.chest small{font:400 .86rem var(--text);color:var(--muted)}
.screen{border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px var(--line);aspect-ratio:1367/360;background:url("../scene/henesys.webp") 50% 100%/cover}
.bt-wide .split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:24px;align-items:center;height:100%}

/* news */
.news-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px;align-items:start}
.feat{display:block;border-radius:var(--r-lg);overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line),var(--sh-1);transition:box-shadow .2s}
.feat:hover{box-shadow:0 0 0 1px var(--line),var(--sh-2)}
.feat .pic{aspect-ratio:16/8;background:url("../scene/henesys.webp") 50% 100%/cover,#3367cc}
.feat .pic.ev{background:url("../scene/maps/909000200.webp") center/cover}
.feat .pic.gu{background:url("../scene/maps/909000300.webp") center/cover}
.feat .pic.wu{background:url("../scene/maps/909000000.webp") center/cover}
.feat .body{padding:22px 24px 24px}
.feat .meta{display:flex;align-items:center;gap:10px;font:400 .86rem var(--text);color:var(--faint)}
.feat h3{margin:12px 0 8px;font:700 1.45rem/1.25 var(--sans);letter-spacing:-.025em;color:var(--ink)}
.feat p{font:400 1rem/1.6 var(--text);color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.side-news{display:flex;flex-direction:column;gap:22px}
.side-news .box{padding:8px 22px}
.side-news .box.pn{padding:22px}
.nli{display:block;padding:16px 0;border-bottom:1px solid var(--line-2)}
.nli:last-child{border-bottom:0}
.nli .meta{display:flex;align-items:center;gap:10px;font:400 .82rem var(--text);color:var(--faint)}
.nli b{display:block;margin-top:7px;font:600 1rem/1.4 var(--sans);color:var(--ink);letter-spacing:-.01em}
.nli:hover b{color:var(--link)}
.pn-mini{display:block}
.pn-mini .top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:400 .84rem var(--text);color:var(--faint)}
.pn-mini h3{margin:8px 0 8px;font:650 1.08rem/1.35 var(--sans);color:var(--ink)}
.pn-mini ul{padding-left:18px;color:var(--ink-2);font:400 .94rem/1.55 var(--text)}
.pn-mini .go{display:inline-block;margin-top:10px;font:500 .9rem var(--sans);color:var(--ink-2)}
.pn-mini:hover .go{color:var(--ink)}
.pn-ver{font-family:var(--mono);background:var(--bg-3);border:0;color:var(--ink-2)}
.pn-tag{font-family:var(--sans);text-transform:none}

/* community: top players + live chat */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:stretch}
.tops{list-style:none;margin:-6px 0 0}
.tops li a{display:grid;grid-template-columns:24px 52px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line-2)}
.tops li:last-child a{border-bottom:0}
.tops .n{font:700 1rem var(--sans);color:var(--faint);text-align:center}
.tops li:nth-child(1) .n{color:var(--accent)}
.tops .av{width:52px;height:52px;border-radius:13px;background:linear-gradient(#f2f6ff,#fff);box-shadow:inset 0 0 0 1px var(--line-2);display:grid;place-items:end center;overflow:hidden}
.tops .av img{max-height:62px;width:auto;max-width:none;margin-bottom:-6px;image-rendering:pixelated}
.tops b{display:block;font:650 1rem/1.2 var(--sans);color:var(--ink)}
.tops small{font:400 .86rem var(--text);color:var(--muted)}
.tops .lvl{font:700 1rem var(--sans);color:var(--ink);text-align:right}
.tops .lvl small{display:block;font-weight:400;font-size:.76rem}
.tops a:hover b{color:var(--link)}
.live{background:var(--night);color:#e6e9f0;box-shadow:0 0 0 1px rgba(255,255,255,.04),var(--sh-2)}
.live .btitle h2{color:#fff}
.live .lv-on{display:inline-flex;align-items:center;gap:7px;font:600 .74rem var(--sans);color:#86efac;letter-spacing:.06em}
.live .ms-chat-lines{height:auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:0;margin:0}
.live .cl{white-space:normal;font:400 .92rem/1.5 var(--text);padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07);border-radius:0;background:none;color:#d7dbe4;text-shadow:none;overflow:visible;animation:none}
.live .cl:last-child{border-bottom:0}
.live .cl.notice{color:#93c5fd}
.live .cl.sm{background:none;color:#fbcfe8}
.live .cl.mega{background:none;color:#bfdbfe}
.live .cl.quiet{color:#8b93a5}
.live .chb{background:rgba(255,255,255,.12);border:0;font-family:var(--sans)}
.live .chs{margin:20px 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.live .chn{display:flex;flex-direction:column;gap:6px;font:500 .8rem var(--sans);color:#9aa3b5}
.live .chn b{font:700 1.1rem var(--sans);color:#fff}
.live .chn .bar{height:4px;border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden}
.live .chn .bar i{display:block;height:100%;min-width:3px;border-radius:9px;background:#86efac}

/* closing band */
.band{position:relative;overflow:hidden;isolation:isolate;padding:64px 56px;border-radius:var(--r-xl);background:var(--night);color:#fff}
.band::before{content:"";position:absolute;right:-6%;bottom:-8%;width:64%;aspect-ratio:1800/500;z-index:-1;
  background:url("../scene/henesys-fore-m.webp") 52% 100%/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
.band::after{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(640px 320px at 82% 30%,rgba(51,103,204,.6),transparent 70%)}
.band h2{font:800 clamp(1.9rem,3.6vw,2.8rem)/1.05 var(--sans);letter-spacing:-.04em;max-width:520px}
.band p{margin-top:14px;max-width:440px;font:400 1.08rem/1.6 var(--text);color:#b8c0cf}
.band ol{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 30px;list-style:none;counter-reset:s;max-width:560px}
.band ol li{counter-increment:s;display:inline-flex;align-items:center;gap:9px;padding:8px 13px 8px 9px;border-radius:999px;background:rgba(255,255,255,.08);font:500 .9rem var(--sans);color:#e6e9f0}
.band ol li::before{content:counter(s);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--night);font:700 .78rem var(--sans)}
.band .ctas{display:flex;gap:12px;flex-wrap:wrap}
.band .btn-secondary{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.band .btn-secondary:hover{background:rgba(255,255,255,.16);color:#fff}

/* =====================================================================
   LOGIN (login.html)
   ===================================================================== */
.signin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);padding:0;overflow:hidden}
.signin .formside{padding:40px}
.signin h2{font:800 1.8rem/1.1 var(--sans);letter-spacing:-.035em;color:var(--ink)}
.signin .sub{margin:8px 0 26px;color:var(--muted)}
.signin .row-links{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.signin .row-links a{font:500 .9rem var(--sans);color:var(--link)}
.signin .art{position:relative;min-height:400px;background:#3367cc;overflow:hidden}
.signin .art .fscene{height:100%;bottom:0;transform:translateX(-56%)}

/* =====================================================================
   BUY NX (shop.html)
   ===================================================================== */
.nxwho{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line-2);margin-bottom:20px}
.nxwho .av{width:44px;height:44px;flex:none;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;overflow:hidden}
.nxwho .av img{max-height:30px !important;margin:0 !important;width:auto}
.nxwho>div{min-width:0;flex:1}
.nxwho>div>b{display:block;font:650 1rem/1.3 var(--sans);color:var(--ink)}
.nxwho small{display:block;font:400 .88rem/1.4 var(--text);color:var(--muted)}
.nxwho small b{color:var(--ink-2);font-weight:600}
.nxwho .gloss{margin-left:auto}
.nxwho.qr{background:var(--ok-soft);box-shadow:inset 0 0 0 1px #c9ebd6}
.nxwho.launcher>div>b::after{content:"via launcher"}
.nxwho.qr>div>b::after{content:"via game QR";margin-left:8px;padding:2px 8px;border-radius:999px;background:#fff;color:var(--ok);font:600 .7rem/1.4 var(--sans);vertical-align:2px;box-shadow:inset 0 0 0 1px #c9ebd6}
.nxpk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding-top:12px}
.nxp{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px 14px 18px;border-radius:var(--r);background:#fff;text-align:center;cursor:pointer;
  box-shadow:0 0 0 1px var(--line),var(--sh-1);transition:box-shadow .15s}
.nxp:hover{box-shadow:0 0 0 1px #cfd4dd,var(--sh-2)}
.nxp input{position:absolute;opacity:0;pointer-events:none}
.nxp:has(input:checked){box-shadow:0 0 0 2px var(--accent),0 10px 24px -12px rgba(233,90,12,.45)}
.nxp:has(input:focus-visible){outline:2px solid var(--link);outline-offset:3px}
.nxp .stack{position:relative;width:64px;height:52px;display:grid;place-items:center;margin-bottom:6px}
.nxp .stack img{position:absolute;width:36px;height:36px;image-rendering:pixelated}
.nxp .amt{font:750 1.45rem/1.1 var(--sans);letter-spacing:-.03em;color:var(--ink)}
.nxp .amt small{font:500 .8rem var(--sans);color:var(--muted);margin-left:3px;letter-spacing:0}
.nxp .per{font:400 .8rem var(--text);color:var(--faint)}
.nxp .price{margin-top:10px;padding:6px 14px;border-radius:999px;background:var(--bg-3);font:650 1.02rem/1.2 var(--sans);color:var(--ink)}
.nxp:has(input:checked) .price{background:var(--accent);color:#fff}
.nxp .nxtag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);padding:4px 10px;border-radius:999px;background:var(--ink);color:#fff;font:600 .72rem/1.2 var(--sans);white-space:nowrap}
.nxp .ingame{position:absolute;top:10px;right:10px;padding:2px 8px;border-radius:999px;background:var(--ok-soft);color:var(--ok);font:600 .68rem/1.4 var(--sans)}
.nx-agree{display:flex;gap:10px;align-items:flex-start;width:100%;margin:16px 0 0;padding:12px 14px;border:0;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font:400 .9rem/1.5 var(--text);color:var(--ink-2)}
.nx-agree b{color:var(--ink);font-weight:600}
.nx-agree a{color:var(--link)}
.nx-agree input{accent-color:var(--accent);width:17px;height:17px;margin-top:2px}
.nx-agree.need{box-shadow:inset 0 0 0 1.5px var(--bad),0 0 0 4px rgba(212,56,13,.1)}
.nxbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px;padding:18px 20px;border-radius:var(--r);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.nxbar .sum{flex:1;min-width:200px}
.nxbar .sum b{display:block;font:700 1.2rem/1.25 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.nxbar .sum small{display:block;font:400 .88rem/1.45 var(--text);color:var(--muted)}
.nxbar .gloss{padding:14px 26px;font-size:1rem;border-radius:12px}
.nxbar .stripe{display:flex;align-items:center;gap:6px;font:400 .82rem var(--text);color:var(--faint);width:100%;justify-content:flex-end;margin-top:-4px}
.nxbar .stripe svg{width:14px;height:14px}
.nxpay{margin-top:18px;padding:20px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line),var(--sh-2)}
.nxpay-h{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.nxpay-h .lock{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:11px;background:var(--ok-soft);color:var(--ok)}
.nxpay-h>div{flex:1;min-width:0}
.nxpay-h b{display:block;font:700 1.08rem/1.25 var(--sans);letter-spacing:-.015em;color:var(--ink)}
.nxpay-h small{display:block;font:400 .84rem/1.4 var(--text);color:var(--muted)}
.nxpay-x{flex:none;border:0;background:none;padding:6px 4px;font:600 .86rem var(--sans);color:var(--link);cursor:pointer}
.nxpay-x:hover{text-decoration:underline}
.nxpay-order{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;margin-bottom:16px;border-radius:12px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.nxpay-order span{display:flex;align-items:center;gap:8px;min-width:0;font:400 .9rem var(--text);color:var(--muted)}
.nxpay-order span img{width:24px;height:24px;flex:none}
.nxpay-order span b{font:650 1rem var(--sans);color:var(--ink);white-space:nowrap}
.nxpay-order>b{font:750 1.15rem var(--sans);color:var(--ink)}
.nxpay-f+.nxpay-f{margin-top:14px}
.nxpay-f:empty{display:none}
.nxpay-mail{font:400 .88rem/1.45 var(--text);color:var(--muted)}
.nxpay-mail b{color:var(--ink-2);font-weight:600}
.nxpay-load{display:flex;align-items:center;gap:10px;padding:14px 0;font:400 .92rem var(--text);color:var(--muted)}
.nxpay-err{margin-top:14px;padding:10px 12px;border-radius:10px;background:var(--bad-soft);color:#7a2408;font:500 .9rem/1.45 var(--text)}
@media (max-width:640px){.nxpay{padding:16px}.nxpay-h{flex-wrap:wrap;align-items:flex-start}.nxpay-h>div{flex:1 1 calc(100% - 50px)}.nxpay-x{padding:0 0 0 50px}.nxpay-order small{display:none}}
.nxstate{display:flex;gap:16px;align-items:center;padding:18px 20px;border-radius:var(--r);margin-bottom:22px;background:var(--ok-soft);box-shadow:inset 0 0 0 1px #c9ebd6;color:#0f5132}
.nxstate.wait{background:var(--link-soft);box-shadow:inset 0 0 0 1px #c9dbfb;color:#173a73}
.nxstate.bad{background:var(--bad-soft);box-shadow:inset 0 0 0 1px #f5d0c4;color:#7a2408}
.nxstate .big{width:48px;height:48px;flex:none;display:grid;place-items:center;border-radius:13px;background:#fff}
.nxstate .big img{max-width:32px;max-height:32px}
.nxstate>div>b{display:block;font:700 1.1rem/1.3 var(--sans);letter-spacing:-.015em}
.nxstate p{font:400 .94rem/1.5 var(--text);margin-top:2px}
.nxstate p a{color:inherit;text-decoration:underline}
.nxstate .gloss{margin-left:auto}
/* one spinner everywhere (2026-10-13, same as launcher 3.5.39): a full ring - faint track + a brand-orange arc that fades in, never "a line rotating" */
.spin{--spin-arc:#f47a22;--spin-track:rgba(19,40,77,.14);--spin-w:3px;display:inline-block;flex:none;width:22px;height:22px;vertical-align:-5px;border:0!important;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 30%,color-mix(in srgb,var(--spin-arc) 35%,transparent) 55%,var(--spin-arc) 100%),var(--spin-track);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--spin-w) - .5px),#000 calc(100% - var(--spin-w)));mask:radial-gradient(farthest-side,transparent calc(100% - var(--spin-w) - .5px),#000 calc(100% - var(--spin-w)));animation:rot .8s linear infinite}
:is(button,.btn) .spin{--spin-arc:currentColor;--spin-track:color-mix(in srgb,currentColor 28%,transparent)}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:1.6s}}
@keyframes rot{to{transform:rotate(360deg)}}
.qrhow{display:grid;grid-template-columns:120px minmax(0,1fr);gap:26px;align-items:center}
.qrhow .phone{position:relative;width:120px;height:170px;border-radius:24px;background:var(--night);padding:9px;box-shadow:var(--sh-2)}
.qrhow .phone .scr{width:100%;height:100%;border-radius:16px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.qrhow ol{padding-left:20px;display:grid;gap:9px;font:400 1rem/1.55 var(--text);color:var(--ink-2)}
.qrhow ol b{color:var(--ink);font-weight:600}


/* =====================================================================
   v3: a game site. The same clean system, with real screenshots,
   the MapleStory typeface for display text, sky and maple colours.
   ===================================================================== */
:root{--ms:"Maplestory",var(--sans);--sky:#1f86ee;--sky-2:#e6f3ff}
.nv-brand{margin-right:14px}
.nv-brand{gap:8px;font:700 1.3rem/1 var(--ms);letter-spacing:0;color:var(--ink)}
.nv-brand .lf{width:30px;height:auto}
.nv-brand:hover .lf{transform:rotate(-14deg)}
.nv-brand .wm>span{color:var(--accent)}
.nv-l{font:700 .92rem/1 var(--ms);letter-spacing:0;color:#2b3550}
.nv-l.on{color:var(--accent-2);font-weight:700}
.nv-dd a{font:700 .9rem/1.25 var(--ms);letter-spacing:0}
.gloss,.btn{font-family:var(--ms);font-weight:700;letter-spacing:0;border-radius:999px}
.btn-sm,.pill,.btn-lg,.btn-text,.g-dark,.btn-secondary,.btn-ghost,.btn-cloud{border-radius:999px}
.btn-play{padding:16px 30px;font-size:1.15rem;color:#fff;background:linear-gradient(#ffa040,#ff7314);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 0 #c75000,0 12px 26px -8px rgba(255,110,20,.7)}
.btn-play:hover{background:linear-gradient(#ffad55,#ff7d22)}
.btn-play:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 #c75000,0 8px 18px -8px rgba(255,110,20,.7)}
.btn-glass{padding:16px 26px;font-size:1.05rem;color:#fff;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-glass:hover{background:rgba(255,255,255,.24);color:#fff}
/* display type in the MapleStory face */
.page-hero h1,.sh h2,.btitle h2,.btitle h3,.rk-head h2,.panel-head h2,.feat h3,.np-title,.signin h2,.nxbar .sum b,.nxp .amt,.faq summary,.news-list .ttl,.steps-l li>div>b,.tops b,.fres h3,.dl-main h2,body .fgroup h3,body .frow .bn b{font-family:var(--ms);letter-spacing:0;font-weight:700}
.sh h2{font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.12}
.sh h2 span{color:var(--sky)}
.sh.center{flex-direction:column;align-items:center;text-align:center}
.sh.center h2{max-width:none}
.sh.center p{margin-inline:auto}

/* ---------- inner pages: a screenshot banner ---------- */
.page-hero{--shot:url("../shots/plaza-w.webp");background:linear-gradient(90deg,rgba(8,22,56,.86),rgba(8,22,56,.45) 55%,rgba(8,22,56,.2)),var(--shot) 50% 40%/cover,#13306e;border-bottom:0}
.page-hero .wrap{padding:64px 0 56px}
.page-hero h1{color:#fff;font-size:clamp(2.1rem,4.4vw,3.2rem);line-height:1.1;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.page-hero h1 em{color:#ffb547}
.page-hero p{color:rgba(255,255,255,.88);text-shadow:0 1px 8px rgba(0,0,0,.4)}
.crumbs,.crumbs a{color:rgba(255,255,255,.75)}
.crumbs a:hover{color:#fff}
.page-hero .deco img{filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}

/* ---------- home hero: the game, full width ---------- */
.ghero{padding:14px 14px 0}
.gh-media{position:relative;height:clamp(560px,72vh,760px);border-radius:28px;overflow:hidden;isolation:isolate;background:#13306e}
.gh-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 1.2s ease,transform 8s ease-out}
.gh-slides img.on{opacity:1;transform:scale(1)}
.gh-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(6,18,46,.82) 0%,rgba(6,18,46,.55) 38%,rgba(6,18,46,.08) 70%),linear-gradient(0deg,rgba(6,18,46,.55),transparent 35%)}
.ghero .leaves{z-index:2}
.ghero .leaf:nth-child(n+6){display:none}
.gh-content{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:center;width:min(1180px,100% - 48px);margin:0 auto;padding-bottom:64px;color:#fff}
.gh-logo{margin:0 0 4px -10px;line-height:0}
.gh-logo img{width:clamp(220px,24vw,330px);height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.gh-tag{font:700 clamp(1.6rem,3.2vw,2.5rem)/1.15 var(--ms);max-width:620px;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.gh-tag span{color:#ffb547}
.gh-lead{margin-top:14px;max-width:540px;font:400 clamp(1rem,1.3vw,1.15rem)/1.6 var(--text);color:rgba(255,255,255,.9);text-shadow:0 1px 8px rgba(0,0,0,.45)}
.gh-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.gh-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.gh-pills>span{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:999px;background:rgba(6,18,46,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);font:500 .86rem/1 var(--sans);color:#fff}
.gh-pills b{font-weight:700}
.gh-pills .wkp{background:rgba(255,170,40,.92);color:#3d2200;box-shadow:none;font-weight:600}
.gh-places{position:absolute;z-index:3;right:20px;bottom:20px;display:flex;gap:10px}
.gh-places button{position:relative;width:138px;padding:0;border-radius:14px;overflow:hidden;background:rgba(6,18,46,.6);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18);text-align:left;color:#fff;transition:transform .2s,box-shadow .2s}
.gh-places button:hover{transform:translateY(-2px)}
.gh-places button[aria-selected="true"]{box-shadow:inset 0 0 0 2px #fff}
.gh-places img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;opacity:.75;transition:opacity .2s}
.gh-places button[aria-selected="true"] img,.gh-places button:hover img{opacity:1}
.gh-places span{display:block;padding:7px 10px 9px;font:700 .8rem/1 var(--ms)}
.gh-places i{position:absolute;left:0;bottom:0;height:3px;width:0;background:#ffb547}
.gh-places button[aria-selected="true"] i{animation:prog var(--slide,6s) linear forwards}
@keyframes prog{to{width:100%}}
.gh-cam{position:absolute;z-index:3;left:24px;bottom:22px;display:inline-flex;align-items:center;gap:7px;font:600 .74rem var(--sans);color:rgba(255,255,255,.7);letter-spacing:.06em;text-transform:uppercase}
.gh-cam::before{content:"";width:8px;height:8px;border-radius:50%;background:#ff5a5a;box-shadow:0 0 0 3px rgba(255,90,90,.25)}

/* ---------- sky band with clouds ---------- */
.sky{position:relative;margin-top:80px;padding:84px 0 96px;background:linear-gradient(180deg,#eaf5ff,#f6fbff 60%,#fff);overflow:hidden;isolation:isolate}
.sky::before,.sky::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:520px;height:160px;border-radius:999px;background:#fff;opacity:.85;filter:blur(2px);
  box-shadow:120px -40px 0 10px #fff,260px 10px 0 -10px #fff,-120px 20px 0 -20px #fff}
.sky::before{left:-120px;top:40px}
.sky::after{right:-180px;top:240px;transform:scale(.8)}

/* highlights */
.hl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:8px}
.hlc{display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(13,40,90,.06),0 18px 40px -22px rgba(13,40,90,.35);transition:transform .25s,box-shadow .25s}
.hlc:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(13,40,90,.06),0 26px 50px -22px rgba(13,40,90,.45)}
.hl-art{position:relative;aspect-ratio:16/10;overflow:hidden;background:#13306e}
.hl-art img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.hlc:hover .hl-art img{transform:scale(1.05)}
.hl-txt{padding:20px 22px 24px}
.hl-txt h3{font:700 1.15rem/1.25 var(--ms);color:var(--ink)}
.hl-txt p{margin-top:8px;font:400 .95rem/1.55 var(--text);color:var(--muted)}
.hlc.voice .hl-art{display:grid;place-items:center;background:radial-gradient(circle at 50% 55%,#7c5cff,#3b2bb8 60%,#24186e)}
.hlc.voice .hl-art img{width:64px;height:auto;object-fit:contain;image-rendering:pixelated;position:relative;z-index:2;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));transform:none}
.hlc.voice:hover .hl-art img{transform:scale(1.08)}
.vrings{position:absolute;inset:0;display:grid;place-items:center}
.vrings i{position:absolute;width:90px;height:90px;border-radius:50%;border:2px solid rgba(255,255,255,.55);animation:ring 2.4s ease-out infinite}
.vrings i:nth-child(2){animation-delay:.8s}.vrings i:nth-child(3){animation-delay:1.6s}
@keyframes ring{from{transform:scale(.6);opacity:.9}to{transform:scale(2.3);opacity:0}}
.hl-key{position:absolute;z-index:2;right:16px;bottom:14px;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#fff;color:#24186e;font:700 1.05rem var(--ms);box-shadow:0 3px 0 rgba(0,0,0,.25)}

/* the full list */
.flist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:28px}
.fgrp{padding:22px 20px 10px;border-radius:24px;background:rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(13,40,90,.06)}
.fgrp h3{font:700 1rem var(--ms);color:var(--sky);margin-bottom:6px}
.fi{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--line-2)}
.fgrp h3+.fi{border-top:0}
.fi .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--sky-2)}
.fi .ic img{max-width:30px;max-height:30px;width:auto}
.fi .ic.svg{color:var(--sky)}
.fi .ic svg{width:22px;height:22px}
.fi b{display:block;font:700 .95rem/1.25 var(--ms);color:var(--ink)}
.fi p{margin-top:3px;font:400 .87rem/1.45 var(--text);color:var(--muted)}

/* news cards */
.ncards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.ncard{display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line),0 12px 30px -20px rgba(13,40,90,.35);transition:transform .25s,box-shadow .25s}
.ncard:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--line),0 22px 44px -22px rgba(13,40,90,.45)}
.ncard .pic{aspect-ratio:16/9;background:#13306e center/cover no-repeat}
.ncard .body{padding:18px 20px 22px}
.ncard .meta{display:flex;align-items:center;gap:10px;font:400 .84rem var(--text);color:var(--faint)}
.ncard h3{margin-top:10px;font:700 1.12rem/1.3 var(--ms);color:var(--ink)}
.ncard p{margin-top:8px;font:400 .93rem/1.55 var(--text);color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* closing banner */
.cta-band{margin:110px 14px 0;border-radius:28px;overflow:hidden;position:relative;isolation:isolate;
  background:linear-gradient(90deg,rgba(6,18,46,.85),rgba(6,18,46,.35) 70%),url("../shots/zakum-w.webp?v=3") 70% 50%/cover,#3a0d06;color:#fff}
.cb-in{width:min(1180px,100% - 48px);margin:0 auto;padding:72px 0 76px}
.cb-logo{width:180px;height:auto;margin:0 0 8px -6px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.3))}
.cta-band h2{font:700 clamp(1.9rem,3.6vw,2.7rem)/1.12 var(--ms);max-width:560px;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.cta-band p{margin-top:12px;max-width:460px;font:400 1.08rem/1.6 var(--text);color:rgba(255,255,255,.88)}

/* ---------- footer: night sky, with the monsters out on patrol ---------- */
footer{margin-top:120px;background:linear-gradient(#0d1d44,#081230);border-top:0;color:#c3cbe0;padding-top:64px}
.ft-mobs{position:absolute;left:0;right:0;top:-46px;height:46px;pointer-events:none;overflow:hidden}
.ft-mobs .walker{position:absolute;bottom:0;animation:patrol var(--dur,22s) linear infinite;animation-delay:var(--delay,0s)}
.ft-mobs img{display:block;image-rendering:pixelated;max-height:44px;width:auto}
.ft-brand img.mfl{width:170px;height:auto;filter:drop-shadow(0 0 14px rgba(255,255,255,.12))}
.ft-brand p{color:#9aa6c4}
.ft-brand .srv-pill{background:rgba(255,255,255,.08);color:#dfe5f3;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.ft-brand .srv-pill b{color:#fff}
.ft-col h4{color:#fff;font:700 .92rem var(--ms)}
.ft-col a{color:#9aa6c4}
.ft-col a:hover{color:#fff}
.ft-fine{border-top-color:rgba(255,255,255,.1);color:#7d89a8}
footer .fine{color:#7d89a8}

/* ---------- Slime Radio lives bottom-left ---------- */
.radio{right:auto;left:16px;align-items:flex-start}
.radio .rtip{right:auto;left:62px}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:1100px){
  .nv-links{display:none}
  .menu-btn{display:block}
  .pnav.open .nv-links{display:flex;flex-direction:column;align-items:stretch;gap:2px;position:absolute;left:0;right:0;top:100%;padding:12px 24px 20px;background:#fff;
    box-shadow:0 1px 0 var(--line),0 24px 40px -20px rgba(13,19,33,.3);max-height:calc(100vh - var(--navh));overflow:auto}
  .pnav.open .nv-links>li{display:block}
  .pnav.open .nv-l{height:44px;font-size:1rem;padding:0 8px}
  .pnav.open .nv-more>.nv-l{height:28px;margin-top:10px;font:600 .74rem var(--sans);text-transform:uppercase;letter-spacing:.05em;color:var(--faint);pointer-events:none;background:none}
  .pnav.open .nv-more>.nv-l svg{display:none}
  .pnav.open .nv-dd{display:grid;position:static;box-shadow:none;padding:0;min-width:0;grid-template-columns:1fr 1fr;animation:none}
  .pnav.open .nv-dd::before{content:none}
  .hero-grid{grid-template-columns:1fr;gap:56px}
  .hero-art{max-width:640px;margin:0 auto;width:100%}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric:nth-child(3){box-shadow:0 -1px 0 var(--line-2)}
  .metric:nth-child(4){box-shadow:-1px 0 0 var(--line-2),0 -1px 0 var(--line-2)}
}
@media (max-width:900px){
  .bento{grid-template-columns:1fr 1fr}
  .bt-big{grid-column:span 2;grid-row:auto}
  .bt-wide{grid-column:span 2}
  .news-grid,.duo{grid-template-columns:1fr}
  .ft-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-brand{grid-column:1/-1}
  .nxpk{grid-template-columns:repeat(2,minmax(0,1fr))}
  .signin{grid-template-columns:1fr}
  .signin .art{min-height:240px;order:-1}
  .band{padding:44px 28px 220px}
  .band::before{width:120%;right:-10%}
  .section{padding-top:80px}
}
@media (max-width:640px){
  .wrap,.pnav>.nv,.portal.sub{width:calc(100% - 32px)}
  .nv-side .srv-pill{display:none}
  .pnav.open .nv-dd{grid-template-columns:1fr}
  .pnav.open .nv-links{padding:10px 16px 18px}
  .hero{padding:40px 0 96px}
  .eyebrow .sep,.eyebrow #eyeNews{display:none}
  .hero-facts{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:0}
  .hero-facts li+li{padding-left:14px}
  .hero-facts b{font-size:1.15rem}
  .hero-facts span{font-size:.78rem}
  .hero .ctas .btn{flex:1 1 auto}
  .chip-live{left:10px;top:10px}
  .chip-top{left:10px;bottom:10px}
  .chip-chat{display:none}
  .metric{padding:18px}
  .metric b{font-size:1.25rem}
  .bento{grid-template-columns:1fr}
  .bt-big,.bt-wide{grid-column:auto}
  .bt-wide .split{grid-template-columns:1fr}
  .box,.panel,.status{padding:22px 18px}
  .feat .body{padding:18px}
  .tops li a{grid-template-columns:20px 48px minmax(0,1fr) auto;gap:10px}
  .live .chs{grid-template-columns:repeat(2,1fr)}
  .band{padding:36px 22px 190px;border-radius:var(--r-lg)}
  .ft-in{grid-template-columns:1fr 1fr;gap:26px}
  .page-hero .wrap{padding:36px 0 30px}
  .page-hero .deco{display:none}
  .signin .formside{padding:26px 20px}
  .nxbar .gloss{width:100%}
  .qrhow{grid-template-columns:1fr}
  .qrhow .phone{margin:0 auto}
  .nxwho{flex-wrap:wrap}
  .nxwho .gloss{margin-left:0;width:100%}
  .section{padding-top:72px}
}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .actor.mob .walker,.wave i{animation:none}
  .fscene .back,.fscene .fore{transition:none;transform:none}
}

/* v3 responsive */
@media (max-width:1100px){
  .hl,.flist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gh-places button{width:110px}
  .ncards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .gh-media{height:auto;min-height:640px}
  .gh-content{padding:96px 0 150px;justify-content:flex-start}
  .gh-shade{background:linear-gradient(180deg,rgba(6,18,46,.75),rgba(6,18,46,.5) 55%,rgba(6,18,46,.85))}
  .gh-places{left:14px;right:14px;bottom:14px;gap:8px}
  .gh-places button{flex:1;width:auto}
  .gh-places span{font-size:.7rem;padding:6px 7px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .gh-cam{display:none}
  .gh-ctas .btn{flex:1 1 auto}
  .hl,.flist,.ncards{grid-template-columns:1fr}
  .sky{padding:64px 0 72px;margin-top:56px}
  .cb-in{padding:52px 0 56px}
  .nv-brand{font-size:1.15rem}
}
@media (max-width:640px){
  .ghero{padding:8px 8px 0}
  .gh-media{border-radius:22px}
  .cta-band{margin:80px 8px 0;border-radius:22px}
}
@media (prefers-reduced-motion:reduce){
  .gh-slides img{transition:opacity .01s;transform:none}
  .vrings i,.ft-mobs .walker{animation:none}
}
.pager{flex-wrap:wrap}.pager .pg-gap{display:grid;place-items:center;min-width:24px;color:var(--faint)}.pager .pg-nav{font-size:1.1rem}

/* =====================================================================
   v4: the nav is plain modern type; the pages stay game-like.
   Home = a live portal: "right now" countdowns, account, notices,
   ranking, community, schedule, Cash Shop, chat, screenshots.
   ===================================================================== */
.nv-brand{font:800 1.22rem/1 var(--sans);letter-spacing:-.035em}
.nv-l{font:500 .93rem/1 var(--sans);letter-spacing:-.01em;color:#3a4356}
.nv-l.on{color:var(--ink);font-weight:650;box-shadow:inset 0 -2px 0 var(--accent);border-radius:9px 9px 0 0}
.nv-dd a{font:600 .92rem/1.25 var(--sans);letter-spacing:-.01em}
.nv-side .btn{font-family:var(--sans);font-weight:600;letter-spacing:-.01em}
.nv-dd .ic img[src$=".png"]:not(.pixel){image-rendering:auto}

/* inner-page banners: MapleFresh's own screens */
.page-hero{--shot:url("../shots/plaza-w.webp")}
body[data-page="news"] .page-hero,body[data-page="patchnotes"] .page-hero,body[data-page="videos"] .page-hero{--shot:url("../shots/winter-w.webp")}
body[data-page="rush"] .page-hero,body[data-page="voice"] .page-hero{--shot:url("../shots/coral-w.webp")}
body[data-page="forums"] .page-hero,body[data-page="thread"] .page-hero,body[data-page="guild"] .page-hero,body[data-page="staff"] .page-hero,body[data-page="gm"] .page-hero{--shot:url("../shots/guildhq-w.webp")}
body[data-page="guide"] .page-hero,body[data-page="library"] .page-hero,body[data-page="bugs"] .page-hero,body[data-page="support"] .page-hero{--shot:url("../shots/zakum-w.webp?v=3")}
body[data-page="login"] .page-hero,body[data-page="register"] .page-hero,body[data-page="download"] .page-hero,body[data-page="reset"] .page-hero{--shot:url("../shots/chsel-w.webp")}
body[data-page="rankings"] .page-hero,body[data-page="character"] .page-hero,body[data-page="vote"] .page-hero{--shot:url("../shots/skyruins-w.webp")}
.cta-band{background:linear-gradient(90deg,rgba(6,18,46,.86),rgba(6,18,46,.3) 70%),url("../shots/zakum-w.webp?v=3") 70% 50%/cover,#3a0d06}

/* hero */
.gh-media{height:clamp(540px,66vh,680px)}
.gh-places{bottom:70px}
.gh-cam{bottom:72px}
.gh-content{padding-bottom:110px}
.gh-logo img{width:clamp(220px,24vw,340px);filter:drop-shadow(0 8px 22px rgba(0,0,0,.35))}
.btn-play .snail{width:30px;height:auto;margin:-6px 2px -6px -4px;filter:drop-shadow(0 2px 2px rgba(120,40,0,.35))}

/* ---------- right now ---------- */
.livebar{position:relative;z-index:4;display:grid;grid-template-columns:1.25fr repeat(5,minmax(0,1fr));margin-top:-46px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px rgba(13,40,90,.07),0 20px 44px -24px rgba(13,40,90,.45);overflow:hidden}
.lb-tile{position:relative;display:flex;flex-direction:column;gap:3px;min-width:0;padding:16px 18px 15px}
.lb-tile+.lb-tile{box-shadow:-1px 0 0 var(--line-2)}
.lb-k{display:flex;align-items:center;gap:7px;font:600 .78rem/1.2 var(--sans);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-k img{width:20px;height:20px;object-fit:contain}
.lb-tile b{font:700 1.15rem/1.2 var(--ms);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.lb-tile small{font:400 .78rem/1.3 var(--text);color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-tile .hot{color:var(--accent-2)}
.lb-wk.on{background:linear-gradient(180deg,#fff7ea,#fff)}
.lb-chs{display:flex;align-items:flex-end;gap:6px;margin-top:4px}
/* more than 8 channels: N equal columns across the tile (never wider than it), smaller numbers */
.lb-chs.many{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:3px;width:100%}
.lb-chs.many span{width:auto;min-width:0}
.lb-chs.many em{width:100%;max-width:22px;height:20px}
.lb-chs.many small{font-size:.56rem;letter-spacing:-.02em}
@media (max-width:640px){.lb-chs.many span:not(:first-child):not(:nth-child(5n)) small{visibility:hidden}}   /* phones: 20 numbers ran together; label 1, 5, 10, 15, 20 */
.lb-chs span{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;width:22px}
.lb-chs em{position:relative;display:block;width:22px;height:22px;border-radius:4px 4px 2px 2px;background:var(--line);overflow:hidden}
.lb-chs i{position:absolute;left:0;right:0;bottom:0;display:block;background:linear-gradient(#ff8f6b,#ff6b1a)}
.lb-chs small{font:600 .62rem/1 var(--sans);color:var(--faint);overflow:visible}
.lb-tile b .lb-ranks{margin-left:7px;font:600 .78rem/1 var(--sans);color:var(--muted)}
@media (max-width:640px){.lb-server>b{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.28em}.lb-server>b>small{margin-left:0}}   /* phones: "(1 GM) · 5 played today" drops to a 2nd line instead of ending in "..." */
/* under the channel bars: "99.9% uptime since Oct 12" + the last 30 days (Uptime.java); the bars wrap below on narrow tiles */
.lb-up{--up-ok:var(--ok);--up-warn:#e8a317;--up-none:var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.lb-up[hidden]{display:none}
.lb-up-k{flex:0 1 auto;min-width:0;font:500 .72rem/1.2 var(--sans);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-tile .lb-up-k b{font:700 .72rem/1.2 var(--sans);color:var(--up-ok);letter-spacing:0}
.lb-up-days{flex:1 1 96px;display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:2px;height:11px;min-width:96px;max-width:240px}
.lb-up-days[hidden]{display:none}
.lb-up-days i{display:block;min-width:0;border-radius:2px;background:var(--up-none)}
.lb-up-days i.ok{background:var(--up-ok);opacity:.85}
.lb-up-days i.warn{background:var(--up-warn)}
.lb-up-days i:hover{opacity:1;transform:scaleY(1.25)}
html[data-theme="dark"] .lb-up{--up-warn:#f0b03c}
html[data-theme="dark"] .lb-tile .lb-up-k b{color:var(--up-ok)}
.lb-clock b{font-family:var(--sans);font-weight:700;letter-spacing:-.01em}

/* ---------- portal ---------- */
.portal3{display:grid;grid-template-columns:270px minmax(0,1fr) 310px;gap:20px;align-items:start;margin-top:28px}
.p-left,.p-mid,.p-right{display:flex;flex-direction:column;gap:20px;min-width:0}
.pcard{background:#fff;border-radius:20px;padding:18px 18px 16px;box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(13,19,33,.04)}
.pcard h3{font:700 1.08rem/1.2 var(--ms);color:var(--ink)}
.ph{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ph h3{margin-right:auto}
.ph .more{font-size:.84rem}
.duo2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.duo2>.pcard{min-width:0}

/* members */
.memb h3{margin-bottom:12px}
.mini-login{display:grid;gap:8px}
.mini-login .input{padding:10px 12px;font-size:.95rem}
.mini-login .btn{width:100%;padding:11px 14px}
.ml-links{display:flex;justify-content:space-between;gap:8px;margin-top:4px;font:500 .8rem var(--sans)}
.ml-links a{color:var(--muted)}
.ml-links a:hover{color:var(--ink)}
.memb.in{display:grid;gap:10px}
.memb.in h3{margin:0}
.memb .me{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;background:linear-gradient(#eef6ff,#f8fbff)}
.memb .me .av{width:60px;height:66px;flex:none;display:grid;place-items:end center;overflow:hidden}
.memb .me .av img{max-height:76px;width:auto;max-width:none;margin-bottom:-6px}
.memb .me b{display:block;font:700 1rem/1.2 var(--ms);color:var(--ink)}
.memb .me small{font:400 .82rem var(--text);color:var(--muted)}
.memb.in .btn{width:100%}

.bigdl,.bignx{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;color:#fff;transition:transform .15s,filter .15s}
.bigdl:hover,.bignx:hover{transform:translateY(-2px);filter:brightness(1.05)}
.bigdl{background:linear-gradient(135deg,#ffa040,#ff6b1a);box-shadow:0 4px 0 #c75000,0 14px 26px -14px rgba(255,110,20,.8)}
.bignx{background:linear-gradient(135deg,#3d8cf0,#2059c9);box-shadow:0 4px 0 #173f91,0 14px 26px -14px rgba(32,89,201,.8)}
.bigdl img{width:46px;height:auto;filter:drop-shadow(0 3px 3px rgba(0,0,0,.25))}
.bignx img{width:40px;height:40px;object-fit:contain;padding:4px;border-radius:12px;background:rgba(255,255,255,.9)}
.bigdl span,.bignx span{flex:1;min-width:0}
.bigdl b,.bignx b{display:block;font:700 1.12rem/1.15 var(--ms)}
.bigdl small,.bignx small{display:block;font:500 .78rem/1.3 var(--sans);opacity:.9}
.bigdl svg{width:24px;height:24px;flex:none}

.newtiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.newtiles a{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:11px 12px;border-radius:14px;background:var(--bg-2);font:600 .84rem/1.2 var(--sans);color:var(--ink);transition:background .15s}
.newtiles a:hover{background:#eaf3ff}
.newtiles img{width:28px;height:28px;object-fit:contain}

/* notices / events */
.nlist{list-style:none}
.nlist li{display:flex;align-items:center;gap:8px;padding:9px 0;border-top:1px solid var(--line-2);min-width:0}
.nlist li:first-child{border-top:0}
.nlist li a{display:flex;align-items:center;gap:8px;min-width:0;flex:1;font:500 .9rem/1.3 var(--text);color:var(--ink)}
.nlist li a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nlist li a:hover span{color:var(--link)}
.nlist li em{flex:none;font:400 .78rem var(--text);color:var(--faint);font-style:normal}
.nlist .tag{flex:none;min-width:62px;text-align:center}
.none{color:var(--muted);font:400 .88rem var(--text);padding:8px 0}
.none a{color:var(--link)}

/* ranking */
.rankcard .ph{flex-wrap:wrap}
.rtabs{display:flex;gap:2px;padding:3px;border-radius:11px;background:var(--bg-3)}
.rtabs button{padding:5px 10px;border-radius:8px;font:500 .8rem/1 var(--sans);color:var(--ink-2)}
.rtabs button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}
.rk2{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;align-items:stretch}
.rk-top{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;padding:14px 10px 14px;border-radius:16px;text-align:center;
  background:url("../scene/grass.webp") center bottom/auto 46px repeat-x,linear-gradient(#bfe3ff,#eef8ff 75%);overflow:hidden}
.rk-top .crown{position:absolute;left:10px;top:10px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fff3a8,#ffc21a 55%,#d99400);color:#6a4300;font:700 .9rem var(--sans);box-shadow:0 0 0 3px #fff}
.rk-top .sp{height:120px;display:flex;align-items:flex-end}
.rk-top .sp img{max-height:120px;width:auto;filter:drop-shadow(0 3px 2px rgba(0,0,0,.2))}
.rk-top b{margin-top:6px;padding:3px 8px 4px;border-radius:5px;background:rgba(0,0,0,.66);color:#ffe38a;font:700 .86rem/1.1 Arial,Tahoma,sans-serif}
.rk-top small{font:600 .78rem/1.2 var(--sans);color:#24405f}
.rk-rest{list-style:none;display:flex;flex-direction:column}
.rk-rest li a{display:grid;grid-template-columns:22px 44px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 4px;border-top:1px solid var(--line-2)}
.rk-rest li:first-child a{border-top:0}
.rk-rest .n{font:700 .92rem var(--sans);color:var(--faint);text-align:center}
.rk-rest .av{width:44px;height:44px;border-radius:12px;background:var(--bg-2);display:grid;place-items:end center;overflow:hidden}
.rk-rest .av img{max-height:54px;width:auto;max-width:none;margin-bottom:-6px}
.rk-rest .nm b{display:block;font:700 .92rem/1.2 var(--ms);color:var(--ink)}
.rk-rest .nm small{font:400 .78rem var(--text);color:var(--muted)}
.rk-rest .lv{font:700 .95rem var(--sans);color:var(--ink)}
.rk-rest a:hover b{color:var(--link)}

/* community */
.boards{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin-bottom:10px}
.boards a{display:flex;flex-direction:column;align-items:center;gap:6px;font:500 .72rem/1.15 var(--sans);color:var(--ink-2);text-align:center}
.boards span{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line-2);transition:transform .15s,background .15s}
.boards a:hover span{transform:translateY(-2px);background:#eaf3ff}
.boards img{max-width:32px;max-height:32px}
.threads{list-style:none}
.threads li a{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line-2)}
.threads .av{width:40px;height:40px;border-radius:11px;background:var(--bg-2);display:grid;place-items:end center;overflow:hidden}
.threads .av img{max-height:50px;width:auto;max-width:none;margin-bottom:-6px}
.threads b{display:block;font:600 .92rem/1.25 var(--sans);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.threads small{font:400 .78rem var(--text);color:var(--muted)}
.threads em{font:500 .78rem var(--sans);color:var(--faint);font-style:normal}
.threads a:hover b{color:var(--link)}

/* schedule */
.sched{list-style:none}
.sched li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line-2)}
.sched li:first-child{border-top:0}
.sched img{width:28px;height:28px;object-fit:contain}
.sched b{display:block;font:600 .9rem/1.2 var(--sans);color:var(--ink)}
.sched small{font:400 .76rem var(--text);color:var(--muted)}
.sched em{font:700 .82rem/1 var(--sans);color:var(--ink-2);font-style:normal;font-variant-numeric:tabular-nums;white-space:nowrap}
.sched li.hot em{color:#fff;background:var(--accent);padding:5px 8px;border-radius:999px}
.sched li.any em{color:var(--faint);font-weight:500}

/* cash shop */
.cs-style{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:6px;height:150px;margin-bottom:10px;border-radius:16px;overflow:hidden;
  background:repeating-linear-gradient(90deg,#ff8a6b 0 18px,#fff 18px 36px) top/100% 18px no-repeat,linear-gradient(#ffe9f3,#fff7fb)}
.cs-style .sp img{max-height:118px;width:auto;margin-bottom:6px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.18))}
.cs-new{position:absolute;left:10px;top:26px;padding:3px 9px;border-radius:999px;background:var(--accent);color:#fff;font:700 .72rem/1.2 var(--sans)}
.cs-list{list-style:none;display:grid;gap:2px}
.cs-list a{display:flex;align-items:center;gap:10px;padding:6px 4px;border-radius:10px;font:500 .9rem var(--sans);color:var(--ink)}
.cs-list a:hover{background:var(--bg-2)}
.cs-list .ic{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--bg-2)}
.cs-list img{max-width:28px;max-height:28px}

/* chat card in the right column */
.pcard.live{background:var(--night);box-shadow:0 0 0 1px rgba(255,255,255,.04),var(--sh-2);padding:16px 16px 12px}
.p-right .live h3{color:#fff}
.p-right .live .cl{font-size:.84rem;padding:7px 0}

/* screenshots */
.shots{padding-top:72px}
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:150px;gap:14px}
.gallery button{position:relative;border-radius:18px;overflow:hidden;background:#13306e;box-shadow:0 0 0 1px var(--line);padding:0;text-align:left}
.gallery button.g-big{grid-column:span 2;grid-row:span 2}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gallery button:hover img{transform:scale(1.05)}
.gallery span{position:absolute;left:10px;bottom:10px;padding:5px 10px;border-radius:999px;background:rgba(6,18,46,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font:600 .8rem/1.2 var(--sans)}
.shot-full{display:block;width:100%;height:auto;max-height:calc(100vh - 120px);object-fit:contain;background:#000}

@media (max-width:1180px){
  .livebar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lb-tile:nth-child(4){box-shadow:0 -1px 0 var(--line-2)}
  .lb-tile:nth-child(n+4){border-top:1px solid var(--line-2)}
  .portal3{grid-template-columns:260px minmax(0,1fr)}
  .p-right{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
}
@media (max-width:900px){
  .portal3{grid-template-columns:1fr}
  .p-left{display:grid;grid-template-columns:1fr 1fr;align-items:start}
  .p-left .acct{grid-row:span 3}
  .p-right{grid-template-columns:1fr 1fr}
  .duo2{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .livebar{grid-template-columns:1fr 1fr;margin-top:-30px}
  .lb-tile{padding:12px 14px}
  .lb-tile:nth-child(n+3){border-top:1px solid var(--line-2)}
  .lb-tile:nth-child(odd){box-shadow:none}
  .p-left,.p-right{grid-template-columns:1fr}
  .rk2{grid-template-columns:1fr}
  .boards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .gallery{grid-auto-rows:110px}
}

.newscard .rtabs{margin-right:auto}
.newscard .ph h3{margin-right:0}
.rk-top small{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);position:relative;z-index:1}
.gallery button:nth-child(8){grid-column:span 2}
@media (max-width:900px){.gallery button:nth-child(8){grid-column:span 2}}
@media (max-width:760px){
  .gh-places{display:none}
  .gh-content{padding:84px 0 96px}
  .gh-media{min-height:0;height:auto}
}
.rtabs{max-width:100%;overflow-x:auto;scrollbar-width:none}
.rtabs::-webkit-scrollbar{display:none}
.rtabs button{flex:none}

/* =====================================================================
   v5: calmer home. The screenshot is never cropped (16:9 in a frame,
   a blurred copy fills the hero), fewer cards with more room.
   ===================================================================== */
.hero5{position:relative;overflow:hidden;isolation:isolate;margin:14px 14px 0;border-radius:28px;background:#0b1530;color:#fff}
.h5-bg{position:absolute;inset:-60px;z-index:-2;background:#13306e center/cover no-repeat;filter:blur(34px) saturate(1.25) brightness(.62);transform:scale(1.08);transition:background-image .8s}
.hero5::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,14,36,.78),rgba(6,14,36,.35) 55%,rgba(6,14,36,.15))}
.hero5 .leaves{z-index:0}
.hero5 .leaf:nth-child(n+5){display:none}
.h5-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:48px;align-items:center;padding:56px 0 92px}
.h5-logo{margin:0 0 6px -8px;line-height:0}
.h5-logo img{width:clamp(220px,22vw,300px);height:auto;filter:drop-shadow(0 8px 22px rgba(0,0,0,.35))}
.h5-tag{font:700 clamp(1.6rem,2.6vw,2.3rem)/1.15 var(--ms);text-shadow:0 2px 14px rgba(0,0,0,.35)}
.h5-tag span{color:#ffb547}
.h5-lead{margin-top:14px;max-width:470px;font:400 1.06rem/1.6 var(--text);color:rgba(255,255,255,.86)}
.h5-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.h5-show{min-width:0}
.h5-frame{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border-radius:20px;overflow:hidden;background:#000;cursor:zoom-in;
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 30px 70px -24px rgba(0,0,0,.7);transition:transform .3s}
.h5-frame:hover{transform:translateY(-3px)}
.h5-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.h5-slides img.on{opacity:1}
.h5-cam{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;background:rgba(6,14,36,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font:600 .72rem var(--sans);color:#fff;letter-spacing:.04em;text-transform:uppercase}
.h5-cam::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff5a5a}
.h5-places{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.h5-places button{position:relative;overflow:hidden;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);font:600 .84rem/1 var(--sans);transition:background .2s,color .2s}
.h5-places button:hover{background:rgba(255,255,255,.18);color:#fff}
.h5-places button[aria-selected="true"]{background:#fff;color:var(--ink)}
.h5-places i{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent)}
.h5-places button[aria-selected="true"] i{animation:prog var(--slide,6s) linear forwards}

/* right now: four tiles */
.livebar.lb4{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:-44px}
/* right now: the rates tile (2026-10-14). EXP / meso / drop as game-item slots, the weekend EXP boost under them.
   The tile is its own container: narrow tiles (phones, small laptops) stack each slot (icon over value). */
.lb-rates{container-type:inline-size}
.lb-rates .lb-k{text-decoration:none;transition:color .15s}
.lb-rates .lb-k:hover{color:var(--link)}
.lb-rates .lb-more{margin-left:-2px;font:700 .9rem/1 var(--sans);opacity:.6}
.lb-rt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:3px 0 2px}
.lb-rt .rt{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:6px;min-width:0;padding:5px 8px 5px 6px;border-radius:12px;
  background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);transition:background .2s,box-shadow .2s}
.lb-rt .rt img{grid-row:1/3;width:26px;height:26px;object-fit:contain}
.lb-rt .rt-v{min-width:0;font:700 1.05rem/1.1 var(--ms);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-rt .rt-l{font:700 .6rem/1.2 var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.lb-rt .rt.boost{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent)}
.lb-rt .rt.boost .rt-v{color:var(--accent-ink)}
.lb-rates .lb-wkl{color:var(--muted)}
.lb-wkl .wk-b{display:inline-block;margin-right:1px;padding:0 6px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font:700 .68rem/1.45 var(--sans);vertical-align:1px}
.lb-wkl .wk-b.on{background:var(--accent);color:#fff;animation:wkpulse 2.4s ease-in-out infinite}
@keyframes wkpulse{50%{box-shadow:0 0 0 3px rgba(255,107,26,.22)}}
@media (prefers-reduced-motion:reduce){.lb-wkl .wk-b.on{animation:none}}
@container (max-width:250px){
  .lb-rt{gap:5px}
  .lb-rt .rt{grid-template-columns:minmax(0,1fr);justify-items:center;row-gap:1px;padding:5px 2px 4px;text-align:center}
  .lb-rt .rt img{grid-row:auto;width:22px;height:22px}
}
@container (max-width:200px){ .lb-wkl .wk-w{display:none} }
/* guide: Server rates (the same slots, bigger; the EXP Card table under them) */
[data-wk-only][hidden]{display:none!important}
.rates-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:4px 0 18px}
.rcard{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;column-gap:12px;min-width:0;padding:14px 16px;border-radius:var(--r);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line)}
.rcard img{grid-row:1/4;width:40px;height:40px;object-fit:contain}
.rcard b{font:700 1.6rem/1.05 var(--ms);color:var(--ink);font-variant-numeric:tabular-nums}
.rcard span{font:700 .7rem/1.4 var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.rcard small{font:400 .8rem/1.35 var(--text);color:var(--muted)}
.rcard.wk{background:linear-gradient(180deg,#fff3e4,#fffaf4);box-shadow:inset 0 0 0 1.5px #ffc48f}
.rcard.wk b{color:var(--accent-2)}
html[data-theme="dark"] .rcard.wk{background:linear-gradient(180deg,#2c2315,#171c27);box-shadow:inset 0 0 0 1.5px #6b3d1c}
.rates-more{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;margin-bottom:16px}
.rates-more h3{margin-bottom:4px;font:700 1rem/1.3 var(--sans);color:var(--ink)}
.rates-more p{font:400 .93rem/1.6 var(--text);color:var(--ink-2)}
.rates-more .hot{color:var(--accent-2)}
.rates-x .ic{display:flex;align-items:center;gap:4px 9px;flex-wrap:wrap;min-height:24px}
.rates-x .ic img{width:24px;height:24px;object-fit:contain}
.rates-x .ic small{font:400 .8rem/1.3 var(--text);color:var(--muted)}
.tbl.rates-x tr td+td{font:700 1rem/1.3 var(--ms);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl.rates-x tr td+td+td{color:var(--accent-ink)}
@media (max-width:900px){ .rates-g{grid-template-columns:1fr 1fr} .rates-more{grid-template-columns:1fr} }
@media (max-width:480px){
  .rates-g{gap:8px}
  .rcard{grid-template-columns:30px minmax(0,1fr);column-gap:9px;padding:11px 12px}
  .rcard img{width:30px;height:30px}
  .rcard b{font-size:1.3rem}
  .rcard small{font-size:.74rem}
  .tbl.rates-x th,.tbl.rates-x td{padding:9px 8px}
  .tbl.rates-x th{letter-spacing:0}
}

/* portal: three calm columns, two rows */
.portal5{display:grid;grid-template-columns:280px minmax(0,1fr) 320px;gap:24px;align-items:start;margin-top:36px}
.portal5 .p-left{display:flex;flex-direction:column;gap:20px}
.portal5 .rankcard{grid-column:1/3}
.portal5 .bugcard{grid-column:1/3}
.bugcard .ph h3{margin-right:6px}
.bug-n{margin-right:auto;min-width:22px;padding:0 7px;border-radius:999px;background:#fff1e6;color:#d9480f;font:700 .74rem/22px var(--sans);text-align:center}
.bug-n:empty{display:none}
.bug-how{margin:-2px 0 10px;font:400 .86rem/1.45 var(--text);color:var(--muted)}
.bug-how b{color:var(--ink);font-weight:600}
.buglist .tag{min-width:84px}
.portal5 .pcard{padding:22px 22px 18px}
.rk-tabs{display:inline-flex;margin-bottom:14px}
.rk2{grid-template-columns:220px minmax(0,1fr)}
.cs-list{gap:0}
.cs-list li a{padding:9px 4px;border-top:1px solid var(--line-2);border-radius:0}
.cs-list li:first-child a{border-top:0}
.cs-list li a:hover{background:none}
.cs-list li a:hover b{color:var(--link)}
.cs-list .ic{width:42px;height:42px;border-radius:12px;background:linear-gradient(#f6f2ff,#fff);box-shadow:inset 0 0 0 1px var(--line-2)}
.cs-list .ic img{max-width:32px;max-height:32px;image-rendering:pixelated}
.cs-list b{display:block;font:600 .92rem/1.25 var(--sans);color:var(--ink)}
.cs-list small{font:400 .78rem var(--text);color:var(--muted)}
.portal5 .live{grid-column:3;grid-row:1/3}
.portal5 .live .ms-chat-lines{gap:0}

/* features: a short chip list instead of 20 lines of text */
.chips5{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:980px;margin:34px auto 0;list-style:none}
.chips5 li{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(13,40,90,.07),var(--sh-1);font:500 .9rem var(--sans);color:var(--ink-2)}
.chips5 li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}

@media (max-width:1180px){
  .portal5{grid-template-columns:260px minmax(0,1fr)}
  .portal5 .rankcard,.portal5 .bugcard{grid-column:1/-1}
  .portal5 .live{grid-column:auto;grid-row:auto}
}
@media (max-width:900px){
  .h5-grid{grid-template-columns:1fr;gap:28px;padding:40px 0 84px}
  .portal5{grid-template-columns:1fr}
  .portal5 .p-left{display:grid;grid-template-columns:1fr 1fr;align-items:start}
  .livebar.lb4{grid-template-columns:1fr 1fr}
  .livebar.lb4 .lb-tile:nth-child(n+3){border-top:1px solid var(--line-2)}
  .livebar.lb4 .lb-tile:nth-child(3){box-shadow:none}
}
@media (max-width:640px){
  .hero5{margin:8px 8px 0;border-radius:22px}
  .h5-grid{padding:28px 0 70px}
  .portal5 .p-left{grid-template-columns:1fr}
  .rk2{grid-template-columns:1fr}
  .h5-ctas .btn{flex:1 1 auto}
}
/* v5 order: members | news | coming up / ranking (2 cols) | cash shop / chat strip (full width) */
.portal5 .live{grid-column:1/-1;grid-row:auto}
.pcard.live h3{color:#fff}
.portal5 .live .ms-chat-lines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;min-height:0}
.portal5 .live .cl{padding:12px 14px;border:0;border-radius:14px;background:rgba(255,255,255,.06)}
@media (max-width:900px){.portal5 .live .ms-chat-lines{grid-template-columns:1fr}}
@media (max-width:900px){.portal5{grid-template-columns:minmax(0,1fr)}.portal5 .p-left{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.portal5 .p-left{grid-template-columns:minmax(0,1fr)}.bigdl b{font-size:1.02rem}}
.ft-brand img.mfl{width:200px;height:auto;filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))}

/* the owner's notice in the footer (site.js renderFooter, 2026-10-12) */
.ft-notice{margin:36px 0 0;padding:14px 18px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.04);color:#aab4cc;font:400 .86rem/1.55 var(--text);max-width:none}
.ft-notice b{color:#fff;font-weight:600}
.ft-notice a{color:#9cc3ff;text-decoration:underline;text-underline-offset:2px}
.ft-notice a:hover{color:#fff}

/* home portal grid (2026-10-12): fixed areas, cards in a row share its height (no gaps beside short cards)
   row 1: members + download | news | Cash Shop;  row 2: ranking | Cash Shop;  row 3: in-game chat (2026-10-14: no
   'Coming up' (the tiles above say it) and no bugs card (reported in game)) */
.portal5{grid-template-columns:280px minmax(0,1fr) 320px;align-items:stretch;
  grid-template-areas:"left news shop" "rank rank shop" "chat chat chat"}
.portal5>.p-left{grid-area:left}
.portal5>.newscard{grid-area:news}
.portal5>.upcard{grid-area:up}
.portal5>.rankcard{grid-area:rank}
.portal5>.bugcard{grid-area:bugs}
.portal5>.cs{grid-area:shop}
.portal5>.live{grid-area:chat}
.portal5>.live[hidden]{display:none}
@media (min-width:641px) and (max-width:1180px){   /* the Cash Shop card runs full width here: its rows in 2 columns */
  .portal5>.cs .cs-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  .portal5>.cs .cs-list>li.cs-sec,.portal5>.cs .cs-list>li.cs-more{grid-column:1/-1}
}
.portal5>.pcard{min-width:0}
.portal5>.p-left>.memb{flex:1}
@media (max-width:1180px){
  .portal5{grid-template-columns:260px minmax(0,1fr);grid-template-areas:"left news" "rank rank" "shop shop" "chat chat"}
}
@media (max-width:900px){
  .portal5{grid-template-columns:minmax(0,1fr);grid-template-areas:"left" "news" "rank" "shop" "chat"}
}

/* character page scene: name + guild tags drawn like the game's (dark tag, white text), readable on any backdrop */
.cprof .scene .tagname{margin-top:4px;background:rgba(0,0,0,.72);color:#fff;font:700 12px/1 var(--web);padding:4px 8px 5px;border-radius:3px}
.cprof .scene .tagguild{margin-top:3px;background:rgba(0,0,0,.62);color:#fff;font:600 11px/1 var(--web);padding:3px 7px 4px;border-radius:3px;max-width:90%;overflow:hidden;text-overflow:ellipsis}

/* download page: the auto-update promise under the intro */
.autoupd{margin:2px 0 16px;padding:10px 14px;border-radius:12px;background:#ecfdf3;box-shadow:inset 0 0 0 1px #c6f0d6;font:400 .95rem/1.5 var(--text);color:#1d5f3a}
.autoupd b{color:#13502c;font-weight:700}

/* sprite loading: spinner until maplestory.io has drawn the character (site.js adds/removes "ld") */
@keyframes mfspin{to{transform:rotate(360deg)}}
img.ld{opacity:0}
.scene:has(>img.ld),.sp:has(>img.ld),.av:has(>img.ld){position:relative}
/* the same ring as .spin; its track is two-tone (white inside, slate outside) so it shows on white cards and on map art alike */
.scene:has(>img.ld)::after,.sp:has(>img.ld)::after,.av:has(>img.ld)::after{content:"";position:absolute;left:50%;top:45%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 30%,rgba(255,138,61,.4) 55%,#f47a22 100%),radial-gradient(farthest-side,rgba(255,255,255,.78) calc(100% - 2px),rgba(19,40,77,.32) calc(100% - 1.5px));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px));animation:mfspin .8s linear infinite}
img.img-failed{opacity:.35;filter:grayscale(1)}
/* VIP page perks */
.vip-perks{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:6px}
.vip-perks .slot{display:grid;place-items:center;width:48px;height:48px}
.vip-perks .slot img{max-width:36px;max-height:36px;image-rendering:pixelated}
.vp-tag{font:800 .78rem/1 var(--sans);color:#fff !important;background:linear-gradient(#a259ff,#6f2bd9) !important;box-shadow:none !important}
.vp-ico{font-size:1.4rem}
.vp-inline{color:#6f2bd9;font-weight:700}
.perk p .vp-inline{display:inline;font:inherit;font-weight:700;color:#6f2bd9}   /* not the perk-title style of ".perk b" (it broke "show [VIP] before your name" into 3 lines) */
@media (max-width:900px){.vip-perks{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.vip-perks{grid-template-columns:1fr}}

/* download page: launcher screenshot under the download card */
.launcher-shot{margin:22px 0 18px}
.launcher-shot img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 0 0 1px var(--line),0 18px 40px rgba(13,40,90,.18)}
.launcher-shot figcaption{margin-top:10px;font:400 .92rem/1.5 var(--text);color:var(--muted);text-align:center}
.launcher-shot figcaption b{color:var(--ink);font-weight:600}

/* home Cash Shop card (2026-10-12, no prices): "MapleFresh exclusive" tag, classic v62 section label, closing line */
.cs-list .cs-tag{display:inline-block;margin-left:3px;padding:0 6px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font:700 .6rem/1.6 var(--sans);font-style:normal;letter-spacing:.01em;vertical-align:1px;white-space:nowrap}
.cs-list>li{display:block;padding:0;border-top:0}
.cs-list small{display:block;line-height:1.4}
.cs-list li.cs-sec{display:block;margin-top:4px;padding:12px 4px 4px;border-top:1px solid var(--line);font:700 .7rem/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cs-list li.cs-sec+li a{border-top:0}
.cs-list li.cs-more{display:block;padding:10px 4px 2px;border-top:1px solid var(--line-2);font:400 .8rem/1.45 var(--text);color:var(--muted)}

/* Download page hero: the self-updating promise as glass badges (owner 10-14, replaces "(Self-updating game)") */
.dl-badges{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.dl-badges span{display:inline-flex;align-items:center;gap:7px;padding:7px 14px 7px 10px;border-radius:999px;
  font:700 .9rem/1 var(--display);letter-spacing:.2px;color:#fff;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.dl-badges i{width:16px;height:16px;border-radius:50%;background:#ffb547;flex:none;position:relative;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.dl-badges i::after{content:"";position:absolute;left:5px;top:2.5px;width:4px;height:8px;border:solid #5a3300;border-width:0 2px 2px 0;transform:rotate(45deg)}
.dl-badges .os{padding-left:14px;background:rgba(0,0,0,.22);border-color:rgba(255,255,255,.2);font-weight:600}
@media (max-width:560px){.dl-badges span{font-size:.82rem;padding:6px 11px 6px 8px}}

/* Home hero: the owner's script logo (10-14). Black lettering with a thin gold edge needs a soft light halo on the
   dark hero, or it disappears; the leaf keeps its own colour. */
.h5-logo img.mf-script{filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));height:auto}