/* Frontier Guild reusable SVG UI art system. */

:root {
    --ac-bg-0: #08090b;
    --ac-bg-1: #0d0f12;
    --ac-panel-0: #111318;
    --ac-panel-1: #171a20;
    --ac-panel-2: #20242b;
    --ac-panel-3: #282c34;

    --ac-leather-0: #100b07;
    --ac-leather-1: #1b120b;
    --ac-leather-2: #2b1d12;
    --ac-wood-0: #1a1008;
    --ac-wood-1: #2a1b0e;
    --ac-iron-0: #17191d;
    --ac-iron-1: #252a31;
    --ac-steel-0: #3e4651;
    --ac-steel-1: #7f8792;

    --ac-gold-hi: #e6c36f;
    --ac-gold: #c6a15b;
    --ac-gold-mid: #a98443;
    --ac-gold-sh: #6d5326;
    --ac-brass-dark: #4a3417;

    --ac-parch-0: #f1e3bf;
    --ac-parch-1: #e3d4a8;
    --ac-parch-2: #c7b47f;
    --ac-parch-ink: #2c2418;

    --ac-text: #e3d4a8;
    --ac-text-strong: #f0dfb8;
    --ac-text-muted: #a89977;
    --ac-text-dim: #746b5a;

    --ac-focus: #5b7fb2;
    --ac-selected: #e0bd63;
    --ac-danger: #8e2f2f;
    --ac-danger-hi: #c44d3d;
    --ac-warning: #c89238;
    --ac-success: #557e45;
    --ac-locked: #6a6255;
    --ac-disabled: #4c535c;
    --ac-magic: #7a4fa3;
    --ac-cold: #6f9fc9;

    --ac-scrim-heavy: rgba(0, 0, 0, .62);
    --ac-scrim-medium: rgba(0, 0, 0, .46);
    --ac-scrim-light: rgba(0, 0, 0, .28);
    --ac-panel-alpha: rgba(13, 15, 18, .88);
    --ac-panel-alpha-light: rgba(17, 19, 24, .76);
    --ac-parch-alpha: rgba(227, 212, 168, .92);

    --ac-grid: 8px;
    --ac-radius-sm: 4px;
    --ac-radius-md: 7px;
    --ac-radius-lg: 10px;
    --ac-frame-slice-sm: 16px;
    --ac-frame-slice-md: 24px;
    --ac-frame-slice-lg: 32px;

    --ac-stroke-hair: 1px;
    --ac-stroke-main: 2px;
    --ac-stroke-heavy: 3px;

    --ac-shadow-tight: 0 2px 3px rgba(0, 0, 0, .55);
    --ac-shadow-panel: 0 14px 38px rgba(0, 0, 0, .55);
    --ac-shadow-overlay: 0 28px 80px rgba(0, 0, 0, .72);
    --ac-glow-gold-soft: 0 0 18px rgba(198, 161, 91, .22);
    --ac-glow-focus: 0 0 0 2px rgba(91, 127, 178, .82), 0 0 16px rgba(91, 127, 178, .30);

    --ac-ease-out: cubic-bezier(.16, 1, .3, 1);
    --ac-ease-in: cubic-bezier(.7, 0, .84, 0);
    --ac-ease-standard: cubic-bezier(.2, .8, .2, 1);
    --ac-t-fast: 80ms;
    --ac-t-hover: 120ms;
    --ac-t-panel: 180ms;
    --ac-t-transition: 520ms;
}

.ac-material-leather,
.ac-material-slate,
.ac-material-parchment {
    position: relative;
}

.ac-material-leather {
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.22)),
        radial-gradient(800px 200px at 50% 0%, rgba(198,161,91,.07), transparent 70%),
        linear-gradient(180deg, var(--ac-leather-2), var(--ac-leather-0));
}

.ac-material-slate {
    background:
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.30)),
        radial-gradient(900px 340px at 50% -20%, rgba(91,127,178,.08), transparent 68%),
        linear-gradient(180deg, var(--ac-panel-2), var(--ac-panel-0));
}

.ac-material-parchment {
    color: var(--ac-parch-ink);
    background:
        linear-gradient(180deg, rgba(255,255,255,.20), rgba(80,45,12,.08)),
        radial-gradient(900px 300px at 50% 0%, rgba(255,255,255,.16), transparent 60%),
        linear-gradient(180deg, var(--ac-parch-0), var(--ac-parch-1));
}

.ac-noise::after,
.ac-frame::after,
.ac-button::after,
.ac-chip::after,
.ac-list-row::after,
.ac-portrait-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .08;
    mix-blend-mode: overlay;
    background-image:
        radial-gradient(circle at 12% 22%, #fff 0 1px, transparent 1px),
        radial-gradient(circle at 72% 61%, #000 0 1px, transparent 1px);
    background-size: 37px 29px, 43px 31px;
}

.ac-frame {
    --ac-frame-corner-size: var(--ac-frame-slice-md);
    position: relative;
    min-width: 0;
    color: var(--ac-text);
    border: var(--ac-stroke-hair) solid rgba(198, 161, 91, .42);
    border-radius: var(--ac-radius-md);
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.28)),
        linear-gradient(180deg, var(--ac-panel-2), var(--ac-panel-0));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.055),
        inset 0 -1px 0 rgba(0,0,0,.55),
        var(--ac-shadow-panel);
    overflow: hidden;
}

.ac-frame::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(198, 161, 91, .27);
    border-radius: calc(var(--ac-radius-md) - 2px);
    pointer-events: none;
}

.ac-frame::after {
    opacity: .06;
}

.ac-frame__chrome {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.ac-frame__content {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.ac-frame__corner {
    position: absolute;
    width: var(--ac-frame-corner-size);
    height: var(--ac-frame-corner-size);
    color: var(--ac-gold);
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .70));
}

.ac-frame__corner--tl { top: 3px; left: 3px; }
.ac-frame__corner--tr { top: 3px; right: 3px; transform: rotate(90deg); }
.ac-frame__corner--br { right: 3px; bottom: 3px; transform: rotate(180deg); }
.ac-frame__corner--bl { bottom: 3px; left: 3px; transform: rotate(270deg); }

.ac-frame__crest {
    position: absolute;
    top: 0;
    left: 50%;
    width: 58px;
    height: 20px;
    transform: translate(-50%, -1px);
    color: var(--ac-gold);
}

.ac-frame--compact {
    --ac-frame-corner-size: var(--ac-frame-slice-sm);
}

.ac-frame--large,
.ac-frame--overlay90 {
    --ac-frame-corner-size: var(--ac-frame-slice-lg);
}

.ac-frame--heraldic {
    border-color: rgba(230, 195, 111, .60);
}

.ac-frame--workshop {
    border-color: rgba(166, 128, 64, .42);
    background:
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.32)),
        linear-gradient(180deg, var(--ac-iron-1), var(--ac-iron-0));
}

.ac-frame--monster,
.ac-frame[data-ac-state="danger"] {
    border-color: rgba(196, 77, 61, .48);
}

.ac-frame--parchment {
    color: var(--ac-parch-ink);
    border-color: rgba(109, 83, 38, .55);
    background:
        linear-gradient(180deg, rgba(255,255,255,.20), rgba(80,45,12,.08)),
        linear-gradient(180deg, var(--ac-parch-0), var(--ac-parch-1));
}

.ac-frame--overlay,
.ac-frame--overlay90 {
    background:
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.24)),
        rgba(12, 14, 17, .88);
    box-shadow: var(--ac-shadow-overlay);
}

.ac-frame[data-ac-state="selected"],
.ac-frame[data-ac-selected="true"] {
    border-color: var(--ac-selected);
    box-shadow: var(--ac-shadow-panel), var(--ac-glow-gold-soft);
}

.ac-frame[data-ac-state="disabled"],
.ac-frame[data-ac-state="locked"] {
    filter: saturate(.45);
    opacity: .72;
}

.ac-panel {
    padding: 18px;
}

.ac-panel--compact { padding: 12px; }
.ac-panel--large { padding: 26px; }
.ac-panel--overlay90 {
    width: min(100%, 1480px);
    max-width: calc(100vw - 32px);
    min-height: min(70vh, 720px);
    max-height: min(90vh, 860px);
    overflow: auto;
    padding: 28px;
    box-sizing: border-box;
}

.ac-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 0 22px 10px;
    border-bottom: 1px solid rgba(198, 161, 91, .28);
}

.ac-panel__title {
    margin: 0;
    color: var(--ac-gold-hi);
    font-family: var(--font-display, Georgia, serif);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ac-panel__body {
    position: relative;
    min-width: 0;
}

.ac-panel__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(198, 161, 91, .18);
}

.ac-button {
    position: relative;
    min-width: 44px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    color: var(--ac-text);
    background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.26)),
        linear-gradient(180deg, #2b2117, #14100c);
    border: 1px solid var(--ac-gold-sh);
    border-radius: var(--ac-radius-md);
    box-shadow:
        inset 0 1px 0 rgba(230,195,111,.22),
        inset 0 -1px 0 rgba(0,0,0,.55),
        0 2px 4px rgba(0,0,0,.38);
    font: 700 .84rem/1.2 var(--font-display, Georgia, serif);
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        transform 50ms var(--ac-ease-out),
        filter var(--ac-t-hover) var(--ac-ease-out),
        border-color var(--ac-t-hover) var(--ac-ease-out),
        box-shadow var(--ac-t-hover) var(--ac-ease-out);
}

.ac-button:hover:not(:disabled):not([aria-disabled="true"]) {
    filter: brightness(1.06);
    border-color: var(--ac-gold-hi);
    box-shadow:
        inset 0 1px 0 rgba(230,195,111,.34),
        inset 0 -1px 0 rgba(0,0,0,.55),
        0 0 14px rgba(198,161,91,.18),
        0 2px 4px rgba(0,0,0,.38);
}

.ac-button:active:not(:disabled):not([aria-disabled="true"]),
.ac-button[data-pressed="true"] {
    transform: translateY(1px);
    filter: brightness(.92);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.55);
}

.ac-button:focus-visible,
.ac-icon-button:focus-visible,
.ac-list-row:focus-visible,
.ac-tabs__tab:focus-visible,
.ac-tooltip:focus-visible {
    outline: none;
    box-shadow: var(--ac-glow-focus), inset 0 1px 0 rgba(230,195,111,.20);
}

.ac-button:disabled,
.ac-button[aria-disabled="true"] {
    opacity: .48;
    cursor: not-allowed;
    filter: saturate(.35);
}

.ac-button--primary {
    color: #211909;
    border-color: #8a6a22;
    background:
        linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.18)),
        linear-gradient(180deg, var(--ac-gold-hi), var(--ac-gold) 45%, var(--ac-gold-sh));
}

.ac-button--secondary {
    background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.30)),
        linear-gradient(180deg, var(--ac-iron-1), var(--ac-iron-0));
}

.ac-button--danger {
    border-color: #6b2a25;
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.30)),
        linear-gradient(180deg, #512018, #1a0d0b);
}

.ac-button--ghost {
    background: rgba(10, 11, 13, .32);
}

.ac-button--small {
    min-height: 28px;
    padding: 6px 12px;
    font-size: .75rem;
}

.ac-button--large {
    min-height: 46px;
    padding: 11px 20px;
    font-size: .92rem;
}

.ac-button[data-ac-selected="true"] {
    border-color: var(--ac-selected);
    box-shadow:
        inset 0 0 0 1px rgba(230, 195, 111, .42),
        var(--ac-glow-gold-soft);
}

.ac-button__icon,
.ac-svg-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: currentColor;
}

.ac-button--small .ac-button__icon {
    width: 16px;
    height: 16px;
}

.ac-button__label {
    position: relative;
    z-index: 1;
}

.ac-button__busy {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    animation: ac-spin .8s linear infinite;
}

.ac-icon-button {
    width: 44px;
    height: 44px;
    padding: 0;
}

.ac-chip {
    position: relative;
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    color: var(--ac-text-muted);
    border: 1px solid rgba(198, 161, 91, .24);
    border-radius: 999px;
    background: rgba(10, 11, 13, .58);
    font: 700 .73rem/1.1 var(--font-body, system-ui, sans-serif);
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
}

.ac-chip--common { color: #d6d6d0; border-color: rgba(214,214,208,.30); }
.ac-chip--uncommon,
.ac-chip--success { color: #9fc78d; border-color: rgba(85,126,69,.70); }
.ac-chip--rare,
.ac-chip--cold { color: #91bfe0; border-color: rgba(111,159,201,.70); }
.ac-chip--epic,
.ac-chip--magic { color: #c79ce8; border-color: rgba(122,79,163,.72); }
.ac-chip--legendary { color: var(--ac-gold-hi); border-color: rgba(230,195,111,.78); }
.ac-chip--danger { color: #e49a86; border-color: rgba(196,77,61,.70); }
.ac-chip--warning { color: #e0b46a; border-color: rgba(200,146,56,.70); }
.ac-chip--locked { color: var(--ac-text-dim); border-color: rgba(106,98,85,.65); filter: saturate(.45); }

.ac-chip__icon {
    width: 14px;
    height: 14px;
}

.ac-badge {
    position: relative;
    width: var(--ac-badge-size, 34px);
    height: var(--ac-badge-size, 34px);
    display: inline-grid;
    place-items: center;
    color: var(--ac-text);
    border: 1px solid rgba(198, 161, 91, .48);
    background:
        radial-gradient(circle at 50% 24%, rgba(230,195,111,.20), transparent 46%),
        linear-gradient(180deg, var(--ac-panel-2), var(--ac-panel-0));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--ac-shadow-tight);
    font: 800 .78rem/1 var(--font-display, Georgia, serif);
}

.ac-badge--circle { border-radius: 999px; }
.ac-badge--square { border-radius: var(--ac-radius-sm); }
.ac-badge--diamond { transform: rotate(45deg); }
.ac-badge--diamond > * { transform: rotate(-45deg); }
.ac-badge--hex { clip-path: polygon(24% 0, 76% 0, 100% 50%, 76% 100%, 24% 100%, 0 50%); }
.ac-badge--shield { clip-path: polygon(14% 0, 86% 0, 92% 44%, 50% 100%, 8% 44%); }
.ac-badge--skull,
.ac-badge--star { border-radius: 45% 45% 38% 38%; }

.ac-badge--danger { color: #f0b19e; border-color: rgba(196,77,61,.75); }
.ac-badge--success { color: #b5dfa4; border-color: rgba(85,126,69,.75); }
.ac-badge--magic { color: #d7b1ef; border-color: rgba(122,79,163,.75); }
.ac-badge--cold { color: #aad2ee; border-color: rgba(111,159,201,.75); }
.ac-badge--legendary { color: var(--ac-gold-hi); border-color: rgba(230,195,111,.85); }

.ac-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    width: 100%;
    color: var(--ac-gold);
    margin: 12px 0;
}

.ac-divider::before,
.ac-divider::after {
    content: "";
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor);
    opacity: .55;
}

.ac-divider::after {
    background: linear-gradient(90deg, currentColor, transparent);
}

.ac-divider__mark {
    width: 36px;
    height: 16px;
}

.ac-divider--thin .ac-divider__mark { display: none; }
.ac-divider--danger { color: #c46d5e; }
.ac-divider--cold { color: var(--ac-cold); }

.ac-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    align-items: end;
}

.ac-tabs--pill {
    gap: 6px;
}

.ac-tabs__tab {
    min-height: 36px;
    padding: 8px 16px;
    color: var(--ac-text-muted);
    border: 1px solid rgba(198, 161, 91, .26);
    border-bottom-color: rgba(198, 161, 91, .16);
    background:
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.28)),
        var(--ac-panel-1);
    font: 700 .78rem/1 var(--font-display, Georgia, serif);
    letter-spacing: 0;
    text-transform: uppercase;
    cursor: pointer;
}

.ac-tabs__tab:hover:not(:disabled) {
    color: var(--ac-text);
    border-color: rgba(230,195,111,.54);
}

.ac-tabs__tab[aria-selected="true"] {
    color: var(--ac-gold-hi);
    border-color: rgba(230,195,111,.70);
    background:
        linear-gradient(180deg, rgba(230,195,111,.08), rgba(0,0,0,.24)),
        var(--ac-panel-2);
}

.ac-tabs--pill .ac-tabs__tab {
    border-radius: 999px;
}

.ac-list-row {
    position: relative;
    width: 100%;
    min-height: 54px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: var(--ac-text);
    text-align: left;
    border: 1px solid rgba(198, 161, 91, .22);
    border-radius: var(--ac-radius-md);
    background:
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.24)),
        rgba(10, 11, 13, .66);
    cursor: pointer;
    overflow: hidden;
    transition:
        background var(--ac-t-hover) var(--ac-ease-out),
        border-color var(--ac-t-hover) var(--ac-ease-out),
        filter var(--ac-t-hover) var(--ac-ease-out);
}

.ac-list-row::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: transparent;
}

.ac-list-row:hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: rgba(230,195,111,.62);
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.22)),
        rgba(21, 18, 13, .78);
}

.ac-list-row:hover::before,
.ac-list-row[data-ac-selected="true"]::before {
    background: var(--ac-gold);
}

.ac-list-row:active:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(1px);
    filter: brightness(.95);
}

.ac-list-row[data-ac-selected="true"] {
    border-color: var(--ac-selected);
    box-shadow: inset 0 0 0 1px rgba(230,195,111,.28);
}

.ac-list-row:disabled,
.ac-list-row[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .48;
    filter: saturate(.35);
}

.ac-list-row__icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: var(--ac-gold-hi);
    border: 1px solid rgba(198, 161, 91, .28);
    border-radius: var(--ac-radius-sm);
    background: rgba(0, 0, 0, .24);
}

.ac-list-row__title {
    display: block;
    color: var(--ac-text-strong);
    font: 700 .92rem/1.15 var(--font-display, Georgia, serif);
}

.ac-list-row__subtitle {
    display: block;
    margin-top: 4px;
    color: var(--ac-text-muted);
    font-size: .8rem;
    line-height: 1.25;
}

.ac-list-row__chips {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ac-list-row__value {
    color: var(--ac-gold-hi);
    font-weight: 800;
    white-space: nowrap;
}

.ac-portrait-frame {
    --ac-portrait-size: 80px;
    position: relative;
    width: var(--ac-portrait-size);
    height: var(--ac-portrait-size);
    display: grid;
    place-items: center;
    color: var(--ac-text);
    border: 1px solid rgba(198, 161, 91, .58);
    background:
        radial-gradient(circle at 50% 30%, rgba(230,195,111,.14), transparent 46%),
        linear-gradient(180deg, var(--ac-panel-2), var(--ac-panel-0));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--ac-shadow-tight);
    overflow: hidden;
}

.ac-portrait-frame--round,
.ac-portrait-frame--medallion { border-radius: 999px; }
.ac-portrait-frame--square { border-radius: var(--ac-radius-md); }
.ac-portrait-frame--arched { border-radius: 46% 46% var(--ac-radius-md) var(--ac-radius-md); }
.ac-portrait-frame--shield { clip-path: polygon(12% 0, 88% 0, 96% 48%, 50% 100%, 4% 48%); }

.ac-portrait-frame--monster {
    border-color: rgba(196, 77, 61, .62);
}

.ac-portrait-frame[data-ac-state="selected"] {
    border-color: var(--ac-selected);
    box-shadow: var(--ac-shadow-tight), var(--ac-glow-gold-soft);
}

.ac-portrait-frame[data-ac-state="disabled"],
.ac-portrait-frame[data-ac-state="dead"] {
    opacity: .58;
    filter: grayscale(.85) saturate(.35);
}

.ac-portrait-frame[data-ac-state="wounded"] {
    border-color: rgba(196, 77, 61, .80);
}

.ac-portrait-frame[data-ac-state="enraged"] {
    border-color: rgba(196, 77, 61, .95);
    box-shadow: var(--ac-shadow-tight), 0 0 20px rgba(196,77,61,.28);
}

.ac-portrait-frame__image {
    width: 84%;
    height: 84%;
    object-fit: cover;
    border-radius: inherit;
}

.ac-portrait-frame__initials {
    font: 800 1.2rem/1 var(--font-display, Georgia, serif);
    color: var(--ac-gold-hi);
}

.ac-portrait-frame__badge {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 28px;
    height: 24px;
    display: grid;
    place-items: center;
    color: #211909;
    background: linear-gradient(180deg, var(--ac-gold-hi), var(--ac-gold-sh));
    border: 1px solid rgba(0,0,0,.55);
    font: 800 .72rem/1 var(--font-display, Georgia, serif);
}

.ac-scene-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: grid;
    place-items: center;
    padding: clamp(10px, 3vw, 24px);
    box-sizing: border-box;
    overflow: hidden;
}

.ac-scene-overlay__scrim {
    position: absolute;
    inset: 0;
    /* readable over busy room art, but the scene still shows through at the centre */
    background:
        radial-gradient(900px 560px at 50% 48%, rgba(0,0,0,.22), rgba(0,0,0,.66)),
        rgba(0,0,0,.46);
}

.ac-scene-overlay__panel {
    position: relative;
    z-index: 1;
    /* stronger blur + slight darken reads as a solid object in front of the room, not a ghost */
    backdrop-filter: blur(3px) saturate(.78) brightness(.9);
}

.ac-overlay-enter .ac-scene-overlay__scrim {
    animation: ac-scrim-in 140ms var(--ac-ease-out) both;
}

.ac-overlay-enter .ac-scene-overlay__panel {
    transform-origin: center center;
    animation: ac-panel-in 190ms var(--ac-ease-out) both;
}

.ac-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.ac-tooltip__bubble {
    position: absolute;
    z-index: 50;
    left: 50%;
    bottom: calc(100% + 10px);
    width: max-content;
    max-width: min(320px, 80vw);
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 80ms var(--ac-ease-out), visibility 80ms var(--ac-ease-out);
}

.ac-tooltip:hover .ac-tooltip__bubble,
.ac-tooltip:focus-within .ac-tooltip__bubble,
.ac-tooltip:focus-visible .ac-tooltip__bubble {
    opacity: 1;
    visibility: visible;
}

.ac-tooltip__title {
    margin: 0 0 5px;
    color: var(--ac-gold-hi);
    font: 700 .86rem/1.1 var(--font-display, Georgia, serif);
}

.ac-tooltip__body {
    color: var(--ac-text);
    font-size: .82rem;
    line-height: 1.35;
}

.ac-tooltip__footer {
    margin-top: 8px;
    padding-top: 6px;
    color: var(--ac-text-muted);
    border-top: 1px solid rgba(198,161,91,.20);
    font-size: .75rem;
}

.ac-showcase {
    width: min(1440px, 100%);
    display: grid;
    gap: 18px;
    padding: 20px 0 70px;
}

.ac-showcase__hero {
    display: grid;
    gap: 10px;
}

.ac-showcase__hero h1 {
    margin: 0;
    color: var(--ac-gold-hi);
    font-family: var(--font-display, Georgia, serif);
    font-size: 2.25rem;
    letter-spacing: 0;
}

.ac-showcase__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.ac-showcase__stack {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ac-showcase__row-grid {
    display: grid;
    gap: 8px;
}

.ac-showcase__backgrounds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.ac-showcase__scene {
    min-height: 360px;
    display: grid;
    align-items: stretch;
    padding: 18px;
    border-radius: var(--ac-radius-lg);
    background-position: center;
    background-size: cover;
    box-shadow: inset 0 0 90px rgba(0,0,0,.52), var(--ac-shadow-panel);
}

.ac-showcase__scene--forest {
    background-image: url("../art/ui/reference-backgrounds/forest_normal_field_camp.webp");
}

.ac-showcase__scene--badlands {
    background-image: url("../art/ui/reference-backgrounds/badlands_field_camp.webp");
}

.ac-showcase__scene--ice {
    background-image: url("../art/ui/reference-backgrounds/ice_field_camp.webp");
}

.ac-showcase__overlay-card {
    align-self: center;
    min-width: 0;
}

.ac-swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
}

.ac-swatch {
    min-height: 58px;
    display: grid;
    align-content: end;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--ac-radius-sm);
    color: var(--ac-text);
    background: var(--swatch);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    font-size: .75rem;
}

.field-camp-empty.ac-panel {
    margin-top: 12vh;
}

.field-camp-art-panel {
    min-width: 0;
}

.field-camp-art-panel .ac-list-row {
    min-height: 82px;
}

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

@keyframes ac-panel-in {
    from { opacity: 0; transform: translateY(8px) scale(.985); filter: brightness(.92); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

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

@media (max-width: 720px) {
    .ac-panel--overlay90 {
        width: 100%;
        max-width: calc(100vw - 20px);
        min-height: 60vh;
        padding: 18px;
    }

    .ac-list-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .ac-list-row__chips,
    .ac-list-row__value {
        grid-column: 2;
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ac-button,
    .ac-icon-button,
    .ac-list-row,
    .ac-tabs__tab,
    .ac-scene-overlay__scrim,
    .ac-scene-overlay__panel,
    .ac-button__busy {
        animation-duration: 1ms !important;
        transition-duration: 1ms !important;
    }
}