/* Shared 16-bit UI skin. Final menu art/font treatment lives in pixel-theme.css.
   Combat cut-ins retain the original transparent illustrations. */
:root {
  --px-panel: url(assets/ui/kit/panel.png);
  --px-button: url(assets/ui/kit/button.png);
  --px-gold: url(assets/ui/kit/gold.png);
  --px-window: url(assets/ui/kit/window.png);
  --px-dialog: url(assets/ui/kit/dialog.png);
  --px-inset: url(assets/ui/kit/inset.png);
  --px-card-r: url(assets/ui/kit/card_r.png);
  --px-card-sr: url(assets/ui/kit/card_sr.png);
  --px-card-ssr: url(assets/ui/kit/card_ssr.png);
  --px-bg: url(assets/ui/kit/bg.png);
  --px-divider: url(assets/ui/kit/divider.png);
  --px-ribbon: url(assets/ui/kit/ribbon.png);
}
.pixel-ico { image-rendering: pixelated; shape-rendering: crispEdges; filter: none; }
button, .pi, .hc, .pill, .badge, .mtop .cur, .wn b { border-radius: 0; }
.skin-panel, #topL, .pbox, .tw-talk, .tw-body, .wm-panel, .lb-ban, .lb-mis, .lb-adv, .lb-card {
  border: 12px solid transparent; border-image: var(--px-panel) 8 fill / 12px stretch;
  background: none !important; border-radius: 0; box-shadow: 3px 3px 0 #10182480; filter: none;
}
#topL { padding: 2px 4px; }
.pbox { padding: 12px 20px; }
.tw-body, .wm-panel { padding: 4px 8px; }
.lb-ban { border-width: 10px; border-image-width: 10px; }
.lb-adv { border-width: 12px; border-image-width: 12px; }
.adv-map { inset: 0; z-index: 0; border-radius: 0; }
.adv-t, .adv-go { z-index: 1; }
.lb-adv::before { content: none; }
.lb-bubble { border-radius: 0; background: #f4ecd5; box-shadow: 0 0 0 2px #a98a54, 0 0 0 4px #192638, 4px 6px 0 #10182480; }
.lb-mis { padding: 2px 4px; }
.lb-card { padding: 0 2px; border-width: 8px; border-image-width: 8px; }
.gbtn, .nbtn, .pbox button, #title .t-start, .lob-menu button:not(.big):not(.summon), .lob-menu .big, .lob-menu .summon {
  border: 8px solid transparent; border-image: var(--px-button) 8 fill / 8px stretch;
  background: none; border-radius: 0; box-shadow: 2px 3px 0 #101824; filter: none;
}
.gbtn, #title .t-start, .pbox #resume { border-image-source: var(--px-gold); color: #fff0bc; animation: none; }
.pbox #resume { border-image: var(--px-gold) 8 fill / 8px stretch; }
.gbtn.sm, .nbtn.sm { border-width: 6px; border-image-width: 6px; padding: 0 8px; }
.mtop .back, .sqb, .sqb[data-go="settings"] {
  border: 6px solid transparent; border-image: var(--px-button) 8 fill / 6px stretch;
  background: none; border-radius: 0; filter: none;
}
.sqb[data-go="settings"] .ico { display: block; }
.wm-nav button, .tf {
  border: 8px solid transparent; border-image: var(--px-button) 8 fill / 8px stretch;
  background: none; border-radius: 0; filter: none; padding: 0; box-shadow: 2px 2px #101824;
}
.mtop .cur { display: inline-flex; align-items: center; gap: 4px; background: #192638; border: 2px solid #798998; }
.mtop .cur .pixel-ico { width: 16px; height: 16px; }
.sk em { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 4px solid transparent; border-image: var(--px-button) 8 fill / 4px stretch; border-radius: 0; background: none; color: #eee9d8; }
.sk em .pixel-ico { width: 32px; height: 32px; }
.np-tiers .nbtn { border-width: 6px; border-image-width: 6px; }
.wm-panel .x { right: 0; top: 0; border-radius: 0; }
.pill { background: #192638; border: 2px solid #798998; box-shadow: 2px 2px 0 #101824; }
.pill .cur-ic { width: 24px; height: 24px; filter: none; }
.pill button { border-radius: 0; background: #d8ad52; box-shadow: inset 1px 1px #ffe0a0, 1px 1px #101824; }
.lb-av::after { inset: -6px; border: 8px solid transparent; border-image: var(--px-panel) 8 / 8px stretch; background: none; pointer-events: none; }
.lb-av img, .lb-pi, .lb-pi i, .mi-bar, .mi-bar u, .adv-prog i { border-radius: 0; }
.lb-pi { background: #192638df; }
.lb-card .card-ic { width: 32px; height: 32px; flex: 0 0 32px; margin-right: 6px; }
.bn-ic.pixel-ico { width: 64px; height: 64px; filter: none; }
.lb-nav::before { border-radius: 0; background: #172234eb; border-top: 2px solid #b39965; box-shadow: 0 -2px 0 #101824; }
.nbi { width: 56px; height: 56px; border: 6px solid transparent; border-image: var(--px-button) 8 fill / 6px stretch; }
.nbi .ico { display: block; width: 32px; height: 32px; }
.nb.big .nbi { width: 72px; height: 72px; border-image-source: var(--px-gold); }
.nb.big .nbi .ico { width: 48px; height: 48px; }
.nb.big .nbi::before { content: none; }
.nb b { margin-top: 2px; text-shadow: 1px 1px #101824; }
.nb small, .adv-go { border-radius: 0; background: #d8ad52; box-shadow: 2px 2px #101824; animation: none; }
.nb small { color: #241c31; }

/* Pixel frames and genuine pixel glyphs for all three combat skill slots. */
.sb, .sb.ult { border: 0 !important; border-radius: 0; background: #152031; box-shadow: 2px 3px 0 #101824; }
.sb::before, .sb.ult::before {
  inset: -6px; border: 8px solid transparent; border-image: var(--px-button) 8 / 8px stretch;
  background: none; image-rendering: pixelated;
}
.sb.ult::before { border-image-source: var(--px-gold); }
.sb .ic, .sb .cd, .sb .cdn, .sb.ult .g { border-radius: 0; }
.sb.s1 .ic, .sb.s2 .ic, .sb.ult .ic { background: #1c2b41; filter: none; }
.sb .ic .pixel-ico { width: 32px; height: 32px; margin-top: -6px; }
.sb.ult .ic .pixel-ico { width: 48px; height: 48px; margin-top: -8px; }
.sb .nm { bottom: 2px; font-size: 9px; text-shadow: 1px 1px #101824, -1px -1px #101824; }
.sb.ult .nm { bottom: 5px; font-size: 10px; }
.sb.ult .g { opacity: .7; }
.sb.ult .rdy { top: 5px; font-size: 10px; letter-spacing: 2px; text-shadow: 1px 1px #101824; }
.sb.ult.ready { box-shadow: 0 0 0 2px #f3cf79, 2px 3px 0 #101824; animation: pixelReady 1s steps(2,end) infinite; }
.sb.ult.ready::after { content: none; }
.sb.ult.ready .rdy { animation: none; }
@keyframes pixelReady { 50% { box-shadow: 0 0 0 2px #fff0bc, 2px 3px 0 #101824; } }
#cmds button { border: 6px solid transparent; border-image: var(--px-button) 8 fill / 6px stretch; background: none; padding: 1px 0; border-radius: 0; }
#cmds button.on, #cmds button[data-m="retreat"].on { border-image-source: var(--px-gold); background: none; filter: none; color: #fff0bc; }
#cmds button .ico { width: 16px; height: 16px; }
#sys button, #sys button:not(.sq), #sys button.sq {
  border: 6px solid transparent; border-image: var(--px-button) 8 fill / 6px stretch;
  border-radius: 0; background: none; padding: 0 3px; box-shadow: 1px 2px #101824;
}
#sys button.on, #sys button.on:not(.sq) { border-image: var(--px-gold) 8 fill / 6px stretch; background: none; color: #fff0bc; }
#sys button .ico { width: 16px; height: 16px; }
#sys button[data-a="auto"].on .ico { animation: none; }
#mini { border: 6px solid transparent; border-image: var(--px-panel) 8 / 6px stretch; box-shadow: 2px 3px #101824; background: #152031; }
#mini::before { content: none; background: none; }
#mini canvas, #mini .mlab { border-radius: 0; }
#bossbar .bbw { margin-top: 8px; }
#bossbar .bbw::after, #bossbar::after { content: none; background: none; }
#bossbar .bb { height: 12px; border: 2px solid #bca075; border-radius: 0; box-shadow: 0 0 0 2px #101824; }
#bossbar .bn { margin-left: 0; }
#feed .fd, #banner, #banner.enemy { border: 6px solid transparent; border-image: var(--px-panel) 8 fill / 6px stretch; background: none; filter: none; padding: 0 7px; }
#feed .fd img, #leader .lp, #leader .lp img { border-radius: 0; }
#leader .lp { border: 2px solid #bca075; box-shadow: 0 0 0 2px #101824; }
.pi { border-radius: 0; box-shadow: 1px 2px #101824; }
.pi.ctrl { border-color: #f3cf79; }
.pi .cls { filter: none; }
.pi .cast-badge { display:none; position:absolute; left:0; right:0; top:17px; z-index:5; background:#142238ed; color:#fff3c6; text-align:center; font: bold 10px Galmuri11,monospace; line-height:14px; }
.pi.casting { border-color:var(--c); box-shadow:0 0 0 2px var(--c); }
.pi.casting .cast-badge { display:block; }
.pi.casting .cast-badge:empty { display:none; }   /* 일반 스킬은 테두리 반짝임만 */
.pi.casting .uq { display:none; }
#feed { left:12px; top:112px; transform:none; align-items:flex-start; max-width:240px; }
#feed .fd { min-width:0; max-width:225px; font-size:10px; padding:0 3px; gap:3px; }
#feed .fd img { width:18px; height:18px; }
#feed .fd .ico, #feed .fd .pixel-ico { width:17px; height:17px; }

/* Compact cast cues keep the battlefield readable. */
#banner, #banner.enemy { width:max-content; max-width:42vw; top:39%; gap:5px; padding:2px 9px; min-height:30px; font-size:12px; line-height:1.2; white-space:nowrap; text-shadow:1px 1px #06101a, -1px -1px #06101a; }
#banner .bi { width:22px; height:22px; flex:0 0 22px; background:#111c2b; border:1px solid #d4bd87; border-radius:0; }
#banner .bi .ico, #banner .bi .pixel-ico { width:19px; height:19px; }
#banner.ult { min-height:38px; font-size:15px; border-image-source:var(--px-gold); }
#banner.ult .bi { width:29px; height:29px; flex-basis:29px; border-color:#ffe0a0; }
#banner.ult .bi .ico, #banner.ult .bi .pixel-ico { width:26px; height:26px; }
#toast { top:76px; max-width:min(90vw,420px); white-space:normal; text-align:center; font-size:13px; padding:5px 12px; background:#101f2deb; border:2px solid #baa16a; box-shadow:2px 3px #07111b; text-shadow:1px 1px #000; }

/* World-map markers share the same pixel vocabulary as the lobby. */
.wn .ni, .wn .ni.i0, .wn .ni.i1, .wn .ni.i2, .wn .ni.i3, .wn .ni.i4 {
  width: 48px; height: 48px; background: none; filter: drop-shadow(2px 2px 0 #101824);
  display: grid; place-items: center;
}
.wn .ni .pixel-ico { width: 48px; height: 48px; }
.wn.sel .ni { filter: drop-shadow(2px 2px 0 #f3cf79); }
.wn.next .ni { animation: none; }
.wn b { border-radius: 0; border-color: #b39965; background: #192638; }
.wn em { border-radius: 0; box-shadow: 1px 2px #101824; }
@media (max-height: 420px) {
  .nbi { width: 48px; height: 48px; border-width: 4px; border-image-width: 4px; }
  .nb.big .nbi { width: 64px; height: 64px; }
  .lb-card { border-width: 6px; border-image-width: 6px; }
}
@media (prefers-reduced-motion: reduce) { .sb.ult.ready { animation: none; } }

/* Detailed pixel inventory and shared menu surfaces. */
.menu:not(.scr-lobby):not(.scr-world):not(.scr-town):not(.scr-result) {
  background-color:#14232f;
  background-image:repeating-linear-gradient(0deg,transparent 0 30px,#0c17233d 30px 32px),repeating-linear-gradient(90deg,#1a2d38 0 30px,#182a35 30px 32px);
}
.menu button, .menu input, .menu .syn, .menu .si, .menu .dg, .menu .hc, .menu .hc .lv, .menu .hc.lead::after, .menu .tq, .menu .pill, .menu .np-h em, .menu .sk, .menu .rw span { border-radius:0; }
.menu .mtop { background:#14212f; border-bottom:2px solid #ad9567; box-shadow:0 3px #09131f; padding:10px 16px; min-height:58px; }
.menu .mtop .mt { font-size:22px; text-shadow:2px 2px #07111a; }
.menu .mtop .back { border:6px solid transparent; border-image:var(--px-button) 8 fill / 6px stretch; background:none; }
.menu .mtop .cur { border:2px solid #627889; background:#0e1b28; box-shadow:inset 2px 2px #08121b; min-width:85px; justify-content:center; }
.inline-icon { width:18px; height:18px; vertical-align:middle; display:inline-block; flex-shrink:0; }
.menu .inline-icon { margin:0 2px; }
.nbi .ico { width:40px; height:40px; }
.nb.big .nbi .ico { width:56px; height:56px; }
.lb-card .card-ic { width:40px; height:40px; flex-basis:40px; }
.wn .ni .pixel-ico { width:56px; height:56px; }
.wn .ni { width:56px; height:56px; }
.menu button:not(:disabled):hover { color:#fff0bb; }
.menu button:not(:disabled):focus-visible { outline:2px solid #ffe3a1; outline-offset:3px; }
.menu button:disabled { cursor:default; }
.menu .si, .menu .dg, .menu .st, .menu .settings, .menu .form-side {
  border:12px solid transparent; border-image:var(--px-panel) 8 fill / 12px stretch;
  background:none; box-shadow:3px 4px #08131d; border-radius:0;
}
.menu .si button, .menu .tier, .menu .grow button, .menu .pp-info .row button, .menu .settings button, .menu .g-buttons button, .menu .res-box .row button {
  border:8px solid transparent; border-image:var(--px-button) 8 fill / 8px stretch; background:none; color:#eee6cb; box-shadow:2px 3px #08131d; padding:3px 10px;
}
.menu .si button, .menu .tier.go, .menu .pp-info .row .go { border-image-source:var(--px-gold); color:#fff0b6; }
.menu .hc { border:3px solid var(--c); box-shadow:2px 3px #07111d,inset 1px 1px #e5eddd; background:#192b3e; }
.menu .hc b { background:#132333eb; padding:4px 2px; border-top:1px solid #b79c68; }
.menu .hc.r-SSR { border-color:#e8bb69; box-shadow:2px 3px #07111d; }
.menu .syn { border:2px solid #415767; background:#132432; box-shadow:1px 2px #08131d; }
.menu .syn.on { border-color:#bba16d; box-shadow:inset 2px 2px #263e4b; }
.menu .grow .lvl u { background:#83b889; box-shadow:inset 0 2px #b1d4a2; }
.menu .grow .lvl i, .menu .acc i, .menu .acc u { border-radius:0; }
.menu .settings { margin:20px 28px; padding:16px; flex:0 1 auto; width:min(500px,calc(100% - 56px)); max-width:none; }
.menu .settings input { accent-color:#ddb572; height:18px; }
.menu .shop { gap:16px; padding:20px 26px; overflow:auto; }
.shop-item-icon { width:56px; height:56px; align-self:center; margin:2px 0 8px; }
.menu .si { min-height:180px; padding:8px; }
.menu .si button { margin-top:auto; }
.menu .dgs { padding:20px 26px; gap:16px; }
.menu .dg { padding:12px; }
.menu .dg::before { background:none; }
.menu .dg b { color:#f2d7a0; text-shadow:2px 2px #09151f; }
.menu .inv { border-top:2px solid #4a6070; background:#102130; padding:8px 24px; }
#mtoast { border-radius:0; border:2px solid #baa16a; background:#101f2d; box-shadow:3px 4px #07111b; }

/* Mission ledger: raised icon badges, readable objective rows and separate rewards. */
.quest-banner { display:flex; align-items:center; gap:18px; padding:20px 30px 16px; flex:0 0 auto; }
.quest-banner>.ico { width:64px; height:64px; flex-shrink:0; }
.quest-banner small { color:#c6ae7d; font-size:11px; letter-spacing:2px; }
.quest-banner h2 { margin:3px 0; color:#f5e3b9; font-size:26px; font-weight:900; text-shadow:2px 3px #08131d; }
.quest-banner p { margin:0; color:#b0c0c8; font-size:12px; }
.quest-count { margin-left:auto; border-left:2px solid #48606d; padding-left:24px; min-width:135px; }
.quest-count>b { font-size:30px; color:#f2cd83; }
.quest-count>b small { letter-spacing:0; color:#aab8b9; font-size:15px; }
.quest-count span { display:block; font-size:11px; color:#aab8b9; }
.menu .missions { gap:20px; padding:0 26px 22px; }
.menu .mcol { border:12px solid transparent; border-image:var(--px-panel) 8 fill / 12px stretch; padding:0 8px 8px; gap:8px; }
.menu .mcol h3 { display:flex; align-items:center; gap:8px; position:sticky; top:0; z-index:1; background:#192638; border-bottom:2px solid #796c53; padding:8px 2px 12px; margin:0 0 4px; color:#ecd09a; }
.menu .mcol h3 .ico { width:28px; height:28px; }
.menu .mcol h3 small { margin-left:auto; color:#b6c2c7; opacity:1; }
.menu .ms { grid-template-columns:42px minmax(0,1fr) 66px 86px; grid-template-rows:auto 8px; min-height:76px; gap:6px 10px; padding:12px 10px; border:2px solid #415563; border-radius:0; background:#142331; box-shadow:inset 2px 2px #091822,2px 2px #0b1622; flex-shrink:0; }
.menu .ms .ms-icon { grid-column:1; grid-row:1/3; width:40px; height:40px; display:grid; place-items:center; background:#21374a; box-shadow:inset 1px 1px #53697b,2px 2px #08131d; }
.menu .ms-icon .ico { width:32px; height:32px; }
.menu .ms>b { grid-column:2; grid-row:1; font-size:12px; line-height:1.45; color:#e7e6d6; }
.menu .ms>i { grid-column:2/4; grid-row:2; width:100%; height:6px; border-radius:0; background:#08141f; box-shadow:0 1px #374b57; }
.menu .ms>i u { background:#aab780; box-shadow:inset 0 2px #d4d8a6; }
.menu .ms>span { grid-column:3; grid-row:1; font-size:10px; color:#c3c7ba; opacity:1; }
.menu .ms>button { grid-column:4; grid-row:1/3; align-self:stretch; border:6px solid transparent; border-image:var(--px-button) 8 fill / 6px stretch; padding:2px; font-size:12px; line-height:1.3; background:none; color:#c3c6b7; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2px; }
.menu .ms>button .ico { width:18px; height:18px; }
.menu .ms>button small { flex-basis:100%; font-size:9px; }
.menu .ms.ready { border-color:#c6a36a; background:#273539; }
.menu .ms.ready>button { border-image-source:var(--px-gold); color:#fff0bc; }
.menu .ms.ready>i u { background:#d2af6c; box-shadow:inset 0 2px #ffe1a0; }
.menu .ms.got { opacity:.62; }

/* Pixel town artwork and facilities. NPCs keep clear of the service panel. */
.pixel-town .tw-bg { image-rendering:pixelated; animation:none; background-position:45% 50%; }
.pixel-town::after { background:linear-gradient(0deg,#102130b0 0%,transparent 32%),linear-gradient(90deg,transparent 35%,#101e2970 100%); }
.pixel-town .tw-npc { image-rendering:pixelated; left:6%; bottom:8%; height:80%; max-width:43%; object-fit:contain; object-position:bottom; filter:drop-shadow(4px 4px 0 #14212cb0); animation:none; }
.tw-location { position:absolute; left:20px; top:14px; z-index:2; display:flex; align-items:center; gap:10px; background:#112130eb; border:2px solid #a88d61; box-shadow:3px 3px #0a1520; padding:8px 14px; }
.tw-location>.ico { width:40px; height:40px; }
.tw-location small { display:block; font-size:10px; color:#c1bb9e; }
.tw-location b { font-size:20px; color:#f3d799; }
.pixel-town .tw-facs { top:16px; right:22px; gap:8px; }
.pixel-town .tf { width:76px; height:82px; border-width:6px; border-image-width:6px; padding:2px; color:#dfd9bd; box-shadow:3px 3px #0b1824; }
.pixel-town .tf .ico { width:32px; height:32px; flex-shrink:0; }
.pixel-town .tf b { font-size:11px; }
.pixel-town .tf small { font-size:8px; }
.pixel-town .tf.on { border-image-source:var(--px-gold); filter:none; transform:translateY(2px); box-shadow:1px 1px #0b1824; color:#ffe4a6; }
.pixel-town .tw-body { top:114px; bottom:24px; right:22px; width:min(460px,44vw); padding:12px; gap:12px; border-width:12px; border-image-width:12px; box-shadow:4px 5px #0b1520; }
.pixel-town .tw-body h4 { padding-bottom:12px; border-bottom:2px solid #6e6854; line-height:1.5; flex-wrap:wrap; }
.pixel-town .tw-body h4>.ico { width:32px; height:32px; }
.pixel-town .tw-body h4 small { flex-basis:100%; color:#b9c3c5; }
.pixel-town .tw-talk { left:22px; bottom:24px; width:min(540px,46%); padding:10px 14px; min-height:96px; border-width:10px; border-image-width:10px; background:none; }
.pixel-town .tw-talk b { margin-top:-26px; border:2px solid #e5c185; box-shadow:2px 2px #102130; border-radius:0; background:#704c35; color:#ffedbe; padding:3px 14px; }
.pixel-town .tw-talk p { margin-top:8px; color:#e9e5d0; font-size:13px; line-height:1.65; }
.pixel-town .tq { border-radius:0; border:2px solid #455967; box-shadow:inset 2px 2px #102130; background:#162735; padding:12px 10px; gap:12px; flex-shrink:0; }
.pixel-town .tq b { color:#efe0bd; font-size:12px; }
.pixel-town .tq small { display:block; color:#b2c1c5; opacity:1; margin-top:4px; line-height:1.5; }
.pixel-town .tq.ready { border-color:#ccaa68; box-shadow:inset 2px 2px #3a443a; }
.pixel-town .tq button { min-width:86px; padding:5px; flex-shrink:0; }
.pixel-town .tarmy i { clip-path:polygon(0 0,100% 0,100% 75%,75% 75%,75% 100%,25% 100%,25% 75%,0 75%); background:#354959; border:2px solid #7d8c92; }
.pixel-town .tarmy i.on { background:#9aafba; box-shadow:inset 2px 2px #e6e6c5; }
.pixel-town .tw-join img { max-width:45%; object-fit:contain; }
.menu .mcol, .menu .tw-body, .menu .pool, .menu .hgrid { scrollbar-width:thin; scrollbar-color:#8b835f #10202e; }
@media(max-width:1050px) {
  .menu .missions { padding:0 14px 12px; gap:12px; }
  .menu .mcol { padding:0 4px 4px; border-width:8px; border-image-width:8px; }
  .menu .ms { grid-template-columns:32px minmax(0,1fr) 48px 62px; padding:8px 6px; gap:5px; min-height:64px; }
  .menu .ms .ms-icon { width:32px; height:32px; }
  .menu .ms>b { font-size:11px; }
  .pixel-town .tf { width:60px; height:70px; }
  .pixel-town .tw-body { right:14px; top:100px; bottom:14px; padding:8px; width:44vw; }
  .pixel-town .tw-facs { right:14px; top:12px; gap:6px; }
  .pixel-town .tw-talk { left:14px; bottom:14px; width:47%; }
}
@media(max-height:480px) {
  .menu .mtop { min-height:44px; padding:5px 10px; }
  .menu .mtop .mt { font-size:17px; }
  .quest-banner { padding:10px 18px; gap:10px; }
  .quest-banner>.ico { width:40px; height:40px; }
  .quest-banner h2 { font-size:18px; }
  .quest-banner p { display:none; }
  .quest-count>b { font-size:22px; }
  .menu .mcol h3 { font-size:12px; padding:4px 2px 7px; }
  .menu .mcol h3 .ico { width:22px; height:22px; }
  .menu .ms { min-height:60px; padding:6px; }
  .pixel-town .tw-location { top:8px; left:14px; padding:4px 8px; }
  .tw-location>.ico { width:28px; height:28px; }
  .tw-location b { font-size:16px; }
  .pixel-town .tf { width:56px; height:58px; border-width:4px; border-image-width:4px; gap:0; }
  .pixel-town .tf .ico { width:24px; height:24px; }
  .pixel-town .tf small { display:none; }
  .pixel-town .tw-body { top:80px; bottom:10px; gap:6px; border-width:8px; border-image-width:8px; padding:5px; }
  .pixel-town .tw-body h4 { padding-bottom:5px; margin:0; gap:4px; font-size:13px; }
  .pixel-town .tw-body h4>.ico { width:24px; height:24px; }
  .pixel-town .tw-body h4 small { font-size:9px; }
  .pixel-town .tq { padding:6px; }
  .pixel-town .tq button { min-width:66px; }
  .pixel-town .tw-npc { left:8%; height:80%; bottom:12%; }
  .pixel-town .tw-talk { bottom:10px; min-height:68px; padding:4px 7px; }
  .pixel-town .tw-talk p { font-size:11px; margin-top:3px; }
  .pixel-town .tw-talk b { font-size:10px; }
  .menu .dgs, .menu .shop { padding:10px 14px; gap:10px; }
  .menu .si { min-height:155px; }
  .shop-item-icon { width:36px; height:36px; margin:0; }
}
.menu .dg .dungeon-art { width:96px; height:96px; margin:4px auto 12px; flex-shrink:0; } @media(max-height:480px){ .menu .dg .dungeon-art { width:48px; height:48px; margin:0 auto 5px; } }
/* Matching summon, detail and result controls; hero illustrations stay original. */
.menu .g-info { margin:28px 20px; padding:24px; border:12px solid transparent; border-image:var(--px-panel) 8 fill / 12px stretch; align-self:center; box-shadow:4px 5px #0b1520; }
.menu .g-info .pull, .menu .g-open .ok { border:8px solid transparent; border-image:var(--px-button) 8 fill / 8px stretch; background:none; color:#eee6cb; box-shadow:2px 3px #08131d; padding:6px 10px; }
.menu .g-info .pull.ten { border-image-source:var(--px-gold); color:#ffe6a2; }
.menu .g-info small { letter-spacing:2px; }
.menu .g-orb { border-radius:0; background:#fff0b6; box-shadow:0 0 0 6px #ddb878,0 0 0 12px #a17b57; }
.menu .g-open.grid { background:#132331; }
.menu .gc { border-radius:0; background:#21354a; box-shadow:2px 3px #091725; }
.menu .hd-info { margin:16px 16px 16px 0; padding:12px 18px; border:10px solid transparent; border-image:var(--px-panel) 8 fill / 10px stretch; }
.menu .hd-cls { background:#263a49; border:2px solid #536878; }
.menu .hd-cls em { border-radius:0; background:#594b67; }
.menu .lk em { border:4px solid transparent; border-image:var(--px-gold) 8 fill / 4px stretch; background:none; color:#f5d996; border-radius:0; }
.menu .res-box { margin:20px; border:12px solid transparent; border-image:var(--px-panel) 8 fill / 12px stretch; }
.menu .rw span { border:2px solid #879179; background:#1a2e3b; }

/* Stage advice and counter tags use the existing pixel panel borders. */
.menu .prep { overflow-y:auto; }
.menu .gimmick-panel { width:min(760px,100%); box-sizing:border-box; padding:8px 12px; border:8px solid transparent; border-image:var(--px-panel) 8 fill / 8px stretch; color:#eee6cb; text-align:left; box-shadow:2px 3px #08131d; }
.menu .gimmick-panel h3 { display:flex; align-items:center; gap:5px; margin:0 0 5px; color:#f5d996; font-size:14px; }
.menu .gimmick-panel h3 .ico { width:19px; height:19px; }
.menu .gimmick-entry + .gimmick-entry { margin-top:7px; padding-top:7px; border-top:1px solid #607488; }
.menu .gimmick-title, .fp-gimmicks span { display:flex; align-items:center; gap:5px; color:#ffe4aa; font-size:12px; }
.menu .gimmick-title .ico, .fp-gimmicks .ico { width:18px; height:18px; }
.menu .gimmick-title small { color:#afc4ce; }
.menu .gimmick-entry p { margin:3px 0 5px; font-size:11px; line-height:1.4; color:#dae3dc; }
.menu .gimmick-heroes { display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-size:10px; }
.menu .gimmick-heroes>small { color:#b8ccce; margin-right:4px; }
.menu .gimmick-heroes button, .menu .gimmick-heroes span { display:inline-flex; align-items:center; gap:3px; padding:1px 5px; min-height:22px; border:2px solid #829797; background:#203847; color:#f5e6ba; font-size:10px; box-shadow:1px 2px #08131d; }
.menu .gimmick-heroes button:disabled { opacity:.65; box-shadow:none; }
.menu .gimmick-heroes img { width:18px; height:18px; object-fit:cover; image-rendering:pixelated; }
.menu .defeat-tip { flex:0 0 auto; width:min(520px,100%); }
.menu .hero-tags { display:flex; flex-wrap:wrap; gap:4px; margin:4px 0; }
.menu .hero-tag { padding:1px 5px; border:1px solid var(--tag); background:#112434; color:var(--tag); font-size:10px; font-weight:bold; box-shadow:1px 2px #08131d; }
.menu .hc.recruit .hc-front { top:20%; width:72%; height:auto; image-rendering:pixelated; }
.menu .hd-art.recruit { width:60%; height:60%; place-self:center; image-rendering:pixelated; object-fit:contain; }
.menu .res-art.recruit { width:28%; height:60%; align-self:center; object-fit:contain; image-rendering:pixelated; }

/* Short entry and press feedback, with the same hard edges as other controls. */
.menu.enter:not(.hide)>:not(.mtop) { animation:menuEnter .18s steps(4,end) both; }   /* 화면이 바뀔 때만(menu.js installSoftRender) */
@keyframes menuEnter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.menu button:not(:disabled), .menu .hc { transition:filter .1s, transform .1s, box-shadow .1s; }
.menu button:not(:disabled):hover, .menu button.hover, .menu .hc:hover { filter:brightness(1.16); }
.menu button:not(:disabled):active, .menu .hc:active { transform:translate(2px,2px); filter:brightness(.92); box-shadow:0 0 #08131d; }
.menu .rw span { opacity:0; animation:rewardIn .28s steps(4,end) forwards; }
.menu .rw span:nth-child(1) { animation-delay:.2s; }
.menu .rw span:nth-child(2) { animation-delay:.35s; }
.menu .rw span:nth-child(3) { animation-delay:.5s; }
.menu .rw span:nth-child(4) { animation-delay:.65s; }
.menu .rw span:nth-child(n+5) { animation-delay:.8s; }
@keyframes rewardIn { from { opacity:0; transform:translateY(8px) scale(.9); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) { .menu.enter:not(.hide)>:not(.mtop), .menu .rw span { animation:none; opacity:1; } }
@media(max-height:480px) {
 .menu .g-info { margin:10px; padding:10px; border-width:8px; border-image-width:8px; }
 .menu .g-info h2 { font-size:24px; }
 .menu .g-info p { font-size:11px; }
 .menu .hd-info { margin:8px 8px 8px 0; padding:6px; border-width:8px; border-image-width:8px; }
 .menu .res-box { margin:8px; border-width:8px; border-image-width:8px; }
}