@font-face {
  font-family: "Fusion Pixel";
  src: url("../vendor/fusion-pixel/fusion-pixel-12px-proportional-zh_hans.otf.woff2") format("woff2");
  font-display: swap;
  font-weight: 400 900;
}

:root {
  color-scheme: light;
  font-family: "Fusion Pixel", "PingFang SC", monospace;
  --ink: #304637;
  --muted: #71806f;
  --cream: #fff8df;
  --paper: #f8edc8;
  --paper-strong: #ebd99f;
  --sage: #708f46;
  --sage-dark: #3f653d;
  --aqua: #5bb9ad;
  --honey: #dba43a;
  --coral: #dc7959;
  --line: rgba(72, 91, 58, 0.22);
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #d5ddbd;
  color: var(--ink);
}

button { font: inherit; color: inherit; }
button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.is-hidden { display: none !important; }

.game-shell {
  position: relative;
  width: min(100vw, 430px);
  height: min(100dvh, 900px);
  min-height: 640px;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  background: #dfebc4;
  box-shadow: 0 0 50px rgba(39, 60, 42, 0.28);
}

.world-backdrop {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: url("../assets/monster-trail/world/handdrawn-repair-bay.png") center 47% / cover no-repeat;
  filter: saturate(0.82) brightness(1.03);
}

.world-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(239, 244, 206, 0.44);
}

.status-bar {
  height: 72px;
  padding: max(10px, env(safe-area-inset-top)) 14px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 248, 223, 0.9);
  border-bottom: 2px solid rgba(72, 91, 58, 0.22);
  backdrop-filter: blur(8px);
}

.player-badge { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.player-badge > img {
  width: 45px;
  height: 45px;
  object-fit: contain;
  image-rendering: pixelated;
  border: 2px solid #fff7d7;
  border-radius: 11px;
  background: #a7c875;
  box-shadow: 0 2px 0 #718f56;
}
.player-badge div { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 6px; }
.player-badge strong { font-size: 14px; }
.player-badge span { font-size: 10px; color: var(--muted); }
.player-badge i {
  grid-column: 1 / -1;
  width: 92px;
  height: 5px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 5px;
  background: #d4d8b7;
}
.player-badge em { display: block; width: 0; height: 100%; background: var(--aqua); transition: width 200ms ease; }

.currency-row { display: flex; align-items: center; gap: 5px; }
.currency-row > span, .currency-row button {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 252, 234, 0.88);
}
.currency-row > span { padding: 0 8px; font-size: 12px; }
.currency-row > span i:first-child { color: var(--honey); font-size: 15px; }
.currency-row button { width: 30px; justify-content: center; padding: 0; cursor: pointer; }

.hero-board {
  position: relative;
  height: 326px;
  margin: 10px 12px 0;
  border: 2px solid rgba(84, 108, 62, 0.3);
  border-radius: 24px 24px 16px 16px;
  background: rgba(255, 248, 220, 0.8);
  box-shadow: 0 5px 0 rgba(83, 103, 61, 0.18);
  backdrop-filter: blur(5px);
}

.power-plaque {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  min-width: 126px;
  padding: 5px 14px;
  text-align: center;
  border: 2px solid #d3b55b;
  border-radius: 12px;
  background: #fff3c5;
  box-shadow: 0 3px 0 #b48a37;
}
.power-plaque > span { display: block; font-size: 9px; letter-spacing: 0.18em; color: #7b7753; }
.power-plaque strong { display: flex; justify-content: center; align-items: center; gap: 4px; font-size: 20px; line-height: 1.15; }
.power-plaque strong i { color: var(--honey); font-size: 17px; }

.gear-slot {
  position: absolute;
  z-index: 4;
  width: 58px;
  height: 58px;
  padding: 5px;
  cursor: pointer;
  border: 2px solid #a9b985;
  border-radius: 18px;
  background: rgba(242, 239, 204, 0.92);
  box-shadow: inset 0 -4px 0 rgba(85, 109, 67, 0.12), 0 3px 0 rgba(75, 96, 58, 0.2);
}
.gear-slot::before { content: attr(data-label); position: absolute; inset: auto 0 4px; font-size: 9px; color: #879078; }
.gear-slot img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.gear-slot.is-empty { opacity: 0.8; }
.gear-slot.is-equipped { border-color: var(--honey); background: #fff3bd; }
.slot-hat { top: 58px; left: 19px; }
.slot-weapon { top: 122px; left: 19px; }
.slot-ring { top: 186px; left: 19px; }
.slot-cloak { top: 58px; right: 19px; }
.slot-boots { top: 122px; right: 19px; }
.slot-necklace { top: 186px; right: 19px; }

.hero-pedestal {
  position: absolute;
  inset: 50px 90px 58px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sun-ring {
  position: absolute;
  width: 166px;
  height: 166px;
  border: 18px solid rgba(222, 188, 76, 0.19);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 249, 203, 0.7);
}
.hero-sprite {
  position: relative;
  width: 154px;
  height: 154px;
  filter: drop-shadow(0 7px 0 rgba(55, 72, 45, 0.18));
  animation: hero-breathe 2.4s steps(2, end) infinite;
}
.paper-doll { position: relative; display: inline-block; isolation: isolate; transform-origin: center bottom; }
.paper-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; image-rendering: pixelated; pointer-events: none; }
.paper-layer.layer-base { z-index: 2; }
.paper-layer.layer-cloak { z-index: 1; transform: translateY(8%) scale(.42); }
.paper-layer.layer-boots { z-index: 3; transform: translateY(34%) scale(.31); }
.paper-layer.layer-necklace { z-index: 4; transform: translateY(14%) scale(.16); }
.paper-layer.layer-hat { z-index: 5; transform: translateY(-22%) scale(.43); }
.paper-layer.layer-weapon { z-index: 6; transform: translate(34%, 12%) rotate(-7deg) scale(.43); }
.paper-layer.layer-ring { z-index: 7; transform: translate(39%, 24%) scale(.13); }
@keyframes hero-breathe { 50% { transform: translateY(-4px); } }

.partner-peek {
  position: absolute;
  right: -5px;
  bottom: 3px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 3px;
  border: 2px solid #7ca35c;
  border-radius: 22px;
  background: #f7f1ca;
  box-shadow: 0 3px 0 #587d46;
}
.partner-peek img { width: 31px; height: 31px; object-fit: contain; image-rendering: pixelated; }
.partner-peek span { font-size: 10px; text-align: left; }
.partner-peek b { display: block; color: var(--sage-dark); }

.core-stats {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 253, 235, 0.88);
}
.core-stats span { text-align: center; border-right: 1px solid var(--line); }
.core-stats span:last-child { border: 0; }
.core-stats small { display: block; font-size: 9px; color: var(--muted); }
.core-stats b { font-size: 14px; }

.chest-yard {
  position: relative;
  height: calc(100% - 72px - 326px - 10px - 70px);
  min-height: 220px;
  padding-top: 37px;
}

.task-ribbon {
  position: absolute;
  top: 6px;
  left: 18px;
  right: 18px;
  z-index: 4;
  height: 43px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  cursor: pointer;
  border: 1px solid rgba(67, 92, 59, 0.25);
  border-radius: 13px;
  background: rgba(255, 248, 218, 0.94);
  box-shadow: 0 3px 0 rgba(79, 99, 57, 0.2);
}
.task-ribbon > i { color: var(--coral); font-size: 20px; }
.task-ribbon span { flex: 1; text-align: left; }
.task-ribbon small { display: block; font-size: 9px; color: var(--muted); }
.task-ribbon strong { font-size: 12px; }
.task-ribbon em { font-style: normal; font-size: 10px; color: var(--sage-dark); }

.chest-level {
  position: absolute;
  top: 58px;
  left: 50%;
  z-index: 4;
  transform: translateX(-50%);
  min-width: 124px;
  padding: 4px 12px;
  cursor: pointer;
  border: 1px solid rgba(77, 99, 57, 0.3);
  border-radius: 12px;
  background: rgba(248, 237, 200, 0.92);
  box-shadow: 0 2px 0 rgba(69, 90, 52, 0.2);
}
.chest-level span { display: block; font-size: 11px; font-weight: 700; }
.chest-level small { font-size: 8px; color: var(--sage-dark); }

.chest-stage {
  position: absolute;
  left: 50%;
  top: 76px;
  width: 190px;
  height: 144px;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.chest-glow {
  position: absolute;
  bottom: 4px;
  width: 168px;
  height: 68px;
  border-radius: 50%;
  background: rgba(108, 193, 166, 0.2);
  filter: blur(9px);
}
#chest-sprite {
  position: relative;
  width: 164px;
  height: 164px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 7px 0 rgba(57, 70, 38, 0.22));
}
.chest-stage.is-opening #chest-sprite { animation: chest-bounce 0.22s steps(2, end) infinite; }
@keyframes chest-bounce { 50% { transform: translateY(-5px) scale(1.02); } }
.chest-stage.is-reveal .chest-glow { background: rgba(95, 211, 195, 0.5); }
#chest-count-badge {
  position: absolute;
  right: 13px;
  bottom: 12px;
  min-width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 2px solid #fff7d7;
  border-radius: 50%;
  background: var(--coral);
  color: white;
  font-size: 12px;
  font-weight: 800;
}

.camp-message {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 54px;
  margin: 0;
  text-align: center;
  font-size: 10px;
  color: #52654c;
}

.open-chest-button {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: 202px;
  height: 45px;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  padding: 0 15px;
  cursor: pointer;
  border: 2px solid #fff3b3;
  border-radius: 14px;
  background: #d67a55;
  color: #fff;
  box-shadow: 0 5px 0 #9b4f3c;
}
.open-chest-button:active { transform: translate(-50%, 3px); box-shadow: 0 2px 0 #9b4f3c; }
.open-chest-button:disabled { filter: grayscale(0.5); opacity: 0.65; }
.open-chest-button i { font-size: 20px; }
.open-chest-button span { font-weight: 800; letter-spacing: 0.08em; }
.open-chest-button small { font-size: 8px; opacity: 0.86; }

.bottom-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  padding-bottom: max(4px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(255, 248, 221, 0.96);
  border-top: 2px solid rgba(74, 95, 56, 0.22);
  backdrop-filter: blur(8px);
}
.bottom-nav button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: #77826f;
}
.bottom-nav button i { font-size: 23px; }
.bottom-nav button span { font-size: 10px; }
.bottom-nav button.is-active { color: var(--sage-dark); }
.bottom-nav button.is-active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 34%;
  right: 34%;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--sage);
}
.bottom-nav em {
  position: absolute;
  top: 11px;
  right: 28px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
}

.toast {
  position: absolute;
  z-index: 90;
  left: 50%;
  top: 84px;
  transform: translateX(-50%);
  max-width: 82%;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  background: rgba(48, 70, 55, 0.92);
  color: #fff9df;
  font-size: 11px;
  text-align: center;
  box-shadow: 0 5px 14px rgba(29, 42, 31, 0.24);
}

.game-dialog {
  width: min(calc(100% - 24px), 406px);
  margin: auto;
  padding: 0;
  border: 2px solid #8fa06c;
  border-radius: 22px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 18px 60px rgba(31, 50, 36, 0.42);
}
.game-dialog::backdrop { background: rgba(40, 55, 39, 0.56); backdrop-filter: blur(3px); }

.loot-dialog { max-height: calc(100dvh - 36px); }
.loot-card { padding: 18px; }
.loot-card > header { text-align: center; }
.loot-card > header small { font-size: 9px; letter-spacing: 0.2em; color: var(--muted); }
.loot-card > header h2 { margin: 3px 0 2px; font-size: 21px; }
.rarity-label { display: inline-flex; padding: 3px 8px; border-radius: 8px; color: #fff; font-size: 10px; font-weight: 800; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.item-panel { min-width: 0; padding: 10px 8px; border: 1px solid var(--line); border-radius: 14px; background: #f5eccb; text-align: center; }
.item-panel.is-new { border: 2px solid var(--honey); background: #fff4c8; }
.item-panel > small { font-size: 9px; color: var(--muted); }
.item-panel > img { width: 82px; height: 82px; object-fit: contain; image-rendering: pixelated; }
.item-panel h3 { min-height: 34px; margin: 2px 0 5px; font-size: 13px; }
.item-stats { display: grid; gap: 3px; text-align: left; font-size: 10px; }
.item-stats span { display: flex; justify-content: space-between; }
.delta-up { color: #308c58; }
.delta-down { color: #c25749; }
.affix-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 23px; margin-top: 6px; }
.affix-row span { padding: 3px 5px; border-radius: 6px; background: #dce8bb; color: #466544; font-size: 9px; }
.loot-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 8px; margin-top: 14px; }
.loot-actions button, .sheet-primary {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
}
.sell-button { background: #e6ddc3; color: #52614c; box-shadow: 0 3px 0 #b9ad8d; }
.equip-button, .sheet-primary { background: var(--coral); color: white; box-shadow: 0 4px 0 #9e503b; }
.loot-hint { margin: 11px 0 0; font-size: 9px; text-align: center; color: var(--muted); }

.sheet-dialog {
  width: min(100%, 430px);
  height: min(84dvh, 720px);
  margin: auto auto 0;
  border-radius: 24px 24px 0 0;
}
.sheet-dialog > header {
  height: 67px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.sheet-dialog header small { font-size: 9px; color: var(--muted); letter-spacing: 0.16em; }
.sheet-dialog header h2 { margin: 1px 0 0; font-size: 21px; }
.sheet-dialog header button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #f3e9c7;
  cursor: pointer;
}
.sheet-content { height: calc(100% - 67px); overflow: auto; padding: 14px 16px 28px; }

.stage-list { display: grid; gap: 9px; }
.stage-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f5eccb;
}
.stage-card.is-current { border: 2px solid var(--honey); background: #fff4c8; }
.stage-card.is-locked { opacity: 0.52; filter: grayscale(0.7); }
.stage-card img { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; }
.stage-card h3 { margin: 0; font-size: 13px; }
.stage-card p { margin: 3px 0; font-size: 9px; color: var(--muted); }
.stage-card small { font-size: 9px; color: var(--sage-dark); }
.stage-card button { min-width: 58px; height: 33px; border: 0; border-radius: 9px; background: var(--sage); color: white; font-size: 10px; font-weight: 800; }
.stage-card button:disabled { background: #c8c3a8; }
.sheet-summary { display: flex; justify-content: space-between; margin-bottom: 10px; padding: 10px 12px; border-radius: 12px; background: #dfe9bc; font-size: 11px; }

.upgrade-panel { padding: 5px 2px; text-align: center; }
.upgrade-panel > img { width: 138px; height: 138px; object-fit: contain; image-rendering: pixelated; }
.upgrade-panel h3 { margin: -8px 0 3px; font-size: 20px; }
.upgrade-panel p { margin: 0 0 13px; font-size: 10px; color: var(--muted); }
.rate-list { display: grid; gap: 5px; padding: 10px; border-radius: 13px; background: #f3e8c4; }
.rate-list span { display: grid; grid-template-columns: 50px 1fr 42px; align-items: center; gap: 7px; font-size: 10px; text-align: left; }
.rate-list i { height: 6px; overflow: hidden; border-radius: 6px; background: #d9d5b7; }
.rate-list em { display: block; height: 100%; background: var(--sage); }
.upgrade-panel .sheet-primary { width: 100%; margin-top: 13px; }

.partner-panel { text-align: center; }
.partner-panel > img { width: 140px; height: 140px; object-fit: contain; image-rendering: pixelated; }
.partner-panel h3 { margin: -5px 0 4px; font-size: 21px; }
.partner-panel > p { margin: 0 auto 14px; max-width: 250px; color: var(--muted); font-size: 11px; }
.partner-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 12px; }
.partner-stats span { padding: 9px 4px; border-radius: 10px; background: #e5edc7; }
.partner-stats small { display: block; font-size: 9px; color: var(--muted); }
.partner-stats b { font-size: 15px; }

.collection-tabs { display: flex; gap: 7px; margin-bottom: 10px; }
.collection-tabs button { flex: 1; height: 34px; border: 1px solid var(--line); border-radius: 10px; background: #efe4c1; }
.collection-tabs button.is-active { background: var(--sage); color: white; }
.collection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.collection-card { min-height: 140px; padding: 10px; border: 1px solid var(--line); border-radius: 13px; background: #f5eccb; text-align: center; }
.collection-card img { width: 76px; height: 76px; object-fit: contain; image-rendering: pixelated; }
.collection-card h3 { margin: 1px 0; font-size: 12px; }
.collection-card small { font-size: 9px; color: var(--muted); }
.achievement-list { display: grid; gap: 7px; }
.achievement-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; background: #eee4c5; opacity: 0.58; }
.achievement-row.is-unlocked { background: #e1edbd; opacity: 1; }
.achievement-row > i { font-size: 25px; color: var(--honey); }
.achievement-row strong, .achievement-row small { display: block; }
.achievement-row strong { font-size: 11px; }
.achievement-row small { font-size: 9px; color: var(--muted); }
.achievement-row em { font-size: 9px; font-style: normal; }

.gear-detail { text-align: center; }
.gear-detail img { width: 150px; height: 150px; object-fit: contain; image-rendering: pixelated; }
.gear-detail h3 { margin: -5px 0 3px; font-size: 20px; }
.gear-detail p { margin: 0 0 13px; color: var(--muted); font-size: 10px; }
.gear-resonance { display: grid; gap: 4px; margin: 10px 0 8px; padding: 8px; border: 2px solid #596448; background: #e7d9aa; text-align: left; }
.gear-resonance strong { font-size: 10px; }
.gear-resonance span { padding: 4px 6px; border: 1px solid #9b956e; background: #d1c79f; color: #716d55; font-size: 8px; }
.gear-resonance span.is-active { border-color: #557844; background: #d7e5a2; color: #315c36; box-shadow: inset 3px 0 0 #6d9b4f; }
.empty-gear { padding: 40px 10px; text-align: center; }
.empty-gear i { font-size: 46px; color: #9ba584; }

.battle-screen {
  position: absolute;
  inset: 0;
  z-index: 70;
  overflow: hidden;
  background: #d8e7bd;
}
.battle-sky {
  position: absolute;
  inset: 0;
  background: url("../assets/monster-trail/world/handdrawn-scrap-route.png") center 46% / cover no-repeat;
  filter: saturate(0.95) brightness(0.96);
}
.battle-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(244, 238, 188, 0.16);
  pointer-events: none;
}
.battle-screen > header {
  position: relative;
  z-index: 4;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(12px, env(safe-area-inset-top)) 14px 8px;
  background: rgba(255, 249, 223, 0.86);
  border-bottom: 1px solid var(--line);
}
.battle-screen > header span { font-size: 12px; font-weight: 800; }
.battle-screen > header button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: #f4e9c5; font-size: 10px; }

.battle-unit { position: absolute; z-index: 3; width: 200px; }
.battle-unit > img { object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 9px 0 rgba(40, 57, 34, 0.24)); }
.enemy-unit { top: 115px; right: 18px; text-align: right; }
.enemy-unit > img { width: 154px; height: 154px; margin-top: 13px; }
.player-unit { left: 20px; bottom: 122px; }
.player-unit > #player-battle-doll { width: 156px; height: 156px; filter: drop-shadow(0 9px 0 rgba(40, 57, 34, 0.24)); }
.player-unit > #partner-battle-sprite { position: absolute; left: 112px; top: 76px; width: 82px; height: 82px; }
.battle-label { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px 4px; border-radius: 10px 10px 0 0; background: rgba(255, 250, 225, 0.92); font-size: 9px; }
.battle-label strong { font-size: 10px; }
.hp-track { height: 8px; padding: 2px; border-radius: 0 0 8px 8px; background: rgba(62, 73, 48, 0.8); }
.hp-track i { display: block; width: 100%; height: 100%; border-radius: 5px; background: #76b756; transition: width 240ms ease; }
.enemy-unit.is-hit img { animation: enemy-hit 0.32s steps(2, end); }
.player-unit.is-hit #player-battle-doll { animation: player-hit 0.32s steps(2, end); }
.player-unit.is-attack #player-battle-doll { animation: player-lunge 0.34s ease; }
.player-unit.is-partner #partner-battle-sprite { animation: partner-lunge 0.4s ease; }
@keyframes enemy-hit { 45% { transform: translateX(10px); opacity: 0.3; } }
@keyframes player-hit { 45% { transform: translateX(-9px); opacity: 0.35; } }
@keyframes player-lunge { 50% { transform: translate(68px, -34px) scale(1.05); } }
@keyframes partner-lunge { 50% { transform: translate(80px, -65px) scale(1.12); } }

.battle-callout {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  min-width: 126px;
  padding: 8px 12px;
  border: 2px solid #fff3c2;
  border-radius: 12px;
  background: rgba(47, 69, 52, 0.9);
  color: white;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.battle-result {
  position: absolute;
  z-index: 8;
  left: 22px;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  padding: 20px;
  border: 2px solid #d4b55b;
  border-radius: 20px;
  background: #fff7d8;
  text-align: center;
  box-shadow: 0 12px 40px rgba(40, 56, 37, 0.35);
}
.battle-result h2 { margin: 0 0 4px; font-size: 25px; }
.battle-result p { margin: 0 0 14px; font-size: 11px; color: var(--muted); }
.battle-result button { width: 100%; height: 44px; border: 0; border-radius: 12px; background: var(--coral); color: white; font-weight: 800; box-shadow: 0 4px 0 #9e503b; }

@media (max-height: 760px) {
  .status-bar { height: 62px; padding-top: max(6px, env(safe-area-inset-top)); }
  .player-badge > img { width: 39px; height: 39px; }
  .hero-board { height: 278px; margin-top: 6px; }
  .hero-pedestal { inset: 42px 88px 50px; }
  .hero-sprite { width: 128px; height: 128px; }
  .sun-ring { width: 140px; height: 140px; }
  .gear-slot { width: 50px; height: 50px; }
  .slot-hat, .slot-cloak { top: 52px; }
  .slot-weapon, .slot-boots { top: 106px; }
  .slot-ring, .slot-necklace { top: 160px; }
  .core-stats { bottom: 7px; padding: 5px 3px; }
  .chest-yard { height: calc(100% - 62px - 278px - 6px - 62px); min-height: 196px; }
  .task-ribbon { height: 38px; top: 4px; }
  .chest-level { top: 47px; }
  .chest-stage { top: 59px; height: 124px; }
  #chest-sprite { width: 140px; height: 140px; }
  .camp-message { bottom: 48px; }
  .open-chest-button { bottom: 6px; height: 40px; }
  .bottom-nav { height: 62px; }
}

/* v11.7 equipment lifecycle and terminal information architecture */
.terminal-tabs {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 5px;
  border: 2px solid #514b3e;
  background: #23241f;
  box-shadow: 3px 3px 0 #11120f;
}
.terminal-tabs button {
  min-width: 0;
  min-height: 36px;
  padding: 4px 2px;
  border: 1px solid #665d4b;
  border-radius: 1px;
  background: #35362f;
  color: #bfb299;
  font: inherit;
  font-size: 8px;
}
.terminal-tabs button.is-active { border-color: #d47742; background: #76442f; color: #ffe0ad; box-shadow: inset 0 -3px 0 #4e2d22; }
.build-resource-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border: 2px solid #4c5845;
  background: #d7ddae;
  box-shadow: 2px 2px 0 #9c986d;
}
.build-resource-strip span { flex: none; font-size: 9px; }
.build-resource-strip span i { color: #a64f32; }
.build-resource-strip small { color: #67684f; font-size: 7px; text-align: right; }
.locker-item.is-protected { border-color: #9c7047; box-shadow: inset 3px 0 0 #d47742; }
.locker-item span { display: grid; grid-template-columns: repeat(3, 1fr); }
.locker-item button { min-width: 34px; padding-inline: 4px; }

.region-selector {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 10px 0;
}
.region-selector button {
  min-width: 0;
  min-height: 48px;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 5px;
  padding: 5px 6px;
  border: 2px solid #555746;
  border-radius: 1px;
  background: #ddd1a8;
  box-shadow: 2px 2px 0 #9f9169;
  text-align: left;
}
.region-selector button small { color: #766b52; font-size: 6px; }
.region-selector button b { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.region-selector button em { color: #657057; font-size: 6px; font-style: normal; }
.region-selector button.is-active { border-color: #9a4a31; background: #f3ce82; box-shadow: 3px 3px 0 #754131; }
.region-selector button.is-locked { opacity: .48; }

.archive-series-selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: 9px 0;
}
.archive-series-selector button {
  min-width: 0;
  min-height: 43px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 5px;
  border: 2px solid #596448;
  border-radius: 1px;
  background: #e6d6aa;
  box-shadow: 2px 2px 0 #a9996b;
}
.archive-series-selector button b { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.archive-series-selector button small { color: #6f6a50; font-size: 6px; }
.archive-series-selector button.is-active { border-color: #9a4a31; background: #f2c979; box-shadow: 3px 3px 0 #754131; }
.archive-family-note { display: grid; gap: 2px; margin-bottom: 8px; padding: 8px; border: 2px solid #4f5745; background: #d8dfa9; }
.archive-family-note strong { font-size: 10px; }
.archive-family-note span { color: #686950; font-size: 8px; }

.gear-protection-actions {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 5px;
  margin: 0 0 10px;
}
.gear-protection-actions button {
  min-height: 36px;
  border: 2px solid #5d604d;
  border-radius: 1px;
  background: #e7d6aa;
  font: inherit;
  font-size: 9px;
}
.gear-protection-actions button i { margin-right: 4px; }
.gear-protection-actions button.is-active { border-color: #9b4a32; background: #f1c979; box-shadow: inset 0 -3px 0 #c5824d; }
.gear-protection-actions > span { padding: 4px 5px; border: 1px solid #777057; color: #68634e; font-size: 7px; }
.reforge-terminal { margin: 10px 0; overflow: hidden; border: 2px solid #514d42; background: #282a25; color: #ead9b8; box-shadow: 3px 3px 0 #151612; text-align: left; }
.reforge-terminal > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border-bottom: 1px solid #5b5546; background: #35372f; }
.reforge-terminal header small { color: #d2925d; font-size: 6px; letter-spacing: .14em; }
.reforge-terminal header h3 { margin: 1px 0 0; color: #f0d6ad; font-size: 11px; }
.reforge-terminal header strong { color: #72c1b5; font-size: 8px; }
.reforge-terminal > p { margin: 0; padding: 7px 8px; color: #ada28d; font-size: 7px; }
.reforge-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px; padding: 6px 8px; border-top: 1px solid #4b493f; }
.reforge-row span { display: grid; gap: 1px; }
.reforge-row i { color: #b6a68a; font-size: 6px; font-style: normal; }
.reforge-row b { color: #efddbd; font-size: 8px; }
.reforge-row button { min-width: 56px; min-height: 30px; border: 1px solid #a45a38; border-radius: 1px; background: #75412f; color: #ffe0b3; font: inherit; font-size: 8px; }
.reforge-row button:disabled { border-color: #575349; background: #3d3e37; color: #777267; }
.reforge-terminal footer { padding: 7px 8px; border-top: 1px solid #5b5546; color: #b4a78f; background: #30312c; font-size: 7px; }
.reforge-empty { padding-block: 12px !important; text-align: center; }

@media (max-width: 370px) {
  .terminal-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .locker-item { grid-template-columns: 38px 1fr; }
  .locker-item img { width: 38px; height: 38px; }
  .locker-item span { grid-column: 1 / -1; }
  .archive-series-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* v11.6 repair-bay build memory and identity wardrobe */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.attribute-panel .preset-terminal { overflow: hidden; border-color: #4b4c42; background: #242621; box-shadow: 3px 3px 0 #121310; color: #e9d9b9; }
.preset-terminal > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #30332c !important; border-color: #5b5546 !important; }
.preset-terminal > header h3 { color: #f1d09a; }
.preset-terminal > header small { color: #b8aa90 !important; }
.preset-terminal > header strong { flex: 0 0 auto; color: #76c4b8; font-size: 9px; }
.preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 8px; }
.preset-card { min-width: 0; padding: 7px; border: 2px solid #5b5546; background: #31332d; box-shadow: 2px 2px 0 #151612; }
.preset-card.is-active { border-color: #d47742; background: #49362a; }
.preset-card header { display: flex; align-items: start; justify-content: space-between; gap: 4px; padding: 0 0 5px !important; border: 0 !important; background: transparent !important; }
.preset-card header span { min-width: 0; display: grid; }
.preset-card header small { color: #a79b85 !important; font-size: 7px !important; }
.preset-card header b { overflow: hidden; text-overflow: ellipsis; color: #f0dbb8; font-size: 10px; white-space: nowrap; }
.preset-card header em { color: #f2a765; font-size: 7px; font-style: normal; }
.preset-card input { width: 100%; height: 28px; padding: 3px 5px; color: #f0dfc1; border: 1px solid #6c604d; border-radius: 1px; background: #20211e; font: inherit; font-size: 9px; }
.preset-card > div { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 5px; }
.preset-card > div button { min-width: 0; min-height: 27px; padding: 3px; color: #eee0c5; border: 1px solid #78664f; border-radius: 1px; background: #49463c; font: inherit; font-size: 8px; }
.preset-card > div button:last-child { border-color: #a95b38; background: #75412f; }
.preset-card > div button:disabled { opacity: .52; }
.locker-terminal { border-top: 1px solid #5b5546; }
.locker-terminal summary { cursor: pointer; padding: 8px 10px; color: #d7c29e; background: #292b26; font-size: 9px; list-style-position: inside; }
.locker-terminal summary small { float: right; color: #9b927f; font-size: 7px; }
.locker-grid { display: grid; gap: 5px; padding: 8px; }
.locker-item { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 7px; min-height: 48px; padding: 5px; border: 1px solid #5d5749; background: #30322c; }
.locker-item img { width: 42px; height: 42px; object-fit: contain; image-rendering: pixelated; }
.locker-item div { min-width: 0; display: grid; }
.locker-item b { overflow: hidden; color: #ebdab8; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.locker-item small { color: #a9a08e; font-size: 7px; }
.locker-item span { display: flex; gap: 4px; }
.locker-item button { min-height: 27px; padding: 3px 6px; color: #ead9bb; border: 1px solid #6b604e; border-radius: 1px; background: #44453d; font: inherit; font-size: 8px; }
.locker-item button:disabled { opacity: .35; }
.locker-empty { margin: 0; padding: 10px; color: #a99e88; font-size: 8px; text-align: center; }
.wardrobe-summary { border-color: #565045; background: #262824; color: #e8d6b6; box-shadow: 3px 3px 0 #141512; }
.wardrobe-slots { display: grid; gap: 8px; }
.wardrobe-slot { overflow: hidden; border: 2px solid #596448; background: #eadbaa; box-shadow: 3px 3px 0 #b3a36f; }
.wardrobe-slot > header { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 7px; padding: 7px; border-bottom: 2px solid #596448; background: #d6e3a1; }
.wardrobe-slot > header > i { font-size: 19px; color: #54623f; }
.wardrobe-slot > header div { display: grid; }
.wardrobe-slot > header b { font-size: 10px; }
.wardrobe-slot > header small { color: #697052; font-size: 7px; }
.wardrobe-slot > header button { min-height: 28px; padding: 3px 7px; border: 1px solid #63704b; border-radius: 1px; background: #f0dfad; font: inherit; font-size: 8px; }
.wardrobe-slot > header button:disabled { color: #efe2bf; background: #61784a; opacity: 1; }
.wardrobe-slot > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 7px; }
.wardrobe-slot > div > p { grid-column: 1 / -1; margin: 8px 0; color: #75694f; font-size: 8px; text-align: center; }
.wardrobe-choice { min-width: 0; min-height: 92px; display: grid; justify-items: center; align-content: center; gap: 1px; padding: 5px; border: 1px solid #8f805f; border-radius: 1px; background: #f1e2b7; font: inherit; }
.wardrobe-choice.is-selected { border: 2px solid #a24b32; background: #f4c982; box-shadow: 2px 2px 0 #754131; }
.wardrobe-choice img { width: 54px; height: 54px; object-fit: contain; image-rendering: pixelated; }
.wardrobe-choice span { max-width: 100%; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.wardrobe-choice small { color: #74684f; font-size: 6px; }

@media (max-width: 430px) {
  .preset-grid { grid-template-columns: 1fr; }
  .preset-card { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; align-items: end; }
  .preset-card header { grid-column: 1 / -1; }
  .preset-card > div { margin: 0; }
  .locker-terminal summary small { float: none; margin-left: 5px; }
}

/* Keep the one-time identity gate in the Repair Bay visual language. */
#creation-dialog {
  border: 3px solid #8d744f;
  border-radius: 3px;
  background: #22231f;
  color: #ead8b6;
  box-shadow: 0 0 0 3px #171815, 8px 8px 0 rgba(0, 0, 0, .65);
}
#creation-dialog header { height: auto; padding: 0; display: block; border: 0; text-align: left; }
#creation-dialog header small { color: #c98551; }
#creation-dialog header h2 { margin: 4px 0; color: #f4d8a7; }
#creation-dialog header p { color: #a99c84; }
#creation-dialog .creation-name input { color: #f7dfb9; border-color: #665a47; background: #161714; }

/* v11.5 identity forge and long-term build terminals */
.creation-dialog {
  width: min(calc(100% - 20px), 410px);
  max-height: calc(100dvh - 20px);
  overflow: auto;
  border: 3px solid #8d744f;
  border-radius: 3px;
  background: #22231f;
  color: #ead8b6;
  box-shadow: 0 0 0 3px #171815, 8px 8px 0 rgba(0, 0, 0, .65);
}
.creation-dialog::backdrop { background: rgba(9, 10, 9, .9); backdrop-filter: none; }
.creation-dialog form { display: grid; gap: 12px; padding: 16px; }
.creation-dialog header { text-align: left; }
.creation-dialog header small { color: #c98551; letter-spacing: .15em; font-size: 9px; }
.creation-dialog header h2 { margin: 4px 0; color: #f4d8a7; font-size: 22px; }
.creation-dialog header p { margin: 0; color: #a99c84; font-size: 11px; line-height: 1.6; }
.creation-heroes { display: grid; gap: 7px; }
.creation-hero {
  display: grid;
  grid-template-columns: 76px 1fr 20px;
  align-items: center;
  min-height: 88px;
  padding: 5px 8px;
  color: #cbbd9f;
  text-align: left;
  border: 2px solid #4f4b40;
  border-radius: 2px;
  background: #2b2c27;
  box-shadow: 3px 3px 0 #11120f;
}
.creation-hero.is-selected { color: #ffe3b4; border-color: #d4864d; background: #3b3328; }
.creation-hero .paper-doll { width: 70px; height: 78px; }
.creation-hero div { display: grid; gap: 2px; }
.creation-hero small { color: #9e8f75; font-size: 9px; }
.creation-hero b { font-size: 14px; }
.creation-hero p { margin: 0; font-size: 9px; line-height: 1.4; }
.creation-name { display: grid; gap: 5px; font-size: 11px; }
.creation-name input { height: 42px; padding: 0 10px; color: #f7dfb9; border: 2px solid #665a47; border-radius: 2px; outline: 0; background: #161714; font: inherit; }
.creation-name input:focus { border-color: #d4864d; }
.creation-name small { color: #92856f; font-size: 9px; }
.creation-error { min-height: 15px; margin: 0; color: #ee8165; font-size: 10px; }
.creation-submit { height: 46px; color: #fff0d4; border: 3px solid #593022; border-radius: 2px; background: #bd663f; box-shadow: inset 0 2px 0 #e99a66, 0 4px 0 #3b2018; font-weight: 800; }

.structure-protocol { display: grid; grid-template-columns: 38px 1fr; gap: 9px; align-items: center; padding: 10px; border: 2px solid #78674e; background: #302f29; color: #ead7b4; }
.structure-protocol > i { font-size: 26px; color: #e7a665; }
.structure-protocol h3, .structure-protocol p { margin: 1px 0; }
.structure-protocol p, .structure-protocol small { color: #a99b82; font-size: 9px; }
.structure-mark { display: block; margin: 8px 0; padding: 7px; border: 1px solid #8b7654; background: #2f302a; color: #e2c796; font-size: 9px; line-height: 1.5; }
.affix-row span i { display: inline-block; margin-right: 3px; color: #a95c39; font-style: normal; font-weight: 900; }

.skill-tree-terminal { display: grid; gap: 9px; }
.skill-tree-terminal > header, .advanced-terminal > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.skill-tree-terminal > header strong, .advanced-terminal > header strong { color: #d47c49; font-size: 10px; text-align: right; }
.skill-tree-grid { display: grid; gap: 8px; }
.skill-tree-grid > section { display: grid; gap: 4px; padding: 7px; border: 1px solid #77684f; background: #2b2c27; }
.skill-tree-grid > section > b { color: #deb77c; font-size: 10px; }
.skill-tree-grid button { display: grid; grid-template-columns: 24px 1fr auto; gap: 7px; align-items: center; min-height: 42px; padding: 5px 7px; color: #c5b89f; text-align: left; border: 1px solid #565247; border-radius: 1px; background: #23241f; }
.skill-tree-grid button > i { font-size: 18px; }
.skill-tree-grid button span { display: grid; }
.skill-tree-grid button small { color: #8f8675; font-size: 8px; }
.skill-tree-grid button em { font-size: 8px; font-style: normal; }
.skill-tree-grid button.is-available { border-color: #c77446; color: #f1d2a3; }
.skill-tree-grid button.is-learned { border-color: #55785f; color: #bcd4ae; background: #29332a; opacity: 1; }
.skill-tree-grid button.is-locked { opacity: .55; }
.mastery-track { position: relative; height: 24px; overflow: hidden; border: 1px solid #685d4b; background: #24251f; }
.mastery-track i { position: absolute; inset: 0 auto 0 0; background: #7a583b; }
.mastery-track span { position: relative; z-index: 1; display: grid; height: 100%; place-items: center; color: #e5d1ae; font-size: 8px; }
.affix-set-summary strong i { margin-right: 5px; }

@media (max-height: 700px) {
  .creation-dialog form { gap: 8px; padding: 11px; }
  .creation-hero { min-height: 70px; grid-template-columns: 58px 1fr 18px; }
  .creation-hero .paper-doll { width: 52px; height: 62px; }
  .creation-dialog header p, .creation-hero p { line-height: 1.25; }
}

@media (min-width: 700px) {
  .game-shell { border-left: 6px solid #fff4cf; border-right: 6px solid #fff4cf; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* V8 — 全局像素界面。保留圆形只用于场景光晕，不用于交互控件。 */
html, body, button, dialog { font-family: "Fusion Pixel", "PingFang SC", monospace; }
body { image-rendering: pixelated; background: #b9c995; }
button, dialog, article, section, header, nav, span, i, em { -webkit-font-smoothing: none; }
button { letter-spacing: .04em; }

.status-bar,
.hero-board,
.player-badge > img,
.currency-row > span,
.currency-row button,
.power-plaque,
.gear-slot,
.partner-peek,
.core-stats,
.task-ribbon,
.chest-level,
#chest-count-badge,
.open-chest-button,
.bottom-nav,
.toast,
.game-dialog,
.rarity-label,
.item-panel,
.affix-row span,
.loot-actions button,
.sheet-primary,
.stage-card,
.stage-card button,
.sheet-summary,
.rate-list,
.rate-list i,
.partner-stats span,
.collection-tabs button,
.collection-card,
.achievement-row,
.battle-screen > header button,
.battle-label,
.hp-track,
.hp-track i,
.battle-callout,
.battle-result,
.battle-result button,
.task-card,
.task-card button,
.task-card span,
.attribute-panel article,
.base-attribute-grid span,
.rule-note,
.phase-complete { border-radius: 0 !important; }

.status-bar,
.bottom-nav,
.game-dialog,
.battle-screen > header { backdrop-filter: none; }

.game-shell {
  background: #dbe8ad;
  border: 3px solid #25392d;
  box-shadow: 8px 0 0 #617454, -8px 0 0 #617454;
}
.world-backdrop { filter: saturate(.9) contrast(1.04) brightness(1.05); }
.world-backdrop::after { background: rgba(239, 242, 194, .32); }
.status-bar {
  background: #fff0bd;
  border-bottom: 3px solid #344b36;
  box-shadow: inset 0 -3px 0 #c7a95d;
}
.player-badge > img { border: 3px solid #344b36; box-shadow: 3px 3px 0 #8ca059; }
.player-badge strong { font-size: 13px; text-shadow: 1px 1px 0 #fff6d1; }
.player-badge i { height: 7px; border: 2px solid #344b36; background: #aaae7e; }
.player-badge em { background: #44a79b; }
.currency-row > span, .currency-row button { border: 2px solid #344b36; background: #fff8d8; box-shadow: 2px 2px 0 #9f8a54; }

.hero-board {
  border: 3px solid #344b36;
  background: rgba(255, 240, 189, .9);
  box-shadow: 5px 5px 0 rgba(52, 75, 54, .45), inset 0 0 0 3px rgba(255, 251, 219, .72);
}
.power-plaque {
  cursor: pointer;
  color: var(--ink);
  border: 3px solid #684e29;
  background: #ffd86d;
  box-shadow: 3px 3px 0 #8c5d28;
}
.power-plaque > span { font-size: 8px; color: #684e29; }
.power-plaque strong { font-size: 19px; }
.power-plaque > em { display: block; margin-top: 1px; color: #7b572d; font-size: 7px; font-style: normal; }
.gear-slot { border: 3px solid #344b36; background: #dae3a7; box-shadow: inset -3px -3px 0 #9cad73, 3px 3px 0 #506442; }
.gear-slot.is-equipped { border-color: #684e29; background: #ffe898; box-shadow: inset -3px -3px 0 #d2a947, 3px 3px 0 #73532b; }
.gear-slot::before { bottom: 2px; padding: 1px 0; background: rgba(255, 248, 208, .86); color: #344b36; }
.partner-peek { border: 3px solid #344b36; background: #e8efb9; box-shadow: 3px 3px 0 #506442; }
.core-stats { border: 2px solid #344b36; background: #fff5ca; box-shadow: inset 0 -3px 0 #d2bd7d; }

.task-ribbon { border: 3px solid #344b36; background: #fff2bd; box-shadow: 3px 3px 0 #62724a; }
.task-ribbon.is-complete { border-color: #825126; background: #ffdc73; animation: task-ready .9s steps(2, end) infinite; }
@keyframes task-ready { 50% { transform: translateY(-2px); } }
.task-ribbon small { color: #6a704f; }
.task-ribbon > i { color: #b55437; }
.task-ribbon em { color: #344b36; }
.chest-level { border: 2px solid #344b36; background: #f8dda0; box-shadow: 2px 2px 0 #6a744d; }
#chest-count-badge { border: 3px solid #3d3325; background: #d56245; box-shadow: 2px 2px 0 #663b2d; }
.camp-message { padding: 3px 6px; background: rgba(255, 244, 193, .86); color: #344b36; }
.open-chest-button { border: 3px solid #4b3025; background: #d66545; box-shadow: inset 0 3px 0 #f39a63, 0 5px 0 #753d30; }
.open-chest-button:active { box-shadow: inset 0 2px 0 #f39a63, 0 2px 0 #753d30; }

.bottom-nav { background: #ffefbb; border-top: 3px solid #344b36; box-shadow: inset 0 3px 0 #fff9d9; }
.bottom-nav button { border-right: 2px solid rgba(52, 75, 54, .24); }
.bottom-nav button:last-child { border-right: 0; }
.bottom-nav button.is-active { background: #d9e7a4; color: #2f5737; }
.bottom-nav button.is-active::after { left: 0; right: 0; height: 4px; background: #4f7b45; }
.bottom-nav em { width: 8px; height: 8px; border: 2px solid #fff4c7; background: #c6533f; }

.toast { border: 3px solid #f7e9ad; background: #304637; box-shadow: 4px 4px 0 rgba(26, 39, 29, .55); }
.game-dialog { border: 3px solid #344b36; background: #fff1bf; box-shadow: 8px 8px 0 rgba(32, 48, 35, .56); }
.game-dialog::backdrop { background: rgba(31, 49, 35, .66); backdrop-filter: none; }
.sheet-dialog { border-bottom: 0; }
.sheet-dialog > header { border-bottom: 3px solid #344b36; background: #efd58d; box-shadow: inset 0 -3px 0 #bc9a56; }
.sheet-dialog header button { border: 2px solid #344b36; background: #fff0bd; box-shadow: 2px 2px 0 #826a3f; }
.sheet-content { background: #fff4cc; }
.loot-card > header h2, .sheet-dialog header h2, .battle-result h2 { text-shadow: 2px 2px 0 #e9c77a; }
.rarity-label { border: 2px solid #344b36; box-shadow: 2px 2px 0 rgba(52, 75, 54, .5); }
.item-panel { border: 2px solid #566247; background: #efe0ad; box-shadow: inset -3px -3px 0 #c8b678; }
.item-panel.is-new { border: 3px solid #8e642d; background: #ffeaa0; box-shadow: inset -3px -3px 0 #d5b452; }
.affix-row span { border: 1px solid #526442; background: #d6e4a2; }
.loot-actions button, .sheet-primary { border: 3px solid #49382a; min-height: 46px; }
.sell-button { background: #d9d0ae; box-shadow: inset 0 3px 0 #f6eed2, 0 4px 0 #74694e; }
.sell-button span, .sell-button small { display: block; }
.sell-button small { margin-top: 2px; font-size: 7px; }
.equip-button, .sheet-primary { background: #d66545; box-shadow: inset 0 3px 0 #f39a63, 0 4px 0 #753d30; }

.stage-card, .collection-card, .achievement-row { border: 2px solid #596448; background: #efe0ad; box-shadow: 3px 3px 0 #b3a36f; }
.stage-card.is-current { border: 3px solid #8a5d2b; background: #ffe69a; }
.stage-card button, .task-card button { border: 2px solid #344b36; background: #668c48; box-shadow: 2px 2px 0 #344b36; }
.enemy-traits { display: block; margin-top: 3px; color: #8a5a36; font-size: 8px; font-style: normal; }
.sheet-summary, .partner-stats span { border: 2px solid #566247; background: #dce7a9; box-shadow: inset -2px -2px 0 #b8c47f; }
.rate-list { border: 2px solid #6b694b; background: #ead9a6; }
.rate-list i { border: 1px solid #596448; }
.collection-tabs button { border: 2px solid #526442; background: #ead9a6; }
.collection-tabs button.is-active { background: #668c48; box-shadow: inset 0 -3px 0 #3e653b; }

.task-list { display: grid; gap: 9px; }
.task-card { display: grid; grid-template-columns: 30px 1fr 62px; align-items: center; gap: 9px; padding: 10px; border: 2px solid #596448; background: #eadbaa; box-shadow: 3px 3px 0 #b3a36f; }
.task-card.is-current { border: 3px solid #895a2b; background: #ffe69a; }
.task-card.is-claimed { background: #dce7a9; opacity: .75; }
.task-card.is-locked { filter: grayscale(.65); opacity: .55; }
.task-card > i { font-size: 24px; color: #6c814f; }
.task-card h3 { margin: 0; font-size: 11px; }
.task-card p { margin: 2px 0 5px; font-size: 8px; color: #6a704f; }
.task-card div > span { display: inline-block; width: calc(100% - 37px); height: 6px; border: 1px solid #596448; background: #bfc08e; }
.task-card div > span em { display: block; height: 100%; background: #5f9d57; }
.task-card div > small { margin-left: 4px; font-size: 8px; }
.task-card button { height: 34px; color: white; font-size: 9px; font-weight: 800; }
.task-card button:disabled { background: #aaa37d; color: #e8dfbf; }
.task-card > b { font-size: 8px; text-align: center; color: #6d7156; }
.phase-complete { padding: 32px 15px; border: 3px solid #58684a; background: #dce7a9; text-align: center; }
.phase-complete i { font-size: 36px; color: #c77d2c; }

.attribute-panel { display: grid; gap: 12px; }
.base-attribute-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.base-attribute-grid span { padding: 9px 3px; border: 2px solid #566247; background: #ffe49a; text-align: center; box-shadow: 2px 2px 0 #a88447; }
.base-attribute-grid small, .base-attribute-grid b { display: block; }
.base-attribute-grid small { font-size: 8px; color: #6a704f; }
.base-attribute-grid b { font-size: 15px; }
.attribute-panel article { border: 2px solid #596448; background: #eadbaa; box-shadow: 3px 3px 0 #b3a36f; }
.attribute-panel article header { padding: 9px 10px; border-bottom: 2px solid #596448; background: #d6e3a1; }
.attribute-panel article h3 { margin: 0; font-size: 12px; }
.attribute-panel article header small { font-size: 8px; color: #6a704f; }
.resonance-summary > div { display: grid; gap: 4px; padding: 8px; border-bottom: 1px solid #9d966d; }
.resonance-summary > div:last-child { border-bottom: 0; }
.resonance-summary > div strong { font-size: 9px; }
.resonance-summary > div span { padding: 4px 6px; background: #d1c79f; color: #746f57; font-size: 8px; }
.resonance-summary > div span.is-active { background: #d7e5a2; color: #315c36; box-shadow: inset 3px 0 0 #6d9b4f; }
.attribute-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.attribute-grid span { padding: 9px 7px; border-right: 1px solid #8c8a65; border-bottom: 1px solid #8c8a65; }
.attribute-grid span:nth-child(3n) { border-right: 0; }
.attribute-grid span:nth-last-child(-n+3) { border-bottom: 0; }
.attribute-grid em, .attribute-grid b { display: block; }
.attribute-grid em { color: #5e674d; font-size: 9px; font-style: normal; }
.attribute-grid b { margin-top: 2px; font-size: 13px; }
.attribute-grid.is-resist b { color: #3f7781; }
.rule-note { margin: 0; padding: 10px; border: 2px solid #7b623a; background: #fff0b9; color: #655234; font-size: 9px; line-height: 1.65; }

.battle-screen { background: #d8e7ad; }
.battle-screen::after { background: rgba(255, 238, 170, .1); }
.battle-screen > header { border-bottom: 3px solid #344b36; background: #ffedb5; }
.battle-label { border: 2px solid #344b36; background: #fff0b9; }
.hp-track { height: 10px; border: 2px solid #344b36; padding: 1px; background: #6d6848; }
.battle-callout { border: 3px solid #f4e3a1; background: #304637; box-shadow: 3px 3px 0 rgba(31, 49, 35, .58); }
.battle-callout.is-critical { border-color: #ffe16b; background: #a54932; color: #fff2a7; transform: translate(-50%, -50%) scale(1.12); }
.battle-callout.is-status { background: #3f7180; }
.battle-result { border: 3px solid #6b4d28; background: #fff0b7; box-shadow: 7px 7px 0 rgba(42, 53, 34, .48); }
.battle-result button { border: 3px solid #4b3025; background: #d66545; box-shadow: inset 0 3px 0 #f39a63, 0 4px 0 #753d30; }
.battle-unit.is-dodge > img { animation: pixel-dodge .28s steps(2, end); }
@keyframes pixel-dodge { 50% { transform: translateX(-24px); opacity: .45; } }

.chest-control-row {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 10px;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 8px;
  align-items: end;
}
.chest-control-row .open-chest-button {
  position: static;
  width: 100%;
  transform: none;
}
.chest-control-row .open-chest-button:active { transform: translateY(3px); }
.auto-settings-button {
  height: 45px;
  display: grid;
  place-items: center;
  gap: 0;
  padding: 4px 2px;
  border: 3px solid #344b36;
  background: #d8e5a4;
  color: #344b36;
  box-shadow: inset 0 3px 0 #f5f2c7, 0 5px 0 #566a47;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}
.auto-settings-button i { font-size: 17px; }
.auto-settings-button:active { transform: translateY(3px); box-shadow: inset 0 3px 0 #f5f2c7, 0 2px 0 #566a47; }
.auto-settings-button:disabled { filter: grayscale(.7); opacity: .55; }
.chest-stage.is-auto-opening .chest-glow { animation: auto-glow .26s steps(2, end) infinite; }
@keyframes auto-glow { 50% { background: rgba(255, 218, 93, .65); transform: scale(1.08); } }

.automation-panel { display: grid; gap: 7px; }
.automation-intro {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 3px solid #344b36;
  background: #ffdf7d;
  box-shadow: 3px 3px 0 #80602f;
}
.automation-intro > i { font-size: 32px; color: #a14d32; }
.automation-intro h3, .automation-panel article h3 { margin: 0; font-size: 12px; }
.automation-intro p, .automation-panel article header small { margin: 2px 0 0; color: #6b6648; font-size: 8px; }
.automation-panel article { border: 2px solid #596448; background: #eadbaa; box-shadow: 3px 3px 0 #b3a36f; }
.automation-panel article > header { padding: 6px 9px; border-bottom: 2px solid #596448; background: #d6e3a1; }
.pixel-segments { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 6px; }
.pixel-segments button {
  min-height: 42px;
  border: 2px solid #596448;
  background: #f3e6b8;
  box-shadow: 2px 2px 0 #9e9165;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}
.pixel-segments button small { color: #6d7156; font-size: 7px; }
.pixel-segments button.is-active { border-color: #344b36; background: #6e964c; color: white; box-shadow: inset 0 -3px 0 #46653b, 2px 2px 0 #344b36; }
.pixel-segments button.is-active small { color: #eff5d1; }
.stop-rules > label {
  min-height: 38px;
  display: grid;
  grid-template-columns: 1fr 140px;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border-bottom: 1px solid #8e8a63;
  font-size: 9px;
}
.stop-rules select {
  width: 100%;
  height: 29px;
  padding: 0 6px;
  border: 2px solid #596448;
  border-radius: 0;
  background: #fff1be;
  color: #344b36;
  font: inherit;
}
.pixel-toggle {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 0;
  background: #f0dfaa;
  text-align: left;
  font-size: 9px;
  cursor: pointer;
}
.pixel-toggle i { font-size: 18px; }
.pixel-toggle.is-active { background: #d6e4a2; color: #315c36; }
.automation-preview { display: flex; justify-content: space-between; padding: 8px 10px; border: 2px solid #596448; background: #fff0b9; font-size: 9px; }
.automation-panel > .sheet-primary { width: 100%; }
.auto-stop-note { margin: 9px 0 0; padding: 7px; border: 2px solid #7f5b2d; background: #ffdf7d; color: #674820; font-size: 9px; text-align: center; }

.idle-reward-card {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 9px;
  border: 2px solid #596448;
  background: #e8d9aa;
  box-shadow: 3px 3px 0 #b3a36f;
}
.idle-reward-card.is-ready { border: 3px solid #875a2b; background: #ffe082; }
.idle-reward-card > i { font-size: 24px; color: #617d48; }
.idle-reward-card h3 { margin: 0; font-size: 11px; }
.idle-reward-card p { margin: 2px 0 0; color: #6b6648; font-size: 8px; }
.idle-reward-card button {
  min-width: 68px;
  height: 34px;
  border: 2px solid #344b36;
  background: #668c48;
  color: white;
  box-shadow: 2px 2px 0 #344b36;
  font-size: 9px;
  font-weight: 800;
}
.idle-reward-card button:disabled { background: #aaa37d; color: #e8dfbf; }

.mode-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 9px; }
.mode-shortcuts.is-three { grid-template-columns: repeat(3, 1fr); }
.mode-shortcuts.is-three button { min-width: 0; gap: 5px; padding: 6px; }
.mode-shortcuts.is-three i { font-size: 20px; }
.mode-shortcuts.is-four { grid-template-columns: 1fr 1fr; }
.mode-shortcuts button {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 2px solid #596448;
  border-radius: 0;
  background: #ffe18a;
  box-shadow: 3px 3px 0 #9a7740;
  text-align: left;
  cursor: pointer;
}
.mode-shortcuts button:last-child { background: #d6e4a2; box-shadow: 3px 3px 0 #718059; }
.mode-shortcuts button:disabled { filter: grayscale(.7); opacity: .55; cursor: default; }
.mode-shortcuts i { font-size: 24px; color: #8c5430; }
.mode-shortcuts span, .mode-shortcuts small { display: block; }
.mode-shortcuts span { font-size: 10px; font-weight: 800; }
.mode-shortcuts small { margin-top: 2px; color: #6b6648; font-size: 7px; font-weight: 400; }
.arena-disclaimer { margin: 0 0 8px; padding: 7px 8px; border: 2px solid #655947; background: #d8c69f; color: #5c5247; font-size: 8px; line-height: 1.45; box-shadow: 2px 2px 0 rgba(70, 57, 43, .24); }
.stage-card.is-boss { border-color: #895128; background: #ffe299; box-shadow: 3px 3px 0 #895128; }
.boss-tag { display: inline-block; margin-left: 3px; padding: 1px 3px; border: 1px solid #6a3e29; background: #c65439; color: white; font-size: 7px; vertical-align: 1px; }

.locked-system { padding: 44px 18px; border: 3px solid #596448; background: #eadbaa; text-align: center; box-shadow: 4px 4px 0 #b3a36f; }
.locked-system i { font-size: 42px; color: #7a7b59; }
.locked-system h3 { margin: 8px 0 3px; font-size: 15px; }
.locked-system p { margin: 0; color: #6b6648; font-size: 9px; }

.trial-panel { display: grid; gap: 9px; }
.trial-summary { display: flex; justify-content: space-between; padding: 8px 10px; border: 2px solid #596448; background: #d6e4a2; box-shadow: 3px 3px 0 #718059; font-size: 9px; }
.trial-summary b { font-size: 12px; }
.trial-hero { padding: 17px 13px; border: 3px solid #674a2c; background: #ffdf78; box-shadow: 4px 4px 0 #8f632e; text-align: center; }
.trial-hero i { font-size: 38px; color: #a55131; }
.trial-hero h3 { margin: 5px 0 3px; font-size: 14px; }
.trial-hero p { max-width: 270px; margin: 0 auto; color: #6d5c38; font-size: 8px; line-height: 1.5; }
.trial-records { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.trial-records span { padding: 9px 4px; border: 2px solid #596448; background: #eadbaa; text-align: center; box-shadow: 2px 2px 0 #a59a6c; }
.trial-records small, .trial-records b { display: block; }
.trial-records small { color: #6b6648; font-size: 7px; }
.trial-records b { margin-top: 2px; font-size: 13px; }
.trial-buff-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.trial-buff-slot { min-height: 53px; display: grid; place-items: center; align-content: center; padding: 3px 1px; border: 2px dashed #8d8b66; background: #e5d9ac; color: #8a8765; text-align: center; }
.trial-buff-slot.is-filled { border-style: solid; border-color: #526442; background: #d4e39e; color: #315c36; box-shadow: 2px 2px 0 #718059; }
.trial-buff-slot i { font-size: 16px; }
.trial-buff-slot b { font-size: 7px; }
.trial-buff-slot small { font-size: 7px; }
.trial-slot-upgrade { min-height: 39px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 2px solid #596448; background: #fff0b9; box-shadow: 2px 2px 0 #a59a6c; font-size: 9px; font-weight: 800; }
.trial-slot-upgrade:disabled { opacity: .55; }
.trial-choice-title { padding: 10px; border: 2px solid #7c5a2d; background: #ffe18a; text-align: center; }
.trial-choice-title small { color: #8d5e2b; font-size: 8px; }
.trial-choice-title h3 { margin: 2px 0; font-size: 14px; }
.trial-choice-title p { margin: 0; color: #6b6648; font-size: 8px; }
.trial-reward-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.trial-reward-grid button { min-height: 137px; display: grid; place-items: center; align-content: center; gap: 5px; padding: 8px 5px; border: 2px solid #596448; background: #eadbaa; box-shadow: 3px 3px 0 #a59a6c; cursor: pointer; }
.trial-reward-grid button:hover, .trial-reward-grid button:focus-visible { background: #ffe18a; border-color: #754d28; }
.trial-reward-grid i { font-size: 28px; color: #668c48; }
.trial-reward-grid strong { font-size: 11px; }
.trial-reward-grid small { min-height: 30px; color: #6b6648; font-size: 7px; line-height: 1.4; }
.trial-reward-grid em { padding: 2px 4px; background: #d5e49e; color: #315c36; font-size: 7px; font-style: normal; }
.trial-enemy { display: grid; grid-template-columns: 94px 1fr; align-items: center; gap: 10px; padding: 10px; border: 3px solid #596448; background: #eadbaa; box-shadow: 4px 4px 0 #a59a6c; }
.trial-enemy.is-boss { border-color: #875129; background: #ffe18a; box-shadow: 4px 4px 0 #875129; }
.trial-enemy img { width: 94px; height: 94px; object-fit: contain; image-rendering: pixelated; }
.trial-enemy small { color: #8b5a2c; font-size: 8px; }
.trial-enemy h3 { margin: 2px 0; font-size: 15px; }
.trial-enemy p { margin: 0; color: #6b6648; font-size: 8px; }
.trial-enemy em { display: block; margin-top: 4px; color: #8a4f37; font-size: 8px; font-style: normal; }
.trial-actions { display: grid; grid-template-columns: 94px 1fr; gap: 7px; }
.trial-actions > button:first-child { border: 2px solid #596448; background: #ded3ac; box-shadow: 3px 3px 0 #8d845f; font-size: 9px; }
.trial-actions .sheet-primary { margin: 0; }
.trial-stats-preview { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid #596448; background: #fff0b9; }
.trial-stats-preview span { padding: 7px 2px; border-right: 1px solid #8d8b66; text-align: center; font-size: 8px; }
.trial-stats-preview span:last-child { border: 0; }
.trial-stats-preview b { display: block; margin-top: 2px; font-size: 11px; }

.arena-panel { display: grid; gap: 10px; }
.arena-rating { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 3px solid #704d2d; background: #ffe080; box-shadow: 4px 4px 0 #8f632e; }
.arena-rating > i { font-size: 42px; color: #b05a31; }
.arena-rating small, .arena-rating strong, .arena-rating p { display: block; }
.arena-rating small { font-size: 8px; color: #7b633b; }
.arena-rating strong { font-size: 24px; line-height: 1; }
.arena-rating p { margin: 3px 0 0; font-size: 8px; }
.arena-opponents { display: grid; gap: 7px; }
.arena-opponents article { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 8px; padding: 8px; border: 2px solid #596448; background: #eadbaa; box-shadow: 3px 3px 0 #a59a6c; }
.arena-opponents img { width: 58px; height: 58px; object-fit: contain; image-rendering: pixelated; }
.arena-opponents h3 { margin: 0; font-size: 11px; }
.arena-opponents p { margin: 2px 0; color: #6b6648; font-size: 8px; }
.arena-opponents small { color: #8a4f37; font-size: 7px; }
.arena-opponents button { min-width: 54px; height: 34px; border: 2px solid #344b36; background: #668c48; color: white; box-shadow: 2px 2px 0 #344b36; font-size: 9px; font-weight: 800; }
.arena-history { border: 2px solid #596448; background: #f1e2b0; }
.arena-history h3 { margin: 0; padding: 8px 9px; border-bottom: 2px solid #596448; background: #d6e4a2; font-size: 11px; }
.arena-history > span { display: grid; grid-template-columns: 25px 1fr 36px; gap: 7px; padding: 7px 9px; border-bottom: 1px solid #a49d72; font-size: 9px; }
.arena-history > span:last-child { border: 0; }
.arena-history span b { color: #49814a; }
.arena-history span.loss b { color: #b04e3c; }
.arena-history span em { font-style: normal; }
.arena-history > p { margin: 0; padding: 16px; color: #6b6648; font-size: 9px; text-align: center; }

.fishing-panel { display: grid; gap: 9px; }
.fishing-summary { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid #57483a; background: #d3b776; box-shadow: 3px 3px 0 #6f5740; }
.fishing-summary span { padding: 7px 2px; border-right: 1px solid #8d734f; text-align: center; }
.fishing-summary span:last-child { border: 0; }
.fishing-summary small, .fishing-summary b { display: block; }
.fishing-summary small { color: #725a3e; font-size: 7px; }
.fishing-summary b { margin-top: 2px; font-size: 12px; }
.fishing-pond { position: relative; height: 196px; overflow: hidden; border: 3px solid #3c342e; background: #766650; box-shadow: inset 0 -55px 0 #34383a, inset 0 -83px 0 #4b4941, 4px 4px 0 #342d29; }
.fishing-pond::before, .fishing-pond::after { content: ""; position: absolute; left: 0; right: 0; height: 9px; background: repeating-linear-gradient(135deg, #d08b38 0 9px, #3d3630 9px 18px); }
.fishing-pond::before { top: 112px; }
.fishing-pond::after { top: 164px; transform: translateX(13px); opacity: .72; }
.pond-sun { position: absolute; top: 12px; right: 22px; width: 24px; height: 34px; border: 4px solid #3f352e; background: #be5b3b; box-shadow: -9px 9px 0 #655342, 6px 18px 0 #d5a345; }
.pond-reeds { position: absolute; left: 4px; bottom: 43px; width: 61px; height: 46px; border: 6px solid #443a32; background: #8d633b; box-shadow: 14px -12px 0 #62513e, 34px 5px 0 #9b7849; transform: none; }
.pond-explorer { position: absolute; z-index: 3; left: 4px; bottom: 21px; width: 104px; height: 104px; filter: drop-shadow(5px 5px 0 rgba(38,31,27,.28)); }
.fishing-line { position: absolute; z-index: 2; left: 83px; top: 49px; width: 109px; height: 72px; border-top: 3px solid #282b2c; border-right: 3px solid #282b2c; transform: skewX(35deg); transform-origin: left top; }
.fishing-bobber { position: absolute; z-index: 3; left: 219px; top: 108px; width: 16px; height: 18px; border: 3px solid #2f2c2a; background: #bd593e; box-shadow: inset 0 -5px 0 #6e7774, 0 4px 0 rgba(31,27,25,.3); animation: bobber-float 1.1s steps(2, end) infinite; }
.fishing-pond.is-biting .fishing-bobber { animation: bobber-bite .28s steps(2, end) infinite; }
.pond-callout { position: absolute; z-index: 5; right: 13px; top: 14px; padding: 6px 8px; border: 2px solid #44372f; background: #e7c77f; box-shadow: 3px 3px 0 #65513f; font-size: 10px; font-weight: 800; }
.fishing-pond.is-biting .pond-callout { background: #e16d49; color: #fff3bf; }
@keyframes bobber-float { 50% { transform: translateY(3px); } }
@keyframes bobber-bite { 50% { transform: translateY(11px) rotate(9deg); } }
.fishing-action { min-height: 52px; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: 1fr 1fr; align-items: center; padding: 6px 11px; border: 3px solid #49372e; background: #b35d3d; color: white; box-shadow: 4px 4px 0 #49372e; text-align: left; cursor: pointer; }
.fishing-action i { grid-row: 1 / -1; font-size: 25px; }
.fishing-action span { align-self: end; font-size: 13px; font-weight: 800; }
.fishing-action small { align-self: start; color: #ffe8b0; font-size: 7px; }
.fishing-action.is-urgent { border-color: #7c3c29; background: #e66f4e; box-shadow: 4px 4px 0 #7c3c29; animation: fishing-urgent .45s steps(2, end) infinite; }
.fishing-action:disabled { filter: grayscale(.75); opacity: .58; cursor: default; }
@keyframes fishing-urgent { 50% { transform: translateY(-2px); background: #ffca54; color: #573a27; } }
.fishing-result { min-height: 248px; display: grid; place-items: center; align-content: center; gap: 4px; padding: 12px; border: 3px solid #57483a; background: #e5cf99; box-shadow: 4px 4px 0 #755d44; text-align: center; }
.fishing-result > img { width: 112px; height: 112px; object-fit: contain; image-rendering: pixelated; }
.fishing-result > i { font-size: 55px; color: #4f9794; }
.fishing-result h3 { margin: 0; font-size: 15px; }
.fishing-result p { max-width: 260px; margin: 2px auto 5px; color: #6a5847; font-size: 8px; }
.fishing-result > div { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.fishing-result > div span { padding: 3px 5px; border: 1px solid #6b7658; background: #fff1b9; font-size: 7px; }
.fishing-result button { min-width: 142px; height: 37px; margin-top: 5px; border: 2px solid #31543e; background: #6f9a4d; color: white; box-shadow: 2px 2px 0 #31543e; font-size: 9px; font-weight: 800; }
.fishing-result.is-miss { background: #cfc4ad; }
.fish-book-title { display: flex; align-items: end; justify-content: space-between; padding: 6px 8px; border-bottom: 2px solid #596448; }
.fish-book-title small { color: #6b6648; font-size: 7px; }
.fish-book-title h3 { margin: 1px 0 0; font-size: 12px; }
.fish-book-title > span { padding: 3px 5px; background: #d6e4a2; font-size: 8px; }
.fish-collection { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.fish-card { position: relative; min-height: 102px; display: grid; grid-template-columns: 66px 1fr; align-items: center; gap: 4px; padding: 7px; border: 2px solid #596448; background: #e9ddb1; box-shadow: 3px 3px 0 #a59a6c; opacity: .58; }
.fish-card.is-caught { background: #dce9ad; opacity: 1; }
.fish-card img { width: 66px; height: 66px; object-fit: contain; image-rendering: pixelated; }
.fish-card:not(.is-caught) img { filter: grayscale(1) brightness(.55); opacity: .38; }
.fish-card h3 { margin: 0; font-size: 9px; }
.fish-card small { display: block; margin-top: 3px; color: #6b6648; font-size: 7px; line-height: 1.35; }
.fish-card > em { position: absolute; right: 4px; top: 4px; padding: 2px 3px; color: white; font-size: 6px; font-style: normal; }
.fish-collection.is-compact .fish-card { min-height: 78px; grid-template-columns: 50px 1fr; padding: 5px; }
.fish-collection.is-compact .fish-card img { width: 50px; height: 50px; }

.gems-panel { display: grid; gap: 9px; }
.gems-summary { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid #55483b; background: #d3b879; box-shadow: 3px 3px 0 #725943; }
.gems-summary span { padding: 7px 2px; border-right: 1px solid #8b7452; text-align: center; }
.gems-summary span:last-child { border: 0; }
.gems-summary small, .gems-summary b { display: block; }
.gems-summary small { color: #715a40; font-size: 7px; }
.gems-summary b { margin-top: 2px; font-size: 12px; }
.gem-result { min-height: 31px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 2px solid #596448; background: #eadbaa; font-size: 8px; }
.gem-result.is-clear { border-color: #7d5b29; background: #ffe17d; color: #754928; }
.gem-result i { font-size: 17px; }
.gem-board { width: min(100%, 304px); aspect-ratio: 1; justify-self: center; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; padding: 8px; border: 4px solid #343739; background: #5b5c53; box-shadow: 5px 5px 0 #2b2d2e, inset 0 0 0 3px #8b8367; }
.gem-cell { position: relative; min-width: 0; padding: 0; border: 2px solid #4d5049; background: #a9a07f; box-shadow: inset 3px 3px 0 rgba(239,224,178,.38), inset -3px -3px 0 rgba(45,47,43,.24); cursor: pointer; }
.gem-cell.is-anchor { border-color: #f2d477; box-shadow: inset 0 0 0 3px #cf8d3e, 0 0 0 2px #3b3e3a; }
.gem-cell:not(.is-empty) { border-color: #3c493e; }
.gem-cell:not(.is-empty)::before, .gem-piece-shape i:not(.is-blank)::before { content: ""; position: absolute; inset: 20%; transform: none; border: 2px solid rgba(43,49,45,.68); box-shadow: inset 2px 2px 0 rgba(255,245,205,.45), 2px 2px 0 rgba(38,42,39,.24); }
.gem-sage, .gem-sage::before { background: #78a653 !important; }
.gem-aqua, .gem-aqua::before { background: #55b6b2 !important; }
.gem-honey, .gem-honey::before { background: #e0ad3f !important; }
.gem-coral, .gem-coral::before { background: #df7159 !important; }
.gem-piece-title { display: flex; align-items: end; justify-content: space-between; padding: 5px 7px; border-bottom: 2px solid #596448; }
.gem-piece-title small { color: #6b6648; font-size: 7px; }
.gem-piece-title h3 { margin: 1px 0 0; font-size: 11px; }
.gem-piece-title > span { color: #6b6648; font-size: 7px; }
.gem-piece-tray { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gem-piece-tray > button { min-height: 83px; display: grid; place-items: center; align-content: center; gap: 4px; border: 2px solid #596448; background: #e9ddb1; box-shadow: 3px 3px 0 #a59a6c; cursor: pointer; }
.gem-piece-tray > button.is-selected { border: 3px solid #7d502c; background: #ffe17d; box-shadow: 3px 3px 0 #7d502c; }
.gem-piece-tray > button:disabled { opacity: .45; cursor: default; }
.gem-piece-tray small { font-size: 7px; }
.gem-piece-shape { position: relative; display: grid; grid-template-columns: repeat(var(--piece-width), 13px); grid-template-rows: repeat(var(--piece-height), 13px); gap: 2px; }
.gem-piece-shape i { position: relative; width: 13px; height: 13px; border: 1px solid #394b3f; }
.gem-piece-shape i.is-blank { border-color: transparent; background: transparent; }
.gem-piece-shape i:not(.is-blank)::before { inset: 22%; border-width: 1px; box-shadow: inset 1px 1px 0 rgba(255,255,230,.55); }
.gem-piece-used { display: grid; place-items: center; color: #766f5c; font-size: 7px; }
.gem-piece-used i { font-size: 18px; }
.gem-sigil { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 7px; padding: 8px; border: 3px solid #4e4439; background: #c9b68d; box-shadow: 4px 4px 0 #756249; }
.gem-sigil > i { font-size: 31px; color: #3f7f7a; }
.gem-sigil small { color: #6c5e4d; font-size: 7px; }
.gem-sigil h3 { margin: 1px 0; font-size: 11px; }
.gem-sigil p { margin: 0; color: #6c5e4d; font-size: 7px; line-height: 1.35; }
.gem-sigil button { min-width: 68px; height: 34px; border: 2px solid #334d49; background: #4f8780; color: white; box-shadow: 2px 2px 0 #334d49; font-size: 8px; font-weight: 800; }
.gem-sigil button:disabled { filter: grayscale(.75); opacity: .55; }

@media (max-width: 365px) {
  .mode-shortcuts.is-three { grid-template-columns: 1fr 1fr; }
  .mode-shortcuts.is-three button:last-child { grid-column: 1 / -1; }
  .fish-card { grid-template-columns: 52px 1fr; }
  .fish-card img { width: 52px; height: 52px; }
}

.battle-screen.is-boss .enemy-unit > img { width: 174px; height: 174px; }
.battle-screen.is-boss .battle-label { border-color: #875129; background: #ffe18a; }
.battle-screen.is-boss .battle-callout { border-color: #ffdc68; }

@media (max-height: 760px) {
  .power-plaque > em { display: none; }
  .task-ribbon { left: 12px; right: 12px; }
  .chest-control-row { left: 12px; right: 12px; bottom: 6px; }
  .auto-settings-button { height: 40px; }
}

/* V9 — 区域、角色与装备系列。 */
.player-badge {
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.player-badge:active { transform: translateY(2px); }
.hero-sprite,
.pond-explorer,
.battle-paper-doll,
.battle-unit > img {
  object-position: center bottom;
  transform-origin: center bottom;
}

.region-list { display: grid; gap: 14px; }
.region-block { display: grid; gap: 7px; }
.region-block.is-locked .stage-list { filter: saturate(.65); }
.region-banner {
  position: relative;
  min-height: 104px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  overflow: hidden;
  padding: 12px;
  border: 3px solid #344b36;
  background: #506442 var(--region-map) center 47% / cover no-repeat;
  color: #fff9d8;
  box-shadow: 4px 4px 0 #718059;
  text-shadow: 2px 2px 0 #263a2c;
}
.region-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(34,53,40,.08), rgba(34,53,40,.82));
}
.region-banner > * { position: relative; z-index: 1; }
.region-banner small { font-size: 7px; letter-spacing: .16em; }
.region-banner h3 { margin: 2px 0; font-size: 17px; }
.region-banner p { max-width: 220px; margin: 0; font-size: 8px; line-height: 1.45; }
.region-banner > span { flex: none; padding: 4px 6px; border: 2px solid #fff0b9; background: rgba(48,70,55,.82); font-size: 8px; }

.character-roster { display: grid; gap: 10px; }
.roster-intro {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 3px solid #344b36;
  background: #ffdf7d;
  box-shadow: 3px 3px 0 #80602f;
}
.roster-intro > i { font-size: 34px; color: #a14d32; }
.roster-intro small { color: #765b34; font-size: 7px; }
.roster-intro h3 { margin: 1px 0; font-size: 13px; }
.roster-intro p { margin: 0; color: #6b6648; font-size: 8px; }
.character-grid { display: grid; gap: 8px; }
.character-card {
  display: grid;
  grid-template-columns: 92px 1fr 58px;
  align-items: center;
  gap: 8px;
  min-height: 126px;
  padding: 8px;
  border: 2px solid #596448;
  background: #eadbaa;
  box-shadow: 3px 3px 0 #b3a36f;
}
.character-card.is-active { border: 3px solid #895a2b; background: #ffe69a; }
.character-portrait { position: relative; width: 92px; height: 104px; background: #d6e4a2; }
.roster-paper-doll { width: 100%; height: 100%; }
.base-frame-peek { position: absolute; right: 2px; bottom: 2px; z-index: 12; width: 31px; height: 31px; object-fit: contain; image-rendering: pixelated; border: 2px solid #5b4b39; background: #e7d4ae; box-shadow: 2px 2px 0 rgba(67, 52, 39, .4); }
.character-portrait em { position: absolute; left: 3px; top: 3px; padding: 2px 4px; border: 1px solid #344b36; background: #668c48; color: white; font-size: 7px; font-style: normal; }
.character-card small { color: #6b6648; font-size: 7px; }
.character-card h3 { margin: 1px 0 3px; font-size: 14px; }
.character-card p { margin: 0 0 5px; color: #5f6950; font-size: 8px; line-height: 1.45; }
.character-card span, .character-card strong { display: block; font-size: 7px; line-height: 1.5; }
.character-card span { color: #3f7180; }
.character-card strong { margin-top: 3px; color: #76522d; }
.character-card > button {
  height: 36px;
  border: 2px solid #344b36;
  background: #668c48;
  color: white;
  box-shadow: 2px 2px 0 #344b36;
  font-size: 8px;
  font-weight: 800;
}
.character-card > button:disabled { background: #aaa37d; color: #eee3bd; }
.series-note { display: block; margin-top: 10px; color: #6b6648; font-size: 8px; }

@media (max-width: 365px) {
  .character-card { grid-template-columns: 78px 1fr 52px; gap: 6px; padding: 6px; }
  .character-portrait { width: 78px; height: 96px; }
  .region-banner p { max-width: 190px; }
}

/* V11 — Wasteland Salvager identity migration. */
:root {
  --ink: #342f2b;
  --muted: #746b61;
  --cream: #f4e6c8;
  --paper: #e7d4ae;
  --paper-strong: #c8ad7f;
  --sage: #657c72;
  --sage-dark: #3d5b58;
  --aqua: #49b6ad;
  --honey: #d89a47;
  --coral: #c65f3f;
  --line: rgba(67, 54, 43, .34);
}

html, body, body { background: #2b2928; }
.game-shell { background: #4a4037; box-shadow: 0 0 50px rgba(15, 13, 12, .55); }
.world-backdrop {
  background-image: url("../assets/monster-trail/world/handdrawn-repair-bay.png");
  background-position: center 52%;
  filter: saturate(.9) contrast(1.03) brightness(.82);
}
.world-backdrop::after { background: linear-gradient(rgba(38, 32, 28, .06), rgba(38, 32, 28, .34)); }
.status-bar { background: rgba(231, 212, 174, .96); border-color: #51463c; }
.hero-board {
  border-color: #51463c;
  border-radius: 2px;
  background: rgba(231, 212, 174, .9);
  box-shadow: 0 5px 0 rgba(36, 28, 23, .55);
}
.power-plaque, .gear-slot, .task-ribbon, .chest-level, .core-stats, .currency-row > span, .currency-row button {
  border-radius: 2px;
}
.power-plaque { border-color: #7c5537; background: #ebc681; box-shadow: 3px 3px 0 #6b4630; }
.gear-slot { border-color: #665647; background: #d7c39c; box-shadow: inset 0 -4px 0 rgba(60, 45, 34, .18), 3px 3px 0 #55473b; }
.gear-slot.is-equipped { border-color: #bd6c3e; background: #efd19a; }
.slot-head { top: 58px; left: 19px; }
.slot-left-arm { top: 122px; left: 19px; }
.slot-legs { top: 186px; left: 19px; }
.slot-chest { top: 58px; right: 19px; }
.slot-right-arm { top: 122px; right: 19px; }
.slot-back { top: 186px; right: 19px; }
.scan-ring {
  position: absolute;
  width: 166px;
  height: 166px;
  border: 6px dashed rgba(53, 155, 150, .4);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(214, 246, 230, .5);
  animation: scanner-turn 10s steps(16, end) infinite;
}
@keyframes scanner-turn { to { transform: rotate(360deg); } }
.paper-layer.layer-back { z-index: 1; transform: none; }
.paper-layer.layer-legs { z-index: 3; transform: none; }
.paper-layer.layer-chest { z-index: 4; transform: none; }
.paper-layer.layer-leftArm { z-index: 5; transform: translate(-12%, 2%); }
.paper-layer.layer-rightArm { z-index: 6; transform: translate(12%, 2%); }
.paper-layer.layer-head { z-index: 7; transform: none; }
.paper-layer.layer-structure { z-index: 8; transform: none; pointer-events: none; }
.paper-layer.rarity-legendary { filter: drop-shadow(1px 0 #d78b35) drop-shadow(-1px 0 #d78b35); }
.paper-layer.rarity-mythic { filter: drop-shadow(1px 0 #ef6a50) drop-shadow(-1px 0 #ef6a50) drop-shadow(0 -1px #ffd06c); }
.partner-peek { display: none; }
#partner-battle-sprite { display: none; }
.chest-glow { background: rgba(43, 218, 202, .25); }
.open-chest-button, .sheet-primary, .equip-button { background: #b95838; box-shadow: 3px 3px 0 #6d382a; }
.bottom-nav, .sheet-dialog, .loot-card { background: #e7d4ae; }
.bottom-nav button.is-active { color: #9e452f; }
.tradeoff-strip {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 8px;
  margin: 7px 0;
  padding: 7px 8px;
  border: 2px solid #51463c;
  background: #dac49b;
  box-shadow: 3px 3px 0 #8f795a;
}
.tradeoff-strip strong { color: #a74730; font-size: 12px; }
.tradeoff-strip span { font-size: 9px; text-align: right; }
.tradeoff-strip em { grid-column: 1 / -1; color: #6f6257; font-size: 7px; font-style: normal; }
.decision-rationale { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 7px; margin: 0 0 8px; padding: 6px 8px; border: 2px solid #596448; background: #efe0b6; box-shadow: 2px 2px 0 #9a8765; }
.decision-rationale > i { color: #9e452f; font-size: 20px; }
.decision-rationale div { display: grid; gap: 2px; }
.decision-rationale strong { font-size: 9px; }
.decision-rationale small { color: #685e55; font-size: 7px; line-height: 1.35; }
.decision-rationale.is-gain { border-color: #47694f; background: #d8e4b4; }
.decision-rationale.is-loss { border-color: #8f4939; background: #edc0a1; }
.decision-rationale.is-trade { border-color: #8b6733; background: #f0d28d; }
.item-identity { display: flex; justify-content: space-between; gap: 3px; margin: 4px 0; font-size: 7px; color: #675342; }
.archive-summary { display: grid; gap: 3px; margin-bottom: 8px; padding: 8px; border: 2px solid #51463c; background: #d6bd8e; }
.archive-summary strong { color: #8b402e; font-size: 12px; }
.archive-summary span { font-size: 9px; }
.archive-summary small { color: #685e55; font-size: 7px; }
.legendary-mark { display: block; margin: 5px 0; padding: 5px 6px; border: 2px solid #8d542b; background: #e7ba68; color: #683822; font-size: 8px; line-height: 1.45; box-shadow: 2px 2px 0 rgba(89, 50, 29, .28); }
.legendary-mark i { margin-right: 4px; color: #b54b2e; }
.legendary-archive { display: grid; gap: 5px; margin-top: 10px; }
.legendary-archive > header { display: flex; align-items: center; gap: 7px; padding: 8px; border: 2px solid #6f4831; background: #c58a46; color: #fff1c2; box-shadow: 3px 3px 0 #68442f; }
.legendary-archive > header > i { font-size: 22px; }
.legendary-archive h3 { margin: 1px 0 0; font-size: 12px; }
.legendary-archive small { font-size: 7px; }
.legendary-entry { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 7px; padding: 7px; border: 2px solid #615649; background: #cfbd9b; opacity: .72; }
.legendary-entry.is-found { border-color: #9c592f; background: #e5bf75; opacity: 1; }
.legendary-entry > i { color: #8f5431; font-size: 18px; text-align: center; }
.legendary-entry strong, .legendary-entry small { display: block; }
.legendary-entry strong { font-size: 9px; }
.legendary-entry small { margin-top: 2px; color: #66584a; line-height: 1.35; }
.legendary-entry > em { color: #77543a; font-size: 7px; }
.loot-pool-banner { display: flex; gap: 8px; margin: 8px 0; padding: 8px; border: 2px solid #51463c; background: #d6bd8e; box-shadow: 3px 3px 0 #8f795a; }
.loot-pool-banner > i { color: #9e452f; font-size: 24px; }
.loot-pool-banner div { display: grid; gap: 2px; }
.loot-pool-banner small, .loot-pool-banner p { margin: 0; color: #685e55; font-size: 7px; }
.loot-pool-banner strong { font-size: 10px; }

@media (max-height: 760px) {
  .scan-ring { width: 140px; height: 140px; }
  .slot-head, .slot-chest { top: 52px; }
  .slot-left-arm, .slot-right-arm { top: 106px; }
  .slot-legs, .slot-back { top: 160px; }
}

/* V11.1 — Six explicit Boss Build Tests. */
.stage-card.is-elite { border-color: #56666a; background: #d9d3bd; box-shadow: 3px 3px 0 #687276; }
.elite-tag { display: inline-block; margin-left: 3px; padding: 1px 3px; border: 1px solid #34474d; background: #617c82; color: #fff; font-size: 7px; vertical-align: 1px; }
.boss-test-intel { display: grid; grid-template-columns: auto 1fr; gap: 2px 7px; margin-top: 6px; padding: 5px 6px; border: 2px solid #6d382a; background: #f3c477; }
.boss-test-intel b { color: #8f3326; font-size: 9px; }
.boss-test-intel em { justify-self: end; color: #594b40; font-size: 7px; font-style: normal; }
.boss-test-intel i { grid-column: 1 / -1; color: #675342; font-size: 7px; font-style: normal; line-height: 1.35; }
.boss-test-banner { position: absolute; z-index: 6; left: 12px; right: 12px; top: 72px; min-height: 38px; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 6px; padding: 5px 8px; border: 3px solid #6d382a; background: rgba(239, 202, 130, .96); box-shadow: 3px 3px 0 rgba(55, 39, 31, .65); }
.boss-test-banner.is-hidden { display: none; }
.boss-test-banner > i { color: #9e452f; font-size: 24px; }
.boss-test-banner span { display: grid; }
.boss-test-banner small { color: #75604f; font-size: 6px; }
.boss-test-banner strong { color: #49382e; font-size: 11px; }
.boss-test-banner > em { color: #8f3326; font-size: 7px; font-style: normal; text-align: right; }
.battle-callout.is-hazard { border-color: #ffb24f; background: #9d3f31; color: #fff1b8; }
.battle-callout.is-legendary { border-color: #f4ca69; background: #5a3b5d; color: #fff0ae; box-shadow: 0 0 0 2px #2b2032, 4px 4px 0 rgba(0, 0, 0, .45); }
.legendary-behavior { display: grid; grid-template-columns: 28px 1fr; align-items: start; gap: 7px; margin: 7px 0; padding: 7px; color: #f3dfae; border: 2px solid #77533d; background: #3e3029; box-shadow: 2px 2px 0 #211a17; }
.legendary-behavior > i { font-size: 21px; color: #ef9f5f; }
.legendary-behavior div { display: grid; }
.legendary-behavior small { color: #c9996c; font-size: 7px; }
.legendary-behavior b { font-size: 10px; }
.legendary-behavior p { margin: 2px 0 0; color: #d9c5a1; font-size: 8px; }
.stage-card.is-boss { align-items: start; }
.stage-card.is-boss > img, .stage-card.is-boss > button { margin-top: 7px; }

.build-guide { display: grid; gap: 6px; }
.attribute-panel .build-guide-card { min-height: 76px; display: grid; grid-template-columns: 30px 1fr; align-items: start; gap: 7px; padding: 7px; border: 2px solid #5c5547; background: #dfcfaa; box-shadow: 2px 2px 0 #8c795b; }
.attribute-panel .build-guide-card.is-active { border-color: #9e452f; background: #f2cd81; box-shadow: 3px 3px 0 #754131; }
.build-guide-card > i { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid #5c5547; background: #f6e6bd; color: #9e452f; font-size: 18px; }
.build-guide-card header { display: flex !important; align-items: baseline; justify-content: space-between; gap: 6px; padding: 0 !important; border: 0 !important; background: transparent !important; }
.build-guide-card header small { text-align: right; }
.build-guide-card p { margin: 4px 0 0; color: #675342; font-size: 7px; line-height: 1.35; }
.build-guide-card p b { display: inline-block; min-width: 30px; margin-right: 3px; color: #8f3326; }
.skill-grid { display: grid; gap: 5px; padding: 7px; }
.skill-card { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 6px; padding: 6px; border: 2px solid #62584a; background: #e6d5ad; }
.skill-card.is-equipped { border-color: #a34731; background: #f2cf82; }
.skill-card.is-locked { filter: grayscale(.8); opacity: .55; }
.skill-card > i { color: #a34731; font-size: 20px; }
.skill-card b, .skill-card small, .skill-card p { display: block; margin: 0; }
.skill-card b { font-size: 8px; }.skill-card small, .skill-card p, .skill-card em { color: #675b4e; font-size: 6px; font-style: normal; }
.skill-card > span { display: grid; gap: 3px; }.skill-card button { min-width: 52px; padding: 4px; border: 1px solid #55483c; background: #b95838; color: #fff; font: inherit; font-size: 6px; }.skill-card button:disabled { background: #8b806e; opacity: .65; }
.advanced-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 7px; border-bottom: 2px solid #62584a; }
.advanced-slots span { min-width: 0; display: grid; place-items: center; gap: 2px; padding: 6px 2px; border: 2px solid #766957; background: #cdbd9b; text-align: center; }.advanced-slots span.is-filled { border-color: #a34731; background: #f2cf82; }.advanced-slots i { color: #a34731; font-size: 19px; }.advanced-slots small { font-size: 6px; }.advanced-slots b { max-width: 100%; overflow: hidden; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.advanced-grid { display: grid; gap: 5px; padding: 7px; }.advanced-card { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 6px; padding: 6px; border: 2px solid #62584a; background: #e6d5ad; }.advanced-card.is-equipped { border-color: #a34731; background: #f2cf82; }.advanced-card.is-locked { filter: grayscale(.8); opacity: .55; }.advanced-card > i { color: #a34731; font-size: 20px; }.advanced-card b, .advanced-card small, .advanced-card p { display: block; margin: 0; }.advanced-card b { font-size: 8px; }.advanced-card small, .advanced-card p, .advanced-card em { color: #675b4e; font-size: 6px; font-style: normal; }.advanced-card > span { display: grid; gap: 3px; }.advanced-card button { min-width: 52px; padding: 4px; border: 1px solid #55483c; background: #b95838; color: #fff; font: inherit; font-size: 6px; }.advanced-card button:disabled { background: #8b806e; opacity: .65; }

@media (max-width: 365px) {
  .boss-test-intel { grid-template-columns: 1fr; }
  .boss-test-intel em { justify-self: start; }
  .boss-test-banner { grid-template-columns: 24px 1fr; }
  .boss-test-banner > em { grid-column: 2; text-align: left; }
}

/* V11.4 — Selected Product Design direction: repair-bay depth. */
:root {
  --bay-ink: #171819;
  --bay-panel: #292823;
  --bay-panel-raised: #37332a;
  --bay-line: #75654e;
  --bay-text: #f1dfb7;
  --bay-muted: #a99b82;
  --bay-amber: #d87538;
  --bay-amber-hot: #f09a4a;
  --bay-cyan: #4eaaa4;
}

.game-shell {
  background: var(--bay-ink);
  box-shadow: 0 0 70px rgba(0, 0, 0, .72);
}

.world-backdrop {
  background-image: url("../assets/monster-trail/world/repair-bay-camp.png");
  background-position: center 50%;
  filter: saturate(.9) contrast(1.08) brightness(.76);
}

.world-backdrop::after {
  background: rgba(9, 10, 10, .13);
  box-shadow: inset 0 0 86px rgba(0, 0, 0, .6);
}

.status-bar {
  position: relative;
  z-index: 20;
  height: 64px;
  padding: max(8px, env(safe-area-inset-top)) 10px 7px;
  color: var(--bay-text);
  border-bottom: 2px solid #5c503e;
  background: rgba(23, 23, 21, .92);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .36);
  backdrop-filter: none;
}

.player-badge { min-width: 136px; color: var(--bay-text); }
.player-badge > img {
  width: 42px;
  height: 42px;
  border: 2px solid var(--bay-line);
  border-radius: 2px;
  background: #252a27;
  box-shadow: 2px 2px 0 #0d0f0f;
}
.player-badge span { color: var(--bay-muted); }
.player-badge i { width: 88px; height: 6px; border: 1px solid #655945; border-radius: 0; background: #121413; }
.player-badge em { background: var(--bay-cyan); }
.currency-row > span,
.currency-row button {
  height: 32px;
  color: var(--bay-text);
  border: 2px solid #625541;
  border-radius: 2px;
  background: #262720;
  box-shadow: 2px 2px 0 #101110;
}
.currency-row > span { padding: 0 7px; }
.currency-row > span i:first-child { color: var(--bay-amber-hot); }
.currency-row > .authority-status {
  min-width: 47px;
  padding: 0 5px;
  gap: 3px;
  border-color: #386c68;
  color: #b9e4d8;
}
.authority-status i:first-child { color: var(--bay-cyan) !important; }
.authority-status b { font-size: 8px; letter-spacing: .08em; }
.authority-status small { font-size: 7px; color: #89bcb2; }
.authority-status.is-connecting { opacity: .72; }
.authority-status.is-pending { border-color: #b9883f; color: #ffe2a4; animation: authority-pulse .9s steps(2, end) infinite; }
.authority-status.is-pending i:first-child { color: var(--bay-amber-hot) !important; }
.authority-status.is-degraded { border-color: #9d663f; color: #ffd0a1; }
.authority-status.is-degraded i:first-child { color: #e79758 !important; }
.authority-status.is-offline { border-color: #6e5945; color: #c7b38d; }
.authority-status.is-offline i:first-child { color: #b77b52 !important; }
@keyframes authority-pulse { 50% { opacity: .58; } }

.chest-stage.is-validating::after {
  content: "VERIFY";
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 4;
  transform: translateX(-50%);
  padding: 3px 7px;
  border: 2px solid #4f8f87;
  background: #162a28;
  color: #a9eee0;
  font-size: 8px;
  letter-spacing: .12em;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .4);
  animation: authority-pulse .7s steps(2, end) infinite;
}

.loot-dialog.is-syncing .loot-card { opacity: .82; }
.loot-dialog.is-syncing .loot-actions::before {
  content: "正在写入云端…";
  grid-column: 1 / -1;
  color: #7c6847;
  font-size: 9px;
  text-align: center;
}

.battle-screen.is-connecting .battle-unit > img,
.battle-screen.is-connecting .battle-paper-doll { animation: authority-pulse .8s steps(2, end) infinite; }
.battle-screen.is-connecting .hp-track i { width: 34%; animation: battle-link 1.1s ease-in-out infinite alternate; }
.battle-screen.is-connecting .battle-callout { border-color: #65bdb2; background: #193b38; color: #c7fff2; }
@keyframes battle-link { from { transform: translateX(0); } to { transform: translateX(190%); } }

.hero-board {
  height: 416px;
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.power-plaque {
  top: 14px;
  right: 12px;
  left: auto;
  min-width: 108px;
  padding: 5px 9px;
  transform: none;
  color: var(--bay-text);
  border: 2px solid #725b3d;
  background: rgba(37, 34, 28, .94);
  box-shadow: 3px 3px 0 #111311;
}
.power-plaque > span { color: var(--bay-muted); }
.power-plaque > em { color: #d5ae72; }
.power-plaque strong i { color: var(--bay-amber-hot); }

.gear-slot {
  width: 46px;
  height: 46px;
  padding: 3px;
  overflow: hidden;
  opacity: .78;
  border: 2px solid #6b5c48;
  border-radius: 2px;
  background: rgba(34, 34, 30, .9);
  box-shadow: 2px 2px 0 #101110;
}
.gear-slot:hover,
.gear-slot:focus-visible,
.gear-slot.is-equipped { opacity: 1; }
.gear-slot.is-equipped { border-color: #b9693d; background: rgba(68, 47, 31, .94); box-shadow: 2px 2px 0 #1a1411; }
.gear-slot::before { bottom: 1px; padding: 1px 0; color: #e2cda9; background: rgba(18, 19, 17, .84); font-size: 7px; }
.slot-head, .slot-chest { top: 78px; }
.slot-left-arm, .slot-right-arm { top: 136px; }
.slot-legs, .slot-back { top: 194px; }
.slot-head, .slot-left-arm, .slot-legs { left: 12px; }
.slot-chest, .slot-right-arm, .slot-back { right: 12px; }

.hero-pedestal {
  inset: 48px 54px 28px;
  align-items: flex-end;
}
.scan-ring { display: none; }
.hero-sprite {
  width: 236px;
  height: 292px;
  filter: drop-shadow(0 9px 2px rgba(0, 0, 0, .72));
  animation-duration: 2.8s;
}
.paper-layer.layer-base { z-index: 2; }
.paper-layer.layer-back { z-index: 1; transform: scale(.58); }
.paper-layer.layer-legs { z-index: 3; transform: translateY(19%) scale(.72); }
.paper-layer.layer-chest { z-index: 4; transform: scale(.62); }
.paper-layer.layer-leftArm { z-index: 5; transform: translate(-19%, 4%) scale(.52); }
.paper-layer.layer-rightArm { z-index: 6; transform: translate(19%, 4%) scale(.52); }
.paper-layer.layer-head { z-index: 7; transform: translateY(-26%) scale(.48); }
.paper-layer.layer-joints { z-index: 8; }
.paper-layer.layer-structure { z-index: 9; }
.paper-layer.layer-signature { z-index: 10; filter: drop-shadow(0 0 2px rgba(255, 190, 92, .85)); }
.paper-layer.signature-zero-blackbox { z-index: 1; }
.paper-layer.rarity-relic { filter: drop-shadow(1px 0 #e1b64a) drop-shadow(-1px 0 #e1b64a) drop-shadow(0 -1px #fff0a0); }
.paper-layer.rarity-anomaly { filter: drop-shadow(1px 0 #58c4b6) drop-shadow(-1px 0 #58c4b6) drop-shadow(0 -1px #b8fff1); }
.paper-layer.series-saline,
.paper-layer.series-skyrail,
.paper-layer.series-archive { transform: none; }

.core-stats {
  left: 60px;
  right: 60px;
  bottom: 7px;
  padding: 5px 2px;
  color: var(--bay-text);
  border: 2px solid #655743;
  border-radius: 2px;
  background: rgba(28, 28, 25, .92);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .45);
}
.core-stats span { border-color: rgba(205, 177, 133, .24); }
.core-stats small { color: var(--bay-muted); font-size: 7px; }
.core-stats b { font-size: 12px; }

.chest-yard {
  height: calc(100% - 64px - 416px - 66px);
  min-height: 242px;
  padding: 0;
}
.task-ribbon {
  top: 3px;
  left: 12px;
  right: auto;
  width: 220px;
  height: 38px;
  padding: 0 9px;
  color: var(--bay-text);
  border: 2px solid #665743;
  border-radius: 2px;
  background: rgba(31, 31, 27, .92);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .45);
}
.task-ribbon small { color: var(--bay-muted); font-size: 7px; }
.task-ribbon strong { font-size: 10px; }
.task-ribbon > i { color: var(--bay-amber-hot); }
.task-ribbon em { color: #d6c09a; }
.task-ribbon.is-complete { border-color: #c26c36; background: rgba(66, 43, 28, .95); }

.chest-level {
  top: 3px;
  right: 12px;
  left: auto;
  min-width: 126px;
  padding: 3px 9px;
  color: var(--bay-text);
  border: 2px solid #665743;
  border-radius: 2px;
  background: rgba(33, 32, 28, .94);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .52);
  transform: none;
}
.chest-level small { color: #d2ae78; }
.chest-stage {
  top: 37px;
  width: 204px;
  height: 158px;
}
.chest-glow { width: 190px; height: 76px; background: rgba(54, 181, 173, .26); filter: blur(13px); }
#chest-sprite {
  width: 174px;
  height: 174px;
  filter: drop-shadow(0 10px 3px rgba(0, 0, 0, .72));
}
#chest-count-badge {
  right: 8px;
  bottom: 9px;
  border: 2px solid #f0c285;
  border-radius: 2px;
  background: #aa4f31;
  box-shadow: 2px 2px 0 #241612;
}
.camp-message {
  left: 58px;
  right: 58px;
  bottom: 54px;
  padding: 4px 7px;
  color: #e7d3ad;
  border: 1px solid #615540;
  background: rgba(24, 24, 22, .9);
}
.chest-control-row { left: 12px; right: 12px; bottom: 7px; grid-template-columns: 52px 1fr; gap: 7px; }
.auto-settings-button {
  height: 46px;
  color: #e9d5af;
  border: 2px solid #645744;
  background: #292a25;
  box-shadow: 3px 3px 0 #101110;
}
.chest-control-row .open-chest-button {
  height: 48px;
  border: 3px solid #542b1f;
  border-radius: 2px;
  background: var(--bay-amber);
  box-shadow: inset 0 3px 0 #ef9b58, 0 4px 0 #4f281e;
}
.chest-control-row .open-chest-button:active { box-shadow: inset 0 2px 0 #ef9b58, 0 1px 0 #4f281e; }

.bottom-nav {
  height: 66px;
  color: var(--bay-muted);
  border-top: 2px solid #625541;
  background: #20211e;
  box-shadow: inset 0 3px 0 #35342e;
  backdrop-filter: none;
}
.bottom-nav button { color: var(--bay-muted); border-right: 1px solid #4c4437; }
.bottom-nav button:last-child { border-right: 0; }
.bottom-nav button.is-active { color: #f0cf9a; background: #35362e; }
.bottom-nav button.is-active::after { top: 0; left: 18%; right: 18%; height: 3px; background: var(--bay-amber); }

@media (max-width: 380px) {
  .task-ribbon { width: 196px; }
  .chest-level { min-width: 116px; padding-inline: 6px; }
  .currency-row > .authority-status { min-width: 30px; padding: 0 4px; }
  .authority-status b, .authority-status small { display: none; }
}

@media (max-height: 760px) {
  .hero-board { height: 318px; }
  .hero-pedestal { inset: 38px 56px 18px; }
  .hero-sprite { width: 198px; height: 226px; }
  .slot-head, .slot-chest { top: 66px; }
  .slot-left-arm, .slot-right-arm { top: 116px; }
  .slot-legs, .slot-back { top: 166px; }
  .core-stats { bottom: 5px; }
  .chest-yard { height: calc(100% - 64px - 318px - 62px); min-height: 250px; }
  .chest-stage { top: 58px; height: 165px; }
  #chest-sprite { width: 184px; height: 184px; }
  .bottom-nav { height: 62px; }
}

/* V12 — Selected Product Design direction 1: soft chibi repair bay. */
:root {
  --toy-ink: #4b4938;
  --toy-muted: #7b765d;
  --toy-cream: #fff4cc;
  --toy-paper: #fff9e4;
  --toy-paper-deep: #efd9a7;
  --toy-line: #a98558;
  --toy-shadow: #7b5d3f;
  --toy-mint: #79c4a9;
  --toy-mint-dark: #3d806d;
  --toy-aqua: #38b8b1;
  --toy-coral: #ef7858;
  --toy-coral-dark: #a94e3d;
  --toy-honey: #dfa947;
}

html,
body,
body { background: #bed6b2; }

.game-shell {
  color: var(--toy-ink);
  background: #ead9ae;
  box-shadow: 0 0 0 3px #5b6048, 0 0 42px rgba(58, 74, 54, .35);
}

.world-backdrop {
  background-image: url("../assets/monster-trail/world/soft-repair-bay-camp.png");
  background-position: center 50%;
  filter: saturate(.92) brightness(1.04);
}

.world-backdrop::after {
  background: rgba(255, 244, 205, .08);
  box-shadow: inset 0 0 0 3px rgba(89, 93, 65, .4);
}

.status-bar {
  height: 64px;
  padding: max(8px, env(safe-area-inset-top)) 9px 7px;
  color: var(--toy-ink);
  border-bottom: 3px solid var(--toy-line);
  background: rgba(255, 244, 204, .96);
  box-shadow: inset 0 -3px 0 #e7cc91, 0 3px 0 rgba(98, 76, 49, .22);
}

.player-badge { min-width: 132px; color: var(--toy-ink); }
.player-badge > img {
  width: 42px;
  height: 42px;
  border: 2px solid var(--toy-line);
  border-radius: 9px;
  background: #dce7b5;
  box-shadow: inset 0 2px 0 #fff7da, 2px 2px 0 rgba(92, 67, 43, .34);
}
.player-badge span { color: var(--toy-muted); }
.player-badge i {
  width: 88px;
  height: 6px;
  border: 1px solid #9f8054;
  border-radius: 0;
  background: #d7caa1;
}
.player-badge em { background: var(--toy-mint-dark); }

.currency-row > span,
.currency-row button {
  height: 32px;
  color: var(--toy-ink);
  border: 2px solid #c19c67;
  border-radius: 7px;
  background: rgba(255, 249, 225, .95);
  box-shadow: inset 0 2px 0 #fff, 2px 2px 0 rgba(112, 79, 49, .25);
}
.currency-row > span i:first-child { color: var(--toy-honey); }
.currency-row > .authority-status { border-color: #65a995; color: var(--toy-mint-dark); }
.authority-status i:first-child { color: var(--toy-aqua) !important; }
.authority-status small { color: #4d8e7d; }
.authority-status.is-pending { border-color: #d49c48; color: #80572c; }
.authority-status.is-degraded { border-color: #cb7950; color: #8f4938; }
.authority-status.is-offline { border-color: #9d8065; color: #715f4f; }

.hero-board {
  height: 416px;
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.power-plaque {
  top: 15px;
  right: 11px;
  min-width: 106px;
  padding: 6px 9px;
  color: var(--toy-ink);
  border: 2px solid var(--toy-line);
  border-radius: 9px;
  background: rgba(255, 247, 218, .96);
  box-shadow: inset 0 3px 0 #fff, 3px 3px 0 rgba(107, 76, 46, .34);
}
.power-plaque > span { color: var(--toy-muted); }
.power-plaque > em { color: #8a673b; }
.power-plaque strong i { color: var(--toy-honey); }

.gear-slot {
  width: 62px;
  height: 72px;
  padding: 4px 5px 15px;
  opacity: 1;
  overflow: hidden;
  border: 2px solid var(--toy-line);
  border-radius: 10px;
  background: rgba(255, 249, 225, .94);
  box-shadow: inset 0 3px 0 #fff, inset 0 -3px 0 #efd59a, 3px 3px 0 rgba(94, 67, 43, .3);
}
.gear-slot.is-equipped {
  border-color: #c68f46;
  background: #fff0bd;
  box-shadow: inset 0 3px 0 #fff9df, inset 0 -3px 0 #e4bd6c, 3px 3px 0 rgba(94, 67, 43, .32);
}
.gear-slot::before {
  bottom: 3px;
  padding: 2px 1px 0;
  color: #6f6048;
  background: transparent;
  font-size: 8px;
}
.gear-slot img { image-rendering: pixelated; }
.slot-head, .slot-chest { top: 82px; }
.slot-left-arm, .slot-right-arm { top: 165px; }
.slot-legs, .slot-back { top: 248px; }
.slot-head, .slot-left-arm, .slot-legs { left: 10px; }
.slot-chest, .slot-right-arm, .slot-back { right: 10px; }

.hero-pedestal {
  inset: 48px 50px 34px;
  align-items: flex-end;
}
.scan-ring {
  display: block;
  width: 218px;
  height: 58px;
  bottom: 21px;
  border: 4px solid rgba(204, 161, 84, .38);
  border-radius: 50%;
  background: rgba(255, 241, 188, .26);
  box-shadow: inset 0 0 0 3px rgba(255, 250, 224, .54);
  animation: none;
}
.hero-sprite {
  width: 260px;
  height: 306px;
  filter: drop-shadow(0 8px 2px rgba(82, 58, 37, .28));
  animation-duration: 2.8s;
}
.paper-layer.layer-base { z-index: 2; }
.paper-layer.layer-back { z-index: 1; transform: none; }
.paper-layer.layer-legs { z-index: 3; transform: none; }
.paper-layer.layer-chest { z-index: 4; transform: none; }
.paper-layer.layer-leftArm { z-index: 5; transform: none; }
.paper-layer.layer-rightArm { z-index: 6; transform: none; }
.paper-layer.layer-head { z-index: 7; transform: none; }
.paper-layer.layer-joints { z-index: 8; }
.paper-layer.layer-structure { z-index: 9; }
.paper-layer.layer-signature { z-index: 10; }
.paper-layer.layer-structure[data-structure-slot] { pointer-events: none; }
.paper-layer.structure-slot-head { clip-path: inset(0 25% 60% 25%); z-index: 10; }
.paper-layer.structure-slot-chest { clip-path: inset(24% 25% 31% 25%); z-index: 9; }
.paper-layer.structure-slot-leftArm { clip-path: inset(17% 0 36% 51%); z-index: 9; }
.paper-layer.structure-slot-rightArm { clip-path: inset(17% 51% 36% 0); z-index: 9; }
.paper-layer.structure-slot-legs { clip-path: inset(51% 17% 0 17%); z-index: 9; }
.paper-layer.structure-slot-back { clip-path: inset(8% 20% 50% 14%); z-index: 1; }
.paper-layer.rarity-fine { filter: drop-shadow(0 -1px #81a866); }
.paper-layer.rarity-rare { filter: drop-shadow(1px 0 #5f9fc2) drop-shadow(-1px 0 #5f9fc2); }
.paper-layer.rarity-epic { filter: drop-shadow(1px 0 #9c78bd) drop-shadow(-1px 0 #9c78bd); }
.paper-layer.rarity-legendary { filter: drop-shadow(1px 0 #df9d3e) drop-shadow(-1px 0 #df9d3e); }
.paper-layer.rarity-mythic { filter: drop-shadow(1px 0 #ed715c) drop-shadow(-1px 0 #ed715c) drop-shadow(0 -1px #ffd27c); }
.paper-layer.rarity-relic { filter: drop-shadow(1px 0 #d6b24b) drop-shadow(-1px 0 #d6b24b) drop-shadow(0 -1px #fff0a0); }
.paper-layer.rarity-anomaly { filter: drop-shadow(1px 0 #48bfb2) drop-shadow(-1px 0 #48bfb2) drop-shadow(0 -1px #b8fff1); }

.core-stats {
  left: 68px;
  right: 68px;
  bottom: 7px;
  padding: 6px 3px;
  color: var(--toy-ink);
  border: 2px solid var(--toy-line);
  border-radius: 8px;
  background: rgba(255, 248, 219, .95);
  box-shadow: inset 0 2px 0 #fff, 3px 3px 0 rgba(99, 72, 44, .28);
}
.core-stats span { border-color: rgba(121, 96, 59, .25); }
.core-stats small { color: var(--toy-muted); font-size: 8px; }
.core-stats b { font-size: 13px; }

.chest-yard {
  height: calc(100% - 64px - 416px - 66px);
  min-height: 242px;
  padding: 0;
}
.task-ribbon {
  top: 3px;
  left: 10px;
  width: 218px;
  height: 42px;
  padding: 0 9px;
  color: var(--toy-ink);
  border: 2px solid var(--toy-line);
  border-radius: 9px;
  background: rgba(255, 248, 221, .96);
  box-shadow: inset 0 2px 0 #fff, 3px 3px 0 rgba(101, 73, 45, .28);
}
.task-ribbon small { color: var(--toy-muted); font-size: 8px; }
.task-ribbon strong { font-size: 10px; }
.task-ribbon > i { color: var(--toy-coral); }
.task-ribbon em { color: var(--toy-mint-dark); }
.task-ribbon.is-complete { border-color: #c06b4c; background: #ffe0b2; }

.chest-level {
  top: 3px;
  right: 10px;
  min-width: 132px;
  padding: 5px 8px;
  color: var(--toy-ink);
  border: 2px solid var(--toy-line);
  border-radius: 9px;
  background: rgba(255, 248, 221, .96);
  box-shadow: inset 0 2px 0 #fff, 3px 3px 0 rgba(101, 73, 45, .28);
}
.chest-level small { color: #7a6849; }
.chest-stage { top: 42px; width: 214px; height: 164px; }
.chest-glow {
  width: 194px;
  height: 72px;
  background: rgba(77, 191, 175, .24);
  filter: blur(11px);
}
#chest-sprite {
  width: 184px;
  height: 184px;
  filter: drop-shadow(0 8px 2px rgba(82, 58, 37, .31));
}
#chest-count-badge {
  right: 8px;
  bottom: 8px;
  border: 2px solid #fff4ce;
  border-radius: 6px;
  background: var(--toy-coral);
  box-shadow: 2px 2px 0 var(--toy-coral-dark);
}
.chest-stage.is-validating::after {
  border-color: #55a995;
  background: #e2f2cf;
  color: #3b7567;
  box-shadow: 2px 2px 0 rgba(72, 100, 70, .32);
}
.camp-message {
  left: 58px;
  right: 58px;
  bottom: 58px;
  padding: 4px 7px;
  color: #405e4b;
  border: 2px solid #9eb576;
  border-radius: 7px;
  background: rgba(255, 246, 204, .92);
}
.chest-control-row { left: 10px; right: 10px; bottom: 8px; grid-template-columns: 54px 1fr; gap: 7px; }
.auto-settings-button {
  height: 48px;
  color: #fff9df;
  border: 2px solid #4a7967;
  border-radius: 9px;
  background: var(--toy-mint-dark);
  box-shadow: inset 0 3px 0 #69a58d, 3px 3px 0 #315c50;
}
.chest-control-row .open-chest-button {
  height: 50px;
  border: 3px solid #fff0c2;
  border-radius: 10px;
  background: var(--toy-coral);
  box-shadow: inset 0 3px 0 #ffad86, 0 4px 0 var(--toy-coral-dark);
}
.chest-control-row .open-chest-button:active { box-shadow: inset 0 2px 0 #ffad86, 0 1px 0 var(--toy-coral-dark); }

.bottom-nav {
  height: 66px;
  color: var(--toy-muted);
  border-top: 3px solid var(--toy-line);
  background: #fff0bd;
  box-shadow: inset 0 3px 0 #fff8d7;
}
.bottom-nav button { color: var(--toy-muted); border-right: 2px solid rgba(147, 111, 68, .24); }
.bottom-nav button:last-child { border-right: 0; }
.bottom-nav button.is-active { color: #2f6b58; background: #cfe3aa; }
.bottom-nav button.is-active::after { top: 0; left: 0; right: 0; height: 4px; background: var(--toy-mint-dark); }
.bottom-nav em { border: 2px solid #fff4c7; background: var(--toy-coral); }

@media (max-width: 380px) {
  .task-ribbon { width: 198px; }
  .chest-level { min-width: 116px; padding-inline: 5px; }
}

@media (max-height: 760px) {
  .hero-board { height: 322px; }
  .hero-pedestal { inset: 34px 54px 22px; }
  .hero-sprite { width: 218px; height: 232px; }
  .scan-ring { width: 176px; height: 46px; bottom: 16px; }
  .gear-slot { width: 52px; height: 58px; padding-bottom: 13px; }
  .slot-head, .slot-chest { top: 57px; }
  .slot-left-arm, .slot-right-arm { top: 121px; }
  .slot-legs, .slot-back { top: 185px; }
  .core-stats { left: 58px; right: 58px; bottom: 5px; }
  .chest-yard { height: calc(100% - 64px - 322px - 62px); min-height: 252px; }
  .chest-stage { top: 55px; height: 166px; }
  #chest-sprite { width: 184px; height: 184px; }
  .bottom-nav { height: 62px; }
}

/* Extend the selected soft-toy language into every modal and terminal. */
.game-dialog,
.sheet-dialog,
.loot-card,
#creation-dialog,
.creation-dialog {
  color: var(--toy-ink);
  border-color: var(--toy-line);
  border-radius: 10px;
  background: var(--toy-cream);
  box-shadow: 0 0 0 2px #fff3c8, 7px 7px 0 rgba(94, 68, 42, .42);
}
.game-dialog::backdrop,
.creation-dialog::backdrop { background: rgba(55, 70, 52, .56); }
.sheet-dialog > header {
  color: var(--toy-ink);
  border-bottom-color: var(--toy-line);
  background: #efd79f;
  box-shadow: inset 0 -3px 0 #d7b873;
}
.sheet-dialog header small,
#creation-dialog header p,
.creation-dialog header p,
.creation-name small { color: var(--toy-muted); }
.sheet-dialog header button,
#creation-dialog .creation-name input,
.creation-name input {
  color: var(--toy-ink);
  border-color: var(--toy-line);
  border-radius: 7px;
  background: #fff5cf;
  box-shadow: 2px 2px 0 rgba(101, 72, 43, .3);
}
.sheet-content { background: #fff7d9; }
.toast {
  color: #385c4f;
  border-color: #fff0b8;
  background: #dbeab8;
  box-shadow: 4px 4px 0 rgba(83, 91, 57, .38);
}
.terminal-tabs {
  border-color: var(--toy-line);
  background: #e7cf97;
  box-shadow: inset 0 2px 0 #fff0c5, 3px 3px 0 rgba(94, 68, 42, .28);
}
.terminal-tabs button {
  color: var(--toy-muted);
  border-color: #a88b61;
  background: #f7e7bb;
}
.terminal-tabs button.is-active {
  color: #fffbed;
  border-color: var(--toy-coral-dark);
  background: var(--toy-coral);
  box-shadow: inset 0 -3px 0 var(--toy-coral-dark);
}
.item-panel,
.stage-card,
.collection-card,
.achievement-row,
.task-card,
.automation-panel article,
.attribute-panel article,
.character-card,
.wardrobe-slot,
.creation-hero,
.preset-card,
.locker-item,
.skill-tree-grid button {
  color: var(--toy-ink);
  border-color: #9c815a;
  background: #f4e3b8;
  box-shadow: 3px 3px 0 rgba(118, 87, 52, .28);
}
.item-panel.is-new,
.stage-card.is-current,
.task-card.is-current,
.character-card.is-active,
.wardrobe-choice.is-selected,
.creation-hero.is-selected,
.preset-card.is-active,
.skill-tree-grid button.is-learned {
  border-color: var(--toy-mint-dark);
  background: #dce8b8;
}
.stage-card button,
.task-card button,
.character-card > button,
.collection-tabs button.is-active,
.sheet-primary,
.equip-button {
  color: #fffbed;
  border-color: #3d705f;
  background: var(--toy-mint-dark);
  box-shadow: inset 0 2px 0 #6eaa91, 2px 2px 0 #315a4e;
}
#creation-dialog header small,
.creation-dialog header small { color: #b0663f; }
#creation-dialog header h2,
.creation-dialog header h2 { color: var(--toy-ink); }
.creation-submit {
  color: #fffbed;
  border-color: var(--toy-coral-dark);
  border-radius: 8px;
  background: var(--toy-coral);
  box-shadow: inset 0 3px 0 #ffae86, 0 4px 0 var(--toy-coral-dark);
}
.creation-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 10px; }
.creation-later {
  min-height: 46px;
  color: var(--toy-ink);
  border: 2px solid var(--toy-ink);
  border-radius: 10px 7px 11px 8px;
  background: #eadbbd;
  box-shadow: 2px 3px 0 rgba(52,56,55,.45);
  font-weight: 800;
}
.attribute-panel .preset-terminal,
.reforge-terminal,
.wardrobe-summary,
.structure-protocol,
.structure-mark,
.skill-tree-grid > section,
.advanced-terminal {
  color: var(--toy-ink);
  border-color: #907653;
  background: #ead5a4;
  box-shadow: 3px 3px 0 rgba(92, 66, 42, .3);
}
.preset-terminal > header,
.reforge-terminal > header,
.locker-terminal summary,
.structure-protocol,
.skill-tree-grid > section {
  color: var(--toy-ink);
  border-color: #a5875b !important;
  background: #dfc58d !important;
}
.preset-terminal > header small,
.reforge-terminal header small,
.locker-terminal summary small,
.locker-item small,
.structure-protocol p,
.structure-protocol small,
.reforge-terminal > p,
.reforge-row i,
.reforge-terminal footer,
.locker-empty { color: var(--toy-muted) !important; }
.preset-card input,
.preset-card > div button,
.locker-item button,
.reforge-row button {
  color: var(--toy-ink);
  border-color: #967a54;
  background: #fff0c4;
}
.battle-screen > header,
.battle-label,
.battle-result {
  color: var(--toy-ink);
  border-color: var(--toy-line);
  background: rgba(255, 244, 204, .95);
}
.battle-callout {
  border-color: #fff1bb;
  border-radius: 8px;
  background: var(--toy-mint-dark);
  box-shadow: 3px 3px 0 rgba(42, 76, 64, .45);
}
.battle-result button {
  border-color: var(--toy-coral-dark);
  border-radius: 8px;
  background: var(--toy-coral);
  box-shadow: inset 0 3px 0 #ffad86, 0 4px 0 var(--toy-coral-dark);
}

.battle-sky {
  filter: saturate(.72) brightness(1.15) contrast(.9) sepia(.08);
}
.battle-screen::after { background: rgba(255, 241, 193, .12); }

.game-version {
  position: absolute;
  z-index: 76;
  right: 6px;
  bottom: calc(66px + max(4px, env(safe-area-inset-bottom)));
  padding: 2px 4px 1px;
  color: #6f654d;
  border: 1px solid rgba(122, 92, 55, .45);
  border-radius: 4px;
  background: rgba(255, 247, 211, .88);
  box-shadow: 1px 1px 0 rgba(92, 68, 42, .24);
  font-size: 7px;
  line-height: 1;
  letter-spacing: .04em;
  pointer-events: none;
}

.item-panel > .item-paper-doll {
  position: relative;
  display: block;
  width: 104px;
  height: 112px;
  margin: 3px auto 0;
  filter: drop-shadow(0 4px 0 rgba(94, 68, 42, .2));
}
.item-panel > .item-paper-doll.is-empty { filter: grayscale(1); opacity: .34; }
.gear-detail > .gear-paper-doll {
  position: relative;
  display: block;
  width: 172px;
  height: 184px;
  margin: -4px auto 2px;
  filter: drop-shadow(0 6px 0 rgba(94, 68, 42, .24));
}
.item-paper-doll .paper-layer,
.gear-paper-doll .paper-layer { width: 100%; height: 100%; }
.gear-detail > .gear-paper-doll + h3 { margin-top: -4px; }

@media (max-height: 760px) {
  .game-version { bottom: calc(62px + max(3px, env(safe-area-inset-bottom))); }
}

/* v12.2 — compact build literacy, Scanner 200 and report-driven combat choreography. */
.paper-layer.layer-head.series-industrial {
  transform: translateY(3.5%) scale(.975);
  transform-origin: center bottom;
}

.rarity-protocol {
  display: inline-grid;
  gap: 1px;
  margin: 4px auto;
  padding: 4px 6px;
  color: var(--toy-ink);
  border: 2px solid #8a744f;
  border-radius: 6px;
  background: #fff0c5;
  text-align: left;
}
.rarity-protocol b { font-size: 8px; }
.rarity-protocol small { color: var(--toy-muted); font-size: 7px; }
.gear-rarity-protocol { display: grid; margin: 7px 0 5px; }
.compact-set-summary > div strong { color: #5a452f; }
.compact-set-summary > div span:not(.is-active) { opacity: .74; }
.compact-set-summary > div span.is-active::before { content: "✓ "; }

.upgrade-panel { display: grid; justify-items: stretch; gap: 8px; padding: 2px; text-align: left; }
.upgrade-panel > img { width: 112px; height: 96px; margin: -4px auto -12px; }
.scanner-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.scanner-heading h3 { margin: 0; font-size: 22px; }
.scanner-heading small { color: var(--toy-muted); font-size: 7px; letter-spacing: .1em; }
.scanner-heading em {
  padding: 4px 6px;
  border: 2px solid #4f7564;
  border-radius: 6px;
  background: #d8ead0;
  color: #365f50;
  font-size: 8px;
  font-style: normal;
}
.upgrade-panel > p { margin: 0; color: var(--toy-muted); font-size: 8px; line-height: 1.5; }
.scanner-milestone { display: grid; gap: 5px; padding: 8px; border: 2px solid #826a48; border-radius: 7px; background: #fff0bf; box-shadow: 2px 2px 0 #b79b68; }
.scanner-milestone header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.scanner-milestone header span, .scanner-milestone small { color: var(--toy-muted); font-size: 7px; }
.scanner-milestone header b { font-size: 10px; }
.scanner-milestone > i { height: 8px; overflow: hidden; border: 2px solid #536650; background: #c7c99d; }
.scanner-milestone > i > em { display: block; height: 100%; background: var(--toy-mint); }
.upgrade-panel .scanner-upgrade-action { order: 4; min-height: 44px; margin: 0; }
.scanner-rates { order: 5; border: 2px solid #8f7a58; border-radius: 7px; background: #efe1b9; }
.scanner-rates summary { padding: 8px 10px; cursor: pointer; font-size: 9px; font-weight: 800; }
.scanner-rates .rate-list { border: 0; border-top: 2px solid #8f7a58; border-radius: 0; box-shadow: none; }
.scanner-rates .rate-list b small { display: block; font-size: 6px; }

.compact-set-rail {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: 2px solid #547b68;
  border-radius: 8px;
  background: #d8e9c9;
  box-shadow: 3px 3px 0 #8fa279;
}
.compact-set-rail > i { color: #3e6b5e; font-size: 24px; }
.compact-set-rail small,
.compact-set-rail strong { display: block; }
.compact-set-rail small { color: var(--toy-muted); font-size: 7px; }
.compact-set-rail strong { margin-top: 2px; font-size: 9px; line-height: 1.35; }
.compact-set-rail > em {
  padding: 4px 6px;
  border: 1px solid #547b68;
  border-radius: 4px;
  background: #f6efc8;
  color: #386055;
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.collection-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.collection-tabs button { min-width: 0; padding: 0 2px; font-size: 8px; }
.pursuit-link {
  width: 100%;
  display: grid;
  grid-template-columns: 28px 1fr 18px;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 9px;
  color: var(--toy-ink);
  border: 2px solid #77523a;
  border-radius: 8px;
  background: #f1c873;
  box-shadow: 3px 3px 0 #8b6945;
  text-align: left;
}
.pursuit-link > i:first-child { color: #9b4c34; font-size: 22px; }
.pursuit-link b, .pursuit-link small { display: block; }
.pursuit-link b { font-size: 10px; }
.pursuit-link small { margin-top: 2px; color: #705b47; font-size: 7px; }
.pursuit-grid { display: grid; gap: 7px; }
.pursuit-card { display: grid; grid-template-columns: 72px 1fr; gap: 8px; align-items: center; min-height: 86px; padding: 7px; border: 2px solid #786650; border-radius: 8px; background: #e5d3aa; }
.pursuit-card.is-eligible { border-color: #4f7b6b; background: #dce8c4; }
.pursuit-card.is-found { border-color: #a86434; background: #f2d38b; box-shadow: inset 4px 0 0 #d77b42; }
.pursuit-card.is-locked { filter: saturate(.55); opacity: .78; }
.pursuit-card > img { width: 72px; height: 72px; object-fit: contain; image-rendering: pixelated; }
.pursuit-card header { display: flex; justify-content: space-between; gap: 6px; }
.pursuit-card header span, .pursuit-card header em { padding: 2px 4px; border: 1px solid #806846; background: #fff0c7; font-size: 6px; font-style: normal; }
.pursuit-card h3 { margin: 4px 0 2px; font-size: 11px; }
.pursuit-card p { margin: 0 0 3px; font-size: 8px; }
.pursuit-card small { display: block; color: #6d5b48; font-size: 7px; line-height: 1.4; }

.battle-vfx {
  position: absolute;
  z-index: 6;
  left: 55%;
  top: 47%;
  width: 128px;
  height: 128px;
  margin: -60px 0 0 -60px;
  background: url("../assets/monster-trail/effects/handdrawn-v1/excavator-impact.png") center / contain no-repeat;
  opacity: 0;
  image-rendering: pixelated;
  pointer-events: none;
}
.battle-vfx.is-enemy-strike,
.battle-vfx.is-enemy-critical,
.battle-vfx.is-enemy-combo,
.battle-vfx.is-enemy-counter { left: 39%; top: 61%; }
.battle-vfx.is-player-repair { left: 30%; top: 67%; }
.battle-vfx.is-enemy-repair { left: 72%; top: 35%; }

.player-unit.is-attack #player-battle-doll { animation: player-strike .4s steps(6, end); }
.player-unit.is-critical #player-battle-doll { animation: player-critical .42s steps(6, end); }
.player-unit.is-combo #player-battle-doll { animation: player-combo .42s steps(7, end); }
.player-unit.is-counter #player-battle-doll { animation: player-counter .4s steps(6, end); }
.player-unit.is-skill #player-battle-doll { animation: player-skill .42s steps(6, end); }
.player-unit.is-ultimate #player-battle-doll { animation: player-ultimate .42s steps(6, end); }
.enemy-unit.is-attack > img { animation: enemy-strike .4s steps(6, end); }
.enemy-unit.is-critical > img { animation: enemy-critical .42s steps(6, end); }
.enemy-unit.is-combo > img { animation: enemy-combo .42s steps(7, end); }
.enemy-unit.is-counter > img { animation: enemy-counter .4s steps(6, end); }
.enemy-unit.is-hit > img, .enemy-unit.is-blocked > img { animation: enemy-stagger .36s steps(5, end); }
.player-unit.is-hit #player-battle-doll { animation: player-stagger .36s steps(5, end); }
.player-unit.is-repair #player-battle-doll, .enemy-unit.is-repair > img { animation: unit-repair .42s steps(5, end); }

@keyframes player-strike { 0%,100% { transform: none; } 20% { transform: translate(-8px, 3px) rotate(-3deg); } 58% { transform: translate(66px, -30px) rotate(4deg); } 76% { transform: translate(52px, -25px); } }
@keyframes player-critical { 0%,100% { transform: none; } 24% { transform: translate(-13px, 6px) rotate(-6deg) scale(.97); } 60% { transform: translate(82px, -43px) rotate(7deg) scale(1.08); filter: brightness(1.35); } }
@keyframes player-combo { 0%,100% { transform: none; } 24% { transform: translate(48px, -22px) rotate(3deg); } 48% { transform: translate(12px, -5px) rotate(-3deg); } 72% { transform: translate(72px, -35px) rotate(5deg); } }
@keyframes player-counter { 0%,100% { transform: none; } 18% { transform: translate(-18px, 7px) rotate(-5deg); } 54% { transform: translate(62px, -26px) rotate(8deg); } }
@keyframes player-skill { 0%,100% { transform: none; } 22% { transform: translate(-8px, 8px) scale(.96); filter: brightness(1.25); } 58% { transform: translate(58px, -48px) scale(1.06); filter: brightness(1.45); } }
@keyframes player-ultimate { 0%,100% { transform: none; } 20% { transform: translateY(7px) scale(.94); filter: brightness(1.4); } 50% { transform: translate(78px, -58px) scale(1.12); filter: brightness(1.7) saturate(1.4); } 72% { transform: translate(60px, -42px) scale(1.06); } }
@keyframes enemy-strike { 0%,100% { transform: none; } 20% { transform: translate(8px, -3px) rotate(3deg); } 58% { transform: translate(-58px, 28px) rotate(-4deg); } }
@keyframes enemy-critical { 0%,100% { transform: none; } 22% { transform: translate(14px, -5px) rotate(6deg) scale(.97); } 58% { transform: translate(-72px, 38px) rotate(-7deg) scale(1.08); filter: brightness(1.3); } }
@keyframes enemy-combo { 0%,100% { transform: none; } 24% { transform: translate(-42px, 20px); } 48% { transform: translate(-8px, 4px); } 72% { transform: translate(-64px, 32px); } }
@keyframes enemy-counter { 0%,100% { transform: none; } 20% { transform: translate(16px, -6px); } 56% { transform: translate(-60px, 28px) rotate(-7deg); } }
@keyframes enemy-stagger { 0%,100% { transform: none; opacity: 1; } 38% { transform: translate(13px, -2px) rotate(3deg); opacity: .45; } 66% { transform: translate(-4px, 1px); } }
@keyframes player-stagger { 0%,100% { transform: none; opacity: 1; } 38% { transform: translate(-13px, 4px) rotate(-4deg); opacity: .45; } 66% { transform: translate(4px, -1px); } }
@keyframes unit-repair { 0%,100% { transform: none; filter: none; } 50% { transform: translateY(-5px) scale(1.04); filter: brightness(1.35) drop-shadow(0 0 5px #8fe37f); } }

@media (prefers-reduced-motion: reduce) {
  .player-unit #player-battle-doll,
  .enemy-unit > img { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

.battle-vfx.is-strike,
.battle-vfx.is-enemy-strike,
.battle-vfx.is-block { background-position-y: 0; animation: battle-vfx-strip .42s steps(4, end); }
.battle-vfx.is-critical,
.battle-vfx.is-enemy-critical { background-position-y: -128px; animation: battle-vfx-strip .42s steps(4, end); }
.battle-vfx.is-combo,
.battle-vfx.is-enemy-combo,
.battle-vfx.is-counter,
.battle-vfx.is-enemy-counter,
.battle-vfx.is-skill,
.battle-vfx.is-player-dodge,
.battle-vfx.is-enemy-dodge { background-position-y: -256px; animation: battle-vfx-strip .42s steps(4, end); }
.battle-vfx.is-ultimate,
.battle-vfx.is-legendary { background-position-y: -384px; animation: battle-vfx-strip .42s steps(4, end); }
.battle-vfx.is-player-repair,
.battle-vfx.is-enemy-repair { background-position-y: -512px; animation: battle-vfx-strip .42s steps(4, end); }
@keyframes battle-vfx-strip {
  0% { opacity: 0; background-position-x: 0; }
  8%, 92% { opacity: 1; }
  100% { opacity: 0; background-position-x: -512px; }
}
@media (prefers-reduced-motion: reduce) {
  .battle-vfx { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media (max-width: 370px) {
  .compact-set-rail { grid-template-columns: 26px minmax(0, 1fr); }
  .compact-set-rail > em { grid-column: 2; justify-self: start; }
}

/* v13 Core Mode — Hand-drawn Scrap Punk style lock */
.game-shell.is-core-mode {
  --ink: #343837;
  --muted: #716f65;
  --cream: #f3e8d0;
  --paper: #eadbbd;
  --paper-strong: #cdbb98;
  --sage: #7e9a86;
  --sage-dark: #4e6f60;
  --aqua: #7fd9b5;
  --honey: #e6b84a;
  --coral: #b8654d;
  --line: rgba(52, 56, 55, .5);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: #d9c9aa;
}
.is-core-mode button,
.is-core-mode dialog,
.is-core-mode input,
.is-core-mode select,
.is-core-mode textarea {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
}
.is-core-mode .world-backdrop {
  background: url("../assets/monster-trail/world/handdrawn-repair-bay.png") center 52% / cover no-repeat;
  filter: saturate(.86) contrast(.94) brightness(1.04);
}
.is-core-mode .world-backdrop::after {
  background: linear-gradient(180deg, rgba(243,232,208,.2), rgba(52,56,55,.04) 48%, rgba(52,56,55,.2));
}
.is-core-mode .status-bar,
.is-core-mode .hero-board,
.is-core-mode .salvage-yard,
.is-core-mode .bottom-nav,
.is-core-mode .loot-card,
.is-core-mode .sheet-dialog,
.is-core-mode .battle-result,
.is-core-mode .battle-label {
  border-color: #343837;
  background: rgba(243,232,208,.94);
  box-shadow: 3px 4px 0 rgba(52,56,55,.72), inset 0 0 0 2px rgba(205,187,152,.72);
  backdrop-filter: none;
}
.is-core-mode .status-bar { border-bottom-width: 2px; }
.is-core-mode button { letter-spacing: .01em; }
.is-core-mode button:focus-visible { outline-color: #7fd9b5; outline-offset: 3px; }
.is-core-mode .player-badge > img,
.is-core-mode .gear-slot img,
.is-core-mode .paper-layer,
.is-core-mode #chest-sprite,
.is-core-mode .battle-unit > img { image-rendering: auto; }
.is-core-mode .player-badge > img {
  border: 2px solid #343837;
  border-radius: 45% 55% 48% 52% / 54% 45% 55% 46%;
  background: #cdbb98;
  box-shadow: 2px 2px 0 #b8654d;
}
.is-core-mode .authority-status,
.is-core-mode .currency-row > span,
.is-core-mode .currency-row button {
  border: 1.5px solid #343837;
  border-radius: 7px 10px 6px 9px;
  background: #f3e8d0;
}
.is-core-mode .hero-board {
  height: 354px;
  margin: 8px 10px 0;
  border-width: 2px;
  border-radius: 18px 23px 15px 21px;
  background: rgba(243,232,208,.27);
  box-shadow: none;
}
.is-core-mode .hero-pedestal { inset: 48px 64px 46px; }
.is-core-mode .hero-sprite {
  width: 220px;
  height: 220px;
  filter: drop-shadow(5px 8px 0 rgba(52,56,55,.2));
  animation: handdrawn-idle 2.8s ease-in-out infinite;
}
.is-core-mode .scan-ring {
  width: 206px;
  height: 72px;
  top: auto;
  bottom: 6px;
  border: 2px dashed rgba(52,56,55,.48);
  border-radius: 50%;
  background: rgba(243,232,208,.38);
  box-shadow: none;
}
@keyframes handdrawn-idle { 0%,100% { transform: rotate(-.45deg) translateY(1px); } 50% { transform: rotate(.5deg) translateY(-4px); } }
.is-core-mode .gear-slot {
  width: 62px;
  height: 62px;
  padding: 4px;
  border: 2px solid #343837;
  border-radius: 11px 15px 9px 13px;
  background: #f3e8d0;
  box-shadow: 3px 3px 0 #7e9a86;
}
.is-core-mode .gear-slot::before {
  inset: auto 2px 2px;
  padding: 1px 2px;
  color: #343837;
  background: rgba(243,232,208,.88);
  transform: rotate(-1deg);
}
.is-core-mode .gear-slot.is-equipped { background: #eadbbd; border-color: #343837; box-shadow: 3px 3px 0 #b8654d; }
.is-core-mode .slot-head, .is-core-mode .slot-chest { top: 67px; }
.is-core-mode .slot-left-arm, .is-core-mode .slot-right-arm { top: 145px; }
.is-core-mode .slot-legs, .is-core-mode .slot-back { top: 223px; }
.is-core-mode .slot-head, .is-core-mode .slot-left-arm, .is-core-mode .slot-legs { left: 7px; }
.is-core-mode .slot-chest, .is-core-mode .slot-right-arm, .is-core-mode .slot-back { right: 7px; }
.is-core-mode .power-plaque {
  top: 7px;
  border: 2px solid #343837;
  border-radius: 8px 12px 7px 10px;
  background: #f3e8d0;
  box-shadow: 3px 3px 0 #e6b84a;
  transform: translateX(-50%) rotate(-.5deg);
}
.is-core-mode .power-plaque > span { color: #716f65; }
.is-core-mode .partner-peek,
.is-core-mode .auto-settings-button { display: none; }
.is-core-mode .core-stats {
  left: 78px;
  right: 78px;
  bottom: 5px;
  border: 2px solid #343837;
  border-radius: 8px 11px 7px 10px;
  background: #f3e8d0;
  box-shadow: 3px 3px 0 rgba(52,56,55,.55);
}
.is-core-mode .salvage-yard {
  margin: 7px 10px 0;
  border: 2px solid #343837;
  border-radius: 16px 12px 20px 14px;
  background: rgba(243,232,208,.85);
}
.is-core-mode .task-ribbon,
.is-core-mode .chest-level {
  border: 1.5px solid #343837;
  background: #eadbbd;
  box-shadow: 2px 2px 0 #7e9a86;
}
.is-core-mode .chest-stage { min-height: 112px; }
.is-core-mode #chest-sprite {
  width: 156px;
  height: 132px;
  object-fit: contain;
  filter: drop-shadow(4px 6px 0 rgba(52,56,55,.22));
}
.is-core-mode .chest-stage.is-opening #chest-sprite { animation: wreck-rummage .7s ease-in-out infinite; }
.is-core-mode .chest-stage.is-reveal #chest-sprite { animation: wreck-pop .55s cubic-bezier(.2,.8,.2,1); }
@keyframes wreck-rummage { 0%,100% { transform: rotate(-1deg) translateY(0); } 35% { transform: rotate(2deg) translateY(-4px); } 65% { transform: rotate(-2deg) translateY(-1px); } }
@keyframes wreck-pop { 0% { transform: scale(.92); filter: brightness(.8); } 55% { transform: scale(1.08) rotate(1deg); filter: brightness(1.28); } 100% { transform: scale(1); } }
.is-core-mode .open-chest-button,
.is-core-mode .equip-button,
.is-core-mode .sheet-primary {
  border: 2px solid #343837;
  border-radius: 9px 13px 8px 11px;
  background: #b8654d;
  color: #fff9e8;
  box-shadow: 3px 4px 0 #343837, inset 0 2px 0 rgba(255,255,255,.22);
}
.is-core-mode .chest-control-row { grid-template-columns: 1fr; }
.is-core-mode .bottom-nav {
  border-top: 2px solid #343837;
  background: #f3e8d0;
}
.is-core-mode .bottom-nav button { border-right: 1px dashed #7e9a86; color: #716f65; }
.is-core-mode .bottom-nav button.is-active { color: #343837; background: #eadbbd; }
.is-core-mode .bottom-nav button.is-active::after { height: 3px; background: #b8654d; }
.is-core-mode .game-version { color: #343837; background: rgba(243,232,208,.8); border: 1px solid #343837; }

.is-core-mode .loot-card { border-radius: 18px 13px 21px 14px; }
.is-core-mode .loot-card > header h2 { font-size: 25px; text-shadow: none; transform: rotate(-.4deg); }
.is-core-mode .compare-grid { gap: 10px; }
.is-core-mode .item-panel {
  border: 2px solid #343837;
  border-radius: 12px 17px 10px 14px;
  background: #eadbbd;
  box-shadow: 3px 3px 0 rgba(52,56,55,.45);
}
.is-core-mode .item-panel.is-new { background: #f3e8d0; box-shadow: 3px 3px 0 #7fd9b5; }
.is-core-mode .item-panel > .item-paper-doll { width: 122px; height: 122px; }
.is-core-mode .item-panel > .item-paper-doll.is-empty { filter: none; opacity: .5; }
.is-core-mode .reveal-journey { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin: 8px 0; }
.is-core-mode .reveal-journey span { padding: 4px 2px; border-bottom: 2px dashed #cdbb98; text-align: center; font-size: 10px; color: #716f65; }
.is-core-mode .reveal-journey .is-done { color: #4e6f60; border-color: #7e9a86; }
.is-core-mode .reveal-journey .is-current { color: #b8654d; border-color: #b8654d; font-weight: 800; }
.is-core-mode .core-loot-literacy {
  margin: 10px 0 2px;
  padding: 10px 12px;
  border: 2px solid #343837;
  border-radius: 12px 9px 14px 10px;
  background: #dfe0bd;
  box-shadow: 3px 3px 0 #7e9a86;
  text-align: left;
}
.is-core-mode .core-loot-literacy header { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.is-core-mode .core-loot-literacy header small { color: #4e6f60; font-size: 8px; letter-spacing: .12em; }
.is-core-mode .core-loot-literacy p { margin: 6px 0 3px; font-size: 12px; font-weight: 800; }
.is-core-mode .core-loot-literacy > em { color: #5f5c54; font-size: 10px; font-style: normal; }
.is-core-mode .core-affix-preview { display: grid; gap: 5px; margin-top: 8px; padding-top: 7px; border-top: 1px dashed #7e9a86; }
.loot-dialog.is-core-reveal[open] .item-panel.is-new .item-paper-doll { animation: ink-reveal .72s ease-out both; }
@keyframes ink-reveal { 0%,32% { filter: brightness(0) opacity(.35); transform: translateY(6px) scale(.9); } 58% { filter: sepia(.6) contrast(1.2); transform: scale(1.04); } 100% { filter: none; transform: none; } }
.is-core-mode .hero-board.is-installing::after {
  content: "咔哒 — LOCK";
  position: absolute;
  left: 50%;
  top: 49%;
  z-index: 20;
  padding: 7px 12px;
  border: 2px solid #343837;
  background: #7fd9b5;
  box-shadow: 3px 3px 0 #343837;
  font-weight: 900;
  transform: translate(-50%,-50%) rotate(-2deg);
  animation: install-label .56s ease both;
}
.is-core-mode .hero-board.is-installing .hero-sprite { animation: install-body .56s cubic-bezier(.2,.8,.2,1); }
@keyframes install-body { 0% { transform: translateX(-14px) rotate(-3deg); opacity: .55; } 45% { transform: translateX(5px) rotate(2deg) scale(1.05); } 70% { transform: translateX(-2px) rotate(-1deg); } 100% { transform: none; } }
@keyframes install-label { 0%,25% { opacity: 0; transform: translate(-50%,-50%) scale(.7) rotate(-2deg); } 45%,80% { opacity: 1; transform: translate(-50%,-50%) scale(1.05) rotate(-2deg); } 100% { opacity: 0; } }

.is-core-mode .core-build-panel,
.is-core-mode .core-adventure,
.is-core-mode .core-collection { display: grid; gap: 12px; }
.is-core-mode .core-build-hero,
.is-core-mode .core-adventure > header,
.is-core-mode .core-collection > header,
.is-core-mode .core-gate-note {
  border: 2px solid #343837;
  border-radius: 11px 15px 10px 13px;
  background: #f3e8d0;
  box-shadow: 3px 3px 0 #7e9a86;
}
.is-core-mode .core-build-hero { padding: 14px; display: grid; grid-template-columns: 1fr auto; align-items: end; }
.is-core-mode .core-build-hero small { grid-column: 1; letter-spacing: .18em; }
.is-core-mode .core-build-hero strong { grid-column: 2; grid-row: 1 / 3; font-size: 44px; color: #b8654d; }
.is-core-mode .core-build-hero span { font-size: 11px; color: #716f65; }
.is-core-mode .core-gate-note { padding: 12px; display: flex; gap: 9px; align-items: center; }
.is-core-mode .core-gate-note i { font-size: 24px; color: #7e9a86; }
.is-core-mode .core-gate-note div { display: grid; gap: 3px; }
.is-core-mode .core-literacy-board {
  border: 2px solid #343837;
  border-radius: 14px 10px 16px 11px;
  background: #eadbbd;
  box-shadow: 3px 3px 0 #b8654d;
  overflow: hidden;
}
.is-core-mode .core-literacy-board > header { display: flex; align-items: end; justify-content: space-between; padding: 12px 13px 9px; border-bottom: 1px dashed #7e9a86; }
.is-core-mode .core-literacy-board > header small { color: #4e6f60; font-size: 8px; letter-spacing: .15em; }
.is-core-mode .core-literacy-board > header h3 { margin: 2px 0 0; font-size: 18px; }
.is-core-mode .core-literacy-board > header > strong { color: #b8654d; font-size: 26px; }
.is-core-mode .core-literacy-steps { display: grid; }
.is-core-mode .core-literacy-steps > article { display: grid; grid-template-columns: 31px 1fr; gap: 9px; padding: 10px 12px; border-bottom: 1px dashed #b8a987; }
.is-core-mode .core-literacy-steps > article:last-child { border-bottom: 0; }
.is-core-mode .core-literacy-steps > article > i { font-size: 24px; color: #7e9a86; }
.is-core-mode .core-literacy-steps > article > div { display: grid; gap: 3px; }
.is-core-mode .core-literacy-steps small { color: #5f5c54; line-height: 1.45; }
.is-core-mode .core-literacy-steps em { padding: 3px 6px; border-left: 3px solid #cdbb98; color: #716f65; font-size: 9px; font-style: normal; }
.is-core-mode .core-literacy-steps em.is-active { border-color: #b8654d; color: #343837; background: rgba(184,101,77,.11); font-weight: 800; }
.is-core-mode .core-literacy-steps .is-locked { opacity: .52; }
.is-core-mode .core-literacy-steps .is-locked > i { color: #8d897c; }
.is-core-mode .core-gear-resonance,
.is-core-mode .core-gear-affixes,
.is-core-mode .core-reforge-terminal { margin-top: 10px; text-align: left; }
.is-core-mode .core-gear-resonance { border: 2px solid #343837; border-radius: 10px 13px 9px 12px; background: #dfe0bd; }
.is-core-mode .core-gear-affixes { padding: 10px; border: 2px solid #343837; border-radius: 11px 8px 13px 9px; background: #eadbbd; }
.is-core-mode .core-gear-affixes header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.is-core-mode .core-gear-affixes header small { color: #4e6f60; font-size: 8px; letter-spacing: .12em; }
.is-core-mode .core-reforge-terminal { border-color: #343837; background: #f1d89e; box-shadow: 3px 3px 0 #b8654d; }
.is-core-mode .core-adventure > header { padding: 14px; }
.is-core-mode .core-collection > header { padding: 14px; }
.is-core-mode .core-collection > header h3 { margin: 2px 0 4px; font-size: 22px; }
.is-core-mode .core-collection > header p { margin: 0; color: #716f65; font-size: 12px; line-height: 1.5; }
.is-core-mode .core-collection .collection-card { border: 2px solid #343837; border-radius: 10px 14px 9px 12px; background: #eadbbd; box-shadow: 3px 3px 0 rgba(52,56,55,.4); }
.is-core-mode .core-gear-detail > .gear-paper-doll { width: 190px; height: 190px; }
.is-core-mode .core-adventure > header h3 { margin: 2px 0 4px; font-size: 24px; }
.is-core-mode .core-adventure > header p { margin: 0; color: #716f65; font-size: 12px; line-height: 1.5; }
.is-core-mode .core-route-list { display: grid; gap: 9px; }
.is-core-mode .core-route-chapters { display: grid; gap: 14px; }
.is-core-mode .core-route-chapter > header { display: grid; grid-template-columns: minmax(0, 1fr) 1.15fr; gap: 10px; align-items: end; margin: 0 0 8px; padding: 8px 10px; border: 2px solid #343837; border-radius: 10px 13px 8px 12px; background: #cdbb98; box-shadow: 3px 3px 0 rgba(52,56,55,.35); }
.is-core-mode .core-route-chapter > header h3 { margin: 1px 0 0; font-size: 17px; }
.is-core-mode .core-route-chapter > header small { color: #4e6f60; font-size: 8px; letter-spacing: .08em; }
.is-core-mode .core-route-chapter > header p { margin: 0; color: #5f5c54; font-size: 9px; line-height: 1.45; }
.is-core-mode .core-route-list .stage-card { border: 2px solid #343837; border-radius: 12px 9px 14px 10px; background: #eadbbd; box-shadow: 3px 3px 0 rgba(52,56,55,.45); }
.is-core-mode .core-route-list .stage-card.is-boss { background: #f1d89e; box-shadow: 3px 3px 0 #b8654d; }
.is-core-mode .core-route-list .stage-card.is-elite { background: #d9d7b7; box-shadow: 3px 3px 0 #4e6f60; }
.is-core-mode .core-route-list .stage-card button { border: 1.5px solid #343837; background: #7e9a86; color: #fff9e8; box-shadow: 2px 2px 0 #343837; }

.is-core-mode .battle-screen { background: #cdbb98; }
.is-core-mode .battle-sky { filter: saturate(.86) contrast(.94) brightness(1.02); }
.is-core-mode .battle-screen::after { background: linear-gradient(180deg, rgba(243,232,208,.18), rgba(52,56,55,.12)); }
.is-core-mode .battle-vfx {
  background-image: none;
  background-position: center !important;
  background-size: contain;
  background-repeat: no-repeat;
}
.is-core-mode .battle-vfx.is-strike,
.is-core-mode .battle-vfx.is-enemy-strike,
.is-core-mode .battle-vfx.is-block { background-image: url("../assets/monster-trail/effects/handdrawn-v1/excavator-impact.png"); }
.is-core-mode .battle-vfx.is-critical,
.is-core-mode .battle-vfx.is-enemy-critical,
.is-core-mode .battle-vfx.is-ultimate { background-image: url("../assets/monster-trail/effects/handdrawn-v1/shotgun-burst.png"); }
.is-core-mode .battle-vfx.is-combo,
.is-core-mode .battle-vfx.is-enemy-combo,
.is-core-mode .battle-vfx.is-counter,
.is-core-mode .battle-vfx.is-enemy-counter { background-image: url("../assets/monster-trail/effects/handdrawn-v1/cutter-counter.png"); }
.is-core-mode .battle-vfx.is-skill,
.is-core-mode .battle-vfx.is-player-dodge,
.is-core-mode .battle-vfx.is-enemy-dodge,
.is-core-mode .battle-vfx.is-player-repair,
.is-core-mode .battle-vfx.is-enemy-repair { background-image: url("../assets/monster-trail/effects/handdrawn-v1/signal-wave.png"); }
.is-core-mode .battle-unit > img,
.is-core-mode .battle-paper-doll { filter: drop-shadow(5px 7px 0 rgba(52,56,55,.24)); }
.is-core-mode .battle-screen.is-boss .enemy-unit > img { width: 214px; height: 214px; }
.is-core-mode .battle-callout { border: 2px solid #343837; border-radius: 8px 12px 7px 10px; background: #f3e8d0; color: #343837; box-shadow: 3px 3px 0 #343837; }
.is-core-mode .player-unit.gear-excavator.is-attack #player-battle-doll { animation: excavator-smash .55s cubic-bezier(.2,.8,.2,1); }
.is-core-mode .player-unit.gear-spider.is-dodge #player-battle-doll { animation: spider-scramble .45s ease-out; }
.is-core-mode .player-unit.gear-shield.is-counter #player-battle-doll { animation: shield-slam .52s ease-out; }
.is-core-mode .player-unit.gear-dish.is-skill #player-battle-doll { animation: dish-signal .65s ease-in-out; }
.is-core-mode .player-unit.gear-cutter.is-counter #player-battle-doll,
.is-core-mode .player-unit.gear-cutter.is-attack #player-battle-doll { animation: cutter-sweep .52s cubic-bezier(.2,.8,.2,1); }
.is-core-mode .player-unit.gear-shotgun.is-attack #player-battle-doll { animation: shotgun-recoil .5s steps(6, end); }
.is-core-mode .player-unit.gear-reverse.is-dodge #player-battle-doll { animation: reverse-joint-dodge .48s ease-out; }
.is-core-mode .player-unit.gear-battery.is-skill #player-battle-doll { animation: battery-signal .68s ease-in-out; }
.is-core-mode .player-unit.legendary-echo.is-legendary-action #player-battle-doll { animation: legendary-echo-brace .68s cubic-bezier(.2,.8,.2,1); }
.is-core-mode .player-unit.legendary-isotope.is-legendary-action #player-battle-doll { animation: legendary-isotope-pump .78s ease-in-out; }
.is-core-mode .player-unit.legendary-pilegun.is-legendary-action #player-battle-doll { animation: legendary-pilegun-breach .72s cubic-bezier(.15,.8,.18,1); }
.is-core-mode .player-unit.legendary-blackbox.is-legendary-action #player-battle-doll { animation: legendary-blackbox-replay .82s steps(7, end); }
.is-core-mode .paper-layer.series-industrial { transform: none; }
.is-core-mode .paper-layer.layer-signature { filter: drop-shadow(2px 3px 0 rgba(52,56,55,.28)); }
@keyframes excavator-smash { 0%,100% { transform: none; } 24% { transform: translate(-13px,4px) rotate(-7deg); } 62% { transform: translate(74px,-34px) rotate(9deg) scale(1.06); } }
@keyframes spider-scramble { 0%,100% { transform: none; } 35% { transform: translate(-36px,-7px) rotate(-3deg); } 65% { transform: translate(22px,-13px) rotate(2deg); } }
@keyframes shield-slam { 0%,100% { transform: none; } 25% { transform: translate(-18px,2px) rotate(-5deg); } 60% { transform: translate(55px,-18px) rotate(11deg); } }
@keyframes dish-signal { 0%,100% { transform: none; filter: none; } 45% { transform: translateY(-9px) rotate(2deg); filter: drop-shadow(0 0 10px #7fd9b5) brightness(1.18); } }
@keyframes cutter-sweep { 0%,100% { transform: none; } 22% { transform: translate(-14px,5px) rotate(-8deg); } 58% { transform: translate(68px,-29px) rotate(12deg) scale(1.04); } 72% { transform: translate(51px,-22px) rotate(4deg); } }
@keyframes shotgun-recoil { 0%,100% { transform: none; } 20% { transform: translate(32px,-17px) rotate(3deg); } 38% { transform: translate(-13px,6px) rotate(-6deg); filter: brightness(1.3); } 66% { transform: translate(17px,-9px) rotate(2deg); } }
@keyframes reverse-joint-dodge { 0%,100% { transform: none; } 28% { transform: translate(-41px,-5px) rotate(-3deg) scaleY(.94); } 62% { transform: translate(23px,-15px) rotate(2deg) scaleY(1.03); } }
@keyframes battery-signal { 0%,100% { transform: none; filter: none; } 42% { transform: translateY(-7px) scale(1.025); filter: drop-shadow(0 0 12px #e6b84a) brightness(1.2); } }
@keyframes legendary-echo-brace { 0%,100% { transform: none; } 18% { transform: translate(-12px,2px) rotate(-4deg); } 38% { transform: translate(5px,-3px) rotate(2deg); filter: brightness(1.25); } 56% { transform: translate(-4px,1px) rotate(-1deg); } }
@keyframes legendary-isotope-pump { 0%,100% { transform: none; filter: none; } 28% { transform: translateY(3px) scale(.97,1.04); } 52% { transform: translateY(-5px) scale(1.035,.98); filter: drop-shadow(0 0 10px rgba(126,154,134,.8)) brightness(1.18); } 72% { transform: translateY(1px) scale(.99,1.015); } }
@keyframes legendary-pilegun-breach { 0%,100% { transform: none; } 18% { transform: translate(-28px,5px) rotate(-7deg); } 48% { transform: translate(86px,-24px) rotate(7deg) scale(1.08); filter: brightness(1.35); } 64% { transform: translate(34px,-12px) rotate(-3deg) scale(.97); } }
@keyframes legendary-blackbox-replay { 0%,100% { transform: none; opacity: 1; } 20% { transform: translate(9px,-4px) rotate(2deg); opacity: .6; } 40% { transform: translate(-8px,3px) rotate(-2deg); opacity: .9; } 60% { transform: translate(5px,-2px) rotate(1deg); filter: drop-shadow(0 0 12px rgba(61,170,174,.75)); } }

/* v13.3 — compact colored affixes; set identity lives inside the chip. */
.set-affix-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin: 6px 0;
}
.set-affix-row .set-affix-chip,
.affix-row .stat-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  min-height: 25px;
  padding: 4px 6px;
  border: 1px solid currentColor;
  border-radius: 5px !important;
  font-size: 9px;
  font-weight: 850;
  line-height: 1.2;
  box-shadow: none;
}
.set-affix-chip small { color: inherit; font-size: 7px; font-weight: 700; opacity: .78; }
.set-affix-chip.is-pending { filter: grayscale(.45); opacity: .42; }
.set-affix-chip.is-active { opacity: 1; box-shadow: inset 3px 0 0 currentColor; }
.stat-attack, .stat-crit, .stat-penetration, .stat-accuracy { background: #f1c9b8 !important; color: #8a3f31 !important; }
.stat-combo, .stat-speed, .stat-dodge { background: #c9dfe2 !important; color: #356878 !important; }
.stat-defense, .stat-hp, .stat-counter, .stat-guard { background: #d4dfbd !important; color: #486541 !important; }
.stat-leech, .stat-repair { background: #c8e5d3 !important; color: #2f6b55 !important; }
.stat-stun { background: #ddcee7 !important; color: #674a78 !important; }
.stat-ignoreCrit, .stat-ignoreCombo, .stat-ignoreDodge, .stat-ignoreCounter, .stat-ignoreLeech, .stat-ignoreStun { background: #ddd4c4 !important; color: #625744 !important; }
.stat-chip.is-empty { background: #ddd4c4 !important; color: #716957 !important; }
.item-set-affixes { margin: 5px 0 0; }
.item-set-affixes .set-affix-chip { font-size: 8px; }
.build-set-affixes {
  justify-content: flex-start;
  padding: 7px;
  border: 2px solid #8a744f;
  background: #efe1b9;
}
.gear-set-affixes { margin: 8px 0; }
.core-literacy-steps .set-affix-row { justify-content: flex-start; margin-bottom: 0; }

.is-core-mode .battle-vfx.uses-handdrawn-vfx {
  width: 150px;
  height: 150px;
  margin: -72px 0 0 -72px;
  background-position: center !important;
  background-size: contain;
  background-repeat: no-repeat;
  animation: handdrawn-impact .5s steps(5, end);
}
.is-core-mode .battle-vfx.uses-handdrawn-vfx.vfx-excavator { background-image: url("../assets/monster-trail/effects/handdrawn-v1/excavator-impact.png"); }
.is-core-mode .battle-vfx.uses-handdrawn-vfx.vfx-cutter { background-image: url("../assets/monster-trail/effects/handdrawn-v1/cutter-counter.png"); }
.is-core-mode .battle-vfx.uses-handdrawn-vfx.vfx-shotgun { background-image: url("../assets/monster-trail/effects/handdrawn-v1/shotgun-burst.png"); }
.is-core-mode .battle-vfx.uses-handdrawn-vfx.vfx-culture { background-image: url("../assets/monster-trail/effects/handdrawn-v1/experimental-culture-pulse.png"); animation-name: handdrawn-signal; animation-duration: .72s; }
.is-core-mode .battle-vfx.uses-handdrawn-vfx.vfx-legendary-echo { background-image: url("../assets/monster-trail/effects/handdrawn-v1/legendary-echo-counter.png"); animation-duration: .7s; }
.is-core-mode .battle-vfx.uses-handdrawn-vfx.vfx-legendary-isotope { background-image: url("../assets/monster-trail/effects/handdrawn-v1/legendary-isotope-recycle.png"); animation-name: handdrawn-signal; animation-duration: .78s; }
.is-core-mode .battle-vfx.uses-handdrawn-vfx.vfx-legendary-pilegun { background-image: url("../assets/monster-trail/effects/handdrawn-v1/legendary-pilegun-breach.png"); width: 178px; height: 178px; margin: -86px 0 0 -86px; animation-duration: .64s; }
.is-core-mode .battle-vfx.uses-handdrawn-vfx.vfx-legendary-blackbox { background-image: url("../assets/monster-trail/effects/handdrawn-v1/legendary-blackbox-replay.png"); left: 32%; top: 61%; animation-name: handdrawn-signal; animation-duration: .82s; }
.is-core-mode .battle-vfx.uses-handdrawn-vfx.vfx-signal {
  left: 31%;
  top: 62%;
  background-image: url("../assets/monster-trail/effects/handdrawn-v1/signal-wave.png");
  animation-name: handdrawn-signal;
}
@keyframes handdrawn-impact { 0% { opacity: 0; transform: scale(.45) rotate(-8deg); } 18%,74% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1) rotate(4deg); } }
@keyframes handdrawn-signal { 0% { opacity: 0; transform: scale(.55); } 24%,76% { opacity: 1; } 100% { opacity: 0; transform: scale(1.18); } }

@media (max-height: 760px) {
  .is-core-mode .hero-board { height: 304px; }
  .is-core-mode .hero-pedestal { inset: 42px 70px 39px; }
  .is-core-mode .hero-sprite { width: 188px; height: 188px; }
  .is-core-mode .slot-head, .is-core-mode .slot-chest { top: 55px; }
  .is-core-mode .slot-left-arm, .is-core-mode .slot-right-arm { top: 119px; }
  .is-core-mode .slot-legs, .is-core-mode .slot-back { top: 183px; }
  .is-core-mode .gear-slot { width: 55px; height: 55px; }
  .is-core-mode .salvage-yard { height: calc(100% - 64px - 304px - 7px - 62px); min-height: 236px; }
  .is-core-mode #chest-sprite { width: 126px; height: 105px; }
  .is-core-mode .core-route-chapter > header { grid-template-columns: 1fr; gap: 3px; }
}

@media (max-height: 660px) {
  .is-core-mode .hero-board { height: 258px; }
  .is-core-mode .hero-pedestal { inset: 34px 74px 34px; }
  .is-core-mode .hero-sprite { width: 172px; height: 172px; }
  .is-core-mode .slot-head, .is-core-mode .slot-chest { top: 43px; }
  .is-core-mode .slot-left-arm, .is-core-mode .slot-right-arm { top: 98px; }
  .is-core-mode .slot-legs, .is-core-mode .slot-back { top: 153px; }
  .is-core-mode .gear-slot { width: 49px; height: 49px; }
  .is-core-mode .core-stats { left: 70px; right: 70px; }
  .is-core-mode .salvage-yard { height: calc(100% - 64px - 258px - 7px - 62px); min-height: 220px; }
  .is-core-mode .chest-stage { top: 45px; min-height: 88px; height: 116px; }
  .is-core-mode #chest-sprite { width: 108px; height: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  .is-core-mode .hero-sprite,
  .is-core-mode .chest-stage #chest-sprite,
  .loot-dialog.is-core-reveal .item-paper-doll { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* v13.5 — whole-game Hand-drawn Scrap Punk UI system.
   Secondary workspaces now read as pages from the same repair notebook as camp. */
.is-handdrawn-mode {
  --scrap-ink: #303936;
  --scrap-muted: #6f6a5e;
  --scrap-paper: #f7edd6;
  --scrap-paper-2: #ead9b8;
  --scrap-paper-3: #dcc397;
  --scrap-sage: #76927f;
  --scrap-sage-dark: #456858;
  --scrap-rust: #b85f46;
  --scrap-rust-dark: #7e4538;
  --scrap-honey: #d2aa62;
  --scrap-line: #3f4843;
  --scrap-shadow: rgba(48,57,54,.3);
}

.is-handdrawn-mode button:focus-visible,
.is-handdrawn-mode input:focus-visible,
.is-handdrawn-mode summary:focus-visible {
  outline: 3px solid #86d8b7;
  outline-offset: 3px;
}

.is-handdrawn-mode .sheet-dialog,
.is-handdrawn-mode .creation-dialog,
.is-handdrawn-mode .loot-card {
  border: 2px solid var(--scrap-line);
  border-radius: 17px 12px 20px 14px;
  background: var(--scrap-paper);
  box-shadow: 0 0 0 3px rgba(247,237,214,.78), 8px 9px 0 var(--scrap-shadow);
}
.is-handdrawn-mode .game-dialog::backdrop { background: rgba(39,49,44,.64); }
.is-handdrawn-mode .sheet-dialog > header {
  min-height: 68px;
  padding: 11px 14px 10px 17px;
  border-bottom: 2px dashed var(--scrap-sage-dark);
  background: var(--scrap-paper-2);
  box-shadow: inset 0 -4px 0 rgba(184,95,70,.13);
}
.is-handdrawn-mode .sheet-dialog header small {
  color: var(--scrap-sage-dark);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .11em;
}
.is-handdrawn-mode .sheet-dialog header h2 {
  margin-top: 2px;
  color: var(--scrap-ink);
  font-size: 24px;
  line-height: 1.05;
  text-shadow: none;
  transform: rotate(-.3deg);
}
.is-handdrawn-mode .sheet-dialog header button {
  width: 44px;
  height: 44px;
  border: 2px solid var(--scrap-line);
  border-radius: 13px 9px 14px 10px;
  background: #fff5dd;
  box-shadow: 3px 3px 0 var(--scrap-rust);
  font-size: 18px;
}
.is-handdrawn-mode .sheet-content {
  height: calc(100% - 68px);
  padding: 14px 14px 32px;
  background: var(--scrap-paper);
  scrollbar-color: var(--scrap-sage) var(--scrap-paper-2);
  scrollbar-width: thin;
}
.is-handdrawn-mode .sheet-content > :first-child { margin-top: 0; }
.is-handdrawn-mode .sheet-content p { line-height: 1.5; }
.is-handdrawn-mode .sheet-content small { line-height: 1.4; }

.is-handdrawn-mode .terminal-tabs,
.is-handdrawn-mode .collection-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: 0 0 10px;
  padding: 5px;
  border: 1.5px solid var(--scrap-line);
  border-radius: 12px 9px 13px 8px;
  background: var(--scrap-paper-2);
  box-shadow: 3px 3px 0 rgba(48,57,54,.2);
  scrollbar-width: none;
}
.is-handdrawn-mode .terminal-tabs::-webkit-scrollbar,
.is-handdrawn-mode .collection-tabs::-webkit-scrollbar,
.is-handdrawn-mode .region-selector::-webkit-scrollbar,
.is-handdrawn-mode .archive-series-selector::-webkit-scrollbar { display: none; }
.is-handdrawn-mode .terminal-tabs button,
.is-handdrawn-mode .collection-tabs button {
  flex: 1 0 auto;
  min-width: 72px;
  min-height: 40px;
  padding: 6px 10px;
  color: var(--scrap-muted);
  border: 1.5px solid transparent;
  border-radius: 9px 7px 10px 6px;
  background: transparent;
  font-size: 10px;
  font-weight: 800;
}
.is-handdrawn-mode .terminal-tabs button.is-active,
.is-handdrawn-mode .collection-tabs button.is-active {
  color: #fff8e9;
  border-color: var(--scrap-line);
  background: var(--scrap-rust);
  box-shadow: 2px 2px 0 var(--scrap-rust-dark);
}

.is-handdrawn-mode .region-selector,
.is-handdrawn-mode .archive-series-selector {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  margin: 10px -1px 12px;
  padding: 2px 2px 6px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.is-handdrawn-mode .region-selector button,
.is-handdrawn-mode .archive-series-selector button {
  flex: 0 0 112px;
  min-height: 58px;
  padding: 8px 9px;
  scroll-snap-align: start;
  color: var(--scrap-ink);
  border: 1.5px solid var(--scrap-line);
  border-radius: 11px 8px 13px 9px;
  background: var(--scrap-paper-2);
  box-shadow: 2px 3px 0 rgba(48,57,54,.22);
  text-align: left;
}
.is-handdrawn-mode .region-selector button b,
.is-handdrawn-mode .archive-series-selector button b { font-size: 11px; }
.is-handdrawn-mode .region-selector button small,
.is-handdrawn-mode .region-selector button em,
.is-handdrawn-mode .archive-series-selector button small { color: var(--scrap-muted); font-size: 8px; }
.is-handdrawn-mode .region-selector button.is-active,
.is-handdrawn-mode .archive-series-selector button.is-active {
  border-color: var(--scrap-line);
  background: #f1cf8e;
  box-shadow: 3px 3px 0 var(--scrap-rust);
  transform: rotate(-.35deg);
}
.is-handdrawn-mode .region-selector button.is-locked { opacity: .58; }

.is-handdrawn-mode .archive-summary,
.is-handdrawn-mode .loot-pool-banner,
.is-handdrawn-mode .build-resource-strip,
.is-handdrawn-mode .archive-family-note,
.is-handdrawn-mode .roster-intro,
.is-handdrawn-mode .scanner-milestone,
.is-handdrawn-mode .structure-protocol,
.is-handdrawn-mode .core-gate-note,
.is-handdrawn-mode .automation-intro,
.is-handdrawn-mode .arena-disclaimer {
  color: var(--scrap-ink);
  border: 1.5px solid var(--scrap-line);
  border-left: 5px solid var(--scrap-sage-dark);
  border-radius: 8px 13px 9px 11px;
  background: var(--scrap-paper-2);
  box-shadow: 3px 3px 0 rgba(48,57,54,.22);
}
.is-handdrawn-mode .archive-summary,
.is-handdrawn-mode .archive-family-note { display: grid; gap: 3px; padding: 10px 11px; }
.is-handdrawn-mode .archive-summary strong,
.is-handdrawn-mode .archive-family-note strong { color: var(--scrap-rust-dark); font-size: 14px; }
.is-handdrawn-mode .archive-summary span,
.is-handdrawn-mode .archive-family-note span { font-size: 10px; line-height: 1.4; }
.is-handdrawn-mode .archive-summary small,
.is-handdrawn-mode .loot-pool-banner small,
.is-handdrawn-mode .loot-pool-banner p { color: var(--scrap-muted); font-size: 9px; }
.is-handdrawn-mode .loot-pool-banner { padding: 10px; }
.is-handdrawn-mode .loot-pool-banner > i { color: var(--scrap-rust); }
.is-handdrawn-mode .build-resource-strip { min-height: 42px; padding: 8px 10px; }
.is-handdrawn-mode .build-resource-strip span { font-size: 10px; }
.is-handdrawn-mode .build-resource-strip small { color: var(--scrap-muted); font-size: 9px; line-height: 1.35; }

.is-handdrawn-mode .base-attribute-grid {
  gap: 0;
  overflow: hidden;
  border: 1.5px solid var(--scrap-line);
  border-radius: 10px 14px 8px 12px;
  background: #f1d99e;
  box-shadow: 3px 3px 0 rgba(48,57,54,.25);
}
.is-handdrawn-mode .base-attribute-grid span {
  min-width: 0;
  padding: 9px 3px;
  border: 0;
  border-right: 1px dashed var(--scrap-sage-dark);
  background: transparent;
  box-shadow: none;
}
.is-handdrawn-mode .base-attribute-grid span:last-child { border-right: 0; }
.is-handdrawn-mode .base-attribute-grid small { color: var(--scrap-muted); font-size: 9px; }
.is-handdrawn-mode .base-attribute-grid b { color: var(--scrap-ink); font-size: 18px; }
.is-handdrawn-mode .build-focus,
.is-handdrawn-mode .attribute-panel > article,
.is-handdrawn-mode .attribute-panel > section:not(.build-guide),
.is-handdrawn-mode .trial-summary,
.is-handdrawn-mode .arena-rating,
.is-handdrawn-mode .fishing-summary,
.is-handdrawn-mode .gems-summary,
.is-handdrawn-mode .idle-reward-card {
  border: 1.5px solid var(--scrap-line);
  border-radius: 11px 8px 13px 9px;
  background: var(--scrap-paper-2);
  box-shadow: 3px 3px 0 rgba(48,57,54,.22);
}
.is-handdrawn-mode .build-focus header { background: #d7dda9; }
.is-handdrawn-mode .attribute-grid em { color: var(--scrap-muted); font-size: 10px; }
.is-handdrawn-mode .attribute-grid b { font-size: 14px; }

.is-handdrawn-mode .stage-card,
.is-handdrawn-mode .collection-card,
.is-handdrawn-mode .achievement-row,
.is-handdrawn-mode .task-card,
.is-handdrawn-mode .build-guide-card,
.is-handdrawn-mode .character-card,
.is-handdrawn-mode .creation-hero,
.is-handdrawn-mode .preset-card,
.is-handdrawn-mode .locker-item,
.is-handdrawn-mode .skill-card,
.is-handdrawn-mode .advanced-card,
.is-handdrawn-mode .pursuit-card,
.is-handdrawn-mode .wardrobe-slot {
  color: var(--scrap-ink);
  border: 1.5px solid var(--scrap-line);
  border-radius: 12px 8px 14px 9px;
  background: var(--scrap-paper-2);
  box-shadow: 3px 3px 0 rgba(48,57,54,.24);
}
.is-handdrawn-mode .stage-list { gap: 9px; }
.is-handdrawn-mode .stage-card { min-height: 82px; padding: 9px; }
.is-handdrawn-mode .stage-card h3 { font-size: 13px; }
.is-handdrawn-mode .stage-card p,
.is-handdrawn-mode .stage-card small,
.is-handdrawn-mode .enemy-traits { color: var(--scrap-muted); font-size: 9px; line-height: 1.4; }
.is-handdrawn-mode .stage-card.is-current { background: #f1d28e; box-shadow: 3px 3px 0 var(--scrap-rust); }
.is-handdrawn-mode .stage-card.is-boss { border-left: 5px solid var(--scrap-rust); background: #eed39b; }
.is-handdrawn-mode .stage-card.is-elite { border-left: 5px solid var(--scrap-sage-dark); background: #d9d8b9; }
.is-handdrawn-mode .stage-card button,
.is-handdrawn-mode .task-card button,
.is-handdrawn-mode .sheet-primary,
.is-handdrawn-mode .equip-button,
.is-handdrawn-mode .fishing-action {
  min-height: 42px;
  padding-inline: 11px;
  color: #fff8e9;
  border: 1.5px solid var(--scrap-line);
  border-radius: 9px 6px 10px 7px;
  background: var(--scrap-sage-dark);
  box-shadow: 2px 3px 0 var(--scrap-line);
  font-weight: 800;
}
.is-handdrawn-mode button:disabled { filter: grayscale(.35); opacity: .58; box-shadow: none; }

.is-handdrawn-mode .collection-grid { gap: 9px; }
.is-handdrawn-mode .collection-card { min-height: 140px; padding: 9px; }
.is-handdrawn-mode .collection-card img { image-rendering: auto; }
.is-handdrawn-mode .collection-card h3 { margin: 5px 0 2px; font-size: 12px; }
.is-handdrawn-mode .collection-card small { color: var(--scrap-muted); font-size: 9px; }
.is-handdrawn-mode .achievement-row { min-height: 62px; padding: 10px; opacity: .7; }
.is-handdrawn-mode .achievement-row.is-unlocked { border-left: 5px solid var(--scrap-sage-dark); background: #d8dfb7; opacity: 1; }
.is-handdrawn-mode .achievement-row strong { font-size: 12px; }
.is-handdrawn-mode .achievement-row small,
.is-handdrawn-mode .achievement-row em { color: var(--scrap-muted); font-size: 9px; }

.is-handdrawn-mode .build-guide { gap: 8px; }
.is-handdrawn-mode .attribute-panel .build-guide-card { min-height: 80px; padding: 9px; background: var(--scrap-paper-2); }
.is-handdrawn-mode .attribute-panel .build-guide-card.is-active { border-left: 5px solid var(--scrap-rust); background: #efd79e; }
.is-handdrawn-mode .build-guide-card > i { border-radius: 9px 6px 10px 7px; background: #f8eed7; color: var(--scrap-rust); }
.is-handdrawn-mode .build-guide-card header h3 { font-size: 13px; }
.is-handdrawn-mode .build-guide-card header small,
.is-handdrawn-mode .build-guide-card p { color: var(--scrap-muted); font-size: 9px; line-height: 1.45; }

.is-handdrawn-mode .region-banner {
  min-height: 128px;
  padding: 14px;
  border: 1.5px solid var(--scrap-line);
  border-radius: 13px 9px 15px 10px;
  box-shadow: 4px 4px 0 rgba(48,57,54,.28);
}
.is-handdrawn-mode .region-banner small { font-size: 9px; }
.is-handdrawn-mode .region-banner h3 { font-size: 22px; }
.is-handdrawn-mode .region-banner p { max-width: 235px; font-size: 10px; }
.is-handdrawn-mode .region-banner > span { font-size: 9px; }

.is-handdrawn-mode .scanner-heading small,
.is-handdrawn-mode .scanner-milestone header span,
.is-handdrawn-mode .scanner-milestone small,
.is-handdrawn-mode .upgrade-panel > p,
.is-handdrawn-mode .rate-list b small { color: var(--scrap-muted); font-size: 9px; }
.is-handdrawn-mode .scanner-rates { border: 1.5px solid var(--scrap-line); border-radius: 10px 7px 12px 8px; background: var(--scrap-paper-2); }
.is-handdrawn-mode .scanner-rates summary { min-height: 42px; padding: 10px; font-size: 10px; }

.is-handdrawn-mode .creation-dialog form { background: var(--scrap-paper); }
.is-handdrawn-mode .creation-dialog header { border-bottom: 2px dashed var(--scrap-sage-dark); background: var(--scrap-paper-2); }
.is-handdrawn-mode .creation-dialog header small { color: var(--scrap-sage-dark); font-size: 9px; letter-spacing: .08em; }
.is-handdrawn-mode .creation-dialog header h2 { font-size: 23px; }
.is-handdrawn-mode .creation-dialog header p { color: var(--scrap-muted); font-size: 10px; line-height: 1.5; }
.is-handdrawn-mode .creation-hero { min-height: 82px; background: var(--scrap-paper-2); }
.is-handdrawn-mode .creation-hero.is-selected,
.is-handdrawn-mode .character-card.is-active { color: var(--scrap-ink); border-left: 5px solid var(--scrap-rust); background: #efd79e; }
.is-handdrawn-mode .creation-hero small,
.is-handdrawn-mode .creation-hero p,
.is-handdrawn-mode .character-card small,
.is-handdrawn-mode .character-card p,
.is-handdrawn-mode .character-card span,
.is-handdrawn-mode .character-card strong { color: var(--scrap-muted); font-size: 9px; }
.is-handdrawn-mode .creation-name input { min-height: 46px; border: 1.5px solid var(--scrap-line); background: #fff6df; font-size: 14px; }
.is-handdrawn-mode .creation-later,
.is-handdrawn-mode .creation-submit { min-height: 48px; }

.is-handdrawn-mode .battle-screen > header,
.is-handdrawn-mode .battle-label,
.is-handdrawn-mode .battle-result {
  color: var(--scrap-ink);
  border: 1.5px solid var(--scrap-line);
  border-radius: 11px 8px 13px 9px;
  background: rgba(247,237,214,.94);
  box-shadow: 3px 3px 0 rgba(48,57,54,.28);
}
.is-handdrawn-mode .battle-screen > header { border-top: 0; border-radius: 0 0 13px 9px; }
.is-handdrawn-mode .battle-callout {
  min-width: 148px;
  padding: 8px 12px;
  color: #fff8e9;
  border: 1.5px solid var(--scrap-line);
  border-radius: 10px 7px 12px 8px;
  background: var(--scrap-sage-dark);
  box-shadow: 3px 3px 0 var(--scrap-line);
}
.is-handdrawn-mode .hp-track { border: 1.5px solid var(--scrap-line); background: var(--scrap-paper-3); }
.is-handdrawn-mode .battle-result button { min-height: 44px; border-color: var(--scrap-line); background: var(--scrap-rust); box-shadow: 3px 3px 0 var(--scrap-rust-dark); }

@media (max-width: 370px) {
  .is-handdrawn-mode .sheet-content { padding: 11px 10px 28px; }
  .is-handdrawn-mode .sheet-dialog > header { padding-inline: 12px; }
  .is-handdrawn-mode .terminal-tabs button,
  .is-handdrawn-mode .collection-tabs button { min-width: 68px; padding-inline: 7px; }
  .is-handdrawn-mode .region-selector button,
  .is-handdrawn-mode .archive-series-selector button { flex-basis: 104px; }
  .is-handdrawn-mode .stage-card { grid-template-columns: 50px minmax(0, 1fr) 58px; gap: 7px; }
  .is-handdrawn-mode .stage-card img { width: 48px; height: 48px; }
  .is-handdrawn-mode .stage-card button { min-width: 54px; padding-inline: 5px; }
}

@media (max-height: 660px) {
  .is-handdrawn-mode .sheet-dialog > header { min-height: 60px; padding-block: 8px; }
  .is-handdrawn-mode .sheet-dialog header h2 { font-size: 21px; }
  .is-handdrawn-mode .sheet-dialog header button { width: 40px; height: 40px; }
  .is-handdrawn-mode .sheet-content { height: calc(100% - 60px); padding-top: 10px; }
}

/* v13.6 — authored Forbidden body motion and small-phone fit. */
.is-handdrawn-mode .hero-board.is-idle-look .hero-sprite { animation: camp-idle-look .95s ease-in-out both; }
.is-handdrawn-mode .hero-board.is-idle-tool-check .hero-sprite { animation: camp-idle-tool-check 1s cubic-bezier(.2,.8,.2,1) both; }
.is-handdrawn-mode .hero-board.is-idle-step .hero-sprite { animation: camp-idle-step .92s ease-in-out both; }
.is-handdrawn-mode .hero-board.is-idle-vent .hero-sprite { animation: camp-idle-vent 1s steps(6, end) both; }
.is-handdrawn-mode .hero-board.is-idle-reactor .hero-sprite { animation: camp-idle-reactor 1s ease-in-out both; }
@keyframes camp-idle-look { 0%,100% { transform: none; } 28% { transform: rotate(-2deg) translate(-2px,-2px); } 62% { transform: rotate(2.2deg) translate(2px,-3px); } }
@keyframes camp-idle-tool-check { 0%,100% { transform: none; } 25% { transform: translate(-5px,2px) rotate(-2deg); } 58% { transform: translate(4px,-2px) rotate(2.5deg); } 78% { transform: translate(-1px,0) rotate(-.5deg); } }
@keyframes camp-idle-step { 0%,100% { transform: none; } 24% { transform: translate(-5px,-3px) rotate(-1.5deg); } 52% { transform: translate(6px,-5px) rotate(1.5deg); } 76% { transform: translate(-2px,-1px); } }
@keyframes camp-idle-vent { 0%,100% { transform: none; filter: drop-shadow(0 7px 0 rgba(55,72,45,.18)); } 42% { transform: translateY(3px) scale(.985,1.02); } 62% { transform: translateY(-5px) scale(1.02,.99); filter: drop-shadow(0 7px 0 rgba(55,72,45,.18)) brightness(1.12); } }
@keyframes camp-idle-reactor { 0%,100% { transform: none; filter: drop-shadow(0 7px 0 rgba(55,72,45,.18)); } 32% { transform: translateY(2px) scale(.985); } 58% { transform: translateY(-4px) scale(1.025); filter: drop-shadow(0 0 9px rgba(184,95,70,.72)) brightness(1.16); } 78% { transform: translateY(-1px) scale(1.008); } }

.is-handdrawn-mode .player-unit.gear-siege.is-attack #player-battle-doll,
.is-handdrawn-mode .player-unit.gear-siege.is-counter #player-battle-doll { animation: forbidden-siege-punch .62s cubic-bezier(.16,.8,.18,1); }
.is-handdrawn-mode .player-unit.gear-chainblade.is-attack #player-battle-doll,
.is-handdrawn-mode .player-unit.gear-chainblade.is-combo #player-battle-doll { animation: forbidden-chain-sweep .64s steps(8, end); }
.is-handdrawn-mode .player-unit.gear-ghost.is-dodge #player-battle-doll { animation: forbidden-ghost-step .54s ease-out; }
.is-handdrawn-mode .player-unit.gear-reactor.is-skill #player-battle-doll,
.is-handdrawn-mode .player-unit.gear-reactor.is-repair #player-battle-doll { animation: forbidden-reactor-pulse .7s ease-in-out; }
@keyframes forbidden-siege-punch { 0%,100% { transform: none; } 20% { transform: translate(-25px,6px) rotate(-7deg) scale(.96); } 53% { transform: translate(88px,-30px) rotate(8deg) scale(1.08); } 72% { transform: translate(32px,-14px) rotate(-2deg) scale(.98); } }
@keyframes forbidden-chain-sweep { 0%,100% { transform: none; } 18% { transform: translate(-18px,4px) rotate(-8deg); } 42% { transform: translate(58px,-38px) rotate(12deg); } 62% { transform: translate(82px,-19px) rotate(-5deg) scale(1.05); } 78% { transform: translate(34px,-9px) rotate(3deg); } }
@keyframes forbidden-ghost-step { 0%,100% { transform: none; opacity: 1; } 24% { transform: translate(-42px,-8px) skewX(-5deg); opacity: .58; } 58% { transform: translate(28px,-18px) skewX(3deg); opacity: .84; } }
@keyframes forbidden-reactor-pulse { 0%,100% { transform: none; filter: none; } 34% { transform: translateY(3px) scale(.97,1.035); } 62% { transform: translateY(-8px) scale(1.045,.98); filter: drop-shadow(0 0 12px rgba(184,95,70,.82)) brightness(1.22); } }
.is-core-mode .battle-vfx.uses-handdrawn-vfx.vfx-forbidden {
  background-image: url("../assets/monster-trail/effects/handdrawn-v1/forbidden-overdrive.png");
  animation-name: handdrawn-signal;
  animation-duration: .66s;
}

.is-handdrawn-mode .gear-slot.rarity-rare,
.is-handdrawn-mode .gear-slot.rarity-epic { box-shadow: 3px 3px 0 #68899a, inset 0 0 0 2px rgba(104,137,154,.18); }
.is-handdrawn-mode .gear-slot.rarity-legendary,
.is-handdrawn-mode .gear-slot.rarity-relic { box-shadow: 3px 3px 0 #d2aa62, inset 0 0 0 2px rgba(210,170,98,.24); }
.is-handdrawn-mode .gear-slot.rarity-mythic { box-shadow: 3px 3px 0 #b85f46, inset 0 0 0 2px rgba(184,95,70,.22); }
.is-handdrawn-mode .gear-slot.rarity-anomaly { box-shadow: 3px 3px 0 #7fd9b5, inset 0 0 0 2px rgba(127,217,181,.25); }

@media (max-width: 390px) {
  .is-handdrawn-mode .region-selector button,
  .is-handdrawn-mode .archive-series-selector button { flex-basis: 128px; min-height: 62px; }
  .is-handdrawn-mode .region-selector button b,
  .is-handdrawn-mode .archive-series-selector button b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 340px) and (max-height: 620px) {
  .game-shell { height: 100dvh; min-height: 0; }
  .status-bar { height: 62px; padding: max(7px, env(safe-area-inset-top)) 7px 6px; }
  .player-badge { min-width: 118px; gap: 5px; }
  .player-badge > img { width: 40px; height: 40px; }
  .player-badge strong { max-width: 62px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
  .player-badge i { width: 66px; }
  .currency-row { gap: 3px; }
  .currency-row > span { padding-inline: 6px; }
  .authority-status { width: 34px !important; }
  .authority-status b, .authority-status small { display: none; }
  .is-core-mode .hero-board { height: 224px; margin-top: 5px; }
  .is-core-mode .hero-pedestal { inset: 29px 72px 30px; }
  .is-core-mode .hero-sprite { width: 154px; height: 154px; }
  .is-core-mode .gear-slot { width: 45px; height: 45px; }
  .is-core-mode .slot-head, .is-core-mode .slot-chest { top: 40px; }
  .is-core-mode .slot-left-arm, .is-core-mode .slot-right-arm { top: 88px; }
  .is-core-mode .slot-legs, .is-core-mode .slot-back { top: 136px; }
  .is-core-mode .core-stats { left: 60px; right: 60px; bottom: 3px; padding: 5px 2px; }
  .is-core-mode .core-stats small { font-size: 7px; }
  .is-core-mode .core-stats b { font-size: 12px; }
  .is-core-mode .power-plaque { top: 4px; padding: 3px 10px; }
  .is-core-mode .salvage-yard { height: calc(100% - 62px - 224px - 5px - 62px); min-height: 0; margin-top: 5px; }
  .is-core-mode .task-ribbon { left: 7px; right: 7px; height: 40px; padding-inline: 7px; }
  .is-core-mode .task-ribbon > i { font-size: 16px; }
  .is-core-mode .task-ribbon strong { font-size: 10px; }
  .is-core-mode .task-ribbon em { font-size: 8px; }
  .is-core-mode .chest-level { top: 47px; min-width: 112px; padding: 3px 8px; }
  .is-core-mode .chest-stage { top: 59px; height: 104px; min-height: 88px; }
  .is-core-mode #chest-sprite { width: 104px; height: 94px; }
  .is-core-mode .camp-message { bottom: 47px; font-size: 8px; }
  .is-core-mode .chest-control-row { left: 7px; right: 7px; bottom: 5px; }
  .is-core-mode .open-chest-button { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .is-handdrawn-mode .hero-board .hero-sprite,
  .is-handdrawn-mode .player-unit #player-battle-doll { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* v13.7 — authored sprite poses driven by one visual-only frame index. */
.sprite-strip,
.animated-paper-layer {
  --sprite-frame: 0;
  --sprite-frames: 1;
  --sprite-x: 0%;
  display: block;
  background-image: var(--sprite-sheet);
  background-repeat: no-repeat;
  background-size: calc(var(--sprite-frames) * 100%) 100%;
  background-position: var(--sprite-x) 0;
  image-rendering: auto;
}

.paper-doll.is-true-animated { overflow: visible; }
.paper-doll.is-true-animated .animated-paper-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  clip-path: none;
  transform: none;
  filter: none;
}
.paper-doll.is-true-animated .animated-paper-layer.layer-back { z-index: 1; }
.paper-doll.is-true-animated .animated-paper-layer.layer-base { z-index: 2; }
.paper-doll.is-true-animated .animated-paper-layer.layer-legs { z-index: 3; }
.paper-doll.is-true-animated .animated-paper-layer.layer-chest { z-index: 4; }
.paper-doll.is-true-animated .animated-paper-layer.layer-leftArm { z-index: 5; }
.paper-doll.is-true-animated .animated-paper-layer.layer-rightArm { z-index: 6; }
.paper-doll.is-true-animated .animated-paper-layer.layer-head { z-index: 7; }
.paper-doll.is-true-animated .animated-paper-layer.layer-structure { z-index: 9; }
.paper-doll.is-true-animated .animated-paper-layer.layer-signature { z-index: 10; }
.paper-doll.is-true-animated .animated-paper-layer.signature-zero-blackbox { z-index: 1; }

.is-handdrawn-mode .hero-sprite.is-true-animated,
.is-handdrawn-mode .hero-board[class*="is-idle-"] .hero-sprite.is-true-animated,
.is-handdrawn-mode .player-unit #player-battle-doll.is-true-animated,
.is-handdrawn-mode .player-unit[class*="is-"] #player-battle-doll.is-true-animated {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}

.is-core-mode .chest-stage { overflow: visible; }
.scanner-animation,
.wreck-animation {
  position: absolute;
  bottom: 0;
  filter: drop-shadow(4px 6px 0 rgba(52,56,55,.2));
}
.scanner-animation {
  z-index: 3;
  left: -8px;
  width: 88px;
  height: 88px;
}
.wreck-animation {
  z-index: 2;
  right: -5px;
  width: 142px;
  height: 142px;
}
.chest-stage.is-opening #chest-sprite,
.is-core-mode .chest-stage.is-opening #chest-sprite,
.is-core-mode .chest-stage.is-reveal #chest-sprite { animation: none; }

.enemy-battle-animation {
  width: 154px;
  height: 154px;
  margin: 13px 0 0 auto;
  filter: drop-shadow(0 9px 0 rgba(40,57,34,.24));
}
.battle-screen.is-boss .enemy-battle-animation,
.is-core-mode .battle-screen.is-boss .enemy-battle-animation { width: 214px; height: 214px; }
.is-handdrawn-mode .enemy-unit[class*="is-"] .enemy-battle-animation {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}

@media (max-width: 340px) and (max-height: 620px) {
  .scanner-animation { left: 2px; width: 62px; height: 62px; }
  .wreck-animation { right: 2px; width: 100px; height: 100px; }
}