/* Layout: a 2008 MMO portal. Sky band with drifting clouds, fixed-width frame, glossy nav,
   rotating "flash" banner, left rail of widgets + news column, full-width feature boards, grass footer. */
:root{
  --sky-top:#7cc7ef; --sky-bottom:#dff3fc; --cloud:#ffffff;
  --page:#cfe9f6;
  --paper:#fffaf0; --paper-2:#fbf0db; --line:#d9c3a0; --ink:#3a2a22; --ink-soft:#6f5a4b;
  --brand:#6a4ca8; --brand-2:#8d6fd0; --brand-ink:#ffffff;
  --gs-1:#ffe07a; --gs-2:#ffa526; --gs-3:#ff7c00; --gs-edge:#b45400;
  --go:#4fae2e; --tag-update:#2f86d6; --tag-content:#e0751c; --tag-notice:#c2384b;
  --grass:#78c14a; --grass-2:#4f9a2f; --dirt:#8a5a36; --dirt-2:#6b4327;
  --shadow:rgba(58,42,34,.25);
  --f-display:"Fredoka","Trebuchet MS","Arial Rounded MT Bold",sans-serif;
  --f-num:"Bungee","Impact","Arial Black",sans-serif;
  --f-pixel:"Silkscreen","Lucida Console",monospace;
  --f-body:Verdana,Tahoma,Geneva,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --sky-top:#141030; --sky-bottom:#3a2c66; --cloud:#5a4c8c; --page:#231c42;
  --paper:#2c2547; --paper-2:#352d55; --line:#54497c; --ink:#f3ead8; --ink-soft:#c6b9de;
  --brand:#7b5cc4; --brand-2:#9a7ee0; --brand-ink:#ffffff;
  --grass:#3f7a3a; --grass-2:#2c5a2a; --dirt:#4a3226; --dirt-2:#36241b; --shadow:rgba(0,0,0,.45);
  --tag-update:#4da3ef; --tag-content:#f08a35; --tag-notice:#e05a6c; --go:#6fd04a;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --sky-top:#141030; --sky-bottom:#3a2c66; --cloud:#5a4c8c; --page:#231c42;
  --paper:#2c2547; --paper-2:#352d55; --line:#54497c; --ink:#f3ead8; --ink-soft:#c6b9de;
  --brand:#7b5cc4; --brand-2:#9a7ee0; --brand-ink:#ffffff;
  --grass:#3f7a3a; --grass-2:#2c5a2a; --dirt:#4a3226; --dirt-2:#36241b; --shadow:rgba(0,0,0,.45);
  --tag-update:#4da3ef; --tag-content:#f08a35; --tag-notice:#e05a6c; --go:#6fd04a;
  color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--page);color:var(--ink);font:12px/1.55 var(--f-body);position:relative;overflow-x:hidden}
a{color:var(--brand);font-weight:bold;text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--gs-2);outline-offset:2px;border-radius:4px}
img{display:block}
h1,h2,h3{font-family:var(--f-display);font-weight:700;text-wrap:balance;margin:0}

/* ---------- sky ---------- */
.sky{position:absolute;inset:0 0 auto;height:820px;background:linear-gradient(var(--sky-top),var(--sky-bottom) 70%,var(--page));z-index:-1;overflow:hidden}
.cloud{position:absolute;width:180px;height:54px;border-radius:60px;background:var(--cloud);opacity:.85;filter:blur(.5px);animation:drift linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;background:var(--cloud);border-radius:50%}
.cloud::before{width:80px;height:80px;left:24px;top:-38px}
.cloud::after{width:100px;height:100px;left:70px;top:-52px}
.c1{top:120px;animation-duration:110s;left:-200px}
.c2{top:300px;transform:scale(.7);animation-duration:150s;animation-delay:-60s;left:-200px}
.c3{top:520px;transform:scale(1.2);animation-duration:180s;animation-delay:-120s;left:-200px;opacity:.6}
.c4{top:60px;transform:scale(.55);animation-duration:130s;animation-delay:-30s;left:-200px}
@keyframes drift{to{left:110%}}

.wrap{max-width:996px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* ---------- header ---------- */
.top{padding-block:14px 0}
.top-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.logo{position:relative;display:inline-flex;align-items:center;text-decoration:none!important;padding:0 34px}
.logo .tail{position:absolute;top:18px;width:54px;height:44px;background:#e9dcc4;border:3px solid #4a372c;z-index:0}
.logo .tail.l{left:0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,30% 50%);border-right:0}
.logo .tail.r{right:0;clip-path:polygon(0 0,100% 0,70% 50%,100% 100%,0 100%);border-left:0}
.logo .plate{position:relative;z-index:1;background:#f6ecd8;border:3px solid #4a372c;border-radius:14px;padding:6px 26px 8px;box-shadow:0 4px 0 #4a372c,0 10px 18px var(--shadow)}
.logo .plate::before,.logo .plate::after{content:"";position:absolute;left:14px;right:14px;border-top:3px dashed #cbbda3}
.logo .plate::before{top:6px}.logo .plate::after{bottom:6px}
.logo b{font:700 52px/1 var(--f-display);color:#3a2a22;letter-spacing:.5px;display:block;padding-top:4px}
.alpha{position:absolute;right:-6px;top:-10px;z-index:2;font:13px/1 var(--f-num);color:#fff;background:#e2364b;border:2px solid #fff;padding:5px 7px 4px;border-radius:6px;transform:rotate(9deg);box-shadow:0 3px 0 #8f1b2a}
.sparkle{position:absolute;width:14px;height:14px;z-index:2;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:twinkle 2.4s ease-in-out infinite}
.sparkle.s1{left:28px;top:-4px}.sparkle.s2{right:40px;bottom:-6px;animation-delay:1.2s;width:10px;height:10px}
@keyframes twinkle{0%,100%{transform:scale(.4) rotate(0);opacity:.3}50%{transform:scale(1) rotate(45deg);opacity:1}}
.mini{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:6px}
.mini a{font:10px var(--f-pixel);color:var(--ink);background:var(--paper);border:1px solid var(--line);padding:3px 8px;border-radius:10px;font-weight:normal}
.theme-btn{font:10px var(--f-pixel);color:var(--ink);background:var(--paper);border:1px solid var(--line);padding:3px 8px;border-radius:10px;cursor:pointer}

nav.gnb{margin-top:14px;position:relative;z-index:20;background:linear-gradient(#9d82dc,var(--brand) 52%,#553a8f 53%,#6f52b0);border:2px solid #3e2a6e;border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 0 #3e2a6e,0 8px 16px var(--shadow)}
.gnb>ul{list-style:none;margin:0;padding:0 8px;display:flex;flex-wrap:wrap}
.gnb>ul>li{position:relative}
.gnb>ul>li>a{display:block;padding:11px 16px 10px;font:600 15px/1 var(--f-display);color:#fff;text-shadow:0 2px 0 #3e2a6e;text-decoration:none!important}
.gnb>ul>li+li>a{border-left:1px solid rgba(255,255,255,.18)}
.gnb>ul>li>a:hover,.gnb>ul>li:focus-within>a{color:var(--gs-1)}
.gnb .dl{margin-left:auto}
.gnb .dl>a{color:var(--gs-1)}
.sub{position:absolute;left:4px;top:100%;min-width:170px;list-style:none;margin:0;padding:6px;background:var(--paper);border:2px solid #3e2a6e;border-radius:0 0 10px 10px;box-shadow:0 8px 16px var(--shadow);display:none}
.gnb li:hover>.sub,.gnb li:focus-within>.sub{display:block}
.sub a{display:block;padding:5px 8px;color:var(--ink);font-weight:normal;border-radius:5px}
.sub a::before{content:"▸ ";color:var(--gs-3)}
.sub a:hover{background:var(--paper-2);text-decoration:none}

/* ---------- flash banner ---------- */
.banner{margin-top:14px;position:relative;border:3px solid #3e2a6e;border-radius:16px;overflow:hidden;aspect-ratio:960/380;max-width:100%;background:#2a2147;box-shadow:0 8px 20px var(--shadow)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;pointer-events:none}
.slide.on{opacity:1;pointer-events:auto}
.slide>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,18,60,.72),rgba(30,18,60,.15) 55%,transparent)}
.slide .copy{position:absolute;left:4%;top:12%;width:55%;z-index:2;color:#fff}
.kicker{display:inline-block;font:11px var(--f-pixel);background:#e2364b;color:#fff;padding:3px 8px 2px;border-radius:4px;margin-bottom:10px}
.slide h2{font:700 clamp(26px,5.4vw,54px)/.95 var(--f-display);color:#fff;-webkit-text-stroke:7px #3e2a6e;paint-order:stroke fill;text-shadow:0 5px 0 #2a1a52;letter-spacing:.5px}
.slide h2 em{font-style:normal;color:var(--gs-1)}
.slide p{font:600 clamp(12px,1.7vw,16px)/1.35 var(--f-display);margin:12px 0 16px;max-width:30em;text-shadow:0 2px 2px #2a1a52}
.slide .pop{position:absolute;z-index:2;filter:drop-shadow(0 6px 4px rgba(0,0,0,.35));animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px)}}
.dots{position:absolute;right:14px;bottom:12px;z-index:3;display:flex;gap:6px}
.dots button{font:12px var(--f-num);width:30px;height:26px;border-radius:7px;border:2px solid #3e2a6e;background:var(--paper);color:var(--ink);cursor:pointer}
.dots button[aria-current="true"]{background:linear-gradient(var(--gs-1),var(--gs-3));color:#fff;text-shadow:0 1px 0 var(--gs-edge)}

/* glossy buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 16px/1 var(--f-display);color:#fff;padding:11px 20px 12px;border-radius:12px;border:2px solid var(--gs-edge);background:linear-gradient(var(--gs-1),var(--gs-2) 49%,var(--gs-3) 50%,#ffae3b);text-shadow:0 2px 0 var(--gs-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 0 var(--gs-edge),0 6px 10px var(--shadow);text-decoration:none!important;cursor:pointer;overflow:hidden}
.btn::before{content:"";position:absolute;left:8%;right:8%;top:2px;height:42%;border-radius:10px 10px 40% 40%;background:linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,.1))}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 0 var(--gs-edge)}
.btn.purple{--gs-1:#c4adf5;--gs-2:#8d6fd0;--gs-3:#6a4ca8;--gs-edge:#3e2a6e}
.btn.green{--gs-1:#c6f08e;--gs-2:#7cc94a;--gs-3:#4fae2e;--gs-edge:#2f6e18}
.btn.sm{font-size:13px;padding:8px 12px 9px;border-radius:9px}

/* ticker */
.ticker{margin-top:12px;display:flex;align-items:center;gap:10px;background:var(--paper);border:2px solid var(--line);border-radius:30px;padding:5px 6px 5px 6px;overflow:hidden}
.ticker b{flex:none;font:11px var(--f-pixel);color:#fff;background:#e2364b;padding:4px 10px 3px;border-radius:20px}
.tick-track{overflow:hidden;flex:1;min-width:0;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.tick-run{display:inline-flex;gap:40px;white-space:nowrap;animation:tick 40s linear infinite;color:var(--ink-soft)}
.tick-run span::before{content:"★ ";color:var(--gs-2)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- main frame ---------- */
.frame{display:grid;grid-template-columns:232px minmax(0,1fr);gap:16px;margin-top:16px;align-items:start}
.rail{display:grid;gap:14px}
.col{display:grid;gap:16px;min-width:0}
.box{background:var(--paper);border:2px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 3px 0 var(--line)}
.box>h3,.board>h2{display:flex;align-items:center;gap:8px;background:linear-gradient(var(--brand-2),var(--brand) 55%,#5a3f96);color:var(--brand-ink);font-size:15px;padding:7px 12px 6px;text-shadow:0 2px 0 #3e2a6e;border-bottom:2px solid #3e2a6e}
.box>h3 img,.board>h2 img{width:26px;height:26px;object-fit:contain;margin:-6px 0;filter:drop-shadow(0 1px 0 #3e2a6e)}
.box>h3 small{margin-left:auto;font:10px var(--f-pixel);color:var(--gs-1);text-shadow:none}
.box .in{padding:12px}

.start{background:linear-gradient(var(--paper-2),var(--paper));text-align:center}
.start .btn.big{width:100%;font-size:24px;padding:16px 10px 17px;flex-direction:column;gap:4px}
.start .btn.big small{font:10px var(--f-pixel);text-shadow:none;color:#fff7e0;letter-spacing:.5px}
.start .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.start p{margin:10px 0 0;color:var(--ink-soft);font-size:11px}

.newbie{display:flex;align-items:center;gap:10px;padding:10px 12px;background:linear-gradient(135deg,#fff3c4,#ffe08a);border:2px solid #e3b440;border-radius:12px;color:#5a3d10;text-decoration:none!important;box-shadow:0 3px 0 #e3b440}
.newbie img{width:56px;height:56px;object-fit:contain;flex:none;animation:bob 2.6s ease-in-out infinite}
.newbie b{font:700 15px/1.1 var(--f-display);display:block}
.newbie span{font-size:11px;font-weight:normal}
.newbie em{font-style:normal;color:#d0461a;font-weight:bold}

.status dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 10px}
.status dt{color:var(--ink-soft)}
.status dd{margin:0;text-align:right;font-weight:bold}
.on-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--go);box-shadow:0 0 0 3px color-mix(in srgb,var(--go) 30%,transparent);margin-right:5px;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--go) 0%,transparent)}}
.status .note{margin:10px 0 0;font-size:10px;color:var(--ink-soft)}

.discord .in{display:grid;gap:10px}
.bubble{position:relative;background:var(--paper-2);border:2px solid var(--line);border-radius:12px;padding:8px 10px;font-size:11px}
.bubble::after{content:"";position:absolute;left:22px;bottom:-9px;width:14px;height:14px;background:var(--paper-2);border-right:2px solid var(--line);border-bottom:2px solid var(--line);transform:rotate(45deg)}
.discord .who{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink-soft)}
.discord .who img{width:40px;height:40px;object-fit:contain;animation:bob 3.2s ease-in-out infinite}

.poll form{display:grid;gap:6px}
.poll label{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;background:var(--paper-2);cursor:pointer}
.poll label img{width:22px;height:22px;object-fit:contain}
.poll .btn{margin-top:4px}
.poll .thanks{font-size:11px;margin:0}

.cotd{text-align:center}
.cotd .card{background:linear-gradient(#fff,#f3e6c9);border:3px solid #c9a35b;border-radius:10px;padding:10px 8px 8px;color:#3a2a22;box-shadow:inset 0 0 0 2px #fff}
.cotd .card img{width:110px;height:96px;object-fit:contain;margin:0 auto}
.cotd .card b{display:block;font:700 15px var(--f-display)}
.cotd .lv{font:12px var(--f-num);color:#c2384b}
.cotd p{font-size:11px;color:var(--ink-soft);margin:8px 0 0}

/* news */
.news-top{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px}
.tabs{display:flex;gap:2px;padding:8px 10px 0;background:var(--paper-2);border-bottom:2px solid var(--line);flex-wrap:wrap}
.tabs button{font:600 12px var(--f-display);border:2px solid var(--line);border-bottom:0;background:var(--paper-2);color:var(--ink-soft);padding:6px 12px 5px;border-radius:8px 8px 0 0;cursor:pointer;margin-bottom:-2px}
.tabs button[aria-selected="true"]{background:var(--paper);color:var(--ink)}
.newslist{list-style:none;margin:0;padding:6px 12px 10px}
.newslist li{border-bottom:1px dotted var(--line)}
.newslist li:last-child{border-bottom:0}
.newslist details>summary{list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 0;cursor:pointer}
.newslist summary::-webkit-details-marker{display:none}
.newslist summary:hover .t{text-decoration:underline}
.tag{font:9px var(--f-pixel);color:#fff;padding:3px 6px 2px;border-radius:4px;min-width:62px;text-align:center}
.tag.update{background:var(--tag-update)}.tag.content{background:var(--tag-content)}.tag.notice{background:var(--tag-notice)}
.newslist .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.newslist .d{font:11px var(--f-body);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.newslist details p{margin:0 0 10px;padding:8px 10px;background:var(--paper-2);border-radius:8px;color:var(--ink)}
.new-ico{font:9px var(--f-num);color:#e2364b;margin-left:4px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.more{display:block;text-align:right;padding:0 12px 10px;font-size:11px}

.feature-card{position:relative;display:block;color:#fff!important;text-decoration:none!important;overflow:hidden;border-radius:0 0 10px 10px}
.feature-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.feature-card .cap{position:absolute;inset:auto 0 0;padding:28px 12px 10px;background:linear-gradient(transparent,rgba(30,18,60,.9))}
.feature-card .cap b{font:700 17px/1.1 var(--f-display);display:block;-webkit-text-stroke:3px #3e2a6e;paint-order:stroke fill}
.feature-card .cap span{font-size:11px;font-weight:normal}
.spot{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px dotted var(--line)}
.spot img{width:54px;height:46px;object-fit:contain;flex:none}
.spot p{margin:0;font-size:11px}

/* why */
.why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px}
.why article{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;align-items:start;background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:10px}
.why article img{width:72px;height:64px;object-fit:contain}
.why h3{font-size:16px;line-height:1.15;color:var(--brand)}
.why p{margin:4px 0 0;font-size:11.5px}

/* boards (full width) */
.board{margin-top:18px;background:var(--paper);border:2px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 3px 0 var(--line)}
.board>h2{font-size:20px;padding:9px 14px 8px}
.board>h2 small{margin-left:auto;font:10px var(--f-pixel);color:var(--gs-1);text-shadow:none}
.board .in{padding:14px}

.classes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cls{border:2px solid var(--line);border-radius:12px;padding:12px;background:linear-gradient(var(--paper-2),var(--paper));display:grid;gap:8px;align-content:start}
.cls header{display:flex;align-items:center;gap:10px}
.cls header img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 3px 2px var(--shadow))}
.cls h3{font-size:24px;line-height:1}
.cls .role{font:10px var(--f-pixel);color:var(--ink-soft)}
.cls blockquote{margin:0;font:600 13px var(--f-display);color:var(--brand)}
.bars{display:grid;gap:4px}
.bar{display:grid;grid-template-columns:24px minmax(0,1fr) 34px;gap:6px;align-items:center;font:10px var(--f-pixel)}
.bar i{display:block;height:10px;border-radius:6px;background:var(--paper-2);border:1px solid var(--line);overflow:hidden}
.bar i::after{content:"";display:block;height:100%;width:var(--w);border-radius:6px}
.bar.hp i::after{background:linear-gradient(#ff8a8a,#e2364b)}
.bar.mp i::after{background:linear-gradient(#8ac8ff,#2f86d6)}
.bar span{text-align:right;font-variant-numeric:tabular-nums}
.skills{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0;list-style:none}
.skills li{font-size:10.5px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:1px 7px}
.cls-note{margin:12px 0 0;font-size:11.5px;color:var(--ink-soft);display:flex;align-items:center;gap:8px}
.cls-note img{width:34px;height:34px;object-fit:contain}

.movies{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:12px}
.player{background:#120c24;border:3px solid #3e2a6e;border-radius:10px;overflow:hidden}
.player video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.player .now{padding:7px 10px;color:#fff;font:600 13px var(--f-display);display:flex;justify-content:space-between;gap:8px}
.player .now small{font:10px var(--f-pixel);color:var(--gs-1)}
.playlist{display:grid;gap:8px;align-content:start}
.playlist button{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;align-items:center;text-align:left;background:var(--paper-2);border:2px solid var(--line);border-radius:10px;padding:5px;cursor:pointer;color:var(--ink);font:11px var(--f-body)}
.playlist button[aria-current="true"]{border-color:var(--gs-3);background:color-mix(in srgb,var(--gs-1) 30%,var(--paper))}
.playlist img{width:96px;aspect-ratio:16/9;object-fit:cover;border-radius:6px}
.playlist b{font:600 13px/1.1 var(--f-display);display:block}

.shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.shots button{padding:0;border:3px solid #fff;border-radius:8px;overflow:hidden;cursor:zoom-in;background:#000;box-shadow:0 2px 0 var(--line),0 4px 8px var(--shadow);transition:transform .15s}
.shots button:hover{transform:translateY(-3px) rotate(-.6deg)}
.shots img{width:100%;aspect-ratio:16/9;object-fit:cover}
.shots-note{margin:12px 0 0;font-size:11px;color:var(--ink-soft)}

.lightbox{position:fixed;inset:0;z-index:50;background:rgba(18,10,36,.86);display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.lb-in{max-width:min(1100px,100%);width:100%;background:var(--paper);border:3px solid #3e2a6e;border-radius:12px;overflow:hidden}
.lb-in img{width:100%;aspect-ratio:16/9;object-fit:cover}
.lb-bar{display:flex;align-items:center;gap:8px;padding:8px 10px;flex-wrap:wrap}
.lb-bar b{font:600 15px var(--f-display);margin-right:auto}

.book{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.mob{background:linear-gradient(#fff,#f3e6c9);border:3px solid #c9a35b;border-radius:10px;padding:8px 6px 6px;text-align:center;color:#3a2a22;box-shadow:inset 0 0 0 2px #fff;transition:transform .15s}
.mob:hover{transform:translateY(-4px)}
.mob img{width:100%;max-width:84px;height:70px;object-fit:contain;margin:0 auto}
.mob b{display:block;font:600 12.5px/1.15 var(--f-display);margin-top:4px}
.mob .lv{font:10px var(--f-num);color:#c2384b}
.mob.boss{border-color:#a14fd0;background:linear-gradient(#fff,#ecdcf7)}
.mob.boss .lv::after{content:" · BIG";color:#6a4ca8}

.guide{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:s}
.steps li{display:grid;grid-template-columns:44px minmax(0,1fr) 54px;gap:10px;align-items:center;background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.steps li::before{counter-increment:s;content:counter(s);font:22px/44px var(--f-num);text-align:center;color:#fff;background:linear-gradient(var(--gs-1),var(--gs-3));border:2px solid var(--gs-edge);border-radius:50%;height:44px;text-shadow:0 2px 0 var(--gs-edge)}
.steps b{font:600 14px var(--f-display);display:block}
.steps img{width:54px;height:54px;object-fit:contain}
.keys{display:grid;gap:6px;align-content:start}
.keys h3{font-size:16px;color:var(--brand)}
.keys dl{margin:0;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 10px;align-items:center}
.keys dd{margin:0}
.keys dt{white-space:nowrap}
kbd{display:inline-block;min-width:24px;text-align:center;font:10px var(--f-pixel);padding:4px 6px 3px;border-radius:6px;background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:0 2px 0 var(--line);margin:0 1px}

/* ---------- footer ---------- */
footer{margin-top:90px;position:relative}
.ground{height:96px;position:relative;background:linear-gradient(var(--grass) 0 26px,var(--grass-2) 26px 32px,var(--dirt) 32px,var(--dirt-2))}
.ground::after{content:"";position:absolute;inset:40px 0 0;background:radial-gradient(circle,rgba(0,0,0,.12) 3px,transparent 4px) 0 0/34px 22px,radial-gradient(circle,rgba(255,255,255,.06) 2px,transparent 3px) 17px 11px/34px 22px}
.ground::before{content:"";position:absolute;inset:-14px 0 auto;height:28px;background:radial-gradient(circle at 14px 18px,var(--grass) 13px,transparent 14px) 0 0/28px 28px repeat-x}
.walker{position:absolute;bottom:calc(100% - 10px);left:0;width:70px;z-index:1;animation:walk 38s linear infinite alternate}
.walker::after{content:"";position:absolute;left:12px;right:12px;bottom:-3px;height:8px;border-radius:50%;background:rgba(0,0,0,.25);z-index:-1}
.walker img{width:70px;height:60px;object-fit:contain;object-position:bottom;animation:face 76s steps(1) infinite,hop .6s ease-in-out infinite}
.walker.w2{animation-duration:52s;animation-delay:-20s}
.walker.w2 img{animation:face 104s steps(1) infinite,hop .9s ease-in-out infinite;animation-delay:-20s,0s}
@keyframes walk{from{left:0}to{left:calc(100% - 70px)}}
@keyframes face{0%{transform:scaleX(-1)}50%{transform:scaleX(1)}}
@keyframes hop{50%{translate:0 -6px}}
.foot{background:var(--dirt-2);color:#e9d6bf;padding-block:16px 26px}
.foot .wrap{display:grid;gap:12px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 14px}
.foot nav a{color:#ffe4a8;font-weight:normal}
.badges{display:flex;flex-wrap:wrap;gap:6px}
.b88{width:88px;height:31px;display:grid;place-items:center;font:9px/1 var(--f-pixel);text-align:center;border:1px solid #000;color:#fff!important;text-decoration:none!important;box-shadow:inset 1px 1px 0 rgba(255,255,255,.5),inset -1px -1px 0 rgba(0,0,0,.4);font-weight:normal}
.b88.a{background:linear-gradient(#7b5cc4,#3e2a6e)}.b88.b{background:linear-gradient(#ff7b8a,#c2384b)}.b88.c{background:linear-gradient(#7b8cff,#3b4bc4)}.b88.d{background:linear-gradient(#9be06a,#3f7a2a)}.b88.e{background:repeating-linear-gradient(45deg,#333 0 6px,#ffcc00 6px 12px);color:#000!important;text-shadow:0 0 2px #fff}
.copy{font-size:10.5px;color:#c9b39a;margin:0}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .frame{grid-template-columns:minmax(0,1fr)}
  .frame>.col{order:-1}
  .book{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rail .start{grid-column:1/-1}
  .news-top,.guide,.movies{grid-template-columns:minmax(0,1fr)}
  .playlist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .classes{grid-template-columns:minmax(0,1fr)}
  .shots{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
  .logo b{font-size:38px}
  .gnb>ul>li>a{padding:10px 10px 9px;font-size:13px}
  .gnb .sub{display:none!important}
  .gnb .dl{margin-left:0}
  .banner{aspect-ratio:4/3}
  .slide .copy{width:88%;top:8%}
  .slide .pop{display:none}
  .rail{grid-template-columns:minmax(0,1fr)}
  .why{grid-template-columns:minmax(0,1fr)}
  .shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .book{grid-template-columns:repeat(2,minmax(0,1fr))}
  .playlist{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* guide page */
.dl-board .in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:center}
.dl-main{display:grid;gap:10px;text-align:center}
.dl-main .btn.big{font-size:28px;padding:20px 10px 21px;flex-direction:column;gap:6px}
.dl-main .btn.big small{font:11px var(--f-pixel);text-shadow:none;color:#fff7e0}
.dl-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.reqs{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 12px;background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:12px}
.reqs dt{color:var(--ink-soft)}.reqs dd{margin:0;font-weight:bold}
.page-hero{margin-top:14px;display:flex;align-items:center;gap:14px}
.page-hero h1{font-size:clamp(28px,5vw,44px);color:#fff;-webkit-text-stroke:6px #3e2a6e;paint-order:stroke fill;text-shadow:0 4px 0 #2a1a52}
.page-hero img{width:70px;height:70px;object-fit:contain;animation:bob 2.6s ease-in-out infinite}
@media (max-width:860px){.dl-board .in{grid-template-columns:minmax(0,1fr)}}

/* news page */
.news-page .rail{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px)}
.archive .in{max-height:70vh;overflow:auto;padding-top:4px}
.archive h4{font:600 13px var(--f-display);color:var(--brand);margin:10px 0 4px}
.archive ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.archive a{display:grid;grid-template-columns:40px minmax(0,1fr);gap:6px;padding:4px 6px;border-radius:6px;font-weight:normal;color:var(--ink)}
.archive a:hover{background:var(--paper-2);text-decoration:none}
.archive .d{color:var(--ink-soft);font-variant-numeric:tabular-nums}
.post{scroll-margin-top:16px}
.post>h3{flex-wrap:wrap}
.post .in{padding:14px 16px 12px;font-size:12.5px;max-width:100%}
.post .in>p:first-child{display:flex;gap:8px;align-items:center;margin:0 0 6px;padding:8px 10px;background:var(--paper-2);border:1px dashed var(--line);border-radius:8px;color:var(--ink-soft)}
.post .in>p:first-child::before{content:"!";flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--gs-2);color:#fff;font:12px var(--f-num)}
.post h4{margin:14px 0 6px;font:600 15px var(--f-display);color:var(--brand)}
.post h4 .tag{font-size:10px;padding:4px 10px 3px}
.tag.known{background:#7a6f8f}
.post ul,.post ol{margin:0;padding-left:20px;display:grid;gap:5px}
.post ul{list-style:none;padding-left:4px}
.post ul li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:2px}
.post ul li>span{min-width:0}
.post ul li::before{content:"★";color:var(--gs-2);font-size:11px;line-height:1.7}
.post p{margin:8px 0}
.post code{font:10px var(--f-pixel);background:var(--paper-2);border:1px solid var(--line);border-radius:5px;padding:2px 5px;white-space:nowrap}
.post .top-link{display:block;text-align:right;font-size:10.5px;margin-top:8px}
@media (max-width:860px){.news-page .rail{position:static}.archive .in{max-height:220px}}