/* Premium JRPG presentation layer. Battle HUD geometry remains in pixel-ui.css. */
:root {
  --ui-ink: #0d1422;
  --ui-midnight: #141d31;
  --ui-cream: #fff1c8;
  --ui-text: #dfe6f2;
  --ui-shadow: #05080f99;
}

/* Keep authored scenery intact; patterned paper fills only flat menu surfaces. */
#menu.menu:not(.scr-lobby):not(.scr-world):not(.scr-town):not(.scr-result) {
  background-color: var(--ui-midnight);
  background-image:
    radial-gradient(ellipse at center, transparent 34%, #050a15b8 100%),
    var(--px-bg);
  background-size: 100% 100%, 256px 256px;
  background-position: center, 0 0;
  background-repeat: no-repeat, repeat;
  image-rendering: pixelated;
}

#loading,
#rotate {
  background-color: var(--ui-midnight);
  background-image:
    radial-gradient(ellipse at center, transparent 34%, #050a15b8 100%),
    var(--px-bg);
  background-size: 100% 100%, 256px 256px;
  background-position: center, 0 0;
  background-repeat: no-repeat, repeat;
  image-rendering: pixelated;
}

/* The shared menu rail sits above an ornamental pixel divider. */
.menu .mtop {
  box-sizing: border-box;
  background-color: #0d1422;
  background-image: var(--px-divider), linear-gradient(#c9a45c, #c9a45c), linear-gradient(#05070d, #05070d), linear-gradient(180deg, #142034 0%, #0d1422 100%);
  background-size: 128px 12px, 100% 1px, 100% 1px, 100% 100%;
  background-position: 50% 100%, 0 calc(100% - 6px), 0 calc(100% - 5px), 0 0;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  border-bottom: 0;
  padding-bottom: 12px;
  box-shadow: none;
}
#menu.menu .mtop .mt {
  box-sizing: border-box;
  min-width: 0;
  flex: 0 1 auto;
  width: max-content;
  max-width: min(55vw, 560px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 3px 2px;
  border: 0 solid transparent;
  border-width: 0 26px;
  border-image: var(--px-ribbon) 0 26 fill / 0 26px stretch;
  background: none;
  color: var(--ui-cream);
  line-height: 19px;
  text-shadow: 1px 1px #28120f;
}
.menu .mtop .back {
  border-width: 8px;
  border-image-width: 8px;
}
.menu .mtop .cur {
  box-sizing: border-box;
  min-height: 32px;
  padding: 2px 7px;
  border: 8px solid transparent;
  border-image: var(--px-panel) 8 fill / 8px stretch;
  background: none;
  box-shadow: none;
  color: var(--ui-text);
}
.menu .mtop .cur b,
.menu .pill b { color: #f2d184; }
.menu .pill {
  box-sizing: border-box;
  border: 8px solid transparent;
  border-image: var(--px-panel) 8 fill / 8px stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.menu .pill button {
  border: 8px solid transparent;
  border-image: var(--px-gold) 8 fill / 8px stretch;
  background: none;
  box-shadow: 1px 1px 0 #05080f88;
}

/* Large windows carry the screen's hierarchy; inset plates organize their contents. */
.menu :is(.settings, .res-box, .mcol, .g-info, .hd-stage, .wm-panel, .dgs, .gimmick-panel) {
  box-sizing: border-box;
  border: 24px solid transparent;
  border-image: var(--px-window) 24 fill / 24px stretch;
  border-radius: 0;
  background: none !important;
  box-shadow: 4px 4px 0 var(--ui-shadow);
  filter: none;
}
.menu :is(.hd-info, .form-side, .si, .dg, .ms, .tq, .syn, .sk, .gp-row, .eq-slot, .np-b, .tw-location, .tw-join) {
  box-sizing: border-box;
  border: 16px solid transparent;
  border-image: var(--px-inset) 16 fill / 16px stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
/* 작은 칩(시너지·스킬·장비 칸·보상 줄)은 16px 인셋이 너무 두껍다 → 8px 패널 틀 */
.menu :is(.syn, .sk, .gp-row, .eq-slot, .tq) { border-width: 8px; border-image: var(--px-panel) 8 fill / 8px stretch; }
.menu .hd-info { padding: 8px; }
.menu .hd-stage { box-shadow: 4px 4px 0 var(--ui-shadow); }
.menu .settings { box-shadow: 4px 4px 0 var(--ui-shadow); }
.menu .si,
.menu .dg { box-shadow: 2px 2px 0 #05080f88; }
.menu .ms { min-width: 0; }
.menu .lb-adv {
  box-sizing: border-box;
  border: 24px solid transparent;
  border-image: var(--px-window) 24 fill / 24px stretch;
  background: none;
  box-shadow: 4px 4px 0 var(--ui-shadow);
}
.menu .lb-mis,
.menu .lb-card {
  border: 8px solid transparent;
  border-image: var(--px-panel) 8 fill / 8px stretch;
  background: none;
  box-shadow: 2px 2px 0 #05080f88;
}
.menu .lb-ban { border: 8px solid transparent; border-image: var(--px-panel) 8 fill / 8px stretch; }
.menu .sqb,
.menu .nbi { border-width: 8px; border-image-width: 8px; }
.menu .nb.big .nbi { border-image-source: var(--px-gold); }
.menu .gbtn.sm,
.menu .nbtn.sm,
.menu .sk em,
.pixel-town .tf { border-width: 8px; border-image-width: 8px; }
.menu .tw-body {
  box-sizing: border-box;
  border: 24px solid transparent;
  border-image: var(--px-window) 24 fill / 24px stretch;
  background: none !important;
  box-shadow: 4px 4px 0 var(--ui-shadow);
}
.menu .tw-talk {
  box-sizing: border-box;
  border: 24px solid transparent;
  border-image: var(--px-dialog) 24 fill / 24px stretch;
  background: none !important;
  box-shadow: 4px 4px 0 var(--ui-shadow);
}
.menu .tw-talk b {
  border: 8px solid transparent;
  border-image: var(--px-gold) 8 fill / 8px stretch;
  background: none;
  box-shadow: 2px 2px 0 #05080f88;
  color: var(--ui-cream);
}
.menu .tw-location { box-shadow: 2px 2px 0 #05080f88; }
.menu .wm-panel { background: none !important; }
.menu .g-open {
  background-color: var(--ui-midnight) !important;
  background-image:
    radial-gradient(ellipse at center, transparent 34%, #050a15b8 100%),
    var(--px-bg) !important;
  background-size: 100% 100%, 256px 256px !important;
  background-position: center, 0 0;
  background-repeat: no-repeat, repeat;
  image-rendering: pixelated;
}
.menu .g-open.feat { background-image: radial-gradient(ellipse at center, transparent 34%, #050a15b8 100%), var(--px-bg); }

/* Frame each hero thumbnail by its rarity. The frame is an overlay (::before), so the card keeps
   its original inner size: names and tags do not get squeezed. */
.menu .hc:not(.empty) {
  border: 2px solid #05070d;
  border-radius: 0;
  background: #141d31;
  box-shadow: 2px 2px 0 #05080f99;
}
.menu .hc:not(.empty)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border: 16px solid transparent;
  border-image: var(--px-card-r) 16 / 16px stretch;
  image-rendering: pixelated;
}
.menu .hc.r-SR:not(.empty)::before { border-image-source: var(--px-card-sr); }
.menu .hc.r-SSR:not(.empty)::before { border-image-source: var(--px-card-ssr); }
.menu .hc b { background: linear-gradient(transparent, #09111de8); border-top: 0; z-index: 2; }
.menu .hc .rar,
.menu .hc .lv,
.menu .hc .stars,
.menu .hc .hcl,
.menu .hc .card-tags,
.menu .hc.lead::after { z-index: 2; }
.menu .hc .lv { background: #101827e8; color: #fff1c8; }

/* Action states use short stepped changes that stay crisp at native pixel scale. */
.gbtn,
#title .t-start,
#pause .pbox #resume,
.menu .si button,
.menu .tier.go,
.menu .pp-info .row .go,
.menu .ms.ready > button { color: var(--ui-cream); }
.menu .nbtn,
.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,
.menu .ms > button,
.menu .tabs button,
.menu .hd-tabs button,
.menu .sm-tabs button,
.menu .gacha button {
  border-width: 8px;
  border-image-width: 8px;
}
.menu .tabs button,
.menu .hd-tabs button,
.menu .sm-tabs button { border-image-source: var(--px-button); }
.menu .tabs button.on,
.menu .hd-tabs button[aria-selected="true"],
.menu .sm-tabs button.on { border-image-source: var(--px-gold); color: var(--ui-cream); }
.menu .si button,
.menu .tier.go,
.menu .pp-info .row .go,
.menu .ms.ready > button { border-image-source: var(--px-gold); }
.menu .tier,
.menu .grow button,
.menu .pp-info .row button,
.menu .settings button,
.menu .g-buttons button,
.menu .res-box .row button,
.menu .ms > button { border-image-source: var(--px-button); }
.menu button:not(:disabled),
#title button:not(:disabled),
#pause button:not(:disabled),
#loading button:not(:disabled),
#account-dialog button:not(:disabled),
#entry-dialog button:not(:disabled),
#qlog button:not(:disabled),
#qreward button:not(:disabled),
.qol-dialog button:not(:disabled),
.hero-training button:not(:disabled),
.cutin-settings button:not(:disabled),
.menu .hc:not(.empty) {
  transition: translate .08s steps(2, end), filter .08s steps(2, end), color .08s steps(2, end);
}
.menu button:not(:disabled):hover,
#title button:not(:disabled):hover,
#pause button:not(:disabled):hover,
#account-dialog button:not(:disabled):hover,
#entry-dialog button:not(:disabled):hover,
.qol-dialog button:not(:disabled):hover,
.hero-training button:not(:disabled):hover,
.cutin-settings button:not(:disabled):hover,
.menu .hc:not(.empty):hover {
  translate: 0 -1px;
  filter: brightness(1.14);
}
.menu button:not(:disabled):active,
#title button:not(:disabled):active,
#pause button:not(:disabled):active,
#account-dialog button:not(:disabled):active,
#entry-dialog button:not(:disabled):active,
.qol-dialog button:not(:disabled):active,
.hero-training button:not(:disabled):active,
.cutin-settings button:not(:disabled):active,
.menu .hc:not(.empty):active {
  translate: 1px 1px;
  filter: brightness(.94);
}
.menu button:disabled,
#title button:disabled,
#account-dialog button:disabled,
#entry-dialog button:disabled { filter: saturate(.6) brightness(.8); }

/* Inputs read as recessed navy glass with a clear cream caret. */
.menu input:not([type="range"]),
.menu textarea,
.menu select,
#account-dialog input:not([type="file"]),
#entry-dialog input,
.qol-dialog input,
.hero-training select,
.cutin-settings input:not([type="checkbox"]):not([type="radio"]) {
  box-sizing: border-box;
  border: 16px solid transparent;
  border-image: var(--px-inset) 16 fill / 16px stretch;
  border-radius: 0;
  background: none;
  color: #f5f0e4;
  caret-color: var(--ui-cream);
}
.menu input::placeholder,
#account-dialog input::placeholder,
#entry-dialog input::placeholder,
.qol-dialog input::placeholder { color: #aab8cb; opacity: 1; }
.menu :is(h1, h2, h3, h4, h5, .mt),
#account-dialog :is(h2, h3),
.hero-training h2,
.qol-dialog h3 {
  color: #f3dfad;
  text-shadow: 1px 1px #07101c;
}
.menu,
#account-dialog,
#entry-dialog,
.qol-dialog,
.hero-training,
.cutin-settings { color: var(--ui-text); }
.menu .dim,
.menu small { color: #c2cede; }

/* Story and system overlays share the same 24px frame proportions. */
#cine .cn-box,
#story .st-box {
  box-sizing: border-box;
  border: 24px solid transparent;
  border-image: var(--px-dialog) 24 fill / 24px stretch;
  border-radius: 0;
  background: none;
  box-shadow: 4px 4px 0 var(--ui-shadow);
  color: #f5f0e4;
}
#cine .cn-box.narr,
#cine .cn-box.enemy,
#cine .cn-box.npc,
#cine .cn-box.tip,
#story .st-box.narr,
#story .st-box.enemy,
#story .st-box.tip { border-image-source: var(--px-dialog); box-shadow: 4px 4px 0 var(--ui-shadow); }
/* cutin-story.css 의 `#cine:is(.full, .scene, .over) .cn-box`(더 높은 우선순위)가 틀을 덮어쓰던 문제: 같은 선택자로 다시 건다.
   틀(24px)이 여백 역할을 하므로 안쪽 여백을 그만큼 줄여 글자 위치는 예전과 같게 둔다. */
#cine:is(.full, .scene, .over) .cn-box {
  border: 24px solid transparent;
  border-image: var(--px-dialog) 24 fill / 24px stretch;
  background: none;
  box-shadow: 4px 4px 0 var(--ui-shadow);
  padding: 6px 12px 2px;
  image-rendering: pixelated;
}
/* 이름표: 위치 기준은 틀 안쪽(24px 안)이라, 이름표 높이만큼 더 올려 윗테 위에 걸치게 한다(글자와 12px 띄움) */
#cine:is(.full, .scene, .over) .cn-name { top: -56px; }
@media (max-width: 600px) { #cine:is(.full, .scene, .over) .cn-box { padding: 2px 0 0; } #cine:is(.full, .scene, .over) .cn-name { top: -52px; } }
@media (max-height: 480px) {
  #cine:is(.full, .scene, .over) .cn-box { padding: 0; min-height: 96px; }
  #cine:is(.full, .scene, .over) .cn-name { top: -46px; }
}
html.vp-touch #cine:is(.full, .scene, .over) .cn-box { padding: 0 calc(2px / var(--vs, 1)); }
#cine .cn-text,
#story .st-text { color: var(--ui-text); }
#cine .cn-name,
#story .st-name {
  border: 8px solid transparent;
  border-image: var(--px-gold) 8 fill / 8px stretch;
  border-radius: 0;
  background: none;
  color: #fff5d8;
  text-shadow: 1px 1px #38200b;
  box-shadow: 2px 2px 0 #05080f88;
}
#cine .cn-name:empty,
#story .st-name:empty { display: none; }
#cine .cn-next,
#story .st-next { animation: blink .6s steps(2, end) infinite alternate; }
#cine .cn-choice button {
  border: 8px solid transparent;
  border-image: var(--px-button) 8 fill / 8px stretch;
  background: none;
  box-shadow: 2px 2px 0 #05080f88;
}
#cine .cn-choice button:hover,
#cine .cn-choice button.pick { border-image-source: var(--px-gold); }
#story .st-title { border: 0 solid transparent; border-width: 0 26px; border-image: var(--px-ribbon) 0 26 fill / 0 26px stretch; background: none; }

/* Account, pause, reward, and confirmation panels use hard pixel shadows. */
#pause .pbox,
#loading > div,
#account-dialog,
#entry-dialog,
.qol-dialog,
.hero-training,
.cutin-settings,
#qlog .ql-box,
#qreward .qr-box,
.gp-win {
  box-sizing: border-box;
  border: 24px solid transparent;
  border-image: var(--px-window) 24 fill / 24px stretch;
  border-radius: 0;
  background-color: transparent;
  box-shadow: 4px 4px 0 var(--ui-shadow);
}
#pause .pbox { min-width: min(320px, calc(100vw - 32px)); }
#pause .pbox button,
#title .t-links button,
#account-dialog button,
#entry-dialog button,
#account-dialog .account-file,
.qol-dialog button,
.hero-training button,
.cutin-settings button,
#qlog .ql-q,
#qlog .ql-x {
  box-sizing: border-box;
  border: 8px solid transparent;
  border-image: var(--px-button) 8 fill / 8px stretch;
  border-radius: 0;
  background: none;
  color: var(--ui-text);
  box-shadow: 2px 2px 0 #05080f88;
}
#pause .pbox #resume,
#title .t-start,
#account-dialog [data-act="register"],
#account-dialog [data-act="login"],
#entry-dialog #entry-resume,
.qol-dialog button[data-confirm],
#qlog .ql-q.on { border-image-source: var(--px-gold); color: var(--ui-cream); }
#title .t-start { border-width: 8px; border-image-width: 8px; }
#title .help { border-width: 8px; border-image-width: 8px; }
#title .t-links button { border-width: 8px; border-image-width: 8px; }
#mtoast {
  box-sizing: border-box;
  border: 16px solid transparent;
  border-image: var(--px-inset) 16 fill / 16px stretch;
  background: none;
  box-shadow: 3px 3px 0 var(--ui-shadow);
  color: #f5f0e4;
  text-shadow: 1px 1px #07101c;
}
#account-dialog { color: var(--ui-text); font-family: var(--pixel-font) !important; }
#account-dialog section { border-top: 0; margin-top: 12px; padding: 12px; border: 16px solid transparent; border-image: var(--px-inset) 16 fill / 16px stretch; }
#account-dialog #account-status { border: 16px solid transparent; border-image: var(--px-inset) 16 fill / 16px stretch; background: none; }
#entry-dialog { color: var(--ui-text); font-family: var(--pixel-font) !important; }
#entry-dialog input { caret-color: var(--ui-cream); }
#qlog .ql-box { background: none; }
#qlog .ql-h { border-bottom: 12px solid transparent; border-image: var(--px-divider) 0 0 12 / 0 0 12px stretch; }
#qlog .ql-q { text-align: left; }
#qreward .qr-box { padding: 24px; }
#qreward .qr-it,
#qlog .ql-q { border: 16px solid transparent; border-image: var(--px-inset) 16 fill / 16px stretch; color: var(--ui-text); }
#coach .co-tip { border: 16px solid transparent; border-image: var(--px-inset) 16 fill / 16px stretch; background: none; box-shadow: 4px 4px 0 var(--ui-shadow); }
.hero-training .ht-story,
.hero-training .ht-targets,
.hero-training .ht-skills button,
.cutin-settings label,
.lb-chat,
#entry-dialog #entry-status,
.qol-dialog .gem-supply { border: 16px solid transparent; border-image: var(--px-inset) 16 fill / 16px stretch; border-radius: 0; background: none; }
.hero-training .ht-field { border: 16px solid transparent; border-image: var(--px-inset) 16 fill / 16px stretch; }
.hero-training .ht-skills button { box-shadow: 2px 2px 0 #05080f88; }
.lb-chat { box-sizing: border-box; color: var(--ui-text); box-shadow: 3px 3px 0 var(--ui-shadow); }
#entry-dialog #entry-status { color: var(--ui-cream); }
.qol-dialog { color: var(--ui-text); }
.qol-dialog input { border-width: 16px; border-image-width: 16px; }

/* The oath retains parchment color and movement while its edge stays pixel sharp. */
.oa-paper {
  border: 3px solid #6a4a24;
  border-radius: 0;
  box-shadow: 4px 4px 0 #25180ccc, 0 0 0 4px #2a1a0c;
}
.oa-go { border-width: 8px; border-image: var(--px-gold) 8 fill / 8px stretch; background: none; filter: drop-shadow(2px 2px 0 #25180c99); }

@media (pointer: fine) {
  body,
  button,
  a,
  [role="button"] {
    /* 건틀릿 손끝이 왼쪽 위(일반 화살표처럼). 핫스팟 = 손끝, tools/rotate-cursor.py */
    cursor: image-set(url(assets/ui/kit/cursor.png) 1x, url(assets/ui/kit/cursor@2x.png) 2x) 2 1, auto;
  }
}

@media (max-height: 480px) {
  /* 폰 가로: 캐릭터 창 정보 패널은 얇은 8px 틀(두꺼운 인셋 틀이 세로 20px 를 먹어 스킬 탭이 넘쳤다) */
  .menu .hd-info { border-width: 8px; border-image: var(--px-panel) 8 fill / 8px stretch; padding: 4px 6px; }
  .menu .hd-info .sk { padding: 0 4px; }
  /* 상단 막대: 장식 없이 1px 금색 선만(세로 7px 절약) */
  .menu .mtop { padding-bottom: 5px; background-size: 0 0, 100% 1px, 100% 1px, 100% 100%; background-position: 0 0, 0 calc(100% - 2px), 0 calc(100% - 1px), 0 0; }
}
@media (max-height: 480px), (max-width: 700px) {
  #menu.menu .mtop .mt { max-width: 55vw; font-size: 17px; }
  #title .t-start { min-width: 0; }
  #account-dialog,
  #entry-dialog,
  .qol-dialog,
  .hero-training,
  .cutin-settings { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  #qreward .qr-box { max-height: 88dvh; overflow: auto; }
}

@media (max-width: 700px) and (min-height: 481px) {
  #menu.scr-formation .form-bot { flex-direction: column; gap: 8px; }
  #menu.scr-formation .pool { flex: 1 1 0; min-height: 120px; }
  #menu.scr-formation .form-side { width: auto; min-width: 0; max-height: 36%; overflow-y: auto; padding: 8px; }
  #menu.scr-formation .form-side .syns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  #menu.scr-formation .form-side .syn { min-width: 0; padding: 4px 6px; font-size: 10px; }
  #menu.scr-formation .form-side p { font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }

  #menu.scr-missions .quest-banner {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 4px 8px;
    padding: 10px;
  }
  #menu.scr-missions .quest-banner > .ico { grid-column: 1; grid-row: 1 / 3; width: 40px; height: 40px; }
  #menu.scr-missions .quest-banner > div:not(.quest-count) { grid-column: 2 / 4; grid-row: 1; min-width: 0; }
  #menu.scr-missions .quest-banner h2 { margin: 0; font-size: 18px; line-height: 1.4; }
  #menu.scr-missions .quest-banner p { display: none; }
  #menu.scr-missions .quest-count { grid-column: 2; grid-row: 2; min-width: 0; margin: 0; padding: 0; border: 0; }
  #menu.scr-missions .quest-count > b { font-size: 20px; }
  #menu.scr-missions .quest-count span { display: inline; margin-left: 4px; }
  #menu.scr-missions .quest-claim { grid-column: 3; grid-row: 2; min-width: 94px; white-space: nowrap; font-size: 12px; padding-inline: 8px; }
  #menu.scr-missions .missions { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; min-height: 0; padding: 0 8px 8px; }
  #menu.scr-missions .mcol { min-width: 0; min-height: 0; padding: 0 4px 4px; }
  #menu.scr-missions .ms { grid-template-columns: 32px minmax(0, 1fr) auto 48px; gap: 4px; padding: 6px; }
  #menu.scr-missions .ms .ms-icon { width: 30px; height: 30px; }
  #menu.scr-missions .ms > b { font-size: 11px; line-height: 1.4; }
  #menu.scr-missions .ms { grid-template-columns: 32px minmax(0, 1fr) auto 68px; }
  #menu.scr-missions .ms > button { min-width: 68px; padding-inline: 4px; font-size: 11px; }

  #menu.scr-dungeons .dgs { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; min-height: 0; align-content: start; overflow-y: auto; overflow-x: hidden; }
  #menu.scr-dungeons .dg { min-width: 0; }

  .pixel-town .tw-location { top: 8px; left: 8px; padding: 4px 8px; }
  .pixel-town .tw-location > .ico { width: 28px; height: 28px; }
  .pixel-town .tw-location b { font-size: 15px; }
  .pixel-town .tw-facs { top: 58px; left: 8px; right: 8px; justify-content: flex-end; gap: 4px; }
  .pixel-town .tf { width: 56px; height: 58px; padding: 2px; }
  .pixel-town .tf .ico { width: 24px; height: 24px; }
  .pixel-town .tf b { font-size: 10px; }
  .pixel-town .tf small { display: none; }
  .pixel-town .tw-body { top: 124px; left: 8px; right: 8px; bottom: 128px; width: auto; padding: 8px; }
  .pixel-town .tw-talk { left: 8px; right: 8px; bottom: 8px; width: auto; min-height: 96px; max-height: 15%; overflow: auto; padding: 8px 12px; }
  .pixel-town .tw-talk b { margin-top: -20px; }
}

@media (prefers-reduced-motion: reduce) {
  .menu button,
  #title button,
  #pause button,
  #account-dialog button,
  #entry-dialog button,
  .qol-dialog button,
  .hero-training button,
  .cutin-settings button,
  .menu .hc { transition: none; }
}

/* ---------- 전투 평가: 도트 문장(assets/ui/kit/rank_*.png, 높이 64)을 2배로. 글자는 스크린리더용으로 남기고 숨긴다 ---------- */
.res-rank { width: 128px; height: 128px; border: 0; border-radius: 0; box-shadow: none; background: url(assets/ui/kit/rank_C.png) center / contain no-repeat;
  image-rendering: pixelated; color: transparent; text-shadow: none; font-size: 0; transform: rotate(0); right: 10px; top: -6px;
  filter: drop-shadow(3px 3px 0 #05070dcc); animation: rankStampPx .5s steps(5, end) .9s both; }
.res-rank.S { background-image: url(assets/ui/kit/rank_S.png); }
.res-rank.A { background-image: url(assets/ui/kit/rank_A.png); }
.res-rank.B { background-image: url(assets/ui/kit/rank_B.png); }
.res-rank small { transform: translateX(-50%); bottom: -8px; font-size: 11px; color: #ffe89a; text-shadow: 1px 1px 0 #000; }
@keyframes rankStampPx { 0% { transform: scale(2.4); opacity: 0; } 60% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@media (max-height: 480px) { .res-rank { width: 64px; height: 64px; top: 4px; } }

/* ---------- 필드 HUD: 지역 이름·미니맵·단축 버튼·조우 창·알림도 키트 틀로 ---------- */
#fhud .fh-reg { border: 8px solid transparent; border-image: var(--px-panel) 8 fill / 8px stretch; background: none; box-shadow: 3px 3px 0 var(--ui-shadow); padding: 2px 6px 3px; }
#fhud .fh-mini canvas { border: 8px solid transparent; border-image: var(--px-inset) 16 / 8px stretch; box-shadow: 3px 3px 0 var(--ui-shadow); }
#fhud .fh-btns button { border: 8px solid transparent; border-image: var(--px-button) 8 fill / 8px stretch; background: none; box-shadow: 2px 2px 0 #05080f88; color: var(--ui-cream); }
#fhud .fh-btns button:active { transform: none; translate: 1px 1px; box-shadow: 1px 1px 0 #05080f88; }
#fhud .fh-panel { border: 24px solid transparent; border-image: var(--px-window) 24 fill / 24px stretch; background: none; box-shadow: 4px 4px 0 var(--ui-shadow); padding: 0 2px; }
#fhud .fh-panel .fp-act { background: none; }
#fhud .fh-toast { border: 8px solid transparent; border-image: var(--px-panel) 8 fill / 8px stretch; background: none; box-shadow: 3px 3px 0 var(--ui-shadow); }
.fh-loading { background-color: var(--ui-midnight); background-image: radial-gradient(ellipse at center, transparent 34%, #050a15b8 100%), var(--px-bg); background-size: 100% 100%, 256px 256px; image-rendering: pixelated; color: var(--ui-cream); }
@media (max-width: 700px) and (min-height: 481px) { #fhud .fh-panel { border-width: 16px; border-image: var(--px-inset) 16 fill / 16px stretch; } }