@font-face {
  font-family: "SigilFront Display";
  src: url("data:font/woff2;base64,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") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ink: #f0f1ee;
  --muted: #8d9ba1;
  --cyan: #70bdd2;
  --cyan-soft: rgba(112, 189, 210, .3);
  --cyan-dark: #103642;
  --enemy: #bd6263;
  --enemy-soft: rgba(189, 98, 99, .3);
  --gold: #d8b86d;
  --panel: #071016;
  --panel-soft: rgba(8, 18, 25, .95);
  --line: rgba(151, 185, 193, .22);
  --sf-command-font: Inter, ui-sans-serif, system-ui, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }
html, body { width: 100%; margin: 0; min-width: 320px; min-height: 100%; background: #030609; color: var(--ink); }
body { overflow: auto; overscroll-behavior: none; }
button, input, select, textarea { font: inherit; }
button, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
img, svg { display: block; }

#sigilfront-static-review,
#sigilfront-play-vs-ai,
#sigilfront-unified-client {
  --sf-surface-height: 100dvh;
  position: relative;
  width: 100%;
  height: var(--sf-surface-height);
  min-height: 0;
  overflow: hidden;
  container: sigilfront-surface / inline-size;
  background: #030609;
}
.sf-review-loading { margin: 0; padding: 3rem; color: var(--muted); letter-spacing: .12em; text-align: center; }
#sigilfront-static-review[data-ready="true"] > .sf-review-loading { display: none; }

.sf-match-screen {
  --squad-height: 20.833333cqw;
  --board-side: 100cqw;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--squad-height) var(--board-side) minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(47, 94, 87, .25), transparent 38%),
    linear-gradient(145deg, #101811 0%, #060a0c 50%, #0b1216 100%);
}

.sf-squad-region,
.sf-battlefield-region,
.sf-command-region { min-width: 0; min-height: 0; position: relative; }

/* Squad portrait composition */
.sf-squad-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 100%;
  gap: 4px;
  padding: 3px 2px;
  overflow: hidden;
  border-bottom: 1px solid rgba(177, 151, 94, .42);
  background: linear-gradient(180deg, rgba(11, 23, 32, .98), rgba(5, 10, 14, .98));
  box-shadow: 0 15px 28px rgba(0, 0, 0, .45);
}

.sf-squad-card {
  --hero-accent-hi: #68c9ed;
  --hero-ring: rgba(102, 206, 241, .24);
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #31536a;
  background: #091117;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.sf-squad-scout { --hero-accent-hi: #b85d61; --hero-ring: rgba(143, 67, 72, .18); }
.sf-squad-bulwark { --hero-accent-hi: #bea45f; --hero-ring: rgba(145, 117, 66, .18); }
.sf-squad-kaiza { --hero-accent-hi: #9372a7; --hero-ring: rgba(101, 75, 116, .18); }
.sf-squad-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-bottom: 3px solid #6bb475;
  background: linear-gradient(90deg, rgba(91, 231, 255, .08), transparent 32%, rgba(216, 184, 109, .05));
}
.sf-squad-card.is-selected {
  border-color: var(--hero-accent-hi);
  box-shadow: inset 0 0 0 1px var(--hero-ring), inset 2px 0 var(--hero-accent-hi), 0 0 9px var(--hero-ring);
}
.sf-squad-card.is-selected::after { border-bottom-color: #79bd7b; }
.sf-squad-art { width: 100%; height: calc(100% - 22%); object-fit: cover; object-position: 50% 28%; transform: scale(1.02); transform-origin: center top; }
.sf-squad-kaiza .sf-squad-art { object-position: 50% 30%; transform: scale(.92); }
.sf-squad-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 68%, rgba(3, 7, 10, .08) 79%, rgba(3, 7, 10, .72) 96%);
}
.sf-squad-identity { position: absolute; z-index: 2; left: 0; right: 0; bottom: 2.2%; display: flex; align-items: center; justify-content: center; height: 22%; border-top: 1px solid var(--hero-accent-hi); background: linear-gradient(180deg, rgba(12, 31, 43, .98), rgba(4, 14, 21, .99)); text-align: center; }
.sf-squad-index, .sf-squad-role { display: none; }
.sf-squad-name { font-family: "SigilFront Display", "Arial Narrow", sans-serif; font-size: clamp(.58rem, 2.5cqw, 1.36rem); font-weight: 700; letter-spacing: .14em; line-height: 1; text-shadow: 0 0 4px rgba(177, 229, 255, .32), 0 2px 4px #000; }
.sf-squad-vitals { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; width: 100%; text-align: right; }
.sf-squad-hp { display: none; }
.sf-squad-reserve { position: absolute; z-index: 3; top: 5%; left: 4%; width: min(2cqw, 17px); aspect-ratio: 1; overflow: hidden; transform: rotate(45deg); border: 1px solid #46545a; background: rgba(7, 13, 17, .82); color: transparent; font-size: 0; }
.sf-squad-reserve.is-loaded { border-color: #7fd6e8; background: #2d849d; box-shadow: 0 0 7px rgba(85, 207, 232, .42); }
.sf-squad-card.is-activated:not(.is-active) { filter: saturate(.58) brightness(.68); }
.sf-squad-card.is-active { box-shadow: inset 0 0 0 2px #8ee8f4, 0 0 12px rgba(83, 210, 232, .45); }
.sf-hud-health { position: relative; height: 7px; overflow: hidden; border: 1px solid rgba(139, 169, 164, .22); background: #101713; transform: none; }
.sf-hud-health-fill { display: block; width: var(--health); height: 100%; background: linear-gradient(90deg, #397f4a, #63a15a); box-shadow: inset 0 1px rgba(190, 220, 181, .11); }
.sf-hud-health.is-compact { height: clamp(2px, .46cqw, 4px); border-radius: 999px; transform: none; }

/* Battlefield */
.sf-battlefield-region {
  z-index: 1;
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(4, 9, 10, .1), rgba(4, 9, 10, .2)),
    radial-gradient(ellipse at center, rgba(85, 99, 75, .68), rgba(28, 40, 32, .9) 64%, #0a1011 100%);
}
.sf-battlefield-frame { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; }
.sf-board-camera { position: relative; width: var(--board-side); height: var(--board-side); filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .48)); }
.sf-board {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-template-rows: repeat(9, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #454a42;
  background:
    radial-gradient(72% 48% at 50% 8%, rgba(153, 145, 112, .048), transparent 70%),
    radial-gradient(60% 42% at 52% 108%, rgba(3, 7, 6, .56), transparent 72%),
    linear-gradient(118deg, transparent 0 37%, rgba(158, 149, 108, .014) 38%, transparent 39% 67%, rgba(0, 0, 0, .075) 68%, transparent 69%),
    linear-gradient(145deg, #2b312d 0%, #232824 48%, #1c211f 100%);
  box-shadow: inset 0 0 0 1px rgba(184, 176, 140, .06), inset 0 0 46px rgba(0, 0, 0, .58), inset 0 12px 28px rgba(181, 164, 110, .016), 0 9px 12px rgba(0, 0, 0, .72);
}
.sf-board::before {
  content: none;
}
.sf-tile {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  border: 0;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .011), transparent 34%, rgba(0, 0, 0, .032) 100%),
    radial-gradient(ellipse at 74% 23%, rgba(156, 147, 111, .013), transparent 43%);
  box-shadow: inset 0 0 0 .7px rgba(151, 164, 148, .072), inset 1px 1px 0 rgba(230, 225, 198, .012), inset -1px -1px 0 rgba(0, 0, 0, .19);
}
.sf-tile-inset { display: none; position: absolute; pointer-events: none; }
.sf-tile:nth-child(5n + 1) { background: linear-gradient(90deg, transparent 0 16%, rgba(165, 156, 118, .013) 17%, transparent 18% 82%, rgba(0, 0, 0, .03) 83%, transparent 84%), linear-gradient(145deg, rgba(255, 255, 255, .01), transparent 38%, rgba(0, 0, 0, .036)); }
.sf-tile:nth-child(8n + 3) { background: radial-gradient(circle at 27% 72%, rgba(4, 7, 6, .08) 0 2%, transparent 15%), linear-gradient(145deg, rgba(255, 255, 255, .012), transparent 45%, rgba(0, 0, 0, .03)); }
.sf-tile.is-occupied::after { content: ""; position: absolute; z-index: 11; inset: 6%; pointer-events: none; border: clamp(1px, .2cqw, 2px) solid; border-radius: 3px; }
.sf-tile.is-occupied-player::after { border-color: #327f98; box-shadow: inset 0 0 7px rgba(50, 127, 152, .1), 0 0 5px rgba(50, 127, 152, .18); }
.sf-tile.is-occupied-ai::after { border-color: #a94f58; box-shadow: inset 0 0 7px rgba(169, 79, 88, .09), 0 0 5px rgba(169, 79, 88, .17); }
.sf-veil-field {
  background:
    linear-gradient(90deg, transparent 48%, rgba(80, 119, 128, .065) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(80, 119, 128, .055) 49% 51%, transparent 52%),
    linear-gradient(145deg, #1b2529, #111b1f 56%, #0a1215);
  box-shadow: inset 0 0 0 1px rgba(85, 123, 131, .2), inset 0 0 11px rgba(31, 72, 80, .085), inset 2px 2px 0 rgba(184, 213, 215, .025), inset -2px -2px 0 rgba(0, 0, 0, .56);
}
.sf-veil-field .sf-tile-inset {
  display: block;
  inset: 2%;
  border: 1px solid rgba(84, 132, 141, .3);
  background:
    radial-gradient(circle at 11% 11%, #91b8ba 0 2%, #416f76 2.7% 4.8%, #0e191d 5.6% 8%, transparent 8.8%),
    radial-gradient(circle at 89% 11%, #91b8ba 0 2%, #416f76 2.7% 4.8%, #0e191d 5.6% 8%, transparent 8.8%),
    radial-gradient(circle at 11% 89%, #91b8ba 0 2%, #416f76 2.7% 4.8%, #0e191d 5.6% 8%, transparent 8.8%),
    radial-gradient(circle at 89% 89%, #91b8ba 0 2%, #416f76 2.7% 4.8%, #0e191d 5.6% 8%, transparent 8.8%),
    repeating-linear-gradient(0deg, rgba(94, 158, 166, .027) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #1a272b, #0e1a1e 55%, #081014);
  box-shadow: inset 0 0 0 1px rgba(189, 219, 219, .025), inset 0 0 11px rgba(47, 121, 132, .055), 0 2px 3px rgba(0, 0, 0, .6);
}
.sf-veil-field .sf-tile-inset::before { content: ""; position: absolute; inset: 13%; border: 1px solid rgba(82, 145, 154, .17); background: repeating-linear-gradient(90deg, transparent 0 11%, rgba(72, 147, 157, .04) 12% 13%, transparent 14% 25%), repeating-linear-gradient(0deg, transparent 0 15%, rgba(122, 177, 182, .033) 16% 17%, transparent 18% 31%), radial-gradient(circle at center, rgba(69, 137, 146, .075), rgba(25, 65, 73, .035) 45%, transparent 72%); box-shadow: 0 0 5px rgba(61, 132, 142, .055), inset 0 0 6px rgba(61, 132, 142, .05); opacity: .5; }
.sf-veil-field > .sf-veil-glyph { position: absolute; z-index: 7; width: 42%; height: 42%; top: 29%; left: 29%; color: #53858b; opacity: .54; filter: drop-shadow(0 0 2px rgba(70, 132, 140, .09)); }
.sf-veil-glyph .sf-icon-eye { fill: rgba(17, 37, 41, .45); stroke: currentColor; stroke-width: 1.7; }
.sf-veil-glyph .sf-icon-pupil { fill: currentColor; }
.sf-veil-glyph .sf-icon-slash { fill: none; stroke: rgba(112, 168, 174, .58); stroke-width: 2.2; stroke-linecap: square; }

.sf-move-marker { position: absolute; z-index: 6; left: 50%; top: 50%; width: 31%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(73, 150, 166, .76); box-shadow: 0 0 6px rgba(65, 155, 174, .1); pointer-events: none; }

.sf-well { --well-fill: #b36d89; position: absolute; z-index: 8; inset: 2%; display: grid; place-items: center; }
.sf-well[data-pickup="aegis"] { --well-fill: #938047; }
.sf-well[data-pickup="disrupt"] { --well-fill: #784d83; }
.sf-well[data-pickup="tempo"] { --well-fill: #58747c; }
.sf-well-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: clamp(2px, .42cqw, 4px) solid #686d66;
  background: linear-gradient(135deg, #60645e 0 8%, #3e433f 8% 18%, #565b56 18% 29%, #363b38 29% 43%, #595d57 43% 56%, #393f3a 56% 70%, #545851 70% 84%, #343935 84%), #444a45;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, .12), inset 0 -4px 5px rgba(0, 0, 0, .78), 0 3px 5px rgba(0, 0, 0, .72);
}
.sf-well-frame::before { content: ""; position: absolute; z-index: 0; inset: 7%; border: 2px solid #232927; background: var(--well-fill); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .61), inset 0 -1px 2px rgba(255, 255, 255, .1), 0 0 0 1px rgba(126, 130, 122, .22); }
.sf-well-frame::after { content: ""; position: absolute; z-index: 1; inset: 1%; border: 1px solid rgba(178, 176, 158, .09); }
.sf-well.is-ready .sf-well-frame { filter: brightness(.92) saturate(.74); }
.sf-well-glyph { position: relative; z-index: 3; width: 58%; height: 58%; fill: #202628; color: #202628; filter: drop-shadow(0 1px rgba(255, 255, 255, .07)); }
.sf-well-glyph[data-symbol="broken-signal"] { width: 70%; height: 70%; fill: none; stroke: #202628; stroke-width: 5.5; stroke-linecap: square; stroke-linejoin: bevel; }
.sf-well-glyph[data-symbol="action-diamond"] { width: 50%; height: 50%; }

.sf-base {
  --base-accent: #59bed8;
  position: absolute;
  z-index: 7;
  inset: -6% -7% -2%;
  overflow: visible;
  clip-path: polygon(5% 20%, 18% 20%, 18% 8%, 36% 8%, 42% 0, 58% 0, 64% 8%, 82% 8%, 82% 20%, 95% 20%, 100% 42%, 95% 100%, 5% 100%, 0 42%);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .275) 0 7%, transparent 8% 48%, rgba(5, 8, 7, .52) 49% 56%, transparent 57%),
    linear-gradient(90deg, color-mix(in srgb, var(--base-accent) 35%, #121a1a) 0 8%, color-mix(in srgb, var(--base-accent) 48%, #68716a) 9% 16%, color-mix(in srgb, var(--base-accent) 24%, #303936) 17% 83%, color-mix(in srgb, var(--base-accent) 48%, #68716a) 84% 91%, color-mix(in srgb, var(--base-accent) 35%, #121a1a) 92%),
    linear-gradient(180deg, color-mix(in srgb, var(--base-accent) 38%, #737d77), color-mix(in srgb, var(--base-accent) 28%, #29322f) 68%, #101615);
  box-shadow: inset 0 2px 1px rgba(232, 239, 227, .48), inset 0 -8px 9px rgba(0, 0, 0, .93), 0 5px 7px rgba(0, 0, 0, .93), 0 0 0 2px color-mix(in srgb, var(--base-accent) 72%, #c9d0ca), 0 0 13px color-mix(in srgb, var(--base-accent) 42%, transparent);
  filter: brightness(1.05) saturate(.86) contrast(1.03);
}
.sf-base-ai { --base-accent: #d05c62; }
.sf-base::before { content: ""; position: absolute; left: 50%; top: 3%; z-index: 1; width: 43%; height: 69%; transform: translateX(-50%); clip-path: polygon(13% 18%, 27% 18%, 27% 5%, 42% 5%, 50% 0, 58% 5%, 73% 5%, 73% 18%, 87% 18%, 96% 40%, 88% 100%, 12% 100%, 4% 40%); background: linear-gradient(90deg, transparent 0 19%, rgba(13, 19, 17, .66) 20% 24%, transparent 25% 75%, rgba(13, 19, 17, .66) 76% 80%, transparent 81%), linear-gradient(150deg, color-mix(in srgb, var(--base-accent) 36%, #b0b7aa) 0 8%, color-mix(in srgb, var(--base-accent) 33%, #5d6760) 9% 43%, color-mix(in srgb, var(--base-accent) 25%, #323c38) 44% 72%, #151c1a 73%); box-shadow: inset 0 2px rgba(244, 243, 220, .55), inset 0 -5px 6px rgba(0, 0, 0, .8), 0 3px 4px rgba(0, 0, 0, .87); }
.sf-base::after { content: ""; position: absolute; left: 50%; top: 5%; z-index: 7; width: 13%; aspect-ratio: 1; transform: translateX(-50%); border: 1px solid color-mix(in srgb, var(--base-accent) 48%, #88928e); border-radius: 50%; background: radial-gradient(circle at 38% 33%, rgba(255, 255, 255, .33) 0 7%, transparent 9%), radial-gradient(circle, color-mix(in srgb, var(--base-accent) 42%, #43504c) 0 35%, #1a2220 38% 68%, #080c0b 71%); box-shadow: inset 0 1px rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .87); opacity: .72; }
.sf-base-wings { position: absolute; left: 7%; right: 7%; bottom: 26%; z-index: 2; display: grid; grid-template-columns: 28% 1fr 28%; align-items: end; gap: 7%; height: 50%; }
.sf-base-wings i, .sf-base-wings b { display: block; height: 73%; clip-path: polygon(0 18%, 20% 18%, 20% 0, 46% 0, 46% 18%, 78% 18%, 100% 42%, 91% 100%, 9% 100%, 0 42%); background: linear-gradient(150deg, color-mix(in srgb, var(--base-accent) 38%, #89918a), color-mix(in srgb, var(--base-accent) 28%, #3c4642) 48%, #171e1c); box-shadow: inset 0 1px rgba(255, 255, 255, .4), inset 0 0 0 1px color-mix(in srgb, var(--base-accent) 42%, transparent); }
.sf-base-wings b { height: 44%; clip-path: polygon(8% 18%, 33% 18%, 33% 0, 67% 0, 67% 18%, 92% 18%, 100% 100%, 0 100%); }
.sf-base-health { position: absolute; left: 17%; right: 17%; bottom: 14px; z-index: 8; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; height: 4px; border: 1px solid #090d0c; background: rgba(7, 11, 10, .86); }
.sf-base-health i { position: relative; overflow: hidden; background: #171d1b; }
.sf-base-health i b { position: absolute; inset: 0 auto 0 0; width: var(--segment-health); background: linear-gradient(90deg, color-mix(in srgb, var(--base-accent) 35%, #303a36), color-mix(in srgb, var(--base-accent) 72%, #75817c)); }
.sf-base-health i.is-deleted { visibility: hidden; }
.sf-base-value { position: absolute; left: 50%; bottom: 0; z-index: 8; display: flex; align-items: center; gap: 3px; width: max-content; padding: 2px 5px; transform: translateX(-50%); border-top: 1px solid color-mix(in srgb, var(--base-accent) 52%, #aeb8b2); background: linear-gradient(180deg, color-mix(in srgb, var(--base-accent) 13%, #222a28), #090d0c); color: color-mix(in srgb, var(--base-accent) 37%, #dce3df); font-size: clamp(.3rem, .86cqw, .52rem); font-weight: 750; letter-spacing: .08em; white-space: nowrap; }

.sf-health { position: relative; height: clamp(2px, .46cqw, 4px); overflow: hidden; border: 1px solid rgba(168, 201, 169, .28); border-radius: 999px; background: #101610; box-shadow: 0 1px 2px rgba(0, 0, 0, .72); }
.sf-health-fill { display: block; width: var(--health); height: 100%; }
.sf-health-player .sf-health-fill,
.sf-health-ai .sf-health-fill { background: linear-gradient(90deg, #4a9055, #6eaa62); box-shadow: 0 0 3px rgba(80, 152, 92, .22); }
.sf-unit-health-row { display: flex; align-items: center; gap: clamp(3px, .65cqw, 6px); min-width: 0; }
.sf-unit-health-row > .sf-health { flex: 1 1 auto; min-width: 0; }
.sf-ultimate-ready { flex: 0 0 auto; display: block; width: clamp(5px, 1.18cqw, 10px); aspect-ratio: 1; transform: rotate(45deg); border: 1px solid #d2a9ec; background: linear-gradient(135deg, #c88be8, #744e91); box-shadow: 0 0 6px rgba(177, 108, 216, .48); }

.sf-unit { position: absolute; z-index: 12; inset: -100% -25% 0; margin: 0; display: flex; justify-content: center; align-items: flex-end; overflow: visible; transform-origin: center bottom; pointer-events: none; }
.sf-unit.is-selected { transform: translateY(-4%) scale(1.05); }
.sf-unit::before { content: ""; position: absolute; z-index: -1; left: 23%; right: 23%; bottom: 5%; height: 17%; border-radius: 50%; background: rgba(0, 0, 0, .52); filter: blur(3px); }
.sf-unit-art { --sf-art-scale: 1; position: absolute; z-index: 2; left: 50%; top: 4.6875%; width: auto; height: 100%; max-width: none; aspect-ratio: 3 / 4; object-fit: contain; object-position: center bottom; transform: translateX(-50%) scale(var(--sf-art-scale)); transform-origin: 50% 95.3125%; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .7)); }
.sf-unit[data-hero="Scout"] .sf-unit-art { --sf-art-scale: .68; }
.sf-unit[data-hero="Kaiza"] .sf-unit-art { --sf-art-scale: .74; }
.sf-unit[data-hero="Mortar"] .sf-unit-art { --sf-art-scale: .82; }
.sf-unit[data-hero="Bulwark"] .sf-unit-art { --sf-art-scale: 1.03; }
.sf-unit.is-crouched .sf-unit-art { scale: .88; }
.sf-unit[data-hero="Mortar"].is-crouched .sf-unit-art { scale: 1; }
.sf-unit[data-hero="Kaiza"].is-crouched .sf-unit-art { scale: .96; }
.sf-unit[data-hero="Bulwark"].is-crouched .sf-unit-art { scale: .8; }
.sf-unit.is-concealed .sf-unit-art { opacity: .58; filter: brightness(1.18) contrast(1.035) saturate(1.06) drop-shadow(0 0 4px rgba(51, 226, 239, .72)) drop-shadow(0 0 8px rgba(28, 160, 178, .42)); }
.sf-unit-overhead { position: absolute; z-index: 20; top: 8.5%; left: 17%; right: 17%; padding: 0; background: transparent; }
.sf-unit[data-hero="Bulwark"] .sf-unit-overhead { top: 5%; }
.sf-unit[data-hero="Kaiza"] .sf-unit-overhead { top: 9.6%; }
.sf-unit[data-hero="Scout"] .sf-unit-overhead { top: 9.8%; }
.sf-unit-title-row { display: none; }
.sf-unit-name { display: none; }
.sf-unit-guard { color: #7cd8ff; font-size: clamp(.27rem, .72cqw, .54rem); font-weight: 900; }
.sf-unit-veil { position: absolute; z-index: 21; left: 9%; top: 20%; width: 20%; aspect-ratio: 1; color: var(--cyan); }
.sf-unit-veil .sf-veil-glyph { width: 100%; height: 100%; }

/* Effective-final wall presentation: CSS edge geometry from emberway-map,
   with the later v15 material/HP override and the two-block compact meter. */
.sf-wall { position: absolute; z-index: 24; display: grid; place-items: center; overflow: hidden; border: 0; border-radius: 1px; background: linear-gradient(180deg, #b9b19f 0 9%, #857a67 10% 27%, #5b5346 28% 70%, #34312a 71% 100%); box-shadow: inset 0 1px #ffffff72, inset 0 -2px #17130e, 0 3px 5px #000b; filter: brightness(.98) saturate(.82) contrast(1.05); }
.sf-wall::before { content: ""; position: absolute; inset: 1px; opacity: .52; background: repeating-linear-gradient(90deg, transparent 0 24%, #28261f 24% 26%, #91877533 26% 27%, transparent 27% 50%); }
.sf-wall::after { content: ""; position: absolute; inset: 0; border-left: 4px solid #5d5648; border-right: 4px solid #5d5648; box-shadow: inset 1px 0 #aca18b33, inset -1px 0 #24221d; }
.sf-wall-h { left: calc(var(--wall-column) * 100% / 9); top: calc(var(--wall-row) * 100% / 9); width: calc(100% / 9); height: max(7px, 1.222222%); transform: translateY(-50%); }
.sf-wall-v { left: calc(var(--wall-column) * 100% / 9); top: calc(var(--wall-row) * 100% / 9); width: max(7px, 1.222222%); height: calc(100% / 9); transform: translateX(-50%); background: linear-gradient(90deg, #b9b19f 0 9%, #857a67 10% 27%, #5b5346 28% 70%, #34312a 71% 100%); }
.sf-wall-v::before { background: repeating-linear-gradient(180deg, transparent 0 24%, #28261f 24% 26%, #91877533 26% 27%, transparent 27% 50%); }
.sf-wall-v::after { border: 0; border-top: 4px solid #5d5648; border-bottom: 4px solid #5d5648; box-shadow: inset 0 1px #aca18b33, inset 0 -1px #24221d; }
.sf-wall-hp { position: relative; z-index: 28; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; justify-items: stretch; gap: 1px; width: 68%; height: 68%; min-height: 5px; padding: 1px; overflow: hidden; border: 1px solid #071016; border-radius: 1px; background: #101a20; box-shadow: inset 0 1px #ffffff24, 0 0 3px #000; }
.sf-wall-v .sf-wall-hp { grid-template-columns: 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); width: 68%; min-width: 5px; height: 68%; min-height: 0; }
.sf-wall-hp i { --segment-health: 0%; position: relative; display: block; min-width: 0; min-height: 0; overflow: hidden; border: 0; border-radius: 2px; background: #26323a; box-shadow: inset 0 0 0 1px #46545c; }
.sf-wall-hp i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--segment-health); background: linear-gradient(180deg, #94dcff, #3d9bd1 55%, #226891); box-shadow: inset 0 1px #effbffcc, inset 0 0 0 1px #66bde7, 0 0 4px #5cc6ff99; }
.sf-wall-v .sf-wall-hp i::before { inset: auto 0 0; width: auto; height: var(--segment-health); }

/* Command HUD */
.sf-command-region { z-index: 3; overflow: hidden; border-top: 2px solid rgba(78, 153, 174, .24); background: linear-gradient(180deg, rgba(7, 16, 22, .995), rgba(3, 8, 11, .995)); box-shadow: 0 -7px 15px rgba(0, 0, 0, .45); }
.sf-command-panel { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 24% 40.5% 10.8% 24.7%; height: 100%; min-height: 0; overflow: hidden; font-family: var(--sf-command-font); }
.sf-command-panel::after { content: ""; position: absolute; right: 5px; bottom: 5px; z-index: 8; width: 24px; height: 8px; pointer-events: none; border-right: 2px solid #72451f; border-bottom: 2px solid #72451f; opacity: .46; }
.sf-command-top { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 46%) minmax(0, 20%); min-width: 0; padding: 2% 1.8% 2.4%; border-bottom: 1px solid rgba(103, 141, 151, .24); }
.sf-focus-panel { position: relative; display: grid; grid-template-columns: 29% minmax(0, 1fr); grid-template-rows: 1fr; min-height: 0; overflow: hidden; background: linear-gradient(110deg, rgba(9, 19, 25, .96), rgba(4, 9, 12, .96)); }
.sf-focus-portrait { position: relative; grid-row: 1; min-width: 0; overflow: hidden; border-right: 1px solid rgba(216, 184, 109, .4); }
.sf-focus-art { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.sf-focus-identity { align-self: stretch; display: grid; align-content: center; min-width: 0; padding: .35cqw 1.25cqw .2cqw 1.45cqw; }
.sf-focus-kicker { display: none; }
.sf-focus-name { position: relative; top: -.18cqw; margin: 0 0 .72cqw; font-family: var(--sf-command-font); font-size: clamp(.72rem, 2.85cqw, 1.58rem); font-weight: 650; letter-spacing: .085em; line-height: 1; }
.sf-action-state { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; min-width: 0; overflow: hidden; padding: .35cqw 2.2cqw; border-left: 1px solid rgba(88, 127, 136, .24); background: linear-gradient(110deg, rgba(5, 12, 17, .95), rgba(3, 8, 11, .98)); }
.sf-action-state-label { color: #99aeb4; font-size: clamp(.42rem, 1.58cqw, .86rem); font-weight: 650; letter-spacing: .1em; }
.sf-action-diamonds { display: flex; justify-content: center; align-items: center; gap: 2.7cqw; min-width: 0; }
.sf-action-diamond { display: block; width: min(3.35cqw, 29px); aspect-ratio: 1; transform: rotate(45deg); border: 1px solid #56686e; background: #131e23; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .52); }
.sf-action-diamond.is-filled { border-color: #b9d0d5; background: linear-gradient(135deg, #d5e5e6, #8fa8ae); box-shadow: 0 0 4px rgba(160, 205, 212, .28); }
.sf-action-diamond.is-reserve { border-color: #8b65a5; background: #1d1326; }
.sf-action-diamond.is-reserve.is-filled { border-color: #d2a9ec; background: linear-gradient(135deg, #c88be8, #744e91); box-shadow: 0 0 6px rgba(177, 108, 216, .42); }
.sf-action-diamond.is-unused { display: none; }
.sf-round-state { display: grid; grid-template-columns: 1fr; place-content: center; justify-items: center; min-width: 0; overflow: hidden; border-left: 1px solid rgba(88, 127, 136, .24); background: linear-gradient(110deg, rgba(5, 12, 17, .96), rgba(3, 8, 11, .99)); }
.sf-round-state-label { color: #899da3; font-size: clamp(.36rem, 1.25cqw, .68rem); font-weight: 650; letter-spacing: .12em; }
.sf-round-state-value { margin-top: .12em; color: #c9dce0; font-size: clamp(.76rem, 2.55cqw, 1.38rem); font-weight: 750; letter-spacing: .06em; line-height: 1; text-shadow: 0 0 7px rgba(115, 190, 207, .18); }
.sf-focus-hp-line { position: relative; top: 0; display: grid; align-items: center; width: 100%; margin-top: .15cqw; }
.sf-focus-hp-line .sf-hud-health { height: min(2.1cqw, 18px); border-radius: 0; clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); transform: none; }
.sf-focus-hp { position: absolute; left: 50%; transform: translateX(-50%); color: #e2e9e1; font-size: clamp(.34rem, 1.28cqw, .7rem); font-weight: 700; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.sf-formation-focus { grid-column: 1 / -1; grid-template-columns: 1fr; place-items: center; background: transparent; }
.sf-formation-title { margin: 0; color: #f1f1ec; font-size: clamp(.82rem, 3.2cqw, 1.75rem); font-weight: 900; letter-spacing: .12em; line-height: 1.28; white-space: pre-line; }
.sf-status-rail { grid-column: 3; display: flex; align-items: center; gap: 3px; padding: .35rem .5rem .35rem 0; overflow: hidden; }
.sf-status-marker { flex: 1; display: grid; grid-template-columns: 1fr; place-items: center; min-width: 0; padding: .2em .3em; border: 1px solid #34444a; background: rgba(7, 14, 18, .8); }
.sf-status-label { color: #8aa0a4; font-size: clamp(.3rem, .64cqw, .52rem); letter-spacing: .1em; }
.sf-status-value { overflow: hidden; font-size: clamp(.38rem, .76cqw, .62rem); text-overflow: ellipsis; white-space: nowrap; }
.sf-status-guard { border-color: rgba(91, 201, 255, .55); color: #83ddff; }
.sf-status-warning { border-color: rgba(238, 114, 94, .55); color: #f19480; }
.sf-status-ultimate { border-color: rgba(216, 184, 109, .58); color: #f1d183; }

.sf-action-dock { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 1.1cqw; padding: 1.4cqw 1.8cqw; min-width: 0; min-height: 0; }
.sf-action { position: relative; display: grid; align-content: center; justify-items: center; min-width: 0; min-height: 0; padding: .45rem .62rem; overflow: hidden; border: 1px solid #203139; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); text-align: center; color: #b3c1c6; background: linear-gradient(180deg, #0a171f, #060d12); box-shadow: inset 0 1px rgba(143, 179, 192, .025), inset 2px 0 rgba(47, 91, 108, .26), 0 3px 7px rgba(0, 0, 0, .5); opacity: 1; }
.sf-action:disabled { cursor: default; opacity: 1; }
.sf-action::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: min(.68cqw, 5px); background: #3c555d; }
.sf-action-basic { border-color: #27434d; background: linear-gradient(180deg, #0c2029, #06141a); box-shadow: inset 0 1px rgba(168, 201, 212, .035), inset 2px 0 #306072, 0 3px 7px rgba(0, 0, 0, .52); }
.sf-action-basic::after { background: #306072; }
.sf-action-ability { border-color: #403247; background: linear-gradient(180deg, #1a141f, #0c0910); box-shadow: inset 0 1px rgba(203, 184, 215, .025), inset 2px 0 #5a3e6c, 0 3px 7px rgba(0, 0, 0, .52); }
.sf-action-ability::after { background: #5a3e6c; }
.sf-action-ability { order: 1; }
.sf-action-basic { order: 2; }
.sf-action-ultimate { order: 3; grid-column: 1 / -1; }
.sf-action-ultimate { border-color: #42301c; background: linear-gradient(180deg, #1c140d, #0f0a06); box-shadow: inset 0 1px rgba(205, 183, 155, .03), inset 2px 0 #654127, 0 3px 7px rgba(0, 0, 0, .52); }
.sf-action-ultimate::after { background: #654127; box-shadow: 0 0 7px rgba(101, 65, 39, .14); }
.sf-action-label { margin: .14em 0; overflow: hidden; font-size: clamp(.55rem, 2.3cqw, 1.26rem); font-weight: 650; letter-spacing: .05em; text-overflow: ellipsis; white-space: nowrap; }
.sf-action-detail { color: #78898e; font-size: clamp(.31rem, 1.25cqw, .69rem); font-weight: 600; letter-spacing: .05em; line-height: 1.15; }
.sf-action-info { position: absolute; top: 13%; right: 4%; display: grid; place-items: center; width: min(3.35cqw, 29px); aspect-ratio: 1; border: 1px solid #3e494e; border-radius: 50%; color: #7c898d; font-size: clamp(.4rem, 1.4cqw, .76rem); font-weight: 700; }
.sf-command-panel.is-formation .sf-action { border-color: #202a2e; color: #4f5456; background: linear-gradient(145deg, #111719, #090d0f); }
.sf-command-panel.is-formation .sf-action::after { background: #30383b; box-shadow: none; }
.sf-command-panel.is-formation .sf-action-detail,
.sf-command-panel.is-formation .sf-action-info { color: #333b3e; border-color: #2d3639; }

.sf-message-strip { grid-column: 1; grid-row: 3; display: grid; align-items: center; min-width: 0; margin: 0 1.8cqw; border: 1px solid #16272f; border-left: min(.5cqw, 4px) solid #68401f; clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); background: linear-gradient(90deg, rgba(13, 9, 7, .96), rgba(4, 10, 14, .97) 24%); box-shadow: inset 0 1px rgba(255, 255, 255, .02); }
.sf-message-current { padding: 0 1.7cqw; overflow: hidden; color: #b5a981; font-size: clamp(.35rem, 1.4cqw, .77rem); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sf-message-history { display: flex; justify-content: flex-end; gap: 1.1rem; min-width: 0; padding: 0 .7rem; overflow: hidden; }
.sf-message-line { overflow: hidden; color: #7f9296; font-size: clamp(.35rem, .7cqw, .58rem); text-overflow: ellipsis; white-space: nowrap; }
.sf-command-footer { z-index: 5; grid-column: 1; grid-row: 4; display: flex; align-items: stretch; gap: .65rem; padding: 2.1cqw 1.8cqw 1.1cqw; pointer-events: none; }
.sf-command-hint { display: none; color: #647277; font-size: .48rem; letter-spacing: .1em; }
.sf-turn-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 1.2cqw; }
.sf-turn-control { min-width: 0; padding: .56em .9em; border: 1px solid #203037; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); color: #41494b; background: #080e11; font-size: clamp(.52rem, 2cqw, 1.1rem); font-weight: 650; letter-spacing: .06em; opacity: 1; }
.sf-turn-control:disabled { opacity: 1; }
.sf-turn-control-primary { border-color: #4c341f; color: #b99e80; background: linear-gradient(180deg, #23160e, #110a06); box-shadow: inset 0 1px rgba(196, 175, 150, .035), inset 2px 0 #69401f, 0 3px 8px rgba(0, 0, 0, .58); }
.sf-turn-control-quiet { border-color: #182328; color: #343c3f; background: linear-gradient(180deg, #091013, #060b0d); }

/* Desktop and landscape browsers host the unchanged portrait composition in
   one bounded surface. Short landscape-mobile windows retain access by
   scrolling this minimum surface instead of being blocked by orientation. */
@media (orientation: landscape) {
  body {
    display: grid;
    place-items: center;
    min-height: max(100dvh, 568.888889px);
    overflow-x: hidden;
    overflow-y: auto;
    background:
      radial-gradient(ellipse at 50% 45%, rgba(54, 104, 111, .2), transparent 34%),
      linear-gradient(135deg, #020407, #071014 50%, #020407);
  }
  #sigilfront-static-review,
  #sigilfront-play-vs-ai,
  #sigilfront-unified-client {
    --sf-surface-height: clamp(568.888889px, 100dvh, 1280px);
    width: clamp(320px, 56.25dvh, 720px);
    flex: none;
    box-shadow:
      0 0 0 1px rgba(118, 167, 176, .2),
      0 30px 90px rgba(0, 0, 0, .76),
      0 0 80px rgba(45, 98, 108, .1);
  }
}

@media (orientation: landscape) and (min-height: 569px) {
  body { height: 100dvh; min-height: 100dvh; overflow: hidden; }
}

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