/* 月紡ぎのアストリア — 月銀の装丁 / load AFTER style.css.
   All ornamental layers are inert. Nine-slice sources have transparent centers.
   Source pixels are sliced proportionally; displayed corners stay 18–32px. */
:root {
  --bg: #0c1024;
  --bg2: #19213d;
  --panel: #141b32;
  --panel-solid: #141b32;
  --line: #646a82;
  --line-strong: #b9bfd5;
  --text: #f3eee3;
  --muted: #bdc3d5;
  --accent: #b8dcf4;
  --accent2: #d3c3ed;
  --gold: #eed19a;
  --danger: #ffa7b6;
  --ok: #a7e7c4;
  --silver: #d3d7e1;
  --brass: #a08b60;
  --ink: #281e12;
  --paper: #ead9b5;
  --surface-top: #27314d;
  --surface-bottom: #10162a;
  --selected: #354868;
  --shade: #050916;
  --radius: 3px;
  --serif: 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --sans: 'DotGothic16', 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', sans-serif; /* 2026-10-02 フォントF：本文と数字はドット文字 */
  --frame-large: url('assets/ui/window-large.png');
  --frame-small: url('assets/ui/window-small.png');
  --frame-dialogue: url('assets/ui/dialogue-frame.png');
  --button-normal: url('assets/ui/button-normal.png');
  --button-pressed: url('assets/ui/button-pressed.png');
  --button-gold: url('assets/ui/button-gold.png');
  --tab-art: url('assets/ui/tab.png');
  --rule-art: url('assets/ui/heading-rule.png');
  --grain: url('assets/ui/parchment-texture.png');
  --surface: var(--grain), linear-gradient(145deg, var(--surface-top), var(--surface-bottom) 78%);
  --shadow-soft: #05091666;
  --shadow-button: #05091680;
  --shadow-panel: #05091688;
  --shadow-deep: #05091699;
  --shadow-bar: #050916aa;
  --inset-shadow: #070b1766;
  --quest-tint: #302d3e;
  --rank-top: #323647;
  --rank-bottom: #11172a;
  --inset-base: #080c1b;
  --ghost-face: #11182b;
  --danger-face: #693547;
  --bar-top: #202941;
  --bar-bottom: #101629;
  --rail-dark: #070c1b;
  --rail-glint: #9c91ab66;
  --nav-top: #26304a;
  --nav-bottom: #111628;
  --nav-selected-top: #8293ba22;
  --nav-selected-bottom: #bdab7926;
  --brass-faint: #a08b6055;
  --gold-glow: #eed19a55;
  --gold-halo: #eed19a44;
  --learned-top: #293953;
  --hp-low: #578985;
  --gauge-low: #8e81bd;
  --battle-shade: #0c1024ee;
  --hint-face: #0c1024dd;
  --dialog-veil-top: #070b1955;
  --dialog-veil-bottom: #070b19e8;
  --dialog-top: #252d47;
  --dialog-bottom: #12192f;
  --nameplate-top: #30364b;
  --nameplate-bottom: #151b30;
  --modal-veil: #060a18c9;
  --icon-well: #353d56;
}
body { font-family: var(--sans); line-height: 1.6; }
button, input, select, textarea { touch-action: manipulation; }
button { min-width: 44px; min-height: 44px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 3px;
}
.grow { min-width: 0; }
.content { padding-bottom: calc(100px + env(safe-area-inset-bottom)); scrollbar-color: var(--brass) var(--bg); }
.grid2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
h1, h2, h3, .nm, .sn, .result-title { font-family: var(--serif); }
h2 { color: var(--text); gap: 9px; line-height: 1.5; }
h2::before { color: var(--gold); text-shadow: 0 1px 3px var(--shade); }
h2::after { content: ''; flex: 1; min-width: 28px; max-width: 180px; height: 22px; background: var(--rule-art) center / 100% auto no-repeat; opacity: .8; }
.muted, label { color: var(--muted); }
.card, .slot, .quest, .node, .unit-box, .preview-box, .order, .stage-label, .portrait, .dbox {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 5px 16px var(--shadow-soft), inset 0 0 0 3px var(--inset-shadow);
}
.card, .slot, .quest, .node, .unit-box, .preview-box, .order, .stage-label {
  background: var(--surface); backdrop-filter: none;
}
.card { padding: 20px; }
.card::before, .slot::before, .quest::before, .node::before, .unit-box::before,
.preview-box::before, .order::before, .stage-label::before, .portrait::before, .dbox::before {
  content: ''; position: absolute; inset: -1px; z-index: 3; pointer-events: none;
  border: 1px solid transparent; border-image: var(--frame-small) 23% / 20px / 0 stretch;
}
.card::before, .portrait::before { border-image: var(--frame-large) 23% / 32px / 0 stretch; }
.slot, .quest { padding: 12px; gap: 10px; }
.slot .grow, .quest .qt, .item-name, .node .nt { overflow-wrap: anywhere; }
.slot .btn, .quest .btn { flex-shrink: 0; }
.slot .sl { width: 38px; flex-shrink: 0; }
.quest { background: var(--grain), linear-gradient(110deg, var(--quest-tint), var(--panel-solid) 72%); }
.quest.done { opacity: .76; }
.quest .qm, .node .nd, .skill-list .sd { line-height: 1.7; }
.rank { border-radius: 2px; background: var(--grain), linear-gradient(145deg, var(--rank-top), var(--rank-bottom)); box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 4px var(--brass); }
.rank-pick button, .stepper button, .pick button, .facing button {
  border-radius: 3px; background: var(--surface); border-color: var(--line); box-shadow: inset 0 0 0 2px var(--bg);
}
.rank-pick button.on, .pick button.on, .facing button.on {
  background: var(--selected); color: var(--text); border-color: var(--gold); box-shadow: inset 0 -3px var(--brass);
}
.stepper button { width: 44px; height: 44px; }
.tag, .stat-pill { border-radius: 3px; background: var(--grain), var(--bg); border-color: var(--brass); }
.tag { line-height: 1.7; }
.stat-pill { box-shadow: inset 0 0 0 2px var(--inset-base); font-variant-numeric: tabular-nums; }
input, select, textarea { border-radius: 3px; background: var(--grain), var(--bg); border-color: var(--line); font-size: 16px; box-shadow: inset 0 2px 6px var(--shadow-deep); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .85; }

/* Enamel faces are sliced, so long labels never distort the metal end caps. */
.btn, .tabs button, .skill-list button {
  position: relative; isolation: isolate; border: 1px solid var(--line-strong); border-radius: 3px;
  background: var(--surface); color: var(--text); min-height: 46px; padding: 11px 20px;
  line-height: 1.5; box-shadow: 0 2px 5px var(--shadow-button); text-shadow: 0 1px 2px var(--shade);
  transition: filter .12s, transform .08s, box-shadow .12s;
}
.btn::before, .tabs button::before {
  content: ''; position: absolute; z-index: -1; inset: -1px; border: 1px solid transparent;
  border-image: var(--button-normal) 28% 14% fill / 13px 24px / 0 stretch; pointer-events: none;
}
.btn.small { min-height: 44px; padding: 9px 12px; }
.btn.small::before { border-image-width: 11px 15px; }
.btn.primary { background: var(--selected); color: var(--text); border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent), 0 2px 8px var(--shadow-deep); }
.btn.primary::before { opacity: .64; }
.btn.gold { background: var(--paper); color: var(--ink); border-color: var(--gold); text-shadow: none; }
.btn.gold::before { border-image-source: var(--button-gold); }
.btn.ghost { background: var(--grain), var(--ghost-face); border-color: var(--line); color: var(--silver); }
.btn.ghost::before { border-image: var(--frame-small) 23% / 15px / 0 stretch; }
.btn.danger { background: var(--danger-face); color: var(--text); border-color: var(--danger); }
.btn.danger::before { opacity: .35; }
.btn:active:not(:disabled), .btn.is-pressed { transform: translateY(1px); box-shadow: inset 0 3px 8px var(--shade); }
.btn:not(.gold):not(.ghost):active:not(:disabled)::before, .btn.is-pressed::before { border-image-source: var(--button-pressed); }
.btn.gold:active:not(:disabled) { filter: brightness(.9); }
.btn:disabled, .skill-list button:disabled, .pick button:disabled { opacity: .64; filter: saturate(.25); cursor: not-allowed; }
@media (hover: hover) {
  .btn:hover:not(:disabled), .tabs button:hover, .nav button:hover, .skill-list button:hover:not(:disabled) { filter: brightness(1.16); }
  .char-card:hover, .stage-card:not(.locked):hover { border-color: var(--gold); }
}
.tabs { gap: 6px; border-bottom: 1px solid var(--brass); padding-bottom: 5px; }
.tabs button { min-width: 52px; padding: 10px 14px; }
.tabs button::before { border-image-source: var(--tab-art); }
.tabs button.on { background: var(--selected); color: var(--gold); border-color: var(--gold); box-shadow: inset 0 -3px var(--gold); }
.tabs button.on::before { opacity: .5; }

/* Bars use a quiet metal rail, leaving room for titles and touch targets. */
.topbar { background: var(--grain), linear-gradient(var(--bar-top), var(--bar-bottom)); border-bottom: 1px solid var(--brass); box-shadow: 0 3px 0 var(--rail-dark), 0 4px 0 var(--rail-glint), 0 8px 18px var(--shadow-panel); gap: 8px; }
.topbar .title { color: var(--paper); line-height: 1.4; }
.nav { background: var(--grain), linear-gradient(var(--nav-top), var(--nav-bottom) 40%); border-top-color: var(--brass); box-shadow: 0 -3px 0 var(--rail-dark), 0 -4px 0 var(--rail-glint), 0 -7px 22px var(--shadow-bar); gap: 4px; }
.nav button { position: relative; border-inline: 1px solid transparent; border-radius: 2px; line-height: 1.4; }
.nav button.on { background: linear-gradient(var(--nav-selected-top), var(--nav-selected-bottom)); color: var(--gold); border-inline-color: var(--brass-faint); box-shadow: inset 0 -2px var(--gold); }
.nav button.on .ni { color: var(--gold); text-shadow: 0 0 10px var(--gold-glow); }
.lamp-board .big { color: var(--gold); text-shadow: 0 0 16px var(--gold-halo); }
.char-card { padding: 0; }
.char-card .pic { border-right: 1px solid var(--brass); }
.char-card .info { padding: 15px 14px; min-width: 0; }
.char-card .nm { color: var(--paper); }
.stats { gap: 5px; }
.stats div { border-radius: 2px; background: var(--bg); border-bottom: 1px solid var(--brass); padding: 5px; }
.stats b { color: var(--text); font-variant-numeric: tabular-nums; }
.portrait { box-shadow: 0 8px 25px var(--shadow-panel); }
.node { padding: 14px; }
.node.learned { border-color: var(--accent); background: var(--grain), linear-gradient(120deg, var(--learned-top), var(--bg)); }
.node.locked { opacity: .72; }
.stage-card { padding: 24px; min-height: 145px; }
.stage-card > .bgimg { position: absolute; z-index: 0; }
.stage-card .ch { color: var(--gold); }
.stage-card .sn { text-shadow: 0 2px 5px var(--shade); }
.bar { border-radius: 2px; height: 9px; border-color: var(--line); }
.bar > i { background: linear-gradient(90deg, var(--hp-low), var(--ok)); }
.bar.gauge > i { background: linear-gradient(90deg, var(--gauge-low), var(--gold)); }
.who i, .unit-box .face, .order .o { border-radius: 2px; }
.bhud-top { flex-wrap: wrap; }
.order { padding: 6px; gap: 5px; }
.order::before { border-image-width: 14px; }
.stage-label { padding: 8px 12px; color: var(--paper); }
.stage-label::before { border-image-width: 14px; }
.bpanel { background: linear-gradient(transparent, var(--battle-shade) 34%); max-height: 62dvh; overflow-y: auto; }
.bpanel:empty { background: none; }
.unit-box { padding: 12px; }
.unit-box .ub-name { font-family: var(--serif); }
.cmds { gap: 8px; }
.cmds .btn { min-height: 48px; }
.cmds .btn.ult { color: var(--ink); background: var(--paper); text-shadow: none; border-color: var(--gold); }
.cmds .btn.ult::before { border-image-source: var(--button-gold); }
.skill-list button { padding: 12px 16px; border-color: var(--brass); }
.preview-box { padding: 14px; }
.preview-box .pv { flex-wrap: wrap; }
.hint { color: var(--text); background: var(--hint-face); width: fit-content; max-width: 100%; padding: 3px 8px; border-left: 2px solid var(--brass); }
.dialog { background: linear-gradient(var(--dialog-veil-top), var(--dialog-veil-bottom)); }
.dbox { background: var(--grain), linear-gradient(var(--dialog-top), var(--dialog-bottom)); border: 1px solid var(--line-strong); border-radius: 3px; padding: 32px 28px 28px; box-shadow: 0 -8px 32px var(--shadow-panel); }
.dbox::before { border-image: var(--frame-dialogue) 24% 9% / 28px / 0 stretch; }
.dbox .dname { top: -20px; left: 24px; border-radius: 2px; color: var(--paper); background: var(--grain), linear-gradient(var(--nameplate-top), var(--nameplate-bottom)); border-color: var(--brass); box-shadow: inset 0 0 0 2px var(--bg), 0 2px 6px var(--shadow-deep); padding: 7px 22px; z-index: 4; }
.dbox .dtext { line-height: 1.9; color: var(--text); }
.dbox.narr { font-family: var(--sans); }
.dbox .dnext { color: var(--gold); right: 20px; }
.modal-bg { background: var(--modal-veil); backdrop-filter: blur(4px); }
.modal { padding: 26px; overscroll-behavior: contain; scrollbar-color: var(--brass) var(--bg); }
.result-title { color: var(--paper); font-size: clamp(30px, 8vw, 40px); letter-spacing: .22em; text-shadow: 0 2px 2px var(--shade), 0 0 22px var(--gold-halo); }
.result-title::after { content: ''; display: block; height: 30px; max-width: 280px; margin: 0 auto; background: var(--rule-art) center / contain no-repeat; }
#toast { max-width: calc(100vw - 28px); width: max-content; }
#toast div { color: var(--text); background: var(--surface); border-color: var(--brass); border-radius: 3px; box-shadow: inset 0 0 0 3px var(--bg), 0 5px 18px var(--shadow-bar); }

/* PNG type art bridge. Match the existing SVG paths without touching icons.js.
   Unknown/new glyphs keep their SVG fallback. Explicit classes serve new markup. */
.ticon { position: relative; isolation: isolate; border-radius: 3px; border: 0; background: radial-gradient(ellipse at 50% 30%, var(--icon-well), var(--bg)); box-shadow: none; }
.ticon::after { content: ''; position: absolute; inset: 0; background: var(--rarity-art, url('assets/icons/frame_common.png')) center / 100% 100% no-repeat; pointer-events: none; }
.ticon.r-common { --rarity-art: url('assets/icons/frame_common.png'); }
.ticon.r-rare { --rarity-art: url('assets/icons/frame_rare.png'); }
.ticon.r-epic { --rarity-art: url('assets/icons/frame_epic.png'); }
.ticon.r-legend { --rarity-art: url('assets/icons/frame_legend.png'); animation: none; }
.ticon[class*='icon-']::before { content: ''; position: absolute; inset: 0; background: var(--type-art) center / contain no-repeat; pointer-events: none; }
.ticon.icon-sword { --type-art: url('assets/icons/sword.png'); }
.ticon.icon-greatsword { --type-art: url('assets/icons/greatsword.png'); }
.ticon.icon-spear { --type-art: url('assets/icons/spear.png'); }
.ticon.icon-axe { --type-art: url('assets/icons/axe.png'); }
.ticon.icon-bow { --type-art: url('assets/icons/bow.png'); }
.ticon.icon-dagger { --type-art: url('assets/icons/dagger.png'); }
.ticon.icon-staff { --type-art: url('assets/icons/staff.png'); }
.ticon.icon-shield { --type-art: url('assets/icons/shield.png'); }
.ticon.icon-armor { --type-art: url('assets/icons/armor.png'); }
.ticon.icon-acc { --type-art: url('assets/icons/acc.png'); }
.ticon.icon-moon_dew { --type-art: url('assets/icons/moon_dew.png'); }
.ticon.icon-full_moon_dew { --type-art: url('assets/icons/full_moon_dew.png'); }
.ticon.icon-lamp_shard { --type-art: url('assets/icons/lamp_shard.png'); }
.ticon.icon-star_sand { --type-art: url('assets/icons/star_sand.png'); }
@supports selector(:has(*)) {
  .ticon:has(> svg > path[d^='M19.5 2.5']) { --type-art: url('assets/icons/sword.png'); }
  .ticon:has(> svg > path[d^='M18 1.5']) { --type-art: url('assets/icons/greatsword.png'); }
  .ticon:has(> svg > path[d^='M3.5 20.5']) { --type-art: url('assets/icons/spear.png'); }
  .ticon:has(> svg > path[d^='M5 21 16']) { --type-art: url('assets/icons/axe.png'); }
  .ticon:has(> svg > path[d^='M7 2.5C19']) { --type-art: url('assets/icons/bow.png'); }
  .ticon:has(> svg > path[d^='M18.5 3.5']) { --type-art: url('assets/icons/dagger.png'); }
  .ticon:has(> svg > path[d^='M5 21.5']) { --type-art: url('assets/icons/staff.png'); }
  .ticon:has(> svg > path[d^='M12 2 20']) { --type-art: url('assets/icons/shield.png'); }
  .ticon:has(> svg > path[d^='M6 4 9.5']) { --type-art: url('assets/icons/armor.png'); }
  .ticon:has(> svg > circle[cx='12'][cy='14']) { --type-art: url('assets/icons/acc.png'); }
  .ticon:has(> svg > :is(path[d^='M19.5 2.5'], path[d^='M18 1.5'], path[d^='M3.5 20.5'], path[d^='M5 21 16'], path[d^='M7 2.5C19'], path[d^='M18.5 3.5'], path[d^='M5 21.5'], path[d^='M12 2 20'], path[d^='M6 4 9.5'], circle[cx='12'][cy='14']))::before {
    content: ''; position: absolute; inset: 0; background: var(--type-art) center / contain no-repeat; pointer-events: none;
  }
  .ticon:has(> svg > :is(path[d^='M19.5 2.5'], path[d^='M18 1.5'], path[d^='M3.5 20.5'], path[d^='M5 21 16'], path[d^='M7 2.5C19'], path[d^='M18.5 3.5'], path[d^='M5 21.5'], path[d^='M12 2 20'], path[d^='M6 4 9.5'], circle[cx='12'][cy='14'])) > svg { visibility: hidden; }
  .slot:has([data-buyc='moon_dew'], [data-pl='moon_dew']), [data-item='moon_dew'] { --consumable-art: url('assets/icons/moon_dew.png'); }
  .slot:has([data-buyc='full_moon_dew'], [data-pl='full_moon_dew']), [data-item='full_moon_dew'] { --consumable-art: url('assets/icons/full_moon_dew.png'); }
  .slot:has([data-buyc='lamp_shard'], [data-pl='lamp_shard']), [data-item='lamp_shard'] { --consumable-art: url('assets/icons/lamp_shard.png'); }
  .slot:has([data-buyc='star_sand'], [data-pl='star_sand']), [data-item='star_sand'] { --consumable-art: url('assets/icons/star_sand.png'); }
  .slot:has([data-buyc], [data-pl]) > .grow::before { content: ''; float: left; width: 44px; height: 44px; margin-right: 8px; background: var(--consumable-art) center / contain no-repeat; }
}
.skill-list [data-item] { background-image: var(--consumable-art), linear-gradient(var(--surface-top), var(--surface-bottom)); background-size: 44px 44px, 100% 100%; background-position: 10px center, center; background-repeat: no-repeat; padding-left: 64px; }
.iart, .iart img { border-radius: 3px; }

@media (max-width: 600px) {
  .content { padding-inline: 12px; }
  .card { padding: 17px; }
  .card::before { border-image-width: 27px; }
  .char-card { padding: 0; }
  .topbar { flex-wrap: wrap; padding-inline: 12px; gap: 6px; }
  .topbar .title { flex: 1 1 auto; font-size: 16px; }
  .topbar > .grow { display: none; }
  .stat-pill { padding: 4px 7px; font-size: 13px; }
  .topbar .mute { padding: 8px; }
  .slot { flex-wrap: wrap; }
  .slot > .grow { flex-basis: 95px; }
  .quest { flex-wrap: wrap; }
  .quest > .grow { flex-basis: calc(100% - 64px); }
  .quest > .btn { flex: 1; }
  .quest > .btn[aria-label='削除'] { flex: 0 0 44px; }
  .tabs { flex-wrap: wrap; }
  .tabs button { flex-basis: 26%; padding-inline: 10px; }
  .modal { padding: 22px 17px; max-height: 88dvh; }
  .dbox { padding: 30px 21px 27px; }
  .dbox .dname { left: 20px; font-size: 16px; }
  .dbox .dtext { font-size: 16px; }
  .dbox::before { border-image-width: 24px; }
  .bhud-top { gap: 6px; }
  .bhud-top .order { flex: 1; }
  .bhud-top .stage-label { order: 3; width: 100%; text-align: left; white-space: normal; }
  .unit-box { padding: 10px; }
  .bpanel { padding-inline: 8px; }
  .tree { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .node { padding: 12px; }
}
@media (max-width: 420px) {
  .rank-pick { grid-template-columns: repeat(3, minmax(44px, 1fr)); }
}
@media (max-width: 360px) {
  .tree { grid-template-columns: 1fr; }
  .rank-pick { gap: 6px; }
  .char-card .pic { width: 34%; }
  .char-card .info { padding: 14px 10px; }
  .stats { gap: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ゲーム側でアイコンを描いている行では、スキンの代替アイコンを出さない（二重表示の防止） */
.slot:has(.ticon-img) > .grow::before { content: none; }

/* Codex art direction: atlas, merchant ledger, silver field instruments. */
:root { --ledger: var(--grain), linear-gradient(135deg,#f3e8d0,#dfcda8); }
.wdetail { padding:24px; }.wfacts { gap:8px; margin-top:12px; }
.wfacts > div { border-radius:2px; background:#0c1024; border-color:#646a82; padding:10px 12px; }
.wfacts span { font-size:12px; }.wfacts b { font-size:15px; line-height:1.6; }
.shop-hero { border-radius:3px; background:var(--surface); border-color:var(--silver); gap:10px 16px; padding:18px; }
.shop-hero::before { border:1px solid transparent; inset:-1px; border-image:var(--frame-large) 23% / 28px / 0 stretch; border-radius:0; }
.shop-keeper { border-radius:2px; background-color:#0c1024; border-bottom:1px solid var(--brass); }
.shop-sign,.sname,.ibox-title,.bd-name,.bd-label { font-family:var(--serif); }
.shop-sign { text-shadow:none; }.shop-bubble { border-radius:2px; background:var(--ledger); color:#281e12; line-height:1.8; padding:12px; font-weight:400; }
.shop-purse { border-radius:2px; background:#0c1024; border-color:var(--brass); }.shop-tabs button,.ibox-tabs button { border-radius:2px; min-height:52px; background:var(--surface); color:var(--text); border-color:var(--line); }
.shop-tabs button.on,.ibox-tabs button.on { background:#354868; color:var(--gold); border-color:var(--gold); box-shadow:inset 0 -3px var(--brass); }
.sfilter button { height:44px; min-width:44px; border-radius:2px; }.sfilter button i { border-radius:2px; }
.sgrid { grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:14px; }
.scard { border-radius:3px; background:var(--ledger); border-width:1px; box-shadow:inset 0 0 0 4px #b89a6226,0 5px 14px #05091680; padding:16px; }
.scard-top > div { min-width:0; }.sname { font-size:20px; line-height:1.5; overflow-wrap:anywhere; }.stype { flex-wrap:wrap; }
.sowned,.sregion,.sregion.new,.schip,.sicon-ph { border-radius:2px; }.sregion.new { animation:none; background:#7f3042; }.schip { border-bottom:1px solid #a08b6070; padding:4px 8px; }.schip.main { background:#253049; }.schip.main b { font-size:23px; }
.sface i { border-radius:2px; border-color:#8a795e; }.sface em { font-size:13px; }.sface em.up,.bd-who em.up { color:#24673f; }
.sbuy { border-radius:2px; background:linear-gradient(#f4dfa6,#ceb16f); border-color:#796038; min-height:48px; box-shadow:inset 0 0 0 2px #fff4; }.sbuy .sbl { border-radius:2px; }.snext { border-radius:2px; background:var(--surface); border:1px solid var(--brass); line-height:1.8; }
.ibox { border-radius:3px; background:var(--surface); border:1px solid var(--silver); padding:18px; }.ibox-title { color:var(--paper); font-size:22px; }.ibox-sort button { min-height:44px; border-radius:2px; background:#11182b; border-color:var(--line); color:var(--text); }.ibox-sort button.on { background:#354868; border-color:var(--gold); }
.ibox-main { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }.ibox-grid { grid-template-columns:repeat(var(--cols),minmax(0,1fr)); border-radius:2px; background:#090f20; border-color:var(--line); }
.bslot { width:100%; height:auto; aspect-ratio:1; border-radius:2px; background:radial-gradient(ellipse at 40% 25%,#39435a,#11182b); border-color:#68728b; }.bslot.empty { background:#0c1224; border-color:#303b52; }.bslot.sel { animation:none; outline:2px solid var(--gold); }.bface { border-radius:2px; }
.ibox-detail { border-radius:2px; border:1px solid #ac9263; background:var(--ledger); padding:16px; }.bd-name { line-height:1.5; overflow-wrap:anywhere; }.bd-stats div,.bd-box,.bd-who,.bd-rar { border-radius:2px; }.bd-stats .main { background:#253049; }.bd-stats b { font-size:22px; }.bd-who { background:#f3e8d0; min-width:68px; }.bd-who i { border-radius:2px; }.bd-who span { font-size:12px; max-width:64px; }.bd-who.on { background:#253049; }.bd-foot { line-height:1.8; }
.lore,.bd-lore { font-family:var(--sans); font-size:14px; line-height:1.9; border-radius:0; border-left:2px solid var(--brass); padding:12px 14px; }.lore { color:var(--text); background:#0c1024; }.bd-lore { color:#40321f; background:#ac92631a; }
.src-list { font-family:var(--sans); font-size:14px; line-height:1.9; padding:10px 12px; background:#0c1024; border-bottom:1px solid var(--brass); }.ibox-detail .src-list { color:#40321f; background:#ac92631a; }.bd-src summary { min-height:44px; padding-block:10px; }
.tip-head { border-radius:2px; background:#23324c; color:var(--gold); border:1px solid var(--brass); padding:5px 12px; }.tip-p { padding:12px 0 12px 14px; border-left:1px solid var(--brass); font-size:15px; line-height:1.9; }.tip-p b { color:var(--accent); }
.cr-h { font-family:var(--serif); font-size:18px; margin-top:24px; padding-bottom:8px; }.cr-row { padding:12px 0; grid-template-columns:110px minmax(0,1fr) minmax(100px,auto); border-bottom:1px solid #646a8255; font-size:14px; line-height:1.8; overflow-wrap:anywhere; }.cr-title { color:var(--text); }
.settings-panel > label { display:block; padding-top:16px; border-top:1px solid #646a8255; }.settings-panel .row { gap:8px; }.settings-panel [data-vol] { accent-color:var(--accent); }.settings-panel [data-bgmch],.settings-panel [data-sech] { flex:1 1 140px; text-align:left; }
.recruit-roster { padding-top:8px; border-top:1px solid var(--brass); }.trait-node,.innate-node { border-left:3px solid var(--brass); background:var(--surface); }.trait-node .nt,.innate-node .nt { font-family:var(--serif); color:var(--paper); }#release { border-color:#aa6479; background:#322332; color:#f6cbd5; }
.modal:has(.result-title) { background:var(--grain),radial-gradient(ellipse at top,#344663,#141b32 70%); }.modal:has(.result-title) .slot { padding:16px; }.modal:has(.result-title) .slot b { overflow-wrap:anywhere; min-width:0; }.modal:has(.result-title) .gold-pop { font-size:26px; }
.fpv-wrap { height:360px; border-radius:2px; border:1px solid #ac9263; background:var(--grain),radial-gradient(ellipse,#f2e4c5,#c7ae82); box-shadow:inset 0 0 40px #785c3433; }.fpv-wrap canvas { filter:drop-shadow(9px 15px 7px #33281770); }.fpv-wrap .field-terrain-info { display:none; }
.battle .bhud-top { background:linear-gradient(#0c1024ed,#0c102488,transparent); padding-bottom:18px; }.battle .stage-label { font-family:var(--sans); font-size:14px; line-height:1.7; }.battle .order { gap:4px; padding:7px; }.battle .order .o { width:38px; height:42px; flex:none; border-width:1px; box-shadow:inset 0 -3px #101629; }.battle .order .o.now { transform:none; outline:2px solid var(--gold); outline-offset:1px; }
.battle .bpanel { background:linear-gradient(transparent,#0c1024d9 20%,#0c1024f5); padding-top:20px; }.battle .unit-box { max-width:600px; padding:14px; align-items:stretch; gap:14px; }.battle .unit-box .face { width:100px; height:112px; border:1px solid var(--silver); box-shadow:inset 0 -5px #11182b; }.battle .ub-bars { flex:1; min-width:0; align-self:center; }.battle .ub-bars > .row { flex-wrap:wrap; }.battle .ub-name { font-size:22px; line-height:1.4; }.battle .ub-hp { font-size:20px; color:var(--text); white-space:nowrap; }.battle .hint { padding:7px 12px; line-height:1.7; font-size:14px; }.battle .cmds { max-width:760px; }.battle .preview-box { max-width:600px; border-color:var(--brass); }.battle .preview-box > b { font-family:var(--serif); font-size:19px; color:var(--paper); }.battle .pv { gap:8px; padding:7px 0; border-bottom:1px solid #646a8255; line-height:1.7; }.battle .rot-btns { border:1px solid var(--brass); background:#101629df; padding:4px; border-radius:2px; }.battle .rot-btns .btn { border-radius:2px; }
@media(max-width:640px) {
 .wdetail { padding:18px; }.wfacts > div { padding:8px; }.wfacts b { font-size:14px; }
 .shop-hero { grid-template-columns:64px minmax(0,1fr); padding:14px; }.shop-keeper { width:64px; height:100px; }.shop-sign { font-size:18px; }.shop-bubble { font-size:14px; }.shop-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .ibox { padding:10px; }.ibox-main { grid-template-columns:minmax(0,1fr); }.ibox-grid { max-height:46vh; }.ibox-tabs { gap:3px; }.ibox-tabs button { min-width:0; }.ibox-sort { margin-left:0; width:100%; }.ibox-sort button { flex:1; }
 .cr-row { grid-template-columns:1fr; gap:3px; }.cr-by { text-align:left; }.fpv-wrap { height:290px; }
 .battle .unit-box { padding:12px; gap:10px; }.battle .unit-box .face { width:72px; height:90px; }.battle .ub-name { font-size:18px; }.battle .ub-hp { font-size:17px; }.battle .ub-bars .tag { font-size:11px; padding:1px 5px; }.battle .order .o { width:28px; height:32px; }.battle .order .o:nth-child(n+5) { display:none; }.battle .bhud-top { gap:4px; }.battle .bhud-top > .btn { padding:8px; }.battle .rot-btns { top:150px; }.battle .bpanel { max-height:58dvh; }.battle .cmds { gap:5px; }.battle .cmds .btn { padding:10px 12px; }.battle .pv { flex-direction:column; align-items:flex-start; }
}
/* The merchant portrait has not been delivered; a silver guild seal fills its mount. */
.shop-keeper { position:relative; background:radial-gradient(ellipse at 50% 35%,#64738a44,transparent 70%),#101629; border:1px solid var(--brass); }
.shop-keeper::after { content:'☾'; position:absolute; inset:0; display:grid; place-items:center; font-family:var(--serif); font-size:58px; color:var(--silver); text-shadow:0 0 18px #b8dcf433; }
@media(min-width:900px) {
 .battle .order { position:fixed; bottom:12px; left:630px; max-width:calc(100vw - 650px); }
 .battle .bpanel { right:auto; width:620px; }
 .battle .stage-label { margin-left:0; flex:1; text-align:left; }
}
/* All eight order entries remain available at narrow widths. */
.battle .order { flex-wrap:wrap; }
@media(max-width:640px) {
 .battle .bhud-top .order { flex:1 1 100%; }
 .battle .order .o:nth-child(n) { display:grid; }
 .battle .rot-btns { top:calc(env(safe-area-inset-top) + 190px); }
 .battle .stage-label { font-size:13px; }
}
.battle .throw-preview { border-left:3px solid #e5ba83; }
.battle .recruit-preview { border-left:3px solid #a7e7c4; }
.battle .recruit-preview .pv b { font-size:24px; }
.chest-notice { display:block; padding-left:12px; border-left:3px solid var(--gold); line-height:1.8; }
/* Inventory PNGs also appear in the battle's item list. */
[data-item='poison_flask'] { --consumable-art: url('assets/icons/poison_flask.png'); }
[data-item='frost_flask'] { --consumable-art: url('assets/icons/frost_flask.png'); }
[data-item='fire_bomb'] { --consumable-art: url('assets/icons/fire_bomb.png'); }
[data-item='half_moon_dew'] { --consumable-art: url('assets/icons/half_moon_dew.png'); }
.modal:has(.result-loss) { background:var(--grain),linear-gradient(#352b43,#13192e); border-color:#aa788e; }
.result-loss { color:#e2c3ce; text-shadow:none; }
.result-win { color:var(--gold); }

/* 月灯りの道具屋：文字面は静かな羊皮紙、外装は木と真鍮。 */
:root {
  --shop-wood: repeating-linear-gradient(2deg,#ffffff03 0 1px,#00000005 2px 5px),linear-gradient(110deg,#65452d,#35261d 65%,#513722);
  --shop-paper: var(--grain),linear-gradient(120deg,#f5ead3,#ead9b8);
}
.screen:has(.shop-hero) > .bgimg::after { background:linear-gradient(#11132255,#16121be0 85%); }
.shop-hero { grid-template-columns:180px minmax(0,1fr); min-height:238px; padding:18px 22px 26px; gap:10px 20px; overflow:hidden; border:1px solid #b99a63; background:linear-gradient(#1f172b55,#21170fe8),url('assets/bg/shop.jpg') center 48% / cover; box-shadow:inset 0 0 0 4px #38261b, inset 0 0 0 5px #a68b5755,0 6px 20px #0008; }
.shop-hero::before { inset:auto 0 0; height:18px; border:0; border-image:none; background:var(--shop-wood); box-shadow:0 -2px #c0a16c,0 -5px #2e2119,inset 0 3px #94704b; z-index:2; }
.shop-keeper { width:180px; height:224px; align-self:end; margin-bottom:-22px; border:0; background:var(--keeper-art,url('assets/shop/keeper.png')) center bottom / contain no-repeat; filter:drop-shadow(0 3px 6px #0008); }
.shop-keeper::after { content:none; }
.shop-sign { justify-self:start; max-width:100%; padding:8px 16px 8px 44px; background:url('assets/shop/moon-brass.png') 10px center / 26px no-repeat,var(--shop-wood); border:1px solid #bd9c63; box-shadow:inset 0 0 0 3px #211810,0 3px 6px #0007; color:#fff0cb; font-size:24px; letter-spacing:.08em; }
.shop-bubble { background:var(--shop-paper); color:#302419; border:1px solid #bb9c65; box-shadow:0 3px 8px #0005; padding:13px 16px; font-size:15px; line-height:1.8; }
.shop-bubble::before { border-right-color:#f2e5ca; }
.shop-purse { background:#211b17; color:#f9df9d; border:1px solid #aa8b50; box-shadow:inset 0 0 0 2px #392c20; font-size:18px; }
.shop-purse b { font-size:25px; font-variant-numeric:tabular-nums; }
.shop-tabs { padding:8px 8px 12px; gap:8px; background:var(--shop-wood); border:1px solid #94714c; border-bottom:5px solid #231b16; box-shadow:inset 0 -2px #bd9860,0 4px 8px #0006; }
.shop-tabs button,.ibox-tabs button { background:var(--shop-paper); color:#443220; border:1px solid #b39765; box-shadow:0 2px 3px #0006,inset 0 0 0 2px #fff4; min-height:54px; }
.shop-tabs button.on,.ibox-tabs button.on { background:linear-gradient(#634930,#38291d); color:#fff0c7; border-color:#f0cc80; box-shadow:inset 0 -3px #e8bf70,0 2px 5px #0007; }
.sfilter { padding:8px 10px; background:#241c18ed; border:1px solid #7f6646; }
.sfilter .muted { color:#e1d0b3; }.sfilter button { background:var(--shop-wood); border-color:#a58c64; }
.sgrid { gap:16px; }.scard { background:var(--shop-paper); border-color:#ae8c55; padding:18px 16px 14px; box-shadow:inset 0 0 0 3px #fff4,inset 0 0 0 4px #ad8d5333,0 5px 12px #0008; }
.scard::before { content:''; position:absolute; right:10px; top:-7px; width:28px; height:20px; background:url('assets/shop/brass-clip.png') center / contain no-repeat; pointer-events:none; }
.sname { font-size:21px; }.schip { color:#55412c; }.schip b { font-size:18px; }.schip.main { background:#3c3026; color:#f8dfaa; }.schip.main b { font-size:26px; }
.sface { width:46px; }.sface em.eq { color:#64513b; }.sface em.down { color:#a32634; }
.sbuy { min-height:50px; font-size:23px; color:#2f2110; background:linear-gradient(#f8df9c,#d5b06b); border:1px solid #866432; box-shadow:inset 0 0 0 2px #fff5,0 2px 0 #7a5b31; font-variant-numeric:tabular-nums; }
.sbuy .coin { color:#79541d; }.sbuy .sbl { background:#4c351c; color:#fff3d3; font-size:14px; }.sbuy.poor { color:#453c30; background:linear-gradient(#e4dccd,#bfb29d); }.sbuy.poor .sbl { background:#635545; }.sbuy.sell { background:linear-gradient(#dfebce,#a6bd89); color:#23391f; }
.snext { background:#291f19ed; border-color:#ac8f60; color:#f2dba9; }
.ibox { background:var(--shop-wood); border:1px solid #b39765; box-shadow:inset 0 0 0 4px #291f17,inset 0 0 0 5px #a4834d,0 6px 18px #0008; padding:20px; }
.ibox-title { color:#fff0cf; }.ibox-title .muted { color:#dec9a8; }.ibox-sort button { background:#281f19; border-color:#a08860; }.ibox-sort button.on { background:#695033; color:#fff0c8; }
.ibox-grid { padding:10px; gap:5px; background:repeating-linear-gradient(90deg,#ffffff03 0 1px,transparent 1px 4px),#201d19; border:2px solid #21180f; box-shadow:inset 0 3px 10px #000b,0 1px #ab8854; scrollbar-color:#b19767 #241d16; }
.bslot { min-width:0; min-height:0; background:radial-gradient(ellipse at 40% 25%,#4d4940,#292923); border:1px solid #71604a; box-shadow:inset 0 2px 5px #0009,inset 0 -3px var(--rcol); }
.bslot.empty { background:#292720; border-color:#4a4032; box-shadow:inset 0 2px 5px #000a; }
.bslot.sel { outline:2px solid #ffe6a4; outline-offset:-2px; background:radial-gradient(ellipse,#686044,#353025); box-shadow:inset 0 0 0 4px #a98548,inset 0 -4px var(--rcol); }
.bslot.sel::after { content:''; position:absolute; inset:1px; background:url('assets/shop/selection-corners.png') center / 100% 100% no-repeat; pointer-events:none; }
.bslot .ticon-img { max-width:none; }.bnum { padding:0 3px; background:#171713ed; color:#fff4d5; font-size:14px; line-height:1.3; text-shadow:none; border-radius:2px; }
.ibox-detail { min-width:0; background:var(--shop-paper); border-color:#bb9860; box-shadow:inset 0 0 0 3px #fff4,0 3px 8px #0005; }.bd-head > div { min-width:0; }.bd-stats .main { background:#3c3026; }.bd-stats .main b { font-size:26px; }.bd-stats .main span { color:#f8dfaa; }.bd-who.on { background:#3c3026; }.bd-who em.eq { color:#64513b; }.bd-who.on em { color:#ffe0a1; }.bd-label .muted { display:inline; }.bd-actions .btn { overflow-wrap:anywhere; }.ibox > .muted { color:#e4d3b6; }
@media(max-width:900px) { .ibox-main { grid-template-columns:minmax(0,1fr); } }
@media(max-width:640px) {
 .shop-hero { grid-template-columns:94px minmax(0,1fr); min-height:206px; padding:14px 12px 24px; gap:8px 10px; }.shop-keeper { width:100px; height:188px; margin-left:-6px; margin-bottom:-20px; }.shop-sign { padding:7px 8px 7px 29px; background-size:18px,auto; background-position:6px center,center; font-size:18px; letter-spacing:.02em; }.shop-bubble { padding:10px; font-size:14px; }.shop-purse { grid-column:2; padding:4px 8px; }.shop-purse b { font-size:22px; }.shop-tabs { gap:6px; }.scard { padding:16px 14px; }.ibox { padding:12px; }.ibox-grid { padding:6px; gap:4px; }.ibox-detail { padding:14px; }.ibox-tabs button { flex:1 1 26%; }.ibox-sort button { padding:7px 5px; }.bd-actions .btn { flex:1 1 150px; }
}
@media(max-width:360px) { .shop-hero { grid-template-columns:76px minmax(0,1fr); }.shop-keeper { width:84px; }.shop-sign { font-size:16px; }.bnum { font-size:12px; }.ibox { padding:9px; } }
/* Painted accents stay away from the text and do not intercept input. */
.shop-sign { background-image:url('assets/shop/moon-brass.png'),url('assets/shop/wood-panel.png'),var(--shop-wood); background-position:10px center,center,center; background-size:26px,100% 100%,auto; background-repeat:no-repeat; }
.sbuy { position:relative; isolation:isolate; }.sbuy::before { content:''; position:absolute; left:6px; top:50%; transform:translateY(-50%); width:23px; height:28px; background:url('assets/shop/price-tag.png') center / contain no-repeat; opacity:.55; pointer-events:none; z-index:-1; }
.ibox { position:relative; }.ibox::before { content:''; position:absolute; right:8px; top:8px; width:32px; height:25px; background:url('assets/shop/brass-hinge.png') center / contain no-repeat; opacity:.6; pointer-events:none; }.ibox-head { padding-right:22px; }
.scard-top > .ticon,.scard-top > .ticon-img,.bd-head > .ticon,.bd-head > .ticon-img { flex-shrink:0; }
@media(max-width:640px) { .shop-sign { background-position:6px center,center,center; background-size:18px,100% 100%,auto; } }

/* 灯守の詰所：狭い画面では地名と資源を別の行に置く。 */
.screen:has(.guild-hub) > .topbar .stat-pill { font-family:var(--sans); }
@media(max-width:600px) {
 .screen:has(.guild-hub) > .topbar {
  display:grid; grid-template-columns:minmax(0,1fr) auto 44px 44px;
  gap:8px 6px; align-items:center; padding-bottom:10px;
 }
 .screen:has(.guild-hub) > .topbar .title { grid-column:1 / -1; font-size:17px; overflow-wrap:anywhere; }
 .screen:has(.guild-hub) > .topbar > .grow { display:none; }
 .screen:has(.guild-hub) > .topbar .stat-pill { min-width:0; width:fit-content; max-width:100%; flex-wrap:wrap; }
 .screen:has(.guild-hub) > .topbar .mute,
 .screen:has(.guild-hub) > .topbar .settings-btn { width:44px; height:44px; margin:0; padding:0; }
}

/* 戦場の操作盤。倍率と回転は同じ銀の枠に置き、狭い画面では倍率だけ開く。 */
.battle .view-controls {
 display:grid; grid-template-columns:minmax(0,1fr) 100px; align-items:end; gap:9px;
 flex:0 1 422px; min-width:0; max-width:100%; margin-left:auto; padding:7px 9px;
 border:1px solid #8b9caf; border-radius:3px;
 background:var(--grain),linear-gradient(145deg,#27364b,#101a2d);
 box-shadow:inset 0 0 0 2px #0b1324,0 3px 10px #05091680;
}
.battle .zoom-control { min-width:0; }
.battle .view-heading {
 display:flex; align-items:center; justify-content:space-between; gap:8px;
 min-height:44px; padding:5px 7px; list-style:none; cursor:pointer;
 color:#dbe7f0; font-size:13px; line-height:1.4; touch-action:manipulation;
}
.battle .view-heading::-webkit-details-marker { display:none; }
.battle .view-heading:focus-visible { outline:2px solid var(--gold); outline-offset:1px; }
.battle .view-scale { display:flex; align-items:center; gap:10px; }
.battle .zoom-now { color:#fff0c9; font-family:var(--sans); font-size:16px; font-weight:400; font-variant-numeric:tabular-nums; white-space:nowrap; }
.battle .view-chevron { color:#b8ccdf; font-size:15px; transition:transform .15s; }
.battle .zoom-control[open] .view-chevron { transform:rotate(180deg); }
.battle .zoom-btns {
 position:static; display:grid; grid-template-columns:repeat(5,minmax(44px,1fr));
 gap:4px; margin-top:3px; align-items:stretch;
}
.battle .zoom-btns .btn {
 min-width:44px; min-height:44px; height:44px; padding:0 3px;
 font-size:12px; font-weight:400; letter-spacing:0; color:#e7eef4;
 background:linear-gradient(#243650,#132136); border-color:#7c91a9;
 box-shadow:inset 0 -2px #070f20,0 1px 2px #05091688;
}
.battle .zoom-btns .btn::before { border-image-width:8px; opacity:.45; }
.battle .zoom-btns .btn[aria-pressed="true"] {
 color:#fff1c9; border-color:#eed19a; background:linear-gradient(#42536b,#27394f);
 box-shadow:inset 0 -3px #c5a875,inset 0 0 0 1px #cdb78055;
}
.battle .rot-control { min-width:0; border-left:1px solid #8294ac66; padding-left:7px; }
.battle .rot-label { display:block; margin-bottom:6px; text-align:center; color:#bdcfe0; font-size:12px; line-height:1.5; }
.battle .rot-btns {
 position:static; display:grid; grid-template-columns:repeat(2,44px); gap:4px;
 padding:0; border:0; background:none; border-radius:0;
}
.battle .rot-btns .btn {
 width:44px; height:44px; min-height:44px; padding:0; font-size:27px; line-height:1;
 color:#dbedf9; border-color:#95b0c5; background:linear-gradient(#30445d,#18283e);
}
.battle .rot-btns .btn::before { border-image-width:10px; opacity:.6; }

/* 条件は地名より明るく。救出の敗北条件も幅を問わず残す。 */
.battle .stage-label {
 flex:1 1 230px; min-width:0; padding:8px 12px; margin-left:0;
 text-align:left; line-height:1.5; white-space:normal; background:var(--grain),#131d30f5;
}
.battle .stage-label span { display:inline; }
.battle .stage-title { display:flex; align-items:baseline; flex-wrap:wrap; gap:3px 9px; margin-bottom:5px; }
.battle .stage-title strong { font-family:var(--serif); font-size:17px; color:#e4eaf1; font-weight:800; overflow-wrap:anywhere; }
.battle .stage-sub { font-size:11px; color:#b9c5d5; }
.battle .stage-practice { font-size:11px; color:#c9d9ed; border:1px solid #8194aa; padding:0 5px; }
.battle .stage-goal { display:flex; align-items:baseline; gap:7px; min-width:0; }
.battle .stage-label .goal-label { flex:none; font-size:11px; color:#c4d6e7; border:1px solid #69849b; padding:1px 5px; white-space:nowrap; background:#192b40; }
.battle .stage-label .goal-copy { display:block; min-width:0; color:#fff0ce; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.battle .stage-label.objective-rescue .goal-label { color:#ffebbe; border-color:#b39a67; background:#443925; }
.battle .stage-label.objective-escape .goal-label { color:#c4f6e9; border-color:#77a99c; background:#1b3a3b; }
.battle .stage-risk { padding-left:2px; margin-top:3px; color:#ffd0d5; font-size:12px; line-height:1.5; }

/* ユニットの札は陣営、名前、数値の順。額縁は文字とゲージに重ねない。 */
.battle .unit-box {
 --unit-color:#b8dcf4; --unit-tint:#29445c;
 display:grid; grid-template-columns:88px minmax(0,1fr); gap:12px;
 width:100%; max-width:600px; padding:12px; align-items:start;
 border-color:#8eabc2; border-left:3px solid var(--unit-color);
 background:var(--grain),linear-gradient(115deg,var(--unit-tint),#131d30 46%,#10182a);
 box-shadow:inset 0 0 0 3px #09132477,0 4px 12px #05091688;
}
.battle .unit-box.enemy { --unit-color:#ffc0ca; --unit-tint:#462c3e; border-color:#b17d8f; }
.battle .unit-box.guest { --unit-color:#f6dfaa; --unit-tint:#433c2d; border-color:#baa474; }
.battle .unit-box::before { border-image-width:15px; }
.battle .ub-portrait { display:grid; gap:5px; min-width:0; }
.battle .ub-affiliation {
 display:block; padding:2px 3px; font-size:12px; line-height:1.5; text-align:center;
 color:var(--unit-color); background:#0c1425; border:1px solid var(--unit-color);
}
.battle .unit-box .face {
 width:100%; height:104px; border:1px solid #9eafc5; border-radius:2px;
 background-color:#111a2d; box-shadow:inset 0 0 0 2px #091324,inset 0 -9px #0b142566;
}
.battle .unit-box.enemy .face,.battle .unit-box.guest .face { border-color:var(--unit-color); }
.battle .ub-bars { display:grid; gap:4px; min-width:0; align-self:center; }
.battle .ub-bars > .ub-identity { gap:3px 10px; align-items:baseline; }
.battle .ub-name { flex:1 1 140px; min-width:0; font-family:var(--serif); color:#fff3dc; font-size:22px; line-height:1.35; overflow-wrap:anywhere; }
.battle .ub-level { flex:none; font-size:13px; color:#d5e3ee; font-variant-numeric:tabular-nums; white-space:nowrap; }
.battle .ub-bars > .ub-meta,.battle .ub-bars > .ub-status { gap:4px; }
.battle .ub-bars .tag { padding:1px 5px; font-size:12px; line-height:1.5; color:#d4deeb; border-color:#7c8aa1; background:#101a2e; }
.battle .ub-element { border-left:3px solid var(--element-color) !important; }
.battle .ub-protect { font-size:12px; color:#ffd0d5; line-height:1.5; }
.battle .ub-status .tag { border-color:#a9a0ba; background:#2a263c; color:#ede3f6; }
.battle .ub-status .status-sleep { border-color:#b4a8d6; color:#eee0ff; background:#332c4a; }
.battle .ub-status .status-silence { border-color:#c7b59b; color:#fff0d6; background:#3a3230; }
.battle .ub-status .status-poison,.battle .ub-status .status-defdown { color:#ffd4df; border-color:#b87b91; background:#3d273c; }
.battle .ub-status .status-guard,.battle .ub-status .status-barrier,.battle .ub-status .status-defup,.battle .ub-status .status-atkup { color:#cef4e2; border-color:#85ae9f; background:#203936; }
@media(max-width:640px) {
 .battle .bhud-top > .btn { order:1; }
 .battle .bhud-top .stage-label { order:2; }
 .battle .view-controls { flex:1 1 100%; grid-template-columns:minmax(0,1fr) 98px; align-items:start; padding:4px 5px; gap:5px; margin:0; }
 .battle .bhud-top .view-controls { order:3; }
 .battle .view-heading { padding:5px 6px; }
 .battle .zoom-btns { grid-template-columns:repeat(3,minmax(44px,1fr)); gap:4px; padding-bottom:2px; }
 .battle .zoom-btns .btn { height:44px; }
 .battle .rot-control { padding-left:5px; }
 .battle .rot-label { display:none; }
 .battle .stage-label { padding:6px 9px; }
 .battle .stage-title { gap:2px 7px; margin-bottom:3px; }
 .battle .stage-title strong { font-size:15px; }
 .battle .stage-label .goal-copy { font-size:12px; }
 .battle .unit-box { grid-template-columns:64px minmax(0,1fr); padding:10px; gap:10px; }
 .battle .unit-box .face { width:64px; height:82px; }
 .battle .ub-affiliation { font-size:11px; }
 .battle .ub-name { flex-basis:120px; font-size:18px; }
 .battle .ub-level { font-size:12px; }
 .battle .ub-bars .tag { font-size:12px; }
}
@media(max-width:380px) {
 .battle .view-controls { grid-template-columns:minmax(0,1fr) 98px; gap:3px; }
 .battle .zoom-btns .btn { font-size:11px; }
 .battle .unit-box { grid-template-columns:58px minmax(0,1fr); gap:8px; }
 .battle .unit-box .face { width:58px; height:78px; }
}

/* 四枚までの戦場札。空き座を残して、装備・状態のタグとは分けて読む。 */
.battle-card-art { position:relative; display:block; flex:none; width:16px; height:22px; color:var(--card-color); }
.battle-card-glyph { position:absolute; inset:0; display:grid; place-items:center; font-family:var(--sans); font-size:12px; line-height:1; border:1px solid var(--card-color); border-radius:1px; background:#101a2d; }
.battle-card-image { position:absolute; inset:0; background-position:center; background-size:100% 100%; background-repeat:no-repeat; image-rendering:pixelated; }
.battle .ub-cards { display:flex; align-items:center; flex-wrap:wrap; gap:5px 9px; min-width:0; padding-top:6px; margin-top:2px; border-top:1px solid #8495ac55; }
.battle .ub-cards-heading { flex:none; color:#b6c5d4; font-size:11px; line-height:1.5; }
.battle .ub-card-slots { display:flex; gap:5px; align-items:center; }
.battle .ub-card { display:grid; place-items:center; width:22px; height:28px; border:1px solid #8eabc244; border-radius:1px; background:#0a1423; box-shadow:inset 0 0 0 1px #0c1024; }
.battle .ub-card-empty { border-color:#8397af30; background:linear-gradient(135deg,#738daa10,#091122); box-shadow:inset 0 0 0 3px #0c1426; }
.battle .ub-card-empty::after { content:''; width:3px; height:3px; background:#8190a555; transform:rotate(45deg); }
.battle .ub-cards-count { flex:none; color:#e4cf9f; font-size:13px; font-variant-numeric:tabular-nums; line-height:1; }
.battle .ub-cards-count > span { color:#879caf; font-size:11px; }
@media(max-width:380px) { .battle .ub-cards { gap:5px 7px; } }