/* /Components/CharacterCreator/Step01_Session.razor.rz.scp.css */
.step-session[b-mwnrdf1vs7] {
    padding: 16px 0;
}

.step-title[b-mwnrdf1vs7] {
    color: var(--qf-text-primary, #F2F2F3);
    margin-bottom: 4px;
}

.step-subtitle[b-mwnrdf1vs7] {
    color: var(--qf-text-secondary, #ABAFB8);
    margin-bottom: 24px;
}

.session-card[b-mwnrdf1vs7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--qf-surface-2, #1A1A1A);
    border: 1px solid var(--qf-border, #2E2E2E);
    border-radius: 8px;
    padding: 16px 20px;
    gap: 16px;
}

.session-card-header[b-mwnrdf1vs7] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.session-icon[b-mwnrdf1vs7] {
    color: var(--qf-primary, #5B8DEF);
    font-size: 28px;
}

.session-code[b-mwnrdf1vs7] {
    color: var(--qf-text-primary, #F2F2F3);
    font-weight: 600;
}

.session-meta[b-mwnrdf1vs7] {
    color: var(--qf-text-secondary, #ABAFB8);
}

.session-status-chip[b-mwnrdf1vs7] {
    flex-shrink: 0;
}
/* /Components/CharacterCreator/Step02_Concept.razor.rz.scp.css */
.step-concept[b-unciw1dj8t] {
    padding: 16px 0;
}

.step-title[b-unciw1dj8t] {
    color: var(--qf-text-primary, #F2F2F3);
    margin-bottom: 4px;
}

.step-subtitle[b-unciw1dj8t] {
    color: var(--qf-text-secondary, #ABAFB8);
    margin-bottom: 24px;
}

.concept-fields[b-unciw1dj8t] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.concept-field[b-unciw1dj8t] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-label[b-unciw1dj8t] {
    color: var(--qf-text-secondary, #ABAFB8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.character-name-display[b-unciw1dj8t] {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--qf-surface-2, #1A1A1A);
    border: 1px solid var(--qf-border, #2E2E2E);
    border-radius: 6px;
    padding: 10px 14px;
}

.name-icon[b-unciw1dj8t] {
    color: var(--qf-primary, #5B8DEF);
}

.field-hint[b-unciw1dj8t] {
    color: var(--qf-text-muted, #84858C);
}
/* /Components/CharacterCreator/Step03_Race.razor.rz.scp.css */
.step-race[b-c9a1o6lxj1] {
    padding: 16px 0;
}

.step-title[b-c9a1o6lxj1] {
    color: var(--qf-text-primary, #F2F2F3);
    margin-bottom: 4px;
}

.step-subtitle[b-c9a1o6lxj1] {
    color: var(--qf-text-secondary, #ABAFB8);
    margin-bottom: 8px;
}

.step-loading[b-c9a1o6lxj1] {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}

.race-grid[b-c9a1o6lxj1] {
    max-height: 500px;
    overflow-y: auto;
}

.race-card[b-c9a1o6lxj1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: var(--qf-surface-2, #1A1A1A);
    border: 2px solid var(--qf-border, #2E2E2E);
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    transition: border-color 120ms ease-out, background-color 120ms ease-out;
    min-height: 160px;
}

.race-card:hover[b-c9a1o6lxj1] {
    border-color: var(--qf-primary, #5B8DEF);
    background-color: var(--qf-surface-3, #232323);
}

.race-card:focus-visible[b-c9a1o6lxj1] {
    outline: none;
    box-shadow: 0 0 0 3px var(--qf-focus-ring, rgba(91, 141, 239, 0.45));
}

.race-card--selected[b-c9a1o6lxj1] {
    border-color: var(--qf-primary, #5B8DEF);
    background-color: var(--qf-primary-soft-bg, rgba(91, 141, 239, 0.12));
}

.race-card-header[b-c9a1o6lxj1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.race-name[b-c9a1o6lxj1] {
    color: var(--qf-text-primary, #F2F2F3);
    font-weight: 600;
}

.race-check-icon[b-c9a1o6lxj1] {
    color: var(--qf-primary, #5B8DEF);
}

.race-description[b-c9a1o6lxj1] {
    color: var(--qf-text-secondary, #ABAFB8);
    font-size: 13px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.race-bonuses[b-c9a1o6lxj1] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.race-bonus-chip[b-c9a1o6lxj1] {
    font-size: 11px;
    background-color: var(--qf-primary-soft-bg, rgba(91, 141, 239, 0.16)) !important;
    color: var(--qf-primary, #5B8DEF) !important;
    border: 1px solid var(--qf-primary-soft-border, rgba(91, 141, 239, 0.4));
}

.race-meta[b-c9a1o6lxj1] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.race-speed[b-c9a1o6lxj1] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--qf-text-secondary, #ABAFB8);
}

.race-traits[b-c9a1o6lxj1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid var(--qf-border, #2E2E2E);
    padding-top: 8px;
    margin-top: 4px;
}

.race-trait[b-c9a1o6lxj1] {
    color: var(--qf-text-secondary, #ABAFB8);
    font-size: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.race-trait-more[b-c9a1o6lxj1] {
    color: var(--qf-text-muted, #84858C);
    font-size: 12px;
    font-style: italic;
}
/* /Components/CharacterCreator/Step04_Class.razor.rz.scp.css */
.step-class[b-jfxovur4tu] {
    padding: 16px 0;
}

.step-title[b-jfxovur4tu] {
    color: var(--qf-text-primary, #F2F2F3);
    margin-bottom: 4px;
}

.step-subtitle[b-jfxovur4tu] {
    color: var(--qf-text-secondary, #ABAFB8);
    margin-bottom: 8px;
}

.step-loading[b-jfxovur4tu] {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}

.class-grid[b-jfxovur4tu] {
    max-height: 500px;
    overflow-y: auto;
}

.class-card[b-jfxovur4tu] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: var(--qf-surface-2, #1A1A1A);
    border: 2px solid var(--qf-border, #2E2E2E);
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    transition: border-color 120ms ease-out, background-color 120ms ease-out;
    min-height: 120px;
}

.class-card:hover[b-jfxovur4tu] {
    border-color: var(--qf-primary, #5B8DEF);
    background-color: var(--qf-surface-3, #232323);
}

.class-card:focus-visible[b-jfxovur4tu] {
    outline: none;
    box-shadow: 0 0 0 3px var(--qf-focus-ring, rgba(91, 141, 239, 0.45));
}

.class-card--selected[b-jfxovur4tu] {
    border-color: var(--qf-primary, #5B8DEF);
    background-color: var(--qf-primary-soft-bg, rgba(91, 141, 239, 0.12));
}

.class-card-header[b-jfxovur4tu] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.class-name[b-jfxovur4tu] {
    color: var(--qf-text-primary, #F2F2F3);
    font-weight: 600;
}

.class-check-icon[b-jfxovur4tu] {
    color: var(--qf-primary, #5B8DEF);
}

.class-stats[b-jfxovur4tu] {
    display: flex;
    gap: 16px;
}

.class-stat[b-jfxovur4tu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.class-stat-label[b-jfxovur4tu] {
    color: var(--qf-text-muted, #84858C);
    font-size: 11px;
    text-transform: uppercase;
}

.class-stat-value[b-jfxovur4tu] {
    color: var(--qf-text-primary, #F2F2F3);
    font-size: 14px;
    font-weight: 600;
}

.class-tags[b-jfxovur4tu] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.class-tag[b-jfxovur4tu] {
    font-size: 11px;
}

.class-tag--spell[b-jfxovur4tu] {
    background-color: var(--qf-secondary, #9D7BEA) !important;
}
/* /Components/CharacterCreator/Step05_Attributes.razor.rz.scp.css */
.step-attributes[b-iiu0gq7238] {
    padding: 16px 0;
}

.step-title[b-iiu0gq7238] {
    color: var(--qf-text-primary, #F2F2F3);
    margin-bottom: 4px;
}

.step-subtitle[b-iiu0gq7238] {
    color: var(--qf-text-secondary, #ABAFB8);
    margin-bottom: 8px;
}

.class-hint[b-iiu0gq7238] {
    margin-bottom: 16px;
}

.method-radio-group[b-iiu0gq7238] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pointbuy-budget[b-iiu0gq7238] {
    background-color: var(--qf-surface-2, #1A1A1A);
    border: 1px solid var(--qf-border, #2E2E2E);
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.pointbuy-budget--over[b-iiu0gq7238] {
    border-color: var(--qf-danger, #E0566B);
    background-color: var(--qf-danger-soft-bg, rgba(224, 86, 107, 0.18));
}

.stdarray-available[b-iiu0gq7238] {
    background-color: var(--qf-surface-2, #1A1A1A);
    border: 1px solid var(--qf-border, #2E2E2E);
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.stdarray-chips[b-iiu0gq7238] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.attributes-table[b-iiu0gq7238] {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--qf-border, #2E2E2E);
    border-radius: 8px;
    overflow: hidden;
}

.attr-header-row[b-iiu0gq7238] {
    display: grid;
    grid-template-columns: 130px 1fr 64px 64px 64px;
    background-color: var(--qf-surface-3, #232323);
    padding: 8px 12px;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--qf-text-secondary, #ABAFB8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.attr-col-label[b-iiu0gq7238] { /* fills the name column */ }
.attr-col-base[b-iiu0gq7238],
.attr-col-bonus[b-iiu0gq7238],
.attr-col-total[b-iiu0gq7238],
.attr-col-mod[b-iiu0gq7238] {
    text-align: center;
}

.attr-row[b-iiu0gq7238] {
    display: grid;
    grid-template-columns: 130px 1fr 64px 64px 64px;
    padding: 10px 12px;
    gap: 8px;
    align-items: center;
    border-top: 1px solid var(--qf-border, #2E2E2E);
    background-color: var(--qf-surface, #121212);
    transition: background-color 80ms ease-out;
}

.attr-row:hover[b-iiu0gq7238] {
    background-color: var(--qf-surface-2, #1A1A1A);
}

.attr-name[b-iiu0gq7238] {
    color: var(--qf-text-primary, #F2F2F3);
    font-size: 14px;
    font-weight: 500;
}

.attr-base[b-iiu0gq7238] {
    display: flex;
    justify-content: center;
}

.pointbuy-control[b-iiu0gq7238] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.attr-btn[b-iiu0gq7238] {
    width: 28px;
    height: 28px;
    border: 1px solid var(--qf-border, #2E2E2E);
    border-radius: 4px;
    background-color: var(--qf-surface-2, #1A1A1A);
    color: var(--qf-text-primary, #F2F2F3);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 80ms ease-out;
}

.attr-btn:hover:not(:disabled)[b-iiu0gq7238] {
    background-color: var(--qf-primary-soft-bg, rgba(91, 141, 239, 0.16));
    border-color: var(--qf-primary, #5B8DEF);
}

.attr-btn:disabled[b-iiu0gq7238] {
    opacity: 0.4;
    cursor: not-allowed;
}

.attr-value[b-iiu0gq7238] {
    min-width: 28px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--qf-text-primary, #F2F2F3);
}

.attr-select[b-iiu0gq7238] {
    height: 32px;
    width: 70px;
    background-color: var(--qf-surface-2, #1A1A1A);
    border: 1px solid var(--qf-border, #2E2E2E);
    border-radius: 4px;
    color: var(--qf-text-primary, #F2F2F3);
    font-size: 14px;
    padding: 0 8px;
    cursor: pointer;
}

.attr-select:focus[b-iiu0gq7238] {
    outline: none;
    border-color: var(--qf-primary, #5B8DEF);
    box-shadow: 0 0 0 2px var(--qf-focus-ring, rgba(91, 141, 239, 0.45));
}

.attr-input[b-iiu0gq7238] {
    width: 64px;
    height: 32px;
    background-color: var(--qf-surface-2, #1A1A1A);
    border: 1px solid var(--qf-border, #2E2E2E);
    border-radius: 4px;
    color: var(--qf-text-primary, #F2F2F3);
    font-size: 14px;
    text-align: center;
    padding: 0 4px;
}

.attr-input:focus[b-iiu0gq7238] {
    outline: none;
    border-color: var(--qf-primary, #5B8DEF);
    box-shadow: 0 0 0 2px var(--qf-focus-ring, rgba(91, 141, 239, 0.45));
}

.attr-bonus[b-iiu0gq7238] {
    text-align: center;
    font-size: 13px;
    color: var(--qf-text-muted, #84858C);
}

.attr-bonus--positive[b-iiu0gq7238] {
    color: var(--qf-success-text, #6FE3A4);
    font-weight: 600;
}

.attr-total[b-iiu0gq7238] {
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--qf-text-primary, #F2F2F3);
}

.attr-total--high[b-iiu0gq7238] {
    color: var(--qf-success-text, #6FE3A4);
}

.attr-total--low[b-iiu0gq7238] {
    color: var(--qf-danger-text, #F2879A);
}

.attr-mod[b-iiu0gq7238] {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
}

.attr-mod--positive[b-iiu0gq7238] {
    color: var(--qf-success-text, #6FE3A4);
}

.attr-mod--negative[b-iiu0gq7238] {
    color: var(--qf-danger-text, #F2879A);
}
/* /Components/CharacterCreator/Step06_Background.razor.rz.scp.css */
.step-background[b-vyubokie0q] {
    padding: 16px 0;
}

.step-title[b-vyubokie0q] {
    color: var(--qf-text-primary, #F2F2F3);
    margin-bottom: 4px;
}

.step-subtitle[b-vyubokie0q] {
    color: var(--qf-text-secondary, #ABAFB8);
    margin-bottom: 8px;
}

.step-loading[b-vyubokie0q] {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}

.background-grid[b-vyubokie0q] {
    max-height: 520px;
    overflow-y: auto;
}

.bg-card[b-vyubokie0q] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: var(--qf-surface-2, #1A1A1A);
    border: 2px solid var(--qf-border, #2E2E2E);
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    transition: border-color 120ms ease-out, background-color 120ms ease-out;
    min-height: 100px;
}

.bg-card:hover[b-vyubokie0q] {
    border-color: var(--qf-primary, #5B8DEF);
    background-color: var(--qf-surface-3, #232323);
}

.bg-card:focus-visible[b-vyubokie0q] {
    outline: none;
    box-shadow: 0 0 0 3px var(--qf-focus-ring, rgba(91, 141, 239, 0.45));
}

.bg-card--selected[b-vyubokie0q] {
    border-color: var(--qf-primary, #5B8DEF);
    background-color: var(--qf-primary-soft-bg, rgba(91, 141, 239, 0.12));
}

.bg-card-header[b-vyubokie0q] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.bg-name[b-vyubokie0q] {
    color: var(--qf-text-primary, #F2F2F3);
    font-weight: 600;
}

.bg-check-icon[b-vyubokie0q] {
    color: var(--qf-primary, #5B8DEF);
    flex-shrink: 0;
}

.bg-description[b-vyubokie0q] {
    color: var(--qf-text-secondary, #ABAFB8);
    font-size: 13px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bg-card--selected .bg-description[b-vyubokie0q] {
    -webkit-line-clamp: unset;
    overflow: visible;
}

.bg-details[b-vyubokie0q] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid var(--qf-border, #2E2E2E);
    padding-top: 12px;
}

.bg-detail-section[b-vyubokie0q] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bg-detail-label[b-vyubokie0q] {
    color: var(--qf-text-muted, #84858C);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.bg-detail-value[b-vyubokie0q] {
    color: var(--qf-text-secondary, #ABAFB8);
    font-size: 13px;
}

.bg-chips[b-vyubokie0q] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.bg-skill-chip[b-vyubokie0q] {
    font-size: 11px;
    background-color: var(--qf-primary-soft-bg, rgba(91, 141, 239, 0.16)) !important;
    color: var(--qf-primary, #5B8DEF) !important;
    border: 1px solid var(--qf-primary-soft-border, rgba(91, 141, 239, 0.4));
}

.bg-equipment-list[b-vyubokie0q] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bg-equipment-item[b-vyubokie0q] {
    color: var(--qf-text-secondary, #ABAFB8);
    font-size: 12px;
    line-height: 1.5;
}
/* /Components/CharacterCreator/Step07_Skills.razor.rz.scp.css */
.step-skills[b-2dc0lfbaru] {
    padding: 16px 0;
}

.step-title[b-2dc0lfbaru] {
    color: var(--qf-text-primary, #F2F2F3);
    margin-bottom: 4px;
}

.step-subtitle[b-2dc0lfbaru] {
    color: var(--qf-text-secondary, #ABAFB8);
    margin-bottom: 8px;
}

.step-loading[b-2dc0lfbaru] {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}

.skills-counter[b-2dc0lfbaru] {
    background-color: var(--qf-surface-2, #1A1A1A);
    border: 1px solid var(--qf-border, #2E2E2E);
    border-radius: 6px;
    padding: 12px 16px;
    margin-top: 12px;
}

.skills-counter--done[b-2dc0lfbaru] {
    border-color: var(--qf-success-text, #6FE3A4);
    background-color: rgba(111, 227, 164, 0.08);
}

.skills-counter--over[b-2dc0lfbaru] {
    border-color: var(--qf-danger, #E0566B);
    background-color: var(--qf-danger-soft-bg, rgba(224, 86, 107, 0.18));
}

.skills-progress[b-2dc0lfbaru] {
    max-width: 300px;
}

.skills-list[b-2dc0lfbaru] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--qf-border, #2E2E2E);
    border-radius: 8px;
}

.skill-row[b-2dc0lfbaru] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: var(--qf-surface, #121212);
    border-bottom: 1px solid var(--qf-border, #2E2E2E);
    transition: background-color 80ms ease-out;
    cursor: pointer;
}

.skill-row:last-child[b-2dc0lfbaru] {
    border-bottom: none;
}

.skill-row:hover[b-2dc0lfbaru] {
    background-color: var(--qf-surface-2, #1A1A1A);
}

.skill-row--locked[b-2dc0lfbaru] {
    background-color: var(--qf-primary-soft-bg, rgba(91, 141, 239, 0.08));
    cursor: default;
}

.skill-row--locked:hover[b-2dc0lfbaru] {
    background-color: var(--qf-primary-soft-bg, rgba(91, 141, 239, 0.08));
}

.skill-row--checked:not(.skill-row--locked)[b-2dc0lfbaru] {
    background-color: var(--qf-surface-2, #1A1A1A);
}

.skill-checkbox[b-2dc0lfbaru] {
    flex-shrink: 0;
}

.skill-row[b-2dc0lfbaru]  .mud-tooltip-root {
    flex: 1;
    min-width: 0;
}

.skill-info[b-2dc0lfbaru] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.skill-name[b-2dc0lfbaru] {
    color: var(--qf-text-primary, #F2F2F3);
    font-size: 14px;
    font-weight: 500;
}

.skill-ability[b-2dc0lfbaru] {
    color: var(--qf-text-muted, #84858C);
    font-size: 11px;
}

.skill-bg-chip[b-2dc0lfbaru] {
    font-size: 11px;
    background-color: var(--qf-primary-soft-bg, rgba(91, 141, 239, 0.16)) !important;
    color: var(--qf-primary, #5B8DEF) !important;
    border: 1px solid var(--qf-primary-soft-border, rgba(91, 141, 239, 0.4));
    flex-shrink: 0;
}
/* /Components/CharacterCreator/Step08_Equipment.razor.rz.scp.css */
.step-equipment[b-fketa6ap3l] {
    padding: 16px 0;
}

.step-title[b-fketa6ap3l] {
    color: var(--qf-text-primary, #F2F2F3);
    margin-bottom: 4px;
}

.step-subtitle[b-fketa6ap3l] {
    color: var(--qf-text-secondary, #ABAFB8);
    margin-bottom: 8px;
}

.step-loading[b-fketa6ap3l] {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}

.equipment-grid[b-fketa6ap3l] {
    max-height: 420px;
    overflow-y: auto;
}

.equip-card[b-fketa6ap3l] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: var(--qf-surface-2, #1A1A1A);
    border: 2px solid var(--qf-border, #2E2E2E);
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    transition: border-color 120ms ease-out, background-color 120ms ease-out;
    min-height: 100px;
}

.equip-card:hover[b-fketa6ap3l] {
    border-color: var(--qf-primary, #5B8DEF);
    background-color: var(--qf-surface-3, #232323);
}

.equip-card:focus-visible[b-fketa6ap3l] {
    outline: none;
    box-shadow: 0 0 0 3px var(--qf-focus-ring, rgba(91, 141, 239, 0.45));
}

.equip-card--selected[b-fketa6ap3l] {
    border-color: var(--qf-primary, #5B8DEF);
    background-color: var(--qf-primary-soft-bg, rgba(91, 141, 239, 0.12));
}

.equip-card-header[b-fketa6ap3l] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.equip-option-label[b-fketa6ap3l] {
    color: var(--qf-text-primary, #F2F2F3);
    font-weight: 600;
}

.equip-check-icon[b-fketa6ap3l] {
    color: var(--qf-primary, #5B8DEF);
    flex-shrink: 0;
}

.equip-items-list[b-fketa6ap3l] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.equip-item[b-fketa6ap3l] {
    color: var(--qf-text-secondary, #ABAFB8);
    font-size: 12px;
    line-height: 1.5;
}

.bg-equipment-summary[b-fketa6ap3l] {
    background-color: var(--qf-surface-2, #1A1A1A);
    border: 1px solid var(--qf-border, #2E2E2E);
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bg-equipment-title[b-fketa6ap3l] {
    display: flex;
    align-items: center;
    color: var(--qf-text-primary, #F2F2F3);
    font-size: 13px;
    font-weight: 600;
}

.bg-equipment-items[b-fketa6ap3l] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bg-equipment-item[b-fketa6ap3l] {
    color: var(--qf-text-secondary, #ABAFB8);
    font-size: 12px;
    line-height: 1.5;
}
/* /Components/CharacterCreator/Step09_Spells.razor.rz.scp.css */
.step-spells[b-ye3obefbd0] {
    padding: 16px 0;
}

.step-title[b-ye3obefbd0] {
    color: var(--qf-text-primary, #F2F2F3);
    margin-bottom: 4px;
}

.step-subtitle[b-ye3obefbd0] {
    color: var(--qf-text-secondary, #ABAFB8);
    margin-bottom: 8px;
}

.step-loading[b-ye3obefbd0] {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}

.spell-hint[b-ye3obefbd0] {
    border-left: 3px solid var(--qf-primary, #5B8DEF);
}

.spells-section[b-ye3obefbd0] {
    margin-bottom: 8px;
}

.spells-section-header[b-ye3obefbd0] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.spells-section-title[b-ye3obefbd0] {
    color: var(--qf-text-primary, #F2F2F3);
    font-weight: 600;
}

.spells-counter[b-ye3obefbd0] {
    font-size: 12px;
}

.spell-grid[b-ye3obefbd0] {
    max-height: 420px;
    overflow-y: auto;
}

.spell-card[b-ye3obefbd0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background-color: var(--qf-surface-2, #1A1A1A);
    border: 2px solid var(--qf-border, #2E2E2E);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: border-color 120ms ease-out, background-color 120ms ease-out;
    min-height: 100px;
}

.spell-card:hover:not(.spell-card--disabled)[b-ye3obefbd0] {
    border-color: var(--qf-primary, #5B8DEF);
    background-color: var(--qf-surface-3, #232323);
}

.spell-card:focus-visible[b-ye3obefbd0] {
    outline: none;
    box-shadow: 0 0 0 3px var(--qf-focus-ring, rgba(91, 141, 239, 0.45));
}

.spell-card--selected[b-ye3obefbd0] {
    border-color: var(--qf-primary, #5B8DEF);
    background-color: var(--qf-primary-soft-bg, rgba(91, 141, 239, 0.12));
}

.spell-card--disabled[b-ye3obefbd0] {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

.spell-card-header[b-ye3obefbd0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.spell-name[b-ye3obefbd0] {
    color: var(--qf-text-primary, #F2F2F3);
    font-weight: 600;
    font-size: 13px;
}

.spell-check-icon[b-ye3obefbd0] {
    color: var(--qf-primary, #5B8DEF);
    flex-shrink: 0;
}

.spell-tags[b-ye3obefbd0] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.spell-school-chip[b-ye3obefbd0] {
    font-size: 10px;
    background-color: var(--qf-surface-3, #232323) !important;
    color: var(--qf-text-secondary, #ABAFB8) !important;
    border: 1px solid var(--qf-border, #2E2E2E);
}

.spell-meta-detail[b-ye3obefbd0] {
    color: var(--qf-text-muted, #84858C);
    font-size: 11px;
}

.spell-summary[b-ye3obefbd0] {
    color: var(--qf-text-secondary, #ABAFB8);
    font-size: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* /Components/CharacterCreator/Step10_Subclass.razor.rz.scp.css */
.step-subclass[b-j3ekked0sg] {
    padding: 16px 0;
}

.step-title[b-j3ekked0sg] {
    color: var(--qf-text-primary, #F2F2F3);
    margin-bottom: 4px;
}

.step-subtitle[b-j3ekked0sg] {
    color: var(--qf-text-secondary, #ABAFB8);
    margin-bottom: 8px;
}

.step-loading[b-j3ekked0sg] {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}

.subclass-grid[b-j3ekked0sg] {
    max-height: 500px;
    overflow-y: auto;
}

.subclass-card[b-j3ekked0sg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: var(--qf-surface-2, #1A1A1A);
    border: 2px solid var(--qf-border, #2E2E2E);
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    transition: border-color 120ms ease-out, background-color 120ms ease-out;
    min-height: 140px;
}

.subclass-card:hover[b-j3ekked0sg] {
    border-color: var(--qf-primary, #5B8DEF);
    background-color: var(--qf-surface-3, #232323);
}

.subclass-card:focus-visible[b-j3ekked0sg] {
    outline: none;
    box-shadow: 0 0 0 3px var(--qf-focus-ring, rgba(91, 141, 239, 0.45));
}

.subclass-card--selected[b-j3ekked0sg] {
    border-color: var(--qf-primary, #5B8DEF);
    background-color: var(--qf-primary-soft-bg, rgba(91, 141, 239, 0.12));
}

.subclass-card-header[b-j3ekked0sg] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.subclass-name[b-j3ekked0sg] {
    color: var(--qf-text-primary, #F2F2F3);
    font-weight: 600;
}

.subclass-check-icon[b-j3ekked0sg] {
    color: var(--qf-primary, #5B8DEF);
    flex-shrink: 0;
}

.subclass-description[b-j3ekked0sg] {
    color: var(--qf-text-secondary, #ABAFB8);
    font-size: 13px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.subclass-feature[b-j3ekked0sg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid var(--qf-border, #2E2E2E);
    padding-top: 8px;
    margin-top: 4px;
}

.subclass-feature-label[b-j3ekked0sg] {
    color: var(--qf-text-muted, #84858C);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.subclass-feature-text[b-j3ekked0sg] {
    color: var(--qf-text-secondary, #ABAFB8);
    font-size: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* /Components/CharacterCreator/Step11_Summary.razor.rz.scp.css */
.step-summary[b-0mdqsg28zs] {
    padding: 16px 0;
}

.step-title[b-0mdqsg28zs] {
    color: var(--qf-text-primary, #F2F2F3);
    margin-bottom: 4px;
}

.step-subtitle[b-0mdqsg28zs] {
    color: var(--qf-text-secondary, #ABAFB8);
    margin-bottom: 16px;
}

.summary-sections[b-0mdqsg28zs] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 8px;
}

.summary-section[b-0mdqsg28zs] {
    background-color: var(--qf-surface-2, #1A1A1A);
    border: 1px solid var(--qf-border, #2E2E2E);
    border-radius: 8px;
    padding: 14px 16px;
}

.summary-section-title[b-0mdqsg28zs] {
    color: var(--qf-text-primary, #F2F2F3);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.summary-grid[b-0mdqsg28zs] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.summary-row[b-0mdqsg28zs] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--qf-border, #2E2E2E);
}

.summary-row:last-child[b-0mdqsg28zs] {
    border-bottom: none;
}

.summary-label[b-0mdqsg28zs] {
    color: var(--qf-text-muted, #84858C);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.summary-value[b-0mdqsg28zs] {
    color: var(--qf-text-primary, #F2F2F3);
    font-size: 14px;
    text-align: right;
}

.summary-attributes[b-0mdqsg28zs] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.attr-summary-row[b-0mdqsg28zs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--qf-surface-3, #232323);
    border: 1px solid var(--qf-border, #2E2E2E);
    border-radius: 6px;
    padding: 8px 4px;
    gap: 2px;
}

.attr-summary-name[b-0mdqsg28zs] {
    color: var(--qf-text-muted, #84858C);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.attr-summary-value[b-0mdqsg28zs] {
    color: var(--qf-text-primary, #F2F2F3);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.attr-summary-mod[b-0mdqsg28zs] {
    font-size: 12px;
    font-weight: 600;
}

.attr-mod--positive[b-0mdqsg28zs] {
    color: var(--qf-primary, #5B8DEF);
}

.attr-mod--negative[b-0mdqsg28zs] {
    color: var(--qf-error, #F44336);
}

.summary-actions[b-0mdqsg28zs] {
    display: flex;
    justify-content: flex-end;
}
/* /Components/CharacterCreator/Step12_ClassFeatures.razor.rz.scp.css */
.step-features[b-enpf91ymop] {
    padding: 16px 0;
}

.step-title[b-enpf91ymop] {
    color: var(--qf-text-primary, #F2F2F3);
    margin-bottom: 4px;
}

.step-subtitle[b-enpf91ymop] {
    color: var(--qf-text-secondary, #ABAFB8);
    margin-bottom: 8px;
}

.step-loading[b-enpf91ymop] {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}

.features-section[b-enpf91ymop] {
    margin-bottom: 8px;
}

.features-section-header[b-enpf91ymop] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.features-section-title[b-enpf91ymop] {
    color: var(--qf-text-primary, #F2F2F3);
    font-weight: 600;
}

.features-counter[b-enpf91ymop] {
    font-size: 12px;
}

.feature-grid[b-enpf91ymop] {
    max-height: 420px;
    overflow-y: auto;
}

.feature-card[b-enpf91ymop] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background-color: var(--qf-surface-2, #1A1A1A);
    border: 2px solid var(--qf-border, #2E2E2E);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: border-color 120ms ease-out, background-color 120ms ease-out;
    min-height: 100px;
}

.feature-card:hover:not(.feature-card--disabled):not(.feature-card--granted)[b-enpf91ymop] {
    border-color: var(--qf-primary, #5B8DEF);
    background-color: var(--qf-surface-3, #232323);
}

.feature-card:focus-visible[b-enpf91ymop] {
    outline: none;
    box-shadow: 0 0 0 3px var(--qf-focus-ring, rgba(91, 141, 239, 0.45));
}

.feature-card--selected[b-enpf91ymop] {
    border-color: var(--qf-primary, #5B8DEF);
    background-color: var(--qf-primary-soft-bg, rgba(91, 141, 239, 0.12));
}

.feature-card--granted[b-enpf91ymop] {
    cursor: default;
    border-color: var(--qf-primary, #5B8DEF);
    background-color: var(--qf-primary-soft-bg, rgba(91, 141, 239, 0.12));
}

.feature-card--disabled[b-enpf91ymop] {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

.feature-card-header[b-enpf91ymop] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.feature-name[b-enpf91ymop] {
    color: var(--qf-text-primary, #F2F2F3);
    font-weight: 600;
    font-size: 13px;
}

.feature-check-icon[b-enpf91ymop] {
    color: var(--qf-primary, #5B8DEF);
    flex-shrink: 0;
}

.feature-granted-chip[b-enpf91ymop] {
    font-size: 10px;
    flex-shrink: 0;
}

.feature-tags[b-enpf91ymop] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.feature-type-chip[b-enpf91ymop] {
    font-size: 10px;
    background-color: var(--qf-surface-3, #232323) !important;
    color: var(--qf-text-secondary, #ABAFB8) !important;
    border: 1px solid var(--qf-border, #2E2E2E);
}

.feature-meta-detail[b-enpf91ymop] {
    color: var(--qf-text-muted, #84858C);
    font-size: 11px;
}

.feature-summary[b-enpf91ymop] {
    color: var(--qf-text-secondary, #ABAFB8);
    font-size: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
[b-0d0wdh6zc0] .mud-appbar {
    border-bottom: 1px solid var(--qf-primary-soft-border, rgba(91, 35, 255, 0.25));
}

/* O estilo do wordmark .appbar-title vive no CSS global (wwwroot/app.css): o <MudText> que o
   carrega e um componente filho, entao um ::deep aqui nao teria ancestral escopado para casar. */

#blazor-error-ui[b-0d0wdh6zc0] {
    color-scheme: dark;
    background: #2B2107;
    border-top: 1px solid var(--qf-warning, #E0A93E);
    color: var(--qf-warning-text, #F0C975);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui a.reload[b-0d0wdh6zc0] {
        color: var(--qf-primary, #5B8DEF);
        font-weight: 600;
    }

    #blazor-error-ui .dismiss[b-0d0wdh6zc0] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-r2b4opd7e1],
.components-reconnect-repeated-attempt-visible[b-r2b4opd7e1],
.components-reconnect-failed-visible[b-r2b4opd7e1],
.components-pause-visible[b-r2b4opd7e1],
.components-resume-failed-visible[b-r2b4opd7e1],
.components-rejoining-animation[b-r2b4opd7e1] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-r2b4opd7e1],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-r2b4opd7e1],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-r2b4opd7e1],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-r2b4opd7e1],
#components-reconnect-modal.components-reconnect-retrying[b-r2b4opd7e1],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-r2b4opd7e1],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-r2b4opd7e1],
#components-reconnect-modal.components-reconnect-failed[b-r2b4opd7e1],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-r2b4opd7e1] {
    display: block;
}


#components-reconnect-modal[b-r2b4opd7e1] {
    background-color: var(--qf-surface, #121212);
    color: var(--qf-text-primary, #F2F2F3);
    border: 1px solid var(--qf-border, #2E2E2E);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-r2b4opd7e1 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-r2b4opd7e1 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-r2b4opd7e1 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-r2b4opd7e1]::backdrop {
    background-color: rgba(0, 0, 0, 0.75);
    animation: components-reconnect-modal-fadeInOpacity-b-r2b4opd7e1 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-r2b4opd7e1 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-r2b4opd7e1 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-r2b4opd7e1 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-r2b4opd7e1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-r2b4opd7e1] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-r2b4opd7e1] {
    border: 0;
    background-color: var(--qf-primary-strong, #2F5FD4);
    color: var(--qf-primary-contrast, #FFFFFF);
    padding: 4px 24px;
    border-radius: 4px;
    cursor: pointer;
}

    #components-reconnect-modal button:hover[b-r2b4opd7e1] {
        background-color: var(--qf-primary-hover, #3D6EE0);
    }

    #components-reconnect-modal button:active[b-r2b4opd7e1] {
        background-color: var(--qf-primary-strong, #2F5FD4);
    }

.components-rejoining-animation[b-r2b4opd7e1] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-r2b4opd7e1] {
        position: absolute;
        border: 3px solid var(--qf-primary, #5B8DEF);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-r2b4opd7e1 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-r2b4opd7e1] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-r2b4opd7e1 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/CharacterCreator.razor.rz.scp.css */
.wizard-page[b-5x3bakad2l] {
    min-height: 100vh;
    background-color: var(--qf-bg, #000000);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wizard-loading[b-5x3bakad2l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 16px;
}

.wizard-loading-label[b-5x3bakad2l] {
    color: var(--qf-text-secondary, #ABAFB8);
}

.wizard-error-container[b-5x3bakad2l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 48px;
}

.wizard-layout[b-5x3bakad2l] {
    width: 100%;
    max-width: 900px;
}

[b-5x3bakad2l] .wizard-stepper {
    background-color: var(--qf-surface, #121212);
    border: 1px solid var(--qf-border, #2E2E2E);
    border-radius: 8px;
}

.wizard-actions[b-5x3bakad2l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px 0 0;
}

.wizard-placeholder[b-5x3bakad2l] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 24px;
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
.dashboard-page[b-5apvuhmkmo] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: var(--qf-bg, #000000);
    padding: 16px;
}

.dashboard-card[b-5apvuhmkmo] {
    background-color: var(--qf-rpg-parchment);
    border: 1px solid var(--qf-rpg-gold-dim);
    box-shadow: inset 0 1px 0 rgba(201, 168, 76, 0.08);
    border-radius: 8px;
    padding: 32px;
    width: 100%;
    max-width: 420px;
    text-align: center;
}

.dashboard-title[b-5apvuhmkmo] {
    font-family: var(--qf-rpg-font-heading);
    font-size: 32px;
    font-weight: 700;
    color: var(--qf-text-primary, #F2F2F3);
    margin: 0 0 8px;
}

.dashboard-subtitle[b-5apvuhmkmo] {
    font-size: 14px;
    color: var(--qf-text-secondary, #ABAFB8);
    margin: 0 0 24px;
}

.dashboard-error[b-5apvuhmkmo] {
    color: var(--qf-danger-text, #F2879A);
    font-size: 12px;
    margin: 16px 0 0;
}

.btn-primary[b-5apvuhmkmo] {
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 6px;
    background-color: var(--qf-primary-strong, #2F5FD4);
    color: var(--qf-primary-contrast, #FFFFFF);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms ease-out;
}

.btn-primary:hover:not(:disabled)[b-5apvuhmkmo] {
    background-color: var(--qf-primary-hover, #3D6EE0);
}

.btn-primary:focus-visible[b-5apvuhmkmo] {
    outline: none;
    box-shadow: 0 0 0 3px var(--qf-focus-ring, rgba(91, 141, 239, 0.45));
}

.btn-primary:disabled[b-5apvuhmkmo] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dashboard-session-code[b-5apvuhmkmo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
}

.dashboard-session-code-label[b-5apvuhmkmo] {
    font-size: 12px;
    color: var(--qf-text-secondary, #ABAFB8);
    text-transform: uppercase;
}

.dashboard-session-code-value[b-5apvuhmkmo] {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--qf-primary, #5B8DEF);
    background-color: var(--qf-primary-soft-bg, rgba(91, 141, 239, 0.16));
    border: 1px solid var(--qf-primary-soft-border, rgba(91, 141, 239, 0.4));
    border-radius: 999px;
    padding: 8px 24px;
}

.dashboard-share-hint[b-5apvuhmkmo] {
    font-size: 14px;
    color: var(--qf-text-secondary, #ABAFB8);
    margin: 0 0 24px;
}

.dashboard-rejoin[b-5apvuhmkmo] {
    margin-top: 24px;
    text-align: left;
}

.dashboard-rejoin-divider[b-5apvuhmkmo] {
    display: block;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--qf-text-secondary, #ABAFB8);
    margin-bottom: 16px;
}

.form-group[b-5apvuhmkmo] {
    margin-bottom: 16px;
}

.form-group label[b-5apvuhmkmo] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--qf-text-primary, #F2F2F3);
    margin-bottom: 8px;
}

.form-control[b-5apvuhmkmo] {
    width: 100%;
    height: 44px;
    border: 1px solid var(--qf-border, #2E2E2E);
    border-radius: 6px;
    padding: 0 12px;
    font-size: 16px;
    background-color: var(--qf-surface-2, #1A1A1A);
    color: var(--qf-text-primary, #F2F2F3);
    box-sizing: border-box;
}

.form-control:focus-visible[b-5apvuhmkmo] {
    outline: none;
    box-shadow: 0 0 0 3px var(--qf-focus-ring, rgba(91, 141, 239, 0.45));
}

.btn-secondary[b-5apvuhmkmo] {
    width: 100%;
    height: 44px;
    border: 1px solid var(--qf-primary, #5B8DEF);
    border-radius: 6px;
    background-color: transparent;
    color: var(--qf-primary, #5B8DEF);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms ease-out;
}

.btn-secondary:hover:not(:disabled)[b-5apvuhmkmo] {
    background-color: var(--qf-primary-soft-bg, rgba(91, 141, 239, 0.16));
}

.btn-secondary:focus-visible[b-5apvuhmkmo] {
    outline: none;
    box-shadow: 0 0 0 3px var(--qf-focus-ring, rgba(91, 141, 239, 0.45));
}

.btn-secondary:disabled[b-5apvuhmkmo] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Pages/Entrada.razor.rz.scp.css */
.entrada-page[b-d5y5r49qdw] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: var(--qf-bg, #000000);
    padding: 16px;
}

.entrada-card[b-d5y5r49qdw] {
    background-color: var(--qf-rpg-parchment);
    border: 1px solid var(--qf-rpg-gold-dim);
    box-shadow: inset 0 1px 0 rgba(201, 168, 76, 0.08);
    border-radius: 8px;
    padding: 32px;
    width: 100%;
    max-width: 420px;
}

.entrada-title[b-d5y5r49qdw] {
    font-family: var(--qf-rpg-font-heading);
    font-size: 32px;
    font-weight: 700;
    color: var(--qf-text-primary, #F2F2F3);
    margin: 0 0 8px;
}

.entrada-subtitle[b-d5y5r49qdw] {
    font-size: 14px;
    color: var(--qf-text-secondary, #ABAFB8);
    margin: 0 0 24px;
}

.form-group[b-d5y5r49qdw] {
    margin-bottom: 16px;
}

.form-group label[b-d5y5r49qdw] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--qf-text-primary, #F2F2F3);
    margin-bottom: 8px;
}

.form-control[b-d5y5r49qdw] {
    width: 100%;
    height: 44px;
    border: 1px solid var(--qf-border, #2E2E2E);
    border-radius: 6px;
    padding: 0 12px;
    font-size: 16px;
    background-color: var(--qf-surface-2, #1A1A1A);
    color: var(--qf-text-primary, #F2F2F3);
    box-sizing: border-box;
}

.form-control:focus-visible[b-d5y5r49qdw] {
    outline: none;
    box-shadow: 0 0 0 3px var(--qf-focus-ring, rgba(91, 141, 239, 0.45));
}

.entrada-error[b-d5y5r49qdw] {
    color: var(--qf-danger-text, #F2879A);
    font-size: 12px;
    margin: 0 0 16px;
}

.btn-primary[b-d5y5r49qdw] {
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 6px;
    background-color: var(--qf-primary-strong, #2F5FD4);
    color: var(--qf-primary-contrast, #FFFFFF);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms ease-out;
}

.btn-primary:hover:not(:disabled)[b-d5y5r49qdw] {
    background-color: var(--qf-primary-hover, #3D6EE0);
}

.btn-primary:focus-visible[b-d5y5r49qdw] {
    outline: none;
    box-shadow: 0 0 0 3px var(--qf-focus-ring, rgba(91, 141, 239, 0.45));
}

.btn-primary:disabled[b-d5y5r49qdw] {
    opacity: 0.5;
    cursor: not-allowed;
}

.entrada-master-link[b-d5y5r49qdw] {
    margin-top: 24px;
    text-align: center;
    font-size: 14px;
    color: var(--qf-text-secondary, #ABAFB8);
}

.entrada-master-link a[b-d5y5r49qdw] {
    color: var(--qf-primary, #5B8DEF);
    font-weight: 600;
    margin-left: 4px;
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* ==========================================================================
   Tela de login — "noite arcana" (tema Quest Forge: fundo roxo-quase-preto,
   vidro roxo, acento primario #5b23ff e destaque lima #e4ff30). SSR estatica:
   apenas CSS, sem JS/componentes interativos (ver cabecalho de Login.razor).
   Todas as animacoes sao composite-only (opacity/transform) e desligadas por
   prefers-reduced-motion no fim do arquivo.
   ========================================================================== */

.login-page[b-fpjz62049e] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 50% -10%, var(--qf-surface-3, #241f3a) 0%, var(--qf-bg-alt, #151226) 45%, var(--qf-bg, #0f0d1a) 100%);
}

/* --------------------------------------------------------------------------
   Camada de ambiente: dois orbes de brilho (roxo + lima) que respiram atras
   do cartao, mais uma malha sutil que da profundidade. Puramente decorativa.
   -------------------------------------------------------------------------- */
.login-ambient[b-fpjz62049e] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.login-orb[b-fpjz62049e] {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.55;
    will-change: transform, opacity;
}

.login-orb--primary[b-fpjz62049e] {
    width: 460px;
    height: 460px;
    top: -140px;
    left: -120px;
    background: radial-gradient(circle, rgba(91, 35, 255, 0.65) 0%, rgba(91, 35, 255, 0) 70%);
    animation: login-drift-a-b-fpjz62049e 16s ease-in-out infinite;
}

.login-orb--accent[b-fpjz62049e] {
    width: 380px;
    height: 380px;
    bottom: -120px;
    right: -100px;
    background: radial-gradient(circle, rgba(228, 255, 48, 0.24) 0%, rgba(228, 255, 48, 0) 70%);
    animation: login-drift-b-b-fpjz62049e 20s ease-in-out infinite;
}

.login-grid[b-fpjz62049e] {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(177, 138, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(177, 138, 255, 0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 80%);
    mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 80%);
    opacity: 0.6;
}

@keyframes login-drift-a-b-fpjz62049e {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    50%      { transform: translate(40px, 30px) scale(1.08); opacity: 0.7; }
}

@keyframes login-drift-b-b-fpjz62049e {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.45; }
    50%      { transform: translate(-36px, -28px) scale(1.12); opacity: 0.65; }
}

/* --------------------------------------------------------------------------
   Cartao de vidro roxo.
   -------------------------------------------------------------------------- */
.login-card[b-fpjz62049e] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 424px;
    padding: 40px 36px 28px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 40%),
        var(--qf-cine-glass-bg, rgba(26, 22, 42, 0.88));
    border: 1px solid var(--qf-border-strong, #3a2f63);
    box-shadow:
        0 30px 70px -20px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(91, 35, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    animation: login-card-in-b-fpjz62049e 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Fio de luz lima que corre no topo do cartao. */
.login-card[b-fpjz62049e]::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 22px;
    right: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--qf-accent, #e4ff30), transparent);
    opacity: 0.6;
}

@keyframes login-card-in-b-fpjz62049e {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --------------------------------------------------------------------------
   Marca (brasao + wordmark).
   -------------------------------------------------------------------------- */
.login-brand[b-fpjz62049e] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.login-crest[b-fpjz62049e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    color: var(--qf-accent-bright, #f0ffa3);
    background:
        linear-gradient(160deg, rgba(91, 35, 255, 0.35), rgba(91, 35, 255, 0.08));
    border: 1px solid var(--qf-primary-soft-border, rgba(91, 35, 255, 0.4));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 24px rgba(91, 35, 255, 0.35);
}

.login-brand-text[b-fpjz62049e] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.login-title[b-fpjz62049e] {
    font-family: var(--qf-rpg-font-heading, "Cinzel", serif);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.02em;
    color: var(--qf-text-primary, #edecf5);
    margin: 0;
}

.login-eyebrow[b-fpjz62049e] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--qf-accent, #e4ff30);
}

.login-subtitle[b-fpjz62049e] {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--qf-text-secondary, #b1adc6);
    margin: 0 0 26px;
}

/* --------------------------------------------------------------------------
   Erro.
   -------------------------------------------------------------------------- */
.login-error[b-fpjz62049e] {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--qf-danger-text, #f2879a);
    background-color: var(--qf-danger-soft-bg, rgba(224, 86, 107, 0.18));
    border: 1px solid var(--qf-danger, #e0566b);
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 13px;
    line-height: 1.4;
    margin: 0 0 20px;
    animation: login-card-in-b-fpjz62049e 0.35s ease-out both;
}

.login-error svg[b-fpjz62049e] {
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Formulario.
   -------------------------------------------------------------------------- */
.login-form[b-fpjz62049e] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-group[b-fpjz62049e] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label[b-fpjz62049e] {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--qf-text-secondary, #b1adc6);
}

.field[b-fpjz62049e] {
    position: relative;
    display: flex;
    align-items: center;
}

.field-icon[b-fpjz62049e] {
    position: absolute;
    left: 14px;
    display: inline-flex;
    align-items: center;
    color: var(--qf-text-muted, #8d88a6);
    pointer-events: none;
    transition: color 140ms ease-out;
}

.form-control[b-fpjz62049e] {
    width: 100%;
    height: 50px;
    border: 1px solid var(--qf-border, #2a2247);
    border-radius: 12px;
    padding: 0 14px 0 44px;
    font-size: 15px;
    background-color: var(--qf-surface-2, #191530);
    color: var(--qf-text-primary, #edecf5);
    box-sizing: border-box;
    font-family: var(--qf-font-body, "Alegreya Sans", sans-serif);
    transition: border-color 140ms ease-out, box-shadow 140ms ease-out, background-color 140ms ease-out;
}

.form-control[b-fpjz62049e]::placeholder {
    color: var(--qf-text-faint, #6a6685);
}

.form-control:hover[b-fpjz62049e] {
    border-color: var(--qf-border-strong, #3a2f63);
}

.form-control:focus[b-fpjz62049e] {
    outline: none;
    border-color: var(--qf-primary, #5b23ff);
    background-color: var(--qf-surface, #1a162a);
    box-shadow: 0 0 0 3px var(--qf-primary-soft-bg, rgba(91, 35, 255, 0.12));
}

.field:focus-within .field-icon[b-fpjz62049e] {
    color: var(--qf-secondary, #b18aff);
}

/* --------------------------------------------------------------------------
   Botao de entrar.
   -------------------------------------------------------------------------- */
.btn-primary[b-fpjz62049e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    height: 50px;
    margin-top: 6px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(180deg, var(--qf-primary-hover, #6d3aff), var(--qf-primary, #5b23ff));
    color: var(--qf-primary-contrast, #ffffff);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    box-shadow: 0 12px 28px -10px rgba(91, 35, 255, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 200ms ease, filter 200ms ease;
}

.btn-primary svg[b-fpjz62049e] {
    transition: transform 200ms ease;
}

.btn-primary:hover[b-fpjz62049e] {
    filter: brightness(1.06);
    box-shadow: 0 16px 34px -10px rgba(91, 35, 255, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transform: translateY(-1.5px);
}

.btn-primary:hover svg[b-fpjz62049e] {
    transform: translateX(3px);
}

.btn-primary:active[b-fpjz62049e] {
    transform: translateY(0.5px) scale(0.99);
}

.btn-primary:focus-visible[b-fpjz62049e] {
    outline: none;
    box-shadow: 0 0 0 3px var(--qf-focus-ring, rgba(228, 255, 48, 0.7));
}

/* --------------------------------------------------------------------------
   Rodape.
   -------------------------------------------------------------------------- */
.login-footer[b-fpjz62049e] {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--qf-border, #2a2247);
    text-align: center;
    font-size: 11.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--qf-text-faint, #6a6685);
}

/* --------------------------------------------------------------------------
   Responsivo.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .login-card[b-fpjz62049e] {
        padding: 32px 24px 24px;
    }

    .login-title[b-fpjz62049e] {
        font-size: 26px;
    }
}

/* --------------------------------------------------------------------------
   Acessibilidade: sem movimento continuo nem transicoes elasticas.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .login-orb[b-fpjz62049e],
    .login-card[b-fpjz62049e],
    .login-error[b-fpjz62049e] {
        animation: none !important;
    }

    .btn-primary[b-fpjz62049e],
    .btn-primary svg[b-fpjz62049e],
    .form-control[b-fpjz62049e],
    .field-icon[b-fpjz62049e] {
        transition: none !important;
    }

    .btn-primary:hover[b-fpjz62049e] {
        transform: none;
    }

    .btn-primary:hover svg[b-fpjz62049e] {
        transform: none;
    }
}
/* /Components/Pages/Mesa.razor.rz.scp.css */
/* --------------------------------------------------------------------------
   Layout full-bleed (feature mesa-design-cinematico, task 3.0, techspec.md
   "Decisoes Principais"/"Riscos Conhecidos"): .mesa-page deixa de ser um
   container flex de 3 colunas e passa a ser o contexto de posicionamento
   (position: relative) do mapa full-bleed (.mesa-map-area, position:
   absolute; inset: 0) e dos paineis/barra flutuantes, todos IRMAOS entre si
   — nenhum wrapper cobre o mapa inteiro por cima, entao nenhum deles pode
   capturar cliques/arrasto destinados a .mesa-map-viewport (que permanece
   intocado, ver comentario em Mesa.razor).

   Escala de z-index desta pagina (documentada aqui por ser o unico lugar que
   define todas as camadas):
     0  -> .mesa-map-area (mapa full-bleed; fog/tokens continuam empilhados
           como antes, DENTRO dela — mesma stacking context local)
     10 -> paineis flutuantes (.glass-panel-left/.glass-panel-right,
           .mesa-grid-panel-float, .mesa-error-float, .mesa-sheet-toggle-float)
     11 -> barra glass da toolbar do mestre (.mesa-toolbar-float) — sempre
           acima dos paineis laterais quando ambos estao proximos ao topo
     12 -> ficha interativa aberta (.mesa-sheet-drawer-float, feature
           prd-ficha-dnd-beyond, task 3.0/5.0) — overlay sob demanda
           "sobreposto a mesa" (req. 2 do PRD), sempre acima dos paineis
           permanentes. Jogador: botao/painel "Ficha" da propria ficha.
           Mestre (task 5.0, F7 do PRD): "Ver ficha" de qualquer personagem
           no CharacterListSidebar abre o mesmo wrapper/drawer — os dois
           nunca aparecem juntos para o MESMO usuario (um participante e
           mestre OU jogador, nunca os dois), mas agora o mestre tambem pode
           te-lo aberto por cima da propria .mesa-toolbar-float (z-index 11):
           sobreposicao aceita (o mestre fecha a ficha para voltar a usar a
           toolbar; a ficha ocupa 50% da mesa, entao a sobreposicao com a
           toolbar e esperada enquanto ela esta aberta)
     13 -> resolucao de ataque iniciada pela ficha (.mesa-sheet-attack-float,
           feature prd-ficha-dnd-beyond, task 4.0, F5 do PRD) — acao em
           andamento que precisa de atencao imediata, acima ate da propria
           ficha aberta (pode coexistir com ela: o usuario escolhe o alvo no
           mapa com a ficha ainda visivel ou ja fechada)
     14 -> overlay da animacao 3D de dados (.dice-roll-overlay, feature
           prd-animacao-rolagem-dados) — acima de TODAS as camadas da pagina
           para que os dados rolando fiquem sempre visiveis (pedido do usuario:
           antes ficavam por baixo das barras laterais glass). Nao captura
           clique (pointer-events: none), entao nao atrapalha a interacao
     15 -> .mesa-drag-capture-overlay (bug corrigido: "pointerleave cancela o
           arrasto ao passar sobre os paineis laterais") — inserido SOMENTE
           enquanto um arrasto de token/pan/seta de ataque esta em andamento
           (Mesa.razor), cobrindo a janela inteira para roubar o hit-test de
           QUALQUER outra camada da pagina (inclusive o proprio dice-roll-
           overlay acima): equivalente em CSS puro a um setPointerCapture no
           elemento do mapa, sem precisar de JS interop
     acima de tudo -> dialogs/snackbar do MudBlazor (z-index proprio do
           MudBlazor, nao alterado por esta pagina)

   O degrade de fundo indigo -> roxo (--qf-cine-bg-0/--qf-cine-bg-1) ja e
   aplicado a .mesa-page em app.css (task 1.0, escopo `.mesa-page`); esta
   regra so cuida do posicionamento, sem sobrescrever o `background`.

   Fix pos-verificacao em browser da task 3.0: `height: 100vh` sozinho ignora o espaco que o
   <MudAppBar> (MainLayout.razor, position: fixed) reserva via `padding-top:
   var(--mud-appbar-height)` em .mud-main-content (CSS gerado pelo MudThemeProvider) — o
   resultado e uma pagina --mud-appbar-height mais alta que a viewport, empurrando o rodape do
   mapa (controles de zoom, .mesa-error-float) parcial ou totalmente para fora da area visivel
   sem rolagem alguma disponivel (overflow: hidden aqui). `calc(100vh - var(--mud-appbar-height))`
   usa a mesma variavel que o proprio MudBlazor usa para o padding-top, eliminando o transbordo. */
/* Tomada de tela cheia (redesign "Quest Forge - Mesa"): a Mesa deixa de viver sob o MudAppBar
   global e passa a cobri-lo (position: fixed; inset: 0), com seu proprio cabecalho de 54px. O
   z-index fica acima do app bar (1100) e abaixo de dialogs/snackbars do MudBlazor (1400/1500),
   para que os proprios dialogs da mesa continuem por cima. Coluna flex: cabecalho fixo + area da
   mesa (.mesa-table) que ocupa o resto e e o contexto de posicionamento dos paineis flutuantes. */
.mesa-page[b-gxbaw8cc6d] {
    position: fixed;
    inset: 0;
    z-index: 1101;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

/* Area da mesa abaixo do cabecalho: contexto de posicionamento (position: relative) do mapa
   full-bleed (.mesa-map-area, inset: 0) e de todos os paineis/barras flutuantes, todos IRMAOS —
   mesma garantia documentada abaixo (nenhum wrapper cobre o mapa e captura cliques). */
.mesa-table[b-gxbaw8cc6d] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ══════════ Cabecalho (redesign "Quest Forge - Mesa") ══════════ */
.mesa-topbar[b-gxbaw8cc6d] {
    flex: 0 0 54px;
    height: 54px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 20px;
    background: linear-gradient(180deg, rgba(29, 25, 47, 0.95), rgba(18, 15, 30, 0.92));
    border-bottom: 1px solid rgba(91, 35, 255, 0.18);
    position: relative;
    z-index: 30;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.mesa-topbar-brand[b-gxbaw8cc6d] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mesa-topbar-logo[b-gxbaw8cc6d] {
    display: block;
    flex: 0 0 auto;
}

.mesa-topbar-wordmark[b-gxbaw8cc6d] {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.mesa-topbar-name[b-gxbaw8cc6d] {
    font-family: var(--qf-rpg-font-heading, "Cinzel", serif);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--qf-accent-bright, #f0ffa3);
}

.mesa-topbar-sub[b-gxbaw8cc6d] {
    font-size: 11px;
    letter-spacing: 2.5px;
    color: var(--qf-text-muted, #8d88a6);
    text-transform: uppercase;
    margin-top: 3px;
}

.mesa-topbar-spacer[b-gxbaw8cc6d] {
    flex: 1;
}

.mesa-topbar-session[b-gxbaw8cc6d] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid rgba(91, 35, 255, 0.25);
    border-radius: 999px;
    background: rgba(91, 35, 255, 0.06);
}

.mesa-topbar-session-label[b-gxbaw8cc6d] {
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--qf-text-muted, #8d88a6);
    text-transform: uppercase;
}

.mesa-topbar-session-code[b-gxbaw8cc6d] {
    font-family: var(--qf-rpg-font-heading, "Cinzel", serif);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--qf-accent, #e4ff30);
}

.mesa-topbar-copy[b-gxbaw8cc6d] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    display: flex;
    color: var(--qf-text-muted, #8d88a6);
}

.mesa-topbar-copy:hover[b-gxbaw8cc6d] {
    color: var(--qf-accent, #e4ff30);
}

.mesa-topbar-divider[b-gxbaw8cc6d] {
    width: 1px;
    height: 14px;
    background: rgba(91, 35, 255, 0.25);
}

.mesa-topbar-live[b-gxbaw8cc6d] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--qf-info, #008bff);
    white-space: nowrap;
}

.mesa-topbar-live-dot[b-gxbaw8cc6d] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--qf-info, #008bff);
    animation: qfPulse 2.2s ease-in-out infinite;
}

.mesa-topbar-live.is-offline[b-gxbaw8cc6d] {
    color: var(--qf-warning-text, #F0C975);
}

.mesa-topbar-live.is-offline .mesa-topbar-live-dot[b-gxbaw8cc6d] {
    background: var(--qf-warning, #E0A93E);
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .mesa-topbar-live-dot[b-gxbaw8cc6d] {
        animation: none;
    }
}

.mesa-loading[b-gxbaw8cc6d],
.mesa-error[b-gxbaw8cc6d] {
    margin: 32px auto;
    font-size: 14px;
}

.mesa-error[b-gxbaw8cc6d] {
    color: var(--qf-danger-text, #F2879A);
}

/* Mensagem de erro de token flutuando por cima do mapa (irma de .mesa-map-area, ver Mesa.razor):
   posicionada no rodape central, longe da toolbar/paineis laterais. */
.mesa-error-float[b-gxbaw8cc6d] {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 10;
    margin: 0;
    padding: 8px 14px;
    background-color: var(--qf-cine-glass-bg, rgba(16, 22, 38, 0.62));
    border: 1px solid var(--qf-danger-dim, #6E2A38);
    border-radius: 8px;
    backdrop-filter: blur(var(--qf-cine-blur, 14px));
    -webkit-backdrop-filter: blur(var(--qf-cine-blur, 14px));
}

/* Layout proprio do skeleton de carregamento (design-spec 00-tokens.md: "blocos com shimmer"),
   exibido enquanto o GET /state inicial (join/refresh) esta em andamento — req. 40 do PRD.
   .mesa-page deixou de ser flex (ver acima), entao o skeleton precisa do proprio container de 3
   colunas para preservar o layout original enquanto carrega. */
.mesa-skeleton-layout[b-gxbaw8cc6d] {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    min-height: 100%;
    height: 100%;
    box-sizing: border-box;
}

.mesa-skeleton-column[b-gxbaw8cc6d] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mesa-skeleton-column.mesa-skeleton-sidebar-left[b-gxbaw8cc6d] {
    width: 280px;
}

.mesa-skeleton-column.mesa-skeleton-map[b-gxbaw8cc6d] {
    flex: 1 1 auto;
    min-width: 0;
}

.mesa-skeleton-column.mesa-skeleton-sidebar-right[b-gxbaw8cc6d] {
    width: 300px;
}

/* Skeleton glass (feature mesa-design-cinematico, task 7.0/F1, techspec.md diagrama "F1"): mesmo
   tratamento de vidro estatico dos paineis reais (--qf-cine-glass-*, ver GlassPanel.razor.css) —
   o sweep animado vem da classe utilitaria "mesa-cine-shimmer" (app.css, task 1.0) aplicada a
   cada bloco em Mesa.razor, nao mais do @keyframes local baseado em background-position (nao
   composite-only, por isso substituido aqui em favor do sweep via transform da camada
   cinematica). */
.mesa-skeleton-block[b-gxbaw8cc6d] {
    background: var(--qf-cine-glass-bg, rgba(16, 22, 38, 0.62));
    border: 1px solid var(--qf-cine-glass-border, rgba(139, 160, 255, 0.22));
    border-radius: 6px;
    backdrop-filter: blur(var(--qf-cine-blur, 14px));
    -webkit-backdrop-filter: blur(var(--qf-cine-blur, 14px));
}

/* Fallback para navegadores sem suporte a backdrop-filter (mesmo padrao de GlassPanel.razor.css/
   .mesa-toolbar acima, techspec.md "Riscos Conhecidos"). */
@supports not (backdrop-filter: blur(1px)) {
    .mesa-skeleton-block[b-gxbaw8cc6d] {
        background: rgba(10, 14, 26, 0.92);
    }
}

.mesa-skeleton-block.mesa-skeleton-title[b-gxbaw8cc6d] {
    height: 18px;
    width: 60%;
}

.mesa-skeleton-block.mesa-skeleton-row[b-gxbaw8cc6d] {
    height: 44px;
}

.mesa-skeleton-block.mesa-skeleton-toolbar[b-gxbaw8cc6d] {
    height: 48px;
}

.mesa-skeleton-block.mesa-skeleton-map-area[b-gxbaw8cc6d] {
    flex: 1;
    min-height: 420px;
}

.mesa-skeleton-block.mesa-skeleton-chat[b-gxbaw8cc6d] {
    flex: 1;
    min-height: 200px;
}

/* Barra glass flutuante no topo (task 3.0, subtarefa 3.2, techspec.md "Visao Geral dos
   Componentes": "Toolbar do mestre vira barra glass flutuante no topo"): irma de
   .mesa-map-area, nunca sua filha (mesmo motivo documentado no topo deste arquivo). Ocupa a
   largura central da viewport, sem invadir os paineis laterais (left/right: 300px, coerente com
   a largura reservada a .glass-panel-left/.glass-panel-right abaixo). z-index 11 — acima dos
   paineis (10) por ficar sempre proxima ao topo, onde os dois poderiam se tocar visualmente. */
/* Barra flutuante centralizada no topo (redesign "Quest Forge - Mesa"): pilula ancorada em
   left: 50% + translateX(-50%), largura ajustada ao conteudo. max-width mantem folga para os
   paineis laterais (292+12 a esquerda, 332+12 a direita) — em telas estreitas os grupos quebram
   linha DENTRO da pilula (min-height em .mesa-toolbar), nunca por cima dos paineis. */
/* Centralizacao por margens automaticas (NAO por transform: translateX(-50%)): a animacao de
   entrada .mesa-enter .mesa-toolbar-float usa `transform` (fade-scale) com fill `both`, que
   sobreporia um translateX de centralizacao ao terminar — deslocando a barra para a direita, por
   cima do painel de chat. left/right: 0 + margin-inline: auto centram sem tocar em `transform`,
   deixando-o livre para a animacao. width: fit-content para a pilula abracar o conteudo. */
.mesa-toolbar-float[b-gxbaw8cc6d] {
    position: absolute;
    top: 16px;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: fit-content;
    /* 940px = 2x a folga necessaria para o painel esquerdo, agora o mais largo (450 + 16 = 466,
       arredondado para 470) — mantem a barra centralizada sem tocar nenhum dos paineis laterais.
       Em telas estreitas os grupos da toolbar quebram para uma segunda linha DENTRO da pilula
       (flex-wrap em .mesa-toolbar), nunca por cima dos paineis. */
    max-width: calc(100vw - 940px);
    z-index: 11;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

/* Bug corrigido (pedido do usuario): em ~1366px de largura, a soma dos grupos desta toolbar
   (Pan/Selecionar/Snap/Calibrar + upload de mapa + biblioteca de mapas + indicador Zoom/Grid)
   ultrapassava a largura disponivel entre .glass-panel-left e .glass-panel-right (a caixa em si
   nunca invadia os paineis — left/right acima ja reservam a largura deles — mas sem
   flex-wrap os itens simplesmente transbordavam para fora da caixa, visualmente por cima do
   cabecalho de .glass-panel-right, que fica no mesmo canto superior direito). flex-wrap: wrap +
   min-height (no lugar de height fixo) faz o indicador Zoom/Grid cair para uma segunda linha,
   DENTRO da propria caixa da toolbar, em vez de transbordar sobre o painel vizinho — sem
   media query dedicada: em viewports largos ha espaco de sobra e nada quebra linha. */
.mesa-toolbar[b-gxbaw8cc6d] {
    width: auto;
    max-width: 100%;
    min-height: 44px;
    background: rgba(23, 20, 38, 0.85);
    border: 1px solid rgba(91, 35, 255, 0.18);
    border-radius: 10px;
    padding-block: 6px;
    padding-inline: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

/* Fallback para navegadores sem suporte a backdrop-filter (mesmo padrao de GlassPanel.razor.css,
   techspec.md "Riscos Conhecidos"). */
@supports not (backdrop-filter: blur(1px)) {
    .mesa-toolbar[b-gxbaw8cc6d] {
        background: rgba(10, 14, 26, 0.92);
    }
}

.mesa-toolbar-group[b-gxbaw8cc6d] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mesa-toolbar-status[b-gxbaw8cc6d] {
    font-size: 13px;
    color: var(--qf-text-secondary, #ABAFB8);
    gap: 6px;
}

.mesa-toolbar-status-icon[b-gxbaw8cc6d] {
    color: var(--qf-text-muted, #84858C);
}

.mesa-toolbar-status-icon:not(:first-child)[b-gxbaw8cc6d] {
    margin-left: 6px;
}

/* O <InputFile> (Microsoft.AspNetCore.Components.Forms) e um componente filho: o <input> que
   ele renderiza nao carrega o atributo de escopo [b-xxx] de Mesa.razor, por isso a regra
   precisa de ::deep para alcancar o elemento (ver memoria "CSS-isolation child-component
   scoping bug"). O navegador nao permite estilizar o input[type=file] em si alem de
   cor/fonte — o botao nativo ("Escolher arquivo") so e estilizavel via ::file-selector-button,
   suportado pelos navegadores modernos (Chrome/Edge/Firefox). */
.mesa-toolbar-group[b-gxbaw8cc6d]  input[type="file"] {
    color: var(--qf-text-secondary, #ABAFB8);
    font-size: 13px;
    max-width: 220px;
}

.mesa-toolbar-group[b-gxbaw8cc6d]  input[type="file"]::file-selector-button {
    height: 28px;
    padding-inline: 10px;
    margin-right: 8px;
    border-radius: 6px;
    border: 1px solid var(--qf-border, #2E2E2E);
    background-color: var(--qf-surface-2, #1A1A1A);
    color: var(--qf-text-primary, #F2F2F3);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mesa-toolbar-group[b-gxbaw8cc6d]  input[type="file"]::file-selector-button:hover {
    background-color: var(--qf-surface-3, #232323);
    border-color: var(--qf-border-strong, #3D3D3D);
}

.mesa-toolbar-divider[b-gxbaw8cc6d] {
    width: 1px;
    /* align-self: stretch (nao height: 100%) para continuar preenchendo a altura da propria
       linha do flex mesmo com .mesa-toolbar agora usando min-height (bug 1366px acima): uma
       altura percentual so resolve contra uma altura definida no container, o que min-height
       sozinho nao garante. */
    align-self: stretch;
    background-color: var(--qf-border, #2E2E2E);
}

.mesa-toolbar-button[b-gxbaw8cc6d] {
    height: 32px;
    padding-inline: 12px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 600;
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--qf-text-secondary, #b1adc6);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mesa-toolbar-button:hover:not(:disabled)[b-gxbaw8cc6d] {
    background-color: var(--qf-primary-soft-bg, rgba(91, 35, 255, 0.12));
    color: var(--qf-accent, #e4ff30);
    border-color: transparent;
}

.mesa-toolbar-button:disabled[b-gxbaw8cc6d] {
    opacity: 0.5;
    cursor: not-allowed;
}

.mesa-toolbar-button:focus-visible[b-gxbaw8cc6d] {
    outline: 2px solid var(--qf-rpg-gold-border, rgba(201, 168, 76, 0.45));
    outline-offset: 1px;
}

.mesa-toolbar-button.is-active[b-gxbaw8cc6d] {
    background-color: var(--qf-rpg-gold-soft-bg, rgba(201, 168, 76, 0.12));
    color: var(--qf-rpg-gold, #C9A84C);
    border-color: var(--qf-rpg-gold-dim, #7A6030);
}

/* Seletor de tamanho do pincel de fog (movido do FogCanvas para a toolbar do topo — pedido do
   usuario: dentro do viewport escalado por zoom os botoes deformavam). Grupo compacto de botoes
   numericos; cada botao reaproveita .mesa-toolbar-button mas fica quadrado e sem padding largo. */
.mesa-fog-brush-sizes[b-gxbaw8cc6d] {
    display: flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--qf-border, #2E2E2E);
    border-radius: 6px;
}

.mesa-toolbar-button.mesa-fog-brush-size[b-gxbaw8cc6d] {
    height: 24px;
    min-width: 24px;
    padding-inline: 6px;
    border-color: transparent;
}

/* Botao de acao destrutiva na toolbar (excluir mapa ativo) — mesmo tratamento visual usado em
   SelectedTokenPanel, replicado neste escopo por causa da CSS-isolation por componente. */
.mesa-toolbar-button-danger[b-gxbaw8cc6d] {
    color: var(--qf-danger-text, #F2879A);
    border-color: var(--qf-danger-dim, #6E2A38);
}

.mesa-toolbar-button-danger:hover:not(:disabled)[b-gxbaw8cc6d] {
    background-color: var(--qf-danger-soft-bg, rgba(224, 86, 107, 0.12));
    border-color: var(--qf-danger, #E0566B);
}

/* Seletor de mapa ativo da biblioteca (pedido do usuario: multiplos mapas por sessao). Elemento
   <select> nativo estilizado para combinar com os botoes da toolbar. */
.mesa-map-select[b-gxbaw8cc6d] {
    height: 32px;
    max-width: 200px;
    padding-inline: 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--qf-border, #2E2E2E);
    background-color: var(--qf-surface-2, #1A1A1A);
    color: var(--qf-text-primary, #F2F2F3);
    cursor: pointer;
}

.mesa-map-select:disabled[b-gxbaw8cc6d] {
    opacity: 0.5;
    cursor: not-allowed;
}

.mesa-map-select:focus-visible[b-gxbaw8cc6d] {
    outline: 2px solid var(--qf-rpg-gold-border, rgba(201, 168, 76, 0.45));
    outline-offset: 1px;
}

.mesa-toolbar-button.is-active:hover:not(:disabled)[b-gxbaw8cc6d] {
    background-color: var(--qf-rpg-gold-border, rgba(201, 168, 76, 0.35));
    border-color: var(--qf-rpg-gold, #C9A84C);
}

/* Mapa full-bleed (task 3.0, subtarefa 3.1, techspec.md "Decisoes Principais": "o
   .mesa-map-area vira position: absolute; inset: 0"): ocupa toda a .mesa-page (que agora e
   apenas o contexto de posicionamento, ver topo deste arquivo). Continua sendo o unico
   ancestral posicionado de .mesa-map-viewport (position: relative preservado, agora herdado do
   proprio position: absolute) — a matematica de OffsetX/OffsetY em HandleMapClickAsync/
   HandleMapWheel usa coordenadas relativas a ESTE elemento e nao muda com o full-bleed, so com o
   tamanho ocupado por ele (que so cresceu). z-index 0 explicito (ver escala documentada no topo
   deste arquivo) — base de toda a pilha visual da mesa. */
.mesa-map-area[b-gxbaw8cc6d] {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    touch-action: none;
}

/* Camada de captura de arrasto (bug corrigido: "pointerleave cancela o arrasto ao passar sobre
   os paineis laterais"). Renderizada como IRMA de .mesa-map-area (Mesa.razor), SOMENTE enquanto
   um arrasto de token/pan/seta de ataque esta em andamento. position: fixed; inset: 0 cobre a
   JANELA inteira do navegador (nao so a area do mapa) — os GlassPanel laterais (z-index 10) e
   toda a demais UI flutuante ficam por baixo dela (z-index 15, o maior da pagina, ver escala
   documentada no topo deste arquivo), entao o ponteiro nunca mais "sai" da area que reage ao
   arrasto nesse cenario, mesmo passando visualmente por cima de um painel sobreposto ao mapa.
   Puramente funcional (sem conteudo visual): so existe para vencer o hit-test do navegador. */
.mesa-drag-capture-overlay[b-gxbaw8cc6d] {
    position: fixed;
    inset: 0;
    z-index: 15;
    touch-action: none;
    cursor: grabbing;
}

.mesa-map-area--pan-mode[b-gxbaw8cc6d] {
    cursor: grab;
}

.mesa-map-area--panning[b-gxbaw8cc6d] {
    cursor: grabbing;
}

/* Modo "Calibrar grid" (req. 1 do PRD, task 9.0): cursor de mira para indicar que o proximo
   clique marca um canto da celula sendo calibrada. */
.mesa-map-area--calibrate-mode[b-gxbaw8cc6d] {
    cursor: crosshair;
}

/* ══════════ Backdrop cinematico + vinheta + estado vazio (redesign) ══════════ */
.mesa-backdrop[b-gxbaw8cc6d] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.mesa-backdrop-radial[b-gxbaw8cc6d] {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 30%, #241f3a 0%, #151226 55%, #0f0d1a 100%);
}

.mesa-backdrop-grid[b-gxbaw8cc6d] {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(91, 35, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 35, 255, 0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(80% 70% at 50% 45%, black 30%, transparent 100%);
    mask-image: radial-gradient(80% 70% at 50% 45%, black 30%, transparent 100%);
}

.mesa-backdrop-ember[b-gxbaw8cc6d] {
    position: absolute;
    top: -80px;
    left: 30%;
    width: 40%;
    height: 200px;
    background: radial-gradient(50% 100% at 50% 0%, rgba(91, 35, 255, 0.10), transparent 70%);
    pointer-events: none;
    animation: qfEmber 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .mesa-backdrop-ember[b-gxbaw8cc6d] {
        animation: none;
    }
}

/* Vinheta: escurece as bordas por cima do mapa inteiro (z-index 2 local, acima do viewport,
   abaixo dos controles de zoom que sao z-index 4). */
.mesa-vignette[b-gxbaw8cc6d] {
    position: absolute;
    inset: 0;
    z-index: 2;
    box-shadow: inset 0 0 180px 60px rgba(0, 0, 0, 0.75);
    pointer-events: none;
}

/* Estado vazio "A MESA AGUARDA" (z-index 3 local: acima da vinheta, abaixo dos controles/zoom). */
.mesa-empty[b-gxbaw8cc6d] {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 18px;
    pointer-events: none;
}

.mesa-empty-inner[b-gxbaw8cc6d] {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
    padding: 0 24px;
    animation: qfRise 0.8s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .mesa-empty-inner[b-gxbaw8cc6d] {
        animation-duration: 150ms;
    }
}

.mesa-empty-crest[b-gxbaw8cc6d] {
    opacity: 0.9;
}

.mesa-empty-copy[b-gxbaw8cc6d] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.mesa-empty-title[b-gxbaw8cc6d] {
    font-family: var(--qf-rpg-font-heading, "Cinzel", serif);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--qf-accent-bright, #f0ffa3);
}

.mesa-empty-text[b-gxbaw8cc6d] {
    font-size: 16px;
    color: var(--qf-text-secondary, #b1adc6);
    max-width: 420px;
    line-height: 1.5;
}

/* Botao "ENVIAR MAPA" (redesign): o <InputFile> real fica sobreposto e transparente por cima do
   label, entao clicar em qualquer ponto do botao abre o seletor de arquivos. ::deep alcanca o
   <input> renderizado pelo componente filho InputFile (CSS-isolation pai/filho). */
.mesa-empty-upload[b-gxbaw8cc6d] {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 26px;
    border-radius: 6px;
    border: 1px solid rgba(91, 35, 255, 0.5);
    background: linear-gradient(180deg, rgba(91, 35, 255, 0.16), rgba(91, 35, 255, 0.06));
    color: var(--qf-accent, #e4ff30);
    font-family: var(--qf-rpg-font-heading, "Cinzel", serif);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background 0.2s ease;
}

.mesa-empty-upload:hover:not(.is-disabled)[b-gxbaw8cc6d] {
    background: linear-gradient(180deg, rgba(91, 35, 255, 0.28), rgba(91, 35, 255, 0.12));
    box-shadow: 0 0 24px rgba(91, 35, 255, 0.25);
    transform: translateY(-1px);
}

.mesa-empty-upload.is-disabled[b-gxbaw8cc6d] {
    opacity: 0.5;
    cursor: not-allowed;
}

.mesa-empty-upload[b-gxbaw8cc6d]  input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
    color: transparent;
}

.mesa-empty-upload.is-disabled[b-gxbaw8cc6d]  input[type="file"] {
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .mesa-empty-upload[b-gxbaw8cc6d] {
        transition: background 0.2s ease;
    }

    .mesa-empty-upload:hover:not(.is-disabled)[b-gxbaw8cc6d] {
        transform: none;
    }
}

/* Envolve o GridOverlay e a camada de tokens em um unico elemento escalavel (zoom local via
   ctrl+scroll/botoes, ver Mesa.razor @code) — origem no canto superior esquerdo para que as
   coordenadas de clique/arrasto baseadas em OffsetX/OffsetY/ClientX/ClientY precisem apenas ser
   divididas pela escala, sem medir a largura/altura renderizada do elemento via JS interop.
   Sem inset: 0 (nao preenche o container), o viewport se dimensiona pela imagem natural; assim
   a .mesa-token-layer (inset: 0 relativo a este elemento) cobre exatamente a area da imagem
   e os tokens ficam alinhados com o mapa. */
.mesa-map-viewport[b-gxbaw8cc6d] {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    pointer-events: none;
}

.mesa-token-layer[b-gxbaw8cc6d] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.mesa-token-layer[b-gxbaw8cc6d]  .token-on-map {
    pointer-events: auto;
}

/* Seta de ataque desenhada durante o arrasto da alca de ataque (pedido do usuario). Ocupa o mesmo
   espaco de coordenadas em px-imagem dos tokens (irma deles dentro de .mesa-token-layer), com
   width/height do mapa definidos inline. pointer-events:none para o mapa continuar recebendo o
   pointermove/up do arrasto; overflow:visible para a ponta nao ser cortada nas bordas. */
.mesa-attack-arrow[b-gxbaw8cc6d] {
    position: absolute;
    left: 0;
    top: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 3;
}

.mesa-attack-arrow line[b-gxbaw8cc6d] {
    stroke: var(--qf-accent, #E4FF30);
    stroke-width: 3px;
    stroke-linecap: round;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.mesa-attack-arrow marker path[b-gxbaw8cc6d] {
    fill: var(--qf-accent, #E4FF30);
}

/* z-index 4 e local ao stacking context de .mesa-map-area (z-index: 0, ver escala documentada
   no topo deste arquivo) — nao "escapa" para acima de .glass-panel-right (z-index: 10) mesmo
   sendo maior nesse contexto interno, entao NAO era isso que bloqueava os cliques nos botoes de
   zoom (bug reportado na verificacao em browser da task 3.0): o `bottom: 12px` deste grupo cai
   sob a faixa vazia (sem conteudo) de .glass-panel-right, que interceptava pointer events antes
   do fix em GlassPanel.razor.css (".glass-panel" agora e pointer-events: none, exceto na
   superficie visivel de header/body). Mantido aqui como defesa em profundidade/documentacao,
   nao como o fix real. */
/* Controles de zoom centralizados no rodape (redesign "Quest Forge - Mesa"): pilula em
   left: 50% + translateX(-50%), bottom: 18px. z-index 4 local a .mesa-map-area. */
.mesa-zoom-controls[b-gxbaw8cc6d] {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 2px;
    background-color: rgba(23, 20, 38, 0.85);
    border: 1px solid rgba(91, 35, 255, 0.18);
    border-radius: 8px;
    padding: 4px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.mesa-zoom-button[b-gxbaw8cc6d] {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: none;
    background-color: transparent;
    color: var(--qf-text-secondary, #b1adc6);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mesa-zoom-button:hover:not(:disabled)[b-gxbaw8cc6d] {
    background-color: var(--qf-primary-soft-bg, rgba(91, 35, 255, 0.12));
    color: var(--qf-accent, #e4ff30);
}

.mesa-zoom-button:disabled[b-gxbaw8cc6d] {
    opacity: 0.4;
    cursor: not-allowed;
}

.mesa-zoom-percent[b-gxbaw8cc6d] {
    min-width: 54px;
    height: 30px;
    padding-inline: 8px;
    border: none;
    background: none;
    border-radius: 6px;
    color: var(--qf-text-primary, #edecf5);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.mesa-zoom-percent:hover[b-gxbaw8cc6d] {
    color: var(--qf-accent, #e4ff30);
    background-color: var(--qf-primary-soft-bg, rgba(91, 35, 255, 0.12));
}

/* Painel flutuante de ajuste fino do grid (task 3.0, subtarefa 3.1/3.2): irmao do mapa,
   posicionado no canto inferior esquerdo (simetrico a .mesa-zoom-controls, que fica no canto
   inferior direito DENTRO do mapa) para nao competir por espaco com a toolbar (topo) nem com o
   painel de personagens (lateral esquerda, que comeca em top: 12px).
   left: 300px comeca 8px depois da borda direita de .glass-panel-left (left: 12px + width: 280px
   = 292px, ver ".mesa-page ::deep .glass-panel-left" abaixo), entao este botao nunca fica sob a
   faixa do painel esquerdo — confirmado na verificacao em browser da task 3.0. O fix de
   pointer-events em GlassPanel.razor.css tambem cobre esse caso como defesa em profundidade,
   caso a largura do painel mude no futuro. */
.mesa-grid-panel-float[b-gxbaw8cc6d] {
    position: absolute;
    /* 482px = borda direita do painel esquerdo (16 + 450 = 466, ver ".mesa-page ::deep
       .glass-panel-left" com width: 450px) + 16px de folga. O valor antigo (372px) foi calculado
       para um painel de 340px e passou a cair SOB o painel alargado, escondendo o botao "Ajustes
       de grid" — este e o fix. */
    left: 482px;
    bottom: 16px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    /* Coluna estreita e fixa (260px): o card de ajustes cresce PARA CIMA (bottom fixo em 16px) em
       vez de se espalhar para a direita, entao nunca alcanca a pilula central de zoom/mute — antes
       o card aberto se estendia ate o centro e cobria o zoom/mute (ver .mesa-grid-controls). */
    width: 260px;
}

.mesa-grid-controls-toggle[b-gxbaw8cc6d] {
    align-self: flex-start;
}

.mesa-grid-controls[b-gxbaw8cc6d] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    background-color: var(--qf-surface, #121212);
    border: 1px solid var(--qf-rpg-gold-dim, #7A6030);
    border-radius: 8px;
    padding: 12px 16px;
}

.mesa-grid-control[b-gxbaw8cc6d] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--qf-text-secondary, #ABAFB8);
    flex: 1 1 160px;
}

.mesa-grid-control input[type="range"][b-gxbaw8cc6d] {
    accent-color: var(--qf-rpg-gold, #C9A84C);
}

/* Ajuste fino +-1px (req. 2 do PRD, task 9.0): par de botoes de stepper por eixo, substituindo
   os sliders de faixa completa (a calibracao por dois cliques ja cobre o ajuste grosso). */
.mesa-grid-stepper[b-gxbaw8cc6d] {
    display: flex;
    gap: 6px;
}

.mesa-grid-stepper-button[b-gxbaw8cc6d] {
    flex: 1;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--qf-border, #2E2E2E);
    background-color: var(--qf-surface-2, #1A1A1A);
    color: var(--qf-text-primary, #F2F2F3);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mesa-grid-stepper-button:hover:not(:disabled)[b-gxbaw8cc6d] {
    background-color: var(--qf-surface-3, #232323);
    border-color: var(--qf-rpg-gold-dim, #7A6030);
}

.mesa-grid-stepper-button:disabled[b-gxbaw8cc6d] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Feedback do fluxo de calibracao (instrucao apos o primeiro clique, sucesso ou erro apos o
   segundo) — mesmo padrao visual de .mesa-error, mas em tom neutro/dourado (nao e uma falha). */
.mesa-calibration-hint[b-gxbaw8cc6d] {
    margin: 0;
    font-size: 13px;
    color: var(--qf-rpg-gold, #C9A84C);
}

/* Botao "Ficha" (feature prd-ficha-dnd-beyond, task 3.0, F1 do PRD): flutuante no canto inferior
   esquerdo, mesmo estilo/z-index de .mesa-grid-panel-float (mestre) — mas so visivel para o
   jogador com personagem proprio (ver Mesa.razor, gate "!IsMaster && _characterId is not null"),
   entao os dois nunca competem pelo mesmo canto na pratica (mestre nao tem personagem nesta
   sessao). left: 12px (nao 300px como o painel de grid) porque este botao substitui, no mesmo
   canto, o proprio CharacterSheetDrawer quando fechado — ver .mesa-sheet-drawer-float abaixo. */
.mesa-sheet-toggle-float[b-gxbaw8cc6d] {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 10;
    height: 32px;
    padding-inline: 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--qf-cine-glass-border, rgba(139, 160, 255, 0.22));
    background-color: var(--qf-cine-glass-bg, rgba(16, 22, 38, 0.62));
    color: var(--qf-text-primary, #F2F2F3);
    backdrop-filter: blur(var(--qf-cine-blur, 14px));
    -webkit-backdrop-filter: blur(var(--qf-cine-blur, 14px));
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.mesa-sheet-toggle-float:hover[b-gxbaw8cc6d] {
    background-color: rgba(139, 160, 255, 0.14);
    border-color: var(--qf-primary, #5B8DEF);
}

/* Painel da ficha interativa aberto (CharacterSheetDrawer, task 3.0/5.0): ocupa o mesmo canto do
   botao "Ficha" do jogador (left: 12px), do topo ao rodape da viewport (mesmo padrao de
   .mesa-page ::deep .glass-panel-left abaixo) — "sobreposto a mesa" (req. 2 do PRD: "painel
   lateral sobreposto a mesa, sem navegacao"), por isso z-index 12 (acima dos paineis
   permanentes/10). Reaproveitado tambem pela visao do mestre (task 5.0, F7 do PRD: "Ver ficha" no
   CharacterListSidebar) — os dois usos nunca coexistem para o MESMO usuario, mas para o mestre
   este wrapper pode sobrepor parcialmente .mesa-toolbar-float (z-index 11, ver escala documentada
   no topo deste arquivo), sobreposicao aceita. Largura de 50% da mesa (min 340px, o valor antigo,
   para telas estreitas): a ficha completa (grade de atributos, salvaguardas, 18 pericias, ataques)
   agora se distribui em duas colunas internas (.character-sheet-drawer-columns) em vez de uma
   coluna unica espremida. O scroll interno e responsabilidade do proprio
   CharacterSheetDrawer.razor.css (.character-sheet-drawer-body, overflow-y: auto) — este
   wrapper so posiciona. */
.mesa-sheet-drawer-float[b-gxbaw8cc6d] {
    position: absolute;
    left: 16px;
    top: 16px;
    bottom: 16px;
    width: 50%;
    min-width: 340px;
    max-width: calc(100% - 24px);
    z-index: 12;
    transition: opacity .25s ease, transform .3s var(--qf-cine-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

/* Dados 3D rolando na mesa (DiceRollOverlay.OnAnimatingChanged -> Mesa._isDiceAnimating): a
   ficha a 50% da tela cobriria a animacao, entao ela se recolhe suavemente enquanto os dados
   estao no ar e reaparece sozinha ao fim — o componente continua montado (nao perde scroll nem
   estado interno), so fica invisivel e inerte a cliques. */
.mesa-sheet-drawer-float.is-dice-rolling[b-gxbaw8cc6d] {
    opacity: 0;
    transform: translateX(-24px);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .mesa-sheet-drawer-float[b-gxbaw8cc6d] {
        transition: none;
    }
}

/* Resolucao do ataque iniciado pela ficha (feature prd-ficha-dnd-beyond, task 4.0, F5 do PRD):
   CombatAttackPanel montado diretamente por Mesa.razor (fora de CharacterListSidebar/
   SelectedTokenPanel), centralizado no rodape do mapa para nao competir com a ficha (esquerda,
   .mesa-sheet-drawer-float) nem com o chat (direita, .glass-panel-right) — os dois podem estar
   visiveis ao mesmo tempo (o usuario pode fechar a ficha enquanto mira o alvo, mas nao e
   obrigado a). z-index 13: acima de tudo o mais desta pagina (inclusive a propria ficha aberta,
   12) porque e uma acao em andamento que precisa de atencao imediata do jogador. */
.mesa-sheet-attack-float[b-gxbaw8cc6d] {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    width: 340px;
    max-width: calc(100% - 24px);
    z-index: 13;

    /* Sem moldura propria: o CombatAttackPanel interno ja desenha o card do modal de ataque
       (design "Combat Log Card", opcao 4A) com fundo/borda/sombra proprios. A dica de "escolha o
       alvo" (.mesa-sheet-attack-hint) ganha a moldura equivalente abaixo. */
}

.mesa-sheet-attack-hint[b-gxbaw8cc6d] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    border-radius: 16px;
    border: 1px solid var(--dc-border, #2b2540);
    background: var(--dc-bg-card, #1a1726);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    padding: 14px 16px;
    font-family: var(--dc-font, 'Sora', sans-serif);
}

.mesa-sheet-attack-hint p[b-gxbaw8cc6d] {
    margin: 0;
    font-size: 13px;
    color: var(--qf-text-secondary, #ABAFB8);
}

/* --------------------------------------------------------------------------
   Paineis flutuantes de personagens (esquerda) e preparacao/chat (direita)
   (task 3.0, subtarefa 3.3, techspec.md "Decisoes Principais": "Paineis
   flutuantes por cima do mapa absoluto... z-index documentado"). O
   posicionamento absoluto relativo a .mesa-page vive AQUI (Mesa.razor.css),
   nao em GlassPanel.razor.css (ver comentario em GlassPanel.razor.css: a
   casca so cuida do eixo de colapso/arredondamento por lado). ::deep e
   necessario porque GlassPanel e um componente filho (CSS-isolation
   pai/filho, memoria "web-black-theme-design-system") — sem ele, estas
   regras nunca alcancariam a raiz `.glass-panel` renderizada por
   GlassPanel.razor. top/bottom (sem height) fazem a altura ser calculada
   automaticamente entre os dois, preenchendo a viewport com uma margem de
   12px em cada borda; a transicao de colapso (transform/opacity) e toda
   definida em GlassPanel.razor.css e nao precisa ser repetida aqui.
   -------------------------------------------------------------------------- */
.mesa-page[b-gxbaw8cc6d]  .glass-panel-left {
    position: absolute;
    top: 16px;
    bottom: 16px;
    left: 16px;
    z-index: 10;
    /* Alargado para 450px (pedido do usuario): mais folga para a lista de personagens e para o
       painel do selecionado (atributos, vida, efeitos e grade de acoes) respirarem sem barra de
       rolagem. A folga reservada pela toolbar central foi ampliada junto (max-width abaixo) para
       nao colidir com este painel mais largo. */
    width: 450px;
}

.mesa-page[b-gxbaw8cc6d]  .glass-panel-right {
    position: absolute;
    top: 16px;
    bottom: 16px;
    right: 16px;
    z-index: 10;

    /* Largura fixa de 340px (design "Combat Log Card", opcao 3A), limitada pela viewport menos
       as margens de 16px em telas estreitas. */
    width: min(340px, calc(100vw - 32px));
}

.mesa-sidebar-right[b-gxbaw8cc6d] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100%;
}

/* CharacterListSidebar renderiza o <aside class="mesa-sidebar-left"> como componente filho;
   ::deep permite sobrescrever a regra isolada de CharacterListSidebar.razor.css sem tocar
   nenhum arquivo de marcacao (ver memoria "CSS-isolation child-component scoping bug"). Agora
   dentro do corpo de GlassPanel (ver .glass-panel-left acima) em vez de filho direto de
   .mesa-page — largura/rolagem propria continuam necessarias porque GlassPanel.razor.css nao
   conhece o conteudo especifico deste painel (regra de CSS-isolation: cada regra vive no
   componente que escreve o markup correspondente). */
.mesa-page[b-gxbaw8cc6d]  .mesa-sidebar-left {
    width: 100%;
    overflow-y: auto;
    max-height: 100%;
}

/* ChatPanel renderiza o MudPaper com class="chat-panel" como componente filho da sidebar direita;
   ::deep permite dar flex sem alterar ChatPanel.razor nem ChatPanel.razor.css. flex-basis 0 (em
   vez de auto) ignora o height: 100% inline do MudPaper no calculo do tamanho principal — o chat
   ocupa apenas o espaco que sobra abaixo de paleta/habilidades/movimentacoes — e min-height: 0
   permite encolher alem do conteudo, empurrando a rolagem para o feed interno
   (.chat-panel-feed), que mantem a ultima mensagem sempre a vista via auto-scroll. */
.mesa-sidebar-right[b-gxbaw8cc6d]  .chat-panel {
    flex: 1 1 0;
    min-height: 0;
}

/* Secoes da coluna direita no design "Combat Log Card" (3A): sem cartao proprio — cada secao e
   "rotulo + fio" seguido do conteudo; os cards vivem DENTRO das secoes (ex.: player da trilha,
   log de movimentacoes), nunca como wrapper externo. */
.mesa-prepare-card[b-gxbaw8cc6d] {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mesa-selected-name[b-gxbaw8cc6d] {
    font-size: 16px;
    color: var(--qf-text-primary, #F2F2F3);
    margin: 0;
}

/* ==========================================================================
   Entrada orquestrada (feature mesa-design-cinematico, task 7.0/F1, techspec.md
   diagrama "F1 — Entrada cinematica da Mesa (carregamento orquestrado)"):
   `.mesa-enter` envolve TODO o conteudo real da mesa (Mesa.razor, bloco
   "else" apos o skeleton), aplicado somente quando o GET /state ja
   respondeu. `display: contents` faz este <div> nao gerar caixa propria
   (sem width/height/position/transform) — ele nunca se torna ancestral
   posicionado nem intercepta cliques, preservando a garantia da task 3.0
   ("Riscos Conhecidos": nenhum wrapper por cima do mapa/paineis). Cada
   alvo real usa POR NOME os keyframes globais de app.css (task 1.0,
   mesa-cine-fade-scale-in/slide-in-left/slide-in-right) — mesmo efeito das
   classes utilitarias .mesa-cine-enter-*, mas como regra propria (nao a
   classe utilitaria) porque os alvos aqui sao elementos filhos de
   componente (GlassPanel, alcancado via ::deep) ou dependem de
   escalonamento por seletor, nao de uma unica classe fixa no markup.
   Cascata de 60ms por camada (mapa -> painel esquerdo -> toolbar -> painel
   direito): cena inteira montada em ~600ms (diagrama F1), dentro da faixa
   de 60-120ms de incremento pedida no requisito. Como esta regra NAO usa a
   classe utilitaria .mesa-cine-enter-*, o kill-switch central de
   app.css nao a alcanca — por isso ha um bloco local de
   prefers-reduced-motion logo abaixo (mesmo padrao ja usado em
   GlassPanel.razor.css/CharacterListSidebar.razor.css: cada folha que
   define uma animacao fora das classes utilitarias centrais precisa do
   proprio override).
   ========================================================================== */
.mesa-enter[b-gxbaw8cc6d] {
    display: contents;
}

.mesa-enter .mesa-map-area[b-gxbaw8cc6d] {
    animation: mesa-cine-fade-scale-in .5s var(--qf-cine-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

/* fill-mode "backwards" (nao "both") nos dois GlassPanel: o fill "forwards" retido apos a
   animacao de entrada sobrepoe, para sempre, o transform/opacity declarado por
   .is-collapsed (animacao vence declaracao normal na cascata) — era isso que fazia os botoes
   de recolher dos dois paineis "nao funcionarem" (o estado mudava, o painel nao se movia).
   "backwards" preserva o estado inicial durante o animation-delay e libera o fill ao fim. */
.mesa-enter[b-gxbaw8cc6d]  .glass-panel-left {
    animation: mesa-cine-slide-in-left .45s var(--qf-cine-ease, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
    animation-delay: 60ms;
}

.mesa-enter .mesa-toolbar-float[b-gxbaw8cc6d] {
    /* Sem keyframe dedicado de "slide-in-top" na camada cinematica (app.css so define
       fade-scale-in/slide-in-left/slide-in-right) — reaproveita fade-scale-in em vez de definir
       um novo @keyframes (fora do escopo desta task, ver techspec.md "REUSE esses keyframes"). */
    animation: mesa-cine-fade-scale-in .45s var(--qf-cine-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
    animation-delay: 120ms;
}

.mesa-enter[b-gxbaw8cc6d]  .glass-panel-right {
    animation: mesa-cine-slide-in-right .45s var(--qf-cine-ease, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
    animation-delay: 180ms;
}

@media (prefers-reduced-motion: reduce) {
    .mesa-enter .mesa-map-area[b-gxbaw8cc6d],
    .mesa-enter .mesa-toolbar-float[b-gxbaw8cc6d],
    .mesa-enter[b-gxbaw8cc6d]  .glass-panel-left,
    .mesa-enter[b-gxbaw8cc6d]  .glass-panel-right {
        animation-name: mesa-cine-fade-scale-in;
        animation-duration: 150ms;
        animation-delay: 0ms;
        /* Sem `transform: none` estatico aqui: ele sobreporia o translateX de .is-collapsed
           (GlassPanel.razor.css) para usuarios com reduced-motion — o keyframe fade-scale-in ja
           controla o transform durante a entrada e o fill "backwards" nao retem nada depois. */
    }
}

/* ==========================================================================
   Micro-interacoes de hover/focus (feature mesa-design-cinematico, task
   7.0/F4): reforcam os controles ja existentes da toolbar/zoom/grid com um
   leve "levante" (transform: translateY/scale, composite-only) alem da
   troca de cor ja presente — mesmo espirito do hover ja aplicado ao card
   de personagem (CharacterListSidebar.razor.css ".mesa-character-row:hover",
   task 4.0). :focus-visible tambem adicionado onde faltava (paridade de
   teclado com os controles que ja tinham o anel).
   ========================================================================== */
.mesa-toolbar-button:hover:not(:disabled)[b-gxbaw8cc6d] {
    transform: translateY(-1px);
}

.mesa-toolbar-button:active:not(:disabled)[b-gxbaw8cc6d] {
    transform: translateY(0);
}

.mesa-zoom-button:hover:not(:disabled)[b-gxbaw8cc6d] {
    transform: scale(1.08);
}

.mesa-zoom-button:focus-visible[b-gxbaw8cc6d] {
    outline: 2px solid var(--qf-rpg-gold-border, rgba(201, 168, 76, 0.45));
    outline-offset: 1px;
}

.mesa-grid-stepper-button:hover:not(:disabled)[b-gxbaw8cc6d] {
    transform: translateY(-1px);
}

.mesa-grid-stepper-button:focus-visible[b-gxbaw8cc6d] {
    outline: 2px solid var(--qf-rpg-gold-border, rgba(201, 168, 76, 0.45));
    outline-offset: 1px;
}

/* Cartoes estaticos da coluna direita (paleta de tokens/habilidades): leve destaque de borda +
   levante ao passar o mouse, para ler como parte da mesma camada "viva" dos demais controles —
   nao sao clicaveis em si (o conteudo interno e que tem os controles), mas o pedido de F4 cobre
   "paineis... e cards" de forma geral. */
/* Sem hover de "levante" nas secoes da coluna direita: no design "Combat Log Card" elas nao sao
   cartoes (ver acima) — o hover vive nos cards internos de cada secao. */

@media (prefers-reduced-motion: reduce) {
    .mesa-toolbar-button[b-gxbaw8cc6d],
    .mesa-zoom-button[b-gxbaw8cc6d],
    .mesa-grid-stepper-button[b-gxbaw8cc6d],
    .mesa-prepare-card[b-gxbaw8cc6d] {
        transition: none;
    }

    .mesa-toolbar-button:hover:not(:disabled)[b-gxbaw8cc6d],
    .mesa-toolbar-button:active:not(:disabled)[b-gxbaw8cc6d],
    .mesa-zoom-button:hover:not(:disabled)[b-gxbaw8cc6d],
    .mesa-grid-stepper-button:hover:not(:disabled)[b-gxbaw8cc6d],
    .mesa-prepare-card:hover[b-gxbaw8cc6d] {
        transform: none;
    }
}

/* ==========================================================================
   Explosao de armadilha acionada (pedido do usuario): renderizada dentro de
   .mesa-map-viewport (mesmo espaco de coordenadas dos tokens — acompanha
   pan/zoom de graca) e por cima do FogCanvas, para todos verem o estouro
   mesmo em celula ainda coberta. O elemento pai usa translate(-50%, -50%)
   APENAS para centrar na celula e nunca e animado (gotcha conhecido do
   redesign: animar transform num elemento que usa transform para centrar
   mata a centralizacao); cada camada filha anima o proprio scale/opacity
   (composite-only), centrada por inset: 0.
   ========================================================================== */
.mesa-trap-explosion[b-gxbaw8cc6d] {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10;
}

.mesa-trap-explosion-core[b-gxbaw8cc6d],
.mesa-trap-explosion-fireball[b-gxbaw8cc6d],
.mesa-trap-explosion-shockwave[b-gxbaw8cc6d] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

/* Clarao central branco-amarelado: o primeiro "flash" do estouro, curto e forte. */
.mesa-trap-explosion-core[b-gxbaw8cc6d] {
    background: radial-gradient(circle, #FFFFFF 0%, #FFE9A8 35%, rgba(255, 179, 71, 0.6) 60%, transparent 75%);
    animation: mesa-trap-core-b-gxbaw8cc6d .35s ease-out both;
}

/* Bola de fogo laranja/vermelha crescendo e queimando ate sumir. */
.mesa-trap-explosion-fireball[b-gxbaw8cc6d] {
    background: radial-gradient(circle, rgba(255, 214, 112, 0.95) 0%, rgba(255, 138, 43, 0.9) 40%, rgba(199, 54, 28, 0.75) 65%, transparent 78%);
    filter: blur(1px);
    animation: mesa-trap-fireball-b-gxbaw8cc6d .65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Onda de choque: anel fino que se expande alem da bola de fogo e some. */
.mesa-trap-explosion-shockwave[b-gxbaw8cc6d] {
    border: 3px solid rgba(255, 196, 110, 0.85);
    box-shadow: 0 0 18px rgba(255, 138, 43, 0.55);
    animation: mesa-trap-shockwave-b-gxbaw8cc6d .8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Fagulhas: pequenos pontos incandescentes que voam do centro na direcao definida por
   --spark-x/--spark-y (inline, em pixels de imagem — uma direcao fixa por fagulha, ver
   Mesa.razor.TrapSparkStyle; pixels e nao %, porque translate(%) e relativo a propria fagulha). */
.mesa-trap-explosion-spark[b-gxbaw8cc6d] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7%;
    height: 7%;
    margin: -3.5% 0 0 -3.5%;
    border-radius: 50%;
    background: radial-gradient(circle, #FFE9A8 0%, #FF8A2B 70%, transparent 100%);
    animation: mesa-trap-spark-b-gxbaw8cc6d 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes mesa-trap-core-b-gxbaw8cc6d {
    0% { transform: scale(0.1); opacity: 1; }
    60% { transform: scale(0.55); opacity: 1; }
    100% { transform: scale(0.8); opacity: 0; }
}

@keyframes mesa-trap-fireball-b-gxbaw8cc6d {
    0% { transform: scale(0.15); opacity: 0.95; }
    55% { transform: scale(0.9); opacity: 0.85; }
    100% { transform: scale(1.05); opacity: 0; }
}

@keyframes mesa-trap-shockwave-b-gxbaw8cc6d {
    0% { transform: scale(0.2); opacity: 0.9; }
    100% { transform: scale(1.55); opacity: 0; }
}

@keyframes mesa-trap-spark-b-gxbaw8cc6d {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--spark-x, 0px), var(--spark-y, 0px)) scale(0.3); opacity: 0; }
}

/* Kill-switch de prefers-reduced-motion (mesmo padrao dos demais blocos deste arquivo): a
   explosao vira um unico pulso quase instantaneo em vez do estouro completo. */
@media (prefers-reduced-motion: reduce) {
    .mesa-trap-explosion-core[b-gxbaw8cc6d],
    .mesa-trap-explosion-fireball[b-gxbaw8cc6d],
    .mesa-trap-explosion-shockwave[b-gxbaw8cc6d],
    .mesa-trap-explosion-spark[b-gxbaw8cc6d] {
        animation-duration: .01ms !important;
    }
}
/* /Components/Shared/AbilityCard.razor.rz.scp.css */
/* ── Tema cinematico (feature mesa-design-cinematico, techspec.md, task 6.0) ────────────────
   MudCard repassa atributos extras (incl. o scope [b-xxx] do Blazor) para o
   seu root div via @attributes, portanto .ability-card e atingido diretamente
   sem ::deep. Reestilizado com a paleta indigo -> roxo (--qf-cine-*, fallback inline, mesmo
   padrao de GlassPanel.razor.css/SelectedTokenPanel.razor.css) no lugar do pergaminho/dourado
   anterior — aqui o dourado nao se aplica (nao ha estado de "critico" marcado no markup deste
   componente; sem sessao de combate/turno, o dourado fica reservado a feedback pontual como o
   popup de critico em TokenOnMap.razor.css). Apenas transform/opacity/border/background
   transicionam no hover — nunca box-shadow/filter animados (repaint continuo). */

.ability-card[b-vztcjxdarv] {
    background-color: var(--qf-cine-glass-bg, rgba(16, 22, 38, 0.62));
    border-color: var(--qf-cine-glass-border, rgba(139, 160, 255, 0.22));
    color: var(--qf-text-primary, #F2F2F3);
    transition: transform 0.2s var(--qf-cine-ease, cubic-bezier(0.22, 1, 0.36, 1)),
        border-color 0.2s ease, background-color 0.2s ease;
}

.ability-card:hover[b-vztcjxdarv] {
    border-color: var(--qf-primary, #5B8DEF);
    background-color: rgba(91, 141, 239, 0.08);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .ability-card[b-vztcjxdarv] {
        transition-duration: 0ms;
    }

    .ability-card:hover[b-vztcjxdarv] {
        transform: none;
    }
}
/* /Components/Shared/ApplyDamagePanel.razor.rz.scp.css */
.apply-damage-card[b-nud0jixxnk] {
    background-color: var(--qf-surface, #121212);
    border: 1px solid var(--qf-border, #2E2E2E);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.apply-damage-empty[b-nud0jixxnk] {
    font-size: 13px;
    color: var(--qf-text-secondary, #ABAFB8);
    margin: 0;
}

.apply-damage-row[b-nud0jixxnk] {
    display: flex;
    gap: 8px;
}

.apply-damage-input[b-nud0jixxnk] {
    flex-grow: 1;
    min-width: 0;
    height: 38px;
    border: 1px solid var(--qf-border, #2E2E2E);
    border-radius: 6px;
    padding: 9px 10px;
    background-color: var(--qf-surface-2, #1A1A1A);
    color: var(--qf-text-primary, #F2F2F3);
}

.apply-damage-button[b-nud0jixxnk] {
    flex-shrink: 0;
    height: 38px;
    padding-inline: 12px;
    background-color: var(--qf-primary-strong, #2F5FD4);
    color: var(--qf-primary-contrast, #FFFFFF);
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

.apply-damage-button:disabled[b-nud0jixxnk] {
    opacity: 0.5;
    cursor: not-allowed;
}

.apply-damage-hint[b-nud0jixxnk] {
    font-size: 12px;
    color: var(--qf-text-secondary, #ABAFB8);
    margin: 0;
}

.apply-damage-error[b-nud0jixxnk] {
    font-size: 12px;
    color: var(--qf-danger-text, #F2879A);
    margin: 0;
}
/* /Components/Shared/CharacterListSidebar.razor.rz.scp.css */
/* Barra lateral de personagens — reskin fiel ao design "Barra Lateral Personagens"
   (claude.ai/design). O icone/titulo "Personagens" e o botao de colapso do topo ja sao
   fornecidos pelo GlassPanel pai (ver Mesa.razor / GlassPanel.razor); este componente pinta o
   CORPO do painel: a linha da sessao (codigo + estado ao vivo), o cabecalho "Na mesa" e a lista de
   personagens. As secoes sao separadas por hairlines (rgba(255,255,255,0.07)) em vez de sub-cartoes
   de vidro, como no design. As cores/fontes seguem os valores do mockup (roxo #7C6CFF, texto
   #ECEAF6, muted #8B87A8, mono JetBrains como stand-in do IBM Plex Mono), com fallback nos tokens
   --qf-* do tema. A largura/rolagem da coluna vem de Mesa.razor.css (".mesa-page ::deep
   .mesa-sidebar-left", fora do blast-radius deste arquivo). */
.mesa-sidebar-left[b-hbg10bmcyg] {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-family: 'Sora', var(--qf-font-sans, sans-serif);
    color: #ECEAF6;
}

/* A linha da sessao (.mesa-session-row + rotulo/codigo/spacer) foi removida do markup a pedido do
   usuario — o CSS correspondente saiu junto. */

/* ── Bloco "Na mesa" ─────────────────────────────────────────────────────── */
.mesa-characters-block[b-hbg10bmcyg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Sem a faixa da sessao acima, o bloco "Na mesa" passa a ser o topo do painel — sem o
       padding-top que separava as duas secoes. */
    /* Altura minima (pedido do usuario): garante presenca visual do bloco "Na mesa" mesmo com
       poucos/nenhum personagem, sem colapsar contra o painel do selecionado abaixo. */
    min-height: 150px;
}

.mesa-characters-heading[b-hbg10bmcyg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px;
}

.mesa-characters-heading-label[b-hbg10bmcyg] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8B87A8;
}

.mesa-characters-count[b-hbg10bmcyg] {
    font-size: 10px;
    font-weight: 700;
    color: #6E6A88;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    padding: 1px 7px;
}

.mesa-empty-hint[b-hbg10bmcyg] {
    font-size: 12px;
    line-height: 1.5;
    color: #8B87A8;
    margin: 0;
    padding: 4px 2px;
}

.mesa-empty-hint strong[b-hbg10bmcyg] {
    color: #B7ABFF;
    font-weight: 700;
}

/* ── Lista de personagens ────────────────────────────────────────────────── */
.mesa-character-list[b-hbg10bmcyg] {
    list-style: none;
    margin: 0;
    padding: 0 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 340px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.mesa-character-list[b-hbg10bmcyg]::-webkit-scrollbar {
    width: 6px;
}

.mesa-character-list[b-hbg10bmcyg]::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
}

.mesa-character-list > li[b-hbg10bmcyg] {
    display: block;
}

/* Cada linha e um botao selecionavel (design "Barra Lateral Personagens"): avatar + nome com o PV
   inline a direita e a barra fina de 4px logo abaixo. .is-selected pinta o destaque roxo do mock. */
.mesa-character-row[b-hbg10bmcyg] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 10px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    text-align: left;
    cursor: pointer;
    color: #ECEAF6;
    font: inherit;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mesa-character-row:hover[b-hbg10bmcyg] {
    background: rgba(124, 108, 255, 0.08);
    border-color: rgba(124, 108, 255, 0.55);
}

.mesa-character-row.is-selected[b-hbg10bmcyg] {
    background: rgba(124, 108, 255, 0.12);
    border-color: rgba(124, 108, 255, 0.55);
}

.mesa-character-row:focus-visible[b-hbg10bmcyg] {
    outline: 2px solid #7C6CFF;
    outline-offset: 1px;
}

.mesa-character-avatar[b-hbg10bmcyg] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7C6CFF, #4B3DBB);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}

.mesa-character-row-info[b-hbg10bmcyg] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    flex: 1 1 auto;
}

.mesa-character-row-line[b-hbg10bmcyg] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.mesa-character-name[b-hbg10bmcyg] {
    font-size: 13.5px;
    font-weight: 700;
    color: #ECEAF6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mesa-character-hp[b-hbg10bmcyg] {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 600;
    color: #8B87A8;
    white-space: nowrap;
}

.mesa-character-hp-track[b-hbg10bmcyg] {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.mesa-character-hp-fill[b-hbg10bmcyg] {
    height: 100%;
    border-radius: 999px;
    transition: width 0.25s ease;
}

.mesa-character-hp-pending[b-hbg10bmcyg] {
    margin-left: auto;
    font-size: 11.5px;
    font-style: italic;
    color: #6E6A88;
}

@media (prefers-reduced-motion: reduce) {

    .mesa-character-row[b-hbg10bmcyg],
    .mesa-character-hp-fill[b-hbg10bmcyg] {
        transition: none;
    }
}
/* /Components/Shared/CharacterSheetDrawer.razor.rz.scp.css */
/* Ficha interativa estilo D&D Beyond (feature prd-ficha-dnd-beyond, task 3.0). Layout/componentes
   derivados do design "Ficha" do Claude Design (projeto 94c02a99), mapeados aos tokens --qf-* do
   tema roxo/lima em vez de hardcodar os hexes do design: cards de atributo com pill de modificador,
   listas de salvaguardas/pericias em grade de 2 colunas com o valor em "badge", hover com glow
   roxo e o valor sempre num selo (--qf-primary-soft-*). Casca visual "glass" propria (nao
   reaproveita GlassPanel.razor, ver comentario no .razor): mesmos tokens --qf-cine-* de
   GlassPanel.razor.css/Mesa.razor.css, para que este painel leia como parte da mesma familia
   visual dos demais paineis flutuantes da Mesa, com fallback inline para renderizar corretamente
   fora de uma arvore .mesa-page (ex.: testes bUnit isolados). Posicao/z-index (absolute, irma do
   mapa) sao definidos por Mesa.razor.css — este arquivo cuida apenas da aparencia interna. */
.character-sheet-drawer[b-vro3wmjf8k] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    border-radius: 16px;
    border: 1px solid var(--qf-cine-glass-border, rgba(91, 35, 255, 0.22));
    background: var(--qf-cine-glass-bg, rgba(26, 22, 42, 0.88));
    color: var(--qf-text-primary, #edecf5);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(var(--qf-cine-blur, 16px));
    -webkit-backdrop-filter: blur(var(--qf-cine-blur, 16px));
}

@supports not (backdrop-filter: blur(1px)) {
    .character-sheet-drawer[b-vro3wmjf8k] {
        background: rgba(19, 17, 32, 0.96);
    }
}

/* Cabecalho tipo modal: "FICHA" em Cinzel + selo "QUEST FORGE" apagado, e o botao de fechar como
   quadrado arredondado (nao circulo), como no design. */
.character-sheet-drawer-header[b-vro3wmjf8k] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--qf-cine-glass-border, rgba(91, 35, 255, 0.22));
    background: rgba(255, 255, 255, 0.02);
    flex-shrink: 0;
}

.character-sheet-drawer-title[b-vro3wmjf8k] {
    flex: 0 0 auto;
    margin: 0;
    font-family: var(--qf-rpg-font-heading, "Cinzel", Georgia, serif);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--qf-text-primary, #edecf5);
}

/* Selo da marca ao lado do titulo (design "Ficha"): toma a folga e empurra o botao fechar a
   direita, dispensando um flex:1 no titulo. */
.character-sheet-drawer-wordmark[b-vro3wmjf8k] {
    margin-right: auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--qf-text-secondary, #b1adc6);
}

.character-sheet-drawer-close[b-vro3wmjf8k] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--qf-cine-glass-border, rgba(91, 35, 255, 0.22));
    background: rgba(255, 255, 255, 0.03);
    color: var(--qf-text-secondary, #b1adc6);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.character-sheet-drawer-close:hover[b-vro3wmjf8k] {
    background-color: var(--qf-primary-soft-bg, rgba(91, 35, 255, 0.12));
    border-color: var(--qf-primary, #5b23ff);
    color: var(--qf-text-primary, #edecf5);
}

.character-sheet-drawer-close:focus-visible[b-vro3wmjf8k] {
    outline: 2px solid var(--qf-primary, #5b23ff);
    outline-offset: 1px;
}

/* Corpo com rolagem propria (requisito de layout responsivo: "overflow-y proprio, nao inutiliza a
   mesa em resolucoes menores") — a ficha completa (cabecalho + 6 atributos + 6 salvaguardas + 18
   pericias) e mais alta do que a maioria das viewports. */
.character-sheet-drawer-body[b-vro3wmjf8k] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Linha de topo (identidade + vitais lado a lado): com a ficha a 50% da mesa (ver
   .mesa-sheet-drawer-float em Mesa.razor.css) sobra largura para o cabecalho inteiro numa linha;
   em telas estreitas o flex-wrap empilha vitais abaixo da identidade, como antes. */
.character-sheet-drawer-top[b-vro3wmjf8k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--qf-cine-glass-border, rgba(91, 35, 255, 0.16));
}

.character-sheet-drawer-top .character-sheet-drawer-summary[b-vro3wmjf8k] {
    flex: 0 1 auto;
    min-width: 200px;
}

.character-sheet-drawer-top .character-sheet-drawer-vitals[b-vro3wmjf8k] {
    flex: 1 1 320px;
}

/* Corpo em duas colunas (atributos/salvaguardas/ataques | pericias): auto-fit colapsa para uma
   coluna unica quando a ficha estreita, preservando a ordem de leitura original. align-items:
   start evita que a coluna mais baixa estique os itens. */
.character-sheet-drawer-columns[b-vro3wmjf8k] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    align-items: start;
}

.character-sheet-drawer-col[b-vro3wmjf8k] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

.character-sheet-drawer-empty[b-vro3wmjf8k] {
    margin: 0;
    font-size: 13px;
    color: var(--qf-text-secondary, #b1adc6);
}

.character-sheet-drawer-error[b-vro3wmjf8k] {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--qf-danger-text, #f2879a);
}

/* Cabecalho do personagem: avatar quadrado arredondado com gradiente da marca, nome em Cinzel. */
.character-sheet-drawer-summary[b-vro3wmjf8k] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.character-sheet-avatar[b-vro3wmjf8k] {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid var(--qf-cine-glass-border, rgba(91, 35, 255, 0.22));
}

.character-sheet-avatar-initials[b-vro3wmjf8k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    color: var(--qf-primary-contrast, #ffffff);
    background: var(--qf-cine-grad-primary, linear-gradient(135deg, #5b23ff 0%, #b18aff 100%));
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(91, 35, 255, 0.35);
}

.character-sheet-drawer-identity[b-vro3wmjf8k] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.character-sheet-drawer-name[b-vro3wmjf8k] {
    font-family: var(--qf-rpg-font-heading, "Cinzel", Georgia, serif);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.character-sheet-drawer-subtitle[b-vro3wmjf8k] {
    margin-top: 2px;
    font-size: 13px;
    color: var(--qf-text-secondary, #b1adc6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Vitais (PV/CA/Iniciativa/Deslocamento/Bonus prof.) em cards centrados — dl/dt/dd semantico
   (lista de descricao rotulo->valor), coerente com o restante do markup da ficha. */
.character-sheet-drawer-vitals[b-vro3wmjf8k] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 10px;
    margin: 0;
}

.character-sheet-vital[b-vro3wmjf8k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 8px;
    border-radius: 12px;
    background: var(--qf-surface-2, #191530);
    border: 1px solid var(--qf-cine-glass-border, rgba(91, 35, 255, 0.22));
}

.character-sheet-vital dt[b-vro3wmjf8k] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--qf-text-secondary, #b1adc6);
}

.character-sheet-vital dd[b-vro3wmjf8k] {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Rotulos de secao: caixa alta, tracking largo, apagado — sem separador (o design usa espacamento
   generoso entre blocos, nao linhas divisorias). */
.character-sheet-section-title[b-vro3wmjf8k] {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--qf-text-secondary, #b1adc6);
}

/* Grade de 6 atributos (req. 7-8 do PRD): cada um e um botao clicavel (1d20+mod). Sempre os 6
   numa unica linha (estilo D&D Beyond); minmax(0, 1fr) deixa os cards encolherem por igual sem
   estourar a coluna. */
.character-sheet-attribute-grid[b-vro3wmjf8k] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.character-sheet-attribute-card[b-vro3wmjf8k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 4px 9px;
    border-radius: 12px;
    border: 1px solid var(--qf-cine-glass-border, rgba(91, 35, 255, 0.28));
    background: var(--qf-surface-2, #191530);
    color: var(--qf-text-primary, #edecf5);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease,
        transform .15s var(--qf-cine-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.character-sheet-attribute-card:hover:not(:disabled)[b-vro3wmjf8k] {
    background-color: var(--qf-surface-3, #241f3a);
    border-color: var(--qf-primary, #5b23ff);
    box-shadow: 0 4px 14px rgba(91, 35, 255, 0.28);
    transform: translateY(-1px);
}

.character-sheet-attribute-card:focus-visible[b-vro3wmjf8k] {
    outline: 2px solid var(--qf-primary, #5b23ff);
    outline-offset: 1px;
}

.character-sheet-attribute-card:disabled[b-vro3wmjf8k] {
    opacity: 0.5;
    cursor: not-allowed;
}

.character-sheet-attribute-name[b-vro3wmjf8k] {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--qf-text-secondary, #b1adc6);
}

.character-sheet-attribute-value[b-vro3wmjf8k] {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

/* Modificador num "pill" arredondado (assinatura do design). */
.character-sheet-attribute-modifier[b-vro3wmjf8k] {
    margin-top: 2px;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--qf-primary-contrast, #ffffff);
    background: var(--qf-primary-soft-bg, rgba(91, 35, 255, 0.2));
    border: 1px solid var(--qf-primary-soft-border, rgba(91, 35, 255, 0.4));
}

/* Listas de salvaguardas/pericias (req. 9-14 do PRD): cada item e um botao com marcador de
   proficiencia (bolinha) que so acende quando o personagem e proficiente, e o valor sempre num
   "badge" a direita. Por padrao coluna unica (usada pelos ataques); salvaguardas e pericias viram
   grade de 2 colunas via seletor de aria-label abaixo. */
.character-sheet-roll-list[b-vro3wmjf8k] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Salvaguardas e pericias em duas colunas fixas (como o design): minmax(0, 1fr) deixa os itens
   encolherem por igual (nome trunca com ellipsis) em vez de auto-fit abrir 3+ colunas e cortar os
   nomes em larguras intermediarias. */
.character-sheet-roll-list[aria-label="Salvaguardas"][b-vro3wmjf8k],
.character-sheet-roll-list[aria-label="Perícias"][b-vro3wmjf8k] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.character-sheet-roll-item[b-vro3wmjf8k] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--qf-cine-glass-border, rgba(91, 35, 255, 0.22));
    background: var(--qf-surface-2, #191530);
    color: var(--qf-text-primary, #edecf5);
    font-size: 13.5px;
    cursor: pointer;
    text-align: left;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.character-sheet-roll-item:hover:not(:disabled)[b-vro3wmjf8k] {
    background-color: var(--qf-surface-3, #241f3a);
    border-color: var(--qf-primary, #5b23ff);
    box-shadow: 0 4px 14px rgba(91, 35, 255, 0.22);
}

.character-sheet-roll-item:focus-visible[b-vro3wmjf8k] {
    outline: 2px solid var(--qf-primary, #5b23ff);
    outline-offset: 1px;
}

.character-sheet-roll-item:disabled[b-vro3wmjf8k] {
    opacity: 0.5;
    cursor: not-allowed;
}

.character-sheet-proficiency-dot[b-vro3wmjf8k] {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid var(--qf-text-secondary, #b1adc6);
    background: transparent;
}

/* Destaque de proficiencia (req. 10/13 do PRD): bolinha preenchida com o roxo da marca e nome em
   negrito num roxo claro (contraste em fundo escuro) — nunca Color.Secondary do MudBlazor (footgun
   conhecido do tema). */
.character-sheet-roll-item.is-proficient .character-sheet-proficiency-dot[b-vro3wmjf8k] {
    background: var(--qf-primary-hover, #6d3aff);
    border-color: var(--qf-primary-hover, #6d3aff);
}

.character-sheet-roll-item.is-proficient .character-sheet-roll-item-name[b-vro3wmjf8k] {
    font-weight: 700;
    color: #cdbfff;
}

.character-sheet-roll-item-name[b-vro3wmjf8k] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.character-sheet-roll-item-name small[b-vro3wmjf8k] {
    color: var(--qf-text-secondary, #b1adc6);
    font-weight: 600;
}

/* Valor em "badge" (mod da salvaguarda/pericia, dano do ataque). */
.character-sheet-roll-item-bonus[b-vro3wmjf8k] {
    flex-shrink: 0;
    min-width: 26px;
    padding: 2px 9px;
    border-radius: 8px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--qf-text-primary, #edecf5);
    background: var(--qf-primary-soft-bg, rgba(91, 35, 255, 0.18));
    border: 1px solid var(--qf-primary-soft-border, rgba(91, 35, 255, 0.4));
}

/* Cartao de habilidade (pedido do usuario: armas + magias num bloco "Habilidades" estilo D&D
   Beyond). Empilha um cabecalho (icone + nome + selo de dano/usos), uma linha de meta (acerto/vs
   Defesa ou tipo/efeito) e, opcionalmente, a descricao — mais rico que o item de rolagem de uma
   linha, reaproveitando a mesma casca (borda/fundo/hover) de .character-sheet-roll-item. */
.character-sheet-ability-item[b-vro3wmjf8k] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--qf-cine-glass-border, rgba(91, 35, 255, 0.22));
    background: var(--qf-surface-2, #191530);
    color: var(--qf-text-primary, #edecf5);
    cursor: pointer;
    text-align: left;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.character-sheet-ability-item:hover:not(:disabled)[b-vro3wmjf8k] {
    background-color: var(--qf-surface-3, #241f3a);
    border-color: var(--qf-primary, #5b23ff);
    box-shadow: 0 4px 14px rgba(91, 35, 255, 0.22);
}

.character-sheet-ability-item:focus-visible[b-vro3wmjf8k] {
    outline: 2px solid var(--qf-primary, #5b23ff);
    outline-offset: 1px;
}

.character-sheet-ability-item:disabled[b-vro3wmjf8k] {
    opacity: 0.5;
    cursor: not-allowed;
}

.character-sheet-ability-head[b-vro3wmjf8k] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.character-sheet-ability-icon[b-vro3wmjf8k] {
    flex-shrink: 0;
    font-size: 15px;
    line-height: 1;
}

.character-sheet-ability-name[b-vro3wmjf8k] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Linha de meta: acerto/dano/defesa (arma) ou tipo/efeito (magia). Fonte tabular para os numeros,
   apagada, com o valor-chave em <strong> herdando a cor primaria do texto. */
.character-sheet-ability-meta[b-vro3wmjf8k] {
    font-size: 12px;
    color: var(--qf-text-secondary, #b1adc6);
    font-variant-numeric: tabular-nums;
}

.character-sheet-ability-meta strong[b-vro3wmjf8k] {
    color: var(--qf-text-primary, #edecf5);
    font-weight: 700;
}

.character-sheet-ability-desc[b-vro3wmjf8k] {
    font-size: 12px;
    line-height: 1.35;
    color: var(--qf-text-secondary, #b1adc6);
    /* Com magias projetadas em habilidades, um conjurador chega a ~10 itens; a descricao
       integral de cada magia esticava a ficha indefinidamente. Duas linhas bastam para
       reconhecer a magia — o texto completo continua no title (AbilityTooltip). */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* Dica exibida quando o personagem nao tem token no mapa ativo (req. 15-17 do PRD, task 4.0,
   "Riscos Conhecidos": "o painel desabilita o ataque com hint"). */
.character-sheet-attack-hint[b-vro3wmjf8k] {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--qf-rpg-gold, #e4ff30);
}

/* Menu de modo de rolagem (pedido do usuario: "todas as rolagens da ficha do jogador devem ter a
   opcao de vantagem e desvantagem"). Clicar num atributo/salvaguarda/pericia abre um menuzinho
   flutuante ancorado ao item (Normal/Vantagem/Desvantagem) em vez de rolar direto. O item vira o
   "anchor" posicionado; o menu abre logo abaixo, alinhado a direita. */
.character-sheet-roll-anchor[b-vro3wmjf8k] {
    position: relative;
    display: flex;
    min-width: 0;
}

.character-sheet-roll-anchor > .character-sheet-attribute-card[b-vro3wmjf8k] {
    flex: 1 1 auto;
    width: 100%;
}

/* Cada <li> de salvaguarda/pericia tambem e o anchor do proprio menu. */
.character-sheet-roll-list > li[b-vro3wmjf8k] {
    position: relative;
}

/* Item com menu aberto: mantem o realce do hover (borda/fundo roxos) para indicar o alvo ativo. */
.character-sheet-attribute-card.is-menu-open[b-vro3wmjf8k],
.character-sheet-roll-item.is-menu-open[b-vro3wmjf8k] {
    background-color: var(--qf-surface-3, #241f3a);
    border-color: var(--qf-primary, #5b23ff);
    box-shadow: 0 4px 14px rgba(91, 35, 255, 0.28);
}

.character-sheet-roll-menu[b-vro3wmjf8k] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    min-width: 176px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid var(--qf-cine-glass-border, rgba(91, 35, 255, 0.32));
    background: var(--qf-surface-3, #241f3a);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
    animation: character-sheet-roll-menu-in-b-vro3wmjf8k .12s var(--qf-cine-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

@keyframes character-sheet-roll-menu-in-b-vro3wmjf8k {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.character-sheet-roll-menu-item[b-vro3wmjf8k] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--qf-text-primary, #edecf5);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.character-sheet-roll-menu-item:hover[b-vro3wmjf8k] {
    background-color: var(--qf-primary-soft-bg, rgba(91, 35, 255, 0.18));
    border-color: var(--qf-primary, #5b23ff);
}

.character-sheet-roll-menu-item:focus-visible[b-vro3wmjf8k] {
    outline: 2px solid var(--qf-primary, #5b23ff);
    outline-offset: 1px;
}

.character-sheet-roll-menu-icon[b-vro3wmjf8k] {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    font-size: 12px;
    line-height: 1;
    color: var(--qf-text-secondary, #b1adc6);
}

/* Vantagem em verde, desvantagem em vermelho (linguagem universal de VTT). */
.character-sheet-roll-menu-item-advantage .character-sheet-roll-menu-icon[b-vro3wmjf8k] {
    color: var(--qf-success-text, #6ee7a8);
}

.character-sheet-roll-menu-item-disadvantage .character-sheet-roll-menu-icon[b-vro3wmjf8k] {
    color: var(--qf-danger-text, #f2879a);
}

/* Backdrop invisivel que fecha o menu ao clicar fora dele. Fixo, mas contido pela casca da ficha
   (que ja e um contexto de empilhamento por causa do backdrop-filter), cobrindo exatamente a area
   da ficha; z-index abaixo do menu (40) e acima dos itens rolaveis. */
.character-sheet-roll-menu-backdrop[b-vro3wmjf8k] {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .character-sheet-attribute-card[b-vro3wmjf8k],
    .character-sheet-roll-item[b-vro3wmjf8k],
    .character-sheet-ability-item[b-vro3wmjf8k] {
        transition: none;
    }

    .character-sheet-roll-menu[b-vro3wmjf8k] {
        animation: none;
    }
}
/* /Components/Shared/CharacterSheetPanel.razor.rz.scp.css */
/* Ficha embutida no SelectedTokenPanel (feature prd-mesa-rpg-jogavel, req. 19-24 do PRD), reskinada
   para o design "Barra Lateral Personagens" (claude.ai/design). Isolamento de CSS por componente
   (regras de SelectedTokenPanel.razor.css não alcançam este markup). Paleta do mock: texto #ECEAF6,
   muted #8B87A8, acento roxo #7C6CFF, nível em lime (--qf-accent). A tabela base/bônus/efetivo/mod
   é preservada (req. 28: destaque do bônus de item + origem no tooltip). */
.mesa-character-sheet[b-fnrqcti3cg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-family: 'Sora', var(--qf-font-sans, sans-serif);
    color: #ECEAF6;
}

.mesa-character-sheet-title[b-fnrqcti3cg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #8B87A8;
    margin: 0;
}

/* Nível do personagem: badge lime do mock (#D9E84A ≈ --qf-accent), texto escuro. */
.mesa-character-level[b-fnrqcti3cg] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--qf-accent-contrast, #1A1A05);
    background-color: var(--qf-accent, #D9E84A);
    padding: 2px 8px;
    border-radius: 6px;
    vertical-align: middle;
    text-transform: none;
}

/* Botão destacado de distribuir pontos ganhos ao subir de nível: acento lime. */
.mesa-allocate-points-button[b-fnrqcti3cg] {
    border-color: color-mix(in srgb, var(--qf-accent, #D9E84A) 45%, transparent);
    background-color: color-mix(in srgb, var(--qf-accent, #D9E84A) 14%, transparent);
    color: #ECEAF6;
}

.mesa-allocate-points-button:hover:not(:disabled)[b-fnrqcti3cg] {
    background-color: color-mix(in srgb, var(--qf-accent, #D9E84A) 24%, transparent);
    border-color: color-mix(in srgb, var(--qf-accent, #D9E84A) 60%, transparent);
}

/* Botão destacado de escolher habilidade pendente ao subir de nível (feature
   prd-habilidades-por-nivel): acento primário roxo para distinguir da distribuição de pontos. */
.mesa-resolve-ability-button[b-fnrqcti3cg] {
    border-color: color-mix(in srgb, var(--qf-primary, #5B23FF) 55%, transparent);
    background-color: color-mix(in srgb, var(--qf-primary, #5B23FF) 18%, transparent);
    color: #ECEAF6;
}

.mesa-resolve-ability-button:hover:not(:disabled)[b-fnrqcti3cg] {
    background-color: color-mix(in srgb, var(--qf-primary, #5B23FF) 30%, transparent);
    border-color: color-mix(in srgb, var(--qf-primary, #5B23FF) 70%, transparent);
}

.mesa-character-sheet-subtitle[b-fnrqcti3cg] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8B87A8;
    margin: 4px 0 0;
}

/* Tabela de atributos compacta: o painel vive dentro do GlassPanel esquerdo (~256px úteis), então
   table-layout: fixed + rótulos abreviados (FOR/DES/CON...) + tabular-nums evitam quebra. */
.mesa-attribute-table[b-fnrqcti3cg] {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: #ECEAF6;
}

.mesa-attribute-table th[b-fnrqcti3cg],
.mesa-attribute-table td[b-fnrqcti3cg] {
    padding: 4px 2px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mesa-attribute-table .attr-col-name[b-fnrqcti3cg] {
    width: 30%;
    text-align: left;
}

.mesa-attribute-table th[scope="row"][b-fnrqcti3cg] {
    font-weight: 600;
    color: #8B87A8;
}

.mesa-attribute-table thead th[b-fnrqcti3cg] {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6E6A88;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 5px;
}

.mesa-attr-abbr[b-fnrqcti3cg] {
    text-decoration: none;
    border-bottom: none;
    cursor: help;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #ECEAF6;
}

/* Valor efetivo em destaque — a coluna que o jogador mais olha. */
.mesa-attribute-table td[data-testid="attr-effective"][b-fnrqcti3cg] {
    font-weight: 800;
    color: #ECEAF6;
}

/* Defesa (CA) como chip roxo do mock. */
.mesa-character-sheet-defense[b-fnrqcti3cg] {
    font-size: 11.5px;
    color: #8B87A8;
    font-weight: 600;
    margin: 2px 0 0;
}

.mesa-character-sheet-defense strong[b-fnrqcti3cg] {
    display: inline-block;
    margin-left: 4px;
    font-size: 11px;
    font-weight: 800;
    color: #C9C5E0;
    background: rgba(124, 108, 255, 0.12);
    border: 1px solid rgba(124, 108, 255, 0.30);
    border-radius: 7px;
    padding: 1px 8px;
}

/* Destaque de bônus de item ativo (req. 28 do PRD): verde para bônus positivo, vermelho para
   penalidade. Mantém os tokens semânticos do tema (nunca Color.Secondary do MudBlazor). */
.mesa-attribute-bonus-positive[b-fnrqcti3cg] {
    color: var(--qf-success-text, #3DDC97);
    font-weight: 700;
    cursor: help;
}

.mesa-attribute-bonus-negative[b-fnrqcti3cg] {
    color: var(--qf-danger-text, #F76D7D);
    font-weight: 700;
    cursor: help;
}

.mesa-attack-list[b-fnrqcti3cg] {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mesa-attack-list li[b-fnrqcti3cg] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    background: #13131F;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 9px;
    padding: 7px 10px;
}

.mesa-attack-name[b-fnrqcti3cg] {
    font-weight: 800;
    font-size: 12.5px;
    color: #ECEAF6;
}

.mesa-attack-meta[b-fnrqcti3cg] {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: #8B87A8;
    text-align: right;
}

/* Ações do mestre (Editar ficha / Subir nível / Dar item) empilhadas com largura uniforme. */
/* Grade de 2 colunas (pedido do usuário): os botões do mestre (Editar ficha / Subir de nível /
   Dar item) ficavam empilhados em largura total, contribuindo para a barra de rolagem da barra
   lateral. Em duas colunas ocupam menos linhas — mesma abordagem de ".selected-actions" no
   SelectedTokenPanel. */
.mesa-character-sheet-actions[b-fnrqcti3cg] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-top: 4px;
    align-items: start;
}

/* Botão de ação: mesmo estilo do mock replicado aqui pelo isolamento de CSS por componente. */
.mesa-toolbar-button[b-fnrqcti3cg] {
    width: 100%;
    min-height: 40px;
    padding: 10px 12px;
    border-radius: 11px;
    font-size: 12.5px;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background-color: rgba(255, 255, 255, 0.03);
    color: #C9C5E0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mesa-toolbar-button:hover:not(:disabled)[b-fnrqcti3cg] {
    background-color: rgba(255, 255, 255, 0.07);
    color: #ECEAF6;
}

.mesa-toolbar-button:disabled[b-fnrqcti3cg] {
    opacity: 0.5;
    cursor: not-allowed;
}

.mesa-toolbar-button:focus-visible[b-fnrqcti3cg] {
    outline: 2px solid #7C6CFF;
    outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
    .mesa-toolbar-button[b-fnrqcti3cg] {
        transition: none;
    }
}
/* /Components/Shared/ChatPanel.razor.rz.scp.css */
/* Skin "Combat Log Card" (claude.ai/design, opcao 3A, secao "CHAT & DADOS" + rodape composer).
   O painel e transparente (a moldura vem do GlassPanel); o composer e a faixa #161226 colada na
   borda inferior do painel — as margens negativas anulam o padding de 14px/16px do
   .glass-panel-body para o rodape ir de borda a borda, como no design. */

.chat-panel[b-roi7tvit6g] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: transparent;
    color: var(--dc-text, #e8e4f2);
    font-family: var(--dc-font, 'Sora', sans-serif);
    gap: 8px;
}

.chat-panel-feed[b-roi7tvit6g] {
    /* flex-basis 0 + min-height 0: o feed ocupa exatamente o espaco que sobra entre o cabecalho
       e o composer e TRUNCA as mensagens com a propria barra de rolagem. O auto-scroll no
       code-behind mantem a ultima mensagem sempre visivel. */
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--dc-border, #2b2540) transparent;
}

.chat-panel-feed[b-roi7tvit6g]::-webkit-scrollbar {
    width: 6px;
}

.chat-panel-feed[b-roi7tvit6g]::-webkit-scrollbar-thumb {
    background-color: var(--dc-border, #2b2540);
    border-radius: 999px;
}

.chat-panel-entries[b-roi7tvit6g] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Entrada de cada mensagem/rolagem ao ser montada no feed (fade + leve escala, composite-only).
   Reaproveita o keyframe global mesa-cine-fade-scale-in (app.css) — o Blazor so cria o no DOM de
   um item quando ele e adicionado ao feed, entao mensagens ja existentes nao reanimam. */
.chat-panel-entries[b-roi7tvit6g]  .chat-rich-card {
    animation: mesa-cine-fade-scale-in .35s var(--qf-cine-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

.chat-panel-empty[b-roi7tvit6g] {
    margin: auto 0;
    text-align: center;
    color: var(--dc-text-dim, #6b6580);
    font-size: 12px;
}

.chat-panel-error[b-roi7tvit6g] {
    margin: 0;
    color: var(--dc-red, #f87171);
    font-size: 12px;
}

/* --------------------------------------------------------------------------
   Composer (design 3A, rodape): border-top #2b2540, fundo #161226, tres
   linhas — modo, dados e input. Margens negativas anulam o padding do
   .glass-panel-body (14px vertical / 16px horizontal) para a faixa colar
   nas bordas do painel.
   -------------------------------------------------------------------------- */
.chat-panel-composer[b-roi7tvit6g] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--dc-border, #2b2540);
    background: var(--dc-bg-footer, #161226);
    margin: 0 -16px -14px;
}

.chat-panel-chip-row[b-roi7tvit6g] {
    display: flex;
    gap: 6px;
}

/* Chips do composer (NORMAL/VANTAGEM/DESVANT. e D4-D20): 10.5px 700, raio 8px; o ativo vira
   indigo #2b2264/#4338ca/#c7d2fe — exatamente os estados do design. */
.chat-panel-chip[b-roi7tvit6g] {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: 7px 0;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--dc-border, #2b2540);
    color: var(--dc-text-mut, #8a8299);
    font-family: var(--dc-font, 'Sora', sans-serif);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.chat-panel-chip:hover:not(:disabled):not(.is-active)[b-roi7tvit6g] {
    border-color: var(--dc-border-hover, #4a3f6b);
}

.chat-panel-chip:disabled[b-roi7tvit6g] {
    opacity: 0.5;
    cursor: not-allowed;
}

.chat-panel-chip.is-active[b-roi7tvit6g] {
    background: var(--dc-indigo-bg, #2b2264);
    border-color: var(--dc-indigo-border, #4338ca);
    color: var(--dc-indigo-text, #c7d2fe);
}

/* Dados (D4-D20): mesma pilula, mas em JetBrains Mono e com fundo de card quando inativo. */
.chat-panel-die[b-roi7tvit6g] {
    padding: 6px 0;
    background: var(--dc-bg-card, #1a1726);
    color: var(--dc-text-soft, #b8b0cc);
    font-family: var(--dc-mono, 'JetBrains Mono', monospace);
    letter-spacing: 0;
}

.chat-panel-input-row[b-roi7tvit6g] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--dc-bg-card, #1a1726);
    border: 1px solid var(--dc-border, #2b2540);
    border-radius: 10px;
    padding: 8px 12px;
    transition: border-color .2s ease;
}

.chat-panel-input-row:focus-within[b-roi7tvit6g] {
    border-color: var(--dc-border-hover, #4a3f6b);
}

.chat-panel-input[b-roi7tvit6g] {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--dc-text, #e8e4f2);
    font-family: var(--dc-font, 'Sora', sans-serif);
    font-size: 12px;
    outline: none;
    padding: 0;
}

.chat-panel-input[b-roi7tvit6g]::placeholder {
    color: var(--dc-text-faint, #55506a);
}

.chat-panel-send[b-roi7tvit6g] {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--dc-indigo, #6366f1);
    font-size: 15px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: color .15s ease;
}

.chat-panel-send:hover:not(:disabled)[b-roi7tvit6g] {
    color: var(--dc-indigo-soft, #a5b4fc);
}

.chat-panel-send:disabled[b-roi7tvit6g] {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .chat-panel-entries[b-roi7tvit6g]  .chat-rich-card {
        animation-duration: .01ms !important;
    }

    .chat-panel-chip[b-roi7tvit6g],
    .chat-panel-send[b-roi7tvit6g] {
        transition-duration: .01ms !important;
    }
}
/* /Components/Shared/ChatRichCard.razor.rz.scp.css */
/* Skin "Combat Log Card" (claude.ai/design): cards 1A (ataque/ledger compacto), 2B (rolagem com
   total em destaque), 2C (ataque que erra) e o card de mensagem, todos sobre a base
   #1a1726/#2b2540 com JetBrains Mono nas formulas. */
.chat-rich-card[b-2aymeepu68] {
    width: 100%;
    font-family: var(--dc-font, 'Sora', sans-serif);
}

.chat-rich-card-system[b-2aymeepu68] {
    text-align: center;
    padding: 2px 0;
    font-size: 10.5px;
    color: var(--dc-text-faint, #55506a);
}

/* Base comum dos cards do feed. */
.crc-card[b-2aymeepu68] {
    width: 100%;
    background: var(--dc-bg-card, #1a1726);
    border: 1px solid var(--dc-border, #2b2540);
    border-radius: 12px;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Card de ataque (1A "Ledger compacto"; erro = 2C).
   -------------------------------------------------------------------------- */
.crc-attack-header[b-2aymeepu68] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
}

.crc-avatar[b-2aymeepu68] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
}

.crc-avatar-attack[b-2aymeepu68] {
    background: var(--dc-green-bg, #123626);
}

.crc-attack-miss .crc-avatar-attack[b-2aymeepu68] {
    filter: grayscale(0.4);
}

.crc-attack-id[b-2aymeepu68] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.crc-author[b-2aymeepu68] {
    font-weight: 700;
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crc-attack-sub[b-2aymeepu68] {
    color: var(--dc-text-dim, #6b6580);
    font-size: 10.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crc-attack-meta[b-2aymeepu68] {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
}

/* Pilulas de desfecho (ACERTOU verde / ERROU cinza / CRÍTICO! âmbar sobre a base verde). */
.crc-pill[b-2aymeepu68] {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.crc-pill-hit[b-2aymeepu68] {
    background: var(--dc-green-bg, #123626);
    color: var(--dc-green, #4ade80);
    border-color: var(--dc-green-border, #1f5c3d);
}

.crc-pill-crit[b-2aymeepu68] {
    background: var(--dc-green-bg, #123626);
    color: #fbbf24;
    border-color: #92700c;
}

.crc-pill-miss[b-2aymeepu68] {
    background: var(--dc-miss-bg, #2b2233);
    color: var(--dc-miss-text, #9088a3);
    border-color: var(--dc-miss-border, #3d3450);
}

.crc-time[b-2aymeepu68] {
    color: var(--dc-text-faint, #55506a);
    font-size: 10px;
}

/* Bloco de rolagens do ataque (design: "ACERTO 1d20+2 → 13 vs Def 10" / "DANO 1d6(3)+2 → 5"). */
.crc-attack-rolls[b-2aymeepu68] {
    border-top: 1px solid var(--dc-border, #2b2540);
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.crc-attack-roll-row[b-2aymeepu68] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--dc-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
}

.crc-eyebrow[b-2aymeepu68] {
    flex-shrink: 0;
    width: 44px;
    font-family: var(--dc-font, 'Sora', sans-serif);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--dc-text-dim, #6b6580);
}

.crc-formula[b-2aymeepu68] {
    color: var(--dc-text-soft, #b8b0cc);
}

.crc-formula[b-2aymeepu68]  .crc-red,
.crc-formula .crc-red[b-2aymeepu68] {
    color: var(--dc-red, #f87171);
}

.crc-arrow[b-2aymeepu68] {
    color: var(--dc-text-faint, #55506a);
    font-family: var(--dc-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
}

.crc-hit-total[b-2aymeepu68] {
    color: var(--dc-roll-blue, #60a5fa);
    font-weight: 700;
}

/* Erro (2C): total riscado no cinza do miss. */
.crc-miss-total[b-2aymeepu68] {
    color: var(--dc-miss-text, #9088a3);
    font-weight: 700;
    text-decoration: line-through;
    text-decoration-color: var(--dc-text-faint, #55506a);
}

.crc-dmg-total[b-2aymeepu68] {
    color: var(--dc-red, #f87171);
    font-weight: 700;
}

.crc-vs[b-2aymeepu68] {
    margin-left: auto;
    color: var(--dc-text-faint, #55506a);
    font-size: 10px;
    white-space: nowrap;
}

.crc-critfail[b-2aymeepu68] {
    font-family: var(--dc-font, 'Sora', sans-serif);
    color: var(--dc-text-dim, #6b6580);
    font-size: 10.5px;
}

/* Rodape de desfecho (design: faixa #211c31 "Monstro está com 50% de vida"). */
.crc-attack-outcome[b-2aymeepu68] {
    background: var(--dc-bg-inner, #211c31);
    padding: 7px 12px;
    color: var(--dc-text-soft, #b8b0cc);
    font-size: 11px;
    word-break: break-word;
}

/* --------------------------------------------------------------------------
   Card de rolagem (2B "Total em destaque", variante compacta da 3A).
   -------------------------------------------------------------------------- */
.crc-roll[b-2aymeepu68] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
}

.crc-total-tile[b-2aymeepu68] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--dc-roll-bg, #16233e);
    border: 1px solid var(--dc-roll-border, #244a7a);
    font-family: var(--dc-mono, 'JetBrains Mono', monospace);
    font-size: 18px;
    font-weight: 700;
    color: var(--dc-roll-blue, #60a5fa);
}

.crc-roll-info[b-2aymeepu68] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.crc-roll-title[b-2aymeepu68] {
    color: var(--dc-text, #e8e4f2);
    font-weight: 700;
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crc-roll-formula[b-2aymeepu68] {
    color: var(--dc-text-dim, #6b6580);
    font-size: 10.5px;
    font-family: var(--dc-mono, 'JetBrains Mono', monospace);
}

.crc-roll-formula[b-2aymeepu68]  .crc-discarded,
.crc-roll-formula .crc-discarded[b-2aymeepu68] {
    text-decoration: line-through;
    color: var(--dc-text-faint, #55506a);
}

.crc-roll-outcome[b-2aymeepu68] {
    color: var(--dc-text-soft, #b8b0cc);
    font-size: 10.5px;
    word-break: break-word;
}

.crc-meta[b-2aymeepu68] {
    color: var(--dc-text-faint, #55506a);
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   Card de mensagem (autor com cor por participante) e habilidade/efeito.
   -------------------------------------------------------------------------- */
.crc-message[b-2aymeepu68] {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.crc-msg-header[b-2aymeepu68] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.crc-avatar-msg[b-2aymeepu68] {
    background: var(--dc-bg-inner, #211c31);
    font-size: 11px;
    font-weight: 700;
}

.crc-avatar-magic[b-2aymeepu68] {
    background: var(--dc-indigo-bg, #2b2264);
}

.crc-msg-header .crc-time[b-2aymeepu68] {
    margin-left: auto;
    flex-shrink: 0;
}

.crc-msg-text[b-2aymeepu68] {
    color: var(--dc-text-soft, #b8b0cc);
    font-size: 12px;
    line-height: 1.45;
    word-break: break-word;
}

/* --------------------------------------------------------------------------
   Card de item recebido de um bau (miniatura da arte + nome + efeito).
   -------------------------------------------------------------------------- */
.crc-item[b-2aymeepu68] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
}

.crc-item-thumb[b-2aymeepu68] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--dc-bg-inner, #211c31);
    border: 1px solid var(--dc-border, #2b2540);
    overflow: hidden;
}

.crc-item-img[b-2aymeepu68] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crc-item-glyph[b-2aymeepu68] {
    font-size: 20px;
    line-height: 1;
}

.crc-item-info[b-2aymeepu68] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.crc-item-head[b-2aymeepu68] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.crc-item-name[b-2aymeepu68] {
    color: var(--dc-text, #e8e4f2);
    font-weight: 700;
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pilula de raridade (mesma familia das pilulas de desfecho, cor por raridade). */
.crc-item-rarity[b-2aymeepu68] {
    flex-shrink: 0;
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border: 1px solid transparent;
    background: var(--dc-miss-bg, #2b2233);
    color: var(--dc-miss-text, #9088a3);
    border-color: var(--dc-miss-border, #3d3450);
}

.crc-rarity-uncommon[b-2aymeepu68] {
    background: var(--dc-green-bg, #123626);
    color: var(--dc-green, #4ade80);
    border-color: var(--dc-green-border, #1f5c3d);
}

.crc-rarity-rare[b-2aymeepu68] {
    background: var(--dc-roll-bg, #16233e);
    color: var(--dc-roll-blue, #60a5fa);
    border-color: var(--dc-roll-border, #244a7a);
}

.crc-rarity-epic[b-2aymeepu68] {
    background: var(--dc-indigo-bg, #2b2264);
    color: #c7b3ff;
    border-color: #4c3a99;
}

.crc-rarity-legendary[b-2aymeepu68] {
    background: #3a2a0c;
    color: #fbbf24;
    border-color: #92700c;
}

.crc-item-recipient[b-2aymeepu68] {
    color: var(--dc-text-dim, #6b6580);
    font-size: 10.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crc-item-effects[b-2aymeepu68] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-top: 1px;
}

.crc-item-effect[b-2aymeepu68] {
    font-family: var(--dc-mono, 'JetBrains Mono', monospace);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--dc-green, #4ade80);
    background: var(--dc-green-bg, #123626);
    border: 1px solid var(--dc-green-border, #1f5c3d);
    border-radius: 6px;
    padding: 1px 6px;
    white-space: nowrap;
}

.crc-item-effect-defense[b-2aymeepu68] {
    color: var(--dc-roll-blue, #60a5fa);
    background: var(--dc-roll-bg, #16233e);
    border-color: var(--dc-roll-border, #244a7a);
}

.crc-item-noeffect[b-2aymeepu68] {
    color: var(--dc-text-faint, #55506a);
    font-size: 10px;
    font-style: italic;
}
/* /Components/Shared/ConnectionIndicator.razor.rz.scp.css */
.connection-indicator[b-1oz1rlo89b] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    padding: 3px 8px;
}

.connection-indicator-dot[b-1oz1rlo89b] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.connection-indicator.is-live[b-1oz1rlo89b] {
    background-color: var(--qf-success-soft-bg, rgba(61, 170, 112, 0.18));
    color: var(--qf-success-text, #6FE3A4);
}

.connection-indicator.is-live .connection-indicator-dot[b-1oz1rlo89b] {
    background-color: var(--qf-success, #3DAA70);
}

.connection-indicator.is-reconnecting[b-1oz1rlo89b] {
    background-color: var(--qf-warning-soft-bg, rgba(224, 169, 62, 0.18));
    color: var(--qf-warning-text, #F0C975);
}

.connection-indicator.is-reconnecting .connection-indicator-dot[b-1oz1rlo89b] {
    background-color: var(--qf-warning, #E0A93E);
    animation: connection-indicator-pulse-b-1oz1rlo89b 1s ease-in-out infinite;
}

.connection-indicator.is-offline[b-1oz1rlo89b] {
    background-color: var(--qf-danger-soft-bg, rgba(224, 86, 107, 0.18));
    color: var(--qf-danger-text, #F2879A);
}

.connection-indicator.is-offline .connection-indicator-dot[b-1oz1rlo89b] {
    background-color: var(--qf-danger, #E0566B);
}

@keyframes connection-indicator-pulse-b-1oz1rlo89b {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}

@media (prefers-reduced-motion: reduce) {
    .connection-indicator.is-reconnecting .connection-indicator-dot[b-1oz1rlo89b] {
        animation: none;
    }
}
/* /Components/Shared/DiceRollOverlay.razor.rz.scp.css */
/* Overlay da animacao 3D de dados (feature prd-animacao-rolagem-dados): cobre a viewport
   inteira SEM capturar nenhum clique (pointer-events: none) — o mapa, tokens e paineis
   continuam interativos por baixo. z-index 14 na escala documentada em Mesa.razor.css: ACIMA de
   todas as camadas da propria pagina (paineis glass 10, toolbar 11, ficha 12, resolucao de
   ataque 13) e abaixo apenas dos dialogs/snackbar do MudBlazor. Pedido do usuario: os dados 3D
   ficavam por baixo das barras laterais (glass 10) e sumiam parcialmente; como o overlay nao
   captura clique, subi-lo acima dos paineis mantem a animacao sempre visivel sem prejudicar a
   interacao com a mesa. */
.dice-roll-overlay[b-v6shs7on5u] {
    position: fixed;
    inset: 0;
    z-index: 14;
    pointer-events: none;
    overflow: hidden;
}

/* O canvas do WebGLRenderer e criado pelo modulo JS (filho sem o atributo de escopo do CSS
   isolation — por isso o ::deep, mesma licao do FogCanvas). */
.dice-roll-overlay[b-v6shs7on5u]  canvas {
    display: block;
}

/* Destaque de critico/fumble (techspec, decisao "Escopo de critico"): alem do colorset dourado/
   vermelho dos proprios dados (trocado pelo modulo JS), um glow suave pulsa por cima da mesa
   enquanto os dados do natural 20/1 estao visiveis. Classes aplicadas pelo modulo JS no proprio
   elemento escopado (.dice-roll-overlay), removidas na limpeza pos-animacao. */
.dice-roll-overlay.is-critical[b-v6shs7on5u]::after,
.dice-roll-overlay.is-fumble[b-v6shs7on5u]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    animation: dice-overlay-glow-b-v6shs7on5u 1.1s ease-in-out infinite alternate;
}

.dice-roll-overlay.is-critical[b-v6shs7on5u]::after {
    background: radial-gradient(ellipse at center, rgba(245, 197, 66, 0.20), transparent 62%);
}

.dice-roll-overlay.is-fumble[b-v6shs7on5u]::after {
    background: radial-gradient(ellipse at center, rgba(179, 38, 30, 0.20), transparent 62%);
}

@keyframes dice-overlay-glow-b-v6shs7on5u {
    from {
        opacity: 0.45;
    }

    to {
        opacity: 1;
    }
}

/* Toggle de som dos dados: encostado a ESQUERDA da pilula de zoom (.mesa-zoom-controls, que o
   redesign "Quest Forge - Mesa" moveu para o rodape CENTRAL — left: 50%, bottom: 18px). Antes
   este botao tambem ficava em left: 50%, entao o circulo caia exatamente sobre a pilula de zoom;
   agora recua ~92px do centro para formar um unico grupo (mute | zoom) sem sobreposicao, alinhado
   verticalmente ao centro da pilula (bottom: 20px). pointer-events: auto explicito por ser o unico
   pedaco clicavel do overlay. */
.dice-sound-toggle[b-v6shs7on5u] {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(calc(-50% - 92px));
    z-index: 15;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    color: var(--qf-text-secondary, #B8B8B8);
    background-color: var(--qf-cine-glass-bg, rgba(16, 22, 38, 0.62));
    border: 1px solid var(--qf-border, #2A2A2A);
    backdrop-filter: blur(var(--qf-cine-blur, 14px));
    -webkit-backdrop-filter: blur(var(--qf-cine-blur, 14px));
    transition: color 120ms ease, border-color 120ms ease;
}

.dice-sound-toggle:hover[b-v6shs7on5u] {
    color: var(--qf-rpg-gold, #C9A84C);
    border-color: var(--qf-rpg-gold-dim, #7A6030);
}
/* /Components/Shared/EffectBadges.razor.rz.scp.css */
/* Tags de efeito (pedido do usuario: "use tags") — pilulas legiveis com icone + nome + turnos,
   coloridas pela natureza do efeito. Reskin coerente com o painel do selecionado (SelectedTokenPanel):
   fontes Sora, texto #ECEAF6, verde #3DDC97 (buff) / vermelho #F76D7D (debuff) / ambar #F2B441
   (condition). O rotulo textual comunica o efeito — a cor e apenas reforco (acessibilidade). */
.qf-effect-badges[b-2zlm9ka1ro] {
    width: 100%;
    font-family: 'Sora', var(--qf-font-sans, sans-serif);
}

.qf-effect-empty[b-2zlm9ka1ro] {
    font-size: 12px;
    color: #8B87A8;
}

.qf-effect-tags[b-2zlm9ka1ro] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* ── Pilula do efeito ─────────────────────────────────────────────────────── */
.qf-effect-tag[b-2zlm9ka1ro] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 9px;
    border-radius: 999px;
    border: 1px solid var(--tag-border, rgba(255, 255, 255, 0.14));
    background: var(--tag-bg, rgba(255, 255, 255, 0.05));
    max-width: 100%;
}

.qf-effect-tag-name[b-2zlm9ka1ro] {
    font-size: 12px;
    font-weight: 700;
    color: #ECEAF6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

/* Pilula compacta de turnos restantes (ex.: "3 t"): fundo neutro dentro da tag colorida. */
.qf-effect-tag-turns[b-2zlm9ka1ro] {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: #C9C5E0;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    padding: 1px 6px;
}

/* Botao "×" de remover (mestre): plano dentro da tag, cresce no hover. */
.qf-effect-tag-remove[b-2zlm9ka1ro] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #9A96B4;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.qf-effect-tag-remove:hover:not(:disabled)[b-2zlm9ka1ro] {
    background: rgba(247, 109, 125, 0.18);
    color: #F76D7D;
}

.qf-effect-tag-remove:disabled[b-2zlm9ka1ro] {
    opacity: 0.4;
    cursor: not-allowed;
}

.qf-effect-tag-remove:focus-visible[b-2zlm9ka1ro] {
    outline: 2px solid #7C6CFF;
    outline-offset: 1px;
}

/* ── Cores por natureza do efeito ─────────────────────────────────────────── */
.qf-effect-tag-buff[b-2zlm9ka1ro] {
    --tag-bg: rgba(61, 220, 151, 0.10);
    --tag-border: rgba(61, 220, 151, 0.32);
}

.qf-effect-tag-debuff[b-2zlm9ka1ro] {
    --tag-bg: rgba(247, 109, 125, 0.10);
    --tag-border: rgba(247, 109, 125, 0.32);
}

.qf-effect-tag-condition[b-2zlm9ka1ro] {
    --tag-bg: rgba(242, 180, 65, 0.10);
    --tag-border: rgba(242, 180, 65, 0.34);
}

/* Icone da tag: compacto (16px) e herda a cor da natureza via ::deep (MudIcon e componente filho,
   fora do escopo deste .razor — mesmo motivo de CSS-isolation documentado nos demais .razor.css). */
.qf-effect-badges[b-2zlm9ka1ro]  .qf-effect-tag-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.qf-effect-tag-buff[b-2zlm9ka1ro]  .qf-effect-tag-icon {
    color: #3DDC97;
}

.qf-effect-tag-debuff[b-2zlm9ka1ro]  .qf-effect-tag-icon {
    color: #F76D7D;
}

.qf-effect-tag-condition[b-2zlm9ka1ro]  .qf-effect-tag-icon {
    color: #F2B441;
}

/* ── "+ Aplicar efeito" (mestre) ──────────────────────────────────────────── */
.qf-effect-add[b-2zlm9ka1ro] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    border: 1px dashed rgba(124, 108, 255, 0.45);
    background: rgba(124, 108, 255, 0.08);
    color: #B7ABFF;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.qf-effect-add:hover:not(:disabled)[b-2zlm9ka1ro] {
    background: rgba(124, 108, 255, 0.16);
    border-color: rgba(124, 108, 255, 0.7);
    color: #ECEAF6;
}

.qf-effect-add:disabled[b-2zlm9ka1ro] {
    opacity: 0.45;
    cursor: not-allowed;
}

.qf-effect-add:focus-visible[b-2zlm9ka1ro] {
    outline: 2px solid #7C6CFF;
    outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {

    .qf-effect-tag-remove[b-2zlm9ka1ro],
    .qf-effect-add[b-2zlm9ka1ro] {
        transition: none;
    }
}
/* /Components/Shared/FogCanvas.razor.rz.scp.css */
/* Envolve apenas o canvas de fog — irmao da ".mesa-token-layer" dentro de ".mesa-map-viewport"
   (Mesa.razor), por isso acompanha o mesmo transform de zoom/pan sem receber esses valores como
   parametro. Os controles do mestre (ligar/revelar/tamanho do pincel) foram movidos para a
   toolbar do topo em Mesa.razor (fora do viewport escalado, onde os botoes deformavam ao dar
   zoom — pedido do usuario). */
.fog-canvas-wrapper[b-3bue604k59] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Por padrao o canvas nao intercepta cliques (o mapa/tokens abaixo continuam clicaveis); apenas
   quando o modo "Revelar" esta ativo (pincel do mestre) ele passa a capturar o ponteiro. */
.fog-canvas[b-3bue604k59] {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.fog-canvas.is-reveal-mode[b-3bue604k59] {
    pointer-events: auto;
    cursor: crosshair;
    touch-action: none;
}
/* /Components/Shared/GlassPanel.razor.rz.scp.css */
/* Casca visual dos paineis flutuantes da Mesa (feature mesa-design-cinematico, techspec.md
   "Interfaces Principais"/"Riscos Conhecidos", task 2.0). Toda regra vive aqui porque este e o
   componente que escreve o markup (bug de CSS isolation pai/filho documentado na techspec e na
   memoria web-black-theme-design-system): Mesa.razor (tasks posteriores) nunca estiliza o
   conteudo deste painel diretamente, apenas o posiciona como irmao do mapa.

   Usa os tokens --qf-cine-* definidos em app.css (task 1.0, escopados a .mesa-page) com
   fallback inline — mesmo padrao ja usado no resto do Shared (tokens --qf-rpg e --qf com
   fallback, ver SelectedTokenPanel.razor.css) — para que o componente renderize corretamente fora
   de uma arvore .mesa-page (ex.: testes bUnit isolados). */
/* Skin "Combat Log Card" (claude.ai/design, opcao 3A "Barra completa"): painel
   solido #13101d, borda #2b2540, raio 16px — substitui o vidro translucido
   anterior para reproduzir o design exatamente. */
.glass-panel[b-vv9c31g8b9] {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    border: 1px solid var(--dc-border, #2b2540);
    background: var(--dc-bg-panel, #13101d);
    color: var(--dc-text, #e8e4f2);
    font-family: var(--dc-font, 'Sora', sans-serif);
    overflow: hidden;
    isolation: isolate;

    /* Sombra do design "Combat Log Card" (mesma projecao dos cards 4A/4B). */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);

    /* Fix pos-verificacao em browser da task 3.0 (mesa-design-cinematico): Mesa.razor.css
       estica este wrapper a altura TOTAL da coluna (top/bottom em vez de uma altura ajustada ao
       conteudo — ver ".mesa-page ::deep .glass-panel-left/right"), entao sempre sobra uma faixa
       vazia/transparente abaixo do card visivel (header+body nao preenchem 100% da altura).
       Sem isso, essa faixa — apesar de visualmente parte do mapa — capturava cliques/drag
       destinados a .mesa-map-area (inclusive os controles de zoom, no canto inferior direito),
       violando a mitigacao da techspec ("Riscos Conhecidos": "paineis flutuantes... com
       pointer-events proprios, nunca dentro da area do mapa"). O wrapper em si vira "invisivel"
       para o mouse; .glass-panel-header/.glass-panel-body (a superficie realmente visivel)
       reativam pointer-events abaixo. */
    pointer-events: none;

    /* Apenas transform/opacity animam (composite-only) — nunca box-shadow/filter continuos por
       cima do mapa grande. */
    transition: transform .35s var(--qf-cine-ease, cubic-bezier(0.22, 1, 0.36, 1)),
        opacity .35s var(--qf-cine-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.glass-panel-header[b-vv9c31g8b9] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--dc-border, #2b2540);

    /* Reativa pointer-events para a superficie realmente visivel (ver ".glass-panel" acima). */
    pointer-events: auto;
}

.glass-panel-icon[b-vv9c31g8b9] {
    display: none;
}

.glass-panel-title[b-vv9c31g8b9] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--dc-font, 'Sora', sans-serif);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--dc-text, #e8e4f2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ponto "ao vivo" verde do cabecalho (design 3A: bolinha #4ade80 a direita). */
.glass-panel-live-dot[b-vv9c31g8b9] {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dc-green, #4ade80);
}

.glass-panel-toggle[b-vv9c31g8b9] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--dc-border, #2b2540);
    background: var(--dc-bg-inner, #211c31);
    color: var(--dc-text-mut, #8a8299);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.glass-panel-toggle:hover[b-vv9c31g8b9] {
    background-color: var(--dc-bg-inner-hover, #1e1a2c);
    border-color: var(--dc-border-hover, #4a3f6b);
}

.glass-panel-toggle:focus-visible[b-vv9c31g8b9] {
    outline: 2px solid var(--qf-primary, #5B8DEF);
    outline-offset: 1px;
}

/* Bug corrigido (pedido do usuario): com translateX(88%) no colapso do painel direito, a unica
   fatia que permanece na viewport e a ponta ESQUERDA do header (o resto sai pela borda e
   .mesa-page tem overflow: hidden) — com o toggle na ponta direita (posicao padrao do markup),
   ele ficava fora da tela e o painel do chat nunca podia ser reexpandido. order: -1 move o
   botao para a ponta esquerda apenas nos paineis Side=Right, mantendo-o dentro da fatia
   visivel quando recolhido. O painel esquerdo ja funciona com o markup padrao (a fatia visivel
   dele e a ponta direita, onde o toggle esta). */
.glass-panel-right .glass-panel-toggle[b-vv9c31g8b9] {
    order: -1;
}

.glass-panel-body[b-vv9c31g8b9] {
    position: relative;
    padding: 14px 16px;
    overflow-y: auto;
    min-height: 0;

    /* Preenche a altura restante do painel (Mesa.razor.css estica o wrapper a coluna inteira via
       top/bottom): sem isto o corpo ficava com altura de conteudo e o excesso era CLIPADO pelo
       overflow: hidden de .glass-panel, sem scrollbar — e os height/max-height: 100% dos filhos
       (.mesa-sidebar-left/right) nao resolviam contra a altura auto. Com altura definida, o
       proprio corpo (ou o conteudo, ex.: feed do chat) ganha rolagem interna de verdade. */
    flex: 1 1 auto;

    /* Reativa pointer-events para a superficie realmente visivel (ver ".glass-panel" acima).
       Com o flex: 1 acima o corpo passou a cobrir a coluna inteira, entao nao existe mais a
       antiga "faixa vazia" que deixava cliques atravessarem para o mapa — controles do mapa que
       ficavam sob os paineis (ex.: zoom) precisam viver fora da faixa deles (ver
       .mesa-zoom-controls em Mesa.razor.css). */
    pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Posicionamento por lado (Side): a posicao absoluta relativa a viewport da
   Mesa e definida por Mesa.razor.css (tasks posteriores, o painel e
   posicionado como irmao do mapa full-bleed); aqui ficam apenas o eixo de
   transformacao do colapso e o arredondamento assimetrico que acompanham
   cada lado, coerentes com o proprio markup deste componente.
   -------------------------------------------------------------------------- */
.glass-panel-left[b-vv9c31g8b9] {
    transform-origin: left center;
}

.glass-panel-right[b-vv9c31g8b9] {
    transform-origin: right center;
}

.glass-panel-top[b-vv9c31g8b9] {
    transform-origin: top center;
}

/* --------------------------------------------------------------------------
   Colapso (techspec.md F2): recolhe o painel para uma "pilula" na borda via
   transform: translateX (esquerda/direita) ou translateY (topo) + opacity —
   nunca width/height (nao composite-only). O conteudo interno permanece no
   layout (sem display:none) para nao perder foco/estado, apenas visualmente
   comprimido e transparente.
   -------------------------------------------------------------------------- */
.glass-panel-left.is-collapsed[b-vv9c31g8b9] {
    transform: translateX(-88%);
    opacity: .55;
}

.glass-panel-right.is-collapsed[b-vv9c31g8b9] {
    transform: translateX(88%);
    opacity: .55;
}

.glass-panel-top.is-collapsed[b-vv9c31g8b9] {
    transform: translateY(-88%);
    opacity: .55;
}

.glass-panel.is-collapsed .glass-panel-title[b-vv9c31g8b9] {
    opacity: 0;
}

.glass-panel.is-collapsed:hover[b-vv9c31g8b9] {
    opacity: .9;
}

@media (prefers-reduced-motion: reduce) {
    .glass-panel[b-vv9c31g8b9] {
        transition-duration: 150ms;
    }
}
/* /Components/Shared/GridOverlay.razor.rz.scp.css */
.grid-overlay-container[b-vqzr3r1rd5] {
    position: relative;
    border-radius: 8px;
    border: 1px solid var(--qf-border, #2E2E2E);
    overflow: clip;
    background-color: var(--qf-bg-alt, #0A0A0A);
}

.grid-overlay-empty[b-vqzr3r1rd5] {
    min-width: 480px;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    color: var(--qf-text-secondary, #ABAFB8);
}

.grid-overlay-empty-title[b-vqzr3r1rd5] {
    font-size: 16px;
    font-weight: 600;
    color: var(--qf-text-primary, #F2F2F3);
    margin: 0;
}

.grid-overlay-empty-hint[b-vqzr3r1rd5] {
    font-size: 13px;
    margin: 0;
}

.grid-overlay-viewport[b-vqzr3r1rd5] {
    position: relative;
    transform-origin: center center;
}

.grid-overlay-map[b-vqzr3r1rd5] {
    display: block;
}

/* Mapa de video do YouTube (pedido do usuario). Nao captura o mouse para nao roubar o
   pan/zoom/clique do mapa (o <iframe> ficaria por cima e engoliria os eventos), e sem borda para
   preencher o espaco logico exatamente como uma imagem. */
.grid-overlay-video[b-vqzr3r1rd5] {
    border: 0;
    pointer-events: none;
}

.grid-overlay-lines[b-vqzr3r1rd5] {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Dica fixa do modo "Calibrar grid" (req. 1 do PRD, task 9.0), enquanto o mestre ainda nao
   clicou no primeiro canto da celula — ver GridOverlay.razor.CalibrationActive. */
.grid-overlay-calibration-hint[b-vqzr3r1rd5] {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    background-color: rgba(18, 18, 18, 0.85);
    color: var(--qf-rpg-gold, #C9A84C);
    border: 1px solid var(--qf-rpg-gold-dim, #7A6030);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
}

/* Marcador do canto A ja clicado (req. 1 do PRD, task 9.0) — GridOverlay.razor.CalibrationPointA,
   em coordenadas de imagem (mesmo espaco de Token.Position), por isso acompanha corretamente
   zoom/pan do mapa. */
.grid-overlay-calibration-marker[b-vqzr3r1rd5] {
    position: absolute;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    margin-top: -7px;
    border-radius: 50%;
    background-color: var(--qf-rpg-gold-bright, #E8C96A);
    border: 2px solid var(--qf-bg, #000000);
    box-shadow: 0 0 0 2px var(--qf-rpg-gold, #C9A84C);
    z-index: 3;
    pointer-events: none;
}
/* /Components/Shared/InitiativePanel.razor.rz.scp.css */
/* Painel "Ordem de iniciativa" (feature prd-rodada-iniciativa, task 7.0) — reskin fiel a
   linguagem visual do design "Barra Lateral Personagens" (claude.ai/design, projeto 5ebe8db6),
   ja usada por CharacterListSidebar.razor.css/SelectedTokenPanel.razor.css: fundo #13131F, acento
   roxo #7C6CFF, hairlines translucidas, Sora + JetBrains Mono para os numeros. O destaque da vez
   atual usa o lime de marca (--qf-accent) para se diferenciar do roxo de selecao usado em outras
   partes da sidebar. Isolamento de CSS por componente (ver memoria "CSS isolation child-component
   scoping bug"): estas regras so batem em elementos escritos diretamente neste .razor. */
.initiative-panel[b-hur8m09abr] {
    font-family: 'Sora', var(--qf-font-sans, sans-serif);
    color: #ECEAF6;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.initiative-header[b-hur8m09abr] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.initiative-header-label[b-hur8m09abr] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8B87A8;
}

.initiative-header-status[b-hur8m09abr] {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    color: var(--qf-accent, #e4ff30);
    background: var(--qf-accent-soft-bg, rgba(228, 255, 48, 0.10));
    border: 1px solid var(--qf-accent-border, rgba(228, 255, 48, 0.28));
    border-radius: 999px;
    padding: 1px 8px;
}

/* ── Botoes de acao (mestre/jogador) ─────────────────────────────────────── */
.initiative-master-actions[b-hur8m09abr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.initiative-button[b-hur8m09abr] {
    width: 100%;
    min-height: 38px;
    padding: 9px 12px;
    border-radius: 11px;
    font-size: 12.5px;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background-color: rgba(255, 255, 255, 0.03);
    color: #C9C5E0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.initiative-button:hover:not(:disabled)[b-hur8m09abr] {
    background-color: rgba(255, 255, 255, 0.07);
    color: #ECEAF6;
}

.initiative-button:disabled[b-hur8m09abr] {
    opacity: 0.5;
    cursor: not-allowed;
}

.initiative-button:focus-visible[b-hur8m09abr] {
    outline: 2px solid #7C6CFF;
    outline-offset: 1px;
}

.initiative-button-primary[b-hur8m09abr] {
    border-color: transparent;
    background-color: #7C6CFF;
    color: #fff;
}

.initiative-button-primary:hover:not(:disabled)[b-hur8m09abr] {
    background-color: #8F80FF;
    color: #fff;
}

.initiative-button-danger[b-hur8m09abr] {
    border-color: rgba(247, 109, 125, 0.30);
    background-color: rgba(247, 109, 125, 0.06);
    color: #F76D7D;
}

.initiative-button-danger:hover:not(:disabled)[b-hur8m09abr] {
    background-color: rgba(247, 109, 125, 0.16);
    border-color: rgba(247, 109, 125, 0.45);
    color: #F76D7D;
}

.initiative-roll-button[b-hur8m09abr] {
    border-color: var(--qf-accent-border, rgba(228, 255, 48, 0.28));
    background-color: var(--qf-accent-soft-bg, rgba(228, 255, 48, 0.10));
    color: var(--qf-accent-bright, #f0ffa3);
}

.initiative-roll-button:hover:not(:disabled)[b-hur8m09abr] {
    background-color: rgba(228, 255, 48, 0.18);
}

/* ── Ordem de iniciativa ──────────────────────────────────────────────────── */
.initiative-order[b-hur8m09abr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.initiative-order-label[b-hur8m09abr] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8B87A8;
}

.initiative-empty-hint[b-hur8m09abr] {
    font-size: 12px;
    line-height: 1.5;
    color: #8B87A8;
    margin: 0;
}

.initiative-order-list[b-hur8m09abr] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.initiative-entry[b-hur8m09abr] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

/* Vez atual (RF-12): destaque em lime, apenas organizacional — nenhum outro elemento da mesa fica
   desabilitado por causa disto (RF-15). */
.initiative-entry.is-current-turn[b-hur8m09abr] {
    background: var(--qf-accent-soft-bg, rgba(228, 255, 48, 0.10));
    border-color: var(--qf-accent-border, rgba(228, 255, 48, 0.35));
}

.initiative-entry-rank[b-hur8m09abr] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #8B87A8;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

.initiative-entry-icon[b-hur8m09abr] {
    flex-shrink: 0;
    font-size: 13px;
}

.initiative-entry-name[b-hur8m09abr] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: #ECEAF6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.initiative-entry-total[b-hur8m09abr] {
    font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
    font-size: 13px;
    font-weight: 800;
    color: #C9C5E0;
    font-variant-numeric: tabular-nums;
}

.initiative-entry-turn-badge[b-hur8m09abr] {
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #14120a;
    background: var(--qf-accent, #e4ff30);
    border-radius: 999px;
    padding: 2px 6px;
}

.initiative-error[b-hur8m09abr] {
    font-size: 12px;
    color: #F2879A;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .initiative-button[b-hur8m09abr] {
        transition: none;
    }
}
/* /Components/Shared/ResolveAbilityChoiceDialog.razor.rz.scp.css */
.resolve-ability-loading[b-wgql0jrm16] {
    display: flex;
    justify-content: center;
    padding: 32px 0;
}

.resolve-ability-list[b-wgql0jrm16] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 420px;
    overflow-y: auto;
}

.resolve-ability-card[b-wgql0jrm16] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background-color: var(--qf-surface-2, #1A1A1A);
    border: 2px solid var(--qf-border, #2E2E2E);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: border-color 120ms ease-out, background-color 120ms ease-out;
}

.resolve-ability-card:hover[b-wgql0jrm16] {
    border-color: var(--qf-primary, #5B8DEF);
    background-color: var(--qf-surface-3, #232323);
}

.resolve-ability-card:focus-visible[b-wgql0jrm16] {
    outline: none;
    box-shadow: 0 0 0 3px var(--qf-focus-ring, rgba(91, 141, 239, 0.45));
}

.resolve-ability-card--selected[b-wgql0jrm16] {
    border-color: var(--qf-primary, #5B8DEF);
    background-color: var(--qf-primary-soft-bg, rgba(91, 141, 239, 0.12));
}

.resolve-ability-card-header[b-wgql0jrm16] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.resolve-ability-name[b-wgql0jrm16] {
    color: var(--qf-text-primary, #F2F2F3);
    font-weight: 600;
    font-size: 13px;
}

.resolve-ability-check[b-wgql0jrm16] {
    color: var(--qf-primary, #5B8DEF);
    flex-shrink: 0;
}

.resolve-ability-tags[b-wgql0jrm16] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.resolve-ability-chip[b-wgql0jrm16] {
    font-size: 10px;
    background-color: var(--qf-surface-3, #232323) !important;
    color: var(--qf-text-secondary, #ABAFB8) !important;
    border: 1px solid var(--qf-border, #2E2E2E);
}

.resolve-ability-meta[b-wgql0jrm16] {
    color: var(--qf-text-muted, #84858C);
    font-size: 11px;
}

.resolve-ability-summary[b-wgql0jrm16] {
    color: var(--qf-text-secondary, #ABAFB8);
    font-size: 12px;
    line-height: 1.4;
}
/* /Components/Shared/SelectedTokenPanel.razor.rz.scp.css */
/* Painel do token/personagem selecionado — design "Barra Lateral Personagens" (claude.ai/design,
   projeto 5ebe8db6). Reskin da paleta antiga (indigo/dourado --qf-cine-*) para a linguagem do
   mock: seções flush separadas por hairlines, cartões escuros #13131F, acento roxo #7C6CFF, verde
   #3DDC97 / vermelho #F76D7D para vida. Isolamento de CSS por componente: estas regras só batem no
   markup deste .razor (mesmo motivo documentado no topo de CharacterSheetPanel.razor.css). */
.mesa-selected-card[b-gf8rb2nzaw] {
    font-family: 'Sora', var(--qf-font-sans, sans-serif);
    color: #ECEAF6;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
}

/* ── Estado vazio (cartão tracejado do mock) ─────────────────────────────── */
.selected-empty[b-gf8rb2nzaw] {
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 13px;
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.selected-empty-icon[b-gf8rb2nzaw] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(124, 108, 255, 0.10);
    color: #7C6CFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.selected-empty-title[b-gf8rb2nzaw] {
    font-size: 12.5px;
    font-weight: 700;
    color: #C9C5E0;
    margin: 0;
}

.selected-empty-text[b-gf8rb2nzaw] {
    font-size: 11.5px;
    line-height: 1.5;
    color: #8B87A8;
    margin: 0;
}

/* ── Bloco do selecionado ────────────────────────────────────────────────── */
.selected-token-block[b-gf8rb2nzaw] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.selected-token-eyebrow[b-gf8rb2nzaw] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8B87A8;
}

.selected-token-name[b-gf8rb2nzaw] {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.2;
    color: #ECEAF6;
    margin: 2px 0 0;
    overflow-wrap: anywhere;
}

/* ── Pontos de vida (barra + ajuste rápido do mestre) ────────────────────── */
.selected-hp[b-gf8rb2nzaw] {
    background: #13131F;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 13px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.selected-hp-head[b-gf8rb2nzaw] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.selected-hp-label[b-gf8rb2nzaw] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8B87A8;
}

.selected-hp-value[b-gf8rb2nzaw] {
    margin-left: auto;
    font-size: 14px;
    font-weight: 800;
    color: #ECEAF6;
    font-variant-numeric: tabular-nums;
}

.selected-hp-track[b-gf8rb2nzaw] {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.selected-hp-fill[b-gf8rb2nzaw] {
    height: 100%;
    border-radius: 999px;
    transition: width 0.25s ease;
}

.selected-hp-buttons[b-gf8rb2nzaw] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.selected-hp-button[b-gf8rb2nzaw] {
    padding: 7px 0;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: background-color 0.15s ease;
}

.selected-hp-button.is-damage[b-gf8rb2nzaw] {
    border: 1px solid rgba(247, 109, 125, 0.30);
    background: rgba(247, 109, 125, 0.08);
    color: #F76D7D;
}

.selected-hp-button.is-damage:hover:not(:disabled)[b-gf8rb2nzaw] {
    background: rgba(247, 109, 125, 0.18);
}

.selected-hp-button.is-heal[b-gf8rb2nzaw] {
    border: 1px solid rgba(61, 220, 151, 0.30);
    background: rgba(61, 220, 151, 0.08);
    color: #3DDC97;
}

.selected-hp-button.is-heal:hover:not(:disabled)[b-gf8rb2nzaw] {
    background: rgba(61, 220, 151, 0.18);
}

.selected-hp-button:disabled[b-gf8rb2nzaw] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Efeitos (movidos das linhas da lista) ───────────────────────────────── */
/* Cartao proprio, mesmo tratamento do bloco de vida (.selected-hp): fundo #13131F, borda hairline
   e cantos arredondados. Antes os efeitos eram so um rotulo + badges soltos abaixo da grade de
   atributos e passavam despercebidos ("muito escondida", pedido do usuario). Agrupado logo abaixo
   da vida, o cartao da destaque visual ao estado do personagem selecionado. */
.selected-effects[b-gf8rb2nzaw] {
    background: #13131F;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 13px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.selected-effects-label[b-gf8rb2nzaw] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8B87A8;
}

/* Badges de efeito ocupam a largura do cartao e quebram linha; quando nao ha efeitos, o texto
   "Nenhum efeito ativo" (jogador) fica alinhado a esquerda dentro do cartao. */
.selected-effects[b-gf8rb2nzaw]  .qf-effect-badges {
    width: 100%;
}

.selected-token-error[b-gf8rb2nzaw] {
    font-size: 12px;
    color: #F2879A;
    margin: 0;
}

/* ── Botões de ação ──────────────────────────────────────────────────────── */
/* Hierarquia em três grupos (pedido do usuário: melhorar a organização dos botões), empilhados
   com um respiro entre si:
     1. .selected-actions-primary  — "Ver ficha", ação primária em largura total;
     2. .selected-actions-grid     — utilitárias, grade auto-fit (1 botão ocupa a linha, 2+ dividem);
     3. .selected-actions-danger   — "Remover", destrutiva, isolada por uma hairline no topo.
   O MudFileUpload ("Trocar imagem") e cada .mesa-toolbar-button já têm width:100%, então preenchem
   a célula do grid / a largura do grupo. */
.selected-actions[b-gf8rb2nzaw] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.selected-actions:empty[b-gf8rb2nzaw],
.selected-actions-grid:empty[b-gf8rb2nzaw] {
    display: none;
}

.selected-actions-primary[b-gf8rb2nzaw] {
    display: flex;
}

/* auto-fit: com um único botão ele ocupa a linha inteira; com dois ou mais, dividem em colunas de
   no mínimo 130px — some a antiga sensação de "meio botão solto" quando havia só uma ação. */
.selected-actions-grid[b-gf8rb2nzaw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
    align-items: start;
}

/* "Remover" isolada: hairline + respiro acima para separá-la visualmente das ações benignas. */
.selected-actions-danger[b-gf8rb2nzaw] {
    display: flex;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Estilo base compartilhado com Mesa.razor (Pan/Selecionar), replicado aqui pelo isolamento de CSS
   por componente. Reskin para o mock: pílula roxa translúcida, largura total (pilha de ações). */
.mesa-toolbar-button[b-gf8rb2nzaw] {
    width: 100%;
    min-height: 40px;
    padding: 10px 12px;
    border-radius: 11px;
    font-size: 12.5px;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background-color: rgba(255, 255, 255, 0.03);
    color: #C9C5E0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mesa-toolbar-button:hover:not(:disabled)[b-gf8rb2nzaw] {
    background-color: rgba(255, 255, 255, 0.07);
    color: #ECEAF6;
}

.mesa-toolbar-button:disabled[b-gf8rb2nzaw] {
    opacity: 0.5;
    cursor: not-allowed;
}

.mesa-toolbar-button:focus-visible[b-gf8rb2nzaw] {
    outline: 2px solid #7C6CFF;
    outline-offset: 1px;
}

/* "Ver ficha": ação primária roxa cheia do mock. */
.selected-view-sheet-button[b-gf8rb2nzaw] {
    border-color: transparent;
    background-color: #7C6CFF;
    color: #fff;
}

.selected-view-sheet-button:hover:not(:disabled)[b-gf8rb2nzaw] {
    background-color: #8F80FF;
    color: #fff;
}

/* Remover / ações destrutivas: ghost vermelho. */
.mesa-toolbar-button-danger[b-gf8rb2nzaw] {
    border-color: rgba(247, 109, 125, 0.30);
    background-color: rgba(247, 109, 125, 0.06);
    color: #F76D7D;
}

.mesa-toolbar-button-danger:hover:not(:disabled)[b-gf8rb2nzaw] {
    background-color: rgba(247, 109, 125, 0.16);
    border-color: rgba(247, 109, 125, 0.45);
    color: #F76D7D;
}

/* O MudFileUpload ("Trocar imagem", token de jogador) envolve o botão num wrapper que encolhe ao
   conteúdo — força largura total para a pilha de ações ficar uniforme. */
.mesa-selected-card[b-gf8rb2nzaw]  .mud-file-upload {
    width: 100%;
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .selected-hp-fill[b-gf8rb2nzaw],
    .selected-hp-button[b-gf8rb2nzaw],
    .mesa-toolbar-button[b-gf8rb2nzaw] {
        transition: none;
    }
}
/* /Components/Shared/SoundtrackPanel.razor.rz.scp.css */
/*
    Skin "Combat Log Card" (claude.ai/design, opcao 3A, secao "TRILHA SONORA"). Escopado por CSS
    isolation do Blazor: todos os elementos abaixo sao escritos diretamente em
    SoundtrackPanel.razor, exceto o <input type=file> renderizado pelo componente <InputFile>
    (framework) — por isso a regra que o alcanca usa ::deep (footgun de CSS isolation pai/filho,
    ver memoria web_black_theme_design_system). O cabecalho usa a classe global
    .mesa-section-title (app.css) no padrao "rotulo + fio + acao".
*/
.soundtrack-panel[b-9jtbhb90za] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: var(--dc-font, 'Sora', sans-serif);
}

/* Acao "+ MP3" do cabecalho (design: verde #7dd3a8, 11px 600). O <label> inteiro e a superficie
   clicavel do upload. */
.soundtrack-add[b-9jtbhb90za] {
    color: var(--dc-green-name, #7dd3a8);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s ease;
}

.soundtrack-add:hover[b-9jtbhb90za] {
    color: var(--dc-green, #4ade80);
}

.soundtrack-add.is-uploading[b-9jtbhb90za] {
    cursor: progress;
    color: var(--dc-text-dim, #6b6580);
}

/* O <input type=file> e um filho do componente <InputFile> (framework) — precisa de ::deep para
   a regra escopada alcanca-lo (ver cabecalho). Escondido visualmente (o <label> pai e o alvo
   clicavel), mas mantido acessivel no fluxo/foco. */
.soundtrack-add[b-9jtbhb90za]  input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Barra de progresso do envio de MP3 (RF-01): mesmo idioma da linha de volume do card (trilho de
   4px arredondado + fill indigo), com rotulo em JetBrains Mono. width do fill vem inline do
   componente (_uploadPercent). */
.soundtrack-upload[b-9jtbhb90za] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.soundtrack-upload-track[b-9jtbhb90za] {
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: var(--dc-border, #2b2540);
    overflow: hidden;
}

.soundtrack-upload-fill[b-9jtbhb90za] {
    height: 100%;
    border-radius: 999px;
    background: var(--dc-indigo, #6366f1);
    transition: width 120ms ease;
}

.soundtrack-upload-label[b-9jtbhb90za] {
    font-family: var(--dc-mono, 'JetBrains Mono', monospace);
    font-size: 10.5px;
    color: var(--dc-text-dim, #6b6580);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Banner de desbloqueio de autoplay (RF-11). */
.soundtrack-autoplay-banner[b-9jtbhb90za] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--dc-roll-border, #244a7a);
    border-radius: 10px;
    background: var(--dc-roll-bg, #16233e);
    color: var(--dc-roll-blue-soft, #93b4e0);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: border-color 120ms ease;
}

.soundtrack-autoplay-banner:hover[b-9jtbhb90za] {
    border-color: var(--dc-roll-blue, #60a5fa);
}

.soundtrack-error[b-9jtbhb90za] {
    margin: 0;
    color: var(--dc-red, #f87171);
    font-size: 12px;
}

.soundtrack-empty[b-9jtbhb90za] {
    margin: 0;
    color: var(--dc-text-dim, #6b6580);
    font-size: 12px;
    font-style: italic;
}

/* --------------------------------------------------------------------------
   Player compacto (design 3A): card #1a1726/#2b2540 raio 12px, linha do
   transporte (tile ▶ 34px indigo + nome/status + 🗑) e linha de volume.
   -------------------------------------------------------------------------- */
.soundtrack-player[b-9jtbhb90za] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--dc-border, #2b2540);
    background: var(--dc-bg-card, #1a1726);
}

.soundtrack-player-row[b-9jtbhb90za] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.soundtrack-play[b-9jtbhb90za] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: none;
    background: var(--dc-indigo-bg, #2b2264);
    color: var(--dc-indigo-soft, #a5b4fc);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 120ms ease;
}

.soundtrack-play:hover:not(:disabled):not(.is-readonly)[b-9jtbhb90za] {
    background: var(--dc-indigo-border, #4338ca);
}

.soundtrack-play:disabled[b-9jtbhb90za] {
    opacity: 0.4;
    cursor: not-allowed;
}

.soundtrack-play.is-readonly[b-9jtbhb90za] {
    cursor: default;
}

.soundtrack-track-info[b-9jtbhb90za] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}

/* O <select> de trilhas E o nome em negrito do design ("Trilha 1"): aparencia nativa removida,
   caret ▾ desenhado a direita (mesma posicao do ▾ do design, encostado na lixeira). */
.soundtrack-select[b-9jtbhb90za] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-width: 0;
    padding: 0 18px 0 0;
    border: none;
    background: transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2355506a'/%3E%3C/svg%3E") right center no-repeat;
    color: var(--dc-text, #e8e4f2);
    font-family: var(--dc-font, 'Sora', sans-serif);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.soundtrack-select:disabled[b-9jtbhb90za] {
    cursor: default;
    background-image: none;
    opacity: 1;
}

.soundtrack-select:focus-visible[b-9jtbhb90za] {
    outline: 2px solid var(--dc-purple-bright, #7c3aed);
    outline-offset: 1px;
    border-radius: 4px;
}

.soundtrack-select option[b-9jtbhb90za] {
    background: var(--dc-bg-card, #1a1726);
    color: var(--dc-text, #e8e4f2);
}

.soundtrack-status[b-9jtbhb90za] {
    color: var(--dc-text-dim, #6b6580);
    font-size: 10.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botoes "fantasma" do card (🗑 e 🔊): so o glifo, cor #55506a, sem borda/fundo — como no design. */
.soundtrack-ghost-button[b-9jtbhb90za] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--dc-text-faint, #55506a);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 120ms ease;
}

.soundtrack-ghost-button:hover:not(:disabled)[b-9jtbhb90za] {
    color: var(--dc-text-soft, #b8b0cc);
}

.soundtrack-ghost-button:disabled[b-9jtbhb90za] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Linha de volume (design 3A): 🔊 + trilho de 4px com fill #6366f1 (gradiente inline calculado
   no componente) + percentual em JetBrains Mono. */
.soundtrack-volume[b-9jtbhb90za] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.soundtrack-volume-slider[b-9jtbhb90za] {
    appearance: none;
    -webkit-appearance: none;
    flex: 1 1 auto;
    min-width: 0;
    height: 4px;
    border-radius: 999px;
    background: var(--dc-border, #2b2540);
    cursor: pointer;
}

.soundtrack-volume-slider[b-9jtbhb90za]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: var(--dc-indigo-soft, #a5b4fc);
}

.soundtrack-volume-slider[b-9jtbhb90za]::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: var(--dc-indigo-soft, #a5b4fc);
}

.soundtrack-volume-value[b-9jtbhb90za] {
    flex-shrink: 0;
    font-family: var(--dc-mono, 'JetBrains Mono', monospace);
    font-size: 10.5px;
    color: var(--dc-text-dim, #6b6580);
    min-width: 34px;
    text-align: right;
}
/* /Components/Shared/TokenCreationDialog.razor.rz.scp.css */
/* Linha de um ataque cadastrado na ficha de monstro (req. 30 do PRD), dentro do MudListItem —
   nome/atributo/dano a esquerda, botao de remover a direita. */
.token-creation-attack-row[b-ezvmtq8rg9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.token-creation-attack-summary[b-ezvmtq8rg9] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Shared/TokenHealthBar.razor.rz.scp.css */
.token-health-bar[b-77j6vdf44h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    pointer-events: none;
}

.token-health-bar-track[b-77j6vdf44h] {
    width: 100%;
    height: 5px !important;
    border-radius: 999px;
}

.token-health-bar-label[b-77j6vdf44h] {
    font-size: 10px;
    font-weight: 600;
    color: var(--qf-text-primary, #F2F2F3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}
/* /Components/Shared/TokenMovementLog.razor.rz.scp.css */
/* Skin "Combat Log Card" (claude.ai/design, opcao 3A, secao "MOVIMENTAÇÕES"): card
   #1a1726/#2b2540 com uma linha por movimentacao — nome colorido por tipo, verbo "moveu" e as
   celulas de origem → destino em JetBrains Mono (destino num chip #211c31). O cabecalho usa a
   classe global .mesa-section-title (app.css) com o contador como acao a direita. */
.token-movement-log[b-tm7panoaq5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: var(--dc-font, 'Sora', sans-serif);
}

.token-movement-log-count[b-tm7panoaq5] {
    color: var(--dc-text-faint, #55506a);
    font-size: 11px;
    font-weight: 400;
}

.token-movement-log-empty[b-tm7panoaq5] {
    margin: 0;
    color: var(--dc-text-dim, #6b6580);
    font-size: 12px;
    font-style: italic;
}

.token-movement-log-card[b-tm7panoaq5] {
    background: var(--dc-bg-card, #1a1726);
    border: 1px solid var(--dc-border, #2b2540);
    border-radius: 12px;
    padding: 6px 12px;
    display: flex;
    flex-direction: column;
}

.token-movement-log-list[b-tm7panoaq5] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Expandido ("ver mais"): a lista completa ganha rolagem propria; o auto-scroll do code-behind
   mantem a movimentacao mais recente visivel. */
.token-movement-log-list.is-expanded[b-tm7panoaq5] {
    max-height: 9.5rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--dc-border, #2b2540) transparent;
}

.token-movement-log-item[b-tm7panoaq5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--dc-bg-inner, #211c31);
}

.token-movement-log-item:last-child[b-tm7panoaq5] {
    border-bottom: none;
}

.token-movement-log-name[b-tm7panoaq5] {
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.token-movement-log-name-enemy[b-tm7panoaq5] {
    color: var(--dc-red, #f87171);
}

.token-movement-log-name-ally[b-tm7panoaq5] {
    color: var(--dc-green-name, #7dd3a8);
}

.token-movement-log-name-neutral[b-tm7panoaq5] {
    color: var(--dc-text-soft, #b8b0cc);
}

.token-movement-log-verb[b-tm7panoaq5] {
    color: var(--dc-text-dim, #6b6580);
    font-size: 11.5px;
}

.token-movement-log-cells[b-tm7panoaq5] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--dc-mono, 'JetBrains Mono', monospace);
    font-size: 10.5px;
    flex-shrink: 0;
}

.token-movement-log-from[b-tm7panoaq5],
.token-movement-log-arrow[b-tm7panoaq5] {
    color: var(--dc-text-faint, #55506a);
}

.token-movement-log-to[b-tm7panoaq5] {
    background: var(--dc-bg-inner, #211c31);
    border: 1px solid var(--dc-border, #2b2540);
    color: var(--dc-text-soft, #b8b0cc);
    padding: 1px 7px;
    border-radius: 6px;
    font-weight: 700;
}

/* "ver mais 2 ▾" / "ver menos ▴" (design 3A): linha centrada discreta no rodape do card. */
.token-movement-log-more[b-tm7panoaq5] {
    border: none;
    border-top: 1px solid var(--dc-bg-inner, #211c31);
    background: transparent;
    color: var(--dc-text-faint, #55506a);
    font-family: inherit;
    font-size: 10.5px;
    padding: 6px 0 4px;
    text-align: center;
    cursor: pointer;
    transition: color .15s ease;
}

.token-movement-log-more:hover[b-tm7panoaq5] {
    color: var(--dc-text-soft, #b8b0cc);
}
/* /Components/Shared/TokenOnMap.razor.rz.scp.css */
.token-on-map[b-86lljjor6t] {
    position: absolute;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid var(--qf-surface, #121212);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--qf-primary-contrast, #FFFFFF);
    font-size: 13px;
    font-weight: 700;
    z-index: 2;
    cursor: pointer;
    transition: transform 120ms ease-out;
    /* Sombra projetada no mapa (peca "3D" pousada sobre o tabuleiro). Usa `filter` em vez de
       `box-shadow` de proposito: o estado .is-selected abaixo substitui o box-shadow do token
       pelo anel de destaque, entao a sombra de profundidade precisa vir de uma propriedade
       independente para nao sumir quando o token esta selecionado. */
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.55));
    /* Explicito (nao depender de heranca do ::deep em Mesa.razor.css): componentes filho tem seu
       proprio escopo de CSS-isolation, entao a regra que reativa pointer-events precisa estar
       aqui tambem — ver memoria "CSS-isolation child-component scoping bug". */
    pointer-events: auto;
}

/* Acabamento sutil sobre o token: um fio de luz no topo e um leve assentamento na base dao a
   sensacao de peca fisica sem cobrir a arte — a versao anterior ("domo de plastico", com reflexo
   branco a 60% e vinhete escuro pesado) lavava a imagem enviada do token (feedback do usuario).
   O anel interno escuro (inset 0 0 0 1px) separa a arte da borda colorida, dando profundidade.
   Puramente decorativo (pointer-events:none), por cima do conteudo (iniciais/imagem) e abaixo do
   feedback de dano/cura (.token-on-map-hitfx/popup, z-index 4). border-radius:inherit acompanha
   o formato do token. */
.token-on-map[b-86lljjor6t]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 28%, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, 0.18));
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.45),
        inset 0 1px 1px rgba(255, 255, 255, 0.18);
}

.token-on-map.is-interactive:hover[b-86lljjor6t] {
    transform: translate(-50%, -50%) scale(1.04);
}

/* "Peca levantada do tabuleiro": durante o arrasto o token cresce um pouco mais que o hover e a
   sombra se afasta/alonga, vendendo a ilusao de altura sobre o mapa. Especificidade de tres
   classes de proposito, para vencer o scale(1.04) de .is-interactive:hover (o ponteiro esta
   sempre sobre o token enquanto arrasta). */
.token-on-map.is-interactive.is-dragging[b-86lljjor6t] {
    transform: translate(-50%, -50%) scale(1.09);
    filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.55)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
}

.token-on-map.is-interactive[b-86lljjor6t] {
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.token-on-map.is-interactive:active[b-86lljjor6t] {
    cursor: grabbing;
}

/* Sem transicao em left/top: durante o arrasto livre o token deve acompanhar o ponteiro 1:1,
   sem atraso (ver memoria/comentario em Mesa.razor.HandleMapPointerMove). A transicao de
   "encaixe" ao soltar fica isolada em `.is-settling`, abaixo. */
.token-on-map.is-dragging[b-86lljjor6t] {
    cursor: grabbing;
    z-index: 5;
}

/* Aplicada so no intervalo entre soltar o token (posicao ja ajustada ao grid) e a confirmacao
   do servidor (ver Mesa.razor.HandleMapPointerUpAsync) — anima o "encaixe" na celula em vez de
   um salto instantaneo, dando feedback visual de que a movimentacao foi concluida. */
.token-on-map.is-settling[b-86lljjor6t] {
    transition: left 140ms cubic-bezier(0.22, 1, 0.36, 1), top 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* "Pouso" do token (ver TokenOnMap.razor.TriggerLandFx): squash-and-settle disparado quando o
   arrasto termina e o servidor confirma a posicao — a peca "assenta" na celula com um leve
   amortecimento em vez de simplesmente congelar. A animacao domina o transform enquanto roda,
   entao nao conflita com o scale do hover/arrasto. */
.token-on-map.is-landing[b-86lljjor6t] {
    animation: token-landing-squash-b-86lljjor6t 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes token-landing-squash-b-86lljjor6t {
    0% {
        transform: translate(-50%, -50%) scale(1.09);
    }
    55% {
        transform: translate(-50%, -50%) scale(0.94);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Anel de ondulacao que se expande e some sob o token ao pousar na celula (mesmo padrao keyed
   do feedback de dano/cura, ver TokenOnMap.razor._landFx) — reforca o ponto exato do encaixe. */
.token-on-map-landfx[b-86lljjor6t] {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    border: 2px solid var(--qf-rpg-gold-bright, #E8C96A);
    box-shadow: 0 0 12px rgba(232, 201, 106, 0.45);
    animation: token-landfx-ripple-b-86lljjor6t 450ms ease-out forwards;
}

@keyframes token-landfx-ripple-b-86lljjor6t {
    0% {
        opacity: 0.9;
        transform: scale(0.75);
    }
    100% {
        opacity: 0;
        transform: scale(1.6);
    }
}

/* Selecao (redesign, feedback do usuario: o anel dourado chapado de 3-5px era "uma borda amarela
   grande e feia"): um fio fino de destaque + halo suave de luz, discreto de perto e ainda
   localizavel com o mapa afastado. Vale para todos os tipos (a regra por tipo abaixo nao
   sobrescreve mais o box-shadow). */
.token-on-map.is-selected[b-86lljjor6t] {
    box-shadow:
        0 0 0 2px var(--qf-rpg-gold-bright, #E8C96A),
        0 0 12px 3px rgba(232, 201, 106, 0.35);
}

.token-on-map:focus-visible[b-86lljjor6t] {
    outline: none;
    box-shadow: 0 0 0 2px var(--qf-rpg-gold-border, rgba(201, 168, 76, 0.45));
}

/* Bordas por tipo (redesign): cada tipo carrega a propria cor de identidade em um aro fino e
   escuro — antes TODOS os tipos usavam o mesmo ocre (--qf-rpg-gold-dim), o que somava com o anel
   de selecao dourado num "borda amarela grande" (feedback do usuario). Tons deliberadamente
   dessaturados para a arte do token dominar; a leitura rapida de tipo vem da cor, nao da
   grossura. */
.token-on-map.token-type-player[b-86lljjor6t] {
    background-color: #1E1408;
    border-color: var(--qf-rpg-gold-dim, #7A6030);
    color: var(--qf-rpg-gold, #C9A84C);
}

.token-on-map.token-type-item[b-86lljjor6t] {
    background-color: #12303F;
    border-color: #35708C;
    color: var(--qf-info, #3FA7D6);
}

.token-on-map.token-type-bau[b-86lljjor6t] {
    overflow: hidden;
    background-color: var(--qf-rpg-parchment, #1C1810);
    border-color: #6B4A2B;
}

.token-on-map.token-type-monster[b-86lljjor6t] {
    background-color: #33141C;
    border-color: #8E3245;
}

/* Armadilha (pedido do usuario): so o mestre recebe tokens deste tipo (a Api filtra por papel),
   entao este visual "fantasma" — translucido e com borda tracejada laranja — comunica ao mestre
   que os jogadores NAO estao vendo este token, sem esconder nada dele mesmo. */
.token-on-map.token-type-trap[b-86lljjor6t] {
    background-color: rgba(58, 31, 13, 0.85);
    border: 2px dashed #D97B29;
    opacity: 0.8;
}

/* Chefe (req. novo): ocupa um bloco 2x2 (4 casas do grid) em vez de 1 — o tamanho em si vem do
   inline style calculado a partir de GridCellSize (ver TokenOnMap.razor.SizeInCells); esta regra
   e apenas o fallback para quando GridCellSize e null (sessao sem grid configurado ainda) e o
   destaque visual (borda mais grossa) que diferencia o chefe de um monstro comum. */
.token-on-map.token-type-monster.is-boss[b-86lljjor6t] {
    width: 88px;
    height: 88px;
    border-width: 3px;
}

/* Monstro derrotado (req. 16 do PRD, inferido por HpPercent == 0 — ver TokenOnMap.razor.IsDefeated):
   estilo dessaturado e translucido, mantendo o token no lugar (nao remove nem esconde) para que
   mestre e jogadores continuem vendo onde o inimigo caiu. Combina com .is-boss (chefe derrotado
   mantem o bloco 2x2, so perde a cor). */
.token-on-map.is-defeated[b-86lljjor6t] {
    filter: grayscale(1);
    opacity: 0.5;
    cursor: default;
}

.token-on-map.is-defeated.is-interactive:hover[b-86lljjor6t] {
    transform: translate(-50%, -50%);
}

/* Token oculto dos jogadores (pedido do usuario: toggle de visibilidade ao lado de "Remover"):
   so o mestre chega a renderizar um token Hidden (o jogador o filtra em VisibleTokens), entao
   este estilo e sempre uma dica visual "so voce ve isto" para o mestre — translucido, levemente
   dessaturado e com um anel tracejado, no mesmo espirito do tratamento translucido da armadilha.
   Mantido interativo (o mestre continua podendo mover/selecionar/reexibir). */
.token-on-map.is-hidden[b-86lljjor6t] {
    opacity: 0.45;
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.55)) grayscale(0.35);
    outline: 2px dashed var(--qf-border, #6b6b6b);
    outline-offset: 2px;
}

/* Destaque da celula de destino durante o arrasto de um token (req. 5 do PRD, task 9.0) — ver
   TokenOnMap.razor.HighlightPosition. Renderizado como irmao do token (nao aninhado nele), na
   mesma unidade de posicionamento em pixels de imagem que os proprios tokens, por isso usa a
   mesma centralizacao via transform: translate(-50%, -50%). z-index abaixo do token em arrasto
   (.is-dragging = 5) para o token continuar visivel por cima do destaque.

   Visual "mira de destino" (redesign): contorno sutil + cantoneiras douradas (::before) +
   brilho interno que respira (::after), no lugar do retangulo tracejado original. A transicao
   de left/top faz o marcador deslizar de uma celula a outra conforme o arrasto cruza as linhas
   do grid, em vez de teleportar. */
.token-on-map-target-cell[b-86lljjor6t] {
    --target-gold: var(--qf-rpg-gold-bright, #E8C96A);
    position: absolute;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    border-radius: 6px;
    pointer-events: none;
    z-index: 1;
    box-shadow:
        inset 0 0 0 1px var(--qf-rpg-gold-border, rgba(201, 168, 76, 0.4)),
        0 0 16px rgba(232, 201, 106, 0.2);
    background: radial-gradient(ellipse at center, rgba(232, 201, 106, 0.14), rgba(232, 201, 106, 0.03) 74%);
    transition: left 110ms ease-out, top 110ms ease-out;
    animation: token-target-appear-b-86lljjor6t 160ms ease-out;
}

/* Cantoneiras nos quatro cantos (duas tiras de gradiente por canto, 8 backgrounds no total):
   dimensionadas em % para acompanhar qualquer tamanho de celula, inclusive o bloco 2x2 do
   chefe. */
.token-on-map-target-cell[b-86lljjor6t]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--target-gold), var(--target-gold)),
        linear-gradient(var(--target-gold), var(--target-gold)),
        linear-gradient(var(--target-gold), var(--target-gold)),
        linear-gradient(var(--target-gold), var(--target-gold)),
        linear-gradient(var(--target-gold), var(--target-gold)),
        linear-gradient(var(--target-gold), var(--target-gold)),
        linear-gradient(var(--target-gold), var(--target-gold)),
        linear-gradient(var(--target-gold), var(--target-gold));
    background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
    background-size: 24% 2px, 2px 24%, 24% 2px, 2px 24%, 24% 2px, 2px 24%, 24% 2px, 2px 24%;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 3px rgba(232, 201, 106, 0.7));
}

/* Nucleo luminoso que "respira" enquanto o arrasto esta em curso — chama a atencao para a
   celula sem depender de bordas grossas. */
.token-on-map-target-cell[b-86lljjor6t]::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 4px;
    background: radial-gradient(ellipse at center, rgba(232, 201, 106, 0.2), transparent 72%);
    animation: token-target-breathe-b-86lljjor6t 1.2s ease-in-out infinite;
}

@keyframes token-target-appear-b-86lljjor6t {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes token-target-breathe-b-86lljjor6t {
    0%,
    100% {
        opacity: 0.45;
        transform: scale(0.96);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Respeita a preferencia de menos movimento do sistema: mantem o destaque visivel, mas sem
   pulso continuo nem deslize/entrada animados. */
@media (prefers-reduced-motion: reduce) {
    .token-on-map-target-cell[b-86lljjor6t],
    .token-on-map-target-cell[b-86lljjor6t]::after,
    .token-on-map.is-landing[b-86lljjor6t] {
        animation: none;
    }

    .token-on-map-target-cell[b-86lljjor6t],
    .token-on-map.is-settling[b-86lljjor6t] {
        transition: none;
    }

    /* Sem a animacao o anel de pouso ficaria congelado na tela ate ser removido — melhor nao
       exibi-lo. */
    .token-on-map-landfx[b-86lljjor6t] {
        display: none;
    }
}

.token-on-map-chest-image[b-86lljjor6t] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Imagem enviada do token (monstro/item/jogador), recortada no formato do token (circulo, via
   border-radius:inherit) sem precisar de overflow:hidden no proprio token — o que cliparia a
   barra de vida/etiqueta de nome/marcadores, posicionados fora dele. O domo plastico (::after)
   fica por cima, dando o mesmo acabamento 3D a foto. */
.token-on-map-image[b-86lljjor6t] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    pointer-events: none;
}

/* Icone default de item/monstro (pedido do usuario, ver TokenOnMap.razor.DefaultIconSrc): menor
   que o token para sobrar uma margem visivel da cor de fundo do tipo (token-type-item/monster
   acima), em vez de cobrir o circulo inteiro como a imagem enviada pelo usuario. */
.token-on-map-default-icon[b-86lljjor6t] {
    width: 66%;
    height: 66%;
    object-fit: contain;
    pointer-events: none;
}

.token-on-map-label[b-86lljjor6t] {
    pointer-events: none;
}

.token-on-map-name-tag[b-86lljjor6t] {
    position: absolute;
    top: 100%;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--qf-text-primary, #F2F2F3);
    background-color: rgba(18, 18, 18, 0.9);
    padding: 1px 6px;
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
}

/* Alca de ataque (pedido do usuario): so aparece no token selecionado quando o participante pode
   atacar por ele. Circulo pequeno no canto superior direito, cor de acento, para arrastar a seta
   de ataque ate um alvo. pointer-events:auto (padrao) para receber o pointerdown do arrasto.

   Ancorada POR FORA do corpo do token (left/bottom em calc(100% - 7px), so 7px de sobreposicao no
   canto), nunca sobre o centro. Bug corrigido (reportado "nao seleciona/move mais, so recarregando
   a tela"): o token e dimensionado pelo tamanho da celula do grid (ex.: 20px), e com o antigo
   top/right:-8px a alca de 22px COBRIA o centro clicavel do token — ao selecionar, a alca aparecia
   e todo clique/arrasto seguinte no token caia nela (iniciava mira de ataque) em vez de
   selecionar/mover; so recarregar a pagina (que desseleciona e remove a alca) destravava. */
.token-on-map-attack-handle[b-86lljjor6t] {
    position: absolute;
    left: calc(100% - 7px);
    bottom: calc(100% - 7px);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--qf-accent, #E4FF30);
    color: var(--qf-accent-contrast, #12130A);
    border: 2px solid var(--qf-surface, #121212);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    cursor: crosshair;
    z-index: 5;
    touch-action: none;
}

.token-on-map-attack-handle:hover[b-86lljjor6t] {
    filter: brightness(1.1);
}

.token-on-map-attack-handle .mud-icon-root[b-86lljjor6t] {
    font-size: 15px;
}

/* Marcadores de condicao/efeito ativo (req. 28 do PRD), empilhados acima do token para nao
   competir com o nome/iniciais no centro do circulo. */
.token-on-map-effects[b-86lljjor6t] {
    position: absolute;
    top: -18px;
    display: flex;
    gap: 2px;
    pointer-events: none;
}

/* Barra de vida em tempo real (req. 27 do PRD), posicionada abaixo do token (e abaixo da
   etiqueta de nome, quando presente) para nao cobrir as iniciais. */
.token-on-map-health[b-86lljjor6t] {
    position: absolute;
    top: 100%;
    margin-top: 4px;
    width: 100%;
    pointer-events: none;
}

/* Feedback visual de dano/cura: anel que pulsa e some sobre o token, disparado quando o HP do
   personagem muda (ver TriggerHitFx em TokenOnMap.razor). */
.token-on-map-hitfx[b-86lljjor6t] {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 4;
    animation: token-hitfx-pulse-b-86lljjor6t 500ms ease-out forwards;
}

.token-on-map-hitfx.is-damage[b-86lljjor6t] {
    box-shadow: var(--qf-danger, #E0566B) 0 0 0 4px;
}

.token-on-map-hitfx.is-heal[b-86lljjor6t] {
    box-shadow: var(--qf-success, #3DAA70) 0 0 0 4px;
}

/* Critico (pedido do usuario: "variantes de cor... critico dourado/laranja, maior"): anel mais
   grosso e mais afastado do token que o dano comum, para reforcar a sensacao de impacto maior. */
.token-on-map-hitfx.is-critical[b-86lljjor6t] {
    inset: -7px;
    box-shadow: var(--qf-rpg-gold-bright, #E8C96A) 0 0 0 5px;
}

/* Erro/miss (pedido do usuario: "cinza, texto 'Errou'"): anel discreto, sem a mesma intensidade
   visual de um acerto — reforca que nada aconteceu com o alvo. */
.token-on-map-hitfx.is-miss[b-86lljjor6t] {
    box-shadow: var(--qf-text-secondary, #9C9CA3) 0 0 0 3px;
    opacity: 0.7;
}

@keyframes token-hitfx-pulse-b-86lljjor6t {
    0% {
        opacity: 1;
        transform: scale(0.85);
    }
    100% {
        opacity: 0;
        transform: scale(1.4);
    }
}

/* Numero flutuante (+cura/-dano) que sobe e desaparece acima do token. */
.token-on-map-popup[b-86lljjor6t] {
    position: absolute;
    bottom: 100%;
    left: 50%;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    z-index: 4;
    animation: token-popup-float-b-86lljjor6t 700ms ease-out forwards;
}

.token-on-map-popup.is-damage[b-86lljjor6t] {
    color: var(--qf-danger-text, #F2879A);
}

.token-on-map-popup.is-heal[b-86lljjor6t] {
    color: var(--qf-success-text, #6FE3A4);
}

/* Critico: dourado/laranja e maior que o popup de dano comum (pedido do usuario). */
.token-on-map-popup.is-critical[b-86lljjor6t] {
    color: var(--qf-rpg-gold-bright, #E8C96A);
    font-size: 16px;
}

/* Erro/miss: cinza e discreto, sem o peso visual (font-weight normal) de um acerto. */
.token-on-map-popup.is-miss[b-86lljjor6t] {
    color: var(--qf-text-secondary, #9C9CA3);
    font-weight: 600;
}

@keyframes token-popup-float-b-86lljjor6t {
    0% {
        opacity: 0;
        transform: translate(-50%, 0);
    }
    15% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -28px);
    }
}
/* /Components/Shared/TokenPalette.razor.rz.scp.css */
/* Skin "Combat Log Card" (claude.ai/design, opcao 3A, secao "TOKENS INICIAIS"): grid de 4
   colunas com cards #1a1726/#2b2540 (raio 10px), emoji 18px e rotulo 10.5px #b8b0cc. O cabecalho
   da secao usa a classe global .mesa-section-title (app.css) no padrao "rotulo + fio". O estado
   selecionado ("modo posicionar" ativo) reusa o tratamento do card selecionado do modal 4A
   (borda #6d28d9 + anel rgba(109,40,217,.35)) — o design nao define selecao para tokens, este e
   o affordance de selecao do proprio design system. */

.token-palette[b-nngskzvu8w] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: transparent;
    font-family: var(--dc-font, 'Sora', sans-serif);
}

.token-palette-grid[b-nngskzvu8w] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.token-palette-item[b-nngskzvu8w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 4px;
    border-radius: 10px;
    border: 1px solid var(--dc-border, #2b2540);
    background: var(--dc-bg-card, #1a1726);
    font-family: inherit;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.token-palette-item:hover:not(:disabled)[b-nngskzvu8w] {
    border-color: var(--dc-border-hover, #4a3f6b);
}

.token-palette-item:focus-visible[b-nngskzvu8w] {
    outline: 2px solid var(--dc-purple-bright, #7c3aed);
    outline-offset: 2px;
}

.token-palette-item:disabled[b-nngskzvu8w] {
    opacity: 0.5;
    cursor: not-allowed;
}

.token-palette-item.is-active[b-nngskzvu8w] {
    background: var(--dc-bg-inner, #211c31);
    border-color: var(--dc-purple, #6d28d9);
    box-shadow: 0 0 0 1px rgba(109, 40, 217, 0.35);
}

.token-palette-emoji[b-nngskzvu8w] {
    font-size: 18px;
    line-height: 1;
}

.token-palette-label[b-nngskzvu8w] {
    color: var(--dc-text-soft, #b8b0cc);
    font-size: 10.5px;
    font-weight: 600;
}

.token-palette-hint[b-nngskzvu8w] {
    font-size: 12px;
    color: var(--dc-text-dim, #6b6580);
    margin: 0;
}

.token-palette-cancel[b-nngskzvu8w] {
    border: none;
    background: none;
    padding: 0;
    color: var(--dc-green-name, #7dd3a8);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    transition: color .15s ease;
}

.token-palette-cancel:hover[b-nngskzvu8w] {
    color: var(--dc-text, #e8e4f2);
}

@media (prefers-reduced-motion: reduce) {
    .token-palette-item[b-nngskzvu8w] {
        transition-duration: .01ms !important;
    }
}
/* /Components/Shared/WeatherOverlay.razor.rz.scp.css */
/* Overlay de clima (feature prd-clima-no-mapa, techspec.md "Front-end - WeatherOverlay").

   Contexto de empilhamento: o overlay vive DENTRO de .mesa-map-area (z-index: 0, stacking
   context proprio da base da mesa - ver escala documentada em Mesa.razor.css), como irmao de
   .mesa-map-viewport. O viewport tem transform (zoom/pan), o que o torna um stacking context
   ATOMICO pintado no nivel "auto" - o fog (z-index: 4 em FogCanvas.razor.css) fica achatado la
   dentro e nunca escapa. Portanto z-index 3 aqui fica acima do viewport inteiro (mapa + grid +
   tokens + fog) e abaixo dos controles de zoom (.mesa-zoom-controls, z-index: 4 no mesmo
   contexto). Toolbar (11) e paineis glass (10) vivem no nivel da pagina, sempre acima de tudo
   que esta dentro de .mesa-map-area.

   Performance (restricao do PRD): os keyframes animam APENAS transform/opacity (compositor/GPU,
   sem layout nem paint por frame); will-change: transform somente nas particulas; contain:
   strict isola layout/paint/size do overlay do resto da pagina. */
.weather-overlay[b-kf7jm6ojar] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
    z-index: 3;
}

/* ------------------------------- Chuva (RF-1.2) -------------------------------
   Gota: traco fino com gradiente vertical, inclinado no angulo da queda diagonal
   (rotate fixo nos keyframes, coerente com a proporcao translate 18vh x 118vh).
   Posicao/tempo/escala vem das custom properties por indice (WeatherOverlay.razor). */
.drop[b-kf7jm6ojar] {
    position: absolute;
    top: -8%;
    left: var(--x);
    width: 2px;
    height: 44px;
    border-radius: 999px;
    background: linear-gradient(to bottom, rgba(173, 203, 255, 0), rgba(198, 223, 255, 0.75));
    opacity: 0;
    will-change: transform;
    animation: rain-fall-b-kf7jm6ojar var(--duration) linear var(--delay) infinite;
}

@keyframes rain-fall-b-kf7jm6ojar {
    0% {
        transform: translate(0, 0) rotate(9deg) scale(var(--scale));
        opacity: 0;
    }

    10% {
        opacity: 0.7;
    }

    90% {
        opacity: 0.7;
    }

    100% {
        transform: translate(18vh, 118vh) rotate(9deg) scale(var(--scale));
        opacity: 0;
    }
}

/* ------------------------------- Vento (RF-1.3) -------------------------------
   Folha: 4 formas (border-radius/clip-path) x cores base distintas, variadas por indice via
   filter: hue-rotate(--hue) (filtro ESTATICO - nao anima, so tinge). Trajetoria: translateX
   atravessando a tela, translateY oscilando (senoide aproximada pelos keyframes 25/50/75%,
   amplitude --amp) e rotacao acumulada (--spin voltas, sentido alternado por indice). */
.leaf[b-kf7jm6ojar] {
    position: absolute;
    top: var(--y);
    left: -6%;
    width: 16px;
    height: 12px;
    background: #97a53c;
    filter: hue-rotate(var(--hue));
    opacity: 0;
    will-change: transform;
    animation: leaf-drift-b-kf7jm6ojar var(--duration) linear var(--delay) infinite;
}

/* Folha classica (ponta dupla). */
.leaf-shape-0[b-kf7jm6ojar] {
    border-radius: 0 100% 0 100%;
}

/* Folha oval alongada, tom ambar. */
.leaf-shape-1[b-kf7jm6ojar] {
    height: 9px;
    border-radius: 999px;
    background: #b08a2e;
}

/* Losango (folha vista de lado), verde mais frio. */
.leaf-shape-2[b-kf7jm6ojar] {
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    background: #7c9a35;
}

/* Folha classica espelhada, tom castanho (folha seca). */
.leaf-shape-3[b-kf7jm6ojar] {
    border-radius: 100% 0 100% 0;
    background: #9a6b2f;
}

@keyframes leaf-drift-b-kf7jm6ojar {
    0% {
        transform: translate(0, 0) rotate(0turn) scale(var(--scale));
        opacity: 0;
    }

    6% {
        opacity: 0.85;
    }

    25% {
        transform: translate(28vw, var(--amp)) rotate(calc(var(--spin) * 0.25turn)) scale(var(--scale));
    }

    50% {
        transform: translate(56vw, calc(var(--amp) * -1)) rotate(calc(var(--spin) * 0.5turn)) scale(var(--scale));
    }

    75% {
        transform: translate(84vw, calc(var(--amp) * 0.6)) rotate(calc(var(--spin) * 0.75turn)) scale(var(--scale));
    }

    94% {
        opacity: 0.85;
    }

    100% {
        transform: translate(115vw, calc(var(--amp) * -0.3)) rotate(calc(var(--spin) * 1turn)) scale(var(--scale));
        opacity: 0;
    }
}

/* ------------------------------- Nevoa (rala/densa) -------------------------------
   Nuvem: silhueta IRREGULAR composta por 4-5 radial-gradients sobrepostos (lobulos de tamanhos
   e posicoes distintas, morrendo em transparente) - parece nuvem real, sem filter: blur (a
   suavidade vem dos gradientes, que nao custam nada por frame). Ha 4 silhuetas
   (.puff-shape-0..3, distribuidas por i % 4 no markup); a cor vem de --mist-rgb no container,
   entao a densa so troca a tonalidade. Cada nuvem atravessa a tela bem devagar (translateX em
   vw), com deriva vertical senoidal (--bob) e respiracao de opacidade ate o pico --alpha por
   indice. A diferenca entre .weather-mist (rala) e .weather-mist-dense vem da quantidade de
   nuvens (16 vs 28 em WeatherOverlay.razor - espacamento curto), da faixa de --alpha e do tom
   mais acinzentado. Mesma disciplina de performance da chuva/vento: keyframes so de
   transform/opacity. */
.weather-mist[b-kf7jm6ojar] {
    --mist-rgb: 205 218 236;
}

.weather-mist-dense[b-kf7jm6ojar] {
    --mist-rgb: 198 206 222;
}

.puff[b-kf7jm6ojar] {
    position: absolute;
    top: var(--y);
    left: 0;
    width: 55vw;
    height: 46vh;
    opacity: 0;
    will-change: transform, opacity;
    animation: mist-drift-b-kf7jm6ojar var(--duration) linear var(--delay) infinite;
}

/* Cumulus: lobulo grande a esquerda, decrescendo em degraus para a direita. */
.puff-shape-0[b-kf7jm6ojar] {
    background:
        radial-gradient(42% 55% at 28% 58%, rgb(var(--mist-rgb) / 0.62), transparent 72%),
        radial-gradient(34% 46% at 52% 38%, rgb(var(--mist-rgb) / 0.55), transparent 74%),
        radial-gradient(30% 40% at 72% 58%, rgb(var(--mist-rgb) / 0.50), transparent 72%),
        radial-gradient(24% 30% at 88% 46%, rgb(var(--mist-rgb) / 0.40), transparent 70%);
}

/* Banco baixo e alongado, com uma corcova deslocada. */
.puff-shape-1[b-kf7jm6ojar] {
    background:
        radial-gradient(50% 40% at 40% 62%, rgb(var(--mist-rgb) / 0.58), transparent 74%),
        radial-gradient(28% 34% at 18% 46%, rgb(var(--mist-rgb) / 0.48), transparent 70%),
        radial-gradient(32% 46% at 66% 42%, rgb(var(--mist-rgb) / 0.52), transparent 72%),
        radial-gradient(22% 26% at 84% 62%, rgb(var(--mist-rgb) / 0.42), transparent 70%);
}

/* Duas corcovas com franjas ralas nas pontas. */
.puff-shape-2[b-kf7jm6ojar] {
    background:
        radial-gradient(36% 50% at 32% 42%, rgb(var(--mist-rgb) / 0.58), transparent 72%),
        radial-gradient(38% 44% at 62% 60%, rgb(var(--mist-rgb) / 0.55), transparent 74%),
        radial-gradient(24% 30% at 12% 60%, rgb(var(--mist-rgb) / 0.44), transparent 70%),
        radial-gradient(26% 32% at 86% 40%, rgb(var(--mist-rgb) / 0.46), transparent 70%);
}

/* Farrapo esgarcado: nucleo largo com fiapos acima e abaixo. */
.puff-shape-3[b-kf7jm6ojar] {
    background:
        radial-gradient(46% 36% at 50% 50%, rgb(var(--mist-rgb) / 0.55), transparent 74%),
        radial-gradient(26% 40% at 22% 38%, rgb(var(--mist-rgb) / 0.48), transparent 70%),
        radial-gradient(28% 36% at 76% 62%, rgb(var(--mist-rgb) / 0.50), transparent 72%),
        radial-gradient(18% 24% at 64% 30%, rgb(var(--mist-rgb) / 0.40), transparent 68%),
        radial-gradient(20% 26% at 38% 70%, rgb(var(--mist-rgb) / 0.44), transparent 70%);
}

@keyframes mist-drift-b-kf7jm6ojar {
    0% {
        transform: translate(-60vw, 0) scale(var(--scale));
        opacity: 0;
    }

    14% {
        opacity: var(--alpha);
    }

    50% {
        transform: translate(25vw, var(--bob)) scale(var(--scale));
        opacity: var(--alpha);
    }

    86% {
        opacity: var(--alpha);
    }

    100% {
        transform: translate(110vw, calc(var(--bob) * -0.4)) scale(var(--scale));
        opacity: 0;
    }
}

/* Acessibilidade (restricao do PRD/techspec): usuarios com prefers-reduced-motion nao veem as
   animacoes - as particulas somem por completo (o clima continua sincronizado no estado; apenas
   o efeito visual e suprimido localmente). */
@media (prefers-reduced-motion: reduce) {
    .drop[b-kf7jm6ojar],
    .leaf[b-kf7jm6ojar],
    .puff[b-kf7jm6ojar] {
        animation: none;
        visibility: hidden;
    }
}