:root {
  --bg: #0b1114;
  --bg-2: #10191d;
  --panel: rgba(18, 30, 35, 0.94);
  --panel-2: #16242a;
  --line: rgba(201, 178, 116, 0.22);
  --line-strong: rgba(201, 178, 116, 0.46);
  --gold: #d5bd79;
  --gold-2: #f2dc98;
  --teal: #5bc1b2;
  --teal-2: #8be1d3;
  --red: #e98080;
  --text: #edf4f4;
  --muted: #94a7aa;
  --muted-2: #6f8286;
  --shadow: 0 18px 50px rgba(0,0,0,.28);
  --radius: 20px;
  --radius-sm: 13px;
}

/* V2.0.0 workspace: account configuration first, compact controls, clear results. */

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  background:
    radial-gradient(circle at 15% 0%, rgba(64, 147, 136, .14), transparent 32rem),
    radial-gradient(circle at 90% 8%, rgba(190, 151, 74, .09), transparent 30rem),
    linear-gradient(180deg, #0a1013, #0d1519 45%, #0b1114);
  color: var(--text);
}

button, input, select { font: inherit; }

button { color: inherit; }

.app-shell {
  width: min(1280px, calc(100% - 28px));
  margin: 0 auto;
  padding: 28px 0 64px;
}

.topbar {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--teal-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -.03em;
}

.sub {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.version-pill,
.status-chip,
.step-badge,
.leader-tag {
  border: 1px solid var(--line);
  background: rgba(213, 189, 121, .08);
  color: var(--gold-2);
  border-radius: 999px;
  font-weight: 800;
}

.version-pill {
  padding: 9px 13px;
  font-size: 12px;
  white-space: nowrap;
}

.tabs {
  display: flex;
  gap: 8px;
  padding: 5px;
  margin-bottom: 18px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}

.tab {
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: .2s ease;
}

.tab:hover { color: var(--text); }

.tab.active {
  background: var(--panel-2);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  gap: 18px;
  align-items: start;
}

.main-column,
.side-column {
  min-width: 0;
}

.main-column {
  display: grid;
  gap: 18px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 80px),
    var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.main-column > .panel,
.sticky-panel,
.empty-state,
#tab-roadmap > .panel {
  padding: 18px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.panel-head > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.panel-head h2 {
  margin: 0;
  font-size: 18px;
}

.panel-head.compact { margin-bottom: 14px; }

.step-badge {
  min-width: 34px;
  padding: 6px 9px;
  text-align: center;
  font-size: 11px;
}

.status-chip {
  padding: 6px 9px;
  font-size: 10px;
  color: var(--muted);
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  white-space: nowrap;
}

.status-chip.accent {
  color: var(--teal-2);
  border-color: rgba(91,193,178,.24);
  background: rgba(91,193,178,.07);
}

.status-chip.warning {
  color: #f2bf87;
  border-color: rgba(225,157,76,.24);
  background: rgba(225,157,76,.07);
}

.field-grid {
  display: grid;
  gap: 12px;
}

.field-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.field,
.readout {
  display: grid;
  gap: 8px;
}

.field > span,
.readout > span,
.section-label,
.members-head,
.bonus-readout > span,
.drop-preview > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

select,
.speed-input,
.unit-name {
  min-width: 0;
  width: 100%;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  outline: none;
  background: #0f191d;
  color: var(--text);
  transition: .18s ease;
}

select {
  min-height: 46px;
  padding: 0 12px;
}

select:focus,
.speed-input:focus,
.unit-name:focus {
  border-color: rgba(91,193,178,.65);
  box-shadow: 0 0 0 3px rgba(91,193,178,.09);
}

select:disabled {
  opacity: .68;
  cursor: not-allowed;
}

.readout {
  padding: 11px 12px;
  border: 1px dashed rgba(255,255,255,.08);
  border-radius: 11px;
  background: rgba(255,255,255,.018);
}

.readout strong {
  font-size: 13px;
  color: var(--gold-2);
}

.party-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.party-summary > div,
.metric-grid > div {
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 12px;
  background: rgba(255,255,255,.018);
}

.party-summary span,
.metric-grid span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
}

.party-summary strong {
  font-size: 14px;
}

.section-label {
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.unit-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 14px;
  background: rgba(255,255,255,.022);
}

.leader-card {
  border-color: var(--line-strong);
  background:
    linear-gradient(90deg, rgba(213,189,121,.07), transparent 45%),
    rgba(255,255,255,.02);
}

.unit-avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: #1b2a30;
  color: var(--gold-2);
  font-weight: 900;
}

.unit-body { min-width: 0; }

.unit-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.unit-name {
  flex: 1;
  padding: 6px 8px;
  border-color: transparent;
  background: transparent;
  font-weight: 800;
}

.leader-tag {
  padding: 4px 7px;
  font-size: 9px;
}

.speed-line {
  display: grid;
  grid-template-columns: auto minmax(88px, 120px) auto;
  gap: 8px;
  align-items: center;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
}

.speed-input {
  padding: 6px 8px;
  text-align: right;
  color: var(--teal-2);
  font-weight: 800;
}

.speed-line em {
  font-style: normal;
  color: var(--muted-2);
}

.ability-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.ability-tag {
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px;
  background: rgba(255,255,255,.02);
  color: var(--muted);
  font-size: 10px;
  cursor: pointer;
}

.ability-tag.active {
  color: var(--teal-2);
  border-color: rgba(91,193,178,.35);
  background: rgba(91,193,178,.10);
}

.members-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  margin-bottom: 8px;
}

.members-head .section-label { margin: 0; }

.text-btn,
.icon-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.text-btn {
  color: var(--teal-2);
  font-size: 12px;
}

.icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 20px;
}

.icon-btn:hover {
  background: rgba(233,128,128,.08);
  color: var(--red);
}

.member-list {
  display: grid;
  gap: 9px;
}

.artifact-card {
  display: grid;
  grid-template-columns: auto 44px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(213,189,121,.045);
  cursor: pointer;
}

.artifact-card input {
  width: 18px;
  height: 18px;
  accent-color: var(--teal);
}

.artifact-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(213,189,121,.30);
  background: #1b2830;
  color: var(--gold-2);
  font-size: 20px;
  font-weight: 900;
}

.artifact-card strong,
.artifact-card small {
  display: block;
}

.artifact-card small {
  margin-top: 4px;
  color: var(--muted);
}

.artifact-card b {
  color: var(--gold-2);
}

.bonus-readout {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  background: rgba(91,193,178,.05);
  border: 1px solid rgba(91,193,178,.12);
}

.bonus-readout strong {
  color: var(--teal-2);
}

.bonus-readout small {
  color: var(--muted-2);
}

.primary-btn {
  width: 100%;
  min-height: 54px;
  display: grid;
  place-items: center;
  gap: 2px;
  margin-top: 14px;
  border: 1px solid rgba(91,193,178,.42);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent),
    #1c6b64;
  color: white;
  box-shadow: 0 10px 28px rgba(18, 92, 85, .26);
  cursor: pointer;
}

.primary-btn:hover { filter: brightness(1.08); }
.primary-btn:active { transform: translateY(1px); }

.primary-btn small {
  color: rgba(255,255,255,.62);
  font-size: 10px;
}

.helper {
  margin: 9px 1px 0;
  color: var(--muted-2);
  font-size: 11px;
  line-height: 1.5;
}

.sticky-panel {
  position: sticky;
  top: 16px;
}

.result-block {
  padding: 14px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,.065);
}

.result-block + .result-block { margin-top: 10px; }

.result-block.diamond {
  background: linear-gradient(145deg, rgba(125, 110, 211, .10), rgba(255,255,255,.015));
}

.result-block.affection {
  background: linear-gradient(145deg, rgba(228, 109, 132, .08), rgba(255,255,255,.015));
}

.result-title {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 11px;
}

.result-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255,255,255,.04);
  color: var(--gold-2);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}

.metric-grid > div {
  padding: 9px;
}

.metric-grid b {
  font-size: 14px;
  color: var(--text);
}

.drop-preview,
.formula-note {
  margin-top: 10px;
  padding: 11px;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.08);
  color: var(--muted);
}

.drop-preview p,
.formula-note p {
  margin: 5px 0 0;
  font-size: 11px;
  line-height: 1.55;
}

.formula-note strong {
  color: var(--gold-2);
  font-size: 12px;
}

.empty-state {
  min-height: 260px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
}

.empty-state h2 { margin: 10px 0 5px; }

.empty-state p {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.empty-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid var(--line);
  color: var(--gold-2);
  font-size: 24px;
}

.roadmap {
  display: grid;
  gap: 10px;
}

.roadmap-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 13px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.055);
  background: rgba(255,255,255,.018);
}

.roadmap-item > span {
  width: 52px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  color: var(--muted);
  font-weight: 900;
}

.roadmap-item.current {
  border-color: rgba(91,193,178,.28);
  background: rgba(91,193,178,.045);
}

.roadmap-item.current > span {
  color: var(--teal-2);
  background: rgba(91,193,178,.11);
}

.roadmap-item strong {
  color: var(--text);
}

.roadmap-item p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .layout-grid { grid-template-columns: 1fr; }
  .sticky-panel { position: static; }
}

@media (max-width: 620px) {
  .app-shell {
    width: min(100% - 18px, 1280px);
    padding-top: 18px;
  }

  .topbar { align-items: center; }
  .sub { font-size: 12px; }
  .version-pill { display: none; }

  .tabs {
    width: 100%;
  }

  .tab {
    flex: 1;
    padding-inline: 10px;
  }

  .main-column > .panel,
  .sticky-panel,
  .empty-state,
  #tab-roadmap > .panel {
    padding: 14px;
  }

  .panel { border-radius: 17px; }

  .panel-head {
    align-items: flex-start;
  }

  .panel-head h2 { font-size: 16px; }

  .status-chip { display: none; }

  .field-grid.two { grid-template-columns: 1fr; }

  .party-summary {
    grid-template-columns: 1fr 1fr;
  }

  .party-summary > div:last-child {
    grid-column: 1 / -1;
  }

  .unit-card {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 11px;
  }

  .unit-avatar {
    width: 42px;
    height: 42px;
  }

  .speed-line {
    grid-template-columns: auto 1fr auto;
  }

  .artifact-card {
    grid-template-columns: auto 40px minmax(0, 1fr);
  }

  .artifact-card b {
    grid-column: 3;
  }

  .metric-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 390px) {
  .party-summary {
    grid-template-columns: 1fr;
  }

  .party-summary > div:last-child {
    grid-column: auto;
  }

  .metric-grid { grid-template-columns: 1fr; }

  .tabs .tab {
    font-size: 12px;
  }
}


/* V1.1 - official expedition party / speed UI */
.walk-level-input,
.leadership-input {
  min-width: 0;
  width: 100%;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  outline: none;
  background: #0f191d;
  color: var(--text);
  transition: .18s ease;
  padding: 6px 8px;
  text-align: right;
  font-weight: 800;
}

.walk-level-input {
  color: var(--gold-2);
}

.leadership-input {
  color: #f4c58d;
}

.walk-level-input:focus,
.leadership-input:focus {
  border-color: rgba(91,193,178,.65);
  box-shadow: 0 0 0 3px rgba(91,193,178,.09);
}

.unit-stat-grid {
  display: grid;
  gap: 5px;
}

.internal-level-line {
  opacity: .95;
}

.leadership-line {
  padding-top: 4px;
  border-top: 1px dashed rgba(255,255,255,.06);
}

.unit-note {
  margin: 7px 0 0;
  color: var(--muted-2);
  font-size: 10px;
  line-height: 1.45;
}

.official-formula-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: stretch;
  margin-bottom: 16px;
  padding: 13px;
  border: 1px solid rgba(91,193,178,.22);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(91,193,178,.075), transparent 60%),
    rgba(255,255,255,.015);
}

.formula-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--teal-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.official-formula-card strong {
  color: var(--text);
  font-size: 13px;
}

.official-formula-card p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.formula-result {
  min-width: 118px;
  display: grid;
  grid-template-columns: auto auto;
  align-content: center;
  gap: 5px 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.05);
}

.formula-result span {
  color: var(--muted);
  font-size: 10px;
}

.formula-result b {
  color: var(--gold-2);
  text-align: right;
  font-size: 12px;
}

.members-head > div {
  min-width: 0;
}

.members-head small {
  display: block;
  margin-top: 3px;
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 500;
}

.text-btn:disabled {
  color: var(--muted-2);
  cursor: not-allowed;
  opacity: .65;
}

.over-capacity {
  border-color: rgba(233,128,128,.48);
}

.artifact-card {
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
}

.artifact-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.artifact-toggle-wrap > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.switch {
  position: relative;
  display: inline-flex;
  width: 46px;
  height: 26px;
  flex: 0 0 auto;
}

.switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #29373c;
  border: 1px solid rgba(255,255,255,.08);
  transition: .2s ease;
  cursor: pointer;
}

.slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  background: #d7e0e0;
  transition: .2s ease;
}

.switch input:checked + .slider {
  background: #1d746b;
  border-color: rgba(91,193,178,.45);
}

.switch input:checked + .slider::before {
  transform: translateX(20px);
  background: #f7ffff;
}

@media (max-width: 620px) {
  .official-formula-card {
    grid-template-columns: 1fr;
  }

  .formula-result {
    grid-template-columns: 1fr auto;
  }

  .artifact-card {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }

  .artifact-toggle-wrap {
    grid-column: 2;
    justify-content: flex-start;
  }

  .artifact-card > b {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

/* Expedition conversion breakdown */
.official-formula-card { flex-wrap: wrap; }
.speed-details { width: 100%; min-width: 0; }
.speed-details summary { cursor: pointer; color: var(--accent, #9edbd2); padding: 12px 0; font-weight: 700; }
.speed-table-scroll { overflow-x: auto; max-width: 100%; }
.speed-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.speed-table th, .speed-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid #354449; white-space: nowrap; }
.speed-table th { color: #9edbd2; }
#speedCalculation, #speedPrecision { overflow-wrap: anywhere; }

.speed-details[hidden] { display: none; }
.speed-details-button { padding: 12px 20px; border: 1px solid #54706c; border-radius: 12px; }
.speed-details-button:focus-visible { outline: 2px solid #9edbd2; outline-offset: 3px; }

/* Keep wide tables inside the map card, with a dedicated mobile scroll area. */
#mapOfficialData > * { min-width: 0; max-width: 100%; grid-column: 1 / -1; }
#mapOfficialData details { width: 100%; min-width: 0; overflow-wrap: anywhere; }
#mapOfficialData summary { cursor: pointer; padding: 12px 0; }
.map-detail-scroll {
  max-height: 65vh;
  max-height: 65dvh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  padding: 0 4px 12px 0;
}
.map-detail-scroll:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.speed-table-scroll { min-width: 0; width: 100%; -webkit-overflow-scrolling: touch; }
#staminaValueField[hidden] { display: none; }

/* V1.2: keep result details scrollable on small screens. */
#simulationResults { min-width: 0; overflow-wrap: anywhere; }
#simulationResults h3 { margin-top: 1.4rem; }
#simulationResults details { margin-block: 1rem; min-width: 0; }
#simulationResults summary { cursor: pointer; color: var(--mint, #9cd9ce); }
.simulation-table-scroll { width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.simulation-table-scroll table { width: 100%; border-collapse: collapse; }
.simulation-table-scroll th, .simulation-table-scroll td { padding: .7rem .4rem; text-align: left; border-bottom: 1px solid #ffffff22; white-space: nowrap; }
.simulation-log { max-height: 26rem; overflow-y: auto; overscroll-behavior: contain; padding-left: 1.7rem; }
.simulation-log li { margin-bottom: .6rem; }
#simulationProgress { width: 100%; margin-top: 1rem; accent-color: #9cd9ce; }
#cancelSimulation { margin-top: .8rem; }
[hidden] { display: none !important; }
.simulation-actions, .record-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1rem; }
.simulation-actions > button { flex: 1 1 180px; width: auto; margin: 0; }
#recordDashboard { min-width: 0; overflow-wrap: anywhere; }
#recordDashboard h3 { margin-top: 1.4rem; }
#recordStatus { color: #a7ddd1; }
#importRecords { display: block; max-width: 100%; margin-top: .5rem; }
#tab-stats > .panel { min-width: 0; }
.diamond-cap-state { padding: 1rem; border: 1px solid #b4d7bd55; border-radius: 14px; margin-block: 1rem; }
.diamond-cap-state progress { display: block; width: 100%; margin-top: .8rem; accent-color: #9cd9ce; }

.title-actions { display:flex;align-items:center;gap:16px;flex-wrap:wrap; }
.title-actions h1 { margin:0; }
.diamond-dialog { width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line-strong);border-radius:20px;background:var(--bg-2);color:var(--text);box-shadow:var(--shadow);overflow:auto;overscroll-behavior:contain; }
.diamond-dialog::backdrop { background:rgba(0,0,0,.76); }
.diamond-dialog-head { position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px;border-bottom:1px solid var(--line);background:var(--bg-2); }
.diamond-dialog-head h2 { margin:0;font-size:22px; }
.diamond-dialog-head button { width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--panel-2);cursor:pointer; }
.diamond-dialog-body { padding:20px 24px; }
.diamond-tabs,.diamond-controls { display:flex;gap:10px;margin-bottom:20px; }
.diamond-tabs button,.diamond-controls button { flex:1;min-height:48px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);cursor:pointer; }
.diamond-tabs button[aria-selected=true],#diamondStart { color:var(--gold-2);border-color:var(--gold); }
.diamond-controls button:disabled { opacity:.4;cursor:default; }
.diamond-option { display:flex;gap:10px;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);margin:16px 0;line-height:1.6; }
.diamond-option input { margin-top:5px;accent-color:var(--teal); }
.diamond-wheel { border:1px solid var(--line-strong);border-radius:14px;overflow:hidden;margin:16px 0;cursor:pointer; }
.diamond-wheel-row { display:flex;align-items:center;gap:12px;padding:10px 14px;min-height:54px;border-bottom:1px solid var(--line); }
.diamond-wheel-row:last-child { border:0; }
.diamond-wheel-row.selected { background:rgba(213,189,121,.22);box-shadow:inset 4px 0 var(--gold); }
.diamond-reward-icon { font-size:25px; }
.diamond-row-weight { margin-left:auto;color:var(--muted);font-size:12px; }
.diamond-result { padding:20px;text-align:center;border:1px solid var(--line-strong);border-radius:14px;font-size:22px;font-weight:700;color:var(--teal-2);min-height:78px; }
.diamond-probabilities { margin:16px 0; }
.diamond-dialog summary { cursor:pointer;padding:12px 0;color:var(--gold-2); }
.diamond-prob-table { width:100%;border-collapse:collapse;font-size:13px; }
.diamond-prob-table td,.diamond-prob-table th { padding:9px 5px;text-align:left;border-bottom:1px solid var(--line); }
.diamond-prob-table th { color:var(--muted); }
.diamond-dialog button:focus-visible,.diamond-wheel:focus-visible { outline:2px solid var(--teal);outline-offset:3px; }
@media(max-width:480px) { .diamond-dialog-head,.diamond-dialog-body { padding:16px; }.title-actions { gap:10px; }.title-actions button { font-size:14px;padding:10px 12px; }.diamond-wheel-row { gap:8px; } }
@media(prefers-reduced-motion:reduce) { .diamond-wheel-row { transition:none; } }

/* V2.0.0 — Expedition workspace */
:root{--bg:#0b1420;--bg-2:#101e2b;--panel:#142332;--panel-2:#192c3c;--text:#edf5f7;--muted:#9cb1bf;--muted-2:#8499a8;--line:rgba(159,188,206,.16);--line-strong:rgba(101,214,195,.4);--teal:#69d6bf;--teal-2:#a1f1df;--gold:#e2c58a;--radius:18px;--shadow:0 12px 36px #0002}
body{background:radial-gradient(ellipse at top left,#19374970,transparent 55%),#0b1420;line-height:1.6}
.app-shell{width:min(1440px,calc(100% - 48px));padding:36px 0 70px}
.topbar{align-items:center;margin-bottom:28px}.title-actions{gap:20px}h1{font-size:clamp(28px,3.2vw,40px);letter-spacing:.01em}.eyebrow{font-size:11px;letter-spacing:.19em}.sub{font-size:14px}.version-pill{background:#69d6bf12;border-color:#69d6bf40;color:var(--teal-2);letter-spacing:.1em}
.tabs{position:sticky;top:8px;z-index:8;background:#0e1c29f5;backdrop-filter:blur(12px);border-color:var(--line);margin-bottom:24px;border-radius:12px}.tab{border-radius:8px}.tab.active{background:#26463f;color:#b5f9e7}
.panel{border:1px solid var(--line);border-radius:var(--radius);box-shadow:none;background:var(--panel);padding:24px}.panel-head{margin-bottom:18px}.panel-head h2{font-size:20px}.step-badge{border:0;border-radius:8px;background:#253a49;color:#9edaca;font-variant-numeric:tabular-nums}
.layout-grid{grid-template-columns:minmax(0,1fr) minmax(330px,410px);gap:22px}.main-column,.side-column{min-width:0;gap:22px}.main-column>.panel,.side-column>.panel{margin-bottom:22px}
.account-panel{margin-bottom:24px;background:linear-gradient(115deg,#172d3d,#142332 70%);border-top:3px solid #69d6bf}.section-intro{margin:-4px 0 20px;color:var(--muted);font-size:14px}
.account-artifact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.account-artifact{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:17px 18px;min-width:0;min-height:108px;background:#0e1b286b;border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:border-color .15s,background .15s}.account-artifact:has(input:checked),.account-artifact:has(input[type=number]:valid){border-color:#69d6bf30}.account-artifact:hover{background:#20394a}.artifact-copy{display:grid;gap:5px;min-width:0}.artifact-copy strong{font-size:15px}.artifact-copy small{color:var(--muted);font-size:12px;line-height:1.6}.account-artifact input[type=checkbox]{appearance:auto;accent-color:var(--teal);width:23px;height:23px;flex:0 0 23px}.account-artifact input[type=number]{width:64px;min-width:64px;padding:8px;text-align:center;font-size:18px;font-weight:700}
.exploration-switch{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#69d6bf0a;border:1px solid #69d6bf26;border-radius:12px;padding:16px 20px;margin-top:16px}.exploration-switch label{display:flex;align-items:center;gap:14px;cursor:pointer}.exploration-switch input{width:22px;height:22px;accent-color:var(--teal)}.exploration-switch span span,.exploration-switch label>span{display:grid;gap:3px}.exploration-switch small{display:block;color:var(--muted);font-size:12px}
.account-footer{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:20px;margin-top:14px}.account-footer>p{margin:10px 0;font-size:13px;color:var(--muted)}.account-footer .bonus-readout{margin:0;background:none;padding:8px 0;border:0}.bonus-readout strong{font-size:15px!important;color:var(--teal-2)}.bonus-readout small{font-size:12px}
.account-inventory{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}.account-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;font-size:12px;color:var(--muted)}.account-tools>span{margin-right:auto}.account-tools .text-btn{font-size:12px;padding:6px 10px}.import-label input{display:none}
input,select{border-color:#9fbccc35!important;border-radius:9px!important;background:#0e1c29!important;min-height:42px;color:var(--text)}input[type=checkbox]{min-height:0}input:focus-visible,select:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px}.field>span{font-size:13px;color:var(--muted)}.official-formula-card{background:#0e1c2960;border-color:var(--line);padding:16px}.official-formula-card>p{font-size:13px}.official-formula-card .field{margin-top:12px}
.compact-help{padding:12px 0;border-top:1px solid var(--line);font-size:13px}.compact-help>.official-formula-card{margin-top:12px}.compact-help summary,details>summary{cursor:pointer;color:#bdd6e3;font-weight:600;padding:4px 0}details[open]>summary{margin-bottom:12px}details>p{color:var(--muted)}
.party-summary{border-radius:12px;background:#0e1c29;border:1px solid var(--line);padding:16px;margin-bottom:18px}.party-summary strong{font-variant-numeric:tabular-nums}.unit-card{border-radius:12px;background:#11202e;border-color:var(--line)}.unit-avatar{border-radius:10px;background:#26463f;color:var(--teal-2);width:40px;height:40px}.unit-name{background:transparent!important;border-color:transparent!important;padding-left:0}.leader-card{border-left:3px solid var(--gold)}.ability-tag{font-size:12px;padding:8px 10px;min-height:36px}.ability-tag.active{color:var(--teal-2);background:#26463f;border-color:#69d6bf60}.collector-level{width:65px}.member-list{gap:12px}.unit-note{font-size:12px;line-height:1.7}
#runSettings{border-top:3px solid var(--gold)}.simulation-actions{gap:10px}.primary-btn{background:#64cdb6;color:#0b2923;border:0;border-radius:10px;box-shadow:none}.primary-btn small{color:#16483d}.primary-btn:hover:not(:disabled){background:#94e7d3;transform:none}#simulateOnceBtn{background:#233f50;color:#e5f5fc}#simulateOnceBtn small{color:#adc9d8}.helper{font-size:12px;line-height:1.7}#simulateMessage{border-left:2px solid var(--teal);padding-left:12px;color:#cde6eb}.secondary-btn{border-radius:8px;background:#1b3041;border-color:var(--line)}
.metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}.metric{border:1px solid var(--line);border-radius:12px;padding:16px;background:#0e1c29}.metric span{display:block;color:var(--muted);font-size:12px}.metric strong{display:block;font-size:28px;line-height:1.35;font-variant-numeric:tabular-nums;color:var(--teal-2);overflow-wrap:anywhere}.metric small{font-size:11px;color:var(--muted)}.simulation-table-scroll,.speed-table-scroll{border-radius:8px}table{font-size:12px}th{color:#a9c5d3}td{font-variant-numeric:tabular-nums}#simulationResults h3{font-size:15px;margin-top:24px}.simulation-log{font-size:12px}.record-actions{gap:10px;flex-wrap:wrap}.release-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:24px 0}.release-grid p{color:var(--muted);font-size:14px}
[hidden]{display:none!important}button:disabled,input:disabled,select:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:1080px){.layout-grid{grid-template-columns:minmax(0,1fr) minmax(300px,360px)}.account-artifact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.panel{padding:20px}.account-footer{grid-template-columns:1fr;gap:0}}
@media(max-width:800px){.app-shell{width:calc(100% - 24px);padding-top:20px}.layout-grid{grid-template-columns:1fr}.side-column{display:flex;flex-direction:column}.panel{padding:18px}.topbar{gap:12px}.title-actions{flex-wrap:wrap;gap:10px}.title-actions button{font-size:12px;padding:8px 12px}.version-pill{padding:6px 9px;font-size:10px}.sub{font-size:12px}.tabs{width:100%;top:4px}.tab{flex:1;white-space:nowrap;font-size:13px}.account-artifact{padding:14px;gap:10px;min-height:124px;align-items:flex-start}.artifact-copy strong{font-size:13px}.artifact-copy small{font-size:11px}.account-artifact input[type=checkbox]{width:20px;height:20px;flex-basis:20px}.account-artifact input[type=number]{width:46px;min-width:46px;padding:6px}.exploration-switch{padding:14px}.exploration-switch>.status-chip{display:none}.panel-head{gap:8px}.panel-head h2{font-size:18px}.status-chip{font-size:10px}.release-grid{grid-template-columns:1fr;gap:8px}.party-summary{gap:10px}.account-tools{gap:6px}.account-tools>span{flex-basis:100%}.simulation-actions .primary-btn{min-height:60px}}
@media(max-width:380px){.account-artifact-grid{grid-template-columns:1fr}.account-artifact{min-height:80px}.panel-head .status-chip{display:none}.party-summary{grid-template-columns:1fr}.unit-card{gap:10px}.unit-avatar{display:none}}

/* Diamond draw: immediate result and sequential reveal. */
.diamond-auto { padding:16px;border:1px solid var(--line);border-radius:12px;margin:16px 0; }
.diamond-auto-input { display:flex;gap:10px;margin-top:10px; }
.diamond-auto-input input,.diamond-auto-input select { width:0;min-width:0;flex:1; }
.diamond-auto-input button { padding:10px 14px;border:1px solid var(--teal);border-radius:10px;background:var(--panel-2);color:var(--teal-2);cursor:pointer; }
.diamond-auto-input button:disabled { opacity:.45;cursor:default; }
#diamondAutoStatus { font-variant-numeric:tabular-nums;color:var(--teal-2);line-height:1.7; }
.diamond-wheel-row.selected { background:rgba(105,214,191,.18);box-shadow:inset 4px 0 var(--teal); }

/* V2.1: four pages, shared configuration and complete records. */
.tabs { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%; }
.tabs .tab { width:auto;min-width:0;padding:12px 6px;text-align:center; }
#tab-simulator { max-width:1120px;margin:auto; }
.page-actions { display:flex;justify-content:flex-end;margin:22px 0; }
.page-actions button { width:auto;padding:16px 24px; }
.run-config-summary { display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px; }
.run-config-summary p { color:var(--muted);line-height:1.7;margin-bottom:0; }
.run-config-summary button { flex-shrink:0; }
.record-reset-toolbar { display:flex;gap:12px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:18px; }
#recordResetOptions { border:1px solid var(--line);padding:16px;margin-bottom:20px;border-radius:12px; }
#recordResetOptions button { margin:5px; }
#recordOverview { margin-bottom:28px; }
#recordDashboard details { margin-top:24px; }
.diamond-page { max-width:860px;margin:auto; }
.diamond-page .diamond-dialog-body { padding:0; }
.site-help { margin-top:32px;color:var(--muted); }
.site-help>summary { cursor:pointer;padding:12px; }
@media(max-width:600px){.tabs .tab{font-size:12px;padding:12px 2px;letter-spacing:0}.run-config-summary{display:block}.run-config-summary button{margin-top:14px}.record-reset-toolbar button{flex:1}.page-actions button{width:100%}}
@media(max-width:420px){.tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.tabs .tab{font-size:13px}}

/* V2.2: scrollable navigation and six-star gift reference. */
.tabs { display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--teal) transparent;overscroll-behavior-x:contain; }
.tabs .tab { flex:0 0 auto;width:auto;min-width:126px;padding:12px 18px;scroll-snap-align:start; }
.nav-scroll-hint { color:var(--muted);font-size:12px;margin:-14px 0 18px;text-align:right; }
.hero-preference-filters { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
.hero-preference-filters input,.hero-preference-filters select { width:100%;min-width:0; }
.hero-filter-status { display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0;color:var(--muted); }
.hero-common-gifts { background:#142f31;border:1px solid #69d6bf45;padding:18px;border-radius:14px;margin:20px 0; }
.hero-common-gifts h3 { margin-top:0; }
.hero-preference-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; }
.hero-preference-card { padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2);min-width:0; }
.hero-preference-card h3 { margin:4px 0;font-size:22px; }
.hero-title { color:var(--muted);font-size:13px;margin:0; }
.hero-stars { color:var(--gold);font-size:12px;letter-spacing:2px; }
.gift-group { margin-top:18px; }.gift-group h4 { margin:0 0 8px; }.loved h4 { color:#ffb2c8; }.favorite h4 { color:var(--teal-2); }
.gift-list { list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0; }
.gift-list li { background:#0d1b2780;border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:13px;overflow-wrap:anywhere; }
.loved .gift-list li { border-color:#ffb2c845; }.hero-empty { grid-column:1/-1;padding:32px 12px;color:var(--muted);text-align:center; }
@media(max-width:650px){.hero-preference-grid,.hero-preference-filters{grid-template-columns:1fr}.tabs .tab{min-width:118px;padding:12px 14px;font-size:13px}.hero-preference-card{padding:16px}}

/* Shared portraits and the standalone six-star gift guide. */
.hero-card-header{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.hero-portrait{width:112px;height:112px;flex:0 0 112px;object-fit:contain;background:radial-gradient(ellipse at center,rgba(213,189,121,.15),transparent 72%);border:1px solid var(--line);border-radius:14px}
.hero-identity{min-width:0;overflow-wrap:anywhere}
.hero-portrait-fallback{width:112px;flex:0 0 112px;font-size:12px;color:var(--muted)}
.hero-guide-header{margin-bottom:28px}
.hero-guide-header h1{font-size:clamp(25px,5vw,38px);margin:8px 0}
.heroes-standalone .app-shell{max-width:1120px}
.hero-standalone-link{display:inline-block;margin-top:8px;font-size:13px;color:var(--teal-2)}
@media(max-width:400px){.hero-card-header{gap:12px}.hero-portrait{width:88px;height:88px;flex-basis:88px}.hero-preference-card h3{font-size:20px}}

.gift-list li{display:inline-flex;align-items:center;gap:8px;max-width:100%}
.gift-icon{width:36px;height:36px;flex:0 0 36px;object-fit:contain}
.gift-list li span{overflow-wrap:anywhere;min-width:0}

.hero-language{max-width:260px;margin:0 0 18px}.hero-language select{width:100%}