/* Official Maplestory typeface (free from Nexon) */
/* < = > are excluded so they fall back to a normal font (the Maplestory glyphs render as wide chevrons) */
@font-face{font-family:"Maplestory";src:url("../fonts/MaplestoryOTFLight.woff") format("woff");font-weight:300 500;font-display:swap;unicode-range:U+0000-003B,U+003F-FFFF}
@font-face{font-family:"Maplestory";src:url("../fonts/MaplestoryOTFBold.woff") format("woff");font-weight:600 900;font-display:swap;unicode-range:U+0000-003B,U+003F-FFFF}
:root{
  --beige:#efebe3; --beige-2:#e4ded2; --paper:#fff; --line:#ddd5c6; --ink:#2b2f38; --muted:#737a86;
  --blue:#2f6fd0; --blue-d:#1d4fa8; --blue-l:#6fa3ee; --navy:#0b2766; --sky-100:#e6f2ff;
  --maple:#ff7a1a; --maple-600:#e45a00; --gold:#ffc93c;
  --grass:#6cc644; --grass-600:#3f9a2a; --dirt:#a06b3c; --dirt-700:#6e4522;
  --warrior:#e2483d; --magician:#3b7ee8; --bowman:#3aa655; --thief:#8b55d6; --pirate:#6b7b93;
  --t-notice:#7c93b4; --t-gameup:#8b6cc2; --t-webup:#9a6ab8; --t-event:#c96a62; --t-prize:#8b6cc2; --t-info:#b9796f;
  --shadow:0 10px 30px -14px rgba(40,50,80,.35);
  --display:"Maplestory",Arial,system-ui,sans-serif;
  --cond:"Maplestory",Arial,system-ui,sans-serif;
  --body:"Maplestory",Arial,system-ui,sans-serif;
  --web:"Maplestory",Arial,Verdana,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;cursor:url("../ui/cursor.png") 0 3,auto}
a,button,[role=tab],label,.clickable{cursor:url("../ui/cursor-talk.png") 3 19,pointer}
input{cursor:text}
body{font-family:var(--body);color:var(--ink);background:var(--beige);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;color:inherit}
.pixel{image-rendering:pixelated}
.wrap{width:min(1160px,100% - 32px);margin-inline:auto}

/* ================= Web 2.0 gloss kit ================= */
.gloss{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:9px;color:#fff;font:700 1.05rem/1 var(--cond);text-transform:uppercase;letter-spacing:.3px;text-shadow:0 1px 1px rgba(0,0,0,.35);border:1px solid var(--edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 4px rgba(0,0,0,.14);overflow:hidden;isolation:isolate;transition:filter .15s,transform .15s}
.gloss::before{content:"";position:absolute;left:0;right:0;top:0;height:52%;background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.12));border-radius:9px 9px 50% 50%/9px 9px 10px 10px;z-index:-1}
.gloss:hover{filter:brightness(1.08) saturate(1.05)}
.gloss:active{transform:translateY(1px)}
.g-blue{background:linear-gradient(#45a6ff,#1674e0);--edge:#0e57b0}
.g-green{background:linear-gradient(#8adf5f,#3aa51e);--edge:#2c8316}
.g-orange{background:linear-gradient(#ffb23f,#ff7a00);--edge:#d15c00}
.g-dark{background:linear-gradient(#5b6474,#2c323d);--edge:#1f242c;font-size:.7rem;border-radius:5px}
.g-dark::before{border-radius:5px 5px 40% 40%/5px 5px 6px 6px}
.stripes{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.09) 0 7px,transparent 7px 14px),var(--bgg)}

/* ================= Nav (single glossy bar) ================= */
.pnav{position:sticky;top:0;z-index:60;background:linear-gradient(180deg,#7aaef2 0%,#4581dc 48%,#2f68c8 52%,#3a74d6 100%);border-top:1px solid #9cc4ff;border-bottom:1px solid #1f4fa0;box-shadow:0 3px 10px rgba(20,50,120,.25)}
.pnav .wrap{display:flex;align-items:center;height:64px;gap:14px}
.logo{display:flex;align-items:center;gap:9px;flex:none}
.logo img{width:36px;height:36px;filter:drop-shadow(0 2px 2px rgba(0,30,90,.35))}
.logo b{font:700 1.5rem/1 var(--display);color:#fff;letter-spacing:-.3px;text-shadow:0 2px 0 rgba(10,40,110,.45)}
.logo b span{color:#ffc93c}
.logo small{display:block;font:700 .6rem/1 var(--display);letter-spacing:1.2px;text-transform:uppercase;color:#d9e8ff;margin-top:4px;text-shadow:0 1px 0 rgba(10,40,110,.4)}
.pnav ul{display:flex;list-style:none;flex:1;justify-content:center;height:100%}
.pnav li{display:flex}
.pnav li+li{border-left:1px solid rgba(20,50,120,.45);box-shadow:-1px 0 0 rgba(255,255,255,.28)}
.pnav .nl{display:flex;align-items:center;padding:0 13px;color:#fff;font:700 .95rem/1 var(--display);letter-spacing:.5px;text-transform:uppercase;text-shadow:0 1px 1px rgba(10,40,110,.55);transition:background .15s;white-space:nowrap}
.pnav .nl:hover{background:rgba(255,255,255,.14)}
.pnav .nav-more{position:relative}
.pnav .nav-more .nl{gap:4px}
.pnav .nav-more .nl svg{width:12px;height:12px;transition:transform .15s}
.pnav .nav-more .dd{display:none;position:absolute;top:100%;right:0;min-width:210px;padding:6px;background:#fff;border:1px solid #bcd0ee;border-radius:0 0 10px 10px;box-shadow:0 10px 24px rgba(20,50,120,.25);z-index:70}
.pnav .nav-more:hover .dd,.pnav .nav-more.show .dd{display:block}
.pnav .nav-more:hover .nl svg,.pnav .nav-more.show .nl svg{transform:rotate(180deg)}
.pnav .dd a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;color:#2a3a55;font:700 .88rem/1.2 var(--body);white-space:nowrap}
.pnav .dd a:hover,.pnav .dd a:focus-visible{background:#eaf2ff;color:#1a5fc9}
.pnav .dd a.on{background:#fff4d6}
.pnav .dd img{width:24px;height:24px;object-fit:contain;flex:none}
.top-actions{display:flex;gap:8px;flex:none}
.pill{padding:8px 16px 7px;font:700 .85rem/1 var(--display);letter-spacing:.3px;border-radius:999px}
.pill::before{border-radius:999px 999px 40% 40%/999px 999px 8px 8px}
.menu-btn{display:none;width:40px;height:36px;border-radius:8px;background:rgba(255,255,255,.18);flex:none}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:18px;height:2px;background:#fff;border-radius:2px;position:relative;margin:auto;content:""}
.menu-btn span::before{position:absolute;top:-6px}.menu-btn span::after{position:absolute;top:6px}

/* ================= Hero ================= */
.dot{width:10px;height:10px;border-radius:50%;background:#48e06d;box-shadow:0 0 0 0 rgba(72,224,109,.7);animation:pulse 2s infinite;flex:none}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(72,224,109,0)}100%{box-shadow:0 0 0 0 rgba(72,224,109,0)}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 1.05rem/1 var(--display);padding:13px 24px;border-radius:999px;transition:transform .15s,filter .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-maple{color:#fff;background:linear-gradient(180deg,#ffa24a,var(--maple) 55%,var(--maple-600));box-shadow:0 4px 0 #b34500,0 10px 24px -6px rgba(255,122,26,.7);text-shadow:0 1px 0 rgba(140,50,0,.5)}
.btn-ghost{color:#fff;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.6);backdrop-filter:blur(6px)}

.char{position:relative;display:flex;flex-direction:column;align-items:center}
.char img{width:auto;max-height:clamp(88px,9vw,140px);filter:drop-shadow(0 4px 2px rgba(20,40,80,.22))}
.nametag{margin-top:2px;background:rgba(0,0,0,.62);color:#fff;font:700 11px/1 var(--web);padding:3px 6px 4px;border-radius:3px;white-space:nowrap}
.nametag.gold{color:#ffe38a}
.balloon{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:96px;background:#fff;color:#111;font:12px/1.3 var(--body);padding:5px 7px;border-radius:6px;border:1.5px solid #4a4a4a;box-shadow:0 2px 6px rgba(0,0,0,.18);overflow-wrap:anywhere;z-index:2}
.balloon::after{content:"";position:absolute;left:50%;margin-left:-6px;bottom:-7px;border:6px solid transparent;border-top-color:#4a4a4a;border-bottom:0}
.leaves{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.leaf{position:absolute;top:-40px;width:26px;animation:fall linear infinite}
@keyframes fall{0%{transform:translate(0,-40px) rotate(0)}50%{transform:translate(60px,50vh) rotate(200deg)}100%{transform:translate(-20px,105vh) rotate(420deg)}}


/* ================= Why MapleFresh + Classes (portal panels) ================= */
.panel{background:linear-gradient(180deg,#8dbbf5,#4a82da 30%,#3a73d2);border:1px solid #2a5cb8;border-radius:12px;padding:0 8px 8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 12px 10px}
.panel-head h2{font:700 1.3rem/1.1 var(--display);color:#fff;text-transform:uppercase;letter-spacing:.4px;text-shadow:0 2px 0 rgba(10,40,110,.45)}
.panel-head h2 span{color:#ffd24a}
.panel-head p{color:#e6f0ff;font-size:.82rem;margin-top:5px;text-shadow:0 1px 0 rgba(10,40,110,.35)}
.panel-head .plaque{flex:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.board{background:#fff;border-radius:8px;border:1px solid #c9d6ea;overflow:hidden}
.slot{width:54px;height:54px;border-radius:10px;flex:none;display:grid;place-items:center;background:linear-gradient(#fefefe,#dde3ea);border:1px solid #b7c2cf;box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 rgba(0,0,0,.05)}
.slot img{max-width:40px;max-height:44px;width:auto}
.slot.npc img{max-height:50px;max-width:48px}

.why{display:grid;grid-template-columns:repeat(3,1fr)}
.why .it{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:center;padding:12px;border-bottom:1px dotted #d9d2c3}
.why .it:not(:nth-child(3n)){border-right:1px dotted #d9d2c3}
.why .it:nth-last-child(-n+3){border-bottom:0}
.why .slot{width:40px;height:40px;border-radius:8px}
.why .slot img{max-width:30px;max-height:32px}
.why .slot.npc img{max-width:34px;max-height:36px}
.why h3{font:700 .9rem/1.2 var(--display);color:#2b2f38;margin:0 0 2px}
.why p{font:.74rem/1.4 var(--web);color:#666}

.cls-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:8px;background:#f4f1ea;border-bottom:1px solid #e3ddd0}
.cls-tab{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;border:1px solid #d3d0c8;background:linear-gradient(#fff,#ebe8e1);font:700 .85rem/1 var(--display);color:#444;min-width:0}
.cls-tab img{width:28px;height:28px;border-radius:5px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.cls-tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cls-tab:hover{background:linear-gradient(#fff,#f3f0ea)}
.cls-tab[aria-selected="true"]{background:linear-gradient(var(--c2),var(--c1));border-color:rgba(0,0,0,.2);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.cls-detail{display:grid;grid-template-columns:230px minmax(0,1fr)}
.cls-detail .scene{position:relative;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:14px;background:url("../scene/grass.webp") center bottom/auto 100px repeat-x,linear-gradient(180deg,#7fb6f2,#cfe7ff)}
.cls-detail .scene img.sp{max-height:150px;width:auto;filter:drop-shadow(0 4px 2px rgba(20,50,10,.35))}
.cls-detail .info{padding:14px 18px 16px;display:flex;flex-direction:column;gap:8px}
.cls-detail .bar{display:flex;align-items:center;gap:10px;font:700 1.35rem/1 var(--display);color:var(--c1)}
.cls-detail .bar small{font:700 .66rem/1 var(--body);color:#fff;background:var(--c1);padding:4px 8px;border-radius:999px;letter-spacing:.4px}
.cls-detail .role{font:.8rem/1.4 var(--web);color:#6b6356}
.paths{list-style:none;border-top:1px dotted #d9d2c3}
.paths li{font:.76rem/1.35 var(--web);color:#555;padding:6px 2px;border-bottom:1px dotted #d9d2c3}
.paths li b{color:var(--navy)}
.skillrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.skillrow .sk{display:flex;align-items:center;gap:6px;font:.72rem/1.2 var(--web);color:#555}
.skillrow .slot{width:40px;height:40px;border-radius:8px}
.skillrow img{width:32px;height:32px}

/* ================= Portal columns ================= */
.portal{display:grid;grid-template-columns:224px minmax(0,1fr) 172px;gap:18px;margin-top:28px;align-items:start}
.col{display:flex;flex-direction:column;gap:14px;min-width:0}
.box{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px 20px;box-shadow:0 1px 0 rgba(255,255,255,.8) inset}
.btitle{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.btitle h2,.btitle h3{font:700 1.22rem/1 var(--cond);text-transform:uppercase;color:#3a3f48;letter-spacing:.2px}
.btitle h2 span,.btitle h3 span{color:var(--blue)}
.more{font:700 .62rem/1 var(--web);color:#8b8f97;text-transform:uppercase;white-space:nowrap}
.more::after{content:" ›";color:var(--maple)}
.more:hover{color:var(--ink)}

/* Passport */
.passport{border-radius:12px;padding:14px 14px 0;background:linear-gradient(180deg,#8dbbf5,#4f88de 40%,#3a73d2);border:1px solid #2a5cb8;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);overflow:hidden}
.passport h3{text-align:center;font:700 .95rem/1 var(--cond);color:#eaf3ff;letter-spacing:.6px;text-transform:uppercase;text-shadow:0 1px 1px rgba(0,40,120,.4);margin:2px 0 12px}
.passport .gloss{height:48px;font-size:1.35rem;margin-bottom:10px}
.passport .gloss.g-green{font-weight:400}
.passport .gloss.g-green b{font-weight:800}
.passport .gloss svg{width:24px;height:24px}
.finds{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:8px 0 12px;border-top:1px solid rgba(255,255,255,.3)}
.finds .gloss{height:22px;font-size:.62rem;margin:0}
.island{margin:0 -14px;height:150px;background:url("../scene/map-maple-island.webp") 50% 58%/260% auto;border-top:2px solid rgba(255,255,255,.4)}

.bigbtn{height:74px;justify-content:space-between;padding:0 14px 0 18px;text-align:left;font:800 1.35rem/.95 var(--cond);border-radius:10px}
.bigbtn::before{border-radius:10px 10px 50% 50%/10px 10px 10px 10px}
.bigbtn i{width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none;box-shadow:inset 0 -3px 0 rgba(0,0,0,.08),0 2px 3px rgba(0,0,0,.2)}
.bigbtn i svg{width:24px;height:24px}
.bigbtn.g-orange{--bgg:linear-gradient(#ffb23f,#ff7a00)}
.bigbtn.g-blue{--bgg:linear-gradient(#45b8ff,#1a84e6)}

/* Server status (in-game world select) */
.status{padding:12px 14px 14px;background:linear-gradient(#fff9ec,#f6e7c9);border-color:#d8c29a}
.status .plaque{margin:-2px auto 10px}
.srv-row{display:flex;align-items:center;justify-content:space-between;font:700 .72rem/1.2 var(--web);color:#6b5530;margin-bottom:8px}
.srv-row .on{display:flex;align-items:center;gap:6px;color:#2f8a1d}
.chs{display:grid;gap:5px;margin:8px 0 10px}
.ch{display:grid;grid-template-columns:40px 1fr 30px;align-items:center;gap:6px;font:700 .68rem/1 var(--web);color:#6b5530}
.gauge{height:9px;border-radius:3px;background:#5a4a33;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.gauge span{display:block;height:100%;background:url("../ui/chgauge.png") left center/73px 9px no-repeat}
.enter{display:block;margin:0 auto;width:107px;height:41px;background:url("../ui/bt-enter.png")}
.enter:hover{background-image:url("../ui/bt-enter-hover.png")}
.enter:active{background-image:url("../ui/bt-enter-press.png")}

/* Featured slideshow */
.featured{display:grid;grid-template-columns:minmax(0,1fr) 206px;gap:10px;padding:8px;border-radius:12px;background:linear-gradient(180deg,#8dbbf5,#3a73d2);border:1px solid #2a5cb8}
.stage{position:relative;border-radius:8px;overflow:hidden;background:#dfe7f2;min-height:270px;display:flex;flex-direction:column}
.slides{position:relative;flex:1;min-height:246px}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .6s;display:flex;align-items:center;padding:0 26px;overflow:hidden}
.slide.on{opacity:1;z-index:1}
.slide .copy{position:relative;z-index:2;max-width:58%}
.slide .kick{display:inline-block;font:800 .7rem/1 var(--cond);letter-spacing:1.2px;text-transform:uppercase;background:#ff3d3d;color:#fff;padding:4px 8px;border-radius:4px;margin-bottom:8px;box-shadow:0 2px 0 #a41c1c}
.slide .big{font:italic 800 clamp(1.7rem,3.4vw,2.5rem)/.92 var(--cond);text-transform:uppercase;color:#fff;-webkit-text-stroke:0;text-shadow:2px 2px 0 var(--o),-2px 2px 0 var(--o),2px -2px 0 var(--o),-2px -2px 0 var(--o),0 3px 0 var(--o),3px 0 0 var(--o),0 6px 12px rgba(0,0,0,.35);--o:#123b8f}
.slide .big em{font-style:inherit;color:#ffe14a}
.slide .small{margin-top:8px;font:700 .85rem/1.3 var(--web);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.slide .gloss{display:inline-flex;margin-top:12px;height:30px;padding:0 14px;font-size:.82rem}
.s-hd{background:url("../scene/henesys.webp") 70% 100%/auto 118% no-repeat,#3366cc}
.s-hd::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,30,90,.55),rgba(10,30,90,0) 60%)}
.s-fame{background:url("../scene/grass.webp") center bottom/auto 60% repeat-x,linear-gradient(#4a8fe8,#a9d4ff)}
.s-fame .sprites{position:absolute;right:4%;bottom:8%;display:flex;align-items:flex-end;gap:6px}
.s-fame .sprites img{max-height:150px;width:auto}
.s-guild{background:repeating-conic-gradient(from 0deg at 74% 55%,#8fd858 0 10deg,#7bc94a 10deg 20deg)}
.s-guild .big{--o:#2c6a12}
.s-guild .emblems{position:absolute;right:6%;top:50%;transform:translateY(-50%);display:grid;grid-template-columns:repeat(2,auto);gap:14px}
.s-guild .emblems .gemblem{filter:drop-shadow(0 4px 0 rgba(0,0,0,.18));animation:float 4s ease-in-out infinite}
.s-guild .emblems .gemblem:nth-child(2n){animation-delay:-1.2s}.s-guild .emblems .gemblem:nth-child(3){animation-delay:-2.4s}
.s-vic{background:url("../scene/map-victoria.webp") 65% 45%/cover}
.s-vic::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(40,25,10,.6),rgba(40,25,10,0) 65%)}
.s-vic .big{--o:#5a3510}
.s-com{background:url("../scene/clouds.webp") center/cover,#2b5fc4}
.s-com::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,20,70,.65),rgba(10,20,70,.1))}
.s-com .crew{position:absolute;right:3%;bottom:6%;display:flex;gap:10px;align-items:flex-end}
.s-com .crew .char img{max-height:110px}
.s-com .balloon{max-width:150px;font-size:11px}
.stage-bar{height:24px;background:linear-gradient(#6d7380,#4b515c);display:flex;align-items:center;justify-content:center;gap:6px;position:relative;z-index:3}
.stage-bar button{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45)}
.stage-bar button[aria-selected="true"]{background:#ffae3d}
.picker{list-style:none;display:flex;flex-direction:column;background:#fff;border-radius:8px;overflow:hidden;border:1px solid #c9d6ea}
.picker li{flex:1;border-bottom:1px solid #e3e8f0}
.picker li:last-child{border-bottom:0}
.picker button{width:100%;height:100%;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px 6px 12px;font:400 .98rem/1.1 var(--cond);color:#333;text-align:left;transition:background .15s}
.picker button:hover{background:#f3f7ff}
.picker button[aria-selected="true"]{background:linear-gradient(90deg,#fff4e0,#fff);color:#000;font-weight:700;box-shadow:inset 3px 0 0 var(--maple)}
.thumb{width:66px;height:38px;border-radius:5px;flex:none;display:grid;place-items:center;overflow:hidden;background:var(--t);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,0,.12)}
.thumb img{max-height:34px;width:auto}

/* Notice / Event */
.news{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.news>div,.tiles2>div{min-width:0}
.banner{height:74px;border-radius:4px;overflow:hidden;position:relative;display:flex;align-items:center;padding:0 12px;margin-bottom:6px;border:1px solid rgba(0,0,0,.12)}
.b-notice{background:linear-gradient(90deg,#d6ef5a,#9bd33a);}
.b-notice .tagbox{background:#fff8c8;border:2px solid #5d6b1b;color:#2f3a06;font:italic 800 .95rem/1 var(--cond);padding:6px 8px;transform:rotate(-2deg);box-shadow:2px 2px 0 rgba(0,0,0,.2)}
.b-notice .now{margin-left:10px;font:italic 800 1.3rem/.95 var(--cond);color:#fff;text-transform:uppercase;text-shadow:2px 2px 0 #1f5d10,-1px -1px 0 #1f5d10,1px -1px 0 #1f5d10,-1px 1px 0 #1f5d10}
.b-notice .now em{font-style:inherit;display:block;color:#193f8f;text-shadow:1px 1px 0 #fff}
.b-notice .coins{position:absolute;right:8px;bottom:4px;display:flex}
.b-notice .coins img{width:28px;margin-left:-10px}
.b-event{background:linear-gradient(90deg,#e8352f,#ff6b5a);color:#fff}
.b-event .t1{font:italic 700 1rem/1 var(--cond);opacity:.95}
.b-event .t2{font:italic 800 2rem/.9 var(--cond);text-transform:uppercase;text-shadow:0 3px 0 rgba(120,0,0,.45)}
.b-event img{position:absolute;right:10px;bottom:-4px;height:84px;width:auto}
.lst{list-style:none}
.lst li{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #e7e2d7;font:.74rem/1.3 var(--web);color:#444;min-width:0}
.lst li a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lst li a:hover{color:var(--blue);text-decoration:underline}
.tag{flex:none;width:58px;text-align:center;font:700 .55rem/16px var(--web);color:#fff;border-radius:2px;text-transform:uppercase;letter-spacing:.3px;background:var(--c)}

/* Rankings */
.rk-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.rk-head h2{font:700 1.22rem/1 var(--cond);text-transform:uppercase;color:#3a3f48;margin-right:auto}
.rk-head h2 span{color:var(--blue)}
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tab{padding:5px 11px;border-radius:4px;font:700 .72rem/1 var(--web);color:#555;background:linear-gradient(#fbfbfb,#e6e6e6);border:1px solid #cfcfcf;display:flex;align-items:center;gap:5px}
.tab i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.tab:hover{background:linear-gradient(#fff,#efefef)}
.tab[aria-selected="true"]{background:linear-gradient(#58adff,#1674e0);border-color:#0e57b0;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.tab[aria-selected="true"] i{box-shadow:0 0 0 1px #fff}
.search{position:relative}
.search input{font:.75rem var(--web);padding:6px 10px 6px 28px;border-radius:4px;border:1px solid #cfcfcf;width:150px;background:#fff;outline:none;box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
.search input:focus{border-color:var(--blue)}
.search svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:13px;height:13px;color:#999}

.podium{position:relative;display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:end;gap:10px;padding:12px 16px 0;border-radius:10px 10px 0 0;overflow:hidden;
  background:url("../scene/clouds.webp") center top/100% auto no-repeat,linear-gradient(180deg,#5f9ff0,#bfe0ff 85%)}
/* the ground line the steps stand on */
.podium::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:linear-gradient(#62b53f 0 4px,#3f8a2a 4px);z-index:0}
.pod{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;z-index:1}
/* each place stands on a step: grass lip, then an earth face that carries the name tag */
.pod .base{width:100%;max-width:190px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:12px 6px 8px;border-radius:8px 8px 0 0;
  background:linear-gradient(#7fd257 0 6px,#4c9a33 6px 9px,#c48f58 9px,#a06f3d);box-shadow:inset 2px 0 0 rgba(255,255,255,.18),inset -2px 0 0 rgba(0,0,0,.12)}
.pod.first .base{min-height:74px}.pod.second .base{min-height:56px}.pod.third .base{min-height:44px}
.pod .sprite{height:84px;display:flex;align-items:flex-end;justify-content:center}
.pod .sprite img{max-height:84px;width:auto;margin-bottom:-3px;filter:drop-shadow(0 3px 2px rgba(20,50,10,.35))}
.pod.first .sprite{height:100px}.pod.first .sprite img{max-height:100px}
.medal{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:800 .8rem/1 var(--display);margin-bottom:3px;border:2px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.25),inset 0 -3px 0 rgba(0,0,0,.15);position:relative}
.medal::before,.medal::after{content:"";position:absolute;top:19px;width:8px;height:12px;z-index:-1;background:var(--rib)}
.medal::before{left:3px;transform:rotate(18deg)}.medal::after{right:3px;transform:rotate(-18deg)}
.pod.first .medal{width:30px;height:30px;font-size:.95rem;background:radial-gradient(circle at 35% 30%,#fff3a8,#ffc21a 55%,#d99400);color:#6a4300;--rib:#e0452f}
.pod.second .medal{background:radial-gradient(circle at 35% 30%,#fff,#cfd8e3 55%,#98a5b6);color:#3d4a5c;--rib:#3a73d6}
.pod.third .medal{background:radial-gradient(circle at 35% 30%,#ffe0c2,#e0995e 55%,#b06a2e);color:#fff;--rib:#3aa655}
.tagname{margin-top:3px;background:rgba(0,0,0,.7);color:#fff;font:700 11px/1 var(--web);padding:3px 7px 4px;border-radius:3px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pod.first .tagname{color:#ffe38a}
.tagguild{margin-top:2px;background:rgba(0,0,0,.55);color:#b8f0a0;font:11px/1 var(--web);padding:2px 6px 3px;border-radius:3px;white-space:nowrap}
.pod .meta{margin-top:4px;font:700 .64rem/1.2 var(--web);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.table{border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;overflow:hidden}
.row{display:grid;grid-template-columns:56px 64px minmax(0,1fr) 140px 62px 120px;align-items:center;gap:10px;padding:3px 12px;font:.75rem/1.3 var(--web);border-top:1px solid #eee8dc}
.row:nth-child(odd){background:#fbf9f4}
.row:hover{background:#fff4e2}
.row.hr{background:linear-gradient(#f7f3ea,#ece5d6);font:700 .64rem/1 var(--web);text-transform:uppercase;letter-spacing:.4px;color:#7a6e58;padding:8px 12px}
.rk{display:flex;align-items:center;justify-content:center;gap:5px;font:800 1.15rem/1 var(--display);color:var(--blue-d)}
.mv{font:700 .6rem/1 var(--web);display:flex;align-items:center;gap:1px}
.mv.up{color:#2f9a1d}.mv.dn{color:#d33b2f}.mv.eq{color:#aaa}
.port{height:58px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.port img{max-height:58px;width:auto}
.who b{font:700 .95rem/1.1 var(--display);display:block;color:var(--navy)}
.who b a:hover,a.tagname:hover{text-decoration:underline}
.guild{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:.68rem}
.emblem{width:14px;height:14px;border-radius:3px;display:grid;place-items:center;font-size:9px;color:#fff;font-weight:800}
.gemblem{position:relative;display:inline-block;flex:none;width:calc(17px * var(--gs, 2));height:calc(17px * var(--gs, 2));vertical-align:middle}
.gemblem i{position:absolute;inset:0;background:url("../ui/guildmark-bg.png") no-repeat;background-size:calc(272px * var(--gs, 2)) auto;image-rendering:pixelated}
.gemblem i.mk{background-image:url("../ui/guildmark-mark.png")}
.job{display:inline-flex;align-items:center;gap:7px;font-weight:700}
.job img{width:26px;height:26px;border-radius:5px;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.lv{font:800 1.05rem/1 var(--display);color:var(--navy)}
.lv small{font:700 .6rem/1 var(--web);color:var(--muted);margin-right:2px}
.exp{height:13px;border-radius:999px;background:#1f2b3d;padding:2px;position:relative;box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.exp span{display:block;height:100%;border-radius:999px;background:linear-gradient(180deg,#fff7a8,#ffd400 45%,#e8a200)}
.exp em{position:absolute;inset:0;font:700 8px/13px var(--web);color:#fff;text-align:center;font-style:normal;text-shadow:0 0 2px #000,0 0 2px #000,0 1px 1px #000}
.empty{padding:30px;text-align:center;color:var(--muted);font:.8rem var(--web)}
.credit{font:.66rem var(--web);color:#999;text-align:right;margin-top:8px}
.credit a{text-decoration:underline}

/* Tiles */
.tiles2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tile{position:relative;height:80px;border-radius:4px;padding:9px 10px;color:#fff;font:700 .82rem/1.15 var(--cond);text-align:left;overflow:hidden;text-shadow:0 1px 1px rgba(0,0,0,.2);transition:filter .15s,transform .15s;display:block}
.tile:hover{filter:brightness(1.08);transform:translateY(-1px)}
.tile img{position:absolute;right:4px;bottom:4px;width:40px;height:40px;object-fit:contain;opacity:.4;filter:brightness(0) invert(1)}
.tile.o{background:linear-gradient(#ffa24d,#f47a1f)}
.tile.b{background:linear-gradient(#7aaaf0,#5186dd)}
.tile.on{box-shadow:inset 0 0 0 3px #fff3b0}

/* NPC dialog — real v62 UtilDlgEx frame (529px): NPC panel x13–150, text panel x150–508, button bar in the bottom piece */
.npc-wrap{display:flex;justify-content:center;margin-top:18px}
.dlg{width:min(529px,100%);filter:drop-shadow(0 8px 14px rgba(0,0,0,.18))}
.dlg .edge{display:block;width:100%;height:auto}
.dlg .mid{background:url("../ui/dlg-c.png") top/100% auto repeat-y;display:grid;grid-template-columns:25.9% minmax(0,1fr);padding:0 4% 0 2.5%;min-height:150px}
.dlg .npc{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 4px 6px;min-width:0}
.dlg .npc img{max-height:104px;max-width:100%;width:auto}
.dlg .npc span{margin-top:4px;width:100%;max-width:121px;height:19px;background:url("../ui/dlg-bar.png") center/100% 100%;color:#fff;font:700 10px/19px var(--body);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
.dlg .say{font:13px/1.6 var(--body);color:#111;padding:4px 14px 12px 16px;min-width:0;overflow-wrap:anywhere}
.dlg .say .b{color:#0000ff}.dlg .say .r{color:#e00000}.dlg .say .e{font-weight:700}
.dlg .say .opt{color:#0000ff;padding-left:14px;position:relative;display:inline-block}
.dlg .say .opt::before{content:"";position:absolute;left:2px;top:50%;margin-top:-4px;border:4px solid transparent;border-left:5px solid #0000ff;border-right:0}
.dlg .say .opt:hover{text-decoration:underline;color:#ff5a00}
.dlg .bottom{position:relative}
.dlg .foot{position:absolute;left:3%;right:3.4%;top:53.5%;display:flex;justify-content:space-between;align-items:flex-start}
.dlg .foot div{display:flex;gap:4px;justify-content:flex-end;flex:1}
.imgbtn{display:block;background:center/100% 100% no-repeat}
.b-end{width:16.1%;aspect-ratio:85/18;background-image:url("../ui/dlg-end.png")}.b-end:hover{background-image:url("../ui/dlg-end-hover.png")}
.b-next,.b-prev,.b-ok{width:8.7%;aspect-ratio:46/18}
.b-next{background-image:url("../ui/dlg-next.png")}.b-next:hover{background-image:url("../ui/dlg-next-hover.png")}
.b-prev{background-image:url("../ui/dlg-prev.png")}.b-prev:hover{background-image:url("../ui/dlg-prev-hover.png")}
.b-ok{background-image:url("../ui/dlg-ok.png")}
.dlg .foot div .imgbtn{width:calc(8.7% * 100 / 83)}
.imgbtn[hidden]{display:none}

/* Right column ads */
.ad{border-radius:10px;overflow:hidden;position:relative;color:#fff;border:1px solid rgba(0,0,0,.12);display:block}
.ad-1{height:372px;background:url("../scene/clouds.webp") center/cover,linear-gradient(#3a7fe0,#9fd0ff)}
.ad-1 .logo-s{position:absolute;left:10px;top:10px;font:800 1rem/1 var(--display);text-shadow:0 2px 0 rgba(0,40,120,.5)}
.ad-1 .bub{position:absolute;right:8px;top:40px;width:84px;height:84px;border-radius:50%;background:#fff;color:#1d4fa8;font:800 .82rem/1.05 var(--cond);display:grid;place-items:center;text-align:center;padding:8px;box-shadow:0 4px 10px rgba(0,0,0,.2);transform:rotate(-6deg)}
.ad-1 .bub::after{content:"";position:absolute;left:8px;bottom:6px;border:8px solid transparent;border-top-color:#fff;transform:rotate(35deg)}
.ad-1 .hero-s{position:absolute;left:4px;top:118px;height:150px;width:auto}
.ad-1 .mush{position:absolute;right:12px;top:206px;height:56px;width:auto}
.ad-1 .band{position:absolute;left:0;right:0;bottom:0;padding:12px 10px 14px;background:linear-gradient(#2a3a8f,#1a2366);text-align:center}
.ad-1 .band b{display:block;font:800 1.3rem/1 var(--cond);letter-spacing:1px}
.ad-1 .band small{font:.66rem var(--web);opacity:.85}
.ad-2{min-height:300px;background:radial-gradient(circle at 50% 35%,#ff7ac6,#8a2a9e 55%,#3a1463);text-align:center;padding:14px 10px}
.ad-2 .t{font:italic 800 1.5rem/.9 var(--cond);text-transform:uppercase;text-shadow:0 3px 0 rgba(60,0,80,.6)}
.ad-2 .t em{display:block;font-style:inherit;color:#ffe14a;font-size:2.2rem}
.ad-2 img{margin:10px auto 0;height:118px;width:auto}
.ad-2 .alive{font:700 .74rem/1.4 var(--body);margin-top:8px;text-shadow:0 1px 2px rgba(60,0,80,.6)}
.ad-2 .gloss{height:30px;font-size:.8rem;margin-top:10px}
.ad-2 small{display:block;font:.62rem var(--web);opacity:.8;margin-top:6px}

footer{margin-top:40px;background:var(--beige-2);border-top:1px solid var(--line);padding:26px 0 30px;font:.72rem/1.6 var(--web);color:#7a7466}
footer .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:flex-start}
footer nav{display:flex;gap:4px 14px;flex-wrap:wrap}
footer nav a:hover{color:var(--ink);text-decoration:underline}
.fine{width:100%;font-size:.66rem;color:#9a9384}

@media (min-width:1121px){ .col-r{position:sticky;top:78px} }

/* ================= Responsive ================= */
@media (max-width:1180px){
  .pnav.open .nav-more>.nl{display:none}
  .pnav.open .nav-more .dd{display:flex;flex-direction:column;width:100%;position:static;min-width:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
  .pnav.open .dd a{padding:12px 20px;color:#fff;border-top:1px solid rgba(255,255,255,.15);border-radius:0}
  .pnav.open .dd a:hover{background:rgba(255,255,255,.14);color:#fff}
  .pnav.open .dd a.on{background:rgba(255,255,255,.18)}
  .pnav ul{display:none}
  .menu-btn{display:block}
  .top-actions{margin-left:auto}
  .pnav.open ul{display:flex;flex-direction:column;height:auto;position:absolute;top:64px;left:0;right:0;background:#2f68c8;padding:6px 0;border-bottom:1px solid #1f4fa0}
  .pnav.open li+li{border-left:0;box-shadow:none;border-top:1px solid rgba(255,255,255,.15)}
  .pnav.open .nl{padding:14px 20px;width:100%}
}

@media (max-width:1120px){
  .portal{grid-template-columns:210px minmax(0,1fr)}
  .col-r{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .ad-1{height:230px}
  .ad-2{height:auto;padding-bottom:16px}
  .ad-1 .hero-s{top:40px;left:auto;right:110px;height:150px}
  .ad-1 .mush{top:auto;bottom:74px;right:24px}
  .ad-1 .bub{top:12px;right:14px}
  .pnav .nl{padding:0 12px;font-size:.92rem}
}
@media (max-width:900px){
  .pnav.open .nav-more>.nl{display:none}
  .pnav.open .nav-more .dd{display:flex;flex-direction:column;width:100%;position:static;min-width:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
  .pnav.open .dd a{padding:12px 20px;color:#fff;border-top:1px solid rgba(255,255,255,.15);border-radius:0}
  .pnav.open .dd a:hover{background:rgba(255,255,255,.14);color:#fff}
  .pnav.open .dd a.on{background:rgba(255,255,255,.18)}
  .pnav ul{display:none}
  .menu-btn{display:block}
  .top-actions{margin-left:auto}
  .pnav.open ul{display:flex;flex-direction:column;height:auto;position:absolute;top:64px;left:0;right:0;background:#2f68c8;padding:6px 0;border-bottom:1px solid #1f4fa0}
  .pnav.open li+li{border-left:0;box-shadow:none;border-top:1px solid rgba(255,255,255,.15)}
  .pnav.open .nl{padding:14px 20px;width:100%}
  .portal{grid-template-columns:1fr}
  .col-c{order:1}.col-l{order:2}.col-r{order:3}
  .col-l{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .col-l .passport{grid-row:span 3}
  .featured{grid-template-columns:1fr}
  .picker{flex-direction:row;overflow-x:auto}
  .picker li{border-bottom:0;border-right:1px solid #e3e8f0;flex:none}
  .picker button{min-height:46px;white-space:nowrap}
  .row{grid-template-columns:52px 64px minmax(0,1fr) 60px 110px}
  .row .c-job{display:none}
}
@media (max-width:620px){
  .pnav .wrap{height:58px;gap:10px}
  .pnav.open ul{top:58px}
  .logo b{font-size:1.3rem}
  .logo small{display:none}
  .top-actions .g-green{display:none}
  .top-actions.in .pill:not(.g-blue){display:none}   /* logged in: just Game Panel; GM Panel + Log out are in the passport */
  .col-l,.col-r,.news,.tiles2,.why{grid-template-columns:1fr}
  .why .it{border-right:0!important;border-bottom:1px dotted #d9d2c3!important;padding:10px 12px}
  .why .it:last-child{border-bottom:0!important}
  .cls-tabs{display:flex;overflow-x:auto}
  .cls-tab{flex:none}
  .cls-detail{grid-template-columns:1fr}
  .cls-detail .scene{min-height:190px}
  .panel-head .plaque{display:none}
  .panel-head h2{font-size:1.1rem}
  .col-l .passport{grid-row:auto}
  .slide{padding:0 16px}
  .slide .copy{max-width:70%}
  .s-fame .sprites img{max-height:100px}
  .s-guild .emblems .gemblem{--gs:3 !important}
  .s-mush .burst{display:none}
  .s-com .crew .char:nth-child(n+2){display:none}
  .box{padding:16px 14px}
  .dlg .say{font-size:12px;padding:0 6px 8px}
  .dlg .npc img{max-height:72px}
  .dlg .npc span{font-size:8px}
  .podium{padding:10px 6px 0;gap:6px}
  .pod .base{padding:10px 3px 6px}
  .pod .sprite{height:72px}.pod .sprite img{max-height:72px}
  .pod.first .sprite{height:86px}.pod.first .sprite img{max-height:86px}
  .tagname{font-size:10px}.tagguild{font-size:9px}.pod .meta{font-size:.58rem}
  .row{grid-template-columns:44px 56px minmax(0,1fr) 48px;gap:6px;padding:6px 8px}
  .row .c-exp{display:none}
  .port{height:60px}.port img{max-height:60px}
  .search{width:100%}.search input{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .leaf{display:none}
  .dot{animation:none}
  .slide{transition:none}
  html{scroll-behavior:auto}
}

/* =====================================================================
   Multi-page additions
   ===================================================================== */
.pnav .nl.on{background:rgba(255,255,255,.18);box-shadow:inset 0 -3px 0 #ffc93c}
.pnav .nl.vip{color:#ffe07a}

/* Rankings widget extras */
.rk-head .more{margin-left:auto}
.sort{display:flex;align-items:center;gap:6px;font:700 .72rem var(--web);color:#777}
.sort select{font:.75rem var(--web);padding:5px 8px;border-radius:4px;border:1px solid #cfcfcf;background:#fff}
.table.ext .row{grid-template-columns:56px 64px minmax(0,1fr) 140px 62px 120px 70px}
.c-fame{font-weight:700;color:var(--maple-600);text-align:right}
.pager{display:flex;justify-content:center;gap:4px;margin-top:10px}
.pager:empty{display:none}
.pager button{min-width:32px;height:30px;border-radius:4px;border:1px solid #cfcfcf;background:linear-gradient(#fbfbfb,#e6e6e6);font:700 .8rem var(--web);color:#555}
.pager button[aria-current="true"]{background:linear-gradient(#58adff,#1674e0);border-color:#0e57b0;color:#fff}

/* In-game style notice popup */
.notice-pop{position:fixed;inset:0;z-index:110;display:none;place-items:center;background:rgba(10,20,40,.45);padding:16px}
.notice-pop.show{display:grid}
.np-box{width:min(360px,100%);background:linear-gradient(#fdfdfd,#eceae4);border:2px solid #7a7a7a;border-radius:10px;box-shadow:0 20px 40px rgba(0,0,0,.35),inset 0 0 0 2px #fff;padding:18px 20px;text-align:center}
.np-title{font:700 1.1rem var(--display);color:var(--navy);margin-bottom:8px}
.np-msg{font:.9rem/1.55 var(--body);color:#333;margin-bottom:16px}
.np-ok{height:38px;width:130px;margin:0 auto}

/* Sub-page header */
.page-hero{position:relative;height:210px;background:none;overflow:hidden;isolation:isolate}
.page-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,28,90,.78),rgba(8,28,90,.35) 55%,rgba(8,28,90,.05));z-index:-1}
.page-hero::after{content:none}
.page-hero .wrap{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;padding-bottom:10px}
.crumbs{font:700 .72rem var(--body);color:#cfe0ff;letter-spacing:.6px;text-transform:uppercase}
.crumbs a:hover{text-decoration:underline}
.page-hero h1{font:700 clamp(1.9rem,4vw,2.9rem)/1.05 var(--display);color:#fff;text-shadow:0 3px 0 rgba(10,40,120,.55);margin:8px 0 6px}
.page-hero h1 em{font-style:normal;color:#ffcf4a}
.page-hero p{color:#e8f1ff;font-weight:700;max-width:560px;text-shadow:0 1px 4px rgba(0,0,0,.45)}
.page-hero .deco{position:absolute;right:max(16px,calc((100% - 1160px) / 2 + 24px));bottom:30px;z-index:2;display:flex;gap:12px;align-items:flex-end;pointer-events:none}
.page-hero .deco img{max-height:130px;width:auto;filter:drop-shadow(0 4px 3px rgba(0,0,0,.3))}
.portal.sub{grid-template-columns:224px minmax(0,1fr);margin-top:22px}
.sec{scroll-margin-top:84px}

/* Content */
.lead-in{font:.95rem/1.65 var(--body);color:#555;margin:-2px 0 14px}
.prose{font:.9rem/1.7 var(--body);color:#444}
.prose p+p,.prose ul,.prose h3,.prose ol{margin-top:10px}
.prose ul,.prose ol{padding-left:20px}
.prose li+li{margin-top:4px}
.prose a{color:var(--blue);text-decoration:underline}
.prose h3{font:700 1.05rem var(--display);color:var(--navy);margin-top:16px}
.prose b{color:#2b2f38}
.callout{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:10px;background:linear-gradient(90deg,#fff4df,#fffaf0);border:1px solid #f3d9a6;font:.88rem/1.55 var(--body);color:#5a4520}
.callout img{flex:none;width:40px;height:40px;object-fit:contain}
.callout b{color:#3a2a00}
.callout.blue{background:linear-gradient(90deg,#e8f2ff,#f6faff);border-color:#c9dcf5;color:#2a3d5c}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:#fff}
.tbl{width:100%;border-collapse:collapse;font:.82rem/1.45 var(--web)}
.tbl th{background:linear-gradient(#f7f3ea,#ece5d6);color:#7a6e58;font:700 .66rem var(--web);text-transform:uppercase;letter-spacing:.5px;text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:9px 12px;border-bottom:1px dotted #d9d2c3;color:#444;vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:nth-child(even) td{background:#fbf9f4}
.tbl td b{color:var(--navy)}
.tbl code,.prose code{font:700 .8rem ui-monospace,Menlo,Consolas,monospace;background:#eef3fb;color:var(--blue-d);padding:2px 6px;border-radius:4px}
.tbl .ic{display:flex;align-items:center;gap:8px}
.tbl .ic img{width:26px;height:26px;border-radius:5px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}

.steps-l{list-style:none;counter-reset:s;display:grid;gap:14px}
.steps-l li{counter-increment:s;display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:start}
.steps-l li::before{content:counter(s);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:700 1rem var(--display);color:#fff;background:linear-gradient(#ffb23f,#ff7a00);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 0 #c45a00}
.steps-l li>div>b{display:block;font:700 1rem var(--display);color:var(--navy);padding-top:6px}
.steps-l p{font:.84rem/1.55 var(--web);color:#666;margin-top:3px}

/* Forms */
.form{display:grid;gap:14px}
.field label,.field .lbl{display:block;font:700 .82rem var(--body);color:#4a4f5a;margin-bottom:6px}
.input{width:100%;font:.98rem var(--body);padding:11px 12px;border:1px solid #c9c3b5;border-radius:8px;background:linear-gradient(#fff,#fbfaf7);box-shadow:inset 0 1px 2px rgba(0,0,0,.06);outline:none;transition:border-color .15s,box-shadow .15s;color:var(--ink)}
.input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,111,208,.18)}
textarea.input{min-height:96px;resize:vertical;font:.95rem/1.5 var(--body)}
.field .hint{font:.72rem/1.4 var(--web);color:var(--muted);margin-top:5px}
.field .err{display:none;color:#d33b2f;font:700 .72rem/1.4 var(--web);margin-top:5px}
.field.bad .input{border-color:#d33b2f;box-shadow:0 0 0 3px rgba(211,59,47,.12)}
.field.bad .err{display:block}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.check{display:flex;gap:10px;align-items:flex-start;font:.8rem/1.5 var(--web);color:#555}
.check input{width:18px;height:18px;margin-top:1px;accent-color:var(--blue);flex:none}
.check a{color:var(--blue);text-decoration:underline}
.form .submit{height:52px;font-size:1.25rem;border-radius:10px}
.form .submit[disabled]{filter:grayscale(.6);opacity:.7}
.alt{text-align:center;font:.8rem var(--web);color:#777}
.alt a{color:var(--blue);font-weight:700;text-decoration:underline}
.gender{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gender label{position:relative;display:block;margin:0}
.gender input{position:absolute;opacity:0;pointer-events:none}
.gender span{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border:1px solid #c9c3b5;border-radius:8px;background:#fff;font:700 .9rem var(--body);color:#555;transition:border-color .15s,box-shadow .15s}
.gender input:checked+span{border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,111,208,.18);color:var(--blue-d)}
.gender input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.acct{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:0;padding:0;overflow:hidden}
.acct .form-side{padding:22px 24px}
.acct .preview{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:20px 12px 26px;background:url("../scene/grass.webp") center bottom/auto 110px repeat-x,url("../scene/clouds.webp") center/cover,linear-gradient(#4a8fe8,#a9d4ff);min-height:320px}
.acct .preview .plaque{position:absolute;top:16px;left:50%;transform:translateX(-50%)}
.acct .preview img.sp{max-height:150px;width:auto;filter:drop-shadow(0 4px 2px rgba(20,50,10,.35))}

/* Download */
.dl{display:grid;grid-template-columns:minmax(0,1fr) 250px;padding:0;overflow:hidden}
.dl-main{padding:22px 24px}
.dl-main h2{font:700 1.5rem var(--display);color:var(--navy)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 16px}
.chip{font:700 .72rem var(--body);background:#eef3fb;color:var(--blue-d);padding:5px 10px;border-radius:999px;border:1px solid #d3e2f4}
.dl-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.dl-btns .gloss{height:52px;padding:0 24px;font-size:1.15rem}
.dl-btns .mirror{font:700 .8rem var(--body);color:var(--blue);text-decoration:underline}
.dl-art{position:relative;background:url("../scene/henesys.webp") 70% 100%/auto 130% no-repeat,#3366cc;display:flex;align-items:flex-end;justify-content:center;padding-bottom:22px;min-height:230px}
.dl-art img{max-height:120px;width:auto;filter:drop-shadow(0 4px 3px rgba(0,0,0,.3))}
.hash{font:.72rem/1.5 ui-monospace,Menlo,Consolas,monospace;word-break:break-all;color:#666;background:#f6f3ec;border-radius:6px;padding:8px 10px;margin-top:14px}
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.perk{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:start}
.perk .slot{width:48px;height:48px}
.perk b{display:block;font:700 .95rem var(--display);color:var(--navy)}
.perk p{font:.78rem/1.55 var(--web);color:#666;margin-top:3px}

/* Buy NX */
.pkgs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding-top:6px}
/* the buyer ticks "purchases are final" before any Buy link works */
.nx-agree{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:10px 12px;border:1px solid #f0c9a8;border-radius:10px;background:#fff7ef;font:600 .84rem/1.45 var(--body);color:#5a3a1c;cursor:pointer}
.nx-agree input{flex:none;width:18px;height:18px;margin-top:1px;accent-color:#e8352f}
.nx-agree a{color:#c2410c;text-decoration:underline}
.nx-agree.need{border-color:#e8352f;box-shadow:0 0 0 3px rgba(232,53,47,.18)}
.pkgs.locked .gloss{filter:grayscale(.6);opacity:.6}
.pkg{position:relative;background:linear-gradient(#fff,#f4f7fc);border:1px solid #d3dce8;border-radius:12px;padding:18px 10px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .15s,box-shadow .15s}
.pkg:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.pkg.pop{border-color:#ffb23f;box-shadow:inset 0 0 0 2px #ffd88a}
.pkg .ribbon{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font:700 .62rem var(--body);background:linear-gradient(#ff6b5a,#e8352f);color:#fff;padding:4px 10px;border-radius:999px;white-space:nowrap;letter-spacing:.3px}
.pkg img{height:40px;width:auto}
.pkg .nx{font:700 1.3rem/1 var(--display);color:var(--navy)}
.pkg .nx small{font-size:.7rem;color:var(--muted)}
.pkg .bonus{font:700 .7rem var(--body);color:#2f9a1d;min-height:1.1em}
.pkg .price{font:700 1.1rem var(--display);color:#444}
.pkg .gloss{height:34px;width:100%;font-size:.85rem;margin-top:4px}
.sc{display:grid;gap:16px}
.sc h3{font:700 .95rem var(--display);color:var(--navy);margin-bottom:8px}
.sc-items{display:flex;flex-wrap:wrap;gap:8px}
.sc-item{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border:1px solid #e3ddd0;border-radius:10px;background:#fbfaf6;font:.78rem var(--web);color:#444}
.sc-item .slot{width:40px;height:40px;border-radius:8px}
.sc-item .slot img{max-width:32px;max-height:32px}
.fashion{display:flex;justify-content:center;align-items:flex-end;gap:10px;min-height:170px;padding:18px 10px 24px;border-radius:10px;background:url("../scene/grass.webp") center bottom/auto 90px repeat-x,linear-gradient(#ffd3ec,#fff0f8)}
.fashion img{max-height:140px;width:auto;filter:drop-shadow(0 4px 2px rgba(0,0,0,.2))}

/* FAQ + news list */
.faq details,.news-list details{border-bottom:1px dotted #d9d2c3}
.faq details:last-child,.news-list details:last-child{border-bottom:0}
.faq summary,.news-list summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 4px}
.faq summary::-webkit-details-marker,.news-list summary::-webkit-details-marker{display:none}
.faq summary{font:700 .95rem var(--display);color:var(--navy)}
.faq summary::after,.news-list summary::after{content:"+";flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 1rem/1 var(--display);color:#fff;background:linear-gradient(#ffb23f,#ff7a00)}
.faq details[open] summary::after,.news-list details[open] summary::after{content:"–"}
.faq .ans{padding:0 4px 14px;font:.86rem/1.65 var(--web);color:#555}
.faq .ans a{color:var(--blue);text-decoration:underline}
.news-list summary{justify-content:flex-start}
.news-list summary::after{margin-left:auto}
.news-list .date{font:.74rem var(--web);color:#999;white-space:nowrap;flex:none;width:92px}
.news-list .ttl{font:700 .92rem/1.35 var(--body);color:#333;min-width:0}
.news-list summary:hover .ttl,.news-list details[open] .ttl{color:var(--blue)}
.news-list .body{padding:2px 4px 16px 172px}
.news-list details:target{background:#fffaf0}
.rules{list-style:none;counter-reset:r;display:grid;gap:8px}
.rules li{counter-increment:r;display:flex;gap:10px;font:.86rem/1.55 var(--web);color:#555}
.rules li::before{content:counter(r);flex:none;width:22px;height:22px;border-radius:5px;display:grid;place-items:center;font:700 .72rem var(--body);color:#fff;background:var(--t-notice)}

@media (max-width:1120px){
  .portal.sub{grid-template-columns:210px minmax(0,1fr)}
  .pkgs{grid-template-columns:repeat(2,1fr)}
  .perks{grid-template-columns:1fr}
}
@media (max-width:900px){
  .portal.sub{grid-template-columns:1fr}
  .table.ext .row{grid-template-columns:52px 64px minmax(0,1fr) 60px 110px}
  .c-fame{display:none}
  .page-hero{height:180px}
  .page-hero .deco img{max-height:96px}
  .acct,.dl{grid-template-columns:1fr}
  .acct .preview{min-height:240px}
  .dl-art{min-height:180px}
  .news-list .body{padding-left:4px}
}
@media (max-width:620px){
  .table.ext .row{grid-template-columns:44px 56px minmax(0,1fr) 48px}
  .page-hero{height:auto;min-height:170px}
  .page-hero .wrap{padding:24px 0 34px}
  .page-hero .deco{display:none}
  .row2,.cols2{grid-template-columns:1fr}
  .pkgs{grid-template-columns:1fr 1fr}
  .acct .form-side,.dl-main{padding:18px 16px}
  .news-list summary{flex-wrap:wrap;gap:6px 10px}
  .news-list .date{width:auto}
  .news-list .ttl{flex:1 1 100%;order:3}
  .rk-head .more{margin-left:0}
}

/* Get VIP / GM */
.milestones{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ms{position:relative;border-radius:12px;padding:18px 16px 16px;color:#fff;text-align:center;overflow:hidden;isolation:isolate;border:1px solid rgba(0,0,0,.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.ms::before{content:"";position:absolute;left:0;right:0;top:0;height:50%;background:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.06));z-index:-1}
.ms.views{background:linear-gradient(#ff7a66,#d63a2f)}
.ms.likes{background:linear-gradient(#58adff,#1674e0)}
.ms b{display:block;font:700 clamp(1.8rem,3.4vw,2.4rem)/1 var(--display);text-shadow:0 3px 0 rgba(0,0,0,.2)}
.ms span{display:block;font:700 .95rem var(--display);margin-top:4px}
.ms small{display:block;font:.76rem/1.4 var(--body);opacity:.92;margin-top:6px}
.ms .or{position:absolute}
.ms-note{font:.8rem/1.5 var(--web);color:#777;margin-top:10px;text-align:center}
.ticks,.crosses{list-style:none;display:grid;gap:8px}
.ticks li,.crosses li{position:relative;padding-left:26px;font:.84rem/1.5 var(--web);color:#555}
.ticks li::before,.crosses li::before{position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;font:700 .64rem/18px var(--body);text-align:center}
.ticks li::before{content:"✓";background:#dff5d8;color:#2f9a1d}
.crosses li::before{content:"✕";background:#fde3e1;color:#d33b2f}
.select{appearance:none;background:linear-gradient(#fff,#fbfaf7) padding-box,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='%23777' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center;padding-right:34px}
@media (max-width:620px){ .milestones{grid-template-columns:1fr} }

/* ===================== Sidebar community menu ===================== */
.side-menu{padding:12px 12px 8px}
.side-menu h3{font:700 .92rem var(--display);color:#3a3f48;text-transform:uppercase;margin:0 4px 6px;letter-spacing:.3px}
.side-menu a{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:7px;font:700 .88rem var(--body);color:#444;border-top:1px dotted #e3ddd0}
.side-menu a:first-of-type{border-top:0}
.side-menu a img{width:26px;height:26px;object-fit:contain;flex:none}
.side-menu a:hover{background:#f3f7ff;color:var(--blue)}
.side-menu a.on{background:linear-gradient(90deg,#fff4e0,#fff);color:#000;box-shadow:inset 3px 0 0 var(--maple)}
.bigbtn.g-green{--bgg:linear-gradient(#8adf5f,#3aa51e)}

/* ===================== Modal (glossy title bar window) ===================== */
.modal{position:fixed;inset:0;z-index:90;display:none;place-items:center;background:rgba(10,20,40,.55);padding:16px}
.modal.show{display:grid}
.mwin{width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#fff;border:1px solid #2a5cb8;border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.mwin.wide{width:min(900px,100%)}
.mbar{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;background:linear-gradient(180deg,#7aaef2 0%,#4581dc 48%,#2f68c8 52%,#3a74d6 100%);color:#fff;font:700 1.05rem var(--display);text-shadow:0 1px 1px rgba(10,40,110,.55)}
.mclose{width:28px;height:28px;border-radius:7px;background:rgba(255,255,255,.2);color:#fff;font:700 1.1rem/1 var(--body);display:grid;place-items:center}
.mclose:hover{background:rgba(255,255,255,.35)}
.mbody{padding:18px 20px 20px}
.mbody.flush{padding:0;background:#000}
.player{position:relative;aspect-ratio:16/9;width:100%}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ===================== Videos ===================== */
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.vcard{display:block;text-align:left;border-radius:10px;overflow:hidden;background:#fff;border:1px solid #e0dacd;transition:transform .15s,box-shadow .15s;width:100%}
.vcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.vthumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#2b5fc4 center/cover no-repeat;display:flex;align-items:flex-end;justify-content:center}
.vthumb img.sp{position:relative;max-height:74%;width:auto;margin-bottom:6%;filter:drop-shadow(0 4px 3px rgba(0,0,0,.35))}
.vthumb img.yt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vthumb .play{position:absolute;left:50%;top:50%;width:54px;height:38px;margin:-19px 0 0 -27px;border-radius:11px;background:#e62117;box-shadow:0 4px 12px rgba(0,0,0,.35);transition:transform .15s}
.vthumb .play::after{content:"";position:absolute;left:21px;top:11px;border:8px solid transparent;border-left:13px solid #fff;border-right:0}
.vcard:hover .play{transform:scale(1.08)}
.vthumb .dur{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.8);color:#fff;font:700 .68rem/1 var(--body);padding:3px 5px;border-radius:4px}
.vthumb .sample{position:absolute;left:6px;top:6px;background:rgba(255,255,255,.92);color:#555;font:700 .6rem/1 var(--body);padding:3px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.4px}
.vmeta{padding:9px 11px 11px}
.vmeta b{display:block;font:700 .88rem/1.3 var(--body);color:#2b2f38;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.6em}
.vmeta small{display:flex;align-items:center;gap:6px;margin-top:5px;font:.72rem var(--web);color:#888}
.vmeta small img{width:18px;height:18px;border-radius:4px}

/* ===================== Design-preview badge ===================== */
.preview-note{display:flex;align-items:center;gap:8px;font:700 .74rem var(--body);color:#8a6a1a;background:#fff6dc;border:1px dashed #e8c66a;border-radius:8px;padding:7px 10px}

/* ===================== Character profile ===================== */
.cprof{display:grid;grid-template-columns:300px minmax(0,1fr);padding:0;overflow:hidden}
.cprof .scene{position:relative;min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:22px;background:url("../scene/grass.webp") center bottom/auto 110px repeat-x,url("../scene/clouds.webp") center/cover,linear-gradient(#4a8fe8,#a9d4ff)}
.cprof .scene img.sp{max-height:190px;width:auto;filter:drop-shadow(0 4px 2px rgba(20,50,10,.35))}
.cprof .scene .rankbadge{position:absolute;top:14px;left:14px;font:700 .8rem var(--display);color:#6a4300;background:radial-gradient(circle at 35% 30%,#fff3a8,#ffc21a 55%,#d99400);border:2px solid #fff;border-radius:999px;padding:6px 12px;box-shadow:0 3px 8px rgba(0,0,0,.2)}
.cprof .info{padding:20px 22px}
.cprof h2{font:700 1.8rem/1 var(--display);color:var(--navy);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cprof .sub{margin:8px 0 14px;display:flex;gap:8px;flex-wrap:wrap}
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{background:#f6f3ec;border:1px solid #e6dfcf;border-radius:8px;padding:10px 12px}
.stat small{display:block;font:700 .64rem var(--web);color:#8a7f69;text-transform:uppercase;letter-spacing:.5px}
.stat b{display:block;font:700 1.15rem var(--display);color:var(--navy);margin-top:3px}
.equip{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.eq{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;border:1px solid #e3ddd0;border-radius:10px;background:#fbfaf6;min-width:0}
.eq .slot{width:44px;height:44px}
.eq span{min-width:0}
.eq b{display:block;font:700 .82rem/1.25 var(--body);color:#2b2f38;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eq small{display:block;font:.68rem var(--web);color:#8a7f69;text-transform:uppercase;letter-spacing:.4px}

/* ===================== Game panel (account) ===================== */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;align-items:center;gap:12px}
.kpi .slot{width:46px;height:46px}
.kpi small{display:block;font:700 .66rem var(--web);color:#8a7f69;text-transform:uppercase;letter-spacing:.5px}
.kpi b{display:block;font:700 1.2rem var(--display);color:var(--navy);margin-top:2px}
.chars{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.charcard{border:1px solid #e0dacd;border-radius:10px;overflow:hidden;background:#fbfaf6}
.charcard .scene{height:150px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:12px;background:url("../scene/grass.webp") center bottom/auto 76px repeat-x,linear-gradient(#7fb6f2,#cfe7ff)}
.charcard .scene img{max-height:100px;width:auto}
.charcard .body{padding:10px 12px 12px}
.charcard .body b{font:700 1rem var(--display);color:var(--navy)}
.charcard .body small{display:block;font:.74rem var(--web);color:#777;margin:2px 0 10px}
.charcard .acts{display:flex;gap:6px}
.charcard .acts .gloss{flex:1;height:30px;font-size:.72rem}

/* ===================== Vote ===================== */
.vsites{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.vsite{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid #e0dacd;border-radius:12px;background:#fbfaf6}
.vsite .logo-sq{width:48px;height:48px;border-radius:10px;display:grid;place-items:center;color:#fff;font:700 1.1rem var(--display);flex:none;background:var(--c);box-shadow:inset 0 -3px 0 rgba(0,0,0,.15)}
.vsite .t{flex:1;min-width:0}
.vsite .t b{display:block;font:700 1rem var(--display);color:var(--navy)}
.vsite .t small{display:block;font:.74rem var(--web);color:#777;margin-top:2px}
.vsite .t small.ready{color:#2f9a1d;font-weight:700}
.vsite .gloss{height:36px;padding:0 16px;font-size:.85rem;flex:none}
.vsite .gloss.wait{filter:grayscale(1);opacity:.6;pointer-events:none}

/* ===================== Forums ===================== */
.fgroup+.fgroup{margin-top:16px}
.fgroup h3{font:700 .8rem var(--web);color:#fff;text-transform:uppercase;letter-spacing:.6px;background:linear-gradient(180deg,#7aaef2,#3a74d6);padding:8px 12px;border-radius:8px 8px 0 0;text-shadow:0 1px 1px rgba(10,40,110,.5)}
.frow{display:grid;grid-template-columns:44px minmax(0,1fr) 80px 80px 220px;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-top:0;background:#fff}
.frow:nth-child(odd){background:#fbf9f4}
.frow:last-child{border-radius:0 0 8px 8px}
.frow.hd{background:linear-gradient(#f7f3ea,#ece5d6);font:700 .62rem var(--web);color:#7a6e58;text-transform:uppercase;letter-spacing:.5px;padding:6px 12px}
.frow .slot{width:40px;height:40px}
.frow .bn b{display:block;font:700 .95rem var(--display);color:var(--navy)}
.frow .bn b:hover{color:var(--blue);text-decoration:underline}
.frow .bn small{font:.74rem var(--web);color:#777}
.frow .num{font:700 .85rem var(--display);color:#555;text-align:center}
.frow .last{display:flex;align-items:center;gap:8px;min-width:0;font:.72rem/1.35 var(--web);color:#888}
.frow .last img{width:34px;height:34px;object-fit:cover;object-position:top;border-radius:8px;background:#e6f0fb;flex:none}
.frow .last b{display:block;color:#444;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fstats{display:flex;gap:18px;flex-wrap:wrap;font:.78rem var(--web);color:#777;margin-top:14px}
.fstats b{color:var(--navy)}

/* thread */
.post{display:grid;grid-template-columns:170px minmax(0,1fr);border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.post+.post{margin-top:10px}
.post .who{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px 12px;background:url("../scene/grass.webp") center bottom/auto 60px repeat-x,linear-gradient(#e6f2ff,#f6fbff);border-right:1px solid var(--line);text-align:center}
.post .who img.sp{max-height:92px;width:auto}
.post .who .role{font:700 .62rem var(--body);color:#fff;background:var(--t-notice);padding:2px 8px;border-radius:999px;text-transform:uppercase}
.post .who .role.staff{background:#d63a2f}
.post .who small{font:.7rem var(--web);color:#666}
.post .msg{padding:14px 16px;display:flex;flex-direction:column}
.post .msg .when{font:.72rem var(--web);color:#999;border-bottom:1px dotted #e3ddd0;padding-bottom:8px;margin-bottom:10px}
.post .msg p{font:.92rem/1.65 var(--body);color:#333;flex:1}
.post .msg .acts{display:flex;gap:6px;justify-content:flex-end;margin-top:12px}
.post .msg .acts .gloss{height:28px;padding:0 12px;font-size:.72rem}

/* staff */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.member{border:1px solid #e0dacd;border-radius:12px;overflow:hidden;background:#fbfaf6;text-align:center}
.member .scene{height:160px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:12px;background:url("../scene/grass.webp") center bottom/auto 76px repeat-x,linear-gradient(#ffd7a8,#fff3e0)}
.member .scene img{max-height:110px;width:auto}
.member .body{padding:10px 10px 14px}
.member .body b{display:block;font:700 1rem var(--display);color:var(--navy)}
.member .role{display:inline-block;margin:5px 0;font:700 .62rem var(--body);color:#fff;padding:3px 9px;border-radius:999px;text-transform:uppercase;background:var(--rc,#2f6fd6)}
.member small{display:block;font:.72rem var(--web);color:#888}

/* GM panel */
.pbtn{height:28px;padding:0 10px;font-size:.68rem;border-radius:6px}
.pbtn::before{border-radius:6px 6px 40% 40%/6px 6px 6px 6px}
.acts-cell{display:flex;gap:4px;flex-wrap:wrap}
.g-red{background:linear-gradient(#ff7a66,#d63a2f);--edge:#a82a20}
.gm-notice{margin-top:10px;background:rgba(0,0,0,.75);color:#ffe86b;font:12px/1.4 Arial,sans-serif;padding:6px 10px;border-radius:4px}
/* GM Panel preview of the game's scrolling bars (the v62 ticker: 23 px, yellow on dark blue) */
.tickprev{position:relative;overflow:hidden;height:23px;margin:-4px 0 14px;background:#00286f;border-radius:3px}
.tickprev span{position:absolute;left:0;top:0;white-space:nowrap;color:#ffff22;font:12px/23px Arial,sans-serif}

/* 404 */
.lost{text-align:center;padding:36px 20px 30px}
.lost h2{font:700 2.2rem var(--display);color:var(--navy)}
.lost p{font:.95rem/1.6 var(--body);color:#666;margin:8px auto 18px;max-width:420px}
.lost .scene{height:170px;display:flex;align-items:flex-end;justify-content:center;gap:24px;padding-bottom:16px;border-radius:12px;margin-bottom:18px;background:url("../scene/grass.webp") center bottom/auto 90px repeat-x,url("../scene/clouds.webp") center/cover,linear-gradient(#4a8fe8,#a9d4ff)}
.lost .gloss{display:inline-flex;height:44px;padding:0 22px}

@media (max-width:1120px){
  .vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .team{grid-template-columns:repeat(2,1fr)}
  .frow{grid-template-columns:44px minmax(0,1fr) 70px 180px}
  .frow .num.posts{display:none}
}
@media (max-width:900px){
  .cprof{grid-template-columns:1fr}
  .chars{grid-template-columns:repeat(2,1fr)}
  .frow{grid-template-columns:40px minmax(0,1fr) 60px}
  .frow .last{display:none}
}
@media (max-width:620px){
  .vgrid,.chars,.vsites,.team{grid-template-columns:1fr}
  .statgrid{grid-template-columns:1fr 1fr}
  .post{grid-template-columns:1fr}
  .post .who{flex-direction:row;justify-content:flex-start;gap:10px;border-right:0;border-bottom:1px solid var(--line);padding:10px 12px;background:linear-gradient(#e6f2ff,#f6fbff)}
  .post .who img.sp{max-height:56px}
  .frow{grid-template-columns:40px minmax(0,1fr)}
  .frow .num{display:none}
}

/* ===================== Classic login screen ===================== */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.login-stage{position:relative;overflow:hidden;padding:26px 16px 0;min-height:560px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  background:url("../scene/grass.webp") center bottom/auto 150px repeat-x,url("../scene/clouds.webp") center 30%/cover,linear-gradient(#3f82e6,#a9d4ff)}
.login-stage .beam{position:absolute;top:-30px;width:330px;opacity:.55;pointer-events:none;animation:beam 6s ease-in-out infinite alternate}
.login-stage .beam.b1{left:4%}.login-stage .beam.b2{left:32%;animation-delay:-3s;opacity:.4}
@keyframes beam{from{opacity:.25;transform:translateX(-10px)}to{opacity:.6;transform:translateX(10px)}}
.stage-logo{position:relative;display:flex;align-items:center;gap:10px}
.stage-logo img{width:48px;height:48px;filter:drop-shadow(0 2px 3px rgba(0,30,90,.4))}
.stage-logo b{font:700 clamp(2rem,4vw,2.8rem)/1 var(--display);color:#fff;text-shadow:0 3px 0 rgba(10,40,110,.5),0 8px 20px rgba(0,20,80,.35)}
.stage-logo b span{color:#ffc93c}
.sign-fit{position:relative;width:100%;display:flex;justify-content:center;margin-top:12px;--z:2}
.sign{position:relative;width:368px;height:236px;zoom:var(--z);background:url("../ui/login/signboard.png") no-repeat;image-rendering:pixelated}
.slot-in{position:absolute;left:118px;width:143px;height:21px;border:0;outline:none;background:transparent;color:#fff4d8;font:12px/21px Arial,sans-serif;padding:0 5px;text-shadow:0 1px 0 rgba(60,20,0,.6);caret-color:#fff}
.slot-in:focus{background:rgba(255,230,160,.14);box-shadow:inset 0 0 0 1px rgba(255,220,140,.6);border-radius:2px}
.slot-in.s-id{top:24px}.slot-in.s-pw{top:54px}
.wbtn{position:absolute;display:block;background:no-repeat center/100% 100%;border:0;padding:0}
.b-login{left:268px;top:26px;width:89px;height:42px;background-image:url("../ui/login/btlogin-normal.png")}
.b-login:hover{background-image:url("../ui/login/btlogin-mouseover.png")}.b-login:active{background-image:url("../ui/login/btlogin-pressed.png")}
.b-save{left:72px;top:93px;width:76px;height:23px;background-image:url("../ui/login/bt-idsave.png")}
.b-save:hover{background-image:url("../ui/login/bt-idsave-hover.png")}
.b-save:has(input:checked){background-image:url("../ui/login/bt-idsave-on.png")}
.b-findid{left:154px;top:93px;width:82px;height:23px;background-image:url("../ui/login/bt-findid.png")}
.b-findid:hover{background-image:url("../ui/login/bt-findid-hover.png")}
.b-findpw{left:242px;top:93px;width:66px;height:23px;background-image:url("../ui/login/bt-findpw.png")}
.b-findpw:hover{background-image:url("../ui/login/bt-findpw-hover.png")}
.b-new{left:112px;top:131px;width:92px;height:38px;background-image:url("../ui/login/btnew-normal.png")}
.b-new:hover{background-image:url("../ui/login/btnew-mouseover.png")}.b-new:active{background-image:url("../ui/login/btnew-pressed.png")}
.b-home{left:214px;top:131px;width:93px;height:38px;background-image:url("../ui/login/bthomepage-normal.png")}
.b-home:hover{background-image:url("../ui/login/bthomepage-mouseover.png")}.b-home:active{background-image:url("../ui/login/bthomepage-pressed.png")}
.stage-chars{position:absolute;bottom:34px;left:0;right:0;display:flex;justify-content:space-between;padding:0 6%;pointer-events:none}
.stage-chars .char img{max-height:110px}
@media (max-width:620px){ .login-stage{min-height:420px}.stage-chars{display:none} }

/* Home: Cash Shop picks */
.cs-box{padding:14px 12px 10px}
.cs-box .btitle{margin-bottom:6px}
.cs-list{list-style:none}
.cs-list li{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px dotted #e3ddd0;font:700 .78rem/1.25 var(--body);color:#444}
.cs-list li:first-child{border-top:0}
.cs-list .slot{width:36px;height:36px;border-radius:8px}
.cs-list .slot img{max-width:28px;max-height:28px}
.cs-list .new{margin-left:auto;font:700 .56rem var(--body);font-style:normal;color:#fff;background:#e8352f;padding:2px 6px;border-radius:999px;text-transform:uppercase}

.frow.hd .num{font:inherit;color:inherit}
.frow.hd .last{font:inherit;color:inherit}
@media (max-width:900px){ #reports .tbl{min-width:680px} #vipq .tbl,#gmq .tbl,#bans .tbl{min-width:420px} }
.cols2>*{min-width:0}
.callout.av{background:linear-gradient(90deg,#ffecec,#fff7f5);border-color:#f5c4bd;color:#5c2a24}
.callout.av b{color:#3d1410}
.faq .ans ol li+li{margin-top:4px}

/* ===================== Slime Radio ===================== */
.radio{position:fixed;right:16px;bottom:14px;z-index:80;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
.radio>*{pointer-events:auto}
.rslime{position:relative;width:86px;height:92px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;filter:drop-shadow(0 6px 10px rgba(20,40,80,.28))}
.rslime .slime{position:relative;z-index:2;width:62px;height:auto;margin-bottom:-14px;transform-origin:50% 100%}
.radio.playing .rslime .slime{animation:slimebop .55s ease-in-out infinite alternate}
@keyframes slimebop{from{transform:scale(1.04,.94) translateY(0)}to{transform:scale(.96,1.05) translateY(-5px)}}
.rbox{position:relative;width:72px;height:34px;border-radius:11px;background:linear-gradient(#9ae87f,#4dbb3c 60%,#3a9d2c);border:2px solid #2c7a20;box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(0,0,0,.12)}
.rbox::before{content:"";position:absolute;right:10px;top:-22px;width:2px;height:22px;background:#6f7a86;transform:rotate(18deg);transform-origin:bottom}
.rbox::after{content:"";position:absolute;right:3px;top:-26px;width:7px;height:7px;border-radius:50%;background:#ff7a1a;box-shadow:0 0 0 1px #b34500}
.rbox .grille{position:absolute;left:8px;top:7px;width:30px;height:18px;border-radius:5px;background:radial-gradient(circle,#2c7a20 1.4px,transparent 1.8px) 0 0/6px 6px,#eaffdf}
.rbox .dial{position:absolute;right:9px;top:8px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#ffd75e 60%,#e6a300);border:1.5px solid #9c6b00}
.radio.playing .rbox .dial{animation:dial 2.4s linear infinite}
@keyframes dial{to{transform:rotate(360deg)}}
.rslime .notes{position:absolute;left:0;right:0;top:0;height:40px;pointer-events:none}
.rslime .notes i{position:absolute;bottom:0;font:700 16px/1 Arial,sans-serif;font-style:normal;color:#3a73d2;opacity:0;text-shadow:0 1px 0 #fff}
.rslime .notes i:nth-child(1){left:10px;color:#ff7a1a}.rslime .notes i:nth-child(2){left:40px}.rslime .notes i:nth-child(3){left:66px;color:#2f9a45}
.radio.playing .rslime .notes i{animation:note 2.4s ease-in infinite}
.radio.playing .rslime .notes i:nth-child(2){animation-delay:.8s}.radio.playing .rslime .notes i:nth-child(3){animation-delay:1.6s}
@keyframes note{0%{opacity:0;transform:translate(0,10px) rotate(-10deg)}20%{opacity:1}100%{opacity:0;transform:translate(8px,-34px) rotate(14deg)}}
.rtip{position:absolute;right:92px;bottom:30px;white-space:nowrap;background:#fff;color:#111;font:12px/1.3 var(--body);padding:5px 8px;border-radius:6px;border:1.5px solid #4a4a4a;box-shadow:0 2px 6px rgba(0,0,0,.18);opacity:0;transform:translateX(6px);transition:opacity .15s,transform .15s;pointer-events:none}
.rtip::after{content:"";position:absolute;right:-7px;top:50%;margin-top:-6px;border:6px solid transparent;border-left-color:#4a4a4a;border-right:0}
.rslime:hover .rtip,.rslime:focus-visible .rtip{opacity:1;transform:none}
.radio.playing .rtip,.rslime[aria-expanded="true"] .rtip{display:none}

.rpanel{width:min(270px,calc(100vw - 32px));background:#fff;border:1px solid #2a5cb8;border-radius:12px;overflow:hidden;box-shadow:0 18px 40px rgba(10,30,80,.35)}
.rpanel[hidden]{display:none}
.rbar{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 8px 12px;background:linear-gradient(180deg,#8adf5f 0%,#4dbb3c 48%,#3aa51e 52%,#44b02a 100%);color:#fff;font:700 .95rem var(--display);text-shadow:0 1px 1px rgba(20,70,10,.5)}
.rbar .mclose{width:24px;height:24px;font-size:1rem}
.rnow{display:flex;align-items:center;gap:10px;padding:12px 12px 8px}
.rt{min-width:0;display:flex;flex-direction:column}
.rt small{font:700 .6rem var(--body);color:#8a8f97;text-transform:uppercase;letter-spacing:.6px}
.rt b{font:700 1rem/1.2 var(--display);color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rt em{font:.74rem var(--body);font-style:normal;color:#6b7280}
.eq{display:flex;align-items:flex-end;gap:3px;width:30px;height:28px;flex:none;padding:3px;border-radius:7px;background:#eaffdf;border:1px solid #bfe7b0}
.eq i{flex:1;height:30%;border-radius:2px;background:linear-gradient(#8adf5f,#3aa51e)}
.radio.playing .eq i{animation:eq .9s ease-in-out infinite alternate}
.radio.playing .eq i:nth-child(2){animation-delay:-.3s}.radio.playing .eq i:nth-child(3){animation-delay:-.6s}.radio.playing .eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{from{height:20%}to{height:100%}}
.rprog{height:6px;margin:0 12px;border-radius:999px;background:#e6ebf2;overflow:hidden;cursor:pointer}
.rprog span{display:block;height:100%;width:0;background:linear-gradient(90deg,#8adf5f,#3aa51e)}
.rctl{display:flex;align-items:center;gap:6px;padding:10px 12px}
.rb{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(#fbfbfb,#e3e6ea);border:1px solid #c9ced6;box-shadow:inset 0 1px 0 #fff}
.rb svg{width:16px;height:16px;fill:#3a3f48}
.rb.play{width:42px;height:42px;background:linear-gradient(#8adf5f,#3aa51e);border-color:#2c8316}
.rb.play svg{fill:#fff;width:18px;height:18px}
.rb .i-pause{display:none}
.radio.playing .rb .i-pause{display:block}.radio.playing .rb .i-play{display:none}
.rvol{display:flex;align-items:center;gap:4px;margin-left:auto;min-width:0}
.rvol svg{width:16px;height:16px;fill:#8a8f97;flex:none}
.rvol input{width:72px;accent-color:#3aa51e}
.rlist{list-style:none;max-height:176px;overflow-y:auto;border-top:1px solid #eef0f3;padding:4px 0}
.rlist button{width:100%;display:flex;align-items:baseline;gap:8px;padding:6px 12px;text-align:left;font:700 .8rem var(--body);color:#3a3f48}
.rlist button:hover{background:#f3fbef}
.rlist button[aria-current="true"]{background:linear-gradient(90deg,#eaffdf,#fff);color:#1f6b12;box-shadow:inset 3px 0 0 #3aa51e}
.rlist .n{width:16px;flex:none;font-size:.7rem;color:#9aa1ab}
.rlist .tn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlist small{font:.66rem var(--body);color:#8a8f97;white-space:nowrap}
footer{padding-bottom:110px}
@media (max-width:620px){
  .radio{right:10px;bottom:10px}
  .rslime{width:70px;height:78px}
  .rslime .slime{width:50px;margin-bottom:-12px}
  .rbox{width:60px;height:28px}
  .rbox .grille{width:24px;height:14px;top:6px;left:7px}
  .rbox .dial{width:13px;height:13px;top:6px;right:8px}
  .rtip{display:none}
}
@media (prefers-reduced-motion:reduce){ .radio .slime,.radio .dial,.radio .eq i,.radio .notes i{animation:none!important} }

/* ===================== Hero in-game chat log (transparent, last 4 lines) ===================== */
.cl{flex:none;font:12px/16px Arial,Tahoma,sans-serif;padding:0 6px;border-radius:2px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:rgba(0,0,0,.28);text-shadow:0 1px 1px rgba(0,0,0,.6);animation:clIn .35s ease-out}
@keyframes clIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cl.sm{background:rgba(244,191,224,.9);color:#111;text-shadow:none}
.cl.heart{background:rgba(242,91,91,.88);color:#111;text-shadow:none}
.cl.mega{background:rgba(160,205,255,.9);color:#111;text-shadow:none}
.cl.quiet{color:rgba(255,255,255,.8);font-style:italic}
.cl.notice{color:#7ff3ff}
.cl.whisper{color:#7dff6b}
.chb{display:inline-block;font:700 9px/12px Arial,sans-serif;color:#fff;background:#e0508a;border:1px solid #fff;border-radius:3px;padding:0 3px;vertical-align:1px}
.cl.heart .chb{background:#b3243a}
.cl.mega .chb{background:#2f6fd6}
@media (prefers-reduced-motion:reduce){ .cl{animation:none} }

/* the hidden attribute always wins over component display rules */
[hidden]{display:none !important}

/* ================= Create a Guild (guild.html) ================= */
.gmasters{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.gmaster{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px 10px;border:2px solid #dfe6ef;border-radius:10px;background:#fbfdff;text-align:center;cursor:pointer}
.gmaster input{position:absolute;opacity:0;pointer-events:none}
.gmaster .sp{height:72px;display:flex;align-items:flex-end}
.gmaster .sp img{max-height:72px}
.gmaster b{display:block;font:700 .85rem/1.2 var(--body);color:#2b2f38;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.gmaster small{display:block;font:.68rem/1.3 var(--web);color:var(--muted)}
.gmaster .why{color:#b8431f;font-weight:700}
.gmaster:has(input:checked){border-color:var(--blue);background:#eef5ff;box-shadow:0 0 0 3px rgba(26,132,230,.15)}
.gmaster:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.gmaster.off{opacity:.55;cursor:not-allowed}
.gpicker{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:14px;border:1px solid #dfe6ef;border-radius:10px;background:#f8fbff}
.gpreview{display:flex;flex-direction:column;align-items:center;gap:10px}
.gpreview #bigEmblem{padding:10px;border-radius:10px;background:repeating-conic-gradient(#e9eef5 0 25%,#fff 0 50%) 0 0/16px 16px;border:1px solid #d6dfeb}
.gname-prev{display:flex;align-items:center;gap:5px;padding:4px 8px;border-radius:4px;background:rgba(0,0,0,.72);color:#fff;font:700 11px/1 var(--web);max-width:100%;overflow:hidden}
.gparts{display:flex;flex-direction:column;gap:10px;min-width:0}
.gcats{display:flex;flex-wrap:wrap;gap:4px}
.gcats .pill{padding:5px 10px;border-radius:999px;border:1px solid #cfd8e3;background:#fff;font:700 .72rem/1 var(--web);color:#555}
.gcats .pill.on{background:var(--blue);border-color:var(--blue);color:#fff}
.ggrid,.gcolors{display:flex;flex-wrap:wrap;gap:4px}
.gcell{display:grid;place-items:center;width:42px;height:42px;border-radius:6px;border:2px solid transparent;background:#fff;box-shadow:0 0 0 1px #dfe6ef}
.gcell.sm{width:27px;height:27px;border-radius:5px}
.gcell:hover{box-shadow:0 0 0 1px var(--blue)}
.gcell.on{border-color:var(--blue);background:#eef5ff}
@media (max-width:620px){ .gpicker{grid-template-columns:1fr} .gcell{width:38px;height:38px} }

/* ================= Hero: Henesys from the game's Map.wz, with the v62 status bar ================= */
/* the site background: the MapleStory wallpaper, fixed behind every page */
/* (the original, sharp 1920x1080 airship wallpaper, covering the screen and anchored bottom-right on the airship;
   bg.jpg is the older soft copy, no longer used. The home page uses a crop of it for its hero, below.
   hero/wallpaper-1920.* are the same picture as AVIF/WebP, ~100-130 KB instead of 847 KB; the JPG stays the fallback.) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url("../bg-original.jpg") 100% 100%/max(100vw,177.78vh) auto no-repeat,#1f5fd0;
  background-image:image-set(url("../hero/wallpaper-1920.115f59fb.avif") type("image/avif"),url("../hero/wallpaper-1920.a8ef9978.webp") type("image/webp"),url("../bg-original.jpg") type("image/jpeg"))}
.mshero{position:relative;padding-bottom:0;overflow:hidden;isolation:isolate;background:none;color:#fff}
/* the scene, in game pixels (3600x1000), scaled to the hero's height around --fx */
.ms-stage{position:absolute;left:50%;top:0;width:3600px;height:1000px;transform-origin:0 0;
  transform:translateX(calc(var(--fx,1998px) * var(--k,.8) * -1)) scale(var(--k,.8));z-index:0}
.ms-stage picture,.ms-stage img.full{position:absolute;inset:0}
.ms-stage picture img{display:block;width:3600px;height:1000px;max-width:none;user-select:none;-webkit-user-drag:none}
.ms-back img{transform:translate(var(--px,0px),var(--py,0px)) scale(1.012);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.ms-fore img{transform:translate(calc(var(--px,0px) * -.18),calc(var(--py,0px) * -.18));transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.ms-life{position:absolute;inset:0}
/* actors stand on the ground (top = ground); labels are counter-scaled so they stay readable */
.actor{position:absolute;transform:translateX(-50%)}
.actor.mob{display:block;transform:translate(-50%,-100%);pointer-events:none;line-height:0}
.actor.mob img{display:block;transform:scale(1.45);transform-origin:50% 100%;filter:drop-shadow(0 3px 0 rgba(0,0,0,.12))}
.ms-life .char,.ms-npc{display:flex;flex-direction:column;align-items:center;gap:calc(2px / var(--k,.8))}
.ms-life .char img,.ms-npc img{position:absolute;bottom:100%;left:50%;max-height:none;width:auto;transform:translateX(-50%) scale(.76);transform-origin:50% 100%;margin-bottom:-3px;filter:drop-shadow(0 4px 2px rgba(20,40,10,.25))}
.ms-npc img{transform:translateX(-50%) scale(1.5)}
.ms-life .nametag{font:700 calc(11.5px / var(--k,.8))/1 Arial,Tahoma,sans-serif;padding:calc(3px / var(--k,.8)) calc(6px / var(--k,.8)) calc(4px / var(--k,.8));border-radius:calc(3px / var(--k,.8));
  background:rgba(0,0,0,.66);color:#fff;white-space:nowrap;margin-top:calc(3px / var(--k,.8))}
.ms-life .nametag.gold{color:#ffe38a}
.ms-life .nametag.guild{color:#b9f39b;background:rgba(0,0,0,.5);margin-top:0}
.ms-life .nametag.npc{color:#ffd94a}
.ms-life .player{cursor:default}
.ms-npc{background:none;border:0;padding:0;cursor:pointer;color:inherit}
.ms-npc .bubble{position:absolute;bottom:calc(100% + 132px);left:50%;transform:translateX(-50%);white-space:nowrap;
  font:700 calc(12px / var(--k,.8))/1.3 Arial,Tahoma,sans-serif;color:#222;background:#fffef6;border:calc(1.5px / var(--k,.8)) solid #6b5a3a;
  border-radius:calc(8px / var(--k,.8));padding:calc(5px / var(--k,.8)) calc(9px / var(--k,.8));box-shadow:0 calc(3px / var(--k,.8)) 0 rgba(0,0,0,.15);animation:bob 2.6s ease-in-out infinite}
.ms-npc .bubble::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:calc(7px / var(--k,.8)) solid transparent;border-top-color:#6b5a3a}
.ms-npc:hover .nametag,.ms-npc:focus-visible .nametag{background:#1a5fc9}
.ms-npc:focus-visible{outline:none}
@keyframes bob{50%{transform:translate(-50%,-5px)}}

/* Home hero (10-11 redo, owner: "too large", "takes forever to load"): the same title group (logo, headline, one
   line, two buttons) on the content grid's left edge and the same wallpaper's airship and monster parade on the
   right, scaled to a 340-420px hero so the portal (log-in box, live chat) starts above the fold.
   The picture is assets/hero/airship-*: rows 240-1080 of bg-original.jpg at full width (pixels untouched, only
   scaled down), AVIF/WebP with a JPG fallback, ~60-100 KB instead of 847 KB; index.html preloads it. The hash in
   each name lets the server cache it for a year: a new picture gets a new name.
   --bgw is the picture's width (anchored right), --bgy its top: the parade's feet (row 999 of the wallpaper,
   .3953 * width below the crop's top) stand on the hero's bottom edge, the sail tops sit just under the nav. */
body[data-page="home"]{--navh:66px;--heroH:clamp(340px,22vw,420px);--bgw:calc(var(--heroH) * 2.7);
  --bgy:calc(var(--navh) + var(--heroH) - .3953 * var(--bgw));
  --skyTop:linear-gradient(90deg,#0a41a9,#1752b5 10%,#1a61c2 20%,#1861c1 30%,#2364c6 40%,#3176d5 50%,#488ce4 60%,#5590e0 70%,#5d98e9 80%,#63a3ee 90%,#65a8f3)}
/* under the picture, its own sky: each row's colour averaged over the picture's left 22% (where it fades out),
   lined up row for row with it; above it (narrow screens only) its top row's colours, below it its floor colour */
body[data-page="home"]::before{background:
  linear-gradient(#1554b7,#1959ba 4%,#3174ca 8%,#4a91db 12%,#60a7e8 16%,#7abef3 20%,#97d4fb 24%,#aadcfc 28%,#9cd3f9 32%,#94cef7 36%,#aad9fa 40%,#cdebfd 44%,#dbf2fe 48%,#d8f1fe 52%,#e4f5fe 56%,#edf8fe 60%,#ecf8fe 64%,#eaf7fe 68%,#ebf8fe 72%,#eef9fe 76%,#f1fafe 80%,#f2fbfe 84%,#f3fbfe 88%) left 0 top var(--bgy)/100% calc(.4375 * var(--bgw)) no-repeat,
  var(--skyTop) right 0 top 0/var(--bgw) max(0px,calc(var(--bgy) + 2px)) no-repeat,
  linear-gradient(#1553b7,#1553b7) left 0 top 0/100% max(0px,calc(var(--bgy) + 2px)) no-repeat,
  #f3fbfe}
body[data-page="home"]::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url("../hero/airship-1920.c10b331b.jpg") right 0 top var(--bgy)/var(--bgw) auto no-repeat;
  background-image:image-set(url("../hero/airship-1280.5a7af5f2.avif") type("image/avif") 1x,url("../hero/airship-1920.8ba1e1dd.avif") type("image/avif") 2x,
    url("../hero/airship-1280.5879f937.webp") type("image/webp") 1x,url("../hero/airship-1920.28e56d6d.webp") type("image/webp") 2x,
    url("../hero/airship-1920.c10b331b.jpg") type("image/jpeg") 1x);
  -webkit-mask-image:linear-gradient(90deg,transparent calc(100% - var(--bgw)),#000 calc(100% - .78 * var(--bgw)));
  mask-image:linear-gradient(90deg,transparent calc(100% - var(--bgw)),#000 calc(100% - .78 * var(--bgw)))}
.mshero::before{content:none}
.mshero .leaf:nth-child(n+5){display:none}   /* a few falling leaves, not seven */
.ms-row{position:relative;z-index:3;display:flex;align-items:center;min-height:var(--heroH,auto);padding:18px 0 22px}
.ms-copy{position:relative;z-index:3;text-align:left;max-width:540px}
/* a soft shade behind the group so the white type stays readable on the clouds */
.ms-copy::before{content:"";position:absolute;inset:-60px -110px -50px -140px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(8,30,90,.34),rgba(8,30,90,.14) 60%,transparent)}
.ms-logo{margin:0;line-height:0}
/* translate: the title art has transparent padding on its left, so its lettering lines up with the text below */
.ms-logo img{width:clamp(160px,11.5vw,220px);height:auto;translate:-7.6% 0;filter:drop-shadow(0 6px 14px rgba(5,20,70,.45));animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-6px)}}
.ms-tag{margin:6px 0 0;font:800 clamp(1.3rem,1.75vw,1.7rem)/1.15 var(--display);letter-spacing:.2px;
  text-shadow:0 2px 0 #123a8a,0 -1px 0 #123a8a,2px 0 0 #123a8a,-2px 0 0 #123a8a,0 6px 18px rgba(5,20,70,.5)}
.ms-tag em{display:block;font-style:normal;font-size:.72em;color:#ffd84d;margin-top:4px;
  text-shadow:0 2px 0 #8a4300,0 -1px 0 #8a4300,2px 0 0 #8a4300,-2px 0 0 #8a4300,0 6px 18px rgba(5,20,70,.45)}
.ms-lead{margin:8px 0 0;text-wrap:balance;font:700 clamp(.9rem,1.1vw,1rem)/1.45 var(--body);
  text-shadow:0 1px 0 #123a8a,0 -1px 0 #123a8a,1px 0 0 #123a8a,-1px 0 0 #123a8a,0 2px 10px rgba(5,20,70,.6)}
.ms-ctas{display:flex;gap:12px;justify-content:flex-start;flex-wrap:wrap;margin-top:14px}
.ms-ctas .btn{padding:12px 26px;font-size:1.05rem}
.ms-ctas .btn-maple{position:relative;padding-left:26px}
.ms-ctas .btn-ghost{background:rgba(26,82,190,.62);border-color:rgba(255,255,255,.8)}

/* the in-game chat window, docked at the top of the portal's centre column */
.ms-chat{position:relative;z-index:4;width:100%;
  background:linear-gradient(rgba(16,30,66,.9),rgba(8,16,40,.92));border:1px solid #2a5cb8;border-radius:12px;padding:8px 10px 8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 6px rgba(20,40,90,.18)}
.ms-chat-lines{height:calc(6 * 16px + 5 * 1px);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:1px;margin-bottom:6px}
.ms-chat .cl{background:none;padding:0 4px;text-shadow:1px 1px 0 #000}
.ms-chat .cl.sm{background:rgba(244,191,224,.92);text-shadow:none}
.ms-chat .cl.mega{background:rgba(160,205,255,.92);text-shadow:none}
.ms-chat .cl.quiet{color:#d8d8d8}
.ms-chat-input{display:flex;align-items:center;gap:6px;height:20px}
.ms-chat-input .ms-chat-from{flex:none;width:81px;height:20px;display:flex;align-items:center;justify-content:center;background:url("../ui/hud/chattarget.png") 0 0/81px 20px no-repeat;color:#fff;font:700 11px/1 Arial,Tahoma,sans-serif;text-shadow:1px 1px 0 #000;white-space:nowrap}
.ms-chat-input span:not(.live):not(.dot){flex:1;min-width:0;height:18px;display:flex;align-items:center;padding:0 8px;border-radius:3px;
  background:linear-gradient(#fdfdfd,#e9edf2);color:#7a8494;font:12px/1 Arial,Tahoma,sans-serif;white-space:nowrap;overflow:hidden}
.ms-chat-input .live{flex:none;display:flex;align-items:center;gap:5px;font:700 10px/1 Arial,sans-serif;color:#9dff8a;letter-spacing:.6px}
.ms-chat-input .live .dot{width:7px;height:7px}

/* the v62 status bar (StatusBar.img) */
.ms-hud{position:absolute;z-index:5;left:0;right:0;bottom:0;height:var(--hud);display:flex;align-items:flex-end;justify-content:center;gap:10px;padding:0 10px 2px;
  background:url("../ui/hud/backgrnd.png") 0 0/auto 71px repeat-x;color:#fff;font:12px/1 Arial,Tahoma,sans-serif}
.hud-lv{flex:none;position:relative;width:208px;height:36px;margin-bottom:0;background:url("../ui/hud/lvname.png") no-repeat}
.lv-digits{position:absolute;left:42px;top:10px;display:flex;gap:1px}
.lv-digits img{height:12px;width:auto;image-rendering:pixelated}
.hud-name{position:absolute;left:84px;right:6px;top:5px;display:flex;flex-direction:column;gap:4px;min-width:0}
.hud-name b{font:700 12px/1 Arial,Tahoma,sans-serif;text-shadow:1px 1px 0 #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-name small{font:11px/1 Arial,Tahoma,sans-serif;color:#cfe3ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
.hud-name .dot{width:7px;height:7px;flex:none}
.hud-name .dot.off{background:#e14a3b;box-shadow:0 0 0 3px rgba(225,74,59,.25)}
.hud-gauges{flex:none;display:flex;gap:2px;align-items:flex-end;height:36px;width:356px;padding:2px 8px 4px;background:url("../ui/hud/gaugebox.png") no-repeat}
.gauge{position:relative;flex:1;height:30px;display:block;color:#fff}
.gauge i{position:absolute;left:0;right:0;bottom:0;height:17px;border:1px solid #111;border-radius:2px;background:#333;overflow:hidden}
.gauge i::after{content:"";position:absolute;inset:1px;border-radius:1px;animation:gfill 3.2s ease-out both}
.g-exp i::after{background:linear-gradient(90deg,#f0ff00,#9de800)}
.g-meso i::after{background:linear-gradient(90deg,#ffc400,#ff8a00)}
.g-drop i::after{background:linear-gradient(90deg,#20a8ff,#0a62e8)}
@keyframes gfill{from{right:100%}to{right:1px}}
.gauge span{position:absolute;left:3px;top:0;font:700 10px/1 Arial,sans-serif;letter-spacing:.2px;text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000}
.gauge span b{margin-left:3px;color:#fff;font-size:11px}
.gauge:hover i{box-shadow:0 0 0 1px #fff}
.hud-btns,.hud-keys{flex:none;display:flex;align-items:flex-end;gap:2px;padding-bottom:1px}
.hbtn{display:block;width:54px;height:34px;background:var(--n) no-repeat}
.hbtn:hover,.hbtn:focus-visible{background-image:var(--h)}
.hbtn:active{background-image:var(--p)}
.hkey{display:block;width:28px;height:20px;background:var(--n) no-repeat;margin-bottom:7px}
.hkey.claim{width:20px;height:19px}
.hkey:hover,.hkey:focus-visible{background-image:var(--h)}
.hbtn span,.hkey span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hbtn:focus-visible,.hkey:focus-visible,.gauge:focus-visible{outline:2px solid #ffd84d;outline-offset:1px;border-radius:3px}

@media (max-width:1180px){ .hud-keys{display:none} }
@media (max-width:900px){ .hud-gauges{display:none}
  /* tablets and phones: the title group on top, the airship and its parade below it */
  body[data-page="home"]{--bgw:120vw;--heroH:calc(250px + .36 * var(--bgw))}
  /* the picture spans the screen here: no sky beside it, only its top row's colours above it, which it fades in from */
  body[data-page="home"]::before{background:var(--skyTop) right 0 top 0/var(--bgw) max(0px,calc(var(--bgy) + 16px)) no-repeat,#f3fbfe}
  body[data-page="home"]::after{-webkit-mask-image:linear-gradient(transparent var(--bgy),#000 calc(var(--bgy) + 12px));mask-image:linear-gradient(transparent var(--bgy),#000 calc(var(--bgy) + 12px))}
  .ms-row{align-items:flex-start;padding-top:22px}
}
@media (max-width:620px){
  body[data-page="home"]{--navh:60px;--bgw:140vw;--heroH:calc(290px + .36 * var(--bgw))}
  .ms-row{justify-content:center;padding-top:18px}
  .ms-copy{text-align:center;max-width:none}
  .ms-copy::before{inset:-30px -40px -20px}
  .ms-logo img{width:150px;margin:0 auto;translate:none}
  .ms-tag{font-size:1.3rem}
  .ms-lead{font-size:.88rem;margin-top:8px}
  .ms-ctas{justify-content:center;margin-top:16px}
  .ms-hud{justify-content:space-between;gap:4px}
  .hud-btns .hbtn:nth-child(n+3){display:none}
  .ms-chat{padding:4px 6px}
  .ms-chat-lines{height:calc(3 * 16px + 2px);margin-bottom:4px}
  .ms-ctas .btn{padding:12px 20px;font-size:1rem}
  .ms-npc .bubble{display:none}
}
@media (prefers-reduced-motion:reduce){ .ms-logo img,.ms-npc .bubble{animation:none} .gauge i::after{animation:none} }
a.banner.b-event{display:flex}
a.banner.b-event:hover{filter:brightness(1.05)}
.lst li.none{color:var(--muted);font-size:.78rem;padding:6px 2px}

/* ================= Free Market search (market.html) ================= */
.fm-search{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.fm-q{flex:1;min-width:200px}
.fm-q input{width:100%;font-size:.85rem;padding:9px 10px 9px 30px}
.fm-sort{width:auto;padding:7px 8px;font-size:.8rem}
.fm-kinds{margin-bottom:10px}
.fm-count{margin-left:auto;font:700 .72rem/1 var(--web);color:var(--muted)}
.fm-summary{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:10px;border:1px solid #e9d9ac;border-radius:8px;background:#fff9e6}
.fm-summary[hidden]{display:none}
.fm-summary b{font:700 .95rem/1.2 var(--body);color:#3a2a00}
.fm-summary small{display:block;font:.75rem/1.5 var(--web);color:#6b5a2e}
.fm-summary .more{margin-left:auto}
.fm-tbl td small{display:block;font-size:.7rem;color:var(--muted);font-weight:400}
.fm-tbl td{vertical-align:middle}
.tbl .num{text-align:right;white-space:nowrap}
.fm-item{position:relative;display:flex;align-items:center;gap:10px;outline:none}
.fm-item .slot{width:38px;height:38px;border-radius:7px}
.fm-item .slot img{max-width:32px;max-height:32px}
.fm-item a{color:inherit}
.fm-item a:hover b{color:var(--blue);text-decoration:underline}
.fm-title{display:block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meso{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:#3a3f48}
.meso img{width:16px;height:16px;object-fit:contain}
.fm-where{display:inline-flex;flex-direction:column;font:700 .78rem/1.3 var(--web);color:var(--blue-d);white-space:nowrap}
.fm-where em{font-style:normal;font-weight:400;color:var(--muted)}
.fm-empty{text-align:center;color:var(--muted);padding:28px 12px!important}
/* the in-game item tooltip */
.itip{display:none;position:absolute;z-index:30;left:48px;top:calc(100% + 4px);width:250px;padding:9px 11px;border-radius:6px;
  background:rgba(14,18,32,.95);border:1px solid #6d7fae;box-shadow:0 8px 20px rgba(0,0,0,.35);color:#fff;font:12px/1.55 Arial,Tahoma,sans-serif;text-align:left}
.itip b{display:block;margin-bottom:4px;color:#ffd84d;font-size:13px}
.itip .tt-kind{color:#9fd3ff}
.itip .tt-desc{margin-top:6px;color:#d9dde6;white-space:normal}
.fm-item:hover .itip,.fm-item:focus-within .itip{display:block}
.fm-hero .deco img{filter:drop-shadow(0 4px 2px rgba(0,0,0,.25))}
@media (min-width:621px){ .fm-wrap{overflow:visible} .fm-wrap .tbl th:first-child{border-top-left-radius:10px} .fm-wrap .tbl th:last-child{border-top-right-radius:10px} }
@media (max-width:620px){ .fm-tbl th:nth-child(3),.fm-tbl td:nth-child(3){display:none} .fm-count{margin-left:0;width:100%} }
.dl-btns .gloss.soon{filter:saturate(.55);opacity:.85}

/* ================= Library: Monster Book (library.html) ================= */
.lib-search{position:relative;display:flex;gap:8px}
.lib-q{flex:1}
.lib-q input{width:100%;font-size:.9rem;padding:10px 12px 10px 30px}
.lib-suggest{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);max-height:420px;overflow:auto;background:#fff;border:1px solid #cfd8e3;border-radius:10px;box-shadow:0 12px 28px rgba(20,40,80,.18);padding:6px}
.lib-suggest[hidden]{display:none}
.lib-suggest a{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:7px;color:#2a3a55;font:700 .85rem/1.2 var(--body)}
.lib-suggest a:hover,.lib-suggest a:focus{background:#eef5ff;outline:none}
.lib-suggest a small{margin-left:auto;font:.72rem var(--web);color:var(--muted)}
.lib-suggest .sg-h{padding:6px 8px 2px;font:700 .66rem var(--web);text-transform:uppercase;letter-spacing:.6px;color:#8a8f99}
.lib-suggest .sg-none{padding:12px;color:var(--muted);font-size:.85rem}
.sg-m{width:36px;height:30px;object-fit:contain}
.sg-i{width:28px;height:28px;object-fit:contain}
.lib-all{margin-left:auto}
.mcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.mcard{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 8px 10px;border-radius:10px;
  background:linear-gradient(#fffdf6,#f4ead2);border:2px solid #d8c59a;box-shadow:inset 0 0 0 2px #fff,0 2px 0 rgba(0,0,0,.06);color:#3a2f1a;transition:transform .12s}
.mcard:hover{transform:translateY(-2px);border-color:#c49a3c}
.mcard.boss{background:linear-gradient(#fff6f0,#f6d9c8);border-color:#d79a7a}
.mcard .mpic{height:86px;width:100%;display:flex;align-items:flex-end;justify-content:center;margin:12px 0 6px}
.mcard .mpic img{max-height:86px;max-width:100%;object-fit:contain}
.mcard b{font:700 .84rem/1.2 var(--body)}
.mcard small{font:.7rem/1.4 var(--web);color:#7a6a48}
.mcard .mdrops{color:#2f6fd6;font-weight:700}
.mlv{position:absolute;left:6px;top:6px;padding:2px 6px;border-radius:5px;background:#3a2f1a;color:#ffd84d;font:700 .66rem/1.2 var(--web)}
.mob-name .mlv,.mob-name .mboss{position:static;display:inline-block;vertical-align:middle}
.mboss{position:absolute;right:6px;top:6px;padding:2px 6px;border-radius:5px;background:#d6503a;color:#fff;font:800 .62rem/1.2 var(--web);letter-spacing:.5px}
.mob-head,.item-head{display:flex;gap:18px;align-items:flex-start;margin-bottom:14px}
.mob-pic{flex:none;width:190px;height:170px;display:flex;align-items:flex-end;justify-content:center;padding:10px;border-radius:12px;background:linear-gradient(#bfe0ff,#e8f4ff 70%,#cfe8b8 70%,#a9d38a);border:1px solid #c9dcf5}
.mob-pic.boss{background:linear-gradient(#4a2a5a,#7a4a6a 70%,#5a3a2a 70%,#3a2a1a)}
.mob-pic img{max-width:100%;max-height:150px;object-fit:contain}
.mob-stats{flex:1;min-width:0}
.mob-name{font:700 1.2rem/1.3 var(--display);color:#2b2f38;margin-bottom:8px}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sgrid div{padding:6px 9px;border-radius:7px;background:#f7f4ec;border:1px solid #ece4d2}
.sgrid small{display:block;font:700 .62rem var(--web);text-transform:uppercase;letter-spacing:.4px;color:#8a7e66}
.sgrid b{font:700 .9rem/1.3 var(--body);color:#2b2f38}
.sub-h{margin:16px 0 8px;font:700 1rem/1 var(--cond);text-transform:uppercase;color:#3a3f48}
.sub-h small{margin-left:8px;font:400 .72rem var(--web);text-transform:none;color:var(--muted)}
.rtag{display:inline-block;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c);font:700 .66rem/1.3 var(--web);border:1px solid color-mix(in srgb,var(--c) 35%,#fff)}
.tbl.drops td:last-child{width:90px;text-align:right}
.tbl.drops td small{display:block;font-size:.7rem;color:var(--muted);text-transform:capitalize}
.slot.big{width:64px;height:64px;border-radius:12px}
.slot.big img{max-width:48px;max-height:48px}
.item-head .kind{display:block;font:.78rem var(--web);color:var(--muted);text-transform:capitalize;margin:-4px 0 6px}
.idesc{margin:0 0 8px;font:.85rem/1.5 var(--web);color:#555}
.fm-link{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;background:#fff9e6;border:1px solid #e9d9ac;color:#6b4e00;font:700 .8rem var(--web)}
.fm-link img{width:16px;height:16px}
.fm-link.off{background:#f5f5f5;border-color:#e3e3e3;color:var(--muted);font-weight:400}
.droppers{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.dropper{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;border:1px solid #e6dfcf;background:#fbf9f4;color:#2b2f38}
.dropper:hover{border-color:var(--blue);background:#eef5ff}
.dropper img{width:54px;height:46px;object-fit:contain;flex:none}
.dropper b{display:block;font:700 .84rem/1.2 var(--body)}
.dropper small{font:.7rem var(--web);color:var(--muted)}
.dropper em{margin-left:auto;font:700 .8rem var(--web);font-style:normal;color:#2f6fd6;white-space:nowrap}
.pager .gap{align-self:center;color:var(--muted);padding:0 2px}
@media (max-width:620px){ .mob-head,.item-head{flex-direction:column} .mob-pic{width:100%} .sgrid{grid-template-columns:repeat(2,1fr)} .lib-all{margin-left:0} }
.tag.soon{--c:#c48a17;display:inline-block;width:auto;padding:0 6px;font-size:.6rem;vertical-align:1px}

/* ================= Guide: MapleFresh maps ================= */
.fmaps{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.fmap{border:1px solid #e3dccb;border-radius:12px;overflow:hidden;background:#fff}
.fmap-pic{position:relative;aspect-ratio:800/350;background:#2f68c8 center/cover no-repeat}
.fmap-kind{position:absolute;left:8px;top:8px;padding:3px 9px;border-radius:999px;font:700 .7rem/1.3 var(--web);color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.fmap-kind.town{background:#2f86d6}
.fmap-kind.hunt{background:#d6503a}
.fmap-body{padding:10px 12px 12px}
.fmap-body h3{margin:0 0 4px;font:700 1rem/1.3 var(--body);color:#2b2f38}
.fmap-body h3 code{margin-left:4px;font-size:.78rem;color:#1a5fc9;background:#eef5ff;border-radius:4px;padding:1px 6px}
.fmap-body p{margin:0;font:.8rem/1.5 var(--web);color:#666}
.fmap-mobs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.fmap-mobs a{display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 3px;border-radius:999px;background:#f7f4ec;border:1px solid #ece4d2;font:700 .72rem/1.6 var(--web);color:#3a2f1a}
.fmap-mobs a:hover{border-color:var(--blue);color:var(--blue)}
.fmap-mobs img{width:24px;height:22px;object-fit:contain}
@media (max-width:620px){ .fmaps{grid-template-columns:1fr} }

/* ---------- voice chat (voice.html, sidebar, GM Panel): the in-game Voice window's blue header bars ---------- */
.voice-line{display:flex;align-items:center;justify-content:center;gap:6px;margin:-2px 0 10px;font:700 .7rem/1 var(--web);color:#6b5530}
.voice-line b{color:#2f6fd0}
.voice-line:hover{color:var(--blue)}
.vc-ic{width:16px;height:12px;flex:none}
.vc-chs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.vc-ch{border:1px solid #c9d6e8;border-radius:6px;background:#f7faff;overflow:hidden}
.vc-ch.quiet{opacity:.75}
.vc-head{display:flex;align-items:center;gap:8px;padding:7px 10px;color:#fff;background:linear-gradient(#5d8fd0,#3567b3);border-bottom:1px solid #22477f;font:700 .74rem/1 var(--web);letter-spacing:.2px}
.vc-head span{margin-left:auto;font-size:.8rem}
.vc-names{display:flex;flex-direction:column;gap:2px;padding:8px 10px;min-height:44px}
.vc-names a{display:flex;align-items:center;gap:7px;font:.8rem/1.5 var(--web);color:#222}
.vc-names a.talk{font-weight:700;color:#1f7a1f}
.vc-names a:hover{color:var(--blue)}
.vc-names small{font:.75rem var(--web);color:var(--muted)}
.vc-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#b9c4d4;flex:none}
.vc-dot.talk{background:#3c3;box-shadow:0 0 0 3px rgba(51,204,51,.25)}
.vc-dot.off{background:#d24a3a}
.vc-how{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start}
/* in-game screenshots at 100% only: scaled pixel art turns blurry, so the row wraps instead of shrinking */
.vc-shots{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;justify-content:center}
.vc-shots figure{flex:none;max-width:100%;margin:0;text-align:center;overflow-x:auto}
.vc-shots img{display:block;max-width:none;height:auto;margin:0 auto;border-radius:4px;box-shadow:0 2px 8px rgba(20,40,80,.25)}
.vc-shots figcaption{margin-top:6px;font:700 .68rem var(--web);color:var(--muted)}
.vc-rooms{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vc-room{padding:12px 14px;border-radius:8px;background:#f2f7ff;border:1px solid #d3e2f6}
.vc-room b{display:block;font:700 1rem var(--display);color:var(--navy);margin-bottom:4px}
.vc-room p{margin:0;font:.84rem/1.55 var(--web);color:#555}
@media (max-width:900px){ .vc-how{grid-template-columns:1fr} .vc-shots{justify-content:center} }
@media (max-width:620px){ .vc-rooms{grid-template-columns:1fr} }

/* ---------- gameplay guide (guide.html): chapter bar, job steps, events, town spots, NX, web tools ---------- */
.gnav{position:sticky;top:70px;z-index:5;display:flex;gap:6px;overflow-x:auto;padding:8px;margin:0 0 18px;background:rgba(239,235,227,.94);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:12px;scrollbar-width:none}
.gnav::-webkit-scrollbar{display:none}
.gnav a{flex:none;display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;font:700 .74rem/1 var(--web);color:#555;background:#fff;border:1px solid #d9d2c3;white-space:nowrap}
.gnav a img{width:18px;height:18px}
.gnav a:hover{border-color:var(--blue);color:var(--blue)}
.gnav a.on{background:linear-gradient(#58adff,#1674e0);border-color:#0e57b0;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.25)}
body[data-page="guide"] .sec{scroll-margin-top:132px}
.g-intro{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
.g-tip{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:start;padding:10px 12px;border:1px solid #e3dccb;border-radius:10px;background:#fff;font:.8rem/1.5 var(--web);color:#555}
.g-tip img{width:36px;height:36px;object-fit:contain}
.g-tip b{display:block;font:700 .9rem var(--display);color:var(--navy)}
.jobs-pick{margin:0 0 14px}
.jobs-pick .cls-tabs{border:1px solid #e3ddd0;border-radius:10px}
.jobsum{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin:0 0 14px;font:.82rem/1.4 var(--web);color:#555}
.jobsum b{color:var(--navy)}
.jobsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.jstep{position:relative;border:1px solid #e3dccb;border-radius:12px;background:#fff;padding:16px 14px 12px;display:flex;flex-direction:column;gap:8px}
.jstep .n{position:absolute;top:-12px;left:12px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 .85rem var(--display);color:#fff;background:linear-gradient(var(--c2,#ffb23f),var(--c1,#ff7a00));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 0 rgba(0,0,0,.2)}
.jstep h3{font:700 1rem var(--display);color:var(--navy);margin-top:2px}
.jstep .lv{display:inline-block;font:700 .66rem var(--web);color:#fff;background:var(--c1,var(--blue));padding:3px 8px;border-radius:999px;align-self:flex-start}
.jstep p{font:.78rem/1.5 var(--web);color:#555}
.jstep .npc{display:flex;align-items:center;gap:8px;font:700 .78rem/1.3 var(--web);color:#333;min-height:44px}
.jstep .npc img{height:44px;width:auto;max-width:60px;object-fit:contain;flex:none}
.jstep .npc small{display:block;font-weight:400;color:#777}
.jstep .items{display:flex;gap:4px;align-items:center;font:.72rem var(--web);color:#777}
.jstep .items img{width:28px;height:28px;border-radius:5px;background:#eef3fb;padding:2px}
.jstep .plaza{margin-top:auto;padding:8px 10px;border-radius:8px;background:#fff6e3;border:1px solid #f3d9a6;font:.72rem/1.45 var(--web);color:#5a4520}
.jstep .plaza b{color:#c45a00}
.jpaths{display:flex;flex-wrap:wrap;gap:5px}
.jpaths span{font:.72rem/1.3 var(--web);background:#eef3fb;color:var(--blue-d);padding:3px 8px;border-radius:999px}
.evcards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ev{border:1px solid #e3dccb;border-radius:12px;background:#fff;overflow:hidden;display:flex;flex-direction:column}
.ev-head{display:flex;align-items:center;gap:10px;padding:10px 12px;background:linear-gradient(#5d8fd0,#3567b3);color:#fff}
.ev-head img{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
.ev-head b{font:700 1rem var(--display)}
.ev-head small{display:block;font:700 .66rem var(--web);opacity:.9}
.ev-body{padding:10px 12px 12px;display:grid;gap:7px;font:.78rem/1.5 var(--web);color:#555}
.ev-body .k{font:700 .6rem var(--web);text-transform:uppercase;letter-spacing:.5px;color:#7a6e58;display:block;margin-bottom:1px}
.ev-body .prize{background:#f4f9ee;border:1px solid #d6e9c6;border-radius:8px;padding:7px 9px;color:#2f5a1a}
.spots{display:grid;gap:10px}
.spot{border:1px solid #e3dccb;border-radius:12px;background:#fff;padding:10px 12px}
.spot h3{font:700 .9rem var(--display);color:var(--navy);margin-bottom:8px}
.spot ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px 14px}
.spot li{display:flex;align-items:center;gap:8px;font:.76rem/1.4 var(--web);color:#555}
.spot li img{height:42px;width:42px;object-fit:contain;flex:none}
.spot li b{display:block;color:#333;font-size:.8rem}
.bossgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:14px}
.boss{display:grid;grid-template-rows:70px auto;border:1px solid #e3dccb;border-radius:10px;background:#fff;overflow:hidden;text-align:center}
.boss .pic{display:grid;place-items:center;background:linear-gradient(#f7f3ea,#ece5d6);padding:4px}
.boss .pic img{max-height:62px;max-width:120px;width:auto;object-fit:contain}
.boss .who{padding:6px 8px 8px;font:.72rem/1.35 var(--web);color:#666}
.boss .who b{display:block;font:700 .82rem var(--display);color:var(--navy)}
.boss .who .lv{color:var(--maple-600);font-weight:700}
.nxgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.nxgrid h3{font:700 .95rem var(--display);color:var(--navy);margin-bottom:8px}
.nxl{list-style:none;display:grid;gap:6px}
.nxl li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;font:.76rem/1.45 var(--web);color:#555;padding:8px 10px;border:1px solid #e9e3d6;border-radius:10px;background:#fff}
.nxl li img{width:30px;height:30px;object-fit:contain}
.nxl li b{display:block;color:#333}
.tools{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.tools a{display:block;padding:10px 12px;border:1px solid #e3dccb;border-radius:10px;background:#fff;font:.76rem/1.45 var(--web);color:#555}
.tools a b{display:block;font:700 .9rem var(--display);color:var(--blue)}
.tools a:hover{border-color:var(--blue)}
.kbd{display:inline-block;min-width:24px;padding:2px 7px;border-radius:5px;border:1px solid #b9c4d4;border-bottom-width:3px;background:#fff;font:700 .78rem ui-monospace,Menlo,Consolas,monospace;color:#1d3d6e;text-align:center;line-height:1.3}
/* voice page: step cards and the screenshot gallery */
.vc-steps{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vc-step{border:1px solid #e3dccb;border-radius:12px;background:#fff;padding:12px 14px;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.vc-step .key{width:46px;height:46px;border-radius:9px;display:grid;place-items:center;font:700 1.35rem var(--display);color:#fff;background:linear-gradient(#5d8fd0,#3567b3);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 3px 0 #22477f}
.vc-step>div>b{display:block;font:700 1rem var(--display);color:var(--navy)}
.vc-step p{font:.8rem/1.5 var(--web);color:#555;margin-top:3px}
/* 100% size only (scaled pixel art blurs): wrap instead of shrinking */
.vc-gallery{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 22px;align-items:flex-end;margin-top:14px}
.vc-gallery figure{flex:none;max-width:100%;margin:0;text-align:center;overflow-x:auto}
.vc-gallery img{display:block;max-width:none;height:auto;margin:0 auto;border-radius:4px;box-shadow:0 2px 8px rgba(20,40,80,.25)}
.vc-gallery figcaption{margin-top:6px;font:700 .68rem/1.3 var(--web);color:var(--muted)}
/* home: voice slide */
.s-voice{background:url("../scene/maps/909000000.webp") 50% 45%/cover,#1c2a5c}
.s-voice::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,20,70,.72),rgba(10,20,70,.12) 70%)}
.s-voice .big{--o:#162c6e}
.s-voice .vwin{position:absolute;right:4%;top:50%;transform:translateY(-50%);height:88%;width:auto;image-rendering:auto;border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,.45)}
@media (max-width:900px){ .jobsteps{grid-template-columns:1fr 1fr} .evcards,.nxgrid,.vc-steps,.g-intro{grid-template-columns:1fr} .gnav{top:62px} .s-voice .vwin{display:none} }
@media (max-width:620px){ .jobsteps,.tools{grid-template-columns:1fr} .gnav{top:56px} }

/* ---------- Saturday Treasure Rush (rush.html, home slide, sidebar line) ---------- */
.rush-line img{height:18px;width:auto;image-rendering:pixelated}
.s-rush{background:url("../scene/maps/909000400.webp") 50% 55%/cover,#1c2a5c}
.s-rush::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,20,60,.78),rgba(20,20,60,.15) 70%)}
.s-rush .big{--o:#5a3a05}
.s-rush .chest{position:absolute;right:9%;bottom:12%;height:52%;width:auto;filter:drop-shadow(0 8px 10px rgba(0,0,0,.5));animation:float 4s ease-in-out infinite}
.ev-more{margin-left:auto;font:700 .7rem var(--web);color:#fff;background:rgba(255,255,255,.18);padding:4px 9px;border-radius:999px;white-space:nowrap}
.ev-more:hover{background:rgba(255,255,255,.3)}
.rush-live{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:stretch}
.rush-live .pic{border-radius:12px;background:#2f68c8 center/cover no-repeat;min-height:170px;position:relative;overflow:hidden;border:1px solid #c9d6ea}
.rush-live .pic span{position:absolute;left:10px;bottom:10px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font:700 .72rem var(--web)}
.rush-state{display:flex;flex-direction:column;gap:8px;justify-content:center}
.rush-state .kick{display:inline-block;align-self:flex-start;font:800 .66rem/1 var(--cond);letter-spacing:1.2px;text-transform:uppercase;background:#ff3d3d;color:#fff;padding:5px 9px;border-radius:4px;box-shadow:0 2px 0 #a41c1c}
.rush-state .kick.soon{background:#3a86e0;box-shadow:0 2px 0 #1d4fa8}
.rush-state h3{font:700 1.5rem/1.15 var(--display);color:var(--navy)}
.rush-state h3 em{font-style:normal;color:var(--maple-600)}
.rush-state p{font:.86rem/1.55 var(--web);color:#555}
.rush-count{display:flex;gap:10px}
.rush-count div{min-width:62px;text-align:center;background:linear-gradient(#fff,#f1ece1);border:1px solid #ddd5c6;border-radius:10px;padding:8px 6px}
.rush-count b{display:block;font:700 1.6rem/1 var(--display);color:var(--navy)}
.rush-count small{font:700 .62rem var(--web);color:#8a7f6a;text-transform:uppercase;letter-spacing:.5px}
.rush-top{display:flex;flex-wrap:wrap;gap:6px}
.rush-top span{font:.76rem var(--web);background:#eef3fb;color:var(--blue-d);padding:3px 9px;border-radius:999px}
.rush-top span.first{background:#fff1c2;color:#7a5200}
.chest-tbl td:first-child{width:120px}
.chest-tbl .cimg{display:flex;align-items:center;gap:10px}
.chest-tbl .cimg img{max-height:46px;width:auto;max-width:72px;image-rendering:pixelated}
.chest-tbl .cimg b{color:var(--navy)}
.chest-tbl .pts{font:700 1rem var(--display);color:var(--maple-600);white-space:nowrap}
.rush-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.rush-step{border:1px solid #e3dccb;border-radius:12px;background:#fff;padding:14px 12px 12px;position:relative}
.rush-step .n{position:absolute;top:-12px;left:12px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 .85rem var(--display);color:#fff;background:linear-gradient(#ffb23f,#ff7a00);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 0 #c45a00}
.rush-step>b{display:block;font:700 1rem var(--display);color:var(--navy);margin:4px 0 4px}
.rush-step p{font:.78rem/1.5 var(--web);color:#555}
.arena-list{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.arena{border:1px solid #e3dccb;border-radius:10px;overflow:hidden;background:#fff;font:.74rem/1.3 var(--web);color:#555;text-align:center}
.arena .pic{aspect-ratio:16/7;background:#2f68c8 center/cover}
.arena b{display:block;padding:6px 6px 7px;color:var(--navy);font:700 .78rem var(--display)}
.arena.now{outline:3px solid var(--maple);outline-offset:-3px}
.arena.now b::after{content:" · this week";color:var(--maple-600);font:700 .64rem var(--web)}
.res-ev{border:1px solid #e3dccb;border-radius:12px;background:#fff;padding:12px 14px}
.res-ev + .res-ev{margin-top:10px}
.res-ev h3{font:700 .95rem var(--display);color:var(--navy);display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.res-ev h3 small{font:400 .74rem var(--web);color:#777}
.res-ev ol{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:4px 14px;margin-top:8px}
.res-ev li{display:flex;gap:8px;align-items:baseline;font:.8rem var(--web);color:#444;padding:3px 0;border-bottom:1px dotted #e3dccb}
.res-ev li i{font:700 .72rem var(--web);color:#fff;background:#9aa4b8;min-width:22px;text-align:center;border-radius:4px;padding:2px 0;font-style:normal}
.res-ev li.r1 i{background:#f0b400}.res-ev li.r2 i{background:#8fa0b4}.res-ev li.r3 i{background:#c2793c}
.res-ev li b{color:#222}
.res-ev li small{margin-left:auto;color:#777;white-space:nowrap}
@media (max-width:900px){ .rush-live{grid-template-columns:1fr} .rush-steps{grid-template-columns:1fr 1fr} .arena-list{grid-template-columns:repeat(3,1fr)} .s-rush .chest{display:none} }
@media (max-width:620px){ .rush-steps{grid-template-columns:1fr} .arena-list{grid-template-columns:1fr 1fr} }

/* ================= Simplified layout (10-04): grouped nav, short sidebar, calmer home ================= */
.finds.one{grid-template-columns:1fr}
.finds.one .gloss{font-size:.7rem}
.pnav .nl.vip{color:#ffe07a}
.pnav .nav-more .dd{right:auto;left:0}
.pnav li.nav-more:last-of-type .dd{left:auto;right:0}
#media[hidden]{display:none}
.ms-chat-lines{height:calc(3 * 16px + 2 * 1px)}
.panel-head .more{color:#eaf3ff;align-self:flex-end}
.panel-head .more:hover{color:#fff}
.why.why4{grid-template-columns:repeat(2,1fr)}
.why.why4 .it{border-right:0;border-bottom:1px dotted #d9d2c3}
.why.why4 .it:nth-child(odd){border-right:1px dotted #d9d2c3}
.why.why4 .it:nth-last-child(-n+2){border-bottom:0}
.tiles.tiles4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1180px){
  .pnav.open .nav-more{flex-direction:column}
  .pnav.open .nav-more>.nl{display:flex;pointer-events:none;padding:12px 20px 4px;font-size:.72rem;opacity:.75}
  .pnav.open .nav-more>.nl svg{display:none}
}
@media (max-width:620px){
  .why.why4,.tiles.tiles4{grid-template-columns:1fr 1fr}
  .why.why4{grid-template-columns:1fr}
}
.vip-no{font:700 1rem var(--display);color:var(--navy);margin:18px 0 8px}

/* Refer a Friend -> VIP (account.html card, vip.html, home ad, VIP badge) */
.vipb{display:inline-block;vertical-align:middle;margin-left:4px;padding:0 6px;font:700 .56rem/15px var(--web);letter-spacing:.5px;color:#fff;border-radius:3px;background:linear-gradient(#c27cf0,#7a2fb0);box-shadow:inset 0 1px 0 rgba(255,255,255,.4);text-transform:uppercase;white-space:nowrap}
.pod .vipb{margin:3px 0 0}
.callout.vip{background:linear-gradient(90deg,#f4e8ff,#fbf6ff);border-color:#dcc3f2;color:#3d2557}
.callout.vip b{color:#2a0f45}
.callout code,.ref-intro code{font:700 .85em var(--web);background:rgba(122,47,176,.1);color:#5a1f8a;padding:1px 5px;border-radius:4px}
.ref-intro{font:.86rem/1.55 var(--web);color:#555;margin:0 0 12px}
.reflink{display:flex;gap:8px;align-items:center;margin-bottom:14px}
.reflink .input{flex:1;min-width:0;font:700 .85rem var(--web);color:var(--navy);background:#f7f9fd}
.reflink .gloss{height:40px;padding:0 18px;flex:none}
.refprog{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin-bottom:14px}
.refprog .exp{height:18px}
.refprog .exp em{font-size:10px;line-height:18px}
.refprog .exp span{background:linear-gradient(180deg,#f0d2ff,#c27cf0 45%,#7a2fb0)}
.refprog b{font:700 1rem var(--display);color:var(--navy);white-space:nowrap}
.rstat{display:inline-block;font:700 .66rem/18px var(--web);padding:0 8px;border-radius:999px;color:#fff;background:#8a8f99;white-space:nowrap}
.rstat.ok{background:#3aa655}.rstat.lv{background:#e39a1c}.rstat.no{background:#c0392b}
.ms.friends{background:linear-gradient(#c27cf0,#7a2fb0)}
.ms.level{background:linear-gradient(#ffc24a,#e2862a)}
.ad-3{display:grid;grid-template-columns:52px 1fr;gap:4px 10px;align-items:center;padding:14px 12px;background:radial-gradient(circle at 20% 30%,#d79bff,#8a2a9e 60%,#4a1670);text-shadow:0 1px 2px rgba(50,0,70,.6)}
.ad-3 img{grid-row:span 2;width:44px;height:44px;object-fit:contain;justify-self:center}
.ad-3 .t{font:italic 800 1.05rem/1 var(--cond);text-transform:uppercase}
.ad-3 .t em{font-style:inherit;color:#ffe14a}
.ad-3 small{font:700 .7rem/1.35 var(--body);opacity:.92}
.ad-3 .gloss{grid-column:1/-1;height:28px;font-size:.78rem;margin-top:6px}
@media (max-width:620px){ .reflink{flex-wrap:wrap}.reflink .gloss{width:100%} }