@import '_content/Z.Blazor.Diagrams/Z.Blazor.Diagrams.ezdqu7jd9f.bundle.scp.css';

/* /Components/Pages/ChallengeEditor.razor.rz.scp.css */
/* The editor fills the viewport between header and the thin footer (no gap). */
.ce-page[b-bgu6j4a0w4] { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Board cell holds the canvas + the title overlaid at its top (no separate top bar / no gap). */
.ce-board[b-bgu6j4a0w4] { position: relative; height: 100%; min-width: 0; }
/* The board fills the canvas; the arena is pushed down (frame padding-top) so the title and timeline
   overlays above it sit on empty arena floor instead of over the top hexes. */
.ce-board[b-bgu6j4a0w4]  .hexboard-frame { padding-top: 104px; }

/* Objective tracker overlay: floats in the canvas's top-left, above the name/picking overlays. The wrapper
   ignores pointer events so it never blocks the board; only the button and panel are interactive. */
.ce-brief-overlay[b-bgu6j4a0w4] {
    position: absolute; top: 14px; left: 14px; z-index: 7;
    width: 270px; max-width: 60%;
    display: flex; flex-direction: column; gap: 8px;
    pointer-events: none;
}
.ce-brief-overlay > *[b-bgu6j4a0w4] { pointer-events: auto; }
/* Icon-only toggle: discrete (muted, translucent) when closed; full strength on hover or when open. */
.ce-brief-toggle[b-bgu6j4a0w4] {
    align-self: flex-start;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; border-radius: 8px;
    border: 1px solid rgba(var(--clr-border-rgb), 0.35);
    background: rgba(12, 16, 22, 0.5);
    color: var(--clr-text-secondary);
    cursor: pointer; opacity: 0.55;
    transition: opacity .12s ease, border-color .12s ease, color .12s ease, background .12s ease;
}
.ce-brief-toggle svg[b-bgu6j4a0w4] { width: 16px; height: 16px; }
.ce-brief-toggle:hover[b-bgu6j4a0w4] { opacity: 1; color: var(--clr-text-bright); border-color: var(--clr-orange); }
.ce-brief-toggle.open[b-bgu6j4a0w4] {
    opacity: 1; color: var(--clr-orange); border-color: var(--clr-orange);
    background: rgba(12, 16, 22, 0.88);
}
/* More opaque than the inline preview so the checklist reads cleanly over the board. */
.ce-brief-overlay[b-bgu6j4a0w4]  .ob-brief {
    margin-top: 0;
    background: rgba(12, 16, 22, 0.94);
    border-color: rgba(var(--clr-border-rgb), 0.6);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    max-height: 420px; overflow-y: auto;
}
.ce-name-overlay[b-bgu6j4a0w4] { position: absolute; top: 15px; left: 0; right: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 10px; pointer-events: none; }
.ce-name-overlay .ce-name-edit[b-bgu6j4a0w4], .ce-name-overlay .ce-name-input[b-bgu6j4a0w4] { pointer-events: auto; }
/* The title is the only centered flex child; the edit button is absolute (out of flow) just to its
   right, so the title text stays truly centered instead of being offset by the button's width. */
.ce-name-box[b-bgu6j4a0w4] { position: relative; display: inline-flex; align-items: center; }
.ce-name-box .ce-name-edit[b-bgu6j4a0w4] { position: absolute; left: 100%; margin-left: 8px; top: 50%; transform: translateY(-50%); }
.ce-name-title[b-bgu6j4a0w4] {
    font-family: var(--font-shrimp); font-size: 26px; text-transform: uppercase; letter-spacing: 0.04em;
    line-height: 1; color: var(--clr-text-bright); margin: 0; text-shadow: 0 2px 10px rgba(0,0,0,0.85);
}
.ce-name-edit[b-bgu6j4a0w4] {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none;
    border-radius: 6px; background: transparent; border: 1px solid rgba(var(--clr-border-rgb),0.4);
    color: var(--clr-text-secondary); cursor: pointer;
}
.ce-name-edit:hover[b-bgu6j4a0w4] { color: var(--color-primary); border-color: var(--color-primary); }
.ce-name-edit svg[b-bgu6j4a0w4] { width: 15px; height: 15px; }
.ce-name-input[b-bgu6j4a0w4] {
    width: 100%; max-width: 420px;
    background: var(--clr-bg-section); border: 1px solid rgba(var(--clr-border-rgb), 0.4);
    color: var(--clr-text-primary); padding: 8px 12px; border-radius: 8px; font-size: 16px;
}
.ce-name-input:focus[b-bgu6j4a0w4] { outline: none; border-color: var(--color-primary); }

/* Activation timeline: a centered row of character portraits under the title, sortable by drag.
   Overlay (absolute) like the title, sitting on the empty band at the top of the board. */
.ce-timeline[b-bgu6j4a0w4] {
    position: absolute; top: 52px; left: 0; right: 0; z-index: 5;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    pointer-events: none;
}

/* Each portrait sits in a slot. The slot is the drag/drop unit and carries the insertion indicator,
   so the element under the cursor never moves — a displacing gap would shift the target out from under
   the pointer and make the native drop land on the board behind, losing the reorder. */
.ce-tl-slot[b-bgu6j4a0w4] { position: relative; pointer-events: auto; cursor: grab; display: inline-flex; transition: transform 0.1s; }
.ce-tl-slot:hover[b-bgu6j4a0w4] { transform: translateY(-2px); }
.ce-tl-slot.dragging[b-bgu6j4a0w4] { opacity: 0.3; }
/* Insertion indicator: a glowing vertical bar at the slot edge where the dragged portrait will land.
   Absolutely positioned, so it never shifts the layout (the drop target stays under the cursor). */
.ce-tl-slot.insert-before[b-bgu6j4a0w4]::before, .ce-tl-slot.insert-after[b-bgu6j4a0w4]::after {
    content: ""; position: absolute; top: -5px; bottom: -5px; width: 3px;
    background: #ffd24a; border-radius: 2px; box-shadow: 0 0 7px 1px rgba(255, 210, 74, 0.9); z-index: 2;
}
.ce-tl-slot.insert-before[b-bgu6j4a0w4]::before { left: -5px; }
.ce-tl-slot.insert-after[b-bgu6j4a0w4]::after { right: -5px; }

/* Portrait kept at its original aspect ratio (height fixed, width auto) and rectangular shape —
   not the circular palette avatar. Thin team-coloured frame so A/B stay readable in the order. */
.ce-tl-portrait[b-bgu6j4a0w4] {
    display: block; height: 46px; width: auto; border-radius: 3px;
    background: var(--clr-bg-section); border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}
.ce-tl-portrait.team-a[b-bgu6j4a0w4] { border-color: #3d8eff; }
.ce-tl-portrait.team-b[b-bgu6j4a0w4] { border-color: #ff8c50; }

/* Layout: left panel | board | right inspector — equal sides so the board is centered.
   user-select:none stops drags from selecting text (which triggers Edge's super-drag / mini-menu). */
.ce-layout[b-bgu6j4a0w4] { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px 1fr 320px; gap: 0; align-items: stretch; user-select: none; }
@media (max-width: 1100px) { .ce-layout[b-bgu6j4a0w4] { grid-template-columns: 1fr; } }

/* Panel — VSCode/Linear-style block: fills the column height to match the canvas. */
.ce-panel[b-bgu6j4a0w4] {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden;
    background: var(--clr-bg-card); border: 1px solid rgba(var(--clr-border-rgb), 0.35);
}
/* Each side panel drops its board-facing border and casts a soft shadow over the board. */
.ce-panel-left[b-bgu6j4a0w4]  { border-right: none; box-shadow: 12px 0 24px -6px rgba(0,0,0,0.55); }
.ce-panel-right[b-bgu6j4a0w4] { border-left: none;  box-shadow: -12px 0 24px -6px rgba(0,0,0,0.55); }

/* Horizontal tab bar — category switcher (Characters / Objective / Elements). */
.ce-tabs[b-bgu6j4a0w4] {
    display: flex; flex: none;
    background: rgba(0,0,0,0.18); border-bottom: 1px solid rgba(var(--clr-border-rgb), 0.25);
}
.ce-tab[b-bgu6j4a0w4] {
    position: relative; flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 0 5px; background: transparent; border: none; white-space: nowrap;
    color: var(--clr-text-secondary); cursor: pointer;
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
    transition: color .15s ease;
}
.ce-tab:hover[b-bgu6j4a0w4] { color: var(--clr-text-bright); }
.ce-tab svg[b-bgu6j4a0w4] { flex: none; width: 16px; height: 16px; }
.ce-tab.active[b-bgu6j4a0w4] { color: var(--color-primary); }
.ce-tab.active[b-bgu6j4a0w4]::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--color-primary);
}

/* Right-panel header — same bar height/look as the left tab bar so they line up. */
.ce-panel-head[b-bgu6j4a0w4] {
    flex: none; height: 40px; display: flex; align-items: center; padding: 0 14px;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700;
    color: var(--clr-text-secondary);
    background: rgba(0,0,0,0.18); border-bottom: 1px solid rgba(var(--clr-border-rgb), 0.25);
}

.ce-panel-body[b-bgu6j4a0w4] { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
/* Inspector items are full-width sections (no card margins), separated by dividers. */
.ce-panel-right .ce-panel-body[b-bgu6j4a0w4] { padding: 0; gap: 0; }
.ce-panel-right .ce-hint[b-bgu6j4a0w4] { padding: 12px 14px; }
.ce-panel-foot[b-bgu6j4a0w4] {
    padding: 14px 16px; border-top: 1px solid rgba(var(--clr-border-rgb), 0.25);
    background: rgba(var(--clr-bg-panel-rgb), 0.35);
}

/* Character palette — each cell holds a <ChampionAvatar> that fills it. */
.ce-portraits[b-bgu6j4a0w4] { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }

/* Selected-character header (portrait + name + actor id). */
.ce-selected-head[b-bgu6j4a0w4] { display: flex; align-items: center; gap: 10px; }
.ce-selected-portrait[b-bgu6j4a0w4] { width: 44px; height: 44px; flex: none; }
.ce-selected-name[b-bgu6j4a0w4] { font-size: 14px; font-weight: 700; color: var(--clr-text-bright); }
.ce-selected-sub[b-bgu6j4a0w4] { font-size: 11px; color: var(--clr-text-secondary); }
.ce-stat-row[b-bgu6j4a0w4] { display: flex; gap: 10px; margin-top: 10px; }
.ce-stat[b-bgu6j4a0w4] { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clr-text-secondary); }
.ce-stat input[b-bgu6j4a0w4] { background: var(--clr-bg-page); border: 1px solid rgba(var(--clr-border-rgb),0.4); border-radius: 6px; color: var(--clr-text-primary); padding: 5px 8px; font-size: 12px; max-width: 72px; }
/* HP/AP rendered as steppers: each fills half the row, label keeps the uppercase stat look. */
.ce-stat-row[b-bgu6j4a0w4]  .fld { flex: 1; gap: 4px; }
.ce-stat-row[b-bgu6j4a0w4]  .manage-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clr-text-secondary); }

/* Fields + selects (objective / elements). */
.ce-field[b-bgu6j4a0w4] { display: flex; flex-direction: column; gap: 5px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clr-text-secondary); }
.ce-field select[b-bgu6j4a0w4] {
    background: var(--clr-bg-page); border: 1px solid rgba(var(--clr-border-rgb),0.4);
    border-radius: 6px; color: var(--clr-text-primary); padding: 7px 8px; font-size: 13px; text-transform: none; letter-spacing: 0;
}
.ce-reqs[b-bgu6j4a0w4] { display: flex; flex-direction: column; gap: 6px; }
.ce-req[b-bgu6j4a0w4] { display: flex; gap: 5px; align-items: center; }
.ce-req select[b-bgu6j4a0w4] {
    flex: 1; min-width: 0; padding: 5px 6px; font-size: 12px;
    background: var(--clr-bg-page); border: 1px solid rgba(var(--clr-border-rgb),0.4);
    border-radius: 6px; color: var(--clr-text-primary);
}
.ce-req-del[b-bgu6j4a0w4] { width: 26px; height: 28px; flex: none; border-radius: 6px; background: transparent; border: 1px solid rgba(var(--clr-border-rgb),0.35); color: var(--clr-text-secondary); cursor: pointer; }
.ce-req-del:hover[b-bgu6j4a0w4] { color: var(--clr-danger); border-color: var(--clr-danger); }

/* Palette sections (Champions / Drops). */
.ce-section-title[b-bgu6j4a0w4] { margin-top: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clr-text-secondary); }
.ce-drops-palette[b-bgu6j4a0w4] { display: flex; flex-wrap: wrap; gap: 8px; }
/* Drop chips mirror the board discs: white icon, coloured ring (green/red/cyan). */
.ce-drop-item[b-bgu6j4a0w4] {
    width: 40px; height: 40px; padding: 0; border-radius: 50%; cursor: grab;
    background: #0E1B2C; border: 2px solid rgba(var(--clr-border-rgb),0.5);
    display: inline-flex; align-items: center; justify-content: center; transition: transform .12s, box-shadow .12s;
}
.ce-drop-item img[b-bgu6j4a0w4] { width: 26px; height: 26px; pointer-events: none; }
.ce-drop-item:hover[b-bgu6j4a0w4] { transform: scale(1.08); }
.ce-drop-item.drop-pos[b-bgu6j4a0w4] { border-color: #5BE08A; }
.ce-drop-item.drop-neg[b-bgu6j4a0w4] { border-color: #EE5A6E; }
.ce-drop-item.drop-neu[b-bgu6j4a0w4] { border-color: #4FB3D9; }
.ce-drop-item.sel[b-bgu6j4a0w4] { box-shadow: 0 0 0 2px rgba(var(--clr-orange-soft-rgb),0.55); }
/* Inspector head pastille — same dark disc + sign ring as a board drop. */
.ce-drop-portrait[b-bgu6j4a0w4] { border-radius: 50%; background: #0E1B2C; border: 2px solid rgba(var(--clr-border-rgb),0.5); display: inline-flex; align-items: center; justify-content: center; }
.ce-drop-portrait img[b-bgu6j4a0w4] { width: 28px; height: 28px; }
.ce-drop-portrait.drop-pos[b-bgu6j4a0w4] { border-color: #5BE08A; }
.ce-drop-portrait.drop-neg[b-bgu6j4a0w4] { border-color: #EE5A6E; }
.ce-drop-portrait.drop-neu[b-bgu6j4a0w4] { border-color: #4FB3D9; }
/* Type picker reuses the palette chips, but here they pick (click) rather than drag. */
.ce-drop-pick .ce-drop-item[b-bgu6j4a0w4] { cursor: pointer; }

/* Inspector — stacked cards for the selected tile (Unity-component style). */
/* Full-width section (not a floating card): edge-to-edge, divider between sections. */
.ce-card[b-bgu6j4a0w4] { background: transparent; border: none; border-bottom: 1px solid rgba(var(--clr-border-rgb),0.3); overflow: hidden; }
.ce-card-bar[b-bgu6j4a0w4] {
    display: flex; align-items: center; justify-content: space-between; padding: 8px 14px;
    background: rgba(var(--clr-bg-panel-rgb),0.5); border-bottom: 1px solid rgba(var(--clr-border-rgb),0.2);
}
.ce-card-type[b-bgu6j4a0w4] { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--clr-text-secondary); }
.ce-card-x[b-bgu6j4a0w4] {
    width: 22px; height: 22px; border-radius: 5px; line-height: 1; cursor: pointer;
    background: transparent; border: 1px solid rgba(var(--clr-border-rgb),0.4); color: var(--clr-text-secondary);
}
.ce-card-x:hover[b-bgu6j4a0w4] { color: var(--clr-danger); border-color: var(--clr-danger); }
.ce-card-body[b-bgu6j4a0w4] { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }

/* Per-team parameter groups (Params tab) — score + sponsor grouped under a team-coloured header. */
.ce-team-group[b-bgu6j4a0w4] { display: flex; flex-direction: column; gap: 7px; padding: 10px; border-radius: 8px; border: 1px solid; background: var(--clr-bg-section); }
.ce-team-group-title[b-bgu6j4a0w4] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.ce-team-group.team-a[b-bgu6j4a0w4] { border-color: rgba(61,142,255,0.5); background: rgba(61,142,255,0.06); }
.ce-team-group.team-a .ce-team-group-title[b-bgu6j4a0w4] { color: #6FB0FF; }
.ce-team-group.team-b[b-bgu6j4a0w4] { border-color: rgba(255,140,80,0.5); background: rgba(255,140,80,0.06); }
.ce-team-group.team-b .ce-team-group-title[b-bgu6j4a0w4] { color: #FFA877; }

.ce-hint[b-bgu6j4a0w4] { font-size: 12px; line-height: 1.5; color: var(--clr-text-secondary); }
/* Note pointing to the inspector for per-character AI, set apart from the global fields by a top rule. */
.ce-ai-note[b-bgu6j4a0w4] { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(var(--clr-border-rgb), 0.25); font-size: 12px; line-height: 1.5; color: var(--clr-text-secondary); }
.ce-ok[b-bgu6j4a0w4] { color: var(--clr-positive); font-size: 12px; margin: 0 0 8px; overflow-wrap: anywhere; }
.ce-ok code[b-bgu6j4a0w4] { background: rgba(var(--clr-positive-rgb),0.12); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.ce-err[b-bgu6j4a0w4] { color: var(--clr-danger); font-size: 12px; margin: 0 0 8px; overflow-wrap: anywhere; }

/* Floating banner shown while picking tiles on the board (objective valid tiles, AI tile param). */
/* Tile-picking mode: the action lives in the inspector (the "Pick on board" button turns into a Done/
   Cancel button). The board signals the active mode with an accent ring + crosshair, so it's clear the
   tiles are the thing to click — no bottom banner the eye has to hunt for. */
.ce-board--picking[b-bgu6j4a0w4] { cursor: crosshair; }
.ce-board--picking[b-bgu6j4a0w4]::after {
    content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
    box-shadow: inset 0 0 0 2px #50c8ff, inset 0 0 22px rgba(80, 200, 255, 0.35);
    animation: ce-pick-pulse-b-bgu6j4a0w4 1.4s ease-in-out infinite;
}
@keyframes ce-pick-pulse-b-bgu6j4a0w4 { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
/* The in-inspector Done/Cancel button while picking — a cyan halo ties it to the board's accent ring. */
.ce-pick-done[b-bgu6j4a0w4] { box-shadow: 0 0 0 2px rgba(80, 200, 255, 0.55); }
.ce-pick-hint[b-bgu6j4a0w4] { color: #79c7de; }

/* Compact editor action button — matches the dense field controls (thin border, small radius) instead
   of the heavy page-wide .btn-secondary. --accent = active/primary, --ghost = subtle (Clear/Reset). */
.ce-btn[b-bgu6j4a0w4] {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap;
    padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; line-height: 1.1;
    background: var(--clr-bg-page); border: 1px solid var(--clr-border); color: var(--clr-text-secondary);
    transition: color .12s ease, border-color .12s ease, background .12s ease, filter .12s ease;
}
.ce-btn:hover[b-bgu6j4a0w4] { color: var(--clr-text-bright); border-color: var(--clr-orange); }
.ce-btn svg[b-bgu6j4a0w4] { width: 13px; height: 13px; flex: none; }
.ce-btn--accent[b-bgu6j4a0w4] { background: var(--clr-orange); border-color: var(--clr-orange); color: var(--clr-bg-page); font-weight: 600; }
.ce-btn--accent:hover[b-bgu6j4a0w4] { color: var(--clr-bg-page); filter: brightness(1.08); }
.ce-btn--ghost[b-bgu6j4a0w4] { background: transparent; border-color: transparent; padding: 5px 7px; }
.ce-btn--ghost:hover[b-bgu6j4a0w4] { color: var(--clr-text-bright); border-color: transparent; background: rgba(var(--clr-bg-panel-rgb), 0.6); }

/* Attribute / skill upgrade counters: a labelled row of narrow number fields. */
/* Character inspector: horizontal icon sub-tabs (one section at a time), header stays fixed above. */
.ce-itabs[b-bgu6j4a0w4] { display: flex; gap: 2px; margin: 10px 0 12px; border-bottom: 1px solid rgba(var(--clr-border-rgb), 0.3); }
/* Each tab is wrapped in a <Tooltip> (.tt, a child component root → reached via ::deep). The wrapper
   takes the equal-width slot; the button fills it so the row still splits into 6 even columns. */
.ce-itabs[b-bgu6j4a0w4]  .ce-itab-tt { flex: 1; }
.ce-itab[b-bgu6j4a0w4] { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; height: 34px; padding: 0; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--clr-text-secondary); cursor: pointer; transition: color .12s ease; }
.ce-itab svg[b-bgu6j4a0w4] { width: 17px; height: 17px; }
.ce-itab:hover[b-bgu6j4a0w4] { color: var(--clr-text-bright); }
.ce-itab.active[b-bgu6j4a0w4] { color: var(--clr-orange); border-bottom-color: var(--clr-orange); }
.ce-itab-dot[b-bgu6j4a0w4] { position: absolute; top: 4px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--clr-orange); }

/* Overwatch pattern summary: the champion's fixed shape + range (read-only), above the facing picker. */
.ce-ow-pattern[b-bgu6j4a0w4] { display: flex; align-items: baseline; gap: 8px; }
.ce-ow-shape[b-bgu6j4a0w4] { font-size: 13px; font-weight: 700; color: var(--clr-text-bright); }
.ce-ow-range[b-bgu6j4a0w4] { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #ff8a98; }

/* Field groups inside an inspector tab: related controls under a small orange section header. */
.ce-grp[b-bgu6j4a0w4] { display: flex; flex-direction: column; gap: 8px; }
.ce-grp-label[b-bgu6j4a0w4] { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--clr-orange); padding-bottom: 3px; border-bottom: 1px solid rgba(var(--clr-border-rgb), 0.25); }

/* Upgrades: fixed-width labels so the chevron pips line up in a column across attributes and skills. */
.ce-ups-aligned[b-bgu6j4a0w4] { display: flex; flex-direction: column; gap: 5px; }
.ce-ups-aligned[b-bgu6j4a0w4]  .fld-inline > .manage-label { flex: 0 0 128px; }
.ce-ups-aligned > .ce-ups-label[b-bgu6j4a0w4] { color: var(--clr-orange); }
.ce-ups-label[b-bgu6j4a0w4] { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clr-text-secondary); }
.ce-ups-row[b-bgu6j4a0w4] { display: flex; gap: 8px; flex-wrap: wrap; }
.ce-ups-row[b-bgu6j4a0w4]  .fld-num { max-width: 64px; }
.ce-ups-row[b-bgu6j4a0w4]  .fld-inline { gap: 6px; }

/* Valid-tiles picker row inside an objective requirement. */
.ce-tile-pick[b-bgu6j4a0w4] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Density: compact, Unity-inspector-style panels ──────────────────────── */
.ce-panel-left .ce-panel-body[b-bgu6j4a0w4] { padding: 12px; gap: 9px; }
.ce-card-body[b-bgu6j4a0w4] { padding: 8px 12px 12px; gap: 8px; }
.ce-stat-row[b-bgu6j4a0w4] { gap: 8px; margin-top: 6px; }
/* Collapsible sections: small, contrasted header bars + a grouped body so the separation reads clearly. */
.ce-panel-body[b-bgu6j4a0w4]  .accordion-section { border-bottom: none; margin-bottom: 6px; }
.ce-panel-body[b-bgu6j4a0w4]  .accordion-header {
    padding: 7px 10px; gap: 8px;
    background: rgba(var(--clr-bg-panel-rgb), 0.85);
    border: 1px solid rgba(var(--clr-border-rgb), 0.45);
}
.ce-panel-body[b-bgu6j4a0w4]  .accordion-header:hover { background: rgba(var(--clr-bg-panel-rgb), 1); color: var(--clr-text-bright); }
.ce-panel-body[b-bgu6j4a0w4]  .accordion-section.accordion-open .accordion-header { border-bottom-color: transparent; }
.ce-panel-body[b-bgu6j4a0w4]  .accordion-title { font-family: var(--font-shrimp); font-size: 11px; letter-spacing: 0.05em; font-weight: 600; }
.ce-panel-body[b-bgu6j4a0w4]  .accordion-meta { font-size: 10px; }
.ce-panel-body[b-bgu6j4a0w4]  .accordion-chevron { font-size: 11px; }
.ce-panel-body[b-bgu6j4a0w4]  .accordion-body {
    padding: 8px 10px 9px; display: flex; flex-direction: column; gap: 7px;
    background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(var(--clr-border-rgb), 0.45); border-top: none;
}
.ce-panel-body[b-bgu6j4a0w4]  .accordion-body .fld + .fld { margin-top: 0; }

/* Icon rail that expands over the content on hover to reveal labels — no permanent width cost.
   Collapsed it's a 44px strip; on hover it widens to 176px as an opaque overlay (the content keeps a
   44px left margin, so nothing shifts — the labels just slide over the panel body). */
.ce-panel-left[b-bgu6j4a0w4] { flex-direction: row; position: relative; }
.ce-rail[b-bgu6j4a0w4] {
    position: absolute; top: 0; left: 0; bottom: 0; z-index: 20;
    display: flex; flex-direction: column; gap: 2px; padding: 4px 0;
    width: 44px; overflow: hidden; transition: width .08s ease;
    background: #0A1120; border-right: 1px solid rgba(var(--clr-border-rgb), 0.25);
}
.ce-rail:hover[b-bgu6j4a0w4] { width: 176px; box-shadow: 8px 0 22px rgba(0, 0, 0, 0.6); }
/* After picking a tab the rail collapses even though the cursor is still over it; it re-expands once the
   cursor leaves and hovers back in (the .is-closed flag is cleared on mouseleave). */
.ce-rail.is-closed:hover[b-bgu6j4a0w4] { width: 44px; box-shadow: none; }
.ce-rail-btn[b-bgu6j4a0w4] {
    position: relative; width: 176px; height: 42px; flex: none;
    display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 12px;
    background: transparent; border: none; color: var(--clr-text-secondary); cursor: pointer; transition: color .15s;
}
.ce-rail-btn:hover[b-bgu6j4a0w4] { color: var(--clr-text-bright); }
.ce-rail-btn svg[b-bgu6j4a0w4] { width: 20px; height: 20px; flex: none; }
.ce-rail-label[b-bgu6j4a0w4] { white-space: nowrap; font-size: 12.5px; letter-spacing: 0.02em; }
.ce-rail-btn.active[b-bgu6j4a0w4] { color: var(--color-primary); }
.ce-rail-btn.active[b-bgu6j4a0w4]::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--color-primary); }
.ce-panel-col[b-bgu6j4a0w4] { flex: 1; min-width: 0; min-height: 0; margin-left: 44px; display: flex; flex-direction: column; }

/* Tactics team sub-tabs: each team clearly coloured (blue A / orange B), vivid when active. */
.ce-tab.team-a[b-bgu6j4a0w4] { color: #5B86C4; }
.ce-tab.team-a:hover[b-bgu6j4a0w4], .ce-tab.team-a.active[b-bgu6j4a0w4] { color: #3D8EFF; }
.ce-tab.team-a.active[b-bgu6j4a0w4]::after { background: #3D8EFF; }
.ce-tab.team-b[b-bgu6j4a0w4] { color: #C4865B; }
.ce-tab.team-b:hover[b-bgu6j4a0w4], .ce-tab.team-b.active[b-bgu6j4a0w4] { color: #FF8C50; }
.ce-tab.team-b.active[b-bgu6j4a0w4]::after { background: #FF8C50; }

/* Tactics decks: flatten each tactic row — drop the extra border/box, keep just the selector + remove. */
.ce-deck[b-bgu6j4a0w4] { display: flex; flex-direction: column; gap: 6px; }
.ce-deck .fld-list-add[b-bgu6j4a0w4] { padding: 2px 9px; align-self: center; }
.ce-deck[b-bgu6j4a0w4]  .fld-list { gap: 6px; }

/* Reusable list-row primitive (`ce-row-del`): the item fills the width and its delete × is a flush
   button attached on the right — a seamless button group. Used by Tactics decks and Objective conditions. */
.ce-row-del[b-bgu6j4a0w4]  .fld-list-row { gap: 0; align-items: flex-start; border: none; background: none; padding: 0; }
.ce-row-del[b-bgu6j4a0w4]  .fld-list-body { flex: 1; min-width: 0; }
.ce-row-del[b-bgu6j4a0w4]  .fld-list-body > .tsel > .tsel-trigger,
.ce-row-del[b-bgu6j4a0w4]  .fld-list-body > .accordion-section > .accordion-header {
    height: 34px; border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.ce-row-del[b-bgu6j4a0w4]  .fld-list-x {
    flex: none; align-self: flex-start; width: 32px; height: 34px; margin: 0; padding: 0;
    display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1;
    color: var(--clr-text-secondary); cursor: pointer; background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(var(--clr-border-rgb), 0.4); border-left: none; border-radius: 0 6px 6px 0;
}
.ce-row-del[b-bgu6j4a0w4]  .fld-list-x:hover { color: var(--clr-danger); border-color: var(--clr-danger); }

/* Objective "extra conditions": each opt-in condition is its own block — control full width, delete bar at the bottom. */
.ce-cond[b-bgu6j4a0w4] { position: relative; border: 1px solid rgba(var(--clr-border-rgb), 0.3); border-radius: 6px; background: rgba(0, 0, 0, 0.15); }
.ce-cond-body[b-bgu6j4a0w4] { padding: 8px 10px; padding-right: 36px; display: flex; flex-direction: column; gap: 8px; }
.ce-cond-lbl[b-bgu6j4a0w4] { font-size: 12px; color: var(--clr-text-primary); }
.ce-cond-x[b-bgu6j4a0w4] { position: absolute; top: 6px; right: 7px; width: 22px; height: 22px; border-radius: 5px; line-height: 1; cursor: pointer; background: transparent; border: 1px solid rgba(var(--clr-border-rgb), 0.4); color: var(--clr-text-secondary); }
.ce-cond-x:hover[b-bgu6j4a0w4] { color: var(--clr-danger); border-color: var(--clr-danger); }

/* Objective as a flow: Trigger step → arrow → Conditions step, so the cause→effect logic reads clearly. */
.ce-flow-step[b-bgu6j4a0w4] { display: flex; flex-direction: column; gap: 9px; padding: 10px; border-radius: 8px; border: 1px solid rgba(var(--clr-border-rgb), 0.3); background: rgba(0, 0, 0, 0.12); }
.ce-flow-label[b-bgu6j4a0w4] { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--clr-text-secondary); }
.ce-flow-arrow[b-bgu6j4a0w4] { text-align: center; color: var(--clr-orange); font-size: 18px; line-height: 1; }
/* Distinct colours so the two steps read apart: cyan = trigger (the event), green = win conditions (the goal). */
.ce-flow-trigger[b-bgu6j4a0w4] { border-color: rgba(79, 179, 217, 0.45); background: rgba(79, 179, 217, 0.07); }
.ce-flow-trigger .ce-flow-label[b-bgu6j4a0w4] { color: #79C7DE; }
.ce-flow-win[b-bgu6j4a0w4] { border-color: rgba(91, 224, 138, 0.45); background: rgba(91, 224, 138, 0.06); }
.ce-flow-win .ce-flow-label[b-bgu6j4a0w4] { color: #82D69C; }
.ce-add-cond[b-bgu6j4a0w4] { width: 100%; background: var(--clr-bg-page); border: 1px dashed rgba(var(--clr-orange-rgb), 0.5); border-radius: 6px; color: var(--clr-orange); padding: 6px 8px; font-size: 12px; cursor: pointer; }

/* Objective conditions list: flat rows (no box); the parent delete is a full-width bar at the bottom of the
   expanded condition, so the ListEditor's own × is hidden. */
.ce-objreqs[b-bgu6j4a0w4]  .fld-list-row { border: none; background: none; padding: 0; }
.ce-objreqs[b-bgu6j4a0w4]  .fld-list-x { display: none; }
/* Same flat-row + bottom-bar-delete treatment for any accordion list (AI Special / Rolls). */
.ce-acc-list[b-bgu6j4a0w4]  .fld-list-row { border: none; background: none; padding: 0; }
.ce-acc-list[b-bgu6j4a0w4]  .fld-list-x { display: none; }
.ce-remove-cond[b-bgu6j4a0w4] { width: 100%; padding: 7px; background: transparent; border: 1px solid rgba(var(--clr-border-rgb), 0.35); border-radius: 6px; color: var(--clr-text-secondary); cursor: pointer; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.ce-remove-cond:hover[b-bgu6j4a0w4] { color: var(--clr-danger); border-color: var(--clr-danger); }

/* Features tab: grouped enable/disable toggles (checked = on) with a per-feature info tooltip. */
.ce-feat-group[b-bgu6j4a0w4] { display: flex; flex-direction: column; gap: 1px; }
.ce-feat-group + .ce-feat-group[b-bgu6j4a0w4] { margin-top: 8px; }
.ce-feat-group-title[b-bgu6j4a0w4] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clr-orange); margin-bottom: 4px; padding-bottom: 3px; border-bottom: 1px solid rgba(var(--clr-border-rgb), 0.25); }
.ce-feat-row[b-bgu6j4a0w4] { position: relative; display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 4px; }
.ce-feat-row:hover[b-bgu6j4a0w4] { background: rgba(var(--clr-bg-panel-rgb), 0.5); }
/* The feature switches now use the shared <FieldToggle>; this wrapper just lets it grow so the
   (i) info icon stays pinned to the right of the row. */
.ce-feat-fld[b-bgu6j4a0w4] { flex: 1; min-width: 0; }
/* Info affordance — the (i) icon; its label is rendered via the <Tooltip> primitive (global .tt-tip). */
.ce-info[b-bgu6j4a0w4] { display: inline-flex; align-items: center; color: var(--clr-text-secondary); cursor: help; outline: none; }
.ce-info svg[b-bgu6j4a0w4] { width: 15px; height: 15px; }
.ce-info:hover[b-bgu6j4a0w4], .ce-info:focus-visible[b-bgu6j4a0w4], .ce-info:focus[b-bgu6j4a0w4] { color: var(--clr-info); }
/* Inline (i) marker used in the tab's intro hint. */
.ce-info-inline[b-bgu6j4a0w4] { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 50%; font-size: 9px; font-style: italic; font-weight: 700; line-height: 1; vertical-align: middle; }

/* Rounds tab: vertical numbered flow — one node per played round, mapping round -> scoring zone. */
.ce-rflow[b-bgu6j4a0w4] { display: flex; flex-direction: column; margin-top: 6px; }
.ce-rstep[b-bgu6j4a0w4] { position: relative; padding-left: 32px; padding-bottom: 12px; }
.ce-rstep:last-child[b-bgu6j4a0w4] { padding-bottom: 0; }
/* connector line down the left between consecutive nodes */
.ce-rstep:not(:last-child)[b-bgu6j4a0w4]::before { content: ""; position: absolute; left: 10px; top: 4px; bottom: -4px; width: 2px; background: rgba(var(--clr-border-rgb), 0.5); }
/* numbered node badge (visual only — the start round is set via the hover button) */
.ce-rstep-num[b-bgu6j4a0w4] {
    position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; z-index: 1;
    display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
    color: var(--clr-text-secondary); background: var(--clr-bg-card); border: 2px solid rgba(var(--clr-border-rgb), 0.7);
}
.ce-rstep--start .ce-rstep-num[b-bgu6j4a0w4] { color: var(--clr-bg-page); background: var(--clr-orange); border-color: var(--clr-orange); }
.ce-rstep--skip[b-bgu6j4a0w4] { opacity: 0.45; transition: opacity .12s ease; }
.ce-rstep--skip:hover[b-bgu6j4a0w4], .ce-rstep:focus-within[b-bgu6j4a0w4] { opacity: 1; }
/* hover-revealed "set as start" button */
.ce-rstep-set[b-bgu6j4a0w4] { margin-left: auto; opacity: 0; background: transparent; border: 1px solid rgba(var(--clr-orange-rgb), 0.5); border-radius: 5px; color: var(--clr-orange); font-size: 10.5px; padding: 2px 8px; cursor: pointer; white-space: nowrap; transition: opacity .12s ease, background .12s ease; }
.ce-rstep:hover .ce-rstep-set[b-bgu6j4a0w4], .ce-rstep:focus-within .ce-rstep-set[b-bgu6j4a0w4] { opacity: 1; }
.ce-rstep-set:hover[b-bgu6j4a0w4] { background: rgba(var(--clr-orange-rgb), 0.12); }
.ce-rstep-head[b-bgu6j4a0w4] { display: flex; align-items: center; gap: 7px; min-height: 22px; }
.ce-rstep-title[b-bgu6j4a0w4] { font-size: 13px; font-weight: 600; color: var(--clr-text-primary); }
.ce-rstep-body[b-bgu6j4a0w4] { margin-top: 5px; display: flex; align-items: center; gap: 8px; }
.ce-rstep-body[b-bgu6j4a0w4]  .fld { flex: 1; min-width: 0; }
.ce-rstep-body[b-bgu6j4a0w4]  select { width: 100%; }
.ce-round-tag[b-bgu6j4a0w4] { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--clr-orange); border: 1px solid rgba(var(--clr-orange-rgb), 0.5); border-radius: 3px; padding: 1px 4px; line-height: 1; }
.ce-rstep-skip-tag[b-bgu6j4a0w4] { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--clr-text-muted); border: 1px solid rgba(var(--clr-border-rgb), 0.4); border-radius: 3px; padding: 1px 4px; line-height: 1; }
/* /Components/Pages/TacticsTest.razor.rz.scp.css */
.tt-page[b-9dcr8pdbid] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}

.tt-page h1[b-9dcr8pdbid] {
    font-family: var(--font-shrimp);
    color: var(--clr-text-bright);
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.tt-total[b-9dcr8pdbid],
.tt-count[b-9dcr8pdbid] {
    font-family: inherit;
    font-size: 0.6em;
    color: var(--clr-text-secondary);
    background: rgba(var(--clr-border-rgb), 0.3);
    border-radius: 999px;
    padding: 1px 10px;
}

.tt-hint[b-9dcr8pdbid] {
    color: var(--clr-text-secondary);
    font-size: 13px;
    margin: 4px 0 24px;
}

.tt-section[b-9dcr8pdbid] {
    margin-bottom: 28px;
}

.tt-cat[b-9dcr8pdbid] {
    font-family: var(--font-shrimp);
    font-size: 15px;
    color: var(--clr-text-primary);
    border-bottom: 1px solid rgba(var(--clr-border-rgb), 0.4);
    padding-bottom: 6px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tt-grid[b-9dcr8pdbid] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}
/* /Components/Shared/ChampionAvatar.razor.rz.scp.css */
/* Avatars are portrait (200x280); object-fit:cover keeps the face undistorted inside the circle.
   The ring colour comes from an inline border-color (team colour, or white on the palette). */
.champ-avatar[b-51cpvq72og] {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: #0e1b2c;
    transition: transform 0.12s, box-shadow 0.12s;
}
.champ-avatar.interactive[b-51cpvq72og] {
    cursor: grab;
}
.champ-avatar.interactive:hover[b-51cpvq72og] {
    transform: scale(1.06);
}
.champ-avatar.sel[b-51cpvq72og] {
    box-shadow: 0 0 0 3px rgba(var(--clr-orange-soft-rgb), 0.5);
}
/* /Components/Shared/ObjectifBrief.razor.rz.scp.css */
/* MMO-quest style objective preview. Dark card matching the editor panels. */
.ob-brief[b-iqme4m2svy] {
    margin-top: 6px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.28);
    font-size: 13px;
    line-height: 1.5;
}

.ob-head[b-iqme4m2svy] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.ob-title[b-iqme4m2svy] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #FAA322;
}

.ob-timing[b-iqme4m2svy] {
    font-size: 10px;
    font-style: italic;
    color: rgba(201, 212, 227, 0.7);
}

.ob-empty[b-iqme4m2svy] {
    font-size: 12px;
    font-style: italic;
    color: rgba(201, 212, 227, 0.5);
}

.ob-group[b-iqme4m2svy] {
    margin: 6px 0;
}

.ob-group-head[b-iqme4m2svy] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.ob-group-head[b-iqme4m2svy]  .champ-avatar {
    width: 22px;
    height: 22px;
    border-width: 2px;
}

.ob-group-name[b-iqme4m2svy] {
    font-weight: 700;
    font-size: 12px;
}

.ob-line[b-iqme4m2svy] {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 2px 0;
    color: #E4EAF2;
}

.ob-line.ob-sub[b-iqme4m2svy] {
    padding-left: 14px;
}

.ob-check[b-iqme4m2svy] {
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(201, 212, 227, 0.85);
}

.ob-text[b-iqme4m2svy] {
    flex: 1;
}

/* Standalone semantic lines: a thin team-coloured rail on the left. */
.ob-line.ob-enemy[b-iqme4m2svy] {
    border-left: 2px solid #FF8C50;
    padding-left: 8px;
}

.ob-line.ob-ally[b-iqme4m2svy] {
    border-left: 2px solid #3D8EFF;
    padding-left: 8px;
}

.ob-line.ob-global[b-iqme4m2svy] {
    border-left: 2px solid rgba(201, 212, 227, 0.5);
    padding-left: 8px;
}
/* /Components/Shared/TeamToggle.razor.rz.scp.css */
.team-toggle[b-wulbdnof6n] {
    display: flex;
    gap: 6px;
}
.tt-seg[b-wulbdnof6n] {
    flex: 1;
    padding: 7px 6px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    background: var(--clr-bg-section);
    border: 1px solid rgba(var(--clr-border-rgb), 0.35);
    color: var(--clr-text-secondary);
    transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.tt-seg:hover[b-wulbdnof6n] {
    color: var(--clr-text-bright);
}
/* Active segment takes its team colour. */
.tt-a.on[b-wulbdnof6n] {
    background: rgba(61, 142, 255, 0.2);
    border-color: #3d8eff;
    color: #cfe2ff;
}
.tt-b.on[b-wulbdnof6n] {
    background: rgba(255, 140, 80, 0.2);
    border-color: #ff8c50;
    color: #ffe0cf;
}
.tt-n.on[b-wulbdnof6n] {
    background: rgba(160, 170, 185, 0.18);
    border-color: #a6b0bf;
    color: #e4e9f0;
}
/* /Components/UI/AdminSubHeader.razor.rz.scp.css */
.admin-subheader[b-7v2qvko1dy] {
    width: 100%;
    background: rgba(var(--clr-bg-panel-rgb), 0.6);
    border-bottom: 1px solid rgba(var(--clr-border-rgb), 0.25);
}

.admin-subheader-inner[b-7v2qvko1dy] {
    min-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.admin-subheader-crumb[b-7v2qvko1dy] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--clr-orange);
    text-decoration: none;
    cursor: pointer;
}

.admin-subheader-crumb:hover[b-7v2qvko1dy] {
    color: var(--clr-text-bright);
}
/* /Components/UI/AppFooter.razor.rz.scp.css */
.footer-legal-nav[b-anxh78n2tj] {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(74, 87, 99, 0.25);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-family: var(--font-oxanium, 'Oxanium', sans-serif);
    font-size: 13px;
    letter-spacing: 0.04em;
}

.footer-legal-nav a[b-anxh78n2tj] {
    color: var(--clr-text-secondary);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.footer-legal-nav a:hover[b-anxh78n2tj],
.footer-legal-nav a:focus-visible[b-anxh78n2tj] {
    color: var(--clr-orange);
    background: rgba(250, 163, 34, 0.06);
    outline: none;
}

.footer-legal-sep[b-anxh78n2tj] {
    color: rgba(74, 87, 99, 0.6);
    font-size: 12px;
    user-select: none;
}

/* Thin footer for full-screen tool pages (e.g. the challenge editor) — ~30px, no images. */
.footer-compact[b-anxh78n2tj] {
    height: 30px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    /* same colour as the top menu (header uses bg-bg-darker) */
    background: var(--color-bg-darker);
    border-top: 1px solid rgba(var(--clr-border-rgb), 0.25);
    font-size: 11px;
    color: var(--clr-text-secondary);
}

.footer-compact a[b-anxh78n2tj] {
    color: var(--clr-text-secondary);
    text-decoration: none;
}

.footer-compact a:hover[b-anxh78n2tj] {
    color: var(--clr-text-bright);
}
/* /Components/UI/AppHeader.razor.rz.scp.css */
/* Header styles are now handled by Tailwind classes */
/* /Components/UI/Fields/FieldAp.razor.rz.scp.css */
/* AP dropdown — same look as the HP one (tactic-select style, no filter), kept narrow. Wider max than HP
   to fit the "0 - Force at start" label. Panel is position:fixed (JS-placed) to escape clipping. */
.hsel[b-x0bo7yi72u] {
    max-width: 140px;
}

.hsel-wrap[b-x0bo7yi72u] {
    position: relative;
    width: 100%;
}

.hsel-trigger[b-x0bo7yi72u] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid rgba(var(--clr-border-rgb), 0.5);
    border-radius: 6px;
    background: rgba(var(--clr-bg-panel-rgb), 0.9);
    color: var(--clr-text-bright);
    cursor: pointer;
    text-align: left;
    font-size: 12px;
    transition: border-color .12s, background .12s;
}

.hsel-trigger:hover[b-x0bo7yi72u],
.hsel-trigger.open[b-x0bo7yi72u] {
    border-color: rgba(var(--clr-border-rgb), 0.9);
    background: rgba(var(--clr-bg-panel-rgb), 1);
}

.hsel-val[b-x0bo7yi72u] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hsel-chevron[b-x0bo7yi72u] {
    margin-left: auto;
    font-size: 11px;
    color: var(--clr-text-secondary);
}

.hsel-backdrop[b-x0bo7yi72u] {
    position: fixed;
    inset: 0;
    z-index: 1999;
    background: transparent;
}

.hsel-panel[b-x0bo7yi72u] {
    position: fixed;
    z-index: 2000;
    max-height: 280px;
    border: 1px solid rgba(var(--clr-border-rgb), 0.85);
    border-radius: 8px;
    background: var(--clr-bg-panel);
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.7);
    overflow: hidden;
}

.hsel-list[b-x0bo7yi72u] {
    overflow-y: auto;
    max-height: 280px;
    padding: 4px;
}

.hsel-row[b-x0bo7yi72u] {
    padding: 6px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    color: var(--clr-text-bright);
    white-space: nowrap;
}

.hsel-row:hover[b-x0bo7yi72u] {
    background: rgba(var(--clr-border-rgb), 0.22);
}

.hsel-row.sel[b-x0bo7yi72u] {
    background: rgba(var(--color-primary-rgb, 90, 170, 255), 0.18);
}
/* /Components/UI/Fields/FieldCheck.razor.rz.scp.css */
.fld-check[b-3t89w771qz] {
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px;
    background:rgba(0,0,0,0.35);
    border:1px solid rgba(var(--clr-border-rgb),0.5);
    color:transparent; font-size:11px; cursor:pointer;
    transition:background 0.1s, border-color 0.1s, color 0.1s;
}

.fld-check:hover:not(:disabled)[b-3t89w771qz] { border-color:var(--clr-orange); color:rgba(var(--clr-orange-rgb),0.6); }
.fld-check.on[b-3t89w771qz] { background:var(--clr-green); border-color:var(--clr-green); color:#0b1218; }
.fld-check:disabled[b-3t89w771qz] { opacity:0.5; cursor:not-allowed; }
/* /Components/UI/Fields/FieldHealth.razor.rz.scp.css */
/* HP dropdown, modeled on the tactic select (trigger + fixed panel) minus the filter. Kept narrow so the
   field doesn't eat inspector width; the panel is position:fixed (placed from JS) to escape clipping. */
.hsel[b-lvcdnohpsq] {
    max-width: 150px;
}

.hsel-wrap[b-lvcdnohpsq] {
    position: relative;
    width: 100%;
}

.hsel-trigger[b-lvcdnohpsq] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid rgba(var(--clr-border-rgb), 0.5);
    border-radius: 6px;
    background: rgba(var(--clr-bg-panel-rgb), 0.9);
    color: var(--clr-text-bright);
    cursor: pointer;
    text-align: left;
    font-size: 12px;
    transition: border-color .12s, background .12s;
}

.hsel-trigger:hover[b-lvcdnohpsq],
.hsel-trigger.open[b-lvcdnohpsq] {
    border-color: rgba(var(--clr-border-rgb), 0.9);
    background: rgba(var(--clr-bg-panel-rgb), 1);
}

.hsel-val[b-lvcdnohpsq] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hsel-chevron[b-lvcdnohpsq] {
    margin-left: auto;
    font-size: 11px;
    color: var(--clr-text-secondary);
}

.hsel-backdrop[b-lvcdnohpsq] {
    position: fixed;
    inset: 0;
    z-index: 1999;
    background: transparent;
}

.hsel-panel[b-lvcdnohpsq] {
    position: fixed;
    z-index: 2000;
    max-height: 280px;
    border: 1px solid rgba(var(--clr-border-rgb), 0.85);
    border-radius: 8px;
    background: var(--clr-bg-panel);
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.7);
    overflow: hidden;
}

.hsel-list[b-lvcdnohpsq] {
    overflow-y: auto;
    max-height: 280px;
    padding: 4px;
}

.hsel-row[b-lvcdnohpsq] {
    padding: 6px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    color: var(--clr-text-bright);
    white-space: nowrap;
}

.hsel-row:hover[b-lvcdnohpsq] {
    background: rgba(var(--clr-border-rgb), 0.22);
}

.hsel-row.sel[b-lvcdnohpsq] {
    background: rgba(var(--color-primary-rgb, 90, 170, 255), 0.18);
}
/* /Components/UI/Fields/TacticCard.razor.rz.scp.css */
/* ── Magic-card layout (coords calibrated to card-frame.png) ────────────────
   name in the top strip, art in the window behind the frame overlay,
   category badge top-right, description in the bottom panel. */
.tactic-card[b-e5wixwjdlw] {
    position: relative;
    width: 100%;
    aspect-ratio: 300 / 400;
    container-type: inline-size;
}

.tc-art[b-e5wixwjdlw] {
    /* Bleed slightly past the frame window on every side; the opaque frame overlay masks the
       overflow, so the art always fills the visible opening (no dark margins). */
    position: absolute;
    top: 12.5%;
    left: 9.5%;
    right: 9.5%;
    height: 43.5%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
}

.tc-art img[b-e5wixwjdlw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tc-frame[b-e5wixwjdlw] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.tc-title[b-e5wixwjdlw] {
    position: absolute;
    top: 2.5%;
    left: 8%;
    right: 8%;
    height: 11%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-shrimp);
    font-size: clamp(10px, 7cqw, 20px);
    line-height: 1.02;
    text-transform: uppercase;
    color: var(--clr-text-bright);
    overflow: hidden;
}

.tc-cat[b-e5wixwjdlw] {
    position: absolute;
    top: 16.5%;
    right: 6%;
    width: 9%;
    height: auto;
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
}

.tc-panel[b-e5wixwjdlw] {
    position: absolute;
    left: 15%;
    right: 15%;
    top: 56%;
    bottom: 10%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2% 2%;
    overflow: hidden;
}

.tc-desc[b-e5wixwjdlw] {
    text-align: center;
    font-size: clamp(11px, 5.3cqw, 18px);
    font-weight: 500;
    line-height: 1.35;
    color: var(--clr-text-bright);
}

.tc-initials[b-e5wixwjdlw] {
    font-family: var(--font-shrimp);
    font-size: clamp(16px, 14cqw, 40px);
    color: var(--clr-text-secondary);
}

/* Fallback when the frame PNG is missing: draw our own chrome + divider. */
.tactic-card.no-frame[b-e5wixwjdlw] {
    border: 1px solid rgba(var(--clr-border-rgb), 0.55);
    border-radius: 10px;
    background: rgba(var(--clr-bg-panel-rgb), 0.9);
}

.tactic-card.no-frame .tc-art[b-e5wixwjdlw] {
    /* No frame to mask overflow: keep the art inside the nominal window. */
    top: 15%;
    left: 13%;
    right: 14%;
    height: 37%;
    border: 1px solid rgba(var(--clr-border-rgb), 0.4);
}

.tactic-card.no-frame .tc-panel[b-e5wixwjdlw] {
    border-top: 1px solid rgba(var(--clr-border-rgb), 0.35);
    top: 56%;
}

/* ── Compact chip (inline deck rows) ───────────────────────────────────────── */
.tactic-chip[b-e5wixwjdlw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border: 1px solid rgba(var(--clr-border-rgb), 0.45);
    border-radius: 8px;
    background: rgba(var(--clr-bg-panel-rgb), 0.85);
}

.tc-thumb[b-e5wixwjdlw] {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tc-thumb img[b-e5wixwjdlw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tactic-chip .tc-initials[b-e5wixwjdlw] {
    font-size: 18px;
}

.tc-chip-name[b-e5wixwjdlw] {
    font-family: var(--font-shrimp);
    font-size: 12px;
    color: var(--clr-text-bright);
}

.tc-chip-cat[b-e5wixwjdlw] {
    width: 16px;
    height: 16px;
    object-fit: contain;
    margin-left: auto;
}
/* /Components/UI/Fields/TacticSelect.razor.rz.scp.css */
/* Custom tactic combobox. The panel + preview are position:fixed (placed from JS-measured
   coords) so they float above the editor's overflow-hidden panels. */
.tsel[b-d88oa2kzns] {
    position: relative;
    width: 100%;
}

.tsel-trigger[b-d88oa2kzns] {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid rgba(var(--clr-border-rgb), 0.5);
    border-radius: 6px;
    background: rgba(var(--clr-bg-panel-rgb), 0.9);
    color: var(--clr-text-bright);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.12s, background 0.12s;
}

.tsel-trigger:hover[b-d88oa2kzns],
.tsel-trigger.open[b-d88oa2kzns] {
    border-color: rgba(var(--clr-border-rgb), 0.9);
    background: rgba(var(--clr-bg-panel-rgb), 1);
}

.tsel-cat[b-d88oa2kzns] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.tsel-name[b-d88oa2kzns] {
    font-family: var(--font-shrimp);
    font-size: 12px;
    line-height: 1.1;
    color: var(--clr-text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tsel-muted[b-d88oa2kzns] {
    color: var(--clr-text-secondary);
}

.tsel-placeholder[b-d88oa2kzns] {
    font-size: 12px;
    color: var(--clr-text-secondary);
}

.tsel-chevron[b-d88oa2kzns] {
    margin-left: auto;
    font-size: 11px;
    color: var(--clr-text-secondary);
}

/* ── Open panel (fixed-positioned) ─────────────────────────────────────────── */
.tsel-backdrop[b-d88oa2kzns] {
    position: fixed;
    inset: 0;
    z-index: 1999;
    background: transparent;
}

.tsel-panel[b-d88oa2kzns] {
    position: fixed;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    max-height: 320px;
    min-width: 200px;
    border: 1px solid rgba(var(--clr-border-rgb), 0.85);
    border-radius: 8px;
    background: var(--clr-bg-panel);
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.7);
    overflow: hidden;
}

.tsel-filter[b-d88oa2kzns] {
    margin: 6px;
    padding: 6px 8px;
    border: 1px solid rgba(var(--clr-border-rgb), 0.5);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.25);
    color: var(--clr-text-primary);
    font-size: 12px;
}

.tsel-filter:focus[b-d88oa2kzns] {
    outline: none;
    border-color: var(--color-primary);
}

/* Underline tabs, matching the inspector's Team A / Team B bar. */
.tsel-tabs[b-d88oa2kzns] {
    display: flex;
    flex: none;
    margin-bottom: 4px;
    background: rgba(0, 0, 0, 0.18);
    border-bottom: 1px solid rgba(var(--clr-border-rgb), 0.25);
}

.tsel-tab[b-d88oa2kzns] {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    background: transparent;
    border: none;
    color: var(--clr-text-secondary);
    cursor: pointer;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    transition: color 0.15s ease;
}

.tsel-tab:hover[b-d88oa2kzns] {
    color: var(--clr-text-bright);
}

.tsel-tab.active[b-d88oa2kzns] {
    color: var(--color-primary);
}

.tsel-tab.active[b-d88oa2kzns]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--color-primary);
}

.tsel-list[b-d88oa2kzns] {
    flex: 1;
    overflow-y: auto;
    padding: 2px 4px 4px;
}

.tsel-row[b-d88oa2kzns] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 7px;
    border-radius: 5px;
    cursor: pointer;
}

.tsel-row:hover[b-d88oa2kzns] {
    background: rgba(var(--clr-border-rgb), 0.22);
}

.tsel-row.sel[b-d88oa2kzns] {
    background: rgba(var(--color-primary-rgb, 90, 170, 255), 0.18);
}

/* ── Floating card preview (fixed; never intercepts the pointer) ────────────── */
.tsel-preview[b-d88oa2kzns] {
    position: fixed;
    z-index: 2001;
    pointer-events: none;
    filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.6));
}
/* /Components/UI/SkeletonPlaceholder.razor.rz.scp.css */
.skeleton-list[b-ko1gri7m11] {
    display: flex;
    flex-direction: column;
}

.skeleton-row[b-ko1gri7m11] {
    background: linear-gradient(
        90deg,
        rgba(var(--clr-border-rgb), 0.06) 0%,
        rgba(var(--clr-border-rgb), 0.18) 50%,
        rgba(var(--clr-border-rgb), 0.06) 100%
    );
    background-size: 200% 100%;
    border: 1px solid rgba(var(--clr-border-rgb), 0.12);
    animation: skeleton-shimmer-b-ko1gri7m11 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer-b-ko1gri7m11 {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}