/* Image-free interface styling. Keep layout and game artwork in styles.css.
   Sharing the existing important layer lets these rules replace legacy skins. */
@layer game-controls {
:root {
  --glyph-ink: #19d5e5;
  --glyph-gear: polygon(42% 8%,58% 8%,60% 18%,66% 21%,75% 16%,86% 27%,81% 36%,84% 42%,94% 44%,94% 58%,84% 60%,81% 66%,86% 75%,75% 86%,66% 81%,60% 84%,58% 94%,42% 94%,40% 84%,34% 81%,25% 86%,14% 75%,19% 66%,16% 60%,6% 58%,6% 44%,16% 42%,19% 36%,14% 27%,25% 16%,34% 21%,40% 18%);
}

/* One CSS glyph per control: no duplicate background + pseudo-element icon. */
:where(.ui-image-icon, .ai-loop-slot-clear, .status-badge, .action-icon) {
  --glyph-size: 24px;
  --glyph-shape: none;
  --glyph-mask: none;
  --glyph-paint: linear-gradient(var(--glyph-ink), var(--glyph-ink));
  position: relative;
}
.ui-image-icon:not(button) {
  background: none !important;
  border-image: none !important;
}
button.ui-image-icon, button.ai-loop-slot-clear {
  --button-icon: none !important;
}
:where(.ui-image-icon, .ai-loop-slot-clear, .status-badge, .action-icon)::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  margin: auto !important;
  width: var(--glyph-size) !important;
  height: var(--glyph-size) !important;
  max-width: 100%;
  max-height: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--glyph-paint) !important;
  clip-path: var(--glyph-shape) !important;
  -webkit-mask-image: var(--glyph-mask) !important;
  mask-image: var(--glyph-mask) !important;
  filter: none !important;
  box-shadow: none !important;
  pointer-events: none;
}
button.shared-header-options { --glyph-size: 32px; }
.hud-button.ui-image-icon, .bottom-icon.ui-image-icon { --glyph-size: 26px; }
.battle-result-reward-icon { --glyph-size: 28px; }
.home-adjutant-icon { --glyph-size: 24px; }
.ai-loop-slot-clear { --glyph-size: 16px; }
.status-badge { --glyph-size: 14px; background-image: none !important; }
.status-detect { --glyph-ink: #e0b568; }
.action-icon {
  --glyph-size: 1em;
  --glyph-ink: currentColor;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

/* Close, chevrons and arrows keep their familiar meaning without font glyphs. */
.icon-close, .ai-loop-slot-clear {
  --glyph-shape: polygon(22% 14%,50% 42%,78% 14%,86% 22%,58% 50%,86% 78%,78% 86%,50% 58%,22% 86%,14% 78%,42% 50%,14% 22%);
}
.icon-chevron-left {
  --glyph-shape: polygon(62% 12%,72% 22%,44% 50%,72% 78%,62% 88%,24% 50%);
}
.icon-chevron-right {
  --glyph-shape: polygon(38% 12%,28% 22%,56% 50%,28% 78%,38% 88%,76% 50%);
}
.action-icon-advance {
  --glyph-shape: polygon(10% 43%,65% 43%,46% 24%,56% 14%,92% 50%,56% 86%,46% 76%,65% 57%,10% 57%);
}
.action-icon-retreat {
  --glyph-shape: polygon(90% 43%,35% 43%,54% 24%,44% 14%,8% 50%,44% 86%,54% 76%,35% 57%,90% 57%);
}
.icon-settings {
  --glyph-shape: var(--glyph-gear);
  --glyph-mask: radial-gradient(circle, transparent 0 18%, #000 19%);
}
/* Four corner brackets: outward to enter fullscreen, inward to leave it. */
.icon-fullscreen {
  --glyph-paint:
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) 0 0 / 38% 12% no-repeat,
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) 0 0 / 12% 38% no-repeat,
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) 100% 0 / 38% 12% no-repeat,
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) 100% 0 / 12% 38% no-repeat,
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) 0 100% / 38% 12% no-repeat,
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) 0 100% / 12% 38% no-repeat,
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) 100% 100% / 38% 12% no-repeat,
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) 100% 100% / 12% 38% no-repeat;
}
.icon-fullscreen-exit {
  --glyph-paint:
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) 0 29.5% / 38% 12% no-repeat,
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) 29.5% 0 / 12% 38% no-repeat,
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) 100% 29.5% / 38% 12% no-repeat,
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) 70.5% 0 / 12% 38% no-repeat,
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) 0 70.5% / 38% 12% no-repeat,
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) 29.5% 100% / 12% 38% no-repeat,
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) 100% 70.5% / 38% 12% no-repeat,
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) 70.5% 100% / 12% 38% no-repeat;
}
button.shared-header-fullscreen { --glyph-size: 26px; }
.icon-home {
  --glyph-shape: polygon(8% 43%,50% 9%,92% 43%,85% 53%,80% 49%,80% 89%,59% 89%,59% 63%,41% 63%,41% 89%,20% 89%,20% 49%,15% 53%);
}
.icon-equipment {
  --glyph-shape: polygon(12% 37%,63% 37%,63% 26%,93% 50%,63% 74%,63% 63%,12% 63%);
}
/* A bullet flying right (head, casing, rim) trailed by three speed lines. */
.action-icon-attack {
  --glyph-paint:
    radial-gradient(ellipse 100% 50% at 0% 50%, var(--glyph-ink) 97%, transparent 100%) 94% 50% / 33% 46% no-repeat,
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) 37.3% 50% / 33% 46% no-repeat,
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) 21.1% 50% / 5% 58% no-repeat,
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) 2.4% 24% / 15% 9% no-repeat,
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) 2.4% 50% / 15% 9% no-repeat,
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) 2.4% 76% / 15% 9% no-repeat;
}
.icon-operation, .action-icon-skill {
  --glyph-shape: polygon(50% 5%,62% 36%,95% 50%,62% 64%,50% 95%,38% 64%,5% 50%,38% 36%);
}
.icon-ai {
  --glyph-shape: polygon(24% 12%,36% 12%,36% 24%,44% 24%,44% 12%,56% 12%,56% 24%,64% 24%,64% 12%,76% 12%,76% 24%,88% 24%,88% 36%,76% 36%,76% 44%,88% 44%,88% 56%,76% 56%,76% 64%,88% 64%,88% 76%,76% 76%,76% 88%,64% 88%,64% 76%,56% 76%,56% 88%,44% 88%,44% 76%,36% 76%,36% 88%,24% 88%,24% 76%,12% 76%,12% 64%,24% 64%,24% 56%,12% 56%,12% 44%,24% 44%,24% 36%,12% 36%,12% 24%,24% 24%);
  --glyph-mask: radial-gradient(circle, transparent 0 14%, #000 15%);
}
.icon-mail {
  --glyph-paint:
    linear-gradient(34deg, transparent 45%, var(--glyph-ink) 46% 54%, transparent 55%) 0 0 / 50% 60% no-repeat,
    linear-gradient(-34deg, transparent 45%, var(--glyph-ink) 46% 54%, transparent 55%) 100% 0 / 50% 60% no-repeat,
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) top / 100% 9% no-repeat,
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) bottom / 100% 9% no-repeat,
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) left / 9% 100% no-repeat,
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) right / 9% 100% no-repeat;
  --glyph-size: 22px;
}
.icon-alert, .icon-notice, .ops-icon {
  --glyph-paint:
    radial-gradient(circle, var(--glyph-ink) 0 65%, transparent 70%) 50% 81% / 12% 12% no-repeat,
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) 50% 43% / 12% 43% no-repeat;
}
.icon-team {
  --glyph-paint:
    radial-gradient(circle at 50% 27%, var(--glyph-ink) 0 16%, transparent 17%),
    radial-gradient(ellipse 25% 28% at 50% 80%, var(--glyph-ink) 98%, transparent),
    radial-gradient(circle at 17% 38%, var(--glyph-ink) 0 11%, transparent 12%),
    radial-gradient(circle at 83% 38%, var(--glyph-ink) 0 11%, transparent 12%),
    radial-gradient(ellipse 17% 22% at 17% 81%, var(--glyph-ink) 98%, transparent),
    radial-gradient(ellipse 17% 22% at 83% 81%, var(--glyph-ink) 98%, transparent);
  --glyph-shape: inset(5% 2% 10%);
}
.home-adjutant-icon {
  --glyph-paint:
    radial-gradient(circle at 50% 27%, var(--glyph-ink) 0 19%, transparent 20%),
    radial-gradient(ellipse 35% 32% at 50% 84%, var(--glyph-ink) 98%, transparent);
  --glyph-shape: inset(4% 8% 10% round 2px);
}
.action-icon-guard, .status-guard {
  --glyph-shape: polygon(50% 6%,86% 21%,81% 60%,69% 78%,50% 94%,31% 78%,19% 60%,14% 21%);
}
.action-icon-detect, .status-detect {
  --glyph-paint:
    radial-gradient(circle, var(--glyph-ink) 0 8%, transparent 9% 31%, var(--glyph-ink) 32% 41%, transparent 42%),
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) center top / 8% 23% no-repeat,
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) center bottom / 8% 23% no-repeat,
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) left center / 23% 8% no-repeat,
    linear-gradient(var(--glyph-ink),var(--glyph-ink)) right center / 23% 8% no-repeat;
}
.action-icon-random {
  --glyph-shape: inset(8% round 15%);
  --glyph-mask:
    radial-gradient(circle at 30% 30%, transparent 0 7%, #000 8%),
    radial-gradient(circle at 70% 30%, transparent 0 7%, #000 8%),
    radial-gradient(circle at 50% 50%, transparent 0 7%, #000 8%),
    radial-gradient(circle at 30% 70%, transparent 0 7%, #000 8%),
    radial-gradient(circle at 70% 70%, transparent 0 7%, #000 8%);
}
.action-icon-random::after { -webkit-mask-composite: source-in; mask-composite: intersect; }

/* Readout icons use the existing inline slot so numbers never move. */
.resource-credit, .resource-crystal, .ops-icon {
  --glyph-ink: #19d5e5;
  --glyph-shape: none;
  --glyph-mask: none;
}
.resource-credit {
  /* A solid rounded card with the magnetic stripe cut out: one shape and one
     cut, so the outline can never come apart at small or scaled sizes. */
  --glyph-paint: linear-gradient(var(--glyph-ink), var(--glyph-ink));
  --glyph-shape: inset(18% 4% round 14%);
  --glyph-mask: linear-gradient(180deg, #000 0 34%, transparent 34% 50%, #000 50%);
}
.resource-crystal {
  --glyph-paint: linear-gradient(var(--glyph-ink),var(--glyph-ink));
  --glyph-shape: polygon(50% 8%,86% 40%,50% 92%,14% 40%);
}
:is(.resource-credit.ui-resource-icon, .resource-crystal, .ops-icon)::before {
  background: var(--glyph-paint) !important;
  clip-path: var(--glyph-shape) !important;
  -webkit-mask-image: var(--glyph-mask) !important;
  mask-image: var(--glyph-mask) !important;
  filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Flat CSS panels: preserve the original reserved border space and content
   positions, painting the thin perimeter over it instead of a sliced PNG. */
.enemy-marker-brackets {
  background:
    linear-gradient(currentColor,currentColor) 12% 14% / 25% 9% no-repeat,
    linear-gradient(currentColor,currentColor) 12% 14% / 9% 25% no-repeat,
    linear-gradient(currentColor,currentColor) 88% 14% / 25% 9% no-repeat,
    linear-gradient(currentColor,currentColor) 88% 14% / 9% 25% no-repeat,
    linear-gradient(currentColor,currentColor) 12% 86% / 25% 9% no-repeat,
    linear-gradient(currentColor,currentColor) 12% 86% / 9% 25% no-repeat,
    linear-gradient(currentColor,currentColor) 88% 86% / 25% 9% no-repeat,
    linear-gradient(currentColor,currentColor) 88% 86% / 9% 25% no-repeat;
}

:is(.home-ops, .squad-dock, .card, .stage-rail, .stage-detail,
.formation-team-dock,
.mobile-qr-modal, .retreat-confirm-modal, .battle-unit-detail,
.battle-result-modal, .hangar-stat-readout, .home-options-modal,
.commander-name-editor-modal, .portrait-settings-modal, .unlock-confirm-modal) {
  border-image: none !important;
  border-color: transparent !important;
  border-radius: var(--control-radius) !important;
  outline: 1px solid var(--control-edge);
  outline-offset: -1px;
  background: var(--control-surface) border-box !important;
}

/* Shared exploration-style outer frames; keep each panel's internal layout. */
.ai-chip-editor,
.formation-card-board,
.equipment-workbench {
  border-image: none !important;
  border-color: transparent !important;
  border-radius: 6px !important;
  outline: 1px solid var(--line);
  outline-offset: -1px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 22%),
    rgba(18, 21, 19, 0.9) border-box !important;
  box-shadow: 0 18px 42px var(--shadow);
}

/* Character portraits sit directly on the scene, without an outer card frame. */
.card.formation-focus-panel,
.card.hangar-preview-card {
  background: none !important;
  border: 0 !important;
  border-image: none !important;
  outline: none !important;
  box-shadow: none !important;
}

:is(.formation-ability-row, .battle-ability-detail, .battle-detail-stat) {
  border-image: none !important;
  border-color: transparent !important;
  border-radius: var(--control-radius) !important;
  background: var(--control-surface) border-box !important;
  outline: 1px solid var(--control-edge);
  outline-offset: -1px;
}

/* Hangar status panel: semi-transparent so the standee shows through. */
.hangar-preview-card .hangar-stat-readout {
  background: linear-gradient(180deg, rgba(25, 41, 47, 0.62), rgba(16, 27, 33, 0.62)) border-box !important;
}

.hangar-preview-card .hangar-stat-readout .formation-ability-row {
  background: rgba(16, 27, 33, 0.4) border-box !important;
}
:is(.tool-icon, .resource-chip):not(button) {
  border-image: none !important;
}
:is(.stat-bar, .hpbar, .skillbar) {
  border-image: none !important;
  border: 1px solid var(--control-edge) !important;
  background: #0b161c border-box !important;
  border-radius: 3px !important;
  outline: 1px solid var(--control-edge);
  outline-offset: -1px;
}

/* Bold live typography, with the same composition for all mission states. */
.battle-start-banner, .battle-result-banner {
  --banner-accent: #72dae0;
  --banner-tint: 114 218 224;
  --banner-text: #eaffff;
  position: relative;
  display: grid;
  place-items: center;
  padding: 24px 20px;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--banner-text) !important;
  background:
    linear-gradient(110deg, transparent, rgb(var(--banner-tint) / .12) 48%, transparent),
    linear-gradient(90deg, rgb(7 15 20 / .32), rgb(7 15 20 / .94) 22% 78%, rgb(7 15 20 / .32)) !important;
  font-family: "Segoe UI", "Arial", sans-serif;
  font-size: 40px !important;
  font-weight: 900;
  font-style: italic;
  line-height: 1.1 !important;
  letter-spacing: .08em;
  text-align: center;
  overflow-wrap: normal;
  filter: none !important;
  text-shadow: 0 2px 0 rgb(0 0 0 / .65), 0 0 20px rgb(var(--banner-tint) / .16) !important;
}
.battle-start-banner::before, .battle-result-banner::before,
.battle-start-banner::after, .battle-result-banner::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--banner-accent) 22% 78%, transparent);
  pointer-events: none;
}
.battle-start-banner::before, .battle-result-banner::before { top: 10px; }
.battle-start-banner::after, .battle-result-banner::after { bottom: 10px; }
.battle-start-banner { font-size: 52px !important; }
.exploration-result-modal .battle-result-banner {
  font-size: 30px !important;
  min-height: 64px;
  aspect-ratio: auto !important;
  padding: 14px 12px;
}
.battle-result-banner.mission-clear {
  --banner-accent: #e0b568;
  --banner-tint: 224 181 104;
  --banner-text: #ffedca;
}
.battle-result-banner.mission-failed {
  --banner-accent: #e58d83;
  --banner-tint: 229 141 131;
  --banner-text: #ffe1dc;
}
}