/* /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/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;
}

.uma-card-unique[b-i6jty80wxb] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--uma-accent, var(--mud-palette-warning));
    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) {
    .uma-card-unique:hover[b-i6jty80wxb] {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px var(--uma-shadow-soft);
    }
}

.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/CmDeckPickerDialog.razor.rz.scp.css */
/* Same treatment as the Training Simulator's picker dialog: SupportCardSearch is built to fill a
   bounded flex column, which collapses to zero inside a content-sized dialog and leaves only the
   search toolbar visible. Force natural flow, and pin the body's height so filtering down to a few
   cards does not shrink the whole dialog. */

.cm-deck-picker-body[b-h9dodtq0a6] {
    height: 68vh;
    overflow-y: auto;
}

.cm-deck-picker-body[b-h9dodtq0a6]  .deck-pick-panel,
.cm-deck-picker-body[b-h9dodtq0a6]  .deck-pick-drop,
.cm-deck-picker-body[b-h9dodtq0a6]  .card-search,
.cm-deck-picker-body[b-h9dodtq0a6]  .card-search-results {
    flex: 0 0 auto;
    min-height: auto;
    height: auto;
    overflow: visible;
}
/* /Components/Cm/CmDeckTile.razor.rz.scp.css */
/* Six fixed columns rather than a wrapping flex row, so a full deck spans the tile at whatever
   width the tile happens to be, and a short deck keeps its cards the same size as a full one. */
.cm-deck-cards[b-vnnb1eg7og]  {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
/* /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);
}
/* /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;
}

/* Six columns of 80px icons need ~570px, roughly twice a phone's width. The 1fr tracks cannot
   shrink that far, so the grid used to spill past its card and clip the General column. On mobile
   the columns get a floor they can actually hold and the board scrolls inside itself, the same way
   the editor board (CmDragGridBoard) does. The icons shrink to match in CmUmaGroup.razor.css. */
@media (max-width: 900px) {
    .cm-grid[b-x8ntdz2y40] {
        grid-template-columns: 4.5rem repeat(5, minmax(3.75rem, 1fr));
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .cm-grid-cell[b-x8ntdz2y40] {
        padding: 4px;
        min-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 */
.cm-head-banner[b-371b1tkvfl] {
  height: 108px;
  width: auto;
}
/* /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;
  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;
}
/* /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-iconly .cm-uma-icon[b-xe2yz77ldb] {
    border: 1px solid var(--mud-palette-lines-default);
    transition: border-color 120ms ease;
}

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

/* 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. */
.deck-remove-overlay[b-rpv77t4n74] {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    border: 2px dashed var(--mud-palette-error);
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    color: var(--mud-palette-error);
}
/* /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 + limit-break select). */
.deck-slot-host[b-vakobslu2m] {
    position: relative;
    border-radius: 12px;
}

/* While a deck drag is in flight every slot reads as a drop target, and its inner content
   stops intercepting pointer events so dragenter/dragleave fire on the host alone (no flicker
   from crossing child boundaries). */
.deck-slot-host.deck-slot-active[b-vakobslu2m] {
    outline: 2px dashed var(--mud-palette-lines-default);
    outline-offset: 2px;
}

.deck-slot-host.deck-slot-active > *[b-vakobslu2m] {
    pointer-events: none;
}

/* The slot currently under the cursor mid-drag. */
.deck-slot-host.deck-slot-over[b-vakobslu2m] {
    outline-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

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

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

.deck-slot[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: 9% 2% 9% 9%;
    overflow: hidden;
}

.deck-slot-empty[b-vakobslu2m] {
    border: 1px dashed var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    opacity: 0.7;
}

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

.deck-slot-remove[b-vakobslu2m] {
    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-vakobslu2m] {
    opacity: 1;
}

.deck-slot-overlay[b-vakobslu2m] {
    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-vakobslu2m] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
}

.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-overlay-value[b-vakobslu2m] {
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.2;
    flex: 0 0 auto;
}
/* /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 and the limit-break dropdowns keep enough width to read "MLB". */
@media (max-width: 900px) {
    .deck-slot-grid[b-9qqa6vahog] {
        grid-template-columns: repeat(3, minmax(0, 140px));
        justify-content: center;
    }
}
/* /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;
}

/* One clickable race row, mirroring the search-result layout. */
.day-race-row[b-pn3nzvpa8r] {
    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-pn3nzvpa8r] {
        background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
        border-color: var(--mud-palette-primary) !important;
    }
}

.day-race-row--selected[b-pn3nzvpa8r] {
    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/RosterOwnershipControl.razor.rz.scp.css */
.roster-control[b-c60ex8m6r5] {
    width: 100%;
}

/* Keep the limit-break dropdown from stealing the whole row from the Owned button. */
.roster-control-lb[b-c60ex8m6r5] {
    max-width: 5.5rem;
    flex: 0 0 auto;
}

.roster-control-owned[b-c60ex8m6r5] {
    flex: 1 1 auto;
}
/* /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/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/ReferenceTile.razor.rz.scp.css */
/* Shares the skill tile look: 1px line border, rounded, surface bg, 4px accent stripe. */
.uma-ref-tile[b-mc5jbpi3oi] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 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;
}

.uma-ref-tile:hover[b-mc5jbpi3oi] {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px var(--uma-shadow-soft);
}

.uma-ref-tile-img[b-mc5jbpi3oi] {
    border-radius: 7px;
    flex: 0 0 auto;
}

.uma-ref-tile-text[b-mc5jbpi3oi] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.uma-ref-tile-eyebrow[b-mc5jbpi3oi] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.3;
    color: var(--uma-accent, var(--mud-palette-primary));
}

.uma-ref-tile-eyebrow-icon[b-mc5jbpi3oi] {
    display: block;
    flex: 0 0 auto;
    margin-bottom: 2px;
}

.uma-ref-tile-name[b-mc5jbpi3oi] {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /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: 5px;
    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%);
}
/* /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 */
/* height:100% so a card in a grid cell fills the row rather than leaving a gap under
   the shortest tile - the row height is set by whichever name/description wraps most. */
.uma-skill-card[b-q7l18koozi] {
    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) {
    .uma-skill-card:hover[b-q7l18koozi] {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px var(--uma-shadow-soft);
    }
}

/* 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 */
.skill-source-tile[b-bq2zdy4y7z] {
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.skill-source-tile:hover[b-bq2zdy4y7z] {
    border-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-action-default-hover);
}

/* The name half can shrink so a long name wraps instead of shoving the pills off the tile. */
.skill-source-tile-main[b-bq2zdy4y7z] {
    min-width: 0;
}

.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-icon-round[b-bq2zdy4y7z] {
    border-radius: 50%;
}

.skill-source-tile-name[b-bq2zdy4y7z] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.skill-source-tile-pills[b-bq2zdy4y7z] {
    flex: 0 0 auto;
}
/* /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 */
.uma-skill-tile[b-nr01z0xaig] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 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) {
    .uma-skill-tile:hover[b-nr01z0xaig] {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px var(--uma-shadow-soft);
    }
}

/* Presentational use (e.g. a dropdown item): keep the look, drop the lift and the
   click affordance so it sits flush in a list. */
.uma-skill-tile-static[b-nr01z0xaig] {
    cursor: default;
}

.uma-skill-tile-static:hover[b-nr01z0xaig] {
    transform: none;
    box-shadow: none;
}

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

/* Size variants. Medium is the default above. */
.uma-skill-tile-sm[b-nr01z0xaig] {
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
}

.uma-skill-tile-sm .uma-skill-name[b-nr01z0xaig] {
    font-size: 0.85rem;
}

.uma-skill-tile-lg[b-nr01z0xaig] {
    gap: 14px;
    padding: 16px 18px;
}

.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: 10px;
    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/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-activation__zone[b-4g7639hk1d] {
    position: absolute;
    top: 0;
    bottom: 0;
    min-width: 2px;
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
}

.track-activation__zone--uncertain[b-4g7639hk1d]::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-4g7639hk1d] {
    display: block;
    padding: 0 0.3rem;
    font-size: 0.6rem;
    line-height: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #fff;
}

.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: 9% 2% 9% 9%;
    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 deck picker (SupportCardSearch) is built to fill a bounded flex column - its results pane is
   flex: 1 1 0; min-height: 0 and scrolls. Inside a content-sized dialog that has no height to fill, so
   the whole chain collapses to zero and only the search toolbar shows. Force natural flow (the same
   thing the picker's own narrow-screen rule does) so the grid renders inline. */

/* Pin the body to a fixed height and let it scroll, so the dialog stays the same size no matter how many
   results a search returns - otherwise a filter down to a few cards would shrink the whole dialog. */
.tsim-picker-body[b-5qledklzfd] {
    height: 68vh;
    overflow-y: auto;
}

.tsim-picker-body[b-5qledklzfd]  .deck-pick-panel,
.tsim-picker-body[b-5qledklzfd]  .deck-pick-drop,
.tsim-picker-body[b-5qledklzfd]  .card-search,
.tsim-picker-body[b-5qledklzfd]  .card-search-results {
    flex: 0 0 auto;
    min-height: auto;
    height: auto;
    overflow: visible;
}
/* /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/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. */
.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;
  }
}
/* /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/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;
}