#wanxiang-tactical-ui {
  --tactical-ink: #f4ead1;
  --tactical-muted: #9eafa8;
  --tactical-gold: #e5c77d;
  --tactical-line: rgba(230, 201, 132, .22);
  --tactical-panel: rgba(11, 25, 27, .94);
  width: 100%;
  margin: 8px 0;
  padding: 0;
  display: grid;
  gap: 7px;
  color: var(--tactical-ink);
  font-family: "Songti SC", "STSong", "Hiragino Sans GB", serif;
  position: relative;
  z-index: 7;
}

#wanxiang-tactical-ui[hidden] { display: none !important; }
#wanxiang-tactical-ui *, #wanxiang-tactical-ui *::before, #wanxiang-tactical-ui *::after { box-sizing: border-box; }

.tactical-card {
  min-width: 0;
  border: 1px solid var(--tactical-line);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(25, 46, 46, .9), var(--tactical-panel));
  box-shadow: 0 8px 20px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 239, 188, .04);
}

.tactical-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-height: 18px;
  color: var(--tactical-muted);
  font: 10px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .08em;
}

.tactical-heading-title { color: var(--tactical-gold); font-weight: 700; }
.tactical-heading-status, .tactical-resonance-note { overflow: hidden; color: #78938a; text-overflow: ellipsis; white-space: nowrap; }

.tactical-initiative { padding: 7px 8px 8px; }
.tactical-initiative-list {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.tactical-order-item {
  flex: 0 0 74px;
  min-width: 0;
  padding: 5px 4px 4px;
  border: 1px solid color-mix(in srgb, var(--tactical-phase, #8da79d) 30%, transparent);
  border-radius: 4px;
  background: rgba(6, 16, 18, .58);
  opacity: .78;
  transition: border-color .16s, background .16s, opacity .16s, transform .16s;
  scroll-snap-align: center;
}
.tactical-order-item.is-current {
  border-color: var(--tactical-phase, var(--tactical-gold));
  background: color-mix(in srgb, var(--tactical-phase, #c7a45c) 13%, rgba(6, 16, 18, .9));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tactical-phase, #c7a45c) 18%, transparent);
  opacity: 1;
  transform: translateY(-1px);
}
.tactical-order-item.is-defeated { filter: grayscale(1); opacity: .35; }
.tactical-order-top { display: flex; align-items: center; justify-content: space-between; gap: 3px; }
.tactical-side { color: #8ea9a0; font: 700 8px/1 ui-sans-serif, system-ui, sans-serif; }
.tactical-order-item[data-side="enemy"] .tactical-side { color: #d98a75; }
.tactical-phase {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 1px solid var(--tactical-phase, var(--tactical-gold));
  border-radius: 50%;
  color: var(--tactical-phase, var(--tactical-gold));
  font: 700 9px/1 ui-sans-serif, system-ui, sans-serif;
}
.tactical-order-name { display: block; overflow: hidden; margin-top: 4px; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.tactical-order-speed { display: block; overflow: hidden; margin-top: 2px; color: #8d9e95; font: 8px/1.1 ui-sans-serif, system-ui, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.tactical-order-state { display: block; overflow: hidden; margin-top: 2px; color: #769089; font: 8px/1.1 ui-sans-serif, system-ui, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.tactical-order-item.is-current .tactical-order-state { color: var(--tactical-gold); }
.tactical-initiative-empty { flex: 1 0 100%; padding: 8px 4px 3px; color: #78938a; font: 9px ui-sans-serif, system-ui, sans-serif; text-align: center; }

.tactical-resonance { padding: 7px 9px; }
.tactical-resonance-body { display: grid; grid-template-columns: auto 16px auto minmax(0, 1fr); align-items: center; gap: 5px; margin-top: 4px; }
.tactical-resonance-phase {
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--tactical-phase, #aab9b2) 48%, transparent);
  border-radius: 3px;
  color: var(--tactical-phase, var(--tactical-ink));
  font: 11px/1 ui-sans-serif, system-ui, sans-serif;
  white-space: nowrap;
}
.tactical-resonance-arrow { color: #7b9189; text-align: center; }
.tactical-resonance-result { overflow: hidden; color: #9eafa8; font: 10px/1.2 ui-sans-serif, system-ui, sans-serif; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.tactical-resonance-result.is-positive { color: #8ed0ad; }

.tactical-intent { overflow: hidden; }
.tactical-intent-toggle {
  width: 100%;
  min-height: 34px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 0;
  color: var(--tactical-ink);
  background: transparent;
  text-align: left;
  font: inherit;
}
.tactical-intent-kicker { color: #d98a75; font: 9px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em; }
.tactical-intent-name { overflow: hidden; color: #f0c29f; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.tactical-intent-chevron { color: #c8ad73; font: 15px/1 ui-sans-serif, system-ui, sans-serif; transition: transform .16s; }
.tactical-intent-toggle.is-open .tactical-intent-chevron { transform: rotate(180deg); }
.tactical-intent-details { padding: 0 9px 8px; border-top: 1px solid rgba(225, 171, 126, .14); }
.tactical-intent-summary { margin: 7px 0 6px; color: #e0c5a9; font-size: 11px; line-height: 1.35; }
.tactical-intent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; color: #a0b0a8; font: 9px/1.4 ui-sans-serif, system-ui, sans-serif; }
.tactical-intent-grid span { padding: 5px 6px; border: 1px solid rgba(225, 171, 126, .16); border-radius: 3px; }

.tactical-prompt {
  padding: 7px 9px;
  border: 1px solid rgba(229, 199, 125, .38);
  border-radius: 4px;
  color: #f0ddb0;
  background: rgba(53, 48, 31, .92);
  font: 10px/1.35 ui-sans-serif, system-ui, sans-serif;
}
.tactical-skill-details {
  padding: 10px;
  border: 1px solid rgba(229, 199, 125, .45);
  border-radius: 5px;
  background: #132528;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
}
#skill-buttons [data-skill-index] { touch-action: manipulation; }
.tactical-details-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tactical-details-kicker { display: block; color: #89b5a7; font: 8px/1.2 ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em; }
.tactical-details-title h3 { margin: 3px 0 0; color: #f3dfac; font-size: 18px; font-weight: 600; }
.tactical-details-close { border: 1px solid rgba(229, 199, 125, .24); border-radius: 3px; padding: 5px 7px; color: #cdb776; background: transparent; font: 10px ui-sans-serif, system-ui, sans-serif; }
.tactical-details-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tactical-details-meta span { padding: 4px 6px; border: 1px solid rgba(229, 199, 125, .2); border-radius: 3px; color: #afc0b7; font: 9px ui-sans-serif, system-ui, sans-serif; }
.tactical-details-description { margin: 9px 0 6px; color: #d5ded5; font-size: 12px; line-height: 1.55; }
.tactical-details-hint { margin: 0; padding: 6px 7px; border-left: 2px solid #c7a45c; color: #d7c68e; background: rgba(199, 164, 92, .08); font: 10px/1.45 ui-sans-serif, system-ui, sans-serif; }
.tactical-details-hint.is-positive { border-left-color: #8ed0ad; color: #9ed7b5; }
.tactical-details-status { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 9px; color: #82a094; font: 9px ui-sans-serif, system-ui, sans-serif; }
.tactical-details-status strong { color: #8ed0ad; font-weight: 600; }
.tactical-details-status.is-used strong { color: #d0a17b; }
.tactical-details-status span { text-align: right; }

@media (min-width: 650px) {
  #wanxiang-tactical-ui { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tactical-initiative { grid-column: 1 / -1; }
  .tactical-resonance, .tactical-intent { align-self: start; }
}

@media (max-width: 430px) {
  #wanxiang-tactical-ui { gap: 5px; padding: 0; }
  .tactical-initiative { padding: 6px 6px 7px; }
  .tactical-initiative-list { gap: 3px; margin-top: 4px; }
  .tactical-order-item { flex-basis: 72px; padding: 4px 3px; }
  .tactical-order-name { font-size: 10px; }
  .tactical-order-speed, .tactical-order-state { font-size: 7px; }
  .tactical-resonance-body { grid-template-columns: auto 13px auto minmax(0, 1fr); gap: 3px; }
  .tactical-resonance-phase { padding: 4px 5px; font-size: 10px; }
  .tactical-resonance-result { font-size: 9px; }
  .tactical-intent-grid { grid-template-columns: 1fr; }
  .tactical-details-description { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  #wanxiang-tactical-ui *, #wanxiang-tactical-ui *::before, #wanxiang-tactical-ui *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}