/* Final menu art direction. Galmuri11 is loaded locally by the initial resource barrier.
   Original combat cut-in artwork and its positioning remain in style.css. */
:root { --pixel-font:'Galmuri11','Malgun Gothic',sans-serif; --ink:#111d2c; --cream:#f5e6ba; }
body, button, input, select, textarea,
:is(#title,#menu,#loading,#pause,#mtoast,#rotate,#hud) * { font-family:var(--pixel-font) !important; }
:is(#title,#menu,#loading,#pause,#mtoast,#rotate) { image-rendering:pixelated; }
#menu * { text-shadow:1px 1px #081625; }
:is(#title,#menu,#loading,#pause,#mtoast,#rotate) *,
:is(#title,#menu,#loading,#pause,#mtoast,#rotate) *::before,
:is(#title,#menu,#loading,#pause,#mtoast,#rotate) *::after { border-radius:0; }
:is(#title,#menu,#loading,#pause,#rotate) button { text-shadow:1px 1px #101824; }
:is(#title,#menu,#pause) button:focus-visible { outline:2px solid #ffedaa; outline-offset:4px; }

/* A title screen composed of authored pixel scenery, a transparent crest and type. */
#title .t-bg { inset:0; animation:none; image-rendering:pixelated; }
#title .t-glow { background:#14212d26; }
#title .logo { margin-top:7vh; animation:pixelArrive .4s steps(4,end) both; }
#title .crest { height:min(36vh,256px); filter:drop-shadow(4px 4px 0 #172333b0); }
#title .logo h1 { margin-top:-2vh; font-size:clamp(36px,9vh,72px); font-weight:700; line-height:1.4; letter-spacing:0; color:#ffedb7; background:none; filter:none; text-shadow:3px 0 #293046,-3px 0 #293046,0 -3px #293046,0 3px #293046,4px 5px #172333; }
#title .logo small { font-size:12px; letter-spacing:3px; margin-top:0; color:#fff2c6; text-shadow:2px 2px #172333; padding:6px 14px; background:#142535b8; }
#title .t-login { bottom:12vh; gap:14px; animation:none; }
#title .t-start { min-width:280px; height:64px; font-size:24px; font-weight:700; letter-spacing:4px; border:12px solid transparent; border-image:var(--px-gold) 8 fill / 12px stretch; filter:none; box-shadow:4px 5px #14202bcc; animation:none; }
#title .t-start::before { content:'▶'; font-size:14px; margin-right:10px; }
#title .t-start:hover { transform:translateY(-2px); color:#fffbdc; }
#title .t-start:active { transform:translate(2px,2px); box-shadow:2px 3px #14202bcc; }
#title .t-server { font-size:12px; background:#142535e8; border:2px solid #78928d; border-radius:0; padding:6px 12px; box-shadow:2px 2px #14212d; }
#title .t-server i { width:6px; height:6px; border-radius:0; background:#8dda89; box-shadow:2px 2px #45734d; }
#title .tap { font-size:12px; letter-spacing:2px; text-shadow:2px 2px #14212d; animation:pixelBlink 2s steps(2,end) infinite; }
#title .t-links { top:14px; right:16px; gap:8px; }
#title .t-links button { border:6px solid transparent; border-image:var(--px-button) 8 fill / 6px stretch; background:none; padding:2px 8px; font-size:12px; color:#ecdfba; }
#title .help { border:8px solid transparent; border-image:var(--px-panel) 8 fill / 8px stretch; background:none; bottom:3vh; line-height:1.7; z-index:4; }
#title .t-ver { font-size:10px; color:#efdfba; opacity:1; text-shadow:1px 1px #172333; }
#title .t-motes, .lb-motes { background-image:linear-gradient(#ffeab8,#ffeab8),linear-gradient(#fff4d2,#fff4d2),linear-gradient(#ffeab8,#ffeab8),linear-gradient(#fff4d2,#fff4d2); background-size:3px 3px,2px 2px,3px 3px,2px 2px; background-repeat:no-repeat; background-position:16% 44%,74% 28%,87% 64%,35% 80%; animation:pixelBlink 3s steps(2,end) infinite; pointer-events:none; }
@keyframes pixelBlink { 50% { opacity:.4; } }
@keyframes pixelArrive { from { opacity:0; transform:translateY(8px); } }

/* The hall stays visible behind the party leader, with a soft pool of light. */
.lb-bg { inset:-18px; background:url(assets/ui/lobby_bg.jpg) center/cover no-repeat; transform:none; transition:none; filter:blur(9px) saturate(.65) brightness(.72); }
.lb-shade { display:block; background:radial-gradient(ellipse 72% 82% at 48% 42%, #111a2830 14%, #0b142797 76%, #070d1cdb 100%),linear-gradient(90deg,#0813228f,transparent 38%,transparent 65%,#081322a8); }
.lb-motes { display:block; opacity:.32; }
.lb-char { height:calc(100% - 140px); bottom:70px; transform:translateX(-54%); transition:none; }
.lb-char::before { content:''; left:-16%; right:-16%; bottom:0; height:95%; z-index:-1; background:radial-gradient(ellipse at 50% 48%,color-mix(in srgb,var(--c) 48%,transparent),color-mix(in srgb,var(--c) 18%,transparent) 36%,transparent 72%); filter:blur(18px); opacity:.82; }
.lb-art { image-rendering:pixelated; filter:drop-shadow(0 0 12px color-mix(in srgb,var(--c) 65%,transparent)) drop-shadow(4px 5px 0 #091421c9); animation:none; }
.lb-char.poke .lb-art { animation:pixelPoke .32s steps(2,end); }
@keyframes pixelPoke { 50% { transform:translateY(-4px); } }
.lb-tap { border:2px solid #fff3be; box-shadow:2px 2px #c49650; animation:tapfx .5s steps(4,end) forwards; }
.lb-top { animation:none; background:#122031d9; border-bottom:2px solid #566678; padding:10px 14px; }
.lb-pi { padding:4px 10px; background:#172938; }
.lb-av img { background:#2d465e; }
.lb-pi u, .mi-bar u { background:#bca36b; box-shadow:inset 0 2px #ecd095; }
.lb-bubble { background:#eee2bb; border:2px solid #b89561; box-shadow:0 0 0 2px #1b2b3c,4px 5px #15212d90; transition:none; padding:10px 12px; }
.lb-bubble::after { border:0; width:8px; height:8px; bottom:-8px; left:16px; background:#eee2bb; box-shadow:2px 2px #b89561,4px 4px #1b2b3c; filter:none; }
.lb-bubble p { font-size:12px; line-height:1.7; }
.lb-left,.lb-right,.lb-nav { animation:none; }
.bn-art { image-rendering:pixelated; filter:none; }
.bn-pick { background:#433b59; }
.bn-pick::before { background:repeating-linear-gradient(90deg,#ffffff0a 0 30px,transparent 30px 32px); animation:none; }
.bn-dg { background:#223d45; }
.bn-t { background:#162334ed; border-top:2px solid #7f785f; padding:6px 8px; }
.bn-t em, .bn-pick .bn-t em { background:#d4ae72; color:#26303c; }
.bn-dots i { background:#5c6c7a; box-shadow:1px 1px #122131; }
.bn-dots i.on { background:#e1bd7d; }
.lb-nav { bottom:0; }
.nb .nbi, .nb.big .nbi, .nb b, .lb-card .ico { filter:none; }
.nb:hover .nbi { transform:translateY(-2px); }
.adv-map::after { background:#10223252; }
.adv-t { background:#162938bf; padding:8px; }
.adv-t b { color:#fff0bc; font-weight:700; background:none; filter:none; text-shadow:2px 2px #182638; font-size:36px; }
.adv-t em { background:#263d4b; color:#ecdbb0; padding:2px 4px; }
.adv-go { color:#26303c; text-shadow:none; font-weight:700; }
.badge { background:#b95f55; box-shadow:1px 1px #172333; }

/* Shared treatment covers secondary menus, modal reveals and world-map panels. */
.menu img { image-rendering:pixelated; }
.menu .hd-art:not(.none), .menu .g-art, .menu .res-art, .menu .g-reveal img { filter:drop-shadow(4px 4px 0 #0b192b88); }
.menu .gacha { background:none; }
.menu .story { background:none; }
.menu.scr-town { background:#142534; }
.menu .g-art { height:100%; margin:0 0 0 2%; object-fit:contain; }
.menu .hd-art { height:100%; width:100%; max-width:100%; margin:0; object-fit:contain; }
.menu .hd-stage { border:12px solid transparent; border-image:var(--px-panel) 8 fill / 12px stretch; background:#101d2b; border-radius:0; box-shadow:3px 3px 0 #10182480; }
.menu .hd-stage canvas { display:block; max-width:100%; height:auto; }
.menu .hd-info { min-width:0; margin:0; padding:8px; }
.menu .sk-level, .menu .sk-effect { color:#e8c17d; }
.menu .sk-up, .menu .smith-skill-buttons .nbtn { border-width:5px; border-image-width:5px; }
.menu .sk-passive em { color:#c9e8ca; }
.menu .gacha::before, .menu .gacha::after { content:none; }
.menu .g-open { background:#101d2bf2; backdrop-filter:none; }
.menu .g-open.feat { background:repeating-linear-gradient(0deg,#182b3f 0 30px,#162637 30px 32px); }
.menu .g-open.feat img { height:94%; bottom:0; left:8%; filter:drop-shadow(4px 4px 0 #091624); animation:pixelArrive .4s steps(4,end); }
.menu .g-open.feat.r-SSR::before { background:repeating-linear-gradient(90deg,transparent 0 62px,#d2ae6320 62px 64px); animation:none; }
.menu .g-open .g-orb { box-shadow:0 0 0 6px #ddb878,0 0 0 12px #a17b57; animation:pixelOrb 1.3s steps(6,end) both; }
@keyframes pixelOrb { 0% { transform:scale(.3) rotate(0); } 70% { transform:scale(1.4) rotate(90deg); } 100% { transform:scale(30) rotate(90deg); } }
.menu .gc.r-SR { background:#3d334f; }
.menu .gc.r-SSR { background:#4a3e2c; box-shadow:2px 3px #091725; }
.menu .gc { animation:pixelArrive .25s steps(4,end) both; }
.menu .g-flash { background:#f5dfaa; animation:pixelBlink .2s steps(2,end); }
.menu .g-reveal { background:none; }
.menu .g-reveal img { image-rendering:pixelated; animation:pixelArrive .25s steps(4,end); }
.menu .g-name { text-shadow:2px 2px #152130; }
.menu .g-name b { font-weight:700; color:#fff0bb; text-shadow:3px 3px #0b1928; }
.menu .g-name em { background:#c4975b; color:#fff2bd; }
.menu .rar { text-shadow:1px 1px #142333; }
.menu .r-SSR, .menu .stars, .menu .g-pu { color:#e8c17d; }
.menu .g-pu { background:#2c3c49; border:2px solid #8e7b5c; }
.menu .g-pity u, .menu .acc u, .menu .lvl u { background:#b59b66; box-shadow:inset 0 2px #ecd49a; }
.menu .g-pity i, .menu .lvl i { background:#0d1b27; }
.menu .g-rates { color:#c1cbd0; }
.menu .g-open .ok { animation:none; }
.menu .tabs button { background:#1a2d40; border:2px solid #596d7d; box-shadow:2px 2px #0a1824; }
.menu .tabs button.on { background:#35464d; border-color:#d0b37e; color:#ffe9b1; }
.menu .ft, .menu .slots .empty { background:#162b3c; border:2px dashed #647885; }
.menu .slot-lock { width:32px; height:32px; margin-bottom:6px; }
.menu .np-h em { background:#c0a271; color:#142434; }
.menu .np-h em.tg-boss { background:#995354; color:#ffded2; }
.menu .np-h em.tg-town { background:#7eab84; color:#152f2a; }
.menu .np-h em.tg-dungeon, .menu .np-h em.tg-tower { background:#8b729f; color:#f3e0fa; }
.menu .np-stars { text-shadow:1px 1px #182737; }
.menu .fog { backdrop-filter:none; -webkit-backdrop-filter:none; mask-image:none; -webkit-mask-image:none; background:repeating-linear-gradient(45deg,#253746bd 0 4px,#20313fc9 4px 8px); }
.menu .wm-map { image-rendering:pixelated; }
.menu .wm-roads { shape-rendering:crispEdges; }
.menu .wm-roads path { stroke-linecap:butt; stroke-dasharray:5 13; filter:drop-shadow(2px 2px 0 #172331); }
.menu .wm-top, .menu .wm-nav, .menu .wm-legend { background:#152737e8; box-shadow:2px 2px #0a1929; }
.menu .wm-panel { backdrop-filter:none; }
.menu .wm-ch { background:#14283be6; border:2px solid #6a7e89; }
.pixel-town::after { background:#12213220; }
.pixel-town .tw-talk, .pixel-town .tw-body { backdrop-filter:none; }
.menu .tw-join { background:#213547; border:2px solid #7b705b; }
.menu .tw-join img { image-rendering:pixelated; filter:none; }
.menu .tarmy i.on { background:#6d9dba; box-shadow:inset 0 2px #b4d5df; }
.menu .settings input[type=range] { appearance:none; -webkit-appearance:none; height:10px; background:#0b1925; border:2px solid #657885; }
.menu .settings input[type=range]::-webkit-slider-thumb { appearance:none; width:16px; height:20px; background:#cfad74; border:2px solid #f0d399; box-shadow:2px 2px #0b1925; cursor:pointer; }
.menu.scr-result .res-box { background:#142333e8; border-left:2px solid #b09a70; }
.menu .res { background:none; }
.menu .res-art { height:100%; margin:0; animation:pixelArrive .4s steps(4,end); }
.menu .res h1 { background:none; color:#f2d591; filter:none; font-weight:700; text-shadow:4px 4px #142434; }
.menu .res.lose h1 { color:#ca8b8b; }
.menu .res-stars span { filter:none; text-shadow:2px 2px #523d37; }
.menu .res-art { image-rendering:pixelated; }
.menu .rw span { background:#2c414c; border:2px solid #766e55; }
.menu .res-box table th { background:#213745; }
.menu .res-box table td { border-color:#3e5360; }
.menu .res-box .row { flex-wrap:wrap; }
.menu .res-box .row .next { border-image-source:var(--px-gold); }

/* Character illustrations use the original art; only UI and scenery are pixel art. */
.menu :is(.lb-art,.bn-art,.lob-art,.hd-art,.g-art,.res-art),
.menu :is(.hc,.gc,.g-open,.g-reveal,.tw-join) img { image-rendering:auto; }

/* Loading, pause, transient notices and orientation guidance share the same skin. */
#loading { background-color:#152533; background-image:repeating-linear-gradient(0deg,transparent 0 30px,#0c17233d 30px 32px),repeating-linear-gradient(90deg,#1a2d38 0 30px,#182a35 30px 32px); }
#loading>div { padding:24px; border:12px solid transparent; border-image:var(--px-panel) 8 fill / 12px stretch; }
#loading h3 { font-size:24px; font-weight:700; color:#f4dc9e; }
#loading .lb { background:#091926; height:12px; border:2px solid #75818a; box-shadow:2px 2px #08121d; }
#loading .lb b { background:repeating-linear-gradient(90deg,#caaa70 0 10px,#a98657 10px 12px); box-shadow:inset 0 2px #f1d99b; }
#loading-message { font-size:12px; line-height:1.8; }
#pause { background:#0c1925b8; backdrop-filter:none; animation:pixelArrive .15s steps(2,end); }
#pause .pbox { box-shadow:6px 6px #071522a6; }
#pause .pbox h2 { text-shadow:2px 2px #081725; }
#mtoast { background:#152637; border:2px solid #bd9f6b; border-radius:0; box-shadow:3px 3px #091624; max-width:90vw; padding:10px 16px; line-height:1.5; }
#rotate { background:#152533; color:#e4d3a7; }
#rotate .rotate-device { display:block; width:64px; height:104px; border:6px solid #d7bb81; box-shadow:4px 4px #091624; margin:0 auto 16px; }
#rotate .rotate-device::after { content:'↔'; font-size:32px; line-height:90px; color:#d7bb81; }
@media(max-height:480px) {
  #title .logo { margin-top:6vh; }
  #title .crest { height:30vh; }
  #title .logo h1 { font-size:36px; margin-top:-2vh; }
  #title .logo small { font-size:10px; letter-spacing:2px; padding:3px 8px; }
  #title .t-login { bottom:9vh; gap:8px; }
  #title .t-start { height:46px; min-width:230px; font-size:18px; border-width:8px; border-image-width:8px; }
  #title .t-server { padding:3px 8px; font-size:10px; }
  #title .tap { font-size:10px; letter-spacing:1px; }
  #title .t-links { top:6px; right:8px; }
  #title .t-links button { font-size:10px; padding:0 4px; border-width:4px; border-image-width:4px; }
  .lb-char { height:calc(100% - 120px); bottom:64px; }
  .lb-top { padding:6px 10px; }
  .lb-pi { padding:2px 8px; }
  .lb-bubble { top:18%; padding:6px 8px; max-width:27vw; }
  .lb-bubble p { font-size:10px; }
  .adv-t { padding:4px; }
  .adv-t b { font-size:28px; }
  .menu .hd-info { padding:6px 10px; }
  .menu .res-box { padding:4px 8px; gap:3px; }
  .menu .res-box h1 { font-size:36px; line-height:1.2; letter-spacing:3px; }
  .menu .res-stars span { font-size:24px; line-height:1.2; }
  .menu .res-box .mvpl { margin:2px 0; font-size:10px; }
  .menu .res-box table { font-size:10px; }
  .menu .res-box table td, .menu .res-box table th { padding:2px 4px; }
  .menu .res-box .dim { margin:3px 0; font-size:10px; }
  .menu .res-box .row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; gap:4px; }
  .menu .res-box .row button { font-size:11px; padding:3px 0; border-width:5px; border-image-width:5px; white-space:nowrap; }
}
@media(max-width:700px) {
  .menu .hd { grid-template-columns:minmax(0,1fr) 170px; grid-template-rows:240px auto; align-content:start; overflow-y:auto; touch-action:pan-y; }
  .menu .hd-stage { width:170px; height:132px; border-width:8px; border-image-width:8px; }
  .menu .hd-info { grid-column:1 / -1; margin:0; overflow:visible; }
  .menu:is(.scr-hero,.scr-heroes) .mtop { flex-wrap:wrap; gap:6px; }
  .menu:is(.scr-hero,.scr-heroes) .mtop .mt { min-width:calc(100% - 60px); }
  body:has(.menu:is(.scr-hero,.scr-heroes):not(.hide)) #rotate { display:none; }
}
@media(prefers-reduced-motion:reduce) { #title .logo,#title .tap,#title .t-motes,.lb-motes,.lb-char.poke .lb-art { animation:none; } }

/* World map badges sit above the painted terrain at every viewport size. */
.menu .wm-roads { shape-rendering:geometricPrecision; }
.menu .wm-roads path { fill:none; stroke-dasharray:none; stroke-linecap:round; filter:drop-shadow(0 2px 2px #09131d); }
.menu .wm-roads .route-open { stroke:#ffe6a4; stroke-width:5; opacity:.76; }
.menu .wm-roads .route-locked { stroke:#c4d0d7; stroke-width:3; stroke-dasharray:7 11; opacity:.36; }
.menu .wm-ch { position:absolute; z-index:1; transform:translateX(-50%); display:flex; gap:5px; align-items:center; white-space:nowrap; padding:5px 9px; background:#101e30e8; border:2px solid var(--ch-color); box-shadow:0 3px 0 #08121c,0 0 12px #050e19b0; color:#f7f1dd; text-shadow:1px 2px #080f1a; font-size:12px; font-weight:900; pointer-events:none; }
.menu .wm-ch b { color:var(--ch-color); font-size:15px; }
.menu .wm-ch.locked { opacity:.65; }
.menu .wn { min-width:64px; color:#fff; }
.menu .wn .ni { width:clamp(42px,5vw,58px); height:clamp(42px,5vw,58px); box-sizing:border-box; display:grid; place-items:center; padding:3px; border:3px solid #f1d58d; border-radius:50%; background:linear-gradient(145deg,#42576a,#17293b 68%); box-shadow:0 0 0 2px #081522,0 4px 0 #081522,0 7px 12px #000b; color:#fff2c9; font-size:clamp(12px,1.6vw,17px); font-weight:900; text-shadow:1px 2px #07121c; filter:none; }
.menu .wn .ni .pixel-ico { width:75%; height:75%; }
.menu .wn.t-boss .ni { border-color:#ffba64; border-radius:12px; background:linear-gradient(145deg,#873e39,#391e31); transform:rotate(45deg); }
.menu .wn.t-boss .pixel-ico { transform:rotate(-45deg); }
.menu .wn.t-town .ni { border-color:#88d99c; background:#213f3b; border-radius:8px; }
.menu .wn.t-dungeon .ni { border-color:#c7a8f0; background:#343050; border-radius:10px; }
.menu .wn.t-tower .ni { border-color:#d3c8ff; background:#33364f; width:52px; height:64px; border-radius:8px 8px 4px 4px; }
.menu .wn b { max-width:110px; margin-top:4px; padding:3px 5px; background:#0b1929f2; border:2px solid #c4aa73; box-shadow:1px 2px #07111b; color:#fff4d3; font-size:11px; line-height:1.1; white-space:normal; text-align:center; text-shadow:1px 1px #03080d; }
.menu .wn.t-stage b { display:none; }
.menu .wn.t-town b,.menu .wn.t-dungeon b,.menu .wn.t-tower b { font-size:10px; }
.menu .wn .ns { display:flex; gap:1px; margin-top:2px; padding:1px 3px; background:#0b1929dc; font-size:10px; }
.menu .wn .ns i { color:#7d8792; }
.menu .wn .ns i.on { color:#ffdc66; }
.menu .wn.locked { opacity:.7; }
.menu .wn.locked .ni { border-color:#8593a0; background:#263340; filter:grayscale(1); }
.menu .wn.locked b { border-color:#7f8d9a; color:#d6dce1; }
.menu .wn.clr .ni { border-color:#a4f3b0; background:linear-gradient(#397260,#193e40); }
.menu .wn .state-check,.menu .wn .state-lock { top:-7px; right:0; width:20px; height:20px; border:2px solid #0b1929; background:#83e6a2; color:#0a2d2d; font-size:15px; animation:none; box-shadow:1px 2px #07111b; }
.menu .wn .state-lock { background:#657381; }
.menu .wn .state-lock .pixel-ico { width:15px; height:15px; }
.menu .wn.next .ni { animation:mapBadgePulse 1.6s ease-in-out infinite; }
.menu .wn.current .ni { box-shadow:0 0 0 3px #fff4bb,0 0 18px 7px #ffe3a884; }
.menu .wn.sel .ni { filter:brightness(1.3); }
@keyframes mapBadgePulse { 50% { box-shadow:0 0 0 3px #fff1b8,0 0 17px 5px #fbcf7180; } }
.menu .wm-me { width:64px; height:64px; z-index:4; transform:translate(-50%,-110%); }
.menu .wm-me::before { content:''; position:absolute; inset:5px; border:3px solid #fff1b3; border-radius:50%; background:#f2c96842; box-shadow:0 0 18px 8px #f2c96896; animation:mapPlayerPulse 1.5s ease-in-out infinite; }
.menu .wm-me canvas { position:relative; width:64px; height:64px; filter:drop-shadow(1px 2px 0 #081421) drop-shadow(0 0 4px #fff5cf); }
.menu .wm-me i { width:42px; height:14px; bottom:-3px; }
@keyframes mapPlayerPulse { 50% { transform:scale(1.3); opacity:.48; } }
.menu .wm-panel { box-sizing:border-box; width:min(330px,calc(100% - 20px)); max-height:calc(100% - 20px); padding:6px 10px; border:3px solid #e0bd79; border-image:none; background:#132237 !important; background-clip:border-box; box-shadow:0 0 0 3px #071420,0 8px 24px #000c; }
.menu .wm-panel .x { right:4px; top:4px; width:30px; height:30px; }
.menu .wm-panel .np-h { padding-right:30px; }
.menu .wm-panel .np-b { color:#f6f1e4; }
@media(max-width:600px) {
  body:has(.menu:not(.hide)) #rotate { display:none; }
  .menu.scr-world .mtop { gap:5px; padding:5px; min-height:48px; }
  .menu.scr-world .mtop .mt { flex:0 0 auto; font-size:15px; white-space:nowrap; }
  .menu.scr-world .mtop .acc { display:none; }
  .menu.scr-world .mtop .cur { min-width:0; padding:2px 4px; font-size:10px; }
  .menu.scr-world .mtop .cur .pixel-ico { width:12px; height:12px; }
  .menu.scr-world .mtop .cur.gem { margin-left:auto; }
  .menu.scr-lobby .lb-top { flex-wrap:wrap; gap:2px; padding:3px 6px; min-height:74px; align-content:start; }
  .menu.scr-lobby .lb-prof { height:32px; }
  .menu.scr-lobby .lb-av { width:30px; height:30px; }
  .menu.scr-lobby .lb-pi { padding:2px 5px; }
  .menu.scr-lobby .lb-pi b { font-size:11px; }
  .menu.scr-lobby .lb-pi i,.menu.scr-lobby .lb-pi small { display:none; }
  .menu.scr-lobby .lb-cur { width:100%; gap:5px; justify-content:flex-end; }
  .menu.scr-lobby .pill { height:23px; }
  .menu.scr-lobby .pill b { min-width:48px; font-size:10px; }
  .menu.scr-lobby .pill .cur-ic { width:16px; height:16px; }
  .menu.scr-lobby .sqb { width:25px; height:25px; }
  .menu.scr-lobby .lb-char { left:38%; height:calc(100% - 160px); bottom:75px; transform:translateX(-58%); }
  .menu.scr-lobby .lb-right { top:82px; right:4px; bottom:76px; width:46vw; gap:4px; }
  .menu.scr-lobby .lb-left { display:block; left:5px; top:79px; width:175px; }
  .menu.scr-lobby .lb-ban { display:none; }
  .menu.scr-lobby .lb-mis { display:flex; }
  .menu.scr-lobby .lb-adv { border-width:12px; border-image-width:12px; }
  .menu.scr-lobby .lb-sub { grid-template-columns:1fr; gap:2px; }
  .menu.scr-lobby .lb-card { height:42px; border-width:6px; border-image-width:6px; }
  .menu.scr-lobby .lb-card .card-ic { width:26px; height:26px; flex-basis:26px; }
  .menu.scr-lobby .lb-nav { width:100%; justify-content:center; gap:0; padding:0 0 5px; }
  .menu.scr-lobby .nb { width:20%; }
  .menu.scr-lobby .nb.big { width:20%; }
  .menu.scr-lobby .nbi { width:46px; height:46px; }
  .menu.scr-lobby .nb.big .nbi { width:59px; height:59px; }
  .menu.scr-lobby .lb-bubble { left:20%; top:15%; max-width:150px; }
  .menu .wm-ch { padding:3px 6px; font-size:10px; }
  .menu .wm-ch b { font-size:12px; }
  .menu .wm-panel { left:8px; right:8px; top:auto; bottom:76px; width:auto; max-height:min(48%,310px); transform:translateY(calc(100% + 90px)); }
  .menu .wm-panel.on { transform:translateY(0); }
}
@media(prefers-reduced-motion:reduce) { .menu .wn.next .ni,.menu .wm-me::before,.menu .wm-me i { animation:none; } }

/* Map landmarks use the same silhouettes as their walkable field entrances. */
.menu .wn.has-landmark .ni { width:72px; height:64px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.menu .wn.has-landmark.t-tower .ni { width:60px; height:88px; }
.menu .wn .landmark-node-art { display:block; width:100%; height:100%; object-fit:contain; object-position:bottom; image-rendering:pixelated; filter:drop-shadow(0 2px 1px #071117) drop-shadow(0 0 3px #b8d7e833); }
.menu .wn .landmark-node-art[hidden] { display:none; }
.menu .wn.has-landmark .ni>span:not([hidden]) { display:grid; place-items:center; width:100%; height:100%; }
.menu .wn.has-landmark.sel .landmark-node-art { filter:drop-shadow(0 0 4px #ffdb83) drop-shadow(0 2px 1px #071117); }
@media(max-width:600px) { .menu .wn.has-landmark .ni { width:62px; height:55px; } .menu .wn.has-landmark.t-tower .ni { width:49px; height:73px; } }