:root {
  --bg: #fff3e0;
  --bg2: #ffe8f0;
  --panel: #fffaf3;
  --panel2: #fff0d6;
  --ink: #3d2c29;
  --muted: #8a6f63;
  --border: #f0c9a0;
  --accent: #ff8fab;
  --accent2: #7ec8ff;
  --up: #3dbf8a;
  --down: #ff6b6b;
  --warn: #ffb020;
  --purple: #b388ff;
  --gold: #ffd56a;
  --radius: 22px;
  --shadow: 0 8px 0 rgba(61, 44, 41, 0.12), 0 14px 28px rgba(255, 143, 171, 0.18);
  --shadow-soft: 0 4px 0 rgba(61, 44, 41, 0.08), 0 10px 20px rgba(126, 200, 255, 0.15);
  --font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --display: "ZCOOL KuaiLe", "Noto Sans SC", cursive, system-ui, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html {
  height: 100%;
  height: 100dvh;
  overflow: hidden;
}

html, body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 10% -10%, #ffe0f0 0%, transparent 55%),
    radial-gradient(900px 500px at 100% 0%, #d6f0ff 0%, transparent 50%),
    linear-gradient(180deg, var(--bg), #ffe9d2 60%, #ffd9c8);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  position: relative;
  overflow: hidden;
}

.bg-blobs { pointer-events: none; position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.45;
  animation: floaty 12s ease-in-out infinite;
}
.b1 { width: 220px; height: 220px; background: #ffc2d4; top: 12%; left: -40px; }
.b2 { width: 180px; height: 180px; background: #b8e6ff; top: 55%; right: -30px; animation-delay: -3s; }
.b3 { width: 140px; height: 140px; background: #ffe08a; bottom: 8%; left: 40%; animation-delay: -6s; }
@keyframes floaty {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-18px) scale(1.05); }
}

.app-header,
.layout,
.app-footer { position: relative; z-index: 1; }

.sticker {
  background: var(--panel);
  border: 3px solid #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.app-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 8px 0;
  padding: 8px 12px;
  flex-wrap: nowrap;
  flex-shrink: 0;
  background: linear-gradient(135deg, #fffaf3, #ffe8f5);
  min-height: 0;
  overflow: hidden;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 150px;
}
.logo-emoji {
  font-size: 34px;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,0.08));
  animation: wiggle 3s ease-in-out infinite;
}
@keyframes wiggle {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(6deg); }
}
.logo-title {
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.1;
  color: #e85d75;
}
.logo-sub {
  font-size: 12px;
  color: var(--muted);
}

.speech-mini {
  flex: 1;
  min-width: 180px;
  background: #fff;
  border: 3px solid #ffd0e0;
  border-radius: 18px 18px 18px 6px;
  padding: 8px 14px;
  color: #c45c78;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: var(--shadow-soft);
}

.header-stats {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.hud-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 3px solid #ffe0b8;
  border-radius: 999px;
  padding: 6px 14px 6px 8px;
  min-width: 118px;
  box-shadow: 0 4px 0 rgba(240, 177, 80, 0.25);
}
.hud-pill.coin-hud { border-color: #ffd56a; background: linear-gradient(180deg, #fff9e8, #fff); }
.hud-pill.star-hud { border-color: #ffb4d9; background: linear-gradient(180deg, #fff0f7, #fff); }
.hud-ico { flex-shrink: 0; }
.hud-emoji { font-size: 22px; }
.stat-label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.1;
}
.stat-value {
  display: block;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
}
.stat-value.up { color: var(--up); }
.stat-value.down { color: var(--down); }

.bounce-num.pop {
  animation: pop-bounce 0.45s cubic-bezier(.2,1.4,.4,1);
}
@keyframes pop-bounce {
  0% { transform: scale(1); }
  35% { transform: scale(1.18); }
  70% { transform: scale(0.94); }
  100% { transform: scale(1); }
}

.layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(240px, 300px);
  gap: 8px;
  padding: 8px;
  min-height: 0;
  overflow: hidden;
  align-content: stretch;
}

@media (max-width: 1100px) {
  .layout {
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) minmax(220px, 260px);
    gap: 6px;
    padding: 6px;
  }
}

@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
    overflow: auto;
  }
  .panel-cards,
  .panel-strategy,
  .center-col {
    min-height: 0;
    max-height: none;
  }
  .panel-cards { max-height: 34vh; }
  .panel-strategy { max-height: 36vh; }
}

.panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #fffaf5, #fff3e8);
}

.panel-h {
  padding: 8px 10px;
  border-bottom: 3px dashed #ffd7b0;
  font-family: var(--display);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: linear-gradient(90deg, #ffe8f0, #fff0d0);
  color: #c45c78;
  flex-shrink: 0;
}
.panel-h small {
  color: var(--muted);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 400;
}

.panel-b {
  padding: 8px 10px;
  overflow: auto;
  flex: 1;
  min-height: 0;
  overscroll-behavior: contain;
}

.section-title {
  margin: 14px 0 8px;
  font-family: var(--display);
  font-size: 16px;
  color: #e07a5f;
}

.center-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 6px 10px;
  background: linear-gradient(135deg, #fff, #fff5e8);
  flex-shrink: 0;
}

.btn, button.btn, .mini-btn, .preset-btn, .ind-card, .slot-chip {
  font-family: inherit;
  cursor: pointer;
}

.btn {
  background: #fff;
  color: var(--ink);
  border: 3px solid #ffd0a8;
  border-radius: 16px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 0 #f0c090;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #f0c090;
}
.btn.skill {
  border-radius: 18px;
}
.btn.skill.big {
  padding: 8px 18px;
  font-family: var(--display);
  font-size: 16px;
}
.btn.active {
  background: #ffe0ef;
  border-color: #ff8fab;
  box-shadow: 0 4px 0 #f0789a;
  color: #c2185b;
}
.btn.primary {
  background: linear-gradient(180deg, #ff9eb5, #ff7a9a);
  border-color: #ff6b8a;
  color: #fff;
  box-shadow: 0 4px 0 #e85d75;
}

.seg {
  display: inline-flex;
  background: #fff6ea;
  border-radius: 18px;
  border: 3px solid #ffe0b8;
  overflow: hidden;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.8);
}
.seg .btn {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.seg .btn.active {
  background: #ffd6e7;
  box-shadow: none;
}

.seed-row { margin: 0; }
.seed-row input {
  width: 110px;
  background: #fff;
  border: 3px solid #ffd0a8;
  color: var(--ink);
  border-radius: 12px;
  padding: 6px 8px;
  font-family: var(--mono);
}

.office-stage {
  position: relative;
  overflow: hidden;
  padding: 6px 10px;
  background: linear-gradient(180deg, #fff8ee, #ffe9d6);
  flex-shrink: 0;
  height: clamp(88px, 14vh, 140px);
  min-height: 88px;
}
.office-bg {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: min(36%, 180px);
  max-height: 90%;
  opacity: 0.9;
  pointer-events: none;
  object-fit: contain;
}
.meta-chips {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 62%;
}
.chip-pill {
  background: #fff;
  border: 2px solid #ffd7b8;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--muted);
  box-shadow: 0 3px 0 rgba(240, 177, 80, 0.2);
}
.chip-pill b { color: var(--ink); font-weight: 700; }

.monitor-frame {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #5b6b8c;
  border: 5px solid #4a5874;
  border-radius: 22px;
  padding: 6px 8px 0;
  box-shadow: var(--shadow), inset 0 0 0 3px #7a8aad;
  position: relative;
  overflow: hidden;
}
.monitor-top {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px 8px;
}
.monitor-top .dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.dot.r { background: #ff7b7b; }
.dot.y { background: #ffd56a; }
.dot.g { background: #7ec8a0; }
.monitor-title {
  margin-left: 8px;
  font-family: var(--display);
  color: #e8eef8;
  font-size: 14px;
}
.chart-wrap {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  background: #1e2a44;
  border-radius: 14px;
  overflow: hidden;
  border: 3px solid #2a3a58;
}
#chart {
  width: 100%;
  height: 100%;
  display: block;
  background: #1e2a44;
}
.monitor-stand {
  width: 70px;
  height: 8px;
  margin: 6px auto 0;
  background: #8a9bb8;
  border-radius: 0 0 8px 8px;
  flex-shrink: 0;
}
.monitor-stand::after {
  content: "";
  display: block;
  width: 110px;
  height: 7px;
  margin: 4px -20px 6px;
  background: #9aabc4;
  border-radius: 6px;
}

/* Event comic bubble */
.event-banner,
.comic-bubble {
  padding: 8px 12px;
  background: #fffdf5;
  border: 3px solid #3d2c29;
  border-radius: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  font-size: 13px;
  position: relative;
  box-shadow: 4px 4px 0 #ffd56a;
  flex-shrink: 0;
  max-height: 72px;
  overflow: hidden;
}
.comic-bubble::before {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -16px;
  border: 10px solid transparent;
  border-top-color: #3d2c29;
}
.comic-bubble::after {
  content: "";
  position: absolute;
  left: 32px;
  bottom: -10px;
  border: 8px solid transparent;
  border-top-color: #fffdf5;
}
.event-banner .ev-icon {
  font-size: 28px;
  line-height: 1;
}
.event-banner .ev-cat {
  background: #ffe08a;
  color: #8a5a00;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 2px solid #f0b429;
}
.event-banner .ev-rem {
  color: var(--muted);
  margin-left: auto;
  font-weight: 600;
}
.event-banner em {
  color: var(--muted);
  font-style: normal;
  width: 100%;
  font-size: 12px;
}

/* Indicator collectible cards */
.ind-card {
  display: block;
  width: 100%;
  text-align: left;
  background: linear-gradient(160deg, #fff, #fff8ef);
  border: 3px solid #ffd0a8;
  border-radius: 18px;
  padding: 10px 12px;
  margin-bottom: 10px;
  color: inherit;
  box-shadow: 0 5px 0 rgba(240, 177, 80, 0.28);
  position: relative;
  overflow: hidden;
  transition: transform 0.12s ease;
}
.ind-card::after {
  content: "";
  position: absolute;
  top: -20px; right: -20px;
  width: 60px; height: 60px;
  background: radial-gradient(circle, rgba(255,213,106,0.35), transparent 70%);
  pointer-events: none;
}
.ind-card:hover { transform: translateY(-3px) rotate(-0.5deg); }
.ind-card.on-chart {
  border-color: #7ec8ff;
  box-shadow: 0 5px 0 rgba(126, 200, 255, 0.45), inset 4px 0 0 #7ec8ff;
}
.ind-card.selected {
  outline: 3px dashed #ff8fab;
  outline-offset: 2px;
}
.ind-card.locked { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); }

.ind-card.rarity-普通 { border-color: #c5d4c8; }
.ind-card.rarity-精良 { border-color: #7ec8ff; box-shadow: 0 5px 0 rgba(126,200,255,0.35); }
.ind-card.rarity-稀有 { border-color: #b388ff; box-shadow: 0 5px 0 rgba(179,136,255,0.35); }
.ind-card.rarity-史诗 { border-color: #ff8fab; box-shadow: 0 5px 0 rgba(255,143,171,0.4); }
.ind-card.rarity-传说 {
  border-color: #ffd56a;
  background: linear-gradient(160deg, #fffceb, #fff);
  box-shadow: 0 5px 0 rgba(240,180,41,0.45), 0 0 16px rgba(255,213,106,0.35);
}

.ind-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.ind-icon {
  width: 36px; height: 36px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 20px;
  background: #fff0d6;
  border: 2px solid #ffe0b0;
  flex-shrink: 0;
}
.ind-name {
  font-family: var(--display);
  font-size: 16px;
  margin-bottom: 0;
}
.ind-meta { display: flex; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.ind-desc { color: var(--muted); font-size: 12px; line-height: 1.4; }
.ind-flavor {
  margin-top: 4px;
  font-size: 11px;
  color: #c45c78;
  font-style: italic;
}
.ind-actions { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }

.chip {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e8f5ff;
  color: #3a7cad;
  font-weight: 600;
  border: 2px solid #b8e0ff;
}
.chip.ghost {
  background: #fff6ea;
  color: var(--muted);
  border-color: #ffe0b8;
}
.tag {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 8px;
  background: #fff0d6;
  color: var(--muted);
  font-weight: 600;
}
.rarity {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 8px;
  background: #f3e8ff;
  color: var(--purple);
}
.rarity.r-普通 { background: #eef3ef; color: #6a7a6e; }
.rarity.r-精良 { background: #e8f5ff; color: #3a7cad; }
.rarity.r-稀有 { background: #f3e8ff; color: #7a4fcf; }
.rarity.r-史诗 { background: #ffe8f0; color: #c2185b; }
.rarity.r-传说 { background: #fff3cc; color: #b8860b; }

/* Puzzle strategy slots */
.slot-block { margin-bottom: 12px; }
.slot-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  font-weight: 600;
}
.slot-box {
  min-height: 52px;
  border: 3px dashed #ffc9a0;
  border-radius: 18px;
  padding: 8px;
  background:
    repeating-linear-gradient(45deg, #fff8ef, #fff8ef 8px, #fff3e0 8px, #fff3e0 16px);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.slot-box.puzzle {
  background-image:
    radial-gradient(circle at 12px 50%, #ffe0b8 5px, transparent 6px),
    repeating-linear-gradient(45deg, #fff8ef, #fff8ef 8px, #fff3e0 8px, #fff3e0 16px);
}
.slot-box:hover {
  border-color: #ff8fab;
  background-color: #fff0f5;
}
.slot-placeholder {
  color: var(--muted);
  font-size: 12px;
  padding: 4px 8px;
}
.slot-chip {
  background: linear-gradient(180deg, #d8fff0, #b8f0d8);
  border: 3px solid #3dbf8a;
  color: #1a7a55;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 3px 0 #2a9a6e;
}
.slot-chip:hover { filter: brightness(1.05); }

/* Preset skill buttons */
.preset-grid { display: flex; flex-direction: column; gap: 8px; }
.preset-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: linear-gradient(135deg, #fff, #ffeef5);
  border: 3px solid #ffb4d0;
  border-radius: 18px;
  padding: 10px 12px;
  color: inherit;
  box-shadow: 0 4px 0 #f0789a;
  transition: transform 0.12s ease;
}
.preset-btn:hover { transform: translateY(-2px); }
.preset-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #f0789a;
}
.preset-btn .preset-ico {
  display: inline-block;
  margin-right: 6px;
  font-size: 18px;
  vertical-align: middle;
}
.preset-btn strong {
  display: inline;
  font-family: var(--display);
  font-size: 15px;
  color: #c2185b;
}
.preset-btn span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.event-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mini-btn {
  background: #fff;
  border: 3px solid #ffd56a;
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  margin: 0;
  box-shadow: 0 3px 0 #f0b429;
}
.mini-btn:hover {
  background: #fff8e0;
  transform: translateY(-1px);
}
.mini-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #f0b429;
}

.log-box {
  background: #fff;
  border: 3px solid #ffe0b8;
  border-radius: 14px;
  padding: 6px 8px;
  max-height: 140px;
  overflow: auto;
}
.log-row {
  font-size: 12px;
  padding: 5px 2px;
  border-bottom: 2px dashed #ffeeda;
  line-height: 1.4;
}
.log-row:last-child { border-bottom: 0; }
.log-row.buy { color: var(--up); font-weight: 600; }
.log-row.sell { color: var(--down); font-weight: 600; }
.muted { color: var(--muted); }

.field-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 8px 0;
  flex-wrap: wrap;
}
.field-row input, .field-row select {
  background: #fff;
  border: 3px solid #ffd0a8;
  color: var(--ink);
  border-radius: 12px;
  padding: 5px 8px;
  font-family: var(--font);
}

.hint {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 8px;
}

.app-footer {
  margin: 0 8px 6px;
  padding: 4px 12px;
  border-radius: 12px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  background: rgba(255, 250, 243, 0.85);
  border: 2px dashed #ffd0a8;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meta-line {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
  padding: 0 2px;
}
.meta-line b { color: var(--ink); font-weight: 600; }

/* ===== Chibi trader ===== */
.office-stage {
  /* height controlled by clamp above */
}
.trader-wrap {
  position: absolute;
  left: 8px;
  bottom: 2px;
  z-index: 2;
  width: 84px;
  pointer-events: none;
  transform-origin: 50% 100%;
}
.trader-svg {
  display: block;
  width: 78px;
  height: auto;
  filter: drop-shadow(0 4px 0 rgba(61, 44, 41, 0.12));
  animation: trader-idle 2.4s ease-in-out infinite;
}
.trader-bubble {
  position: absolute;
  left: 72px;
  bottom: 72px;
  min-width: 80px;
  max-width: 140px;
  padding: 4px 8px;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(0.92);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.trader-wrap.show-bubble .trader-bubble,
.trader-wrap.mood-happy .trader-bubble,
.trader-wrap.mood-panic .trader-bubble {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@keyframes trader-idle {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-6px) rotate(1.5deg); }
}
@keyframes trader-happy {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
  25% { transform: translateY(-14px) scale(1.06) rotate(-4deg); }
  50% { transform: translateY(-4px) scale(1.02) rotate(3deg); }
  75% { transform: translateY(-12px) scale(1.08) rotate(-2deg); }
}
@keyframes trader-panic {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20% { transform: translate(-4px, 2px) rotate(-6deg); }
  40% { transform: translate(5px, -2px) rotate(5deg); }
  60% { transform: translate(-3px, 1px) rotate(-4deg); }
  80% { transform: translate(4px, -1px) rotate(3deg); }
}

.trader-wrap.mood-happy .trader-svg {
  animation: trader-happy 0.7s ease-in-out infinite;
}
.trader-wrap.mood-panic .trader-svg {
  animation: trader-panic 0.35s linear infinite;
}

/* SVG internal mood swaps via CSS filters on wrap + object — use filter/opacity
   on overlay masks since external SVG can't be styled cross-document.
   We approximate with CSS overlays and tint. */
.trader-wrap.mood-happy::after {
  content: "✨";
  position: absolute;
  top: 8px;
  right: -4px;
  font-size: 22px;
  animation: sparkle-pop 0.8s ease-in-out infinite;
}
.trader-wrap.mood-panic::before {
  content: "💦";
  position: absolute;
  top: 18px;
  right: 0;
  font-size: 18px;
  animation: sweat-drop 0.5s ease-in-out infinite;
}
@keyframes sparkle-pop {
  0%, 100% { transform: scale(0.8) rotate(-10deg); opacity: 0.7; }
  50% { transform: scale(1.2) rotate(10deg); opacity: 1; }
}
@keyframes sweat-drop {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50% { transform: translateY(6px); opacity: 1; }
}

.meta-chips {
  max-width: 58%;
  margin-left: auto;
}

/* ===== Juice layer ===== */
#juice-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.juice-coin {
  position: fixed;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  margin-top: -14px;
  will-change: transform, opacity;
  animation: coin-fly 0.75s cubic-bezier(.2,.7,.2,1) forwards;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.15));
}
@keyframes coin-fly {
  0% {
    transform: translate(0, 0) scale(0.6) rotate(0deg);
    opacity: 0;
  }
  12% { opacity: 1; transform: translate(calc(var(--mx) * 0.35), calc(var(--my) * 0.35)) scale(1.15) rotate(40deg); }
  55% {
    transform: translate(var(--mx), var(--my)) scale(1) rotate(160deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--jx), var(--jy)) scale(0.35) rotate(280deg);
    opacity: 0;
  }
}

.juice-float-num {
  position: fixed;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  margin-left: -20px;
  pointer-events: none;
  text-shadow: 0 2px 0 rgba(255,255,255,0.8), 0 3px 0 rgba(61,44,41,0.12);
  animation: float-num 0.9s cubic-bezier(.2,.8,.2,1) forwards;
  white-space: nowrap;
}
.juice-float-num.up { color: var(--up); }
.juice-float-num.down { color: var(--down); }
@keyframes float-num {
  0% { transform: translateY(0) scale(0.7); opacity: 0; }
  15% { transform: translateY(-8px) scale(1.15); opacity: 1; }
  100% { transform: translateY(-56px) scale(1); opacity: 0; }
}

.juice-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  animation: flash-fade 0.45s ease-out forwards;
}
.juice-flash-event {
  background: radial-gradient(circle at 50% 30%, rgba(255, 213, 106, 0.45), transparent 55%),
              rgba(255, 143, 171, 0.18);
}
.juice-flash-profit {
  background: radial-gradient(circle at 70% 10%, rgba(94, 224, 176, 0.4), transparent 50%);
}
.juice-flash-loss {
  background: radial-gradient(circle at 50% 40%, rgba(255, 107, 107, 0.35), transparent 55%);
}
.juice-flash-trade {
  background: radial-gradient(circle at 50% 50%, rgba(126, 200, 255, 0.35), transparent 50%);
}
@keyframes flash-fade {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Screen shake */
@keyframes shake-soft-kf {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-2px, 1px); }
  75% { transform: translate(2px, -1px); }
}
@keyframes shake-med-kf {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20% { transform: translate(-4px, 2px) rotate(-0.4deg); }
  40% { transform: translate(5px, -2px) rotate(0.5deg); }
  60% { transform: translate(-3px, 1px) rotate(-0.3deg); }
  80% { transform: translate(3px, -1px) rotate(0.3deg); }
}
@keyframes shake-hard-kf {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  10% { transform: translate(-8px, 3px) rotate(-0.8deg); }
  30% { transform: translate(9px, -4px) rotate(0.9deg); }
  50% { transform: translate(-6px, 2px) rotate(-0.6deg); }
  70% { transform: translate(7px, -3px) rotate(0.7deg); }
  90% { transform: translate(-3px, 1px) rotate(-0.3deg); }
}
body.shake-soft { animation: shake-soft-kf 0.28s linear; }
body.shake-med { animation: shake-med-kf 0.38s linear; }
body.shake-hard { animation: shake-hard-kf 0.5s linear; }

/* Punchier buttons */
.btn, .mini-btn, .preset-btn, .ind-card, .slot-chip {
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:active, .mini-btn:active, .preset-btn:active, .ind-card:active, .slot-chip:active {
  filter: brightness(0.97) saturate(1.1);
}
.btn-punch {
  animation: btn-punch 0.2s cubic-bezier(.2,1.4,.4,1);
}
@keyframes btn-punch {
  0% { transform: scale(1); }
  40% { transform: scale(0.9) translateY(3px); }
  100% { transform: scale(1) translateY(0); }
}
.btn.primary.btn-punch {
  animation: btn-punch-primary 0.22s cubic-bezier(.2,1.4,.4,1);
}
@keyframes btn-punch-primary {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(0.88) translateY(4px); filter: brightness(1.08); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* Equity HUD glow on profit tick */
.hud-pill.coin-hud.glow-up {
  animation: hud-glow 0.55s ease;
}
@keyframes hud-glow {
  0% { box-shadow: 0 4px 0 rgba(240, 177, 80, 0.25), 0 0 0 0 rgba(255, 213, 106, 0.6); }
  40% { box-shadow: 0 4px 0 rgba(240, 177, 80, 0.25), 0 0 0 8px rgba(255, 213, 106, 0); }
  100% { box-shadow: 0 4px 0 rgba(240, 177, 80, 0.25); }
}

@media (max-width: 1100px) {
  .trader-wrap { left: 6px; width: 70px; }
  .trader-svg, .trader-wrap .trader-svg { width: 64px; }
  .trader-bubble { left: 58px; bottom: 56px; font-size: 10px; }
  .meta-chips { max-width: 70%; margin-left: auto; margin-top: 0; }
}

/* Inline SVG mood swaps */
.trader-wrap .trader-svg {
  width: 78px;
  height: auto;
  display: block;
  overflow: visible;
}
.trader-wrap.mood-idle .eyes-happy,
.trader-wrap.mood-idle .eyes-panic,
.trader-wrap.mood-idle .mouth-happy,
.trader-wrap.mood-idle .mouth-panic,
.trader-wrap.mood-idle .sweat,
.trader-wrap.mood-idle .sparkles { opacity: 0 !important; }
.trader-wrap.mood-idle .eyes-idle,
.trader-wrap.mood-idle .mouth-idle { opacity: 1 !important; }

.trader-wrap.mood-happy .eyes-idle,
.trader-wrap.mood-happy .eyes-panic,
.trader-wrap.mood-happy .mouth-idle,
.trader-wrap.mood-happy .mouth-panic,
.trader-wrap.mood-happy .sweat { opacity: 0 !important; }
.trader-wrap.mood-happy .eyes-happy,
.trader-wrap.mood-happy .mouth-happy,
.trader-wrap.mood-happy .sparkles { opacity: 1 !important; }

.trader-wrap.mood-panic .eyes-idle,
.trader-wrap.mood-panic .eyes-happy,
.trader-wrap.mood-panic .mouth-idle,
.trader-wrap.mood-panic .mouth-happy,
.trader-wrap.mood-panic .sparkles { opacity: 0 !important; }
.trader-wrap.mood-panic .eyes-panic,
.trader-wrap.mood-panic .mouth-panic,
.trader-wrap.mood-panic .sweat { opacity: 1 !important; }


/* Dual strategy tabs + capital + direction */
.strat-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.strat-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: #fff;
  border: 3px solid #ffd0e0;
  border-radius: 16px;
  padding: 10px 12px;
  font-family: var(--display);
  font-size: 15px;
  color: var(--ink);
  box-shadow: 0 3px 0 #f5a0b8;
  cursor: pointer;
  text-align: left;
}
.strat-tab small {
  font-family: var(--font);
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.strat-tab .tab-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.tab-dot.s0 { background: #7ec8ff; box-shadow: 0 0 0 2px #d6f0ff; }
.tab-dot.s1 { background: #ff8fab; box-shadow: 0 0 0 2px #ffe0ec; }
.strat-tab.active {
  border-color: #ff8fab;
  background: linear-gradient(180deg, #fff5f8, #ffe8f0);
  transform: translateY(-1px);
}
.strat-tab:hover { filter: brightness(1.03); }

.capital-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: #fff8ef;
  border: 2px dashed #ffd0a8;
  border-radius: 14px;
}
.capital-row label { font-weight: 700; font-size: 12px; color: var(--muted); }
.capital-row input[type="range"] {
  width: 100%;
  accent-color: #ff8fab;
}
.capital-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
}
.capital-labels b:first-child { color: #3a7cad; }
.capital-labels b:last-child { color: #c2185b; }

.dir-row { align-items: center; margin-bottom: 10px; }
.dir-label { font-weight: 700; color: var(--muted); font-size: 12px; min-width: 36px; }
.dir-seg { display: inline-flex; gap: 6px; }
.dir-btn.active[data-dir="long"] {
  background: linear-gradient(180deg, #d8fff0, #b8f0d8);
  border-color: #3dbf8a;
  color: #1a7a55;
}
.dir-btn.active[data-dir="short"] {
  background: linear-gradient(180deg, #f3e8ff, #e4d4ff);
  border-color: #9b6bff;
  color: #5b2d9e;
}

.strat-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  margin-bottom: 12px;
  padding: 8px 10px;
  background: #1e2a44;
  color: #e8eef8;
  border-radius: 14px;
  font-size: 12px;
}
.strat-status .ss-name { font-family: var(--display); font-size: 14px; }
.strat-status .ss-dir {
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
}
.strat-status .ss-dir.long { background: #3dbf8a; color: #fff; }
.strat-status .ss-dir.short { background: #9b6bff; color: #fff; }
.strat-status .ss-eq { color: #ffd56a; font-weight: 700; }
.strat-status .ss-act { color: #9eb0cc; flex: 1 1 100%; }

.preset-wrap { margin-bottom: 8px; }
.preset-assign {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  padding-left: 4px;
}
.preset-target-hint {
  font-size: 11px;
  color: var(--muted);
  margin: -4px 0 10px;
}

.strat-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 6px;
  margin-right: 4px;
  vertical-align: middle;
}
.strat-badge.s0 { background: #d6f0ff; color: #2a6a9a; }
.strat-badge.s1 { background: #ffe0ec; color: #c2185b; }

.log-row.short { color: #7a4fcf; }


/* ===== Viewport fit: short / compact screens ===== */
@media (max-height: 820px) {
  :root { --radius: 16px; }
  html, body { font-size: 13px; }
  .logo-emoji { font-size: 26px; }
  .logo-title { font-size: 20px; }
  .logo-sub { display: none; }
  .hud-pill { min-width: 96px; padding: 4px 10px 4px 6px; }
  .hud-ico { width: 28px; height: 28px; }
  .hud-emoji { font-size: 18px; }
  .stat-value { font-size: 15px; }
  .speech-mini { padding: 6px 10px; font-size: 12px; }
  .office-stage { height: clamp(72px, 12vh, 110px); min-height: 72px; }
  .trader-wrap { width: 68px; }
  .trader-wrap .trader-svg, .trader-svg { width: 64px; }
  .trader-bubble { left: 58px; bottom: 56px; font-size: 10px; }
  .chip-pill { padding: 4px 8px; font-size: 11px; }
  .btn { padding: 5px 9px; font-size: 12px; border-width: 2px; box-shadow: 0 3px 0 #f0c090; }
  .btn.skill.big { padding: 6px 12px; font-size: 14px; }
  .ind-card { padding: 7px 9px; margin-bottom: 7px; border-radius: 14px; }
  .ind-icon { width: 28px; height: 28px; font-size: 16px; border-radius: 9px; }
  .ind-name { font-size: 14px; }
  .slot-box { min-height: 40px; padding: 6px; }
  .log-box { max-height: 96px; }
  .event-banner, .comic-bubble { padding: 8px 12px; font-size: 12px; box-shadow: 4px 4px 0 #ffd56a; }
  .app-footer { font-size: 10px; padding: 3px 8px; }
}

@media (max-height: 700px) {
  .app-header { margin: 4px 4px 0; padding: 4px 8px; gap: 6px; }
  .layout { gap: 4px; padding: 4px; }
  .office-stage { display: none; }
  .app-footer { display: none; }
  .monitor-stand { display: none; }
  .panel-h small { display: none; }
  .center-col { gap: 4px; }
  .toolbar { padding: 4px 6px; gap: 4px; }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .speech-mini { display: none; }
  .logo { min-width: 0; }
}

@media (max-width: 900px) {
  body { overflow: hidden; }
  .app-header { flex-wrap: wrap; }
  .speech-mini { display: none; }
  .header-stats { flex: 1; justify-content: flex-end; }
  .layout { overflow-y: auto; overscroll-behavior: contain; }
}

/* ===== Hard one-screen lock (v2) ===== */
html, body { height: 100%; max-height: 100dvh; overflow: hidden !important; }
.layout { grid-template-rows: minmax(0, 1fr); min-height: 0; }
.layout > * { min-height: 0; max-height: 100%; }
.panel-cards, .panel-strategy { display: flex; flex-direction: column; overflow: hidden; }
.panel-cards .panel-b, .panel-strategy .panel-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.app-header, .app-footer, .toolbar { flex-shrink: 0; }
.chart-wrap { flex: 1 1 0; }
#chart { position: absolute; inset: 0; }
/* floating PnL */
.upnl { font-weight: 700; }
.upnl.up { color: #1fa971; } .upnl.down { color: #e5484d; } .upnl.flat { color: #8a7a70; }
.upnl-box { display: block; width: 100%; margin-top: 4px; padding: 4px 8px; border-radius: 10px; background: #fff7ee; border: 2px dashed #ffd7b8; font-size: 12px; }
.upnl-box.has-pos { border-style: solid; background: #f3fff8; }
.upnl-box.has-pos.neg { background: #fff1f1; }
@media (max-width: 900px) { .layout { grid-template-rows: none; } }

/* ===== Condition blocks editor ===== */
.cond-editor .slot-block { margin-bottom: 8px; }
.cond-group { display: flex; flex-direction: column; gap: 4px; cursor: default; }
.cg-head { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.op-tog { border: 2px solid #fff; border-radius: 999px; padding: 2px 9px; font-family: var(--display); font-size: 12px; cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.op-tog.and { background: #d6f0ff; color: #2a6a9a; }
.op-tog.or { background: #ffe8b8; color: #b5651d; }
.cg-res { margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #f2ebe4; color: #8a7a70; }
.cg-res.yes, .cond-mark.yes { background: #d9f7e8; color: #1fa971; }
.cg-res.no, .cond-mark.no { background: #ffe3e3; color: #e5484d; }
.cond-row { display: flex; align-items: center; gap: 4px; background: #fff; border: 2px solid #ffe0c4; border-radius: 12px; padding: 3px 5px; }
.cond-row.is-not { border-style: dashed; border-color: #c9a4ff; }
.cond-mark { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; background: #f2ebe4; color: #8a7a70; }
.cond-sel { flex: 1 1 auto; min-width: 0; font-size: 12px; border: none; background: transparent; color: var(--ink); font-family: inherit; }
.cond-not { border: 2px solid #e8dcff; background: #fff; color: #b8a8d8; border-radius: 8px; font-size: 11px; padding: 0 5px; cursor: pointer; }
.cond-not.on { background: #7a4fcf; color: #fff; border-color: #7a4fcf; }
.win-step { display: inline-flex; align-items: center; background: #fff3dc; border-radius: 999px; padding: 0 2px; flex: 0 0 auto; }
.win-btn { border: none; background: transparent; cursor: pointer; font-weight: 800; color: #b5651d; padding: 0 4px; }
.win-n { font-size: 11px; color: #b5651d; white-space: nowrap; }
.state-tag { font-size: 10px; color: #8a9bb8; background: #eef3fa; border-radius: 999px; padding: 1px 6px; flex: 0 0 auto; }
.cond-del { border: none; background: transparent; color: #c9b8ac; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.cond-del:hover { color: #e5484d; }
.op-join { align-self: center; font-size: 10px; font-weight: 700; padding: 0 8px; border-radius: 999px; }
.op-join.and { color: #2a6a9a; background: #eaf6ff; }
.op-join.or { color: #b5651d; background: #fff1d6; }
.cond-subgroup { border: 2px dashed #ffc9a0; border-radius: 14px; padding: 4px; background: #fffaf3; display: flex; flex-direction: column; gap: 4px; }
.sub-paren { font-family: var(--display); color: #e07a5f; font-size: 12px; }
.cond-desc { font-size: 11px; color: var(--muted); margin-top: 2px; padding-left: 4px; }
.risk-nums { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.num-field { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); }
.num-field input { width: 52px; border: 2px solid #ffe0c4; border-radius: 8px; padding: 1px 4px; font-size: 12px; font-family: inherit; }
.param-editor { margin: 6px 0; background: #fff; border: 2px solid #ffe0c4; border-radius: 14px; padding: 4px 8px; }
.param-editor summary { cursor: pointer; font-family: var(--display); color: #e07a5f; }
.param-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.param-card { background: #fffaf3; border-radius: 10px; padding: 4px 6px; display: flex; flex-direction: column; gap: 3px; }
.param-title { font-size: 12px; font-weight: 700; }
.cond-editor .slot-box { overflow: hidden; min-width: 0; }
.cond-row { min-width: 0; overflow: hidden; }
.cond-sel { flex: 1 1 0; width: 0; font-size: 11px; text-overflow: ellipsis; }
.cg-head .mini-btn { padding: 1px 7px; font-size: 11px; border-width: 2px; box-shadow: 0 2px 0 #f0c090; }
.cg-res { white-space: nowrap; }
.win-n { font-size: 10px; }
.state-tag { padding: 1px 4px; }
.cond-row { flex-wrap: wrap; align-self: stretch; }
.cond-sel { flex: 1 1 120px; width: auto; min-width: 100px; }
.cond-group > .cg-head, .cond-subgroup { align-self: stretch; }

/* ===== Depth + tape ===== */
.monitor-body { flex: 1 1 0; min-height: 0; display: flex; gap: 6px; }
.monitor-body .chart-wrap { flex: 1 1 0; min-width: 0; }
.depth-panel { flex: 0 0 clamp(112px, 10vw, 160px); min-height: 0; display: flex; flex-direction: column; background: #1e2a44; border: 3px solid #2a3a58; border-radius: 14px; padding: 4px; color: #e8eef8; font-family: var(--mono); font-size: 10px; overflow: hidden; }
.dt-tabs { display: flex; gap: 4px; margin-bottom: 3px; flex-shrink: 0; }
.dt-tab { flex: 1; border: 2px solid #3a4c70; background: #2a3a58; color: #9eb0cc; border-radius: 999px; font-family: var(--display); font-size: 11px; padding: 1px 0; cursor: pointer; }
.dt-tab.active { background: #ffd56a; color: #5a3e36; border-color: #fff; }
.dt-body { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.dt-body[hidden] { display: none; }
.ladder { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; overflow: hidden; }
.ladder.asks { justify-content: flex-end; }
.lrow, .trow, .tape-head { position: relative; display: flex; justify-content: space-between; gap: 3px; padding: 0 2px; white-space: nowrap; line-height: 1.35; }
.lrow i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0; opacity: .32; transition: width .25s ease; }
.lrow.ask:first-child i { border-top-right-radius: 4px; } .lrow.bid:last-child i { border-bottom-right-radius: 4px; }
.dt-depth .ladder { flex: 1 1 0; }
.dt-depth .ladder.asks { justify-content: flex-end; }
.lrow.ask i { background: #ff8a8a; } .lrow.bid i { background: #5ee0b0; }
.lrow span { position: relative; } .lrow.ask span:first-child { color: #ff8a8a; } .lrow.bid span:first-child { color: #5ee0b0; }
.ladder-mid { flex-shrink: 0; text-align: center; padding: 2px 0; border-top: 1px dashed #3a4c70; border-bottom: 1px dashed #3a4c70; margin: 1px 0; }
.ladder-mid b { font-size: 12px; display: block; } .ladder-mid b.up { color: #5ee0b0; } .ladder-mid b.down { color: #ff8a8a; }
.ladder-mid small { color: #9eb0cc; font-size: 9px; }
.depth-canvas { flex: 0 0 auto; width: 100%; height: clamp(28px, 7vh, 70px); margin-top: 3px; border-radius: 8px; background: #17213a; }
.tape-head { color: #9eb0cc; border-bottom: 1px dashed #3a4c70; flex-shrink: 0; }
.tape { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.trow.buy span:nth-child(2) { color: #5ee0b0; } .trow.sell span:nth-child(2) { color: #ff8a8a; }
.trow:first-child { background: rgba(255, 213, 106, .14); border-radius: 4px; }
.regime-badge.bull { background: #e3fbef; border-color: #9ee6c4; }
.regime-badge.bear { background: #ffe8e8; border-color: #ffb3b3; }
.regime-badge.range { background: #fff6dc; border-color: #ffe08a; }
.regime-badge.panic { background: #f1e6ff; border-color: #c9a4ff; animation: wobble-panic 0.8s ease-in-out infinite; }
@keyframes wobble-panic { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }

/* ===== condition editor v3: expression tree ===== */
.cond-row { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 2px; padding: 3px 4px; }
.cr-top { display: flex; align-items: center; gap: 3px; min-width: 0; }
.cr-top .cond-sel { flex: 1 1 0; width: 0; min-width: 0; }
.node-tools { display: flex; align-items: center; gap: 3px; flex-wrap: nowrap; min-width: 0; }
.tool-sp { flex: 1 1 auto; }
.tool-btn { border: 1.5px solid #f0d9c4; background: #fff; color: #9a7a62; border-radius: 7px; font-size: 10px; line-height: 1; padding: 2px 4px; cursor: pointer; white-space: nowrap; }
.tool-btn:hover:not(:disabled) { background: #fff3dc; color: #b5651d; }
.tool-btn:disabled { opacity: .35; cursor: default; }
.del-btn { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: none; background: #ff6b6b; color: #fff; font-size: 11px; font-weight: 900; line-height: 20px; padding: 0; cursor: pointer; box-shadow: 0 2px 0 #d94848; }
.del-btn:hover { background: #e5484d; transform: scale(1.1); }
.win-step { padding: 0; }
.win-btn { padding: 0 3px; }
.cond-not { padding: 0 4px; }
button.op-join { border: none; cursor: pointer; font-family: inherit; padding: 1px 10px; }
button.op-join:hover { filter: brightness(.93); text-decoration: underline; }
.cond-subgroup { border: 2px solid #ffc9a0; border-left-width: 4px; margin-left: 4px; padding: 3px; }
.cond-subgroup.lvl2 { border-color: #b9d8ff; background: #f6fbff; }
.cond-subgroup.lvl3 { border-color: #d6c4ff; background: #faf7ff; }
.sub-paren { font-size: 10px; font-weight: 800; color: #b5651d; }
.lvl2 > .cg-head .sub-paren { color: #2a6a9a; } .lvl3 > .cg-head .sub-paren { color: #7a4fcf; }
.cg-head { gap: 3px; }
.cg-head .mini-btn { padding: 1px 5px; }
.slot-label { display: flex; align-items: center; gap: 4px; }
.slot-label .sl-hint { margin-left: auto; }
.clear-btn { border: 1.5px solid #ffc4c4; background: #fff5f5; color: #e5484d; border-radius: 999px; font-size: 10px; padding: 1px 6px; cursor: pointer; white-space: nowrap; }
.cond-desc { word-break: break-all; }
.undo-toast { position: fixed; right: 16px; bottom: 34px; z-index: 9999; display: flex; gap: 8px; align-items: center; background: #3a2e28; color: #fff; padding: 6px 10px; border-radius: 14px; font-size: 12px; box-shadow: 0 4px 0 rgba(0,0,0,.2); opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s; }
.undo-toast.show { opacity: 1; transform: none; pointer-events: auto; }
.undo-btn { border: none; background: #ffd34d; color: #3a2e28; border-radius: 999px; padding: 2px 10px; font-weight: 800; cursor: pointer; }

/* ===== v4: multi-symbol quote list, multi-event banner, symbol select ===== */
.quote-h { padding-bottom: 2px; }
.quote-list { display: flex; flex-direction: column; gap: 1px; padding: 1px 4px 4px; flex-shrink: 0; max-height: none; }
.q-row { display: grid; grid-template-columns: 14px minmax(40px,1fr) auto 36px 24px 11px; align-items: center; gap: 1px;
  border: 1.5px solid transparent; border-radius: 8px; background: #fffaf0; padding: 0 3px; font: inherit; font-size: 10.5px;
  cursor: pointer; text-align: left; line-height: 1.15; color: inherit; transition: transform .12s, background .12s; }
.q-row:hover { background: #fff1cc; transform: translateX(2px); }
.q-row.active { border-color: #3d2c29; background: #ffe9a8; box-shadow: 2px 2px 0 #ffd56a; }
.q-tag { font-size: 11px; text-align: center; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #4a5a7a; }
.q-name { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-name .q-s { font-style: normal; font-size: 9px; margin-left: 2px; padding: 0 3px; border-radius: 6px; color: #fff; background: #5b8def; }
.q-name .q-s.s1 { background: #b46ae0; }
.q-px { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.q-chg { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; }
.q-chg.up { color: var(--up); } .q-chg.down { color: var(--down); }
.spark { width: 24px; height: 12px; }
.q-px, .q-chg { font-size: 10.5px; }
.quote-list { padding: 2px 4px 6px; }
.spark polyline { fill: none; stroke-width: 1.6; }
.spark polyline.up { stroke: var(--up); } .spark polyline.down { stroke: var(--down); }
.q-ev { font-size: 11px; text-align: center; animation: qev 1.2s ease-in-out infinite; }
@keyframes qev { 50% { transform: scale(1.25); } }
.event-banner.multi { align-items: center; gap: 4px 6px; padding: 5px 8px; flex-wrap: wrap; max-height: 64px; }
.event-banner.multi::before, .event-banner.multi::after { display: none; }
.ev-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 4px; border-radius: 999px; border: 2px solid #3d2c29;
  background: #fff; font-size: 11.5px; white-space: nowrap; max-width: 100%; overflow: hidden; }
.ev-chip .ev-icon { font-size: 14px !important; }
.ev-chip.mine { box-shadow: 2px 2px 0 #ffb347; background: #fff4d6; }
.ev-scope { font-size: 10px; font-weight: 800; padding: 0 5px; border-radius: 999px; color: #fff; }
.sc-macro .ev-scope, .tag.sc-macro { background: #e8590c; color: #fff; }
.sc-sector .ev-scope, .tag.sc-sector { background: #5b8def; color: #fff; }
.sc-company .ev-scope, .tag.sc-company { background: #9b59b6; color: #fff; }
.ev-tgt { color: var(--muted); font-size: 10.5px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.ev-chip .ev-rem { color: var(--muted); font-size: 10px; margin-left: 0 !important; }
.ev-more { font-weight: 800; color: var(--muted); font-size: 11px; }
.sym-row { gap: 6px; }
.sym-select { flex: 1; min-width: 0; border: 2px solid #3d2c29; border-radius: 10px; padding: 2px 6px; font: inherit; font-size: 12px; background: #fffaf0; }
.ss-sym { background: #eef3ff; border-radius: 999px; padding: 0 6px; font-size: 11px; font-weight: 700; }
.sym-tag { font-size: 10px; background: #eef3ff; border-radius: 6px; padding: 0 4px; margin: 0 3px; }

/* ===== v5: denser quote list for 11 symbols + breakdown emphasis ===== */
.q-row { min-height: 0; }
.q-px, .q-chg { font-size: 10px; }
.q-name { font-size: 10.5px; }
@media (max-height: 760px) {
  .quote-list { gap: 0; padding: 0 3px 2px; }
  .q-row { padding: 0 2px; font-size: 10px; line-height: 1.1; border-radius: 6px; }
  .spark { width: 22px; height: 11px; }
}

/* ================= Phase 1: meta progression ================= */
.meta-nav { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.meta-btn { position: relative; padding: 6px 10px; font-weight: 800; border-radius: 14px; background: linear-gradient(180deg,#fff7d6,#ffe39a); border: 2px solid #f0b429; box-shadow: 0 3px 0 #d69e2e; cursor: pointer; white-space: nowrap; }
.meta-btn:hover { transform: translateY(-2px); }
.meta-btn.has-dot::after { content: ''; position: absolute; top: -4px; right: -4px; width: 11px; height: 11px; border-radius: 50%; background: #ff4d6d; border: 2px solid #fff; animation: dotPulse 1.2s infinite; }
@keyframes dotPulse { 50% { transform: scale(1.35); } }
.meta-pill { font-weight: 800; background: #fff; border: 2px solid #ffd56a; border-radius: 12px; padding: 3px 8px; white-space: nowrap; }
.meta-pill b { margin-left: 3px; }
.upnl-pill { display: none !important; }
@media (max-width: 1400px) { .app-header .ticker { min-width: 0; flex: 1 1 60px; overflow: hidden; } .logo-sub { display: none; } }

.locked, button.locked { opacity: .5; filter: grayscale(.5); }
.lock-chip { background: #eee !important; color: #888 !important; }
.lock-tag { font-style: normal; font-size: 10px; color: #a0a0a0; margin-left: 4px; }
.rbadge { display: inline-block; font-size: 10px; font-weight: 900; padding: 0 5px; border-radius: 6px; color: #fff; line-height: 16px; }
.rb-N, .rb.rb-N { background: #94a3b8; } .rb-R, .rb.rb-R { background: #38bdf8; } .rb-SR, .rb.rb-SR { background: #c084fc; } .rb-SSR, .rb.rb-SSR { background: linear-gradient(90deg,#fbbf24,#f97316); }
.rb { display: inline-block; font-style: normal; font-weight: 900; font-size: 10px; color: #fff; padding: 0 4px; border-radius: 5px; margin: 0 2px 0 6px; }
.lv-stars { color: #f0b429; font-size: 10px; letter-spacing: -1px; margin-left: 4px; }
.ss-slots { font-size: 11px; margin-left: 6px; opacity: .8; }
.limit-toast { position: fixed; left: 50%; top: 80px; transform: translateX(-50%); background: #3d2c29; color: #fff; padding: 8px 16px; border-radius: 14px; z-index: 300; font-weight: 700; }

/* run HUD */
.chart-wrap { position: relative; }
.run-hud { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 6; width: 250px; background: rgba(255,255,255,.9); border: 3px solid #3d2c29; border-radius: 16px; padding: 7px 9px; box-shadow: 0 4px 0 rgba(61,44,41,.25); font-size: 12px; }
.rh-row { display: flex; align-items: center; gap: 6px; }
.rh-title { font-weight: 900; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-left { font-size: 11px; color: #7b6b65; white-space: nowrap; }
.rh-skip { padding: 2px 6px !important; font-size: 11px !important; }
.rh-bar { height: 9px; background: #f1e6d8; border-radius: 6px; margin: 5px 0; overflow: hidden; border: 1.5px solid #3d2c29; }
.rh-fill { height: 100%; width: 0; background: linear-gradient(90deg,#9be15d,#ffd56a,#ff8fab); transition: width .2s; }
.rh-missions { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rh-missions li { display: flex; gap: 4px; align-items: center; padding: 1px 4px; border-radius: 8px; }
.rh-missions li.ms-done { background: #e7f9dc; font-weight: 800; }
.rh-missions li.ms-fail { background: #ffe3e3; color: #a33; text-decoration: line-through; }

/* modal */
#meta-root { position: relative; z-index: 200; }
.mm-overlay { position: fixed; inset: 0; background: rgba(61,44,41,.45); display: flex; align-items: center; justify-content: center; z-index: 200; animation: mmFade .2s; }
@keyframes mmFade { from { opacity: 0; } }
.mm-card { background: #fffaf2; border: 4px solid #3d2c29; border-radius: 26px; box-shadow: 0 10px 0 rgba(61,44,41,.35); width: min(820px, 94vw); max-height: 92vh; display: flex; flex-direction: column; animation: mmPop .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes mmPop { from { transform: scale(.7) rotate(-2deg); opacity: 0; } }
.mm-head { display: flex; align-items: center; padding: 10px 16px 4px; }
.mm-head h2 { margin: 0; flex: 1; font-size: 22px; }
.mm-x { border: 3px solid #3d2c29; background: #ff8fab; color: #fff; font-weight: 900; border-radius: 50%; width: 34px; height: 34px; cursor: pointer; }
.mm-body { padding: 6px 16px 14px; overflow: auto; }
.pill { display: inline-block; background: #fff; border: 2px solid #e8dccb; border-radius: 12px; padding: 3px 9px; margin-right: 6px; font-size: 13px; }
.pill.gold { border-color: #ffd56a; background: #fff7d6; }

/* map */
.map-top { margin-bottom: 8px; }
.map-path { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; position: relative; padding: 6px 0 10px; }
.map-path::before { content: ''; position: absolute; left: 6%; right: 6%; top: 50%; border-top: 5px dashed #e8dccb; z-index: 0; }
.map-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 20px; border: 3px solid #3d2c29; background: #fff; cursor: pointer; box-shadow: 0 4px 0 rgba(61,44,41,.25); transition: transform .15s; }
.map-node:nth-child(even) { transform: translateY(14px); }
.map-node:hover { transform: translateY(-4px); }
.map-node.sel { background: #fff3c4; outline: 3px dashed #ff8fab; outline-offset: 2px; }
.map-node.perfect { background: linear-gradient(180deg,#fffbe6,#ffe8a3); }
.mn-ico { font-size: 30px; }
.mn-name { font-weight: 900; font-size: 13px; }
.mn-stars { color: #f0b429; font-size: 16px; font-weight: 900; }
.map-node.locked .mn-stars { color: #999; font-size: 12px; }
.map-detail { margin-top: 18px; background: #fff; border: 3px dashed #e8dccb; border-radius: 18px; padding: 10px 14px; min-height: 150px; }
.md-title { font-weight: 900; font-size: 18px; }
.md-desc { color: #7b6b65; margin: 2px 0 4px; }
.md-meta { font-size: 13px; }
.md-missions { margin: 6px 0; padding-left: 18px; font-weight: 700; }
.md-reward { font-size: 13px; color: #8b5cf6; font-weight: 700; }
.md-btns, .st-btns, .ga-btns { display: flex; gap: 10px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.map-foot { display: flex; justify-content: space-between; margin-top: 10px; }
.btn.danger { color: #c53030; }

/* settlement */
.st-stars { text-align: center; margin: -4px 0 4px; }
.big-star { display: inline-block; font-size: 58px; color: #e8dccb; margin: 0 6px; text-shadow: 0 4px 0 rgba(61,44,41,.2); }
.big-star.on { color: #ffc93c; animation: starPop .6s cubic-bezier(.3,1.8,.5,1) both; -webkit-text-stroke: 2px #d69e2e; }
@keyframes starPop { 0% { transform: scale(0) rotate(-90deg); color: #e8dccb; } 70% { transform: scale(1.35) rotate(10deg); } 100% { transform: scale(1); } }
.st-grid { display: grid; grid-template-columns: 420px 1fr; gap: 12px; align-items: center; }
.st-curve { border: 3px solid #3d2c29; border-radius: 14px; width: 100%; }
.st-stats { display: grid; gap: 6px; font-size: 15px; }
.st-stats .up { color: #e5484d; } .st-stats .down { color: #2f9e44; }
.st-missions { list-style: none; padding: 0; margin: 8px 0; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; font-weight: 700; }
.st-missions li { padding: 3px 10px; border-radius: 12px; background: #fff; border: 2px solid #e8dccb; }
.st-missions li.ms-done { background: #e7f9dc; border-color: #9be15d; }
.st-rewards { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.rw { padding: 4px 10px; border-radius: 12px; background: #f3ecff; border: 2px solid #b388ff; font-weight: 800; animation: mmPop .5s 1.3s both; }
.rw.gold { background: #fff7d6; border-color: #ffd56a; } .rw.blue { background: #e6f4ff; border-color: #7ec8ff; } .rw.pink { background: #ffe8ef; border-color: #ff8fab; }

/* gacha */
.ga-top { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 8px; }
.ga-rates { font-size: 12px; margin-left: auto; }
.ga-stage { min-height: 190px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; background: radial-gradient(circle,#fff 0%,#fff1d6 100%); border: 3px dashed #ffd56a; border-radius: 18px; padding: 10px; transition: box-shadow .4s; }
.ga-stage.glow-SSR { box-shadow: 0 0 0 4px #ffd56a, 0 0 40px 10px rgba(251,191,36,.7); }
.ga-stage.glow-SR { box-shadow: 0 0 0 4px #c084fc, 0 0 30px 6px rgba(192,132,252,.6); }
.ga-hint { color: #7b6b65; font-weight: 700; }
.flip-card { width: 130px; height: 170px; perspective: 700px; }
.ga-stage.multi .flip-card { width: 96px; height: 130px; }
.fc-inner { position: relative; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.3,1.4,.5,1); transform-style: preserve-3d; }
.flip-card.flipped .fc-inner { transform: rotateY(180deg); }
.fc-back, .fc-front { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 16px; border: 3px solid #3d2c29; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.fc-back { background: repeating-linear-gradient(45deg,#ff8fab 0 10px,#ffaec0 10px 20px); font-size: 40px; }
.fc-front { transform: rotateY(180deg); background: #fff; padding: 6px; text-align: center; }
.fc-front b { font-size: 13px; } .fc-front small { font-size: 11px; } .fc-perk { color: #8b5cf6; }
.fc-ico { font-size: 36px; }
.ga-stage.multi .fc-ico { font-size: 24px; }
.flip-card.gr-R.flipped .fc-front { border-color: #38bdf8; box-shadow: 0 0 12px rgba(56,189,248,.6); }
.flip-card.gr-SR.flipped .fc-front { border-color: #c084fc; box-shadow: 0 0 18px rgba(192,132,252,.8); background: linear-gradient(180deg,#faf5ff,#fff); }
.flip-card.gr-SSR.flipped .fc-front { border-color: #fbbf24; box-shadow: 0 0 26px 6px rgba(251,191,36,.9); background: linear-gradient(160deg,#fff8d6,#fff); animation: ssrShine 1.2s infinite alternate; }
@keyframes ssrShine { to { box-shadow: 0 0 40px 12px rgba(251,191,36,.95); } }
.ga-coll { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-top: 10px; }
.gc { display: flex; flex-direction: column; align-items: center; padding: 5px 2px; border-radius: 12px; border: 3px solid #c5d4c8; background: #fff; font-size: 11px; text-align: center; }
.gc.gr-R { border-color: #7ec8ff; } .gc.gr-SR { border-color: #c084fc; } .gc.gr-SSR { border-color: #fbbf24; background: #fffbe8; }
.gc.locked { opacity: .45; filter: grayscale(.8); }
.gc-ico { font-size: 22px; } .gc-name { font-weight: 800; }

/* upgrades */
.up-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.up-row { display: flex; align-items: center; gap: 8px; background: #fff; border: 3px solid #e8dccb; border-radius: 16px; padding: 7px 10px; }
.up-row.maxed { background: #effbe6; border-color: #9be15d; }
.up-row.soon { opacity: .55; }
.up-ico { font-size: 28px; }
.up-txt { flex: 1; display: flex; flex-direction: column; } .up-txt em { font-style: normal; color: #8b5cf6; font-size: 12px; } .up-txt small { color: #7b6b65; }

/* offline + tutorial */
.mm-offline { width: 420px; text-align: center; }
.off-big { font-size: 44px; font-weight: 900; color: #8b5cf6; }
.off-txt { margin: 6px 0 12px; }
.tut-glow { position: relative; z-index: 150 !important; box-shadow: 0 0 0 4px #ff8fab, 0 0 0 9999px rgba(61,44,41,.35) !important; border-radius: 14px; }
.tut-bubble { position: fixed; z-index: 260; width: 300px; background: #fff; border: 3px solid #3d2c29; border-radius: 18px; padding: 10px 12px; font-weight: 700; box-shadow: 0 6px 0 rgba(61,44,41,.3); animation: mmPop .35s cubic-bezier(.3,1.6,.5,1); }
.tut-btns { display: flex; align-items: center; gap: 6px; margin-top: 8px; justify-content: flex-end; } .tut-btns span { margin-right: auto; color: #999; }
.juice-confetti { position: fixed; width: 9px; height: 13px; border-radius: 2px; z-index: 400; pointer-events: none; }
.juice-flash-win { background: radial-gradient(circle, rgba(255,233,140,.55), transparent 70%); }

/* ===== Phase 2: 决策卡 / 小道消息 ===== */
#dec-root { position: fixed; inset: 0; z-index: 900; pointer-events: none; display: none; }
#dec-root.open { display: block; pointer-events: auto; }
.dc-backdrop { position: absolute; inset: 0; background: rgba(60,40,20,.28); animation: dcFade .25s; }
.dc-card { position: absolute; left: 50%; top: 50%; width: min(560px, 92vw); max-height: 92vh; overflow: auto; transform: translate(-50%,-50%);
  background: #fffaf0; border: 3px solid #3a2a1a; border-radius: 20px; box-shadow: 6px 7px 0 #3a2a1a; padding: 14px 16px 12px;
  animation: dcSlide .42s cubic-bezier(.2,1.4,.4,1); font-size: 14px; }
.dc-card.tip { background: #f3fbff; }
@keyframes dcSlide { from { transform: translate(-50%, 60vh) rotate(6deg); } to { transform: translate(-50%,-50%) rotate(0); } }
@keyframes dcFade { from { opacity: 0; } }
.dc-title { font-size: 19px; font-weight: 900; margin-bottom: 8px; }
.dc-tip { display: flex; gap: 10px; align-items: flex-start; }
.dc-avatar { font-size: 44px; line-height: 1; animation: dcWobble 1.2s infinite ease-in-out; }
@keyframes dcWobble { 50% { transform: rotate(-8deg) scale(1.06); } }
.dc-bubble { flex: 1; background: #fff; border: 2px solid #3a2a1a; border-radius: 14px; padding: 6px 10px; position: relative; }
.dc-src { font-weight: 800; } .dc-src small { color: #9a8; font-weight: 400; }
.dc-said { font-size: 16px; font-weight: 800; color: #c0392b; margin: 2px 0; }
.dc-line { color: #8a7a6a; font-size: 12px; }
.dc-event b { font-size: 16px; }
.dc-tag { display: inline-block; padding: 1px 8px; border-radius: 10px; border: 2px solid #3a2a1a; font-size: 12px; font-weight: 800; }
.dc-tag.up { background: #ffd6d6; } .dc-tag.down { background: #d6f5dd; }
.dc-flavor { color: #7a6a5a; font-size: 12px; margin-top: 3px; } .dc-hint { font-size: 12px; margin-top: 3px; color: #a0522d; }
.rel-meter { margin: 8px 0 2px; font-size: 12px; }
.rel-row { display: flex; justify-content: space-between; }
.rel-dots i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #3a2a1a; margin-left: 2px; }
.rel-dots i.on { background: #f5b301; }
.rel-bar { position: relative; height: 10px; border: 2px solid #3a2a1a; border-radius: 6px; background: #eee; overflow: hidden; margin-top: 3px; }
.rel-bar b { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg,#ff9f43,#2ecc71); transition: width .6s; }
.rel-bar s { position: absolute; top: 0; bottom: 0; background: rgba(255,255,255,.45); border-left: 1px dashed #333; border-right: 1px dashed #333; }
.rel-meter.unk .rel-bar { background: repeating-linear-gradient(45deg,#eee 0 6px,#ddd 6px 12px); }
.dc-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.dc-opt { text-align: left; background: #fff; border: 2.5px solid #3a2a1a; border-radius: 12px; padding: 6px 9px; cursor: pointer; box-shadow: 3px 3px 0 #3a2a1a; transition: transform .1s; font: inherit; }
.dc-opt:hover:not(:disabled) { transform: translate(-1px,-2px); background: #fff3d6; }
.dc-opt.def { background: #f4f0ea; } .dc-opt.picked { background: #ffe08a !important; transform: scale(1.04); }
.dc-opt:disabled:not(.picked) { opacity: .45; }
.dc-ol { font-weight: 900; font-size: 14px; } .dc-ol em { font-style: normal; font-size: 11px; background: #ccc; border-radius: 6px; padding: 0 4px; }
.dc-od { font-size: 12px; margin-top: 2px; } .dc-or { font-size: 11px; color: #b0553a; margin-top: 2px; }
.dc-timer { position: relative; height: 20px; flex-shrink: 0; margin-top: 10px; border: 2px solid #3a2a1a; border-radius: 9px; overflow: hidden; background: #fff; }
.dc-timer b { position: absolute; left: 0; top: 0; bottom: 0; background: #4fc3f7; }
.dc-timer b.hurry { background: #ff6b6b; animation: dcBlink .4s infinite alternate; }
@keyframes dcBlink { to { opacity: .55; } }
.dc-timer span { position: relative; display: block; font-size: 11px; font-weight: 800; padding-left: 8px; line-height: 16px; }
.dc-result { margin-top: 8px; background: #e9ffe9; border: 2px dashed #2e8b57; border-radius: 10px; padding: 6px 10px; font-size: 13px; animation: dcPop .35s cubic-bezier(.2,1.6,.4,1); }
.dc-result.bad { background: #ffecec; border-color: #c0392b; }
.dc-result ul, .dec-toast ul { margin: 3px 0 0 16px; padding: 0; }
@keyframes dcPop { from { transform: scale(.5); opacity: 0; } }
#dec-toasts { position: fixed; right: 14px; top: 74px; z-index: 880; display: flex; flex-direction: column; gap: 8px; width: 320px; pointer-events: none; }
.dec-toast { background: #fffaf0; border: 2.5px solid #3a2a1a; border-radius: 14px; box-shadow: 4px 4px 0 #3a2a1a; padding: 8px 11px; font-size: 13px; animation: dcToast .4s cubic-bezier(.2,1.5,.4,1); transition: opacity .4s, transform .4s; }
.dec-toast.good { background: #ecffef; } .dec-toast.bad { background: #fff0f0; }
.dec-toast.out { opacity: 0; transform: translateX(40px); }
.dec-toast.tip-res { font-size: 14px; }
.tr-head b { padding: 0 6px; border-radius: 6px; border: 2px solid #3a2a1a; }
.tr-real { background: #b8f5c4; } .tr-fake { background: #ddd; } .tr-reverse { background: #ffd28a; } .tr-trap { background: #ff9b9b; }
.tr-verdict { font-weight: 900; font-size: 15px; margin: 4px 0; } .tr-learn { color: #6b4fa0; font-weight: 800; }
@keyframes dcToast { from { transform: translateX(120%) rotate(4deg); } }
#dec-bets { position: absolute; left: 50%; transform: translateX(-50%); bottom: 6px; display: flex; gap: 5px; z-index: 5; pointer-events: none; flex-wrap: wrap; justify-content: center; }
#dec-bets .db { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 9px; border: 2px solid #3a2a1a; background: #fff; }
#dec-bets .db.up { background: #ffe1e1; } #dec-bets .db.down { background: #dcf7e2; } #dec-bets .db.buff { background: #efe4ff; }
.dec-toggle { cursor: pointer; font-size: 12px; user-select: none; } .dec-toggle input { vertical-align: middle; margin: 0 2px 0 0; }

/* ===== Phase 3: 韭菜主角 / 排行榜 / 大场面 ===== */
#leek { position: fixed; left: 10px; bottom: 26px; width: 66px; height: 80px; z-index: 860; cursor: pointer; }
.leek-body { width: 100%; height: 100%; filter: drop-shadow(2px 3px 0 rgba(58,42,26,.35)); }
.leek-svg { width: 100%; height: 100%; overflow: visible; }
.leek-svg .ln { fill: none; stroke: #3a2a1a; stroke-width: 2.6; stroke-linecap: round; }
#leek[data-mood=idle] .leek-svg { animation: lkBob 2.4s ease-in-out infinite; }
#leek[data-mood=happy] .leek-svg { animation: lkHop .6s ease-in-out infinite; }
#leek[data-mood=ecstatic] .leek-svg { animation: lkJump .45s ease-in-out infinite; }
#leek[data-mood=sweat] .leek-svg, #leek[data-mood=nervous] .leek-svg { animation: lkShiver .15s linear infinite; }
#leek[data-mood=cry] .leek-svg { animation: lkSob .8s ease-in-out infinite; }
#leek[data-mood=sleep] .leek-svg { animation: lkBob 4s ease-in-out infinite; transform-origin: bottom; }
.leek-svg .leaves { transform-origin: 50px 40px; animation: lkLeaf 1.8s ease-in-out infinite; }
.leek-svg .tear { animation: lkTear .9s linear infinite; }
.leek-svg .zzz { animation: lkZ 2s ease-in-out infinite; } .leek-svg .z2 { animation-delay: .6s; }
.leek-svg .spark { animation: lkZ 1s ease-in-out infinite; }
@keyframes lkBob { 50% { transform: translateY(-3px); } }
@keyframes lkHop { 50% { transform: translateY(-6px) rotate(-3deg); } }
@keyframes lkJump { 50% { transform: translateY(-12px) scale(1.06) rotate(4deg); } }
@keyframes lkShiver { 25% { transform: translateX(-1.5px); } 75% { transform: translateX(1.5px); } }
@keyframes lkSob { 50% { transform: scaleY(.94) translateY(3px); } }
@keyframes lkLeaf { 50% { transform: rotate(4deg); } }
@keyframes lkTear { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(14px); } }
@keyframes lkZ { 0% { opacity: 0; transform: translateY(4px); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
.leek-bubble { position: absolute; left: 62px; bottom: 52px; width: max-content; max-width: 210px; background: #fff; border: 2.5px solid #3a2a1a; border-radius: 14px 14px 14px 2px; padding: 4px 9px; font-size: 13px; font-weight: 800; box-shadow: 3px 3px 0 #3a2a1a; }
.leek-bubble.pop { animation: dcPop .3s cubic-bezier(.2,1.6,.4,1); transform-origin: left bottom; }
#rival-board { position: absolute; left: 8px; top: 34px; z-index: 6; background: rgba(255,250,240,.93); border: 2px solid #3a2a1a; border-radius: 10px; padding: 3px 5px; font-size: 11px; width: 150px; box-shadow: 2px 2px 0 #3a2a1a; }
.rb-title { font-weight: 900; font-size: 11px; }
.rb-row { display: flex; align-items: center; gap: 3px; padding: 1px 2px; border-radius: 5px; position: relative; transition: background .4s; }
.rb-row b { width: 12px; } .rb-row span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-row i { font-style: normal; font-weight: 800; } .rb-row i.pos { color: #d63031; } .rb-row i.neg { color: #1e9e57; }
.rb-row.me { background: #fff1a8; font-weight: 900; }
.rb-row em { font-style: normal; font-size: 9px; position: absolute; right: -11px; animation: dcPop .4s; }
.rb-row.up em { color: #d63031; } .rb-row.down em { color: #1e9e57; }
.rb-row.up { animation: rbUp .8s; } @keyframes rbUp { 30% { background: #ffd1d1; transform: scale(1.06); } }
.rb-taunt { position: absolute; left: 154px; width: max-content; max-width: 190px; background: #3a2a1a; color: #fff; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 8px; animation: dcToast .35s; z-index: 7; }
#showpiece { position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; animation: spIn .18s; }
#showpiece[hidden] { display: none; }
#showpiece.sp-win { background: radial-gradient(circle, rgba(255,215,0,.45), rgba(255,170,0,.15) 70%); }
#showpiece.sp-loss { background: rgba(90,90,90,.55); animation: spIn .18s, spGrey 1.4s; }
#showpiece.sp-high { background: radial-gradient(circle, rgba(255,120,120,.28), transparent 70%); }
#showpiece.sp-over { background: radial-gradient(circle, rgba(120,180,255,.3), transparent 70%); }
#showpiece.low { background: none !important; align-items: flex-start; padding-top: 70px; pointer-events: none; }
#showpiece.low .sp-banner { transform: scale(.6); }
.sp-banner { text-align: center; background: #fffaf0; border: 4px solid #3a2a1a; border-radius: 22px; box-shadow: 7px 8px 0 #3a2a1a; padding: 14px 34px; animation: spBan 1.4s cubic-bezier(.2,1.5,.4,1) forwards; position: relative; z-index: 2; }
.sp-win .sp-banner { background: linear-gradient(#fff6c2, #ffd24a); } .sp-loss .sp-banner { background: #e3e3e3; filter: grayscale(.4); }
.sp-big { font-size: 54px; font-weight: 900; letter-spacing: 3px; -webkit-text-stroke: 1.5px #3a2a1a; color: #e74c3c; }
.sp-loss .sp-big { color: #555; } .sp-high .sp-big { color: #e74c3c; } .sp-over .sp-big { color: #2f80ed; }
.sp-sub { font-size: 18px; font-weight: 800; } .sp-skip { font-size: 11px; color: #8a7a6a; margin-top: 4px; }
.coin { position: absolute; top: -40px; font-size: 30px; animation: spCoin 1.3s ease-in forwards; z-index: 1; }
.cracks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.cracks path { fill: none; stroke: #222; stroke-width: .5; stroke-dasharray: 300; stroke-dashoffset: 300; animation: spCrack .35s forwards; }
@keyframes spIn { from { opacity: 0; } }
@keyframes spGrey { 0% { background: rgba(255,255,255,.9); } 15% { background: rgba(90,90,90,.6); } }
@keyframes spBan { 0% { transform: scale(.2) rotate(-10deg); opacity: 0; } 25% { transform: scale(1.12) rotate(2deg); opacity: 1; } 35%, 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(.9); opacity: 0; } }
@keyframes spCoin { to { transform: translateY(115vh) rotate(540deg); } }
@keyframes spCrack { to { stroke-dashoffset: 0; } }
.st-rank { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; margin: 4px 0; justify-content: center; }
.st-rank span { background: #fff; border: 1.5px solid #3a2a1a; border-radius: 8px; padding: 0 6px; } .st-rank span.me { background: #fff1a8; font-weight: 900; }
.st-rank i { font-style: normal; }

/* ===== Phase 4: instant backtest preview + signals ===== */
.bt-preview { background: linear-gradient(135deg,#fffaf0,#fff3d6); border: 2.5px solid #3a2e2a; border-radius: 14px; box-shadow: 3px 3px 0 #3a2e2a; padding: 6px 8px; margin: 6px 0; position: relative; }
.bt-head { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; }
.bt-title { flex: 1; }
.bt-range { color: #8a7a70; font-weight: 600; font-size: 11px; }
.bt-grade { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 900 18px/1 "Noto Sans SC", sans-serif; border: 2.5px solid #3a2e2a; background: #eee; }
.bt-grade.gS { background: linear-gradient(135deg,#ffe066,#ff9f1c); color: #7a3e00; box-shadow: 0 0 10px #ffd166; }
.bt-grade.gA { background: #b9f6ca; color: #146c43; }
.bt-grade.gB { background: #cfe8ff; color: #1d4e89; }
.bt-grade.gC { background: #ffe0b2; color: #9a4b00; }
.bt-grade.gD { background: #ffcdd2; color: #b71c1c; }
.bt-grade.pop { animation: btPop .45s cubic-bezier(.2,1.6,.4,1); }
.bt-delta { font-size: 12px; font-weight: 900; padding: 1px 6px; border-radius: 10px; color: #8a7a70; }
.bt-delta.up { background: #d9f7e8; color: #15803d; }
.bt-delta.dn { background: #ffe3e3; color: #dc2626; }
.bt-delta.pop { animation: btPop .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes btPop { 0% { transform: scale(.4); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.bt-body { display: flex; gap: 6px; align-items: center; margin-top: 3px; }
.bt-curve { flex: 0 0 40%; height: 46px; background: #fff; border-radius: 8px; border: 1.5px solid #e6dccb; }
.bt-stats { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; text-align: center; }
.bt-stats b { display: block; font-size: 12px; color: #3a2e2a; }
.bt-stats b.up { color: #16a34a; } .bt-stats b.dn { color: #dc2626; }
.bt-stats i { font-style: normal; font-size: 10px; color: #8a7a70; }
.bt-verdict { font-size: 12px; font-weight: 700; margin-top: 3px; color: #5a4636; }
.bt-why { margin-top: 4px; font-size: 11.5px; background: #fff7c2; border: 1.5px dashed #e0a800; border-radius: 8px; padding: 3px 6px; color: #6b4e00; }
.cond-mark.live { width: 12px; height: 12px; margin: 0 4px; font-size: 0; transition: background .2s; }
.cond-mark.live.yes { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
.cond-mark.live.no { background: #b8b0a6; }
.cond-row.cond-blocked { outline: 2px dashed rgba(229,72,77,.55); outline-offset: -2px; }
.sig-tip { position: absolute; z-index: 30; max-width: 190px; background: #fffdf6; border: 2px solid #3a2e2a; border-radius: 10px; box-shadow: 2px 2px 0 #3a2e2a; padding: 4px 7px; font-size: 11.5px; pointer-events: none; color: #3a2e2a; }
.sig-tip .up { color: #16a34a; } .sig-tip .dn { color: #dc2626; }
.sig-legend { position: absolute; right: 62px; top: 6px; z-index: 5; display: flex; flex-direction: column; gap: 1px; font-size: 10.5px; background: rgba(255,253,246,.85); border: 1.5px solid #3a2e2a; border-radius: 8px; padding: 2px 6px; pointer-events: none; color: #3a2e2a; }
.sig-legend i { font-style: normal; font-weight: 900; }
.sig-legend .sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; vertical-align: middle; }
.sig-legend .ring { display: inline-block; width: 7px; height: 7px; border-radius: 50%; border: 2px solid; vertical-align: middle; }
.bt-curve { flex-basis: 30%; min-width: 0; }
.bt-stats { gap: 0; } .bt-stats b { font-size: 11px; white-space: nowrap; } .bt-stats i { font-size: 9.5px; white-space: nowrap; }