/* Raid composition only. The existing VEIL tokens, framed materials and
   button states remain authoritative; this layer adds no theme or balance. */
#game #guildOverlay #guildPanelRaid {
  min-width: 0;
  gap: var(--ui-space-3);
}
#game #guildOverlay #guildPanelRaid > * { min-width: 0; }

#game #guildOverlay .guild-action-feedback {
  grid-column: 1 / -1;
  box-sizing: border-box;
  width: 100%;
  margin: var(--ui-space-2) 0;
  padding: var(--ui-space-2) var(--ui-space-3);
  min-width: 0;
  border: 1px solid var(--ui-line);
  border-left: 3px solid var(--ui-cyan);
  background: var(--ui-surface-raised);
  color: var(--ui-ink);
  font-size: var(--ui-small);
  line-height: 1.5;
  text-align: left;
  overflow-wrap: anywhere;
}
#game #guildOverlay .guild-action-feedback[data-kind="success"] { border-left-color: var(--ui-success); }
#game #guildOverlay .guild-action-feedback[data-kind="error"] { border-left-color: var(--ui-danger); }
#game #guildOverlay .guild-action-feedback[hidden] { display: none !important; }

/* One compact, live itinerary. Readiness and formation are separate notes,
   not required fourth/fifth steps and not substitutes for server state. */
#game #guildOverlay .guild-raid-preparation {
  display: grid;
  min-width: 0;
  gap: var(--ui-space-2);
  padding: var(--ui-space-2);
  border: 12px solid transparent;
  border-image: var(--ui-panel-art) 10% fill / 12px;
  background: var(--ui-surface);
  box-shadow: var(--ui-panel-shadow);
}
#game #guildOverlay .guild-raid-preparation h2 {
  margin: 0;
  font-size: var(--ui-subheading);
  line-height: 1.25;
}
#game #guildOverlay #guildRaidPreparationSummary {
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-small);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
#game #guildOverlay .guild-raid-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ui-space-2);
  margin: var(--ui-space-1) 0;
  padding: 0;
  list-style: none;
  counter-reset: raid-step;
}
#game #guildOverlay .guild-raid-steps li {
  display: grid;
  min-width: 0;
  gap: var(--ui-space-1);
  padding-bottom: var(--ui-space-2);
  border-bottom: 1px solid var(--ui-line);
  counter-increment: raid-step;
}
#game #guildOverlay .guild-raid-steps li > span {
  color: var(--ui-quiet);
  font-size: var(--ui-meta);
  line-height: 1.4;
}
#game #guildOverlay .guild-raid-steps li > span::before {
  content: counter(raid-step) ". ";
  color: var(--ui-gold);
}
#game #guildOverlay .guild-raid-steps li > strong {
  min-width: 0;
  color: var(--ui-ink);
  font-size: var(--ui-small);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
#game #guildOverlay .guild-raid-steps li[data-state="complete"] {
  border-bottom-color: var(--ui-success);
}
#game #guildOverlay .guild-raid-steps li[data-state="complete"] > strong {
  color: var(--ui-success);
}
#game #guildOverlay .guild-raid-steps li[aria-current="step"] {
  border-bottom: 2px solid var(--ui-cyan);
}
#game #guildOverlay .guild-raid-steps li[aria-current="step"] > strong {
  color: var(--ui-cyan);
}
#game #guildOverlay #guildRaidNextButton {
  min-width: 0;
  min-height: var(--ui-action-height);
  width: 100%;
  white-space: normal;
}
#game #guildOverlay .guild-raid-preparation-note {
  margin: 0;
  color: var(--ui-quiet);
  font-size: var(--ui-small);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Dossier is real DOM-first, matching reading and focus order. Art keeps a
   bounded stage, while descriptions and phase/attempt values grow freely. */
#game #guildOverlay #guildBossCard { display: grid; }
#game #guildOverlay #guildBossCard .guild-boss-copy {
  gap: var(--ui-space-2);
  padding: var(--ui-space-3) var(--ui-space-4);
}
#game #guildOverlay #guildBossDescription {
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-small);
  line-height: 1.5;
}
#game #guildOverlay #guildBossCard .guild-boss-visual {
  height: 112px;
}
#game #guildOverlay #guildBossCard .guild-boss-meta {
  font-size: var(--ui-small);
  font-variant-numeric: tabular-nums;
}

/* Controls are always before attack in both DOM and visual order. No CSS
   ordering trick, horizontal discovery, clipped text, or fixed copy height. */
#game #guildOverlay .guild-raid-command {
  min-width: 0;
  padding: var(--ui-space-2);
  border-width: 12px;
  border-image-width: 12px;
}
#game #guildOverlay .guild-raid-command .guild-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--ui-space-2);
  margin-bottom: var(--ui-space-3);
}
#game #guildOverlay #guildRaidFormationStatus {
  justify-self: start;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
#game #guildOverlay .guild-raid-mechanic {
  gap: var(--ui-space-2);
  margin-bottom: var(--ui-space-3);
  padding: var(--ui-space-2);
  border-left-color: var(--ui-cyan);
  background: var(--ui-surface-raised);
}
#game #guildOverlay .guild-raid-mechanic > span {
  color: var(--ui-gold);
}
#game #guildOverlay .guild-raid-mechanic :is(strong, p) {
  overflow-wrap: anywhere;
}
#game #guildOverlay .guild-raid-mechanic strong {
  color: var(--ui-ink);
  font-size: var(--ui-small);
}
#game #guildOverlay .guild-raid-mechanic p {
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-small);
  line-height: 1.5;
}
#game #guildOverlay .guild-raid-command-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ui-space-4);
}
#game #guildOverlay .guild-raid-command-grid > div { min-width: 0; }
#game #guildOverlay .guild-raid-command-grid > div > small {
  margin-bottom: var(--ui-space-2);
  color: var(--ui-cyan);
  font-size: var(--ui-small);
}
#game #guildOverlay :is(.guild-raid-roles, .guild-raid-tactics) {
  min-width: 0;
  gap: var(--ui-space-2);
}
#game #guildOverlay :is(.guild-raid-roles, .guild-raid-tactics) button {
  min-width: 0;
  min-height: var(--ui-control-height);
  padding: var(--ui-space-2) 16px;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--ui-space-2);
  white-space: normal;
}
#game #guildOverlay :is(.guild-raid-roles, .guild-raid-tactics) button > span {
  min-width: 0;
}
#game #guildOverlay :is(.guild-raid-roles, .guild-raid-tactics) button :is(strong, small) {
  overflow-wrap: anywhere;
  line-height: 1.5;
}
#game #guildOverlay :is(.guild-raid-roles, .guild-raid-tactics) button strong {
  font-size: var(--ui-small);
  color: var(--ui-ink);
}
#game #guildOverlay .guild-raid-choice-help {
  margin: var(--ui-space-2) 0 0;
  color: var(--ui-muted);
  font-size: var(--ui-small);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
#game #guildOverlay .guild-raid-active-order {
  margin-top: var(--ui-space-4);
  padding-top: var(--ui-space-3);
  border-top-color: var(--ui-line);
}
#game #guildOverlay .guild-raid-active-order :is(span, strong, small) {
  min-width: 0;
  overflow-wrap: anywhere;
}
#game #guildOverlay .guild-raid-active-order > span { color: var(--ui-quiet); }
#game #guildOverlay .guild-raid-active-order > strong { color: var(--ui-cyan); }
#game #guildOverlay #guildRaidAttackPreview {
  color: var(--ui-muted);
  font-size: var(--ui-small);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
#game #guildOverlay .guild-raid-damage-breakdown {
  display: grid;
  gap: var(--ui-space-1);
  margin: var(--ui-space-2) 0 0;
  padding: 0;
  list-style: none;
  color: var(--ui-muted);
  font-size: var(--ui-small);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
#game #guildOverlay .guild-raid-damage-breakdown:empty { display: none; }
#game #guildOverlay .guild-raid-damage-breakdown li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ui-space-1) var(--ui-space-2);
  min-width: 0;
  overflow-wrap: anywhere;
}
#game #guildOverlay .guild-raid-damage-breakdown strong {
  color: var(--ui-ink);
  font-weight: 600;
}
#game #guildOverlay .guild-raid-command .guild-boss-actions {
  gap: var(--ui-space-2);
  margin-top: var(--ui-space-4);
}
#game #guildOverlay .guild-raid-command .guild-boss-actions button {
  min-width: 0;
  min-height: var(--ui-action-height);
  white-space: normal;
}
#game #guildOverlay #guildPanelRaid [hidden] { display: none !important; }

@media (max-width: 360px) {
  #game #guildOverlay .guild-raid-steps { grid-template-columns: minmax(0, 1fr); }
  #game #guildOverlay .guild-raid-steps li {
    grid-template-columns: minmax(64px, .6fr) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--ui-space-2);
    padding-bottom: var(--ui-space-1);
  }
}

/* Large text inherits the live type scale; values use one row per step and
   no significant choice/phase/price text is clamped or ellipsized. */
#game[data-text-size="large"] #guildOverlay .guild-raid-steps {
  grid-template-columns: minmax(0, 1fr);
}
#game[data-text-size="large"] #guildOverlay .guild-raid-steps li {
  grid-template-columns: minmax(64px, .6fr) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--ui-space-2);
}