/* Keep the main inventory shell, portrait density and realm sections. */
html:has(.classic-roster),body.classic-roster {
    background:var(--color-bg-dark);
}
.classic-overlay {
    position:fixed;
    inset:0;
    background:#000b;
    z-index:0;
    pointer-events:none;
}
.classic-roster .bg-image {
    z-index:0;
}
.classic-roster .roster-shell {
    position:relative;
    z-index:1;
    max-width:1220px;
    padding:20px 30px 40px;
}
.classic-back {
    margin-bottom:20px;
}
.classic-roster .back-link {
    display:inline-flex;
    min-height:40px;
    align-items:center;
    padding:8px 14px;
    border:1px solid var(--color-border);
    border-radius:var(--radius-sm);
    background:#333;
    color:#ccc;
    font-size:.9rem;
    font-weight:600;
}
.classic-roster .inventory-shell {
    padding:20px;
    background:rgba(30,30,34,.94);
}
.classic-roster .inventory-summary {
    align-items:center;
}
.classic-roster h1 {
    font-size:1.35rem;
    letter-spacing:normal;
    line-height:1.3;
}
.classic-roster .summary-counts span {
    font-size:.85rem;
}
.classic-tabs-row {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:12px;
    border-bottom:1px solid #444;
    margin-bottom:16px;
    flex-wrap:wrap;
}
.classic-roster .page-tabs {
    border:0;
    margin:0;
    padding-left:10px;
    gap:0;
    max-width:100%;
}
.classic-roster .page-tabs button {
    min-width:100px;
    border:1px solid #444;
    border-bottom:0;
    border-radius:8px 8px 0 0;
    padding:10px 16px;
    color:#888;
    background:#2a2a2e;
    font-size:.95rem;
    min-height:44px;
}
.classic-roster .page-tabs button[aria-current] {
    background:#38383e;
    color:var(--color-accent);
    box-shadow:none;
    font-weight:600;
}
.classic-roster .capture-actions {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    padding-bottom:8px;
}
.classic-roster .capture-actions button {
    font-size:.85rem;
}
.classic-roster .capture-actions .primary-action {
    background:var(--color-link-blue);
    border-color:var(--color-link-blue);
    color:#fff;
}
.classic-roster .search-wrap {
    width:100%;
    min-width:0;
}
.classic-filters {
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap;
    margin:12px 0;
}
.classic-filters .segmented {
    gap:8px;
}
.classic-roster .classic-filters .segmented button {
    border-radius:6px;
    margin:0;
    padding:.45rem .65rem;
    background:#2a2a2a;
    min-height:40px;
    font-size:.85rem;
}
.classic-roster .segmented button[aria-pressed=true] {
    border-color:var(--color-accent);
    background:#2a2a2a;
    color:var(--color-accent);
}
.classic-bulk {
    display:flex;
    gap:8px;
    margin-left:auto;
    flex-wrap:wrap;
}
.classic-bulk button {
    font-size:.8rem;
}
.classic-tools {
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    padding:8px 0;
    border-top:1px solid #38383d;
}
.classic-tools .check-line {
    margin:0;
    min-height:40px;
}
.classic-tools>button {
    font-size:.8rem;
}
.inventory-extra-filters {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    flex-basis:100%;
    min-width:0;
    gap:.5rem 1rem;
}
.inventory-extra-filters label {
    display:flex;
    gap:.5rem;
    align-items:center;
    flex-wrap:wrap;
    min-width:0;
    min-height:2.75rem;
    font-size:.85rem;
}
.classic-preview-note {
    color:#999;
    font-size:.75rem;
    margin-left:auto;
}
.classic-roster .list-meta {
    margin:4px 0 12px;
    font-size:.75rem;
}
.classic-roster .page-footer {
    margin-top:20px;
}
.classic-roster #inventory-grid.classic-groups {
    display:flex;
    flex-direction:column;
    gap:18px;
}
.classic-roster .relems-character-grid,.classic-roster #inventory-grid.classic-wheels {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
    align-items:start;
    gap:12px;
}
.classic-roster .relems-section-title {
    font-size:.95rem;
    line-height:1.4;
}
.classic-roster .character-card {
    background:var(--color-bg-card);
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    padding:9px;
    gap:8px;
    overflow:visible;
    min-width:0;
    display:flex;
    flex-direction:column;
}
.classic-roster .character-card.selected {
    border-color:var(--color-accent);
    box-shadow:0 0 0 1px #ffc10735;
}
.classic-roster .character-card.is-selected {
    outline:2px solid #eee;
    outline-offset:2px;
    box-shadow:none;
}
.classic-roster .character-card .compact-select {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    position:relative;
    background:transparent;
    border:0;
    border-radius:0;
    padding:0;
    width:100%;
    min-width:0;
    min-height:44px;
    line-height:1.4;
}
.classic-roster .compact-select:hover {
    background:transparent;
}
.classic-roster .compact-select img {
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:1/1.08;
    object-fit:cover;
    border:1px solid #3f3f3f;
    border-radius:6px;
    filter:none;
    opacity:1;
    background:#111;
}
.classic-roster .not-owned .compact-select img {
    filter:none;
    opacity:1;
}
.classic-roster .wheel-card .compact-select img {
    object-fit:contain;
}
.classic-roster .inventory-card-name {
    width:100%;
    color:#eee;
    font-weight:600;
    font-size:.85rem;
    text-align:center;
    overflow-wrap:anywhere;
}
.classic-roster .check-mark {
    position:absolute;
    right:-3px;
    top:-3px;
    background:var(--color-accent);
    color:#151515;
    width:24px;
    height:24px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    z-index:1;
    display:none;
}
.classic-roster .compact-select[aria-pressed=true] .check-mark {
    display:flex;
}
.classic-roster .compact-level {
    font-size:.75rem;
    color:#aaa;
    text-align:center;
    margin:0;
    margin-block:-4px;
    min-height:24px;
    width:100%;
    padding:0;
    border:0;
    background:transparent;
    line-height:1.4;
    cursor:pointer;
}
.classic-roster .compact-level:hover { color:var(--color-text-primary); background:var(--color-bg-elevated); }
.classic-roster .growth-entry {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1px;
    width:100%;
    font-size:.78rem;
    line-height:1.3;
    padding:5px 2px;
    min-height:44px;
    background:transparent;
    border-color:#444;
}
.growth-entry small {
    font-size:.7rem;
    color:#aaa;
}
.classic-roster .classic-stepper {
    display:grid;
    grid-template-columns:24px minmax(0,1fr) 24px;
    align-items:center;
    width:100%;
    border:1px solid #555;
    border-radius:16px;
    background:#252525;
}
.classic-roster .classic-stepper button {
    min-width:24px;
    min-height:32px;
    border:0;
    background:transparent;
    padding:0;
    font-size:.8rem;
    border-radius:16px;
}
.classic-stepper span {
    text-align:center;
    font-size:.8rem;
    overflow-wrap:anywhere;
}
.classic-roster .card-growth {
    margin:0;
    padding:8px 0 0;
    border-top:1px solid #444;
    width:100%;
}
.classic-roster .stat-line {
    display:flex;
    font-size:.75rem;
    gap:4px;
    flex-wrap:wrap;
}
.classic-roster .stat-line strong {
    font-size:.8rem;
}
.classic-roster .card-skill {
    margin-top:8px;
    padding-top:8px;
}
.classic-roster .card-skill summary {
    min-height:40px;
    font-size:.75rem;
    display:flex;
    gap:4px;
    align-items:center;
    cursor:pointer;
    list-style:none;
}
.classic-roster .card-skill summary:before {
    content:'›';
    font-size:1rem;
}
.classic-roster .card-skill[open] summary:before {
    transform:rotate(90deg);
}
.classic-roster .card-skill summary::-webkit-details-marker {
    display:none;
}
.classic-roster .card-skill .stat-line {
    display:block;
    overflow-wrap:anywhere;
}
.classic-roster .card-skill dd {
    color:#ddd;
}
.classic-roster .card-skill dt {
    color:#aaa;
}
.classic-roster .missing-data {
    font-size:.75rem;
}
.classic-roster .team-intro {
    margin:16px 0;
}
.classic-roster .team-member img {
    border:1px solid #444;
}
.classic-roster .team-card {
    background:var(--color-bg-card);
    border-color:var(--color-border);
}
.classic-roster .team-filters {
    background:#252529;
}
.classic-roster .team-view-switch button {
    font-size:.85rem;
}
.classic-roster .dialog-heading h2 {
    margin:0;
}
.classic-roster #share-preview {
    display:block;
    width:100%;
    height:auto;
}
.classic-roster .toast {
    z-index:25;
}
.classic-roster dialog {
    z-index:30;
}
.classic-roster #bulk-bar {
    z-index:5;
}
.classic-roster:has(#bulk-bar:not([hidden])) .roster-shell {
    padding-bottom:2rem;
}
@media(max-width:767px) {
    .classic-roster .roster-shell {
        padding:16px 15px 30px;
    }
    .classic-roster .inventory-shell {
        padding:14px;
    }
    .classic-roster .inventory-summary {
        gap:12px;
        align-items:start;
        flex-direction:column;
    }
    .classic-roster .summary-counts {
        justify-content:start;
    }
    .classic-roster h1 {
        font-size:1.2rem;
    }
    .classic-roster .classic-tabs-row {
        gap:8px;
    }
    .classic-roster .page-tabs {
        padding-left:0;
        width:100%;
    }
    .classic-roster .page-tabs button {
        min-width:0;
        flex:1;
        font-size:.85rem;
        padding:10px 12px;
    }
    .classic-roster .capture-actions {
        gap:6px;
    }
    .classic-roster .capture-actions button {
        padding:8px 10px;
        font-size:.8rem;
    }
    .classic-filters {
        gap:8px;
    }
    .classic-bulk {
        margin-left:0;
    }
    .classic-tools {
        gap:8px;
    }
    .classic-preview-note {
        width:100%;
        margin-left:0;
        font-size:.7rem;
    }
    .classic-roster .character-card {
        padding:9px;
    }
    .classic-roster .card-growth .stat-line {
        display:flex;
    }
    .classic-roster .team-members {
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
    .classic-roster .team-member img {
        aspect-ratio:1/1.08;
        width:100%;
        max-width:80px;
    }
    .classic-roster .team-filters label {
        width:100%;
    }
    .classic-roster .team-filters select {
        flex:1;
        max-width:100%;
    }
    .classic-roster #bulk-bar {
        padding:12px;
    }
    .classic-roster .team-intro h2 {
        font-size:1rem;
    }
}
@media(max-width:379px) {
    .classic-roster .roster-shell {
        padding:12px 10px 24px;
    }
    .classic-roster .inventory-shell {
        padding:10px;
    }
    .classic-roster .relems-character-grid,.classic-roster #inventory-grid.classic-wheels {
        grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
        gap:10px;
    }
    .classic-roster .page-tabs button {
        padding:10px 8px;
    }
    .classic-roster .team-members {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
.classic-roster #preview-image-button {
    width:auto;
    max-width:none;
    max-height:none;
}
.classic-roster .character-card .compact-select[aria-pressed=false] .check-mark {
    display:flex;
    background:#222b;
    border:1px solid #666;
    color:transparent;
}

.classic-roster .back-link {
    margin-bottom: 0;
}
/* Growth values are always visible; the thumbnail and realm grouping stay intact. */
.classic-roster .classic-stepper {
    grid-template-columns:24px minmax(0,1fr) 24px;
    border:0;
    border-radius:0;
    background:transparent;
    gap:0;
}
.classic-roster .potency-badge {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:0;
    min-height:28px;
    min-width:0;
}
.classic-roster .potency-diamond {
    display:block;
    width:16px;
    height:16px;
    object-fit:contain;
}
.classic-roster .potency-diamond.unlit { opacity:.22; filter:grayscale(1); }
.classic-roster .potency-number { position:relative; display:inline-grid; place-items:center; width:22px; height:22px; flex-shrink:0; }
.classic-roster .potency-number>img:first-child { width:100%; height:100%; object-fit:contain; }
.classic-roster .potency-number>span { position:absolute; color:#242424; font-size:.75rem; font-weight:700; line-height:1; }
.classic-roster .potency-number .potency-max { position:absolute; width:16px; height:16px; object-fit:contain; }
.classic-roster .potency-unknown { color:var(--color-text-muted); font-size:.75rem; }
.classic-roster .unowned-potency { min-height:32px; display:flex; align-items:center; justify-content:center; }
.classic-roster .card-growth { padding-top:8px; }
.classic-roster .potency-number>span {
    color:#fff8d3;
    font-family:Georgia,'Times New Roman',serif;
    font-weight:600;
    text-shadow:0 1px 2px #000;
}

/* Two numeric lines on owned cards; unowned cards remain thumbnail-only. */
.classic-roster .classic-stepper:has(.potency-badge) {
    grid-template-columns:24px minmax(0,1fr) 24px;
    align-items:center;
    min-height:32px;
}
.classic-roster .classic-stepper .potency-badge { flex-wrap:nowrap; min-height:24px; }
.classic-roster .classic-stepper .potency-diamond { width:11px; height:15px; flex:0 0 11px; }
.classic-roster .classic-stepper .potency-number { width:14px; height:18px; }
.classic-roster .classic-stepper .potency-number>span { font-size:.65rem; }
.classic-roster .classic-stepper .potency-number .potency-max { width:12px; height:14px; }
.classic-roster .growth-entry.compact-growth {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:3px;
    min-height:44px;
    margin:0;
    border:0;
    border-radius:4px;
    background:transparent;
    padding:2px 0;
    color:var(--color-text-secondary);
    font-size:.75rem;
    line-height:1.4;
    font-variant-numeric:tabular-nums;
    font-weight:400;
}
.classic-roster .compact-growth:hover { background:var(--color-bg-elevated); }
.classic-roster .growth-values { max-width:100%; text-align:center; overflow-wrap:anywhere; }
.classic-roster .compact-talents { color:inherit; }

.classic-roster .relems-character-grid,
.classic-roster #inventory-grid.classic-wheels {
    grid-template-columns:repeat(auto-fill,minmax(min(100%,max(112px,7rem)),1fr));
}
.classic-roster .classic-stepper .potency-diamond {
    display:grid;
    place-items:center;
    width:.9375rem;
    height:1.375rem;
    flex-basis:.9375rem;
}
.classic-roster .classic-stepper .potency-number { width:.875rem; height:1.125rem; }
.classic-roster .classic-stepper .potency-number .potency-max { width:.75rem; height:.875rem; }
/* ScareCrow artwork identifies the two compact numeric rows. */
.classic-roster .growth-icon-row {
    position:relative;
    left:.25rem;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.25rem;
    width:calc(100% + 18px);
    margin-inline:-9px;
    min-width:0;
}
.classic-roster .growth-icon-row>img { width:.875rem; height:.875rem; object-fit:contain; flex:0 0 .875rem; }
/* The empty right rail balances the icon so only the values determine the center. */
.classic-roster .growth-icon-row::after { content:""; flex:0 0 .875rem; }
.classic-roster .growth-icon-row .growth-values { min-width:0; max-width:calc(100% - 2.25rem); }
/* Centered modal, with a scrolling body and persistent header/footer. */
.classic-roster #editor {
    --editor-max-height:calc(100dvh - 1.5rem);
    position:fixed;
    inset:0;
    margin:auto;
    width:min(42rem,calc(100% - 1.5rem));
    max-width:calc(100% - 1.5rem);
    height:fit-content;
    max-height:var(--editor-max-height);
    border-radius:12px;
    border:1px solid var(--color-border);
    overflow:hidden;
}
.classic-roster #editor-form { height:auto; max-height:calc(var(--editor-max-height) - 2px); display:flex; flex-direction:column; min-height:0; }
.classic-roster #editor .dialog-heading { flex-shrink:0; flex-direction:row-reverse; flex-wrap:wrap; padding:.625rem 1rem; background:#252729; }
.classic-roster #editor .dialog-heading>button { order:-1; width:2rem; min-width:2rem; height:2rem; min-height:2rem; padding:0; font-size:1.125rem; line-height:1; }
.classic-roster #editor #editor-title { flex:1 0 min(100%,10rem); }
.classic-roster #editor .dialog-body { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:.625rem; padding:clamp(.5rem,2.5vw,1rem); background:#222426; }
.classic-roster #editor .dialog-footer { flex-shrink:0; padding:.625rem 1rem; padding-bottom:max(.625rem,env(safe-area-inset-bottom)); background:#252729; }
.classic-roster #editor .field-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap:.875rem 1.25rem; }
.classic-roster #editor .editor-talents .field-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr)); }
.classic-roster #editor:has([data-kind="wheel"]) { width:min(29rem,calc(100% - 1.5rem)); }
.classic-roster #editor .editor-options { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem 1rem; }
.classic-roster #editor .editor-preset-field { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; min-width:0; font-size:.8125rem; color:var(--color-text-secondary); }
.classic-roster #editor .editor-preset-field select { min-height:2.25rem; max-width:100%; padding:.375rem .625rem; font-size:.8125rem; }
.classic-roster #editor .check-line { margin:0; min-height:2rem; font-size:.8125rem; }
.classic-roster #editor .editor-section { padding:.75rem 0 0; border:0; border-top:1px solid #3a3d40; border-radius:0; background:transparent; }
.classic-roster #editor .editor-section .field-heading { margin:0 0 .5rem; color:var(--color-text-primary); font-size:.875rem; font-weight:600; }
.classic-roster #editor .editor-section-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; margin-bottom:.5rem; }
.classic-roster #editor .editor-section-heading .field-heading { margin:0; }
.classic-roster #editor .quick-actions { margin:0; gap:.375rem; }
.classic-roster #editor .quick-actions button { min-height:1.875rem; padding:.25rem .5rem; font-size:.75rem; background:transparent; border-color:#424649; }
.classic-roster #editor .editor-followup { display:grid; gap:.75rem; }
.classic-roster #editor .editor-options,
.classic-roster #editor .editor-section,
.classic-roster #editor .editor-followup { flex-shrink:0; }
.classic-roster #editor .slider-field>label { font-size:.8125rem; }
.classic-roster #editor .slider-controls { grid-template-columns:minmax(0,1fr) min(3.75rem,35%); gap:.625rem; }
.classic-roster #editor .slider-controls input[type=number] { min-height:2.25rem; padding:.25rem; font-size:.875rem; font-variant-numeric:tabular-nums; border-color:#45494c; background:#292c2f; }
.classic-roster #editor .slider-controls input[type=range] { appearance:none; height:2.25rem; min-height:2.25rem; margin:0; padding:0; background:transparent; }
.classic-roster #editor input[type=range]::-webkit-slider-runnable-track { height:3px; border-radius:3px; background:linear-gradient(to right,var(--color-accent) var(--range-fill,0%),#484c50 var(--range-fill,0%)); }
.classic-roster #editor input[type=range]::-webkit-slider-thumb { appearance:none; width:14px; height:14px; margin-top:-5.5px; border:0; border-radius:50%; background:var(--color-accent); }
.classic-roster #editor input[type=range]::-moz-range-track { height:3px; border-radius:3px; background:#484c50; }
.classic-roster #editor input[type=range]::-moz-range-progress { height:3px; background:var(--color-accent); }
.classic-roster #editor input[type=range]::-moz-range-thumb { width:14px; height:14px; border:0; border-radius:50%; background:var(--color-accent); }
.classic-roster #editor .slider-controls input[type=range]:disabled { cursor:not-allowed; opacity:.45; filter:grayscale(1); }
.classic-roster .slider-field>label { font-size:.85rem; color:var(--color-text-secondary); }
.classic-roster .slider-controls { display:grid; grid-template-columns:minmax(0,1fr) min(5rem,40%); gap:1rem; align-items:center; }
.classic-roster .slider-controls input[type=range] { min-width:0; width:100%; min-height:44px; accent-color:var(--color-accent); cursor:pointer; }
.classic-roster .slider-controls input[type=number] { text-align:center; padding:.5rem .3rem; }
.classic-roster .fixed-field input[type=number] { opacity:1; color:var(--color-text-primary); background:var(--color-bg-dark); }
.classic-roster .slider-field small { line-height:1.4; }
@media(max-width:767px) {
    .classic-roster .slider-controls { gap:.75rem; }
}
.classic-roster #editor .dialog-heading>div,
.classic-roster #editor .editor-person>div { min-width:0; }
.classic-roster #editor .editor-person img { flex-shrink:0; width:36px; height:44px; }
.classic-roster #editor .editor-person { flex-wrap:wrap; }
.classic-roster #editor .dialog-heading h2 { overflow-wrap:anywhere; }

.classic-roster .madness-skill-value { color:var(--color-accent); }

.classic-roster .classic-stepper:has(.potency-badge) {
    width:calc(100% + 16px);
    margin-inline:-8px;
}

/* Use upright serif digits to visually match the original maximum-stage sprite. */
@font-face {
    font-family:PotencyMaxStyle;
    src:url('../../images/growth/game-potency-max-style.woff2') format('woff2');
    font-weight:600;
    font-style:normal;
    font-display:swap;
}
.classic-roster .classic-stepper:has(.potency-badge) {
    width:calc(100% + 18px);
    margin-inline:-9px;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    min-height:32px;
    background:transparent;
    border:0;
    border-radius:0;
}
.classic-roster .classic-stepper:has(.potency-badge)>button { justify-self:center; width:24px; }
.classic-roster .classic-stepper:has(.potency-badge)>button:first-child { padding-inline:0 2px; }
.classic-roster .classic-stepper:has(.potency-badge)>button:last-child { padding-inline:2px 0; }
.classic-roster .classic-stepper .potency-badge { width:5.5625rem; gap:.0625rem; }
.classic-roster .classic-stepper .potency-diamond {
    width:1.375rem;
    height:1.375rem;
    flex:0 0 1.375rem;
    margin:0;
}
/* Bring only the diamond artwork together; keep the number and arrow spacing. */
.classic-roster .classic-stepper .potency-diamond+.potency-diamond { margin-inline-start:-.1875rem; }
.classic-roster .classic-stepper .potency-diamond>img {
    grid-area:1 / 1;
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}
.classic-roster .classic-stepper .potency-diamond.lit { filter:none; }
.classic-roster .classic-stepper .potency-diamond.unlit { opacity:1; filter:none; }
.classic-roster .classic-stepper .potency-number {
    /* One game unit in CSS: keep the current 18px-wide maximum number.
       Its source width is 54, inside Image_Max's 1.22 parent scale. */
    --potency-game-unit:calc(1.125rem / 65.88);
    width:1.25rem;
    height:1.375rem;
}
.classic-roster .classic-stepper .potency-number .potency-game-parent {
    --potency-parent-scale:1.22;
    position:absolute;
    left:50%;
    top:50%;
    display:grid;
    place-items:center;
    font:inherit;
    color:inherit;
    text-shadow:none;
    transform:translate(-50%,-50%) scale(var(--potency-parent-scale));
    width:calc(100 * var(--potency-game-unit));
    height:calc(90 * var(--potency-game-unit));
}
.classic-roster .potency-number .potency-game-background {
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    object-fit:contain;
}
/* Image_Number's original 84x72 decoration and 1.5312 scale, independent of
   the visually matched digits. Only 12 uses the 100x90 maximum decoration. */
.classic-roster .potency-number .potency-game-background.potency-background-regular {
    position:absolute;
    left:50%;
    top:calc(50% + 5.2 * var(--potency-game-unit) / 1.22);
    transform:translate(-50%,-50%);
    width:calc(84 * 1.5312 * var(--potency-game-unit) / 1.22);
    height:calc(72 * 1.5312 * var(--potency-game-unit) / 1.22);
}
.classic-roster .classic-stepper .potency-game-parent .potency-game-text {
    position:absolute;
    left:calc(50% - 1.7 * var(--potency-game-unit));
    top:calc(50% - 3.1 * var(--potency-game-unit));
    transform:translate(-50%,-50%);
    font-family:PotencyMaxStyle,serif;
    font-size:calc(45 * var(--potency-game-unit));
    font-weight:600;
    line-height:1;
    color:#f4f2f8;
    font-synthesis:none;
    text-shadow:none;
    white-space:nowrap;
}
.classic-roster .classic-stepper .potency-number .potency-max {
    position:absolute;
    left:calc(50% - 1.7 * var(--potency-game-unit));
    top:calc(50% - 3.1 * var(--potency-game-unit));
    transform:translate(-50%,-50%);
    width:calc(54 * var(--potency-game-unit));
    height:calc(50 * var(--potency-game-unit));
    max-width:none;
    object-fit:contain;
}
.classic-roster .madness-skill-value { color:#ddd976; }

/* Game artwork anchors each editable value; the track stays below its label. */
.classic-roster #editor .slider-field {
    display:grid;
    grid-template-columns:2.25rem minmax(0,1fr) auto;
    align-items:center;
    gap:.125rem .625rem;
    padding:.25rem 0;
}
.classic-roster #editor .slider-field>.field-art { grid-column:1; grid-row:1 / 3; display:grid; place-items:center; width:2.25rem; height:2.25rem; }
.classic-roster #editor .field-art img { width:100%; height:100%; object-fit:contain; }
.classic-roster #editor .field-art .level-mark { font-family:Georgia,serif; font-size:1.125rem; color:var(--color-text-secondary); }
.classic-roster #editor .slider-field>label { grid-column:2; grid-row:1; color:var(--color-text-primary); line-height:1.5; overflow-wrap:anywhere; }
.classic-roster #editor .slider-controls:not([hidden]) { display:contents; }
.classic-roster #editor .field-value { grid-column:3; grid-row:1; display:flex; align-items:center; gap:.25rem; min-width:0; }
.classic-roster #editor .field-value input[type=number] { width:2.5rem; min-width:0; min-height:2rem; padding:.25rem 0; border:1px solid transparent; border-bottom-color:#555a5d; border-radius:0; background:transparent; color:var(--color-text-primary); font-size:1.0625rem; font-weight:600; appearance:textfield; }
.classic-roster #editor .field-value input::-webkit-inner-spin-button,
.classic-roster #editor .field-value input::-webkit-outer-spin-button { appearance:none; margin:0; }
.classic-roster #editor .field-value input:hover { border-bottom-color:var(--color-accent); }
.classic-roster #editor .field-value .field-maximum { color:var(--color-text-secondary); font-size:.75rem; white-space:nowrap; }
.classic-roster #editor .slider-controls input[type=range] { grid-column:2 / 4; grid-row:2; height:1.75rem; min-height:1.75rem; }
.classic-roster #editor .slider-field>select { grid-column:2 / 4; min-width:0; min-height:2.25rem; }
.classic-roster #editor .slider-field:has(>select) .field-value { grid-row:3; }
.classic-roster #editor .slider-field:has(>select) .slider-controls input[type=range] { grid-row:4; }
.classic-roster #editor .field-potency-preview.classic-stepper { grid-column:2 / 4; display:flex; width:auto; min-height:1.5rem; margin:0; justify-content:flex-start; }
.classic-roster #editor .field-potency-preview[hidden] { display:none; }
.classic-roster #editor .madness-field>label,
.classic-roster #editor .madness-field .field-value input { color:#ddd976; }
.classic-roster #editor .editor-talents .field-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr)); }
.classic-roster #editor .fixed-field .field-art { opacity:.55; }
.classic-roster #editor .field-grid { align-items:start; gap:.5rem 1.25rem; container-type:inline-size; }
@container (max-width:16rem) {
    .classic-roster #editor .slider-field { grid-template-columns:2.25rem minmax(0,1fr); }
    .classic-roster #editor .field-value { grid-column:2; grid-row:2; justify-content:flex-end; }
    .classic-roster #editor .slider-controls input[type=range] { grid-column:2; grid-row:3; }
    .classic-roster #editor .slider-field>select { grid-column:2; }
    .classic-roster #editor .slider-field:has(>select) .field-value { grid-row:3; }
    .classic-roster #editor .slider-field:has(>select) .slider-controls input[type=range] { grid-row:4; }
    .classic-roster #editor .field-potency-preview.classic-stepper { grid-column:1 / -1; justify-content:center; }
}