/* 2026-10-19 front page (owner: "like DonutSMP's: the launcher the focus, and the store; how to join"; "not the game
   assets"; "no footer or nav bar, just the main sections"). One screen of big tiles: logo, Play now, Store, Rankings,
   Community, How to join. No menu, footer, online count or game art here. The full portal is /home (home.html).
   Store needs a login (logged out: login?next=shop). Prefix ld- (the old home's .bt classes live in fresh.css). */
/* owner 10-19: light, and dark when the computer / browser is set to dark (theme.js: the visitor's saved site theme,
   else prefers-color-scheme) */
:root{--l-bg:#eef3fa;--l-tile:#fff;--l-tile-2:#f3f5fa;--l-ink:#121722;--l-muted:#667085;--l-line:rgba(16,24,40,.08);--l-line-2:rgba(16,24,40,.18);
  --l-blue:#2f8ff0;--l-orange:#ff7a1a;--l-orange-ink:#c2410c;--l-shadow:rgba(20,40,90,.35);--l-wall:.12;color-scheme:light}
html[data-theme="dark"]{--l-bg:#0b0d14;--l-tile:#151925;--l-tile-2:#1c2131;--l-ink:#f4f6fb;--l-muted:#8d95a8;--l-line:rgba(255,255,255,.07);--l-line-2:rgba(255,255,255,.16);
  --l-shadow:rgba(0,0,0,.6);--l-wall:.05;color-scheme:dark}
html,body{background:var(--l-bg)}
body[data-page="landing"]{margin:0;color:var(--l-ink);font-family:var(--body,system-ui,sans-serif)}

.land{position:relative;isolation:isolate;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:32px 24px;box-sizing:border-box}
/* owner: "a very transparent MapleStory wallpaper as the back, very light"; 10-19 their KMS picnic wallpaper, "even lighter" */
.ld-wall{position:fixed;inset:0;z-index:-1;background:url("../hero/kms-pinkfriends-1920.webp") center bottom/cover no-repeat;opacity:var(--l-wall);pointer-events:none}
.ld-wall::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--l-bg) 55%,transparent) 70%,var(--l-bg))}
.ld-grid{width:min(1180px,100%);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.ld-tile{position:relative;display:flex;flex-direction:column;min-width:0;box-sizing:border-box;padding:26px 28px;border-radius:26px;
  background:color-mix(in srgb,var(--l-tile) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px var(--l-line),0 14px 34px -26px var(--l-shadow);color:var(--l-ink);text-decoration:none;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
a.ld-tile:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--l-line-2),0 18px 40px -24px var(--l-shadow)}
a.ld-tile:focus-visible,.ld-addr:focus-visible,.ld-steps a:focus-visible{outline:3px solid var(--l-orange);outline-offset:3px}
.ld-k{margin:0;font:800 1.75rem/1 var(--display,"Maplestory",sans-serif);letter-spacing:-.01em;color:inherit}

/* logo */
.ld-logo{grid-column:span 3;display:flex;flex-direction:column;gap:12px;min-width:0}
.ld-logo-tile{flex:1;align-items:center;justify-content:center;min-height:250px;padding:20px;background:linear-gradient(160deg,#4aa3ff,#2f8ff0 50%,#2377dc);box-shadow:none}
.ld-logo-tile img{width:min(92%,300px);height:auto;filter:drop-shadow(0 8px 16px rgba(0,30,90,.35))}
.ld-addr{display:inline-flex;align-items:center;justify-content:center;gap:10px;align-self:center;padding:6px 14px;border:0;border-radius:12px;background:none;cursor:pointer;
  color:var(--l-ink);font:800 1.25rem/1 var(--display,"Maplestory",sans-serif);letter-spacing:.06em;text-transform:uppercase}
.ld-addr:hover{background:var(--l-tile)}
.ld-addr.ok{color:#2fcf74}

/* Play now */
.ld-play{grid-column:span 6;min-height:300px;background:linear-gradient(135deg,#ff9535,#ff7a1a 45%,#f45d1c);box-shadow:none;color:#fff}
.ld-play>*{position:relative;z-index:1}
.ld-play>.ld-leaf{position:absolute;z-index:0;right:-36px;top:-60px;width:330px;height:auto;opacity:.18;transform:rotate(-8deg);transition:transform .6s ease;pointer-events:none}
.ld-play:hover .ld-leaf{transform:rotate(-2deg) scale(1.03)}
.ld-play{box-shadow:0 24px 50px -28px rgba(255,110,20,.75)}
.ld-play .ld-k{font-size:clamp(2.6rem,4.6vw,3.8rem)}
.ld-pitch{margin:12px 0 0;max-width:440px;font:600 1.12rem/1.4 var(--body,sans-serif);color:rgba(255,255,255,.92)}
.ld-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:auto;padding-top:24px}
.ld-dl{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:16px;background:#fff;color:var(--l-orange-ink);text-decoration:none;
  font:800 1.08rem/1 var(--body,sans-serif);box-shadow:0 10px 24px -12px rgba(110,30,0,.7);transition:transform .15s,box-shadow .15s}
.ld-dl svg{width:20px;height:20px}
.ld-dl:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(110,30,0,.75)}
.ld-dl:active{transform:translateY(0)}
.ld-dl:focus-visible,.ld-alt a:focus-visible,.ld-got a:focus-visible{outline:3px solid #fff;outline-offset:3px}
.ld-alt{display:inline-flex;align-items:center;gap:8px;font:700 .92rem/1.2 var(--body,sans-serif)}
.ld-alt a,.ld-got a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);text-underline-offset:3px}
.ld-alt a:hover,.ld-got a:hover{text-decoration-color:#fff}
.ld-sep{opacity:.6}
.ld-got{margin:12px 0 0;font:600 .9rem/1.4 var(--body,sans-serif);color:rgba(255,255,255,.95)}

/* Store: violet */
.ld-store{grid-column:span 3;color:#fff;background:linear-gradient(150deg,#9b5cff,#7337e0 55%,#5b22c4);box-shadow:0 24px 50px -30px rgba(115,55,224,.8)}
a.ld-store:hover{box-shadow:0 28px 54px -26px rgba(115,55,224,.9)}
.ld-store .ld-big,.ld-store .ld-big i{color:#fff}
.ld-store .ld-big i{opacity:.6}
.ld-store .ld-lines span{background:rgba(255,255,255,.16);color:#fff}
.ld-store::before{content:"NX";position:absolute;right:-14px;top:-22px;font:900 7.5rem/1 var(--display,"Maplestory",sans-serif);color:rgba(255,255,255,.1);letter-spacing:-.04em;pointer-events:none}
.ld-big{margin-top:auto;padding-top:16px;font:800 1.7rem/1.1 var(--display,"Maplestory",sans-serif);color:var(--l-ink)}
.ld-big i{font-style:normal;color:var(--l-muted)}
.ld-lines{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.ld-lines span{padding:6px 10px;border-radius:999px;background:var(--l-tile-2);color:var(--l-muted);font:600 .8rem/1 var(--body,sans-serif)}

/* Rankings: the top three */
.ld-rank{grid-column:span 3;min-height:230px}
.ld-top{display:grid;gap:10px;margin:auto 0 0;padding:18px 0 0;list-style:none;counter-reset:r}
.ld-top li{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:10px;align-items:baseline;counter-increment:r}
.ld-top li::before{content:counter(r);grid-row:span 2;align-self:center;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  font:800 .82rem/1 var(--display,"Maplestory",sans-serif);color:#3a2a00;background:#ffcf4a;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.ld-top li:nth-child(2)::before{background:#d6dde8;color:#2c3440}
.ld-top li:nth-child(3)::before{background:#e5a36b;color:#3d1f05}
.ld-top li{grid-template-columns:24px minmax(0,1fr)!important;column-gap:12px!important}
.ld-rank .ld-k{background:linear-gradient(90deg,#ffd45a,#ff9f3a);-webkit-background-clip:text;background-clip:text;color:transparent}
.ld-top b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 1rem/1.25 var(--body,sans-serif)}
.ld-top span{font:500 .82rem/1.3 var(--body,sans-serif);color:var(--l-muted)}

/* Community: the 3 latest news posts over their pictures (as the launcher's news) */
.ld-home{grid-column:span 3;min-height:230px}
.ld-slides{position:absolute;inset:0}
.ld-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .9s ease,transform 6s ease}
.ld-slides img.on{opacity:1;transform:scale(1)}
.ld-home.has-pic{color:#fff}
.ld-home.has-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,9,18,.55),rgba(6,9,18,.05) 40%,rgba(6,9,18,.88));pointer-events:none}
.ld-cover{position:absolute;inset:0;z-index:2;border-radius:inherit}
.ld-cover:focus-visible{outline:3px solid var(--l-orange);outline-offset:-3px}
.ld-k-link{position:relative;z-index:3;align-self:flex-start;color:inherit;text-decoration:none}
.ld-k-link span{display:inline-block;font-size:.8em;opacity:.7;transition:transform .2s}
.ld-k-link:hover span{transform:translateX(3px);opacity:1}
.ld-news{position:relative;z-index:1;margin-top:auto;padding-top:18px;pointer-events:none}
.ld-news span{font:700 1.05rem/1.4 var(--body,sans-serif);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.ld-news small{display:block;margin-bottom:6px;font:700 .72rem/1 var(--body,sans-serif);letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.ld-dots{position:relative;z-index:1;display:flex;gap:6px;margin-top:12px;pointer-events:none}
.ld-dots i{width:18px;height:4px;border-radius:2px;background:rgba(255,255,255,.35);transition:background .3s,width .3s}
.ld-dots i.on{width:28px;background:#fff}

/* How to join */
.ld-join{grid-column:span 6;min-height:230px}
.ld-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:auto 0 0;padding:18px 0 0;list-style:none;counter-reset:s}
.ld-steps li{counter-increment:s;min-width:0}
.ld-steps a{display:flex;flex-direction:column;gap:4px;height:100%;box-sizing:border-box;padding:16px;border-radius:18px;background:var(--l-tile-2);color:var(--l-ink);text-decoration:none;transition:box-shadow .18s}
.ld-steps a::before{content:counter(s);margin-bottom:8px;font:800 1.6rem/1 var(--display,"Maplestory",sans-serif);color:var(--l-orange)}
.ld-steps li:nth-child(2) a::before{color:#4aa3ff}
.ld-steps li:nth-child(3) a::before{color:#2fcf74}
.ld-steps a:hover{box-shadow:inset 0 0 0 1px var(--l-line-2)}
.ld-steps b{font:700 .98rem/1.3 var(--body,sans-serif)}
.ld-steps small{font:500 .82rem/1.35 var(--body,sans-serif);color:var(--l-muted)}

@media (prefers-reduced-motion:reduce){.ld-tile,.ld-steps a{transition:none}}
@media (max-width:1060px){
  .ld-logo{grid-column:span 4}
  .ld-play{grid-column:span 8}
  .ld-store,.ld-rank,.ld-home{grid-column:span 4}
  .ld-join{grid-column:1/-1}
}
@media (max-width:720px){
  .land{place-items:start center;padding:16px}
  .ld-grid{gap:14px}
  .ld-logo,.ld-play,.ld-join{grid-column:1/-1}
  .ld-logo-tile{min-height:170px}
  .ld-play{min-height:0}
  .ld-store,.ld-rank,.ld-home{grid-column:1/-1;min-height:0}
  .ld-tile{padding:22px;border-radius:22px}
  .ld-steps{grid-template-columns:minmax(0,1fr)}
  .ld-steps a{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:12px}
  .ld-steps a::before{margin:0}
  .ld-steps small{flex-basis:100%;padding-left:28px}
  .ld-dl{flex:1 1 100%;justify-content:center}
}
/* light: a deeper gold so "Rankings" reads on white */
html:not([data-theme="dark"]) .ld-rank .ld-k{background-image:linear-gradient(90deg,#d99a00,#e8650c)}

/* 10-19 owner: "no news on it, donut doesn't do it" - Community is a plain tile (icon + label), like DonutSMP's Discord tile */
.ld-home{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;text-decoration:none;color:inherit}
.ld-home .ld-k{position:absolute;top:18px;left:20px}
.ld-comm-ico{width:64px;height:64px;color:var(--l-blue)}
.ld-comm-ico svg{width:100%;height:100%}
.ld-comm-t{font:700 1rem/1.3 var(--body,sans-serif);opacity:.85}
.ld-home:hover .ld-comm-t span{display:inline-block;transform:translateX(3px)}

/* 10-19 owner: "just put the most important things on it", "no numbers": logo, Play now, Store / Rankings, How to join.
   Background: the owner's two KMS wallpapers (one per visit), "more visible" */
.ld-wall.alt{background-image:url("../hero/kms-picnic-1920.webp")}
.ld-rank{grid-column:span 5}
.ld-join{grid-column:span 7}
@media (max-width:1060px){.ld-store{grid-column:span 4}.ld-rank{grid-column:span 8}.ld-join{grid-column:1/-1}}
@media (max-width:720px){.ld-store,.ld-rank,.ld-join{grid-column:1/-1}}
.ld-wall::after{background:none}

/* 10-19 owner: "Donut SMP just has a nice stats box and coming soon - just do that" */
.ld-rank{grid-column:span 3}
.ld-soon{grid-column:span 3}
.ld-join{grid-column:span 6}
.ld-ji{display:inline-block!important;width:20px;height:20px;margin:0 7px 0 0;vertical-align:-4px;image-rendering:pixelated}
.ld-more{margin-top:auto;padding-top:12px;font:700 .85rem/1 var(--body,sans-serif);color:var(--l-muted)}
a.ld-rank:hover .ld-more span{display:inline-block;transform:translateX(3px)}
.ld-soon{align-items:center;justify-content:center;gap:12px;text-align:center;min-height:230px;color:#fff;background:linear-gradient(150deg,#3aa0ff,#2f6fe0 55%,#2547b8);box-shadow:0 24px 50px -30px rgba(47,111,224,.8)}
.ld-soon-ico{width:58px;height:58px;opacity:.9}
.ld-soon-ico svg{width:100%;height:100%}
.ld-soon-t{font:800 1.6rem/1.1 var(--display,"Maplestory",sans-serif);letter-spacing:-.01em}
@media (max-width:1060px){.ld-store,.ld-rank,.ld-soon{grid-column:span 4}.ld-join{grid-column:1/-1}}
@media (max-width:720px){.ld-store,.ld-rank,.ld-soon,.ld-join{grid-column:1/-1}.ld-soon{min-height:150px}}

/* 10-19 owner: the DonutSMP-style footer under the tiles */
.ld-sitefoot{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 16px 34px;text-align:center;color:var(--l-muted)}
.ld-sf-name{font:800 1.6rem/1 var(--display,"Maplestory",sans-serif);color:var(--l-ink);letter-spacing:-.01em}
.ld-sitefoot small{font:600 .78rem/1.2 var(--body,sans-serif);opacity:.85}
.ld-sitefoot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;margin-top:6px}
.ld-sitefoot nav a{font:600 .88rem/1.3 var(--body,sans-serif);color:var(--l-muted);text-decoration:none}
.ld-sitefoot nav a:hover{color:var(--l-ink);text-decoration:underline}

/* 10-19 owner: "it should have a nice stats like donut has" - a picture tile with the label, the whole tile links to rankings */
.ld-rank.ld-art{min-height:230px;color:#fff;background:#8fd0f0 url("../hero/kms-picnic-1920.webp") 72% 78%/190% auto no-repeat;overflow:hidden}
.ld-rank.ld-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,40,.35),transparent 45%);pointer-events:none}
.ld-rank.ld-art .ld-k{position:relative;z-index:1;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.35)}
html:not([data-theme="dark"]) .ld-rank.ld-art .ld-k{background-image:none;color:#fff}
.ld-rank.ld-art{transition:transform .25s ease,box-shadow .25s ease}
a.ld-rank.ld-art:hover{background-size:200% auto}

/* 10-19 owner: Donut-style picture cards with our own in-game shots: Stats = MapleFresh Town, Duels = the duels demo,
   How to join over a faint Zakum altar */
.ld-rank.ld-art{background:#0e1830 url("../shots/town-w.webp") 30% 40%/cover no-repeat}
a.ld-rank.ld-art:hover{background-size:cover}
.ld-duel.ld-art{display:flex;align-items:flex-start;justify-content:flex-start;gap:0;text-align:left;color:#fff;background:#f2d9a3 url("../shots/duel.webp?v=1024") 55% 70%/cover no-repeat;box-shadow:none;overflow:hidden;text-decoration:none}
.ld-duel.ld-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,40,.35),transparent 45%);pointer-events:none}
.ld-duel.ld-art .ld-k{position:relative;z-index:1;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.ld-rank.ld-art,.ld-duel.ld-art{transition:transform .25s ease,box-shadow .25s ease}
a.ld-rank.ld-art:hover,a.ld-duel.ld-art:hover{transform:translateY(-3px)}
.ld-join{overflow:hidden}
.ld-join::before{content:"";position:absolute;inset:0;background:url("../shots/zakum-w.webp") center 60%/cover no-repeat;opacity:.16;pointer-events:none}
html[data-theme="dark"] .ld-join::before{opacity:.22}
.ld-join>*{position:relative;z-index:1}
/* owner: "dont put price" on the Store tile */
.ld-store .ld-lines{margin-top:auto}

/* 10-19 owner: Donut's 5 cards - logo | Play now | Store, then Stats | How to join. No Duels card: its picture is the
   Stats card. Bigger logo. */
.ld-rank.ld-art{grid-column:span 6;min-height:250px;background:#f2d9a3 url("../shots/duel.webp?v=1024") 55% 65%/cover no-repeat}
.ld-join{grid-column:span 6}
.ld-logo-tile{padding:10px}
.ld-logo-tile img{width:min(100%,400px)}
@media (max-width:1060px){.ld-store{grid-column:span 4}.ld-rank.ld-art{grid-column:span 8}.ld-join{grid-column:1/-1}}
@media (max-width:720px){.ld-store,.ld-rank.ld-art,.ld-join{grid-column:1/-1}.ld-rank.ld-art{min-height:200px}}

/* 10-19 owner: "duels bg on the store", "the MapleFresh town in the stats" */
.ld-store{background:#5b22c4 url("../shots/duel.webp?v=1024") 55% 65%/cover no-repeat;overflow:hidden}
.ld-store::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,14,90,.55),rgba(40,14,90,0) 45%,rgba(40,14,90,.55));pointer-events:none}
.ld-store>*{position:relative;z-index:1}
.ld-store::before{z-index:1}
.ld-store .ld-k{text-shadow:0 2px 10px rgba(0,0,0,.35)}
.ld-rank.ld-art{background:#141a3a url("../hero/town-plaza-920.webp?v=1024") center 45%/cover no-repeat}
/* owner: "with subtle NX over it" */
.ld-store::before{color:rgba(255,255,255,.24);font-size:8.5rem;right:-10px;top:-18px;text-shadow:0 4px 24px rgba(40,14,90,.35)}
.ld-store .ld-lines span{background:rgba(30,10,70,.55);backdrop-filter:blur(2px)}

/* 10-19 owner: "look at donut proportions" - top row 27.5% | 50% | 22.5% (logo | Play now | Store), bottom row two equal
   halves (Stats | How to join), both rows the same height, every edge in line */
.ld-grid{grid-template-columns:repeat(40,minmax(0,1fr));gap:22px;align-items:stretch}
.ld-logo{grid-column:span 11}
.ld-play{grid-column:span 20;min-height:330px}
.ld-store{grid-column:span 9;min-height:330px}
.ld-rank.ld-art{grid-column:span 20;min-height:330px}
.ld-join{grid-column:span 20;min-height:330px}
.ld-logo-tile{min-height:0;flex:1}
@media (max-width:1060px){
  .ld-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .ld-logo{grid-column:span 4}.ld-play{grid-column:span 8}
  .ld-store{grid-column:span 4}.ld-rank.ld-art{grid-column:span 8}
  .ld-join{grid-column:1/-1}
  .ld-play,.ld-store,.ld-rank.ld-art,.ld-join{min-height:260px}
}
@media (max-width:720px){
  .ld-logo,.ld-play,.ld-store,.ld-rank.ld-art,.ld-join{grid-column:1/-1}
  .ld-play,.ld-store,.ld-rank.ld-art,.ld-join{min-height:0}
  .ld-rank.ld-art{min-height:200px}
}
/* owner: "we can't even see the bg images properly" - lighter tints, art framed on the action, Zakum stronger */
.ld-store{background-position:58% 45%;background-size:cover}
.ld-store::after{background:linear-gradient(180deg,rgba(40,14,90,.45),rgba(40,14,90,0) 32%,rgba(40,14,90,0) 70%,rgba(40,14,90,.45))}
.ld-store::before{color:rgba(255,255,255,.14)}
.ld-store .ld-lines{gap:6px}
.ld-store .ld-lines span{font-size:.72rem;padding:5px 9px}
.ld-join::before{opacity:.38}
html[data-theme="dark"] .ld-join::before{opacity:.42}
.ld-rank.ld-art::after{background:linear-gradient(180deg,rgba(10,20,40,.3),transparent 35%)}
/* owner: "we can't see Zakum, move the cards up" - steps right under the title, Zakum's altar shows below them */
.ld-join .ld-steps{margin:16px 0 0;padding-top:0}
.ld-join{justify-content:flex-start}
.ld-join::before{opacity:.8;background-position:center 85%}
html[data-theme="dark"] .ld-join::before{opacity:.75}
.ld-join .ld-k{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.ld-join .ld-steps a{background:rgba(255,255,255,.92)}
html[data-theme="dark"] .ld-join .ld-steps a{background:rgba(21,25,37,.9)}
/* owner: the address "should be in a rounded card, a pill label" (as DonutSMP's DONUTSMP.NET pill under the logo) */
.ld-addr{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;box-sizing:border-box;min-height:64px;padding:14px 22px;
  border:0;border-radius:999px;background:var(--l-tile);color:var(--l-ink);box-shadow:0 14px 34px -22px var(--l-shadow);cursor:pointer;
  font:800 1.15rem/1 var(--display,"Maplestory",sans-serif);letter-spacing:.02em;text-transform:uppercase;transition:transform .2s ease,box-shadow .2s ease}
.ld-addr:hover{transform:translateY(-2px);box-shadow:0 18px 38px -20px var(--l-shadow)}
.ld-addr svg{width:22px;height:22px;flex:none}
/* owner: "lighter zakum" */
.ld-join::before{opacity:.5}
html[data-theme="dark"] .ld-join::before{opacity:.5}
.ld-join .ld-k{color:var(--l-ink);text-shadow:none}
/* owner: "no point in copying the website" - the pill is a plain label */
.ld-addr-label{cursor:default}
.ld-addr-label:hover{transform:none;box-shadow:0 14px 34px -22px var(--l-shadow)}
/* owner: "white text over the zakum" */
.ld-join .ld-k{color:#fff!important;text-shadow:0 2px 12px rgba(0,0,0,.55)}
/* owner: "center our logo", "a tiny bit smaller" - the art leans right (the leaf), so a small optical nudge left */
.ld-logo-tile{padding:18px}
.ld-logo-tile img{width:min(86%,340px);transform:translateX(-3%)}
/* virus scan line under the Play now download */
.ld-vt{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;margin-top:10px;font:700 .82rem/1.2 var(--body,sans-serif);color:#fff;opacity:.92;text-decoration:none}
.ld-vt svg{width:15px;height:15px}
.ld-vt:hover{opacity:1;text-decoration:underline}
/* owner: "with virustotal link like a nice secure badge" */
.ld-vt{gap:8px;margin-top:12px;padding:6px 12px 6px 8px;border-radius:999px;background:rgba(255,255,255,.95);color:#15803d;opacity:1;
  box-shadow:0 8px 20px -12px rgba(0,0,0,.45);font:700 .8rem/1 var(--body,sans-serif);align-self:flex-start}
.ld-vt svg{width:18px;height:18px;padding:3px;border-radius:50%;background:#22c55e;color:#fff;stroke-width:3}
.ld-vt b{font-weight:800;color:#166534}
.ld-vt span{color:#4b5563;font-weight:600}
.ld-vt span::before{content:"·";margin-right:6px;color:#9ca3af}
.ld-vt:hover{text-decoration:none;box-shadow:0 10px 24px -12px rgba(0,0,0,.55);transform:translateY(-1px)}
/* owner: "not a badge around it" - just the shield + text */
.ld-vt{padding:0;background:none;box-shadow:none;color:#fff}
.ld-vt b{color:#fff}
.ld-vt span{color:rgba(255,255,255,.88)}
.ld-vt span::before{color:rgba(255,255,255,.7)}
.ld-vt:hover{box-shadow:none;transform:none;text-decoration:underline}
/* owner: "inline but small and nice", "competing with the download button" - one quiet item in the Windows & Mac / Install help row */
.ld-alt .ld-vt{margin:0;padding:0;gap:4px;font:inherit;color:inherit;opacity:1;align-self:auto}
.ld-alt .ld-vt svg{width:13px;height:13px;padding:0;background:none;border-radius:0;color:inherit;stroke-width:2.6}
/* owner: "subtle, not in the game font" */
.ld-alt .ld-vt{font:500 .74rem/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:0;opacity:.8;text-decoration:none}
.ld-alt .ld-vt:hover{opacity:1;text-decoration:underline}

/* 10-24 owner: "make the BG full color not transparent" */
:root,html[data-theme="dark"]{--l-wall:1}
/* 10-24 owner: "FULL COLOR ZAKUM" */
.ld-join::before,html[data-theme="dark"] .ld-join::before{opacity:1}
/* 10-24 owner: "PUT CLEAN TOO" next to Virus scan */
.ld-alt .ld-vt .ld-vt-ok{color:#fff;font-weight:700}
/* 10-24 owner: "CLEAN BACKUP DOMAIN LIST HERE" - backups + standby servers inside the address pill. The backup domain's
   real name is never in the page: the blurred text is a decoy. */
.ld-addr-list{flex-direction:column;gap:7px;border-radius:26px;padding:16px 20px}
.ld-addr-list b{font:inherit}
.ld-addr-list small{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 7px;font:600 .74rem/1.3 var(--body,system-ui,sans-serif);
  letter-spacing:0;text-transform:none;color:var(--l-muted)}
.ld-addr-list em{font-style:normal;font-weight:800;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--l-ink);opacity:.7;margin-right:2px}
.ld-addr-list i{font-style:normal;opacity:.6}
.ld-bk-blur{filter:blur(4px);user-select:none;-webkit-user-select:none;pointer-events:none}
/* 10-24 owner: "new grids to the right of these for the backup servers" - one tile per standby server, a 4th column */
.ld-grid{width:min(1460px,100%);grid-template-columns:repeat(49,minmax(0,1fr))}
.ld-srv{grid-column:span 9;min-height:330px;align-items:flex-start;justify-content:flex-end;gap:8px;color:#fff;overflow:hidden}
.ld-srv-nl{background:linear-gradient(155deg,#3b82f6,#1d4ed8 55%,#1e3a8a)}
.ld-srv-nz{background:linear-gradient(155deg,#2dd4bf,#0f766e 55%,#134e4a)}
.ld-srv-k{position:absolute;top:24px;left:24px;font:800 1.5rem/1 var(--display,"Maplestory",sans-serif);text-shadow:0 2px 12px rgba(0,0,0,.3)}
.ld-srv-flag{width:64px;height:auto;border-radius:8px;box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
.ld-srv-name{font:800 1.45rem/1.1 var(--display,"Maplestory",sans-serif)}
.ld-srv-tag{padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.2);font:700 .76rem/1 var(--body,sans-serif);letter-spacing:.04em}
.ld-srv-tag::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#fde047;vertical-align:1px}
.ld-srv small{font:600 .8rem/1.35 var(--body,sans-serif);opacity:.85}
@media (max-width:1060px){
  .ld-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .ld-srv{grid-column:span 6;min-height:220px}
}
@media (max-width:720px){.ld-srv{grid-column:1/-1;min-height:0}.ld-srv-k{position:static}}
/* 10-24 owner: "these cards may need a shadow around them" (over the full-color wallpaper) */
.ld-tile,.ld-addr,.ld-addr-label:hover{box-shadow:0 22px 44px -20px rgba(45,20,70,.55),0 6px 16px -6px rgba(45,20,70,.3)!important}
a.ld-tile:hover{box-shadow:0 28px 52px -20px rgba(45,20,70,.62),0 8px 20px -6px rgba(45,20,70,.34)!important}
/* 10-24 owner: "the bg is too bright, we cannot see the monsters under" - the colourful picnic wallpaper on the page
   itself (scrolls with it, sky colour above), and room under the tiles so the monsters stand in view above the footer */
html:has(body[data-page="landing"]){background:#9ad3f0}
body[data-page="landing"]{min-height:100vh;background:#9ad3f0 url("../hero/kms-picnic-1920.webp") center bottom/max(100%,1500px) auto no-repeat}
html[data-theme="dark"] body[data-page="landing"]{background:linear-gradient(rgba(8,12,28,.5),rgba(8,12,28,.5)),#9ad3f0 url("../hero/kms-picnic-1920.webp") center bottom/max(100%,1500px) auto no-repeat}
html[data-theme="dark"]:has(body[data-page="landing"]){background:#4d6a7c}
.ld-wall{display:none}
main.land{padding-bottom:min(30vw,440px)}
.ld-sitefoot{color:#5b2340}
.ld-sitefoot .ld-sf-name{color:#3b1029}
.ld-sitefoot nav a{color:#5b2340}
@media (max-width:720px){main.land{padding-bottom:62vw}}
.ld-sitefoot{background:none!important;border:0!important;box-shadow:none!important}
/* the wallpaper ends where the footer starts; the footer continues the pink ground */
body[data-page="landing"]{background:#98d6ee}
html[data-theme="dark"] body[data-page="landing"]{background:#4c6b78}
main.land{background:#98d6ee url("../hero/kms-picnic-1920.webp") center bottom/max(100%,1500px) auto no-repeat}
html[data-theme="dark"] main.land{background:linear-gradient(rgba(8,12,28,.5),rgba(8,12,28,.5)),#98d6ee url("../hero/kms-picnic-1920.webp") center bottom/max(100%,1500px) auto no-repeat}
.ld-sitefoot{background:#f290ba!important;color:#5b2340}
html[data-theme="dark"] .ld-sitefoot{background:#7a485e!important;color:#f6dce8}
html[data-theme="dark"] .ld-sitefoot .ld-sf-name,html[data-theme="dark"] .ld-sitefoot nav a{color:#fff}
body[data-page="landing"],html:has(body[data-page="landing"]){background:#f290ba}
html[data-theme="dark"] body[data-page="landing"],html[data-theme="dark"]:has(body[data-page="landing"]){background:#7a485e}
/* 10-24 owner: "move one [server status widget] out to the grid" + backups - one right column over both rows: the live main
   server card (Southeast Asia) and the two standby servers */
.ld-srvcol{grid-column:span 9;grid-row:span 2;display:flex;flex-direction:column;gap:22px;min-width:0}
.ld-srvmain{flex:1;gap:12px;padding:22px 22px 20px;color:#fff;background:linear-gradient(160deg,#22c55e,#15803d 60%,#14532d)}
.ld-sm-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ld-sm-k{font:800 1.4rem/1 var(--display,"Maplestory",sans-serif);text-shadow:0 2px 10px rgba(0,0,0,.25)}
.ld-sm-state{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.2);font:700 .76rem/1 var(--body,sans-serif)}
.ld-sm-state i{width:8px;height:8px;border-radius:50%;background:#d1d5db}
.ld-sm-state.up i{background:#bbf7d0;box-shadow:0 0 0 3px rgba(187,247,208,.35)}
.ld-sm-state.down i{background:#fca5a5}
.ld-sm-loc{display:flex;align-items:center;gap:8px;font:700 .95rem/1.2 var(--body,sans-serif)}
.ld-sm-loc img{width:28px;height:auto;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.ld-sm-num{margin-top:auto;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px}
.ld-sm-num b{font:800 2.6rem/1 var(--display,"Maplestory",sans-serif)}
.ld-sm-num span{font:800 1.1rem/1 var(--display,"Maplestory",sans-serif)}
.ld-sm-num small{flex-basis:100%;font:600 .8rem/1.2 var(--body,sans-serif);opacity:.8}
.ld-sm-ch{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;align-items:end;height:34px}
.ld-sm-ch i{display:block;height:var(--h,8%);min-height:4px;border-radius:2px;background:rgba(255,255,255,.28)}
.ld-sm-ch i.on{background:#fff}
.ld-sm-foot{display:flex;justify-content:space-between;gap:8px;font:600 .78rem/1.2 var(--body,sans-serif);opacity:.85}
.ld-srvb{flex-direction:row;align-items:center;gap:12px;padding:16px 18px;color:#fff;min-height:0}
.ld-srvb img{width:40px;height:auto;border-radius:6px;box-shadow:0 4px 10px -4px rgba(0,0,0,.5)}
.ld-srvb span{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.ld-srvb b{font:800 1.1rem/1.1 var(--display,"Maplestory",sans-serif)}
.ld-srvb small{font:600 .74rem/1 var(--body,sans-serif);opacity:.85}
.ld-srvb em{flex:none;font-style:normal;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.2);font:700 .72rem/1 var(--body,sans-serif)}
.ld-srvb em::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#fde047;vertical-align:0}
@media (max-width:1060px){
  .ld-srvcol{grid-column:1/-1;grid-row:auto;display:grid;grid-template-columns:2fr 1fr 1fr}
  .ld-srvmain{min-height:220px}
  .ld-srvb{flex-direction:column;align-items:flex-start;justify-content:flex-end}
}
@media (max-width:720px){.ld-srvcol{grid-template-columns:1fr}.ld-srvb{flex-direction:row;align-items:center}}

/* 10-24 owner: "design this nicer for backup domains" - chips under the address */
.ld-addr-list{gap:10px;padding:16px 18px 18px}
.ld-bk{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%}
.ld-bk-h{font:800 .64rem/1 var(--body,system-ui,sans-serif);letter-spacing:.12em;text-transform:uppercase;color:var(--l-muted)}
.ld-bk-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.ld-chip{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:var(--l-tile-2);box-shadow:inset 0 0 0 1px var(--l-line);
  font:700 .74rem/1 var(--body,system-ui,sans-serif);letter-spacing:0;text-transform:none;color:var(--l-ink);overflow:hidden}
.ld-chip-more{color:var(--l-muted);background:none}
.ld-chip .ld-bk-blur{filter:blur(3.5px)}

/* 10-24 owner: "a solid good legal disclaimer on the bottom" */
.ld-legal{max-width:760px;margin:4px auto 0;font:600 .76rem/1.55 var(--body,sans-serif);opacity:.9}
.ld-legal a{color:inherit;text-decoration:underline}
/* the server column wider so names stay on one line */
@media (min-width:1061px){.ld-grid{width:min(1520px,100%);grid-template-columns:repeat(52,minmax(0,1fr))}.ld-srvcol{grid-column:span 12}}
.ld-sm-k,.ld-srvb b{white-space:nowrap}
/* 10-24 owner: "backup servers can def fit in 1 grid card" */
.ld-srvbk{gap:10px;padding:18px 20px;color:#fff;background:linear-gradient(155deg,#3b82f6,#1d4ed8 55%,#1e3a8a)}
.ld-sbk-k{font:800 1.2rem/1 var(--display,"Maplestory",sans-serif);white-space:nowrap}
.ld-srvbk ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ld-srvbk li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.14)}
.ld-srvbk li img{width:34px;height:auto;border-radius:5px;box-shadow:0 3px 8px -3px rgba(0,0,0,.5)}
.ld-srvbk li b{flex:1;min-width:0;font:800 1rem/1.1 var(--display,"Maplestory",sans-serif);white-space:nowrap}
.ld-srvbk li em{flex:none;font-style:normal;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.2);font:700 .7rem/1 var(--body,sans-serif)}
.ld-srvbk li em::before{content:"";display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#fde047;vertical-align:0}
.ld-srvbk small{font:600 .74rem/1.3 var(--body,sans-serif);opacity:.85}
@media (max-width:1060px){.ld-srvcol{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.ld-srvcol{grid-template-columns:1fr}}

/* 10-24 owner: "why so much space ... add the stress test stuff, megaphone or events, a slot for the latest player" */
.ld-sm-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:4px}
.ld-sm-stats div{display:flex;flex-direction:column;gap:4px;padding:10px 10px 9px;border-radius:14px;background:rgba(255,255,255,.14);min-width:0}
.ld-sm-stats b{font:800 1.45rem/1 var(--display,"Maplestory",sans-serif);white-space:nowrap}
.ld-sm-stats small{font:600 .68rem/1.15 var(--body,sans-serif);opacity:.85}
.ld-sm-ch{height:26px}
.ld-sm-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ld-sm-rows li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:rgba(0,0,0,.14);min-width:0}
.ld-sm-rows img{width:26px;height:26px;flex:none;object-fit:contain;image-rendering:pixelated}
.ld-sm-rows span{display:flex;flex-direction:column;gap:2px;min-width:0}
.ld-sm-rows small{font:700 .64rem/1 var(--body,sans-serif);letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.ld-sm-rows b{font:700 .82rem/1.25 var(--body,sans-serif);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#smMegaRow b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ld-sm-foot{margin-top:auto}

/* 10-24 owner: new wallpaper (the classic airship + monster parade); the sky colour fills above it, the footer continues
   its white ground */
main.land{background:url("../hero/maple-airship-1920.webp") center bottom/max(100%,1500px) auto no-repeat,linear-gradient(90deg,#0342a9,#1e6fca 50%,#278df2)}
html[data-theme="dark"] main.land{background:linear-gradient(rgba(8,12,28,.45),rgba(8,12,28,.45)),url("../hero/maple-airship-1920.webp") center bottom/max(100%,1500px) auto no-repeat,linear-gradient(90deg,#0342a9,#1e6fca 50%,#278df2)}
body[data-page="landing"],html:has(body[data-page="landing"]){background:#f3fbfe}
html[data-theme="dark"] body[data-page="landing"],html[data-theme="dark"]:has(body[data-page="landing"]){background:#1b2a3a}
.ld-sitefoot{background:#f3fbfe!important;color:#334155}
.ld-sitefoot .ld-sf-name{color:#0f172a}
.ld-sitefoot nav a{color:#334155}
html[data-theme="dark"] .ld-sitefoot{background:#1b2a3a!important;color:#cbd5e1}

/* 10-24 owner: plain sky wallpaper for the front page (no airship): it fills the page, white clouds into the footer */
main.land{padding-bottom:56px;background:#f3fbfe url("../hero/sky-1792.webp") center top/cover no-repeat}
html[data-theme="dark"] main.land{background:linear-gradient(rgba(8,12,28,.5),rgba(8,12,28,.5)),#f3fbfe url("../hero/sky-1792.webp") center top/cover no-repeat}
@media (max-width:720px){main.land{padding-bottom:32px}}
/* 10-24 owner: "center all these cards on the middle of the screen" - the card grid sits in the middle of the first screen */
main.land{min-height:100vh;min-height:100svh;align-content:center;justify-content:center;padding-top:32px;padding-bottom:32px}

/* 10-24 owner: the How to join card shows what the starter kit includes */
.ld-kit{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:10px;padding:8px 12px;border-radius:14px;background:rgba(255,255,255,.9);color:#1f2937;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.ld-kit-h{font:800 .72rem/1 var(--body,sans-serif);letter-spacing:.06em;text-transform:uppercase;color:#c2410c}
.ld-kit-items{display:flex;flex-wrap:wrap;gap:6px 14px}
.ld-kit-items span{display:inline-flex;align-items:center;gap:5px;font:700 .82rem/1.2 var(--body,sans-serif);white-space:nowrap}
.ld-kit-items img{width:22px;height:22px;object-fit:contain;image-rendering:pixelated}
/* 10-24 owner: "fade these too" - quieter footer */
.ld-sitefoot{color:rgba(51,65,85,.55)!important}
.ld-sitefoot .ld-sf-name{color:rgba(15,23,42,.5)!important}
.ld-sitefoot nav a,.ld-sitefoot .ld-legal a{color:rgba(51,65,85,.6)!important}
.ld-sitefoot nav a:hover,.ld-sitefoot .ld-legal a:hover{color:#0f172a!important}
html[data-theme="dark"] .ld-sitefoot{color:rgba(203,213,225,.5)!important}
html[data-theme="dark"] .ld-sitefoot .ld-sf-name,html[data-theme="dark"] .ld-sitefoot nav a,html[data-theme="dark"] .ld-sitefoot .ld-legal a{color:rgba(226,232,240,.55)!important}

/* 10-24 owner: "make it cleaner" - starter kit as one quiet row of four equal cells */
.ld-kit{display:block;margin-top:10px;padding:8px 6px 6px;border-radius:14px;background:rgba(255,255,255,.94);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.ld-kit-h{display:block;text-align:center;font:700 .62rem/1 var(--body,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:#64748b;margin-bottom:6px}
.ld-kit-items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.ld-kit-items li{display:flex;flex-direction:column;align-items:center;gap:3px;padding:2px 4px;min-width:0}
.ld-kit-items li+li{border-left:1px solid #e2e8f0}
.ld-kit-items img{width:28px;height:28px;object-fit:contain;image-rendering:pixelated}
.ld-kit-items b{font:700 .74rem/1.15 var(--body,sans-serif);color:#1f2937;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* 10-24 owner: "just say backup domains standby like the backup servers" - no domain chips */
.ld-bk-simple{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px}
.ld-bk-simple .ld-bk-h{margin:0}
.ld-bk-simple em{font-style:normal;padding:4px 10px;border-radius:999px;background:#eef2f7;color:#334155;font:700 .72rem/1 var(--body,sans-serif)}
.ld-bk-simple em::before{content:"";display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#eab308;vertical-align:0}
html[data-theme="dark"] .ld-bk-simple em{background:rgba(255,255,255,.12);color:#e2e8f0}

/* 10-24 owner: "3 backup domains on standby in Iceland and West Africa" */
.ld-bk-loc{display:flex;justify-content:center;gap:14px;margin-top:6px;font:700 .78rem/1 var(--body,sans-serif);color:#475569}
.ld-bk-loc span{display:inline-flex;align-items:center;gap:6px}
.ld-bk-loc img{width:20px;height:14px;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.ld-bk-loc svg{color:#0e7490}
html[data-theme="dark"] .ld-bk-loc{color:#cbd5e1}

/* 10-24 owner: "put the slots here ... indicating we can hold 10k" */
.ld-sm-cap{margin-top:auto;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.14)}
.ld-sm-cap-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ld-sm-cap-top span{font:700 .64rem/1 var(--body,sans-serif);letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.ld-sm-cap-top b{font:800 1.2rem/1 var(--display,"Maplestory",sans-serif)}
.ld-sm-cap-bar{height:8px;margin:8px 0 7px;border-radius:99px;background:rgba(0,0,0,.2);overflow:hidden}
.ld-sm-cap-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#bbf7d0,#fde047)}
.ld-sm-cap small{display:block;font:600 .72rem/1.3 var(--body,sans-serif);opacity:.9}
.ld-sm-cap+.ld-sm-foot{margin-top:10px}
.ld-bk-simple{flex-direction:row!important;flex-wrap:nowrap}

/* 10-24 owner: "put their ms there" - the visitor's ping instead of the channel bars */
.ld-sm-ping{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:14px;background:rgba(0,0,0,.14)}
.ld-sm-ping span{display:inline-flex;align-items:center;gap:8px;font:700 .72rem/1 var(--body,sans-serif);letter-spacing:.04em;text-transform:uppercase;opacity:.85}
.ld-sm-ping i{width:9px;height:9px;border-radius:50%;background:#e2e8f0;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.ld-sm-ping[data-q="good"] i{background:#86efac}.ld-sm-ping[data-q="ok"] i{background:#fde047}.ld-sm-ping[data-q="slow"] i{background:#fca5a5}
.ld-sm-ping b{font:800 1.15rem/1 var(--display,"Maplestory",sans-serif)}

/* 10-24 owner: uptime stats + the day-bar chart */
.ld-sm-up{padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.14)}
.ld-sm-up[hidden]{display:none}
.ld-sm-up-top{display:flex;align-items:baseline;justify-content:space-between}
.ld-sm-up-top span{font:700 .64rem/1 var(--body,sans-serif);letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.ld-sm-up-top b{font:800 1.2rem/1 var(--display,"Maplestory",sans-serif)}
.ld-sm-up-days{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:2px;height:22px;margin:8px 0 6px}
.ld-sm-up-days i{display:block;border-radius:2px;background:rgba(255,255,255,.18)}
.ld-sm-up-days i.ok{background:#86efac}
.ld-sm-up-days i.warn{background:#fde047}
.ld-sm-up-days i:hover{transform:scaleY(1.15)}
.ld-sm-up small{display:block;font:600 .7rem/1.2 var(--body,sans-serif);opacity:.8}
.ld-sm-up+.ld-sm-cap{margin-top:8px}
.ld-sm-cap{margin-top:0}

/* 10-24 owner: "clean it up, it's wordy" - one line per row, fewer captions */
.ld-sm-loc svg{flex:none;opacity:.9}
#smMegaRow b{display:block;white-space:nowrap;-webkit-line-clamp:unset}
.ld-sm-up-days{margin-bottom:0}
.ld-sm-cap-bar{margin-bottom:0}
.ld-sm-foot{justify-content:center;opacity:.75}

/* 10-24 owner: "a cool arrow pointing to the download button" - hand-drawn white arrow, desktop only */
.ld-play>.ld-arrow{display:none}
@media (min-width:1300px){
  .ld-play>.ld-arrow{display:block;position:absolute;z-index:1;left:300px;bottom:80px;width:190px;height:140px;fill:none;stroke:#fff;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 3px 4px rgba(150,50,0,.35));pointer-events:none;animation:ldArrowNudge 1.8s ease-in-out infinite}
  .ld-arrow-line{stroke-dasharray:240;stroke-dashoffset:240;animation:ldArrowDraw 1s .4s ease-out forwards}
}
@keyframes ldArrowDraw{to{stroke-dashoffset:0}}
@keyframes ldArrowNudge{0%,100%{transform:translate(0,0)}50%{transform:translate(-6px,4px)}}
@media (prefers-reduced-motion:reduce){.ld-play>.ld-arrow{animation:none}.ld-arrow-line{animation:none;stroke-dashoffset:0}}

/* 10-24 owner: outage reasons on the uptime bars (assets/data/uptime-notes.json) with a hover bubble */
.ld-sm-up{position:relative}
.ld-sm-up-days i{cursor:default;transition:transform .12s}
.ld-sm-up-days i.note{background:#93c5fd}
.ld-sm-up-days i.on{transform:scaleY(1.2);outline:2px solid #fff;outline-offset:1px}
.ld-sm-tip{position:absolute;z-index:3;max-width:220px;padding:6px 10px;border-radius:10px;background:#0f172a;color:#fff;font:700 .74rem/1.25 var(--body,sans-serif);white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.35);pointer-events:none}
.ld-sm-tip[hidden]{display:none}
/* 10-24 owner: "make the arrow black" */
.ld-play>.ld-arrow{stroke:#111!important;filter:drop-shadow(0 2px 3px rgba(255,255,255,.25))!important}

/* 10-24 owner: the speech-bubble cursor on links said nothing - the game's own hand cursor, and real tips (data-tip) */
:is(a[href],button,[role=tab],label,.clickable):not(:disabled){cursor:url("../ui/cursor/hover.png") 0 5,pointer;cursor:-webkit-image-set(url("../ui/cursor/hover.png") 1x,url("../ui/cursor/hover-2x.png") 2x) 0 5,pointer}
:is(a[href],button,[role=tab],label,.clickable):not(:disabled):active{cursor:url("../ui/cursor/press.png") 4 1,pointer}
.ms-tip{position:fixed;left:0;top:0;z-index:9999;max-width:260px;padding:6px 10px 7px;border:1px solid rgba(255,255,255,.55);border-radius:4px;background:rgba(17,24,39,.92);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 6px 16px rgba(0,0,0,.35);color:#fff;font:600 .78rem/1.35 var(--body,sans-serif);pointer-events:none}
.ms-tip[hidden]{display:none}
/* 10-24 owner: "remove Southeast Asia and ping for now" */
.ld-srvmain .ld-sm-loc,.ld-srvmain .ld-sm-ping{display:none!important}

/* 10-24 owner: bring back the channel chart (players per channel) */
.ld-sm-chs{padding:10px 12px 8px;border-radius:14px;background:rgba(0,0,0,.14)}
.ld-sm-chs-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.ld-sm-chs-top span{font:700 .64rem/1 var(--body,sans-serif);letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.ld-sm-chs-top b{font:700 .72rem/1 var(--body,sans-serif)}
.ld-srvmain .ld-sm-chs .ld-sm-ch{height:34px}
.ld-sm-chs .ld-sm-ch i{background:rgba(255,255,255,.22)}
.ld-sm-chs .ld-sm-ch i.on{background:#fde047}
.ld-sm-chs-axis{display:flex;justify-content:space-between;margin-top:5px;font:600 .62rem/1 var(--body,sans-serif);opacity:.7}

/* 10-24 owner: no arrow; the download button in the classic MapleStory website "GAME DOWNLOAD" style */
.ld-play>.ld-arrow{display:none!important}
.ld-dl.ld-dl-classic{position:relative;display:inline-flex;align-items:center;gap:18px;padding:12px 14px 12px 20px;min-width:270px;border-radius:8px;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 6px,transparent 6px 12px),linear-gradient(#ffb43a,#ff8c12 48%,#f57200 52%,#ff8a1a);
  border:2px solid #c25200;box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(150,50,0,.35),0 4px 0 #9a3f00,0 10px 22px -8px rgba(80,25,0,.6);color:#fff;text-shadow:0 1px 0 #b34700,0 2px 2px rgba(0,0,0,.25)}
.ld-dl-classic .ld-dl-t{display:flex;flex-direction:column;gap:3px;text-align:left}
.ld-dl-classic .ld-dl-t b{font:900 1.35rem/.98 "Arial Black",Arial,var(--display,sans-serif);letter-spacing:-.01em;text-transform:uppercase}
.ld-dl-classic .ld-dl-t small{font:700 .78rem/1 var(--body,sans-serif);color:#fff5e0;letter-spacing:.02em}
.ld-dl-classic .ld-dl-ic{margin-left:auto;flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#ff9c7a,#f04e23 60%,#c8361a);border:3px solid #fff;box-shadow:0 2px 0 rgba(150,50,0,.45),inset 0 -3px 4px rgba(120,20,0,.35)}
.ld-dl-classic .ld-dl-ic svg{width:24px;height:24px;color:#fff;filter:drop-shadow(0 1px 0 rgba(120,20,0,.6))}
.ld-dl.ld-dl-classic:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(150,50,0,.35),0 5px 0 #9a3f00,0 14px 26px -8px rgba(80,25,0,.65)}
.ld-dl.ld-dl-classic:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(150,50,0,.35),0 1px 0 #9a3f00}
/* the button sits on an orange card: a cream frame so it stands out like the classic sidebar buttons */
.ld-dl.ld-dl-classic{outline:4px solid #fff6e2;outline-offset:0;border-color:#a84300}
/* 10-24 owner: "they didn't really have a stroke" - no frame or outline, just the glossy plate like the classic site buttons */
.ld-dl.ld-dl-classic{outline:0;border:0;padding:14px 16px 14px 22px;border-radius:7px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 16px -6px rgba(90,30,0,.55);text-shadow:0 1px 1px rgba(150,55,0,.55)}
.ld-dl.ld-dl-classic:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 9px 20px -6px rgba(90,30,0,.6)}
.ld-dl.ld-dl-classic:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 8px -4px rgba(90,30,0,.5)}
.ld-dl-classic .ld-dl-ic{box-shadow:none}
/* 10-24 owner: "copy the artwork exactly" - the classic sidebar button: flat-gloss orange plate, two-line condensed caps, no subtitle, ringed icon */
.ld-dl.ld-dl-classic{gap:14px;min-width:0;width:262px;height:78px;padding:0 14px 0 20px;border-radius:5px;
  background:repeating-linear-gradient(120deg,rgba(255,255,255,0) 0 18px,rgba(255,255,255,.08) 18px 30px),linear-gradient(#ffa823,#ff8a00 50%,#ff7b00);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 2px 4px rgba(120,45,0,.35)}
.ld-dl-classic .ld-dl-t b{font:700 1.75rem/.9 "Arial Narrow","Helvetica Neue",Arial,sans-serif;font-stretch:condensed;letter-spacing:0;text-shadow:0 1px 1px rgba(160,60,0,.6)}
.ld-dl-classic .ld-dl-t small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ld-dl-classic .ld-dl-ic{width:44px;height:44px;border:3px solid #fff;background:linear-gradient(#ff8a4c,#f0531c);box-shadow:0 1px 2px rgba(120,40,0,.4)}
.ld-dl-classic .ld-dl-ic svg{width:22px;height:22px}
/* 10-24 owner: "with our own font twist inside of it" - the site's Maplestory display face on the classic plate */
.ld-dl-classic .ld-dl-t b{font:700 1.6rem/.95 var(--display,"Maplestory",sans-serif);font-stretch:normal;letter-spacing:.01em}
/* 10-24 owner: slimmer server column on the right; Store and How to join take the width */
@media (min-width:1061px){.ld-srvcol{grid-column:span 10}.ld-store{grid-column:span 11}.ld-join{grid-column:span 22}}
/* laptops (1061-1439 px): the server column needs its old width, or its numbers and badges wrap */
@media (min-width:1061px) and (max-width:1439px){.ld-srvcol{grid-column:span 12}.ld-store{grid-column:span 9}.ld-join{grid-column:span 20}}
/* 10-24 owner: "try the blue variation of their button" (the classic CHARGE NEXON CASH plate: blue with a green ringed icon) */
.ld-dl.ld-dl-classic{background:repeating-linear-gradient(120deg,rgba(255,255,255,0) 0 18px,rgba(255,255,255,.08) 18px 30px),linear-gradient(#3fb4ff,#1a8ff0 50%,#0f7ee0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 3px 8px rgba(10,50,120,.45)}
.ld-dl-classic .ld-dl-t b{text-shadow:0 1px 1px rgba(0,60,140,.6)}
.ld-dl-classic .ld-dl-ic{background:linear-gradient(#7fdc3a,#3fae1c);box-shadow:0 1px 2px rgba(10,50,100,.4)}
.ld-dl-classic .ld-dl-ic svg{filter:drop-shadow(0 1px 0 rgba(20,80,0,.6))}
.ld-dl.ld-dl-classic:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 14px rgba(10,50,120,.5)}
/* 10-24 owner: "responsive bad" - the server cards and the join card adapt to their own width instead of overlapping */
.ld-srvcol,.ld-join{container-type:inline-size}
.ld-srvbk li b{overflow:hidden;text-overflow:ellipsis}
.ld-sm-state{flex:none}
.ld-sm-stats b{font-size:clamp(1rem,8cqi,1.45rem)}
@container (max-width:300px){
  .ld-srvmain,.ld-srvbk{padding-left:14px;padding-right:14px}
  .ld-sm-top{gap:6px}
  .ld-sm-k{font-size:1.15rem}
  .ld-sm-stats{gap:5px}
  .ld-sm-stats div{padding:8px 7px}
  .ld-sm-stats small{font-size:.6rem}
  .ld-sm-rows li{padding:7px 8px;gap:8px}
  .ld-sm-rows img{width:22px;height:22px}
  .ld-sm-cap-top b,.ld-sm-up-top b{font-size:1rem}
  .ld-srvbk li{padding:7px 8px;gap:8px}
  .ld-srvbk li img{width:28px}
  .ld-srvbk li b{font-size:.9rem}
  .ld-srvbk li em{font-size:0;padding:4px 5px}
  .ld-srvbk li em::before{margin:0}
}
@container (max-width:250px){
  .ld-sm-state{font-size:0;padding:5px}
  .ld-sm-state i{margin:0}
  .ld-sm-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ld-sm-stats div:last-child{grid-column:1/-1}
}
@container (max-width:560px){
  .ld-kit-items li b{white-space:normal;font-size:.68rem}
  .ld-steps b{font-size:.9rem}
}
/* 10-24 owner: hide the backup domain locations for now */
.ld-bk-loc{display:none!important}

/* 10-24 owner: back to the orange GAME DOWNLOAD plate */
.ld-dl.ld-dl-classic{background:repeating-linear-gradient(120deg,rgba(255,255,255,0) 0 18px,rgba(255,255,255,.08) 18px 30px),linear-gradient(#ffa823,#ff8a00 50%,#ff7b00);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 2px 4px rgba(120,45,0,.35)}
.ld-dl-classic .ld-dl-t b{text-shadow:0 1px 1px rgba(160,60,0,.6)}
.ld-dl-classic .ld-dl-ic{background:linear-gradient(#ff8a4c,#f0531c);box-shadow:0 1px 2px rgba(120,40,0,.4)}
.ld-dl-classic .ld-dl-ic svg{filter:drop-shadow(0 1px 0 rgba(120,20,0,.6))}
.ld-dl.ld-dl-classic:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 14px rgba(120,45,0,.45)}
/* 10-24 owner: outage days (migration) were offline - red */
.ld-sm-up-days i.note{background:#f87171}
/* domain card: keep "3 backup domains" on one line, the badge under it when narrow */
.ld-bk-simple{flex-wrap:wrap!important;row-gap:6px}
.ld-bk-simple .ld-bk-h{white-space:nowrap}
/* 10-24 owner: a small latest-news strip in the Stats card */
.ld-rank-box{position:relative;padding:0}
.ld-rank-box>.ld-cover{position:absolute;inset:0;display:flex;flex-direction:column;padding:22px 24px;border-radius:inherit;color:inherit;text-decoration:none}
.ld-news{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:12px;background:rgba(15,23,42,.78);color:#fff;text-decoration:none;box-shadow:0 6px 16px rgba(0,0,0,.3);backdrop-filter:blur(4px)}
.ld-news[hidden]{display:none}
.ld-news small{flex:none;padding:3px 7px;border-radius:6px;background:#ff8a00;font:800 .62rem/1 var(--body,sans-serif);letter-spacing:.06em;text-transform:uppercase}
.ld-news b{flex:1;min-width:0;font:700 .84rem/1.2 var(--body,sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ld-news i{font-style:normal;font-size:1.3rem;line-height:1;opacity:.8}
.ld-news:hover{background:rgba(15,23,42,.9)}
/* 10-24 owner: "round the game download button like our buttons" - the site's 16 px button radius */
.ld-dl.ld-dl-classic{border-radius:16px}
/* keep "Standby" written out unless the column is really narrow */
@container (min-width:271px){.ld-srvbk li em{font-size:.7rem;padding:4px 9px}.ld-srvbk li em::before{margin-right:5px}}
/* 10-24 owner: "What comes in your starter kit", nicer, no card around it - floats on the art */
.ld-kit{margin-top:14px;padding:0;background:none;box-shadow:none;border-radius:0}
.ld-kit-h{margin:0 0 10px;text-align:left;font:800 1.02rem/1.1 var(--display,"Maplestory",sans-serif);letter-spacing:0;text-transform:none;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35),0 2px 10px rgba(0,0,0,.55)}
.ld-kit-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ld-kit-items li{gap:6px;padding:0}
.ld-kit-items li+li{border-left:0}
.ld-kit-items img{box-sizing:content-box;width:30px;height:30px;padding:9px;border-radius:50%;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.95),rgba(255,236,200,.85) 70%);box-shadow:0 0 0 2px rgba(255,255,255,.55),0 6px 14px rgba(0,0,0,.45)}
.ld-kit-items b{color:#fff;font:800 .8rem/1.15 var(--body,sans-serif);text-shadow:0 1px 0 rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.7)}
/* 10-24 owner: kit icons transparent (no plate behind them) */
.ld-kit-items img{width:36px;height:36px;padding:0;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
/* 10-24 owner: "white stroke around it, hard to see" - the download plate gets a white edge on the orange card */
.ld-dl.ld-dl-classic{box-shadow:0 0 0 3px #fff,inset 0 1px 0 rgba(255,255,255,.45),0 6px 16px rgba(120,45,0,.45)}
.ld-dl.ld-dl-classic:hover{box-shadow:0 0 0 3px #fff,inset 0 1px 0 rgba(255,255,255,.5),0 9px 20px rgba(120,45,0,.5)}
.ld-dl.ld-dl-classic:active{box-shadow:0 0 0 3px #fff,inset 0 1px 0 rgba(255,255,255,.35),0 3px 8px rgba(120,45,0,.45)}
/* 10-24 owner: slightly bigger MapleFresh logo */
.ld-logo-tile{padding:10px}
.ld-logo-tile img{width:min(100%,380px)}

/* 10-24 owner: maplexd.com alone, centred in its pill */
.ld-addr-solo{justify-content:center;align-items:center;text-align:center}
.ld-addr-solo b{display:block;width:100%;text-align:center}
/* 10-24 owner: the logo was sitting too far left in its tile */
.ld-logo-tile{display:flex;align-items:center;justify-content:center}
.ld-logo-tile img{width:min(90%,360px);transform:translateX(5%)}
/* 10-24 owner: the rates inline on the right of GAME DOWNLOAD, one green pill with a mushroom on top (MapleLegends-style) */
.ld-play .ld-foot{flex-wrap:wrap;align-items:center;column-gap:22px}
.ld-play .ld-alt{flex-basis:100%}
.ld-rates{position:relative;display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:9px 16px 10px;border-radius:14px;
  background:linear-gradient(#7ad04a,#4fae2c);color:#fff;white-space:nowrap;
  box-shadow:0 0 0 3px #fff,inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(0,0,0,.12),0 8px 18px -6px rgba(40,90,10,.6);
  font:800 1.02rem/1 var(--display,"Maplestory",sans-serif);text-shadow:0 1px 0 rgba(30,80,10,.55)}
.ld-rates span{display:inline-flex;align-items:baseline;gap:4px;padding:0;min-width:0;border-radius:0;background:none;box-shadow:none;flex-direction:row}
.ld-rates b{margin:0;font:inherit;font-size:1.18rem;color:#fffbe0;text-shadow:0 1px 0 rgba(30,80,10,.55)}
.ld-rates-pet{position:absolute;right:8px;bottom:calc(100% - 6px);width:auto;height:auto;max-height:52px;image-rendering:pixelated;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
/* 10-24 owner: capacity without a card behind it; the stress test lives here */
.ld-sm-cap{padding:0;background:none;border-radius:0}
.ld-sm-cap-note{margin-top:7px;font:600 .74rem/1.3 var(--body,sans-serif);opacity:.9}
.ld-sm-cap-note b{font-weight:800}
/* 10-24 owner: top 3 players (replaces the backup servers card) */
.ld-top3{display:flex;flex-direction:column;gap:6px;padding:16px 16px 14px;color:#fff;text-decoration:none;background:linear-gradient(155deg,#3b82f6,#1d4ed8 55%,#1e3a8a)}
.ld-t3-k{font:800 1.25rem/1.1 var(--display,"Maplestory",sans-serif)}
.ld-t3-pod{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:6px;min-height:150px}
.ld-t3{display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center}
.ld-t3-spr{display:flex;align-items:flex-end;justify-content:center;height:96px;width:100%}
.ld-t3-spr img{max-width:none;image-rendering:pixelated;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.ld-t3.r1 .ld-t3-spr{height:110px}
.ld-t3 i{display:grid;place-items:center;width:22px;height:22px;margin:4px 0 3px;border-radius:50%;font:800 .75rem/1 var(--body,sans-serif);font-style:normal;color:#fff;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.ld-t3.r1 i{background:linear-gradient(#fde047,#eab308);color:#713f12}
.ld-t3.r2 i{background:linear-gradient(#f1f5f9,#94a3b8);color:#334155}
.ld-t3.r3 i{background:linear-gradient(#fdba74,#c2410c)}
.ld-t3 b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 .86rem/1.15 var(--display,"Maplestory",sans-serif)}
.ld-t3 small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 .66rem/1.2 var(--body,sans-serif);opacity:.85}
.ld-top3:hover .ld-t3-k{text-decoration:underline}
/* 10-24 owner: starter kit icons were blending into the lava - each sits in an item slot */
.ld-kit-items img{box-sizing:content-box;width:34px;height:34px;padding:8px;border-radius:12px;background:rgba(15,23,42,.72);box-shadow:0 0 0 2px rgba(255,255,255,.9),0 6px 14px rgba(0,0,0,.5);filter:none}


/* button + rates pill side by side (wrap only when the card is too narrow) */
.ld-play{container-type:inline-size}
.ld-dlrow{display:flex;align-items:center;flex-wrap:wrap;gap:16px 20px;flex-basis:100%}
.ld-dlrow .ld-rates{margin-top:0}
/* owner 10-24: GAME DOWNLOAD stays full size; the pill tightens instead and wraps under it only when there's no room */
.ld-dlrow{column-gap:14px}
@container (max-width:600px){
  .ld-rates{gap:7px;padding:8px 12px 9px;font-size:.92rem}
  .ld-rates b{font-size:1.06rem}
  .ld-rates-pet{max-height:46px}
}
@container (max-width:470px){.ld-dlrow{gap:22px 16px}.ld-dlrow .ld-rates{margin-top:6px}}
/* 10-24 responsive fix: the 52-column grid spent 51 x 22 px on gaps alone and overflowed below ~1150 px wide.
   Same layout, five tracks: column edges where the cards meet (logo | stats overhang | play | store | servers) */
@media (min-width:1061px){
  .ld-grid{grid-template-columns:minmax(0,304fr) minmax(0,245fr) minmax(0,304fr) minmax(0,304fr) minmax(250px,275fr)!important;
    grid-template-areas:"logo play play store srv" "rank rank join join srv"}
  .ld-grid>.ld-logo{grid-area:logo!important}
  .ld-grid>.ld-play{grid-area:play!important}
  .ld-grid>.ld-store{grid-area:store!important}
  .ld-grid>.ld-srvcol{grid-area:srv!important}
  .ld-grid>.ld-rank{grid-area:rank!important}
  .ld-grid>.ld-join{grid-area:join!important}
}
/* the rates pill all the way to the right of the button row */
.ld-dlrow .ld-rates{margin-left:auto}
@container (max-width:470px){.ld-dlrow .ld-rates{margin-left:0}}
/* small-width polish */
.ld-alt{flex-wrap:wrap;row-gap:4px}
.ld-alt a{white-space:nowrap}
.ld-sm-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.ld-sm-stats div{padding-left:8px;padding-right:6px}
@container (max-width:300px){.ld-sm-stats b{font-size:1.15rem}.ld-sm-stats small{font-size:.6rem}}
/* the page wrapper's single column fills the screen, so the grid's width:min(1520px,100%) is measured against the screen
   (it was sized from the cards' content and collapsed to 260 px on phones) */
main.land{grid-template-columns:minmax(0,1fr)}
main.land>.ld-grid{justify-self:center}
@media (max-width:720px){
  .ld-grid{gap:14px}
  .ld-store{min-height:150px}
}
.ld-sm-stats div:last-child{grid-column:auto!important}
/* tablet (721-1060 px): no holes - logo | play, then the server card beside top players + store, then stats, then how to join */
@media (min-width:721px) and (max-width:1060px){
  .ld-grid{grid-template-columns:repeat(12,minmax(0,1fr))!important;
    grid-template-areas:"logo logo logo logo play play play play play play play play"
      "srv srv srv srv srv srv top top top top top top"
      "srv srv srv srv srv srv store store store store store store"
      "rank rank rank rank rank rank rank rank rank rank rank rank"
      "join join join join join join join join join join join join"}
  .ld-grid>.ld-srvcol{display:contents}
  .ld-grid>.ld-logo{grid-area:logo!important}
  .ld-grid>.ld-play{grid-area:play!important}
  .ld-srvcol>.ld-srvmain{grid-area:srv}
  .ld-srvcol>.ld-top3{grid-area:top}
  .ld-grid>.ld-store{grid-area:store!important;min-height:180px}
  .ld-grid>.ld-rank{grid-area:rank!important;min-height:220px}
  .ld-grid>.ld-join{grid-area:join!important}
}
/* mid-width cards (laptops): a tighter pill so it still sits inline beside the full-size button */
@container (max-width:500px){
  .ld-dlrow{column-gap:10px}
  .ld-rates{gap:5px;padding:7px 9px 8px;font-size:.78rem;border-radius:12px}
  .ld-rates b{font-size:.94rem}
  .ld-rates-pet{max-height:40px;right:6px}
}

/* 10-25 owner: the status card's event row cycles the recent events */
#smNewRow.ld-fd-in span{animation:ldFdIn .35s ease-out}
@keyframes ldFdIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#smNewRow.ld-fd-in span{animation:none}}

/* 10-25 owner: the top 3 stand on the game's own awarding podium, 2-1-3 with #1 tallest in the middle
   (Map.wz Obj/event.img/grassySoil/awarding 1+3; the carved "3" is cut from the "2" block in the same carving style;
   backdrop = event map 109070000); all art at 1x, pixel-crisp; the title stays in flow so nothing overlaps it */
.ld-top3{gap:0;padding:12px 12px 8px;background:#a9d9ef url("../ui/podium/bg.webp?v=1025") 50% calc(100% + 12px) no-repeat;isolation:isolate}
.ld-top3::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,20,40,.42),rgba(10,20,40,0) 46%);pointer-events:none}
.ld-top3 .ld-t3-k{position:relative;z-index:5;align-self:flex-start;font-size:1.15rem;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.ld-top3 .ld-t3-pod{width:100%;max-width:252px;min-height:0;margin:auto auto 0;gap:0;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end}
.ld-top3 .ld-t3{position:relative}
.ld-top3 .ld-t3.r2{order:1;z-index:2}.ld-top3 .ld-t3.r1{order:2;z-index:3}.ld-top3 .ld-t3.r3{order:3;z-index:1}
.ld-top3 .ld-t3-spr,.ld-top3 .ld-t3.r1 .ld-t3-spr{display:block;width:auto;height:auto;line-height:0}
.ld-top3 .ld-t3-spr img{display:block;max-width:none;margin-bottom:-2px;filter:none;image-rendering:pixelated}
.ld-top3 .ld-t3-ped{position:relative;display:block;line-height:0;margin-bottom:-4px}
.ld-top3 .ld-t3-ped img{display:block;max-width:none;image-rendering:pixelated}
.ld-top3 .ld-t3-tag{position:relative;z-index:4;display:flex;justify-content:center;max-width:100%;height:32px;box-sizing:border-box;padding-top:4px}
.ld-top3 .ld-t3-tag>span{display:flex;flex-direction:column;align-items:center;min-width:0;max-width:100%;box-sizing:border-box;padding:2px 4px 3px;border-radius:4px;background:rgba(0,0,0,.62)}
.ld-top3 .ld-t3 small{font-size:.62rem;line-height:11px;opacity:.9}
.ld-top3 .ld-t3.r1 .ld-t3-tag>span{box-shadow:inset 0 2px 0 #f5c542}
.ld-top3 .ld-t3.r2 .ld-t3-tag>span{box-shadow:inset 0 2px 0 #cfd6e0}
.ld-top3 .ld-t3.r3 .ld-t3-tag>span{box-shadow:inset 0 2px 0 #d98a4a}
/* 10-25 owner: the name is an in-game name tag right under the feet, on the pedestal top (v62 style) */
.ld-top3 .ld-t3-nm{position:absolute;top:2px;left:-6px;right:-6px;z-index:5;display:flex;justify-content:center;pointer-events:none}
.ld-top3 .ld-t3-nm>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:1px 3px;border-radius:3px;background:rgba(0,0,0,.7);
  font:400 12px/12px Arial,"Dotum",Helvetica,sans-serif;letter-spacing:0;color:#fff;text-shadow:none}
.ld-top3 .ld-t3.r1 .ld-t3-nm>span{color:#ffd94a}
.ld-top3 .ld-t3.r2 .ld-t3-nm>span{color:#e3e9f0}
.ld-top3 .ld-t3.r3 .ld-t3-nm>span{color:#f3ac6c}

/* 10-25 owner: "Invite a friend, get 5,000 NX" - its own tile right under Store (desktop: Stats | How to join | Invite) */
.ld-invite{gap:10px;padding:22px 22px 18px;color:#fff;background:linear-gradient(155deg,#ff6fa8,#e6427f 52%,#b8296c);
  box-shadow:0 24px 50px -30px rgba(184,41,108,.85);container-type:inline-size}
.ld-invite::before{content:"";position:absolute;right:-40px;top:-46px;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.24),rgba(255,255,255,0) 70%);pointer-events:none}
.ld-invite>*{position:relative}
.ld-inv-top{display:flex;align-items:center;justify-content:space-between;gap:8px 10px;flex-wrap:wrap}
.ld-invite .ld-k{font-size:1.5rem;text-shadow:0 2px 10px rgba(90,0,40,.3)}
.ld-inv-nx{display:inline-flex;align-items:center;gap:4px;padding:4px 11px 4px 6px;border-radius:999px;background:#fff;color:#b8296c;
  font:800 .92rem/1 var(--display,"Maplestory",sans-serif);white-space:nowrap;box-shadow:0 6px 14px -6px rgba(90,0,40,.55)}
.ld-inv-nx img{width:22px;height:22px;image-rendering:pixelated}
.ld-inv-nx b{font-weight:800}
.ld-inv-lead{margin:0;font:600 .84rem/1.42 var(--body,sans-serif);color:rgba(255,255,255,.95)}
.ld-inv-lead b{font-weight:800;color:#fff}
.ld-inv-form{margin:2px 0 0}
.ld-inv-lbl{display:block;margin:0 0 6px;font:800 .68rem/1 var(--body,sans-serif);letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.ld-inv-row{display:flex;flex-wrap:wrap;gap:8px}
.ld-inv-row input{flex:1 1 130px;min-width:0;height:44px;box-sizing:border-box;margin:0;padding:0 14px;border:0;border-radius:14px;background:#fff;color:#121722;
  font:700 .95rem/1 var(--body,sans-serif);box-shadow:0 8px 18px -10px rgba(90,0,40,.7);outline:none;-webkit-appearance:none;appearance:none}
.ld-inv-row input::placeholder{color:#98a2b3;font-weight:600}
.ld-inv-row input:focus-visible{box-shadow:0 0 0 3px #ffd34d,0 8px 18px -10px rgba(90,0,40,.7)}
.ld-inv-row .ld-inv-btn{flex:none}
.ld-inv-form.guest .ld-inv-btn{flex:1 1 100%}
.ld-invite [hidden]{display:none!important}
.ld-inv-how{display:flex;flex-direction:column;gap:6px;margin:2px 0 0;padding:0;list-style:none}
.ld-inv-how li{display:flex;align-items:center;gap:9px;font:700 .8rem/1.3 var(--body,sans-serif)}
.ld-inv-how i{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:#b8296c;font:800 .74rem/1 var(--body,sans-serif);font-style:normal;
  box-shadow:0 3px 8px -3px rgba(90,0,40,.6)}
.ld-inv-how b{font-weight:800}
.ld-inv-btn{height:44px;margin:0;padding:0 16px;border:0;border-radius:14px;background:linear-gradient(#ffe36e,#ffc21a);color:#6b2d00;cursor:pointer;
  font:800 .95rem/1 var(--display,"Maplestory",sans-serif);white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(0,0,0,.12),0 8px 18px -8px rgba(90,0,40,.7);transition:transform .15s,filter .15s}
.ld-inv-btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.04)}
.ld-inv-btn:focus-visible,.ld-inv-no:focus-visible{outline:3px solid #fff;outline-offset:2px}
.ld-inv-btn:disabled{cursor:default;opacity:.7}
.ld-inv-form.off .ld-inv-row{opacity:.55}
.ld-inv-msg{margin:0;padding:8px 11px;border-radius:12px;background:rgba(60,0,30,.28);font:700 .8rem/1.38 var(--body,sans-serif);color:#fff}
.ld-inv-msg.ok{background:rgba(22,101,52,.55)}
.ld-inv-msg.err{background:rgba(80,0,20,.42)}
.ld-inv-ask{padding:11px 12px;border-radius:14px;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.ld-inv-ask p{margin:0;font:600 .84rem/1.4 var(--body,sans-serif)}
.ld-inv-ask b{font-weight:800}
.ld-inv-ans{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.ld-inv-ans .ld-inv-btn{height:38px;padding:0 14px;font-size:.88rem}
.ld-inv-no{height:38px;margin:0;padding:0 14px;border:0;border-radius:12px;background:rgba(60,0,30,.3);color:#fff;cursor:pointer;font:700 .84rem/1 var(--body,sans-serif)}
.ld-inv-no:hover:not(:disabled){background:rgba(60,0,30,.45)}
.ld-inv-list{display:flex;flex-direction:column;gap:5px;margin:0;padding:0;list-style:none}
.ld-inv-list li{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:2px 8px;min-width:0;padding:6px 10px;border-radius:10px;
  background:rgba(60,0,30,.22);font:600 .74rem/1.25 var(--body,sans-serif)}
.ld-inv-list b{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 .8rem/1.2 var(--display,"Maplestory",sans-serif)}
.ld-inv-list span{min-width:0;margin-left:auto;text-align:right;opacity:.95}
.ld-inv-list span.ok{color:#d9ffb0;font-weight:800}
.ld-inv-list span.no{opacity:.75}
.ld-inv-sum{margin:0;font:600 .76rem/1.35 var(--body,sans-serif);color:rgba(255,255,255,.95)}
.ld-inv-sum b{font-weight:800}
.ld-inv-rules{margin:auto 0 0;padding-top:4px;font:700 .7rem/1.4 var(--body,sans-serif);color:rgba(255,255,255,.82)}
@container (max-width:250px){.ld-inv-row{flex-direction:column}.ld-inv-btn{width:100%}}
@media (min-width:721px) and (max-width:1060px){
  .ld-invite{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:22px;align-content:start}
  .ld-inv-top,.ld-inv-lead,.ld-inv-ask,.ld-inv-how,.ld-inv-rules{grid-column:1}
  .ld-inv-form,.ld-inv-msg,.ld-inv-list,.ld-inv-sum{grid-column:2}
  .ld-inv-top{grid-row:1}.ld-inv-lead{grid-row:2}.ld-inv-ask,.ld-inv-how{grid-row:3}.ld-inv-rules{grid-row:4}
  .ld-inv-form{grid-row:1/span 2;align-self:end}.ld-inv-msg{grid-row:3}.ld-inv-list{grid-row:4}.ld-inv-sum{grid-row:5}
}
@media (min-width:1061px){
  .ld-grid{grid-template-areas:"logo play play store srv" "rank join join invite srv"!important}
  .ld-grid>.ld-invite{grid-area:invite!important}
}
@media (min-width:721px) and (max-width:1060px){
  .ld-grid{grid-template-areas:"logo logo logo logo play play play play play play play play"
      "srv srv srv srv srv srv top top top top top top"
      "srv srv srv srv srv srv store store store store store store"
      "invite invite invite invite invite invite invite invite invite invite invite invite"
      "rank rank rank rank rank rank rank rank rank rank rank rank"
      "join join join join join join join join join join join join"!important}
  .ld-grid>.ld-invite{grid-area:invite!important}
}
@media (max-width:720px){.ld-invite{grid-column:1/-1;padding:20px 18px 16px}}

/* 10-25 owner: the rates right under the description, and no big gap down to LAUNCHER DOWNLOAD */
.ld-play{justify-content:center}
.ld-play>.ld-rates-top{align-self:flex-start;margin:44px 0 0}
.ld-play .ld-foot{margin-top:0;padding-top:22px}

/* 10-25 owner: "Rankings", each player's tag in gold / silver / bronze */
.ld-top3 .ld-t3.r1 .ld-t3-tag>span{background:linear-gradient(#fde68a,#d4a017 55%,#a87708);box-shadow:inset 0 1px 0 #fff6c8,0 0 0 1px #6b4a05,0 2px 4px rgba(0,0,0,.35)}
.ld-top3 .ld-t3.r2 .ld-t3-tag>span{background:linear-gradient(#f8fafc,#b8c2cf 55%,#8a96a6);box-shadow:inset 0 1px 0 #fff,0 0 0 1px #4b5563,0 2px 4px rgba(0,0,0,.35)}
.ld-top3 .ld-t3.r3 .ld-t3-tag>span{background:linear-gradient(#f5c08a,#c4743a 55%,#94521f);box-shadow:inset 0 1px 0 #ffe0c2,0 0 0 1px #5a2e0e,0 2px 4px rgba(0,0,0,.35)}
.ld-top3 .ld-t3.r1 .ld-t3-tag b,.ld-top3 .ld-t3.r1 .ld-t3-tag small{color:#3d2a00;text-shadow:0 1px 0 rgba(255,240,180,.6)}
.ld-top3 .ld-t3.r2 .ld-t3-tag b,.ld-top3 .ld-t3.r2 .ld-t3-tag small{color:#1f2937;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.ld-top3 .ld-t3.r3 .ld-t3-tag b,.ld-top3 .ld-t3.r3 .ld-t3-tag small{color:#2e1404;text-shadow:0 1px 0 rgba(255,220,190,.5)}
.ld-top3 .ld-t3 .ld-t3-tag small{opacity:1}

/* 2026-10-27 owner: "the website is very laggy, it takes forever to load" - the tiles no longer blur what is behind them
   (backdrop-filter re-blurred every tile on every scroll frame; behind them is only the page's own sky, so the look is
   the same); the How to join art is a 960 px copy (68 KB, was 512 KB at 16% opacity) */
.ld-tile,.ld-news,.ld-store .ld-lines span{-webkit-backdrop-filter:none;backdrop-filter:none}
.ld-join::before{background-image:url("../shots/zakum-960.webp")}

/* 2026-10-27 owner: "for now hide the invite friends system" - the card is out, the grid is as before it came */
.ld-invite{display:none!important}
@media (min-width:1061px){
  .ld-grid{grid-template-areas:"logo play play store srv" "rank rank join join srv"!important}
}
@media (min-width:721px) and (max-width:1060px){
  .ld-grid{grid-template-areas:"logo logo logo logo play play play play play play play play"
      "srv srv srv srv srv srv top top top top top top"
      "srv srv srv srv srv srv store store store store store store"
      "rank rank rank rank rank rank rank rank rank rank rank rank"
      "join join join join join join join join join join join join"!important}
}

/* 2026-10-27 owner: the Beta card "coloring sucks, add a light background on it, from the game" - a light garden from
   the game (Map.wz, the pastel gazebo town also on the staff page) behind white game-window panels with dark text;
   channel bars in the game's blue, capacity as the EXP gauge's yellow */
.ld-srvmain{color:#1d3557;background:#d9f1fb url("../ui/beta-bg.webp?v=1027") center bottom/cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 14px 34px -26px var(--l-shadow)}
.ld-srvmain::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.15) 38%,rgba(255,255,255,0) 70%)}
.ld-srvmain>*{position:relative}
.ld-srvmain .ld-sm-k{color:#14335c;text-shadow:0 1px 0 #fff,0 0 12px rgba(255,255,255,.9)}
.ld-srvmain .ld-sm-state{background:#fff;color:#14335c;box-shadow:0 1px 0 rgba(20,51,92,.15),inset 0 0 0 1px rgba(20,51,92,.12)}
.ld-srvmain .ld-sm-state i{background:#9ca3af}
.ld-srvmain .ld-sm-state.up i{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.25)}
.ld-srvmain .ld-sm-state.down i{background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.22)}
.ld-srvmain .ld-sm-stats div,.ld-srvmain .ld-sm-chs,.ld-srvmain .ld-sm-rows li,.ld-srvmain .ld-sm-up,.ld-srvmain .ld-sm-cap{
  background:rgba(255,255,255,.86);box-shadow:inset 0 0 0 1px rgba(20,51,92,.1),0 2px 6px -3px rgba(20,51,92,.35)}
.ld-srvmain .ld-sm-cap{padding:10px 12px;border-radius:14px;margin-top:8px}
.ld-srvmain .ld-sm-stats b{color:#14335c}
.ld-srvmain .ld-sm-stats small,.ld-srvmain .ld-sm-chs-top span,.ld-srvmain .ld-sm-rows small,.ld-srvmain .ld-sm-up-top span,
.ld-srvmain .ld-sm-cap-top span,.ld-srvmain .ld-sm-chs-axis,.ld-srvmain .ld-sm-up small{color:#52708f;opacity:1}
.ld-srvmain .ld-sm-chs-top b,.ld-srvmain .ld-sm-rows b,.ld-srvmain .ld-sm-up-top b,.ld-srvmain .ld-sm-cap-top b{color:#14335c}
.ld-srvmain .ld-sm-ch{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.ld-srvmain .ld-sm-chs .ld-sm-ch i{background:rgba(20,51,92,.12)}
.ld-srvmain .ld-sm-chs .ld-sm-ch i.on{background:linear-gradient(#60a5fa,#2563eb)}
.ld-srvmain .ld-sm-up-days i{background:rgba(20,51,92,.12)}
.ld-srvmain .ld-sm-up-days i.ok{background:#34c76f}
.ld-srvmain .ld-sm-up-days i.warn{background:#f5b301}
.ld-srvmain .ld-sm-up-days i.note{background:#f87171}
.ld-srvmain .ld-sm-up-days i.on{outline-color:#14335c}
.ld-srvmain .ld-sm-cap-bar{background:rgba(20,51,92,.14)}
.ld-srvmain .ld-sm-cap-bar i{background:linear-gradient(90deg,#fde047,#f59e0b)}
.ld-srvmain .ld-sm-cap-note{color:#52708f;opacity:1}
.ld-srvmain .ld-sm-cap-note b{color:#14335c}
.ld-srvmain .ld-sm-foot{color:#14335c;opacity:1;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.86);align-self:center}

/* 2026-10-27 owner: the player GM Hat (+1,000 to every stat) in the starter kit - five items in the row */
.ld-kit-items{grid-template-columns:repeat(5,minmax(0,1fr))!important}
.ld-kit-items small{font:800 .64rem/1.1 var(--body,sans-serif);color:#fde047;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.7)}
@media (max-width:720px){.ld-kit-items{gap:6px}.ld-kit-items b{font-size:.7rem}}
.ld-kit-items b{white-space:normal;overflow:visible}
@media (max-width:520px){.ld-kit-items{grid-template-columns:repeat(3,minmax(0,1fr))!important;row-gap:12px}}

/* 2026-10-27 owner: Rankings + the Beta status card "in a drawer they can open, it's taking up too much space; center
   the other stuff" - the grid is the five main cards, centred; the servers section is a drawer from the right edge */
@media (min-width:1061px){
  .ld-grid{width:min(1240px,100%)!important;grid-template-columns:minmax(0,304fr) minmax(0,245fr) minmax(0,304fr) minmax(0,304fr)!important;
    grid-template-areas:"logo play play store" "rank rank join join"!important}
}
@media (min-width:721px) and (max-width:1060px){
  .ld-grid{grid-template-areas:"logo logo logo logo play play play play play play play play"
      "rank rank rank rank rank rank store store store store store store"
      "join join join join join join join join join join join join"!important}
  .ld-grid>.ld-store{min-height:220px}
}
.ld-drawer.ld-srvcol{position:fixed;top:0;right:0;bottom:0;z-index:61;display:flex!important;flex-direction:column;gap:14px;
  width:min(340px,92vw);margin:0;padding:14px 14px 18px;box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;
  grid-area:auto!important;grid-row:auto;grid-column:auto;
  background:linear-gradient(180deg,#e7f5fe,#f6fbff 40%,#eef6fc);box-shadow:-18px 0 40px -18px rgba(10,30,60,.55);
  border-radius:22px 0 0 22px;transform:translateX(105%);visibility:hidden;transition:transform .28s ease,visibility 0s linear .28s}
.ld-drawer.ld-srvcol.open{transform:none;visibility:visible;transition:transform .28s ease}
.ld-drawer>.ld-top3,.ld-drawer>.ld-srvmain{grid-area:auto!important;flex:none}
.ld-drawer>.ld-top3{min-height:210px}
.ld-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 0 6px}
.ld-drawer-head b{font:800 1.15rem/1 var(--display,"Maplestory",sans-serif);color:#14335c}
.ld-drawer-x{display:grid;place-items:center;width:34px;height:34px;margin:0;padding:0;border:0;border-radius:50%;background:#fff;color:#14335c;
  font:700 1.4rem/1 var(--body,sans-serif);cursor:pointer;box-shadow:0 2px 6px -2px rgba(20,51,92,.45)}
.ld-drawer-x:hover{background:#dbeafe}
.ld-drawer-x:focus-visible,.ld-drawer-tab:focus-visible{outline:3px solid #ff8a00;outline-offset:2px}
.ld-drawer-scrim{position:fixed;inset:0;z-index:60;background:rgba(10,20,40,.35)}
.ld-drawer-scrim[hidden]{display:none}
html.ld-drawer-on{overflow:hidden}
/* the tab: a blue game-style pull tab on the right edge, the online count on it */
.ld-drawer-tab{position:fixed;right:0;top:50%;z-index:59;display:flex;flex-direction:column;align-items:center;gap:4px;margin:0;
  padding:12px 9px 14px 11px;border:0;border-radius:16px 0 0 16px;cursor:pointer;color:#fff;
  background:linear-gradient(160deg,#4f9bff,#1d63e0 60%,#1747a8);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),-6px 8px 20px -10px rgba(10,30,80,.8);
  transform:translateY(-50%);transition:padding .15s ease,filter .15s ease}
.ld-drawer-tab:hover{padding-left:15px;filter:brightness(1.06)}
.ld-drawer-tab b{font:800 1.15rem/1 var(--display,"Maplestory",sans-serif)}
.ld-drawer-tab small{font:700 .58rem/1 var(--body,sans-serif);letter-spacing:.04em;text-transform:uppercase;opacity:.9}
.ld-dt-k{writing-mode:vertical-rl;transform:rotate(180deg);margin-top:6px;font:800 .78rem/1 var(--body,sans-serif);letter-spacing:.06em;text-transform:uppercase}
.ld-dt-dot{width:9px;height:9px;border-radius:50%;background:#cbd5e1}
.ld-dt-dot.up{background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.3)}
.ld-dt-dot.down{background:#f87171}
html.ld-drawer-on .ld-drawer-tab{visibility:hidden}
@media (max-width:720px){
  .ld-drawer-tab{top:auto;bottom:14px;transform:none;flex-direction:row;gap:6px;padding:10px 14px 10px 14px;border-radius:999px 0 0 999px}
  .ld-drawer-tab:hover{padding-left:16px}
  .ld-dt-k{writing-mode:horizontal-tb;transform:none;margin:0 0 0 4px}
}
@media (prefers-reduced-motion:reduce){.ld-drawer.ld-srvcol,.ld-drawer.ld-srvcol.open{transition:none}}