/* One shared nine-slice frame. The centre stays transparent and the corner
   artwork keeps its size while the straight edge bands stretch independently.
   Painting width is independent of border width, so existing window geometry,
   padding, scrolling, focus and pointer targets remain owned by their UI.
   Entry preparation decrypts the shared transparent WebP Q70 once and supplies
   its document-lifetime blob URL. Editable source/exporter is
   under webclient/tools/ui-window-frame.svg and export-ui-window-frame.mjs. */
:root {
  --ui-frame-image: var(--vr-frame, none);
  --ui-frame-size: 24px;
  --ui-frame-panel-size: 14px;
  --gold: #d6bd86;
  --muted: #b9b4a9;
  --line: rgb(184 156 98 / .24);
  --surface-border: rgb(184 156 98 / .38);
  --selection: rgb(184 156 98 / .14);
}

/* Ornament belongs to outer boxes and substantial section boundaries.
   Slots, buttons, fields, individual rows and item/preview icons retain their
   native plain borders. The shared palette also colours their thin separators. */
body :where(fieldset, .hud, .skill-hotbar, .potion-hotbar,
  .target-card, .minimap-panel, .window-shortcuts,
  .chat-overlay #chat-editor, .sound-mixer,
  .paperdoll, .appearance-preview, .promotion-preview, .saddle-details,
  .exchange-columns>section, .exchange-controls, .quest-dialogue-copy, .quest-portrait,
  .quest-detail-objective, .quest-tracker, .quest-cinematic-guide[data-kind="bubble"],
  .accessory-growth-configuration,
  .accessory-growth-set, .accessory-growth-total,
  .limit-break-option-help, .limit-break-details,
  .market-search-panel, .market-register-form,
  .market-action-panel, .soul-transfer-summary,
  .daily-news, .daily-calendar,
  .equipment-condition>summary, .equipment-condition-details,
  .event-hud, .event-announcements, .event-coin-guide,
  .conquest-hud, .conquest-scoreboard-team, .conquest-scoreboard-rewards,
  .event-admin-section, .event-definition, .event-policy, .event-schedule,
  .recruitment-own, .dungeon-hud, .dungeon-encounter-hud,
  .crystal-defense-hud, .crystal-named-hud,
  .inventory-item-menu, .friend-context-menu, .item-tooltip,
  #party-recruitment-tooltip, .tower-ranking-scroll,
  .refining-forge, .refining-scene, .refining-costs,
  .entry-policy, #mobile-layout-editor,
  .promotion-announcement-banner, #field-channel-status, #duel-status,
  #death-notice, #touch-action-hint) {
  border-image: var(--ui-frame-image) 48 / var(--ui-frame-panel-size) / 0 stretch !important;
}

body :where(dialog, [role="dialog"], .rpg-window, .sidebar, .entry-card,
  .minimap-panel.expanded, .quest-dialogue, .quest-puzzle,
  .party-loot-popup, .dungeon-entry-wait, .ui-window-frame) {
  /* Individual and lazy-loaded UI styles reset border-image through their
     border shorthand. Only the decorative painting must win that reset. */
  border-image: var(--ui-frame-image) 48 / var(--ui-frame-size) / 0 stretch !important;
}

/* The same resource fits small touch windows; only ornament scale changes. */
body.touch-ui {
  --ui-frame-size: 22px;
  --ui-frame-panel-size: 12px;
}

/* These touch layouts deliberately flatten their desktop boxes into strips. */
body.touch-ui #chat-overlay>.quest-tracker,
body.touch-ui.mobile-controls-ready .action-bars .skill-hotbar {
  border-image: none !important;
}

/* Section states keep their original information colours. */
body :where([aria-pressed="true"], [aria-selected="true"], [aria-checked="true"],
  .chosen, .selected, .active, .drop-target, .move-source,
  .registering, .level-locked, :disabled, [aria-invalid="true"],
  [data-state="error"], [data-outcome="failure"], [data-outcome="success"],
  .ranking-error, .player-info-error, .accessory-growth-result) {
  border-image: none !important;
}

@media (forced-colors: active) {
  body * {
    border-image: none !important;
  }
}