/* [codex] 2026-10-23 保留原養成畫面樣式，移除舊題材選擇器。 */
/* Presentation only: existing artwork, game rules and rarity colours are preserved. */
:root {
  --bg: #121b1b;
  --panel: #1b2929;
  --panel2: #243535;
  --line: #3b5050;
  --text: #f2efe5;
  --muted: #acb9b4;
  --accent: #d96d4b;
}
body {
  background: radial-gradient(ellipse at 50% 15%, #263b3b, #0b1214 75%);
  color: var(--text);
}
.shell.v3 {
  background: linear-gradient(180deg, #192828, var(--bg) 560px);
  border-inline-color: #48615c66;
  box-shadow: 0 0 80px #0005;
}
.top {
  background: #142020f5;
  padding-bottom: 12px;
  border-bottom-color: #6c858055;
}
.top .cur, .top .stamina { font-variant-numeric: tabular-nums; }
.top .cur { padding: 5px 7px; border-radius: 6px; background: #ffffff06; }
.top-btns { margin-top: 4px; }
.tb { min-height: 38px; border-radius: 6px; }
.shell.v3 main { gap: 14px; padding-top: 18px; }
.rating {
  padding: 8px 0 12px;
  border-bottom: 1px solid #77958a33;
}
.rating small { font-size: 11px; letter-spacing: 3px; }
.rating b { font-size: 40px; line-height: 1.35; color: #ffe5af; }
.rating span { color: #bec9c1; font-size: 12px; letter-spacing: 1px; }
.bay {
  position: relative;
  isolation: isolate;
  padding: 14px 0;
  border-radius: 12px;
  background:
    linear-gradient(90deg, #101c1e99, #101c1e18 30%, #101c1e18 70%, #101c1e99),
    url('/assets/castle-pad-v1.webp') center / cover no-repeat,
    #172323;
  border: 1px solid #78918344;
}
.bay::before {
  content: none;
}
.bay .slot small { text-shadow: 0 1px 3px #000, 0 0 6px #000; }
.bay .lord-hero { filter: drop-shadow(0 18px 12px #000a); }
.slot .tile { border-width: 1px; box-shadow: inset 0 0 12px #fff1, 0 5px 12px #0004; }
.slot small { font-size: 11px; }
.slot .slot-enh.off, .slot .slot-enh.zero { color: #a0afa7; }
.note { border-radius: 0 7px 7px 0; line-height: 1.65; }
.statgrid { gap: 6px; }
.statgrid div { padding: 9px 4px; border-radius: 6px; color: #dce8df; }
.card, .wcard, .node, .stage, .mode-card, .set {
  border-radius: 10px;
  box-shadow: 0 5px 16px #0002, inset 0 1px #ffffff05;
}
.wcard { padding: 14px 12px; gap: 12px; }
.wbody { gap: 9px; line-height: 1.6; }
.wcard > img { padding: 4px; border-radius: 8px; background: #0c171755; }
.sec { font-size: 16px; padding-block: 6px; }
.btn, .mini, .pick, .mod, .seg button, .launch-button { border-radius: 6px; }
.btn { min-height: 46px; }
.btn.primary, .launch-button {
  background: linear-gradient(135deg, #e58457, #bb4c36);
  border: 1px solid #ffa97599;
  box-shadow: inset 0 1px #ffe6ba44, 0 4px 12px #0003;
  color: #fff7e9;
  font-weight: 700;
}
.btn.primary:disabled, .launch-button:disabled { box-shadow: none; }
.pick.on, .seg button.on, .stage.on { background: #3c3029; border-color: #e69162; }
.navigation {
  background: #142020f5;
  border-top: 1px solid #65827966;
  box-shadow: 0 -8px 24px #0003;
  gap: 4px;
}
.nav-item { border-radius: 8px; color: #a6b9b0; }
.nav-item.active { background: #c2a66b16; color: #ffe4b1; }
.nav-item.active::before { background: #e49a66; left: 24%; right: 24%; }
.modal { border: 1px solid #61756b; border-radius: 14px; }
.footer { color: var(--muted); font-size: 10px; }
#assist-button {
  position: absolute;
  top: 10%;
  left: 3%;
  min-height: 38px;
  padding: 5px 9px;
  border: 1px solid #8fa8a8;
  border-radius: 6px;
  background: #102027e8;
  color: #e2ece9;
  font-size: 11px;
  touch-action: manipulation;
}
#assist-button[aria-pressed="true"] { border-color: #7fe2c3; color: #baffdf; background: #153b35ee; }
#clarity-button {
  position:absolute;
  top:14%;
  right:3%;
  min-height:38px;
  padding:5px 9px;
  border:1px solid #8fa8a8;
  border-radius:6px;
  background:#102027e8;
  font-size:11px;
}
#assist-button { top:14%; }
#clarity-button[aria-pressed="true"] { color:#baffdf; border-color:#7fe2c3; }
#battle .skill-btn small { position:relative; z-index:1; font-size:12px; font-weight:700; text-shadow:0 1px 3px #000; }
.skill-btn { padding:4px; }
.skill-btn img { width:60%;height:60%; }
.damage-analysis { margin-block:14px; padding:12px; background:#142225; border:1px solid #536c68; border-radius:8px; }
.damage-analysis p { margin-block:8px; font-size:12px; }
.damage-analysis small { color:#b4c4bd; font-size:11px; }
.damage-row { display:grid; grid-template-columns:6.5em minmax(0,1fr) 3em; gap:6px; align-items:center; font-size:12px; }
.damage-row meter { width:100%; accent-color:#edb267; }
.damage-row b { text-align:right; }
.damage-analysis .coach-tip { color:#ffdfa8; border-top:1px solid #536c68; padding-top:8px; }
.pickup-guide { border:1px solid #546a62; border-radius:8px; background:#192b2c; padding:4px 12px; }
.pickup-guide summary { min-height:44px; font-size:13px; }
.pickup-guide p { margin-block:8px; font-size:12px; line-height:1.7; }
.pickup-settlement { padding:9px 11px; border-left:3px solid #edb267; background:#1f302d; color:#ffe0a5; font-size:12px; }
#power-status {
  position:absolute;
  left:24%;
  bottom:max(3%, env(safe-area-inset-bottom));
  width:31%;
  padding:9px 6px;
  background:#17292df2;
  border:1px solid #e9b278;
  border-radius:8px;
  box-shadow:0 3px 12px #0008;
  text-align:center;
  pointer-events:none;
  color:#ffe3b2;
}
#power-status strong { display:block; font-size:clamp(13px,3.6vw,16px); line-height:1.3; }
#power-status small { display:block; font:11px/1.5 system-ui; letter-spacing:0; margin-top:5px; }
.power-segments { display:flex; gap:3px; margin-top:7px; }
.power-segments i { flex:1; height:8px; background:#30434a; border:1px solid #5f6f70; border-radius:2px; }
.power-segments i.lit { background:#ffb86e; border-color:#ffe3b2; box-shadow:0 0 5px #ffc67c55; }
#power-status.full { border-color:#9ae6d1; color:#d3ffec; }
#power-status.full .lit { background:#87ddc4; border-color:#c3ffe9; }
.node.magnet-node { grid-column:span 2; border-color:#8dc4bd; padding:12px; }
.magnet-next { color:#ffe0a5 !important; }
.magnet-summary p { margin-top:5px; }
.magnet-heading { display:flex; align-items:center; gap:9px; }
.magnet-heading .art { width:36px; height:36px; object-fit:contain; }
.chapter-scene {
  position: relative;
  overflow: hidden;
  width: 100%;
  border: 1px solid #7e968666;
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 6px 18px #0004;
}
.chapter-scene img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}
.chapter-scene h2 {
  position: absolute;
  inset: auto 0 0;
  margin: 0;
  padding: 24px 12px 10px;
  background: linear-gradient(transparent, #091416eb);
  color: #fff2d9;
  text-shadow: 0 2px 4px #000;
  font-size: clamp(14px, 4vw, 17px);
  line-height: 1.4;
}
@media (hover: hover) {
  .btn:not(:disabled):hover, .mini:not(:disabled):hover, .tb:hover,
  .pick:not(:disabled):hover, .tile:hover { filter: brightness(1.15); }
}
@media (max-width: 360px) {
  .bay { grid-template-columns: 72px minmax(0, 1fr) 72px; gap: 2px; }
  .top { column-gap: 5px; }
  .top .cur { padding-inline: 3px; }
  .top .stamina em { display: none; }
}

.weapon-resources { display:grid; gap:5px; margin:10px 0; padding:9px 10px; background:#08191a80; border:1px solid #81c5bd25; border-radius:7px; }
.weapon-resource { display:flex; flex-wrap:wrap; align-items:center; gap:5px; font-size:12px; color:#c6e4df; font-variant-numeric:tabular-nums; }
.weapon-resource b { margin-left:auto; font-size:11px; }
.weapon-resource.short { color:#ffb59e; }

/* castle notifications explain the dot and lead directly to its action. */
.castle-tasks { margin:0 0 14px; padding:12px; border:1px solid #b47c4b66; border-radius:9px; background:linear-gradient(120deg,#3c2e21aa,#172c2aaa); }
.castle-tasks > b { display:block; margin-bottom:8px; color:#f7d9a3; font-size:12px; }
.castle-tasks > div { display:flex; flex-wrap:wrap; gap:7px; }
.task-chip { display:flex; align-items:center; gap:5px; padding:8px 10px; border:1px solid #a1855266; border-radius:6px; background:#102422; color:#f9e5bf; font-size:12px; }
.task-chip span { margin-left:6px; color:#f4a86c; }
.chest-entry { border-color:#ac815363; }
.chest-entry h3 { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.chest-entry .art.chest { width:42px; height:42px; object-fit:contain; }
.chest-entry .pill { margin-left:auto; }
.chest-modal { overflow-x:hidden; }
.chest-stage { position:relative; isolation:isolate; text-align:center; padding:22px 10px 16px; border:1px solid #83b7af33; border-radius:12px; overflow:hidden; background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--chest-color) 22%,transparent),transparent 65%),linear-gradient(#102a2b,#0a171c); }
.chest-stage h3,.chest-message { position:relative; margin:8px 0; }
.chest-message { color:#c2e8df; font-size:13px; }
.chest-orbit { pointer-events:none; position:absolute; z-index:-1; width:210px; height:210px; left:50%; top:20px; margin-left:-105px; border:1px dashed var(--chest-color); border-radius:50%; opacity:.45; animation:chest-orbit 12s linear infinite; }
.chest-orbit::after { content:""; position:absolute; inset:12px; border:1px solid var(--chest-color); border-radius:50%; }
.chest-seal,.chest-emblem { display:grid; place-items:center; position:relative; width:180px; height:160px; margin:0 auto; border:0; background:transparent; border-radius:50%; }
.chest-seal { cursor:pointer; touch-action:manipulation; }
.chest-seal:focus-visible { outline:2px solid #fff0c4; outline-offset:2px; }
.chest-stage .reveal-chest { width:140px; height:140px; object-fit:contain; filter:drop-shadow(0 0 18px var(--chest-color)); }
.charged .reveal-chest { animation:chest-charge 1.6s ease-in-out infinite; }
.pending .reveal-chest { animation:chest-charge .8s ease-in-out infinite; opacity:.65; }
.revealed .chest-orbit { animation:chest-unseal .65s ease-out both; }
.revealed .chest-emblem { height:95px; }
.revealed .reveal-chest { width:95px; height:95px; animation:chest-arrive .45s ease-out both; }
.chest-prizes { margin:14px 0; }
.chest-prizes .chip { animation:chest-arrive .4s ease-out both; }
.chest-equipment { display:grid; gap:9px; margin-top:12px; }
.chest-prize { display:flex; align-items:center; gap:12px; min-width:0; padding:10px; border:1px solid var(--tc); border-radius:8px; background:linear-gradient(100deg,color-mix(in srgb,var(--tc) 13%,#102021),#102021); animation:chest-arrive .4s ease-out both; animation-delay:calc(min(var(--reveal-index),20) * 75ms); }
.chest-prize .tile { width:62px; height:62px; flex-shrink:0; }
.chest-prize > div { min-width:0; }
.chest-prize small { display:block; margin-top:5px; color:#e3d4a3; }
@keyframes chest-charge { 0%,100% { transform:translateY(2px) rotate(-2deg); } 50% { transform:translateY(-7px) rotate(2deg); } }
@keyframes chest-orbit { to { transform:rotate(360deg); } }
@keyframes chest-unseal { from { opacity:.8; transform:scale(.7); } to { opacity:0; transform:scale(1.8); } }
@keyframes chest-arrive { from { opacity:0; transform:translateY(14px) scale(.94); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (prefers-reduced-motion:reduce) {
 .chest-orbit,.chest-stage .reveal-chest,.chest-prize,.chest-prizes .chip { animation:none; }
 .revealed .chest-orbit { opacity:0; }
}

.chest-stage { user-select:none; -webkit-user-select:none; }
.chest-stage img { pointer-events:none; -webkit-user-drag:none; }

.recycle-summary { text-align:center; padding:15px 12px; border:1px solid #73cdb13d; border-radius:10px; background:radial-gradient(ellipse at top,#27655366,transparent),#102522; }
.recycle-mark { display:grid; place-items:center; width:42px; height:42px; margin:0 auto 10px; border:1px solid #8be1b5; border-radius:50%; color:#b7f5d1; background:#24563c; font-size:25px; }
.recycle-summary h3 { margin:0 0 6px; }
.recycle-summary p { margin:0; color:#a8c8be; font-size:12px; }
.recycle-materials { display:grid; gap:10px; margin:16px 0; }
.recycle-material { display:flex; align-items:center; gap:10px; padding:13px 11px; border:1px solid #769c8d55; border-radius:9px; background:linear-gradient(110deg,#233b37,#132626); }
.recycle-material > .art.res { width:36px; height:36px; flex-shrink:0; object-fit:contain; }
.recycle-material > div { flex:1; min-width:0; }
.recycle-material h3 { margin:0 0 4px; font-size:14px; color:#f6e7be; }
.recycle-material p { font-size:11px; line-height:1.5; color:#bbd0ca; margin:0 0 5px; }
.recycle-material small { color:#8fada5; font-size:11px; }
.recycle-material > strong { flex-shrink:0; color:#b1f2c9; font-size:21px; font-variant-numeric:tabular-nums; }
.recycle-gems { margin:12px 0; padding:10px; border:1px solid #77c6a555; border-radius:8px; }
@media(max-width:350px) { .recycle-material { gap:8px; padding:10px 8px; flex-wrap:wrap; } .recycle-material > strong { font-size:18px; } }

.recycle-modal { user-select:none; -webkit-user-select:none; }

@media(max-width:350px) { .recycle-modal .modal-title h2 { font-size:18px; } }

#skill-status { position:absolute; top:23%; left:50%; transform:translateX(-50%); width:max-content; max-width:82%; padding:6px 11px; border:1px solid #b4e3f299; border-radius:7px; background:#10212cf0; color:#e2f8ff; font-size:12px; font-weight:700; text-align:center; pointer-events:none; box-shadow:0 0 14px #80d9ff25; }
#skill-status[hidden] { display:none; }

#skill-status { top:21.5%; font-size:11px; line-height:16px; max-height:46px; overflow:hidden; box-sizing:border-box; }

.lord-display { min-width:0; display:flex; flex-direction:column; align-items:center; gap:7px; }
.lord-rating { width:100%; padding:5px 3px 7px; display:flex; justify-content:center; flex-wrap:wrap; align-items:baseline; column-gap:7px; text-align:center; background:linear-gradient(90deg,transparent,#0a1b20b3,transparent); border-radius:7px; }
.lord-rating small { font-size:10px; color:#bed1ca; }
.lord-rating b { font:700 24px/1.1 system-ui; color:#ffe5af; font-variant-numeric:tabular-nums; }
.lord-rating span { flex-basis:100%; color:#c0d0c7; font-size:9px; margin-top:3px; }
.weapon-costs { display:inline-flex; flex-wrap:wrap; justify-content:center; align-items:center; column-gap:8px; row-gap:3px; }
.weapon-cost { display:inline-flex; align-items:center; gap:3px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.weapon-cost small { font-size:.85em; opacity:.85; }
.weapon-cost.short { color:#ffbea6; }
[data-wup] { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px; line-height:1.65; }
@media(max-width:350px) { .lord-rating b { font-size:21px; } .weapon-costs { column-gap:6px; font-size:12px; } }

/* lord library: portrait first; the same shared build is previewed on each craft. */
.hero-switch{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;gap:8px;align-items:center;margin:10px 0 14px}
.hero-switch>.btn{min-height:48px;font-size:25px;padding:0}
.hero-library-link{display:flex;flex-direction:column;align-items:center;gap:5px;min-height:52px;border:1px solid #52685e;border-radius:9px;background:#152a28;color:#f8e7bd;padding:9px}
.hero-library-link b{font-size:14px}.hero-library-link small{font-weight:400;color:#b8ccc3;font-size:11px}.hero-library-link span{font-size:11px;color:#b8ccc3}
.hero-modal{width:min(560px,calc(100vw - 24px));padding-bottom:20px}
.hero-modal .modal-title{position:sticky;top:0;background:#182722;z-index:2}
.hero-modal .eyebrow{font-size:10px;letter-spacing:.03em;line-height:1.6}
.hero-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:14px 0}
.hero-card{min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;background:#10201f;border:1px solid #405650;border-radius:8px;padding:8px 3px;color:#edf0df;text-align:center}
.hero-card img{width:100%;height:72px;object-fit:contain}.hero-card b{font-size:13px}.hero-card span{font-size:10px;color:#b5cdc4}.hero-card small{font-size:9px;line-height:1.5;color:#d8c698}
.hero-card.selected{border-color:#f1b171;background:linear-gradient(150deg,#3b3325,#162a26);box-shadow:inset 0 0 0 1px #f1b17155}
.hero-preview{border:1px solid #3c544d;border-radius:10px;padding:14px;background:radial-gradient(ellipse at top,#334b41,#101f1e);text-align:center}
.hero-preview>img{display:block;object-fit:contain;width:100%;height:185px;margin:0 auto 12px}.hero-preview h3{margin:0;color:#ffe0ad;font-size:17px}.hero-preview p{font-size:12px;line-height:1.8;color:#c3d4ca}
.hero-bonuses{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}.hero-bonus{display:inline-block;border:1px solid #476558;border-radius:5px;background:#152b24;color:#c8f2cf;padding:4px 6px;font-size:10px;line-height:1.5}.hero-bonus.tradeoff{border-color:#805749;background:#38271f;color:#ffc3a7}
.hero-compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0 14px}.hero-compare>div{min-width:0;display:flex;flex-direction:column;gap:5px;border:1px solid #3a524a;border-radius:6px;padding:9px 5px;text-align:center;background:#112420}.hero-compare small{font-size:10px;color:#b4cac0}.hero-compare b{font-size:15px;color:#f1ead2}.hero-compare em{display:block;margin-top:3px;font:normal 11px system-ui}.hero-compare .positive{color:#a2eab6}.hero-compare .negative{color:#ffad8f}
.hero-mod{border-top:1px solid #40574b;margin-top:17px;padding-top:13px}.hero-mod h3{font-size:15px;margin:0}.hero-mod .pill{font-size:10px}.hero-mod-cost{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0;color:#e6dcb7;font-size:12px}.hero-mod-cost span{display:inline-flex;align-items:center;gap:3px}.hero-mod-cost small{font-size:10px;color:#b7c4ba}.hero-mod-cost .short,.hero-mod-cost .short small{color:#ffae8d}
.hero-branches{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hero-branch{padding:12px 8px;display:flex;flex-direction:column;gap:10px;border:1px solid #4d6457;border-radius:7px;background:#1c322b;color:#e2e8d7;min-width:0;text-align:left}.hero-branch-title{display:flex;flex-direction:column;gap:5px}.hero-branch b{font-size:12px}.hero-branch small{font-size:10px;color:#f3cf94}.hero-branch .hero-bonuses{justify-content:flex-start}.hero-branch.selected{border-color:#f5b170;background:#393022}.hero-branch:disabled{opacity:.5}.hero-branch.selected:disabled{opacity:1}
.hero-campaign{display:flex;gap:8px;align-items:center;justify-content:space-between;border-bottom:1px solid #3b5148;margin-bottom:13px;padding-bottom:12px;font-size:12px}.hero-campaign .btn{font-size:11px;padding:8px;min-height:36px}
@media(max-width:350px){.hero-grid{gap:4px}.hero-card img{height:58px}.hero-card small{font-size:8px}.hero-branch{padding:10px 6px}.hero-preview>img{height:160px}}

/* Always-visible castle shortcuts and explicit star objectives. */
.campaign-hub{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 14px}.campaign-hub>button{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:5px;padding:11px 12px;border:1px solid #4b655a;border-radius:9px;background:linear-gradient(130deg,#223b32,#152723);color:#f2e7c5;text-align:left;min-height:59px}.campaign-hub b{font-size:13px}.campaign-hub small{font-size:10px;line-height:1.5;color:#b6cdc2}.campaign-hub .ready{border-color:#efb576;background:linear-gradient(130deg,#493a23,#26352a)}
.chapter-star-strip{width:100%;display:flex;align-items:center;gap:12px;padding:12px;margin:10px 0;border:1px solid #726443;border-radius:8px;background:linear-gradient(105deg,#302e20,#192e27);color:#f2d89c;text-align:left}.chapter-star-strip>b{font-size:18px;white-space:nowrap}.chapter-star-strip>span{flex:1;font-size:12px}.chapter-star-strip small{display:block;margin-top:4px;font-size:10px;color:#b9c9ba}.chapter-star-strip em{font-size:23px;font-style:normal}.chapter-star-strip.ready{border-color:#eeb071;box-shadow:inset 3px 0 #eeb071}
.star-checklist{margin:12px 0;padding:10px 12px;background:#142823;border:1px solid #405c4f;border-radius:7px;font-size:12px}.star-checklist summary{color:#e8ce91;cursor:pointer}.star-checklist ul{list-style:none;margin:9px 0;padding:0;display:grid;gap:7px}.star-checklist li{color:#b7c8bd;line-height:1.6}.star-checklist li>span{margin-right:7px;color:#98afa1}.star-checklist li.done,.star-checklist li.done>span{color:#f0d082}.star-checklist>small{font-size:10px;line-height:1.7;color:#a9c3b7}
.quick-sweep-label{display:block;margin:14px 0 8px;font-size:12px;color:#dacb9f}#quick-sweep-stage{width:100%;max-width:100%;min-height:43px;padding:10px;border:1px solid #5c7363;border-radius:7px;background:#152c25;color:#f4ecd3;font-size:12px}.quick-sweep-stage{display:flex;flex-direction:column;gap:7px;padding:12px;border:1px solid #415b4d;background:#162d25;border-radius:7px;color:#eae3c7}.quick-sweep-stage>b{font-size:14px}.quick-sweep-stage>b>span{float:right;color:#ffe098}.quick-sweep-stage>small{font-size:11px;color:#bfd6c7}.quick-sweep-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:13px 0}.quick-sweep-actions .btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;min-height:62px}.quick-sweep-actions b{font-size:13px}.quick-sweep-actions small{font-size:10px}.quick-sweep-actions .btn:disabled{opacity:.4}.sweep-empty{text-align:center;padding:16px 6px}.sweep-empty>b{font-size:42px;color:#dccb98}.sweep-empty p{font-size:12px;line-height:1.9;color:#b8c9bf}
.sweep-loot{margin:16px 0;padding:14px;border:1px solid #d7ae6b;border-radius:9px;background:linear-gradient(135deg,#383423,#183329);animation:sweep-reward-in .24s ease-out}.sweep-loot h3{font-size:15px;color:#ffe0a6;margin:0 0 11px}.sweep-loot .chips{gap:6px}.sweep-loot .chip{padding:8px}.sweep-loot .grid{margin-top:10px}.three-star-unlock{text-align:center;padding:12px;border:1px solid #c89e53;border-radius:7px;background:#40351e;color:#ffe29f;font-size:13px}
.chapter-star-summary{padding:17px;text-align:center;margin:14px 0;border:1px solid #79653b;border-radius:9px;background:radial-gradient(ellipse at top,#3a3e27,#192d25)}.chapter-star-summary h3{font-size:15px;margin:0 0 10px}.chapter-star-summary>b{font-size:35px;line-height:1.2;color:#ffe09a}.chapter-star-summary>b>small{font-size:18px;color:#afbea4}.chapter-star-summary .pbar{margin:12px 0 9px}.chapter-star-summary p{font-size:11px;color:#cfceab;line-height:1.7}.chapter-star-summary.complete{border-color:#ffe09a}
.chapter-star-prize{margin:13px 0;padding:12px;border:1px solid #465e4f;border-radius:8px;background:#172c25}.chapter-star-prize.ready{border-color:#e3b06c;background:linear-gradient(130deg,#373523,#182d25)}.chapter-star-prize h4{font-size:20px;color:#efd397;margin:0}.chapter-star-prize .chips{margin:10px 0;gap:6px}.chapter-star-prize .chip{padding:6px}.chapter-star-stage-list{display:grid;gap:7px;margin:10px 0 15px}.chapter-star-stage{display:flex;justify-content:space-between;gap:8px;align-items:center;width:100%;padding:12px;border:1px solid #466251;border-radius:7px;background:#182e26;color:#dfdfc5;font-size:12px;text-align:left}.chapter-star-stage b{color:#ffe09c;white-space:nowrap}.chapter-star-stage:disabled{opacity:.45}
@keyframes sweep-reward-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.sweep-loot{animation:none}}
@media(max-width:350px){.campaign-hub>button{padding:9px}.campaign-hub b{font-size:12px}.campaign-hub small{font-size:9px}.chapter-star-strip{gap:8px}.chapter-star-strip>b{font-size:16px}}

.chapter-star-summary .full-star-reward{margin:10px 0 0;padding:9px 7px;border:1px solid #967b43;border-radius:6px;background:#332f1e;color:#ffe3a1;font-size:11px;font-weight:700;line-height:1.8}
.chapter-star-prize{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px}.chapter-star-prize>.bar-line{grid-column:1/-1}.chapter-star-prize>.btn{width:auto;max-width:110px;padding:9px 10px;font-size:11px;align-self:center;line-height:1.6}.chapter-star-prize .chips{margin:10px 0 0}
.store-modal{width:min(100%,540px)}
.store-wallet{display:flex;gap:8px;justify-content:flex-end;align-items:center;padding:0 0 12px;color:#ffe4a8}.store-wallet img{width:22px;height:22px}
.store-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;position:sticky;top:-1px;z-index:3;background:#142322;padding:8px 0;border-bottom:1px solid #40514b;margin-bottom:14px}
.store-tabs button{padding:10px 2px;font-size:12px;min-width:0;border:1px solid #3b514e;border-radius:7px;color:#b0c3bf;background:#1a302e}.store-tabs .on{background:#9e4930;color:#fff3da;border-color:#e88f61}
.store-product{padding:14px;margin:12px 0;background:linear-gradient(145deg,#203633,#172725);border:1px solid #3e5851;border-radius:12px}.store-product.hot,.store-product.store-focused{border-color:#c08a50}.store-product-top{display:flex;gap:12px;align-items:center;margin-bottom:12px}.store-product h3{margin:0 0 5px}.store-product-top small,.store-holdings{color:#a8bfba;font-size:12px}.store-crate img{height:48px;width:48px;object-fit:contain}.store-holdings{padding:10px 0;line-height:1.9}.store-holdings img{width:18px;height:18px;vertical-align:middle}.store-product .btn{margin-top:7px}.store-product .help{margin-bottom:0}.store-reset{font-size:12px;color:#d0b980}.store-receipt{border:1px solid #e7bd70;background:#26372d;border-radius:12px;padding:14px;margin:12px 0}.store-receipt h3{color:#ffe0a0;margin-top:0}.store-vip{padding:18px;border:1px solid #87744b;background:linear-gradient(135deg,#30392b,#152a2b);border-radius:12px}.store-vip p{line-height:1.7}.store-access{display:grid;gap:10px}.store-access>div{display:flex;gap:14px;padding:12px;background:#112422;border-radius:8px}.store-access b{color:#ffe2a4}.store-access span{font-size:13px;line-height:1.6}.store-skin-preview{background:radial-gradient(ellipse,#40554e,#13221f 72%);border:1px solid #4b6258;border-radius:12px;text-align:center;position:relative;padding:14px}.store-skin-large img{width:100%;max-width:220px;height:230px;object-fit:contain}.store-skin-battle{position:absolute;right:10px;top:10px;background:#102124cc;border-radius:10px;display:grid;justify-items:center;padding:8px;max-width:90px}.store-skin-battle img{width:46px;height:46px;object-fit:contain}.store-skin-battle small{font-size:10px;color:#adc1ba}.store-skin-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:12px 0}.store-skin{display:grid;gap:5px;justify-items:center;border:1px solid #496058;border-radius:8px;background:#172c29;padding:8px 3px;color:#e6e9db;min-width:0}.store-skin.on{border-color:#ffc576;background:#354032}.store-skin img{width:100%;height:65px;object-fit:contain}.store-skin b{font-size:11px}.store-skin small{font-size:11px}.store-skin small img{width:14px;height:14px;vertical-align:middle}.store-free-label{color:#ffe0a0;font-size:10px;display:block}.store-product .short{color:#ffb390}
@media(max-width:360px){.store-skin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.store-tabs button{font-size:11px}}
.star-result-report{margin:16px 0;padding:14px;border:1px solid #556359;border-radius:12px;background:#172b28}.star-result-report h3{margin:0 0 10px}.star-report-summary{padding:10px 12px;border-left:3px solid #e78c61;background:#443729;color:#ffdbb9;font-weight:700;line-height:1.6}.star-report-summary.complete{border-color:#e5c875;background:#344334;color:#ffe2a0}.star-result-row{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;padding:14px 0;border-bottom:1px solid #3b514b}.star-result-icon{font-size:25px;color:#a4b5ad;line-height:1.2}.star-result-row.earned .star-result-icon{color:#ffd777}.star-result-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;line-height:1.5}.star-result-heading b{font-size:14px}.star-result-heading small{font-size:11px;flex-shrink:0;color:#b8c5bd}.star-result-row.failed .star-result-heading small{color:#ffb796}.star-result-row p{font-size:13px;line-height:1.7;margin:7px 0 0;color:#d5e0d7}.star-result-row .star-report-tip{color:#ffd4a7}.star-result-row.earned .star-report-tip{color:#b6d3bf}.star-report-saved{display:block;margin-top:6px;color:#b6d3bf;font-size:12px}.star-report-note{font-size:11px;line-height:1.7;color:#a5bbb0;margin:10px 0 0}
@media(max-width:360px){.star-result-heading{display:block}.star-result-heading small{display:block;margin-top:3px}}

/* The two-row scoring HUD sits above the assist / clarity controls. */
#assist-button, #clarity-button { top:19%; }

.row3 + .campaign-hub { margin-top:12px; }
.growth-card{border-color:#6c7250;background:linear-gradient(140deg,#26352b,#162724)}.growth-card h3,.recovery-card h3{color:#ffe1a4}.guide-goal{display:grid;gap:7px;line-height:1.7;margin:12px 0}.guide-goal small,.growth-card>.help{color:#b1c7ba}.growth-card>.help{display:block;margin-top:12px}.guide-free{padding-bottom:12px;border-bottom:1px solid #465e50;line-height:1.7}.guide-free .btn{margin-top:8px;display:block}.guide-ready{color:#b9e8c4}.recovery-card{border-color:#7fcbb1;background:#1b3730}.recovery-card p{line-height:1.7}.recovery-card small{display:block;color:#b7d9cd;margin:8px 0}#battle-overlay>div{max-height:90%;overflow-y:auto}#battle-overlay .help{font-size:12px;line-height:1.7;color:#abc8be}

/* Non-combat screens are event-driven. Quantize their decorative animations
   to at most 30 visual updates/sec without adding an idle render loop.
   chest-charge has two equal keyframe segments, so its steps are per half. */
body:not(.in-battle) .chest-orbit { animation-timing-function:steps(360,end); }
body:not(.in-battle) .charged .reveal-chest { animation-timing-function:steps(24,end); }
body:not(.in-battle) .pending .reveal-chest { animation-timing-function:steps(12,end); }
body:not(.in-battle) .revealed .chest-orbit { animation-timing-function:steps(19,end); }
body:not(.in-battle) .revealed .reveal-chest { animation-timing-function:steps(13,end); }
body:not(.in-battle) .chest-prizes .chip,
body:not(.in-battle) .chest-prize { animation-timing-function:steps(12,end); }
body:not(.in-battle) .sweep-loot { animation-timing-function:steps(7,end); }
body:not(.in-battle) #toast { transition-timing-function:steps(4,end); }

/* Enhancement feedback uses static arrows and cards, with no idle animation. */
.enhance-results {margin:0 0 22px;padding-bottom:18px;border-bottom:1px solid #43574c;}
.enhance-result-title {display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:0 0 12px;}
.enhance-result-title h3 {margin:0;color:#dff7df;font-size:18px;}
.enhance-result-title>span {font-size:12px;color:#b8dfb2;}
.enhance-rating {display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:11px 12px;margin-bottom:12px;border:1px solid #6d7954;border-radius:8px;background:#303e2d;font-size:13px;}
.enhance-rating strong,.enhance-rating>b {color:#ffe095;}
.enhance-gain-list {display:grid;grid-template-columns:1fr;gap:9px;}
.enhance-gain-card {padding:12px;border:1px solid #53775f;border-left:3px solid #a9d98b;border-radius:8px;background:linear-gradient(110deg,#223d32,#1b2e2b);}
.enhance-gain-top {display:flex;gap:9px;align-items:center;}
.enhance-gain-top>.art {width:36px;height:36px;object-fit:contain;}
.enhance-gain-top>div {display:grid;gap:3px;min-width:0;flex:1;}
.enhance-gain-top b {font-size:14px;color:#edf4df;}
.enhance-gain-top small {font-size:11px;color:#b6dd97;}
.enhance-level {display:flex;gap:8px;align-items:center;font-variant-numeric:tabular-nums;white-space:nowrap;}
.enhance-level>span {font-size:13px;color:#9eafa4;}
.enhance-level strong {font-size:22px;color:#f9de95;}
.enhance-gain-card i {font-style:normal;color:#c4e49e;}
.enhance-stat-change {display:flex;gap:8px;align-items:center;margin-top:10px;font-size:13px;flex-wrap:wrap;font-variant-numeric:tabular-nums;}
.enhance-stat-change>span:first-child {margin-right:auto;color:#d7e3d9;}
.enhance-before {color:#9caea6;}
.enhance-stat-change strong {color:#f5dfaa;}
.enhance-delta {color:#c5edb1;font-size:12px;margin:7px 0 0;}
.enhance-spend {margin-top:13px;padding:11px 12px;background:#142523;border-radius:7px;font-size:12px;}
.enhance-spend .chips {margin:8px 0;}
.enhance-spend>small {color:#afb9ad;}
.slot-upgraded .tile {box-shadow:0 0 0 2px #acd47c;}
.slot .slot-upgrade-gain {font-size:10px;line-height:1.4;color:#d1ef9d;background:#243e2f;border:1px solid #617c4c;border-radius:4px;padding:3px 2px;white-space:normal;}
/* [claude code] 2026-10-21 月卡 × VIP 三欄對照表 */
.store-tiers{width:100%;border-collapse:collapse;margin:12px 0;font-size:12px;table-layout:fixed}.store-tiers th,.store-tiers td{padding:7px 4px;border-bottom:1px solid #3e5851;text-align:center;vertical-align:middle;line-height:1.45;word-break:break-word}.store-tiers thead th{color:#ffe2a4;font-size:13px}.store-tiers thead th:last-child,.store-tiers td:last-child{background:#2b3a2a;color:#ffe9bd}.store-tiers tbody th{text-align:left;color:#a8bfba;font-weight:normal;width:24%}.store-tiers img{width:14px;height:14px;vertical-align:-2px}.store-vip-card{border-color:#87744b}.store-vip-card h4{margin:10px 0 4px;font-size:13px;color:#d0b980}
/* [claude code] 2026-10-21 領取獎勵展示:置中卡片 + 放射光 + 逐個彈出(非戰鬥動畫用 steps 壓在 30 次/秒內) */
.reward-reveal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px;background:radial-gradient(circle at 50% 42%,rgba(60,48,20,.55),rgba(4,10,12,.86) 70%);animation:rr-fade .24s steps(7,end) both}
.rr-card{position:relative;width:min(360px,100%);padding:26px 18px 18px;border:1px solid #c9a35a;border-radius:16px;background:linear-gradient(160deg,#2c3a2c,#122220 70%);box-shadow:0 0 0 1px #00000060,0 18px 50px #000a,0 0 40px #e7bd7033;text-align:center;overflow:hidden;animation:rr-card .42s steps(13,end) both}
.rr-burst{position:absolute;left:50%;top:-120px;width:420px;height:420px;margin-left:-210px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#ffe2a433 0deg 8deg,transparent 8deg 22deg);mask:radial-gradient(circle,#000 18%,transparent 62%);-webkit-mask:radial-gradient(circle,#000 18%,transparent 62%);animation:rr-spin 14s steps(420,end) infinite;pointer-events:none}
.rr-card>*:not(.rr-burst){position:relative}
.rr-card .eyebrow{margin:0;color:#d0b980;letter-spacing:.3em;font-size:11px}
.rr-card h2{margin:4px 0 2px;font-size:24px;color:#fff1d2;text-shadow:0 0 18px #ffcf7a88}
.rr-sub{margin:0 0 4px;color:#a8bfba;font-size:13px}
.rr-items{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:16px 0 12px}
.rr-item{display:grid;justify-items:center;gap:2px;min-width:92px;padding:12px 8px 10px;border:1px solid #6d5c36;border-radius:12px;background:radial-gradient(circle at 50% 30%,#4a4128,#1a2a26 75%);animation:rr-pop .5s steps(15,end) both;animation-delay:calc(.18s + var(--i) * .12s)}
.rr-item img{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 0 8px #ffd58a88)}
.rr-item b{font-size:24px;line-height:1.1;color:#ffe9b0;font-variant-numeric:tabular-nums}
.rr-item small{color:#d6e4db;font-size:12px}
.rr-item em{font-style:normal;color:#8fa9a2;font-size:11px}
.rr-extra{margin:0 0 10px;text-align:left}
.rr-card .btn{margin-top:4px}
@keyframes rr-fade{from{opacity:0}to{opacity:1}}
@keyframes rr-card{0%{opacity:0;transform:translateY(18px) scale(.86)}70%{opacity:1;transform:translateY(-3px) scale(1.02)}100%{opacity:1;transform:none}}
@keyframes rr-pop{0%{opacity:0;transform:scale(.4)}65%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes rr-spin{to{transform:rotate(360deg)}}
/* [claude code] 2026-10-21 放射光在「減少動畫」下照樣慢慢轉(緩慢、不閃),只關掉彈跳 */
@media(prefers-reduced-motion:reduce){.reward-reveal,.rr-card,.rr-item{animation:none}.rr-burst{animation-duration:24s}}
/* [claude code] 2026-10-21 頂列 VIP / 月卡徽章 */
.top-btns .passes{display:flex;gap:6px;margin-right:auto;min-width:0}
.pass-badge{position:relative;display:flex;align-items:center;gap:5px;min-height:38px;padding:0 9px;border-radius:6px;border:1px solid #6e8f7d;background:#183028;color:#d6e4db;font:inherit}
.pass-badge b{font-size:12px;letter-spacing:.04em}
.pass-badge small{font-size:11px;color:#a8bfba;white-space:nowrap}
.pass-badge.vip{border-color:#d9b264;background:linear-gradient(135deg,#4a3c1e,#26291c);box-shadow:inset 0 0 0 1px #ffe2a422,0 0 10px #e7bd7033}
.pass-badge.vip b{color:#ffe2a4;text-shadow:0 0 8px #ffcf7a99}
.pass-badge .dot{position:absolute;top:-4px;right:-4px;width:9px;height:9px;border-radius:50%;background:#e8604a;box-shadow:0 0 0 2px #142020}
/* [claude code] 2026-10-21 裝備格階級名稱:上方置中、底色 = 階級色 */
.tile .t-tier{position:absolute;left:50%;top:-1px;transform:translateX(-50%);padding:0 4px;border-radius:0 0 5px 5px;background:var(--tc,#888);color:#10161a;font:700 9px/13px system-ui,sans-serif;white-space:nowrap;pointer-events:none}
.slot .tile .t-tier{display:none}
/* [claude code] 2026-10-21 全額退回按鈕:寫明退多少,第一次按變成確認狀態 */
.refund-btn{display:grid;gap:2px;width:100%;margin-top:8px;border-color:#6e8f7d66;background:#132420;color:#c9d8d2;font-size:13px}
.refund-btn small{color:#8fa9a2;font-size:11px}
.refund-btn.armed{border-color:#e8604a;background:#3a1f1a;color:#ffd9cf}
.refund-btn.armed small{color:#ffb8a8}
/* [claude code] 2026-10-21 資源副本:四張副本卡 + 等級列 */
.modes{grid-template-columns:repeat(3,minmax(0,1fr))}
.dungeon-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.dungeon-card{position:relative;display:grid;justify-items:center;gap:4px;padding:14px 8px 12px;border:1px solid #6e8f7d;border-radius:12px;background:radial-gradient(circle at 50% 25%,#2f4a3f,#152522 75%);color:#e6e9db;font:inherit;text-align:center}
.dungeon-card img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 0 8px #ffd58a66)}
.dungeon-card b{font-size:15px}
.dungeon-card small{font-size:11px;color:#a8bfba;line-height:1.4}
.dungeon-card em{font-style:normal;font-size:12px;color:#ffe2a4}
.dungeon-card em.spent,.dungeon-tries.spent{color:#8fa9a2}
.dungeon-tries{color:#ffe2a4;margin:10px 0 4px}
.dungeon-level{padding:12px;margin:10px 0;border:1px solid #3e5851;border-radius:10px;background:#172725}
.dungeon-level.locked{opacity:.6}
.dungeon-level h4{margin:0}
.dungeon-level .dl-stars{color:#ffd76a;font-size:12px;margin-left:6px}
.dungeon-level .row2{margin-top:8px;align-items:center}
/* [claude code] 2026-10-21 音樂來源署名 */
.music-credits{padding-left:18px;line-height:1.6}.music-credits li{margin:8px 0}.music-credits small{color:#a8bfba}.music-credits a{color:#9fe4ff}
/* [claude code] 2026-10-21 裝備 15 階:大階外框 + 升階預覽 */
/* [claude code] 2026-10-22 外框照裝備顏色(白綠藍紫金);大階看框內那一圈:一階單框 / 二階雙框 / 三階粗雙框 + 光暈(原本二階青框、三階金框會蓋掉顏色)。內圈用 inset,不會撞到背包格的 6px 間距 */
.slot .tile{border-width:2px}
.tile.tc2{box-shadow:inset 0 0 0 2px #0b1214d9,inset 0 0 0 3px var(--tc),inset 0 0 12px color-mix(in srgb,var(--tc) 25%,transparent)}
.tile.tc3{box-shadow:inset 0 0 0 2px #0b1214d9,inset 0 0 0 4px var(--tc),inset 0 0 14px color-mix(in srgb,var(--tc) 35%,transparent),0 0 10px 1px color-mix(in srgb,var(--tc) 55%,transparent)}
.tier-name.tc2{text-shadow:0 0 8px color-mix(in srgb,currentColor 45%,transparent)}
.tier-name.tc3{text-shadow:0 0 10px color-mix(in srgb,currentColor 70%,transparent)}
.upgrade-flow{display:flex;align-items:center;justify-content:center;gap:14px;margin:12px 0}
.upgrade-side{display:grid;justify-items:center;gap:4px;text-align:center}
.upgrade-side .big.tile{width:72px;height:72px}
.upgrade-side .stars{color:#ffd76a;letter-spacing:1px}
.upgrade-arrow{font-size:26px;color:#ffe2a4}
.upgrade-facts{padding-left:18px;line-height:1.8}

/* Mobile UI, 2026-10-21: CSS-sized status and controls outside the simulation canvas. */
.castle-actions { margin:0; gap:7px; }
.castle-actions .btn { font-size:13px; padding:10px 4px; min-height:48px; }
.castle-details { border:1px solid var(--line); border-radius:8px; padding:0 11px 10px; }
.castle-details:not([open]) { padding-bottom:0; }
.castle-details summary, .settings-help summary { min-height:44px; display:flex; align-items:center; gap:8px; cursor:pointer; font-size:14px; color:#e6d5ae; }
.castle-details summary::before, .settings-help summary::before { content:'＋'; }
.castle-details[open] summary::before, .settings-help[open] summary::before { content:'−'; }
.bay { grid-template-columns:90px minmax(0,1fr) 90px; }
.bay .col { gap:9px; }
.slot-name span, .slot-name b { display:block; }
.bay .tile { width:clamp(48px,14vw,60px); height:clamp(48px,14vw,60px); }
.bay .lord-hero { max-height:220px; object-fit:contain; }
.slot small, .slot .slot-stat, .slot .slot-enh { font-size:12px; line-height:1.4; white-space:normal; text-align:center; }
.slot .slot-upgrade-gain { font-size:11px; }
.lord-rating small, .lord-rating span { font-size:12px; }
.hero-library-link small, .hero-library-link span { font-size:12px; }
.settings-heading { color:#ffe1ac; font-size:16px; margin:20px 0 10px; }
.settings-modal .setting-choice { min-width:0; margin:12px 0; padding:10px; border:1px solid #486159; border-radius:9px; }
.setting-choice legend { font-size:14px; padding:0 5px; }
.setting-options { display:flex; flex-wrap:wrap; gap:6px; }
.setting-options button { flex:1 1 75px; border:1px solid #516b63; border-radius:7px; background:#152925; color:#c4d5cd; padding:8px 5px; font-size:13px; line-height:1.4; min-height:44px; }
.setting-options button[aria-pressed="true"], .pause-options button[aria-pressed="true"] { border-color:#f4bb78; background:#4a3b29; color:#fff1c9; box-shadow:inset 0 -3px #e4a663; }
.setting-choice p, .settings-account p, .settings-help p { font-size:13px; line-height:1.7; color:#b8cec3; margin:9px 0 0; }
.setting-choice:disabled { opacity:.55; }
.settings-modal .modal-title { position:sticky; top:-1px; background:#1b2929; z-index:2; padding-top:8px; }
.settings-help { margin-top:20px; }
#battle { height:100dvh; box-sizing:border-box; }
html.in-battle { scrollbar-gutter:auto; }
.battle-shell { position:relative; width:min(100%,480px); height:100%; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; background:#0d191e; touch-action:none; user-select:none; overflow:hidden; }
#battle-hud { padding:5px 10px 0; border-bottom:1px solid #49616a; background:#13242b; z-index:1; font-variant-numeric:tabular-nums; }
.hud-heading { display:flex; align-items:center; gap:8px; min-height:36px; }
.hud-heading>strong { flex:1; min-width:0; font-size:13px; line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#hud-time { font-size:12px; color:#b8cbd0; white-space:nowrap; }
#battle #pause-button { position:static; flex:0 0 44px; width:44px; height:44px; padding:0; min-height:44px; border:1px solid #617c80; border-radius:7px; background:#203840; }
.hud-vitals { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hud-vitals>div { min-width:0; position:relative; padding-bottom:0; }
.hud-vitals b { font-size:14px; line-height:20px; color:#ffe1af; display:block; }
#hud-shield { color:#a4e4ff; }
.hud-vitals meter { display:block; appearance:none; width:100%; height:7px; border:0; background:#334d50; border-radius:3px; }
.hud-vitals meter::-webkit-meter-bar { background:#334d50; border:0; border-radius:3px; }
.hud-vitals meter::-webkit-meter-optimum-value { background:#edbd7b; }
#hud-shield-bar::-webkit-meter-optimum-value { background:#83d3ef; }
.hud-vitals meter::-moz-meter-bar { background:#edbd7b; }
#hud-shield-bar::-moz-meter-bar { background:#83d3ef; }
.low-hull #hud-health { color:#ff8d9e; }
.low-hull #hud-hull-bar::-webkit-meter-optimum-value { background:#ff5470; }
#hud-shield-state { position:absolute; bottom:0; right:0; font-size:11px; line-height:14px; color:#aed8df; }
.shield-active .hud-vitals>div { padding-bottom:15px; }
.hud-progress { display:flex; align-items:center; gap:8px; height:22px; }
#hud-progress-label { flex:0 1 auto; font-size:12px; line-height:16px; color:#d7e3cf; max-width:70%; }
.hud-progress-track { position:relative; flex:1; min-width:40px; }
#hud-progress { display:block; appearance:none; width:100%; height:6px; border:0; background:#30484d; border-radius:3px; accent-color:#9fd28a; }
#hud-progress::-webkit-progress-bar { background:#30484d; border-radius:3px; }
#hud-progress::-webkit-progress-value { background:#9fd28a; border-radius:3px; }
#hud-progress::-moz-progress-bar { background:#9fd28a; }
.boss #hud-progress::-webkit-progress-value { background:#ff7185; }
#hud-mid-marker { position:absolute; top:-2px; height:10px; width:2px; background:#ffda9a; }
.hud-meta { display:flex; align-items:center; justify-content:space-between; gap:5px; min-height:44px; }
#hud-kills { font-size:12px; line-height:17px; color:#e6ccac; }
#hud-kills.met { color:#abebc5; }
#battle #assist-button { position:static; flex:0 0 auto; font-size:12px; line-height:16px; min-height:44px; max-width:48%; padding:5px 7px; }
#hud-details { font-size:12px; line-height:17px; padding:3px 0; color:#c6d5ce; height:57px; overflow:hidden; box-sizing:border-box; }
#hud-advice { position:absolute; top:0; left:0; right:0; height:32px; padding:3px 7px; box-sizing:border-box; font-size:12px; line-height:14px; overflow:hidden; color:#ffe0a1; background:#13242bf2; pointer-events:none; }
.battle-viewport { display:flex; align-items:center; justify-content:center; min-height:0; min-width:0; overflow:hidden; }
#battle .battle-frame { width:min(100%,calc((100dvh - 270px)*360/592)); aspect-ratio:360/592; height:auto; max-width:100%; max-height:none; flex:0 0 auto; }
#battle #battle-canvas { position:absolute; top:calc(-100% * 48 / 592); left:0; width:100%; height:calc(100% * 640 / 592); }
#battle #skill-status { top:8%; font-size:13px; line-height:18px; max-height:50px; }
.battle-controls { display:flex; align-items:center; gap:10px; padding:7px 12px; min-height:76px; box-sizing:border-box; background:#142830; border-top:1px solid #49616a; }
#battle .skill-btn { position:relative; inset:auto; flex:0 0 60px; width:60px; height:60px; min-width:60px; min-height:60px; padding:3px; overflow:hidden; }
#battle .skill-btn[hidden] { display:none; }
#battle .skill-btn img { width:32px; height:32px; }
#battle .skill-btn small { font-size:12px; line-height:17px; }
.battle-active-skills { margin-left:auto; display:flex; flex-direction:row; gap:8px; }
#battle #power-status { position:static; flex:0 1 80px; min-width:48px; width:auto; padding:4px; border:0; box-shadow:none; background:transparent; }
#power-status strong { font-size:15px; line-height:20px; }
#power-status .power-segments { gap:2px; margin-top:4px; }
#power-status .power-segments i { height:5px; }
#resume-countdown { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:#07131a55; pointer-events:none; z-index:3; }
#resume-countdown[hidden] { display:none; }
#resume-countdown strong { font-size:72px; line-height:1.1; color:#fff0c4; text-shadow:0 4px 18px #000; }
#resume-countdown span { font-size:14px; line-height:1.7; max-width:90%; text-align:center; padding:10px 15px; border-radius:8px; color:#e2f4ed; background:#10252fee; }
#battle-overlay { z-index:4; }
.pause-options { border:1px solid #546e68; border-radius:8px; padding:8px; margin:12px 0; display:flex; gap:5px; }
.pause-options legend { font-size:13px; padding:0 5px; }
#battle-overlay .pause-options button { flex:1; width:auto; min-height:44px; margin:0; padding:7px 3px; font-size:12px; background:#20352f; color:#e4ebd8; border:1px solid #52655c; }
#battle-overlay .pause-options button[aria-pressed="true"] { background:#4a3b29; border-color:#f4bb78; color:#fff1c9; }
@media(max-height:700px) {
  #battle-hud { padding-top:0; }
  .hud-vitals>div { padding-bottom:0; }
  #hud-advice { height:30px; }
  .bay { padding-block:10px; }
  .bay .tile { width:48px; height:48px; }
  .bay .lord-hero { max-height:175px; }
}
@media(max-width:350px) {
  .battle-controls { gap:6px; padding-inline:8px; }
  #battle .skill-btn { flex-basis:54px; width:54px; height:54px; min-width:54px; min-height:54px; }
  .battle-active-skills { gap:6px; }
  #hud-kills { font-size:12px; }
}

/* Mission board and shared supply cards. Existing raster icons and line-icon symbols only. */
.system-icon { display:inline-block; width:20px; height:20px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
.quest-modal .modal-title { margin-bottom:14px; }
.quest-overview { padding:16px; border:1px solid #8a785044; border-radius:12px; background:radial-gradient(ellipse at 100% 0,#765b2b44,transparent 65%),linear-gradient(135deg,#243c35,#162b29); }
.quest-overview-title { display:flex; align-items:center; gap:11px; margin-bottom:17px; }
.quest-overview-title>.system-icon { width:37px; height:37px; color:#f5c875; }
.quest-overview-title span { display:grid; gap:4px; }
.quest-overview-title small { font-size:11px; color:#c3bd99; letter-spacing:2px; }
.quest-overview-title b { font-size:15px; color:#fff0cb; line-height:1.5; }
.quest-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.quest-metrics>div { display:grid; justify-items:center; gap:3px; padding:10px 3px; background:#102522b3; border-radius:8px; border:1px solid #728a6233; }
.quest-metrics .system-icon { width:19px; height:19px; color:#d8c38f; }
.quest-metrics b { font-size:25px; color:#ffe4a9; line-height:1.3; font-variant-numeric:tabular-nums; }
.quest-metrics b small { font-size:12px; color:#9bb5a8; }
.quest-metrics span { font-size:11px; color:#becfc0; }
.quest-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:16px 0 12px; position:sticky; top:-1px; z-index:2; padding-block:6px; background:#1f2522; }
.quest-tabs button { display:flex; align-items:center; justify-content:center; gap:6px; min-height:48px; border:1px solid #48615a; border-radius:8px; padding:8px 5px; background:#152b29; color:#b7c9c1; font-size:14px; }
.quest-tabs button[aria-pressed="true"] { background:#4b3929; border-color:#e6ae70; color:#fff0d1; box-shadow:inset 0 -3px #e5a865; }
.quest-tabs button>span { min-width:20px; padding:1px 4px; border-radius:5px; background:#ffffff0a; color:#e6c58b; font-size:11px; }
.quest-claim-strip>.btn, .daily-bonus>.btn { display:flex; align-items:center; justify-content:center; gap:7px; font-size:14px; }
.quest-claim-strip>small { display:block; margin:7px 0 16px; color:#afc4b9; font-size:11px; line-height:1.6; text-align:center; }
.quest-list-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-top:15px; }
.quest-list-heading h3 { font-size:16px; color:#f0dfb5; margin:0; }
.quest-filters { display:flex; gap:5px; }
.quest-filters button { min-height:44px; padding:7px 10px; border-radius:7px; border:1px solid #486257; background:#142923; color:#b6ccc0; font-size:12px; }
.quest-filters button[aria-pressed="true"] { border-color:#a6bc8f; color:#e4f0cf; background:#304333; }
.quest-reset { display:flex; align-items:center; gap:5px; color:#a5bdb0; font-size:11px; line-height:1.6; margin:6px 0 13px; }
.quest-reset .system-icon { width:15px; height:15px; }
.objective-list { display:grid; gap:12px; margin:12px 0 18px; }
.objective-card { padding:13px; min-width:0; border:1px solid #496056; border-radius:11px; background:linear-gradient(130deg,#22382f,#182c28); box-shadow:0 4px 10px #0002; }
.objective-card.ready { border-color:#d3a967; background:radial-gradient(ellipse at 100% 0,#ae7c3133,transparent 65%),#25392d; box-shadow:inset 3px 0 #e5b771,0 4px 10px #0002; }
.objective-card.claimed { background:#172b27; border-color:#354e45; }
.objective-heading { display:flex; align-items:center; gap:10px; }
.objective-art { position:relative; flex:0 0 52px; width:52px; height:52px; border-radius:11px; border:1px solid #6b8b6c55; background:radial-gradient(ellipse,#607b4744,#0d2422); padding:5px; }
.objective-art>.art { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 3px 4px #0006); }
.objective-medal { display:grid; place-items:center; position:absolute; right:-5px; bottom:-4px; width:22px; height:22px; border-radius:50%; background:#43391f; border:1px solid #c6a45c; color:#f0cf83; }
.objective-medal .system-icon { width:14px; height:14px; }
.objective-title { flex:1; min-width:0; }
.objective-title>small { color:#b1c8b7; font-size:11px; line-height:1.6; }
.objective-title h3 { color:#f2ead2; font-size:14px; line-height:1.6; margin:3px 0 0; overflow-wrap:anywhere; }
.objective-state { display:inline-flex; align-items:center; justify-content:center; gap:4px; flex:0 0 auto; font-size:11px; line-height:1.6; white-space:nowrap; color:#b1c6b9; background:#10252088; border:1px solid #4f6a5a; border-radius:20px; padding:4px 7px; }
.objective-state .system-icon { width:13px; height:13px; }
.ready>.objective-heading>.objective-state, .ready .system-card-heading>.objective-state { color:#ffe1a5; border-color:#a98b52; background:#66512644; }
.claimed>.objective-heading>.objective-state, .claimed .system-card-heading>.objective-state { color:#a5d9bc; border-color:#48705a; }
.objective-progress { display:flex; justify-content:space-between; gap:8px; font-size:12px; color:#bed3c3; margin-top:14px; font-variant-numeric:tabular-nums; }
.objective-progress strong { color:#e7d7ab; font-size:12px; }
.objective-card progress { width:100%; display:block; height:6px; margin-top:6px; border:0; appearance:none; border-radius:5px; overflow:hidden; background:#304d40; accent-color:#a1c18b; }
.objective-card progress::-webkit-progress-bar { background:#304d40; }
.objective-card progress::-webkit-progress-value { background:#a1c18b; border-radius:5px; }
.objective-card progress::-moz-progress-bar { background:#a1c18b; }
.objective-card.ready progress::-webkit-progress-value { background:#f0c77a; }
.objective-bottom { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-top:13px; }
.objective-bottom>.chips { flex:1; min-width:0; margin:0; }
.objective-bottom>.btn { display:flex; align-items:center; justify-content:center; gap:4px; flex:0 0 auto; min-width:72px; min-height:44px; padding:8px; font-size:13px; }
.objective-bottom>.btn .system-icon { width:16px; height:16px; }
.objective-received { display:flex; align-items:center; gap:4px; font-size:12px; color:#a2cdb5; min-height:44px; white-space:nowrap; }
.objective-received .system-icon { width:17px; height:17px; }
.reward-tiles { display:flex; flex-wrap:wrap; gap:5px; }
.reward-tiles .chip { display:grid; grid-template-columns:23px auto; gap:1px 5px; align-items:center; min-width:67px; padding:6px; border:1px solid #60734c55; border-radius:7px; background:#0d231fbb; }
.reward-tiles .chip .art.res { grid-row:1/3; width:23px; height:23px; margin:0; }
.reward-tiles .chip>b { font-size:13px; line-height:1.2; color:#f2dfaa; font-variant-numeric:tabular-nums; }
.reward-tiles .chip>small { font-size:10px; line-height:1.4; color:#b3c6b5; }
.daily-bonus { border:1px solid #b09558; border-radius:11px; background:radial-gradient(ellipse at top right,#96733133,transparent 75%),#25342a; padding:14px; margin-top:18px; }
.system-card-heading { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.system-card-heading>div { flex:1; min-width:0; }
.system-card-heading h3 { font-size:15px; line-height:1.5; color:#ffe5ac; margin:3px 0; }
.system-card-heading small { font-size:11px; color:#b9c7aa; }
.system-card-heading p { font-size:12px; line-height:1.6; color:#bfd1b9; margin:4px 0; }
.system-card-icon { display:grid; place-items:center; flex:0 0 48px; width:48px; height:48px; border:1px solid #77815b77; border-radius:12px; padding:5px; background:#18342d; color:#eed3a1; }
.system-card-icon>.system-icon { width:28px; height:28px; }
.system-card-icon>.art { width:100%; height:100%; }
.daily-steps { display:flex; gap:7px; margin:13px 0; }
.daily-steps>i { display:flex; flex:1; align-items:center; justify-content:center; height:30px; border:1px solid #5b7053; border-radius:6px; background:#182f24; color:#7d9a80; }
.daily-steps>i.lit { background:#5f562d; border-color:#c0a76d; color:#fff1a8; }
.daily-steps .system-icon { width:17px; height:17px; }
.daily-bonus>.btn { margin-top:13px; }
.system-empty { text-align:center; border:1px dashed #526c5c; border-radius:10px; padding:23px 12px; color:#aec6b6; }
.system-empty>.system-icon { width:44px; height:44px; color:#b9d6ad; }
.system-empty>.art { width:76px; height:76px; margin:0 auto; }
.system-empty h3 { font-size:15px; color:#e2e9ce; margin:12px 0 6px; }
.system-empty p { font-size:12px; line-height:1.7; }
.system-empty .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.supply-overview { display:flex; align-items:center; gap:13px; padding:15px; margin-bottom:15px; border:1px solid #657650; border-radius:10px; background:linear-gradient(120deg,#36432c,#1b322a); }
.supply-overview small { font-size:11px; color:#c0ccac; }
.supply-overview strong { display:block; font-size:23px; color:#ffe4a3; }
.supply-overview p { margin:5px 0 0; font-size:12px; line-height:1.6; color:#bcd1be; }
.supply-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.supply-card { padding:12px 9px; border:1px solid #67765088; border-radius:10px; background:radial-gradient(ellipse at top,#58673c44,transparent 70%),#192f27; min-width:0; }
.supply-art { position:relative; height:94px; display:grid; place-items:center; }
.supply-art>.art { width:85px; height:85px; filter:drop-shadow(0 5px 6px #0006); }
.supply-art>b { position:absolute; bottom:2px; right:0; background:#10241eee; border:1px solid #8b906077; border-radius:6px; padding:3px 6px; font-size:12px; color:#ffe7b3; }
.supply-card h3 { text-align:center; color:#eddbad; font-size:13px; line-height:1.6; margin:10px 0; }
.supply-actions { display:grid; gap:6px; }
.supply-actions .btn { font-size:12px; padding:8px 3px; min-height:44px; }
.supply-last { display:grid; place-items:center; min-height:44px; font-size:11px; color:#a6bda7; }
.income-card { background:linear-gradient(130deg,#283c2d,#182f29); }
.income-card.ready { border-color:#9b8d58; }
.income-card>.btn { margin-top:12px; }
.system-reward-label { display:flex; align-items:center; flex-wrap:wrap; gap:7px; color:#eddaaa; margin:12px 0 9px; font-size:13px; }
.campaign-hub b { display:flex; align-items:center; gap:6px; }
.campaign-hub b>.system-icon { width:19px; height:19px; color:#efc587; }

/* Weapons, skills and forge share the mission/supply card language. */
.arsenal-workshop,.skills-workshop,.forge-workshop { display:grid; gap:13px; min-width:0; }
.workshop-overview { padding:12px; border:1px solid #786f4d88; border-radius:12px; background:radial-gradient(ellipse at top right,#88704733,transparent 75%),linear-gradient(130deg,#263c33,#192c29); }
.workshop-overview .system-card-heading { margin-bottom:9px; }
.workshop-overview .system-card-icon { width:40px; height:40px; flex-basis:40px; }
.workshop-overview .system-card-heading h2 { margin:2px 0 0; font-size:20px; color:#ffebbc; }
.workshop-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.workshop-metrics>div { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; padding:7px 3px; gap:4px; border:1px solid #60775544; background:#102620b0; border-radius:7px; min-width:0; }
.workshop-metrics small { color:#bdd0bd; font-size:11px; }
.workshop-metrics b { color:#ffe2a7; font-size:18px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.workshop-tabs { display:flex; gap:6px; min-width:0; }
.workshop-tabs>button { display:flex; align-items:center; justify-content:center; gap:6px; flex:1; min-width:0; min-height:48px; border:1px solid #48665a; background:#142c27; border-radius:8px; padding:8px 5px; font-size:14px; color:#b8cfc0; }
.workshop-tabs>button[aria-pressed="true"] { color:#ffebc1; background:#483928; border-color:#d7a96f; box-shadow:inset 0 -3px #dca568; }
.workshop-tabs .art.res { width:25px; height:25px; }
.workshop-tabs small { display:block; font-size:11px; margin-top:3px; }
.arsenal-workshop>.btn { display:flex; align-items:center; justify-content:center; gap:7px; line-height:1.7; font-size:13px; }
.weapon-list { display:grid; gap:15px; }
.workshop-weapon,.gem-craft-card,.gem-type-card { padding:14px; border:1px solid #50685a; border-radius:11px; background:linear-gradient(135deg,#243a30,#192e29); min-width:0; }
.workshop-weapon.ready { border-color:#968456; }
.workshop-weapon.locked { background:#172b27; }
.workshop-card-heading { display:flex; align-items:center; gap:11px; }
.workshop-card-heading>div { flex:1; min-width:0; }
.workshop-art { width:64px; height:64px; flex:0 0 64px; padding:7px; border:1px solid #75865a66; border-radius:12px; background:radial-gradient(ellipse,#56754755,#102822); }
.workshop-art>.art { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 3px 4px #0006); }
.workshop-card-heading h3 { color:#f4e7c8; font-size:16px; margin:3px 0; line-height:1.5; }
.workshop-card-heading small { font-size:12px; color:#adc3b4; }
.workshop-level { color:#efd399; font-size:18px; }
.workshop-level small { font-size:12px; color:#a8c0b1; }
.workshop-description { font-size:13px; line-height:1.7; color:#c1d0c3; margin:12px 0; }
.weapon-specs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:12px 0; }
.weapon-specs>div { display:grid; justify-items:center; gap:4px; padding:9px 3px; background:#10251f99; border:1px solid #54715255; border-radius:7px; min-width:0; }
.weapon-specs .system-icon { width:17px; height:17px; color:#d8bc86; }
.weapon-specs small { font-size:11px; color:#b4c7b5; }
.weapon-specs b { font-size:16px; color:#f4e1b4; overflow-wrap:anywhere; }
.workshop-cost-title { font-size:13px; color:#c6d6bc; margin:13px 0 8px; }
.material-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:9px 0 12px; }
.material-card { display:flex; align-items:center; gap:8px; min-width:0; padding:9px; border:1px solid #516e574d; border-radius:8px; background:#112720; }
.material-card>.art.res { width:28px; height:28px; flex:0 0 28px; }
.material-card>div { display:grid; gap:3px; min-width:0; }
.material-card small,.material-card span,.material-card em { font-size:11px; line-height:1.5; font-style:normal; color:#abc2b0; overflow-wrap:anywhere; }
.material-card b { color:#f5dfaa; font-size:15px; overflow-wrap:anywhere; }
.material-card.short { border-color:#a36a5577; }
.material-card.short em { color:#ffb394; }
.workshop-weapon>.btn { margin-top:7px; display:flex; align-items:center; justify-content:center; gap:7px; min-height:48px; font-size:14px; }
.workshop-more { border-top:1px solid #4b6353; margin-top:13px; padding-top:4px; }
.workshop-more>summary { gap:7px; min-height:46px; font-size:13px; color:#d4d4b5; }
.workshop-more>summary::after { content:'＋'; margin-left:auto; }
.workshop-more[open]>summary::after { content:'−'; }
.workshop-more .modtier { padding:10px; margin:10px 0; border:1px solid #4a6252; border-radius:8px; background:#122720; }
.workshop-more .mod { min-height:64px; font-size:13px; line-height:1.7; border-radius:7px; padding:11px; }
.workshop-more .mod small,.workshop-more .mstate { font-size:12px; line-height:1.7; }
.workshop-lock { display:flex; align-items:center; gap:7px; padding:10px; font-size:13px; line-height:1.7; color:#c8c7a4; background:#102720; border-radius:7px; }
.skills-workshop .nodes { grid-template-columns:minmax(0,1fr); gap:12px; }
.skills-workshop .node { grid-column:auto; padding:14px; border-radius:10px; opacity:1; background:linear-gradient(135deg,#263a30,#182e28); gap:10px; min-width:0; }
.skills-workshop .node.dim { border-style:dashed; background:#172a25; }
.node-banner { display:flex; align-items:center; gap:8px; }
.node-banner>b { margin-left:auto; font-size:15px; color:#efd6a0; white-space:nowrap; }
.node-art { display:grid; place-items:center; width:46px; height:46px; flex:0 0 46px; padding:5px; border:1px solid #68815c66; background:#102820; border-radius:9px; }
.node-art>.art { width:100%; height:100%; }
.node-content { font-size:13px; line-height:1.7; color:#c9d5c4; }
.node-content h4 { font-size:15px; color:#f2e5be; line-height:1.6; }
.node-content p { margin:7px 0; }
.node-content small { font-size:12px; line-height:1.7; }
.node-content .magnet-heading>.art { display:none; }
.nodefoot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.skills-workshop .nodefoot>span { font-size:12px; color:#bbcfb9; line-height:1.6; }
.skills-workshop .mini { min-height:44px; min-width:82px; padding:9px; border-radius:7px; font-size:13px; }
.skills-workshop .mini.go { background:#ac603c; color:#fff0d0; border:1px solid #daa367; }
.skills-workshop .eq { margin-top:10px; }
.skills-workshop .eq .mini { min-width:0; width:100%; font-size:12px; }
.workshop-node>progress { display:block; appearance:none; width:100%; height:6px; border:0; border-radius:4px; overflow:hidden; background:#34513d; accent-color:#a9ca84; }
.workshop-node>progress::-webkit-progress-bar { background:#34513d; }
.workshop-node>progress::-webkit-progress-value { background:#a9ca84; }
.workshop-node>progress::-moz-progress-bar { background:#a9ca84; }
.skills-workshop .tier>small { display:block; padding:9px 0; font-size:12px; color:#cabd90; }
.skill-loadout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.skill-loadout>div { display:flex; align-items:center; gap:8px; background:#183129; border:1px solid #547158; border-radius:8px; padding:10px; min-width:0; }
.skill-loadout .art,.skill-loadout .system-icon { width:34px; height:34px; flex:0 0 34px; }
.skill-loadout small { display:block; font-size:11px; color:#a9c1ad; }
.skill-loadout b { font-size:13px; color:#e6ddbd; }
.skill-tree-tabs>button { flex-direction:column; font-size:12px; }
.skill-tree-tabs span { text-align:center; }
.workshop-callout { display:flex; align-items:center; gap:9px; padding:12px; background:#3b3e2977; border:1px solid #8b815255; border-radius:9px; }
.workshop-callout>span { font-size:12px; line-height:1.7; flex:1; }
.workshop-callout .btn { font-size:12px; min-height:44px; padding:8px; }
.workshop-tools { border:1px solid #4b6755; background:#1a3028; border-radius:10px; padding:12px; }
.auto-recycle { display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-size:13px; margin-bottom:12px; }
.auto-recycle select { width:100%; min-height:44px; border:1px solid #5b735c; border-radius:7px; background:#112820; color:#e9e7d0; padding:8px; font:inherit; }
.workshop-tools .btn { min-height:48px; font-size:12px; padding:8px 5px; line-height:1.6; }
.gear-filters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
.gear-filters button { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:5px; min-height:62px; padding:7px 2px; font-size:12px; border:1px solid #4b6757; border-radius:7px; background:#142b24; color:#bcd0bb; }
.gear-filters button[aria-pressed="true"] { background:#4a3b2a; border-color:#d4a86e; color:#ffebbe; }
.gear-filters .art.res { width:25px; height:25px; }
.gear-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.gear-grid>.system-empty { grid-column:1/-1; }
.gear-card { display:grid; justify-items:center; gap:5px; text-align:center; min-width:0; border:2px solid var(--tc); border-radius:10px; padding:12px 8px; background:radial-gradient(ellipse at top,#70855822,transparent 60%),#1a3028; }
/* [claude code] 2026-10-22 鍛造清單卡片同裝備格:框色 = 裝備顏色,二階雙框、三階粗雙框 + 光暈(原本青 / 金頂條) */
.gear-card.tc2 { box-shadow:inset 0 0 0 2px #0b1214d9,inset 0 0 0 3px var(--tc); }
.gear-card.tc3 { box-shadow:inset 0 0 0 2px #0b1214d9,inset 0 0 0 4px var(--tc),0 0 10px color-mix(in srgb,var(--tc) 45%,transparent); }
.gear-card.picked { outline:3px solid #f6df9c; outline-offset:-4px; background:#354733; }
.gear-art { position:relative; width:76px; height:70px; display:block; }
.gear-art>.art { width:100%; height:100%; object-fit:contain; }
.gear-select { position:absolute; right:-14px; top:-6px; color:#ffe1a4; background:#102720e8; padding:3px; border-radius:5px; }
.gear-better { position:absolute; bottom:-4px; right:-14px; font-size:10px; display:flex; align-items:center; color:#e8e5af; background:#3a4f28; padding:2px 5px; border:1px solid #a0af75; border-radius:4px; }
.gear-better .system-icon { width:12px; height:12px; transform:rotate(-90deg); }
.gear-name { font-size:14px; color:#efead7; margin-top:5px; }
.gear-card>strong { font-size:12px; }
.gear-stars { color:#e5c677; font-size:13px; letter-spacing:1px; }
.gear-stat { font-size:12px; color:#d9d7b6; }
.gear-flags { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px; font-size:12px; color:#a9c4b0; min-height:26px; }
.gear-flags>span { display:inline-flex; align-items:center; gap:3px; border:1px solid #6b7b5966; background:#122b23; padding:3px 5px; border-radius:5px; }
.gear-flags .system-icon { width:13px; height:13px; }
.gem-craft-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.gem-craft-actions .btn { display:grid; gap:5px; min-height:65px; font-size:12px; padding:10px 3px; }
.gem-craft-actions small { font-size:10px; }
.gem-type-card .workshop-card-heading p { font-size:13px; color:#becfb9; margin:5px 0; }
.gem-level-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:12px; }
.gem-level { display:flex; flex-direction:column; align-items:center; gap:7px; padding:10px 5px; border:1px solid #425e4c; border-radius:8px; background:#132a22; min-width:0; }
.gem-level.owned { border-color:#7b8f59; background:#273b28; }
.gem-level>b { font-size:12px; color:#bed2b6; }
.gem-level>.art { width:38px; height:38px; }
.gem-level>strong { font-size:15px; color:#ffe0a3; }
.gem-level>small { font-size:12px; color:#adbfaa; line-height:1.6; text-align:center; }
.gem-level>.btn { min-height:44px; width:100%; font-size:12px; padding:6px 2px; margin-top:auto; }
@media(max-width:400px) {
  .workshop-more .modtier .row2 { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:350px) {
  .workshop-weapon,.gem-craft-card,.gem-type-card { padding:11px; }
  .workshop-card-heading { gap:8px; flex-wrap:wrap; }
  .workshop-art { width:54px; height:54px; flex-basis:54px; }
  .workshop-card-heading>.objective-state { margin-left:auto; }
  .material-card { padding:7px; gap:5px; }
  .material-card>.art.res { width:23px; height:23px; flex-basis:23px; }
  .gear-card { padding-inline:5px; }
  .node-banner { gap:5px; }
  .node-banner>b { font-size:13px; }
}
@media(max-width:350px) {
  .objective-card { padding:11px; }
  .objective-heading { flex-wrap:wrap; gap:7px; }
  .objective-art { flex-basis:46px; width:46px; height:46px; }
  .objective-heading>.objective-state { margin-left:auto; }
  .objective-bottom { flex-wrap:wrap; }
  .objective-bottom>.chips { flex-basis:100%; }
  .objective-bottom>.btn { margin-left:auto; }
  .system-card-heading { flex-wrap:wrap; }
  .system-card-heading>.objective-state { margin-left:auto; }
  .quest-overview { padding:12px; }
  .quest-overview-title b { font-size:14px; }
}
/* [claude code] 2026-10-21 資源副本等級頁:主卡 + 收合的全部等級 */
.dungeon-level.frontier{border-color:#d9b264;background:linear-gradient(135deg,#3a3420,#172725 70%)}
.dungeon-level.sweepbest{border-color:#6e8f7d}
.dungeon-level .pill{font-size:11px;margin-right:4px}
.dungeon-all{margin-top:12px}
.dungeon-all summary{cursor:pointer;color:#a8bfba;padding:6px 0}
.dungeon-row{display:grid;grid-template-columns:44px 52px 1fr auto;align-items:center;gap:6px;padding:7px 0;border-bottom:1px solid #2a3d39;font-size:12px}
.dungeon-row.locked{opacity:.55}
.dungeon-row small{color:#a8bfba}
.dungeon-row-btns{display:flex;gap:4px}

/* Terrain identification in the stage briefing uses the same map as combat. */
.stage-scenery{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid #93b8a433;border-radius:8px;background:#0a202a66;color:#bdd0be;font-size:13px}
.stage-scenery .system-icon{width:18px;height:18px}

/* Combat notices stay outside the flight area, with a fixed slot to avoid layout jumps. */
#hud-event{height:25px;box-sizing:border-box;padding:3px 7px;margin:1px 0 3px;border-left:3px solid #9dbcb0;background:#213a40;font-size:12px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;visibility:hidden;color:#d9eadd}
#hud-event[data-kind="boss"]{color:#ffe0b3;border-color:#efb26c;background:#48382b}
#hud-event[data-kind="hurt"]{color:#ffe2db;border-color:#ff977d;background:#4a2a30}
#hud-event[data-kind="shield"]{color:#d5f1ff;border-color:#8fe2ff;background:#223e50}
#hud-event[data-kind="ready"],#hud-event[data-kind="pickup"]{color:#d5f5d2;border-color:#acd897}
#hud-event[data-kind="coin"]{color:#d4c493;background:transparent;border-color:#9a8c61}
#battle .skill-btn.just-ready{border-color:#e3f8a6;box-shadow:0 0 0 2px #c4e699,inset 0 0 12px #b5db8740}
.review-launch{display:flex;align-items:center;justify-content:center;gap:8px;border-color:#91c1c5;margin:12px 0}
.death-review{position:fixed;inset:0;z-index:120;background:#061119ed;display:flex;align-items:center;justify-content:center;padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom));box-sizing:border-box;overscroll-behavior:contain;color:#deeee8}
.review-panel{width:min(100%,480px);max-height:100%;overflow:auto;padding:12px;background:#142b32;border:1px solid #55777d;border-radius:12px;box-sizing:border-box}
.review-panel header{display:flex;align-items:center;justify-content:space-between;gap:8px}.review-panel h2{font-size:18px;margin:0}.review-panel p{font-size:12px;line-height:1.7;margin:7px 0;color:#b9d1cd}
.review-panel button{min-height:44px;font-size:13px}.review-status{height:24px;font-size:12px;line-height:24px;color:#ffddaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.review-panel canvas{display:block;height:min(53dvh,592px);width:auto;max-width:100%;aspect-ratio:360/592;margin:4px auto;border:1px solid #56777c;background:#07131a}
.review-controls{display:flex;gap:8px;align-items:center;margin:8px 0}.review-controls button{flex:1}.review-controls output{min-width:65px;font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.review-panel label{display:block;font-size:12px;color:#c5dad3}.review-panel input{display:block;width:100%;min-height:44px;accent-color:#b9df9c;touch-action:pan-x}.review-panel>.wide{margin-top:4px}
@media(max-height:650px){.review-panel{padding:8px}.review-panel p{margin:4px 0}.review-panel canvas{height:42dvh}.review-panel h2{font-size:16px}}


/* Compact flight deck, reachable controls and shared layout preview. */
#battle-hud { position:relative; padding:3px 8px 4px; }
.hud-heading { gap:4px; }
.hud-heading>strong { font-size:12px; }
#battle #assist-button,#battle #hud-more { position:static; flex:0 0 44px; width:44px; min-width:44px; max-width:44px; min-height:44px; padding:3px; font-size:11px; border:1px solid #536f75; border-radius:7px; background:#1b343b; color:#d5e8e5; }
.hud-vitals { gap:8px; }
.hud-vitals b { font-size:12px; line-height:17px; }
.hud-vitals meter { height:5px; }
.hud-progress { height:18px; }
#hud-progress-label { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shield-active .hud-vitals>div { padding-bottom:0; }
#battle-hud:not(.expanded) .hud-meta,#battle-hud:not(.expanded) #hud-details,#battle-hud:not(.expanded) #hud-shield-state { display:none; }
#battle-hud.expanded .hud-meta { min-height:22px; }
#battle-hud.expanded #hud-shield-state { position:static; display:block; }
#battle-hud.expanded #hud-details { height:auto; max-height:52px; }
#hud-event { position:absolute; top:100%; left:8px; right:8px; z-index:3; margin:3px 0 0; pointer-events:none; }
#hud-advice { top:auto; bottom:6px; left:6px; right:6px; height:auto; max-height:32px; border-radius:5px; }
#battle .battle-controls,.control-preview.battle-controls { gap:6px; padding:calc(6px + var(--control-lift,0px)) var(--control-inset,10px) 6px; min-height:0; }
#battle .skill-btn,.control-preview .skill-btn { flex:0 0 var(--control-size,60px); width:var(--control-size,60px); height:var(--control-size,60px); min-width:var(--control-size,60px); min-height:var(--control-size,60px); touch-action:none; }
#battle .battle-active-skills,.control-preview .battle-active-skills { gap:6px; margin-left:auto; transform:translateY(calc(-1 * var(--control-lift,0px))); }
#battle #power-status,.power-preview { flex:0 0 42px; min-width:42px; text-align:center; padding:0; }
.battle-shell[data-skill-hand="left"] .battle-controls,.control-preview[data-skill-hand="left"] { flex-direction:row-reverse; }
.battle-shell[data-skill-hand="left"] .battle-active-skills,.control-preview[data-skill-hand="left"] .battle-active-skills { margin-left:0; margin-right:auto; }
.control-preview { width:100%; box-sizing:border-box; border:1px solid #49676c; border-radius:9px; margin-top:14px; overflow:hidden; }
.control-preview .skill-btn { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:3px; border:1px solid #9bb8b3; border-radius:50%; color:#e6eddd; background:#1c3640; opacity:1; font-size:12px; }
.control-preview .skill-btn img { width:30px; height:30px; }
.control-preview .power-preview { font-size:12px; color:#f6d19a; }
.flight-layout-editor h3,.flight-effects h3 { margin:18px 0 10px; font-size:16px; color:#ffe1ac; }
.flight-layout-editor .setting-choice,.flight-effects .setting-choice { min-width:0; margin:10px 0; border:1px solid #486159; border-radius:8px; padding:8px; }
.flight-range { display:block; margin:14px 0; color:#cfdfd7; font-size:13px; }
.flight-range>span { display:flex; justify-content:space-between; }
.flight-range output { color:#f9d69d; }
.flight-range input { width:100%; min-height:44px; accent-color:#e5b779; touch-action:pan-y; }
#battle-overlay .flight-options-panel { text-align:left; }
#battle-overlay .flight-options-panel h3 { font-size:16px; }
#battle-overlay .flight-options-panel .setting-options button { width:auto; margin:0; font-size:13px; padding:8px; }
#battle-overlay .flight-options-panel p { font-size:12px; }
.flight-options-panel details { border-top:1px solid #4b6360; margin:12px 0; padding-top:10px; }
.flight-options-panel summary { min-height:44px; line-height:44px; color:#e4d6b6; cursor:pointer; }
#flight-feedback { position:absolute; bottom:45px; left:50%; transform:translateX(-50%); padding:5px 10px; border-radius:14px; background:#163b40e6; border:1px solid #8cc7c4; color:#e0f8ee; font:12px/18px system-ui; white-space:nowrap; pointer-events:none; }
.practice-form { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0; }
.practice-form label { display:grid; gap:6px; min-width:0; font-size:13px; color:#d3e2d7; }
.practice-form select { min-height:44px; width:100%; background:#112a2c; border:1px solid #65817b; border-radius:7px; color:#e4ead8; padding:7px; font-size:14px; }
.practice-intro { padding:14px; border:1px solid #648c80; border-radius:10px; background:linear-gradient(135deg,#25413c,#142b32); color:#d5e8dc; line-height:1.7; font-size:13px; }
.practice-badge { color:#a6ecd6; font-size:12px; }
.practice-links { display:flex; gap:8px; margin:10px 0; }
.practice-links>.btn { flex:1; }
@media(prefers-reduced-motion:reduce){#battle-canvas { translate:none!important; }}

#battle-overlay { background:#0c181dec; padding:12px; align-items:flex-start; }
#battle-overlay>.flight-options-panel { box-sizing:border-box; max-width:420px; padding:14px; background:#172b2e; border:1px solid #56746e; border-radius:12px; }
#battle-overlay .setting-options button { background:#183639; border:1px solid #5b7b75; color:#cfe2d8; }
#battle-overlay .setting-options button[aria-pressed="true"] { background:#59462e; color:#fff0ce; border-color:#f0c285; box-shadow:inset 0 -3px #d2a467; }
#battle-overlay .control-preview .skill-btn { flex:0 0 var(--control-size,60px); width:var(--control-size,60px); min-width:var(--control-size,60px); height:var(--control-size,60px); min-height:var(--control-size,60px); margin:0; padding:3px; background:#203c44; }
#battle-overlay .pause-actions { position:sticky; bottom:-14px; display:flex; gap:8px; padding:10px 0; border-top:1px solid #4a6b66; margin-top:12px; background:#172b2ef5; z-index:2; }
#battle-overlay .pause-actions button { flex:1; width:auto; margin:0; min-height:48px; padding:9px 6px; font-size:14px; }

.control-preview .skill-btn { position:relative; inset:auto; }

/* Trial-only instant power comparison, with the same controls in the pause panel. */
.practice-power-panel { padding:5px 0 2px; }
.practice-power-panel[hidden] { display:none; }
.practice-weapon-selects { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-bottom:4px; }
.practice-weapon-selects label { display:flex; align-items:center; gap:5px; min-width:0; font:11px/16px system-ui; color:#bbd6cc; }
.practice-weapon-selects select { flex:1; width:0; min-width:0; min-height:44px; padding:4px; font:12px/18px system-ui; color:#e3f1df; background:#173238; border:1px solid #577b78; border-radius:6px; touch-action:manipulation; }
#battle-overlay .practice-weapon-selects select { margin:0; min-height:44px; padding:4px; font:12px/18px system-ui; }
.practice-loadout-selects { grid-template-columns:repeat(3,minmax(0,1fr)); }
.practice-loadout-selects label { display:block; }
.practice-loadout-selects select { display:block; width:100%; margin-top:2px; }
.practice-power-buttons { display:grid; grid-template-columns:repeat(6,minmax(44px,1fr)); gap:4px; }
.practice-power-buttons button { min-width:44px; min-height:44px; padding:4px 2px; border:1px solid #577b78; border-radius:6px; background:#173238; color:#c8e6df; font:700 13px/18px system-ui; touch-action:manipulation; }
.practice-power-buttons button[aria-pressed="true"] { background:#62482c; border-color:#f0c082; color:#fff0c9; box-shadow:inset 0 -3px #e3ad69; }
.practice-power-summary { display:block; padding:3px 1px; font:11px/16px system-ui; color:#bbd6cc; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#battle-overlay .practice-power-buttons button { width:auto; min-width:36px; min-height:44px; margin:0; padding:4px 1px; font:700 12px/18px system-ui; background:#173238; border:1px solid #577b78; border-radius:6px; color:#c8e6df; }
#battle-overlay .practice-power-buttons { grid-template-columns:repeat(6,minmax(36px,1fr)); }
#battle-overlay .practice-power-buttons button[aria-pressed="true"] { background:#62482c; border-color:#f0c082; color:#fff0c9; }
/* Combat modules and verified career collections. */
#combat-status { font:11px/17px system-ui; color:#b9dbd2; white-space:normal; max-height:34px; overflow:hidden; }
#combat-status[hidden] { display:none; }
#combat-status[data-state="warning"] { color:#f4ce91; }
#combat-status[data-state="active"] { color:#dbb7ff; }
.tactics-preference,.tactics-panel { border:1px solid #54736c; border-radius:8px; margin:10px 0; padding:8px; min-width:0; }
.tactics-preference legend,.tactics-panel legend { color:#f2d49c; font-weight:700; }
.tactics-preference>div { display:flex; flex-wrap:wrap; gap:4px; }
.tactics-preference .btn { flex:1 0 58px; padding:7px 4px; min-height:44px; }
.tactics-preference small,.tactics-panel p { display:block; color:#c1d5c9; font-size:12px; line-height:1.5; margin:6px 0; }
.tactics-preference [aria-pressed="true"],.career-tabs [aria-selected="true"] { background:#614b2f; border-color:#edc083; color:#fff0cb; }
.tactics-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
#battle-overlay .tactics-cards button { width:auto; min-width:0; min-height:96px; margin:0; padding:7px 5px; font:12px/1.4 system-ui; background:#183639; border:1px solid #5a7b72; color:#e4efdf; border-radius:6px; }
.tactics-cards b,.tactics-cards small { display:block; }
#battle-overlay .tactics-cards [aria-pressed="true"] { background:#614b2f; border-color:#edc083; }
.career-tabs { display:flex; gap:5px; position:sticky; top:0; background:#142a28; padding:5px 0; z-index:1; }
.career-tabs .btn { flex:1; min-width:0; padding:8px 4px; }
.career-card { border:1px solid #597367; border-radius:9px; padding:10px; margin:12px 0; background:#142a29; }
.career-heading { display:flex; align-items:center; gap:12px; }
.career-heading img { width:58px; height:58px; object-fit:contain; }
.career-heading h3 { margin:4px 0; }
.career-card dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.career-card dl div { min-width:0; background:#10221f; padding:7px 3px; text-align:center; border-radius:5px; }
.career-card dt { font-size:11px; color:#bac9b8; }
.career-card dd { margin:5px 0 0; font-weight:700; color:#f3d89b; }
.career-record { border-top:1px solid #38534a; padding:8px 0; overflow-wrap:anywhere; }
.career-record b,.career-record small { display:block; font-size:12px; line-height:1.5; }
.collection-tiers { display:grid; grid-template-columns:repeat(var(--tiers,3),minmax(0,1fr)); gap:6px; }
.collection-tiers article { display:flex; flex-direction:column; gap:5px; align-items:center; padding:7px 3px; background:#102321; border:1px solid #3f574f; border-radius:7px; text-align:center; min-width:0; }
.collection-tiers article.unlocked { border-color:#c19c60; }
.collection-tiers img { width:55px; height:55px; object-fit:contain; }
.collection-tiers b { font-size:12px; }
.collection-tiers small { font-size:11px; overflow-wrap:anywhere; }
.collection-tiers .btn { width:100%; margin-top:auto; min-height:44px; font-size:12px; padding:6px 2px; }
.career-modes { display:flex; flex-wrap:wrap; gap:5px; margin:8px 0; }
.career-modes .btn { flex:1 0 65px; min-height:44px; padding:7px 4px; font-size:12px; }
.career-modes [aria-pressed="true"] { background:#614b2f; border-color:#edc083; }

/* v0.5.3: progression visibility, gem toolbar, star finder and complete attributes. */
.lord-stats-button{border:0;background:transparent;color:inherit;font:inherit;padding:0;cursor:pointer;width:100%}
.lord-stats-button:focus-visible{outline:2px solid #f0cc86;outline-offset:4px;border-radius:10px}
.lord-details-link{display:block;color:#cfe7d2;font-size:11px;margin-top:5px;text-decoration:underline;text-underline-offset:3px}
.mod-progress{margin:10px 0;padding:10px;border:1px solid #596d54;border-radius:8px;background:#172c26}
.mod-progress>b{font-size:13px;color:#e9d6a2}
.mod-progress-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:8px}
.mod-progress-tiers span{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:8px 6px;border:1px solid #40574e;border-radius:6px;font-size:11px;color:#aabdac;min-width:0}
.mod-progress-tiers .done{border-color:#d0ac68;background:#3d3b26;color:#ffe1a2}
.mod-progress-tiers strong{font-size:12px}
.gem-craft-toolbar{display:flex;align-items:stretch;gap:10px;margin:12px 0}
.gem-core-count{display:flex;gap:8px;align-items:center;min-width:0;flex:1;padding:10px;background:#11281f;border:1px solid #4c6655;border-radius:8px}
.gem-core-count .art{width:32px;height:32px}.gem-core-count span{display:grid;gap:4px;font-size:12px}.gem-core-count b{font-size:18px;overflow-wrap:anywhere}
.gem-craft-toolbar .gem-craft-all{flex:1;margin:0;min-width:0;display:grid;place-content:center;gap:4px;padding:8px;font-size:12px}.gem-craft-all small{font-size:10px}
.lord-stat-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:12px 0}
.lord-stat-list>div{background:#152a25;border:1px solid #456152;padding:9px;border-radius:7px;min-width:0}
.lord-stat-list dt{font-size:11px;color:#afc4b1}.lord-stat-list dd{margin:5px 0 0;color:#f9e3b0;font-size:15px;overflow-wrap:anywhere}
.detail-weapon{border-top:1px solid #4a6355;padding-top:8px}.lord-details-modal details>section{padding:8px 0}
.star-search-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.star-search-filters label{display:grid;gap:5px;font-size:12px}.star-search-filters select{width:100%;min-width:0;padding:8px 4px}
.star-search-toggle{display:flex;align-items:center;gap:8px;margin:14px 0;font-size:13px}.star-search-toggle input{width:18px;height:18px}
.star-search-list{display:grid;gap:8px;margin-top:12px}.star-search-stage{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:12px;text-align:left;background:#19352b;color:#e6ead8;border:1px solid #60755c;border-radius:8px;cursor:pointer}
.star-search-stage span{display:grid;gap:7px;min-width:0}.star-search-stage b{font-size:13px}.star-search-stage small{font-size:11px;line-height:1.6;color:#b5c7ac}.star-search-stage strong{color:#ffda87;white-space:nowrap;font-size:14px}.star-search-empty{padding:20px 0;line-height:1.8}
.skin-box-card{background:#1c3329;border:1px solid #9b8659;border-radius:10px;padding:12px;margin-bottom:14px}.skin-box-card h3{display:flex;align-items:center;gap:8px}.skin-box-wallet{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0;font-size:12px;flex-wrap:wrap}.skin-box-card details{margin-top:12px;font-size:12px}.skin-box-card li{line-height:1.8}.skin-box-card .chips{line-height:1.8;color:#f0d89d}
.skin-box-result{display:flex;align-items:center;gap:12px;background:#3e4225;border:1px solid #e8c16f;border-radius:10px;padding:12px;margin-bottom:12px}.skin-box-result img{width:85px;height:100px;object-fit:contain}.skin-box-result h3{font-size:15px}.skin-box-result b,.skin-box-result p,.skin-collection-bonus{font-size:12px;line-height:1.7;color:#f4dfa3}

.skin-collection-entry{display:grid;gap:5px;text-align:left}.skin-collection-entry>b{font-size:12px;white-space:normal}.skin-collection-entry small{font-size:11px;white-space:normal;color:#dfce9c}

.endless-daily-ranking{border-top:1px solid #58654b;margin-top:18px;padding-top:14px}
.endless-daily-ranking .seg{margin:12px 0}.endless-board em{display:grid;gap:4px;text-align:right}.endless-board em strong{font-size:13px}.endless-board em small{font-size:11px;color:#b8c9b0}.endless-my-rank{padding:10px;border:1px solid #70825a;border-radius:7px;background:#223a2c;font-size:12px;line-height:1.7}

/* v0.5.5: bounded equipment pages and a guided, repeatable refine flow. */
.gear-inventory-pages { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; scroll-margin-top:120px; }
.gear-pager { display:grid; gap:8px; padding:10px; border:1px solid #526e58; border-radius:9px; background:#193027; }
.gear-pager p { display:flex; flex-wrap:wrap; justify-content:space-between; gap:5px; margin:0; font-size:12px; color:#e5ddbc; }
.gear-pager p small { color:#e9ce8e; }
.gear-pager>div { display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:6px; }
.gear-pager .btn,.gear-pager select { width:100%; min-width:0; min-height:44px; padding:6px; font:inherit; font-size:12px; }
.gear-pager label { min-width:0; }
.gear-pager select { border:1px solid #65795c; border-radius:7px; background:#12271f; color:#f2e6c0; text-align:center; }
.gear-pager .sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.refine-modal { --modal-pad:16px; }
.refine-modal h3 { font-size:14px; line-height:1.5; margin:0 0 10px; }
.refine-modal .help { font-size:12px; line-height:1.7; }
.refine-intro { margin:8px 0 14px; }
.refine-step { background:#192e26; border:1px solid #4e6853; border-radius:9px; padding:12px; margin:12px 0; }
.refine-step-head { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.refine-step-head h3 { margin:0; }
.refine-step-head .btn { min-height:40px; font-size:11px; padding:6px 9px; }
.refine-modal .refine-row { display:grid; grid-template-columns:18px minmax(0,1fr) auto; min-height:48px; gap:6px; padding:8px 6px; }
.refine-modal .refine-row input { position:static; opacity:1; pointer-events:auto; width:17px; height:17px; margin:0; accent-color:#d5b36f; }
.refine-modal .refine-row:focus-within { outline:2px solid #f2d38a; outline-offset:2px; }
.refine-modal .affix-q { font-size:12px; gap:4px; flex-wrap:wrap; min-width:0; }
.refine-modal .affix-q em { font-size:10px; }
.refine-options { display:flex; gap:6px; }
.refine-options button { flex:1; min-width:0; display:grid; gap:6px; padding:10px 4px; min-height:60px; border:1px solid #61745b; border-radius:8px; background:#10281f; color:#d7debd; cursor:pointer; }
.refine-options button[aria-pressed="true"] { border-color:#e2bb74; background:#493d26; color:#ffe0a0; box-shadow:inset 0 0 0 1px #e2bb74; }
.refine-options b { font-size:13px; }.refine-options small { font-size:11px; }
.refine-help { margin:14px 0; font-size:12px; color:#b8c9b0; line-height:1.8; }
.refine-help summary { min-height:40px; cursor:pointer; padding:9px 0; color:#dbc894; }
.refine-help p { margin:8px 0; }
.refine-footer { position:sticky; bottom:calc(-1 * var(--modal-pad)); margin:12px calc(-1 * var(--modal-pad)) calc(-1 * var(--modal-pad)); padding:12px var(--modal-pad); background:#182b23; border-top:1px solid #6d7653; z-index:1; box-shadow:0 -6px 15px #101c1644; }
.refine-footer .btn { min-height:46px; white-space:normal; font-size:12px; padding:9px 6px; line-height:1.5; }
.refine-footer>.btn { margin-top:8px; }
.refine-wallet { display:flex; flex-wrap:wrap; justify-content:space-between; gap:5px; align-items:center; font-size:13px; color:#f0d69a; }
.refine-wallet span { display:flex; align-items:center; gap:5px; }.refine-wallet small { color:#c8d4b6; }
.refine-result-affixes { display:grid; gap:8px; padding:0; margin:0; list-style:none; }
.refine-result-affixes li { display:flex; align-items:center; gap:6px; }
.refine-kept { color:#f0cf85; font-size:10px; white-space:nowrap; }
.refine-comparison ul { list-style:none; padding:0; margin:0; }
.refine-comparison li { display:flex; justify-content:space-between; align-items:center; gap:8px; border-bottom:1px solid #52644855; padding:8px 2px; font-size:13px; }
.refine-comparison li>span:first-child { display:grid; gap:4px; }.refine-comparison small { font-size:11px; color:#b4c5aa; }
@media(max-width:360px) {
  .refine-modal .refine-row { grid-template-columns:18px minmax(0,1fr); }
  .refine-modal .refine-row>b { grid-column:2; text-align:right; }
  .refine-modal .refine-step { padding:9px; }
}

/* Equipment stars: cost and owned essence stay beside the immediate action. */
.modal .item-max-stars{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px;border:1px solid #5ac6e855;background:#112c3d55}
.item-max-stars>div{min-width:0;flex:1 1 180px}.item-max-stars h4{margin:0 0 6px}.item-max-stars p{margin:4px 0;overflow-wrap:anywhere}.item-max-stars>.btn{flex:0 0 auto;min-height:44px}

/* Stored skin copies and permanent star bonuses. */
.skin-stars{display:block;color:#ffda78;font-size:13px;letter-spacing:1px;white-space:nowrap}.skin-star-summary{grid-column:1/-1;display:grid;gap:6px;text-align:left;border-top:1px solid #71865d;padding-top:12px;min-width:0}.skin-star-summary p{margin:0;font-size:13px;overflow-wrap:anywhere}.skin-star-summary small{font-size:11px;color:#c2d0b7}.skin-star-rules p,.skin-star-rules li{overflow-wrap:anywhere}.skin-purchase-actions .btn{white-space:normal;min-width:0;min-height:48px}.skin-box-result>div{min-width:0}.skin-box-result p{margin:5px 0}.store-skin .skin-stars{font-size:11px;letter-spacing:0}

.store-skin-preview{scroll-margin-top:110px}