/* Exact layered AAA hero stage from hero-player-card-v2.html
   (chrome tuner + page chrome stripped; tokens hosted on .hero-shell). */

.hero-shell {
      --page: #04060a;
      --ink: #f4f7f9;
      --muted: rgba(236, 242, 247, 0.42);
      --amber: #ff9d0a;
      --amber-hot: #ffc14b;
      --amber-rgb: 255, 157, 10;
      --atlas-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='252' height='252'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='252' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.34' stop-color='%23d2dde7'/%3E%3Cstop offset='.72' stop-color='%2393a3b1'/%3E%3Cstop offset='1' stop-color='%235d6b78'/%3E%3C/linearGradient%3E%3ClinearGradient id='m' x1='0' y1='0' x2='0' y2='252' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%239dacba'/%3E%3Cstop offset='.38' stop-color='%236a7784'/%3E%3Cstop offset='.75' stop-color='%23444f5b'/%3E%3Cstop offset='1' stop-color='%232c353f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill-rule='evenodd' fill='%2304070b' d='M0 0 168 0 252 84 252 252 84 252 0 168Z M3 3 166.76 3 249 85.24 249 249 85.24 249 3 166.76Z'/%3E%3Cpath fill-rule='evenodd' fill='url(%23c)' d='M3 3 166.76 3 249 85.24 249 249 85.24 249 3 166.76Z M9 9 164.27 9 243 87.73 243 243 87.73 243 9 164.27Z'/%3E%3Cpath fill-rule='evenodd' fill='url(%23m)' d='M9 9 164.27 9 243 87.73 243 243 87.73 243 9 164.27Z M27 27 156.82 27 225 95.18 225 225 95.18 225 27 156.82Z'/%3E%3Cpath fill-rule='evenodd' fill='%23070a0f' d='M27 27 156.82 27 225 95.18 225 225 95.18 225 27 156.82Z M30 30 155.57 30 222 96.43 222 222 96.43 222 30 155.57Z'/%3E%3Cg stroke-linecap='round' fill='none'%3E%3Cpath stroke='%23ffffff' stroke-opacity='.5' stroke-width='3' d='M176 16.49 220 60.49'/%3E%3Cpath stroke='%23ffffff' stroke-opacity='.28' stroke-width='3' d='M20 179.52 64 223.52'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='54' cy='15' r='5' fill='%2313191f'/%3E%3Ccircle cx='54' cy='13.6' r='5' fill='none' stroke='%23b6c4d1' stroke-opacity='.45' stroke-width='1.4'/%3E%3Ccircle cx='15' cy='54' r='5' fill='%2313191f'/%3E%3Ccircle cx='15' cy='52.6' r='5' fill='none' stroke='%23b6c4d1' stroke-opacity='.4' stroke-width='1.4'/%3E%3Ccircle cx='198' cy='237' r='5' fill='%230e1319'/%3E%3Ccircle cx='198' cy='235.6' r='5' fill='none' stroke='%238b98a5' stroke-opacity='.32' stroke-width='1.4'/%3E%3Ccircle cx='237' cy='198' r='5' fill='%230e1319'/%3E%3Ccircle cx='237' cy='196.6' r='5' fill='none' stroke='%238b98a5' stroke-opacity='.32' stroke-width='1.4'/%3E%3C/g%3E%3C/svg%3E");
      --atlas-panel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='252' height='252'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='252' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23f2f8fc'/%3E%3Cstop offset='.4' stop-color='%23c2cfdb'/%3E%3Cstop offset='1' stop-color='%23616f7c'/%3E%3C/linearGradient%3E%3ClinearGradient id='m' x1='0' y1='0' x2='0' y2='252' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2392a1af'/%3E%3Cstop offset='.42' stop-color='%23616e7b'/%3E%3Cstop offset='1' stop-color='%232a333d'/%3E%3C/linearGradient%3E%3ClinearGradient id='p' x1='0' y1='0' x2='0' y2='252' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%231b222b'/%3E%3Cstop offset='1' stop-color='%23121820'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23p)' d='M95.18 27 225 27 225 156.82 156.82 225 27 225 27 95.18Z'/%3E%3Cpath fill-rule='evenodd' fill='%2304070b' d='M84 0 252 0 252 168 168 252 0 252 0 84Z M85.24 3 249 3 249 166.76 166.76 249 3 249 3 85.24Z'/%3E%3Cpath fill-rule='evenodd' fill='url(%23c)' d='M85.24 3 249 3 249 166.76 166.76 249 3 249 3 85.24Z M87.73 9 243 9 243 164.27 164.27 243 9 243 9 87.73Z'/%3E%3Cpath fill-rule='evenodd' fill='url(%23m)' d='M87.73 9 243 9 243 164.27 164.27 243 9 243 9 87.73Z M95.18 27 225 27 225 156.82 156.82 225 27 225 27 95.18Z'/%3E%3Cpath fill-rule='evenodd' fill='%23080b10' d='M95.18 27 225 27 225 156.82 156.82 225 27 225 27 95.18Z M96.43 30 222 30 222 155.57 155.57 222 30 222 30 96.43Z'/%3E%3Cg stroke-linecap='round' fill='none'%3E%3Cpath stroke='%23ffffff' stroke-opacity='.5' stroke-width='3' d='M20 72.49 60 32.49'/%3E%3Cpath stroke='%23ffffff' stroke-opacity='.22' stroke-width='3' d='M192 219.51 232 179.51'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── PREVIEW ───────────────────────────────────────────────── */
    .hero-preview {
      width: clamp(420px, 48vw, 720px);
      height: calc(100vh - 120px);
      min-height: calc(100vh - 120px);
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      animation: stage-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @supports (width: round(down, 50%, 1px)) {
      .hero-preview {
        width: round(down, clamp(420px, 48vw, 720px), 1px);
      }
    }

    @keyframes stage-in {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: none; }
    }

    /* ── SHELL (token host — no chrome, no filter, no GL) ─────── */
    .hero-shell {
      --stage-frame: 30px;
      --panel-scale: 0.45;
      --dock-nudge: 2px;
      --rail: calc(var(--stage-frame) * 30 / 84);
      --chamfer-aperture: calc(var(--stage-frame) - var(--rail) * 0.5858);

      position: relative;
      flex: 1;
      min-height: 0;
    }

    /* ── L1 VIEWPORT ─────────────────────────────────────────────
       Sized to painted steel inner face. WebGL lives only here. */
    .hero-viewport {
      position: absolute;
      inset: var(--rail);
      z-index: 1;
      overflow: hidden;
      clip-path: polygon(
        0 0,
        calc(100% - var(--chamfer-aperture)) 0,
        100% var(--chamfer-aperture),
        100% 100%,
        var(--chamfer-aperture) 100%,
        0 calc(100% - var(--chamfer-aperture))
      );
      background: #06080c;
    }

    .stage-fill {
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
        radial-gradient(ellipse 58% 28% at 50% 92%, rgba(var(--amber-rgb), 0.14), transparent 70%),
        radial-gradient(ellipse 40% 30% at 18% 20%, rgba(140, 170, 200, 0.05), transparent 55%),
        linear-gradient(180deg, #171c24 0%, #0c1016 52%, #06080c 100%);
    }

    .hero-canvas {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: block;
      width: 100%;
      height: 100%;
      touch-action: none;
      cursor: grab;
    }

    .hero-canvas:active { cursor: grabbing; }

    .stage-floor {
      position: absolute;
      left: 12%;
      right: 12%;
      bottom: 6%;
      height: 18%;
      z-index: 2;
      pointer-events: none;
      background: radial-gradient(ellipse 55% 55% at 50% 50%, rgba(var(--amber-rgb), 0.16), transparent 72%);
      filter: blur(2px);
      opacity: 0.85;
      animation: floor-pulse 4.8s ease-in-out infinite;
    }

    @keyframes floor-pulse {
      0%, 100% { opacity: 0.7; transform: scaleX(1); }
      50% { opacity: 0.95; transform: scaleX(1.03); }
    }

    .hero-vignette {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background:
        radial-gradient(ellipse 70% 58% at 50% 44%, transparent 28%, rgba(0, 0, 0, 0.58) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, transparent 22%, transparent 68%, rgba(0, 0, 0, 0.35) 100%);
    }

    .hero-status {
      position: absolute;
      inset: 0;
      z-index: 4;
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 16px;
      color: var(--muted);
      background: rgba(5, 7, 10, 0.52);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      pointer-events: none;
    }

    .hero-status[hidden] { display: none; }

    .hero-status__mark {
      width: 22px;
      height: 22px;
      border: 2px solid rgba(var(--amber-rgb), 0.22);
      border-top-color: var(--amber);
      border-radius: 50%;
      animation: spin 0.9s linear infinite;
    }

    .hero-status--error .hero-status__mark {
      border-color: rgba(255, 255, 255, 0.22);
      border-radius: 0;
      animation: none;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    /* Honest load/fallback markers — [hidden] owns concealment (S5). */
    #lobby-hero-loading[hidden],
    #lobby-hero-fallback[hidden] { display: none; }

    /* Arena mount hides the CSS floor/vignette so WebGL owns the stage. */
    .hero-shell--arena .stage-floor,
    .hero-shell--arena .hero-vignette {
      display: none;
    }

    .hero-shell--arena .hero-canvas {
      cursor: default;
    }

    /* ── L2 CHROME ───────────────────────────────────────────────
       Overlay only. Never the WebGL containing block. */
    .hero-chrome {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      border: var(--stage-frame) solid transparent;
      border-image-source: var(--atlas-frame);
      border-image-slice: 84;
      border-image-width: var(--stage-frame);
      border-image-repeat: stretch;
      filter:
        drop-shadow(0 1px 0 rgba(220, 232, 242, 0.08))
        drop-shadow(0 22px 48px rgba(0, 0, 0, 0.72));
    }

    /* ── L3 HUD ────────────────────────────────────────────────── */
    .hero-hud {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
    }

    .panel {
      --frame: calc(var(--stage-frame) * var(--panel-scale));
      position: absolute;
      display: flex;
      align-items: center;
      border-style: solid;
      border-color: transparent;
      border-image-source: var(--atlas-panel);
      border-image-slice: 84 fill;
      border-image-repeat: stretch;
      animation: panel-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
    }

    @keyframes panel-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* Dock to painted steel inner edge — same token as L1 inset */
    .panel--identity {
      top: calc(var(--rail) - var(--dock-nudge));
      left: calc(var(--rail) - var(--dock-nudge));
      width: min(348px, 80%);
      height: 90px;
      border-width: 0 var(--frame) var(--frame) 0;
      border-image-width: 0 var(--frame) var(--frame) 0;
      padding: 0 17px 0 15px;
      gap: 12px;
      filter: drop-shadow(4px 6px 12px rgba(0, 0, 0, 0.55));
    }

    /* Width follows the content: label + three marks, nothing else.
       space-between pins the label to the left inset and the marks to
       the right, so both alignments come from the panel itself rather
       than from an auto-margin dumping slack in the middle. Width is
       set so that break lands around 20px. */
    .panel--squad {
      right: calc(var(--rail) - var(--dock-nudge));
      bottom: calc(var(--rail) - var(--dock-nudge));
      width: 165px;
      height: 46px;
      border-width: var(--frame) 0 0 var(--frame);
      border-image-width: var(--frame) 0 0 var(--frame);
      padding: 0 15px 0 13px;
      justify-content: space-between;
      gap: 12px;
      filter: drop-shadow(-4px -5px 12px rgba(0, 0, 0, 0.5));
      animation-delay: 0.22s;
    }


    .camera-dock {
      position: absolute;
      left: 50%;
      bottom: calc(var(--rail) - var(--dock-nudge));
      transform: translateX(-50%);
      pointer-events: auto;
      animation: panel-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
    }

    .camera-dock__group {
      display: flex;
      align-items: center;
      gap: 14px;
      height: 28px;
      padding: 0;
      background: none;
      border: 0;
      box-shadow: none;
    }

    .camera-dock__btn {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: rgba(236, 242, 247, 0.34);
      cursor: pointer;
      transition: color 160ms ease;
    }

    .camera-dock__btn svg {
      display: block;
      width: 16px;
      height: 16px;
    }

    .camera-dock__btn:hover {
      color: rgba(236, 242, 247, 0.78);
    }

    .camera-dock__btn:focus-visible {
      outline: 1px solid rgba(var(--amber-rgb), 0.65);
      outline-offset: 3px;
      border-radius: 2px;
    }

    .camera-dock__btn.is-active {
      color: var(--amber-hot);
    }

    .camera-dock__btn.is-active:hover {
      color: #ffe0a8;
    }

    /* ── identity card ─────────────────────────────────────────────
       Live-lobby anatomy (insignia · level · name · XP).

       Hierarchy is carried by size, value and light — not by adding
       enclosures. The card already sits inside the L2 steel frame, so a
       second metal surround here would be the same material competing
       with itself. Amber appears as filled mass exactly twice — the XP
       bar and the level chip — and both are cut-corner containers, so
       they read as one family rather than two accents. */
    .idcard {
      flex: 1;
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr);
      align-items: start;
      gap: 12px;
      min-width: 0;
    }

    /* ── rank badge ────────────────────────────────────────────────
       Insignia only — no bloom / falloff seat behind it (that read as
       a muddy brown disc and killed badge readability).

       Sized so the rank column (badge + chip) leaves real air top and
       bottom inside the ~76px content box. At 46px the stack measures
       ~64px — enough headroom so the name stays level with the SVG top
       and the chip clears the meta line. */
    .idcard__rank {
      display: grid;
      justify-items: center;
      gap: 2px;
      min-width: 0;
    }

    .rank-badge {
      position: relative;
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
    }

    .rank-badge img,
    .panel--identity .rank-badge img.rank-insignia,
    .panel--identity .rank-badge img.rank-lobby {
      position: relative;
      display: block;
      width: 40px;
      height: 40px;
      object-fit: contain;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
      /* Defeat friends-list .rank-insignia plate if a legacy class leaks onto the hero img. */
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      padding: 0;
    }

    /* ── level chip ────────────────────────────────────────────────
       A small cut-corner tag under the insignia. The chamfers are on
       the top-left / bottom-right corners — the same corner language
       the panel atlas cuts — so the chip reads as house hardware and
       not as a stray pill.

       Two clipped layers, the same construction as the XP bar: a dark
       seat that reads as a 1px cut rim, and an amber face inset into
       it. The badge above stays edgeless — the chip carries the
       enclosure so the insignia never gets a metal surround.

       min-width holds the chip's footprint constant from LV 1 to LV 120
       so the rank column's silhouette never shifts between ranks. */
    .rank-level {
      position: relative;
      display: inline-flex;
      align-items: baseline;
      justify-content: center;
      min-width: 42px;
      margin: 0;
      padding: 2.5px 7px;
      font-family: "Saira Condensed", sans-serif;
      font-size: 11.5px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0.06em;
      white-space: nowrap;
      /* filter (not box-shadow) — a shadow inside the clip would be cut away */
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.62));
    }

    .rank-level::before,
    .rank-level::after {
      content: "";
      position: absolute;
      clip-path: polygon(
        var(--cut) 0,
        100% 0,
        100% calc(100% - var(--cut)),
        calc(100% - var(--cut)) 100%,
        0 100%,
        0 var(--cut)
      );
    }

    /* seat — the dark cut rim */
    .rank-level::before {
      --cut: 4px;
      inset: 0;
      background: rgba(4, 7, 11, 0.92);
    }

    /* face — amber, lit from the top edge */
    .rank-level::after {
      --cut: 3px;
      inset: 1px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 46%),
        linear-gradient(180deg, var(--amber-hot), var(--amber) 62%, #dd7f05);
    }


    .rank-level small,
    .rank-level .rank-level__label,
    .rank-level b {
      position: relative;
      z-index: 1;
    }

    .rank-level small,
    .rank-level .rank-level__label {
      margin-right: 3px;
      color: rgba(38, 18, 0, 0.62);
      font-size: 8.5px;
      font-weight: 800;
      letter-spacing: 0.14em;
    }

    .rank-level b {
      color: #231301;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      text-shadow: 0 1px 0 rgba(255, 219, 150, 0.4);
    }

    /* body ─ name over the XP bar, both flush to the same left edge

       Uneven row rhythm on purpose. A flat 4px gap made three equal
       tiers; the bar and its remaining-XP readout are one unit, so
       they sit tight (4px) and the name tier gets the wider break
       (7px). Proximity does the grouping — no rules, no dividers. */
    .idcard__body {
      display: grid;
      grid-template-rows: auto auto auto;
      row-gap: 4px;
      min-width: 0;
    }

    .idcard__name {
      /* +3px on top of the 4px row-gap = the 7px break under the name */
      margin: 0 0 3px;
      overflow: hidden;
      color: #fbfcfd;
      font-family: "Saira Condensed", sans-serif;
      font-size: 24px;
      font-weight: 700;
      line-height: 0.84;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.6),
        0 2px 14px rgba(0, 0, 0, 0.5);
    }

    /* ── XP bar ──────────────────────────────────────────────────
       .xp        1px steel rim, chamfered tail (nav / tab DNA)
       .xp__track inset core, clips the fill
       .xp__fill  amber + travelling stripes (live-game DNA)
       .xp__ticks 10 beveled segment notches, read over fill AND core */
    .xp {
      --xp: 27.09%;
      position: relative;
      height: 13px;
      min-width: 0;
      clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
      background: linear-gradient(
        180deg,
        rgba(214, 228, 240, 0.24),
        rgba(120, 136, 150, 0.09) 46%,
        rgba(198, 214, 228, 0.16)
      );
    }

    .xp__track {
      position: absolute;
      inset: 1px;
      overflow: hidden;
      clip-path: inherit;
      background: linear-gradient(180deg, #04070a, #0c1219);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9);
    }

    .xp__fill {
      position: relative;
      width: var(--xp);
      height: 100%;
      background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.04) 46%, rgba(0, 0, 0, 0.2)),
        linear-gradient(
          -45deg,
          rgba(255, 255, 255, 0.17) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.17) 50%,
          rgba(255, 255, 255, 0.17) 75%,
          transparent 75%,
          transparent
        ),
        linear-gradient(90deg, #b85f00, var(--amber) 56%, var(--amber-hot));
      background-size: 100% 100%, 12px 12px, 100% 100%;
      box-shadow: 0 0 12px rgba(var(--amber-rgb), 0.42);
      animation: xp-stripes 760ms linear infinite;
    }

    @keyframes xp-stripes {
      from { background-position: 0 0, 0 0, 0 0; }
      to { background-position: 0 0, 12px 0, 0 0; }
    }

    .xp__fill::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 2px;
      background: linear-gradient(180deg, #fff7e2, #ffd082);
      box-shadow:
        0 0 8px rgba(var(--amber-rgb), 0.95),
        0 0 20px rgba(var(--amber-rgb), 0.5);
    }

    .xp__ticks {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: repeating-linear-gradient(
        90deg,
        transparent 0 calc(10% - 2px),
        rgba(0, 0, 0, 0.3) calc(10% - 2px) calc(10% - 1px),
        rgba(255, 255, 255, 0.055) calc(10% - 1px) 10%
      );
    }

    .xp__value {
      position: absolute;
      top: 0;
      right: 8px;
      bottom: 0;
      display: flex;
      align-items: center;
      color: #fff;
      font-family: "Saira Condensed", sans-serif;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.09em;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.95),
        0 0 8px rgba(0, 0, 0, 0.85);
      pointer-events: none;
    }

    /* meta ─ next-rank readout (loadout "next unlock" DNA)

       padding-right matches .xp__value's inset so the two numeric
       readouts share one right edge. Without it they sat 9px apart —
       close enough to look like a mistake rather than a relationship. */
    .idcard__meta {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin: 0;
      padding-right: 8px;
      min-width: 0;
      color: var(--muted);
      font-size: 7.5px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .idcard__togo {
      flex: 0 0 auto;
      color: var(--amber-hot);
      letter-spacing: 0.1em;
      font-variant-numeric: tabular-nums;
    }

    .idcard__togo span {
      color: var(--muted);
    }

    /* ── squad panel ───────────────────────────────────────────────
       Three slots, and the slot mark is the LV chip's construction
       scaled to 14px: a rim layer with a face inset 1px into it, both
       cut on the top-left / bottom-right. Same family as the identity
       card, one size down — the card owns the big amber masses, this
       panel owns the small ones.

       Two elements only, so the panel's own insets carry the
       alignment: the label owns the left edge, the marks own the
       right. Nothing floats. */
    .squad__label {
      flex: 0 0 auto;
      color: var(--muted);
      font-family: "Saira Condensed", sans-serif;
      font-size: 11.5px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.22em;
      text-transform: uppercase;
    }

    .squad__slots {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* rim / seat */
    .squad__slots i {
      --cut: 4px;
      position: relative;
      width: 17px;
      height: 17px;
      clip-path: polygon(
        var(--cut) 0,
        100% 0,
        100% calc(100% - var(--cut)),
        calc(100% - var(--cut)) 100%,
        0 100%,
        0 var(--cut)
      );
      background: rgba(163, 182, 200, 0.24);
      transition: background 220ms ease, filter 220ms ease;
    }

    /* face — cut stated explicitly (not inherited) so the 1px offset
       stays concentric, same as the LV chip's 5px / 4px pair */
    .squad__slots i::before {
      content: "";
      position: absolute;
      inset: 1px;
      clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
      background: linear-gradient(180deg, #070b10, #0d141c);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.85);
      transition: background 220ms ease;
    }

    /* filled — the LV chip's amber, half a step down so the chip and
       the XP bar keep top billing on the card */
    .squad__slots i.is-filled {
      background: rgba(4, 7, 11, 0.92);
      filter: drop-shadow(0 0 6px rgba(var(--amber-rgb), 0.42));
    }

    .squad__slots i.is-filled::before {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 48%),
        linear-gradient(180deg, var(--amber-hot), var(--amber) 64%, #d97c04);
      box-shadow: none;
    }

    /* full squad — a static step up in glow, no motion */
    .squad--full .squad__slots i.is-filled {
      filter: drop-shadow(0 0 9px rgba(var(--amber-rgb), 0.6));
    }

    @media (max-width: 1180px) {

      .hero-preview { width: 100%; }
    }

    @media (max-width: 820px) {
      .hero-preview {
        height: auto;
        min-height: 460px;
      }
      .hero-shell { min-height: 360px; }
    }

    @media (max-width: 560px) {
      .panel--identity {
        width: min(292px, 88%);
        height: 78px;
        padding: 0 12px 0 10px;
        gap: 10px;
      }

      .idcard {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 10px;
      }

      .rank-badge { width: 40px; height: 40px; }
      .rank-badge img { width: 35px; height: 35px; }
      .rank-level { min-width: 37px; padding: 2px 6px; font-size: 10px; }
      .rank-level small,
      .rank-level .rank-level__label { margin-right: 2px; font-size: 7.5px; }
      .rank-level::before { --cut: 3.5px; }
      .rank-level::after { --cut: 2.5px; }

      .idcard__body { row-gap: 3px; }
      .idcard__name { margin-bottom: 2px; font-size: 19px; }
      .xp { height: 11px; clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
      .xp__value { right: 6px; font-size: 8px; }
      /* stays locked to .xp__value's inset at this breakpoint too */
      .idcard__meta { padding-right: 6px; font-size: 7px; letter-spacing: 0.12em; }

      .panel--squad {
        width: 145px;
        height: 40px;
        padding: 0 12px 0 10px;
        gap: 9px;
      }

      .squad__label { font-size: 10px; letter-spacing: 0.18em; }
      .squad__slots { gap: 5px; }
      .squad__slots i { --cut: 3.5px; width: 15px; height: 15px; }

      .camera-dock__group { gap: 12px; height: 26px; }
      .camera-dock__btn { width: 26px; height: 26px; }
      .camera-dock__btn svg { width: 14px; height: 14px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-preview,
      .panel,
      .stage-floor,
      .hero-status__mark,
      .xp__fill {
        animation: none;
      }
    }