:root {
  color-scheme: dark;
  --bg: #17120f;
  --panel: #241b16;
  --panel-2: #30241c;
  --line: #5b4330;
  --text: #f6ead6;
  --muted: #b7a38a;
  --fire: #f08a36;
  --fire-2: #ffd27b;
  --ok: #7acb7a;
  --bad: #e0665f;
  --normal: #e8e1d2;
  --fine: #4ea1ff;
  --rare: #b777ff;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  background: radial-gradient(circle at 50% 0%, #3b2217 0, #17120f 46%, #0e0b0a 100%);
  color: var(--text);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

button {
  border: 0;
  border-radius: 8px;
  color: var(--text);
  background: #443225;
  min-height: 42px;
  padding: 10px 14px;
  font: inherit;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}

button:disabled { opacity: .45; cursor: not-allowed; }

.app-shell {
  width: min(100%, 1060px);
  margin: 0 auto;
  padding: 14px;
}
body.sub-page .app-shell { padding-top: 10px; }
body.sub-page .hero-band { display: none; }
body.sub-page .topbar {
  display: flex;
  justify-content: flex-start;
  padding: 0 0 8px;
}
body.sub-page .topbar > div:first-child { display: none; }
body.sub-page .resources { justify-content: flex-start; }
body.sub-page .tabs { margin-top: 0; }
body.explore-page .app-shell { width: min(100%, 1360px); }
body.explore-page .tabs,
body.explore-page .map-select,
body.explore-page .map-tools,
body.explore-page .map-brief,
body.explore-page .boss-record { display: none; }

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 2px 12px;
}

.kicker, .chapter { color: var(--fire-2); font-size: 12px; letter-spacing: 0; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 24px; }
h2 { font-size: clamp(22px, 5vw, 38px); max-width: 690px; }
h3 { font-size: 18px; margin-bottom: 8px; }
p { color: var(--muted); line-height: 1.6; }

.resources {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  font-size: 13px;
}
.resources span {
  background: #2a2019;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 9px;
  white-space: nowrap;
}

.hero-band {
  min-height: 172px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(115deg, rgba(23,18,15,.92), rgba(50,34,23,.74)),
    url("./界面元素/界面首页.png") center/cover;
  overflow: hidden;
}

.hero-fire {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(255,206,113,.35), transparent 67%);
  flex: 0 0 auto;
}
.hero-fire span {
  width: 46px;
  height: 72px;
  border-radius: 60% 60% 45% 45%;
  background: linear-gradient(#ffe192, #ff8b33 58%, #9b341c);
  transform: rotate(7deg);
  box-shadow: 0 0 32px #ff8b33;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.tab { min-width: 0; padding: 10px 4px; color: var(--muted); }
.tab.active { background: var(--fire); color: #24130b; font-weight: 700; }

.view { display: none; }
.view.active { display: block; }

.panel {
  background: linear-gradient(180deg, rgba(48,36,28,.94), rgba(35,27,22,.94));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 12px;
}

.status-panel, .altar-panel, .map-select, .bag-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.altar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.altar-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.altar-layout .panel { margin-bottom: 0; }
.altar-card { min-height: 168px; }
.altar-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.altar-stats div {
  background: #211913;
  border: 1px solid #433327;
  border-radius: 8px;
  padding: 9px;
}
.altar-stats span, .altar-line small { display: block; color: var(--muted); font-size: 12px; }
.altar-stats b { display: block; margin-top: 4px; color: var(--fire-2); }
.altar-stats i { font-style: normal; }
.altar-stats .cost-gold { color: #ffcf7b; }
.altar-plan, .altar-upgrade-gain {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  background: #1b1511;
  border: 1px solid #3d3027;
  border-radius: 8px;
  padding: 9px;
}
.altar-odds { display: grid; gap: 10px; }
.odds-row {
  display: grid;
  grid-template-columns: 70px 48px 1fr;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}
.odds-row i {
  height: 10px;
  background: #14100d;
  border: 1px solid #433327;
  border-radius: 999px;
  overflow: hidden;
}
.odds-row em { display: block; height: 100%; background: linear-gradient(90deg, var(--fire), var(--fire-2)); }
.altar-rules { margin: 0; padding-left: 20px; color: var(--muted); line-height: 1.8; }
.altar-levels { display: grid; gap: 6px; overflow-x: auto; }
.level-row {
  min-width: 620px;
  display: grid;
  grid-template-columns: .65fr 1fr .65fr .65fr .65fr .85fr;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #3d3027;
  border-radius: 8px;
  color: var(--muted);
  background: #1d1712;
}
.level-row.head { color: var(--fire-2); background: transparent; border-color: transparent; font-weight: 700; }
.level-row.active { border-color: var(--fire-2); color: var(--text); background: #2a1f18; }
.altar-lines {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.altar-line {
  background: #201813;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}
.altar-line b { color: var(--fire-2); }
.altar-line p { margin: 8px 0 0; line-height: 1.65; font-size: 13px; }
.level-wrap { min-width: min(260px, 100%); }
.bar {
  height: 10px;
  background: #14100d;
  border: 1px solid #4b382b;
  border-radius: 999px;
  overflow: hidden;
}
.bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--fire), var(--fire-2)); }
.hp { height: 14px; margin: 6px 0; }
.hp i { background: linear-gradient(90deg, #d94e46, #ffb15a); }
.hp.enemy i { background: linear-gradient(90deg, #7c58d8, #d27fff); }

.grid.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.big-action {
  min-height: 96px;
  text-align: left;
  background: linear-gradient(145deg, #3b2b20, #251c17);
  color: var(--fire-2);
  font-weight: 700;
}
.big-action span { display: block; color: var(--muted); font-weight: 400; margin-top: 8px; }

.primary { background: linear-gradient(180deg, #f49b43, #bd5627); color: #211009; font-weight: 700; }
.secondary { background: #3c2e24; }
.danger { background: #6e302d; }

.goal-list { margin: 0; padding-left: 24px; color: var(--muted); line-height: 1.8; }
.goal-list .done { color: var(--ok); }
.guide-panel { display: grid; gap: 10px; }
.guide-title, .codex-head, .codex-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.guide-title span, .codex-section-title span {
  color: var(--fire-2);
  font-weight: 700;
}
.guide-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.guide-step {
  text-align: left;
  min-height: 62px;
  border-color: #4a382b;
  background: #211913;
}
.guide-step b, .guide-step small { display: block; }
.guide-step small { color: var(--muted); margin-top: 4px; line-height: 1.35; }
.guide-step.current { border-color: var(--fire-2); box-shadow: inset 0 0 0 1px rgba(255,210,123,.12); }
.guide-step.done { color: var(--ok); opacity: .78; }
.guide-coach {
  position: sticky;
  bottom: 10px;
  z-index: 8;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  border: 1px solid var(--fire-2);
  border-radius: 8px;
  padding: 10px;
  background: rgba(24, 18, 14, .96);
  box-shadow: 0 12px 28px rgba(0,0,0,.32);
}
.guide-coach b, .guide-coach small { display: block; }
.guide-coach small { color: var(--muted); margin-top: 3px; line-height: 1.35; }
.guide-coach span { color: var(--fire-2); font-weight: 700; }
.guide-coach.complete { border-color: var(--ok); }
.guide-highlight {
  outline: 2px solid var(--fire-2);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(255, 210, 123, .1);
}
.guide-pulse { animation: guide-pulse .9s ease both; }

@keyframes guide-pulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.025); }
  100% { transform: scale(1); }
}

.log, .battle-log, .loot-list {
  min-height: 80px;
  max-height: 220px;
  overflow: auto;
  color: var(--muted);
  line-height: 1.7;
  font-size: 14px;
}
.log div:first-child, .battle-log div:first-child { color: var(--text); }
.battle-drop-line {
  border: 1px solid #664a31;
  border-radius: 8px;
  background: #251a12;
  color: var(--fire-2) !important;
  padding: 7px 9px;
  margin-bottom: 6px;
}

.difficulty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.difficulty button { min-height: 36px; padding: 7px 9px; font-size: 14px; }
.difficulty button span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.2; }
.difficulty button.active { background: #5b3d2a; color: var(--fire-2); }
.difficulty button.locked { opacity: .58; color: #8f7d68; }
.tool-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.tool-actions button { flex: 1 1 160px; text-align: left; }
.tool-actions button span { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.tool-actions button.active { border-color: var(--fire-2); color: var(--fire-2); background: #4a3525; }
#map .map-tools .tool-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 7px; margin-top: 8px; }
#map .map-tools .tool-actions button { min-height: 44px; padding: 7px 9px; font-size: 14px; }
#map .map-tools .tool-actions button span { font-size: 11px; margin-top: 2px; line-height: 1.25; }
.shop-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.shop-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.shop-hero p { font-size: 13px; }
.shop-balance { color: var(--fire-2); font-weight: 700; }
.shop-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: #201813;
}
.shop-item small { display: block; color: var(--muted); line-height: 1.35; margin-top: 3px; }
.shop-item button { white-space: nowrap; }
.tool-item small:last-child { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.map-layout { display: grid; grid-template-columns: 1.7fr .9fr; gap: 12px; }
.map-select,
.map-tools,
.map-brief { padding: 12px; }
.map-select h3,
.map-tools h3,
.map-brief h3,
.boss-record h3 { font-size: 17px; margin-bottom: 6px; }
.map-select p { font-size: 13px; line-height: 1.45; }
.boss-record-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}
.boss-record-item {
  border: 1px solid #433327;
  border-radius: 8px;
  background: #201813;
  padding: 9px;
}
.boss-record-item b, .boss-record-item span, .boss-record-item small { display: block; }
.boss-record-item b { color: var(--text); }
.boss-record-item span { color: var(--fire-2); font-weight: 800; margin-top: 4px; }
.boss-record-item small { color: var(--muted); line-height: 1.35; margin-top: 3px; }
.boss-record-item.done { border-color: var(--ok); }
.boss-record-item.done span { color: var(--ok); }
.map-brief-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 7px;
}
.map-brief-grid span {
  border: 1px solid #433327;
  border-radius: 8px;
  background: #201813;
  padding: 7px 9px;
  color: var(--muted);
  font-size: 12px;
}
body:not(.explore-page) #map .map-layout { grid-template-columns: 1fr; }
body:not(.explore-page) #map .map-head,
body:not(.explore-page) #map .map-grid,
body:not(.explore-page) #map .move-pad,
body:not(.explore-page) #map .temp-panel,
body:not(.explore-page) #map #leaveMap,
body:not(.explore-page) #map #safeLeave { display: none; }
body:not(.explore-page) #map .map-panel { padding: 12px; text-align: center; }
body:not(.explore-page) #map .run-actions { grid-template-columns: minmax(160px, 280px); justify-content: center; margin-top: 0; }
body:not(.explore-page) #map .run-actions button { min-height: 42px; padding: 9px 12px; }
body.explore-page .map-layout { grid-template-columns: minmax(0, 1fr); align-items: start; }
body.explore-page .explore-board { margin-bottom: 0; }
.map-head { display: flex; justify-content: space-between; color: var(--muted); margin-bottom: 10px; }
.map-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 5px;
  aspect-ratio: 1;
  max-height: 560px;
}
body.explore-page .map-grid { max-height: none; width: min(100%, 76vh, 920px); margin: 0 auto; gap: 4px; }
.cell {
  min-width: 0;
  aspect-ratio: 1;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 12px;
  background: #18130f;
  border: 1px solid #3d3027;
  color: #8b7b68;
}
.cell.seen { background: #2b211a; color: var(--muted); }
.cell.player { outline: 2px solid var(--fire-2); color: var(--fire-2); }
.cell.material { border-color: #466d58; }
.cell.blockedMaterial { border-color: #a06b36; color: #f2bd79; }
.cell.monster { border-color: #7a403b; }
.cell.rank-elite { border-color: #b66343; color: #ffb381; }
.cell.rank-randomBoss { border-color: #d7a13b; color: #ffd166; }
.cell.rank-guardBoss, .cell.rank-final { border-color: var(--rare); color: var(--rare); }
.cell.boss { border-color: var(--rare); color: var(--rare); }
.cell.exit { border-color: var(--fire-2); }
.cell.obstacle { background: #12100e; border-color: #77685a; color: #77685a; }
.cell.q-normal { color: var(--normal); }
.cell.q-fine { color: var(--fine); }
.cell.q-rare { color: var(--rare); }
.move-pad {
  display: grid;
  grid-template-columns: repeat(3, minmax(58px, 82px));
  grid-template-areas:
    ". up ."
    "left . right"
    ". down .";
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.move-pad button { min-height: 44px; }
#moveUp { grid-area: up; }
#moveLeft { grid-area: left; }
#moveDown { grid-area: down; }
#moveRight { grid-area: right; }
.run-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.mini-map {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3px;
  padding: 8px;
  max-width: 520px;
  margin: 0 auto;
  border: 1px solid #433327;
  border-radius: 8px;
  background: #17120f;
}
.mini-map span,
.mini-dot {
  aspect-ratio: 1;
  border-radius: 3px;
  background: #2b211a;
  border: 1px solid rgba(255,255,255,.08);
}
.mini-dot { width: 12px; height: 12px; display: inline-block; }
.mini-map .fog { background: #0f0c0a; border-color: #241b16; }
.mini-map .start { background: #6d5135; }
.mini-map .material.q-normal, .mini-dot.q-normal { background: var(--normal); }
.mini-map .material.q-fine, .mini-dot.q-fine { background: var(--fine); }
.mini-map .material.q-rare, .mini-dot.q-rare { background: var(--rare); }
.mini-map .blockedMaterial, .mini-dot.blockedMaterial { background: #d59345; }
.mini-map .monster, .mini-dot.monster { background: var(--bad); }
.mini-map .rank-elite, .mini-dot.rank-elite { background: #d86d45; }
.mini-map .rank-randomBoss, .mini-dot.rank-randomBoss { background: #f0b63d; }
.mini-map .rank-guardBoss, .mini-dot.rank-guardBoss, .mini-map .rank-final, .mini-dot.rank-final { background: var(--rare); }
.mini-map .boss, .mini-dot.boss { background: #f0b63d; }
.mini-map .obstacle, .mini-dot.obstacle { background: #6c6258; }
.mini-map .exit, .mini-dot.exit { background: var(--ok); }
.mini-map .player, .mini-dot.player { background: var(--fire-2); box-shadow: 0 0 0 2px rgba(255,210,123,.28); }
.mini-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 10px; color: var(--muted); font-size: 12px; }
.mini-panel .mini-legend { max-width: 520px; margin-left: auto; margin-right: auto; }
.mini-legend span { display: flex; align-items: center; gap: 6px; min-width: 0; }

.item-grid, .equip-grid, .stats-grid {
  display: grid;
  gap: 8px;
}
.codex-sections { display: grid; gap: 12px; }
.codex-head p { margin: 4px 0 0; color: var(--muted); }
.codex-bonus {
  display: grid;
  grid-template-columns: repeat(4, minmax(58px, 1fr));
  gap: 6px;
  min-width: min(100%, 320px);
}
.codex-bonus span {
  border: 1px solid #433327;
  border-radius: 8px;
  padding: 7px;
  background: #1b1511;
  color: var(--muted);
  text-align: center;
}
.codex-bonus b { display: block; margin-top: 3px; color: var(--fire-2); }
.codex-section-title small { width: 100%; color: var(--muted); }
.codex-rules h3 { margin-bottom: 8px; }
.codex-rules div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.codex-rules p {
  margin: 0;
  border: 1px solid #3d3027;
  border-radius: 8px;
  padding: 9px;
  color: var(--muted);
  background: #1b1511;
  line-height: 1.45;
  font-size: 13px;
}
.codex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.codex-card {
  min-height: 122px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: #201813;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 7px;
}
.codex-card.locked {
  filter: grayscale(.95);
  opacity: .48;
}
.codex-card b, .codex-card small, .codex-card em { display: block; }
.codex-card small, .codex-card p, .codex-card em { color: var(--muted); }
.codex-card p {
  margin: 0;
  line-height: 1.4;
  font-size: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.codex-card em { font-style: normal; color: var(--fire-2); }
.item-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.equip-grid, .stats-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.item, .equip-slot, .stat {
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: #201813;
  overflow-wrap: anywhere;
  position: relative;
}
.item {
  aspect-ratio: 1;
  min-height: 0;
  padding: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.item { cursor: pointer; user-select: none; transition: transform .16s ease, background .16s ease, border-color .16s ease, opacity .16s ease; }
.item[draggable="true"] { cursor: grab; }
.item[draggable="true"]:active { cursor: grabbing; }
.item[data-craft-id], .item[data-tool-use] { touch-action: pan-y pinch-zoom; -webkit-user-drag: none; }
.item.dragging { opacity: .55; transform: scale(.96); }
.item.drag-over-item { border-color: var(--fire-2); background: rgba(240, 138, 54, .16); transform: translateY(-2px); }
.item.combine-success { animation: combine-pop .62s ease both; }
.drag-ghost {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  opacity: .9;
  transform: translate(-50%, -50%) scale(1.03);
  box-shadow: 0 16px 36px rgba(0,0,0,.38), 0 0 24px rgba(255,210,123,.2);
}
.combine-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
  white-space: nowrap;
  color: var(--fire-2);
  background: rgba(16, 13, 11, .88);
  border: 1px solid var(--fire-2);
  border-radius: 8px;
  padding: 5px 8px;
  animation: burst-rise .86s ease forwards;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.combine-burst.floating {
  position: fixed;
  transform: translate(-50%, -50%);
}
.item.selected { outline: 2px solid var(--fire-2); }
.item .name, .equip-slot .name { font-weight: 700; margin-bottom: 4px; }
.item .name {
  margin-bottom: 0;
  font-size: 12px;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.item small, .equip-slot small, .stat small { color: var(--muted); display: block; line-height: 1.45; }
.item small {
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.q-normal { border-color: var(--normal); }
.q-fine { border-color: var(--fine); box-shadow: inset 0 0 0 1px rgba(78,161,255,.14); }
.q-rare { border-color: var(--rare); box-shadow: inset 0 0 0 1px rgba(183,119,255,.16); }
.name.q-normal { color: var(--normal); }
.name.q-fine { color: var(--fine); }
.name.q-rare { color: var(--rare); }
.toast .name, .combine-burst .name {
  display: inline;
  margin: 0;
  font-weight: 800;
}

@keyframes combine-pop {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 210, 123, 0); }
  45% { transform: scale(1.04); box-shadow: 0 0 24px rgba(255, 210, 123, .45); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 210, 123, 0); }
}

@keyframes burst-rise {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.86); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -115%) scale(.92); }
}

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.68);
  padding: 16px;
  z-index: 10;
}
.hidden { display: none !important; }
.battle-box, .detail-box, .popup-box {
  width: min(520px, 100%);
  max-height: min(86vh, 720px);
  overflow: auto;
  background: #241b16;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}
.battle-box { display: flex; flex-direction: column; gap: 12px; }
.popup-box { width: min(360px, 100%); text-align: center; }
.popup-title { color: var(--fire-2); font-weight: 700; margin-bottom: 8px; }
.popup-message { color: var(--text); line-height: 1.6; overflow-wrap: anywhere; }
.popup-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.popup-actions button.hidden + button { grid-column: 1 / -1; }
.battle-title, .combatants { display: flex; justify-content: space-between; gap: 12px; }
.combatants > div { width: 50%; }
#battleLog { margin-top: 0; }
#closeBattle {
  align-self: center;
  min-width: 112px;
  margin-top: 0;
}
.detail-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.detail-title span { font-weight: 700; color: var(--fire-2); }
.detail-body p { margin-bottom: 10px; }
.detail-body .equip-desc {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.detail-tags span {
  border: 1px solid #3d3027;
  border-radius: 6px;
  padding: 4px 7px;
  color: var(--muted);
  background: #1b1511;
  font-size: 12px;
}
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; }
.detail-grid.compact { margin-bottom: 8px; }
.detail-grid span { color: var(--muted); }
.detail-grid b { color: var(--text); text-align: right; }
.equip-compare {
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.equip-info-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.equip-info-card {
  border: 1px solid #3d3027;
  border-radius: 6px;
  background: #1b1511;
  padding: 7px;
  min-width: 0;
}
.equip-info-card span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 3px; }
.equip-info-card b {
  display: block;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.equip-info-card small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.equip-info-card.empty b { color: var(--muted); }
.compare-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.compare-title h4 { margin: 0; color: var(--fire-2); }
.compare-title small { color: var(--muted); text-align: right; overflow-wrap: anywhere; }
.compare-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.compare-chip {
  border: 1px solid #3d3027;
  border-radius: 6px;
  padding: 6px;
  background: #1b1511;
  display: grid;
  gap: 2px;
}
.compare-chip span { color: var(--muted); font-size: 12px; }
.compare-chip b { color: var(--text); font-size: 13px; }
.compare-chip em { font-style: normal; font-weight: 700; }
.compare-chip.up em { color: var(--ok); }
.compare-chip.down em { color: #ff8f7f; }
.compare-empty { color: var(--muted); padding: 8px 0; }
.wear-detail {
  width: 100%;
  margin-top: 10px;
  position: sticky;
  bottom: 0;
  box-shadow: 0 -8px 18px rgba(36,27,22,.9);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: #100d0b;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--fire-2);
  z-index: 120;
  max-width: min(90vw, 520px);
}
.toast.toast-pop { animation: toast-pop 1.5s ease both; }

@keyframes toast-pop {
  0% { opacity: 0; transform: translate(-50%, 12px) scale(.96); }
  12% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  82% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, 8px) scale(.98); }
}

@media (max-width: 720px) {
  .app-shell { padding: 10px; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .resources { justify-content: flex-start; }
  .hero-band { min-height: 150px; padding: 16px; }
  .hero-fire { width: 76px; height: 76px; }
  .hero-fire span { width: 34px; height: 54px; }
  .tabs { grid-template-columns: repeat(4, 1fr); }
  .grid.two, .map-layout, .altar-layout, .altar-lines { grid-template-columns: 1fr; }
  body.explore-page .map-layout { grid-template-columns: 1fr; }
  .run-actions { grid-template-columns: 1fr; }
  .map-grid { gap: 4px; }
  body.explore-page .map-grid { width: 100%; }
  .cell { font-size: 11px; }
}

@media (max-width: 420px) {
  .item-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .codex-bonus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-coach { grid-template-columns: 1fr; }
  .guide-coach button { width: 100%; }
  .equip-grid, .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .altar-actions, .altar-actions button { width: 100%; }
  .altar-stats { grid-template-columns: 1fr; }
  .odds-row { grid-template-columns: 64px 44px 1fr; }
  .move-pad { grid-template-columns: repeat(3, minmax(52px, 76px)); }
}