/* VEIL guild hall. One component system; artwork never controls text layout. */
.guild-overlay {
  --guild-accent: var(--ui-cyan);
  --guild-accent-rgb: 115, 220, 233;
  --guild-veil-gold: var(--ui-gold);
  --guild-ink: var(--ui-surface);
  --guild-copy: var(--ui-ink);
  --guild-muted: var(--ui-muted);
  z-index: 21;
  padding: 0;
  background: var(--guild-ink);
  backdrop-filter: none;
}

.guild-shell {
  --guild-header-height: 80px;
  container: guild / inline-size;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 12px max(24px, env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: auto;
  scrollbar-width: thin;
  scrollbar-color: #32606b #071015;
  background:
    linear-gradient(180deg, rgba(3, 8, 12, .48), #050b0f 540px),
    url("assets/guild-hall-v2.png") center top / 100% auto no-repeat;
  color: var(--guild-copy);
  font: 13px/1.5 "Segoe UI", sans-serif;
  text-align: left;
  user-select: text;
}

.guild-shell *, .guild-shell *::before, .guild-shell *::after { box-sizing: border-box; }
.guild-shell [hidden] { display: none !important; }
.guild-shell :is(div, section, article, header, footer, nav, label) { min-width: 0; }
.guild-shell :is(h1, h2, h3, p, dl, dd) { margin: 0; }
.guild-shell :is(p, small, strong, h1, h2, h3, button, label) { overflow-wrap: anywhere; }
.guild-shell :is(h1, h2, h3) {
  color: #f0e8d9;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: .015em;
  text-transform: none;
}
.guild-shell h1 { font-size: 22px; line-height: 1.08; }
.guild-shell h2 { font-size: 19px; line-height: 1.18; }
.guild-shell h3 { font-size: 17px; line-height: 1.2; }
.guild-shell p { color: var(--guild-copy); font-size: 13px; line-height: 1.5; }
.guild-shell small, .guild-shell time { color: var(--guild-muted); font-size: 11.5px; line-height: 1.4; }
.guild-shell strong { color: #e8eeea; font-weight: 600; }
.guild-shell .eyebrow {
  color: var(--guild-accent);
  font: 600 10px/1.3 "Segoe UI", sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.guild-shell .eyebrow + :is(h1, h2, h3) { margin-top: 5px; }
.guild-shell button {
  min-width: 0;
  cursor: pointer;
  text-align: center;
  font: 600 12px/1.35 "Segoe UI", sans-serif;
  letter-spacing: .015em;
  text-transform: none;
  white-space: normal;
  transition: filter 140ms ease, transform 140ms ease;
}
.guild-shell button:disabled {
  cursor: default;
  filter: saturate(.35);
  color: #aeb7b8;
  opacity: .7;
}
.guild-shell button:not(:disabled):hover { filter: brightness(1.16); }
.guild-shell button:not(:disabled):active { transform: translateY(1px); }
.guild-shell :is(button, input, textarea, select):focus-visible {
  outline: 2px solid var(--guild-accent);
  outline-offset: 3px;
}

/* The title and controls always remain accessible while reading the hall. */
.guild-header {
  position: sticky;
  z-index: 10;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  align-items: center;
  gap: 10px;
  height: var(--guild-header-height);
  margin: 0 -12px;
  padding: 12px 16px;
  border-bottom: 1px solid #24404a;
  background: #040a0e;
  box-shadow: 0 6px 20px #0006;
}
.guild-header h1 { font-size: 21px; }
.guild-header .panel-header-actions { display: flex; gap: 8px; }
.guild-header .icon-button {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: url("assets/ui/guild-raster/control-close.png") center / contain no-repeat;
  color: transparent;
  text-shadow: none;
  box-shadow: none;
}
.guild-header .audio-toggle-button { background-image: url("assets/ui/guild-raster/control-audio.png"); }
.guild-header .audio-toggle-button span { visibility: hidden; }
.guild-header .audio-toggle-button[aria-pressed="true"] { filter: brightness(1.35) drop-shadow(0 0 5px #73dce966); }
.guild-status { margin: 12px 0; padding: 12px 16px; border-left: 2px solid var(--guild-accent); background: #07151b; }

.guild-dashboard { display: grid; gap: 14px; padding-top: 14px; }
.guild-dashboard[data-guild-accent="gold"] { --guild-accent: #e6bd78; --guild-accent-rgb: 230, 189, 120; }
.guild-dashboard[data-guild-accent="violet"] { --guild-accent: #b08ae8; --guild-accent-rgb: 176, 138, 232; }
.guild-dashboard[data-guild-accent="crimson"] { --guild-accent: #e28b93; --guild-accent-rgb: 226, 139, 147; }

/* Fixed-size raster edges surround fluid content. Never scale a full frame
   to a dynamic card height: that moves its ornaments under the live text. */
.guild-banner,
.guild-shell :is(
  .guild-create-card, .guild-directory-card, .guild-activity-card,
  .guild-directives-card, .guild-event-card, .guild-operation, .guild-project,
  .guild-shop-item, .guild-treasury-card, .guild-raid-command, .guild-raid-rules,
  .guild-leaderboard-card, .guild-raid-log-card, .guild-roster-card,
  .guild-applications-card, .guild-management-card, .guild-board-card,
  .guild-season-track, .guild-season-leaderboard-card
) {
  position: relative;
  width: 100%;
  min-height: 0;
  padding: 8px 10px 10px;
  border: 24px solid transparent;
  border-image: url("assets/ui/guild-raster/frame-card.png") 128 120 128 120 fill / 24px / 0 stretch;
  background: #061016;
}
.guild-dashboard[data-guild-frame="veilbound"] .guild-banner { filter: drop-shadow(0 0 8px #73dce91c); }
.guild-banner {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.guild-emblem {
  display: grid;
  width: 52px;
  height: 58px;
  padding-top: 19px;
  place-items: center;
  background: url("assets/ui/guild-raster/micro-avatar.png") center / contain no-repeat;
  color: #d9faff;
  font: 600 14px/1 Consolas, "Courier New", monospace;
  text-shadow: 0 1px 5px #000;
}
.guild-identity h2 { font-size: 24px; line-height: 1.08; }
.guild-identity > p:last-child { margin-top: 5px; color: #abb8bb; font-size: 11px; }
.guild-banner dl {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 0;
  border-block: 1px solid #294049;
}
.guild-banner dl > div { display: grid; gap: 4px; text-align: center; }
.guild-banner dl > div + div { border-left: 1px solid #263840; }
.guild-banner dt { color: #9eafb2; font-size: 10px; line-height: 1.3; }
.guild-banner dd { color: #edf5ee; font-size: 15px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.guild-banner .guild-benefits { grid-column: 1 / -1; color: #c3e9ec; font-size: 11px; }
.guild-personal-status { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 3px 10px; }
.guild-personal-status strong { color: #e1bd7d; font-size: 11px; }
.guild-personal-status span { color: #a9b7ba; font-size: 11px; }

/* Eight generated insignias, with labels in a separate, predictable band. */
.guild-tabs {
  position: sticky;
  z-index: 9;
  top: var(--guild-header-height);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 7px 0;
  background: rgba(4, 10, 14, .98);
  border-block: 1px solid #233d47;
}
.guild-tabs button {
  position: relative;
  display: grid;
  grid-template-rows: 32px auto;
  gap: 5px;
  justify-items: center;
  align-content: center;
  min-height: 60px;
  padding: 5px 2px 7px;
  border: 0;
  background: #08141b;
  color: #aebdc0;
  font-size: 11.5px;
  line-height: 1.15;
  letter-spacing: 0;
}
.guild-tab-icon { display: block; width: 32px; height: 32px; object-fit: contain; filter: saturate(.62); opacity: .75; }
.guild-tabs button.active { background: #10252d; color: #f2efe3; }
.guild-tabs button.active::after { position: absolute; right: 14px; bottom: 0; left: 14px; height: 2px; background: var(--guild-accent); content: ""; }
.guild-tabs button.active .guild-tab-icon { filter: none; opacity: 1; }
.guild-panel-stack { min-width: 0; }
.guild-panel { display: none; }
.guild-panel.active { display: grid; gap: 14px; }
.guild-panel[data-guild-panel="raid"] { --guild-accent: #c7a6f0; --guild-accent-rgb: 199, 166, 240; }
.guild-panel[data-guild-panel="shop"], .guild-panel[data-guild-panel="season"] { --guild-accent: #e0ba7a; --guild-accent-rgb: 224, 186, 122; }

/* Scenery occupies its own header band. Reading areas stay free of crests. */
.guild-shell :is(.guild-overview-hero, .guild-operations-hero, .guild-development-intro, .guild-shop-hero, .guild-section-scene, .guild-season-hero) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: end;
  min-height: 218px;
  gap: 16px;
  padding: 30px 20px 20px;
  border: 1px solid #2b444e;
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 -35px 55px #0005;
}
.guild-overview-hero { background-image: linear-gradient(0deg, #040a0ff5, #040a0f87), url("assets/guild/guild-overview-command-v2.png"); }
.guild-operations-hero { background-image: linear-gradient(0deg, #040a0ff5, #040a0f87), url("assets/guild-operations-table.png"); }
.guild-development-intro { background-image: linear-gradient(0deg, #040a0ff5, #040a0f87), url("assets/guild/guild-development-wing-v2.png"); }
.guild-shop-hero { background-image: linear-gradient(0deg, #040a0ff5, #040a0f87), url("assets/guild/guild-quartermaster-v2.png"); }
.guild-roster-hero { background-image: linear-gradient(0deg, #040a0ff5, #040a0f87), url("assets/guild/guild-roster-gallery-v2.png"); }
.guild-board-hero { background-image: linear-gradient(0deg, #040a0ff5, #040a0f87), url("assets/guild/guild-dispatch-chamber-v2.png"); }
.guild-season-hero { background-image: linear-gradient(0deg, #040a0ff5, #040a0f87), url("assets/guild/guild-season-hall-v2.png"); }
.guild-shell :is(.guild-overview-hero, .guild-operations-hero, .guild-development-intro, .guild-shop-hero, .guild-section-scene, .guild-season-hero) h2 { font-size: 23px; }
.guild-shell :is(.guild-overview-hero, .guild-operations-hero, .guild-development-intro, .guild-shop-hero, .guild-section-scene, .guild-season-hero) p:not(.eyebrow) { margin-top: 8px; color: #bcc8cb; }
.guild-shell :is(.guild-cycle, .guild-operation-attempts, .guild-scene-stat, .guild-development-intro > div:last-child, .guild-shop-hero > div:last-child, .guild-season-hero > div:last-child) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding-top: 12px;
  border-top: 1px solid #63777b66;
  color: #bdc8c8;
  font-size: 11px;
}
.guild-shell :is(.guild-cycle, .guild-operation-attempts, .guild-scene-stat, .guild-development-intro > div:last-child, .guild-shop-hero > div:last-child, .guild-season-hero > div:last-child) strong { color: var(--guild-accent); font-size: 14px; }
.guild-scene-stat small, .guild-season-hero > div:last-child small { flex-basis: 100%; }

.guild-shell :is(.guild-overview-grid, .guild-raid-lower, .guild-operations-grid, .guild-development-grid, .guild-shop-grid) { display: grid; gap: 14px; }
.guild-section-heading { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.guild-section-heading > div { flex: 1 1 185px; }
.guild-section-heading > :is(small, strong) { padding: 4px 8px; background: #11222b; color: var(--guild-accent); font: 600 11px/1.4 "Segoe UI", sans-serif; }
.guild-section-heading h2 { font-size: 19px; }
.guild-activity-card > p { margin: 12px 0 16px; }
.guild-activity-card > button { width: 100%; }

/* Generated action plates are sliced, so their label area expands naturally. */
.guild-shell :is(
  .guild-primary-button, .guild-secondary-button, .guild-danger-button,
  .guild-operation-actions button, .guild-shop-item > button,
  .guild-roster-actions button, .guild-application button,
  .guild-quick-messages button, .guild-season-milestone > button
) {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 16px solid transparent;
  border-width: 16px 30px;
  border-image: url("assets/ui/guild-raster/button-secondary.png") 88 240 88 240 fill / 16px 30px / 0 stretch;
  background: transparent;
  color: #d4e3e2;
  font-size: 12px;
  line-height: 1.3;
}
.guild-shell .guild-primary-button,
.guild-operation-actions button.recommended { border-image-source: url("assets/ui/guild-raster/button-primary.png"); color: #ecffff; }
.guild-shell :is(.perfect, .guild-shop-item > button, .guild-season-milestone > button) { border-image-source: url("assets/ui/guild-raster/button-reward.png"); color: #f0d6a4; }
.guild-shell :is(.guild-danger-button, .guild-application button.danger, .guild-roster-actions button.danger) { border-image-source: url("assets/ui/guild-raster/button-danger.png"); color: #eac1c1; }
.guild-create-card > button, #guildSaveSettingsButton { width: 100%; margin-top: 16px; }

/* Progress bars keep a visible fill and reserve a separate space for values. */
.guild-shell :is(.guild-progress, .guild-boss-health, .guild-operation-progress) { height: 8px; overflow: hidden; border: 1px solid #2a4854; background: #02080c; }
.guild-shell :is(.guild-progress, .guild-boss-health, .guild-operation-progress) > span { display: block; height: 100%; background: linear-gradient(90deg, #368d9d, var(--guild-accent)); transition: width 250ms ease; }
.guild-boss-health > span { background: linear-gradient(90deg, #724796, #cfa7eb); }

/* Small rows use the quiet part of the same artwork. */
.guild-shell :is(.guild-missions, .guild-event-feed, .guild-roster, .guild-directory, .guild-messages, .guild-season-milestones, .guild-season-leaderboard, .guild-raid-leaderboard, .guild-raid-log, .guild-applications) { display: grid; gap: 10px; }
.guild-shell :is(.guild-mission, .guild-event, .guild-roster-entry, .guild-directory-entry, .guild-application, .guild-message, .guild-season-milestone, .guild-season-entry, .guild-raid-entry, .guild-raid-log-entry) {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 6px 10px;
  padding: 12px 10px;
  border: 1px solid #29434c;
  background: linear-gradient(120deg, #11212c80, #050c118f), url("assets/ui/guild-raster/frame-card.png") center / 180% 200%;
}
.guild-shell :is(.guild-mission-copy, .guild-roster-entry > div, .guild-directory-entry > div, .guild-season-milestone > div, .guild-season-entry > div, .guild-raid-log-entry > div) { display: grid; gap: 4px; }
.guild-shell :is(.guild-mission-copy, .guild-roster-entry, .guild-directory-entry, .guild-season-milestone, .guild-season-entry, .guild-raid-log-entry) strong { font-size: 12px; line-height: 1.35; }
.guild-shell :is(.guild-mission-glyph, .guild-roster-rank, .guild-directory-entry > span:first-child, .guild-season-milestone > span:first-child, .guild-season-entry > span:first-child, .guild-raid-entry > span:first-child, .guild-raid-log-entry > span:first-child, .guild-event > span:first-child) {
  display: grid;
  width: 30px;
  min-height: 32px;
  place-items: center;
  color: var(--guild-accent);
  background: url("assets/ui/guild-raster/micro-avatar.png") center / contain no-repeat;
  font: 600 12px Georgia, serif;
}
.guild-mission-progress { grid-column: 2; color: var(--guild-accent); font-size: 11px; font-variant-numeric: tabular-nums; }
.guild-mission.completed { border-color: #4d8b68; }
.guild-event p { font-size: 11px; }
.guild-event time { grid-column: 2; }
.guild-empty-state { padding: 14px; border: 1px dashed #354d56; color: var(--ui-muted); font-size: var(--ui-body); line-height: 1.5; }
.guild-raid-callout {
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid #765398;
  background: linear-gradient(110deg, #271a359c, #061018e8), url("assets/guild/guild-overview-command-v2.png") center / cover;
  text-align: left !important;
}
.guild-raid-callout > span:first-child { display: grid; gap: 4px; }
.guild-raid-callout strong { color: #e2c5fa; font: 500 20px/1.2 Georgia, serif; }
.guild-raid-callout > span:last-child { color: #b9a7cf; font-size: 12px; }

/* Operations */
.guild-operation { display: grid; gap: 12px; }
.guild-operation header { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 12px; }
.guild-operation h3 { margin-top: 5px; }
.guild-operation-glyph { display: grid; width: 36px; height: 42px; place-items: center; background: url("assets/ui/guild-raster/micro-avatar.png") center / contain no-repeat; color: var(--guild-accent); font-size: 18px; }
.guild-operation-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 11px; color: #94aab1; }
.guild-operation-meta strong { color: var(--guild-accent); }
.guild-operation-route { padding: 10px 12px; border-left: 2px solid #8b76a5; background: #1b152180; font-size: 13px; color: var(--ui-muted); }
.guild-operation-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.guild-operation-reward { padding-top: 10px; border-top: 1px solid #394349; }
.guild-operation.locked .guild-operation-glyph { color: #9fa7b4; }
.guild-operation.completed h3 { color: #e0c184; }

/* Raid: art has a dedicated stage above the readable boss dossier. */
.guild-boss-card { overflow: hidden; border: 1px solid #765398; background: #0b0d17; }
.guild-boss-visual { position: relative; height: 245px; overflow: hidden; background: radial-gradient(ellipse at 50% 60%, #422c6855, transparent 70%), url("assets/guild/guild-overview-command-v2.png") center / cover; }
.guild-boss-visual::after { position: absolute; inset: 0; background: linear-gradient(0deg, #0b0d17, transparent 35%); content: ""; }
.guild-boss-visual img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 0 15px #a288c64d); }
.guild-boss-vfx { display: none; }
.guild-boss-card.defeated .guild-boss-visual img { filter: grayscale(.7) brightness(.65); }
.guild-boss-copy { display: grid; gap: 14px; padding: 10px 22px 22px; }
.guild-boss-copy h2 { font-size: 25px; margin-top: -8px; }
.guild-boss-phase { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 12px; color: #a59ab6; font-size: 11px; }
.guild-boss-phase strong { color: #dcc4f1; font-size: 11px; }
.guild-boss-meta { display: flex; flex-wrap: wrap; gap: 5px 12px; font-size: 11px; color: #9e9db2; }
.guild-boss-meta strong { color: #dac0ed; }
.guild-boss-actions { display: grid; gap: 8px; }
.guild-raid-mechanic { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; margin-bottom: 18px; padding: 12px; border-left: 2px solid #b491cf; background: #1d172787; }
.guild-raid-mechanic > span { color: #d7b7ef; font: 500 20px Georgia, serif; }
.guild-raid-mechanic strong { display: block; margin-bottom: 5px; color: #e0c8f2; font-size: 12px; }
.guild-raid-command-grid { display: grid; gap: 18px; }
.guild-raid-command-grid > div > small { display: block; margin-bottom: 8px; color: #c0a9d9; }
.guild-raid-roles, .guild-raid-tactics { display: grid; gap: 8px; }
.guild-shell :is(.guild-raid-roles, .guild-raid-tactics) button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid #544668;
  background: linear-gradient(100deg, #261a3475, #070c13b8), url("assets/ui/guild-raster/frame-card.png") center / 180% 200%;
  text-align: left;
}
.guild-shell :is(.guild-raid-roles, .guild-raid-tactics) button > span:first-child { color: #c8b0e8; font-size: 18px; text-align: center; }
.guild-shell :is(.guild-raid-roles, .guild-raid-tactics) button > span:last-child { display: grid; gap: 3px; }
.guild-shell :is(.guild-raid-roles, .guild-raid-tactics) button strong { color: #ded1ed; font-size: 12px; }
.guild-shell :is(.guild-raid-roles, .guild-raid-tactics) button small { font-size: 11px; color: #a79ebc; }
.guild-shell :is(.guild-raid-roles, .guild-raid-tactics) button.selected { border-color: #bfa0df; background-color: #332049; box-shadow: inset 3px 0 #bfa0df; }
.guild-raid-active-order { display: grid; gap: 5px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #423449; }
.guild-raid-active-order span { font-size: 11px; color: #a598b7; }
.guild-raid-active-order strong { color: #debfef; font-size: 14px; }
.guild-raid-schedule { margin-top: 10px !important; color: #dec28a !important; }
.guild-ready-row { display: grid; gap: 10px; margin-top: 14px; }
.guild-ready-row > span { color: #b8d7d1; font-size: 12px; }
.guild-ready-row .active { color: #adedd1; }
.guild-raid-rules ul { display: grid; gap: 8px; margin: 14px 0 0; padding-left: 17px; color: #a6b5bb; font-size: 11px; }
.guild-raid-entry > span:last-child, .guild-raid-log-entry > b { grid-column: 2; color: #d0b8e8; font-size: 11px; }

/* Facilities and the quartermaster */
.guild-project { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; }
.guild-project-glyph, .guild-shop-glyph { display: grid; width: 42px; height: 48px; place-items: center; background: url("assets/ui/guild-raster/micro-avatar.png") center / contain no-repeat; color: var(--guild-accent); font-size: 19px; }
.guild-project-copy { display: grid; gap: 8px; }
.guild-project-title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; }
.guild-project-title strong { color: #dbc08b; font-size: 11px; }
.guild-project-levels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.guild-project-levels i { height: 5px; background: #20343e; }
.guild-project-levels i.filled { background: var(--guild-accent); }
.guild-project footer { display: grid; gap: 8px; margin-top: 3px; }
.guild-project footer > span { color: #b4ced0; font-size: 11px; }
.guild-project.completed h3 { color: #e3c790; }
.guild-treasury-card { display: grid; gap: 16px; }
.guild-treasury-card p:not(.eyebrow) { margin-top: 8px; }
.guild-treasury-card > div:last-child { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: 10px; }
.guild-shop-item { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: start; }
.guild-shop-item > div { display: grid; gap: 7px; }
.guild-shop-item > div > strong { color: #d9c18d; font-size: 12px; }
.guild-shop-item > button { grid-column: 1 / -1; width: 100%; }
.guild-shop-item.purchased h3 { color: #cab17e; }
.guild-shop-note { padding: 14px 16px; border-left: 2px solid #b39361; background: #201b145c; font-size: 13px; color: var(--ui-muted); }

/* Members, applications and administration */
.guild-roster-entry.self { border-color: #438a99; }
.guild-roster-entry.ready { border-left: 3px solid #6bbb97; }
.guild-roster-status { display: flex !important; grid-column: 2; flex-wrap: wrap; gap: 3px 10px; }
.guild-roster-status span { color: var(--guild-accent); font-size: 11px; }
.guild-roster-actions { display: grid !important; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); gap: 6px; padding-top: 8px; }
.guild-shell .guild-directory-entry { grid-template-columns: 42px minmax(0, 1fr); }
.guild-shell .guild-directory-entry > span:first-child { width: 42px; min-height: 44px; font: 600 11px/1 Consolas, "Courier New", monospace; }
.guild-directory-entry > button { grid-column: 1 / -1; }
.guild-application { grid-template-columns: minmax(0, 1fr) !important; }
.guild-application > div { display: grid; gap: 6px; }
.guild-application > div:last-child { grid-template-columns: 1fr 1fr; }
.guild-application button { font-size: 13px; }
.guild-settings-grid { display: grid; gap: 16px; margin-top: 16px; }
.guild-settings-grid label, .guild-create-card label, .guild-application-message { display: grid; gap: 7px; color: #aabdc3; font: 500 11px/1.4 "Segoe UI", sans-serif; letter-spacing: 0; }
.guild-create-card label { margin-top: 16px; }
.guild-create-card > p:not(.eyebrow) { margin-top: 10px; }
.guild-application-message { margin-bottom: 16px; }
.guild-shell :is(input, textarea, select) {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #35535e;
  border-radius: 2px;
  outline: none;
  background: #071118;
  color: #e6eae5;
  font: 13px/1.4 "Segoe UI", sans-serif;
}
.guild-shell :is(input, textarea)::placeholder { color: #8da0a9; opacity: 1; }
.guild-shell textarea { min-height: 86px; resize: vertical; }
.guild-shell :is(input, textarea, select):focus { border-color: var(--guild-accent); }
.guild-shell option { color: #e6eae5; background: #071118; }
.guild-recruitment { position: relative; isolation: isolate; display: grid; gap: 16px; padding-top: 180px; }
.guild-recruitment::before { position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: 165px; background: linear-gradient(0deg, #050b0f, #050b0f00 35%), url("assets/guild/guild-roster-gallery-v2.png") center / cover; content: ""; }

/* Messenger */
.guild-message { display: block !important; }
.guild-message.self { border-color: #776540; }
.guild-message header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.guild-message header strong { color: var(--guild-accent); font-size: 12px; }
.guild-message p { margin: 8px 0 12px; font-size: 13px; }
.guild-message-reactions { display: flex; flex-wrap: wrap; gap: 6px; }
.guild-message-reactions button { min-width: 48px; min-height: 32px; padding: 4px 9px; border: 1px solid #39515c; background: #0a171e; color: #c7d7d8; font-size: 12px; }
.guild-message-reactions button.selected { border-color: var(--guild-accent); background: #12303b; }
.guild-quick-messages { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 18px; }
.guild-message-compose { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; margin-top: 14px; }
#guildMessageButton { width: 44px; min-height: 44px; padding: 0; border: 1px solid #5ca2b2; background: #123440; color: #d1fbff; font-size: 23px; }

/* Season */
.guild-season-milestone > span:first-child { background-image: url("assets/ui/guild-raster/micro-milestone.png"); }
.guild-season-milestone > button { grid-column: 1 / -1; width: 100%; margin-top: 6px; }
.guild-season-milestone.available { border-color: #a68650; }
.guild-season-milestone.claimed { border-color: #436a58; }
.guild-season-entry.self { border-color: #988051; }
.guild-season-entry[data-season-rank="1"] > span:first-child { background-image: url("assets/ui/guild-raster/micro-crown.png"); }
.guild-season-entry b { grid-column: 2; color: #dbc18b; font-size: 12px; }
.guild-footer-actions { display: grid; gap: 12px; padding: 18px 0 0; border-top: 1px solid #293d45; }
.guild-footer-actions > span { color: #899ca6; font-size: 11px; }
.guild-footer-actions button { justify-self: start; }
.guild-dashboard.is-pending, .guild-recruitment.is-pending { cursor: progress; }
.guild-dashboard.is-pending button, .guild-recruitment.is-pending button { pointer-events: none; }

@container guild (max-width: 370px) {
  .guild-shell h1, .guild-header h1 { font-size: 19px; }
  .guild-tabs button { font-size: 11px; }
  .guild-banner, .guild-shell :is(.guild-create-card, .guild-directory-card, .guild-activity-card, .guild-directives-card, .guild-event-card, .guild-operation, .guild-project, .guild-shop-item, .guild-treasury-card, .guild-raid-command, .guild-raid-rules, .guild-leaderboard-card, .guild-raid-log-card, .guild-roster-card, .guild-applications-card, .guild-management-card, .guild-board-card, .guild-season-track, .guild-season-leaderboard-card) { border-width: 20px; border-image-width: 20px; padding-inline: 6px; }
  .guild-project { grid-template-columns: minmax(0, 1fr); }
  .guild-project-glyph { display: none; }
  .guild-shop-item { grid-template-columns: 32px minmax(0, 1fr); }
  .guild-shop-glyph { width: 32px; height: 40px; }
  .guild-shell :is(.guild-overview-hero, .guild-operations-hero, .guild-development-intro, .guild-shop-hero, .guild-section-scene, .guild-season-hero) { padding-inline: 16px; }
  .guild-shell :is(.guild-overview-hero, .guild-operations-hero, .guild-development-intro, .guild-shop-hero, .guild-section-scene, .guild-season-hero) h2 { font-size: 21px; }
  .guild-application > div:last-child { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .guild-shell *, .guild-shell *::before, .guild-shell *::after { animation: none !important; transition: none !important; }
}

@media (max-height: 560px) {
  .guild-shell { --guild-header-height: 64px; }
  .guild-header { padding-block: 8px; }
  .guild-header h1 { font-size: 19px; }
  .guild-tabs button { min-height: 48px; grid-template-rows: 24px auto; gap: 3px; padding-block: 3px; }
  .guild-tab-icon { width: 24px; height: 24px; }
}

@media (max-height: 620px) {
  .game:has(.guild-overlay.active) { min-height: 0; height: 100dvh; }
}

/* Domain layout takes precedence over the later shared skin. Keep its live
   tokens/artwork; spend vertical space on decisions rather than ornament.
   ui-system.js measures the fluid header for the sticky navigation offset. */
#game #guildOverlay .guild-shell { --guild-header-height: 72px; }
#game #guildOverlay .guild-header {
  min-height: 72px;
  height: auto;
  padding-block: max(8px, env(safe-area-inset-top)) 8px;
}
#game #guildOverlay .guild-header h1 { font-size: 21px; line-height: 1.2; }
#game #guildOverlay .guild-dashboard {
  gap: var(--ui-space-3);
  padding-top: var(--ui-space-2);
}
#game #guildOverlay .guild-banner {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 6px 10px;
  padding: var(--ui-space-2);
  border-width: 12px;
  border-image-width: 12px;
}
#game #guildOverlay .guild-emblem {
  width: 42px;
  height: 48px;
  padding-top: 15px;
  font-size: 12px;
}
#game #guildOverlay .guild-identity h2 {
  margin-top: 3px;
  font-size: 22px;
  line-height: 1.15;
}
#game #guildOverlay .guild-identity > p:last-child {
  margin-top: 3px;
  font-size: var(--ui-small);
  line-height: 1.4;
}
#game #guildOverlay .guild-banner dl { gap: 6px; padding-block: 6px; }
#game #guildOverlay .guild-banner dl > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 2px 5px;
}
#game #guildOverlay .guild-banner :is(dt, dd) {
  min-width: 0;
  overflow-wrap: anywhere;
}
#game #guildOverlay .guild-banner dd { font-size: 16px; line-height: 1.25; }
#game #guildOverlay .guild-banner .guild-benefits {
  font-size: var(--ui-small);
  line-height: 1.45;
}
#game #guildOverlay .guild-personal-status { gap: 2px 8px; }
#game #guildOverlay .guild-personal-status :is(strong, span) {
  font-size: var(--ui-small);
  line-height: 1.4;
}

/* All eight destinations are discoverable at once. Labels are live text in
   their own band, never inside the generated insignia or a clipped scroller. */
#game #guildOverlay .guild-tabs {
  top: var(--guild-header-height);
  grid-auto-flow: row;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-columns: auto;
  gap: var(--ui-space-1);
  overflow: visible;
  padding: var(--ui-space-1) 0;
}
#game #guildOverlay .guild-tabs button {
  display: grid;
  grid-template-rows: 20px auto;
  justify-items: center;
  align-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 50px;
  padding: 5px 3px;
  border-image-width: 5px;
  font-size: var(--ui-small);
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}
#game #guildOverlay .guild-tab-icon { width: 20px; height: 20px; }
#game #guildOverlay .guild-tabs button.active {
  color: var(--ui-ink);
  box-shadow: inset 0 -2px var(--guild-accent);
}

/* Compact scene introductions grow with long announcements instead of
   reserving a fixed 218px before the useful section begins. */
#game #guildOverlay :is(
  .guild-overview-hero, .guild-operations-hero, .guild-development-intro,
  .guild-shop-hero, .guild-section-scene, .guild-season-hero
) {
  min-height: 0;
  gap: var(--ui-space-2);
  padding: var(--ui-space-3) 14px;
}
#game #guildOverlay :is(
  .guild-overview-hero, .guild-operations-hero, .guild-development-intro,
  .guild-shop-hero, .guild-section-scene, .guild-season-hero
) h2 { font-size: var(--ui-subheading); line-height: 1.2; }
#game #guildOverlay :is(
  .guild-overview-hero, .guild-operations-hero, .guild-development-intro,
  .guild-shop-hero, .guild-section-scene, .guild-season-hero
) p:not(.eyebrow) { margin-top: 6px; font-size: var(--ui-body); line-height: 1.5; }
#game #guildOverlay :is(
  .guild-cycle, .guild-operation-attempts, .guild-scene-stat,
  .guild-development-intro > div:last-child, .guild-shop-hero > div:last-child,
  .guild-season-hero > div:last-child
) { padding-top: var(--ui-space-2); }
#game #guildOverlay .guild-panel.active { gap: var(--ui-space-3); }
#game #guildOverlay .guild-section-heading { margin-bottom: var(--ui-space-3); }
#game #guildOverlay .guild-activity-card > p { margin: 8px 0 12px; }
#game #guildOverlay .guild-recruitment { padding-top: 92px; }
#game #guildOverlay .guild-recruitment::before { height: 84px; }

/* The phase, health, attempts and attack are read before the decorative stage.
   The boss portrait remains a complete image, not a stretched crop. */
#game #guildOverlay .guild-boss-card { display: grid; }
#game #guildOverlay .guild-boss-copy {
  order: 0;
  gap: 10px;
  padding: 16px;
}
#game #guildOverlay .guild-boss-copy h2 { margin-top: 0; font-size: 23px; }
#game #guildOverlay .guild-boss-visual { order: 1; height: 120px; }

@media (max-width: 360px) {
  /* Keep whole destination names readable instead of breaking a word into letters. */
  #game #guildOverlay .guild-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #game #guildOverlay .guild-tabs button {
    display: flex;
    justify-content: center;
    gap: 6px;
    min-height: var(--ui-control-height);
    padding: 7px 6px;
    overflow-wrap: normal;
  }
}

@media (max-height: 560px) {
  #game #guildOverlay .guild-header { min-height: 64px; }
  #game #guildOverlay .guild-tabs button {
    display: flex;
    min-height: var(--ui-control-height);
    padding-block: 6px;
  }
  #game #guildOverlay .guild-tab-icon { display: none; }
}