/* /Components/AimForStars/UmaScoutTile.razor.rz.scp.css */
.scout-tile[b-2jxbpdwab7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    height: 100%;
    transition: border-color 120ms ease, background-color 120ms ease;
}

/* A collected uma (owned or scouted) gets a green wash + border so progress reads at a glance. */
.scout-collected[b-2jxbpdwab7] {
    border-color: var(--mud-palette-success);
    background-color: var(--mud-palette-success-hover);
}

.scout-art[b-2jxbpdwab7] {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
}

.scout-art-img[b-2jxbpdwab7] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.scout-collected-mark[b-2jxbpdwab7] {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--mud-palette-surface);
    border-radius: 50%;
}

.scout-name[b-2jxbpdwab7] {
    line-height: 1.2;
    min-height: 2.4em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scout-actions[b-2jxbpdwab7] {
    margin-top: auto;
}
/* /Components/Aptitude/AptitudeGradeDropdown.razor.rz.scp.css */
/* Mirrors .apt-tile from the character-detail card: compact bordered tile, name centred on the
   left, grade control pinned right. Here the right slot is a borderless dropdown, not a static icon. */
.apt-cell[b-9hxqtey28i] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 0 4px 0 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background-color: var(--mud-palette-surface);
}

.apt-cell-changed[b-9hxqtey28i] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

.apt-cell-label[b-9hxqtey28i] {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.apt-cell-changed .apt-cell-label[b-9hxqtey28i] {
    color: var(--mud-palette-primary);
}

.apt-cell-select[b-9hxqtey28i] {
    flex: 0 0 auto;
    width: 60px;
}

.grade-icon[b-9hxqtey28i] {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
}
/* /Components/Aptitude/AptitudeGradeSelect.razor.rz.scp.css */
.grade-select[b-3cfua91sz8] {
    max-width: 160px;
}

.grade-icon[b-3cfua91sz8] {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
}
/* /Components/Aptitude/AptitudeUmaAutocomplete.razor.rz.scp.css */
/* Positioning context for the selected-uma icon overlay (the autocomplete fills it). */
.uma-ac-wrap[b-9r931y3mnb] {
    position: relative;
}

/* The picked uma's icon, sitting over the dense field's start (search) adornment. Opaque and
   rounded so it fully masks the search glyph; pointer-events off so the field stays clickable. */
.uma-ac-icon-overlay[b-9r931y3mnb] {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--mud-palette-surface);
    pointer-events: none;
    z-index: 5;
}
/* /Components/Aptitude/AptitudeUmaSelector.razor.rz.scp.css */
.apt-portrait-empty[b-rj6p0e0hvb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 200px;
    color: var(--mud-palette-text-secondary);
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}
/* /Components/AutoRun/AutoRunDeckPanel.razor.rz.scp.css */
/* Card-shaped slots, as many per row as fit. Same tracks as the training simulator's deck grid.
   The rem min-track is what keeps the row from forcing a horizontal scroll at 375px. */
.autorun-slots[b-7zses7rdd5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 14px;
    padding: 6px 2px;
}

@media (max-width: 600px) {
    .autorun-slots[b-7zses7rdd5] {
        grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
        gap: 10px;
    }
}
/* /Components/AutoRun/AutoRunDeckSlot.razor.rz.scp.css */
.autorun-slot[b-xz7ia6mtmp] {
    position: relative;
    aspect-ratio: 3 / 4;
    border: 1px solid var(--mud-palette-lines-default);
    border-bottom: 3px solid var(--uma-accent, var(--mud-palette-lines-default));
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--mud-palette-surface);
}

.autorun-slot-art[b-xz7ia6mtmp] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.autorun-slot-remove[b-xz7ia6mtmp] {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: rgba(0, 0, 0, 0.55);
    color: #fff;
}

.autorun-slot-empty[b-xz7ia6mtmp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 0;
    border-style: dashed;
    border-bottom-style: dashed;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
}

@media (hover: hover) {
    .autorun-slot-empty:hover[b-xz7ia6mtmp] {
        border-color: var(--mud-palette-primary);
        color: var(--mud-palette-primary);
    }
}
/* /Components/AutoRun/AutoRunEventCard.razor.rz.scp.css */
/* Same box as the events search result, with the options stacked under the header. */
.autorun-event[b-zh9858ddga] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--uma-accent, var(--mud-palette-primary));
    border-radius: 10px;
    background-color: var(--mud-palette-surface);
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

/* Real-pointer only: on touch, :hover sticks after a tap. */
@media (hover: hover) {
    .autorun-event:hover[b-zh9858ddga] {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px var(--uma-shadow-soft);
    }
}

.autorun-event-head[b-zh9858ddga] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.autorun-event-icon[b-zh9858ddga] {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 4px;
    object-fit: contain;
    display: block;
}

.autorun-event-text[b-zh9858ddga] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.autorun-event-name[b-zh9858ddga] {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.autorun-event-meta[b-zh9858ddga] {
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.autorun-event-badges[b-zh9858ddga] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* The options sit side by side while they fit and stack on a phone, so a two-option event reads
   as the comparison it is. */
.autorun-event-choices[b-zh9858ddga] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.autorun-event-choice[b-zh9858ddga] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 13rem;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
}

.autorun-event-choice-head[b-zh9858ddga] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
}

.autorun-event-choice-none[b-zh9858ddga] {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.autorun-event-skill-badge[b-zh9858ddga] {
    margin-left: auto;
    padding-left: 6px;
    font-size: 0.72rem;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}
/* /Components/AutoRun/AutoRunPickerDialog.razor.rz.scp.css */
/* The picker is already built to fill a bounded flex column: its toolbar is flex: 0 0 auto and only
   .card-search-results scrolls. All it needs is a host with a real height to fill. Without one the
   dialog is content-sized, the whole chain collapses to zero and only the toolbar row shows.
   Same host the training and CM pickers give it. */
.autorun-picker-body[b-rsg4bjkq9j] {
    height: 68vh;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* The picker's own MudPaper root: a child component's root, so DeckPickerPanel's scoped CSS cannot
   reach it and it has to be set from the host that bounds it. */
.autorun-picker-body[b-rsg4bjkq9j]  .deck-pick-panel {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Full screen on mobile: the dialog owns the viewport, so the body takes what the title bar leaves
   instead of a fixed slice of it. */
@media (max-width: 900px) {
    .autorun-picker-body[b-rsg4bjkq9j] {
        height: auto;
        flex: 1 1 0;
    }
}
/* /Components/AutoRun/AutoRunResultsPanel.razor.rz.scp.css */
/* Wider tracks than the events search: a card here carries every option's skills, not just a
   name. The min() caps the track at the container on a phone, where a bare 26rem minimum would
   widen the page instead of collapsing to one column. */
.autorun-results[b-21fn32661g] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr));
    gap: 12px;
}
/* /Components/AutoRun/AutoRunSetupPanel.razor.rz.scp.css */
.autorun-trainee-icon[b-fkr0e2fm1u] {
    border-radius: 6px;
    flex: 0 0 auto;
}
/* /Components/AutoRun/AutoRunSkillList.razor.rz.scp.css */
/* Narrower tracks than the event cards: a tile is one skill name. The min() caps the track at the
   container on a phone, where a bare rem minimum would widen the page instead of collapsing. */
.autorun-skill-list[b-94a4g1cxkp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
    gap: 8px;
}
/* /Components/CareerEvents/CareerEventDialog.razor.rz.scp.css */
/* Sits under the event name in the title slot, saying which section it came from. */
.event-dialog-subtitle[b-zt41swvnx3] {
    display: block;
    color: var(--mud-palette-text-secondary);
}
/* /Components/CareerEvents/CareerEventSectionBlock.razor.rz.scp.css */
/* Section header matches the training-effects ledger: uppercase label with a rule running out
   across the row. */
.career-event-section[b-2ugfclk0ck] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 0.55rem;
}

.career-event-section-label[b-2ugfclk0ck] {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
}

.career-event-section-rule[b-2ugfclk0ck] {
    flex: 1;
    height: 1px;
    background: var(--mud-palette-lines-default);
}

/* auto-fill with a rem min-track so the grid collapses to one column on a phone instead of
   forcing the page wider than the viewport. */
.career-event-grid[b-2ugfclk0ck] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 6px;
    margin-bottom: 1.1rem;
}
/* /Components/CareerEvents/CareerEventsPanel.razor.rz.scp.css */
.career-events-body[b-fr6kllz6zh] {
    margin-top: 0.75rem;
}
/* /Components/CareerEvents/CareerEventTile.razor.rz.scp.css */
/* Same box as the training-effect tile, so the events panel reads as a sibling of the effects
   panel on the same page. */
.career-event-tile[b-0ciuv393d8] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background-color: var(--mud-palette-surface);
    cursor: pointer;
    transition: border-color 120ms ease;
}

@media (hover: hover) {
    .career-event-tile:hover[b-0ciuv393d8] {
        border-color: var(--mud-palette-primary);
    }
}

/* Position in an ordered chain. Chains run in a fixed sequence, so the number is information,
   not decoration. */
.career-event-order[b-0ciuv393d8] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 50%;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.career-event-lock[b-0ciuv393d8] {
    flex: 0 0 auto;
    color: var(--mud-palette-warning);
}

/* Truncates rather than wrapping, so a long name cannot make one tile taller than its row. */
.career-event-name[b-0ciuv393d8] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.career-event-payload[b-0ciuv393d8] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}
/* /Components/CareerEvents/EventChoiceBox.razor.rz.scp.css */
/* The dialog is a stack of these group boxes, one per option, matching the filter dialogs. */
.event-choice-box[b-oip4fm93ms] {
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background-color: var(--mud-palette-background-gray);
}

.event-choice-head[b-oip4fm93ms] {
    margin-bottom: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* Left rule gathers the outcomes of one branching choice. Square corners: a single-sided border
   with a radius reads as a broken box. */
.event-branch[b-oip4fm93ms] {
    padding-left: 10px;
    border-left: 2px solid var(--mud-palette-lines-default);
    border-radius: 0;
}

.event-branch-caption[b-oip4fm93ms] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-disabled);
}

.event-branch-outcome + .event-branch-outcome[b-oip4fm93ms] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Some outcomes are picked by a condition rather than by chance; that condition names the row. */
.event-branch-label[b-oip4fm93ms] {
    display: block;
    margin-bottom: 5px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}
/* /Components/CareerEvents/EventEffectRow.razor.rz.scp.css */
.event-skill-row[b-cbhw0hbu6o] {
    margin-top: 6px;
}

/* Pill after the skill name saying how many hint levels the choice grants, or that the skill is
   handed over outright. Sits in SkillTile's Trailing slot. */
.event-skill-badge[b-cbhw0hbu6o] {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 1px 8px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary);
}
/* /Components/CareerEvents/EventRequirements.razor.rz.scp.css */
/* Warning tint rather than the panel's plain surface: a gate is a different kind of statement
   from a reward, and the two sit next to each other in the dialog. */
.event-requirements[b-sq8ij4jfld] {
    padding: 9px 11px;
    margin-bottom: 10px;
    border: 1px solid var(--mud-palette-warning);
    border-radius: 8px;
    background-color: color-mix(in srgb, var(--mud-palette-warning) 10%, var(--mud-palette-surface));
}

.event-requirements-head[b-sq8ij4jfld] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mud-palette-warning-darken);
}

.event-requirement[b-sq8ij4jfld] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 2px 0;
    font-size: 0.85rem;
}
/* /Components/CareerEvents/EventSearchResultRow.razor.rz.scp.css */
/* The skill browse card's box, so a search result reads at the same weight as a skill tile.
   height:100% keeps a card filling its grid cell rather than leaving a gap under the tallest
   name in the row. */
.event-card[b-2qynbqwhxk] {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--uma-accent, var(--mud-palette-primary));
    border-radius: 10px;
    background-color: var(--mud-palette-surface);
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

/* Real-pointer only: on touch, :hover sticks after a tap. */
@media (hover: hover) {
    .event-card:hover[b-2qynbqwhxk] {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px var(--uma-shadow-soft);
    }
}

.event-card-icon[b-2qynbqwhxk] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    line-height: 0;
}

.event-card-icon-empty[b-2qynbqwhxk] {
    height: 56px;
    color: var(--mud-palette-text-secondary);
}

/* Every source art here is square already - an uma icon, a support-card icon, a scenario badge -
   so it is shown whole rather than cropped into a circle. */
.event-card-img[b-2qynbqwhxk] {
    width: 56px;
    height: 56px;
    border-radius: 4px;
    object-fit: contain;
    display: block;
}

.event-card-text[b-2qynbqwhxk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

/* Two lines at most: an event name can run long, and a third line would push the card taller
   than the skill tiles it sits beside. */
.event-card-name[b-2qynbqwhxk] {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-card-meta[b-2qynbqwhxk] {
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-card-payload[b-2qynbqwhxk] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.event-card-pill[b-2qynbqwhxk] {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}
/* /Components/CareerEvents/EventStatTile.razor.rz.scp.css */
/* Same box as the training-effect tile in SupportEffectsPanel, plus a leading icon and a compact
   inline layout, since a dozen of these wrap inside one choice rather than sitting in a grid. */
.event-stat-tile[b-oo5aehbbfn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px 4px 5px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background-color: var(--mud-palette-surface);
    white-space: nowrap;
}

.event-stat-icon[b-oo5aehbbfn] {
    flex: 0 0 auto;
    color: var(--uma-accent);
    border-radius: 4px;
}

/* The five stat icons on an "all stats" tile, overlapped so the row stays about as wide as a
   single-stat tile's icon rather than five times it. */
.event-stat-icon-group[b-oo5aehbbfn] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
}

.event-stat-icon-group[b-oo5aehbbfn]  img {
    border-radius: 4px;
}

.event-stat-icon-group[b-oo5aehbbfn]  img + img {
    margin-left: -7px;
}

.event-stat-label[b-oo5aehbbfn] {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

.event-stat-value[b-oo5aehbbfn] {
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* An energy cost is the only routinely negative reward; call it out rather than leaving the
   player to spot the minus sign in a row of a dozen gains. */
.event-stat-tile-loss .event-stat-value[b-oo5aehbbfn] {
    color: var(--mud-palette-error);
}
/* /Components/Changelog/ChangelogReleaseItem.razor.rz.scp.css */
.uma-cl-date[b-u9gxs032fe] {
    color: var(--mud-palette-text-secondary);
}

.uma-cl-section[b-u9gxs032fe] {
    margin-bottom: 0.6rem;
}

.uma-cl-tag[b-u9gxs032fe] {
    margin-bottom: 0.25rem;
}

.uma-cl-items[b-u9gxs032fe] {
    margin: 0.15rem 0 0;
    padding-left: 1.25rem;
}

.uma-cl-items li[b-u9gxs032fe] {
    margin-bottom: 0.2rem;
    line-height: 1.45;
}

/* Inline `code` spans come from FormatInline as a MarkupString, so they carry no scope
   attribute - reach them through the scoped <ul> with ::deep. */
.uma-cl-items[b-u9gxs032fe]  code {
    font-family: var(--mud-typography-default-family), monospace;
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 4px;
    font-size: 0.85em;
}
/* /Components/Characters/AptitudeGroup.razor.rz.scp.css */
.apt-group[b-bjz3hg63di] {
    margin-bottom: 8px;
}

.apt-group-label[b-bjz3hg63di] {
    display: block;
    margin-bottom: 2px;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    letter-spacing: 0.08em;
}

.apt-group-body[b-bjz3hg63di] {
    display: grid;
    gap: 6px;
}

.apt-cols-2[b-bjz3hg63di] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.apt-cols-4[b-bjz3hg63di] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* A 4-wide group can't fit on a phone, so drop it to a 2x2 block. Track (2-wide) stays as is. */
@media (max-width: 600px) {
    .apt-cols-4[b-bjz3hg63di] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* /Components/Characters/AptitudeTile.razor.rz.scp.css */
/* Two slots: the label takes all remaining width (its text centred within it), the icon pins to
   the far right in its own auto-width column. */
.apt-tile[b-egoeifykuz] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 3px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background-color: var(--mud-palette-surface);
}

.apt-tile-label[b-egoeifykuz] {
    min-width: 0;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.apt-tile-icon[b-egoeifykuz] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
/* /Components/Characters/CharacterAptitudeRow.razor.rz.scp.css */
.grade-icon[b-s4vfs03cda] {
    display: block;
    width: 20px;
    height: 20px;
}
/* /Components/Characters/CharacterCardTile.razor.rz.scp.css */
/* Mirrors the Support Cards browse tile: the art carries its own frame, so drop the card
   outline and keep only a hairline divider under the labels. The hover lift comes from the
   shared .mud-card.cursor-pointer:hover rule; pin the divider so that rule's primary
   border-color doesn't recolor it. */
.char-tile[b-m1fizqkhfa] {
    border-radius: 10px;
    overflow: hidden;
    border: none;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Real-pointer only: on touch, :hover sticks after a tap. */
@media (hover: hover) {
    .char-tile:hover[b-m1fizqkhfa] {
        border-bottom-color: var(--mud-palette-lines-default);
    }
}

/* Full-bleed character art cropped to the same 3:4 portrait as the support tiles. The stand
   PNG is transparent, so a faint tint sits behind it instead of the card paper. */
.char-art[b-m1fizqkhfa] {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(160deg, var(--mud-palette-background-grey), var(--mud-palette-surface));
}

.char-art-img[b-m1fizqkhfa] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
}

/* Collection view: a released uma you don't own. Matches the support tile's dimmed art. */
.char-art-dimmed .char-art-img[b-m1fizqkhfa] {
    filter: grayscale(0.85);
    opacity: 0.5;
}
/* /Components/Characters/CharacterFilterPanel.razor.rz.scp.css */
/* Selected skill criteria: a light divider between rows so each reads as a distinct line. */
.char-skill-row + .char-skill-row[b-tvp90f1dac] {
    border-top: 1px solid var(--mud-palette-divider);
}
/* /Components/Characters/CharacterInfoCard.razor.rz.scp.css */
.uma-info[b-3wuhpdlaut] {
    display: flex;
    flex-direction: column;
}

.uma-info-row[b-3wuhpdlaut] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.uma-info-row:last-child[b-3wuhpdlaut] {
    border-bottom: none;
}

.uma-info-row[b-3wuhpdlaut]  .mud-icon-root {
    color: var(--mud-palette-primary);
    font-size: 1.2rem;
}

.uma-info-label[b-3wuhpdlaut] {
    color: var(--mud-palette-text-secondary);
}

.uma-info-value[b-3wuhpdlaut] {
    margin-left: auto;
    text-align: right;
    font-weight: 600;
}

.uma-info-subhead[b-3wuhpdlaut] {
    display: block;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.uma-info-quote[b-3wuhpdlaut] {
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Characters/CharacterLinkCard.razor.rz.scp.css */
.uma-link-tile-icon[b-2zeatxgdhy] {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 12px;
    background-color: var(--mud-palette-background-grey);
    transition: transform 120ms ease;
}

.uma-link-tile-icon:hover[b-2zeatxgdhy] {
    transform: translateY(-2px);
}
/* /Components/Characters/CharacterPortraitCard.razor.rz.scp.css */
.uma-card-meta[b-i6jty80wxb] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
}

[b-i6jty80wxb] .uma-rating {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

[b-i6jty80wxb] .uma-rating .mud-rating-item {
    padding: 0 !important;
}

/* The unique-skill chip's own box is a MudLink, whose DOM scoped CSS can't reach, so those rules
   are in app.css. */

.uma-card-unique-name[b-i6jty80wxb] {
    min-width: 0;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
}
/* /Components/Characters/CharacterStatBonuses.razor.rz.scp.css */
.stat-bonus-grid[b-sxqq6367sm] {
    display: grid;
    /* Reflow instead of a fixed 5-wide row: all five sit in one row on desktop, but on a
       phone the fixed-width cells wrap (3 + 2) rather than overflowing the screen. */
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 12px;
}

/* Mirrors the skill tile look (1px line border, rounded, surface bg) but with the
   4px accent stripe on top instead of the left, tinted to the stat's own color. */
.stat-bonus-cell[b-sxqq6367sm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-top: 4px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background-color: var(--mud-palette-surface);
}

.stat-bonus-cell.is-active[b-sxqq6367sm] {
    border-top-color: var(--stat-color);
}

.stat-bonus-icon[b-sxqq6367sm] {
    opacity: 0.35;
}

.stat-bonus-cell.is-active .stat-bonus-icon[b-sxqq6367sm] {
    opacity: 1;
}

.stat-bonus-label[b-sxqq6367sm] {
    font-size: 0.85rem;
    font-weight: 600;
}

.stat-bonus-value[b-sxqq6367sm] {
    font-size: 1.15rem;
    font-weight: 700;
}

.stat-bonus-cell.is-active .stat-bonus-value[b-sxqq6367sm] {
    color: var(--stat-color);
}

.stat-bonus-zero[b-sxqq6367sm] {
    color: var(--mud-palette-text-disabled);
    font-weight: 500;
}

/* Canonical Umamusume stat colors. */
.stat-speed[b-sxqq6367sm] { --stat-color: #4aa3f0; }
.stat-stamina[b-sxqq6367sm] { --stat-color: #f0554a; }
.stat-power[b-sxqq6367sm] { --stat-color: #f0913a; }
.stat-guts[b-sxqq6367sm] { --stat-color: #f06ea3; }
.stat-wit[b-sxqq6367sm] { --stat-color: #3ac47d; }
/* /Components/Characters/CharacterStatBonusRow.razor.rz.scp.css */
/* The stat's icon next to its name inside a toggle item. */
.stat-option[b-zgg2xprjfu] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

/* Matches the aptitude row's grade icons, so the two filter rows line up. */
.stat-icon[b-zgg2xprjfu] {
    display: block;
    width: 20px;
    height: 20px;
}
/* /Components/Characters/ProfileBlock.razor.rz.scp.css */
.uma-profile-block[b-d05o6o10og]  .mud-icon-root {
    font-size: 1.1rem;
}

.uma-profile-text[b-d05o6o10og] {
    white-space: pre-line;
    color: var(--mud-palette-text-primary);
}
/* /Components/Cm/CmConditionChip.razor.rz.scp.css */
/* The chip holds an icon instead of a line of text, so it needs a little more height and less
   horizontal padding than MudBlazor's small chip. */
.cm-cond-chip[b-uulrhkde48]  .mud-chip {
  height: 30px;
  padding-left: 8px;
  padding-right: 8px;
}

.cm-cond-chip[b-uulrhkde48]  .cm-cond-ico {
  vertical-align: middle;
}
/* /Components/Cm/CmConditionIcon.razor.rz.scp.css */
.cm-cond-ico[b-m4qew0o66g] {
  object-fit: contain;
  vertical-align: -4px;
}

.cm-cond-ico-gap[b-m4qew0o66g] {
  margin-right: 4px;
}
/* /Components/Cm/CmDeckEditDialog.razor.rz.scp.css */
/* The picker is already built to fill a bounded flex column: its toolbar (search, rarity and type
   chips, the card count) is flex: 0 0 auto and only .card-search-results scrolls. All it needs is a
   host with a real height to fill.
   That is what this is. It used to do the opposite - force the whole chain to natural flow and put
   one scrollbar on this element - which scrolled the filters away with the grid and cut the last row
   of cards in half at the boundary. The original reason for that was a content-sized dialog, where
   the chain collapses to zero and leaves only the toolbar showing; an explicit height fixes that
   without giving up the inner scroll.

   Tall enough to be the dialog's height: the deck column beside it is six slots and stops well
   short, so this is what decides how much of the screen the dialog claims. 78vh leaves room for the
   title bar and the dialog's own padding without the whole dialog scrolling. */
.cm-deck-picker-body[b-kac0jbietc] {
    height: 78vh;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* The picker's own MudPaper root: a child component's root, so DeckPickerPanel's scoped CSS cannot
   reach it and it has to be set from the host that bounds it. */
.cm-deck-picker-body[b-kac0jbietc]  .deck-pick-panel {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* /Components/Cm/CmDeckSlotStrip.razor.rz.scp.css */
/* Six fixed columns rather than a wrapping flex row, so a full deck spans the strip at whatever
   width it happens to have, and a short deck keeps its thumbs the same size as a full one. */
.cm-deck-cards[b-ne43s9c7uq] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}
/* /Components/Cm/CmDeckSlotThumb.razor.rz.scp.css */
/* A positioning context for the borrow pill, sized by the face inside it (the strip's grid track
   sets the width). */
.cm-slot-thumb[b-mca4daynda] {
    position: relative;
}

/* The card face. A split carves this one footprint into wedges radiating from the centre, exactly
   as DeckSlot does, so the slot still measures the same as its neighbours.

   The geometry figures below are shared with DeckSlot.razor.css and have to stay in step with it -
   Blazor scopes CSS per component, so the two cannot reference one rule. See the notes there for
   why each number is what it is; changing one without the other splits the frame off its art. */
.cm-slot-face[b-mca4daynda] {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 5px;
    overflow: hidden;
}

.cm-slot-cell[b-mca4daynda] {
    position: absolute;
    inset: 0;
}

/* Inset by the frame's own ring thickness so the art sits in the frame's opening rather than
   running flush to its outer edge, where a sub-pixel disagreement shows a sliver outside the frame. */
.cm-slot-split .cm-slot-cell[b-mca4daynda] {
    top: var(--uma-split-inset-y);
    right: var(--uma-split-inset-x);
    bottom: var(--uma-split-inset-y);
    left: var(--uma-split-inset-x);
}

.cm-slot-art[b-mca4daynda] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
}

/* The frame's corners are symmetric where the app's card silhouette clips its top-right, so a split
   drops the asymmetry: kept, the art would round past the frame on that corner. */
.cm-slot-face.cm-slot-split[b-mca4daynda] {
    border-radius: var(--uma-split-radius);
}

/* Painted in the surface colour so the split reads as one card divided rather than several cards
   abutting. Sized explicitly, not by insets: an svg is a replaced element, so an absolutely
   positioned one with width:auto takes its intrinsic size and lands square. These two are the inset
   box, 100% less twice each inset. */
.cm-slot-seams[b-mca4daynda] {
    position: absolute;
    top: var(--uma-split-inset-y);
    left: var(--uma-split-inset-x);
    width: var(--uma-split-seam-w);
    height: var(--uma-split-seam-h);
    pointer-events: none;
    stroke: var(--mud-palette-surface);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

/* The game's own rarity frame over the finished wedges. A stretched background rather than a
   border-image, which would squeeze the corner slice into the border width and flatten the frame's
   rounded corners to nothing at this size. */
.cm-slot-frame[b-mca4daynda] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* An empty slot still takes its place in the strip, so a deck with a gap reads as six slots rather
   than a shorter deck. Dashed, matching how the deck builder marks an empty slot at rest. */
.cm-slot-empty[b-mca4daynda],
.cm-slot-flex[b-mca4daynda] {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 5px;
    border: 1px dashed var(--mud-palette-lines-default);
}

/* A pencilled-in type is a decision, not a gap, so it firms up and takes that type's colour, the
   same way DeckSlot's flex placeholder does. */
.cm-slot-flex[b-mca4daynda] {
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: solid;
    border-width: 2px;
}

.cm-slot-flex-icon[b-mca4daynda] {
    width: 72%;
    max-width: 44px;
    object-fit: contain;
}

/* The same top-centre pill the deck builder and the shared embed use, so the borrow slot is marked
   identically wherever a deck is drawn. Sized down from DeckSlot's figures because a strip thumb is
   a fraction of a deck slot's width, but the shape, the wording and the literal pink are its own:
   no theme role carries that pink, and the borrow slot is meant to read as an exception to the deck
   rather than another accent. */
.cm-slot-borrow-badge[b-mca4daynda] {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 0 4px;
    border-radius: 5px;
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    background: #e0568f;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.cm-slot-borrow-badge .mud-icon-root[b-mca4daynda] {
    font-size: 0.7rem;
}

/* Heart alone, round rather than a pill: with the label gone there is nothing for the pill shape to
   contain, and a circle reads as a marker instead of a clipped badge. */
.cm-slot-borrow-badge.cm-slot-borrow-compact[b-mca4daynda] {
    padding: 2px;
    border-radius: 50%;
    gap: 0;
}
/* /Components/Cm/CmDragGridBoard.razor.rz.scp.css */
/* CM parents grid drag board: the inheritance grid rebuilt as drop cells + a pool.
   The drop zones themselves are MudDropZone classes and live in app.css. */
.cm-gridboard-layout[b-m9x9w7sa4f] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

/* The board earns the room: the pool beside it is a fixed-width palette. */
.cm-gridboard-main[b-m9x9w7sa4f] {
  flex: 3 1 480px;
  min-width: 300px;
}

.cm-gridboard-grid[b-m9x9w7sa4f] {
  display: grid;
  grid-template-columns: 150px repeat(5, minmax(64px, 1fr));
  gap: 6px;
  align-items: stretch;
}

/* Names the row-label column, so the header row reads across rather than starting on a blank. */
.cm-gridboard-corner[b-m9x9w7sa4f] {
  display: flex;
  align-items: center;
  padding: 6px 4px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mud-palette-text-secondary);
}

.cm-gridboard-head[b-m9x9w7sa4f] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
}

/* Head colours mirror the read-only grid (CmInheritanceGridView) so the editor reads the same. */
.cm-gridboard-head.cm-col-front[b-m9x9w7sa4f] {
  color: var(--mud-palette-info-text);
  background: color-mix(in srgb, var(--mud-palette-info) 78%, transparent);
}

.cm-gridboard-head.cm-col-pace[b-m9x9w7sa4f] {
  color: var(--mud-palette-success-text);
  background: color-mix(in srgb, var(--mud-palette-success) 78%, transparent);
}

.cm-gridboard-head.cm-col-late[b-m9x9w7sa4f] {
  color: var(--mud-palette-warning-text);
  background: color-mix(in srgb, var(--mud-palette-warning) 82%, transparent);
}

.cm-gridboard-head.cm-col-end[b-m9x9w7sa4f] {
  color: var(--mud-palette-error-text);
  background: color-mix(in srgb, var(--mud-palette-error) 78%, transparent);
}

.cm-gridboard-head.cm-col-general[b-m9x9w7sa4f] {
  color: var(--mud-palette-text-primary);
  background: var(--mud-palette-action-default-hover);
}

.cm-gridboard-label[b-m9x9w7sa4f] {
  display: flex;
  align-items: center;
  gap: 2px;
}

.cm-gridboard-cell[b-m9x9w7sa4f] {
  display: flex;
}

/* Six columns cannot fit a phone: the grid's min-content is ~460px. Rather than let that widen
   the layout viewport (which detaches the fixed bottom nav), the board scrolls inside itself.
   min-width:0 is what lets the flex item shrink below its content and contain the scroll. */
@media (max-width: 900px) {
  .cm-gridboard-main[b-m9x9w7sa4f] {
    flex: 1 1 100%;
    min-width: 0;
    overflow-x: auto;
  }

  .cm-gridboard-grid[b-m9x9w7sa4f] {
    grid-template-columns: 6rem repeat(5, minmax(3.5rem, 1fr));
    min-width: 25rem;
  }
}
/* /Components/Cm/CmDragTierBoard.razor.rz.scp.css */
/* CM ace tierlist drag-and-drop board (tiers on the left, uma pool on the right).
   The drop zones themselves are MudDropZone classes and live in app.css. */
.cm-tier-grid[b-scif7ftifc] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

.cm-tier-col[b-scif7ftifc] {
  flex: 1 1 320px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cm-tier-head-grow[b-scif7ftifc] {
  flex: 1 1 auto;
}

/* The tier column holds a 260px floor open, which overflows a 375px viewport once the dialog's
   own padding is taken off. On phones it spans instead. */
@media (max-width: 900px) {
  .cm-tier-col[b-scif7ftifc] {
    flex: 1 1 100%;
    min-width: 0;
  }
}
/* /Components/Cm/CmEditTile.razor.rz.scp.css */
/* Summary edit overlay: a grey scrim + centred edit badge laid over each tile in edit mode,
   turning the whole tile into a button that opens its modal. */
.cm-edit-tile[b-80gcpb4nwh] {
  position: relative;
  cursor: pointer;
  border-radius: 12px;
}

.cm-edit-tile-overlay[b-80gcpb4nwh] {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  border: 2px dashed color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
  background: color-mix(in srgb, var(--mud-palette-surface) 45%, transparent);
  -webkit-backdrop-filter: grayscale(0.65);
  backdrop-filter: grayscale(0.65);
  transition: background 0.12s ease, border-color 0.12s ease;
}

.cm-edit-tile:hover .cm-edit-tile-overlay[b-80gcpb4nwh],
.cm-edit-tile:focus-visible .cm-edit-tile-overlay[b-80gcpb4nwh] {
  border-color: var(--mud-palette-primary);
  background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
}

.cm-edit-tile-icon[b-80gcpb4nwh] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--mud-palette-primary-text);
  background: var(--mud-palette-primary);
  box-shadow: var(--mud-elevation-6);
  transition: transform 0.12s ease;
}

/* Pierces into MudIcon's own DOM, which never carries this component's scope attribute. */
.cm-edit-tile-icon[b-80gcpb4nwh]  .mud-icon-root {
  font-size: 1.6rem;
}

.cm-edit-tile:hover .cm-edit-tile-icon[b-80gcpb4nwh],
.cm-edit-tile:focus-visible .cm-edit-tile-icon[b-80gcpb4nwh] {
  transform: scale(1.08);
}

/* A section whose editor is drag-and-drop, viewed on a phone. Still badged so the tile does not read
   as broken, but not a button: no cursor, no hover lift, and it says what it wants instead. */
.cm-edit-tile-locked[b-80gcpb4nwh] {
  cursor: default;
}

/* The badge stacks over its note here, where an editable tile's overlay is a centred row. */
.cm-edit-tile-locked .cm-edit-tile-overlay[b-80gcpb4nwh] {
  flex-direction: column;
}

.cm-edit-tile-locked .cm-edit-tile-icon[b-80gcpb4nwh] {
  background: var(--mud-palette-text-disabled);
  transform: none;
}

.cm-edit-tile-note[b-80gcpb4nwh] {
  margin-top: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}
/* /Components/Cm/CmHistoryRow.razor.rz.scp.css */
/* Every revision row is one line: the label and timestamp shrink and truncate, the two buttons keep
   their size. Letting the row wrap instead made its height depend on how long that revision's
   section name and author happened to be, so a list of them stepped up and down. */
.cm-history-row-text[b-sbci55syea] {
    min-width: 0;
    flex: 1 1 auto;
}

/* The MudText roots inside, which this component's scoped attribute is not stamped onto - reached
   with ::deep from the wrapper, which is in this component's own markup. */
.cm-history-row-text[b-sbci55syea]  .mud-typography {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-history-row-actions[b-sbci55syea] {
    flex: 0 0 auto;
}
/* /Components/Cm/CmInheritanceGridView.razor.rz.scp.css */
.cm-grid[b-x8ntdz2y40] {
    display: grid;
    grid-template-columns: 96px repeat(5, 1fr);
    gap: 6px;
    align-items: stretch;
}

.cm-grid-head[b-x8ntdz2y40] {
    font-size: 0.8rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    border-radius: 6px;
}

.cm-col-front[b-x8ntdz2y40] {
    color: var(--mud-palette-info-text);
    background: color-mix(in srgb, var(--mud-palette-info) 78%, transparent);
}

.cm-col-pace[b-x8ntdz2y40] {
    color: var(--mud-palette-success-text);
    background: color-mix(in srgb, var(--mud-palette-success) 78%, transparent);
}

.cm-col-late[b-x8ntdz2y40] {
    color: var(--mud-palette-warning-text);
    background: color-mix(in srgb, var(--mud-palette-warning) 82%, transparent);
}

.cm-col-end[b-x8ntdz2y40] {
    color: var(--mud-palette-error-text);
    background: color-mix(in srgb, var(--mud-palette-error) 78%, transparent);
}

.cm-col-general[b-x8ntdz2y40] {
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-action-default-hover);
}

.cm-grid-label[b-x8ntdz2y40] {
    display: flex;
    align-items: center;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    padding-right: 4px;
}

.cm-grid-cell[b-x8ntdz2y40] {
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 6px;
    padding: 6px 8px;
    min-height: var(--cm-cell-min, 44px);
    display: flex;
    align-items: center;
}

/* The phone layout, off above the breakpoint where the grid is what shows. */
.cm-style-cards[b-x8ntdz2y40] {
    display: none;
}

.cm-style-card-front[b-x8ntdz2y40] {
    --cm-style-color: var(--mud-palette-info);
}

.cm-style-card-pace[b-x8ntdz2y40] {
    --cm-style-color: var(--mud-palette-success);
}

.cm-style-card-late[b-x8ntdz2y40] {
    --cm-style-color: var(--mud-palette-warning);
}

.cm-style-card-end[b-x8ntdz2y40] {
    --cm-style-color: var(--mud-palette-error);
}

.cm-style-card-general[b-x8ntdz2y40] {
    --cm-style-color: var(--mud-palette-lines-default);
}

/* Six columns of 80px icons need ~570px, roughly twice a phone's width. Scrolling them sideways was
   the first attempt and it did fit, but what it fit was a 400px strip with its header row scrolled
   out of sight. The style cards take over instead: the style is the heading, in its own colour, and
   the bands read down it. */
@media (max-width: 900px) {
    .cm-grid[b-x8ntdz2y40] {
        display: none;
    }

    .cm-style-cards[b-x8ntdz2y40] {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .cm-style-card[b-x8ntdz2y40] {
        border: 1px solid color-mix(in srgb, var(--cm-style-color) 55%, transparent);
        border-left-width: 4px;
        border-radius: 8px;
        padding: 8px 10px;
        background: color-mix(in srgb, var(--cm-style-color) 8%, transparent);
    }

    .cm-style-card-head[b-x8ntdz2y40] {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.8rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .cm-style-band[b-x8ntdz2y40] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 0;
        border-top: 1px solid var(--mud-palette-divider);
    }

    .cm-style-band:first-of-type[b-x8ntdz2y40] {
        border-top: none;
    }

    .cm-style-band-label[b-x8ntdz2y40] {
        flex: 0 0 4.5rem;
        font-size: 0.7rem;
        color: var(--mud-palette-text-secondary);
    }

    /* .cm-uma-icon is on a MudImage, which never carries this component's scope attribute, so a
       plain rule for it compiles to a selector that matches nothing. ::deep from the band, which
       does carry it, is what lands the size - the callers ask for 80px icons and a phone has room
       for nothing like that. */
    .cm-style-band[b-x8ntdz2y40]  .cm-uma-icon {
        width: 44px;
        height: 44px;
    }
}
/* /Components/Cm/CmInheritIcons.razor.rz.scp.css */
/* Back to back, the way guides draw it: the run of icons is the quantity, so no gap between them.
   It wraps rather than overflowing when a deck asks for the full 18. */
.cm-deck-inherit[b-2wsw1kvwxj] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
/* /Components/Cm/CmMeetHeader.razor.rz.scp.css */
/* Capped on both axes rather than given a fixed height: a banner is wider than it is tall, so a
   height alone let it run past a phone's viewport, where the topbar clipped it. max-width holds it
   inside instead, and auto on both dimensions keeps the aspect ratio while each cap applies. */
.cm-head-banner[b-371b1tkvfl] {
  max-height: 108px;
  max-width: 100%;
  height: auto;
  width: auto;
}

/* The bar is sticky, so on a phone a full-height banner would hold a fifth of the screen open for
   art, above the two rows of controls that are the reason it is pinned. */
@media (max-width: 900px) {
  .cm-head-banner[b-371b1tkvfl] {
    max-height: 64px;
  }
}
/* /Components/Cm/CmMeetTile.razor.rz.scp.css */
.cm-meet-tile[b-mxbc5bidna] {
  height: 100%;
}

/* The meet the planner considers current: a heavier border in the theme accent, so it stands
   out from its neighbours without a second colour. */
.cm-meet-tile-current[b-mxbc5bidna] {
  border-width: 2px;
  border-color: var(--mud-palette-primary);
}

/* The zodiac art itself only fills the middle ~60% of its square (glow fading to a wide
   transparent margin), so a plain img at this footprint reads as small. Clipping the wrapper
   to the tile's footprint and scaling the img up inside it crops that dead margin away instead
   of just enlarging the empty space around the art. */
.cm-meet-tile-zodiac-wrap[b-mxbc5bidna] {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  overflow: hidden;
}

.cm-meet-tile-zodiac[b-mxbc5bidna] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.6);
}
/* /Components/Cm/CmPlacedChip.razor.rz.scp.css */
.cm-placed-chip[b-3g2bt1hmnb] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
}

.mud-drop-item-preview .cm-placed-chip[b-3g2bt1hmnb] {
  box-shadow: var(--mud-elevation-8);
}
/* /Components/Cm/CmPoolChip.razor.rz.scp.css */
/* One draggable palette entry: uma icon over its name and costume title. The drag preview
   MudBlazor clones keeps this element (and its scope attribute), so the preview rule works. */
.cm-pool-chip[b-nmjv4ftz6w] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border-radius: 8px;
  text-align: center;
  cursor: grab;
  user-select: none;
}

.cm-pool-chip:hover[b-nmjv4ftz6w] {
  background: var(--mud-palette-action-default-hover);
}

.cm-pool-name[b-nmjv4ftz6w] {
  font-size: 0.66rem;
  line-height: 1.2;
  color: var(--mud-palette-text-secondary);
  word-break: break-word;
}

.cm-pool-sub[b-nmjv4ftz6w] {
  font-size: 0.58rem;
  line-height: 1.15;
  color: var(--mud-palette-text-disabled);
  word-break: break-word;
}

.mud-drop-item-preview .cm-pool-chip[b-nmjv4ftz6w] {
  box-shadow: var(--mud-elevation-8);
  background: var(--mud-palette-surface);
}
/* /Components/Cm/CmScheduleTimeline.razor.rz.scp.css */
.cm-tl[b-3mfv8yb7el] {
  padding: 4px 10px 0;
}

.cm-tl-bar[b-3mfv8yb7el] {
  position: relative;
  height: 56px;
}

.cm-tl-track[b-3mfv8yb7el] {
  position: absolute;
  top: 9px;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--mud-palette-gray-lighter);
}

.cm-tl-fill[b-3mfv8yb7el] {
  position: absolute;
  top: 9px;
  left: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--mud-palette-primary);
}

.cm-tl-now[b-3mfv8yb7el] {
  position: absolute;
  top: -5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  z-index: 2;
}

.cm-tl-now span[b-3mfv8yb7el] {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--mud-palette-primary);
  margin-bottom: 2px;
  white-space: nowrap;
}

.cm-tl-now i[b-3mfv8yb7el] {
  width: 2px;
  height: 24px;
  background: var(--mud-palette-primary);
}

.cm-tl-stop[b-3mfv8yb7el] {
  position: absolute;
  top: 2px;
  left: var(--cm-tl-pos);
  transform: translateX(var(--cm-tl-shift));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 24%;
}

.cm-tl-dot[b-3mfv8yb7el] {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--mud-palette-surface);
  border: 2px solid var(--mud-palette-lines-default);
  box-sizing: border-box;
}

.cm-tl-stop.done .cm-tl-dot[b-3mfv8yb7el] {
  background: var(--mud-palette-primary);
  border-color: var(--mud-palette-primary);
}

.cm-tl-stop.current .cm-tl-dot[b-3mfv8yb7el] {
  border-color: var(--mud-palette-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 24%, transparent);
}

.cm-tl-ph[b-3mfv8yb7el] {
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 8px;
}

.cm-tl-stop.current .cm-tl-ph[b-3mfv8yb7el] {
  color: var(--mud-palette-primary);
}

.cm-tl-dt[b-3mfv8yb7el] {
  font-size: 0.7rem;
  color: var(--mud-palette-text-secondary);
  white-space: nowrap;
}

/* First and last stops align their text to the container edges (the dot is edge-anchored). */
.cm-tl-stop:last-child[b-3mfv8yb7el] {
  align-items: flex-end;
  text-align: right;
}

.cm-tl-foot[b-3mfv8yb7el] {
  font-size: 0.7rem;
  color: var(--mud-palette-text-disabled);
  text-align: right;
  margin-top: 10px;
}

.cm-tl-foot .mud-icon-root[b-3mfv8yb7el] {
  font-size: 0.85rem;
  vertical-align: -3px;
}

/* Four dates that never wrap need ~400px side by side; a phone's card leaves the bar under 300px,
   so the stops sat on top of each other. Below the breakpoint the timeline becomes a plain vertical
   list, phase on the left and date on the right. The rail goes with it, and so does the now marker,
   which has no line left to stand on - the filled and ringed dots already say how far along the
   meet is. */
@media (max-width: 900px) {
  .cm-tl-bar[b-3mfv8yb7el] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: auto;
  }

  .cm-tl-track[b-3mfv8yb7el],
  .cm-tl-fill[b-3mfv8yb7el],
  .cm-tl-now[b-3mfv8yb7el] {
    display: none;
  }

  .cm-tl-stop[b-3mfv8yb7el],
  .cm-tl-stop:last-child[b-3mfv8yb7el] {
    position: static;
    width: 100%;
    transform: none;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    text-align: left;
  }

  .cm-tl-dot[b-3mfv8yb7el] {
    flex: 0 0 auto;
  }

  .cm-tl-ph[b-3mfv8yb7el] {
    margin-top: 0;
  }

  .cm-tl-dt[b-3mfv8yb7el] {
    margin-left: auto;
  }
}
/* /Components/Cm/CmStatField.razor.rz.scp.css */
/* Icon over value. The field's own colour underline is a MudNumericField rule, so it lives
   in app.css and reads the --cm-stat-color set here. */
.cm-stat-edit[b-wwpis52oiz] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
/* /Components/Cm/CmStatRow.razor.rz.scp.css */
/* The five stat fields, spread across the row's full width and collapsing to fewer columns on
   narrow viewports. Each field is a CmStatField. */
.cm-stat-edit-set[b-r0yummaur4] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: 14px;
}
/* /Components/Cm/CmStatTargets.razor.rz.scp.css */
.cm-stat-targets[b-o4i5088dtp] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cm-stat-arch-label[b-o4i5088dtp] {
  font-size: 0.72rem;
  color: var(--mud-palette-text-secondary);
  margin-bottom: 6px;
}

.cm-stat-grid[b-o4i5088dtp] {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}

.cm-stat-col[b-o4i5088dtp] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.cm-stat-tile-ico[b-o4i5088dtp] {
  width: 22px;
  height: 22px;
}

.cm-stat-tile-bar[b-o4i5088dtp] {
  width: 66%;
  height: 2px;
  border-radius: 1px;
}

.cm-stat-tile-val[b-o4i5088dtp] {
  font-size: 0.92rem;
  font-weight: 600;
}

/* The gold recoveries a stamina target assumes, under the number as "2x <icon>". */
.cm-stat-gold[b-o4i5088dtp] {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.cm-stat-gold-count[b-o4i5088dtp] {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--mud-palette-text-secondary);
}

.cm-stat-gold-ico[b-o4i5088dtp] {
  width: 20px;
  height: 20px;
  border-radius: 5px;
}
/* /Components/Cm/CmStyleChip.razor.rz.scp.css */
/* Running-style label (runstyle icon + name). */
.cm-style-chip[b-zdl8c8c36g] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  white-space: nowrap;
}

.cm-style-ico[b-zdl8c8c36g] {
  flex: 0 0 auto;
  border-radius: 4px;
}
/* /Components/Cm/CmSummaryPanel.razor.rz.scp.css */
/* A labelled row: leading chip/icon, a growing middle, optional trailing meta. */
.cm-summary-row[b-wsiaznac6h] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid var(--mud-palette-divider);
  font-size: 0.85rem;
}

.cm-summary-row:first-of-type[b-wsiaznac6h] {
  border-top: none;
}

/* Rows whose right-hand content wraps (icon chip groups) align to the top. */
.cm-summary-row-top[b-wsiaznac6h] {
  align-items: flex-start;
}

/* Fixed-width style label column so the uma groups beside it line up. */
.cm-style-col[b-wsiaznac6h] {
  flex: 0 0 auto;
  min-width: 74px;
}

.cm-summary-grow[b-wsiaznac6h] {
  flex: 1 1 auto;
}

/* Wrapping group of small skill tiles (key greens). */
.cm-green-wrap[b-wsiaznac6h] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* The style column holds a fixed width that squeezes the uma icons on a phone; below the
   breakpoint the label sits above its row instead. */
@media (max-width: 900px) {
  .cm-summary-row-top[b-wsiaznac6h] {
    flex-wrap: wrap;
  }

  .cm-style-col[b-wsiaznac6h] {
    min-width: 0;
  }
}
/* /Components/Cm/CmUmaGroup.razor.rz.scp.css */
.cm-uma-group[b-xe2yz77ldb] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cm-uma[b-xe2yz77ldb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 3px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background-gray);
    font-size: 0.8rem;
    line-height: 1.2;
}

.cm-uma-linked[b-xe2yz77ldb] {
    color: inherit;
    text-decoration: none;
    transition: border-color 120ms ease;
}

.cm-uma-linked:hover[b-xe2yz77ldb] {
    border-color: var(--mud-palette-primary);
}

.cm-uma-icon[b-xe2yz77ldb] {
    border-radius: 50%;
    flex: 0 0 auto;
}

.cm-uma-text[b-xe2yz77ldb] {
    padding: 3px 10px;
    color: var(--mud-palette-text-secondary);
}

.cm-uma-name[b-xe2yz77ldb] {
    white-space: nowrap;
}

/* Icon-only mode: drop the pill chrome, show just the round icon (name on hover). */
.cm-uma-iconly[b-xe2yz77ldb] {
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
}

/* .cm-uma-icon sits on a MudImage, which never carries this component's scope attribute, so a plain
   descendant rule compiles to a selector that matches nothing. ::deep from the chip, which does
   carry it, is what lands. Only the linked (read-only) icons react: the editor's chips render as
   spans and are drag handles, not links. Hover-capable pointers only, so a tap doesn't leave a
   phone icon stuck in the lifted state. */
@media (hover: hover) {
    a.cm-uma-iconly[b-xe2yz77ldb]  .cm-uma-icon {
        transition: transform 120ms ease, box-shadow 120ms ease;
    }

    /* The site's clickable-card hover (see .mud-card.cursor-pointer:hover in app.css): lift, primary
       edge, soft shadow. The edge rides in the same box-shadow rather than a border, which would
       resize the icon on hover. */
    a.cm-uma-iconly:hover[b-xe2yz77ldb]  .cm-uma-icon {
        transform: translateY(-2px);
        box-shadow:0 6px 20px var(--uma-shadow-soft);
    }
}

/* The parents grid asks for 80px icons, which no phone can fit six columns of. The width/height
   attributes MudImage renders are presentational hints, so this plain rule wins over them. */
@media (max-width: 900px) {
    .cm-grid .cm-uma-icon[b-xe2yz77ldb] {
        width: 44px;
        height: 44px;
    }
}
/* /Components/Cm/CmUmaPool.razor.rz.scp.css */
/* The shared uma palette beside both drag boards. The drop zone's own grid is a MudDropZone
   class (.cm-pool-grid, in app.css); everything here is the panel around it. */
.cm-pool[b-a4q42g818n] {
  flex: 0 1 300px;
  min-width: 280px;
  border: 1px solid var(--mud-palette-divider);
  border-radius: 8px;
  padding: 10px;
}

.cm-pool-scroll[b-a4q42g818n] {
  max-height: 360px;
  overflow-y: auto;
}

/* On phones the pool sits under the board and spans it, rather than holding a 280px column
   open and pushing the layout past the viewport. */
@media (max-width: 900px) {
  .cm-pool[b-a4q42g818n] {
    flex: 1 1 100%;
    min-width: 0;
  }
}
/* /Components/Compare/CompareCardColumn.razor.rz.scp.css */
/* The header cell is this component's own root div, so the scope attribute lands on it and these
   rules apply. It matches the matrix cells' hairline borders so the header aligns with the rows
   below (those borders live in CompareTable's scoped CSS on the cells it owns). */
.compare-col-head[b-ms183sh5sn] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    background: var(--mud-palette-background-gray);
    border-left: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    /* Freeze the card header (art + name + controls) to the top of the matrix's scroll area, so it
       stays visible while scrolling down through the stat rows. Sits above the plain stat cells but
       below the sticky top-left corner (z-index 3 in CompareTable's scoped CSS). */
    position: sticky;
    top: 0;
    z-index: 2;
}

/* The card art doubles as the reorder drag handle. Capped narrower than the column and centered so
   the images don't eat horizontal space; the column width sets the row's stat cells, not the art. */
.compare-drag-handle[b-ms183sh5sn] {
    cursor: grab;
    max-width: 5rem;
    margin-inline: auto;
}

/* Reserve a fixed two-line height for the card name so a name that wraps (e.g. "Heirs to the Throne")
   doesn't grow its header taller than its neighbours and shove the limit-break row out of alignment.
   Longer names clamp to two lines with an ellipsis. ::deep reaches the MudText's own <p>, which a plain
   scoped rule can't (the scope attribute lands on this div, not the child component's DOM). */
.compare-col-name[b-ms183sh5sn] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4em;
    text-align: center;
}

.compare-col-name[b-ms183sh5sn]  p {
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.compare-drag-handle:active[b-ms183sh5sn] {
    cursor: grabbing;
}

/* Drag styling mirrors the Deck Builder's slots (.deck-slot-active / .deck-slot-over): while a drag
   is in flight every column reads as a drop target with a dashed outline, and its children stop
   intercepting pointer events so dragenter/dragleave fire on the header alone (no flicker from
   crossing child boundaries). The column under the cursor turns primary with a light primary tint.
   Outline is inset here (not offset outward like the deck) because the columns sit edge to edge. */
.compare-col-head-active[b-ms183sh5sn] {
    outline: 2px dashed var(--mud-palette-lines-default);
    outline-offset: -2px;
}

.compare-col-head-active > *[b-ms183sh5sn] {
    pointer-events: none;
}

.compare-col-head-over[b-ms183sh5sn] {
    outline-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

/* Phones (uma.guide-style): the header is a read-only tap target no wider than its slim stat cells
   (~2.6rem, see the matrix's mobile grid) - tiny art, tiny name, a limit-break badge. All the editing
   (limit break / baseline / replace / remove) moved into the config sheet that opens on tap, so nothing
   interactive has to fit the narrow column. */
@media (max-width: 900px) {
    .compare-col-head[b-ms183sh5sn] {
        padding: 3px;
        gap: 2px;
        /* Let the grid's 1fr track own the width and clip anything inside, so the header can never force
           a column wider than the slim stat cells below it. */
        min-width: 0;
        overflow: hidden;
    }

    /* The whole header is one tap target that opens the card's config sheet. */
    .compare-col-tap[b-ms183sh5sn] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        min-width: 0;
        cursor: pointer;
        border-radius: 6px;
    }

    /* Ring marks the column currently set as the comparison baseline. */
    .compare-col-tap-target[b-ms183sh5sn] {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: -2px;
    }

    .compare-drag-handle[b-ms183sh5sn] {
        max-width: 2.4rem;
    }

    .compare-col-name[b-ms183sh5sn] {
        min-height: 2em;
    }

    .compare-col-name[b-ms183sh5sn]  p {
        font-size: 0.6rem;
        line-height: 1.1;
    }

    /* The current limit break as a small read-only badge (the editable picker lives in the sheet). */
    .compare-lb-badge[b-ms183sh5sn] {
        font-size: 0.62rem;
        font-weight: 600;
        line-height: 1;
        padding: 2px 6px;
        border-radius: 999px;
        background: var(--mud-palette-primary);
        color: var(--mud-palette-primary-text);
    }
}
/* /Components/Compare/CompareCardConfigSheet.razor.rz.scp.css */
/* Small card thumbnail beside the name in the sheet header. */
.compare-config-art[b-5wxtzuvd9w] {
    width: 72px;
    flex: none;
}

/* The limit-break picker spans the sheet, its five segments sharing the width equally. ::deep reaches
   MudToggleGroup's own items, which the scope attribute can't stamp. */
.compare-lb-toggle[b-5wxtzuvd9w] {
    width: 100%;
}

.compare-lb-toggle[b-5wxtzuvd9w]  .mud-toggle-item {
    flex: 1 1 0;
    justify-content: center;
}
/* /Components/Compare/CompareSimBar.razor.rz.scp.css */
/* The sim bar is built wide for the desktop panel: its selects carry inline min-widths (12rem / 8rem /
   7rem) and the growth fields a fixed width. On a phone (it moves into the full-screen Options dialog)
   those min-widths stop the flex rows wrapping, so the controls overflow the dialog and get clipped.
   Under the app's mobile boundary, let every control shrink to the available width and wrap. The inline
   min-widths are non-important, so a stylesheet !important wins. ::deep reaches MudBlazor's own DOM,
   which the scope attribute (on .compare-sim) can't stamp. */
@media (max-width: 900px) {
    .compare-sim[b-oh5nfggl48]  .mud-input-control {
        min-width: 0 !important;
    }

    /* The five growth fields (Speed..Wit) share one row: let them grow to fill instead of a fixed
       6.5rem each. A 7rem basis lands ~3 per line, so each stays wide enough that the number, the "%"
       and the stepper arrows are not squished. */
    .compare-sim[b-oh5nfggl48]  .mud-input-control.compare-growth-field {
        width: auto !important;
        flex: 1 1 7rem;
    }
}
/* /Components/Compare/CompareTrainingMatrix.razor.rz.scp.css */
/* The comparison matrix: a fixed grid with a sticky label column and one column per card. It holds
   the card effect rows, the hint/event skill rows, and the per-facility training rows in one table.
   One label column plus one column per card, scrolling horizontally inside its own wrapper so a wide
   matrix never widens the page. */

.compare-scroll[b-v3w00frkkw] {
    /* Horizontal scroll only: the page owns vertical scroll, so the facility sections stack and grow
       the page rather than scrolling inside a fixed-height box. The sticky label column still freezes
       against this horizontal scrollport. */
    overflow-x: auto;
    background: var(--mud-palette-surface);
}

.compare-grid[b-v3w00frkkw] {
    display: grid;
    grid-template-columns: minmax(8rem, 10rem) repeat(var(--compare-cols), minmax(6.5rem, 9rem));
    min-width: min-content;
    justify-content: start;
    align-items: stretch;
}

.compare-corner[b-v3w00frkkw],
.compare-rowlabel[b-v3w00frkkw],
.compare-cell[b-v3w00frkkw] {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    border-left: 1px solid var(--mud-palette-lines-default);
}

/* Sticky label column: the corner and every row label freeze on the left while cells scroll under. */
.compare-corner[b-v3w00frkkw],
.compare-rowlabel[b-v3w00frkkw] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--mud-palette-surface);
    border-left: none;
    box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.18);
}

.compare-corner[b-v3w00frkkw] {
    top: 0;
    z-index: 3;
    background: var(--mud-palette-background-gray);
}

.compare-rowlabel[b-v3w00frkkw] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

/* Facility band: a heading row that spans the label column, with the card cells beside it filled in
   the same tint so the section reads as one strip. */
.compare-section[b-v3w00frkkw] {
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
    background: var(--mud-palette-background-gray);
}

.compare-section-fill[b-v3w00frkkw] {
    background: var(--mud-palette-background-gray);
}

/* Stat value cells: right-aligned numbers, the winning cell tinted success, each with a left-anchored
   fill bar (::before) sized to the cell's share of the row best. */
.compare-cell[b-v3w00frkkw] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 8px 12px;
    font-size: 0.9rem;
    min-height: 2.25rem;
}

.compare-cell[b-v3w00frkkw]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--compare-fill, 0);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    pointer-events: none;
}

.compare-value[b-v3w00frkkw],
.compare-dash[b-v3w00frkkw] {
    position: relative;
    z-index: 1;
    font-variant-numeric: tabular-nums;
}

.compare-value[b-v3w00frkkw] {
    font-weight: 600;
}

.compare-dash[b-v3w00frkkw] {
    color: var(--mud-palette-text-disabled);
}

.compare-cell-best[b-v3w00frkkw] {
    background: var(--mud-palette-success-hover);
}

.compare-cell-best[b-v3w00frkkw]::before {
    background: color-mix(in srgb, var(--mud-palette-success) 22%, transparent);
}

.compare-cell-best .compare-value[b-v3w00frkkw] {
    color: var(--mud-palette-success-darken);
    font-weight: 700;
}

/* Baseline mode: the target column reads neutral (primary tint); every other cell shows a signed
   delta against it, its bar still sized to the row best (so length always means value) and coloured
   by direction, with a dashed marker (::after) at the baseline's own level as the surplus/deficit
   threshold. */
.compare-cell-target[b-v3w00frkkw] {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

.compare-cell-target[b-v3w00frkkw]::before {
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
}

.compare-cell-target .compare-value[b-v3w00frkkw] {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.compare-delta[b-v3w00frkkw] {
    position: relative;
    z-index: 1;
    margin-left: 4px;
    font-weight: 600;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.compare-cell-up[b-v3w00frkkw]::before {
    background: color-mix(in srgb, var(--mud-palette-success) 18%, transparent);
}

.compare-cell-up .compare-delta[b-v3w00frkkw] {
    color: var(--mud-palette-success-darken);
}

.compare-cell-down[b-v3w00frkkw]::before {
    background: color-mix(in srgb, var(--mud-palette-error) 16%, transparent);
}

.compare-cell-down .compare-delta[b-v3w00frkkw] {
    color: var(--mud-palette-error);
}

/* Threshold at the baseline's level: two short ticks at the top and bottom edges rather than a full
   line, so the cell's value text (which sits centred) never has the marker crossing its glyphs.
   Translated back 1px so it hugs the right edge when the baseline is the row best. */
.compare-cell-baseline[b-v3w00frkkw]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--compare-mark, 0);
    width: 2px;
    transform: translateX(-1px);
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--mud-palette-text-primary) 55%, transparent) 0 7px,
        transparent 7px calc(100% - 7px),
        color-mix(in srgb, var(--mud-palette-text-primary) 55%, transparent) calc(100% - 7px) 100%);
    pointer-events: none;
}

/* Phones (uma.guide-style): slim the label column and card columns hard so ~6 cards fit without
   horizontal scroll (label ~40px + 6 x ~44px < 375px). The card columns divide the width (1fr); the
   small min-track only forces the scroll (safety net above) once there are more columns than fit.
   Tighter padding / smaller type keep the narrow cells legible. */
@media (max-width: 900px) {
    .compare-grid[b-v3w00frkkw] {
        /* A touch more room for the label column (now that the card columns are slim, they can afford it)
           so words like "Friendship" sit on one line instead of shattering. Card tracks are 1fr with a
           small min so ~6 fit before the grid scrolls sideways. */
        grid-template-columns: minmax(3.25rem, 5rem) repeat(var(--compare-cols), minmax(2.6rem, 1fr));
        /* Override the desktop min-content floor: without this a long stat label ("Effectiveness")
           forces the whole grid wider than the phone and it scrolls before ~6 cards fit. Letting it
           shrink to the container makes the 1fr card tracks divide the width so ~6 fit. */
        min-width: 0;
    }

    .compare-rowlabel[b-v3w00frkkw] {
        padding: 4px 6px;
        font-size: 0.64rem;
        line-height: 1.15;
        /* Break between words and hyphenate the rare long single word ("Effectiveness"), rather than
           shattering every label mid-word the way "anywhere" did ("Friendshi p Bonus"). */
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: auto;
    }

    .compare-section[b-v3w00frkkw] {
        font-size: 0.6rem;
        padding: 4px 6px;
        /* Multi-word section headings wrap by word; keep them lower-case-height (no uppercase) on phones
           so "Card effects" / "Power Training" don't blow past the slim label column. */
        text-transform: none;
        letter-spacing: 0;
        line-height: 1.1;
    }

    .compare-cell[b-v3w00frkkw] {
        padding: 4px 4px;
        font-size: 0.72rem;
        min-height: 1.7rem;
    }

    .compare-delta[b-v3w00frkkw] {
        font-size: 0.62rem;
        margin-left: 1px;
    }

    /* Shorter cells here, so shorten the baseline ticks too and keep the middle text band clear. */
    .compare-cell-baseline[b-v3w00frkkw]::after {
        background: linear-gradient(to bottom,
            color-mix(in srgb, var(--mud-palette-text-primary) 55%, transparent) 0 5px,
            transparent 5px calc(100% - 5px),
            color-mix(in srgb, var(--mud-palette-text-primary) 55%, transparent) calc(100% - 5px) 100%);
    }
}
/* /Components/Deck/DeckFilterPanel.razor.rz.scp.css */
/* Selected skill criteria: a light divider between rows so each skill + its Hint/Event
   toggle reads as a distinct line. */
.deck-skill-row + .deck-skill-row[b-5sudllfm84] {
    border-top: 1px solid var(--mud-palette-divider);
}

/* Rarity + type live in a quick-access bar above the grid on desktop, so drop the modal's
   Card section there; the modal keeps it only on mobile (max-width 900px is the app boundary). */
@media (min-width: 901px) {
    .deck-card-facets[b-5sudllfm84] {
        display: none;
    }
}
/* /Components/Deck/DeckPickerPanel.razor.rz.scp.css */
/* Drop host wrapping the picker search: fills the panel below the heading (so .card-search,
   which is flex: 1 1 0; min-height: 0, gets a bounded height to scroll in) and anchors the
   absolutely-positioned remove overlay. */
.deck-pick-drop[b-tn9fiw3f1k] {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Stacked layout (narrow screens / zoom): match the panel and let everything flow naturally
   down the page rather than collapsing below its content (see app.css deck notes). */
@media (max-width: 900px) {
    .deck-pick-drop[b-tn9fiw3f1k] {
        flex: 0 0 auto;
        min-height: auto;
        overflow: visible;
    }
}
/* /Components/Deck/DeckPickerTile.razor.rz.scp.css */
/* A draggable card reads as grabbable; non-draggable ones keep the tile's own cursor. */
.deck-picker-tile[draggable="true"][b-jv9nia6687] {
    cursor: grab;
}

.deck-picker-tile[draggable="true"]:active[b-jv9nia6687] {
    cursor: grabbing;
}
/* /Components/Deck/DeckRemoveOverlay.razor.rz.scp.css */
/* Covers the picker drop area while a deck card is in flight. pointer-events:none lets the
   drag/drop fall through to the .deck-pick-drop host beneath it.

   A tinted panel, matching the slots' drop zones: across the deck builder a filled tint means "drop
   here" and a dashed edge means "empty slot at rest", so this can't carry a dashed border without
   reading as the same thing an empty slot does. The tint is far weaker than a zone's because it
   covers the whole picker rather than a ~90px card, and error at 46% over that area drowns the
   grid underneath. */
.deck-remove-overlay[b-rpv77t4n74] {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-error) 14%, transparent);
    color: var(--mud-palette-error);
}
/* /Components/Deck/DeckShareDialog.razor.rz.scp.css */
/* Same responsive stat grid as the Stats panel (scoped CSS doesn't cross components, so it's
   duplicated here rather than shared). */
.deck-stat-grid[b-mjazi9iatm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
    gap: 8px;
}

/* The popover positions itself against its nearest positioned ancestor, so the search field and
   its dropdown share this wrapper. The z-index puts both above the click-catching overlay (1402),
   so typing and clearing still work while the dropdown is open. */
.deck-skill-search[b-mjazi9iatm] {
    position: relative;
    z-index: 1403;
}

.deck-skill-picker[b-mjazi9iatm] {
    max-height: 20rem;
    overflow-y: auto;
}

/* Fixed at four rows, empty or full, so picking and unpicking never moves the preview panel below
   it. A small tile is 42px (28px icon + 6px padding + 1px border, doubled), MudGrid's spacing-2
   adds 8px of item padding above and below and pulls 8px back off the top and bottom of the grid:
   4 * (42 + 16) - 16 = 216px. The side padding cancels the same negative margin horizontally,
   which would otherwise overflow this scroll box sideways. */
.deck-skill-picked[b-mjazi9iatm] {
    height: 13.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 8px;
}

/* ::deep because the class sits on a MudText, whose DOM never carries the scope attribute. */
.deck-skill-picked[b-mjazi9iatm]  .deck-skill-picked-empty {
    padding-top: 8px;
    color: var(--mud-palette-text-secondary);
}

.deck-skill-count[b-mjazi9iatm] {
    font-size: .85rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    margin-left: auto;
}

.deck-share-preview[b-mjazi9iatm] {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
}

/* Sits over the previous render rather than replacing it, so the panel doesn't collapse and
   jump while the new PNG is on the wire. The scrim is dark in both themes because what it
   covers is always the same light share image. */
.deck-share-preview-loading[b-mjazi9iatm] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.45);
    color: #fff;
}

.deck-share-preview-image[b-mjazi9iatm] {
    display: block;
    width: 100%;
    max-width: 100%;
    transition: filter 120ms ease;
}

/* The hover hint is a slight dim, not a lift: the panel is a picture being read, so it must not
   move or gain a shadow, and the dim has to stay light enough to read through. */
@media (hover: hover) {
    .deck-share-preview:hover .deck-share-preview-image[b-mjazi9iatm] {
        filter: brightness(0.94);
    }

    .deck-share-preview[b-mjazi9iatm]  .deck-share-preview-copy {
        opacity: 0;
    }

    .deck-share-preview:hover[b-mjazi9iatm]  .deck-share-preview-copy,
    .deck-share-preview[b-mjazi9iatm]  .deck-share-preview-copy:focus-visible {
        opacity: 1;
    }
}

/* ::deep: the class rides on a MudButton, which renders its own DOM. A frosted dark pill, because
   what sits under the corner is a picture and any flat fill either fights it or gets lost in it. */
.deck-share-preview[b-mjazi9iatm]  .deck-share-preview-copy {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 14px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    background-color: rgba(18, 18, 22, 0.6);
    backdrop-filter: blur(6px);
    color: #fff;
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: 0;
    text-transform: none;
    transition: opacity 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.deck-share-preview[b-mjazi9iatm]  .deck-share-preview-copy:hover {
    background-color: rgba(18, 18, 22, 0.82);
    border-color: rgba(255, 255, 255, 0.5);
}
/* /Components/Deck/DeckShareSkillRow.razor.rz.scp.css */
/* The tile is rendered by SkillTile, so every rule aimed at it needs ::deep to get past the
   scope attribute. It is a static tile (no navigation), so the lift the global stylesheet
   suppresses is re-applied here to read as "click to remove". */
.deck-skill-row[b-ahl63j7ap4] {
    cursor: pointer;
}

.deck-skill-row[b-ahl63j7ap4]  .uma-skill-tile {
    cursor: pointer;
}

.deck-skill-row[b-ahl63j7ap4]  .deck-skill-row-remove {
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
    transition: color 120ms ease;
}

@media (hover: hover) {
    .deck-skill-row:hover[b-ahl63j7ap4]  .uma-skill-tile {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px var(--uma-shadow-soft);
    }

    .deck-skill-row:hover[b-ahl63j7ap4]  .deck-skill-row-remove {
        color: var(--mud-palette-error);
    }
}
/* /Components/Deck/DeckSkillSources.razor.rz.scp.css */
/* Pinned to the end of a skill tile, after the name. */
.deck-skill-sources[b-uxi05cu43f] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    margin-left: auto;
}

/* Small enough that three fit beside a skill name without pushing it out, big enough that the
   character's colours still identify the card. */
.deck-skill-source-icon[b-uxi05cu43f] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.deck-skill-source-more[b-uxi05cu43f] {
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Deck/DeckSkillsPanel.razor.rz.scp.css */
.deck-skill-pool[b-4jrf7erdfy] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* /Components/Deck/DeckSlot.razor.rz.scp.css */
/* Drop-target host wrapping the whole slot: card (or placeholder + type strip), then the footer
   row that pairs the limit-break picker with the menu. */
.deck-slot-host[b-vakobslu2m] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-radius: 12px;
}

/* While a deck drag is in flight every slot's inner content stops intercepting pointer events so
   dragenter/dragleave fire on the host alone (no flicker from crossing child boundaries).
   Deliberately no outline of its own: a dashed edge means "empty slot" here, and reusing it for
   "drop target" put a ring around every slot at once on top of the drop zones' own edges - three
   nested rings on a ~90px card, and no way to tell which slot the card would land in. The tinted
   zones below are the only drag affordance. */
.deck-slot-host.deck-slot-active > *[b-vakobslu2m] {
    pointer-events: none;
}

/* The card face, a positioning context so the drag-time drop zones cover the art alone and leave
   the caption/footer below untouched. */
.deck-slot-card[b-vakobslu2m] {
    position: relative;
}

/* Shown only while a card is dragged: the card face becomes stacked drop targets naming what
   dropping there does (add as a split option on top, replace/swap at the bottom), so the two
   outcomes are discoverable at the drop site instead of behind a mode toggle. Sits above the art,
   the rarity frame and the borrow pill. Re-enables pointer events over the host's drag-time
   pointer-events:none, so the zones can catch the drop while the inert art beneath can't. */
.deck-slot-dropzones[b-vakobslu2m] {
    position: absolute;
    /* Covers the whole card so it catches the cursor entering the slot, then pads its zones inward
       (with a gap between the two) so each reads as a smaller floating panel, not a full-bleed half. */
    inset: 0;
    box-sizing: border-box;
    padding: 6px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: auto;
    /* Present for the whole drag to catch the cursor, but invisible until this slot is hovered, so a
       drag doesn't tint every slot at once. Opacity 0 still hit-tests, so the reveal can trigger. */
    opacity: 0;
    transition: opacity 0.12s ease-in-out;
}

.deck-slot-dropzones.deck-slot-dropzones--live[b-vakobslu2m] {
    opacity: 1;
}

/* The zones themselves render inside the DeckSlotDropZoneCell child component, so they're reached
   with ::deep from the wrapper (which is in this component's markup) - Blazor doesn't stamp this
   slot's scope onto a child component's DOM. */
.deck-slot-dropzones[b-vakobslu2m]  .deck-slot-dropzone {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px;
    border-radius: 8px;
    text-align: center;
    color: #fff;
    /* Kept legible over the softer, more transparent fills below, including light card art. */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
    pointer-events: auto;
    transition: background 0.1s ease-in-out;
}

/* Only the zone div is the drop target; its icon and label never intercept, so dragging across
   them can't fire a spurious dragleave that drops the hover highlight. */
.deck-slot-dropzones[b-vakobslu2m]  .deck-slot-dropzone * {
    pointer-events: none;
}

.deck-slot-dropzones[b-vakobslu2m]  .deck-slot-dropzone-label {
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.deck-slot-dropzones[b-vakobslu2m]  .deck-slot-dropzone .mud-icon-root {
    font-size: 1.15rem;
}

/* Muted, semi-transparent tints at rest so the card art still reads through them. */
.deck-slot-dropzones[b-vakobslu2m]  .deck-slot-dropzone--add {
    background: color-mix(in srgb, var(--mud-palette-success) 46%, transparent);
}

.deck-slot-dropzones[b-vakobslu2m]  .deck-slot-dropzone--replace {
    background: color-mix(in srgb, var(--mud-palette-error) 46%, transparent);
}

/* A slot already at its option limit: the add zone greys out and takes no drop. */
.deck-slot-dropzones[b-vakobslu2m]  .deck-slot-dropzone--disabled {
    background: rgba(20, 20, 20, 0.4);
    color: rgba(255, 255, 255, 0.6);
}

/* The zone under the cursor firms up by tint alone: the jump from 46% to near-solid is a bigger
   read than a ring at this size, and a ring here would be the third nested edge on a ~90px card
   (card art frame, zone edge, ring). */
.deck-slot-dropzones[b-vakobslu2m]  .deck-slot-dropzone-over.deck-slot-dropzone--add {
    background: color-mix(in srgb, var(--mud-palette-success) 88%, transparent);
}

.deck-slot-dropzones[b-vakobslu2m]  .deck-slot-dropzone-over.deck-slot-dropzone--replace {
    background: color-mix(in srgb, var(--mud-palette-error) 88%, transparent);
}

/* The borrow (friend) slot is marked by its pill alone: the slot already carries a rarity frame or
   a type-coloured edge, and a pink ring on top of that read as a third border rather than a state.
   Pink is deliberately literal: no theme role carries it, and the borrow slot is meant to look like
   an exception to the deck rather than another accent.

   A small corner pill instead of a free-floating circle, matching how UnreleasedBadge marks a
   card elsewhere in the app. Sits inside the card face: a deck slot is only ~90px wide (the deck
   column is 37% of the page), so anything hung outside pokes into the grid gaps. */
.deck-slot-borrow-badge[b-vakobslu2m] {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
    background: #e0568f;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.deck-slot-borrow-badge .mud-icon-root[b-vakobslu2m] {
    font-size: 0.85rem;
}

/* A split slot carves the one card footprint it already occupies into wedges radiating from the
   centre, so every option is visible and the slot still measures the same as its neighbours.
   Stacking the options was the previous attempt and it made a two-way slot 367px against 168px
   neighbours; a four-way would have hit ~700px. Each wedge is the full card art clipped to its
   share (see DeckSplitGeometry), which is why they all sit on top of one another rather than
   flowing. */
.deck-slot-options[b-vakobslu2m] {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--uma-card-radius-full);
    overflow: hidden;
}

/* Its own compositing layer, so an async image decode repaints here directly. Without it the
   decode landed on the parent's clipped layer without invalidating it, and the wedge stayed blank
   white until an unrelated repaint came along. */
.deck-slot-option-cell[b-vakobslu2m] {
    transform: translateZ(0);
}

/* Inset by the frame's own ring thickness (21px of the 648x864 texture: 3.24% across, 2.43% down,
   the same absolute figure on a 3:4 box) so the art sits in the frame's opening rather than running
   flush to its outer edge. Flush meant the art's square corners met the outer arc exactly, and any
   sub-pixel disagreement between the clip and the texture let a sliver of art show outside the
   frame. Inset this far the corners land inside the opaque ring instead, which forgives the
   mismatch. */
.deck-slot-split .deck-slot-option-cell[b-vakobslu2m] {
    position: absolute;
    top: var(--uma-split-inset-y);
    right: var(--uma-split-inset-x);
    bottom: var(--uma-split-inset-y);
    left: var(--uma-split-inset-x);
}

/* The seams between wedges, drawn from the same geometry that cuts them. Painted in the surface
   colour so the split reads as one card divided rather than several cards abutting. Inset to match
   the wedges: the seams are cut from the same percentages, so sharing a box with the art is what
   keeps a diagonal seam on the boundary it is meant to trace. */
.deck-slot-seams[b-vakobslu2m] {
    position: absolute;
    top: var(--uma-split-inset-y);
    left: var(--uma-split-inset-x);
    /* Sized explicitly rather than by a bottom/right inset. An svg is a replaced element, so an
       absolutely positioned one with width:auto takes its INTRINSIC size and ignores the insets:
       a 1:1 viewBox then lands as a square, and preserveAspectRatio="none" squashes every seam off
       the wedge it is meant to trace. These two are the inset box: 100% - 2 x each inset. */
    width: var(--uma-split-seam-w);
    height: var(--uma-split-seam-h);
    pointer-events: none;
    stroke: var(--mud-palette-surface);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

/* The game's own rarity frame, laid over the finished wedges so the split reads as one card in a
   frame rather than loose art. Every other slot face has an edge of its own (dashed when empty, the
   type colour when bound, pink when borrowed, the art itself when a single card fills the
   footprint); a split had none.
   Drawn as a background rather than a border-image: border-image squeezes the corner slice into the
   border width, which would flatten the frame's rounded corners to nothing at a ~90px slot. A
   stretched background scales the whole ring, corners included. The texture is a hollow 3:4 ring,
   the same aspect as the slot, so 100% 100% never distorts it. */
.deck-slot-frame[b-vakobslu2m] {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* The active stat overlay across a whole split slot, drawn once above the frame rather than per
   wedge (a wedge has no room to read). Same bottom gradient panel a single card's own overlay uses
   (DeckSlotOption's .deck-slot-overlay), just scoped here since Blazor can't reach a sibling
   component's CSS. Carries a min-max range instead of one card's value, matching the flex
   placeholder's range and the share image's split-slot panel. */
.deck-slot-split-overlay[b-vakobslu2m] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    max-height: 75%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: 3px;
    padding: 20px 15px 14px;
    color: #fff;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 100%);
}

.deck-slot-split-overlay .deck-slot-overlay-row[b-vakobslu2m] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
}

.deck-slot-split-overlay .deck-slot-overlay-label[b-vakobslu2m] {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deck-slot-split-overlay .deck-slot-overlay-value[b-vakobslu2m] {
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.2;
    flex: 0 0 auto;
}

/* The frame's corners are symmetric where the app's card silhouette clips its top-right, so a split
   drops the asymmetry: kept, the art would round past the frame on that corner. 8% of the width and
   6% of the height are the same 52px arc the texture itself carries at 648x864. The wedges lose
   their own rounding for the same reason - the frame is opaque, so square art tucks under it and
   the slot clips whatever reaches the outer edge. */
.deck-slot-options.deck-slot-split[b-vakobslu2m] {
    border-radius: var(--uma-split-radius);
}

/* Inside a split the card face fills its wedge cell instead of deriving its own 3:4 box. Insetting
   a 3:4 slot by the same amount on all four sides leaves a cell that is NOT 3:4 (it loses more of
   its width proportionally than its height), so a face that re-imposes the ratio off width comes
   out a few pixels short and leaves a blank strip along the bottom of the frame. The art is
   object-fit: cover, so filling the cell crops rather than stretches. */
.deck-slot-split[b-vakobslu2m]  .deck-slot {
    border-radius: 0;
    height: 100%;
    aspect-ratio: auto;
}

/* The empty placeholder. Self-contained rather than leaning on the card-face rules, which now
   live in DeckSlotOption.razor.css and so are out of this component's scope. Holds the type strip
   inside itself, so an empty slot measures exactly the same as a filled one and placing a card
   never shifts the grid. */
.deck-slot-empty[b-vakobslu2m] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--uma-card-radius-full);
    overflow: hidden;
    border: 1px dashed var(--mud-palette-lines-default);
    /* Muted through colour rather than opacity: opacity would multiply down onto the type strip
       inside, and a child cannot climb back out of an ancestor's opacity. */
    color: var(--mud-palette-text-disabled);
}

.deck-slot-empty-hint[b-vakobslu2m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* Shown once a slot is type-bound, in place of the generic bookmark icon: the type reads at a
   glance rather than needing the caption below to be read. */
.deck-slot-empty-type-icon[b-vakobslu2m] {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/* Docked along the bottom of the placeholder and out of the centred icon/label flow, so the
   strip can't push the box taller than the card aspect ratio. Hidden until the slot is hovered,
   since a row of type icons sitting there permanently reads as clutter on an otherwise-empty
   slot; the type picker is a rarely-used affordance, not something worth showing at rest. */
.deck-slot-strip-dock[b-vakobslu2m] {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 6px;
    opacity: 0;
    transition: opacity 0.12s ease-in-out;
    pointer-events: none;
}

.deck-slot-empty:hover .deck-slot-strip-dock[b-vakobslu2m],
.deck-slot-strip-dock:focus-within[b-vakobslu2m] {
    opacity: 1;
    pointer-events: auto;
}

/* A type-bound placeholder is a decision, not a gap, so it firms up and takes its type's colour
   (set inline from UmaColors, the same palette the chips use). */
.deck-slot-empty.deck-slot-flex[b-vakobslu2m] {
    border-style: solid;
    border-width: 2px;
    color: var(--mud-palette-text-secondary);
}

/* The active stat overlay on a flex placeholder: the same bottom gradient panel a filled card uses
   (DeckSlotOption's .deck-slot-overlay), but carrying the type's min-max range instead of one card's
   value. Sits under the hover-only type strip, which covers it only while the picker is open. */
.deck-slot-empty-overlay[b-vakobslu2m] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding: 20px 12px 12px;
    color: #fff;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 100%);
}

.deck-slot-empty-overlay .deck-slot-overlay-row[b-vakobslu2m] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
}

.deck-slot-empty-overlay .deck-slot-overlay-label[b-vakobslu2m] {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deck-slot-empty-overlay .deck-slot-overlay-value[b-vakobslu2m] {
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.2;
    flex: 0 0 auto;
}

/* Footer: the limit-break picker takes the room, the borrow toggle is a fixed square beside it. */
.deck-slot-footer[b-vakobslu2m] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.deck-slot-footer-lb[b-vakobslu2m] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--mud-palette-text-secondary);
}

/* The footer's buttons take the outlined select's box - same height, same radius, same border - so
   the row reads as one strip of controls rather than a field with loose buttons beside it. 40px is
   what an outlined dense MudSelect measures in the browser, and MudBlazor gives no token for it. */
.deck-slot-footer[b-vakobslu2m]  .deck-slot-footer-control {
    height: 40px;
    border-radius: var(--mud-default-borderradius);
    border-color: var(--mud-palette-lines-inputs);
    color: var(--mud-palette-text-primary);
}

/* Square, so it reads as a toggle beside the field rather than a second field. */
.deck-slot-footer[b-vakobslu2m]  .deck-slot-footer-borrow {
    flex: 0 0 auto;
    width: 40px;
    padding: 0;
}

/* The lit borrow toggle takes the same literal pink as the pill, since no theme role carries it.
   Only the icon: a pink outline as well would put a second border on a row meant to read as one
   strip of identically-boxed controls. */
.deck-slot-footer[b-vakobslu2m]  .deck-slot-borrow-on {
    color: #e0568f;
}

/* Laid out like the select it stands in for: label left, icon where the dropdown arrow would be.
   A ~90px slot has no room for the default button spacing, so the text drops to caption size and
   loses the uppercasing. */
.deck-slot-footer[b-vakobslu2m]  .deck-slot-footer-configure {
    flex: 1 1 auto;
    justify-content: space-between;
    min-width: 0;
    padding: 0 8px;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

/* The label gives way before the icon does: a slot is ~90px wide in a narrow window, and by then
   the tune icon says more than the first two letters of the count would. */
.deck-slot-footer[b-vakobslu2m]  .deck-slot-footer-configure-label {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.deck-slot-caption[b-vakobslu2m] {
    display: none;
}

/* Below the mobile boundary a ~90px slot can't hold a select and a menu button: the select's label
   truncated to "M..", the menu was a ~24px target, and the type strip's own select opened a popover
   narrow enough to wrap "Any Speed card" over three lines. All of it moves into the slot sheet,
   which the slot opens when tapped, and the slot keeps a read-only caption in place of the footer. */
@media (max-width: 900px) {
    .deck-slot-footer[b-vakobslu2m],
    .deck-slot-strip-dock[b-vakobslu2m] {
        display: none;
    }

    .deck-slot-caption[b-vakobslu2m] {
        display: block;
    }
}
/* /Components/Deck/DeckSlotOption.razor.rz.scp.css */
/* The card face inside a deck slot. These rules live here rather than in DeckSlot.razor.css
   because the markup they style is rendered by THIS component: Blazor scopes CSS per component,
   so a rule written next to DeckSlot would never reach an element DeckSlotOption emits. */

/* A filled, draggable card. */
.deck-slot[draggable="true"][b-vmiov66pz4] {
    cursor: grab;
}

.deck-slot[draggable="true"]:active[b-vmiov66pz4] {
    cursor: grabbing;
}

.deck-slot[b-vmiov66pz4] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--uma-card-radius-full);
    overflow: hidden;
}

.deck-slot-img[b-vmiov66pz4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
}

.deck-slot-remove[b-vmiov66pz4] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 0.12s ease-in-out;
}

.deck-slot:hover .deck-slot-remove[b-vmiov66pz4] {
    opacity: 1;
}

.deck-slot-overlay[b-vmiov66pz4] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 75%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: 3px;
    padding: 20px 15px 14px;
    color: #fff;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 100%);
}

.deck-slot-overlay-row[b-vmiov66pz4] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
}

.deck-slot-overlay-label[b-vmiov66pz4] {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deck-slot-overlay-value[b-vmiov66pz4] {
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.2;
    flex: 0 0 auto;
}
/* /Components/Deck/DeckSlotSheet.razor.rz.scp.css */
/* The type grid, same 4x2 shape as the desktop strip but sized for a thumb rather than a pointer:
   the strip's swatches are 28px because they have to fit a ~90px slot, and nothing here does. */
.deck-sheet-types[b-19qqvoduel] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.deck-sheet-types[b-19qqvoduel]  .deck-type-swatch {
    height: 52px;
}

/* Each card's box fills its column, so a row of them lines up along the bottom even when one card's
   title wraps to a second line. */
.deck-sheet-option[b-19qqvoduel] {
    height: 100%;
}

.deck-sheet-types[b-19qqvoduel]  .mud-icon-button {
    height: 52px;
    border: 1.5px dashed var(--mud-palette-lines-default);
    border-radius: 6px;
}
/* /Components/Deck/DeckSlotSheetOption.razor.rz.scp.css */
.deck-sheet-art[b-adjj4sfikf] {
    flex: 0 0 auto;
    width: 96px;
}

/* Five segments across the sheet's width; without this the group sizes to its content and leaves
   the last one hanging. */
.deck-sheet-lb[b-adjj4sfikf] {
    width: 100%;
}

.deck-sheet-lb[b-adjj4sfikf]  .mud-toggle-item {
    flex: 1 1 0;
}
/* /Components/Deck/DeckSlotsPanel.razor.rz.scp.css */
/* The six deck slots as a fixed three-column grid. Hand-rolled (not MudGrid) so each
   card can be capped to a sensible width: when the layout stacks on narrow screens the
   deck column goes full-width, and a plain MudGrid would balloon the cards larger than
   on desktop. A capped, fluid track is something MudGrid's 12-column system can't
   express - the same reason the picker grid (.card-search-grid) is hand-rolled. */
.deck-slot-grid[b-9qqa6vahog] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 8px 16px;
}

/* Stacked layout (narrow screens / zoom): cap each card and centre the row so the deck
   stays compact. */
@media (max-width: 900px) {
    .deck-slot-grid[b-9qqa6vahog] {
        grid-template-columns: repeat(3, minmax(0, 140px));
        justify-content: center;
    }
}
/* /Components/Deck/DeckSlotsSkeleton.razor.rz.scp.css */
/* Repeats DeckSlotsPanel's .deck-slot-grid geometry rather than reusing the class. Scoped CSS is
   stamped per component, so that rule compiles to .deck-slot-grid[panel-scope] and would never match
   a div in this component's markup. The two must stay in step for the skeleton-to-real swap not to
   shift the layout. */
.deck-skeleton-grid[b-qn76udrjjt] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 8px 16px;
}

/* Everything below sizes the MudSkeleton placeholders, and goes through ::deep for the same reason:
   a MudSkeleton renders its own root, which Blazor never stamps this component's scope attribute
   onto, so a plain `.deck-skeleton-card` rule would compile to `.deck-skeleton-card[scope]` and match
   nothing. The grid div IS in this markup, so piercing from there lands on them. */

/* mud-skeleton's base rule sets height: 1.2em. That is a definite height, which wins over
   aspect-ratio outright (aspect-ratio only fills in a dimension left auto), so the height has to be
   given back to auto before the card can take its 3:4 shape. */
.deck-skeleton-grid[b-qn76udrjjt]  .deck-skeleton-card {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    border-radius: var(--uma-card-radius-full);
}

/* Stands in for the footer's limit-break select and the square borrow toggle beside it: same 40px
   box and radius the real controls take, so the row keeps its height and the slot its total size. */
.deck-skeleton-grid[b-qn76udrjjt]  .deck-skeleton-field {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    border-radius: var(--mud-default-borderradius);
}

.deck-skeleton-grid[b-qn76udrjjt]  .deck-skeleton-borrow {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--mud-default-borderradius);
}

/* The caption is the mobile stand-in for the footer, so the two swap at the same boundary the real
   slot swaps them (DeckSlot.razor.css) - otherwise the skeleton would stand a footer's height taller
   than the slots it replaces on one side of the breakpoint. */
.deck-skeleton-grid[b-qn76udrjjt]  .deck-skeleton-caption {
    display: none;
}

@media (max-width: 900px) {
    /* Matches the real grid's stacked layout: capped tracks, centred. */
    .deck-skeleton-grid[b-qn76udrjjt] {
        grid-template-columns: repeat(3, minmax(0, 140px));
        justify-content: center;
    }

    .deck-skeleton-grid[b-qn76udrjjt]  .deck-skeleton-footer {
        display: none;
    }

    .deck-skeleton-grid[b-qn76udrjjt]  .deck-skeleton-caption {
        display: block;
        width: 60%;
        margin: 0 auto;
    }
}
/* /Components/Deck/DeckSlotTypeStrip.razor.rz.scp.css */
/* Swatches where there is a pointer, a select where there is not. Both always render and CSS
   chooses, rather than a C# breakpoint check, so neither flashes on first render. */
/* Two rows of four (seven types, last slot spare) rather one row seven: doubles each
   swatch's width, so it takes an actual tap rather than needing the precision of a pointer. */
.deck-type-swatches[b-rm0lrr9cdm] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 3px;
    border-radius: 6px;
    background: var(--mud-palette-surface);
}

/* Matches DeckSlotTypeSwatch's own look, but Blazor scoped CSS only stamps a component's
   attribute onto elements that component renders, so this button (rendered by this component,
   not DeckSlotTypeSwatch) needs its own copy of the shape rather than inheriting the class. */
.deck-type-swatch-clear[b-rm0lrr9cdm] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 28px;
    padding: 3px;
    border: 1.5px dashed var(--mud-palette-lines-default);
    border-radius: 6px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.deck-type-swatch-clear:hover:not(:disabled)[b-rm0lrr9cdm] {
    border-color: var(--mud-palette-error);
    color: var(--mud-palette-error);
}

.deck-type-swatch-clear:disabled[b-rm0lrr9cdm] {
    opacity: 0.3;
    cursor: default;
}

.deck-type-select[b-rm0lrr9cdm] {
    display: none;
}

/* A ~90px slot leaves each of seven swatches about 11px: fine to click, far too small to tap.
   Below the app's mobile boundary the strip becomes a normal select instead. */
@media (max-width: 900px) {
    .deck-type-swatches[b-rm0lrr9cdm] {
        display: none;
    }

    .deck-type-select[b-rm0lrr9cdm] {
        display: block;
    }
}
/* /Components/Deck/DeckSlotTypeSwatch.razor.rz.scp.css */
/* Shows the type's own icon rather than a colour block, ringed in the type's colour once
   selected. Colour comes inline from UmaColors, so this only owns shape and interaction. */
.deck-type-swatch[b-hsqb8epl4z] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 28px;
    padding: 3px;
    border: 1.5px solid;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
}

.deck-type-swatch img[b-hsqb8epl4z] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.deck-type-swatch:hover[b-hsqb8epl4z] {
    transform: scale(1.1);
}

.deck-type-swatch:focus-visible[b-hsqb8epl4z] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}
/* /Components/Deck/DeckStatsPanel.razor.rz.scp.css */
/* Responsive stat grid: fills the available width with equal-size clickable stat tiles,
   wrapping as space allows - denser than a two-column table. */
.deck-stat-grid[b-h27hs65a0k] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
    gap: 8px;
}
/* /Components/Deck/DeckStatTile.razor.rz.scp.css */
.deck-stat-tile[b-vdjqnzfnn0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    cursor: pointer;
    user-select: none;
    transition: border-color .12s ease, background-color .12s ease;
}

/* Real-pointer only: on touch, :hover sticks after a tap. */
@media (hover: hover) {
    .deck-stat-tile:hover[b-vdjqnzfnn0] {
        border-color: var(--mud-palette-primary);
    }
}

.deck-stat-tile-active[b-vdjqnzfnn0] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

.deck-stat-name[b-vdjqnzfnn0] {
    font-size: .72rem;
    line-height: 1.15;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.deck-stat-value[b-vdjqnzfnn0] {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.1;
}

.deck-stat-tile-active .deck-stat-value[b-vdjqnzfnn0] {
    color: var(--mud-palette-primary);
}
/* /Components/Deck/DeckToggleOption.razor.rz.scp.css */
.deck-toggle-icon[b-nunx8r51e4] {
    width: 18px;
    height: 18px;
    margin-right: 5px;
    object-fit: contain;
    border-radius: 4px;
}
/* /Components/Planner/PlannerDayRaceMenu.razor.rz.scp.css */
.day-menu[b-pn3nzvpa8r] {
    width: 100%;
}

.day-menu-title[b-pn3nzvpa8r] {
    margin-bottom: 6px;
}
/* /Components/Planner/PlannerDayRaceRow.razor.rz.scp.css */
/* One clickable race row, mirroring the search-result layout. */
.day-race-row[b-tni2nceyec] {
    transition: background 0.1s, border-color 0.1s;
    overflow: hidden;
}

/* Real-pointer only: on touch, :hover sticks after a tap. */
@media (hover: hover) {
    .day-race-row:hover[b-tni2nceyec] {
        background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
        border-color: var(--mud-palette-primary) !important;
    }
}

.day-race-row--selected[b-tni2nceyec] {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    border-color: var(--mud-palette-primary) !important;
}
/* /Components/Planner/PlannerEpithetsPanel.razor.rz.scp.css */
.epithet-stat-summary[b-mxjmvmtzeq] {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 6px;
    background: var(--mud-palette-background-grey);
}

.epithet-row[b-mxjmvmtzeq] {
    display: grid;
    grid-template-columns: 4rem 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    opacity: 0.5;
    font-size: 0.82rem;
}

.epithet-active[b-mxjmvmtzeq] {
    opacity: 1;
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
}

.epithet-stars[b-mxjmvmtzeq] {
    color: var(--mud-palette-warning);
    font-size: 0.7rem;
    letter-spacing: -1px;
    white-space: nowrap;
}

.epithet-name[b-mxjmvmtzeq] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.epithet-reward[b-mxjmvmtzeq] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
    white-space: nowrap;
}

.epithet-progress[b-mxjmvmtzeq] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-disabled);
    white-space: nowrap;
    min-width: 3rem;
    text-align: right;
}

.epithet-progress-done[b-mxjmvmtzeq] {
    color: var(--mud-palette-success-text);
    font-weight: 700;
}
/* /Components/Planner/PlannerOverlayControls.razor.rz.scp.css */
/* Blazor's CSS-isolation scope id is only stamped onto plain HTML elements, never onto Mud
   component roots, so these MudBlazor-internal overrides are anchored on the wrapper div and
   reach in with ::deep. */

/* Drop the dense outlined-with-label control margin (8px top / 4px bottom) so the Race Bonus and
   Cleat Hammer fields sit flush in the toolbar row. */
.overlay-controls[b-nswz1oc3k9]  .mud-input-control.mud-input-control-margin-dense.mud-input-outlined-with-label {
    margin-top: 0;
    margin-bottom: 0;
}

/* Pin the race-bonus preset toggle (and its buttons) to the dense field height beside it. */
.overlay-controls[b-nswz1oc3k9]  .bonus-presets {
    height: 40px;
}

.overlay-controls[b-nswz1oc3k9]  .bonus-presets .mud-toggle-item {
    height: 100%;
}
/* /Components/Planner/PlannerRaceSearchResult.razor.rz.scp.css */
.planner-search-result[b-y1k0ypaca5] {
    width: 100%;
    min-width: 0;
}

.planner-search-result-banner[b-y1k0ypaca5] {
    width: 56px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.planner-search-result-info[b-y1k0ypaca5] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.planner-search-result-name[b-y1k0ypaca5] {
    font-size: 0.82rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planner-search-result-turn[b-y1k0ypaca5],
.planner-search-result-meta[b-y1k0ypaca5] {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.planner-search-result-warn[b-y1k0ypaca5] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--mud-palette-warning);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Components/Planner/PlannerScheduledPanel.razor.rz.scp.css */
.uma-planner-grade-count[b-hz941b0nkw] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}
/* /Components/Planner/PlannerSelectedRaceRow.razor.rz.scp.css */
.uma-planner-selected-race[b-3ne5pkjp7d] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.uma-planner-selected-race:last-child[b-3ne5pkjp7d] {
    border-bottom: none;
}

/* ::deep is required: the class sits on a MudImage, and Blazor does not stamp the
   scope attribute onto a child component's DOM. Without it the banner renders at
   its natural width and pushes the rest of the row off a phone viewport. */
[b-3ne5pkjp7d] .uma-planner-selected-banner {
    width: 56px;
    max-width: 56px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.uma-planner-grade-badge[b-3ne5pkjp7d] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    padding: 1px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    color: #fff;
}

.uma-planner-selected-race-info[b-3ne5pkjp7d] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.uma-planner-selected-race-name[b-3ne5pkjp7d] {
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uma-planner-selected-race-turn[b-3ne5pkjp7d] {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-3ne5pkjp7d] .uma-planner-selected-remove {
    flex-shrink: 0;
    margin: -4px -4px -4px auto;
}
/* /Components/Planner/PlannerTurnCell.razor.rz.scp.css */
/* One calendar cell: a centered caption above the full-width race paper. The paper is the
   positioning context (position:relative is set inline) for the SP overlay and the hover
   delete button. */
.planner-cell[b-p7kr0u8zkt] {
    width: 100%;
    text-align: center;
}

/* Gain values sit in the banner corners as compact pills rather than a full-width band, so the
   race banner stays legible. Stat (epithet marginal) goes top-left, SP bottom-right; both ignore
   pointer events so clicks fall through to the banner button. */
.planner-cell-badge[b-p7kr0u8zkt] {
    position: absolute;
    padding: 0 5px;
    border-radius: 7px;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.5;
    color: #fff;
    background: rgba(0, 0, 0, 0.62);
    pointer-events: none;
    white-space: nowrap;
}

/* Epithet stat reward - top-left, tinted green to stand apart from the white SP value. */
.planner-cell-stat-badge[b-p7kr0u8zkt] {
    top: 3px;
    left: 3px;
    color: #a5d6a7;
}

.planner-cell-sp-badge[b-p7kr0u8zkt] {
    bottom: 3px;
    right: 3px;
}

/* Fan (1st-place) reward - bottom-left, tinted pink to echo the in-game fan/heart cue and sit
   apart from the white SP value in the opposite corner. */
.planner-cell-fan-badge[b-p7kr0u8zkt] {
    bottom: 3px;
    left: 3px;
    color: #f8bbd0;
}

/* Career-goal marker - a small caption pill across the cell bottom, in the primary accent so a
   goal turn reads at a glance. Wraps for the longer soft-goal text ("Place 3rd in 2 G1"). Keeps
   pointer events so the goal tooltip shows on hover. */
.planner-cell-goal-badge[b-p7kr0u8zkt] {
    bottom: 3px;
    left: 3px;
    right: 3px;
    z-index: 1;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
    font-size: 0.6rem;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* Locked career race: the banner fills the cell like a scheduled race but isn't a button. */
.planner-goal-locked[b-p7kr0u8zkt] {
    height: 70px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Lock glyph, top-right, signalling the goal race can't be changed. */
.planner-cell-lock-badge[b-p7kr0u8zkt] {
    top: 3px;
    right: 3px;
    display: inline-flex;
    align-items: center;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.planner-cell-lock-badge[b-p7kr0u8zkt]  .mud-icon-root {
    font-size: 0.8rem;
}

/* Quick-remove button, top-right, revealed on cell hover. Hidden until hover/focus it also
   ignores pointer events so its corner doesn't steal clicks meant for the banner button. */
.planner-cell-delete[b-p7kr0u8zkt] {
    position: absolute;
    top: 1px;
    right: 1px;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease-in-out;
}

.planner-cell:hover .planner-cell-delete[b-p7kr0u8zkt],
.planner-cell:focus-within .planner-cell-delete[b-p7kr0u8zkt] {
    opacity: 1;
    pointer-events: auto;
}

/* Shrink the delete button so it fits the dense cell without covering the banner. */
.planner-cell-delete[b-p7kr0u8zkt]  .mud-icon-button {
    padding: 2px;
}

.planner-cell-delete[b-p7kr0u8zkt]  .mud-icon-button .mud-icon-root {
    font-size: 1rem;
}
/* /Components/Roster/RosterIngestCurrentCard.razor.rz.scp.css */
.roster-current[b-kf1uvd0kal] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin: 0.5rem 0;
}

.roster-current-art[b-kf1uvd0kal] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Cap the art to a slice of the (dynamic) viewport height so the wheel and the Prev/Next controls
   below it stay on screen without scrolling on a phone. dvh tracks the browser's collapsing chrome;
   the rem ceiling stops it ballooning on tall desktop windows. object-fit keeps the aspect ratio. */
.roster-current-art img[b-kf1uvd0kal] {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(34dvh, 16rem);
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}
/* /Components/Roster/RosterIngestFilmstrip.razor.rz.scp.css */
.roster-strip[b-fcahg85noi] {
    display: flex;
    /* Grow to eat whatever vertical space the fixed chrome (progress, wheel, buttons) leaves,
       and allow shrinking to zero so the card art below can size itself to fit instead of the
       strip overflowing its box and getting clipped when the page is zoomed in. */
    flex: 1 1 0;
    min-height: 0;
    align-items: stretch;
    justify-content: center;
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
    overflow-x: auto;
}
/* /Components/Roster/RosterIngestStripCard.razor.rz.scp.css */
.roster-strip-slot[b-ki6n7rfh4p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    justify-content: center;
    gap: 0.25rem;
    width: 6rem;
    flex: 0 0 auto;
    opacity: 0.5;
}

.roster-strip-slot.clickable[b-ki6n7rfh4p] {
    cursor: pointer;
    transition: opacity 0.12s ease;
}

/* Real-pointer only: on touch, :hover sticks after a tap. */
@media (hover: hover) {
    .roster-strip-slot.clickable:hover[b-ki6n7rfh4p] {
        opacity: 0.85;
    }
}

.roster-strip-slot.current[b-ki6n7rfh4p] {
    width: 16rem;
    /* Fill the strip's height so the art below can be measured against it (percentage
       max-height needs a definite ancestor height). */
    align-self: stretch;
    min-height: 0;
    opacity: 1;
}

.roster-strip-empty[b-ki6n7rfh4p] {
    width: 6rem;
    height: 8rem;
}

.roster-strip-art[b-ki6n7rfh4p] {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.roster-strip-slot.current .roster-strip-art[b-ki6n7rfh4p] {
    /* Take the leftover height in the current slot so the image can be capped to it. */
    flex: 1 1 0;
    min-height: 0;
    align-items: center;
}

.roster-strip-art img[b-ki6n7rfh4p] {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}

.roster-strip-slot.current .roster-strip-art img[b-ki6n7rfh4p] {
    /* Fit the leftover height (100% of the art region), capped at 20rem so it doesn't balloon
       on tall screens. object-fit keeps aspect ratio, so a zoomed-in / short page shrinks the
       card to fit instead of clipping it. */
    max-height: min(100%, 20rem);
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

.roster-strip-badge[b-ki6n7rfh4p] {
    position: absolute;
    bottom: 0.25rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background-color: var(--mud-palette-success);
    color: var(--mud-palette-success-text);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}
/* /Components/Roster/RosterIngestWheel.razor.rz.scp.css */
.roster-wheel[b-o4sitle3kz] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0 auto;
}
/* /Components/Roster/RosterIngestWheelOption.razor.rz.scp.css */
.roster-wheel-option[b-mer7l3gs6i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

/* Real-pointer only: on touch, :hover sticks after a tap. */
@media (hover: hover) {
    .roster-wheel-option:hover[b-mer7l3gs6i] {
        border-color: var(--mud-palette-primary);
    }
}

.roster-wheel-option.selected[b-mer7l3gs6i] {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-color: var(--mud-palette-primary);
}

/* Bigger, easier-to-hit chips on phones (touch instead of arrow keys), with larger text. */
@media (max-width: 900px) {
    .roster-wheel-option[b-mer7l3gs6i] {
        min-width: 5.5rem;
        min-height: 3.5rem;
        padding: 0.75rem 1rem;
    }

    .roster-wheel-option[b-mer7l3gs6i]  .mud-typography {
        font-size: 1.15rem;
        font-weight: 600;
    }
}
/* /Components/Roster/RosterOwnedOverlay.razor.rz.scp.css */
/* Drawn inside the card art (.support-art is position:relative, border-radius:10px, overflow:hidden).
   Nothing here catches clicks - a plain tile click still opens the detail page. */

/* The limit break as four in-game diamond icons, pinned along the bottom-left. Inset from the art's
   edge so the pips sit inside the card's baked-in border; a fixed bottom offset (not a percentage) so
   the stat overlay above can reserve a matching strip and the two never collide. */
.roster-pips[b-o7tgwfdm4m] {
    position: absolute;
    left: 5%;
    bottom: 12px;
    z-index: 5;
    display: flex;
    gap: 2px;
    pointer-events: none;
}

/* Soft dark backdrop behind the whole row so the pips pop off busy card art. Fades toward the top so
   it blends into the stat overlay above instead of stacking into a hard dark blob. */
.roster-pips[b-o7tgwfdm4m]::before {
    content: "";
    position: absolute;
    inset: -3px -7px -5px -7px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    filter: blur(5px);
}

/* The diamond assets are already taller than wide; fix the height and let width follow. Large enough
   to read at a glance, small enough that four fit within the smallest tile's inset. */
.roster-pip[b-o7tgwfdm4m] {
    position: relative;
    height: 24px;
    width: auto;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
}
/* /Components/Roster/UmaRosterIngestCurrentCard.razor.rz.scp.css */
.uma-current[b-orppeihajz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin: 0.5rem 0;
}

.uma-current-art[b-orppeihajz] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Cap the art to a slice of the (dynamic) viewport height so the wheel and the Prev/Next controls
   below it stay on screen without scrolling on a phone. dvh tracks the browser's collapsing chrome;
   the rem ceiling stops it ballooning on tall desktop windows. object-fit keeps the aspect ratio. */
.uma-current-art img[b-orppeihajz] {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(34dvh, 16rem);
    object-fit: contain;
}
/* /Components/Roster/UmaRosterIngestFilmstrip.razor.rz.scp.css */
.uma-strip[b-ssge7om277] {
    display: flex;
    /* Grow to eat whatever vertical space the fixed chrome (progress, wheel, buttons) leaves,
       and allow shrinking to zero so the art below can size itself to fit instead of the strip
       overflowing its box and getting clipped when the page is zoomed in. */
    flex: 1 1 0;
    min-height: 0;
    align-items: stretch;
    justify-content: center;
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
    overflow-x: auto;
}
/* /Components/Roster/UmaRosterIngestStripCard.razor.rz.scp.css */
/* Mirrors the support-card strip slot (RosterIngestStripCard), sized for the taller character art.
   The uma stand PNG is transparent, so it gets no card shadow or rounding - it sits straight on the
   page like it does in game. */
.uma-strip-slot[b-ntg0vv56j7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    justify-content: center;
    gap: 0.25rem;
    width: 6rem;
    flex: 0 0 auto;
    opacity: 0.5;
}

.uma-strip-slot.clickable[b-ntg0vv56j7] {
    cursor: pointer;
    transition: opacity 0.12s ease;
}

/* Real-pointer only: on touch, :hover sticks after a tap. */
@media (hover: hover) {
    .uma-strip-slot.clickable:hover[b-ntg0vv56j7] {
        opacity: 0.85;
    }
}

.uma-strip-slot.current[b-ntg0vv56j7] {
    width: 16rem;
    /* Fill the strip's height so the art below can be measured against it (percentage
       max-height needs a definite ancestor height). */
    align-self: stretch;
    min-height: 0;
    opacity: 1;
}

.uma-strip-empty[b-ntg0vv56j7] {
    width: 6rem;
    height: 8rem;
}

.uma-strip-art[b-ntg0vv56j7] {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.uma-strip-slot.current .uma-strip-art[b-ntg0vv56j7] {
    /* Take the leftover height in the current slot so the image can be capped to it. */
    flex: 1 1 0;
    min-height: 0;
    align-items: center;
}

.uma-strip-art img[b-ntg0vv56j7] {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.uma-strip-slot.current .uma-strip-art img[b-ntg0vv56j7] {
    /* Fit the leftover height (100% of the art region), capped so it doesn't balloon on tall
       screens. object-fit keeps the aspect ratio, so a short page shrinks the art instead of
       clipping it. */
    max-height: min(100%, 22rem);
    max-width: 100%;
    width: auto;
    height: auto;
}

.uma-strip-badge[b-ntg0vv56j7] {
    position: absolute;
    bottom: 0.25rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background-color: var(--mud-palette-success);
    color: var(--mud-palette-success-text);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}
/* /Components/Roster/UmaRosterOwnedOverlay.razor.rz.scp.css */
/* Drawn inside the card art (.char-art is position:relative, border-radius:10px, overflow:hidden).
   Nothing here catches clicks - a plain tile click still opens the detail page. */

/* The star rank pinned along the bottom-left, on the same footing as the support tile's limit-break
   pips, with a soft dark backdrop so the stars read over busy character art. */
.roster-stars[b-rw30nwqcpp] {
    position: absolute;
    left: 5%;
    bottom: 8px;
    z-index: 5;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
/* /Components/Settings/SettingsCustomColors.razor.rz.scp.css */
/* Fluid color-field grid - as many ~190px fields per row as fit. A genuine auto-fill grid
   MudGrid's 12-column system can't express, hence raw CSS grid here. */
.settings-color-grid[b-woqhzay8x1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}
/* /Components/Settings/SettingsSchemeOption.razor.rz.scp.css */
/* Color preview for a scheme: a row of small rounded squares of its key palette colors. */
.settings-scheme-swatches[b-npp3ghpcpy] {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.settings-scheme-swatch[b-npp3ghpcpy] {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
/* /Components/Settings/SettingsThemePanel.razor.rz.scp.css */
/* Responsive scheme grid: as many fixed-min cards per row as fit, each filling its track.
   A genuine fluid grid MudGrid's 12-column system can't express, hence raw CSS grid here. */
.settings-scheme-grid[b-rxe664z9wp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 8px;
}
/* /Components/Shared/BrowseMatchOverlay.razor.rz.scp.css */
/* Sits over the bottom of a position:relative art wrapper (e.g. .tile-art). */
.tile-reason[b-mbluojse1v] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: 3px;
    padding: 20px 15px 14px;
    color: #fff;
    pointer-events: none;
    border-radius: 7px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.48) 60%, rgba(0, 0, 0, 0) 100%);
}

/* Owned support tiles carry a limit-break pip row along the bottom; lift the stat rows above that
   reserved strip (pip height + inset + halo) so the two overlays stack instead of colliding. */
.tile-reason-pips[b-mbluojse1v] {
    padding-bottom: 46px;
}

.tile-reason-row[b-mbluojse1v] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
}

.tile-reason-label[b-mbluojse1v] {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tile-reason-value[b-mbluojse1v] {
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.2;
    flex: 0 0 auto;
}
/* /Components/Shared/GlobalSearch.razor.rz.scp.css */
.uma-gsearch[b-xrv7mkyfkw] {
    position: relative;
    flex: 0 1 460px;
    margin: 0 16px;
}

.uma-gsearch-box[b-xrv7mkyfkw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: var(--mud-palette-primary-text);
    cursor: text;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.uma-gsearch-box:focus-within[b-xrv7mkyfkw] {
    background-color: rgba(255, 255, 255, 0.26);
    border-color: rgba(255, 255, 255, 0.5);
}

.uma-search-icon[b-xrv7mkyfkw] {
    font-size: 1.15rem !important;
    flex: 0 0 auto;
}

.uma-gsearch-clear[b-xrv7mkyfkw] {
    flex: 0 0 auto;
    display: inline-flex;
    cursor: pointer;
    opacity: 0.85;
}

@media (hover: hover) {
    .uma-gsearch-clear:hover[b-xrv7mkyfkw] {
        opacity: 1;
    }
}

.uma-gsearch-input[b-xrv7mkyfkw] {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--mud-palette-primary-text);
    font-size: 0.88rem;
    font-family: inherit;
}

.uma-gsearch-input[b-xrv7mkyfkw]::placeholder {
    color: var(--mud-palette-primary-text);
    opacity: 0.7;
}

.uma-kbd[b-xrv7mkyfkw] {
    flex: 0 0 auto;
    font-size: 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 5px;
    padding: 1px 6px;
    white-space: nowrap;
    opacity: 0.9;
}

.uma-gsearch-backdrop[b-xrv7mkyfkw] {
    position: fixed;
    inset: 0;
    z-index: 1200;
}

.uma-gsearch-panel[b-xrv7mkyfkw] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 1201;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    box-shadow: 0 18px 50px var(--uma-shadow-strong);
    overflow: hidden;
}

.uma-gsearch-tabs[b-xrv7mkyfkw] {
    display: flex;
    gap: 4px;
    padding: 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.uma-gsearch-tab[b-xrv7mkyfkw] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

@media (hover: hover) {
    .uma-gsearch-tab:hover[b-xrv7mkyfkw] {
        background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    }
}

.uma-gsearch-tab.active[b-xrv7mkyfkw] {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.uma-gsearch-count[b-xrv7mkyfkw] {
    font-size: 0.7rem;
    padding: 0 5px;
    border-radius: 999px;
    background-color: color-mix(in srgb, currentColor 18%, transparent);
}

.uma-gsearch-results[b-xrv7mkyfkw] {
    max-height: min(60vh, 460px);
    overflow-y: auto;
    padding: 6px;
}

.uma-gsearch-item[b-xrv7mkyfkw] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 7px 8px;
    border: none;
    border-radius: 10px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

@media (hover: hover) {
    .uma-gsearch-item:hover[b-xrv7mkyfkw] {
        background-color: color-mix(in srgb, var(--mud-palette-primary) 9%, transparent);
    }
}

.uma-gsearch-item.active[b-xrv7mkyfkw] {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 24%, transparent);
}

.uma-gsearch-thumb[b-xrv7mkyfkw] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--uma-accent, var(--mud-palette-primary)) 14%, var(--mud-palette-surface));
    border-left: 3px solid var(--uma-accent, var(--mud-palette-primary));
    display: flex;
    align-items: center;
    justify-content: center;
}

.uma-gsearch-thumb img[b-xrv7mkyfkw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.uma-gsearch-text[b-xrv7mkyfkw] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.uma-gsearch-title[b-xrv7mkyfkw] {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uma-gsearch-sub[b-xrv7mkyfkw] {
    font-size: 0.76rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uma-gsearch-kind[b-xrv7mkyfkw] {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
    padding: 2px 7px;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

.uma-gsearch-empty[b-xrv7mkyfkw] {
    padding: 22px 16px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
}

/* Phones: keep the search reachable (it used to be hidden entirely). The pill shrinks to
   share the crowded navbar, the keyboard hint goes (meaningless on touch), and the results
   panel breaks out of the narrow box to span the viewport so results stay readable. */
@media (max-width: 720px) {
    .uma-gsearch[b-xrv7mkyfkw] {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0 8px;
    }

    .uma-kbd[b-xrv7mkyfkw] {
        display: none;
    }

    .uma-gsearch-panel[b-xrv7mkyfkw] {
        position: fixed;
        top: 66px;
        left: 8px;
        right: 8px;
    }
}
/* /Components/Shared/InfiniteScrollSentinel.razor.rz.scp.css */
/* Invisible scroll marker; the IntersectionObserver watches it to grow the page. */
.uma-infinite-sentinel[b-ts0bjb0wch] {
    height: 1px;
    width: 100%;
    pointer-events: none;
}
/* /Components/Shared/MobileNavBar.razor.rz.scp.css */
/* Hidden on desktop; the sidebar handles nav there. Shown as a fixed bottom bar on phones
   (matches the 900px shell breakpoint that hides the sidebar and lets the page scroll). The
   inner selectors use ::deep because the tabs are NavLink child components (Blazor would not
   stamp this component's scope attribute onto their <a>). */
.uma-mnav[b-whtzn2igx5] {
    display: none;
}

@media (max-width: 900px) {
    .uma-mnav[b-whtzn2igx5] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        gap: 2px;
        padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
        background-color: var(--mud-palette-primary);
        border-top: 1px solid var(--mud-palette-secondary);
        box-shadow: 0 -6px 20px var(--uma-shadow-soft);
    }
}

/* Each tab: a NavLink <a> or the More <button>, both stacked icon + label, evenly sharing the bar. */
.uma-mnav[b-whtzn2igx5]  .uma-mnav-item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px;
    border: none;
    border-radius: 10px;
    background: none;
    font-family: inherit;
    text-decoration: none;
    color: color-mix(in srgb, var(--mud-palette-primary-text) 78%, transparent);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.1;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.uma-mnav[b-whtzn2igx5]  .uma-mnav-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Active route (or the open More tab) lights up in full primary-text contrast. */
.uma-mnav[b-whtzn2igx5]  .uma-mnav-item.active {
    color: var(--mud-palette-primary-text);
    background-color: color-mix(in srgb, var(--mud-palette-primary-text) 16%, transparent);
}

/* "More" bottom sheet: a dimmed backdrop that taps to close, and a card of links sitting just
   above the bar. Both live inside .uma-mnav so the desktop display:none hides them too. */
.uma-mnav[b-whtzn2igx5]  .uma-mnav-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(15, 23, 42, 0.55);
}

.uma-mnav[b-whtzn2igx5]  .uma-mnav-sheet {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    z-index: 1201;
    display: flex;
    flex-direction: column;
    padding: 6px;
    border-radius: 14px;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 10px 30px var(--uma-shadow-soft);
}

/* One row in the sheet: icon + label, a comfortable tap height. */
.uma-mnav[b-whtzn2igx5]  .uma-msheet-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 8px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--mud-palette-text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    touch-action: manipulation;
}

.uma-mnav[b-whtzn2igx5]  .uma-msheet-item.active {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
}

/* The account row is a <button>, so it needs the form-control defaults stripped to match the
   sibling anchors. */
.uma-mnav[b-whtzn2igx5]  button.uma-msheet-item {
    width: 100%;
    border: none;
    background: none;
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* Pushes the account row's expand caret to the far edge, truncating a long username instead of
   letting it widen the sheet. */
.uma-mnav[b-whtzn2igx5]  .uma-msheet-grow {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}

/* Indented children of the expanded account row. */
.uma-mnav[b-whtzn2igx5]  .uma-msheet-sub {
    padding-left: 32px;
}

.uma-mnav[b-whtzn2igx5]  .uma-msheet-divider {
    height: 1px;
    margin: 4px 8px;
    background-color: var(--mud-palette-lines-default);
}
/* /Components/Shared/PageErrorCard.razor.rz.scp.css */
.page-error-gif[b-gqunvto6q1] {
    width: 160px;
    max-width: 60vw;
    border-radius: 8px;
    display: block;
}
/* /Components/Shared/RarityStars.razor.rz.scp.css */
.uma-stars[b-obenfay27s] {
    display: inline-flex;
    gap: 1px;
    font-size: 0.95rem;
    line-height: 1;
    letter-spacing: 1px;
}

.uma-star-on[b-obenfay27s]  { color: #F4B731; }
.uma-star-off[b-obenfay27s] { color: var(--mud-palette-lines-default); }
/* /Components/Shared/SupportCardSearch.razor.rz.scp.css */
/* Fills the host's bounded flex column (a .browse-page or a .deck-pick-panel MudPaper): the
   head stays put and only the results scroll. */
.card-search[b-crh7la5gml] {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.card-search-head[b-crh7la5gml] {
    flex: 0 0 auto;
}

.card-search-results[b-crh7la5gml] {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    /* breathing room above/below the grid, plus room so the scrollbar doesn't sit on the tiles */
    padding: 10px 4px 10px 0;
}

/* Responsive "up to N columns" grid: at wide widths the calc() track wins and yields exactly
   --card-cols columns; as it narrows, --card-min becomes the floor and the row wraps to fewer.
   Driven by custom properties set inline on the element (see SupportCardSearch.GridStyle). */
.card-search-grid[b-crh7la5gml] {
    display: grid;
    gap: var(--card-gap, 12px);
    grid-template-columns: repeat(
        auto-fill,
        minmax(max(var(--card-min, 6rem), calc((100% - (var(--card-cols, 8) - 1) * var(--card-gap, 12px)) / var(--card-cols, 8))), 1fr));
}

/* Let tiles shrink inside their track instead of overflowing on long labels. */
.card-search-grid > *[b-crh7la5gml] {
    min-width: 0;
}

/* The inline rarity/type quick-access bar is desktop-only; on mobile those toggles live in the
   filter modal instead (900px is the app's mobile boundary). */
@media (max-width: 900px) {
    .quick-facets[b-crh7la5gml] {
        display: none;
    }
}

/* On narrow screens the shell already lets the page scroll; restore natural flow. The search box
   and results must size to their content (flex: 0 0 auto): as flex-grow items with min-height:0
   they collapse to zero height inside an auto-height parent (the deck picker's MudPaper), and with
   the results' overflow visible the tile grid then paints OUTSIDE the card instead of the card
   growing to wrap it. This lives here (not just app.css) so it beats the base .card-search rule
   above on source order rather than tying on specificity. */
@media (max-width: 900px) {
    .card-search[b-crh7la5gml],
    .card-search-results[b-crh7la5gml] {
        flex: 0 0 auto;
        min-height: auto;
    }

    .card-search-results[b-crh7la5gml] {
        overflow-y: visible;
    }
}
/* /Components/Shared/UnreleasedBadge.razor.rz.scp.css */
/* Corner pill over the card art. Absolute against the art container (position:relative in the
   tile components); pointer-events stay off so it never blocks the tile's click. */
.uma-unreleased-badge[b-r22bmmsg24] {
    position: absolute;
    top: 8px;
    left: 5px;
    z-index: 3;
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--mud-palette-info-text, #fff);
    background: var(--mud-palette-info);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

/* Top-centre variant, used on the Support Cards grid so the tag sits clear of the owned frame. */
.uma-unreleased-badge.center[b-r22bmmsg24] {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

/* Dropped below the top-centre position: used on deck slots, where the borrow-slot pill already
   takes the top-centre spot and the two badges can be active on the same card at once. */
.uma-unreleased-badge.center.stacked[b-r22bmmsg24] {
    top: 34px;
}
/* /Components/Skills/SelectedSkillTile.razor.rz.scp.css */
/* Positioned so the note badge can pin to the tile's corner. The wrapper hugs the tile, so its
   corner is the tile's corner - which keeps the badge off SkillTile's own stylesheet. */
.selected-skill-tile[b-29nd4oipp0] {
    position: relative;
    cursor: pointer;
}

.selected-skill-tile__note[b-29nd4oipp0] {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    /* Ring in the surface colour so the badge reads as a badge where it laps the border. */
    border: 2px solid var(--mud-palette-surface);
}

/* SkillTile's Interactive="false" variant drops its own hover feedback (it's meant to sit flush
   in read-only contexts); reinstate it here so the tile still reads as clickable. */
@media (hover: hover) {
    .selected-skill-tile:hover[b-29nd4oipp0]  .uma-skill-tile-static {
        border-color: var(--mud-palette-primary);
        box-shadow: 0 6px 18px var(--uma-shadow-soft);
    }
}
/* /Components/Skills/SkillBrowseCard.razor.rz.scp.css */
/* Only the raw markup inside the card lives here. The card box itself is a MudLink, whose DOM
   scoped CSS can't reach, so those rules are in app.css. */

/* Rarity frame ring around the icon: silver (white), gold, or rainbow (unique). The
   --tier-frame background shows through the padding around the inner icon. */
.uma-skill-card-icon[b-q7l18koozi] {
    flex: 0 0 auto;
    padding: 3px;
    border-radius: 10px;
    line-height: 0;
    background: var(--tier-frame, transparent);
}

.uma-skill-card-text[b-q7l18koozi] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.uma-skill-card-name[b-q7l18koozi] {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.25;
}

.uma-skill-card-desc[b-q7l18koozi] {
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* "Updated"/"New" pill marking a skill retuned or added in the latest game update. */
.uma-skill-badge[b-q7l18koozi] {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
    white-space: nowrap;
}

.uma-skill-badge-new[b-q7l18koozi] {
    background: var(--mud-palette-success);
    color: var(--mud-palette-success-text);
}

.uma-skill-badge-changed[b-q7l18koozi] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}
/* /Components/Skills/SkillCharacterSources.razor.rz.scp.css */
/* Source tiles in a uniform two-column grid, collapsing to one column at the app's mobile
   boundary. Container-relative so it behaves inside the half-width source panels. */
.source-grid[b-u2iitex2ep] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 900px) {
    .source-grid[b-u2iitex2ep] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Skills/SkillDiffCard.razor.rz.scp.css */
/* One change line: a label tag, the before value, an arrow, the after value. */
.diff-row[b-izu9miww3c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Small uppercase label ("When" / "Duration" / effect kind) leading each change. */
.diff-tag[b-izu9miww3c] {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: 6px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
}

.diff-name[b-izu9miww3c] {
    font-weight: 500;
}

/* Old value: muted and struck through so it reads as "was". */
.diff-before[b-izu9miww3c] {
    color: var(--mud-palette-text-secondary);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* New value: emphasized so the eye lands on it. */
.diff-after[b-izu9miww3c] {
    font-weight: 700;
}

.diff-arrow[b-izu9miww3c] {
    color: var(--mud-palette-text-secondary);
}

.diff-added-text[b-izu9miww3c] {
    color: var(--mud-palette-success);
    font-weight: 600;
}

.diff-removed-text[b-izu9miww3c] {
    color: var(--mud-palette-error);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* Whole trigger added / removed: an accent bar down the left of the full trigger render. */
.diff-block[b-izu9miww3c] {
    padding: 8px 0 8px 12px;
    border-left: 3px solid var(--mud-palette-lines-default);
}

.diff-block-added[b-izu9miww3c] {
    border-left-color: var(--mud-palette-success);
}

.diff-block-removed[b-izu9miww3c] {
    border-left-color: var(--mud-palette-error);
}
/* /Components/Skills/SkillEffectList.razor.rz.scp.css */
.skill-effect-tile[b-1atz900tb7] {
    flex: 1 1 120px;
    min-width: 120px;
    max-width: 180px;
}

.skill-effect-value[b-1atz900tb7] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
/* /Components/Skills/SkillGrid.razor.rz.scp.css */
.uma-skill-grid[b-6rzopsp3nd] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
/* /Components/Skills/SkillSourceTile.razor.rz.scp.css */
/* Only the raw markup inside the tile lives here. Everything whose class sits on a MudBlazor
   component (the MudLink box, the two MudStacks) is in app.css, since scoped CSS can't reach
   a child component's DOM. */

.skill-source-tile-icon[b-bq2zdy4y7z] {
    border-radius: 8px;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--mud-palette-background-grey);
}

.skill-source-tile-name[b-bq2zdy4y7z] {
    min-width: 0;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
/* /Components/Skills/SkillSupportSources.razor.rz.scp.css */
/* Source tiles in a uniform two-column grid, collapsing to one column at the app's mobile
   boundary. Container-relative so it behaves inside the half-width source panels. */
.source-grid[b-3ftks3cc8y] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 900px) {
    .source-grid[b-3ftks3cc8y] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Skills/SkillTierFilter.razor.rz.scp.css */
/* Legend swatch on the tier chips: silver / gold / rainbow, mirroring the icon frames. */
.tier-dot[b-3fgkubqc85] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
    border: 1px solid var(--mud-palette-lines-default);
}
/* /Components/Skills/SkillTile.razor.rz.scp.css */
/* Only the raw markup inside the tile lives here. The tile box itself is a MudLink, whose DOM
   scoped CSS can't reach, so those rules are in app.css. */

.uma-skill-name[b-nr01z0xaig] {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.25;
}

/* Size variants. Medium is the default. */
.uma-skill-tile-sm .uma-skill-name[b-nr01z0xaig] {
    font-size: 0.85rem;
}

.uma-skill-tile-lg .uma-skill-name[b-nr01z0xaig] {
    font-size: 1.05rem;
}
/* /Components/Skills/SkillTriggerItem.razor.rz.scp.css */
/* The raw DSL shown beside each plain-English phrase - monospaced so it reads as code. */
.skill-condition-raw[b-ns27jsyxym] {
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    opacity: 0.75;
}

.skill-condition-row[b-ns27jsyxym] {
    line-height: 1.35;
}
/* /Components/Supports/SupportCardArt.razor.rz.scp.css */
/* The card art fills the tile and is cropped to a 3:4 portrait, matching the deck picker. */
.support-art[b-uulerbwgji] {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--uma-card-radius-thumb);
    overflow: hidden;
}

.support-art-img[b-uulerbwgji] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
}

/* Non-selectable cards in the deck picker: grey the art but keep any overlay crisp. */
.support-art-dimmed .support-art-img[b-uulerbwgji] {
    filter: grayscale(0.85);
    opacity: 0.5;
}
/* /Components/Supports/SupportCardTile.razor.rz.scp.css */
.tile-art[b-qwha918lv6] {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 8px auto 0;
}

.tile-art img[b-qwha918lv6] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* /Components/Supports/SupportEffectsPanel.razor.rz.scp.css */
/* Unique effect sits above the training ledger, set apart by a tinted panel and a bottom rule.
   Unlocks at a character level rather than a limit break, so it carries no LB comparison. */
.unique-effect-block[b-94mrtq7rte] {
    margin-top: 0.5rem;
    padding-bottom: 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Constrained to one section-column ((100% - 28px column-gap) / 2) so its tiles match the
   width of the training tiles below, which sit two-per-section across the two-column ledger. */
.unique-effect-grid[b-94mrtq7rte] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: calc((100% - 28px) / 2);
}

@media (max-width: 900px) {
    .unique-effect-grid[b-94mrtq7rte] {
        grid-template-columns: 1fr;
        width: 100%;
    }
}

/* Tinted accent so the unique bonus reads as special against the plain training tiles. Laid out as
   a column: a head row (name + figure) over a short description of what the effect does. */
.unique-effect-tile[b-94mrtq7rte] {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    border-color: var(--mud-palette-secondary);
    background-color: color-mix(in srgb, var(--mud-palette-secondary) 8%, var(--mud-palette-surface));
}

.unique-tile-head[b-94mrtq7rte] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
}

.unique-tile-desc[b-94mrtq7rte] {
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
}

/* Small pill after the effect name marking the character level it unlocks at. */
.unique-unlock[b-94mrtq7rte] {
    margin-left: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* Dimmed when the previewed limit break hasn't reached the unlock level: the bonus isn't active
   yet, so the stat tiles below aren't boosted. */
.unique-effect-locked[b-94mrtq7rte] {
    opacity: 0.5;
}

/* The unlock pill turns to the warning tone while still locked at the previewed limit break. */
.unique-unlock-pending[b-94mrtq7rte] {
    color: var(--mud-palette-warning);
}

/* Grouped ledger laid out as a uniform two-column grid of sections to use the card's width.
   Real grid placement (not masonry columns) keeps the two columns aligned row-by-row: sections
   sit top-aligned in each row, so a fuller section doesn't drag its neighbour out of line.
   Collapses to a single column at the app's mobile boundary. */
.effect-sections[b-94mrtq7rte] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: 28px;
    row-gap: 1.1rem;
    margin-top: 0.5rem;
}

@media (max-width: 900px) {
    .effect-sections[b-94mrtq7rte] {
        grid-template-columns: 1fr;
    }
}

.effect-section-block[b-94mrtq7rte] {
    min-width: 0;
}

/* Section headers read as dividers: uppercase, spaced, with a rule running across the row. */
.effect-section[b-94mrtq7rte] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 0.55rem;
}

.effect-section-label[b-94mrtq7rte] {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
}

.effect-section-rule[b-94mrtq7rte] {
    flex: 1;
    height: 1px;
    background: var(--mud-palette-lines-default);
}

/* Two tiles per row within each section: name left, value right. minmax(0, 1fr) lets a tile
   shrink (long names wrap) rather than push the column past its half-section width. */
.effect-grid[b-94mrtq7rte] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.effect-tile[b-94mrtq7rte] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background-color: var(--mud-palette-surface);
}

.effect-tile-name[b-94mrtq7rte] {
    font-size: 0.85rem;
    line-height: 1.2;
    color: var(--mud-palette-text-secondary);
}

/* Value plus its signed delta badge sit together, right-aligned in the tile. */
.effect-tile-figures[b-94mrtq7rte] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    white-space: nowrap;
}

.effect-tile-value[b-94mrtq7rte] {
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* A stat with no value at the previewed limit break only unlocks at a higher one, so the whole
   tile is grayed as not-yet-available (matches the locked unique-effect tiles). */
.effect-tile-zero[b-94mrtq7rte] {
    opacity: 0.5;
}

.effect-tile-zero .effect-tile-value[b-94mrtq7rte] {
    color: var(--mud-palette-text-disabled);
    font-weight: 500;
}

/* Comparison against the owned copy. Value and badge are tinted green when the previewed limit
   break gains and red when it loses; a stat the preview unlocks that the owned copy lacks is
   instead called out with an outline (and a NEW badge), since it's added rather than just bigger. */
.effect-delta[b-94mrtq7rte] {
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.effect-tile-up .effect-tile-value[b-94mrtq7rte],
.effect-tile-up .effect-delta[b-94mrtq7rte],
.effect-tile-new .effect-tile-value[b-94mrtq7rte],
.effect-tile-new .effect-delta[b-94mrtq7rte] {
    color: var(--mud-palette-success);
}

.effect-tile-down .effect-tile-value[b-94mrtq7rte],
.effect-tile-down .effect-delta[b-94mrtq7rte] {
    color: var(--mud-palette-error);
}

/* The outline is the cue reserved for newly-unlocked stats. */
.effect-tile-new[b-94mrtq7rte] {
    border-color: var(--mud-palette-success);
    border-width: 2px;
    background-color: color-mix(in srgb, var(--mud-palette-success) 8%, var(--mud-palette-surface));
}

/* Gold cue for a tile the unique effect is folded into (its own axis, kept distinct from the
   green/red limit-break delta). Declared after the LB rules so it wins when both apply. */
.effect-tile-unique-boost[b-94mrtq7rte] {
    border-color: var(--mud-palette-secondary);
    background-color: color-mix(in srgb, var(--mud-palette-secondary) 10%, var(--mud-palette-surface));
}

/* The unique portion of a boosted total, badged in gold so it reads apart from the LB delta. */
.unique-delta[b-94mrtq7rte] {
    color: var(--mud-palette-secondary-darken);
}

/* Trim the checkbox so it sits inline in the section header rule. */
.unique-apply-toggle[b-94mrtq7rte] {
    margin: 0;
    flex: 0 0 auto;
}

/* Small caps-ish label in front of each limit-break selector in the header. */
.lb-control-label[b-94mrtq7rte] {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Supports/SupportLinkCard.razor.rz.scp.css */
.uma-link-tile-icon[b-uch7p7ko2d] {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 12px;
    background-color: var(--mud-palette-background-grey);
    transition: transform 120ms ease;
}

.uma-link-tile-icon:hover[b-uch7p7ko2d] {
    transform: translateY(-2px);
}
/* /Components/Track/SkillActivationDialog.razor.rz.scp.css */
.skill-activation-dialog__swatch[b-7mclrdk8ea] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.skill-activation-dialog__mono[b-7mclrdk8ea] {
    font-family: monospace;
    word-break: break-all;
}
/* /Components/Track/TrackActivationZone.razor.rz.scp.css */
.track-activation__zone[b-dexy28z2nh] {
    position: absolute;
    top: 0;
    bottom: 0;
    min-width: 2px;
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
}

.track-activation__zone--uncertain[b-dexy28z2nh]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 3px,
        rgba(255, 255, 255, 0.35) 3px,
        rgba(255, 255, 255, 0.35) 6px);
}

.track-activation__label[b-dexy28z2nh] {
    display: block;
    padding: 0 0.3rem;
    font-size: 0.6rem;
    line-height: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #fff;
}
/* /Components/Track/TrackPickerRow.razor.rz.scp.css */
.track-picker-row[b-zcbzpl6p3x] {
    cursor: pointer;
}

.track-picker-row__course[b-zcbzpl6p3x] {
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
}

@media (hover: hover) {
    .track-picker-row:hover[b-zcbzpl6p3x]  .mud-paper {
        border-color: var(--mud-palette-primary);
    }
}
/* /Components/Track/TrackProfile.razor.rz.scp.css */
.track-profile[b-4g7639hk1d] {
    width: 100%;
}

.track-profile__title[b-4g7639hk1d] {
    margin-bottom: 0.25rem;
}

.track-elevation[b-4g7639hk1d] {
    display: block;
    width: 100%;
    height: 52px;
}

.track-elevation__area[b-4g7639hk1d] {
    fill: #E0A83C;
    fill-opacity: 0.28;
}

.track-elevation__line[b-4g7639hk1d] {
    fill: none;
    stroke: #A9781F;
    stroke-width: 1.5;
    stroke-opacity: 0.7;
    vector-effect: non-scaling-stroke;
}

.track-legs[b-4g7639hk1d] {
    position: relative;
    height: 22px;
    border-radius: 4px;
    overflow: hidden;
}

.track-leg[b-4g7639hk1d] {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.track-leg__label[b-4g7639hk1d] {
    padding: 0 0.25rem;
    font-size: 0.68rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.track-leg--opening[b-4g7639hk1d] {
    background: #B5D4F4;
    color: #0C447C;
}

.track-leg--middle[b-4g7639hk1d] {
    background: #85B7EB;
    color: #0C447C;
}

.track-leg--final[b-4g7639hk1d] {
    background: #378ADD;
    color: #E6F1FB;
}

.track-leg--spurt[b-4g7639hk1d] {
    background: #EF9F27;
    color: #412402;
}

.track-strip[b-4g7639hk1d] {
    position: relative;
    height: 34px;
    margin-top: 3px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--mud-palette-background-grey);
}

.track-profile--compact .track-strip[b-4g7639hk1d] {
    height: 20px;
    margin-top: 0;
    border-radius: 4px;
}

.track-seg[b-4g7639hk1d] {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.track-seg__label[b-4g7639hk1d] {
    font-size: 0.62rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
}

.track-seg--straight[b-4g7639hk1d] {
    background: #1D9E75;
}

.track-seg--start[b-4g7639hk1d] {
    background: #5DCAA5;
}

.track-seg--corner[b-4g7639hk1d] {
    background: #D85A30;
}

.track-seg--home[b-4g7639hk1d] {
    background: #0F6E56;
}

.track-activations[b-4g7639hk1d] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 3px;
}

.track-activation[b-4g7639hk1d] {
    position: relative;
    height: 16px;
    border-radius: 4px;
    background: var(--mud-palette-background-grey);
}

.track-marks[b-4g7639hk1d] {
    position: relative;
    height: 18px;
}

.track-marks--top[b-4g7639hk1d] {
    margin-top: 0.35rem;
}

.track-mark[b-4g7639hk1d] {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.62rem;
    line-height: 1.1;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}

.track-marks--top .track-mark[b-4g7639hk1d] {
    top: auto;
    bottom: 0;
}

.track-mark__tick[b-4g7639hk1d] {
    width: 1px;
    height: 4px;
    margin-bottom: 1px;
    background: var(--mud-palette-text-secondary);
}

.track-legend[b-4g7639hk1d] {
    margin-top: 0.5rem;
}

.track-legend__swatch[b-4g7639hk1d] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
}
/* /Components/Track/TrackSkillNoteLegend.razor.rz.scp.css */
.track-skill-note-legend__dot[b-6xpj76qs59] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
}
/* /Components/Track/TrackSkillPickerDialog.razor.rz.scp.css */
.track-skill-results-grid[b-9csal91xit] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}
/* /Components/Track/TrackSkillSearchTile.razor.rz.scp.css */
/* This wrapper is the grid item, so it has to pass the stretched row height down to the
   SkillBrowseCard inside it. */
.track-skill-search-tile[b-mn6hkp4814] {
    cursor: pointer;
    height: 100%;
}
/* /Components/Track/TrackVenueGroup.razor.rz.scp.css */
.track-venue-group[b-x6kecqqg59] {
    margin-bottom: 1.25rem;
}

.track-venue-group__header[b-x6kecqqg59] {
    cursor: pointer;
    user-select: none;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
/* /Components/Training/TrainingSimAoharuNpcToken.razor.rz.scp.css */
.tsim-npctoken[b-2p9hm7cz6h] {
    position: relative;
    width: 78px;
    height: 78px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    background: var(--mud-palette-background-grey);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, #8a8a86 75%, transparent);
    transition: transform 110ms ease, box-shadow 110ms ease;
}

.tsim-npctoken:hover[b-2p9hm7cz6h] {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 2px #8a8a86, 0 3px 9px rgba(0, 0, 0, 0.3);
}

.tsim-npctoken:active[b-2p9hm7cz6h] {
    cursor: grabbing;
}

.tsim-npctoken-face[b-2p9hm7cz6h] {
    color: var(--mud-palette-text-secondary);
    font-size: 2.75rem;
}

/* The Aoharu spirit badge, bottom-left of the tile - the badge styles itself, we only place it. */
.tsim-tile-spirit[b-2p9hm7cz6h] {
    position: absolute;
    bottom: 1px;
    left: 1px;
}
/* /Components/Training/TrainingSimBoard.razor.rz.scp.css */
.tsim-board[b-ypgn70gu5a] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

/* The five columns can't sit side by side on a phone; flow them two-up below the mobile breakpoint. */
@media (max-width: 900px) {
    .tsim-board[b-ypgn70gu5a] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* /Components/Training/TrainingSimBoardCard.razor.rz.scp.css */
.tsim-boardcard[b-jka3w000dj] {
    position: relative;
    width: 78px;
    height: 78px;
    border-radius: 7px;
    overflow: hidden;
    cursor: grab;
    background: var(--mud-palette-background-grey);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tsim-type) 75%, transparent);
    transition: transform 110ms ease, box-shadow 110ms ease;
}

.tsim-boardcard:hover[b-jka3w000dj] {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 2px var(--tsim-type), 0 3px 9px rgba(0, 0, 0, 0.3);
}

.tsim-boardcard:active[b-jka3w000dj] {
    cursor: grabbing;
}

/* A full-bond specialty card lands as a rainbow training - give it a glowing frame. */
.tsim-boardcard-rainbow-on[b-jka3w000dj] {
    box-shadow: inset 0 0 0 2px #ffd54f, 0 0 8px 1px rgba(255, 170, 60, 0.7);
}

.tsim-boardcard-img[b-jka3w000dj] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tsim-boardcard-rainbow[b-jka3w000dj] {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    padding: 1px;
    color: #ffd54f;
    background: rgba(0, 0, 0, 0.5);
    border-bottom-right-radius: 6px;
}

.tsim-boardcard-menu[b-jka3w000dj] {
    position: absolute;
    top: 0;
    right: 0;
}

.tsim-boardcard-menu[b-jka3w000dj]  .mud-icon-button {
    padding: 2px;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
}

.tsim-boardcard-menu[b-jka3w000dj]  .mud-icon-button:hover {
    background: rgba(0, 0, 0, 0.68);
}

/* The Aoharu spirit badge, bottom-left of the tile - the badge styles itself, we only place it. */
.tsim-tile-spirit[b-jka3w000dj] {
    position: absolute;
    bottom: 1px;
    left: 1px;
}
/* /Components/Training/TrainingSimCaptureStatRow.razor.rz.scp.css */
.tsim-capture-row[b-hbcxuovi0l] {
    flex-wrap: wrap;
}

.tsim-capture-label[b-hbcxuovi0l] {
    min-width: 2.4rem;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--stat-hue, var(--mud-palette-text-secondary));
}

.tsim-capture-calc[b-hbcxuovi0l] {
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.tsim-capture-ok[b-hbcxuovi0l] {
    color: var(--mud-palette-success);
}

.tsim-capture-off[b-hbcxuovi0l] {
    color: var(--mud-palette-warning);
    font-weight: 600;
}

/* Marks the combined Unity Cup scenario-bonus field (flame trainee bonus plus Spirit Explosion), tinted so
   the two inputs (training / scenario) read as distinct columns. */
.tsim-capture-scenario-icon[b-hbcxuovi0l] {
    font-size: 15px;
    color: var(--mud-palette-error);
}
/* /Components/Training/TrainingSimDeckPanel.razor.rz.scp.css */
.tsim-deck-drop[b-u1vyi3p6xg] {
    position: relative;
    flex: 1 1 auto;
    border: 1px dashed transparent;
    border-radius: var(--mud-default-borderradius);
    transition: border-color 120ms ease, background-color 120ms ease;
}

/* Dragging a placed card or an NPC off the board: the deck becomes the discard zone (red). */
.tsim-deck-drop-discard[b-u1vyi3p6xg] {
    border-color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 8%, transparent);
}

.tsim-deck-drop-discard-over[b-u1vyi3p6xg] {
    background: color-mix(in srgb, var(--mud-palette-error) 20%, transparent);
    box-shadow: 0 0 0 2px var(--mud-palette-error) inset;
}

/* The "drop here to discard" veil over the deck while a board piece is in flight. */
.tsim-deck-discard-hint[b-u1vyi3p6xg] {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
    border-radius: var(--mud-default-borderradius);
    color: var(--mud-palette-error);
    font-weight: 600;
    background: color-mix(in srgb, var(--mud-palette-error) 14%, var(--mud-palette-surface));
}

.tsim-deck-grid[b-u1vyi3p6xg] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 14px;
    padding: 6px 2px;
}

@media (max-width: 600px) {
    .tsim-deck-grid[b-u1vyi3p6xg] {
        grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
        gap: 10px;
    }
}

.tsim-deck-add[b-u1vyi3p6xg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    aspect-ratio: 3 / 4;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
}

.tsim-deck-add:hover[b-u1vyi3p6xg] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}
/* /Components/Training/TrainingSimDeckSlot.razor.rz.scp.css */
.tsim-deckslot[b-a5yqaqj27d] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tsim-deckslot-art[b-a5yqaqj27d] {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--uma-card-radius-full);
    overflow: hidden;
    cursor: grab;
    background: var(--mud-palette-background-grey);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tsim-type) 70%, transparent);
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.tsim-deckslot-art:hover[b-a5yqaqj27d] {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 2px var(--tsim-type), 0 4px 12px rgba(0, 0, 0, 0.28);
}

.tsim-deckslot-art:active[b-a5yqaqj27d] {
    cursor: grabbing;
}

.tsim-deckslot-img[b-a5yqaqj27d] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
}

.tsim-deckslot-placed .tsim-deckslot-img[b-a5yqaqj27d] {
    opacity: 0.5;
}

.tsim-deckslot-placed .tsim-deckslot-art[b-a5yqaqj27d] {
    filter: saturate(0.75);
}

/* Labelled friendship toggle: a rainbow fill when it's on so it clearly reads as a rainbow training. */
.tsim-friend-btn[b-a5yqaqj27d] {
    text-transform: none;
}

.tsim-friend-btn.on.mud-button-root[b-a5yqaqj27d] {
    color: #fff;
    border: none;
    background: linear-gradient(90deg, #ff7eb3, #8a7bff 55%, #45c8ff);
}

.tsim-deckslot-tag[b-a5yqaqj27d] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 2px 4px;
    font-size: 0.68rem;
    line-height: 1.2;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0));
    padding-top: 12px;
}

.tsim-deckslot-lb[b-a5yqaqj27d] {
    font-size: 0.8rem;
}
/* /Components/Training/TrainingSimFacilityCapture.razor.rz.scp.css */
.tsim-capture[b-8jmcec3aq8] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px dashed var(--mud-palette-lines-default);
}

.tsim-capture-head[b-8jmcec3aq8] {
    color: var(--mud-palette-text-secondary);
    letter-spacing: 0.06em;
}

.tsim-capture-name[b-8jmcec3aq8] {
    width: 100%;
}
/* /Components/Training/TrainingSimFacilityColumn.razor.rz.scp.css */
.tsim-col[b-3c7z494y38] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    min-height: 160px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.tsim-col-active[b-3c7z494y38] {
    border-color: var(--tsim-type);
    border-style: dashed;
    background: color-mix(in srgb, var(--tsim-type) 8%, var(--mud-palette-surface));
}

.tsim-col-over[b-3c7z494y38] {
    border-color: var(--tsim-type);
    box-shadow: 0 0 0 2px var(--tsim-type) inset;
    background: color-mix(in srgb, var(--tsim-type) 10%, var(--mud-palette-surface));
}

/* Facility-tinted header band, bled out to the card edges. It wraps so that in a narrow board column
   (tablet 5-up, or two-up on a phone) the level segments drop below the icon + name instead of pushing the
   header wider than the column - no horizontal overflow at any width. */
.tsim-col-head[b-3c7z494y38] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: -8px -8px 2px;
    padding: 6px 8px;
    background: color-mix(in srgb, var(--tsim-type) 16%, var(--mud-palette-surface));
    border-bottom: 1px solid color-mix(in srgb, var(--tsim-type) 32%, transparent);
    border-radius: 8px 8px 0 0;
}

/* The icon + name take the free space so the level segments are pushed hard to the right edge, with a
   clear gap between the two. */
.tsim-col-name[b-3c7z494y38] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--tsim-type) 45%, var(--mud-palette-text-primary));
}

.tsim-col-level[b-3c7z494y38] {
    flex: 0 0 auto;
}

/* Five single-digit segments in place of the old level dropdown - one tap to set a facility's level.
   ::deep reaches MudToggleGroup's own items, which the component's scope attribute can't stamp. */
.tsim-col-level[b-3c7z494y38]  .mud-toggle-item {
    min-width: 1.9rem;
    padding: 1px 0;
    font-size: 0.75rem;
    line-height: 1.5;
    justify-content: center;
}

/* On a phone the board is two-up, so each column is only ~135px wide; shrink the segments so all five fit
   on their (wrapped) line without pushing the column wider than the viewport. */
@media (max-width: 500px) {
    .tsim-col-level[b-3c7z494y38]  .mud-toggle-item {
        min-width: 1.5rem;
        font-size: 0.72rem;
    }
}

.tsim-col-cards[b-3c7z494y38] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 78px;
    padding: 2px 0;
}

.tsim-col-empty[b-3c7z494y38] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 78px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 6px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.tsim-col-rainbow[b-3c7z494y38] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    padding: 1px 9px 1px 6px;
    font-size: 0.7rem;
    font-weight: 500;
    color: #fff;
    border-radius: 10px;
    background: linear-gradient(90deg, #ff7eb3, #8a7bff 55%, #45c8ff);
}

.tsim-col-gains[b-3c7z494y38] {
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-top: 6px;
}

/* Stats laid out horizontally: a label row, a training-gain row, and (when a scenario mechanic adds one)
   a flat-bonus row, each cell aligned under its stat. */
.tsim-gain-bands[b-3c7z494y38] {
    display: grid;
    gap: 3px 6px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Per-stat header: its type icon over a short label, tinted and underlined in the stat's accent hue. */
.tsim-gain-stat[b-3c7z494y38] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding-bottom: 2px;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--stat-hue, var(--mud-palette-text-secondary));
    border-bottom: 2px solid var(--stat-hue, var(--mud-palette-lines-default));
}

.tsim-gain-stat img[b-3c7z494y38] {
    display: block;
}

.tsim-gain-sp-icon[b-3c7z494y38] {
    font-size: 15px;
    color: var(--stat-hue);
}

.tsim-gain-train[b-3c7z494y38] {
    font-size: 0.9rem;
    font-weight: 500;
    padding: 1px 4px;
    border-radius: 6px;
    background: var(--mud-palette-background-grey);
}

/* Scenario bonus (Aoharu Spirit Explosion burst now, item effects later): a green pill under its stat. */
.tsim-gain-bonus[b-3c7z494y38] {
    font-size: 0.78rem;
    font-weight: 500;
    padding: 1px 4px;
    border-radius: 6px;
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 16%, transparent);
}

.tsim-gain-bonus-empty[b-3c7z494y38] {
    background: transparent;
}
/* /Components/Training/TrainingSimHappyMeekToken.razor.rz.scp.css */
.tsim-token[b-kt8qab9t8q] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    cursor: grab;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, #e0a800 45%, transparent);
}

.tsim-token:active[b-kt8qab9t8q] {
    cursor: grabbing;
}

.tsim-token-placed[b-kt8qab9t8q] {
    opacity: 0.6;
}

.tsim-token-face[b-kt8qab9t8q] {
    color: #e0a800;
    flex: 0 0 auto;
}

.tsim-token-text[b-kt8qab9t8q] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.tsim-token-name[b-kt8qab9t8q] {
    font-size: 0.85rem;
    font-weight: 500;
}

.tsim-token-badge[b-kt8qab9t8q] {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
}

.tsim-token-on[b-kt8qab9t8q] {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* Column form: a board-card-sized square with just her face. */
.tsim-token-compact[b-kt8qab9t8q] {
    width: 78px;
    height: 78px;
    justify-content: center;
    padding: 0;
    gap: 0;
    border-radius: 7px;
}

.tsim-token-compact .tsim-token-face[b-kt8qab9t8q] {
    font-size: 2.5rem;
}
/* /Components/Training/TrainingSimLevelHeading.razor.rz.scp.css */
.tsim-level-number[b-a9kb06b0o5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 1px solid var(--mud-palette-lines-default);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    flex: 0 0 auto;
}
/* /Components/Training/TrainingSimMantItemsPanel.razor.rz.scp.css */
/* Icon-select tiles for the Make a New Track items. Each tile is a plain button (authored in this
   component, so the scoped attribute applies) that stacks its item icon over a label; the row flex comes
   from the MudStack wrapper. Megaphones are single-select, ankle weights toggle independently. */

.tsim-mant-tile[b-g9qhlg36dd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    width: 82px;
    padding: 8px 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}

.tsim-mant-tile:hover[b-g9qhlg36dd] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
}

.tsim-mant-tile:focus-visible[b-g9qhlg36dd] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.tsim-mant-tile img[b-g9qhlg36dd] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.tsim-mant-selected[b-g9qhlg36dd] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}

.tsim-mant-name[b-g9qhlg36dd] {
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
}

.tsim-mant-sub[b-g9qhlg36dd] {
    font-size: .72rem;
    line-height: 1;
    opacity: .7;
}
/* /Components/Training/TrainingSimPickerDialog.razor.rz.scp.css */
/* The picker (SupportCardSearch) is already built to fill a bounded flex column: its toolbar is
   flex: 0 0 auto and only .card-search-results scrolls. All it needs is a host with a real height
   to fill.
   That is what this is. It used to do the opposite - force the whole chain to natural flow and put
   one scrollbar on this element - which scrolled the filters out of reach with the grid and cut the
   last row of cards in half at the boundary. The original reason was a content-sized dialog, where
   the chain collapses to zero and only the toolbar shows; an explicit height fixes that without
   giving up the inner scroll.

   A fixed height also keeps the dialog the same size however many results a search returns, rather
   than shrinking when a filter narrows it to a few cards. */
.tsim-picker-body[b-5qledklzfd] {
    height: 68vh;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* The picker's own MudPaper root: a child component's root, so DeckPickerPanel's scoped CSS cannot
   reach it and it has to be set from the host that bounds it. */
.tsim-picker-body[b-5qledklzfd]  .deck-pick-panel {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* /Components/Training/TrainingSimScenarioPanel.razor.rz.scp.css */
.tsim-scenario-tray[b-jgr5gozzks] {
    flex: 1 1 auto;
    border: 1px dashed transparent;
    border-radius: var(--mud-default-borderradius);
    padding: 4px;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.tsim-scenario-tray-active[b-jgr5gozzks] {
    border-color: var(--mud-palette-lines-default);
    background: var(--mud-palette-background-grey);
}

.tsim-scenario-tray-over[b-jgr5gozzks] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

/* The Aoharu NPC dispenser: a draggable chip that mints a new team NPC on each drop onto a training. */
.tsim-npc-source[b-jgr5gozzks] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    cursor: grab;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, #8a8a86 40%, transparent);
}

.tsim-npc-source:active[b-jgr5gozzks] {
    cursor: grabbing;
}

.tsim-npc-source-face[b-jgr5gozzks] {
    color: var(--mud-palette-text-secondary);
    flex: 0 0 auto;
}

.tsim-npc-source-text[b-jgr5gozzks] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.tsim-npc-source-name[b-jgr5gozzks] {
    font-size: 0.85rem;
    font-weight: 500;
}

.tsim-npc-source-badge[b-jgr5gozzks] {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
}

.tsim-npc-source-grip[b-jgr5gozzks] {
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Training/TrainingSimSongRow.razor.rz.scp.css */
/* One song row: jacket, then the name over a single bonus line. Two lines per row (not three) so the
   list shows roughly half again as many songs in the same height. Authored in this component, so the
   scoped attribute reaches every element here. */

.tsim-song-row[b-0m8q9gse0i] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 3px 6px;
    border: 1px solid transparent;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    text-align: left;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}

.tsim-song-row:hover[b-0m8q9gse0i] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
}

.tsim-song-row:focus-visible[b-0m8q9gse0i] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.tsim-song-active[b-0m8q9gse0i] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

.tsim-song-inert .tsim-song-jacket[b-0m8q9gse0i],
.tsim-song-inert .tsim-song-text[b-0m8q9gse0i] {
    opacity: .5;
}

.tsim-song-jacket[b-0m8q9gse0i] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 4px;
    object-fit: cover;
}

.tsim-song-text[b-0m8q9gse0i] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.tsim-song-name[b-0m8q9gse0i] {
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Both bonuses on one line. The mastery half gets the room it needs and the concert half shrinks first,
   since it is the shorter, more repetitive of the two. */
.tsim-song-bonuses[b-0m8q9gse0i] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    font-size: .7rem;
    line-height: 1.25;
}

.tsim-song-mastery[b-0m8q9gse0i] {
    flex: 0 1 auto;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tsim-song-concert[b-0m8q9gse0i] {
    flex: 1 1 auto;
    min-width: 0;
    opacity: .7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tsim-song-concert[b-0m8q9gse0i]::before {
    content: "· ";
}

.tsim-song-concert-live[b-0m8q9gse0i] {
    color: var(--mud-palette-primary);
    opacity: .95;
}
/* /Components/Training/TrainingSimSongsPanel.razor.rz.scp.css */
/* The scrollable song list. auto-fill rem tracks so the list runs two or three songs abreast whenever the
   panel is wide (desktop's scenario column, or the full-width mobile stack) and collapses to one when it
   is not. A fixed max height keeps the Grand Live panel from outgrowing the other scenario panels. */

.tsim-song-list[b-n0qj5h8yke] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 4px;
    max-height: 21rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 3px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-background-grey);
}

.tsim-song-totals[b-n0qj5h8yke] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

@media (max-width: 900px) {
    .tsim-song-list[b-n0qj5h8yke] {
        max-height: 17rem;
    }
}
/* /Components/Training/TrainingSimSongTotal.razor.rz.scp.css */
/* A total pill tinted with the training's accent hue, passed in as the --tsim-total-hue custom property.
   colour-mix keeps one hue driving the border, the wash and the text at three different strengths. */

.tsim-song-total[b-4wf4sxlsvc] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 5px;
    border: 1px solid color-mix(in srgb, var(--tsim-total-hue) 55%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--tsim-total-hue) 12%, transparent);
    color: var(--tsim-total-hue);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.tsim-song-total img[b-4wf4sxlsvc] {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.tsim-song-total-value[b-4wf4sxlsvc] {
    font-variant-numeric: tabular-nums;
}
/* /Components/Training/TrainingSimSpiritBadge.razor.rz.scp.css */
.tsim-spirit[b-k56ksj08k9] {
    display: inline-flex;
}

/* The spirit toggle owns its own look (the host tile only positions it): a round, ringed corner button
   with a bigger flame than a default corner icon so it's easy to see and tap. ::deep reaches
   MudIconButton's DOM, which this component's scope attribute can't stamp. */
.tsim-spirit[b-k56ksj08k9]  .mud-icon-button {
    padding: 4px;
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.4);
    transition: box-shadow 120ms ease, background-color 120ms ease, transform 90ms ease;
}

.tsim-spirit[b-k56ksj08k9]  .mud-icon-button:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.08);
}

.tsim-spirit[b-k56ksj08k9]  .mud-icon-root {
    font-size: 1.5rem;
}

/* Lit states glow in their accent so flame / burst stand out against the tile art. */
.tsim-spirit-flame[b-k56ksj08k9]  .mud-icon-button {
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--mud-palette-warning) 70%, #fff),
                0 0 7px 1px color-mix(in srgb, var(--mud-palette-warning) 75%, transparent);
}

.tsim-spirit-burst[b-k56ksj08k9]  .mud-icon-button,
.tsim-spirit-extreme[b-k56ksj08k9]  .mud-icon-button {
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--mud-palette-error) 70%, #fff),
                0 0 8px 1px color-mix(in srgb, var(--mud-palette-error) 80%, transparent);
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* ── App shell: floating-cards layout ───────────────────────────────────── */

.uma-canvas[b-p375fed3t0] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    overflow: hidden;
}

.uma-card[b-p375fed3t0] {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    box-shadow: 0 10px 30px var(--uma-shadow-soft);
}

/* Navbar card */
.uma-navbar[b-p375fed3t0] {
    flex: 0 0 auto;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 14px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-color: var(--mud-palette-secondary);
}

.uma-brand[b-p375fed3t0] {
    font-weight: 700;
    letter-spacing: -0.01em;
}

.uma-nb-brand[b-p375fed3t0] {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
}

.uma-nb-actions[b-p375fed3t0] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 0;
    gap: 4px;
    color: var(--mud-palette-primary-text);
}

/* Row below navbar: sidebar + main content */
.uma-below[b-p375fed3t0] {
    flex: 1 1 auto;
    display: flex;
    gap: 14px;
    min-height: 0;
}

/* Sidebar + main share one subtle primary tint so they read as a matched pair
   (the navbar carries the full primary fill above them). */
.uma-sidebar[b-p375fed3t0],
.uma-main[b-p375fed3t0] {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
}

.uma-sidebar[b-p375fed3t0] {
    flex: 0 0 250px;
    padding: 8px;
    overflow-y: auto;
}

.uma-main[b-p375fed3t0] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 24px 28px;
    overflow-y: auto;
}

/* A page can opt into a fixed, self-contained height (e.g. the deck builder): the main
   card becomes a flex column that does not scroll, and the page manages its own internal
   scroll regions. */
.uma-main:has(> .deck-page)[b-p375fed3t0],
.uma-main:has(> .browse-page)[b-p375fed3t0],
.uma-main:has(> .compare-page)[b-p375fed3t0],
.uma-main:has(> .roster-ingest)[b-p375fed3t0] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

@media (max-width: 900px) {
    .uma-canvas[b-p375fed3t0] { height: auto; min-height: 100vh; overflow: visible; gap: 10px; padding: 10px; }
    .uma-below[b-p375fed3t0] { flex-direction: column; }

    /* The bottom tab bar (MobileNavBar) replaces the sidebar on phones, so hide it here and
       reclaim its width for the content. */
    .uma-sidebar[b-p375fed3t0] { display: none; }

    .uma-navbar[b-p375fed3t0] { gap: 8px; padding: 0 10px; }

    /* Hand the crowded navbar's middle to the search pill: brand (icon only) and the action
       icons stop growing, and the home wordmark is dropped (the bottom bar carries Home). */
    .uma-nb-brand[b-p375fed3t0] { flex: 0 0 auto; }
    .uma-nb-actions[b-p375fed3t0] { flex: 0 0 auto; }
    .uma-nb-brand[b-p375fed3t0]  .uma-nb-title { display: none; }

    .uma-main[b-p375fed3t0] { overflow-y: visible; padding: 16px 14px; }

    /* Leave clearance so the last row of content isn't hidden behind the fixed bottom bar. */
    .uma-canvas[b-p375fed3t0] { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

    .uma-main:has(> .deck-page)[b-p375fed3t0] { display: block; overflow: visible; }
    .uma-main:has(> .browse-page)[b-p375fed3t0] { display: block; overflow: visible; }
    .uma-main:has(> .compare-page)[b-p375fed3t0] { display: block; overflow: visible; }
    .uma-main:has(> .roster-ingest)[b-p375fed3t0] { display: block; overflow: visible; }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.uma-nav[b-gttssw1ohc] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.uma-nav-label[b-gttssw1ohc] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    padding: 14px 12px 6px;
}

[b-gttssw1ohc] .mud-nav-link {
    position: relative;
    border-radius: 9px;
    margin: 1px 0;
    min-height: 42px;
}

[b-gttssw1ohc] .mud-nav-link .mud-nav-link-text {
    display: flex;
    align-items: center;
    width: 100%;
    white-space: nowrap;
}

[b-gttssw1ohc] .mud-nav-link.active {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent) !important;
    color: var(--mud-palette-text-primary) !important;
    font-weight: 700;
}

[b-gttssw1ohc] .mud-nav-link.active .mud-nav-link-icon {
    color: var(--mud-palette-action-default) !important;
}

.uma-count[b-gttssw1ohc] {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    padding: 0 8px;
}

.uma-nav-soon[b-gttssw1ohc] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    border-radius: 9px;
    color: var(--mud-palette-text-secondary);
    opacity: 0.7;
    font-size: 0.92rem;
    white-space: nowrap;
}

.uma-nav-soon[b-gttssw1ohc]  .mud-icon-root {
    color: var(--mud-palette-text-secondary);
}

.uma-soon[b-gttssw1ohc] {
    margin-left: auto;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--mud-palette-secondary);
    border: 1px solid var(--mud-palette-secondary);
    border-radius: 999px;
    padding: 1px 7px;
}

.uma-nav-foot[b-gttssw1ohc] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-top: 1px solid var(--mud-palette-divider);
    margin-top: auto;
    padding: 12px 12px 4px;
    font-size: 0.74rem;
    color: var(--mud-palette-text-secondary);
}

.uma-region[b-gttssw1ohc] {
    font-size: 0.7rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    padding: 2px 8px;
}
/* /Pages/AimForStars.razor.rz.scp.css */
/* Fixed responsive grid of uma tiles, mirroring the Characters browser but with a wider floor so
   each tile fits its two toggle buttons. */
.scout-grid[b-pmflrh6nw2] {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(
        auto-fill,
        minmax(max(9rem, calc((100% - 5 * 12px) / 6)), 1fr));
}

.scout-grid > *[b-pmflrh6nw2] {
    min-width: 0;
}
/* /Pages/AptitudeCalculator.razor.rz.scp.css */
/* Simple / Advanced switch: the same two-equal-width-button tab control the deck builder
   uses for Stats / Skills, kept to a sensible width instead of spanning the page. */
.apt-tab-switch[b-t2ed31f1vf] {
    max-width: 360px;
}
/* /Pages/Characters.razor.rz.scp.css */
/* Fixed up-to-8 grid, mirroring the Support Cards browser (SupportCardSearch). MudGrid's
   12-column system can't express 8-across, so drive a CSS grid directly: at wide widths the
   calc() track yields exactly 8 columns; as it narrows, 6rem becomes the floor and the row
   wraps to fewer. */
.char-grid[b-w7n5dz55vi] {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(
        auto-fill,
        minmax(max(6rem, calc((100% - 7 * 12px) / 8)), 1fr));
}

/* Let tiles shrink inside their track instead of overflowing on long labels. */
.char-grid > *[b-w7n5dz55vi] {
    min-width: 0;
}
/* /Pages/CmPlanner.razor.rz.scp.css */
/* The scroll container is .uma-main (overflow-y: auto in MainLayout), which has 24px of top
   padding. A sticky child pins to its containing block's content box, not the scrollport, so
   top: 0 leaves the bar sitting 24px in and page content scrolls visibly through that strip above
   it. top: -24px is what pulls it up onto the padding-box edge (measured: the 1px that remains is
   .uma-main's own border, which should stay visible). Horizontal margins stretch it to the card's
   full width; the padding puts the inset back inside.
   margin-top: -24px matches that same offset so the bar's un-scrolled, in-flow position already
   sits at the padding-box edge - the exact spot top: -24px pins it to once stuck. Without this the
   bar starts 24px lower (inside the padding) and visibly slides up that 24px the moment scrolling
   begins, before locking; this makes the "stuck" look the resting look from the first frame.
   The background repeats .uma-main's tint so content scrolls out of sight behind the bar.
   z-index clears CmEditTile's edit overlay (3). On a tie the overlay wins for being later in the
   document, which both hid the bar behind the dashed tiles and dragged it into the overlay's
   backdrop-filter, greying the bar's own buttons out. */
/* The topbar's own flex, three across on desktop. Hand-rolled rather than MudStack because the
   phone layout below has to turn this into a column, and MudStack writes its direction inline where
   no rule can reach it. */
.cm-topbar-row[b-njlb38e7iq] {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}

.cm-topbar-nav[b-njlb38e7iq] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.cm-topbar-actions[b-njlb38e7iq] {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.cm-topbar[b-njlb38e7iq] {
  position: sticky;
  top: -24px;
  z-index: 10;
  margin: -24px -28px 12px;
  padding: 0 28px 8px;
  background-color: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
  border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* On phones .uma-main has 16px of top padding instead of 24px (and switches to overflow: visible,
   so the page itself scrolls and the bar pins to the viewport rather than to the card) - same
   before/after-scroll match, just against that 16px. */
@media (max-width: 900px) {
  .cm-topbar[b-njlb38e7iq] {
    top: 0;
    margin: -16px -14px 10px;
    padding: 12px 14px 8px;
  }

  /* Three across does not fit a phone: the banner ended up squeezed between the two control groups
     and running off the right edge. Stack instead, banner first (it says which meet you are in) with
     each control group running across underneath, so the pinned bar stays short. */
  .cm-topbar-row[b-njlb38e7iq] {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .cm-topbar-banner[b-njlb38e7iq] {
    order: -1;
    max-width: 100%;
    overflow: hidden;
  }

  .cm-topbar-nav[b-njlb38e7iq],
  .cm-topbar-actions[b-njlb38e7iq] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
}
/* /Pages/DeckBuilder.razor.rz.scp.css */
/* Full-height deck builder: the page fills the main content card and does not scroll.
   Each column scrolls on its own instead - the left column (deck slots + Stats/Skills)
   as a whole, the right column via the picker's inner results - so a short viewport
   reaches everything rather than clipping it.
   NOTE: rules that style the MudPaper/MudTabs component roots (.deck-aux,
   .deck-pick-panel, .deck-title, the deck-slots card) live in global app.css, because
   Blazor scoped CSS isn't applied to child-component root elements. */
.deck-page[b-1fr6be9y76] {
    /* height:100% is the primary bound (.uma-main always has a definite height from the
       shell flex); flex:1 covers the case where .uma-main is itself a flex column. */
    height: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Safety net: never let inner content spill into the page scroll. */
    overflow: hidden;
}

.deck-cols[b-1fr6be9y76] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
}

.deck-col[b-1fr6be9y76] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Deck side is a touch narrower so the picker + its search get more room. The deck
   slots and the Stats/Skills panel scroll together as one column, so a short viewport
   (e.g. 200% zoom) scrolls down to the skills instead of clipping them off the bottom. */
.deck-col-left[b-1fr6be9y76] {
    flex: 0 0 37%;
    overflow-y: auto;
    /* keep the scrollbar off the panel edges when it appears */
    padding-right: 4px;
}

.deck-col-right[b-1fr6be9y76] {
    flex: 1 1 auto;
    min-width: 0;
}

/* On narrow screens the shell already lets the page scroll; restore natural flow. Every
   box is content-sized and non-shrinking (flex: 0 0 auto) so nothing can collapse below
   its content and spill over the panel beneath it. */
@media (max-width: 900px) {
    .deck-page[b-1fr6be9y76] {
        height: auto;
        flex: 0 0 auto;
        overflow: visible;
    }

    .deck-cols[b-1fr6be9y76] {
        flex-direction: column;
        flex: 0 0 auto;
        min-height: auto;
    }

    .deck-col-left[b-1fr6be9y76],
    .deck-col-right[b-1fr6be9y76] {
        flex: 0 0 auto;
        min-height: auto;
        /* page scrolls as a whole on narrow screens - no per-column scroll */
        overflow: visible;
        padding-right: 0;
    }
}
/* /Pages/EventSearch.razor.rz.scp.css */
/* Same track sizing as the Skills browse grid, so the two pages read as siblings. */
.event-search-results[b-3mh8nx3jh6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 12px;
}
/* /Pages/RacePlanner.razor.rz.scp.css */
/* Page-level styles moved to component scoped files:
   PlannerYearCard.razor.css  - year/pair grid
   PlannerDayRaceMenu.razor.css - day race picker shown in the per-cell popover
   PlannerScheduledPanel.razor.css - grade count, selected list
   app.css - .uma-planner-grade-badge (global, shared across 3 components) */
/* /Pages/RosterIngest.razor.rz.scp.css */
.roster-ingest[b-p6517dxcqr] {
    /* Focusable for the keyboard shortcuts, but don't draw a focus ring around the whole page. */
    outline: none;
    /* A plain flex column that flows naturally: the card art is capped (see RosterIngestCurrentCard)
       so the tool fits a phone screen, and if a very short viewport still can't fit it the page
       scrolls rather than clipping the controls below the card. The child centering lives in app.css
       (scoped CSS can't reach the child components' roots). */
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Desktop shows the filmstrip (grows to fill the leftover height, like before); phones show only the
   capped single card. Toggled by media query so there's no first-render flash. The scoped
   .roster-strip-desktop rule beats the app.css `.roster-ingest > *` flex on specificity. */
.roster-card-mobile[b-p6517dxcqr] {
    display: none;
}

.roster-strip-desktop[b-p6517dxcqr] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
}

@media (max-width: 900px) {
    .roster-strip-desktop[b-p6517dxcqr] {
        display: none;
    }

    .roster-card-mobile[b-p6517dxcqr] {
        display: block;
    }
}

.roster-ingest-done[b-p6517dxcqr] {
    margin-top: 2rem;
}
/* /Pages/Settings.razor.rz.scp.css */
/* General / Rosters switch: the same two-equal-width-button tab control the aptitude calculator
   uses, kept to a sensible width instead of spanning the page. */
.settings-tab-switch[b-1llhua3xw4] {
    max-width: 360px;
}
/* /Pages/Skills.razor.rz.scp.css */
.uma-skill-cards[b-1ph0tqz29h] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}
/* /Pages/SupportCompare.razor.rz.scp.css */
/* Full-height compare page, modelled on the Deck Builder: the page fills the main content card and
   does not scroll. The left simulator column scrolls internally (its matrix also scrolls
   horizontally on its own) and the right picker column is fixed, scrolling only its inner results.
   NOTE: rules that style MudPaper/MudStack component roots (.compare-title, .compare-view-empty,
   .compare-pick-panel) live in global app.css, because Blazor scoped CSS isn't applied to
   child-component root elements. */
.compare-page[b-7sjihitqn6] {
    height: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.compare-cols[b-7sjihitqn6] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
}

.compare-col[b-7sjihitqn6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* The simulator gets the room (the matrix can be wide) and scrolls on its own. */
.compare-col-left[b-7sjihitqn6] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding-right: 4px;
}

/* The picker is a fixed sidebar on the right: it fills the column height and scrolls its own
   results (see .compare-pick-panel in app.css), so the page itself never scrolls. */
.compare-col-right[b-7sjihitqn6] {
    flex: 0 0 34%;
    min-width: 0;
}

/* On narrow screens the shell lets the page flow; stack the columns (simulator on top) and let
   every panel size to its content instead of scrolling internally. */
@media (max-width: 900px) {
    .compare-page[b-7sjihitqn6] {
        height: auto;
        flex: 0 0 auto;
        overflow: visible;
    }

    .compare-cols[b-7sjihitqn6] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .compare-col-left[b-7sjihitqn6] {
        overflow-y: visible;
        padding-right: 0;
    }

    .compare-col-left[b-7sjihitqn6],
    .compare-col-right[b-7sjihitqn6] {
        flex: 0 0 auto;
        min-height: auto;
    }
}
/* /Pages/TrainingSim.razor.rz.scp.css */
/* Deck section and the scenario-pieces tray sit side by side and share a height: both stretch to the
   taller one so their bottoms line up. Each panel fills that shared height, and its inner drop zone /
   scenario tray grows to soak up any spare space, so a short or empty deck reads as a bigger drop target
   instead of a dead gap under the cards. They stack full-width on phones. */
.tsim-deck-row[b-flzj1fx71e] {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.tsim-deck-main[b-flzj1fx71e] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.tsim-deck-side[b-flzj1fx71e] {
    /* 25rem so the scenario panel's item grids (Aoharu tray, the MANT megaphone / ankle-weight tiles)
       get a full four tiles per row instead of wrapping two-up; the deck (flex:1) reflows to fit. */
    flex: 0 0 25rem;
    display: flex;
    flex-direction: column;
}

/* Propagate the shared height down to the drop zone / tray: the panel (a MudPaper) grows, its MudStack
   grows, and the flex:1 drop zone / scenario tray inside takes the slack. ::deep because the targets are
   child MudBlazor components, which scoped rules can't reach on their own. */
.tsim-deck-main[b-flzj1fx71e] >  .mud-paper,
.tsim-deck-side[b-flzj1fx71e] >  .mud-paper {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.tsim-deck-main[b-flzj1fx71e] >  .mud-paper > .mud-stack,
.tsim-deck-side[b-flzj1fx71e] >  .mud-paper > .mud-stack {
    flex: 1 1 auto;
}

@media (max-width: 900px) {
    .tsim-deck-row[b-flzj1fx71e] {
        flex-direction: column;
        align-items: stretch;
    }

    .tsim-deck-side[b-flzj1fx71e] {
        flex: 1 1 auto;
    }
}
/* /Pages/UmaRosterIngest.razor.rz.scp.css */
.roster-ingest[b-qv8nkek749] {
    /* Focusable for the keyboard shortcuts, but don't draw a focus ring around the whole page. */
    outline: none;
    /* A plain flex column that flows naturally: the art is capped (see UmaRosterIngestCurrentCard)
       so the tool fits a phone screen, and if a very short viewport still can't fit it the page
       scrolls rather than clipping the controls below the art. The child centering lives in app.css
       (scoped CSS can't reach the child components' roots). */
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Desktop shows the filmstrip (grows to fill the leftover height); phones show only the capped
   single card. Toggled by media query so there's no first-render flash. The scoped
   .roster-strip-desktop rule beats the app.css `.roster-ingest > *` flex on specificity. */
.roster-card-mobile[b-qv8nkek749] {
    display: none;
}

.roster-strip-desktop[b-qv8nkek749] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
}

@media (max-width: 900px) {
    .roster-strip-desktop[b-qv8nkek749] {
        display: none;
    }

    .roster-card-mobile[b-qv8nkek749] {
        display: block;
    }
}

.roster-ingest-done[b-qv8nkek749] {
    margin-top: 2rem;
}