/* [codex] 2026-10-23 保留原養成畫面樣式，移除舊題材選擇器。 */
/* [claude code] 2026-10-18 v0.3 castle UI (portrait-first). Loaded after style.css. */
:root {
  --bg: #181c1b;
  --panel: #1f2522;
  --panel2: #262d29;
  --line: #353b36;
  --text: #eeeade;
  --muted: #8e9690;
  --accent: #d65e43;
  --gold: #e9b949;
  --good: #79c27a;
}
.shell.v3 {
  max-width: var(--portrait-width);
  padding-top: 0;
}
.art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  display: block;
}
.art.res {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: -4px;
}
.art.sk {
  width: 40px;
  height: 40px;
  float: left;
  margin: 0 8px 4px 0;
}
.art.chest {
  width: 44px;
  height: 44px;
}
.top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-rows: auto auto;
  gap: 4px 10px;
  align-items: center;
  padding: calc(env(safe-area-inset-top) + 8px) 0 8px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.top .lv {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 60px;
}
.top .lv b {
  font-size: 13px;
}
.bar {
  display: block;
  height: 4px;
  background: #2f3832;
  border-radius: 2px;
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  background: var(--gold);
}
.top .stamina,
.top .cur {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  white-space: nowrap;
}
.top .stamina small {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0;
}
.top .stamina em {
  font-style: normal;
  font-size: 10px;
  color: var(--muted);
  margin-left: 4px;
}
.top-btns {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.tb {
  position: relative;
  min-height: 32px;
  padding: 0 12px;
  background: var(--panel2);
  border: 1px solid var(--line);
  font-size: 12px;
}
.tb .dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.shell.v3 main {
  padding: 12px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sec {
  font-size: 15px;
  margin: 6px 0 0;
}
.note {
  font-size: 12px;
  color: var(--muted);
  background: var(--panel);
  border-left: 3px solid var(--accent);
  padding: 8px 10px;
}
.help {
  font-size: 12px;
  color: var(--muted);
}
.warn {
  color: #f0b46a;
  font-size: 12px;
}
.center {
  text-align: center;
}
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card h3 {
  font-size: 14px;
}
.btn {
  min-height: 42px;
  padding: 0 12px;
  background: var(--panel2);
  border: 1px solid #4a534c;
  font-size: 13px;
}
.btn.primary {
  background: var(--accent);
  border-color: #e88a6f;
  color: #fff6ea;
}
.btn.danger {
  border-color: #b9533f;
  color: #ffb4a1;
}
.btn.wide,
.launch-button.wide {
  width: 100%;
}
.mini {
  min-height: 34px;
  padding: 0 10px;
  background: var(--panel2);
  border: 1px solid #4a534c;
  font-size: 12px;
  white-space: nowrap;
}
.row2,
.row3 {
  display: grid;
  gap: 8px;
}
.row2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.row3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.seg {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.seg button {
  flex: 1 0 auto;
  min-height: 36px;
  padding: 0 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.seg button.on {
  color: var(--text);
  border-color: var(--accent);
  background: #3a2620;
}
.seg.small button {
  min-height: 30px;
  font-size: 11px;
}
.bar-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}
.bar-line select {
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--line);
  min-height: 34px;
  font: inherit;
  font-size: 12px;
}
.pill {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border: 1px solid #6c7a6e;
  color: #c9d3c4;
  margin-left: 4px;
  vertical-align: 2px;
}
.pill.boss {
  border-color: var(--accent);
  color: #ffb19a;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--panel2);
  border: 1px solid var(--line);
  padding: 3px 8px;
  font-size: 12px;
}
.chip small {
  color: var(--muted);
  letter-spacing: 0;
}

/* castle */
.rating {
  text-align: center;
}
.rating small {
  display: block;
  color: var(--muted);
}
.rating b {
  font-size: 34px;
  font-family: system-display, sans-serif;
  letter-spacing: 2px;
  color: #ffe2b8;
}
.rating span {
  display: block;
  font-size: 11px;
}
.bay {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 76px;
  align-items: center;
  gap: 6px;
}
.bay .lord-hero {
  width: 100%;
  max-width: 260px;
  margin: auto;
  position: static;
  transform: none;
  filter: drop-shadow(0 14px 18px #0008);
}
.bay .col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.slot small {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0;
}
.statgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  font-size: 12px;
}
.statgrid div {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 6px;
  text-align: center;
}

/* item tiles */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px;
}
.tile {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  min-height: 0;
  padding: 6px;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--tc, #888) 32%, #1c211e), #171b19 75%);
  border: 2px solid var(--tc, #555);
  border-radius: 6px;
}
.slot .tile {
  width: 64px;
}
.tile.empty {
  --tc: #444b46;
  opacity: 0.55;
}
.tile.picked {
  outline: 3px solid #fff2c9;
  outline-offset: -5px;
}
.tile .t-stars {
  position: absolute;
  left: 3px;
  bottom: 1px;
  font-size: 9px;
  color: #ffd76a;
  letter-spacing: -1px;
}
.tile .t-enh {
  position: absolute;
  right: 3px;
  top: 1px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px #000;
}
.tile .t-lock {
  position: absolute;
  left: 2px;
  top: 0;
  font-size: 10px;
}
.tile .t-eq {
  position: absolute;
  right: 3px;
  bottom: 1px;
  font-size: 9px;
  background: var(--accent);
  color: #fff;
  padding: 0 3px;
}
.tile.big {
  width: 92px;
  flex: none;
}

/* item sheet */
.modal.sheet {
  max-height: min(88dvh, 820px);
  overflow-y: auto;
}
.item-top {
  display: flex;
  gap: 12px;
  align-items: center;
}
.stars-big {
  color: #ffd76a;
  font-size: 18px;
  letter-spacing: 2px;
}
.mainstat {
  font-size: 15px;
  font-weight: 700;
}
.block {
  border-top: 1px solid var(--line);
  padding-top: 8px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.block h4,
.modal h4 {
  font-size: 13px;
  margin: 8px 0 4px;
}
.affixes {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
}
.affixes.pick {
  list-style: none;
  padding-left: 0;
}
.sockets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.socket {
  min-height: 56px;
  background: #151917;
  border: 1px dashed #59625b;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  text-align: center;
}
.socket.filled {
  border-style: solid;
  color: var(--text);
}
.socket.filled img {
  width: 28px;
  height: 28px;
}
.socket.locked {
  opacity: 0.6;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.actions .btn {
  flex: 1 1 40%;
}
.check {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: 12px;
  color: var(--muted);
}
.check input {
  margin-top: 2px;
}
.sets {
  display: grid;
  gap: 8px;
}
.set {
  background: var(--panel2);
  border: 1px solid var(--line);
  padding: 8px;
}

/* gems */
.gemrow h4 {
  font-size: 13px;
  margin: 4px 0;
}
.gemrow small {
  color: var(--muted);
  letter-spacing: 0;
}
.gemcells {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}
.gemcell {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 11px;
}
.gemcell img {
  width: 34px;
  height: 34px;
}
.gemcell.dim {
  opacity: 0.4;
}
.gem-lv {
  font-size: 9px;
  color: var(--muted);
}
.gemcell .mini {
  min-height: 26px;
  padding: 0 6px;
  font-size: 10px;
}

/* arsenal */
.wcard {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 10px;
}
.wcard > img {
  width: 64px;
  height: 64px;
}
.wcard.locked {
  opacity: 0.6;
}
.wcard h3 {
  font-size: 14px;
}
.wcard h3 small {
  color: var(--muted);
  letter-spacing: 0;
}
.wbody {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}
.specline {
  color: #c9d3c4;
}
details summary {
  cursor: pointer;
  color: #f0b46a;
  font-size: 12px;
  min-height: 32px;
  display: flex;
  align-items: center;
}
.modtier {
  margin: 6px 0;
}
.modtier small {
  color: var(--muted);
  letter-spacing: 0;
}
.mod {
  min-height: 48px;
  text-align: left;
  font-size: 11px;
  padding: 6px 8px;
  background: var(--panel2);
  border: 1px solid var(--line);
}
.mod.on {
  border-color: var(--good);
  color: #d9f7d9;
}
.mod b {
  color: #f0b46a;
}

/* skills */
.tier > small {
  color: var(--muted);
  letter-spacing: 0;
  font-size: 11px;
}
.nodes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 4px;
}
.node {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
}
.node h4 {
  margin: 0;
  font-size: 13px;
}
.node p {
  color: #c9d3c4;
}
.node small {
  color: var(--muted);
  letter-spacing: 0;
}
.node.active {
  border-color: #6aa7c9;
  grid-column: span 2;
}
.node.ult {
  border-color: #c9a35f;
  grid-column: span 2;
}
.node.dim {
  opacity: 0.5;
}
.nodefoot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

/* campaign */
.stages {
  display: grid;
  gap: 6px;
}
.stage {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 8px 10px;
}
.stage.on {
  border-color: var(--accent);
  background: #2d221d;
}
.stage.locked {
  opacity: 0.5;
}
.stage .sl {
  font-family: system-display, monospace;
  color: var(--muted);
}
.stage .st {
  color: #ffd76a;
}
.brief p {
  font-size: 12px;
}
.picks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.pick {
  min-height: 70px;
  background: var(--panel2);
  border: 1px solid var(--line);
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10px;
}
.pick img {
  width: 40px;
  height: 40px;
}
.pick.on {
  border-color: var(--accent);
  background: #3a2620;
}
.card small {
  color: var(--muted);
  letter-spacing: 0;
}

/* quests / shop */
.qrow {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}
.qrow > div {
  flex: 1;
  min-width: 0;
}
.qrow h4 {
  margin: 0;
  font-size: 13px;
}
.qrow small {
  letter-spacing: 0;
}
.qrow.hot h4::after {
  content: " ★";
  color: var(--gold);
}
.result-stars {
  text-align: center;
  font-size: 30px;
  color: #ffd76a;
}

/* battle: two skill buttons */
.skill-btn {
  position: absolute;
  bottom: max(3%, env(safe-area-inset-bottom));
  width: 17%;
  aspect-ratio: 1;
  min-width: 48px;
  border: 1px solid #e59665;
  border-radius: 50%;
  background: #bd5538cc;
  color: #eceddb;
  touch-action: none;
  padding: 6px;
  overflow: hidden;
}
#skill-button {
  right: max(4%, env(safe-area-inset-right));
  width: 17%;
  font-size: inherit;
}
#skill-button-2 {
  right: calc(max(4%, env(safe-area-inset-right)) + 19%);
}
.skill-btn img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  pointer-events: none;
}
.skill-btn small {
  display: block;
  font-size: 9px;
  letter-spacing: 0;
  pointer-events: none;
}
.skill-btn i {
  position: absolute;
  inset: 0;
  background: conic-gradient(#000a var(--p), transparent 0);
  pointer-events: none;
}
.skill-btn.unavailable {
  background: #30372ccc;
  border-color: #677357;
  color: #b8c2aa;
}

/* [claude code] 2026-10-18 progress bars, quest states, slot stat, skill equip */
.pbar {
  height: 5px;
  background: #2f3832;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}
.pbar i {
  display: block;
  height: 100%;
  background: var(--gold);
}
.qrow.ready {
  background: #2c2a1c;
  border-left: 3px solid var(--gold);
  padding-left: 8px;
}
.qrow.ready .mini {
  background: var(--accent);
  border-color: #e88a6f;
  color: #fff6ea;
}
.qrow.claimed {
  opacity: 0.45;
}
.qrow.claimed .pbar i {
  background: #6b7a6d;
}
.slot .slot-stat {
  color: #e9c98a;
  font-size: 10px;
  white-space: nowrap;
}
.pill.on {
  border-color: var(--good);
  color: #d9f7d9;
}
.node .eq {
  margin-top: 6px;
}
.node .eq .mini.on {
  border-color: var(--good);
  color: #d9f7d9;
  opacity: 1;
}

/* [claude code] 2026-10-18 v0.4: orb button, battle touch lock, red dots, modes, grades, result, compare, board */
.orb-btn {
  left: max(4%, env(safe-area-inset-left));
  background: #2c5c78cc;
  border-color: #8fd3ff;
}
.orb-btn.unavailable {
  background: #2a3236bb;
  border-color: #5d6d74;
}
body.in-battle,
body.in-battle #battle {
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.nav-item .dot,
.slot .dot,
.mode-card .dot {
  position: absolute;
  top: 6px;
  right: 18%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4b3a;
  box-shadow: 0 0 0 2px var(--bg);
}
.slot {
  position: relative;
}
.slot .dot {
  top: -2px;
  right: 2px;
  z-index: 2;
}
.mode-card .dot {
  position: static;
  display: inline-block;
  margin-left: 6px;
  vertical-align: 2px;
}
.modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #2a2420, #1f2522);
  border: 1px solid #6b4a3a;
  color: var(--text);
  text-align: left;
}
.mode-card b {
  font-size: 14px;
}
.mode-card small {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0;
}
.mode-card:disabled {
  opacity: 0.5;
}
.grade {
  font: 700 12px system-ui;
  min-width: 20px;
  text-align: center;
  padding: 1px 4px;
  border: 1px solid currentColor;
}
.grade-big {
  text-align: center;
  font: 800 44px system-ui;
  line-height: 1;
  margin: 2px 0 6px;
}
.gS {
  color: #ffd76a;
}
.gA {
  color: #ff8f5a;
}
.gB {
  color: #9fd3ff;
}
.gC {
  color: #a7b297;
}
.newbest {
  color: #ffd76a;
  font-weight: 700;
}
.cmp .up {
  color: #ff5a4a;
  font-weight: 700;
}
.cmp .down {
  color: #4fc27a;
  font-weight: 700;
}
.board {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 40vh;
  overflow: auto;
}
.board li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 5px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.board li.me {
  background: #3a2a20;
}
.board li em {
  font-style: normal;
  color: var(--gold);
}

/* [claude code] 2026-10-18 red dots explain themselves */
.why {
  border: 1px solid #a8432f;
  border-left: 4px solid #ff4b3a;
  background: #2b1d19;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.why p {
  margin: 0;
  font-size: 13px;
  color: #ffd9c9;
}
.grid.small {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.tile .t-up {
  position: absolute;
  left: 3px;
  top: 0;
  font: 800 14px system-ui;
  color: #ff4b3a;
  text-shadow: 0 1px 2px #000;
}
.wcard.hint,
.node.hint {
  border-color: #c4553d;
  box-shadow: inset 3px 0 0 #ff4b3a;
}
.pill.up {
  border-color: #ff4b3a;
  color: #ffb3a3;
}
.mini.go {
  background: var(--accent);
  border-color: #e88a6f;
  color: #fff6ea;
}

/* [claude code] 2026-10-18 modal actions never sit flush against the loot / list above them */
.modal > * + .row2,
.modal > * + .row3,
.modal > * + .btn.wide {
  margin-top: 10px;
}
.modal > .row2 + .row3,
.modal > .row3 + .btn.wide,
.modal > .row2 + .btn.wide,
.modal > .btn.wide + .btn.wide {
  margin-top: 8px;
}

/* [claude code] 2026-10-18 gear: green dot on the better item / slot, red dot on 一鍵最佳 */
.dot.green {
  background: #3fcf6a !important;
}
.slot .dot.second {
  right: 14px;
}
.btn.has-dot {
  position: relative;
}
.btn.has-dot .dot,
.tile .dot.t-better {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff4b3a;
  box-shadow: 0 0 0 2px var(--bg);
}

/* [claude code] 2026-10-18 account form */
.account-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.field input {
  min-height: 40px;
  padding: 6px 10px;
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--line);
  font: inherit;
  font-size: 16px;
}
.field input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
#account-error:empty {
  display: none;
}

/* [claude code] 2026-10-18 castle slot: enhance line + bar */
.slot .slot-enh {
  font-size: 10px;
  white-space: nowrap;
}
.slot .slot-enh.on {
  color: #ffd76a;
  font-weight: 700;
}
.slot .slot-enh.zero,
.slot .slot-enh.off {
  color: #7d867f;
}
.slot .ebar {
  width: 64px;
  height: 3px;
  background: #2f3832;
  border-radius: 2px;
  overflow: hidden;
}
.slot .ebar i {
  display: block;
  height: 100%;
  background: #ffd76a;
}
.slot small b {
  font-weight: 700;
}

/* [claude code] 2026-10-18 v0.4.3 enhance preview + modification buttons */
.enh-next {
  font-size: 13px;
}
.enh-next .up {
  color: #ff5a4a;
}
.muted.small {
  font-size: 11px;
  margin: 2px 0;
}
.mod {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-align: left;
}
.mod .mdiff {
  color: #e9c98a;
  font-size: 11px;
  letter-spacing: 0;
}
.mod .mstate {
  font-size: 11px;
  color: var(--muted);
}
.mod.go {
  border-color: var(--accent);
}
.mod.go .mstate {
  color: #fff6ea;
  background: var(--accent);
  padding: 1px 6px;
}
.mod.on .mstate {
  color: #d9f7d9;
}

#battle-overlay {touch-action:pan-y;}

/* [claude code] 2026-10-22 體力可點(開補給面板)· 主城塗裝列 · 選寶石清單 */
.top button.stamina{background:none;border:0;padding:0;margin-right:8px;color:inherit;font:inherit;cursor:pointer;min-width:0;overflow:hidden}
/* 窄螢幕:恢復倒數只放在體力面板與 title,不擠到金幣上 */
@media (max-width:420px){.top .stamina em{display:none}}
.top .stamina-plus{font-style:normal;font-weight:700;font-size:12px;line-height:14px;width:14px;height:14px;border-radius:50%;background:var(--gold);color:#10161a;display:inline-grid;place-items:center}
.castle-skins{margin:8px 0}
.castle-skins h4{margin:0 0 6px;font-size:12px;color:var(--muted);font-weight:500}
.castle-skin-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.castle-skin{flex:0 0 76px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;background:#151917;border:1px solid #3a433d;border-radius:8px;color:var(--text)}
.castle-skin.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.castle-skin img{width:44px;height:44px;object-fit:contain}
.castle-skin small{font-size:11px;line-height:1.25;text-align:center}
.castle-skin em{display:block;font-style:normal;font-size:10px;color:var(--muted)}
.gem-pick-type{display:flex;align-items:center;gap:6px;margin:12px 0 6px}
.gem-pick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.gem-pick{display:flex;align-items:center;gap:8px;padding:6px 8px;background:#151917;border:1px solid #3a433d;border-radius:8px;color:var(--text);text-align:left}
.gem-pick img{width:30px;height:30px;flex:0 0 30px}
.gem-pick span{display:flex;flex-direction:column;min-width:0;flex:1}
.gem-pick small{font-size:11px;color:var(--muted)}
.gem-pick em{font-style:normal;font-size:12px;color:var(--gold)}

/* [claude code] 2026-10-22 突破說明 · 詞條品質色 · 洗練列 · 部位格寶石孔(改畫在裝備格子內靠下緣,不寫空 N) */
.upgrade-guide h4{display:flex;gap:6px;align-items:center}
.upgrade-steps{margin:4px 0 8px;padding-left:20px;font-size:13px;line-height:1.5}
.upgrade-steps li.done{color:var(--muted);text-decoration:line-through}
.affix-q{position:relative;display:flex;justify-content:space-between;gap:8px;width:100%;padding:2px 6px 4px;border-radius:4px}
.affix-q em{font-style:normal;font-size:11px;font-weight:700;white-space:nowrap}
.affix-q i{position:absolute;left:0;bottom:0;height:2px;background:currentColor;opacity:.7;border-radius:2px}
.affix-q.q1{color:#a3aba7}.affix-q.q2{color:#62d47e}.affix-q.q3{color:#58a6ff}.affix-q.q4{color:#c07bff}.affix-q.q5{color:#ffc93c}
ul.affixes{padding-left:0}
ul.affixes li{list-style:none}
ul.affixes li.kept{opacity:.55}
.refine-rows{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.refine-row{position:relative;display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid #3a433d;border-radius:8px;background:#151917;cursor:pointer}
.refine-row input{position:absolute;opacity:0;pointer-events:none}
.refine-row .affix-q{flex:1}
.refine-row b{font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
.refine-row.on{border-color:var(--gold);background:#2a2716}
.refine-row.on b{color:var(--gold)}
.gem-craft-all{margin-top:8px}
.tile .t-gems{position:absolute;left:0;right:0;bottom:4px;display:flex;justify-content:center;gap:2px;pointer-events:none}
.tile .t-gems .gp{width:6px;height:6px;border-radius:50%;border:1px solid #d2dcd8;background:#0b1214cc;display:inline-block}
.tile .t-gems .gp.on{background:var(--gc);border-color:var(--gc);box-shadow:0 0 3px var(--gc)}
.tile .t-gems .gp.locked{border-style:dashed;opacity:.45}
.tile.has-gems .t-stars{bottom:11px} /* stars sit above the socket pips */

/* [claude code] 2026-10-22 P 拆四條:戰鬥 HUD 四格(手動可點)· P 強化分配設定 */
#battle .battle-controls #power-status{flex:1 1 150px;min-width:120px;padding:2px 4px}
#power-status .ptrack-head{display:block;margin:0 0 3px;font:600 10px/14px system-ui;color:#c9d7d2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#power-status .ptrack-head.bank{color:#ffd27c}
#power-status .ptracks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
#power-status .ptrack{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:34px;padding:1px 0;border:1px solid #5f6f70;border-radius:6px;background:#1c3036;color:#d6e4df;font:600 10px/12px system-ui}
#power-status .ptrack b{font-size:13px;line-height:15px;color:#ffe3b2}
#power-status .ptrack.full{border-color:#9ae6d1}
#power-status .ptrack.full b{color:#9ae6d1}
#power-status .ptrack.off{opacity:.35}
#power-status .ptrack.next{border-color:#ffb86e;box-shadow:0 0 6px #ffb86e66}
#power-status button.ptrack{pointer-events:auto;cursor:pointer;touch-action:none}
#power-status button.ptrack.can{border-color:#ffd27c;background:#3a3218;box-shadow:0 0 8px #ffd27c88}
#power-status button.ptrack:disabled{opacity:.55}
.power-plan{margin:10px 0;padding:8px 10px;border:1px solid #3a433d;border-radius:8px}
.power-plan legend{padding:0 4px;font-weight:700}
.pplan-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pplan-modes .btn{display:flex;flex-direction:column;gap:2px;padding:6px 4px;min-height:58px}
.pplan-modes .btn small{font-size:10px;line-height:1.3;color:var(--muted,#9aa3a0);font-weight:400}
.pplan-modes .btn[aria-pressed="true"]{border-color:var(--gold,#ffc93c);background:#2a2716}
.pplan-order{margin:4px 0 6px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.pplan-order li{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:3px 6px;border:1px solid #3a433d;border-radius:6px;font-size:12px}
.pplan-order .btn{min-height:24px;min-width:28px;padding:0 6px}
.power-plan > small{display:block;font-size:11px;color:var(--muted,#9aa3a0)}

/* [claude code] 2026-10-22 出擊鈕固定在畫面下方(導覽列上面),第一屏就看得到 */
.launch-button.campaign-launch{position:sticky;bottom:calc(80px + env(safe-area-inset-bottom));z-index:15;box-shadow:0 -6px 18px #0009}

/* [claude code] 2026-10-22 戰鬥右上角鏡頭倍率鈕(外觀跟 ⋯ 鈕一樣) */
#battle #zoom-button{position:static;flex:0 0 44px;width:44px;min-width:44px;max-width:44px;min-height:44px;padding:3px;font-size:11px;font-weight:700;border:1px solid #536f75;border-radius:8px;background:#102127ee;color:#d7f1ff}

/* [claude code] 2026-10-22 突破階外框:紅裝(tc4)紅色粗框 + 外光;彩裝(fx-rainbow)彩虹框與彩虹字 */
.tile.tc4,.gear-card.tc4{box-shadow:inset 0 0 0 2px #0b1214d9,inset 0 0 0 4px var(--tc),inset 0 0 16px color-mix(in srgb,var(--tc) 45%,transparent),0 0 12px 2px color-mix(in srgb,var(--tc) 65%,transparent)}
.tier-name.tc4{text-shadow:0 0 12px color-mix(in srgb,currentColor 80%,transparent)}
.tile.fx-rainbow,.gear-card.fx-rainbow{border-color:transparent;background:radial-gradient(circle at 50% 35%,#3a2440,#171b19 75%) padding-box,conic-gradient(from 210deg,#ff5d5d,#ffb347,#fff35c,#6dff8a,#5ccbff,#b07cff,#ff5d5d) border-box;box-shadow:inset 0 0 14px #ffffff22,0 0 12px 2px #ff7ad966,0 0 18px 4px #5ccbff33}
.tier-name.fx-rainbow{background:linear-gradient(90deg,#ff5d5d,#ffb347,#fff35c,#6dff8a,#5ccbff,#b07cff);-webkit-background-clip:text;background-clip:text;color:transparent!important;text-shadow:none}
/* [claude code] 2026-10-22 精華升星按鈕:說明小字換行 */
.modal [data-essgo] small{display:block;margin-top:2px;font-size:11px;font-weight:400;opacity:.8}